Optimize code size for WebView & VideoPlayer and fix type issues. (#1…

…8240)

* Optimize code size for WebView & VideoPlayer and fix type issues.

* Remove mangle tag for VideoPlayerImpl & WebViewImpl since they're used in js file in platforms directory.

* Fix errors in VideoPlayer.js and jsb-webview.js

cocos/video/video-player-impl-web.ts

@@ -32,21 +32,24 @@ import { VideoPlayerImpl } from './video-player-impl';
 import { ClearFlagBit } from '../gfx';
 import { BrowserType, OS } from '../../pal/system-info/enum-type';
 import { ccwindow } from '../core/global-exports';
+import type { VideoPlayer } from './video-player';
+import type { VideoClip } from './assets/video-clip';
 
 const ccdocument = ccwindow.document;
 
 const MIN_ZINDEX = -(2 ** 15);
 
 const _mat4_temp = mat4();
 
+/** @mangle */
 export class VideoPlayerImplWeb extends VideoPlayerImpl {
     protected _eventList: Map<string, ((e: Event) => void)> = new Map();
 
     // use stay on bottom
     protected _clearColorA = -1;
     protected _clearFlag;
 
-    constructor (component) {
+    constructor (component: VideoPlayer) {
         super(component);
     }
 
@@ -108,7 +111,7 @@ export class VideoPlayerImplWeb extends VideoPlayerImpl {
         }
     }
 
-    public syncClip (clip: any): void {
+    public syncClip (clip: VideoClip | null): void {
         this.removeVideoPlayer();
         if (!clip) { return; }
         this.createVideoPlayer(clip.nativeUrl);
@@ -171,8 +174,11 @@ export class VideoPlayerImplWeb extends VideoPlayerImpl {
 
     canFullScreen (enabled: boolean): void {
         // NOTE: below we visited some non-standard web interfaces to complement browser compatibility
-        // we need to mark video as any type.
-        const video = this._video as any;
+        const video = this._video as HTMLVideoElement & {
+            webkitEnterFullscreen?: () => void;
+            webkitExitFullscreen?: () => void;
+            webkitDisplayingFullscreen: boolean;
+        };
         if (!video || video.readyState !== READY_STATE.HAVE_ENOUGH_DATA) {
             return;
         }

cocos/video/video-player-impl.ts

@@ -24,12 +24,13 @@
 
 import { legacyCC } from '../core/global-exports';
 import { UITransform } from '../2d/framework';
-import { VideoPlayer } from './video-player';
 import { VideoPlayerEventType } from './video-player-enums';
 import { error } from '../core/platform';
 import { director } from '../game/director';
 import { Node } from '../scene-graph';
 import type { Camera } from '../render-scene/scene';
+import type { VideoPlayer } from './video-player';
+import type { VideoClip } from './assets/video-clip';
 
 export abstract class VideoPlayerImpl {
     protected _componentEventList: Map<string, () => void> = new Map();
@@ -71,7 +72,7 @@ export abstract class VideoPlayerImpl {
     protected _m12 = 0;
     protected _m13 = 0;
 
-    constructor (component) {
+    constructor (component: VideoPlayer) {
         this._component = component;
         this._node = component.node;
         this._uiTrans = component.node.getComponent(UITransform);
@@ -107,7 +108,7 @@ export abstract class VideoPlayerImpl {
     public abstract disable(noPause?: boolean): void;
 
     // synchronizing video player data
-    public abstract syncClip(clip: any): void;
+    public abstract syncClip(clip: VideoClip | null): void;
     public abstract syncURL(url: string): void;
     public abstract syncStayOnBottom(enabled: boolean): void;
     public abstract syncKeepAspectRatio(enabled: boolean): void;
@@ -225,18 +226,19 @@ export abstract class VideoPlayerImpl {
         }
     }
 
-    protected dispatchEvent (key): void {
+    protected dispatchEvent (key: string): void {
         const callback = this._componentEventList.get(key);
         if (callback) {
-            this._state = key;
+            this._state = key as VideoPlayerEventType;
             callback.call(this);
         }
     }
 
-    protected syncUITransform (width, height): void {
-        if (this._uiTrans) {
-            this._uiTrans.width = width;
-            this._uiTrans.height = height;
+    protected syncUITransform (width: number, height: number): void {
+        const uiTrans = this._uiTrans;
+        if (uiTrans) {
+            uiTrans.width = width;
+            uiTrans.height = height;
         }
     }
 

cocos/video/video-player.ts

@@ -397,14 +397,15 @@ export class VideoPlayer extends Component {
         this._impl = VideoPlayerImplManager.getImpl(this);
         this.syncSource();
 
-        this._impl.componentEventList.set(VideoPlayerEventType.META_LOADED, this.onMetaLoaded.bind(this));
-        this._impl.componentEventList.set(VideoPlayerEventType.READY_TO_PLAY, this.onReadyToPlay.bind(this));
-        this._impl.componentEventList.set(VideoPlayerEventType.PLAYING, this.onPlaying.bind(this));
-        this._impl.componentEventList.set(VideoPlayerEventType.PAUSED, this.onPaused.bind(this));
-        this._impl.componentEventList.set(VideoPlayerEventType.STOPPED, this.onStopped.bind(this));
-        this._impl.componentEventList.set(VideoPlayerEventType.COMPLETED, this.onCompleted.bind(this));
-        this._impl.componentEventList.set(VideoPlayerEventType.ERROR, this.onError.bind(this));
-        this._impl.componentEventList.set(VideoPlayerEventType.CLICKED, this.onClicked.bind(this));
+        const { componentEventList } = this._impl;
+        componentEventList.set(VideoPlayerEventType.META_LOADED, this.onMetaLoaded.bind(this));
+        componentEventList.set(VideoPlayerEventType.READY_TO_PLAY, this.onReadyToPlay.bind(this));
+        componentEventList.set(VideoPlayerEventType.PLAYING, this.onPlaying.bind(this));
+        componentEventList.set(VideoPlayerEventType.PAUSED, this.onPaused.bind(this));
+        componentEventList.set(VideoPlayerEventType.STOPPED, this.onStopped.bind(this));
+        componentEventList.set(VideoPlayerEventType.COMPLETED, this.onCompleted.bind(this));
+        componentEventList.set(VideoPlayerEventType.ERROR, this.onError.bind(this));
+        componentEventList.set(VideoPlayerEventType.CLICKED, this.onClicked.bind(this));
         if (this._playOnAwake && this._impl.loaded) {
             this.play();
         }

cocos/web-view/web-view-impl-manager.ts

@@ -23,11 +23,12 @@
 */
 
 import { legacyCC } from '../core/global-exports';
+import type { WebView } from './web-view';
 import { WebViewImplWeb } from './web-view-impl-web';
 
 export class WebViewImplManager {
     // default web
-    static getImpl (component): WebViewImplWeb {
+    static getImpl (component: WebView): WebViewImplWeb {
         return new WebViewImplWeb(component);
     }
 }

cocos/web-view/web-view-impl-web.ts

@@ -30,13 +30,15 @@ import { game } from '../game';
 import { mat4 } from '../core/math';
 import { contains } from '../core/utils/misc';
 import { ccwindow } from '../core/global-exports';
+import type { WebView } from './web-view';
 
 const ccdocument = ccwindow.document;
 
 const _mat4_temp = mat4();
 
+/** @mangle */
 export class WebViewImplWeb extends WebViewImpl {
-    constructor (component: any) {
+    constructor (component: WebView) {
         super(component);
     }
 

cocos/web-view/web-view.ts

@@ -170,10 +170,11 @@ export class WebView extends Component {
             return;
         }
         this._impl = WebViewImplManager.getImpl(this);
+        const { componentEventList } = this._impl;
         // must be register the event listener
-        this._impl.componentEventList.set(WebViewEventType.LOADING, this.onLoading.bind(this));
-        this._impl.componentEventList.set(WebViewEventType.LOADED, this.onLoaded.bind(this));
-        this._impl.componentEventList.set(WebViewEventType.ERROR, this.onError.bind(this));
+        componentEventList.set(WebViewEventType.LOADING, this.onLoading.bind(this));
+        componentEventList.set(WebViewEventType.LOADED, this.onLoaded.bind(this));
+        componentEventList.set(WebViewEventType.ERROR, this.onError.bind(this));
         this._impl.loadURL(this._url);
     }