RecordRePlayApe.js 8.0 KB
//*
// 录制回放控制
// */

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;