{"version":3,"mappings":"wRAmIiBA,EAAiB,CAC1B,UAAW,yBACX,OAAQ,sBACR,MAAO,oBACT,EACWC,EAAgB,CACzB,QAAS,UACT,MAAO,OACT,uSApHIC,EAAiBC,EAAqB,IACpCC,EAAM,WAAaH,EAAc,QAC1BI,aAAO,mCAA0B,gIACnCA,aAAO,iCAAwB,uFAC3C,EACD,IAAIC,EAAS,KACb,MAAMC,EAAWH,EAAM,MAAQJ,EAAe,UACxCQ,EAAQC,EAAS,CAAE,SAAU,EAAG,QAAS,EAAK,CAAE,EAuBhDC,EAAmBC,EAAS,IAAM,CACpC,IAAIC,EAAQ,KAAK,MAAMJ,EAAM,SAAW,IAAI,EAC5CI,EAAQA,EAAQ,GAAK,IAAMA,EAAQA,EACnC,MAAMC,EAAU,KAAK,MAAML,EAAM,SAAW,EAAE,EACxCM,EAAUN,EAAM,SAAWK,EAAU,GAC3C,MAAO,GAAGD,KAASC,KAAWC,GACtC,CAAK,EAEKC,EAAYJ,EAAS,IACnBP,EAAM,OAASJ,EAAe,MACvB,SACAI,EAAM,OAASJ,EAAe,OAC9B,mDAEJ,uCACV,EAEKgB,EAAqBL,EAAS,IAEzBP,EAAM,WAAaH,EAAc,SAAWG,EAAM,MAAQJ,EAAe,WAAaQ,EAAM,UAAYJ,EAAM,MAAQJ,EAAe,SAC/I,EAEKiB,EAAY,IAAM,CACjBb,EAAM,WAAaH,EAAc,MAChCK,EAAO,KAAI,EAEXA,EAAO,UAAS,CAEvB,EAUKY,EAAsBC,GAAM,CAC9Bb,EAASa,EACTC,IACA,MAAMC,EAAgB,GACnBrB,EAAe,YAAcI,EAAM,OAClCa,IACAX,EAAO,QAAQe,CAAa,EAC5Bf,EAAO,UAAU,CAAC,EAE9B,EAEUc,EAAmB,IAAM,CACxBhB,EAAM,WAAaH,EAAc,MAChCK,EAAO,YAAW,EAAG,KAAMgB,GAAa,CACpCd,EAAM,SAAWc,CACjC,CAAa,EAEDd,EAAM,SAAWF,EAAO,aAEpC,EAEUiB,EAAe,IAAM,CACvBf,EAAM,QAAU,EACxB,EAEUgB,EAAgB,IAAM,CACrBxB,EAAe,YAAcI,EAAM,MAAQH,EAAc,UAAYG,EAAM,UAC1Ea,GAEP,EAEKQ,EAAU,IAAM,CACdnB,GACAW,GAEZ","names":["VideoBlockSize","VideoPlatform","VideoComponent","defineAsyncComponent","props","__vitePreload","player","autoplay","state","reactive","durationFormated","computed","hours","minutes","seconds","gridClass","showCustomControls","playVideo","handlePlayerLoaded","p","setVideoDuration","loopPlaylists","duration","handleOnPlay","handleOnEnded","onClick"],"sources":["../../../assets/nal-frontend/src/components/blocks/video-block/VideoBlock.vue"],"sourcesContent":["<template>\r\n    <div class=\"video-block\" :class=\"props.size\">\r\n        <div class=\"container\">\r\n            <div class=\"row\">\r\n                <div :class=\"gridClass\">\r\n                    <div class=\"video-block__container\">\r\n                        <VideoComponent :autoplay=\"autoplay\" :video-id=\"props.videoId\" @on-play=\"handleOnPlay\" @on-player-loaded=\"handlePlayerLoaded\" @on-ended=\"handleOnEnded\" />\r\n                        <div v-if=\"!state.playing\" class=\"video-block__cover\" :style=\"{backgroundImage: `url(${props.image})`}\">\r\n                            <div v-if=\"showCustomControls\" class=\"video-controls\">\r\n                                <button class=\"video-controls__play\" @click=\"onClick\">SPILL AV</button>\r\n                                <p v-if=\"props.platform != VideoPlatform.youtube\" class=\"video-controls__duration\">{{ durationFormated }}</p>\r\n                            </div>\r\n                        </div>\r\n                        <div v-if=\"props.size === VideoBlockSize.fullbleed\" @click=\"onClick\" class=\"video-block__overlay\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script setup>\r\n    import { defineAsyncComponent, reactive, computed } from 'vue';\r\n    const VideoComponent = defineAsyncComponent(() => {\r\n        if( props.platform === VideoPlatform.youtube ) {\r\n            return import('./VideoBlockYoutube.vue');\r\n        } return import('./VideoBlockVimeo.vue');\r\n    });\r\n    let player = null;\r\n    const autoplay = props.size == VideoBlockSize.fullbleed;\r\n    const state = reactive({ duration: 0, playing: false });\r\n    const props = defineProps({\r\n        image: {\r\n            type: String,\r\n            required: true\r\n        },\r\n        videoId: String,\r\n        platform: {\r\n            type: String,\r\n            validator: function (value) {\r\n                return Object.values(VideoPlatform).indexOf(value) !== -1;\r\n            },\r\n            required: true\r\n        },\r\n        size: {\r\n            type: String,\r\n            validator: function (value) {\r\n                return Object.values(VideoBlockSize).indexOf(value) !== -1;\r\n            },\r\n            default: VideoBlockSize.large\r\n        }\r\n    });\r\n\r\n    const durationFormated = computed(() => {\r\n        let hours = Math.floor(state.duration / 3600);\r\n        hours = hours < 10 ? '0' + hours : hours;\r\n        const minutes = Math.floor(state.duration / 60);\r\n        const seconds = state.duration - minutes * 60;\r\n        return `${hours}:${minutes}:${seconds}`;\r\n    });\r\n\r\n    const gridClass = computed(() => {\r\n        if (props.size === VideoBlockSize.large) {\r\n            return 'col-12';\r\n        } else if (props.size === VideoBlockSize.medium) {\r\n            return 'col-12 col-md-9 offset-md-3 col-xl-6 offset-xl-3';\r\n        }\r\n        return 'video-block-fullbleed__video-position';\r\n    });\r\n\r\n    const showCustomControls = computed(() => {\r\n        // Youtube does not support duration\r\n        return props.platform === VideoPlatform.youtube && props.size != VideoBlockSize.fullbleed || state.duration && props.size != VideoBlockSize.fullbleed\r\n    });\r\n\r\n    const playVideo = () => {\r\n        if(props.platform === VideoPlatform.vimeo) {\r\n            player.play();\r\n        } else {\r\n            player.playVideo();\r\n        }\r\n    }\r\n\r\n    const pauseVideo = () => {\r\n        if(props.platform === VideoPlatform.vimeo) {\r\n            player.pause();\r\n        } else {\r\n            player.pauseVideo();\r\n        }\r\n    }\r\n\r\n    const handlePlayerLoaded = (p) => {\r\n        player = p;\r\n        setVideoDuration();\r\n        const loopPlaylists = true;\r\n        if(VideoBlockSize.fullbleed === props.size) {\r\n            playVideo();\r\n            player.setLoop(loopPlaylists);\r\n            player.setVolume(0);\r\n        }\r\n    };\r\n\r\n    const setVideoDuration = () => {\r\n        if(props.platform === VideoPlatform.vimeo) {\r\n            player.getDuration().then((duration) => {\r\n                state.duration = duration;\r\n            });\r\n        } else {\r\n            state.duration = player.getDuration();\r\n        }\r\n    };\r\n\r\n    const handleOnPlay = () => {\r\n        state.playing = true;\r\n    };\r\n\r\n    const handleOnEnded = () => {\r\n        if(VideoBlockSize.fullbleed === props.size && VideoPlatform.youtube === props.platform) {\r\n            playVideo();\r\n        }\r\n    }\r\n\r\n    const onClick = () => {\r\n        if( player ) {\r\n            playVideo();\r\n        }\r\n    };\r\n\r\n</script>\r\n\r\n<script>\r\n    export const VideoBlockSize = {\r\n        fullbleed: 'video-block--fullbleed',\r\n        medium: 'video-block--medium',\r\n        large: 'video-block--large'\r\n    };\r\n    export const VideoPlatform = {\r\n        youtube: 'youtube',\r\n        vimeo: 'vimeo'\r\n    };\r\n</script>\r\n"],"file":"assets/VideoBlock.8202e8ac.js"}