{"version":3,"file":"t3XKQM9W.js","sources":["../../../../../../../app/components/modals/MediaModal.vue"],"sourcesContent":["<template>\r\n    <div v-if=\"modelValue\">\r\n        <div :class=\"classNames.modal\" tabIndex=\"-1\" role=\"dialog\" :aria-label=\"aria.openMessage\" @click=\"$emit('update:modelValue', false)\" @keydown.esc=\"$emit('update:modelValue', false)\">\r\n            <div :class=\"[classNames.modalBody, {'modal-img-body': isImg }]\">\r\n                <div :class=\"classNames.modalInner\">\r\n                    <div :class=\"classNames.modalIframeWrap\" :style=\"{'padding-bottom': paddingBottom}\">\r\n                        <button :class=\"classNames.modalCloseBtn\" :aria-label=\"aria.dismissBtnMessage\" ref=\"closeBtn\" @click=\"$emit('update:modelValue', false)\"></button>\r\n\r\n                        <template v-if=\"!isImg\">\r\n                            <iframe width=\"460\"\r\n                                    height=\"230\"\r\n                                    :src=\"fullVideoUrl\"\r\n                                    frameBorder=\"0\"\r\n                                    :allowFullScreen=\"allowFullScreen\"\r\n                                    tabIndex=\"-1\">\r\n                            </iframe>\r\n                        </template>\r\n                        <template v-else>\r\n                            <NuxtImg :src=\"imgSrc\" class=\"wide\" />\r\n                        </template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\n    const closeBtn = ref<Nullable<HTMLElement>>(null);\r\n\r\n    const body = ref<Nullable<HTMLElement>>(document?.body);\r\n\r\n    const modelValue = defineModel({ type: Boolean });\r\n\r\n    const props = defineProps({\r\n        imgSrc: String,\r\n        videoId: String,\r\n        youtube: {\r\n            type: Object,\r\n            default: function () {\r\n                return {\r\n                    autoplay: 0,\r\n                    cc_load_policy: 1,\r\n                    color: null,\r\n                    controls: 1,\r\n                    disablekb: 0,\r\n                    enablejsapi: 0,\r\n                    end: null,\r\n                    fs: 1,\r\n                    h1: null,\r\n                    iv_load_policy: 1,\r\n                    list: null,\r\n                    listType: null,\r\n                    loop: 0,\r\n                    modestbranding: null,\r\n                    origin: null,\r\n                    playlist: null,\r\n                    playsinline: null,\r\n                    rel: 0,\r\n                    showinfo: 1,\r\n                    start: 0,\r\n                    wmode: 'transparent',\r\n                    theme: 'dark'\r\n                }\r\n            }\r\n        },\r\n        ratio: {\r\n            type: String,\r\n            default: '16:9'\r\n        },\r\n        allowFullScreen: {\r\n            type: Boolean,\r\n            default: true\r\n        },\r\n        animationSpeed: {\r\n            type: Number,\r\n            default: 300\r\n        },\r\n        classNames: {\r\n            type: Object,\r\n            default: function () {\r\n                return {\r\n                    modalEffect: 'media-modal-effect',\r\n                    modal: 'media-modal',\r\n                    modalBody: 'media-modal-body',\r\n                    modalInner: 'media-modal-inner',\r\n                    modalIframeWrap: 'media-modal-wrap',\r\n                    modalCloseBtn: 'media-modal-close-btn'\r\n                }\r\n            }\r\n        },\r\n        aria: {\r\n            type: Object,\r\n            default: function () {\r\n                return {\r\n                    openMessage: 'Modal opened',\r\n                    dismissBtnMessage: 'Close the modal'\r\n                }\r\n            }\r\n        },\r\n        bodyClassName: {\r\n            type: String,\r\n            default: 'overflow-hidden'\r\n        }\r\n    });\r\n\r\n    function getQueryString(obj: any): string {\r\n        if (!obj || typeof obj !== 'object')\r\n            return '';      \r\n\r\n        return Object.keys(obj)\r\n            .filter(key => obj[key] != null)\r\n            .map(([key, value]) => `${key}=${value}`)\r\n            .join('&');\r\n    }\r\n\r\n    function getYoutubeUrl(youtube: Record<string, any>, videoId: string): string {\r\n        const query = getQueryString(youtube);\r\n        return `//www.youtube.com/embed/${videoId}?${query}`;\r\n    }\r\n\r\n    function getPadding(ratio: string): string {\r\n        const [width, height] = ratio.split(':').map(Number);\r\n        const padding = (height / width) * 100;\r\n        return `${padding}%`;\r\n    }\r\n\r\n    const fullVideoUrl = computed(() => getYoutubeUrl(props.youtube, props.videoId!));\r\n\r\n    const paddingBottom = computed(() => getPadding(props.ratio));\r\n\r\n    const isImg = computed(() => props.imgSrc && !props.videoId);\r\n\r\n    watch(modelValue, (newVal) => {\r\n        if (newVal)\r\n            body?.value!.classList.add(props.bodyClassName);\r\n        else\r\n            body?.value!.classList.remove(props.bodyClassName);\r\n    });\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n    @keyframes media-modal {\r\n        from {\r\n            opacity: 0;\r\n        }\r\n\r\n        to {\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    @keyframes media-modal-inner {\r\n        from {\r\n            transform: translate(0, 100px);\r\n        }\r\n\r\n        to {\r\n            transform: translate(0, 0);\r\n        }\r\n    }\r\n\r\n    .media-modal {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-color: rgba(0, 0, 0, 0.7);\r\n        z-index: 1000000;\r\n        cursor: pointer;\r\n        opacity: 1;\r\n        animation-timing-function: ease-out;\r\n        animation-duration: 0.3s;\r\n        animation-name: media-modal;\r\n        transition: opacity 0.3s ease-out;\r\n\r\n        .media-modal-body {\r\n            max-width: 1100px;\r\n            width: 100%;\r\n            height: 100%;\r\n            margin: 0 auto;\r\n            display: table;\r\n            position: relative;\r\n\r\n            &.modal-img-body {\r\n                max-width: 500px;\r\n            }\r\n\r\n            .media-modal-inner {\r\n                display: table-cell;\r\n                vertical-align: middle;\r\n                width: 100%;\r\n                height: 100%;\r\n                position: relative;\r\n\r\n                .media-modal-wrap {\r\n                    width: 100%;\r\n                    height: 0;\r\n                    position: relative;\r\n                    padding-bottom: 56.25%;\r\n                    background-color: #333;\r\n                    animation-timing-function: ease-out;\r\n                    animation-duration: 0.3s;\r\n                    animation-name: media-modal-inner;\r\n                    transform: translate(0, 0);\r\n                    transition: transform 0.3s ease-out;\r\n\r\n                    iframe {\r\n                        position: absolute;\r\n                        top: 0;\r\n                        left: 0;\r\n                        width: 100%;\r\n                        height: 100%;\r\n                        max-width: 100%;\r\n                        max-height: 100%;\r\n                    }\r\n\r\n                    .media-modal-close-btn {\r\n                        position: absolute;\r\n                        z-index: 2;\r\n                        top: -25px;\r\n                        right: 0;\r\n                        display: inline-block;\r\n                        width: 20px;\r\n                        height: 20px;\r\n                        overflow: hidden;\r\n                        border: none;\r\n                        background: transparent;\r\n                        cursor: pointer;\r\n\r\n                        &:before, &:after {\r\n                            content: '';\r\n                            position: absolute;\r\n                            height: 2px;\r\n                            width: 100%;\r\n                            top: 50%;\r\n                            left: 0;\r\n                            background: #fff;\r\n                            border-radius: 5px;\r\n                        }\r\n\r\n                        &:before {\r\n                            transform: rotate(45deg) translateY(-50%);\r\n                        }\r\n\r\n                        &:after {\r\n                            transform: rotate(-45deg) translateY(-50%);\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n</style>"],"names":["__props","closeBtn","body","ref","modelValue","_useModel","props","getQueryString","obj","key","value","getYoutubeUrl","youtube","videoId","query","getPadding","ratio","width","height","fullVideoUrl","computed","paddingBottom","isImg","watch","newVal"],"mappings":"wrCA4BU,iBAEN,CAAM,EAEA,MAAA,CAAA,mBAA0C,EAEhD,MAAAA,EAAc,CAwEd,MAAAC,QAA0C,EAClCC,EAAQC,EAAA,+BAAe,IAAA,EAChBC,EAAAC,EAAAL,EAAA,YAAA,EAEJM,EAAAN,EAIX,SAAAO,EAAAC,EAAA,CAES,MAAA,CAAAA,GAAA,OAAAA,YAAqE,GACpE,OAAQ,eAAsBC,GAAAD,EAAAC,CAAA,GAAA,IAAA,EAAA,IAAA,CAAA,CAAAA,EAAAC,CAAA,IAAA,GAAAD,CAAA,IAAAC,CAAA,EAAA,EAAA,KAAA,GAAA,CACpC,CACJ,SAAAC,EAAAC,EAAAC,EAAA,CAEA,MAAAC,IAA2CF,CAAA,EACjC,MAAC,2BAA6BC,CAAK,IAAIC,CAAM,EACnD,CACA,SAAOC,EAAUC,EAAA,CACrB,KAAA,CAAAC,EAAAC,CAAA,EAAAF,EAAA,MAAA,GAAA,EAAA,IAAA,MAAA,EAIA,SAFME,IAA8B,MAIpC,CAEM,MAAAC,EAAwBC,EAAA,IAAAT,EAAAL,EAAA,QAAAA,EAAA,OAAA,CAAA,EACtBe,EAAAD,EAAA,IAAAL,EAAAT,EAAA,KAAA,CAAA,EACAgB,EAAaF,EAAA,IAAcd,EAAA,QAAmB,CAAAA,EAAA,OAAA,EAAA,OAAAiB,EAAAnB,EAAAoB,GAAA,CAE9CA,EAAatB,GAAA,MAAAA,EAAA,MAAU,UAAO,IAAmBI,EAAA,eAAAJ,GAAA,MAAAA,EAAA,MAAA,UAAA,OAAAI,EAAA,cAAA,CACxD"}