RecordRePlayApe.js
8.0 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
//*
// 录制回放控制
// */
import Loger from "../Loger";
import Ape from "./Ape";
import xdysdk from "libs/xdysdk";
import ClassDataProxy from "proxy/ClassDataProxy";
import $ from "jquery";
let loger = Loger.getLoger('PC-RecordRePlayApe');
class RecordRePlayApe extends Ape {
constructor() {
super();
this.addEvent();
this.init();
}
init() {
loger.log("RecordRePlayApe-init");
//回放时 显示隐藏回放进度条
$('.recordPlayControl').on('mouseenter',this._mouseenterRecordRePlayHandler.bind(this));
$('.recordPlayControl').on('mouseleave',this._mouseleaveRecordRePlayHandler.bind(this));
}
addEvent() {
xdysdk.on("class_join_success", this._classJoinSuccessHandler.bind(this));//;录制回放加入成功
xdysdk.on("class_update_status", this._classUpdateHandler.bind(this));//会议状态更新
xdysdk.on("record_playback_update", this._recordPlaybackHandler.bind(this));//录制回放状态更新
xdysdk.on("class_update_timer", this._classUpdateTimerHandler.bind(this));//更新会议时间显示
}
_mouseenterRecordRePlayHandler(){
$('.controlBarOut').css('opacity',1);
}
_mouseleaveRecordRePlayHandler(){
$('.controlBarOut').css('opacity',0);
}
//xdysdk事件监听处理--------------------------------------
_classErrorHandler(_data) {
//loger.log("_classErrorHandler", _data);
}
_classJoinSuccessHandler(_data) {
//如果当前是录制回放模式才执行
if (ClassDataProxy.isRecordPlayBack) {
loger.log("录制回放加入成功->创建控制界面", _data);
//底背景,设置底层不可点
let bgDiv = `<div class="recordBackground" style="position: absolute;top: 0;left:0; z-index: 550; background-color: #111312;opacity: 0.02; width: 100%;height:100%"></div>`;
//动态创建控制条
let controlBar = `<div class="controlBarOut" style="z-index: 552">
<div class="controlBarOpacity"></div>
<div class="controlBarInner" >
<input class="btn_recordPlay" type="button" >
<input class="btn_recordPause" type="button" >
<input class="btn_recordClose" type="button" >
<input class="replayProgressBar" type="range" min="0" max="1000" value="0">
<input class="classTimestamp" type="text" value="0/0" disabled="disabled">
</div>
</div>`;
$('.recordPlayControl').append(bgDiv);
$('.recordPlayControl').append(controlBar);
//
//显示时间
let curTime = ClassDataProxy.timestampToDateTimeFull(0);
let maxTime = ClassDataProxy.timestampToDateTimeFull(ClassDataProxy.recordPlaybackMaxTime);
$(".classTimestamp")[0].value = curTime + " / " + maxTime;
//UI按钮点击事件
$('.btn_recordPlay').on("click", this._recordPlayHandler.bind(this));
$('.btn_recordPause').on("click", this._recordPauseHandler.bind(this));
$('.btn_recordClose').on("click", this._recordCloseHandler.bind(this));//这是重新开始,按钮名字没改
$('.replayProgressBar').on("click", this._recordSeekHandler.bind(this));
$('.btn_recordPlay').show();
$('.btn_recordPause').hide();
$('.btn_recordClose').hide();
//自动开始回放
this._recordPlayHandler();
}
}
_classUpdateHandler(_data) {
//loger.log('录制回放->课堂状态变更',_data);
}
_recordPlaybackHandler(_data) {
//loger.log("_recordPlaybackHandler", _data);
switch (_data.status) {
case 4:
//播放完成重新开始
this._emit(RecordRePlayApe.RECORD_REPLAY_SEEK);
ClassDataProxy.classTimestamp = 0;
$('.replayProgressBar')[0].value = 0;
let curTime = ClassDataProxy.timestampToDateTimeFull(ClassDataProxy.classTimestamp);
let maxTime = ClassDataProxy.timestampToDateTimeFull(ClassDataProxy.recordPlaybackMaxTime);
$(".classTimestamp")[0].value = curTime + " / " + maxTime;
this._recordPlayHandler();
setTimeout(function () {
xdysdk.api("pauseRecordPlayback");
$('.btn_recordPlay').show();
$('.btn_recordPause').hide();
$('.btn_recordClose').show();
let curTime = ClassDataProxy.timestampToDateTimeFull(0);
let maxTime = ClassDataProxy.timestampToDateTimeFull(ClassDataProxy.recordPlaybackMaxTime);
$(".classTimestamp")[0].value = curTime + " / " + maxTime;
}, 100);
break;
default:
break;
}
}
_classUpdateTimerHandler(_data) {
if (!ClassDataProxy.isRecordPlayBack) {
//非录制回放状态下不处理
return;
}
//loger.log(_data);
let progress = (_data.classTimestamp / ClassDataProxy.recordPlaybackMaxTime) * 1000;
$('.replayProgressBar')[0].value = progress;
//console.log("_data.classTimestamp",_data.classTimestamp)
//显示时间
let curTime = ClassDataProxy.timestampToDateTimeFull(_data.classTimestamp);
let maxTime = ClassDataProxy.timestampToDateTimeFull(ClassDataProxy.recordPlaybackMaxTime);
$(".classTimestamp")[0].value = curTime + " / " + maxTime;
}
_classExitHandler(_data) {
loger.log(_data);
}
//mouseEvent--------------------------------
//开始回放
_recordPlayHandler() {
loger.log("_recordPlayHandler");
$('.btn_recordPlay').hide();
$('.btn_recordPause').show();
$('.btn_recordClose').show();
this._emit(RecordRePlayApe.RECORD_REPLAY_PLAY);
xdysdk.api("startRecordPlayback");
}
//暂停回放
_recordPauseHandler() {
loger.log("_recordPauseHandler");
$('.btn_recordPlay').show();
$('.btn_recordPause').hide();
$('.btn_recordClose').show();
this._emit(RecordRePlayApe.RECORD_REPLAY_PAUSE);
xdysdk.api("pauseRecordPlayback");
}
//停止回放
_recordCloseHandler() {
loger.log("_recordCloseHandler");
$('.btn_recordPlay').show();
$('.btn_recordPause').hide();
$('.btn_recordClose').hide();
this._emit(RecordRePlayApe.RECORD_REPLAY_STOP);
ClassDataProxy.classTimestamp = 0;
$('.replayProgressBar')[0].value = 0;
let curTime = ClassDataProxy.timestampToDateTimeFull(ClassDataProxy.classTimestamp);
let maxTime = ClassDataProxy.timestampToDateTimeFull(ClassDataProxy.recordPlaybackMaxTime);
$(".classTimestamp")[0].value = curTime + " / " + maxTime;
xdysdk.api("stopRecordPlayback");
}
//seek播放
_recordSeekHandler() {
loger.log("_recordSeekHandler");
this._emit(RecordRePlayApe.RECORD_REPLAY_SEEK);
//console.log( $('.replayProgressBar')[0].value);
let seekTime = $('.replayProgressBar')[0].value;
seekTime = (seekTime / 1000) * ClassDataProxy.recordPlaybackMaxTime;
loger.log("onProgressBarChange->", seekTime, "秒");
//this._emit(RecordRePlayApe.RECORD_REPLAY_SEEK);
xdysdk.api("seekRecordPlayback", {"time": parseInt(seekTime)});
$('.btn_recordPlay').hide();
$('.btn_recordPause').show();
$('.btn_recordClose').show();
}
}
RecordRePlayApe.prototype.RECORD_REPLAY_PLAY = RecordRePlayApe.RECORD_REPLAY_PLAY = "record_RePlay_play";
RecordRePlayApe.prototype.RECORD_REPLAY_SEEK = RecordRePlayApe.RECORD_REPLAY_SEEK = "record_RePlay_seek";
RecordRePlayApe.prototype.RECORD_REPLAY_PAUSE = RecordRePlayApe.RECORD_REPLAY_PAUSE = "record_RePlay_pause";
RecordRePlayApe.prototype.RECORD_REPLAY_STOP = RecordRePlayApe.RECORD_REPLAY_STOP = "record_RePlay_stop";
export default RecordRePlayApe;