{"version":3,"file":"Player-b0cc58b4.js","sources":["../../src/components/audio/VolumeControl.vue","../../src/components/audio/Player.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { usePlayer } from '~/composables/audio/player'\nimport { useTimeoutFn } from '@vueuse/core'\nimport { ref, computed } from 'vue'\nimport { useI18n } from 'vue-i18n'\n\nconst { volume, mute } = usePlayer()\nconst expanded = ref(false)\n\nconst { t } = useI18n()\nconst labels = computed(() => ({\n  unmute: t('components.audio.VolumeControl.button.unmute'),\n  mute: t('components.audio.VolumeControl.button.mute'),\n  slider: t('components.audio.VolumeControl.label.slider')\n}))\n\nconst { start, stop } = useTimeoutFn(() => (expanded.value = false), 500, { immediate: false })\n\nconst handleOver = () => {\n  stop()\n  expanded.value = true\n}\n\nconst handleLeave = () => {\n  stop()\n  start()\n}\n\nconst scroll = (event: WheelEvent) => {\n  volume.value += -Math.sign(event.deltaY) * 0.05\n}\n</script>\n\n<template>\n  <button\n    class=\"circular control button\"\n    :class=\"['component-volume-control', {'expanded': expanded}]\"\n    @click.prevent.stop=\"\"\n    @mouseover=\"handleOver\"\n    @mouseleave=\"handleLeave\"\n    @wheel.stop.prevent=\"scroll\"\n  >\n    <span\n      v-if=\"volume === 0\"\n      role=\"button\"\n      :title=\"labels.unmute\"\n      :aria-label=\"labels.unmute\"\n      @click.prevent.stop=\"mute\"\n    >\n      <i class=\"volume off icon\" />\n    </span>\n    <span\n      v-else-if=\"volume < 0.5\"\n      role=\"button\"\n      :title=\"labels.mute\"\n      :aria-label=\"labels.mute\"\n      @click.prevent.stop=\"mute\"\n    >\n      <i class=\"volume down icon\" />\n    </span>\n    <span\n      v-else\n      role=\"button\"\n      :title=\"labels.mute\"\n      :aria-label=\"labels.mute\"\n      @click.prevent.stop=\"mute\"\n    >\n      <i class=\"volume up icon\" />\n    </span>\n    <div class=\"popup\">\n      <label\n        for=\"volume-slider\"\n        class=\"visually-hidden\"\n      >{{ labels.slider }}</label>\n      <input\n        id=\"volume-slider\"\n        v-model=\"volume\"\n        type=\"range\"\n        step=\"any\"\n        min=\"0\"\n        max=\"1\"\n      >\n    </div>\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { usePlayer } from '~/composables/audio/player'\nimport { useQueue } from '~/composables/audio/queue'\n\nimport { useMouse, useWindowSize } from '@vueuse/core'\nimport { computed, ref } from 'vue'\nimport { useStore } from '~/store'\nimport { useI18n } from 'vue-i18n'\n\nimport onKeyboardShortcut from '~/composables/onKeyboardShortcut'\nimport time from '~/utils/time'\n\nimport TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'\nimport TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'\nimport PlayerControls from './PlayerControls.vue'\nimport VolumeControl from './VolumeControl.vue'\n\nconst {\n  LoopingMode,\n  initializeFirstTrack,\n  isPlaying,\n  mute,\n  volume,\n  toggleLooping,\n  looping,\n  seekBy,\n  seekTo,\n  currentTime,\n  duration,\n  bufferProgress,\n  loading: isLoadingAudio\n} = usePlayer()\n\nconst {\n  playPrevious,\n  playNext,\n  queue,\n  currentIndex,\n  currentTrack,\n  isShuffled,\n  shuffle,\n  clear\n} = useQueue()\n\nconst store = useStore()\nconst { t } = useI18n()\n\nconst toggleMobilePlayer = () => {\n  store.commit('ui/queueFocused', ['queue', 'player'].includes(store.state.ui.queueFocused as string) ? null : 'player')\n}\n\n// Key binds\nonKeyboardShortcut('e', toggleMobilePlayer)\nonKeyboardShortcut('p', () => { isPlaying.value = !isPlaying.value })\nonKeyboardShortcut('s', shuffle)\nonKeyboardShortcut('q', clear)\nonKeyboardShortcut('m', mute)\nonKeyboardShortcut('l', toggleLooping)\nonKeyboardShortcut('f', () => store.dispatch('favorites/toggle', currentTrack.value?.id))\nonKeyboardShortcut('escape', () => store.commit('ui/queueFocused', null))\n\nonKeyboardShortcut(['shift', 'up'], () => (volume.value += 0.1), true)\nonKeyboardShortcut(['shift', 'down'], () => (volume.value -= 0.1), true)\n\nonKeyboardShortcut('right', () => seekBy(5), true)\nonKeyboardShortcut(['shift', 'right'], () => seekBy(30), true)\nonKeyboardShortcut('left', () => seekBy(-5), true)\nonKeyboardShortcut(['shift', 'left'], () => seekBy(-30), true)\n\nonKeyboardShortcut(['ctrl', 'shift', 'left'], playPrevious, true)\nonKeyboardShortcut(['ctrl', 'shift', 'right'], playNext, true)\n\nconst labels = computed(() => ({\n  audioPlayer: t('components.audio.Player.label.audioPlayer'),\n  previous: t('components.audio.Player.label.previousTrack'),\n  play: t('components.audio.Player.label.play'),\n  pause: t('components.audio.Player.label.pause'),\n  next: t('components.audio.Player.label.nextTrack'),\n  unmute: t('components.audio.Player.label.unmute'),\n  mute: t('components.audio.Player.label.mute'),\n  expandQueue: t('components.audio.Player.label.expandQueue'),\n  shuffle: t('components.audio.Player.label.shuffleQueue'),\n  clear: t('components.audio.Player.label.clearQueue'),\n  addArtistContentFilter: t('components.audio.Player.label.addArtistContentFilter')\n}))\n\nconst switchTab = () => {\n  store.commit('ui/queueFocused', store.state.ui.queueFocused === 'player' ? 'queue' : 'player')\n}\n\nconst progressBar = ref()\nconst touchProgress = (event: MouseEvent) => {\n  const time = ((event.clientX - ((event.target as Element).closest('.progress')?.getBoundingClientRect().left ?? 0)) / progressBar.value.offsetWidth) * duration.value\n  seekTo(time)\n}\n\nconst { x } = useMouse({ type: 'client' })\nconst { width: screenWidth } = useWindowSize({ includeScrollbar: false })\n\ninitializeFirstTrack()\n\nconst loopingTitle = computed(() => {\n  const mode = looping.value\n  return mode === LoopingMode.None\n    ? t('components.audio.Player.label.loopingDisabled')\n    : mode === LoopingMode.LoopTrack\n      ? t('components.audio.Player.label.loopingSingle')\n      : t('components.audio.Player.label.loopingWholeQueue')\n})\n\nconst hideArtist = () => {\n  if (currentTrack.value.artistId !== -1) {\n    return store.dispatch('moderation/hide', {\n      type: 'artist',\n      target: {\n        id: currentTrack.value.artistId,\n        name: currentTrack.value.artistName\n      }\n    })\n  }\n}\n</script>\n\n<template>\n  <section\n    v-if=\"currentTrack\"\n    role=\"complementary\"\n    class=\"player-wrapper ui bottom-player component-player\"\n    aria-labelledby=\"player-label\"\n  >\n    <h1\n      id=\"player-label\"\n      v-t=\"'components.audio.Player.header.player'\"\n      class=\"visually-hidden\"\n    />\n    <div\n      class=\"ui inverted segment fixed-controls\"\n      @click.prevent.stop=\"toggleMobilePlayer\"\n    >\n      <div\n        ref=\"progressBar\"\n        :class=\"['ui', 'top attached', 'small', 'inverted', {'indicating': isLoadingAudio}, 'progress']\"\n        @click.prevent.stop=\"touchProgress\"\n      >\n        <div\n          class=\"buffer bar\"\n          :style=\"{ 'transform': `translateX(${bufferProgress - 100}%)` }\"\n        />\n        <div class=\"position bar\" />\n        <div\n          class=\"seek bar\"\n          :style=\"{ 'transform': `translateX(${x / screenWidth * 100 - 100}%)` }\"\n        />\n      </div>\n      <div class=\"controls-row\">\n        <div class=\"controls track-controls queue-not-focused desktop-and-up\">\n          <div\n            class=\"ui tiny image\"\n            @click.stop.prevent=\"$router.push({name: 'library.tracks.detail', params: {id: currentTrack.id }})\"\n          >\n            <img\n              ref=\"cover\"\n              alt=\"\"\n              :src=\"$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)\"\n            >\n          </div>\n          <div\n            class=\"middle aligned content ellipsis\"\n            @click.stop.prevent=\"\"\n          >\n            <strong>\n              <router-link\n                class=\"small header discrete link track\"\n                :to=\"{name: 'library.tracks.detail', params: {id: currentTrack.id }}\"\n                @click.stop.prevent=\"\"\n              >\n                {{ currentTrack.title }}\n              </router-link>\n            </strong>\n            <div class=\"meta\">\n              <router-link\n                class=\"discrete link\"\n                :to=\"{name: 'library.artists.detail', params: {id: currentTrack.artistId }}\"\n                @click.stop.prevent=\"\"\n              >\n                {{ currentTrack.artistName ?? $t('components.audio.Player.meta.unknownArtist') }}\n              </router-link>\n              <template v-if=\"currentTrack.albumId !== -1\">\n                <span class=\"middle slash symbol\" />\n                <router-link\n                  class=\"discrete link\"\n                  :to=\"{name: 'library.albums.detail', params: {id: currentTrack.albumId }}\"\n                  @click.stop.prevent=\"\"\n                >\n                  {{ currentTrack.albumTitle ?? $t('components.audio.Player.meta.unknownAlbum') }}\n                </router-link>\n              </template>\n            </div>\n          </div>\n        </div>\n        <div class=\"controls track-controls queue-not-focused desktop-and-below\">\n          <div class=\"ui tiny image\">\n            <img\n              ref=\"cover\"\n              alt=\"\"\n              :src=\"$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)\"\n            >\n          </div>\n          <div class=\"middle aligned content ellipsis\">\n            <strong>\n              {{ currentTrack.title }}\n            </strong>\n            <div class=\"meta\">\n              {{ currentTrack.artistName ?? $t('components.audio.Player.meta.unknownArtist') }}\n              <template v-if=\"currentTrack.albumId !== -1\">\n                <span class=\"middle slash symbol\" />\n                {{ currentTrack.albumTitle ?? $t('components.audio.Player.meta.unknownAlbum') }}\n              </template>\n            </div>\n          </div>\n        </div>\n        <div\n          v-if=\"$store.state.auth.authenticated\"\n          class=\"controls desktop-and-up fluid align-right\"\n        >\n          <track-favorite-icon\n            class=\"control white\"\n            :track=\"currentTrack\"\n          />\n          <track-playlist-icon\n            class=\"control white\"\n            :track=\"currentTrack\"\n          />\n          <button\n            :class=\"['ui', 'really', 'basic', 'circular', 'icon', 'button', 'control']\"\n            :aria-label=\"labels.addArtistContentFilter\"\n            :title=\"labels.addArtistContentFilter\"\n            @click=\"hideArtist\"\n          >\n            <i :class=\"['eye slash outline', 'basic', 'icon']\" />\n          </button>\n        </div>\n        <player-controls class=\"controls queue-not-focused\" />\n        <div class=\"controls progress-controls queue-not-focused tablet-and-up small align-left\">\n          <div class=\"timer\">\n            <template v-if=\"!isLoadingAudio\">\n              <span\n                class=\"start\"\n                @click.stop.prevent=\"seekTo(0)\"\n              >\n                {{ time.parse(Math.round(currentTime)) }}\n              </span>\n              <span class=\"middle pipe symbol\" />\n              <span class=\"total\">{{ time.parse(Math.round(duration)) }}</span>\n            </template>\n          </div>\n        </div>\n        <div class=\"controls queue-controls when-queue-focused align-right\">\n          <div class=\"group\">\n            <volume-control class=\"expandable\" />\n            <button\n              class=\"circular control button\"\n              :class=\"{ looping: looping !== LoopingMode.None }\"\n              :title=\"loopingTitle\"\n              :aria-label=\"loopingTitle\"\n              :disabled=\"!currentTrack\"\n              @click.prevent.stop=\"toggleLooping\"\n            >\n              <i class=\"repeat icon\">\n                <span\n                  v-if=\"looping !== LoopingMode.None\"\n                  class=\"ui circular tiny vibrant label\"\n                >\n                  <span\n                    v-if=\"looping === LoopingMode.LoopTrack\"\n                    class=\"symbol single\"\n                  />\n                  <span\n                    v-else-if=\"looping === LoopingMode.LoopQueue\"\n                    class=\"infinity symbol\"\n                  />\n                </span>\n              </i>\n            </button>\n\n            <button\n              class=\"circular control button\"\n              :disabled=\"queue.length === 0\"\n              :title=\"labels.shuffle\"\n              :aria-label=\"labels.shuffle\"\n              @click.prevent.stop=\"shuffle()\"\n            >\n              <i :class=\"['ui', 'random', { disabled: queue.length === 0, shuffling: isShuffled }, 'icon']\" />\n            </button>\n          </div>\n          <div class=\"group\">\n            <div class=\"fake-dropdown\">\n              <button\n                class=\"position circular control button desktop-and-up\"\n                aria-expanded=\"true\"\n                @click.stop=\"toggleMobilePlayer\"\n              >\n                <i class=\"stream icon\" />\n                <i18n-t keypath=\"components.audio.Player.meta.position\">\n                  <template #index>\n                    {{ currentIndex + 1 }}\n                  </template>\n                  <template #length>\n                    {{ queue.length }}\n                  </template>\n                </i18n-t>\n              </button>\n              <button\n                class=\"position circular control button desktop-and-below\"\n                @click.stop=\"switchTab\"\n              >\n                <i class=\"stream icon\" />\n                <i18n-t keypath=\"components.audio.Player.meta.position\">\n                  <template #index>\n                    {{ currentIndex + 1 }}\n                  </template>\n                  <template #length>\n                    {{ queue.length }}\n                  </template>\n                </i18n-t>\n              </button>\n\n              <button\n                v-if=\"$store.state.ui.queueFocused\"\n                class=\"circular control button close-control desktop-and-up\"\n                @click.stop=\"toggleMobilePlayer\"\n              >\n                <i class=\"large down angle icon\" />\n              </button>\n              <button\n                v-else\n                class=\"circular control button desktop-and-up\"\n                @click.stop=\"toggleMobilePlayer\"\n              >\n                <i class=\"large up angle icon\" />\n              </button>\n              <button\n                v-if=\"$store.state.ui.queueFocused === 'player'\"\n                class=\"circular control button close-control desktop-and-below\"\n                @click.stop=\"switchTab\"\n              >\n                <i class=\"large up angle icon\" />\n              </button>\n              <button\n                v-if=\"$store.state.ui.queueFocused === 'queue'\"\n                class=\"circular control button desktop-and-below\"\n                @click.stop=\"switchTab\"\n              >\n                <i class=\"large down angle icon\" />\n              </button>\n            </div>\n            <button\n              class=\"circular control button close-control desktop-and-below\"\n              @click.stop=\"$store.commit('ui/queueFocused', null)\"\n            >\n              <i class=\"x icon\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n"],"names":["volume","mute","usePlayer","expanded","ref","t","useI18n","labels","computed","start","stop","useTimeoutFn","handleOver","handleLeave","scroll","event","LoopingMode","initializeFirstTrack","isPlaying","toggleLooping","looping","seekBy","seekTo","currentTime","duration","bufferProgress","isLoadingAudio","playPrevious","playNext","queue","currentIndex","currentTrack","isShuffled","shuffle","clear","useQueue","store","useStore","toggleMobilePlayer","onKeyboardShortcut","_a","switchTab","progressBar","touchProgress","time","x","useMouse","screenWidth","useWindowSize","loopingTitle","mode","hideArtist"],"mappings":"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"}