{"version":3,"sources":["webpack:///./src/views/pages/E-Learning/VirtualClass/MainPanel/MainPanel-Vdo/index.vue?3f0f","webpack:///./src/views/pages/E-Learning/VirtualClass/MainPanel/MainPanel-Vdo/index.vue?375b","webpack:///src/views/pages/E-Learning/VirtualClass/MainPanel/MainPanel-Vdo/index.vue","webpack:///./src/views/pages/E-Learning/VirtualClass/MainPanel/MainPanel-Vdo/index.vue?81b8","webpack:///./src/views/pages/E-Learning/VirtualClass/MainPanel/MainPanel-Vdo/index.vue?e0eb"],"names":["render","_vm","this","_h","$createElement","_c","_self","key","staticClass","style","isBigScreen","ref","attrs","staticRenderFns","name","props","data","player","videoMimeType","isPlaying","counter","timer","e_code","localStorage","getItem","JSON","parse","r_stage","watch","currentVdoSetTopic","changeVideoSrc","val","setUpVideoJs","playVideoFromLastPosition","startTimer","stopTimer","keepCounting","forceStopVideo","dispose","methods","_this","sources","generateVdoSource","controlBar","playbackRateMenuButton","pictureInPictureToggle","autoplay","fluid","controls","hotkeys","responsive","aspectRatio","playbackRates","preload","nativeControlsForTouch","nativeControls","$refs","videoPlayer","on","lastPosition","parseInt","duration","currentTime","initdone","setStartPositionWhenSetUp","getVideoSrc","src","setTimeout","play","setStartPosition","getLastPosition","studentEnrollDetail","id","saveLastPosition","setItem","setInterval","addCounter","countLearningPercent","clearInterval","mounted","beforeDestroy","component"],"mappings":"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","file":"js/chunk-4c19372a.e5c0db64.js","sourcesContent":["import mod 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!./index.vue?vue&type=style&index=0&lang=scss&\"; export default mod; 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!./index.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{key:\"video-panel\",staticClass:\"bg-black flex justify-center items-center\",style:(_vm.isBigScreen ? 'height: calc(100vh - 180px);':'')},[_c('div',{staticClass:\"video-player\"},[_c('video',{ref:\"videoPlayer\",staticClass:\"video-js\",attrs:{\"controls\":\"\"}})])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div\n    key=\"video-panel\"\n    class=\"bg-black flex justify-center items-center\"\n    :style=\"isBigScreen ? 'height: calc(100vh - 180px);':''\"\n  >\n    <div class=\"video-player\">\n      <video ref=\"videoPlayer\" class=\"video-js\" controls></video>\n    </div>\n  </div>\n</template>\n\n<script>\nimport videojs from 'video.js';\n// import '@videojs/http-streaming';\nimport {stageParser, /*getRStage, getECode*/} from \"@/utils/auth-data\";\nimport {config} from \"@/utils/upload\";\n\nexport default {\n  name: \"MainPanelVdo\",\n  props: [\n    'currentVdoSetTopic',\n    'studentEnrollDetail',\n    'keepCounting',\n    'countLearningPercent',\n    'isBigScreen',\n    'forceStopVideo',\n  ],\n  data() {\n    return {\n      player: null,\n      videoMimeType: \"application/x-mpegURL\",\n      isPlaying: false,\n      counter: 0,\n      timer: null,\n      e_code: !localStorage.getItem(\"rsc\") ? null : JSON.parse(localStorage.getItem(\"rsc\")).e_code,\n      r_stage: !localStorage.getItem(\"rsc\") ? null : JSON.parse(localStorage.getItem(\"rsc\")).r_stage,\n    }\n  },\n  watch: {\n    currentVdoSetTopic(val) {\n      if (this.player) {\n        this.changeVideoSrc(val);\n      } else {\n        if (this.currentVdoSetTopic) {\n          this.setUpVideoJs(this.currentVdoSetTopic);\n\n          if (this.player) {\n            this.playVideoFromLastPosition();\n          }\n        }\n      }\n    },\n    isPlaying(val){\n      if(val){\n        this.startTimer();\n      }else{\n        this.stopTimer();\n      }\n    },\n    keepCounting(val){\n      if(!val){\n        this.stopTimer();\n      }\n    },\n    forceStopVideo(val){\n      if(val){\n        this.player.dispose();\n      }\n    }\n  },\n  methods: {\n    setUpVideoJs() {\n      const _this = this;\n\n      _this.player = videojs(this.$refs.videoPlayer, {\n        sources: this.generateVdoSource(this.currentVdoSetTopic),\n        controlBar: {\n          playbackRateMenuButton: true,\n          pictureInPictureToggle: false,\n        },\n        autoplay: true,\n        fluid: false,\n        controls: true,\n        hotkeys: true,\n        responsive: true,\n        aspectRatio: '16:9',\n        playbackRates: [1, 1.5, 2],\n        preload: 'metadata',\n        nativeControlsForTouch: true,\n        nativeControls: true,\n\n      }, function onPlayerReady() {\n        _this.$refs.videoPlayer.controls = true;\n\n        // wait for video metadata to load, then set time\n        _this.player.on('loadedmetadata', function() {\n          // _this.setStartPositionWhenSetUp();\n\n          let lastPosition = _this.getLastPosition();\n          //if last play is end then start from beginning\n          if (lastPosition === parseInt(_this.player.duration())) {\n            lastPosition = 0;\n          }\n\n          _this.player.currentTime(lastPosition);\n        });\n\n        let initdone = false;\n        // iPhone/iPad need to play first, then set the time\n        // events: https://www.w3.org/TR/html5/embedded-content-0.html#mediaevents\n        _this.player.on('canplaythrough', function() {\n          if (!initdone) {\n            _this.setStartPositionWhenSetUp();\n            initdone = true;\n          }\n        });\n\n        _this.player.on('timeupdate', async function () {\n          _this.saveLastPosition(_this.player.currentTime());\n        });\n\n        // Work when video is playing\n        _this.player.on('playing', function () {\n          _this.isPlaying = true;\n        });\n\n        //when video are pause trigger time update\n        // not good event to save\n        _this.player.on(['waiting', 'pause'], async function () {\n          // console.log('video waiting,pause');\n          _this.isPlaying = false;\n          _this.saveLastPosition(_this.player.currentTime());\n        });\n\n        //when video end save progress and go to next episode\n        _this.player.on('ended', async function () {\n          // console.log('video ended');\n          _this.isPlaying = false;\n        });\n\n      });\n    },\n    generateVdoSource(currentVdoSetTopic) {\n      return [\n        {\n          src: this.getVideoSrc(currentVdoSetTopic),\n          type: this.videoMimeType,\n        }\n      ]\n    },\n    getVideoSrc(currentVdoSetTopic) {\n      // console.log('getECode',getECode());\n      // console.log('getRStage',getRStage());\n      // const STREAMING_APP = `${getECode()}_${stageParser(getRStage())}_vod`;\n      const STREAMING_APP = `${this.e_code}_${stageParser(this.r_stage)}_vod`;\n      const vdoStreamPath = currentVdoSetTopic ? currentVdoSetTopic.vdoStreamPath : '';\n      return `${config.streamServer}/definst/${STREAMING_APP}/mp4:${vdoStreamPath}/playlist.m3u8`;\n    },\n    changeVideoSrc(currentVdoSetTopic) {\n      //change video\n      if (currentVdoSetTopic) {\n        this.player.src(\n          {\n            src: this.getVideoSrc(currentVdoSetTopic),\n            type: this.videoMimeType,\n          },\n        );\n\n        this.playVideoFromLastPosition();\n      }\n    },\n    playVideoFromLastPosition() {\n      //auto play video when change\n      const _this = this;\n      setTimeout(function () {\n        if (_this.player) {\n          _this.player.play();\n        }\n      }, 500);\n\n      //set position from last watch\n      this.setStartPosition();\n    },\n    setStartPositionWhenSetUp() {\n      let lastPosition = this.getLastPosition();\n      //if last play is end then start from beginning\n      if (lastPosition === parseInt(this.player.duration())) {\n        lastPosition = 0;\n      }\n\n      this.player.currentTime(lastPosition);\n\n      this.player.play();\n    },\n    setStartPosition() {\n      let lastPosition = this.getLastPosition();\n\n      //if last play is end then start from beginning\n      if (lastPosition === parseInt(this.player.duration()) ||\n        lastPosition >= parseInt(this.player.duration()) - 5) {\n        lastPosition = 0;\n      }\n\n      this.player.on('loadedmetadata', function () {\n        this.currentTime(lastPosition);\n      });\n\n    },\n    getLastPosition(){\n      let lastPosition = 0;\n\n      //get last position from local storage\n      lastPosition = localStorage.getItem(this.studentEnrollDetail.id + \"-\" + this.currentVdoSetTopic.id);\n      if (!lastPosition) {\n        lastPosition = 0\n      }\n\n      return parseInt(lastPosition);\n    },\n    saveLastPosition(currentTime) {\n      localStorage.setItem(this.studentEnrollDetail.id + \"-\" + this.currentVdoSetTopic.id, currentTime)\n    },\n    //-------------------------- FOR UPDATE LEARN TIME --------------------------\n    startTimer() {\n      // console.log('startTimer', this.keepCounting)\n      if(this.keepCounting){\n        this.timer = setInterval(this.addCounter, 1000);\n      }\n    },\n    stopTimer() {\n      // console.log('stop timer');\n      if (this.timer) {\n        // console.log('exec countLearningPercent');\n        this.countLearningPercent(this.counter);\n        clearInterval(this.timer);\n      }\n    },\n    async addCounter() {\n      this.counter++;\n      this.countLearningPercent(this.counter);\n      if(this.counter > 10){\n        this.counter = 0;\n      }\n    }\n  },\n  mounted() {\n    if (!this.player) {\n      this.setUpVideoJs();\n    }\n  },\n  beforeDestroy() {\n    this.stopTimer();\n    if (this.player) {\n      this.player.dispose()\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" type=\"text/css\">\n//@import '/video.js/dist/video-js.min.css';\n\n.video-player {\n  width: 100% !important;\n  height: auto !important;\n  max-height: calc(100vh - 180px) !important;\n  background: #22292f;\n  overflow: hidden;\n  position: relative;\n\n  & .video-js {\n    width: 100% !important;\n    height: auto !important;\n    padding-top: 0 !important;\n\n    & video {\n      width: 100% !important;\n      height: auto !important;\n      max-height: 100vh;\n      @media only screen and (min-height: 600px) {\n        max-height: calc(100vh - 200px);\n      }\n    }\n\n    & .vjs-control-bar {\n      display: none;\n      z-index: 999999;\n      position: absolute;\n    }\n\n    & .vjs-loading-spinner {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      width: 100%;\n      height: 100%;\n      // background: #0000005c;\n      text-align: center;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      color: white;\n      display: none;\n    }\n\n    & .vjs-big-play-button {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      margin: auto;\n      width: 200px;\n      height: 200px;\n      background: #0000005c;\n      text-align: center;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      color: white;\n      border-radius: 50%;\n      border-width: 5px;\n      border-color: #ffffff5e;\n      display: none;\n    }\n\n    & .vjs-control-bar {\n      display: none;\n      position: absolute;\n      bottom: 0;\n      height: 40px;\n      background: red;\n      display: flex;\n      flex-wrap: wrap;\n      flex-direction: row;\n      display: none;\n\n      & > .vjs-control {\n        margin: 10px;\n      }\n\n    }\n\n    & .vjs-poster {\n      display: none;\n    }\n\n    & .vjs-text-track-display {\n      display: none;\n    }\n\n    & .vjs-error-display {\n      display: none;\n    }\n\n    & .vjs-modal-dialog {\n      display: none;\n    }\n  }\n}\n</style>\n","import mod from \"-!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-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!./index.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-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!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=3a2255d3&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&lang=scss&\"\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  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}