Blocks

<script setup lang="ts">
import { Card } from '@/components/ui/card'
import { ScrollArea } from '@/components/ui/scroll-area'
import Player from './Player.vue'
import SongListItem from './SongListItem.vue'

const exampleTracks = [
  { id: '0', name: 'II - 00', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/00.mp3' },
  { id: '1', name: 'II - 01', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/01.mp3' },
  { id: '2', name: 'II - 02', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/02.mp3' },
  { id: '3', name: 'II - 03', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/03.mp3' },
  { id: '4', name: 'II - 04', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/04.mp3' },
  { id: '5', name: 'II - 05', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/05.mp3' },
  { id: '6', name: 'II - 06', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/06.mp3' },
  { id: '7', name: 'II - 07', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/07.mp3' },
  { id: '8', name: 'II - 08', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/08.mp3' },
  { id: '9', name: 'II - 09', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/09.mp3' },
]
</script>

<template>
  <Card class="mx-auto w-full overflow-hidden p-0">
    <div class="flex flex-col lg:h-[180px] lg:flex-row">
      <div class="bg-muted/50 flex flex-col overflow-hidden lg:h-full lg:w-64">
        <ScrollArea class="h-48 w-full lg:h-full">
          <div class="space-y-1 p-3">
            <SongListItem
              v-for="(song, index) in exampleTracks"
              :key="song.id"
              :song="song"
              :track-number="index + 1"
            />
          </div>
        </ScrollArea>
      </div>

      <Player />
    </div>
  </Card>
</template>

<script setup lang="ts">
import {
  AudioPlayerButton,
  AudioPlayerDuration,
  AudioPlayerProgress,
  AudioPlayerTime,
  useAudioPlayer,
} from '@/components/elevenlabs-ui/audio-player'
import { Card } from '@/components/ui/card'
import { onMounted } from 'vue'

const exampleTracks = [
  { id: '0', name: 'II - 00', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/00.mp3' },
  { id: '1', name: 'II - 01', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/01.mp3' },
  { id: '2', name: 'II - 02', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/02.mp3' },
  { id: '3', name: 'II - 03', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/03.mp3' },
  { id: '4', name: 'II - 04', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/04.mp3' },
  { id: '5', name: 'II - 05', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/05.mp3' },
  { id: '6', name: 'II - 06', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/06.mp3' },
  { id: '7', name: 'II - 07', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/07.mp3' },
  { id: '8', name: 'II - 08', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/08.mp3' },
  { id: '9', name: 'II - 09', url: 'https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/09.mp3' },
]

const player = useAudioPlayer<{ name: string }>()
const track = exampleTracks[9]

const trackItem = {
  id: track.id,
  src: track.url,
  data: track,
}

onMounted(() => {
  player.setActiveItem(trackItem)
})
</script>

<template>
  <Card class="w-full overflow-hidden p-4">
    <div class="space-y-4">
      <div>
        <h3 class="text-base font-semibold">
          {{ player.activeItem.value?.data?.name || track.name }}
        </h3>
      </div>
      <div class="flex items-center gap-3">
        <AudioPlayerButton
          variant="outline"
          size="default"
          class="h-10 w-10 shrink-0"
          :item="trackItem"
        />
        <div class="flex flex-1 items-center gap-2">
          <AudioPlayerTime class="text-xs tabular-nums" />
          <AudioPlayerProgress class="flex-1" />
          <AudioPlayerDuration class="text-xs tabular-nums" />
        </div>
      </div>
    </div>
  </Card>
</template>

<script setup lang="ts">
import type { AudioPlayerItem } from '@/components/elevenlabs-ui/audio-player'
import { AudioPlayerButton, useAudioPlayer } from '@/components/elevenlabs-ui/audio-player'
import { cn } from '@/lib/utils'
import { computed } from 'vue'

export interface Track {
  id: string
  name: string
  url: string
}

const props = defineProps<{
  track: Track
}>()

const player = useAudioPlayer<Track>()

const item = computed<AudioPlayerItem<Track> | undefined>(() => {
  if (!player.activeItem.value)
    return undefined
  return {
    id: props.track.id,
    src: props.track.url,
    data: props.track,
  }
})

const buttonClass = computed(() =>
  cn(
    'border-border h-14 w-14 rounded-full transition-all duration-300',
    player.isPlaying.value
      ? 'bg-foreground/10 hover:bg-foreground/15 border-foreground/30 dark:bg-primary/20 dark:hover:bg-primary/30 dark:border-primary/50'
      : 'bg-background hover:bg-muted',
  ),
)
</script>

<template>
  <AudioPlayerButton
    variant="outline"
    size="icon"
    :item="item"
    :class="buttonClass"
  />
</template>