ps-tcplayer/src/plugins-manager.js

Tencent Cloud Player component with Vue2/Vue3 compatibility

/**
 * TCPlayer插件管理器
 * 负责组件的注册、初始化和生命周期管理
 */

// 添加到播放器的兼容层，确保组件需要的属性/方法存在
function addPlayerCompatLayer(player) {
  if (!player) return;
  
  if (!player.lang) {
    player.lang = function(key) {
      // 提供默认中文文案映射
      const langMap = {
        "Play": "播放",
        "Pause": "暂停",
        "Mute": "静音",
        "Unmute": "取消静音",
        "Fullscreen": "全屏",
        "Exit Fullscreen": "退出全屏",
        "Settings": "设置",
        "Speed": "速度",
        "Normal": "正常",
        "Quality": "质量",
        "Auto": "自动",
        "HD": "高清",
        "SD": "标清"
      };
      return langMap[key] || key;
    };
  }
  
  // 确保options_存在
  if (!player.options_) {
    player.options_ = player.options_ || {};
  }
  
  // 确保语言相关设置存在
  if (player.options_ && !player.options_.languages) {
    player.options_.languages = {
      'zh-CN': {
        "Play": "播放",
        "Pause": "暂停",
        "Mute": "静音",
        "Unmute": "取消静音",
        "Fullscreen": "全屏",
        "Exit Fullscreen": "退出全屏",
        "Settings": "设置",
        "Speed": "速度",
        "Normal": "正常",
        "Quality": "质量",
        "Auto": "自动",
        "HD": "高清",
        "SD": "标清"
      }
    };
    // 设置当前语言
    player.options_.language = 'zh-CN';
  }
}

/**
 * 注册组件到播放器实例
 * @param {Object} player - 播放器实例
 * @param {Array} plugins - 插件配置数组
 * @returns {Array} - 注册的组件实例数组
 */
function registerComponents(player, plugins) {
  if (!player) return [];
  
  const registeredComponents = [];
  
  try {
    if (!plugins || !Array.isArray(plugins)) return registeredComponents;
    
    plugins.forEach(plugin => {
      try {
        if (plugin.type && typeof plugin.type === 'function') {
          // 检查player对象是否有效
          if (!player || !player.el_) {
            console.warn('播放器实例不完整，跳过组件注册', plugin.name);
            return;
          }
          
          // 创建组件实例，注意捕获错误
          let componentInstance;
          try {
            componentInstance = new plugin.type(player, ...(plugin.args || []));
          } catch (initErr) {
            console.error(`组件 ${plugin.name} 初始化失败:`, initErr);
            return;
          }
          
          // 存储组件到播放器实例
          if (plugin.name) {
            if (!player._components) {
              player._components = {};
            }
            player._components[plugin.name] = componentInstance;
            registeredComponents.push(componentInstance);
            
            // 添加getComponent方法
            if (!player.getComponent) {
              player.getComponent = function(name) {
                return this._components && this._components[name];
              };
            }
            
            // 如果组件有createEl方法，则调用
            if (componentInstance.createEl && typeof componentInstance.createEl === 'function') {
              try {
                // 确保播放器元素存在
                if (player.el_ && player.el_.nodeType === 1) {
                  componentInstance.createEl(player.el_);
                } else {
                  console.warn(`组件 ${plugin.name} 跳过DOM创建，播放器元素不存在`);
                }
              } catch (elErr) {
                console.error(`组件 ${plugin.name} 创建DOM元素失败:`, elErr);
                console.log('组件:', componentInstance);
                console.log('错误详情:', elErr);
              }
            }
            
            // 如果组件有created方法，则调用
            if (componentInstance.created && typeof componentInstance.created === 'function') {
              try {
                componentInstance.created();
              } catch (createdErr) {
                console.error(`组件 ${plugin.name} created方法执行失败:`, createdErr);
              }
            }
          }
        }
      } catch (pluginErr) {
        console.error(`处理插件时发生错误:`, pluginErr);
      }
    });
  } catch (err) {
    console.error('注册组件错误:', err);
  }
  
  return registeredComponents;
}

/**
 * 初始化组件的ready方法
 * @param {Object} player - 播放器实例
 */
function initComponentsReadyState(player) {
  if (!player || !player._components) return;
  
  try {
    Object.values(player._components).forEach(component => {
      try {
        if (component.ready && typeof component.ready === 'function') {
          component.ready();
        }
      } catch (err) {
        console.error('组件ready方法执行失败:', err);
      }
    });
  } catch (err) {
    console.error('初始化组件ready状态失败:', err);
  }
}

/**
 * 销毁所有组件
 * @param {Object} player - 播放器实例
 */
function destroyComponents(player) {
  if (!player || !player._components) return;
  
  try {
    Object.values(player._components).forEach(component => {
      try {
        if (component.destroy && typeof component.destroy === 'function') {
          component.destroy();
        }
      } catch (err) {
        console.error('组件destroy方法执行失败:', err);
      }
    });
    
    // 清空组件列表
    player._components = {};
  } catch (err) {
    console.error('销毁组件失败:', err);
  }
}

// 导出插件管理器API
export default {
  addPlayerCompatLayer,
  registerComponents,
  initComponentsReadyState,
  destroyComponents
};