@jxstjh/jhvideo/dist/utils/vod/index.js

HTML5 jhvideo base on MPEG2-TS Stream Player

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (g && (g = 0, op[0] && (_ = 0)), _) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import httpClient from "../../core/httpClient";
import TimeLine, { format } from "./timeline/timeline.es";
import { getDateStrBySize } from "../utils";
import * as AirDatepicker from "air-datepicker/air-datepicker.js";
import localeZh from 'air-datepicker/locale/zh';
import { EventEmitter } from 'events';
import { streamSpeedIconMap } from "../icons";
var prefixName = 'JPlayer';
var vodPlayer = /** @class */ (function () {
    function vodPlayer(stream, size, el, requestInfo) {
        var _this = this;
        this.shiftingTime = 0; // 每一段中间的空挡时间
        this.param = {
            time: 0,
            cont: 24
        };
        this.size = 'lg';
        this._streamSpeed = 0; // 录像模式下流播放速度
        this.loading = false;
        this.recordTip = null;
        this.isTip = true;
        this.cleanTip = function () {
            if (!_this.recordTip) {
                return;
            }
            var recordDiv = _this.el.querySelector("." + prefixName + "-record-text");
            recordDiv.style.display = "none";
            clearTimeout(_this.recordTip);
            _this.recordTip = null;
        };
        this.streamOpt = stream;
        this.size = size;
        this.el = el;
        this.requestInfo = requestInfo;
        this.emitter = new EventEmitter();
    }
    vodPlayer.prototype.on = function (event, listener) {
        this.emitter.addListener(event, listener);
    };
    vodPlayer.prototype.off = function (event, listener) {
        this.emitter.removeListener(event, listener);
    };
    // 初始化
    vodPlayer.prototype.init = function () {
        var videoBox = this.el.querySelector("." + prefixName + "-video-box");
        var process = document.createElement('div');
        process.className = "".concat(prefixName, "-toolbar ").concat(prefixName, "-process");
        // 时间线
        var timeLine = document.createElement("canvas");
        timeLine.id = "".concat(prefixName, "-time-line");
        process.appendChild(timeLine);
        // 控制按钮
        var timeHandle = document.createElement("div");
        timeHandle.className = "".concat(prefixName, "-time-handle");
        timeHandle.innerHTML = "<div class=\"time--card\"><div class=\"time--left\">-</div><div class=\"time--signal\">24h</div><div class=\"time--right\">+</div></div>";
        process.appendChild(timeHandle);
        //
        videoBox.appendChild(process);
        this.process = process;
        this.timeHandle = timeHandle;
        process.addEventListener('click', function (e) {
            e.stopPropagation();
        });
        var _height = 30;
        this.timeline = new TimeLine(timeLine, {
            fill: true, // 适应父容器
            zoom: 0,
            height: _height,
            textColor: '#fff',
            scaleColor: '#000',
            pointerColor: '#fff',
            bgColor: 'rgba(255,255,255,0.3)',
            areaBgColor: '#',
            pointerWidth: 2,
            pointerDisplayWidth: 0,
            pointerDisplayHeight: 100,
            bgTextColor: 'transparent',
            scaleHeight: { long: _height / 5.2, short: _height / 9.6 },
            timeSpacingList: [720000, 360000, 180000, 60000],
            thresholdsConfig: {
                720000: {
                    scaleTimeFormat: "HH:mm",
                    bgTimeFormat: "YYYY/MM/DD",
                    pointerTimeFormat: "HH:mm",
                    space: 10,
                },
                360000: {
                    scaleTimeFormat: "HH:mm",
                    bgTimeFormat: "YYYY/MM/DD",
                    pointerTimeFormat: "HH:mm",
                    space: 10,
                },
                180000: {
                    scaleTimeFormat: "HH:mm",
                    bgTimeFormat: "YYYY/MM/DD",
                    pointerTimeFormat: "HH:mm",
                    space: 10,
                },
                60000: {
                    scaleTimeFormat: "HH:mm",
                    bgTimeFormat: "YYYY/MM/DD",
                    pointerTimeFormat: "HH:mm",
                    space: 10,
                }
            }
        });
        this.setTimelineEvent();
        this.setLineData(this.param.time);
        this.initPicker();
    };
    // 设置时间事件
    vodPlayer.prototype.setTimelineEvent = function (create) {
        var _this = this;
        if (create === void 0) { create = true; }
        var timeSignal = this.timeHandle.querySelector('.time--signal');
        var timeLeft = this.timeHandle.querySelector('.time--left');
        var timeRight = this.timeHandle.querySelector('.time--right');
        var setTimeSignal = function (spacing) {
            var text = '24h';
            switch (spacing) {
                case 720000:
                    text = '24h';
                    break;
                case 360000:
                    text = '12h';
                    break;
                case 180000:
                    text = '6h';
                    break;
                case 60000:
                    text = '2h';
                    break;
            }
            timeSignal.innerHTML = text;
        };
        if (create) {
            this.timeline.on('dragged', function (timestamp) { return __awaiter(_this, void 0, void 0, function () {
                var cmdBody;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            cmdBody = {
                                cmd: "seek",
                                startTime: format(timestamp, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
                                endTime: format(timestamp + (12 * 3600000), 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
                            };
                            this.emitter.emit('vod-send', cmdBody);
                            this.isTip = false;
                            return [4 /*yield*/, this.queryRecord({ dateTime: format(timestamp, 'YYYY-MM-DD HH:mm') })];
                        case 1:
                            _a.sent();
                            this.setLineData(this.param.time);
                            return [2 /*return*/];
                    }
                });
            }); });
            this.timeline.on('zoom', function (spacing) {
                setTimeSignal(spacing);
            });
            timeLeft.addEventListener('click', function (e) {
                setTimeSignal(_this.timeline.setZoom(true));
            });
            timeRight.addEventListener('click', function (e) {
                setTimeSignal(_this.timeline.setZoom(false));
            });
            return;
        }
        timeLeft.removeEventListener('click', function (e) {
            setTimeSignal(_this.timeline.setZoom(true));
        }, false);
        timeRight.removeEventListener('click', function (e) {
            setTimeSignal(_this.timeline.setZoom(false));
        });
    };
    // 设置数据
    vodPlayer.prototype.setLineData = function (currentTime) {
        var list = this.allListTime.map(function (v) {
            return {
                startTime: Date.parse(v.beginTime),
                endTime: Date.parse(v.endTime),
                bgColor: 'rgba(0,115,229,0.7)'
            };
        });
        this.timeline.draw({
            currentTime: currentTime,
            areas: list
        });
    };
    // 阻止浏览器冒泡
    vodPlayer.prototype.setStopPropagation = function (e) {
        e.stopPropagation();
    };
    // 初始化时间选择器
    vodPlayer.prototype.initPicker = function () {
        var _this = this;
        var wrapperel = this.el.querySelector("." + prefixName + "-wrapper");
        var pickerEl = this.el.querySelector(".picker");
        if (!pickerEl) {
            return;
        }
        var el = pickerEl.querySelector(".time-clock-item.range");
        var input = document.createElement('input');
        el.appendChild(input);
        if (this.picker) {
            this.picker.destroy();
            this.picker = null;
        }
        var _param = __assign(__assign({}, this.param), { isConf: false });
        var confButton = {
            content: "关闭",
            className: "close-button-classname",
            onClick: function (dp) {
                dp.hide();
            },
        };
        var closeButton = {
            content: "确定",
            className: "conf-button-classname",
            onClick: function (dp) {
                _param.isConf = true;
                _this.isTip = true;
                dp.update(dp.selectedDates);
                dp.hide();
                _this.emitter.emit('vod-refresh', {
                    dataTime: format(dp.selectedDates, 'YYYY-MM-DD HH:mm'),
                    vod: _this.streamOpt.vod
                });
            }
        };
        var opt = {
            // visible: true,
            // inline: true,
            // navTitles: {days: "yyyy - MM"},
            // clearButton: true,
            // minDate: new Date().getTime() - 1000 * 3600 * 24 * 30,
            autoClose: false,
            timepicker: true,
            toggleSelected: true,
            locale: localeZh,
            maxDate: new Date(),
            position: "top center",
            buttons: [confButton, closeButton],
            container: wrapperel,
            dateFormat: function (e) {
                return getDateStrBySize(e, _this.size);
            },
            onSelect: function (dp) {
                if (dp) {
                    dp.datepicker.setViewDate(_this.param.time);
                }
            },
            onShow: function (dp) {
                // if (dp) {
                //     _param.isConf = false
                //     _param.cont = parseInt(span.innerHTML)
                // }
            },
            onHide: function (dp) {
                // if (dp && !_param.isConf) {
                //     this.picker.selectDate(this.param.time, {updateTime: true});
                //     span.innerHTML = this.param.cont + ''
                // }
            }
        };
        this.picker = new AirDatepicker(el, opt);
        this.picker.clear();
        this.picker.selectDate(this.param.time, { updateTime: true });
        this.picker.setViewDate(this.param.time);
        this.picker.$datepicker.addEventListener("click", this.setStopPropagation, false);
    };
    // 增加倍速
    vodPlayer.prototype.addStreamSpeed = function () {
        var _streamSpeed = this._streamSpeed;
        if (_streamSpeed >= 3)
            return;
        this.setStreamSpeed(_streamSpeed + 1);
    };
    // 减少倍速
    vodPlayer.prototype.reduceStreamSpeed = function () {
        var _streamSpeed = this._streamSpeed;
        if (_streamSpeed <= -3)
            return;
        this.setStreamSpeed(_streamSpeed - 1);
    };
    // 修改倍数
    vodPlayer.prototype.setStreamSpeed = function (v) {
        var rate = 1;
        switch (v) {
            case 0:
                rate = 1;
                break;
            case 1:
                rate = 2;
                break;
            case 2:
                rate = 4;
                break;
            case 3:
                rate = 8;
                break;
            case -1:
                rate = -2;
                break;
            case -2:
                rate = -4;
                break;
            case -3:
                rate = -8;
                break;
        }
        var cmdBody = {
            v: v,
            rate: rate,
            cmd: "speed",
        };
        this.emitter.emit('vod-send', cmdBody);
    };
    vodPlayer.prototype.setSpeed = function (val) {
        if (val.cmd === 'speed') {
            this._streamSpeed = val.v;
            this.upDateSpeedView(this._streamSpeed);
        }
    };
    // 更新倍速视图
    vodPlayer.prototype.upDateSpeedView = function (streamSpeed) {
        var txt = this.el.querySelector(".stream-speed-text");
        var right = this.el.querySelector(".stream-speed-add");
        var left = this.el.querySelector(".stream-speed-reduce");
        if (!txt) {
            return;
        }
        txt.innerHTML = streamSpeedIconMap(streamSpeed);
        right.classList.remove("disabled");
        left.classList.remove("disabled");
        if (streamSpeed === 3) {
            right.classList.add("disabled");
        }
        else if (streamSpeed === -3) {
            left.classList.add("disabled");
        }
    };
    // 设置时间
    vodPlayer.prototype.setDateHour = function (date, hour, isType) {
        if (isType === void 0) { isType = true; }
        var curTime = new Date(date);
        var hourStr = isType ? curTime.getHours() + hour : curTime.getHours() - hour;
        return curTime.setHours(hourStr);
    };
    // 查询录像时间段
    vodPlayer.prototype.queryRecord = function (stream, isEmit) {
        var _a;
        if (isEmit === void 0) { isEmit = true; }
        return __awaiter(this, void 0, void 0, function () {
            var verify, _loop_1, this_1, i, state_1;
            var _this = this;
            return __generator(this, function (_b) {
                switch (_b.label) {
                    case 0:
                        this.loading = true;
                        verify = true;
                        this.streamOpt = __assign(__assign({}, this.streamOpt), stream);
                        _loop_1 = function (i) {
                            var _c, url, headers, _d, headerToolBar, footerToolBar, title, vod, protocol, param, now, queryTime, dateTime, hour, objTime1, objTime2, sameObj, res;
                            return __generator(this, function (_e) {
                                switch (_e.label) {
                                    case 0:
                                        _c = this_1.requestInfo, url = _c.url, headers = _c.headers;
                                        _d = this_1.streamOpt, headerToolBar = _d.headerToolBar, footerToolBar = _d.footerToolBar, title = _d.title, vod = _d.vod, protocol = _d.protocol, param = __rest(_d, ["headerToolBar", "footerToolBar", "title", "vod", "protocol"]);
                                        now = new Date();
                                        queryTime = param.dateTime || param.beginTime;
                                        dateTime = queryTime || format(new Date(now.getTime() - 30 * 60 * 1000), 'YYYY-MM-DD HH:mm');
                                        hour = this_1.param.cont / 2;
                                        objTime1 = {
                                            beginTime: format(dateTime, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
                                            endTime: format(this_1.setDateHour(dateTime, hour, true), 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
                                        };
                                        objTime2 = {
                                            beginTime: format(this_1.setDateHour(dateTime, hour, false), 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
                                            endTime: format(dateTime, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
                                        };
                                        sameObj = {
                                            protocol: protocol,
                                            aisleId: param.aisleId,
                                            recordLocation: vod + '',
                                            needReturnClipInfo: true,
                                        };
                                        return [4 /*yield*/, Promise.all([
                                                httpClient.post(url, __assign(__assign({}, sameObj), objTime1), headers),
                                                httpClient.post(url, __assign(__assign({}, sameObj), objTime2), headers)
                                            ]).catch(function (err) {
                                                _this.loading = false;
                                                return Promise.reject(err);
                                            })];
                                    case 1:
                                        res = _e.sent();
                                        res.forEach(function (v, index) {
                                            var _a, _b;
                                            if (v.code === 0 && ((_b = (_a = v.data) === null || _a === void 0 ? void 0 : _a.list) === null || _b === void 0 ? void 0 : _b.length) > 0) {
                                                verify = true;
                                                if (index === 0) {
                                                    _this.streamOpt.vod = vod;
                                                    _this.runListTime = v.data.list;
                                                    _this.allListTime = v.data.list;
                                                    _this.param.time = Date.parse(dateTime);
                                                }
                                                else {
                                                    _this.allListTime = _this.allListTime.concat(v.data.list);
                                                }
                                            }
                                            else if (i === 0 && index === 0) {
                                                verify = false;
                                                _this.streamOpt.vod = _this.streamOpt.vod ? 0 : 1;
                                            }
                                        });
                                        if (verify || i === 1) {
                                            this_1.shiftingTime = 0;
                                            this_1.loading = false;
                                            if (this_1.picker) {
                                                this_1.picker.selectDate(this_1.param.time, { updateTime: true });
                                                this_1.picker.setViewDate(this_1.param.time);
                                            }
                                            // 是否触发听见方法
                                            if (isEmit) {
                                                this_1.emitter.emit('vod-end');
                                            }
                                            // 数据为空时也返回错误
                                            if ((_a = res[0].data) === null || _a === void 0 ? void 0 : _a.url) {
                                                this_1.isTip && this_1.showStorageLocation();
                                                return [2 /*return*/, { value: res[0].data }];
                                            }
                                            else {
                                                Promise.reject(res);
                                            }
                                        }
                                        return [2 /*return*/];
                                }
                            });
                        };
                        this_1 = this;
                        i = 0;
                        _b.label = 1;
                    case 1:
                        if (!(i < 2)) return [3 /*break*/, 4];
                        return [5 /*yield**/, _loop_1(i)];
                    case 2:
                        state_1 = _b.sent();
                        if (typeof state_1 === "object")
                            return [2 /*return*/, state_1.value];
                        _b.label = 3;
                    case 3:
                        i++;
                        return [3 /*break*/, 1];
                    case 4: return [2 /*return*/];
                }
            });
        });
    };
    vodPlayer.prototype.showStorageLocation = function () {
        this.cleanTip();
        var recordDiv = this.el.querySelector("." + prefixName + "-record-text");
        recordDiv.innerHTML = this.streamOpt.vod === 0 ? "中心存储" : "前端存储";
        recordDiv.style.display = "block";
        this.recordTip = window.setTimeout(function () {
            recordDiv.style.display = "none";
        }, 10000);
    };
    // 设置时间轴
    vodPlayer.prototype.timeBarAnimation = function (osdtime) {
        var _this = this;
        if (this.loading || !this.timeline) {
            return;
        }
        var runListTime = this.runListTime;
        var currentTime = parseInt(osdtime) - new Date().getTimezoneOffset() * 60 * 1000.04 - (3600000 * 8);
        var timestamp = this.param.time + currentTime + this.shiftingTime;
        runListTime.forEach(function (v, index) {
            var begin = Date.parse(format(v.endTime, 'YYYY-MM-DD HH:mm:ss'));
            if (runListTime.length - 1 === index && begin + 60 === timestamp) {
                _this.queryRecord({ dateTime: format(timestamp, 'YYYY-MM-DD HH:mm') });
            }
            // 判断是否在片段的空白时间
            if (runListTime.length - 1 > index) {
                var end = Date.parse(format(runListTime[index + 1].beginTime, 'YYYY-MM-DD HH:mm:ss'));
                if (begin < timestamp + 1 && timestamp < end) {
                    _this.shiftingTime += end - begin;
                }
            }
        });
        this.timeline.setTimeMove({ timestamp: timestamp, direction: true });
        // console.log(format(timestamp,'YYYY-MM-DD HH:mm:ss'))
        // 设置时间器时间
        if (!this.picker.visible) {
            this.picker.selectDate(timestamp, { updateTime: true });
            this.picker.setViewDate(timestamp);
        }
    };
    // 销毁
    vodPlayer.prototype.destroy = function () {
        this.cleanTip();
        // 时间轴
        if (this.timeline) {
            this.timeline.clear();
            this.timeline = null;
        }
        // 监听
        if (this.process) {
            this.process.removeEventListener("click", this.setStopPropagation, false);
            this.process = null;
            this.setTimelineEvent(false);
        }
        // 日期选择器
        if (this.picker) {
            this.picker.$datepicker.removeEventListener("click", this.setStopPropagation, false);
            this.picker.destroy();
            this.picker = null;
        }
        // emitter
        if (this.emitter) {
            this.emitter.removeAllListeners();
            this.emitter = null;
        }
    };
    return vodPlayer;
}());
export default vodPlayer;
//# sourceMappingURL=index.js.map