{"version":3,"file":"BrowseLVItem-DEz2dDGI.js","sources":["../../Vue/src/components/LyricVideosMVP/BrowseLVItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { SSLyricVideoIndex } from \"@/models/frontend-only/LyricVideos\";\r\n\r\nconst props = defineProps<{\r\n data: SSLyricVideoIndex;\r\n}>();\r\n\r\nconst subtitle = computed(() => {\r\n return props.data.leadVoice\r\n ? `Recording Key: ${getSongKeyVal(props.data.key)}, Voice: ${props.data.leadVoice}`\r\n : `Recording Key: ${getSongKeyVal(props.data.key)}`;\r\n});\r\n</script>\r\n\r\n<template>\r\n <router-link\r\n :to=\"`/lyric-videos/videos/${data.videoId}`\"\r\n class=\"browse-lv-item\"\r\n >\r\n <LVThumbnail\r\n :title=\"data.title\"\r\n :subtitle=\"subtitle\"\r\n :tag=\"data.tags\"\r\n :song-length-seconds=\"data.duration\"\r\n :force-background-index=\"data.slideBackground\"\r\n />\r\n <!-- <div class=\"thumbnail\"></div>\r\n <div class=\"after-thumbnail\">\r\n <div class=\"title\">{{ data.title }}</div>\r\n <div\r\n v-if=\"data.leadVoice\"\r\n class=\"subtitle\"\r\n >\r\n Recording Key: {{ getSongKeyVal(data.key) }}, Voice:\r\n {{ data.leadVoice }}\r\n </div>\r\n <div\r\n v-else\r\n class=\"subtitle\"\r\n >\r\n Recording Key: {{ getSongKeyVal(data.key) }}\r\n </div>\r\n </div> -->\r\n </router-link>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.browse-lv-item .thumbnail {\r\n @apply transition-all;\r\n}\r\n.browse-lv-item:hover .thumbnail {\r\n @apply brightness-95;\r\n}\r\n.thumbnail {\r\n @apply aspect-video h-auto w-full rounded-lg bg-gray-100;\r\n}\r\n.after-thumbnail {\r\n @apply mt-1;\r\n}\r\n.title {\r\n @apply font-bold;\r\n}\r\n.subtitle {\r\n @apply text-sm opacity-75;\r\n}\r\n</style>\r\n"],"names":["props","__props","subtitle","computed","getSongKeyVal"],"mappings":"qRAGA,MAAMA,EAAQC,EAIRC,EAAWC,EAAS,IACjBH,EAAM,KAAK,UACd,kBAAkB,OAAAI,EAAcJ,EAAM,KAAK,GAAG,EAAC,aAAY,OAAAA,EAAM,KAAK,WACtE,kBAAkB,OAAAI,EAAcJ,EAAM,KAAK,GAAG,EACnD"}