<script setup lang="ts">
import { computed } from 'vue'
import VolumeSlider from '@/components/library/VolumeSlider.vue'
import { useTrackStore } from '@/store/TrackStore'

const trackStore = useTrackStore()

const muted = computed<boolean>({
  get() {
    return trackStore.muted
  },
  set(muted: boolean) {
    trackStore.setMuted(muted)
  },
})

const volume = computed<number>({
  get() {
    return trackStore.volume
  },
  set(volume: number) {
    trackStore.setVolume(volume)
  },
})
</script>

<template>
  <VolumeSlider v-model:muted="muted" v-model:volume="volume" />
</template>

<style scoped>
</style>
