{"version":3,"mappings":";wlBACA,MAAMA,EAAQC,EASRC,EAAyBC,EAC7B,IAAMC,EAAA,WAAO,sCAAuD,uCAEhEC,EAAWC,IACXC,EAASD,EAAI,EAAK,EAElBE,EAAAD,EAASE,GAAU,CACnBA,GACFT,EAAM,QAAUU,EAAQ,KAAK,eAAgBV,EAAM,MAAM,CAC3D,CACD,EAEDW,EAAU,IAAM,CACND,EAAA,GAAG,wBAAyBE,CAAU,EAC/C,EAEDC,EAAgB,IAAM,CACZH,EAAA,IAAI,wBAAyBE,CAAU,EAChD,EAED,SAASA,GAAa,CACpBL,EAAO,MAAQ,EACjB,CAEA,eAAeO,GAAS,OACjBP,EAAO,OAKVQ,EAAAV,EAAS,QAAT,MAAAU,EAAgB,UAJhBL,EAAQ,KAAK,uBAAuB,EACpC,MAAMM,EAAS,EACfT,EAAO,MAAQ,GAInB","names":["props","__props","SongRowPreviewPlayback","defineAsyncComponent","__vitePreload","playback","ref","active","watch","value","emitter","onMounted","deactivate","onBeforeUnmount","toggle","_a","nextTick"],"ignoreList":[],"sources":["../../Vue/src/components/SearchResults/SongRowPreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\r\nconst props = defineProps<{\r\n  previewUrl: string;\r\n  title: string;\r\n  alwaysWhite?: boolean;\r\n  albumCoverUrl?: string;\r\n  withAlbumCover?: boolean;\r\n  showId?: string;\r\n}>();\r\n\r\nconst SongRowPreviewPlayback = defineAsyncComponent(\r\n  () => import(\"@/components/SearchResults/SongRowPreviewPlayback.vue\"),\r\n);\r\nconst playback = ref<InstanceType<typeof SongRowPreviewPlayback>>();\r\nconst active = ref(false);\r\n\r\nwatch(active, (value) => {\r\n  if (value) {\r\n    props.showId && emitter.emit(\"alwaysShowId\", props.showId);\r\n  }\r\n});\r\n\r\nonMounted(() => {\r\n  emitter.on(\"deactivateAllPreviews\", deactivate);\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n  emitter.off(\"deactivateAllPreviews\", deactivate);\r\n});\r\n\r\nfunction deactivate() {\r\n  active.value = false;\r\n}\r\n\r\nasync function toggle() {\r\n  if (!active.value) {\r\n    emitter.emit(\"deactivateAllPreviews\");\r\n    await nextTick();\r\n    active.value = true;\r\n  } else {\r\n    playback.value?.toggle();\r\n  }\r\n}\r\n</script>\r\n<template>\r\n  <button\r\n    v-if=\"previewUrl\"\r\n    class=\"songpreview sound-sample-preview-toggle-button\"\r\n    :class=\"{\r\n      'always-white': alwaysWhite,\r\n      'always-show': active,\r\n      'with-album-cover': withAlbumCover,\r\n    }\"\r\n    type=\"button\"\r\n    :aria-label=\"\r\n      playback?.ariaLabel || $t('SV.LIT_PausedPreviewOf', { title: title })\r\n    \"\r\n    :data-status=\"playback?.status || 'paused'\"\r\n    data-user-search-activity=\"Played Sound Sample\"\r\n    @click.stop.prevent=\"toggle()\"\r\n  >\r\n    <div\r\n      v-if=\"withAlbumCover\"\r\n      class=\"album-artwork-wrapper\"\r\n    >\r\n      <Image\r\n        v-if=\"albumCoverUrl\"\r\n        class=\"\"\r\n        :src=\"albumCoverUrl\"\r\n        :alt=\"title\"\r\n        rounded\r\n        :restrict-width=\"80\"\r\n      />\r\n      <div\r\n        v-else\r\n        class=\"empty-album-cover\"\r\n      >\r\n        <FAIcon class=\"fa-light fa-music\" />\r\n      </div>\r\n    </div>\r\n    <SongRowPreviewPlayback\r\n      v-if=\"active\"\r\n      ref=\"playback\"\r\n      :preview-url=\"previewUrl\"\r\n      :title=\"title\"\r\n    />\r\n    <div\r\n      v-else\r\n      class=\"icon-overlay\"\r\n    >\r\n      <div class=\"songpreview-icon\">\r\n        <FAIcon class=\"fa-fw fa-solid fa-play\" />\r\n      </div>\r\n    </div>\r\n  </button>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.songpreview-icon {\r\n  font-size: 1.25em;\r\n  @apply text-gray-400 hover:text-gray-300;\r\n}\r\n\r\nbutton:focus-visible {\r\n  outline: 3px solid theme(colors.gray.900);\r\n}\r\nbutton.always-show {\r\n  opacity: 100% !important;\r\n}\r\nbutton.always-white {\r\n  &:focus-visible {\r\n    outline-color: white !important;\r\n  }\r\n  :deep() {\r\n    .songpreview-icon {\r\n      i,\r\n      svg {\r\n        color: white !important;\r\n      }\r\n    }\r\n\r\n    .progress-ring__circle {\r\n      stroke: white !important;\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @apply relative inline-block h-full w-full p-0;\r\n}\r\n\r\nbutton.with-album-cover {\r\n  @apply h-12 w-12;\r\n}\r\n.album-artwork-wrapper {\r\n  @apply h-12 w-12;\r\n  :deep() {\r\n    img {\r\n      @apply shadow-lg;\r\n    }\r\n  }\r\n}\r\n\r\n.icon-overlay {\r\n  @apply absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center transition-all;\r\n}\r\n\r\nbutton.with-album-cover {\r\n  :deep() {\r\n    .icon-overlay {\r\n      @apply opacity-0 transition-all;\r\n    }\r\n  }\r\n  &:hover,\r\n  &:focus-visible,\r\n  &.always-show {\r\n    :deep() {\r\n      .icon-overlay {\r\n        @apply opacity-100;\r\n      }\r\n    }\r\n    .album-artwork-wrapper {\r\n      @apply brightness-75;\r\n    }\r\n  }\r\n}\r\n.empty-album-cover {\r\n  @apply flex h-full w-full items-center justify-center rounded bg-base-300 text-secondary;\r\n}\r\n.bg-circle {\r\n  @apply bg-base-100;\r\n}\r\n\r\n.with-album-cover .songpreview-icon {\r\n  @apply text-white;\r\n}\r\n</style>\r\n"],"file":"assets/SongRowPreview-BpTq8KW0.js"}