| 1 |
- import setWatcher from"../../common/utils/watch";import Paintbush from"../../common/ppt/paintbrush";import PPT from"../../common/ppt/ppt";import SocketEvent from"../../common/ppt/socketEvent";import PPT_EVENT from"../../common/ppt/EVENT";const{CHANGE_IMG_SRC:CHANGE_IMG_SRC,SHOW_BOARD:SHOW_BOARD,HIDE_BOARD:HIDE_BOARD,PPT_RELOAD:PPT_RELOAD,PPT_PAGE_CHANGE:PPT_PAGE_CHANGE}=PPT_EVENT;import store from"../../store/index";import{preventShake}from"../../common/utils/common";const resizeWithShape=preventShake.debounce((function({width:t=resizeWithShape.width,height:e=resizeWithShape.height,$this:i,toResetSize:s=!1}){resizeWithShape.width=t,resizeWithShape.height=e;const{style:h}=i.getSize(t/e);(s||i.data.canvasStyle!==h)&&(i.setData({canvasStyle:h}),i.getDomSize("#paintbrush").then((({width:t,height:e})=>{i.paintCtrl&&i.paintCtrl.setMeasurement({width:t,height:e,pageId:i.pptCtrl&&i.getCurrentPage()||0,pageType:i.socketEvent.pageType})})).catch(console.error),i.socketEvent&&(i.socketEvent.happenResize=!0))}),100);Component({properties:{width:{type:Number,value:750},height:{type:Number,value:750},pptSize:{type:Object,observer(t){const{width:e,height:i}=this.pptSize=t;e&&i&&(this.init.isInit?(this.setData({width:e,height:i}),this.resize(e,i)):this.init({width:e,height:i}))}},chatData:{type:Object,observer(t){this.chatData=t,this.socketEvent&&this.socketEvent.setChatData(t)}},videoId:{type:String,observer(t){this.socketEvent&&this.socketEvent.setVideoId(t)}},vidCurrentTime:{type:Number,observer(t){this.setData({vidTime:t})}},pptDelayTime:{type:Number,value:3e3,observer(t){this.socketEvent&&parseInt(t)>=0&&(this.socketEvent.delayTime=parseInt(t))}},skin:{type:String,value:"black",observer(t){"black"!==t&&"white"!==t&&this.setData({skin:"black"})}},togglePaint:{type:Boolean,value:!0,observer(t){this.paintCtrl&&this.paintCtrl.togglePaint(t)}},requestUrl:{type:String,value:"https://api.polyv.net/live/v3/channel/chat/"}},data:{isLoading:!1,imgUrl:"",paintSize:{width:"100%",height:"100%"},canvasStyle:"position:absolute;left:0;top:0;height:100%;width:100%;",paintCtrl:null,isBoard:!1,log:"test",vidTime:0,pptInFullScreen:!1,showLaser:!1,laserStyle:{left:0,right:0},currentWhiteNum:0},lifetimes:{created(){},attached(){this.unsub=store.get({"main.chat":t=>{this.chat=t,t&&this.socketEvent&&this.socketEvent.setChat(this.chat)}}),this.watch={imgUrl(){this.setData({isLoading:!0})}},this.timer=null,setWatcher(this)},detached(){this.unsub(),this.init.isInit=!1}},pageLifetimes:{resize(t){}},methods:{init({width:t,height:e,sliceIdData:i}=this.data){this.init.isInit=!0,this.setData({width:t,height:e}),this.pptCtrl=new PPT,this.pptCtrl.subscribe(this.pptEvent.bind(this));const s=wx.createCanvasContext("paintbrush",this);this.paintCtrl=new Paintbush(s,{width:t,height:e}),this.paintCtrl.on("laserPaint",(({status:t,x:e,y:i})=>{const s={showLaser:t};t&&(s.laserStyle={x:e,y:i}),this.setData(s)})).on("resize",(({clientWidth:t,clientHeight:e})=>{this.resize(t,e)})),this.socketEvent=new SocketEvent({chat:this.chat,pptCtrl:this.pptCtrl,paintCtrl:this.paintCtrl,delayTime:this.pptDelayTime,getCurrentTime:t=>t({time:1e3*this.data.vidTime||0}),requestUrl:this.properties.requestUrl}),this.properties.videoId&&this.socketEvent.setVideoId(this.properties.videoId),i&&(this.socketEvent._setLiveStatus(!0),this.socketEvent.onSliceId(i)),this.socketEvent.subscribe((({EVENT:t,data:e,pageId:i})=>{switch(t){case SHOW_BOARD:this.sendPptPageChange(i),this.setData({currentWhiteNum:i}),this.showBoard();break;case HIDE_BOARD:this.sendPptPageChange(i),this.hideBoard();break;case"log":break;case PPT_RELOAD:this.reload(e)}}))},reload(t){this.pptCtrl=void 0,this.paintCtrl=void 0,this.socketEvent=void 0;const{width:e,height:i}=this.data;this.init({width:e,height:i,sliceIdData:t}),resizeWithShape({$this:this,toResetSize:!0})},handleImgLoad(t){this.setData({isLoading:!1});const{width:e,height:i}=t.detail;this.resize(e,i)},resize(t,e){resizeWithShape({width:t,height:e,$this:this})},getSize(t){const e=this.data.width,i=this.data.height,s=e/i;let h=e,a=i;const r=t||this.data.prop||4/3;this.setData({prop:r}),s>r?h=r*a:s<r&&(a=h/r);return{width:h,height:a,style:`position:absolute;left:50%;top:50%;height:${a}rpx;width:${h}rpx;margin-left:-${h/2}rpx;margin-top:-${a/2}rpx;`}},showBoard(t){if("number"==typeof t){const{style:e}=this.getSize(t);this.data.canvasStyle!==e&&this.setData({canvasStyle:e})}this.setData({isBoard:!0})},hideBoard(){this.setData({isBoard:!1})},getDomSize(t){const e=this,i=wx.createSelectorQuery().in(this);return i.select(t).boundingClientRect(),i.selectViewport().scrollOffset(),new Promise(((s,h)=>{i.exec((function(i){if(i&&i.length&&null!==i[0]&&"object"==typeof i[0]){const{width:h,height:a}=i[0];0===parseInt(h)?setTimeout((()=>s(e.getDomSize(t))),500):s({width:h,height:a})}else h(new Error("查找不到尺寸"))}))}))},pptEvent(t){const{EVENT:e,src:i,page:s}=t;switch(e){case CHANGE_IMG_SRC:this.setData({imgUrl:i});break;case PPT_PAGE_CHANGE:this.sendPptPageChange(s),this.paintCtrl.redraw(s)}},handleTapPreBtn(){if(this.pptCtrl&&(!this.socketEvent.isLive||parseInt(this.getCurrentPage())>0))if(this.data.isBoard){const t=this.getCurrentPage()-1;this.socketEvent.openWhiteBoard(t<0?0:t)}else this.pptCtrl.gotPreviousPage()},handleTapNextBtn(){this.pptCtrl&&(!this.socketEvent.isLive||parseInt(this.getCurrentPage())<parseInt(this.socketEvent.maxTeacherOp.pageId))&&(this.data.isBoard?this.socketEvent.openWhiteBoard(this.getCurrentPage()+1):this.pptCtrl.gotNextPage())},toCurrentTeacherOp(){this.socketEvent&&this.socketEvent.toCurrentTeacherOp()},getCurrentPage(){return this.data.isBoard?this.data.currentWhiteNum:this.pptCtrl&&this.pptCtrl.currentPageNum},sendPptPageChange(t){this.triggerEvent("pptPageChange",{page:t,maxPage:this.socketEvent&&this.socketEvent.maxTeacherOp&&this.socketEvent.maxTeacherOp.pageId,isLive:this.socketEvent&&this.socketEvent.isLive})}}});
|
