{"version":3,"sources":["webpack:///./src/extensions/shop/components/Video.vue?7f83","webpack:///./src/extensions/shop/components/Video.vue?c69c","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","name","props","options","type","Object","default","data","required","player","watch","old","fresh","pause","load","play","computed","isHls","hls","source","methods","initialise","muted","language","preload","fluid","aspectRatio","autoplay","html5","overrideNative","limitRenditionByPlayerDimensions","useDevicePixelRatio","bandwidth","nativeAudioTracks","nativeVideoTracks","useBandwidthFromLocalStorage","controlBar","pictureInPictureToggle","httpSourceSelector","on","event","target","nodeName","mounted","beforeDestroy","dispose","component"],"mappings":"kHAAA,W,kECAA,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,CACEC,KAAM,cACNC,MAAO,CACLC,QAAS,CACPC,KAAMC,OACNC,QAFN,WAGQ,MAAO,KAGXC,KAAM,CACJH,KAAMC,OACNG,UAAU,IAGdD,KAdF,WAeI,MAAO,CACLE,OAAQ,OAGZC,MAAO,CACLZ,IADJ,SACA,KACUa,GAAOC,IAAUD,GAAOrB,KAAKmB,SAC/BnB,KAAKmB,OAAOI,QACZvB,KAAKmB,OAAOX,IAAI,CACxB,CACU,KAAV,UACU,IAAV,YAIQR,KAAKmB,OAAOK,OACZxB,KAAKmB,OAAOM,UAIlBC,SAAU,CACRC,MADJ,WAEM,QAAS,OAAf,OAAe,CAAf,kBAEIlB,KAJJ,WAKM,OAAIT,KAAK2B,MACA3B,KAAKiB,KAAKW,IAAInB,KAEdT,KAAKiB,KAAKY,OAAOpB,MAG5BD,IAXJ,WAYM,IAAN,EACM,GAAIR,KAAKiB,KAAM,CAOb,IAAR,2BACA,YADA,OACA,yBADA,OACA,mBACA,KAGQ,GAAIjB,KAAK2B,MAAO,CAGd,IAAV,2BACA,YADA,OACA,yBADA,OACA,o0BACA,KAGUnB,EAAM,GAAhB,6EAEUA,EAAM,GAAhB,4EAIM,OAAOA,IAGXsB,QAAS,CACPC,WADJ,WACA,WA2DA,GACQC,OAAO,EACPC,SAAU,KACVC,QAAS,OACTC,OAAO,EACPC,YAAa,OACbC,UAAU,EAEVC,MAAO,CACLV,IAAK,CACHW,gBAAgB,EAChBC,kCAAkC,EAClCC,qBAAqB,EACrBC,UAAW,UAEbC,mBAAmB,EACnBC,mBAAmB,EACnBC,8BAA8B,GAEhCC,WAAY,CACVC,wBAAwB,IAQ5B/C,KAAKmB,OAAS,OAApB,OAAoB,CAApB,qBACMnB,KAAKmB,OAAO6B,qBAIZhD,KAAKmB,OAAO8B,GAAG,SAAS,WACtB,EAAR,0BAEQ,EAAR,yBAGMjD,KAAKmB,OAAO8B,GAAG,cAAc,SAAnC,GAEsC,UAA1BC,EAAMC,OAAOC,WACX,EAAd,gCACA,qBAIM,EAAN,0BAGEC,QA3LF,WA4LIrD,KAAK+B,cAEPuB,cA9LF,WA+LQtD,KAAKmB,QAAQnB,KAAKmB,OAAOoC,aCrN4U,I,wBCQzWC,EAAY,eACd,EACA1D,EACAY,GACA,EACA,KACA,WACA,MAIa,aAAA8C,E","file":"js/chunk-0fbfbf1f.8e8d6fa5.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=454b0f4a&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.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=454b0f4a&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=454b0f4a&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  \"454b0f4a\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}