{"version":3,"sources":["webpack:///./src/pages/preview/components/spot-video-dialog.vue?1c33","webpack:///src/pages/preview/components/spot-video-dialog.vue","webpack:///./src/pages/preview/components/spot-video-dialog.vue?290b","webpack:///./src/pages/preview/components/spot-video-dialog.vue?4057","webpack:///./src/pages/preview/components/spot-video-dialog.vue?43cd"],"names":["render","_vm","this","_h","$createElement","_c","_self","ref","staticClass","class","fullscreen","isRotation","style","width","videoWidth","height","videoHeight","attrs","src","directives","name","rawName","value","expression","on","closeVideo","setRotation","_e","staticRenderFns","component"],"mappings":"kJAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAQF,EAAQ,KAAEI,EAAG,MAAM,CAACA,EAAG,MAAM,CAACE,IAAI,iBAAiBC,YAAY,eAAeC,MAAM,CAACC,WAAWT,EAAIU,YAAYC,MAAM,CAAEC,MAAMZ,EAAIa,WAAWC,OAAOd,EAAIe,cAAe,CAACX,EAAG,QAAQ,CAACE,IAAI,QAAQU,MAAM,CAAC,SAAW,OAAO,IAAMhB,EAAIiB,IAAI,SAAW,GAAG,qBAAqB,OAAO,YAAc,UAAUb,EAAG,MAAM,CAACc,WAAW,CAAC,CAACC,KAAK,OAAOC,QAAQ,SAASC,OAAQrB,EAAIU,WAAYY,WAAW,gBAAgBf,YAAY,QAAQgB,GAAG,CAAC,MAAQvB,EAAIwB,aAAa,CAACpB,EAAG,IAAI,CAACG,YAAY,4BAA6BP,EAAY,SAAEI,EAAG,MAAM,CAACG,YAAY,WAAWgB,GAAG,CAAC,MAAQvB,EAAIyB,cAAc,CAACrB,EAAG,IAAI,CAACG,YAAY,+BAA+BP,EAAI0B,OAAOtB,EAAG,MAAM,CAACG,YAAY,oBAAoBgB,GAAG,CAAC,MAAQvB,EAAIwB,gBAAgBxB,EAAI0B,MAC1yBC,EAAkB,G,qBCctB,GACA,OACA,MACA,aACA,YAEA,KACA,YACA,aAIA,KAZA,WAaA,OACA,WACA,oBACA,uBACA,qBACA,YACA,cACA,yBACA,mBACA,qBAIA,SAEA,gBAFA,WAGA,uBACA,kDACA,uBAGA,eARA,WAQA,WACA,sCACA,oBACA,2CACA,6DACA,mBACA,SACA,4BAEA,MAGA,wBApBA,SAoBA,KACA,uCACA,uCACA,6CACA,6CACA,gDAGA,oBA5BA,SA4BA,KACA,0CACA,uCACA,6CACA,6CACA,gDAGA,YApCA,WAqCA,iBAKA,sCACA,wBACA,qBANA,gDACA,gDACA,qBAQA,WAhDA,WAiDA,yBACA,iBAGA,UArDA,WAsDA,wBACA,iBAGA,WA1DA,WA2DA,6BACA,gCCrGyX,I,wBCQrXC,EAAY,eACd,EACA7B,EACA4B,GACA,EACA,KACA,WACA,MAIa,aAAAC,E,2CCnBf,yBAAihB,EAAG","file":"js/chunk-38caf076.7182b034.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.show)?_c('div',[_c('div',{ref:\"videoDialogDom\",staticClass:\"video-dialog\",class:{fullscreen:_vm.isRotation},style:({width:_vm.videoWidth,height:_vm.videoHeight})},[_c('video',{ref:\"video\",attrs:{\"autoplay\":\"true\",\"src\":_vm.src,\"controls\":\"\",\"webkit-playsinline\":\"true\",\"playsinline\":\"true\"}}),_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.isRotation),expression:\"!isRotation\"}],staticClass:\"close\",on:{\"click\":_vm.closeVideo}},[_c('i',{staticClass:\"iconfont icon-close-x\"})]),(_vm.isMobile)?_c('div',{staticClass:\"rotation\",on:{\"click\":_vm.setRotation}},[_c('i',{staticClass:\"iconfont icon-horizontal\"})]):_vm._e()]),_c('div',{staticClass:\"video-dialog-mask\",on:{\"click\":_vm.closeVideo}})]):_vm._e()}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n\t<div v-if=\"show\">\n\t\t<div ref=\"videoDialogDom\" class=\"video-dialog\" :class=\"{fullscreen:isRotation}\" :style=\"{width:videoWidth,height:videoHeight}\">\n\t\t\t<video ref=\"video\" autoplay=\"true\" :src=\"src\" controls webkit-playsinline=\"true\" playsinline=\"true\"></video>\n\t\t\t<div v-show=\"!isRotation\" class=\"close\" @click=\"closeVideo\"><i class=\"iconfont icon-close-x\"></i></div>\n\t\t\t<div v-if=\"isMobile\" class=\"rotation\" @click=\"setRotation\"><i class=\"iconfont icon-horizontal\"></i></div>\n\t\t</div>\n\n\t\t<div class=\"video-dialog-mask\" @click=\"closeVideo\"></div>\n\t</div>\n</template>\n\n<script>\n\timport moment from 'moment'\n\n\texport default {\n\t\tprops: {\n\t\t\tshow: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: false\n\t\t\t},\n\t\t\tsrc: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: ''\n\t\t\t}\n\t\t},\n\t\t\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tisPause: false,\n\t\t\t\tduration: '00:00:00',\n\t\t\t\tcurrentTime: '00:00:00',\n\t\t\t\tcurrentTimePercent: 0,\n\t\t\t\tplayTimer: 0,\n\t\t\t\tisRotation: false,\n\t\t\t\tvideoWidthOrigin:'800px',\n\t\t\t\tvideoWidth:'800px',\n\t\t\t\tvideoHeight:'auto',\n\t\t\t}\n\t\t},\n\n\t\tmethods: {\n\n\t\t\thandleVideoLoad() {\n\t\t\t\tlet $video = this.$refs.video;\n\t\t\t\tthis.duration = this.getVideoCurrentDuration($video, moment)\n\t\t\t\tthis.getCurrentTime();\n\t\t\t},\n\n\t\t\tgetCurrentTime(){\n\t\t\t\tthis.playTimer = setTimeout(()=>{\n\t\t\t\t\tlet $video = this.$refs.video;\n\t\t\t\t\tthis.currentTime = this.getVideoCurrentTime($video, moment);\n\t\t\t\t\tthis.currentTimePercent = Math.ceil($video.currentTime / $video.duration * 100);\n\t\t\t\t\tthis.getCurrentTime();\n\t\t\t\t\tif($video.ended){\n\t\t\t\t\t\tclearTimeout(this.playTimer)\n\t\t\t\t\t}\n\t\t\t\t},200)\n\t\t\t},\n\n\t\t\tgetVideoCurrentDuration(dom, moment) {\n\t\t\t\tlet duration = moment.duration(dom.duration, 'seconds');\n\t\t\t\tlet durationHours = duration.hours() < 10 ? '0' + duration.hours() : duration.hours();\n\t\t\t\tlet durationMinutes = duration.minutes() < 10 ? '0' + duration.minutes() : duration.minutes();\n\t\t\t\tlet durationSeconds = duration.seconds() < 10 ? '0' + duration.seconds() : duration.seconds();\n\t\t\t\treturn `${durationHours}:${durationMinutes}:${durationSeconds}`\n\t\t\t},\n\n\t\t\tgetVideoCurrentTime(dom, moment) {\n\t\t\t\tlet currentTime = moment.duration(dom.currentTime, 'seconds');\n\t\t\t\tlet currentTimeHours = currentTime.hours() < 10 ? '0' + currentTime.hours() : currentTime.hours();\n\t\t\t\tlet currentTimeMinutes = currentTime.minutes() < 10 ? '0' + currentTime.minutes() : currentTime.minutes();\n\t\t\t\tlet currentTimeSeconds = currentTime.seconds() < 10 ? '0' + currentTime.seconds() : currentTime.seconds();\n\t\t\t\treturn `${currentTimeHours}:${currentTimeMinutes}:${currentTimeSeconds}`\n\t\t\t},\n\n\t\t\tsetRotation() {\n\t\t\t\tif (!this.isRotation) {\n\t\t\t\t\tthis.videoWidth = document.body.clientHeight + 'px';\n\t\t\t\t\tthis.videoHeight = document.body.clientWidth + 'px';\n\t\t\t\t\tthis.isRotation = true;\n\t\t\t\t} else {\n\t\t\t\t\tthis.videoWidth = this.videoWidthOrigin;\n\t\t\t\t\tthis.videoHeight = 'auto';\n\t\t\t\t\tthis.isRotation = false;\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tvideoPause() {\n\t\t\t\tthis.$refs.video.pause();\n\t\t\t\tthis.isPause = true;\n\t\t\t},\n\n\t\t\tvideoPlay() {\n\t\t\t\tthis.$refs.video.play();\n\t\t\t\tthis.isPause = false;\n\t\t\t},\n\n\t\t\tcloseVideo(){\n\t\t\t\tclearTimeout(this.playTimer);\n\t\t\t\tthis.$emit('update:show',false);\n\t\t\t},\n\t\t}\n\t}\n</script>\n\n<style scoped>\n\t.video-dialog-mask {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tz-index: 1000;\n\t\tbackground: rgba(0, 0, 0, 0.6);\n\t}\n\n\t.video-dialog {\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t\tz-index: 9999;\n\t\tmax-width: 80vw;\n\t\tmax-height: 80vh;\n\t\twidth: 800px;\n\t\tbackground: #000;\n\t}\n\n\t.video-dialog video {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: block;\n\t\tmax-width: 80vw;\n\t\tmax-height: 80vh;\n\t}\n\n\t.video-dialog.fullscreen {\n\t\tmax-width: initial;\n\t\ttransform-origin: center;\n\t\ttransform: translate(-50%, -50%) rotate(90deg);\n\t}\n\n\t.video-dialog.fullscreen video {\n\t\twidth: 100% !important;\n\t\theight: 100% !important;\n\t\tmax-width: initial;\n\t\tmax-height: initial;\n\t}\n\n\t.video-dialog .close {\n\t\tposition: absolute;\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tfont-size: 30px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tbackground: #ccc;\n\t\tcolor: #fff;\n\t\tcursor: pointer;\n\t\ttop: 0;\n\t\tright: 0;\n\t\ttransform: translateY(-100%);\n\t}\n\n\t.video-dialog .rotation{\n\t\tposition: absolute;\n\t\twidth: 36px;\n\t\theight: 36px;\n\t\tright: 6px;\n\t\ttop:50%;\n\t\ttransform: translateY(-50%);\n\t\tfont-size: 30px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tcolor: #fff;\n\t\tcursor: pointer;\n\t\topacity: 0.6;\n\t\tbackground: rgba(20,20,20,0.6);\n\t\tborder-radius: 4px;\n\t}\n\n\t.video-dialog .rotation .iconfont{\n\t\tfont-size: 20px;\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n\n</style>","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!./spot-video-dialog.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!./spot-video-dialog.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./spot-video-dialog.vue?vue&type=template&id=20dfd54a&scoped=true&\"\nimport script from \"./spot-video-dialog.vue?vue&type=script&lang=js&\"\nexport * from \"./spot-video-dialog.vue?vue&type=script&lang=js&\"\nimport style0 from \"./spot-video-dialog.vue?vue&type=style&index=0&id=20dfd54a&scoped=true&lang=css&\"\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  \"20dfd54a\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./spot-video-dialog.vue?vue&type=style&index=0&id=20dfd54a&scoped=true&lang=css&\"; export default mod; export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./spot-video-dialog.vue?vue&type=style&index=0&id=20dfd54a&scoped=true&lang=css&\""],"sourceRoot":""}