Audio Player

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import 'media-chrome'

interface Props {
  class?: HTMLAttributes['class']
  style?: HTMLAttributes['style']
}

const props = defineProps<Props>()
</script>

<template>
  <media-controller
    audio
    data-slot="audio-player"
    :class="props.class"
    :style="[
      {
        '--media-background-color': 'transparent',
        '--media-button-icon-height': '1rem',
        '--media-button-icon-width': '1rem',
        '--media-control-background': 'transparent',
        '--media-control-hover-background': 'hsl(var(--accent))',
        '--media-control-padding': '0',
        '--media-font': 'var(--font-sans)',
        '--media-font-size': '10px',
        '--media-icon-color': 'currentColor',
        '--media-preview-time-background': 'hsl(var(--background))',
        '--media-preview-time-border-radius': 'var(--radius-md)',
        '--media-preview-time-text-shadow': 'none',
        '--media-primary-color': 'hsl(var(--primary))',
        '--media-range-bar-color': 'hsl(var(--primary))',
        '--media-range-track-background': 'hsl(var(--secondary))',
        '--media-secondary-color': 'hsl(var(--secondary))',
        '--media-text-color': 'hsl(var(--foreground))',
        '--media-tooltip-arrow-display': 'none',
        '--media-tooltip-background': 'hsl(var(--background))',
        '--media-tooltip-border-radius': 'var(--radius-md)',
      },
      props.style,
    ]"
  >
    <slot />
  </media-controller>
</template>

<script setup lang="ts">
import type { Experimental_SpeechResult as SpeechResult } from 'ai'
import type { AudioHTMLAttributes } from 'vue'
import { computed } from 'vue'

interface Props extends /* @vue-ignore */ AudioHTMLAttributes {
  src?: string
  data?: SpeechResult['audio']
}

const props = defineProps<Props>()

const audioSrc = computed(() => {
  if (props.src) {
    return props.src
  }
  if (props.data) {
    return `data:${props.data.mediaType};base64,${props.data.base64}`
  }
  return undefined
})
</script>

<template>
  <audio
    v-bind="{ ...$attrs, slot: 'media' }"
    data-slot="audio-player-element"
    :src="audioSrc"
  />
</template>

<script setup lang="ts">
import type { MediaControlBar } from 'media-chrome'
import { ButtonGroup } from '@repo/shadcn-vue/components/ui/button-group'

interface Props extends /* @vue-ignore */ Partial<MediaControlBar> {
  // Add any media-chrome control bar props if needed
}

defineProps<Props>()
</script>

<template>
  <media-control-bar data-slot="audio-player-control-bar">
    <ButtonGroup orientation="horizontal">
      <slot />
    </ButtonGroup>
  </media-control-bar>
</template>

<script setup lang="ts">
import type { MediaPlayButton } from 'media-chrome'
import type { HTMLAttributes } from 'vue'
import { Button } from '@repo/shadcn-vue/components/ui/button'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props extends /* @vue-ignore */ Partial<MediaPlayButton> {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <Button
    as-child
    size="icon-sm"
    variant="outline"
  >
    <media-play-button
      :class="cn('bg-transparent', props.class)"
      data-slot="audio-player-play-button"
    />
  </Button>
</template>

<script setup lang="ts">
import type { MediaSeekBackwardButton } from 'media-chrome'
import { Button } from '@repo/shadcn-vue/components/ui/button'

interface Props extends /* @vue-ignore */ Partial<MediaSeekBackwardButton> {
  seekOffset?: number
}

const props = withDefaults(defineProps<Props>(), {
  seekOffset: 10,
})
</script>

<template>
  <Button
    as-child
    size="icon-sm"
    variant="outline"
  >
    <media-seek-backward-button
      data-slot="audio-player-seek-backward-button"
      :seekoffset="props.seekOffset"
    />
  </Button>
</template>

<script setup lang="ts">
import type { MediaSeekForwardButton } from 'media-chrome'
import { Button } from '@repo/shadcn-vue/components/ui/button'

interface Props extends /* @vue-ignore */ Partial<MediaSeekForwardButton> {
  seekOffset?: number
}

const props = withDefaults(defineProps<Props>(), {
  seekOffset: 20,
})
</script>

<template>
  <Button
    as-child
    size="icon-sm"
    variant="outline"
  >
    <media-seek-forward-button
      data-slot="audio-player-seek-forward-button"
      :seekoffset="props.seekOffset"
    />
  </Button>
</template>

<script setup lang="ts">
import type { MediaTimeDisplay } from 'media-chrome'
import type { HTMLAttributes } from 'vue'
import { ButtonGroupText } from '@repo/shadcn-vue/components/ui/button-group'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props extends /* @vue-ignore */ Partial<MediaTimeDisplay> {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <ButtonGroupText
    as-child
    class="bg-transparent"
  >
    <media-time-display
      :class="cn('tabular-nums', props.class)"
      data-slot="audio-player-time-display"
    />
  </ButtonGroupText>
</template>

<script setup lang="ts">
import type { MediaTimeRange } from 'media-chrome'
import type { HTMLAttributes } from 'vue'
import { ButtonGroupText } from '@repo/shadcn-vue/components/ui/button-group'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props extends /* @vue-ignore */ Partial<MediaTimeRange> {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <ButtonGroupText
    as-child
    class="bg-transparent"
  >
    <media-time-range
      :class="cn('', props.class)"
      data-slot="audio-player-time-range"
    />
  </ButtonGroupText>
</template>

<script setup lang="ts">
import type { MediaDurationDisplay } from 'media-chrome'
import type { HTMLAttributes } from 'vue'
import { ButtonGroupText } from '@repo/shadcn-vue/components/ui/button-group'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props extends /* @vue-ignore */ Partial<MediaDurationDisplay> {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <ButtonGroupText
    as-child
    class="bg-transparent"
  >
    <media-duration-display
      :class="cn('tabular-nums', props.class)"
      data-slot="audio-player-duration-display"
    />
  </ButtonGroupText>
</template>

<script setup lang="ts">
import type { MediaMuteButton } from 'media-chrome'
import type { HTMLAttributes } from 'vue'
import { ButtonGroupText } from '@repo/shadcn-vue/components/ui/button-group'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props extends /* @vue-ignore */ Partial<MediaMuteButton> {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <ButtonGroupText
    as-child
    class="bg-transparent"
  >
    <media-mute-button
      :class="cn('', props.class)"
      data-slot="audio-player-mute-button"
    />
  </ButtonGroupText>
</template>

<script setup lang="ts">
import type { MediaVolumeRange } from 'media-chrome'
import type { HTMLAttributes } from 'vue'
import { ButtonGroupText } from '@repo/shadcn-vue/components/ui/button-group'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props extends /* @vue-ignore */ Partial<MediaVolumeRange> {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <ButtonGroupText
    as-child
    class="bg-transparent"
  >
    <media-volume-range
      :class="cn('', props.class)"
      data-slot="audio-player-volume-range"
    />
  </ButtonGroupText>
</template>