{"version":3,"file":"DVideo-bb30e4e9.js","sources":["../../client/packages/design-system/src/atoms/DVideo.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import {ref, computed, inject, onMounted, onBeforeUnmount} from \"vue\";\n    import type {VideoTrackingDataType} from \"@songfinch/types\";\n\n    type DVideoPropTypes = {\n        src: string;\n        title: string;\n        variant?: \"fill-section\";\n        preload?: string;\n        controls?: boolean;\n        dataTestId?: string;\n    }\n\n    const videoPlayer = ref<HTMLVideoElement>();\n\n    const srcType = computed(() => {\n        const extension = props.src.split(\".\").pop()?.toLowerCase();\n        switch (extension) {\n        case \"mp4\":\n            return \"video/mp4\";\n        case \"webm\":\n            return \"video/webm\";\n        case \"ogg\":\n            return \"video/ogg\";\n        default:\n            // Fallback to MP4\n            return \"video/mp4\";\n        }\n    });\n\n    const videoTrackEvent = inject<\n        (\n            e: Event | HTMLElement,\n            type: \"video_played\" | \"video_stopped\",\n            payload: VideoTrackingDataType,\n        ) => void\n    >(\"videoTrackEvent\", () => {});\n\n    const props = withDefaults(defineProps<DVideoPropTypes>(), {\n        preload: \"metadata\",\n        dataTestId: \"DVideo\",\n        variant: undefined,\n    });\n\n    const trackVideo = (\n        type: \"video_played\" | \"video_stopped\",\n        e: Event | HTMLElement,\n    ) => {\n        if (!videoTrackEvent || !e || videoPlayer.value?.duration === undefined)\n            return;\n\n        let percentagePlayed;\n        if (videoPlayer.value?.currentTime && videoPlayer.value?.duration) {\n            percentagePlayed = Math.round(\n                (videoPlayer.value?.currentTime / videoPlayer.value?.duration) * 100,\n            );\n        }\n\n        const trackingObject: VideoTrackingDataType = {\n            title: props.title,\n            time_played: videoPlayer.value?.currentTime.toFixed(2) || undefined,\n            video_duration: videoPlayer.value?.duration.toFixed(2) || undefined,\n            percentage_played: percentagePlayed ? `${percentagePlayed}%` : undefined,\n        };\n        videoTrackEvent(e, type, trackingObject);\n    };\n\n    const togglePlay = () => {\n        if (!videoPlayer.value) return;\n        if (videoPlayer.value?.paused) {\n            videoPlayer.value.play();\n        } else {\n            videoPlayer.value.pause();\n        }\n    };\n\n    onMounted(() => {\n        if (videoPlayer.value) {\n            videoPlayer.value.addEventListener(\"play\", (e) =>\n                trackVideo(\"video_played\", e),\n            );\n            videoPlayer.value.addEventListener(\"pause\", (e) =>\n                trackVideo(\"video_stopped\", e),\n            );\n        }\n    });\n\n    onBeforeUnmount(() => {\n        if (videoPlayer.value) {\n            if (!videoPlayer.value?.paused) {\n                trackVideo(\"video_stopped\", videoPlayer.value);\n            }\n\n            videoPlayer.value.removeEventListener(\"play\", (e) =>\n                trackVideo(\"video_played\", e),\n            );\n            videoPlayer.value.removeEventListener(\"pause\", (e) =>\n                trackVideo(\"video_stopped\", e),\n            );\n        }\n    });\n</script>\n\n<template>\n    <video\n        ref=\"videoPlayer\"\n        class=\"d-video\"\n        :data-test-id=\"dataTestId\"\n        :class=\"variant\"\n        :alt=\"title\"\n        :preload=\"preload\"\n        :controls=\"controls\"\n        @click=\"togglePlay\"\n    >\n        <source :src=\"src\" :type=\"srcType\">\n    </video>\n</template>\n\n\n<style scoped lang=\"scss\">\n.d-video {\n    max-width: 100%;\n    max-height: 100%;\n    width: auto;\n    height: auto;\n    object-fit: contain; \n    overflow: hidden;\n    background-color: var(--soft-black);\n}\n\n.fill-section {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  z-index: -1;\n}\n</style>\n"],"names":["videoPlayer","ref","srcType","computed","_a","props","videoTrackEvent","inject","__props","trackVideo","type","e","percentagePlayed","_b","_c","_d","_e","trackingObject","_f","_g","togglePlay","onMounted","onBeforeUnmount"],"mappings":"y7BAaI,MAAMA,EAAcC,IAEdC,EAAUC,EAAS,IAAM,OAE3B,QADkBC,EAAAC,EAAM,IAAI,MAAM,GAAG,EAAE,QAArB,YAAAD,EAA4B,cAC3B,CACnB,IAAK,MACM,MAAA,YACX,IAAK,OACM,MAAA,aACX,IAAK,MACM,MAAA,YACX,QAEW,MAAA,WACX,CAAA,CACH,EAEKE,EAAkBC,EAMtB,kBAAmB,IAAM,CAAA,CAAE,EAEvBF,EAAQG,EAMRC,EAAa,CACfC,EACAC,IACC,mBACD,GAAI,CAACL,GAAmB,CAACK,KAAKP,EAAAJ,EAAY,QAAZ,YAAAI,EAAmB,YAAa,OAC1D,OAEA,IAAAQ,GACAC,EAAAb,EAAY,QAAZ,MAAAa,EAAmB,eAAeC,EAAAd,EAAY,QAAZ,MAAAc,EAAmB,YACrDF,EAAmB,KAAK,QACnBG,EAAAf,EAAY,QAAZ,YAAAe,EAAmB,eAAcC,EAAAhB,EAAY,QAAZ,YAAAgB,EAAmB,UAAY,GAAA,GAIzE,MAAMC,EAAwC,CAC1C,MAAOZ,EAAM,MACb,cAAaa,EAAAlB,EAAY,QAAZ,YAAAkB,EAAmB,YAAY,QAAQ,KAAM,OAC1D,iBAAgBC,EAAAnB,EAAY,QAAZ,YAAAmB,EAAmB,SAAS,QAAQ,KAAM,OAC1D,kBAAmBP,EAAmB,GAAGA,CAAgB,IAAM,MAAA,EAEnDN,EAAAK,EAAGD,EAAMO,CAAc,CAAA,EAGrCG,EAAa,IAAM,OAChBpB,EAAY,SACbI,EAAAJ,EAAY,QAAZ,MAAAI,EAAmB,OACnBJ,EAAY,MAAM,OAElBA,EAAY,MAAM,QACtB,EAGJ,OAAAqB,EAAU,IAAM,CACRrB,EAAY,QACZA,EAAY,MAAM,iBAAiB,OAASW,GACxCF,EAAW,eAAgBE,CAAC,CAAA,EAEhCX,EAAY,MAAM,iBAAiB,QAAUW,GACzCF,EAAW,gBAAiBE,CAAC,CAAA,EAErC,CACH,EAEDW,EAAgB,IAAM,OACdtB,EAAY,SACPI,EAAAJ,EAAY,QAAZ,MAAAI,EAAmB,QACTK,EAAA,gBAAiBT,EAAY,KAAK,EAGjDA,EAAY,MAAM,oBAAoB,OAASW,GAC3CF,EAAW,eAAgBE,CAAC,CAAA,EAEhCX,EAAY,MAAM,oBAAoB,QAAUW,GAC5CF,EAAW,gBAAiBE,CAAC,CAAA,EAErC,CACH"}