@jxstjh/jhvideo - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

d.ts/src/model/playerModel.d.ts

@@ -61,2 +61,3 @@ export declare type DeviceType = 'pvg67' | 'pvgplus' | 'rtsp' | 'gb28181';
 };
+export declare type StreamSpeed = -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4;
 export interface PTZParam {
@@ -63,0 +64,0 @@ streamId?: string;

d.ts/src/utils/controlDom.d.ts

 import JPlayer from "../jplayer";
 import { StreamOpt } from "../model/playerModel";
 declare const creatHeaderToolBar: (playIns: JPlayer, streamOpt: StreamOpt, prefixName?: string) => HTMLElement;
+declare const creatProcessToolBar: (playIns: JPlayer, streamOpt: StreamOpt, prefixName?: string) => HTMLDivElement;
 declare const creatFooterToolBar: (playIns: JPlayer, streamOpt: StreamOpt, prefixName?: string) => HTMLElement;
+declare const createSeekDom: (prefixName: string) => HTMLDivElement;
 declare const createLoaderDom: (prefixName: string) => HTMLElement;
 declare const createErrorDom: (prefixName: any) => HTMLElement;
-export { createErrorDom, createLoaderDom, creatHeaderToolBar, creatFooterToolBar };
+export { createErrorDom, createLoaderDom, createSeekDom, creatHeaderToolBar, creatFooterToolBar, creatProcessToolBar };

d.ts/src/utils/icons.d.ts

@@ -8,2 +8,5 @@ declare const closeSvg = "<svg t=\"1626059564788\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2540\" ><path d=\"M568.9344 521.4208l300.2368-300.2368a39.3216 39.3216 0 0 0 0-55.296l-1.6384-1.6384a39.3216 39.3216 0 0 0-55.296 0L512 464.896 211.7632 164.2496a39.3216 39.3216 0 0 0-55.296 0l-1.6384 1.6384a38.5536 38.5536 0 0 0 0 55.296l300.2368 300.2368-300.2368 300.2368a39.3216 39.3216 0 0 0 0 55.296l1.6384 1.6384a39.3216 39.3216 0 0 0 55.296 0L512 578.3552l300.2368 300.2368a39.3216 39.3216 0 0 0 55.296 0l1.6384-1.6384a39.3216 39.3216 0 0 0 0-55.296l-300.2368-300.2368z\" p-id=\"2541\"></path></svg>";
 declare const zoomSvg = "\n<svg t=\"1628496275716\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2674\" >\n    <path d=\"M194.4 821.2v-256c0-4.7 3.8-8.5 8.5-8.5h256c4.7 0 8.5 3.8 8.5 8.5v256c0 4.7-3.8 8.5-8.5 8.5h-256c-4.7 0-8.5-3.8-8.5-8.5z\" p-id=\"2675\"></path>\n    <path d=\"M239.9 602.2h182v182h-182z\" p-id=\"2676\"></path>\n    <path d=\"M540.6 507.3L513 479.8l158.7-157.2h-81.3v-39h128.3c5.2 0 10.3 2.1 13.9 5.9 3.7 3.6 5.8 8.6 5.9 13.8v128.1h-39v-81.3L540.6 507.3z\" p-id=\"2677\"></path>\n    <path d=\"M239.9 252.2v212.7c0 7.7-6.2 13.9-13.9 13.9h-17.7c-7.7 0-13.9-6.2-13.9-13.9V206.5c0-7.7 6.2-13.9 13.9-13.9h609.4c7.7 0 13.9 6.2 13.9 13.9v609.4c0 7.7-6.2 13.9-13.9 13.9H567.9c-7.7 0-13.9-6.2-13.9-13.9v-17.7c0-7.7 6.2-13.9 13.9-13.9h204.5c7.7 0 13.9-6.2 13.9-13.9V252.2c0-7.7-6.2-13.9-13.9-13.9H253.8c-7.6 0-13.9 6.2-13.9 13.9z\"  p-id=\"2678\"></path>\n</svg>";
-export { closeSvg, fullScreenSvg, refreshSvg, screenshotSvg, recordSvg, ptzSvg, zoomSvg };
+declare const speedLeftSvg = "<svg t=\"1631446659830\" class=\"icon\" viewBox=\"0 0 1638 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"7283\"><path d=\"M133.12 937.472c17.6128 0 32.0512-14.336 32.0512-32.0512V118.5792A32.0512 32.0512 0 0 0 133.12 86.528a32.0512 32.0512 0 0 0-31.9488 32.0512v787.0464c0 17.6128 14.336 31.744 31.9488 31.744z m695.808 2.6624a33.4848 33.4848 0 0 0 33.5872-33.5872V117.4528a33.792 33.792 0 0 0-50.3808-29.184L128.6144 482.9184a33.4848 33.4848 0 0 0 0 58.1632l683.52 394.5472c5.3248 3.072 11.0592 4.5056 16.7936 4.5056z m-30.4128-770.048v683.8272L206.4384 512l592.0768-342.016z m705.024 770.048a33.4848 33.4848 0 0 0 33.5872-33.5872V117.4528a33.792 33.792 0 0 0-50.3808-29.184L803.2256 482.9184a33.4848 33.4848 0 0 0 0 58.1632l683.52 394.5472c5.2224 3.072 11.0592 4.5056 16.7936 4.5056z m-30.4128-770.048v683.8272L880.9472 512l592.1792-342.016z\" p-id=\"7284\"></path></svg>";
+declare const speedRightSvg = "<svg t=\"1631446684976\" class=\"icon\" viewBox=\"0 0 1638 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"7411\" ><path d=\"M1505.28 937.472a32.0512 32.0512 0 0 1-32.0512-32.0512V118.5792a32.0512 32.0512 0 0 1 64 0v787.0464c0 17.6128-14.336 31.744-31.9488 31.744z m-695.808 2.6624a33.4848 33.4848 0 0 1-33.5872-33.5872V117.4528a33.792 33.792 0 0 1 50.3808-29.184l683.52 394.6496a33.4848 33.4848 0 0 1 0 58.1632L826.2656 935.6288a33.4848 33.4848 0 0 1-16.7936 4.5056z m30.4128-770.048v683.8272L1431.9616 512 839.8848 169.984zM134.8608 940.032a33.4848 33.4848 0 0 1-33.5872-33.5872V117.4528a33.792 33.792 0 0 1 50.3808-29.184l683.52 394.6496a33.4848 33.4848 0 0 1 0 58.1632L151.6544 935.6288a33.4848 33.4848 0 0 1-16.7936 4.5056z m30.4128-770.048v683.8272L757.4528 512 165.2736 169.984z\" p-id=\"7412\"></path></svg>";
+declare const streamSpeedIconMap: (speed: any) => string;
+export { streamSpeedIconMap, closeSvg, fullScreenSvg, refreshSvg, screenshotSvg, recordSvg, ptzSvg, zoomSvg, speedLeftSvg, speedRightSvg };

package.json

 {
   "name": "@jxstjh/jhvideo",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "HTML5 jhvideo base on MPEG2-TS Stream Player",
@@ -5,0 +5,0 @@ "main": "./dist/jhvideo.js",

src/core/media-segment-info.js

@@ -82,2 +82,3 @@ /*
     getLastSyncPointBeforeDts(dts) {
+        console.log('---',dts,this._list)
         if (this._list.length == 0) {
@@ -84,0 +85,0 @@ return null;

src/jplayer.ts

@@ -10,9 +10,11 @@ import * as Package from '../package.json'
 import { exitFullScreen, getNowDate, guid, openFullscreen, replaceStreamNO } from './utils/utils.js';
-import { createDefaultStreamOpt, PTZParam, StreamOpt } from './model/playerModel';
+import { createDefaultStreamOpt, PTZParam, StreamOpt, StreamSpeed } from './model/playerModel';
 import * as EventEmitter from 'events';
 import PlayerEvents from './player/player-events.js';
 // import * as debounce from 'lodash.debounce';
-import { createErrorDom, createLoaderDom, creatHeaderToolBar, creatFooterToolBar } from './utils/controlDom';
+import { createErrorDom, createLoaderDom, creatHeaderToolBar, creatFooterToolBar, createSeekDom, creatProcessToolBar } from './utils/controlDom';
 import { ERRORMSG } from './utils/codemsg';
 import { ContextMenu } from './utils/context.js'
+import { streamSpeedIconMap } from './utils/icons';
+import { filterQueryRecordArr, RecordItem } from './utils/date';
 
@@ -26,2 +28,4 @@ declare let __VERSION__
 const PauseToogleUrl = '/api/h5ms/mcc/v1/Pause'
+const setSpeedUrl = '/api/h5ms/mcc/v1/SetSpeed'
+const getSpeedUrl = '/api/h5ms/mcc/v1/GetSpeed'
 interface HTMLMediaElementWithCaputreStream extends HTMLMediaElement {
@@ -82,2 +86,3 @@ captureStream(): MediaStream;
     }
+    private e: any;
     private vid: string;
@@ -97,4 +102,7 @@ private prefixName: string;
     private _zooming: boolean = false; // 是否在数码放大
+    private _seeking: boolean = false; // 是否在跳转中
+    private _preSeekTime: number; // 跳转前的时间
     private _ptzSpeed: number = 10; // 云台控制灵敏度
     private _isFullScreen: boolean; // 是否全屏
+    private _streamSpeed: StreamSpeed = 0; // 录像模式下流播放速度
     private _offsetObj = {
@@ -104,5 +112,10 @@ x: 0,
     }; // 偏移对象
+    private _begintime: number; // 起始时间 计算用
+    private _endtime: number; //  结束时间
+    private _offsetTime: number; //  偏移时间
+    private processDraging: boolean = false; // 进度条是否在操作中
     private _loading = true;
     private _recording = false; // 录制状态
     private _retryTime = 0; // 出错后重试
+    private _timer = interval(1000); // 定时器
     private mediaRecorder: JPlayerMediaRecorder; // 录制器
@@ -139,2 +152,16 @@ private $click: Observable<any>; // 观察者容器
     }
+    public get seeking(): boolean {
+        return this._seeking
+    }
+    public set seeking(v: boolean) {
+        this._seeking = !!v;
+        const wrapper = this.el.querySelector('.' + this.prefixName + '-wrapper')
+        if (wrapper) {
+            if (v) {
+                wrapper.classList.add('seeking')
+            } else {
+                wrapper.classList.remove('seeking')
+            }
+        }
+    }
     public get recording() {
@@ -233,2 +260,22 @@ return this._recording;
     }
+    public get streamSpeed(): StreamSpeed {
+        return this._streamSpeed
+    }
+    public set streamSpeed(v: StreamSpeed) {
+        this.setSpeed(v).then(res => {
+            if (res) {
+                let playbackRate = Math.pow(2, v)
+                this.vel.playbackRate = playbackRate;
+                this._streamSpeed = v;
+                this.upDateSpeedView(v)
+            }
+        }).catch(err => { })
+    }
+    public get offsetTime(): number {
+        return this._offsetTime
+    }
+    public set offsetTime(v: number) {
+        this._offsetTime = v
+        this.updateProcessBarView(v)
+    }
     constructor(public h5msClient: H5msClient, public el: HTMLElement) {
@@ -239,4 +286,6 @@ this.prefixName = 'JPlayer'
         this.emitter = new EventEmitter();
+        this.e = {
+            onvSeekedCanPlay: this.onvSeekedCanPlay.bind(this),
+        };
         this.initDom()
-        this.initContextMenu()
         this.bindEvents()
@@ -257,9 +306,12 @@ // 绑定一些播放器需要的事件
         this.streamOpt = stream
+        this.initContextMenu(stream)
         // 开流
-        this.loading = true;
-        this.loadingTxt = '正在开流!';
-        let recordList;
+        let recordList: RecordItem[];
         try {
             if (stream.streamtype === "vod") {
-                recordList = await this.queryRecord()
+                (recordList) = await this.queryRecord()
+                if (Array.isArray(recordList) && recordList.length > 0) {
+                    this._begintime = recordList[0].begintime
+                    this._endtime = recordList[recordList.length - 1].endtime
+                }
             }
@@ -284,2 +336,3 @@ } catch (error) {
             this.resetRatio()
+            // this.setFillRatio();
             this.loading = false
@@ -436,2 +489,3 @@ this.play()
         wrapper.appendChild(videoDom)
+        wrapper.appendChild(createSeekDom(prefixName))
         wrapper.appendChild(createLoaderDom(prefixName))
@@ -449,2 +503,4 @@ wrapper.appendChild(createErrorDom(prefixName))
             videoBox.appendChild(header)
+            const processBar = creatProcessToolBar(this, streamOpt, prefixName)
+            videoBox.appendChild(processBar)
         }
@@ -455,6 +511,6 @@ if (!streamOpt.hideFooterToolBar) {
         }
-        // TODO:有 speed 展示
+        // 有 speed 展示
         const speed: HTMLElement = videoBox.querySelector('.speed')
         if (speed) {
-            const numbers$ = interval(1000).pipe(startWith(0)).subscribe(i => {
+            const numbers$ = this._timer.pipe(startWith(0), filter(v => !this.loading && this.playerIns)).subscribe(i => {
                 // console.log(this)
@@ -465,2 +521,37 @@ speed.innerHTML = this.speed
         }
+        if (streamOpt.streamtype === 'vod') {
+            this.getSpeed()
+            const process$ = this._timer.pipe(startWith(0), filter(v => !this.loading && this.playerIns && !this.seeking && !this.processDraging)).subscribe(this.updateProcess);
+            this.subscriptionToolbarList$.push(process$)
+            const processEle = this.el.querySelector('.process')
+            const processPoint: HTMLDivElement = processEle.querySelector('.offset-point')
+
+            // const $PointMousemove = fromEvent(processEle, 'mousemove').pipe(throttleTime(52))
+            // const $PointMousedown = fromEvent(processEle, 'mousedown').pipe(map(e => {
+            //     console.log('222',this)
+            //     this.processDraging = true
+            //     return e
+            // }))
+            // const $PointMouseup = fromEvent(processEle, 'mouseup').pipe(map(e => {
+            //     this.processDraging = false
+            //     return e
+            // }))
+            // $PointMousedown.pipe(
+            //     map(event => $PointMousemove.pipe(takeUntil($PointMouseup))),
+            //     concatAll(),
+            //     map(event => {
+            //         return ({ x: event.offsetX, y: event.offsetY })
+            //     })
+            // ).subscribe(pos => {
+            //     console.log(pos, '---')
+            //     processPoint.style.left = (pos.x -5 ) + 'px';
+            // })
+
+            const $processClick = fromEvent(processEle, 'click')
+            const processClick$ = $processClick.pipe(map(this.getOffetTime)).subscribe(
+                (e) => {
+                    this.seek(e / 1e3)
+                }
+            );
+        }
     }
@@ -470,3 +561,3 @@ creatPlayer() {
             // 确保清除上一次的实例
-            const mediaDataSource:any = {
+            const mediaDataSource: any = {
                 type: 'flv',
@@ -477,3 +568,3 @@ isLive: true,
             if (this.streamOpt.streamtype === 'vod') {
-                mediaDataSource.duration = 3600*1000
+                mediaDataSource.duration = 3600 * 1000
             }
@@ -517,2 +608,16 @@ if (typeof this.playerIns !== "undefined") {
             });
+            this.playerIns.on('onOriginSeekStart', (seconds) => {
+                this.originSeek(seconds).then(() => {
+                    this.playerIns._originSeekSuccess(seconds)
+                    this._preSeekTime = null;
+                }).catch(err => {
+                    //TODO:错误捕获
+                })
+            });
+            this.playerIns.on('onClientSeeked', (seconds) => {
+                this._preSeekTime = null;
+                this.seeking = false;
+                // this.vel && this.vel.removeEventListener('canplay', this.e.onvCanPlay);
+                // this.play()
+            });
         })
@@ -547,8 +652,10 @@ }
         const { headerToolBar, footerToolBar, title, ...param } = stream
+        this.loading = true;
+        this.loadingTxt = '正在查询录像'
         const res = await httpClient.post(url, { tokenId, param })
         if (res.code === 200 && res.msg && res.msg.info) {
             const info = JSON.parse(res.msg.info)
-            console.log(',,,', info)
-            if (info.length > 0) {
-                return info
+            const _info: RecordItem[] = filterQueryRecordArr(info)
+            if (_info.length > 0) {
+                return _info
             } else {
@@ -566,2 +673,4 @@ return Promise.reject(null)
         const { headerToolBar, footerToolBar, title, ...param } = stream
+        this.loading = true;
+        this.loadingTxt = '正在开流!';
         const res = await httpClient.post(url, { tokenId, param })
@@ -582,3 +691,3 @@ if (res.code === 200) {
     }
-    private initContextMenu() {
+    private initContextMenu(stream: StreamOpt) {
         const { version } = Package;
@@ -591,4 +700,3 @@
         }
-        // 初始化右键菜单实例
-        this.contextMenu = new ContextMenu(ele, [
+        const _menuArr = [
             { text: '主码流', onclick: e => this.switchStream(0) },
@@ -610,3 +718,6 @@ { text: '辅码流', onclick: e => this.switchStream(1) },
             },
-        ]);
+        ]
+        const menuArr = stream.streamtype === 'vod' ? _menuArr.slice(2) : _menuArr.slice(0)
+        // 初始化右键菜单实例
+        this.contextMenu = new ContextMenu(ele, menuArr);
     }
@@ -624,3 +735,3 @@ private bindEvents() {
         this.$mouseout = fromEvent(ele, 'mouseleave')
-        this.$mousemove = fromEvent(ele, 'mousemove').pipe(throttleTime(26))
+        this.$mousemove = fromEvent(ele, 'mousemove').pipe(throttleTime(52))
         this.$mousedown = fromEvent(ele, 'mousedown')
@@ -662,2 +773,10 @@ this.$mouseup = fromEvent(ele, 'mouseup')
     }
+    private onvSeekedCanPlay() {
+        console.log('_onvSeekedCanPlay')
+        this.seeking = false;
+        this.play()
+        setTimeout(() => {
+            this.vel && this.vel.removeEventListener('canplay', this.e.onvSeekedCanPlay);
+        }, 26)
+    }
 
@@ -771,2 +890,18 @@ private setMCPosition = (e: MouseEvent) => {
     }
+    public seek(offsetTime) {
+        //记录跳转前当前时间
+        this._preSeekTime = this.vel.currentTime
+        this.seeking = true
+        this.pause()
+        this.updateProcessBarView(offsetTime * 1e3)
+        this.vel && this.vel.addEventListener('canplay', this.e.onvSeekedCanPlay);
+        this.playerIns.currentTime = (offsetTime)
+    }
+    private originSeek(seconds) {
+        const arr = [
+            this.seekRecordStream(seconds * 1000),
+            this.pauseToogleStream()
+        ]
+        return Promise.all(arr)
+    }
     private resetPlayerStatus() {
@@ -930,4 +1065,3 @@ if (this.mediaRecorder) {
     }
-    async pauseToogleStream() {
-        console.log('开始暂停/播放')
+    async pauseToogleStream(pause: boolean = false) {
         const { streamId } = this
@@ -937,6 +1071,6 @@ const url = this.h5msClient.config.h5msUrl + PauseToogleUrl
         const param = {
-            streamId
+            streamId,
+            value: pause || false
         }
         const res = await httpClient.post(url, { tokenId, param })
-        console.log('完成暂停/播放', res)
         if (res.code === 200) {
@@ -948,6 +1082,109 @@ return true
     }
+    // 设定和获取录像流倍数
+    private async setSpeed(speed: StreamSpeed) {
+        const { streamId } = this
+        const value = speed
+        const url = this.h5msClient.config.h5msUrl + setSpeedUrl
+        const tokenId = this.h5msClient.token
+        const param = {
+            value,
+            streamId
+        }
+        this.seeking = true;
+        const res = await httpClient.post(url, { tokenId, param })
+        this.seeking = false;
+        if (res.code === 200) {
+            return true;
+        } else {
+            return Promise.reject(false)
+        }
+    }
+    // 设定和获取录像流倍数
+    public async getSpeed() {
+        const { streamId } = this
+        const url = this.h5msClient.config.h5msUrl + getSpeedUrl
+        const tokenId = this.h5msClient.token
+        const param = {
+            streamId
+        }
+        const res = await httpClient.post(url, { tokenId, param })
+        if (res.code === 200) {
+            this.streamSpeed = res.msg
+            return res.msg;
+        } else {
+            return Promise.reject(false)
+        }
+    }
+    // 切换录像源 前端/中心
+    toggleVodOrigin(e) {
+        const item: HTMLElement = e.target
+        const parent = item.parentElement
+        for (let index = 0; index < parent.children.length; index++) {
+            const element = parent.children[index];
+            element.classList.remove('active')
+        }
+        item.classList.add('active')
+        const vod = item.getAttribute('data-value')
+        this.streamOpt.vod = Number(vod);
+        this.refresh()
+    }
+    // 增加倍速
+    addStreamSpeed() {
+        const { _streamSpeed } = this
+        if (_streamSpeed >= 4) return
+        this.streamSpeed = (_streamSpeed + 1) as StreamSpeed
+    }
+    // 减少倍速
+    reduceStreamSpeed() {
+        const { _streamSpeed } = this
+        if (_streamSpeed <= -4) return
+        this.streamSpeed = (_streamSpeed - 1) as StreamSpeed
+    }
+    // 更新倍速视图
+    upDateSpeedView(streamSpeed: StreamSpeed) {
+        const txt = this.el.querySelector('.stream-speed-text')
+        const right = this.el.querySelector('.stream-speed-add')
+        const left = this.el.querySelector('.stream-speed-reduce')
+        txt.innerHTML = streamSpeedIconMap(streamSpeed)
+        right.classList.remove('disabled')
+        left.classList.remove('disabled')
+        if (streamSpeed === 4) {
+            right.classList.add('disabled')
+        } else if (streamSpeed === -4) {
+            left.classList.add('disabled')
+        }
+    }
+    // 更新进度条
+    private updateProcess = (e) => {
+        const { vel } = this
+        const offsetTime = vel.currentTime * 1e3
+        this.offsetTime = offsetTime
+    }
+    private updateProcessBarView(offsetTime: number) {
+        const totalTime = this._endtime - this._begintime;
+        const eleWidth = this.wrapperel.clientWidth
+        const offsetBar: HTMLDivElement = this.el.querySelector('.offset-bar')
+        if (offsetBar) {
+            offsetBar.style.width = (offsetTime * eleWidth / totalTime) + 'px'
+        }
+        const offsetPoint: HTMLDivElement = this.el.querySelector('.offset-point')
+        if (offsetPoint) {
+            offsetPoint.style.left = (offsetTime * eleWidth / totalTime) - 5 + 'px'
+        }
+    }
+    // getOffetTime
+    private getOffetTime = (e) => {
+        const totalTime = this._endtime - this._begintime;
+        const oX = e.offsetX
+        const eleWidth = this.wrapperel.clientWidth
+        return e.offsetX / eleWidth * totalTime
+    }
     destroy() {
         // TODO: destroy player
-        this.playerIns && this.playerIns.destroy()
-        this.playerIns = null;
+        if (this.playerIns != null) {
+            this.playerIns.unload();
+            this.playerIns.detachMediaElement();
+            this.playerIns.destroy();
+            this.playerIns = null;
+        }
 
@@ -962,2 +1199,3 @@ this.emitter.removeAllListeners();
         this.unSubscribeObservables()
+        this.unSubscribeToolbarObservables()
         this.emptyVideoDom()
@@ -964,0 +1202,0 @@ this.error = '暂无视频'

src/model/playerModel.ts

@@ -0,1 +1,2 @@
+import { type } from "os";
 
@@ -54,2 +55,3 @@ export type DeviceType = 'pvg67' | 'pvgplus' | 'rtsp' | 'gb28181';
 }
+export type StreamSpeed = -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4;
 export interface PTZParam {
@@ -56,0 +58,0 @@ streamId?: string; // 流id

src/player/mse-player.js

@@ -60,3 +60,3 @@ /*
             onvStalled: this._onvStalled.bind(this),
-            onvProgress: this._onvProgress.bind(this)
+            onvProgress: this._onvProgress.bind(this),
         };
@@ -467,2 +467,3 @@
             let to = buffered.end(i);
+            console.log('_checkProgressAndResume', needResume, currentTime, from, to)
             if (currentTime >= from && currentTime < to) {
@@ -521,2 +522,3 @@ if (currentTime >= to - this._config.lazyLoadRecoverDuration) {
                 this._mediaElement.currentTime = seconds;
+                this._emitter.emit('onClientSeeked', seconds)
             } else {
@@ -527,4 +529,6 @@ let idr = this._msectl.getNearestKeyframe(Math.floor(seconds * 1000));
                     this._mediaElement.currentTime = idr.dts / 1000;
+                    this._emitter.emit('onClientSeeked', idr.dts / 1000)
                 } else {
                     this._mediaElement.currentTime = seconds;
+                    this._emitter.emit('onClientSeeked', seconds)
                 }
@@ -536,16 +540,34 @@ }
         } else {
-            if (this._progressChecker != null) {
-                window.clearInterval(this._progressChecker);
-                this._progressChecker = null;
-            }
-            this._msectl.seek(seconds);
-            this._transmuxer.seek(Math.floor(seconds * 1000));  // in milliseconds
-            // no need to set mediaElement.currentTime if non-accurateSeek,
-            // just wait for the recommend_seekpoint callback
-            if (this._config.accurateSeek) {
-                this._requestSetTime = true;
-                this._mediaElement.currentTime = seconds;
-            }
+            this._beginOriginSeek(seconds)
+            // if (this._progressChecker != null) {
+            //     window.clearInterval(this._progressChecker);
+            //     this._progressChecker = null;
+            // }
+            // this._msectl.seek(seconds);
+            // this._transmuxer.seek(Math.floor(seconds * 1000));  // in milliseconds
+            // // no need to set mediaElement.currentTime if non-accurateSeek,
+            // // just wait for the recommend_seekpoint callback
+            // if (this._config.accurateSeek) {
+            //     this._requestSetTime = true;
+            //     this._mediaElement.currentTime = seconds;
+            // }
         }
     }
+    _beginOriginSeek(seconds) {
+        this._emitter.emit('onOriginSeekStart', seconds)
+    }
+    _originSeekSuccess(seconds) {
+        if (this._progressChecker != null) {
+            window.clearInterval(this._progressChecker);
+            this._progressChecker = null;
+        }
+        this._msectl.seek(seconds);
+        this._transmuxer.seek(Math.floor(seconds * 1000));  // in milliseconds
+        // no need to set mediaElement.currentTime if non-accurateSeek,
+        // just wait for the recommend_seekpoint callback
+        if (!this._config.accurateSeek) {
+            this._requestSetTime = true;
+            this._mediaElement.currentTime = seconds;
+        }
+    }
 
@@ -656,4 +678,5 @@ _checkAndApplyUnbufferedSeekpoint() {
 
+
 }
 
 export default MSEPlayer;

src/utils/controlDom.ts

 import JPlayer from "../jplayer";
 import { BarItemType, StreamOpt, ToolBarItem } from "../model/playerModel";
-import { closeSvg, fullScreenSvg, refreshSvg, screenshotSvg, recordSvg, ptzSvg, zoomSvg } from './icons'
+import { closeSvg, fullScreenSvg, refreshSvg, screenshotSvg, recordSvg, ptzSvg, zoomSvg, speedRightSvg, speedLeftSvg, streamSpeedIconMap } from './icons'
 function creatToolBarItem(playIns: JPlayer, barItem: ToolBarItem) {
@@ -24,2 +24,59 @@ const { type, label, icon, cmd, className, cb } = barItem
 }
+function creatToolToogleItem(playIns: JPlayer, streamOpt: StreamOpt) {
+    const { vod } = streamOpt
+    const item = document.createElement('div')
+    item.classList.add('tool-item', 'left',)
+
+    const div = document.createElement('div')
+    div.classList.add('toogle-vod')
+    for (let index = 1; index >= 0; index--) {
+        const span = document.createElement('span')
+        span.classList.add('toogle-vod-item')
+        span.innerText = index ? '前端存储' : '中心存储'
+        const cmd = 'toogleVodOrigin'
+        span.setAttribute('data-cmd', cmd)
+        span.setAttribute('data-value', String(index))
+        span.addEventListener('click', function (e) {
+            playIns.toggleVodOrigin(e)
+        })
+        div.appendChild(span)
+    }
+    if (vod === 0) {
+        (div.children[1].classList.add('active'))
+    } else {
+        (div.children[0].classList.add('active'))
+    }
+    item.appendChild(div)
+    return item
+}
+function creatToolSpeedItem(playIns: JPlayer, streamOpt: StreamOpt) {
+    const { vod } = streamOpt
+    const item = document.createElement('div')
+    item.classList.add('tool-item', 'left',)
+
+    const div = document.createElement('div')
+    div.classList.add('stream-speed')
+    const speedRight = document.createElement('i')
+    speedRight.addEventListener('click', function (e) {
+        playIns.addStreamSpeed()
+    })
+    speedRight.classList.add('stream-speed-item', 'stream-speed-add')
+    speedRight.innerHTML = speedRightSvg
+    const speedLeft = document.createElement('i')
+    speedLeft.classList.add('stream-speed-item','stream-speed-reduce')
+    speedLeft.addEventListener('click', function (e) {
+        playIns.reduceStreamSpeed()
+    })
+    speedLeft.innerHTML = speedLeftSvg
+
+    const txt = document.createElement('span')
+    txt.classList.add('stream-speed-text')
+    const mockSpeed = 0
+    txt.innerHTML = streamSpeedIconMap(mockSpeed)
+    div.appendChild(speedLeft)
+    div.appendChild(txt)
+    div.appendChild(speedRight)
+    item.appendChild(div)
+    return item
+}
 const creatHeaderToolBar = function (playIns: JPlayer, streamOpt: StreamOpt, prefixName = 'JPlayer'): HTMLElement {
@@ -55,4 +112,16 @@ const { isptz, headerToolBar, title } = streamOpt
 }
+const creatProcessToolBar = (playIns: JPlayer, streamOpt: StreamOpt, prefixName = 'JPlayer') => {
+    const process = document.createElement('div')
+    process.className = prefixName + '-toolbar process'
+    const offsetBar = document.createElement('div')
+    offsetBar.className = 'offset-bar'
+    // const offsetPoint = document.createElement('div')
+    // offsetPoint.className = 'offset-point'
+    // process.appendChild(offsetPoint)
+    process.appendChild(offsetBar)
+    return process
+}
 const creatFooterToolBar = function (playIns: JPlayer, streamOpt: StreamOpt, prefixName = 'JPlayer'): HTMLElement {
-    const { isptz, footerToolBar } = streamOpt
+    const { isptz, footerToolBar, streamtype } = streamOpt
+    const isVod = streamtype === 'vod'
     const footer = document.createElement('div')
@@ -70,2 +139,6 @@ footer.className = prefixName + '-toolbar footer'
     })) // 创建全屏按钮
+    if (isVod) {
+        // 录像模式下
+        footer.appendChild(creatToolToogleItem(playIns, streamOpt))
+    }// 创建切换录像流
     footer.appendChild(creatToolBarItem(playIns, {
@@ -91,2 +164,6 @@ type: BarItemType.BTN,
     })) // 创建刷新按钮
+    if (isVod) {
+        // 录像模式下
+        footer.appendChild(creatToolSpeedItem(playIns, streamOpt))
+    }// 创建倍速控制器
     footer.appendChild(creatToolBarItem(playIns, {
@@ -112,3 +189,3 @@ type: BarItemType.BTN,
     })) // 创建截图按钮
-    if (isptz) {
+    if (isptz && !isVod) {
         footer.appendChild(creatToolBarItem(playIns, {
@@ -125,16 +202,27 @@ type: BarItemType.BTN,
     }
-    footer.appendChild(creatToolBarItem(playIns, {
-        type: BarItemType.BTN,
-        icon: zoomSvg,
-        cmd: 'zoom',
-        className: 'zoom',
-        tip: '数码放大',
-        cb: function (e) {
-            this.toggleZoom()
-        }
-    })) // 创建数码放大
-
+    // footer.appendChild(creatToolBarItem(playIns, {
+    //     type: BarItemType.BTN,
+    //     icon: zoomSvg,
+    //     cmd: 'zoom',
+    //     className: 'zoom',
+    //     tip: '数码放大',
+    //     cb: function (e) {
+    //         this.toggleZoom()
+    //     }
+    // })) // 创建数码放大
     return footer
 }
 
+const createSeekDom = (prefixName:string) => {
+    const seekWarper = document.createElement('div')
+    seekWarper.classList.add(prefixName + '-seek-wrapper')
+    const seek = document.createElement('div')
+    seek.classList.add('line-scale-pulse-out')
+    for (let index = 0; index < 5; index++) {
+        const element = document.createElement('div')
+        seek.appendChild(element)
+    }
+    seekWarper.appendChild(seek)
+    return seekWarper
+}
 const createLoaderDom = (prefixName: string): HTMLElement => {
@@ -187,2 +275,2 @@ const loader = document.createElement('div')
 
-export { createErrorDom, createLoaderDom, creatHeaderToolBar, creatFooterToolBar }
+export { createErrorDom, createLoaderDom, createSeekDom, creatHeaderToolBar, creatFooterToolBar, creatProcessToolBar}

src/utils/icons.ts

@@ -81,3 +81,40 @@ const closeSvg = `<svg t="1626059564788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2540" ><path d="M568.9344 521.4208l300.2368-300.2368a39.3216 39.3216 0 0 0 0-55.296l-1.6384-1.6384a39.3216 39.3216 0 0 0-55.296 0L512 464.896 211.7632 164.2496a39.3216 39.3216 0 0 0-55.296 0l-1.6384 1.6384a38.5536 38.5536 0 0 0 0 55.296l300.2368 300.2368-300.2368 300.2368a39.3216 39.3216 0 0 0 0 55.296l1.6384 1.6384a39.3216 39.3216 0 0 0 55.296 0L512 578.3552l300.2368 300.2368a39.3216 39.3216 0 0 0 55.296 0l1.6384-1.6384a39.3216 39.3216 0 0 0 0-55.296l-300.2368-300.2368z" p-id="2541"></path></svg>`
 </svg>`
-
-export { closeSvg, fullScreenSvg, refreshSvg, screenshotSvg, recordSvg, ptzSvg, zoomSvg}
+const speedLeftSvg = `<svg t="1631446659830" class="icon" viewBox="0 0 1638 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7283"><path d="M133.12 937.472c17.6128 0 32.0512-14.336 32.0512-32.0512V118.5792A32.0512 32.0512 0 0 0 133.12 86.528a32.0512 32.0512 0 0 0-31.9488 32.0512v787.0464c0 17.6128 14.336 31.744 31.9488 31.744z m695.808 2.6624a33.4848 33.4848 0 0 0 33.5872-33.5872V117.4528a33.792 33.792 0 0 0-50.3808-29.184L128.6144 482.9184a33.4848 33.4848 0 0 0 0 58.1632l683.52 394.5472c5.3248 3.072 11.0592 4.5056 16.7936 4.5056z m-30.4128-770.048v683.8272L206.4384 512l592.0768-342.016z m705.024 770.048a33.4848 33.4848 0 0 0 33.5872-33.5872V117.4528a33.792 33.792 0 0 0-50.3808-29.184L803.2256 482.9184a33.4848 33.4848 0 0 0 0 58.1632l683.52 394.5472c5.2224 3.072 11.0592 4.5056 16.7936 4.5056z m-30.4128-770.048v683.8272L880.9472 512l592.1792-342.016z" p-id="7284"></path></svg>`
+const speedRightSvg = `<svg t="1631446684976" class="icon" viewBox="0 0 1638 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7411" ><path d="M1505.28 937.472a32.0512 32.0512 0 0 1-32.0512-32.0512V118.5792a32.0512 32.0512 0 0 1 64 0v787.0464c0 17.6128-14.336 31.744-31.9488 31.744z m-695.808 2.6624a33.4848 33.4848 0 0 1-33.5872-33.5872V117.4528a33.792 33.792 0 0 1 50.3808-29.184l683.52 394.6496a33.4848 33.4848 0 0 1 0 58.1632L826.2656 935.6288a33.4848 33.4848 0 0 1-16.7936 4.5056z m30.4128-770.048v683.8272L1431.9616 512 839.8848 169.984zM134.8608 940.032a33.4848 33.4848 0 0 1-33.5872-33.5872V117.4528a33.792 33.792 0 0 1 50.3808-29.184l683.52 394.6496a33.4848 33.4848 0 0 1 0 58.1632L151.6544 935.6288a33.4848 33.4848 0 0 1-16.7936 4.5056z m30.4128-770.048v683.8272L757.4528 512 165.2736 169.984z" p-id="7412"></path></svg>`
+const streamSpeedIconMap = (speed) => {
+    let svg = '';
+    switch (speed) {
+        case 4:
+            svg = `<svg t="1631446083930" class="icon" viewBox="0 0 2048 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6003">
+                <path d="M386.2528 921.6V44.2368h-100.7616c-29.4912 31.9488-66.3552 60.2112-110.592 87.2448a514.048 514.048 0 0 1-124.1088 51.6096v132.7104c81.1008-23.3472 148.6848-60.2112 201.5232-110.592V921.6h133.9392z m495.2064 17.2032c86.016 0 159.744-29.4912 218.7264-86.016 57.7536-56.5248 87.2448-129.024 87.2448-216.2688 0-86.016-25.8048-157.2864-76.1856-212.5824-51.6096-54.0672-120.4224-81.1008-206.4384-81.1008-46.6944 0-87.2448 8.6016-121.6512 27.0336-38.0928 18.432-68.8128 46.6944-93.3888 86.016h-4.9152c-1.2288-7.3728-1.2288-12.288-1.2288-15.9744 0-86.016 17.2032-156.0576 52.8384-212.5824 35.6352-60.2112 83.5584-89.7024 144.9984-89.7024 88.4736 0 141.312 41.7792 159.744 127.7952h130.2528C1149.3376 105.6768 1052.2624 27.0336 882.688 27.0336c-100.7616 0-181.8624 44.2368-240.8448 133.9392-58.9824 88.4736-87.2448 203.9808-87.2448 346.5216 0 133.9392 27.0336 238.3872 81.1008 313.344 56.5248 78.6432 137.6256 117.9648 245.76 117.9648z m-4.9152-110.592c-52.8384 0-95.8464-17.2032-127.7952-51.6096-33.1776-34.4064-49.152-79.872-49.152-136.3968 0-57.7536 15.9744-103.2192 47.9232-137.6256 31.9488-34.4064 74.9568-51.6096 130.2528-51.6096 54.0672 0 98.304 17.2032 130.2528 51.6096 31.9488 31.9488 47.9232 77.4144 47.9232 133.9392 0 55.296-17.2032 100.7616-50.3808 137.6256-31.9488 35.6352-74.9568 54.0672-129.024 54.0672zM1408.6144 921.6l234.7008-347.7504L1878.016 921.6h163.4304l-318.2592-453.4272 297.3696-423.936h-163.4304l-213.8112 317.0304L1429.504 44.2368h-163.4304l294.912 423.936L1245.184 921.6h163.4304z" p-id="6004">
+                </path>
+            </svg>`
+            break;
+        case 3:
+            svg = `<svg t="1631446226537" class="icon" viewBox="0 0 1638 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6131"><path d="M414.9248 938.8032c103.2192 0 184.32-24.576 242.0736-72.4992 56.5248-49.152 84.7872-111.8208 84.7872-189.2352 0-55.296-17.2032-103.2192-51.6096-144.9984-29.4912-39.3216-66.3552-63.8976-108.1344-73.728V454.656c44.2368-17.2032 77.4144-41.7792 99.5328-74.9568 19.6608-30.72 29.4912-68.8128 29.4912-114.2784 0-65.1264-24.576-120.4224-73.728-164.6592-55.296-49.152-129.024-73.728-222.4128-73.728-93.3888 0-168.3456 24.576-222.4128 73.728-49.152 44.2368-73.728 99.5328-73.728 164.6592 0 45.4656 9.8304 83.5584 29.4912 114.2784 22.1184 33.1776 55.296 57.7536 99.5328 74.9568v3.6864c-43.008 9.8304-78.6432 34.4064-108.1344 73.728A220.672 220.672 0 0 0 88.064 677.0688c0 77.4144 28.2624 140.0832 84.7872 189.2352 56.5248 47.9232 137.6256 72.4992 242.0736 72.4992z m0-524.6976c-62.6688 0-108.1344-14.7456-136.3968-44.2368-23.3472-24.576-34.4064-57.7536-34.4064-99.5328 0-36.864 13.5168-68.8128 41.7792-93.3888 31.9488-29.4912 74.9568-43.008 129.024-43.008s97.0752 13.5168 129.024 43.008c27.0336 24.576 41.7792 56.5248 41.7792 93.3888 0 41.7792-12.288 74.9568-34.4064 99.5328-29.4912 29.4912-74.9568 44.2368-136.3968 44.2368z m0 416.5632c-62.6688 0-110.592-14.7456-143.7696-43.008-34.4064-28.2624-50.3808-65.1264-50.3808-110.592 0-49.152 15.9744-87.2448 49.152-116.736 31.9488-31.9488 81.1008-46.6944 144.9984-46.6944 63.8976 0 111.8208 15.9744 146.2272 47.9232 31.9488 28.2624 47.9232 66.3552 47.9232 115.5072 0 45.4656-15.9744 82.3296-47.9232 110.592-35.6352 28.2624-84.7872 43.008-146.2272 43.008zM953.1392 921.6L1187.84 573.8496 1422.5408 921.6h163.4304L1267.712 468.1728l297.3696-423.936h-163.4304L1187.84 361.2672 974.0288 44.2368H810.5984l294.912 423.936L789.7088 921.6h163.4304z" p-id="6132"></path></svg>`
+            break;
+        case 2:
+            svg = `<svg t="1631446257850" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6259"><path d="M695.864889 1024V812.373333h147.456V693.589333H695.864889V49.152h-136.533333L78.734222 671.744V812.373333h475.136V1024h141.994667zM553.870222 693.589333H200.248889l349.525333-456.021333h4.096v456.021333zM1059.043556 1024L1319.822222 637.610667 1580.600889 1024h181.589333L1408.568889 520.192l330.410667-471.04h-181.589334L1319.822222 401.408 1082.254222 49.152H900.664889l327.68 471.04L877.454222 1024h181.589334z" p-id="6260"></path></svg>`
+            break;
+        case 1:
+            svg = `<svg t="1631446292550" class="icon" viewBox="0 0 1706 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6387" ><path d="M683.121778 1024V892.928H195.697778c20.48-53.248 83.285333-114.688 188.416-184.32 96.938667-65.536 163.84-117.418667 202.069333-157.013333 62.805333-69.632 95.573333-146.090667 95.573333-230.741334 0-86.016-30.037333-155.648-88.746666-210.261333C532.935111 55.978667 455.111111 30.037333 362.268444 30.037333c-103.765333 0-188.416 34.133333-251.221333 105.130667-61.44 65.536-92.842667 152.917333-94.208 262.144h148.821333c2.730667-79.189333 19.114667-137.898667 51.882667-178.858667 31.402667-42.325333 77.824-62.805333 139.264-62.805333 57.344 0 102.4 13.653333 132.437333 40.96 30.037333 27.306667 45.056 68.266667 45.056 122.88 0 57.344-23.210667 110.592-66.901333 159.744-27.306667 28.672-73.728 65.536-139.264 111.957333-110.592 76.458667-184.32 135.168-219.818667 177.493334A370.688 370.688 0 0 0 11.377778 1024h671.744z m262.144 0L1206.044444 637.610667 1466.823111 1024h181.589333L1294.791111 520.192l330.410667-471.04h-181.589334L1206.044444 401.408 968.476444 49.152H786.887111l327.68 471.04L763.676444 1024h181.589334z" p-id="6388"></path></svg>`
+            break;
+        case 0:
+            svg = `<svg t="1631446320555" class="icon" viewBox="0 0 1479 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6515" ><path d="M383.658667 1024V49.152h-111.957334c-32.768 35.498667-73.728 66.901333-122.88 96.938667a571.164444 571.164444 0 0 1-137.898666 57.344v147.456c90.112-25.941333 165.205333-66.901333 223.914666-122.88V1024h148.821334z m316.757333 0l260.778667-386.389333L1221.973333 1024h181.589334L1049.941333 520.192l330.410667-471.04h-181.589333L961.194667 401.408 723.626667 49.152H542.037333l327.68 471.04L518.826667 1024h181.589333z" p-id="6516"></path></svg>`
+            break;
+        case -1:
+            svg = `<svg t="1631446347901" class="icon" viewBox="0 0 1621 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6643" ><path d="M189.44 459.093333V12.629333h-59.392a253.184 253.184 0 0 1-122.88 69.632v78.848c40.96-12.288 75.776-28.672 103.424-50.176v348.16h78.848z m-65.536 496.64L828.416 13.653333H739.328L33.792 955.733333h90.112z m745.472 0v-70.656H650.24c10.24-20.48 36.864-44.032 79.872-70.656 47.104-30.72 77.824-54.272 94.208-70.656 28.672-30.72 44.032-66.56 44.032-107.52s-14.336-73.728-40.96-98.304c-28.672-24.576-65.536-36.864-110.592-36.864-50.176 0-89.088 15.36-117.76 48.128-30.72 31.744-46.08 73.728-47.104 126.976h80.896c0-35.84 8.192-62.464 22.528-79.872 13.312-18.432 32.768-27.648 58.368-27.648 24.576 0 43.008 5.12 56.32 17.408 12.288 10.24 19.456 27.648 19.456 50.176 0 24.576-10.24 48.128-29.696 68.608-10.24 10.24-31.744 25.6-62.464 48.128-51.2 34.816-86.016 61.44-102.4 80.896-30.72 33.792-45.056 74.752-45.056 121.856h319.488z m215.04-102.4L1280 563.541333 1475.584 853.333333h136.192L1346.56 475.477333l247.808-353.28h-136.192L1280 386.389333l-178.176-264.192h-136.192l245.76 353.28L948.224 853.333333h136.192z" p-id="6644"></path></svg>`
+            break;
+        case -2:
+            svg = `<svg t="1631446371098" class="icon" viewBox="0 0 1621 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6771" ><path d="M189.44 459.093333V12.629333h-59.392a253.184 253.184 0 0 1-122.88 69.632v78.848c40.96-12.288 75.776-28.672 103.424-50.176v348.16h78.848z m-65.536 496.64L828.416 13.653333H739.328L33.792 955.733333h90.112z m677.888 0v-94.208h68.608V797.013333h-68.608V509.269333h-82.944l-212.992 281.6v70.656h220.16V955.733333h75.776z m-75.776-158.72H579.584L721.92 603.477333h4.096V797.013333z m358.4 56.32L1280 563.541333 1475.584 853.333333h136.192L1346.56 475.477333l247.808-353.28h-136.192L1280 386.389333l-178.176-264.192h-136.192l245.76 353.28L948.224 853.333333h136.192z" p-id="6772"></path></svg>`
+            break;
+        case -3:
+            svg = `<svg t="1631446388548" class="icon" viewBox="0 0 1621 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6899" ><path d="M189.44 459.093333V12.629333h-59.392a253.184 253.184 0 0 1-122.88 69.632v78.848c40.96-12.288 75.776-28.672 103.424-50.176v348.16h78.848z m-65.536 496.64L828.416 13.653333H739.328L33.792 955.733333h90.112z m591.872 8.192c53.248 0 96.256-12.288 126.976-36.864 29.696-25.6 45.056-58.368 45.056-98.304 0-26.624-8.192-49.152-22.528-69.632a112.213333 112.213333 0 0 0-50.176-39.936c38.912-20.48 58.368-51.2 58.368-94.208 0-34.816-13.312-63.488-39.936-86.016-29.696-25.6-68.608-37.888-117.76-37.888-49.152 0-88.064 12.288-115.712 36.864-28.672 23.552-41.984 52.224-41.984 87.04 0 43.008 19.456 73.728 58.368 94.208-20.48 8.192-37.888 21.504-50.176 39.936-15.36 20.48-22.528 43.008-22.528 69.632 0 39.936 14.336 72.704 45.056 98.304 29.696 24.576 71.68 36.864 126.976 36.864z m0-271.36c-30.72 0-52.224-7.168-64.512-21.504-11.264-10.24-16.384-25.6-16.384-44.032 0-17.408 6.144-31.744 18.432-41.984 15.36-13.312 35.84-19.456 62.464-19.456 25.6 0 46.08 6.144 62.464 19.456 12.288 10.24 18.432 24.576 18.432 41.984a61.184 61.184 0 0 1-16.384 44.032c-13.312 14.336-34.816 21.504-64.512 21.504z m0 206.848c-62.464 0-93.184-23.552-93.184-70.656 0-23.552 6.144-40.96 20.48-53.248 15.36-15.36 39.936-22.528 72.704-22.528 31.744 0 56.32 7.168 72.704 22.528 13.312 12.288 20.48 29.696 20.48 53.248 0 21.504-7.168 38.912-20.48 51.2-16.384 12.288-39.936 19.456-72.704 19.456z m368.64-46.08L1280 563.541333 1475.584 853.333333h136.192L1346.56 475.477333l247.808-353.28h-136.192L1280 386.389333l-178.176-264.192h-136.192l245.76 353.28L948.224 853.333333h136.192z" p-id="6900"></path></svg>`
+            break;
+        case -4:
+            svg = `<svg t="1631446408583" class="icon" viewBox="0 0 1877 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7027" ><path d="M794.624 13.653333l-161.28 215.552L90.197333 955.733333H0L705.536 13.653333h89.088z m199.850667 490.154667c82.432 0 129.621333 38.229333 140.373333 115.882667h-63.317333c-8.96-41.813333-34.645333-62.122667-77.653334-62.122667-29.866667 0-53.162667 14.336-70.485333 43.605333-17.322667 27.477333-25.685333 61.525333-25.685333 103.338667 0 1.792 0 4.181333 0.597333 7.765333h2.389333c11.946667-19.114667 26.88-32.853333 45.397334-41.813333 16.725333-8.96 36.437333-13.141333 59.136-13.141333 41.813333 0 75.264 13.141333 100.352 39.424 24.490667 26.88 37.034667 61.525333 37.034666 103.338666 0 42.410667-14.336 77.653333-42.410666 105.130667-28.672 27.477333-64.512 41.813333-106.325334 41.813333-52.565333 0-91.989333-19.114667-119.466666-57.344-26.282667-36.437333-39.424-87.210667-39.424-152.32 0-69.290667 13.738667-125.44 42.410666-168.448 28.672-43.605333 68.096-65.109333 117.077334-65.109333z m-241.322667 8.362667V938.666667h-65.109333V590.421333c-25.685333 24.490667-58.538667 42.410667-97.962667 53.76v-64.512c19.114667-4.778667 38.826667-13.141333 60.330667-25.088 21.504-13.141333 39.424-26.88 53.76-42.410666h48.981333z m238.933333 197.717333c-26.88 0-47.786667 8.362667-63.317333 25.088-15.530667 16.725333-23.296 38.826667-23.296 66.901333 0 27.477333 7.765333 49.578667 23.893333 66.304 15.530667 16.725333 36.437333 25.088 62.122667 25.088 26.282667 0 47.189333-8.96 62.72-26.282666 16.128-17.92 24.490667-40.021333 24.490667-66.901334 0-27.477333-7.765333-49.578667-23.296-65.109333-15.530667-16.725333-37.034667-25.088-63.317334-25.088z m365.738667-587.690667L1536 386.389333l178.176-264.192h136.192l-247.808 353.28L1867.776 853.333333h-136.192L1536 563.541333 1340.416 853.333333h-136.192l263.168-377.856-245.76-353.28h136.192zM207.018667 0.170667V426.666667h-65.109334V78.421333c-25.685333 24.490667-58.538667 42.410667-97.962666 53.76V67.669333C63.061333 62.890667 82.773333 54.528 104.277333 42.581333c21.504-13.141333 39.424-26.88 53.76-42.410666h48.981334z" p-id="7028"></path></svg>`
+            break;
+    }
+    return svg
+}
+export { streamSpeedIconMap, closeSvg, fullScreenSvg, refreshSvg, screenshotSvg, recordSvg, ptzSvg, zoomSvg, speedLeftSvg, speedRightSvg}

src/utils/utils.js

@@ -59,2 +59,2 @@ // Generate four random hex digits.
     return `${Y}${M}${D}${H}${m}${s}`
-}
+}

No alert changes

Improved metrics

Total package byte prevSize

3649467

increased by6.24%

Number of package files

99

increased by3.13%

Lines of code

39630

increased by3.94%

No dependency changes