{"version":3,"sources":["webpack:///./src/modules/ebooks/_components/ebook-viewer/PreviewMedia.vue?e53e","webpack:///./src/components/content-files/PreviewVideoCustom.vue?3c64","webpack:///src/components/content-files/PreviewVideoCustom.vue","webpack:///./src/components/content-files/PreviewVideoCustom.vue?02e5","webpack:///./src/components/content-files/PreviewVideoCustom.vue","webpack:///src/modules/ebooks/_components/ebook-viewer/PreviewMedia.vue","webpack:///./src/modules/ebooks/_components/ebook-viewer/PreviewMedia.vue?1ad2","webpack:///./src/modules/ebooks/_components/ebook-viewer/PreviewMedia.vue","webpack:///./node_modules/debounce/index.js","webpack:///./src/components/content-files/PreviewVideoCustom.vue?ca29","webpack:///./src/modules/ebooks/_components/ebook-viewer/PreviewMedia.vue?5bf6"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","dataSource","linkUrl","checkImage","attrs","includes","appUrl","checkAudio","isFullLink","posterLink","urlImg","imgThumbAudio","volumeVal","on","handleEnded","checkVideo","_e","staticRenderFns","ref","poster","path","directives","name","rawName","value","hiddenControls","expression","_v","props","handlePlay","handleVolume","data","video","computed","videoControls","playButton","playbackIcons","timeElapsed","duration","progressBar","seek","seekTooltip","volumeButton","volumeIcons","volumeMute","volumeLow","volumeHigh","volume","playbackAnimation","fullscreenButton","videoContainer","fullscreenIcons","pipButton","watch","newVal","mounted","document","destroyed","methods","handleEvts","togglePlay","updatePlayButton","formatTime","timeInSeconds","minutes","seconds","initializeVideo","updateTimeElapsed","updateProgress","updateSeekTooltip","event","parseInt","skipAhead","updateVolume","updateVolumeIcon","icon","toggleMute","animatePlayback","opacity","transform","toggleFullScreen","updateFullscreenButton","togglePip","console","hideControls","showControls","keyboardShortcuts","self","setTimeout","component","mixins","isRelateMedia","bookPageLinkGroup","isPublish","components","PreviewImage","PreviewYoutube","PreviewAudioPoster","CustomVideo","img404","checkFileTypeShowBtnsMedia","debounce","func","wait","immediate","timeout","args","context","timestamp","result","later","last","Date","now","apply","debounced","arguments","callNow","clear","clearTimeout","flush","module","exports"],"mappings":"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","file":"js/chunk-ff447744.281ecc7b.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"media-preview full-box\"},[(_vm.dataSource && _vm.dataSource.linkUrl && _vm.checkImage(_vm.dataSource.linkUrl))?_c('PreviewImage',{attrs:{\"pathView\":_vm.dataSource.linkUrl.includes('http') ? _vm.dataSource.linkUrl : (\"\" + _vm.appUrl + (_vm.dataSource.linkUrl)),\"isFullSize\":true}}):(_vm.dataSource && _vm.dataSource.linkUrl && _vm.checkAudio(_vm.dataSource.linkUrl))?_c('PreviewAudioPoster',{attrs:{\"pathView\":_vm.isFullLink(_vm.dataSource.linkUrl) ? _vm.dataSource.linkUrl : (\"\" + _vm.appUrl + (_vm.dataSource.linkUrl)),\"autoPlay\":true,\"poster\":_vm.dataSource.posterLink ? (_vm.urlImg + \"/\" + (_vm.dataSource.posterLink)) : _vm.imgThumbAudio,\"hiddenControls\":true,\"handleVolume\":_vm.volumeVal},on:{\"ended\":_vm.handleEnded}}):(_vm.dataSource && _vm.dataSource.linkUrl && _vm.checkVideo(_vm.dataSource.linkUrl))?_c('CustomVideo',{attrs:{\"path\":_vm.dataSource.linkUrl.includes('http') ? _vm.dataSource.linkUrl : (\"\" + _vm.appUrl + (_vm.dataSource.linkUrl)),\"hiddenControls\":true,\"handleVolume\":_vm.volumeVal},on:{\"ended\":_vm.handleEnded}}):_vm._e()],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"custom-video\"},[_c('div',{ref:\"video_container\",staticClass:\"video-container\",attrs:{\"id\":\"video-container\"}},[_c('div',{ref:\"playback_animation\",staticClass:\"playback-animation\",attrs:{\"id\":\"playback-animation\"}},[_c('svg',{staticClass:\"playback-icons\"},[_c('use',{staticClass:\"hidden\",attrs:{\"href\":\"#play-icon\"}}),_c('use',{attrs:{\"href\":\"#pause\"}})])]),_c('video',{ref:\"video\",staticClass:\"video full-size\",attrs:{\"autoplay\":\"\",\"controls\":\"false\",\"id\":\"video\",\"preload\":\"metadata\",\"poster\":_vm.poster}},[_c('source',{attrs:{\"src\":_vm.path,\"type\":\"video/mp4\"}})]),_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.hiddenControls),expression:\"!hiddenControls\"}],ref:\"video_control\",staticClass:\"video-controls hidden\",attrs:{\"id\":\"video-controls\"}},[(!_vm.hiddenControls)?_c('div',{staticClass:\"video-progress\"},[_c('progress',{ref:\"progressbar\",attrs:{\"id\":\"progress-bar\",\"value\":\"0\",\"min\":\"0\"}}),_c('input',{ref:\"seek\",staticClass:\"seek\",attrs:{\"id\":\"seek\",\"value\":\"0\",\"min\":\"0\",\"type\":\"range\",\"step\":\"1\"}}),_c('div',{ref:\"seek_tooltip\",staticClass:\"seek-tooltip\",attrs:{\"id\":\"seek-tooltip\"}},[_vm._v(\"00:00\")])]):_vm._e(),_c('div',{staticClass:\"bottom-controls\"},[_c('div',{staticClass:\"left-controls\"},[(!_vm.hiddenControls)?_c('button',{ref:\"play\",attrs:{\"data-title\":\"Play (k)\",\"id\":\"play\"}},[_c('svg',{staticClass:\"playback-icons\"},[_c('use',{attrs:{\"href\":\"#play-icon\"}}),_c('use',{staticClass:\"hidden\",attrs:{\"href\":\"#pause\"}})])]):_vm._e(),_c('div',{ref:\"volume_controls\",staticClass:\"volume-controls\"},[_c('button',{ref:\"volume_btn\",staticClass:\"volume-button\",attrs:{\"data-title\":\"Mute (m)\",\"id\":\"volume-button\"}},[_c('svg',[_c('use',{staticClass:\"hidden\",attrs:{\"href\":\"#volume-mute\"}}),_c('use',{staticClass:\"hidden\",attrs:{\"href\":\"#volume-low\"}}),_c('use',{attrs:{\"href\":\"#volume-high\"}})])]),_c('input',{ref:\"volume\",staticClass:\"volume\",attrs:{\"id\":\"volume\",\"value\":\"1\",\"data-mute\":\"0.5\",\"type\":\"range\",\"max\":\"1\",\"min\":\"0\",\"step\":\"0.01\"}})]),_c('div',{staticClass:\"time\"},[_c('time',{ref:\"time_elapsed\",attrs:{\"id\":\"time-elapsed\"}},[_vm._v(\"00:00\")]),_c('span',[_vm._v(\" / \")]),_c('time',{ref:\"duration\",attrs:{\"id\":\"duration\"}},[_vm._v(\"00:00\")])])]),_c('div',{staticClass:\"right-controls\"},[_c('button',{ref:\"pip_btn\",staticClass:\"pip-button\",attrs:{\"data-title\":\"PIP (p)\",\"id\":\"pip-button\"}},[_c('svg',[_c('use',{attrs:{\"href\":\"#pip\"}})])]),_c('button',{ref:\"fullscreen_btn\",staticClass:\"fullscreen-button\",attrs:{\"data-title\":\"Full screen (f)\",\"id\":\"fullscreen-button\"}},[_c('svg',[_c('use',{attrs:{\"href\":\"#fullscreen\"}}),_c('use',{staticClass:\"hidden\",attrs:{\"href\":\"#fullscreen-exit\"}})])])])])])]),_c('svg',{staticClass:\"display-none\"},[_c('defs',[_c('symbol',{attrs:{\"id\":\"pause\",\"viewBox\":\"0 0 24 24\"}},[_c('path',{attrs:{\"d\":\"M14.016 5.016h3.984v13.969h-3.984v-13.969zM6 18.984v-13.969h3.984v13.969h-3.984z\"}})]),_c('symbol',{attrs:{\"id\":\"play-icon\",\"viewBox\":\"0 0 24 24\"}},[_c('path',{attrs:{\"d\":\"M8.016 5.016l10.969 6.984-10.969 6.984v-13.969z\"}})]),_c('symbol',{attrs:{\"id\":\"volume-high\",\"viewBox\":\"0 0 24 24\"}},[_c('path',{attrs:{\"d\":\"M14.016 3.234q3.047 0.656 5.016 3.117t1.969 5.648-1.969 5.648-5.016 3.117v-2.063q2.203-0.656 3.586-2.484t1.383-4.219-1.383-4.219-3.586-2.484v-2.063zM16.5 12q0 2.813-2.484 4.031v-8.063q1.031 0.516 1.758 1.688t0.727 2.344zM3 9h3.984l5.016-5.016v16.031l-5.016-5.016h-3.984v-6z\"}})]),_c('symbol',{attrs:{\"id\":\"volume-low\",\"viewBox\":\"0 0 24 24\"}},[_c('path',{attrs:{\"d\":\"M5.016 9h3.984l5.016-5.016v16.031l-5.016-5.016h-3.984v-6zM18.516 12q0 2.766-2.531 4.031v-8.063q1.031 0.516 1.781 1.711t0.75 2.32z\"}})]),_c('symbol',{attrs:{\"id\":\"volume-mute\",\"viewBox\":\"0 0 24 24\"}},[_c('path',{attrs:{\"d\":\"M12 3.984v4.219l-2.109-2.109zM4.266 3l16.734 16.734-1.266 1.266-2.063-2.063q-1.547 1.313-3.656 1.828v-2.063q1.172-0.328 2.25-1.172l-4.266-4.266v6.75l-5.016-5.016h-3.984v-6h4.734l-4.734-4.734zM18.984 12q0-2.391-1.383-4.219t-3.586-2.484v-2.063q3.047 0.656 5.016 3.117t1.969 5.648q0 2.203-1.031 4.172l-1.5-1.547q0.516-1.266 0.516-2.625zM16.5 12q0 0.422-0.047 0.609l-2.438-2.438v-2.203q1.031 0.516 1.758 1.688t0.727 2.344z\"}})]),_c('symbol',{attrs:{\"id\":\"fullscreen\",\"viewBox\":\"0 0 24 24\"}},[_c('path',{attrs:{\"d\":\"M14.016 5.016h4.969v4.969h-1.969v-3h-3v-1.969zM17.016 17.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 9.984v-4.969h4.969v1.969h-3v3h-1.969zM6.984 14.016v3h3v1.969h-4.969v-4.969h1.969z\"}})]),_c('symbol',{attrs:{\"id\":\"fullscreen-exit\",\"viewBox\":\"0 0 24 24\"}},[_c('path',{attrs:{\"d\":\"M15.984 8.016h3v1.969h-4.969v-4.969h1.969v3zM14.016 18.984v-4.969h4.969v1.969h-3v3h-1.969zM8.016 8.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 15.984v-1.969h4.969v4.969h-1.969v-3h-3z\"}})]),_c('symbol',{attrs:{\"id\":\"pip\",\"viewBox\":\"0 0 24 24\"}},[_c('path',{attrs:{\"d\":\"M21 19.031v-14.063h-18v14.063h18zM23.016 18.984q0 0.797-0.609 1.406t-1.406 0.609h-18q-0.797 0-1.406-0.609t-0.609-1.406v-14.016q0-0.797 0.609-1.383t1.406-0.586h18q0.797 0 1.406 0.586t0.609 1.383v14.016zM18.984 11.016v6h-7.969v-6h7.969z\"}})])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"custom-video\">\r\n    <div class=\"video-container\" id=\"video-container\" ref=\"video_container\">\r\n      <div ref=\"playback_animation\" class=\"playback-animation\" id=\"playback-animation\">\r\n        <svg class=\"playback-icons\">\r\n          <use class=\"hidden\" href=\"#play-icon\"></use>\r\n          <use href=\"#pause\"></use>\r\n        </svg>\r\n      </div>\r\n\r\n      <video autoplay controls=\"false\" class=\"video full-size\" id=\"video\" preload=\"metadata\" ref=\"video\" :poster=\"poster\">\r\n        <source :src=\"path\" type=\"video/mp4\">\r\n      </video>\r\n\r\n      <div v-show=\"!hiddenControls\" class=\"video-controls hidden\" id=\"video-controls\" ref=\"video_control\">\r\n        <div v-if=\"!hiddenControls\" class=\"video-progress\">\r\n          <progress id=\"progress-bar\" value=\"0\" min=\"0\" ref=\"progressbar\"></progress>\r\n          <input ref=\"seek\" class=\"seek\" id=\"seek\" value=\"0\" min=\"0\" type=\"range\" step=\"1\">\r\n          <div ref=\"seek_tooltip\" class=\"seek-tooltip\" id=\"seek-tooltip\">00:00</div>\r\n        </div>\r\n\r\n        <div class=\"bottom-controls\">\r\n          <div class=\"left-controls\">\r\n            <button v-if=\"!hiddenControls\" data-title=\"Play (k)\" id=\"play\" ref=\"play\">\r\n              <svg class=\"playback-icons\">\r\n                <use href=\"#play-icon\"></use>\r\n                <use class=\"hidden\" href=\"#pause\"></use>\r\n              </svg>\r\n            </button>\r\n\r\n            <div class=\"volume-controls\" ref=\"volume_controls\">\r\n              <button ref=\"volume_btn\" data-title=\"Mute (m)\" class=\"volume-button\" id=\"volume-button\">\r\n                <svg>\r\n                  <use class=\"hidden\" href=\"#volume-mute\"></use>\r\n                  <use class=\"hidden\" href=\"#volume-low\"></use>\r\n                  <use href=\"#volume-high\"></use>\r\n                </svg>\r\n              </button>\r\n\r\n              <input ref=\"volume\" class=\"volume\" id=\"volume\" value=\"1\" data-mute=\"0.5\" type=\"range\" max=\"1\" min=\"0\" step=\"0.01\">\r\n            </div>\r\n\r\n            <div class=\"time\">\r\n              <time ref=\"time_elapsed\" id=\"time-elapsed\">00:00</time>\r\n              <span> / </span>\r\n              <time ref=\"duration\" id=\"duration\">00:00</time>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"right-controls\">\r\n            <button ref=\"pip_btn\" data-title=\"PIP (p)\" class=\"pip-button\" id=\"pip-button\">\r\n              <svg>\r\n                <use href=\"#pip\"></use>\r\n              </svg>\r\n            </button>\r\n            <button ref=\"fullscreen_btn\" data-title=\"Full screen (f)\" class=\"fullscreen-button\" id=\"fullscreen-button\">\r\n              <svg>\r\n                <use href=\"#fullscreen\"></use>\r\n                <use href=\"#fullscreen-exit\" class=\"hidden\"></use>\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <svg class=\"display-none\">\r\n      <defs>\r\n        <symbol id=\"pause\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M14.016 5.016h3.984v13.969h-3.984v-13.969zM6 18.984v-13.969h3.984v13.969h-3.984z\"></path>\r\n        </symbol>\r\n\r\n        <symbol id=\"play-icon\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M8.016 5.016l10.969 6.984-10.969 6.984v-13.969z\"></path>\r\n        </symbol>\r\n\r\n        <symbol id=\"volume-high\" viewBox=\"0 0 24 24\">\r\n        <path d=\"M14.016 3.234q3.047 0.656 5.016 3.117t1.969 5.648-1.969 5.648-5.016 3.117v-2.063q2.203-0.656 3.586-2.484t1.383-4.219-1.383-4.219-3.586-2.484v-2.063zM16.5 12q0 2.813-2.484 4.031v-8.063q1.031 0.516 1.758 1.688t0.727 2.344zM3 9h3.984l5.016-5.016v16.031l-5.016-5.016h-3.984v-6z\"></path>\r\n        </symbol>\r\n\r\n        <symbol id=\"volume-low\" viewBox=\"0 0 24 24\">\r\n        <path d=\"M5.016 9h3.984l5.016-5.016v16.031l-5.016-5.016h-3.984v-6zM18.516 12q0 2.766-2.531 4.031v-8.063q1.031 0.516 1.781 1.711t0.75 2.32z\"></path>\r\n        </symbol>\r\n\r\n        <symbol id=\"volume-mute\" viewBox=\"0 0 24 24\">\r\n        <path d=\"M12 3.984v4.219l-2.109-2.109zM4.266 3l16.734 16.734-1.266 1.266-2.063-2.063q-1.547 1.313-3.656 1.828v-2.063q1.172-0.328 2.25-1.172l-4.266-4.266v6.75l-5.016-5.016h-3.984v-6h4.734l-4.734-4.734zM18.984 12q0-2.391-1.383-4.219t-3.586-2.484v-2.063q3.047 0.656 5.016 3.117t1.969 5.648q0 2.203-1.031 4.172l-1.5-1.547q0.516-1.266 0.516-2.625zM16.5 12q0 0.422-0.047 0.609l-2.438-2.438v-2.203q1.031 0.516 1.758 1.688t0.727 2.344z\"></path>\r\n        </symbol>\r\n\r\n        <symbol id=\"fullscreen\" viewBox=\"0 0 24 24\">\r\n        <path d=\"M14.016 5.016h4.969v4.969h-1.969v-3h-3v-1.969zM17.016 17.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 9.984v-4.969h4.969v1.969h-3v3h-1.969zM6.984 14.016v3h3v1.969h-4.969v-4.969h1.969z\"></path>\r\n        </symbol>\r\n\r\n        <symbol id=\"fullscreen-exit\" viewBox=\"0 0 24 24\">\r\n        <path d=\"M15.984 8.016h3v1.969h-4.969v-4.969h1.969v3zM14.016 18.984v-4.969h4.969v1.969h-3v3h-1.969zM8.016 8.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 15.984v-1.969h4.969v4.969h-1.969v-3h-3z\"></path>\r\n        </symbol>\r\n\r\n        <symbol id=\"pip\" viewBox=\"0 0 24 24\">\r\n        <path d=\"M21 19.031v-14.063h-18v14.063h18zM23.016 18.984q0 0.797-0.609 1.406t-1.406 0.609h-18q-0.797 0-1.406-0.609t-0.609-1.406v-14.016q0-0.797 0.609-1.383t1.406-0.586h18q0.797 0 1.406 0.586t0.609 1.383v14.016zM18.984 11.016v6h-7.969v-6h7.969z\"></path>\r\n        </symbol>\r\n      </defs>\r\n    </svg>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n// import { debounce } from 'debounce'\r\n\r\nexport default {\r\n  name: 'CustomVideo',\r\n  props: {\r\n    path: String,\r\n    poster: String,\r\n    hiddenControls: Boolean,\r\n    handlePlay: Boolean,\r\n    handleVolume: String\r\n  },\r\n  data () {\r\n    return {\r\n      video: null\r\n    }\r\n  },\r\n  computed: {\r\n    // video () {\r\n    //   // return this.$refs.video\r\n    //   return document.getElementById('video')\r\n    // },\r\n    videoControls () {\r\n      // return this.$refs.video_controls\r\n      return document.getElementById('video-controls')\r\n    },\r\n    playButton () {\r\n      // return this.$refs.play_btn\r\n      return document.getElementById('play')\r\n    },\r\n    playbackIcons () {\r\n      return document.querySelectorAll('.playback-icons use')\r\n    },\r\n    timeElapsed () {\r\n      // return this.$refs.time_elapsed\r\n      return document.getElementById('time-elapsed')\r\n    },\r\n    duration () {\r\n      // return this.$refs.duration\r\n      return document.getElementById('duration')\r\n    },\r\n    progressBar () {\r\n      // return this.$refs.progressbar\r\n      return document.getElementById('progress-bar')\r\n    },\r\n    seek () {\r\n      // return this.$refs.seek\r\n      return document.getElementById('seek')\r\n    },\r\n    seekTooltip () {\r\n      // return this.$refs.seek_tooltip\r\n      return document.getElementById('seek-tooltip')\r\n    },\r\n    volumeButton () {\r\n      // return this.$refs.volume_btn\r\n      return document.getElementById('volume-button')\r\n    },\r\n    volumeIcons () {\r\n      return document.querySelectorAll('.volume-button use')\r\n    },\r\n    volumeMute () {\r\n      return document.querySelector('use[href=\"#volume-mute\"]')\r\n    },\r\n    volumeLow () {\r\n      return document.querySelector('use[href=\"#volume-low\"]')\r\n    },\r\n    volumeHigh () {\r\n      return document.querySelector('use[href=\"#volume-high\"]')\r\n    },\r\n    volume () {\r\n      // return this.$refs.volume\r\n      return document.getElementById('volume')\r\n    },\r\n    playbackAnimation () {\r\n      // return this.$refs.playback_animation\r\n      return document.getElementById('playback-animation')\r\n    },\r\n    fullscreenButton () {\r\n      // return this.$refs.fullscreen_btn\r\n      return document.getElementById('fullscreen-button')\r\n    },\r\n    videoContainer () {\r\n      // return this.$refs.video_container\r\n      return document.getElementById('video-container')\r\n    },\r\n    fullscreenIcons () {\r\n      return document.querySelectorAll('use')\r\n    },\r\n    pipButton () {\r\n      // return this.$refs.pip_btn\r\n      return document.getElementById('pip-button')\r\n    }\r\n  },\r\n  watch: {\r\n    handlePlay () {\r\n      this.togglePlay()\r\n    },\r\n    handleVolume (newVal) {\r\n      this.updateVolume(newVal)\r\n    }\r\n  },\r\n  mounted () {\r\n    this.video = document.getElementById('video')\r\n    if (!!document.createElement('video').canPlayType) {\r\n      this.video.controls = false\r\n      this.videoControls.classList.remove('hidden')\r\n    }\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n      if (!('pictureInPictureEnabled' in document)) {\r\n        this.pipButton.classList.add('hidden')\r\n      }\r\n    });\r\n    document.addEventListener('keyup', this.keyboardShortcuts)\r\n    this.handleEvts()\r\n  },\r\n  destroyed () {\r\n    this.video = null\r\n    document.removeEventListener('DOMContentLoaded',null , true)\r\n    document.removeEventListener('keyup', this.keyboardShortcuts)\r\n    if (this.video) {\r\n      this.video.removeEventListener('loadedmetadata', this.initializeVideo)\r\n      this.video.removeEventListener('play', this.updatePlayButton)\r\n      this.video.removeEventListener('pause', this.updatePlayButton)\r\n      this.video.removeEventListener('loadedmetadata', this.initializeVideo)\r\n      this.video.removeEventListener('timeupdate', this.updateTimeElapsed)\r\n      this.video.removeEventListener('timeupdate', this.updateProgress)\r\n      this.video.removeEventListener('volumechange', this.updateVolumeIcon)\r\n      this.video.removeEventListener('click', this.togglePlay)\r\n      this.video.removeEventListener('click', this.animatePlayback)\r\n      this.video.removeEventListener('mouseenter', this.showControls)\r\n      this.video.removeEventListener('mouseleave', this.hideControls)\r\n      this.videoControls.removeEventListener('mouseleave', this.hideControls)\r\n      this.seek.removeEventListener('mousemove', this.updateSeekTooltip)\r\n      this.seek.removeEventListener('input', this.skipAhead)\r\n      this.volume.removeEventListener('input', this.updateVolume)\r\n      this.volumeButton.removeEventListener('click', this.toggleMute)\r\n      this.fullscreenButton.removeEventListener('click', this.toggleFullScreen)\r\n      this.videoContainer.removeEventListener('fullscreenchange', this.updateFullscreenButton)\r\n      this.pipButton.removeEventListener('click', this.togglePip)\r\n    }\r\n  },\r\n  methods: {\r\n    // All event for video\r\n    handleEvts () {\r\n      this.playButton.addEventListener('click', this.togglePlay)\r\n      this.video.addEventListener('play', this.updatePlayButton)\r\n      this.video.addEventListener('pause', this.updatePlayButton)\r\n      this.video.addEventListener('loadedmetadata', this.initializeVideo)\r\n      this.video.addEventListener('timeupdate', this.updateTimeElapsed)\r\n      this.video.addEventListener('timeupdate', this.updateProgress)\r\n      this.video.addEventListener('volumechange', this.updateVolumeIcon)\r\n      this.video.addEventListener('click', this.togglePlay)\r\n      this.video.addEventListener('click', this.animatePlayback)\r\n      this.video.addEventListener('mouseenter', this.showControls)\r\n      this.video.addEventListener('mouseleave', this.hideControls)\r\n      this.videoControls.addEventListener('mouseenter', this.showControls)\r\n      this.videoControls.addEventListener('mouseleave', this.hideControls)\r\n      this.seek.addEventListener('mousemove', this.updateSeekTooltip)\r\n      this.seek.addEventListener('input', this.skipAhead)\r\n      this.volume.addEventListener('input', this.updateVolume)\r\n      this.volumeButton.addEventListener('click', this.toggleMute)\r\n      this.fullscreenButton.addEventListener('click', this.toggleFullScreen)\r\n      this.videoContainer.addEventListener('fullscreenchange', this.updateFullscreenButton)\r\n      this.pipButton.addEventListener('click', this.togglePip)\r\n    },\r\n\r\n    // togglePlay toggles the playback state of the video.\r\n    // If the video playback is paused or ended, the video is played\r\n    // otherwise, the video is paused\r\n    togglePlay () {\r\n      if (this.video.paused || this.video.ended) {\r\n        this.video.play()\r\n      } else {\r\n        this.video.pause()\r\n      }\r\n    },\r\n\r\n    // updatePlayButton updates the playback icon and tooltip\r\n    // depending on the playback state\r\n    updatePlayButton () {\r\n      this.playbackIcons.forEach((icon) => icon.classList.toggle('hidden'))\r\n\r\n      if (this.video.paused) {\r\n        this.playButton.setAttribute('data-title', 'Play (k)')\r\n        this.$emit('videoPlay', 'pause')\r\n      } else {\r\n        this.playButton.setAttribute('data-title', 'Pause (k)')\r\n        this.$emit('videoPlay', 'play')\r\n      }\r\n    },\r\n\r\n    // formatTime takes a time length in seconds and returns the time in\r\n    // minutes and seconds\r\n    formatTime (timeInSeconds) {\r\n      const result = new Date(timeInSeconds * 1000).toISOString().substr(11, 8)\r\n\r\n      return {\r\n        minutes: result.substr(3, 2),\r\n        seconds: result.substr(6, 2)\r\n      }\r\n    },\r\n\r\n    // initializeVideo sets the video duration, and maximum value of the\r\n    // progressBar\r\n    initializeVideo () {\r\n      const videoDuration = Math.round(this.video.duration)\r\n      this.seek.setAttribute('max', videoDuration)\r\n      this.progressBar.setAttribute('max', videoDuration)\r\n      const time = this.formatTime(videoDuration)\r\n      this.duration.innerText = `${time.minutes}:${time.seconds}`\r\n      this.duration.setAttribute('datetime', `${time.minutes}m ${time.seconds}s`)\r\n    },\r\n\r\n    // updateTimeElapsed indicates how far through the video\r\n    // the current playback is by updating the timeElapsed element\r\n    updateTimeElapsed () {\r\n      const time = this.formatTime(Math.round(this.video.currentTime))\r\n      this.timeElapsed.innerText = `${time.minutes}:${time.seconds}`\r\n      this.timeElapsed.setAttribute('datetime', `${time.minutes}m ${time.seconds}s`)\r\n    },\r\n\r\n    // updateProgress indicates how far through the video\r\n    // the current playback is by updating the progress bar\r\n    updateProgress () {\r\n      this.seek.value = Math.floor(this.video.currentTime)\r\n      this.progressBar.value = Math.floor(this.video.currentTime)\r\n      if (this.video.ended) {\r\n        this.$emit('ended', true)\r\n      }\r\n    },\r\n\r\n    // updateSeekTooltip uses the position of the mouse on the progress bar to\r\n    // roughly work out what point in the video the user will skip to if\r\n    // the progress bar is clicked at that point\r\n    updateSeekTooltip (event) {\r\n      const skipTo = Math.round(\r\n        (event.offsetX / event.target.clientWidth) *\r\n          parseInt(event.target.getAttribute('max'), 10)\r\n      )\r\n      this.seek.setAttribute('data-seek', skipTo)\r\n      const t = this.formatTime(skipTo)\r\n      this.seekTooltip.textContent = `${t.minutes}:${t.seconds}`\r\n      const rect = this.video.getBoundingClientRect()\r\n      this.seekTooltip.style.left = `${event.pageX - rect.left}px`\r\n    },\r\n\r\n    // skipAhead jumps to a different point in the video when the progress bar\r\n    // is clicked\r\n    skipAhead (event) {\r\n      const skipTo = event.target.dataset.seek ? event.target.dataset.seek : event.target.value\r\n      this.video.currentTime = skipTo\r\n      this.progressBar.value = skipTo\r\n      this.seek.value = skipTo\r\n    },\r\n\r\n    // updateVolume updates the video's volume\r\n    // and disables the muted state if active\r\n    // args val for parent component handle\r\n    updateVolume (val = null) {\r\n      if (this.video.muted) {\r\n        this.video.muted = false\r\n      }\r\n      if (val) {\r\n        this.video.volume = val\r\n        this.volume.value = val\r\n      } else {\r\n        this.video.volume = this.volume.value\r\n      }\r\n    },\r\n\r\n    // updateVolumeIcon updates the volume icon so that it correctly reflects\r\n    // the volume of the video\r\n    updateVolumeIcon () {\r\n      this.volumeIcons.forEach((icon) => {\r\n        icon.classList.add('hidden')\r\n      });\r\n\r\n      this.volumeButton.setAttribute('data-title', 'Mute (m)')\r\n\r\n      if (this.video.muted || this.video.volume === 0) {\r\n        this.volumeMute.classList.remove('hidden')\r\n        this.volumeButton.setAttribute('data-title', 'Unmute (m)')\r\n      } else if (this.video.volume > 0 && this.video.volume <= 0.5) {\r\n        this.volumeLow.classList.remove('hidden')\r\n      } else {\r\n        this.volumeHigh.classList.remove('hidden')\r\n      }\r\n    },\r\n\r\n    // toggleMute mutes or unmutes the video when executed\r\n    // When the video is unmuted, the volume is returned to the value\r\n    // it was set to before the video was muted\r\n    toggleMute () {\r\n      this.video.muted = !this.video.muted\r\n\r\n      if (this.video.muted) {\r\n        this.volume.setAttribute('data-volume', this.volume.value)\r\n        this.volume.value = 0\r\n      } else {\r\n        this.volume.value = this.volume.dataset.volume\r\n      }\r\n    },\r\n\r\n    // animatePlayback displays an animation when\r\n    // the video is played or paused\r\n    animatePlayback () {\r\n      this.playbackAnimation.animate(\r\n        [\r\n          {\r\n            opacity: 1,\r\n            transform: 'scale(1)',\r\n          },\r\n          {\r\n            opacity: 0,\r\n            transform: 'scale(1.3)',\r\n          },\r\n        ],\r\n        {\r\n          duration: 500\r\n        }\r\n      );\r\n    },\r\n\r\n    // toggleFullScreen toggles the full screen state of the video\r\n    // If the browser is currently in fullscreen mode,\r\n    // then it should exit and vice versa.\r\n    toggleFullScreen () {\r\n      if (document.fullscreenElement) {\r\n        document.exitFullscreen()\r\n      } else if (document.webkitFullscreenElement) {\r\n        // Need this to support Safari\r\n        document.webkitExitFullscreen()\r\n      } else if (this.videoContainer.webkitRequestFullscreen) {\r\n        // Need this to support Safari\r\n        this.videoContainer.webkitRequestFullscreen()\r\n      } else {\r\n        this.videoContainer.requestFullscreen()\r\n      }\r\n    },\r\n\r\n    // updateFullscreenButton changes the icon of the full screen button\r\n    // and tooltip to reflect the current full screen state of the video\r\n    updateFullscreenButton () {\r\n      this.fullscreenIcons.forEach((icon) => icon.classList.toggle('hidden'))\r\n\r\n      if (document.fullscreenElement) {\r\n        this.fullscreenButton.setAttribute('data-title', 'Exit full screen (f)')\r\n      } else {\r\n        this.fullscreenButton.setAttribute('data-title', 'Full screen (f)')\r\n      }\r\n    },\r\n\r\n    // togglePip toggles Picture-in-Picture mode on the video\r\n    async togglePip () {\r\n      try {\r\n        if (this.video !== document.pictureInPictureElement) {\r\n          this.pipButton.disabled = true\r\n          await this.video.requestPictureInPicture()\r\n        } else {\r\n          await document.exitPictureInPicture()\r\n        }\r\n      } catch (error) {\r\n        console.error(error)\r\n      } finally {\r\n        this.pipButton.disabled = false\r\n      }\r\n    },\r\n\r\n    // hideControls hides the video controls when not in use\r\n    // if the video is paused, the controls must remain visible\r\n    hideControls () {\r\n      if (this.video.paused) {\r\n        return\r\n      }\r\n\r\n      this.videoControls.classList.add('hide')\r\n    },\r\n\r\n    // showControls displays the video controls\r\n    showControls () {\r\n      this.hiddenControls && this.videoControls.classList.remove('hide')\r\n      // this.$emit('mouseWorking', true)\r\n      // this.hideControlsByMouseEvt()\r\n    },\r\n\r\n    // hideControlsByMouseEvt: debounce(function (e) {\r\n    //   this.hideControls()\r\n    //     this.$emit('mouseWorking', false)\r\n    // }, 3000),\r\n\r\n    // keyboardShortcuts executes the relevant functions for\r\n    // each supported shortcut key\r\n    keyboardShortcuts (event) {\r\n      const { key } = event\r\n      const self = this\r\n      switch (key) {\r\n        case 'k':\r\n          self.togglePlay()\r\n          self.animatePlayback()\r\n          if (self.video.paused) {\r\n            self.showControls()\r\n          } else {\r\n            setTimeout(() => {\r\n              self.hideControls()\r\n            }, 2000);\r\n          }\r\n          break;\r\n        case 'm':\r\n          self.toggleMute()\r\n          break;\r\n        case 'f':\r\n          self.toggleFullScreen()\r\n          break;\r\n        case 'p':\r\n          self.togglePip()\r\n          break;\r\n      }\r\n    }\r\n\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.video-container {\r\n  border-radius: 4px;\r\n  margin: 0 auto;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n}\r\n\r\nvideo {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 4px;\r\n  max-height: 100vh;\r\n}\r\n\r\n.video-controls {\r\n  right: 0;\r\n  left: 0;\r\n  padding: 10px;\r\n  position: absolute;\r\n  bottom: 0;\r\n  transition: all 0.2s ease;\r\n  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));\r\n}\r\n\r\n.video-controls.hide {\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.video-progress {\r\n  position: relative;\r\n  height: 8.4px;\r\n  margin-bottom: 10px;\r\n}\r\n\r\nprogress {\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  border-radius: 2px;\r\n  width: 100%;\r\n  height: 8.4px;\r\n  pointer-events: none;\r\n  position: absolute;\r\n  top: 0;\r\n}\r\n\r\nprogress::-webkit-progress-bar {\r\n  background-color: #474545;\r\n  border-radius: 2px;\r\n}\r\n\r\nprogress::-webkit-progress-value {\r\n  background: #FE0900;\r\n  border-radius: 2px;\r\n}\r\n\r\nprogress::-moz-progress-bar {\r\n  border: 1px solid #FE0900;\r\n  background: #FE0900;\r\n}\r\n\r\n.seek {\r\n  position: absolute;\r\n  top: 0;\r\n  width: 100%;\r\n  cursor: pointer;\r\n  margin: 0;\r\n}\r\n\r\n.seek:hover+.seek-tooltip {\r\n  display: block;\r\n}\r\n\r\n.seek-tooltip {\r\n  display: none;\r\n  position: absolute;\r\n  top: -50px;\r\n  margin-left: -20px;\r\n  font-size: 12px;\r\n  padding: 3px;\r\n  content: attr(data-title);\r\n  font-weight: bold;\r\n  color: #fff;\r\n  background-color: rgba(0, 0, 0, 0.6);\r\n}\r\n\r\n.bottom-controls {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.left-controls {\r\n  display: flex;\r\n  align-items: center;\r\n  color: #fff;\r\n}\r\n\r\n.volume-controls {\r\n  display: flex;\r\n  align-items: center;\r\n  margin-right: 10px;\r\n}\r\n\r\n.volume-controls input {\r\n  width: 100px;\r\n  opacity: 1;\r\n  transition: all 0.4s ease;\r\n}\r\n\r\n.volume-controls:hover input, .volume-controls input:focus {\r\n  width: 100px;\r\n  opacity: 1;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n  position: relative;\r\n  margin-right: 7px;\r\n  font-size: 12px;\r\n  padding: 3px;\r\n  border: none;\r\n  outline: none;\r\n  background-color: transparent;\r\n}\r\n\r\nbutton * {\r\n  pointer-events: none;\r\n}\r\n\r\nbutton::before {\r\n  content: attr(data-title);\r\n  position: absolute;\r\n  display: none;\r\n  right: 0;\r\n  top: -50px;\r\n  background-color: rgba(0, 0, 0, 0.6);\r\n  color: #fff;\r\n  font-weight: bold;\r\n  padding: 4px 6px;\r\n  word-break: keep-all;\r\n  white-space: pre;\r\n}\r\n\r\nbutton:hover::before {\r\n  display: inline-block;\r\n}\r\n\r\n.fullscreen-button {\r\n  margin-right: 0;\r\n}\r\n\r\n.pip-button svg {\r\n  width: 26px;\r\n  height: 26px;\r\n}\r\n\r\n.playback-animation {\r\n  pointer-events: none;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  margin-left: -40px;\r\n  margin-top: -40px;\r\n  width: 80px;\r\n  height: 80px;\r\n  border-radius: 80px;\r\n  background-color: rgba(0, 0, 0, 0.6);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  opacity: 0;\r\n}\r\n\r\ninput[type=range] {\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  height: 8.4px;\r\n  background: transparent;\r\n  cursor: pointer;\r\n}\r\n\r\ninput[type=range]:focus {\r\n  outline: none;\r\n}\r\n\r\ninput[type=range]::-webkit-slider-runnable-track {\r\n  width: 100%;\r\n  cursor: pointer;\r\n  border-radius: 1.3px;\r\n  -webkit-appearance: none;\r\n  transition: all 0.4s ease;\r\n}\r\n\r\ninput[type=range]::-webkit-slider-thumb {\r\n  height: 16px;\r\n  width: 16px;\r\n  border-radius: 16px;\r\n  background: #FE0900;\r\n  cursor: pointer;\r\n  -webkit-appearance: none;\r\n  margin-left: -1px;\r\n}\r\n\r\ninput[type=range]:focus::-webkit-slider-runnable-track {\r\n  background: transparent;\r\n}\r\n\r\ninput[type=range].volume {\r\n  height: 5px;\r\n  background-color: #fff;\r\n}\r\n\r\ninput[type=range].volume::-webkit-slider-runnable-track {\r\n  background-color: transparent;\r\n}\r\n\r\ninput[type=range].volume::-webkit-slider-thumb {\r\n  margin-left: 0;\r\n  height: 14px;\r\n  width: 14px;\r\n  background: #fff;\r\n}\r\n\r\ninput[type=range]::-moz-range-track {\r\n  width: 100%;\r\n  height: 8.4px;\r\n  cursor: pointer;\r\n  border: 1px solid transparent;\r\n  background: transparent;\r\n  border-radius: 1.3px;\r\n}\r\n\r\ninput[type=range]::-moz-range-thumb {\r\n  height: 14px;\r\n  width: 14px;\r\n  border-radius: 50px;\r\n  border: 1px solid #FE0900;\r\n  background: #FE0900;\r\n  cursor: pointer;\r\n  margin-top: 5px;\r\n}\r\n\r\ninput[type=range]:focus::-moz-range-track {\r\n  outline: none;\r\n}\r\n\r\ninput[type=range].volume::-moz-range-thumb {\r\n  border: 1px solid #fff;\r\n  background: #fff;\r\n}\r\n\r\n.hidden {\r\n  display: none;\r\n}\r\n\r\nsvg {\r\n  width: 28px;\r\n  height: 28px;\r\n  fill: #fff;\r\n  stroke: #fff;\r\n  cursor: pointer;\r\n}\r\n</style>\r\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!./PreviewVideoCustom.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!./PreviewVideoCustom.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./PreviewVideoCustom.vue?vue&type=template&id=0a80884c&scoped=true&\"\nimport script from \"./PreviewVideoCustom.vue?vue&type=script&lang=js&\"\nexport * from \"./PreviewVideoCustom.vue?vue&type=script&lang=js&\"\nimport style0 from \"./PreviewVideoCustom.vue?vue&type=style&index=0&id=0a80884c&lang=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  \"0a80884c\",\n  null\n  \n)\n\nexport default component.exports","<template>\r\n  <div class=\"media-preview full-box\">\r\n    <!-- <CustomVideo\r\n      v-if=\"dataSource && dataSource.linkUrl && checkVideo(dataSource.linkUrl)\"\r\n      :path=\"dataSource.linkUrl.includes('http') ? dataSource.linkUrl : `${appUrl}${dataSource.linkUrl}`\"\r\n      :hiddenControls=\"true\"\r\n      :handleVolume=\"volumeVal\"\r\n      @ended=\"handleEnded\"\r\n    /> -->\r\n    <PreviewImage \r\n      v-if=\"dataSource && dataSource.linkUrl && checkImage(dataSource.linkUrl)\"\r\n      :pathView=\"dataSource.linkUrl.includes('http') ? dataSource.linkUrl : `${appUrl}${dataSource.linkUrl}`\"\r\n      :isFullSize=\"true\"\r\n    />\r\n    <!-- <PreviewYoutube \r\n      v-else-if=\"dataSource && dataSource.linkUrl && checkYoutube(dataSource.linkUrl)\"\r\n      :pathView=\"dataSource.linkUrl\"\r\n      :autoplay=\"true\"\r\n      :mediaMore=\"isRelateMedia\"\r\n    /> -->\r\n    <PreviewAudioPoster\r\n      v-else-if=\"dataSource && dataSource.linkUrl && checkAudio(dataSource.linkUrl)\"\r\n      :pathView=\"isFullLink(dataSource.linkUrl) ? dataSource.linkUrl : `${appUrl}${dataSource.linkUrl}`\"\r\n      :autoPlay=\"true\"\r\n      :poster=\"dataSource.posterLink ? `${urlImg}/${dataSource.posterLink}` : imgThumbAudio\"\r\n      :hiddenControls=\"true\"\r\n      :handleVolume=\"volumeVal\"\r\n      @ended=\"handleEnded\"\r\n    />\r\n    <CustomVideo\r\n      v-else-if=\"dataSource && dataSource.linkUrl && checkVideo(dataSource.linkUrl)\"\r\n      :path=\"dataSource.linkUrl.includes('http') ? dataSource.linkUrl : `${appUrl}${dataSource.linkUrl}`\"\r\n      :hiddenControls=\"true\"\r\n      :handleVolume=\"volumeVal\"\r\n      @ended=\"handleEnded\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import mixinsFiles from '@/components/content-files/mixinsFiles'\r\n  // import PreviewVideo from '@/components/content-files/PreviewVideo.vue'\r\n  // import PreviewPdf from '@/components/content-files/PreviewPdf.vue'\r\n  // import Previewpptx from '@/components/content-files/Previewpptx.vue'\r\n  import PreviewImage from '@/components/content-files/PreviewImage.vue'\r\n  import PreviewYoutube from '@/components/content-files/PreviewYoutube.vue'\r\n  // import PreviewAudio from '@/components/content-files/PreviewAudio.vue'\r\n  // import PreviewBookImg from \"@/components/content-files/PreviewBookImg.vue\"\r\n  import PreviewAudioPoster from \"@/components/content-files/PreviewAudioPoster.vue\"\r\n  import CustomVideo from '@/components/content-files/PreviewVideoCustom.vue'\r\n  import { APP_CONFIG } from '@/utils/constants'\r\n  const img404 = require(`@/assets/images/img_404.jpg`)\r\n  const imgThumbAudio = require(`@/assets/images/thumb-audio.png`)\r\n\r\n  export default {\r\n    name: 'PreviewMedia',\r\n    mixins: [ mixinsFiles ],\r\n    props: {\r\n      dataSource: Object,\r\n      isRelateMedia: Boolean,\r\n      bookPageLinkGroup: Number,\r\n      isPublish: Number,\r\n      volumeVal: String\r\n    },\r\n    components: {\r\n      // PreviewVideo,\r\n      // Previewpptx,\r\n      PreviewImage,\r\n      PreviewYoutube,\r\n      // PreviewAudio,\r\n      // PreviewBookImg,\r\n      PreviewAudioPoster,\r\n      CustomVideo\r\n    },\r\n    data () {\r\n      return {\r\n        appUrl: APP_CONFIG.bookCdnUrl,\r\n        urlImg: APP_CONFIG.urlPlatformCmsImg,\r\n        img404,\r\n        imgThumbAudio\r\n        // cdnUrl: APP_CONFIG.cdnUrl,\r\n        // imgUrlCms: APP_CONFIG.urlPlatformCmsImg,\r\n      }\r\n    },\r\n    watch: {\r\n      dataSource (newVal) {\r\n        newVal && this.checkFileTypeShowBtnsMedia()\r\n      }\r\n    },\r\n    mounted () {\r\n      this.checkFileTypeShowBtnsMedia()\r\n    },\r\n    methods: {\r\n      checkFileTypeShowBtnsMedia () {\r\n        const isTypeVideoAudio = this.dataSource && this.dataSource.linkUrl && (this.checkVideo(this.dataSource.linkUrl) || this.checkAudio(this.dataSource.linkUrl))\r\n        // console.log('checktype: ', isTypeVideoAudio)\r\n        if (!isTypeVideoAudio) {\r\n          setTimeout(() => {\r\n            this.handleEnded()\r\n          }, 5000)\r\n        }\r\n        this.$emit('checkTypeMedia', isTypeVideoAudio)\r\n      },\r\n\r\n      handleEnded () {\r\n        this.$emit('ended', true)\r\n      }\r\n      // handleMouseWorking (val) {\r\n      //   this.$emit('mouseWorking', val)\r\n      // }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .media-preview img {\r\n    max-height: 100vh!important;\r\n  }\r\n</style>\r\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!./PreviewMedia.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!./PreviewMedia.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./PreviewMedia.vue?vue&type=template&id=344d5597&\"\nimport script from \"./PreviewMedia.vue?vue&type=script&lang=js&\"\nexport * from \"./PreviewMedia.vue?vue&type=script&lang=js&\"\nimport style0 from \"./PreviewMedia.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","/**\n * Returns a function, that, as long as it continues to be invoked, will not\n * be triggered. The function will be called after it stops being called for\n * N milliseconds. If `immediate` is passed, trigger the function on the\n * leading edge, instead of the trailing. The function also has a property 'clear' \n * that is a function which will clear the timer to prevent previously scheduled executions. \n *\n * @source underscore.js\n * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/\n * @param {Function} function to wrap\n * @param {Number} timeout in ms (`100`)\n * @param {Boolean} whether to execute at the beginning (`false`)\n * @api public\n */\nfunction debounce(func, wait, immediate){\n  var timeout, args, context, timestamp, result;\n  if (null == wait) wait = 100;\n\n  function later() {\n    var last = Date.now() - timestamp;\n\n    if (last < wait && last >= 0) {\n      timeout = setTimeout(later, wait - last);\n    } else {\n      timeout = null;\n      if (!immediate) {\n        result = func.apply(context, args);\n        context = args = null;\n      }\n    }\n  };\n\n  var debounced = function(){\n    context = this;\n    args = arguments;\n    timestamp = Date.now();\n    var callNow = immediate && !timeout;\n    if (!timeout) timeout = setTimeout(later, wait);\n    if (callNow) {\n      result = func.apply(context, args);\n      context = args = null;\n    }\n\n    return result;\n  };\n\n  debounced.clear = function() {\n    if (timeout) {\n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n  \n  debounced.flush = function() {\n    if (timeout) {\n      result = func.apply(context, args);\n      context = args = null;\n      \n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n\n  return debounced;\n};\n\n// Adds compatibility for ES modules\ndebounce.debounce = debounce;\n\nmodule.exports = debounce;\n","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/index.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!./PreviewVideoCustom.vue?vue&type=style&index=0&id=0a80884c&lang=scss&scoped=true&\"","export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../node_modules/css-loader/index.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!./PreviewMedia.vue?vue&type=style&index=0&lang=scss&\""],"sourceRoot":""}