Commit d5f74a24 authored by 李维's avatar 李维

fix: 修复页面没有滚动条的问题

parent 8f7a9b4d
No preview for this file type
.buttons[data-v-effb3c56]{text-align:center}.buttons .el-button[data-v-effb3c56]{padding:4px 12px;font-size:18px}.mesh-loader[data-v-effb3c56]{overflow:hidden;height:inherit;width:inherit}.mesh-loader .circle[data-v-effb3c56]{width:10px;height:10px;position:absolute;background:#f44336;border-radius:50%;margin:-5px;animation:mesh-effb3c56 3s ease-in-out -1.5s infinite}.mesh-loader>div .circle[data-v-effb3c56]:last-child{animation-delay:0s}.mesh-loader>div[data-v-effb3c56]{position:absolute;top:50%;left:50%}.mesh-loader>div[data-v-effb3c56]:last-child{transform:rotate(90deg)}@keyframes mesh-effb3c56{0%{transform-origin:50% -100%;transform:rotate(0)}50%{transform-origin:50% -100%;transform:rotate(1turn)}50.1%{transform-origin:50% 200%;transform:rotate(0deg)}to{transform-origin:50% 200%;transform:rotate(1turn)}}.buttons[data-v-4f1d8e93]{text-align:center;position:absolute;right:0;top:0}.buttons .el-button[data-v-4f1d8e93]{padding:4px 12px;font-size:18px;margin:0;border-radius:initial}body,html{margin:0;padding:0;height:100%;overflow:hidden;background-color:#fff} .buttons[data-v-effb3c56]{text-align:center}.buttons .el-button[data-v-effb3c56]{padding:4px 12px;font-size:18px}.mesh-loader[data-v-effb3c56]{overflow:hidden;height:inherit;width:inherit}.mesh-loader .circle[data-v-effb3c56]{width:10px;height:10px;position:absolute;background:#f44336;border-radius:50%;margin:-5px;animation:mesh-effb3c56 3s ease-in-out -1.5s infinite}.mesh-loader>div .circle[data-v-effb3c56]:last-child{animation-delay:0s}.mesh-loader>div[data-v-effb3c56]{position:absolute;top:50%;left:50%}.mesh-loader>div[data-v-effb3c56]:last-child{transform:rotate(90deg)}@keyframes mesh-effb3c56{0%{transform-origin:50% -100%;transform:rotate(0)}50%{transform-origin:50% -100%;transform:rotate(1turn)}50.1%{transform-origin:50% 200%;transform:rotate(0deg)}to{transform-origin:50% 200%;transform:rotate(1turn)}}.buttons[data-v-4f1d8e93]{text-align:center;position:absolute;right:0;top:0}.buttons .el-button[data-v-4f1d8e93]{padding:4px 12px;font-size:18px;margin:0;border-radius:initial}body,html{margin:0;padding:0;height:100%;overflow:auto;background-color:#fff}
\ No newline at end of file \ No newline at end of file
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>form_vue</title><script defer="defer" src="js/chunk-vendors.a2c59d66.js"></script><script defer="defer" src="js/app.ea504c30.js"></script><link href="css/chunk-vendors.77489a8d.css" rel="stylesheet"><link href="css/app.e0c161a7.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but form_vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script><script>if (document.domain.indexOf("iteachabc.com") > 0) { <!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>form_vue</title><script defer="defer" src="js/chunk-vendors.a2c59d66.js"></script><script defer="defer" src="js/app.488b0a48.js"></script><link href="css/chunk-vendors.77489a8d.css" rel="stylesheet"><link href="css/app.6dc4d453.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but form_vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script><script>if (document.domain.indexOf("iteachabc.com") > 0) {
document.domain = "iteachabc.com"; document.domain = "iteachabc.com";
}</script><div id="app"></div></body></html> }</script><div id="app"></div></body></html>
\ No newline at end of file
(function(){var e={567:function(e,t,i){"use strict";var a=i(5471),s=i(1052),o=i.n(s),n=function(){var e=this,t=e._self._c;return t("div",{staticStyle:{width:"450px"},attrs:{id:"app"}},[t("el-form",{attrs:{"label-width":"120px"}},[t("el-form-item",{attrs:{label:"视频"}},[t("VideoUploader",{on:{change:e.save},model:{value:e.itemData.url,callback:function(t){e.$set(e.itemData,"url",t)},expression:"itemData.url"}})],1),t("el-form-item",{attrs:{label:"静音视频(可选)"}},[t("VideoUploader",{on:{change:e.save},model:{value:e.itemData.muteVideoUrl,callback:function(t){e.$set(e.itemData,"muteVideoUrl",t)},expression:"itemData.muteVideoUrl"}})],1),t("el-form-item",{attrs:{label:"截图"}},[t("ImageUploader",{on:{change:e.save},model:{value:e.itemData.snapshotUrl,callback:function(t){e.$set(e.itemData,"snapshotUrl",t)},expression:"itemData.snapshotUrl"}})],1),t("el-form-item",{attrs:{label:"时长"}},[t("el-input",{on:{change:e.save},model:{value:e.itemData.duration,callback:function(t){e.$set(e.itemData,"duration",t)},expression:"itemData.duration"}})],1),t("el-form-item",{attrs:{label:"大小"}},[t("el-input",{on:{change:e.save},model:{value:e.itemData.size,callback:function(t){e.$set(e.itemData,"size",t)},expression:"itemData.size"}})],1)],1)],1)},r=[],l=function(){var e=this,t=e._self._c;return t("div",{staticStyle:{position:"relative",width:"360px",height:"220px"}},[t("el-upload",{attrs:{data:e.uploadData,disabled:e.uploading||e.transcoding,action:e.uploadUrl,drag:"","before-upload":e.customReq,accept:".mp4","show-file-list":!1}},[t("i",{directives:[{name:"show",rawName:"v-show",value:!e.transcoding&&!e.videoDone&&!e.uploading,expression:"!transcoding && !videoDone && !uploading"}],staticClass:"el-icon-upload"}),t("div",{directives:[{name:"show",rawName:"v-show",value:!e.transcoding&&!e.videoDone&&!e.uploading,expression:"!transcoding && !videoDone && !uploading"}],staticClass:"el-upload__text"},[e._v("将MP4文件拖到此处,或"),t("em",[e._v("点击上传")])]),e.transcoding||e.videoDone||e.uploading?e._e():t("div",{staticClass:"el-upload__tip",staticStyle:{"text-align":"center"},attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传mp4文件")]),e.transcoding?t("div",{staticClass:"el-upload__tip",staticStyle:{"text-align":"center"},attrs:{slot:"tip"},slot:"tip"},[e._v("视频后台转码中,请稍后...")]):e._e(),t("div",{directives:[{name:"show",rawName:"v-show",value:!e.transcoding&&!e.videoDone&&e.uploading,expression:"!transcoding && !videoDone && uploading"}],staticStyle:{position:"absolute",left:"50%",top:"50%",transform:"translate(-50%, -50%)"}},[t("el-progress",{attrs:{type:"circle",percentage:e.uploadPercentage,status:e.uploadStatus}}),t("div",[e._v(e._s(e.uploadSpeed))])],1),t("div",{directives:[{name:"show",rawName:"v-show",value:!e.transcoding&&e.videoDone,expression:"!transcoding && videoDone"}]},[t("video",{ref:"refVideo",attrs:{width:"360px",height:"180px",controls:"",crossOrigin:"anonymous"}},[t("source",{attrs:{src:`${e.videoUrl}`,type:"video/mp4"}}),e._v(" Your browser does not support the video tag. ")])]),e.transcoding?t("div",[t("div",{staticClass:"mesh-loader"},[t("div",{staticClass:"set-one"},[t("div",{staticClass:"circle"}),t("div",{staticClass:"circle"})]),t("div",{staticClass:"set-two"},[t("div",{staticClass:"circle"}),t("div",{staticClass:"circle"})])])]):e._e()]),e.videoDone?t("div",{staticClass:"buttons"},[t("el-button",{attrs:{type:"primary",size:"mini",icon:"el-icon-camera"},on:{click:e.captureVideo}}),t("el-button",{attrs:{type:"primary",size:"mini",icon:"el-icon-download"},on:{click:e.download}}),t("el-button",{attrs:{type:"danger",size:"mini",icon:"el-icon-delete"},on:{click:e.deleteVideo}})],1):e._e()],1)},d=[],c=i(1396),u=i.n(c),p=i(4335),h=i(5735),m=i.n(h),g={name:"VideoUploader",props:{value:{type:String,default:""}},watch:{value:function(e,t){e&&this.httpHeadCall(e,(async e=>{e?this.videoDone=!0:(this.transcoding=!0,await this.checkResourceAvaliable(),this.$message({type:"success",message:"转换完成"}),this.videoDone=!0,this.transcoding=!1,this.$refs.refVideo.load())})),this.videoUrl=e},videoUrl:function(){this.$refs.refVideo.load()}},data(){return{uploadUrl:"",uploadData:"",uploading:!1,transcoding:!1,videoDone:!1,uploadPercentage:0,uploadStatus:null,uploadSpeed:"0KB/s",startTime:null,endTime:null,loaded:0,videoUrl:"",setIntervalIds:[],setTimeoutIds:[]}},created(){this.uploadUrl=window.courseware.uploadVideoUrl(),this.uploadData=window.courseware.uploadData(),window["air"].getUploadVideoCallback=(e,t)=>{this.uploadUrl=e,this.uploadData=t}},mounted(){this.$refs.refVideo.addEventListener("click",(()=>{const e=()=>{this.$refs.refVideo.pause(),this.$refs.refVideo.removeEventListener("play",e)};this.$refs.refVideo.addEventListener("play",e)}))},methods:{parseFileName(e){const t=e.lastIndexOf("."),i=e.substring(0,t),a=e.substring(t);return{name:i,ext:a}},resetUploadVars(){this.uploadPercentage=0,this.uploadStatus=null,this.uploadSpeed="0KB/s",this.startTime=null,this.endTime=null,this.loaded=0},httpHeadCall(e,t){let i=new XMLHttpRequest;try{i.onreadystatechange=()=>{try{4==i.readyState&&(i.status>=200&&i.status<400?t(!0):t(!1))}catch(e){t(!1)}},i.open("HEAD",e,!0),i.send(),i.timeout=15e3,i.onerror=e=>{t(!1)},i.ontimeout=e=>{t(!1)}}catch(a){t(!1)}},async customReq(e){const{name:t,ext:i}=this.parseFileName(e.name);if(".mp4"!==i)return this.$message({type:"error",message:"只能上传mp4文件"}),!1;const a=await this.getFileMD5(e),s=document.location.protocol,o=`${s}//teach.cdn.ireadabc.com`,n=`${s}//openapi.iteachabc.com`;return this.videoUrl==`${o}/${a}_h.mp4`?(this.$refs.refVideo.pause(),this.$refs.refVideo.currentTime=0,void this.$message({type:"success",message:"极速上传完成"})):(this.resetUploadVars(),this.videoUrl="",this.uploading=!0,this.transcoding=!1,this.videoDone=!1,this.httpHeadCall(`${o}/${a}_h.mp4`,(t=>{if(t)return this.uploadStatus="success",this.videoUrl=`${o}/${a}_h.mp4`,this.$emit("input",this.videoUrl),this.$emit("change",{url:this.videoUrl,file:e}),this.$emit("success",{url:this.videoUrl,file:e}),this.uploading=!1,void this.$message({type:"success",message:"极速上传完成"});p.A.get(`${n}/oss/timestamp`,{}).then((t=>{const i=u().MD5(t+"iplayABC2019").toString();p.A.get(`${n}/oss/signature`,{sign:i,tmps:t}).then((t=>{const i=t.data.data,n=new FormData;n.append("key",a+".mp4"),n.append("bucket","iplayabc-worker-queue-videolmh"),n.append("OSSAccessKeyId",i.OSSAccessKeyId),n.append("policy",i.policy),n.append("Signature",i.signature),n.append("success_action_status","200"),n.append("file",e),e.action=`${s}//iplayabc-worker-queue-videolmh.oss-cn-beijing.aliyuncs.com`,this.startTime=(new Date).getTime(),this.uploadStatus=null,(0,p.A)({method:"post",url:e.action,headers:{"Access-Control-Allow-Origin":"*"},onUploadProgress:e=>{this.uploadPercentage=Math.ceil(100*e.progress),this.endTime=(new Date).getTime();const t=this.endTime-this.startTime;if(this.startTime=(new Date).getTime(),0===t)return;const i=e.loaded-this.loaded;this.loaded=e.loaded;const a=i/t*1e3,s=Math.round(a/1024);this.uploadSpeed=s>1024?`${(s/1024).toFixed(2)}MB/s`:`${s}KB/s`,this.$emit("onProgress",e)},data:n}).then((async t=>{const i=setTimeout((()=>{this.resetUploadVars(),this.uploading=!1,this.transcoding=!0,this.videoDone=!1;const e=this.setTimeoutIds.indexOf(i);e>-1&&this.setTimeoutIds.splice(e,1)}),1e3);this.uploadStatus="success",this.videoUrl=`${o}/${a}_h.mp4`,this.$emit("input",this.videoUrl),this.$emit("change",{url:this.videoUrl,file:e}),this.$emit("success",{url:this.videoUrl,file:e}),this.setTimeoutIds.push(i),this.uploading=!1,this.$message({type:"info",message:"上传成功,开始转码..."})})).catch((e=>{const t=setTimeout((()=>{this.uploading=!1,this.transcoding=!1,this.videoDone=!1;const e=this.setTimeoutIds.indexOf(t);e>-1&&this.setTimeoutIds.splice(e,1)}),1e3);this.uploadStatus="error",this.$emit("error",e),this.setTimeoutIds.push(t)}))}))}))})),!1)},checkResourceAvaliable(){return new Promise((e=>{let t=null;t=setInterval((()=>{this.httpHeadCall(this.videoUrl,(i=>{if(i){if(t){const e=this.setIntervalIds.indexOf(t);clearInterval(t),this.setIntervalIds.splice(e,1)}e(!0)}}))}),800),this.setIntervalIds.push(t)}))},async download(){const e=this.videoUrl,t=e.split("/").pop(),i=await fetch(e);if(i.ok){const e=await i.blob(),a=window.URL.createObjectURL(e),s=document.createElement("a");s.href=a,s.download=t,document.body.appendChild(s),s.click(),this.$message({type:"success",message:"下载完成"})}else this.$message({type:"error",message:"下载失败"})},captureVideo(){const e=this.videoUrl.split("/").pop(),{name:t,ext:i}=this.parseFileName(e),a=this.$refs.refVideo,s=document.createElement("canvas"),o=s.getContext("2d");s.width=a.videoWidth,s.height=a.videoHeight,o.drawImage(a,0,0,s.width,s.height);const n=s.toDataURL("image/png"),r=document.createElement("a");r.href=n,r.download=t+"_"+Math.floor(1e3*a.currentTime)+".png",document.body.appendChild(r),r.click(),this.$message({type:"success",message:"截图成功"})},deleteVideo(){this.$confirm("确定要删除吗?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then((()=>{this.videoUrl="",this.videoDone=!1,this.$emit("input",""),this.$emit("change",{url:this.videoUrl,file:null})})).catch((()=>{this.$message({type:"info",message:"已取消删除"})}))},getFileMD5(e){return new Promise((t=>{let i=new FileReader,a=new(m().ArrayBuffer);i.readAsArrayBuffer(e),i.onload=function(e){a.append(e.target.result);let i=a.end();t(i)}}))}},beforeDestroy(){this.setTimeoutIds.forEach((e=>{clearTimeout(e)})),this.setIntervalIds.forEach((e=>{clearInterval(e)}))}},v=g,f=i(1656),w=(0,f.A)(v,l,d,!1,null,"effb3c56",null),y=w.exports,U=function(){var e=this,t=e._self._c;return t("div",{staticStyle:{position:"relative",width:"360px",height:"180px"}},[t("el-upload",{attrs:{data:e.uploadData,action:e.uploadUrl,drag:"",accept:".png,.jpg,.jpeg,.bmp,.gif","show-file-list":!1,"on-success":e.handleUploadSuccess}},[t("i",{directives:[{name:"show",rawName:"v-show",value:!e.imageUrl,expression:"!imageUrl"}],staticClass:"el-icon-upload"}),t("div",{directives:[{name:"show",rawName:"v-show",value:!e.imageUrl,expression:"!imageUrl"}],staticClass:"el-upload__text"},[e._v("将文件拖到此处,或"),t("em",[e._v("点击上传")]),t("br"),t("span",{staticStyle:{"font-size":"14px"}},[e._v("只能上传 "),t("strong",[e._v("jpg、png、jpeg、gif、bmp")]),e._v(" 文件")])]),e.imageUrl?t("div",{staticStyle:{width:"100%",height:"100%"}},[t("el-image",{staticStyle:{width:"100%",height:"100%"},attrs:{src:e.imageUrl,fit:"contain"}})],1):e._e()]),e.imageUrl?t("el-button-group",{staticClass:"buttons"},[t("el-button",{attrs:{type:"ghost",size:"mini",icon:"el-icon-download"},on:{click:e.download}}),t("el-button",{attrs:{type:"ghost",size:"mini",icon:"el-icon-delete"},on:{click:e.deleteImg}})],1):e._e()],1)},D=[],b={name:"ImageUploader",props:{value:{type:String,default:""}},watch:{value:function(e,t){this.imageUrl=e}},data(){return{uploadUrl:"",uploadData:"",imageUrl:""}},created(){this.uploadUrl=window.courseware.uploadUrl(),this.uploadData=window.courseware.uploadData(),window["air"].getUploadCallback=(e,t)=>{this.uploadUrl=e,this.uploadData=t},this.imageUrl=this.value},methods:{handleUploadSuccess(e){this.imageUrl=e.url,this.$emit("input",this.imageUrl),this.$emit("change",{url:this.imageUrl})},async download(){const e=this.imageUrl,t=e.split("/").pop(),i=await fetch(e);if(i.ok){const e=await i.blob(),a=window.URL.createObjectURL(e),s=document.createElement("a");s.href=a,s.download=t,document.body.appendChild(s),s.click(),this.$message({type:"success",message:"下载完成"})}else this.$message({type:"error",message:"下载失败"})},deleteImg(){this.$confirm("确定要删除吗?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then((()=>{this.imageUrl="",this.$emit("input",""),this.$emit("change",{url:this.imageUrl})})).catch((()=>{}))}}},$=b,_=(0,f.A)($,U,D,!1,null,"4f1d8e93",null),x=_.exports,S={name:"App",components:{VideoUploader:y,ImageUploader:x},data(){return{itemData:{url:"",duration:0,size:0,snapshotUrl:"",muteVideoUrl:""}}},async mounted(){this.getData()},methods:{async getData(){const e=await this.$getData();this.itemData=e||{url:"",duration:0,size:0,snapshotUrl:"",muteVideoUrl:""}},save(){this.$message({message:"保存成功",type:"success",duration:1e3}),this.$setData(this.itemData)}}},T=S,k=(0,f.A)(T,n,r,!1,null,null,null),I=k.exports,C=i(9393);const V="getDPEData",O=function(e){const t={...e,urlParams:window.location.search,origin:"template"};window.parent.postMessage(t,"*")},P=async function(){return new Promise(((e,t)=>{let i=!1,a=setTimeout((()=>{i||(window.removeEventListener("message",s),t("timeout"))}),5e3);const s=t=>{if(t.data.action===V){i=!0,window.removeEventListener("message",s),clearTimeout(a);try{const i=JSON.parse(t.data.data);e(i.data)}catch(o){console.error("Error parsing DPE data",o),e(null)}}};O({action:V,data:window.location.search}),window.addEventListener("message",s)}))};a["default"].use(o()),a["default"].config.productionTip=!1,a["default"].prototype.$getData=()=>(console.log("===== getData ====="),new Promise(((e,t)=>{window.courseware.getData((t=>{console.log(t),e(t)}),"default_key")}))),a["default"].prototype.$getDPEData=P,a["default"].prototype.$setData=e=>{console.log("===== setData ====="),console.log(e),window.courseware.setData(e,null,"default_key")},a["default"].prototype.$echarts=C,new a["default"]({render:function(e){return e(I)}}).$mount("#app")},477:function(){}},t={};function i(a){var s=t[a];if(void 0!==s)return s.exports;var o=t[a]={id:a,loaded:!1,exports:{}};return e[a].call(o.exports,o,o.exports,i),o.loaded=!0,o.exports}i.m=e,function(){i.amdO={}}(),function(){var e=[];i.O=function(t,a,s,o){if(!a){var n=1/0;for(c=0;c<e.length;c++){a=e[c][0],s=e[c][1],o=e[c][2];for(var r=!0,l=0;l<a.length;l++)(!1&o||n>=o)&&Object.keys(i.O).every((function(e){return i.O[e](a[l])}))?a.splice(l--,1):(r=!1,o<n&&(n=o));if(r){e.splice(c--,1);var d=s();void 0!==d&&(t=d)}}return t}o=o||0;for(var c=e.length;c>0&&e[c-1][2]>o;c--)e[c]=e[c-1];e[c]=[a,s,o]}}(),function(){i.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return i.d(t,{a:t}),t}}(),function(){i.d=function(e,t){for(var a in t)i.o(t,a)&&!i.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})}}(),function(){i.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"===typeof window)return window}}()}(),function(){i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){i.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){i.nmd=function(e){return e.paths=[],e.children||(e.children=[]),e}}(),function(){var e={524:0};i.O.j=function(t){return 0===e[t]};var t=function(t,a){var s,o,n=a[0],r=a[1],l=a[2],d=0;if(n.some((function(t){return 0!==e[t]}))){for(s in r)i.o(r,s)&&(i.m[s]=r[s]);if(l)var c=l(i)}for(t&&t(a);d<n.length;d++)o=n[d],i.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return i.O(c)},a=self["webpackChunkform_vue"]=self["webpackChunkform_vue"]||[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}();var a=i.O(void 0,[504],(function(){return i(567)}));a=i.O(a)})();
//# sourceMappingURL=app.488b0a48.js.map
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
(function(){var e={8139:function(e,t,i){"use strict";var a=i(5471),s=i(1052),o=i.n(s),n=function(){var e=this,t=e._self._c;return t("div",{staticStyle:{width:"450px"},attrs:{id:"app"}},[t("el-form",{attrs:{"label-width":"120px"}},[t("el-form-item",{attrs:{label:"视频"}},[t("VideoUploader",{on:{change:e.save},model:{value:e.itemData.url,callback:function(t){e.$set(e.itemData,"url",t)},expression:"itemData.url"}})],1),t("el-form-item",{attrs:{label:"静音视频(可选)"}},[t("VideoUploader",{on:{change:e.save},model:{value:e.itemData.muteVideoUrl,callback:function(t){e.$set(e.itemData,"muteVideoUrl",t)},expression:"itemData.muteVideoUrl"}})],1),t("el-form-item",{attrs:{label:"截图"}},[t("ImageUploader",{on:{change:e.save},model:{value:e.itemData.snapshotUrl,callback:function(t){e.$set(e.itemData,"snapshotUrl",t)},expression:"itemData.snapshotUrl"}})],1),t("el-form-item",{attrs:{label:"时长"}},[t("el-input",{on:{change:e.save},model:{value:e.itemData.duration,callback:function(t){e.$set(e.itemData,"duration",t)},expression:"itemData.duration"}})],1),t("el-form-item",{attrs:{label:"大小"}},[t("el-input",{on:{change:e.save},model:{value:e.itemData.size,callback:function(t){e.$set(e.itemData,"size",t)},expression:"itemData.size"}})],1)],1)],1)},r=[],l=function(){var e=this,t=e._self._c;return t("div",{staticStyle:{position:"relative",width:"360px",height:"220px"}},[t("el-upload",{attrs:{data:e.uploadData,disabled:e.uploading||e.transcoding,action:e.uploadUrl,drag:"","before-upload":e.customReq,accept:".mp4","show-file-list":!1}},[t("i",{directives:[{name:"show",rawName:"v-show",value:!e.transcoding&&!e.videoDone&&!e.uploading,expression:"!transcoding && !videoDone && !uploading"}],staticClass:"el-icon-upload"}),t("div",{directives:[{name:"show",rawName:"v-show",value:!e.transcoding&&!e.videoDone&&!e.uploading,expression:"!transcoding && !videoDone && !uploading"}],staticClass:"el-upload__text"},[e._v("将MP4文件拖到此处,或"),t("em",[e._v("点击上传")])]),e.transcoding||e.videoDone||e.uploading?e._e():t("div",{staticClass:"el-upload__tip",staticStyle:{"text-align":"center"},attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传mp4文件")]),e.transcoding?t("div",{staticClass:"el-upload__tip",staticStyle:{"text-align":"center"},attrs:{slot:"tip"},slot:"tip"},[e._v("视频后台转码中,请稍后...")]):e._e(),t("div",{directives:[{name:"show",rawName:"v-show",value:!e.transcoding&&!e.videoDone&&e.uploading,expression:"!transcoding && !videoDone && uploading"}],staticStyle:{position:"absolute",left:"50%",top:"50%",transform:"translate(-50%, -50%)"}},[t("el-progress",{attrs:{type:"circle",percentage:e.uploadPercentage,status:e.uploadStatus}}),t("div",[e._v(e._s(e.uploadSpeed))])],1),t("div",{directives:[{name:"show",rawName:"v-show",value:!e.transcoding&&e.videoDone,expression:"!transcoding && videoDone"}]},[t("video",{ref:"refVideo",attrs:{width:"360px",height:"180px",controls:"",crossOrigin:"anonymous"}},[t("source",{attrs:{src:`${e.videoUrl}`,type:"video/mp4"}}),e._v(" Your browser does not support the video tag. ")])]),e.transcoding?t("div",[t("div",{staticClass:"mesh-loader"},[t("div",{staticClass:"set-one"},[t("div",{staticClass:"circle"}),t("div",{staticClass:"circle"})]),t("div",{staticClass:"set-two"},[t("div",{staticClass:"circle"}),t("div",{staticClass:"circle"})])])]):e._e()]),e.videoDone?t("div",{staticClass:"buttons"},[t("el-button",{attrs:{type:"primary",size:"mini",icon:"el-icon-camera"},on:{click:e.captureVideo}}),t("el-button",{attrs:{type:"primary",size:"mini",icon:"el-icon-download"},on:{click:e.download}}),t("el-button",{attrs:{type:"danger",size:"mini",icon:"el-icon-delete"},on:{click:e.deleteVideo}})],1):e._e()],1)},d=[],c=i(1396),u=i.n(c),p=i(4335),h=i(5735),m=i.n(h),g={name:"VideoUploader",props:{value:{type:String,default:""}},watch:{value:function(e,t){e&&this.httpHeadCall(e,(async e=>{e?this.videoDone=!0:(this.transcoding=!0,await this.checkResourceAvaliable(),this.$message({type:"success",message:"转换完成"}),this.videoDone=!0,this.transcoding=!1,this.$refs.refVideo.load())})),this.videoUrl=e},videoUrl:function(){this.$refs.refVideo.load()}},data(){return{uploadUrl:"",uploadData:"",uploading:!1,transcoding:!1,videoDone:!1,uploadPercentage:0,uploadStatus:null,uploadSpeed:"0KB/s",startTime:null,endTime:null,loaded:0,videoUrl:"",setIntervalIds:[],setTimeoutIds:[]}},created(){this.uploadUrl=window.courseware.uploadVideoUrl(),this.uploadData=window.courseware.uploadData(),window["air"].getUploadVideoCallback=(e,t)=>{this.uploadUrl=e,this.uploadData=t}},mounted(){this.$refs.refVideo.addEventListener("click",(()=>{const e=()=>{this.$refs.refVideo.pause(),this.$refs.refVideo.removeEventListener("play",e)};this.$refs.refVideo.addEventListener("play",e)}))},methods:{parseFileName(e){const t=e.lastIndexOf("."),i=e.substring(0,t),a=e.substring(t);return{name:i,ext:a}},resetUploadVars(){this.uploadPercentage=0,this.uploadStatus=null,this.uploadSpeed="0KB/s",this.startTime=null,this.endTime=null,this.loaded=0},httpHeadCall(e,t){let i=new XMLHttpRequest;try{i.onreadystatechange=()=>{try{4==i.readyState&&(i.status>=200&&i.status<400?t(!0):t(!1))}catch(e){t(!1)}},i.open("HEAD",e,!0),i.send(),i.timeout=15e3,i.onerror=e=>{t(!1)},i.ontimeout=e=>{t(!1)}}catch(a){t(!1)}},async customReq(e){const{name:t,ext:i}=this.parseFileName(e.name);if(".mp4"!==i)return this.$message({type:"error",message:"只能上传mp4文件"}),!1;const a=await this.getFileMD5(e),s=document.location.protocol,o=`${s}//teach.cdn.ireadabc.com`,n=`${s}//openapi.iteachabc.com`;return this.videoUrl==`${o}/${a}_h.mp4`?(this.$refs.refVideo.pause(),this.$refs.refVideo.currentTime=0,void this.$message({type:"success",message:"极速上传完成"})):(this.resetUploadVars(),this.videoUrl="",this.uploading=!0,this.transcoding=!1,this.videoDone=!1,this.httpHeadCall(`${o}/${a}_h.mp4`,(t=>{if(t)return this.uploadStatus="success",this.videoUrl=`${o}/${a}_h.mp4`,this.$emit("input",this.videoUrl),this.$emit("change",{url:this.videoUrl,file:e}),this.$emit("success",{url:this.videoUrl,file:e}),this.uploading=!1,void this.$message({type:"success",message:"极速上传完成"});p.A.get(`${n}/oss/timestamp`,{}).then((t=>{const i=u().MD5(t+"iplayABC2019").toString();p.A.get(`${n}/oss/signature`,{sign:i,tmps:t}).then((t=>{const i=t.data.data,n=new FormData;n.append("key",a+".mp4"),n.append("bucket","iplayabc-worker-queue-videolmh"),n.append("OSSAccessKeyId",i.OSSAccessKeyId),n.append("policy",i.policy),n.append("Signature",i.signature),n.append("success_action_status","200"),n.append("file",e),e.action=`${s}//iplayabc-worker-queue-videolmh.oss-cn-beijing.aliyuncs.com`,this.startTime=(new Date).getTime(),this.uploadStatus=null,(0,p.A)({method:"post",url:e.action,headers:{"Access-Control-Allow-Origin":"*"},onUploadProgress:e=>{this.uploadPercentage=Math.ceil(100*e.progress),this.endTime=(new Date).getTime();const t=this.endTime-this.startTime;if(this.startTime=(new Date).getTime(),0===t)return;const i=e.loaded-this.loaded;this.loaded=e.loaded;const a=i/t*1e3,s=Math.round(a/1024);this.uploadSpeed=s>1024?`${(s/1024).toFixed(2)}MB/s`:`${s}KB/s`,this.$emit("onProgress",e)},data:n}).then((async t=>{const i=setTimeout((()=>{this.resetUploadVars(),this.uploading=!1,this.transcoding=!0,this.videoDone=!1;const e=this.setTimeoutIds.indexOf(i);e>-1&&this.setTimeoutIds.splice(e,1)}),1e3);this.uploadStatus="success",this.videoUrl=`${o}/${a}_h.mp4`,this.$emit("input",this.videoUrl),this.$emit("change",{url:this.videoUrl,file:e}),this.$emit("success",{url:this.videoUrl,file:e}),this.setTimeoutIds.push(i),this.uploading=!1,this.$message({type:"info",message:"上传成功,开始转码..."})})).catch((e=>{const t=setTimeout((()=>{this.uploading=!1,this.transcoding=!1,this.videoDone=!1;const e=this.setTimeoutIds.indexOf(t);e>-1&&this.setTimeoutIds.splice(e,1)}),1e3);this.uploadStatus="error",this.$emit("error",e),this.setTimeoutIds.push(t)}))}))}))})),!1)},checkResourceAvaliable(){return new Promise((e=>{let t=null;t=setInterval((()=>{this.httpHeadCall(this.videoUrl,(i=>{if(i){if(t){const e=this.setIntervalIds.indexOf(t);clearInterval(t),this.setIntervalIds.splice(e,1)}e(!0)}}))}),800),this.setIntervalIds.push(t)}))},async download(){const e=this.videoUrl,t=e.split("/").pop(),i=await fetch(e);if(i.ok){const e=await i.blob(),a=window.URL.createObjectURL(e),s=document.createElement("a");s.href=a,s.download=t,document.body.appendChild(s),s.click(),this.$message({type:"success",message:"下载完成"})}else this.$message({type:"error",message:"下载失败"})},captureVideo(){const e=this.videoUrl.split("/").pop(),{name:t,ext:i}=this.parseFileName(e),a=this.$refs.refVideo,s=document.createElement("canvas"),o=s.getContext("2d");s.width=a.videoWidth,s.height=a.videoHeight,o.drawImage(a,0,0,s.width,s.height);const n=s.toDataURL("image/png"),r=document.createElement("a");r.href=n,r.download=t+"_"+Math.floor(1e3*a.currentTime)+".png",document.body.appendChild(r),r.click(),this.$message({type:"success",message:"截图成功"})},deleteVideo(){this.$confirm("确定要删除吗?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then((()=>{this.videoUrl="",this.videoDone=!1,this.$emit("input",""),this.$emit("change",{url:this.videoUrl,file:null})})).catch((()=>{this.$message({type:"info",message:"已取消删除"})}))},getFileMD5(e){return new Promise((t=>{let i=new FileReader,a=new(m().ArrayBuffer);i.readAsArrayBuffer(e),i.onload=function(e){a.append(e.target.result);let i=a.end();t(i)}}))}},beforeDestroy(){this.setTimeoutIds.forEach((e=>{clearTimeout(e)})),this.setIntervalIds.forEach((e=>{clearInterval(e)}))}},v=g,f=i(1656),w=(0,f.A)(v,l,d,!1,null,"effb3c56",null),y=w.exports,U=function(){var e=this,t=e._self._c;return t("div",{staticStyle:{position:"relative",width:"360px",height:"180px"}},[t("el-upload",{attrs:{data:e.uploadData,action:e.uploadUrl,drag:"",accept:".png,.jpg,.jpeg,.bmp,.gif","show-file-list":!1,"on-success":e.handleUploadSuccess}},[t("i",{directives:[{name:"show",rawName:"v-show",value:!e.imageUrl,expression:"!imageUrl"}],staticClass:"el-icon-upload"}),t("div",{directives:[{name:"show",rawName:"v-show",value:!e.imageUrl,expression:"!imageUrl"}],staticClass:"el-upload__text"},[e._v("将文件拖到此处,或"),t("em",[e._v("点击上传")]),t("br"),t("span",{staticStyle:{"font-size":"14px"}},[e._v("只能上传 "),t("strong",[e._v("jpg、png、jpeg、gif、bmp")]),e._v(" 文件")])]),e.imageUrl?t("div",{staticStyle:{width:"100%",height:"100%"}},[t("el-image",{staticStyle:{width:"100%",height:"100%"},attrs:{src:e.imageUrl,fit:"contain"}})],1):e._e()]),e.imageUrl?t("el-button-group",{staticClass:"buttons"},[t("el-button",{attrs:{type:"ghost",size:"mini",icon:"el-icon-download"},on:{click:e.download}}),t("el-button",{attrs:{type:"ghost",size:"mini",icon:"el-icon-delete"},on:{click:e.deleteImg}})],1):e._e()],1)},D=[],b={name:"ImageUploader",props:{value:{type:String,default:""}},watch:{value:function(e,t){this.imageUrl=e}},data(){return{uploadUrl:"",uploadData:"",imageUrl:""}},created(){this.uploadUrl=window.courseware.uploadUrl(),this.uploadData=window.courseware.uploadData(),window["air"].getUploadCallback=(e,t)=>{this.uploadUrl=e,this.uploadData=t},this.imageUrl=this.value},methods:{handleUploadSuccess(e){this.imageUrl=e.url,this.$emit("input",this.imageUrl),this.$emit("change",{url:this.imageUrl})},async download(){const e=this.imageUrl,t=e.split("/").pop(),i=await fetch(e);if(i.ok){const e=await i.blob(),a=window.URL.createObjectURL(e),s=document.createElement("a");s.href=a,s.download=t,document.body.appendChild(s),s.click(),this.$message({type:"success",message:"下载完成"})}else this.$message({type:"error",message:"下载失败"})},deleteImg(){this.$confirm("确定要删除吗?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then((()=>{this.imageUrl="",this.$emit("input",""),this.$emit("change",{url:this.imageUrl})})).catch((()=>{}))}}},$=b,_=(0,f.A)($,U,D,!1,null,"4f1d8e93",null),x=_.exports,S={name:"App",components:{VideoUploader:y,ImageUploader:x},data(){return{itemData:{url:"",duration:0,size:0,snapshotUrl:"",muteVideoUrl:""}}},async mounted(){this.getData()},methods:{async getData(){const e=await this.$getData();this.itemData=e||{url:"",duration:0,size:0,snapshotUrl:"",muteVideoUrl:""}},save(){this.$message({message:"保存成功",type:"success",duration:1e3}),this.$setData(this.itemData)}}},T=S,k=(0,f.A)(T,n,r,!1,null,null,null),I=k.exports,C=i(9393);const V="getDPEData",O=function(e){const t={...e,urlParams:window.location.search,origin:"template"};window.parent.postMessage(t,"*")},P=async function(){return new Promise(((e,t)=>{let i=!1,a=setTimeout((()=>{i||(window.removeEventListener("message",s),t("timeout"))}),5e3);const s=t=>{if(t.data.action===V){i=!0,window.removeEventListener("message",s),clearTimeout(a);try{const i=JSON.parse(t.data.data);e(i.data)}catch(o){console.error("Error parsing DPE data",o),e(null)}}};O({action:V,data:window.location.search}),window.addEventListener("message",s)}))};a["default"].use(o()),a["default"].config.productionTip=!1,a["default"].prototype.$getData=()=>(console.log("===== getData ====="),new Promise(((e,t)=>{window.courseware.getData((t=>{console.log(t),e(t)}),"default_key")}))),a["default"].prototype.$getDPEData=P,a["default"].prototype.$setData=e=>{console.log("===== setData ====="),console.log(e),window.courseware.setData(e,null,"default_key")},a["default"].prototype.$echarts=C,new a["default"]({render:function(e){return e(I)}}).$mount("#app")},477:function(){}},t={};function i(a){var s=t[a];if(void 0!==s)return s.exports;var o=t[a]={id:a,loaded:!1,exports:{}};return e[a].call(o.exports,o,o.exports,i),o.loaded=!0,o.exports}i.m=e,function(){i.amdO={}}(),function(){var e=[];i.O=function(t,a,s,o){if(!a){var n=1/0;for(c=0;c<e.length;c++){a=e[c][0],s=e[c][1],o=e[c][2];for(var r=!0,l=0;l<a.length;l++)(!1&o||n>=o)&&Object.keys(i.O).every((function(e){return i.O[e](a[l])}))?a.splice(l--,1):(r=!1,o<n&&(n=o));if(r){e.splice(c--,1);var d=s();void 0!==d&&(t=d)}}return t}o=o||0;for(var c=e.length;c>0&&e[c-1][2]>o;c--)e[c]=e[c-1];e[c]=[a,s,o]}}(),function(){i.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return i.d(t,{a:t}),t}}(),function(){i.d=function(e,t){for(var a in t)i.o(t,a)&&!i.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})}}(),function(){i.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"===typeof window)return window}}()}(),function(){i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){i.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){i.nmd=function(e){return e.paths=[],e.children||(e.children=[]),e}}(),function(){var e={524:0};i.O.j=function(t){return 0===e[t]};var t=function(t,a){var s,o,n=a[0],r=a[1],l=a[2],d=0;if(n.some((function(t){return 0!==e[t]}))){for(s in r)i.o(r,s)&&(i.m[s]=r[s]);if(l)var c=l(i)}for(t&&t(a);d<n.length;d++)o=n[d],i.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return i.O(c)},a=self["webpackChunkform_vue"]=self["webpackChunkform_vue"]||[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}();var a=i.O(void 0,[504],(function(){return i(8139)}));a=i.O(a)})();
//# sourceMappingURL=app.ea504c30.js.map
\ No newline at end of file
...@@ -80,7 +80,7 @@ html { ...@@ -80,7 +80,7 @@ html {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
overflow: hidden; overflow: auto;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment