{"version":3,"sources":["webpack:///./src/extensions/shop/components/Video.vue?b266","webpack:///./src/extensions/shop/components/Video.vue?3a03","webpack:///src/extensions/shop/components/Video.vue","webpack:///./src/extensions/shop/components/Video.vue?5d40","webpack:///./src/extensions/shop/components/Video.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","ref","attrs","src","mime","staticRenderFns","component"],"mappings":"2IAAA,W,yCCAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,mBAAmB,CAACF,EAAG,QAAQ,CAACG,IAAI,SAASD,YAAY,uCAAuCE,MAAM,CAAC,SAAW,GAAG,YAAc,GAAG,YAAc,KAAK,CAACJ,EAAG,SAAS,CAACI,MAAM,CAAC,IAAMR,EAAIS,IAAI,KAAOT,EAAIU,aACzTC,EAAkB,G,8CCqBtB,G,oBAAA,CACE,KAAF,cACE,MAAF,CACI,QAAJ,CACM,KAAN,OACM,QAFN,WAGQ,MAAR,KAGI,KAAJ,CACM,KAAN,OACM,UAAN,IAGE,KAdF,WAeI,MAAJ,CACM,OAAN,OAGE,MAAF,CACI,IADJ,SACA,KACA,wBACQ,KAAR,eACQ,KAAR,YACA,CACU,KAAV,UACU,IAAV,YAIQ,KAAR,cACQ,KAAR,iBAIE,SAAF,CACI,MADJ,WAEM,QAAN,iCAEI,KAJJ,WAKM,OAAN,WACA,mBAEA,uBAGI,IAXJ,WAYM,IAAN,EACM,GAAN,WAOQ,IAAR,2BACA,YADA,OACA,yBADA,OACA,mBACA,KAGQ,GAAR,YAGU,IAAV,2BACA,YADA,OACA,yBADA,OACA,y5CACA,sBACA,KAGU,EAAV,gFAEU,EAAV,+EAIM,OAAN,IAGE,QAAF,CACI,WADJ,WACM,IAAN,OA2DA,GACQ,OAAR,EACQ,SAAR,KACQ,QAAR,OACQ,OAAR,EACQ,YAAR,OACQ,UAAR,EAEQ,MAAR,CACU,IAAV,CACY,gBAAZ,EACY,kCAAZ,EACY,qBAAZ,EACY,UAAZ,UAEU,mBAAV,EACU,mBAAV,EACU,8BAAV,GAEQ,WAAR,CACU,wBAAV,IAQM,KAAN,2CACM,KAAN,4BAIM,KAAN,8BACQ,EAAR,0BAEQ,EAAR,yBAGM,KAAN,oCAEA,8BACA,kCACA,qBAIM,EAAN,0BAGE,QA5LF,WA6LI,KAAJ,cAEE,cA/LF,WAgMA,sCCtN6W,I,wBCQzWC,EAAY,eACd,EACAb,EACAY,GACA,EACA,KACA,WACA,MAIa,aAAAC,E","file":"js/chunk-41fd9467.50908cd1.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Video.vue?vue&type=style&index=0&id=312decae&lang=sass&nolang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"video-container\"},[_c('video',{ref:\"player\",staticClass:\"video-js vjs-city-offer minimalistic\",attrs:{\"controls\":\"\",\"playsinline\":\"\",\"crossorigin\":\"\"}},[_c('source',{attrs:{\"src\":_vm.src,\"type\":_vm.mime}})])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template lang=\"pug\">\n.video-container\n  video(\n    ref=\"player\"\n    class=\"video-js vjs-city-offer minimalistic\"\n    controls\n    playsinline\n    crossorigin\n  )\n    source(:src=\"src\" :type=\"mime\")\n</template>\n\n<script>\nimport { get, trim } from '@/helpers';\n\nimport videojs from 'video.js';\nimport 'videojs-http-source-selector';\nimport 'videojs-contrib-quality-levels';\n\n// import Hls from 'hls.js';\n// import Plyr from 'plyr';\n\nexport default {\n    name: 'VideoPlayer',\n    props: {\n        options: {\n            type: Object,\n            default() {\n                return {};\n            }\n        },\n        data: {\n            type: Object,\n            required: true\n        }\n    },\n    data() {\n        return {\n            player: null\n        };\n    },\n    watch: {\n        src(fresh, old) {\n            if (old && fresh !== old && this.player) {\n                this.player.pause();\n                this.player.src([\n                    {\n                        type: this.mime,\n                        src: this.src\n                    }\n                ]);\n                // this.initialise()\n                this.player.load();\n                this.player.play();\n            }\n        }\n    },\n    computed: {\n        isHls() {\n            return !!get(this.data, 'hls');\n        },\n        mime() {\n            if (this.isHls) {\n                return this.data.hls.mime;\n            } else {\n                return this.data.source.mime;\n            }\n        },\n        src() {\n            let src;\n            if (this.data) {\n                // if (this.isHls) {\n                //   src = `${cdnEndpoint}/${this.data.hls.path}/${this.data.hls.name}`;\n                // } else {\n                //   src = `${cdnEndpoint}/${this.data.source.path}/${this.data.source.name}`;\n                // }\n\n                const storageRoute = trim(\n                    `${process.env.VUE_APP_API_HTTP}${process.env.VUE_APP_API_ENDPOINT}${process.env.VUE_APP_API_PUBLIC_STORAGE_ROUTE}`,\n                    '/'\n                );\n\n                if (this.isHls) {\n                    // src = `${storageRoute}/videos/${this.data.id}/${this.data.hls.name}`;\n\n                    const cdnEndpoint = trim(\n                        `${process.env.VUE_APP_CDN_HTTP}${process.env.VUE_APP_CDN_ENDPOINT}${process.env\n                            .VUE_APP_CDN_ROOT || ''}`,\n                        '/'\n                    );\n\n                    src = `${cdnEndpoint}/${this.data.hls.path}/${this.data.hls.name}`;\n                } else {\n                    src = `${storageRoute}/videos/${this.data.id}/${this.data.source.name}`;\n                }\n            }\n            // this.activeProductMedia.data.hls\n            return src;\n        }\n    },\n    methods: {\n        initialise() {\n            // TODO\n            // const video = this.$refs.player;\n            // // const player = new Plyr(video);\n            // const source = this.src;\n\n            // // For more options see: https://github.com/sampotts/plyr/#options\n            // // captions.update is required for captions to work with hls.js\n            // const options = {};\n\n            // const updateQuality = newQuality => {\n            //   window.hls.levels.forEach((level, levelIndex) => {\n            //     if (level.height === newQuality) {\n            //       console.log(\"Found quality match with \" + newQuality);\n            //       window.hls.currentLevel = levelIndex;\n            //     }\n            //   });\n            // }\n\n            // if (this.isHls && Hls.isSupported()) {\n            //   // For more Hls.js options, see https://github.com/dailymotion/hls.js\n            //   const hls = new Hls();\n            //   hls.loadSource(source);\n\n            //   // From the m3u8 playlist, hls parses the manifest and returns\n            //   // all available video qualities. This is important, in this approach,\n            //   // we will have one source on the Plyr player.\n            //   hls.on(Hls.Events.MANIFEST_PARSED, function () {\n            //     const availableQualities = hls.levels.map((l) => l.height)\n            //     availableQualities.unshift(0) //prepend 0 to quality array\n            //     options.quality = {\n            //       default: 0, //Default - AUTO\n            //       options: availableQualities,\n            //       forced: true,\n            //       onChange: (e) => updateQuality(e),\n            //     }\n            //     hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {\n            //       var xpath = \"//button[@data-plyr='settings']/span[text()='Quality']/span[@class='plyr__menu__value']\";\n            //       var label = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;\n\n            //       var span = document.querySelector(\".plyr__menu__container [data-plyr='quality'][value='0'] span\")\n            //       if (hls.autoLevelEnabled) {\n            //         span.innerHTML = `AUTO (${hls.levels[data.level].height}p)`\n            //         label.innerHTML = `AUTO (${hls.levels[data.level].height}p)`\n            //       } else {\n            //         span.innerHTML = `AUTO`\n            //         label.innerHTML = `${hls.levels[data.level].height}p`\n            //       }\n            //     })\n            //     const player = new Plyr(video, options);\n            //     console.log(player);\n            //   })\n            //   hls.attachMedia(video);\n            //   window.hls = hls;\n            // } else {\n            //   // default options with no quality update in case Hls is not supported\n            //   new Plyr(video, options);\n            // }\n\n            const options = {\n                muted: true,\n                language: 'en',\n                preload: 'auto',\n                fluid: true,\n                aspectRatio: '9:16',\n                autoplay: true,\n                // inactivityTimeout: 1,\n                html5: {\n                    hls: {\n                        overrideNative: true,\n                        limitRenditionByPlayerDimensions: true,\n                        useDevicePixelRatio: true,\n                        bandwidth: 16777216\n                    },\n                    nativeAudioTracks: false,\n                    nativeVideoTracks: false,\n                    useBandwidthFromLocalStorage: true\n                },\n                controlBar: {\n                    pictureInPictureToggle: false\n                }\n                // plugins: {\n                //   hlsQualitySelector: {\n                //     displayCurrentQuality: true,\n                //   }\n                // }\n            };\n            this.player = videojs(this.$refs.player, options);\n            this.player.httpSourceSelector();\n\n            // this.player.controls(false)\n\n            this.player.on('ended', () => {\n                this.player.posterImage.show();\n                // vid.bigPlayButton.show();\n                this.player.currentTime(0);\n            });\n\n            this.player.on('touchstart', event => {\n                // this.$refs.player.parentNode.classList.add('vjs-show-controls');\n                if (event.target.nodeName === 'VIDEO') {\n                    if (this.player.paused()) this.player.play();\n                    else this.player.pause();\n                }\n            });\n\n            videojs.log.level('error');\n        }\n    },\n    mounted() {\n        this.initialise();\n    },\n    beforeDestroy() {\n        if (this.player) this.player.dispose();\n    }\n};\n</script>\n\n<style lang=\"sass\" nolang=\"scss\" scoped>\n.video-container\n  position: fixed\n  right: 0\n  top: 0\n  ::v-deep .video-js\n    .vjs-http-source-selector .vjs-menu\n      width: 60px !important\n      left: -30px !important\n</style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--11-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Video.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--11-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Video.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Video.vue?vue&type=template&id=312decae&scoped=true&lang=pug&\"\nimport script from \"./Video.vue?vue&type=script&lang=js&\"\nexport * from \"./Video.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Video.vue?vue&type=style&index=0&id=312decae&lang=sass&nolang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"312decae\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}