refactor: add ttplayervideo support dynamic use mse, and create stand…

…ard mse library

add ttplayervideo support dynamic use mse, and create standard mse library, delete useless video
component and control component relative dependency, update relative rollup script code

packages/core/src/index.ts

@@ -6,7 +6,11 @@ import TTPlayerMedia, {
     TTPlayerMediaOptions,
     TTPlayerMediaComponent,
 } from './media/media';
-import TTPlayerVideo, { TTPlayerVideoFactory, TTPlayerVideoOptions } from './media/video';
+import TTPlayerVideo, {
+    TTPlayerVideoFactory,
+    TTPlayerVideoOptions,
+    VideoMSE,
+} from './media/video';
 import TTPlayerAudio, { TTPlayerAudioFactory, TTPlayerAudioOptions } from './media/audio';
 import TTPlayerPlayButton from './components/play-button';
 import TTPlayerTime from './components/time';
@@ -24,6 +28,7 @@ import {
     TTPlayerQualityList,
     TTPlayerBaseQuality,
 } from './components/quality-switch';
+
 import {
     TTPlayerPlaySwitch,
     TTPlayerPlayList,
@@ -61,6 +66,7 @@ export {
     TTPlayerMediaOptions,
     TTPlayerMediaComponent,
 
+    VideoMSE,
     TTPlayerVideo,
     TTPlayerVideoFactory,
     TTPlayerVideoOptions,

packages/core/src/media/video/index.ts

@@ -2,9 +2,9 @@ import TTPlayerCore from '../../core';
 import TTPlayerMedia, { TMediaType } from '../media';
 import TTPlayerMediaComponent from '../component';
 import TTPlayerVideoOptions from './option';
+import VideoMSE, { IMSECtor } from './mse';
 import { DOMUtils } from '@dking/ttplayer-utils';
 
-
 const VIDEO_MEDIA_TYPE: TMediaType = 'Video';
 
 interface TTPlayerVideoComponentCtor {
@@ -16,7 +16,10 @@ class TTPlayerVideo extends TTPlayerMedia<'Video'> {
     static className: string = 'ttplayer__video--component';
     static mediaType = VIDEO_MEDIA_TYPE;
     static videoComponentsCtor: TTPlayerVideoComponentCtor[] = [];
+    static msesCtor: IMSECtor[] = [];
 
+    public mses: VideoMSE[] = [];
+    public currentMSE: VideoMSE | null = null;
     public video: DOMUtils<HTMLVideoElement>;
     public options: TTPlayerVideoOptions;
     public videoComponents: TTPlayerMediaComponent<'Video'>[] = []
@@ -30,13 +33,30 @@ class TTPlayerVideo extends TTPlayerMedia<'Video'> {
             ...player.options.video,
         });
         this.initVideoComponents();
+        this.initMSE();
     }
 
     static use (videoComponentCtor: TTPlayerVideoComponentCtor) {
         this.videoComponentsCtor.push(videoComponentCtor);
         return this;
     }
 
+    static useMSE (ctor: IMSECtor) {
+        this.msesCtor.push(ctor);
+        return this;
+    }
+
+    get src (): string {
+        return this.mediaDom.src;
+    }
+
+    set src (src: string) {
+        this.logger.debug(`media set src ${ src }`);
+        this.mediaDom.src = src;
+        this.options.src = src;
+        this.createMSE(src);
+    }
+
     get poster (): string {
         return this.mediaDom.poster;
     }
@@ -66,6 +86,7 @@ class TTPlayerVideo extends TTPlayerMedia<'Video'> {
     componentWillUnmount () {
         super.componentWillUnmount();
         this.videoComponents.forEach(comp => comp.componentWillUnmount());
+        this.clearMSE();
     }
 
     beforeRender () {
@@ -78,12 +99,37 @@ class TTPlayerVideo extends TTPlayerMedia<'Video'> {
         super.render();
     }
 
+    private initMSE () {
+        /* eslint-disable */
+        const msesCtor = (this.constructor as typeof TTPlayerVideo).msesCtor || [];
+        /* eslint-enable */
+        msesCtor.forEach(ctor => {
+            this.mses.push(new ctor(this));
+        });
+    }
+
+    private createMSE (src: string, type: string = 'auto') {
+        const mses = this.mses;
+        for (let i = 0; i < mses.length; i++) {
+            const mse = mses[i];
+            if (!mse.checkType(src, type)) continue;
+            mse.initMSE(src);
+            this.currentMSE = mse;
+            break; // 初始化直接跳过后续检查
+        }
+    }
+
+    private clearMSE () {
+        if (!this.currentMSE) return;
+        this.currentMSE.clearMSE();
+    }
+
     private initVideoComponents () {
         /* eslint-disable */
         (this.constructor as typeof TTPlayerVideo).videoComponentsCtor.forEach(ctor => {
             this.videoComponents.push(new ctor(this));
         });
-         /* eslint-enable */
+        /* eslint-enable */
     }
 
     private renderVideoComponents () {
@@ -114,6 +160,7 @@ export {
     TTPlayerVideoComponentCtor,
     TTPlayerVideoFactory,
     TTPlayerVideoOptions,
+    VideoMSE,
 };
 
 export default TTPlayerVideo;

packages/core/src/media/video/mse.ts

@@ -0,0 +1,29 @@
+import TTPlayerVideo from '.';
+
+interface IMSECtor {
+    new (video: TTPlayerVideo): MSE;
+}
+
+class MSE {
+
+    public video: TTPlayerVideo;
+    constructor (video: TTPlayerVideo) {
+        this.video = video;
+    }
+
+    checkType (url: string, type: string): boolean {
+        console.log(url, type);
+        return false;
+    }
+
+    initMSE (url: string, options?: any) {
+        console.log(url, options);
+    }
+
+    clearMSE () {}
+
+}
+
+export { IMSECtor };
+
+export default MSE;

packages/mse/README.md

@@ -0,0 +1,11 @@
+# `mse`
+
+> TODO: description
+
+## Usage
+
+```
+const mse = require('mse');
+
+// TODO: DEMONSTRATE API
+```

packages/video/package.json → packages/mse/package.json

@@ -1,16 +1,13 @@
 {
-  "name": "@dking/ttplayer-video",
+  "name": "@dking/ttplayer-mse",
   "version": "0.0.3",
-  "description": "ccplayer-video",
+  "description": "> TODO: description",
   "author": "cjw <[email protected]>",
   "homepage": "https://github.com/JohnApache/TT-Player#readme",
   "license": "MIT",
   "main": "./lib/index.js",
   "module": "./lib/index.esm.js",
   "typings": "./lib/index.d.ts",
-  "publishConfig": {
-    "access": "public"
-  },
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -22,13 +19,13 @@
     "type": "git",
     "url": "git+https://github.com/JohnApache/TT-Player.git"
   },
-  "scripts": {},
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
   "bugs": {
     "url": "https://github.com/JohnApache/TT-Player/issues"
   },
   "dependencies": {
-    "@dking/ttplayer-core": "^0.0.3",
-    "@dking/ttplayer-utils": "^0.0.3",
-    "eventemitter3": "^4.0.0"
+    "@dking/ttplayer-core": "^0.0.3"
   }
 }

packages/video/src/mse/dash/dash.d.ts → packages/mse/src/dash/dash.d.ts

@@ -980,4 +980,5 @@ declare namespace dashjs {
     export type MetricType = 'ManifestUpdate' | 'RequestsQueue';
     export type TrackSwitchMode = 'alwaysReplace' | 'neverReplace';
     export type TrackSelectionMode = 'highestBitrate' | 'widestRange';
-}
+}
+

packages/mse/src/dash/index.ts

@@ -0,0 +1,53 @@
+import { MediaPlayerClass } from './dash';
+import { VideoMSE, TTPlayerVideo } from '@dking/ttplayer-core';
+
+declare global {
+    interface Window {
+        dashjs: MediaPlayerClass;
+    }
+}
+
+class DashMSE extends VideoMSE {
+
+    static MSE_TYPE: string = 'dash';
+    public MSE_TYPE: string;
+    public __dash__: MediaPlayerClass | null = null;
+
+    constructor (video: TTPlayerVideo) {
+        super(video);
+        this.handleMSEError = this.handleMSEError.bind(this);
+        /* eslint-disable */
+        this.MSE_TYPE = (this.constructor as typeof DashMSE).MSE_TYPE || 'auto';
+        /* eslint-enable */
+    }
+
+    checkType (url: string, type: string = 'auto'): boolean {
+        if (type === this.MSE_TYPE) return true;
+        return type === 'auto' && !!(/.mpd(#|\?|$)/i).exec(url);
+    }
+
+    initMSE (url: string, dashOption?: any) {
+        const dashjs = window.dashjs;
+        if (!dashjs) throw new Error(`can't find dashjs`);
+        const dash = dashjs.MediaPlayer().create();
+        dashOption && dash.updateSettings(dashOption);
+        dash.initialize(this.video.mediaDom, url, false);
+        dash.on('error', this.handleMSEError);
+        this.__dash__ = dash;
+    }
+
+    clearMSE () {
+        if (this.__dash__) {
+            this.__dash__.off('error', this.handleMSEError);
+            this.__dash__.reset();
+        }
+        this.__dash__ = null;
+    }
+
+    private handleMSEError (error: any) {
+        this.video.event.emit('error', error);
+    }
+
+}
+
+export default DashMSE;

packages/mse/src/flv/index.ts

@@ -0,0 +1,64 @@
+import FlvJs from './flv';
+import { VideoMSE, TTPlayerVideo } from '@dking/ttplayer-core';
+
+declare global {
+    interface Window {
+        flvjs: typeof FlvJs;
+    }
+}
+
+class FlvMSE extends VideoMSE {
+
+    static MSE_TYPE: string = 'flv';
+    public MSE_TYPE: string;
+    public __flv__: FlvJs.Player | null = null;
+    constructor (video: TTPlayerVideo) {
+        super(video);
+        this.handleFlvError = this.handleFlvError.bind(this);
+        /* eslint-disable */
+        this.MSE_TYPE = (this.constructor as typeof FlvMSE).MSE_TYPE || 'auto';
+        /* eslint-enable */
+    }
+
+    checkType (url: string, type: string = 'auto'): boolean {
+        if (type === this.MSE_TYPE) return true;
+        return type === 'auto' && !!(/.flv(#|\?|$)/i).exec(url);
+    }
+
+    initMSE (url: string, flvjsOption?: any) {
+        const {
+            mediaDataSource = {},
+            config = {},
+        } = flvjsOption || {};
+        const flvjs = window.flvjs;
+        if (!flvjs) throw new Error(`can't find flvjs`);
+        if (!flvjs.isSupported()) throw new Error(`flv is not supported`);
+
+        const options = {
+            url : url,
+            type: 'flv',
+            ...mediaDataSource,
+        };
+
+        const flv = flvjs.createPlayer(options, config);
+        flv.attachMediaElement(this.video.mediaDom);
+        flv.load();
+        flv.on('error', this.handleFlvError);
+        this.__flv__ = flv;
+    }
+
+    clearMSE () {
+        if (this.__flv__) {
+            this.__flv__.off('error', this.handleFlvError);
+            this.__flv__.destroy();
+        }
+        this.__flv__ = null;
+    }
+
+    private handleFlvError (error: any) {
+        this.video.event.emit('error', error);
+    }
+
+}
+
+export default FlvMSE;