add screenfull.js

packages/artplayer/package.json

@@ -1,7 +1,7 @@
 {
     "license": "MIT",
     "name": "artplayer",
-    "version": "4.5.3",
+    "version": "4.5.4",
     "main": "dist/artplayer.js",
     "types": "types/artplayer.d.ts",
     "homepage": "https://artplayer.org",

packages/artplayer/src/libs/screenfull.js

@@ -0,0 +1,153 @@
+const methodMap = [
+    [
+        'requestFullscreen',
+        'exitFullscreen',
+        'fullscreenElement',
+        'fullscreenEnabled',
+        'fullscreenchange',
+        'fullscreenerror',
+    ],
+    // New WebKit
+    [
+        'webkitRequestFullscreen',
+        'webkitExitFullscreen',
+        'webkitFullscreenElement',
+        'webkitFullscreenEnabled',
+        'webkitfullscreenchange',
+        'webkitfullscreenerror',
+    ],
+    // Old WebKit
+    [
+        'webkitRequestFullScreen',
+        'webkitCancelFullScreen',
+        'webkitCurrentFullScreenElement',
+        'webkitCancelFullScreen',
+        'webkitfullscreenchange',
+        'webkitfullscreenerror',
+    ],
+    [
+        'mozRequestFullScreen',
+        'mozCancelFullScreen',
+        'mozFullScreenElement',
+        'mozFullScreenEnabled',
+        'mozfullscreenchange',
+        'mozfullscreenerror',
+    ],
+    [
+        'msRequestFullscreen',
+        'msExitFullscreen',
+        'msFullscreenElement',
+        'msFullscreenEnabled',
+        'MSFullscreenChange',
+        'MSFullscreenError',
+    ],
+];
+
+const nativeAPI = (() => {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+
+    const unprefixedMethods = methodMap[0];
+    const returnValue = {};
+
+    for (const methodList of methodMap) {
+        const exitFullscreenMethod = methodList[1];
+        if (exitFullscreenMethod in document) {
+            for (const [index, method] of methodList.entries()) {
+                returnValue[unprefixedMethods[index]] = method;
+            }
+
+            return returnValue;
+        }
+    }
+
+    return false;
+})();
+
+const eventNameMap = {
+    change: nativeAPI.fullscreenchange,
+    error: nativeAPI.fullscreenerror,
+};
+
+let screenfull = {
+    request(element = document.documentElement, options) {
+        return new Promise((resolve, reject) => {
+            const onFullScreenEntered = () => {
+                screenfull.off('change', onFullScreenEntered);
+                resolve();
+            };
+
+            screenfull.on('change', onFullScreenEntered);
+
+            const returnPromise = element[nativeAPI.requestFullscreen](options);
+
+            if (returnPromise instanceof Promise) {
+                returnPromise.then(onFullScreenEntered).catch(reject);
+            }
+        });
+    },
+    exit() {
+        return new Promise((resolve, reject) => {
+            if (!screenfull.isFullscreen) {
+                resolve();
+                return;
+            }
+
+            const onFullScreenExit = () => {
+                screenfull.off('change', onFullScreenExit);
+                resolve();
+            };
+
+            screenfull.on('change', onFullScreenExit);
+
+            const returnPromise = document[nativeAPI.exitFullscreen]();
+
+            if (returnPromise instanceof Promise) {
+                returnPromise.then(onFullScreenExit).catch(reject);
+            }
+        });
+    },
+    toggle(element, options) {
+        return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options);
+    },
+    onchange(callback) {
+        screenfull.on('change', callback);
+    },
+    onerror(callback) {
+        screenfull.on('error', callback);
+    },
+    on(event, callback) {
+        const eventName = eventNameMap[event];
+        if (eventName) {
+            document.addEventListener(eventName, callback, false);
+        }
+    },
+    off(event, callback) {
+        const eventName = eventNameMap[event];
+        if (eventName) {
+            document.removeEventListener(eventName, callback, false);
+        }
+    },
+    raw: nativeAPI,
+};
+
+Object.defineProperties(screenfull, {
+    isFullscreen: {
+        get: () => Boolean(document[nativeAPI.fullscreenElement]),
+    },
+    element: {
+        enumerable: true,
+        get: () => document[nativeAPI.fullscreenElement],
+    },
+    isEnabled: {
+        enumerable: true,
+        get: () => Boolean(document[nativeAPI.fullscreenEnabled]),
+    },
+});
+
+if (!nativeAPI) {
+    screenfull = { isEnabled: false };
+}
+
+export default screenfull;

packages/artplayer/src/player/fullscreenMix.js

@@ -1,4 +1,4 @@
-import screenfull from 'screenfull';
+import screenfull from '../libs/screenfull';
 import { addClass, removeClass, def, get } from '../utils';
 
 export default function fullscreenMix(art) {