zwplayer-react 1.0.0

package/lib/index.js

@@ -0,0 +1,591 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// zwplayer tools - dynamic script loader for React
+
+/**
+ * Dynamically load JavaScript file
+ * @param {string} id - Script element ID
+ * @param {string} url - Script URL
+ * @param {function} cb - Callback function when loaded
+ * @returns {boolean} - Whether script was already loaded
+ */
+const zwplayer_loadjs = function (id, url, cb) {
+  let headNode = document.getElementsByTagName("head");
+  if (headNode.length == 0) {
+    headNode = document.createElement("head");
+    let body = document.getElementsByTagName("body");
+    if (body.length > 0) {
+      body = body[0];
+      document.insertBefore(headNode, body);
+    } else {
+      alert('Invalid html document: no HEAD tag');
+      return false;
+    }
+  } else {
+    headNode = headNode[0];
+    const nodes = headNode.childNodes;
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      if (node.nodeName.toUpperCase() === 'SCRIPT') {
+        if (node.id && node.id == id) {
+          if (node.getAttribute('loadstate') != 'true') {
+            const checkLoad = function () {
+              if (node.getAttribute('loadstate') != 'true') {
+                setTimeout(checkLoad, 50);
+              } else {
+                if (typeof cb == 'function') cb(id);
+              }
+            };
+            setTimeout(checkLoad, 50);
+            return false;
+          }
+          if (typeof cb == 'function') cb(id);
+          return true;
+        }
+      }
+    }
+  }
+  const script = document.createElement("script");
+  script.type = "text/javascript";
+  if (script.readyState) {
+    // IE
+    script.onreadystatechange = function () {
+      if (script.readyState == "loaded" || script.readyState == "complete") {
+        script.onreadystatechange = null;
+        script.setAttribute('loadstate', 'true');
+        if (typeof cb == 'function') cb(id);
+      }
+    };
+  } else {
+    script.onload = function () {
+      script.setAttribute('loadstate', 'true');
+      script.setAttribute('charset', 'utf-8');
+      if (typeof cb == 'function') cb(id);
+    };
+  }
+  script.id = id;
+  script.src = url;
+  headNode.appendChild(script);
+  return false;
+};
+
+let useLocation = null;
+try {
+  if (require && require('react-router-dom')) {
+    useLocation = require('react-router-dom').useLocation;
+  }
+} catch (e) {
+  // react-router-dom 未安装，忽略
+}
+const zwplayer_js_def = '/zwplayer/zwplayer.js?v=3.6';
+const availabe_props = {
+  isLive: 'boolean',
+  useOldFlv: 'boolean',
+  useFlv: 'boolean',
+  streamtype: 'string',
+  hasAudio: 'boolean',
+  hasVideo: 'boolean',
+  xmc_url: 'string',
+  fixedControlbar: 'boolean',
+  nativecontrols: 'boolean',
+  infoButton: 'boolean',
+  speedButton: 'boolean',
+  optionButton: 'boolean',
+  snapshotButton: 'boolean',
+  chapterButton: 'boolean',
+  castButton: 'boolean',
+  zoomButton: 'boolean',
+  annotationButton: 'boolean',
+  enableDanmu: 'boolean',
+  useProgressTooltip: 'boolean',
+  hidePlayBtn: 'boolean',
+  disablePlayBtn: 'boolean',
+  disableSeek: 'boolean',
+  disableFullscreenWin: 'boolean',
+  disablePicInPic: 'boolean',
+  disableVolumeControl: 'boolean',
+  lostFocusPause: 'boolean',
+  autoSmallWindow: 'boolean',
+  localPlayback: 'boolean',
+  recordButton: 'boolean',
+  segmentButton: 'boolean',
+  disableMutedConfirm: 'boolean',
+  keepAudioWindow: 'boolean',
+  lang: 'string',
+  thumbnails: 'object',
+  annotation: 'object',
+  annotations: 'object',
+  watermark: 'object',
+  watermarks: 'object',
+  logo: 'object|string',
+  sendDanmu: 'function',
+  danmuBarId: 'string',
+  fluid: 'boolean',
+  poster: 'string',
+  ratio: 'string|number',
+  width: 'string|number',
+  height: 'string|number',
+  timeFormat: 'string',
+  translateApi: 'string',
+  defVolume: 'number',
+  hideControlbarTimeout: 'number'
+};
+const ZwPlayer = /*#__PURE__*/react.forwardRef((props, ref) => {
+  const playerRef = react.useRef(null);
+  const zwplayerInstance = react.useRef(null);
+  // 仅在安装了 react-router-dom 时使用 useLocation
+  const location = useLocation ? useLocation() : null;
+  const [playerId] = react.useState(() => {
+    const now = Date.now();
+    if (!window.nextZWPlayerId) {
+      window.nextZWPlayerId = 1000;
+    }
+    const id = `zwplayer-${window.nextZWPlayerId}-${now}`;
+    window.nextZWPlayerId++;
+    return props.nodeid || id;
+  });
+  const [oldMurl, setOldMurl] = react.useState(null);
+  const [isDestroying, setIsDestroying] = react.useState(false);
+
+  // Helper function to check type
+  const isTypeOf = (type, types) => {
+    if (types.indexOf('|') > 0) {
+      const typeList = types.split('|');
+      for (let i = 0; i < typeList.length; i++) {
+        if (type === typeList[i]) return true;
+      }
+      return false;
+    }
+    return type === types;
+  };
+
+  // Initialize player
+  react.useEffect(() => {
+    const zwplayer_js = props.zwplayerlib || zwplayer_js_def;
+    let danmuBarId = null; // 保存弹幕控制栏ID
+
+    // Set root element styles
+    if (playerRef.current) {
+      playerRef.current.style.width = '100%';
+      playerRef.current.style.height = '100%';
+      playerRef.current.style.margin = '0';
+      playerRef.current.style.padding = '0';
+    }
+    zwplayer_loadjs('zwplayer-core', zwplayer_js, jsid => {
+      if (!jsid) {
+        console.log('zwplayer_loadjs failed!');
+        return;
+      }
+
+      // 全局跟踪播放器实例，防止 StrictMode 重复创建
+      if (!window.__zwplayer_instances__) {
+        window.__zwplayer_instances__ = new Map();
+      }
+      const playerKey = playerId;
+
+      // 检查是否已经创建过播放器
+      // 只在 DOM 元素仍然存在时才复用实例
+      if (window.__zwplayer_instances__.has(playerKey)) {
+        const existingPlayer = window.__zwplayer_instances__.get(playerKey);
+
+        // 检查 DOM 元素是否还在文档中（防止路由切换后复用无效的实例）
+        const isDomInDocument = playerRef.current && document.body.contains(playerRef.current);
+        if (isDomInDocument && existingPlayer) {
+          console.log('⏭️ 播放器已存在，复用实例:', playerKey);
+          zwplayerInstance.current = existingPlayer;
+          return;
+        } else {
+          // DOM 元素不存在或已从文档移除，销毁旧实例并从缓存中移除
+          console.log('🧹 清理无效的播放器实例:', playerKey);
+          if (existingPlayer && typeof existingPlayer.destroy === 'function') {
+            try {
+              existingPlayer.destroy();
+            } catch (err) {
+              console.warn('销毁播放器实例时出错:', err);
+            }
+          }
+          window.__zwplayer_instances__.delete(playerKey);
+        }
+      }
+      let url = props.murl || '';
+      if (props.videoprop && typeof props.videoprop.url !== 'undefined') {
+        url = props.videoprop.url;
+      }
+      let videostyle = "width:100%;height:100%;";
+      if (props.videoprop && typeof props.videoprop.videostyle !== 'undefined') {
+        videostyle = props.videoprop.videostyle;
+      }
+      const params = {
+        url: url,
+        playerElm: playerRef.current,
+        videostyle: videostyle,
+        reconnect: props.reconnect !== undefined ? props.reconnect : true,
+        autoplay: props.autoplay !== undefined ? props.autoplay : true,
+        muted: props.muted,
+        controlbar: props.controlbar !== undefined ? props.controlbar : true,
+        useProgressTooltip: props.useProgressTooltip !== undefined ? props.useProgressTooltip : true,
+        onready: () => {
+          if (props.onready) props.onready(zwplayerInstance.current);
+        },
+        onnetclose: () => {
+          if (props.onnetclose) props.onnetclose(zwplayerInstance.current);
+          return true;
+        },
+        onFileSelected: event => {
+          if (props.onFileSelected) props.onFileSelected(event, zwplayerInstance.current);
+        },
+        onFileLoaded: event => {
+          if (props.onFileLoaded) props.onFileLoaded(event, zwplayerInstance.current);
+        },
+        onneterror: () => {
+          if (props.onneterror) props.onneterror(zwplayerInstance.current);
+        },
+        onmediaevent: event => {
+          if (props.onmediaevent) props.onmediaevent(event, zwplayerInstance.current);
+        }
+      };
+
+      // Add additional props from availabe_props
+      for (let prop in props) {
+        const propType = typeof props[prop];
+        if (prop in availabe_props && isTypeOf(propType, availabe_props[prop])) {
+          if (propType === 'object') params[prop] = JSON.parse(JSON.stringify(props[prop]));else params[prop] = props[prop];
+        }
+      }
+      console.log('🎬 创建新的播放器实例:', playerKey);
+      zwplayerInstance.current = new window.ZWPlayer(params);
+      window.__zwplayer_instances__.set(playerKey, zwplayerInstance.current);
+      if (params.danmuBarId) {
+        danmuBarId = params.danmuBarId; // 保存ID用于cleanup
+
+        // 使用全局变量跟踪已创建的弹幕控制栏
+        if (!window.__zwplayer_danmu_bars__) {
+          window.__zwplayer_danmu_bars__ = new Set();
+        }
+        const barKey = `${params.danmuBarId}`;
+
+        // 只有未创建过才创建
+        if (!window.__zwplayer_danmu_bars__.has(barKey)) {
+          console.log('✨ 创建新的弹幕控制栏:', barKey);
+          zwplayerInstance.current.buildDanmuControlbar(params.danmuBarId, 'react-zwp-danmubar');
+          window.__zwplayer_danmu_bars__.add(barKey);
+        } else {
+          console.log('⏭️ 弹幕控制栏已存在，跳过创建:', barKey);
+        }
+      }
+      setOldMurl(url);
+    });
+
+    // Cleanup on unmount
+    return () => {
+      console.log('🧹 组件卸载，清理播放器:', playerId);
+
+      // 获取播放器实例
+      const player = zwplayerInstance.current;
+
+      // ===== 第一步：先禁用所有访问 DOM 的函数（防止 ResizeObserver 回调） =====
+      const dangerousFunctions = ['updateResponsiveControlbar', 'updateSpeedMenuMaxHeight', 'setupThemeCompatibility', 'checkButtonState'];
+      dangerousFunctions.forEach(funcName => {
+        if (player && typeof player[funcName] === 'function') {
+          player[funcName] = function () {
+            console.debug(`🔒 已禁用函数 ${funcName}，防止访问已删除的 DOM`);
+          };
+        }
+      });
+
+      // ===== 第二步：断开 ResizeObserver（在 stop 之前） =====
+      if (player && player.responsiveControlbarObserver) {
+        try {
+          player.responsiveControlbarObserver.disconnect();
+          console.log('✅ responsiveControlbarObserver 已断开');
+        } catch (err) {
+          console.warn('断开 responsiveControlbarObserver 时出错:', err);
+        }
+        player.responsiveControlbarObserver = null;
+      }
+
+      // ===== 第三步：清理定时器（在 stop 之前） =====
+      if (player) {
+        // 清理 theme compatibility 定时器
+        if (player._themeCompatInterval) {
+          clearInterval(player._themeCompatInterval);
+          delete player._themeCompatInterval;
+          console.log('✅ _themeCompatInterval 已清除');
+        }
+
+        // 清理其他定时器
+        const timerProps = ['controlbarVisibilityTimer', 'hideControlbarTimer', 'overlayLayerClickTimer', 'toastTimerId', 'debounceTimer'];
+        timerProps.forEach(prop => {
+          if (player[prop]) {
+            clearTimeout(player[prop]);
+            player[prop] = null;
+          }
+        });
+      }
+
+      // ===== 第四步：stop() - 对应 Vue 的 beforeDestroy =====
+      // 现在所有定时器和观察器都已清理，可以安全调用 stop
+      if (player && typeof player.stop === 'function') {
+        try {
+          player.stop();
+          console.log('✅ 播放器已停止 (对应Vue beforeDestroy)');
+        } catch (err) {
+          console.warn('停止播放器时出错:', err);
+        }
+      }
+
+      // 从全局缓存中移除
+      if (window.__zwplayer_instances__) {
+        window.__zwplayer_instances__.delete(playerId);
+      }
+
+      // 销毁播放器实例（释放资源）
+      if (player && typeof player.destroy === 'function') {
+        try {
+          // ===== 第五步：清理 ResizeHandler（最后清理 resize 相关的对象） =====
+          if (player.playerContainer) {
+            try {
+              // 获取并清空 resize listeners
+              const listeners = player.playerContainer.__z_resizeListeners;
+              if (listeners && Array.isArray(listeners)) {
+                listeners.length = 0;
+                delete player.playerContainer.__z_resizeListeners;
+                console.log('✅ resizeListeners 已清空');
+              }
+
+              // 移除 resize detector object
+              const detector = player.playerContainer.__resizeDetector__;
+              if (detector && detector.parentNode === player.playerContainer) {
+                player.playerContainer.removeChild(detector);
+                delete player.playerContainer.__resizeDetector__;
+                console.log('✅ resizeDetector 已移除');
+              }
+            } catch (err) {
+              console.warn('清理 resize 对象时出错:', err);
+            }
+          }
+
+          // ===== 第六步：调用 destroy 方法 =====
+          player.destroy();
+          console.log('✅ 播放器实例已销毁:', playerId);
+
+          // ===== 第七步：最后的安全措施 =====
+          // 将 player 对象的所有方法设置为空函数，防止后续调用
+          Object.keys(player).forEach(key => {
+            if (typeof player[key] === 'function' && key !== 'destroy') {
+              player[key] = function () {};
+            }
+          });
+        } catch (err) {
+          console.warn('销毁播放器实例时出错:', err);
+        }
+      }
+
+      // 清理 ref 引用
+      zwplayerInstance.current = null;
+
+      // 清理弹幕控制栏并从全局记录中移除
+      if (danmuBarId) {
+        console.log('🧹 清理弹幕控制栏:', danmuBarId);
+        const danmuBar = document.getElementById(danmuBarId);
+        if (danmuBar) {
+          const controlBar = danmuBar.querySelector('.zwp-danmu-controlbar');
+          if (controlBar) {
+            controlBar.remove();
+          }
+        }
+
+        // 从全局记录中移除
+        if (window.__zwplayer_danmu_bars__) {
+          window.__zwplayer_danmu_bars__.delete(danmuBarId);
+        }
+      }
+    };
+  }, []); // Only run on mount
+
+  // 监听路由变化，提前禁用危险函数（使用 useLayoutEffect 确保在浏览器绘制前执行）
+  // 仅在使用 react-router-dom 时启用
+  react.useLayoutEffect(() => {
+    // 如果没有使用 react-router-dom，跳过路由监听
+    if (!location) {
+      return;
+    }
+    const player = zwplayerInstance.current;
+
+    // 当路由变化时，立即禁用可能访问 DOM 的函数
+    const disableDangerousFunctions = () => {
+      if (!player || isDestroying) return;
+      console.log('🔒 路由变化，提前禁用危险函数');
+      setIsDestroying(true);
+      const dangerousFunctions = ['updateResponsiveControlbar', 'updateSpeedMenuMaxHeight', 'setupThemeCompatibility', 'checkButtonState'];
+      dangerousFunctions.forEach(funcName => {
+        if (typeof player[funcName] === 'function') {
+          player[funcName] = function () {
+            // 空函数，什么都不做
+            console.debug(`🔒 函数 ${funcName} 已禁用（路由变化）`);
+          };
+        }
+      });
+
+      // 清理 debounceTimer
+      if (player.debounceTimer) {
+        clearTimeout(player.debounceTimer);
+        player.debounceTimer = null;
+      }
+    };
+
+    // 在路由即将变化时执行
+    disableDangerousFunctions();
+
+    // 清理时恢复标志
+    return () => {
+      setIsDestroying(false);
+    };
+  }, location ? [location.pathname] : []); // 仅在使用 react-router-dom 时监听路由变化
+
+  // Handle URL changes
+  react.useLayoutEffect(() => {
+    if (zwplayerInstance.current && props.murl && props.murl !== oldMurl) {
+      zwplayerInstance.current.play(props.murl);
+      setOldMurl(props.murl);
+    }
+  }, [props.murl, oldMurl]);
+
+  // Expose methods via ref
+  react.useImperativeHandle(ref, () => ({
+    play: (url, isLive, useOldFlv) => {
+      const playUrl = url || props.murl;
+      if (zwplayerInstance.current && playUrl) {
+        zwplayerInstance.current.play(playUrl, isLive, useOldFlv);
+      }
+    },
+    stop: () => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.stop();
+      }
+    },
+    pause: () => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.pause();
+      }
+    },
+    resume: () => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.resume();
+      }
+    },
+    getDuration: () => {
+      if (zwplayerInstance.current) {
+        return zwplayerInstance.current.getDuration();
+      }
+      return undefined;
+    },
+    getCurrentTime: () => {
+      if (zwplayerInstance.current) {
+        return zwplayerInstance.current.CurrentTime;
+      }
+      return undefined;
+    },
+    seekTime: time => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.seekTime(time);
+      }
+    },
+    destroy: () => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.destroy();
+      }
+    },
+    setplaystate: bPlaying => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.setplaystate(bPlaying);
+      }
+    },
+    setEnableDanmu: bEnable => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.setEnableDanmu(bEnable);
+      }
+    },
+    appendDanmu: (msgObj, setting) => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.appendDanmu(msgObj, setting);
+      }
+    },
+    setChapters: chapters => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.setChapters(chapters);
+      }
+    },
+    addSubtitle: (subtitleUrl, pos, title) => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.addSubtitle(subtitleUrl, pos, title);
+      }
+    },
+    loadSubtitle: (subtitleUrl, pos, title) => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.loadSubtitle(subtitleUrl, pos, title);
+      }
+    },
+    removeSubtitle: () => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.removeSubtitle();
+      }
+    },
+    buildDanmuControlbar: (parentId, className) => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.buildDanmuControlbar(parentId, className);
+      }
+    },
+    notifyResize: (width, height) => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.notifyResize(width, height);
+      }
+    },
+    setMute: bMute => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.setMuted(bMute);
+      }
+    },
+    setullscr: bFullScr => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.is_fullscr = bFullScr;
+        zwplayerInstance.current.setFullscreen(bFullScr);
+      }
+    },
+    lightOff: () => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.lightOff();
+      }
+    },
+    lightOn: () => {
+      if (zwplayerInstance.current) {
+        zwplayerInstance.current.lightOn();
+      }
+    },
+    get CurrentTime() {
+      if (zwplayerInstance.current) {
+        return zwplayerInstance.current.CurrentTime;
+      }
+      return -1;
+    },
+    get player() {
+      return zwplayerInstance.current;
+    }
+  }));
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: playerRef,
+    id: playerId,
+    className: "zwplayer-react",
+    style: props.style || {}
+  });
+});
+ZwPlayer.displayName = 'ZwPlayer';
+
+exports.ZwPlayer = ZwPlayer;
+exports.default = ZwPlayer;
+exports.zwplayer_loadjs = zwplayer_loadjs;

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "zwplayer-react",
+  "version": "1.0.0",
+  "description": "A React wrapper for ZWPlayer video player - lightweight, feature-rich web video player component",
+  "main": "lib/index.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "files": [
+    "lib",
+    "zwplayerlib",
+    "scripts",
+    "README.md",
+    "USAGE.md",
+    "PUBLISH_GUIDE.md",
+    "QUICK_START.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs",
+    "prepublishOnly": "npm run build",
+    "postinstall": "node scripts/install.js",
+    "init": "node scripts/install.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "video",
+    "player",
+    "html5",
+    "hls",
+    "flv",
+    "dash",
+    "video-player",
+    "zwplayer",
+    "media-player",
+    "streaming"
+  ],
+  "author": "sl",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-router-dom": "^5.0.0 || ^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-router-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-react": "^7.22.0",
+    "rollup": "^3.29.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-node-resolve": "^15.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4"
+  }
+}