@ray-js/ray-ipc-player 2.0.31 → 2.1.0-beta.2

package/lib/index.js

@@ -1,75 +1,68 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "core-js/modules/es.json.stringify.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 /* eslint-disable no-unneeded-ternary */
 import React, { useState, useEffect, useRef } from 'react';
 import { useImmer } from 'use-immer';
-import _isEmpty from 'lodash/isEmpty';
-import { IpcPlayer, View, CoverView } from '@ray-js/components';
-import { useMount, useUnmount, useMemoizedFn } from 'ahooks';
-import { setPageOrientation, usePageEvent, useAppEvent, getNetworkType, offNetworkStatusChange, onNetworkStatusChange, publishDps, showToast, getSystemInfoSync, onMqttMessageReceived, registerMQTTProtocolListener, offMqttMessageReceived, unregisterMQTTProtocolListener, registerDeviceListListener, onDpDataChange, onDeviceOnlineStatusUpdate, performanceEvent, getCurrentPages } from '@ray-js/ray';
-import clsx from 'clsx';
+import { IpcPlayer, View } from '@ray-js/components';
+import { useMemoizedFn } from 'ahooks';
+import { setPageOrientation, usePageEvent, useAppEvent, getNetworkType, offNetworkStatusChange, onNetworkStatusChange, publishDps, showToast, getSystemInfoSync, onMqttMessageReceived, registerMQTTProtocolListener, offMqttMessageReceived, unregisterMQTTProtocolListener, registerDeviceListListener, onDpDataChange, onDeviceOnlineStatusUpdate } from '@ray-js/ray';
 import Strings from './i18n';
 import { IpcFailCode } from './constant';
-import { useWakeUpDevice } from './hooks';
-import { getIsConnected, getIsOnPreview, openTargetMinByShortLink, getLanguage, getHomeInfo, getDeviceInfo, getDpIdByDpCode, ipcTTTOperatorLog } from './utils';
-import { getErrCodeDetailDataByCode, codeCoverToInt } from './config/errCodeConfig';
-import { deviceFreezeReasonStore, miniIdLabs } from './config';
+import { useWakeUpDevice, usePlayerProps, usePlayerConnection } from './hooks';
+import { getDpIdByDpCode, ipcTTTOperatorLog } from './utils';
+import { LoadingOverlay, ErrorOverlay, FullScreenBackButton } from './components';
 import './index.less';
 const CSS_PREFIX = 'ray-ipc-player';
 
 // 生成带前缀的类名
 const getClassName = className => "".concat(CSS_PREFIX, "-").concat(className);
 const Player = props => {
+  // 使用自定义 hook 处理 props 解构
   const {
-    updateLayout = '',
-    devId = '',
-    objectFit = 'contain',
+    updateLayout,
+    devId,
+    objectFit,
     onChangeStreamStatus,
     onPlayerTap,
     onZoomChange,
     onCameraPreviewFailure,
     onCameraNotifyWeakNetwork,
     onInitPreview,
-    defaultMute = true,
-    onlineStatus = true,
-    loadText = '',
-    rotateZ = 0,
-    scalable = true,
-    scaleMultiple = 0,
-    ptzControllable = true,
-    clarity = 'normal',
+    defaultMute,
+    onlineStatus,
+    loadText,
+    rotateZ,
+    scalable,
+    scaleMultiple,
+    ptzControllable,
+    clarity,
     ipcPlayerContext,
     onCtx,
-    playerStyle = {
-      borderRadius: 0,
-      bgColor: '#000000',
-      borderStyle: 'solid',
-      borderColor: '',
-      borderWidth: 0
-    },
-    privateState = false,
-    extend = {},
-    brandColor = '#FF592A',
+    privateState,
+    extend,
+    brandColor,
     renderErrIcon,
-    isShare = false,
+    isShare,
     onPlayerContainerTap,
-    reConnect = false,
-    awakeStatus = undefined,
-    ignoreHideStopPreview = false,
+    reConnect,
+    awakeStatus,
+    ignoreHideStopPreview,
     onChangeIgnoreHideStopPreview,
-    hideSuggestedText = false,
-    hideHelpButton = false,
-    hideFeedBackButton = false,
-    playerRoute = ''
-  } = props;
-  const {
+    hideSuggestedText,
+    hideHelpButton,
+    hideFeedBackButton,
+    playerRoute,
+    defaultAutoPlay,
+    limitFlow,
     borderRadius,
     bgColor,
     borderStyle,
     borderColor,
-    borderWidth
-  } = playerStyle;
+    borderWidth,
+    isLowPowerDevice
+  } = usePlayerProps(props);
   const [playState, setPlayState] = useImmer({
     connectState: false,
     // 连接状态
@@ -101,10 +94,15 @@ const Player = props => {
   const privateLowPowerDeviceTimeOutRef = useRef(null);
   const privateWakeOutTimeRef = useRef(null);
   const privateDeviceWakeNeedPublishTimeRef = useRef(null);
+  // 内部维护首次组件渲染时，自动播放状态，一旦调用重试，触发拉流后，将其状态设为true
+  const [autoPlay, setAutoPlay] = useState(defaultAutoPlay);
+
   // connectChangeRef
   useRef(null);
   const firstPreviewTimeRef = useRef(false);
-  const [isLowPowerDevice] = useState(awakeStatus !== undefined);
+
+  // 标记是否进入内存缓存/后台（onPause、onHide 设为 true，onShow 还原为 false），拉流时若为 true 则拦截
+  const isInBackgroundRef = useRef(false);
 
   // 自定义计时老低功耗方案设备在线状态, 用于短暂时间报上下线的UI展示兼容 待实现
   const [lowPowerDeviceOnlineState, setLowPowerDeviceOnlineState] = useState(onlineStatus);
@@ -114,8 +112,6 @@ const Player = props => {
   const [device4GIsFreeze, setDevice4GIsFreeze] = useState(false);
   // 4G设备冻结原因, 待实现
   const [deviceFreezeReason, setDeviceFreezeReason] = useState(1);
-  // 4G设备流量是否不足
-  const [trafficLessOrEqualZero, setTrafficLessOrEqualZero] = useState(false);
   // 手机连接网络状态
   const [phoneNetworkConnect, setPhoneNetworkConnect] = useState(true);
   const ipcCtx = useRef(null); // ipc实例
@@ -127,7 +123,56 @@ const Player = props => {
   const retryCount = useRef(0); // 重试次数
   const muteRef = useRef(defaultMute); // 静音
 
+  /**
+   * 设置声音
+   */
+
+  // 使用连接相关的 hook
+  const {
+    _retry,
+    _reConnect,
+    stopPreview,
+    disconnect,
+    handleReWakeCamera,
+    handleReWakeCameraLowPowerDevice,
+    getPlayerRoute
+  } = usePlayerConnection({
+    devId,
+    ipcCtx,
+    playState,
+    setPlayState,
+    setVideoErrCode,
+    onChangeStreamStatus,
+    onInitPreview,
+    playerRoute,
+    privateState,
+    isLowPowerDevice,
+    awakeStatus,
+    wirelessFlag,
+    setEnableWakeUpInterval,
+    setLowPrivateOutTimeFlag,
+    setMqttPrivateFlag,
+    privateLowPowerDeviceTimeOutRef,
+    privateWakeOutTimeRef,
+    firstPreviewTimeRef,
+    retryCount,
+    muteRef,
+    setMuted: val => {
+      var _ipcCtx$current;
+      ipcTTTOperatorLog("VID: begin_to_set_mute");
+      (_ipcCtx$current = ipcCtx.current) === null || _ipcCtx$current === void 0 || _ipcCtx$current.setMuted({
+        mute: val,
+        success: () => {
+          ipcTTTOperatorLog("VID: set_mute_success: ".concat(val));
+        },
+        fail: () => {
+          ipcTTTOperatorLog("VID: set_mute_failure: ".concat(val));
+        }
+      });
+    }
+  });
   usePageEvent('onShow', useMemoizedFn(async () => {
+    isInBackgroundRef.current = false;
     getNetworkType({
       success: res => {
         console.log('网络类型', res);
@@ -143,7 +188,7 @@ const Player = props => {
       return;
     }
     // 视图准备就绪
-    if (phoneNetworkConnect && playState.initLy && ipcCtx.current && onlineStatus && !privateState) {
+    if (phoneNetworkConnect && playState.initLy && ipcCtx.current && onlineStatus && !privateState && !limitFlow && autoPlay) {
       ipcTTTOperatorLog('VID: onShow_event_to_retry');
       retry();
     }
@@ -162,6 +207,24 @@ const Player = props => {
       setScreenType(type);
     }
   });
+
+  // 针对limitFlow
+  useEffect(() => {
+    if (limitFlow || !autoPlay) {
+      setPlayState(d => {
+        return _objectSpread(_objectSpread({}, d), {}, {
+          loadingState: false,
+          errorState: true,
+          errorMessage: ''
+        });
+      });
+      ipcTTTOperatorLog("limitFlow ~~~~ ".concat(limitFlow, " autoPlay ~~~ ").concat(autoPlay));
+      if (playState.initLy && ipcCtx.current) {
+        stopPreview();
+        disconnect();
+      }
+    }
+  }, [limitFlow, autoPlay, playState.initLy, ipcCtx.current]);
   useEffect(() => {
     registerDeviceListListener({
       deviceIdList: [devId],
@@ -192,6 +255,8 @@ const Player = props => {
     onDpDataChange(handleDpDataChange);
   }, []);
   usePageEvent('onHide', useMemoizedFn(async () => {
+    isInBackgroundRef.current = true;
+    ipcTTTOperatorLog('VID: onHide event will go to stopPreview');
     if (ignoreHideStopPreview) {
       return;
     }
@@ -203,27 +268,12 @@ const Player = props => {
     // await getCurMute();
   }));
   useAppEvent('onPause', useMemoizedFn(async () => {
+    isInBackgroundRef.current = true;
     console.log('onPause, 重新拉流');
     ipcTTTOperatorLog('VID: onPause stopPreview');
     stopPreview();
     disconnect();
   }));
-  useMount(() => {
-    onNetworkStatusChange(res => {
-      setPhoneNetworkConnect(res.isConnected);
-      if (!res.isConnected) {
-        // 断网，需要主动调用断流以及断开P2P
-        ipcTTTOperatorLog('VID: network is not connected, need stop preview and disconnect');
-        stopPreview();
-        disconnect();
-      }
-    });
-  });
-  useUnmount(() => {
-    offNetworkStatusChange(res => {
-      console.log(res);
-    });
-  });
   const handleDpDataChange = useMemoizedFn(res => {
     if (res.deviceId === devId) {
       const dpsInfo = res.dps;
@@ -277,7 +327,8 @@ const Player = props => {
   });
 
   /**
-   * 监听mqtt
+   * 监听mqtt协议消息
+   * 主要用于低功耗设备的唤醒状态监听
    */
   useEffect(() => {
     registerMQTTProtocolListener({
@@ -299,6 +350,31 @@ const Player = props => {
     };
   }, []);
 
+  /**
+   * 监听网络状态变化
+   * 组件挂载时开始监听，网络断开时主动停流和断开连接
+   * 组件卸载时移除监听器
+   */
+  useEffect(() => {
+    const handleNetworkStatusChange = res => {
+      setPhoneNetworkConnect(res.isConnected);
+      if (!res.isConnected) {
+        // 断网，需要主动调用断流以及断开P2P
+        ipcTTTOperatorLog('VID: network is not connected, need stop preview and disconnect');
+        stopPreview();
+        disconnect();
+      }
+    };
+
+    // 开始监听网络状态变化
+    onNetworkStatusChange(handleNetworkStatusChange);
+
+    // 清理函数：组件卸载时移除网络状态监听器
+    return () => {
+      offNetworkStatusChange(handleNetworkStatusChange);
+    };
+  }, [stopPreview, disconnect]);
+
   /**
    *  唤醒设备TTT能力
    */
@@ -307,13 +383,23 @@ const Player = props => {
     enabled: enableWakeUpInterval,
     intervalTime: 300
   });
+
+  /**
+   * 监听设备休眠状态变化
+   * 当检测到设备上报休眠后，触发重新连接
+   */
   useEffect(() => {
-    if (wirelessFlag) {
+    if (wirelessFlag && !isInBackgroundRef.current) {
       // 进入面板后，若监听到设备上报休眠后, 需进行重新连接
       setWirelessFlag(false);
       _reConnect();
     }
-  }, [wirelessFlag]);
+  }, [wirelessFlag, _reConnect]);
+
+  /**
+   * 初始化获取网络类型
+   * 组件挂载时主动获取一次当前网络状态
+   */
   useEffect(() => {
     getNetworkType({
       success: res => {
@@ -326,18 +412,29 @@ const Player = props => {
       }
     });
   }, []);
+
+  /**
+   * IPC实例生命周期管理
+   * 当设备在线且devId变化时创建IPC实例
+   * 组件卸载时断开连接并清理实例
+   */
   useEffect(() => {
     onlineStatus && createIpcCtx();
     return () => {
       disconnect();
       ipcCtx.current = null;
     };
-  }, [devId, onlineStatus]);
+  }, [devId, onlineStatus, disconnect]);
+
+  /**
+   * 外部重连指令处理
+   * 当接收到外部重连指令且设备在线时，触发重新连接
+   */
   useEffect(() => {
-    if (reConnect && devId && onlineStatus) {
+    if (reConnect && devId && onlineStatus && !isInBackgroundRef.current) {
       _reConnect();
     }
-  }, [reConnect]);
+  }, [reConnect, devId, onlineStatus, _reConnect]);
   useEffect(() => {
     muteRef.current = defaultMute;
   }, [defaultMute]);
@@ -361,10 +458,19 @@ const Player = props => {
         console.log('监听到设备离线');
         setPlayState(d => {
           d.errorState = true;
-          d.errorMsg = Strings.getLang('ipc_player_device_offline');
+          d.errorMsg = limitFlow ? Strings.getLang('ipc_player_traffic_load_offline_limit_tip') : Strings.getLang('ipc_player_device_offline');
+        });
+      } else if (!autoPlay) {
+        setPlayState(d => {
+          d.errorState = true;
+          d.errorMsg = '设备处于休眠中';
+        });
+      } else if (limitFlow) {
+        setPlayState(d => {
+          d.errorState = true;
+          d.errorMsg = Strings.getLang('ipc_player_traffic_load_online_zero_tip');
         });
       } else if (playState.initLy && !privateState) {
-        console.log('sdhjsahdjshajdh');
         ipcTTTOperatorLog("VID: privateState_status_change: ".concat(privateState));
         retry();
       } else if (playState.initLy && privateState) {
@@ -373,139 +479,10 @@ const Player = props => {
         onChangeStreamStatus && onChangeStreamStatus(-1001);
       }
     }
-  }, [phoneNetworkConnect, onlineStatus, playState.initLy, privateState]);
-
-  // 重试
-  const _retry = async () => {
-    console.log('调用了重试');
-    const connectState = await getIsConnected(ipcCtx.current);
-    console.log('调用了重试--connectState');
-    const isOnPreview = await getIsOnPreview(ipcCtx.current);
-    console.log('调用了重试--isOnPreview');
-    setPlayState(d => {
-      d.connectState = connectState ? true : false;
-      d.errorMsg = '';
-      d.errorState = false;
-      d.loadingState = isOnPreview ? false : true;
-    });
-    setVideoErrCode('');
-    // !prePlayRef.current && connectState && (await disconnect());
-    // console.log(connectState, isOnPreview, '当前链接状态和预览状态');
-    ipcTTTOperatorLog("VID: start_create_p2p_connect");
-    ipcCtx.current && createConnect();
-  };
-
-  // 无需关心连接状态直接发起重新连接
-  const _reConnect = () => {
-    console.log('不在播放器路由内, 不进行标记');
-    //  排除默认值为"",不等于播放器路由时, 不进行连接操作
-    if (playerRoute !== '' && playerRoute !== getPlayerRoute()) {
-      return;
-    }
-    setPlayState(d => {
-      d.connectState = true;
-      d.loadingText = Strings.getLang('ipc_player_get_video_stream');
-      d.errorMsg = '';
-      d.errorState = false;
-      d.loadingState = true;
-    });
-    setVideoErrCode('');
-    // !prePlayRef.current && connectState && (await disconnect());
-    // console.log(connectState, isOnPreview, '当前链接状态和预览状态');
-    ipcTTTOperatorLog("VID: start_create_p2p_connect");
-    ipcCtx.current && createConnect();
-  };
-
-  /**
-   * 关闭隐私模式，重新拉流
-   */
-  const handleReWakeCamera = async () => {
-    setPlayState(d => {
-      d.connectState = true;
-      d.errorMsg = '';
-      d.loadingText = Strings.getLang('ipc_player_private_open_stream');
-      d.errorState = false;
-      d.loadingState = true;
-    });
-    setVideoErrCode('');
-    const sendDpId = await getDpIdByDpCode(devId, 'basic_private');
-    if (sendDpId === -1) {
-      showToast(Strings.getLang('ipc_player_basic_private_not_exist'));
-    } else {
-      publishDps({
-        deviceId: devId,
-        dps: {
-          [sendDpId]: false
-        },
-        mode: 1,
-        pipelines: [0, 1, 2, 3, 4, 5, 6],
-        options: {},
-        success: () => {
-          console.log('下发隐私模式成功');
-        }
-      });
-    }
-  };
-
-  /**
-   *
-   * 低功耗设备关闭隐私模式，先判断设备是否唤醒，唤醒后才可下发隐私模式DP
-   */
-
-  const handleReWakeCameraLowPowerDevice = useMemoizedFn(() => {
-    setVideoErrCode('');
-    setLowPrivateOutTimeFlag(false);
-    if (awakeStatus) {
-      setPlayState(d => {
-        d.connectState = true;
-        d.errorMsg = '';
-        d.loadingText = Strings.getLang('ipc_player_private_open_stream');
-        d.errorState = false;
-        d.loadingState = true;
-      });
-      // 如果值为true, 表示设备为唤醒状态，直接下发隐私模式DP
-      handleReWakeCamera();
-    } else {
-      setPlayState(d => {
-        d.connectState = true;
-        d.errorMsg = '';
-        d.loadingText = Strings.getLang('ipc_player_private_open_low_stream');
-        d.errorState = false;
-        d.loadingState = true;
-      });
-      // 如果值为false, 表示设备为睡眠状态，需要唤醒设备
-      setMqttPrivateFlag(true);
-      setEnableWakeUpInterval(true);
-      // 2秒后停止下发唤醒, 防止频繁唤醒, 此时若Mqtt监听到1协议，也会停止下发唤醒
-      privateLowPowerDeviceTimeOutRef.current = setTimeout(() => {
-        setEnableWakeUpInterval(false);
-        // 清除定时器
-        privateLowPowerDeviceTimeOutRef.current && clearTimeout(privateLowPowerDeviceTimeOutRef.current);
-      }, 2000);
-
-      // 15 秒后若设备还是未唤醒，未监听到Mqtt消息以及唤醒Dp上报, 则提示报错
-      privateWakeOutTimeRef.current = setTimeout(() => {
-        // 清除定时器
-        privateLowPowerDeviceTimeOutRef.current && clearTimeout(privateWakeOutTimeRef.current);
-        setPlayState(d => {
-          d.connectState = false;
-          d.errorMsg = Strings.getLang('ipc_player_private_open_low_stream_fail');
-          d.errorState = true;
-          d.loadingState = false;
-        });
-        setMqttPrivateFlag(false);
-        setLowPrivateOutTimeFlag(true);
-      }, 15000);
-    }
-  });
-  const getPlayerRoute = () => {
-    const pages = getCurrentPages(); // 获取当前页面栈
-    const currentPage = pages[pages.length - 1]; // 获取当前页面实例
-    return currentPage.route;
-  };
+  }, [phoneNetworkConnect, onlineStatus, playState.initLy, privateState, limitFlow, autoPlay]);
   const retry = useMemoizedFn(() => {
     console.log('重新拉流启动');
-
+    setAutoPlay(true);
     // 任何重试拉流时, 将播放器状态还原为loading状态
     setVideoErrCode('');
     setPlayState(d => {
@@ -519,6 +496,11 @@ const Player = props => {
       console.log('不在播放器路由内, 不进行拉流');
       return;
     }
+    if (isInBackgroundRef.current) {
+      console.log('处于后台/内存缓存，拦截拉流');
+      ipcTTTOperatorLog('VID: isInBackground, block retry');
+      return;
+    }
     phoneNetworkConnect && onlineStatus && privateState && (!isLowPowerDevice || isVirtualDevice) && handleReWakeCamera();
 
     // 低功耗设备隐私模式需单独处理，先进行下发唤醒, 唤醒后再进行下发DP
@@ -535,149 +517,8 @@ const Player = props => {
     });
   };
 
-  // 建立连接
-  const createConnect = useMemoizedFn(async params => {
-    var _ipcCtx$current;
-    if (playerRoute !== '' && playerRoute !== getPlayerRoute()) {
-      console.log('不在播放器路由内, 不进行连接操作');
-      return;
-    }
-    // console.log('建立连接前:', devId, Date.now());
-    // 若走到连接状态，需清除低功耗15秒超时定时
-    privateLowPowerDeviceTimeOutRef.current && clearTimeout(privateWakeOutTimeRef.current);
-    setLowPrivateOutTimeFlag(false);
-    // 表示为 149 低功耗设备, 唤醒设备
-    if (isLowPowerDevice) {
-      // 下发唤醒
-      setEnableWakeUpInterval(true);
-    }
-    (_ipcCtx$current = ipcCtx.current) === null || _ipcCtx$current === void 0 || _ipcCtx$current.connect({
-      success: () => {
-        ipcTTTOperatorLog("VID: create_p2p_connect_success");
-        // 清除唤醒定时器
-        setEnableWakeUpInterval(false);
-        setPlayState(d => {
-          d.connectState = true;
-          d.loadingText = Strings.getLang('ipc_player_get_video_stream');
-          d.errorState = false;
-          d.errorMsg = '';
-        });
-        onChangeStreamStatus && onChangeStreamStatus(1001);
-        ipcTTTOperatorLog("VID: start_to_preview");
-        startPreview(params);
-      },
-      fail: () => {
-        // 清除唤醒定时器
-        setEnableWakeUpInterval(false);
-        ipcTTTOperatorLog("VID: create_p2p_connect_failure");
-        // 针对进入面板上报149状态的为true的设备直接忽略
-        if (!wirelessFlag) {
-          setPlayState(d => {
-            d.connectState = false;
-            d.errorState = true;
-            d.errorMsg = Strings.getLang('ipc_player_connect_fail');
-            d.loadingState = false;
-          });
-          onChangeStreamStatus && onChangeStreamStatus(-1001);
-        }
-      }
-    });
-  });
-
   // 视图层准备就绪，开始建立连接
 
-  /*
-   * 开启预览
-   */
-  const startPreview = useMemoizedFn(params => {
-    var _ipcCtx$current2;
-    // console.log('开启预览前');
-    (_ipcCtx$current2 = ipcCtx.current) === null || _ipcCtx$current2 === void 0 || _ipcCtx$current2.startPreview({
-      success: () => {
-        ipcTTTOperatorLog('VID: start_preview_success');
-        if (typeof performanceEvent === 'function' && !firstPreviewTimeRef.current) {
-          performanceEvent({
-            launchData: '出流成功耗时',
-            success: () => {
-              firstPreviewTimeRef.current = true;
-            }
-          });
-        }
-
-        // console.log('开启预览：', devId);
-        setPlayState(d => {
-          d.loadingState = false;
-          d.errorState = false;
-          d.errorMsg = '';
-        });
-        setMuted(muteRef.current);
-        params && onInitPreview && onInitPreview(devId);
-        onChangeStreamStatus && onChangeStreamStatus(1002);
-      },
-      fail: async e => {
-        ipcTTTOperatorLog("VID: start_preview_fail: ".concat(JSON.stringify(e)));
-        const isOnPreview = await getIsOnPreview(ipcCtx.current);
-        ipcTTTOperatorLog("VID: get_is_on_preview_status_".concat(isOnPreview));
-        // console.error('开启失败：', e, devId, isOnPreview);
-        if (isOnPreview || e !== null && e !== void 0 && e.errorMsg.includes('doing preview')) {
-          // 忽略重复预览异常的报错
-          setPlayState(d => {
-            d.loadingState = false;
-            d.errorState = false;
-            d.errorMsg = '';
-          });
-          setMuted(muteRef.current);
-          onChangeStreamStatus && onChangeStreamStatus(1002);
-          return;
-        }
-        // 针对进入到面板，接收到上报为设备休眠的情况直接忽略
-        if (!wirelessFlag) {
-          setPlayState(d => {
-            d.errorState = true;
-            d.loadingState = false;
-            d.errorMsg = Strings.getLang('ipc_player_preview_fail');
-          });
-          onChangeStreamStatus && onChangeStreamStatus(-1002);
-        }
-      }
-    });
-  });
-
-  /**
-   * 暂停预览
-   */
-  const stopPreview = () => {
-    var _ipcCtx$current3;
-    ipcTTTOperatorLog("VID: begin_to_stop_preview");
-    ipcTTTOperatorLog("VID: set_mute_is_true");
-    setMuted(true);
-    (_ipcCtx$current3 = ipcCtx.current) === null || _ipcCtx$current3 === void 0 || _ipcCtx$current3.stopPreview({
-      success: () => {
-        ipcTTTOperatorLog("VID: stop_preview_success");
-      },
-      fail: e => {
-        ipcTTTOperatorLog("VID: stop_preview_failure: ".concat(JSON.stringify(e)));
-      }
-    });
-  };
-
-  /**
-   * 设置声音
-   */
-  const setMuted = val => {
-    var _ipcCtx$current4;
-    ipcTTTOperatorLog("VID: begin_to_set_mute");
-    (_ipcCtx$current4 = ipcCtx.current) === null || _ipcCtx$current4 === void 0 || _ipcCtx$current4.setMuted({
-      mute: val,
-      success: () => {
-        ipcTTTOperatorLog("VID: set_mute_success: ".concat(val));
-      },
-      fail: () => {
-        ipcTTTOperatorLog("VID: set_mute_failure: ".concat(val));
-      }
-    });
-  };
-
   /**
    * 获取当前是否静音
    */
@@ -745,29 +586,6 @@ const Player = props => {
     }
   });
 
-  // 断开连接
-  const disconnect = () => {
-    return new Promise((resolve, reject) => {
-      var _ipcCtx$current6;
-      // console.log('断开连接前');
-      (_ipcCtx$current6 = ipcCtx.current) === null || _ipcCtx$current6 === void 0 || _ipcCtx$current6.disconnect({
-        success: res => {
-          // console.log('断开连接成功：', devId);
-          resolve(res);
-          setPlayState(d => {
-            d.connectState = false;
-          });
-          onChangeStreamStatus && onChangeStreamStatus(1009);
-        },
-        fail: e => {
-          // console.error('断开连接失败：', devId);
-          reject(e);
-          onChangeStreamStatus && onChangeStreamStatus(-1009);
-        }
-      });
-    });
-  };
-
   /**
    * 播放器容器点击事件
    */
@@ -789,7 +607,7 @@ const Player = props => {
    */
 
   const handleCameraPreviewFailure = useMemoizedFn(data => {
-    console.log(data, 'data======');
+    console.log(data, 'handleCameraPreviewFailure');
     ipcTTTOperatorLog("cameraPreviewFailure_event_trigger_".concat(JSON.stringify(data)));
     if (data.type === 'cameraPreviewFailure' && !privateState) {
       // 隐私模式时不展示错误
@@ -811,181 +629,6 @@ const Player = props => {
       }
     }
   });
-
-  /**
-   * 获取错误展示内容
-   */
-  const getErrorContent = useMemoizedFn(() => {
-    if (!phoneNetworkConnect) {
-      return Strings.getLang('ipc_player_network_fail');
-    }
-    if (!onlineStatus) {
-      return Strings.getLang('ipc_player_device_offline');
-    }
-    if (!isLowPowerDevice && onlineStatus && privateState) {
-      return Strings.getLang('ipc_player_device_sleep');
-    }
-
-    // 低功耗隐私模式正常唤醒
-    if (isLowPowerDevice && lowPowerDeviceOnlineState && privateState && !lowPrivateOutTimeFlag) {
-      return Strings.getLang('ipc_player_device_sleep');
-    }
-    // 低功耗隐私模式正常唤醒，下发指令失败
-    if (isLowPowerDevice && lowPowerDeviceOnlineState && privateState && !lowPrivateOutTimeFlag) {
-      return Strings.getLang('ipc_player_private_open_low_stream_fail');
-    }
-    if (!isLowPowerDevice && device4GIsFreeze && onlineStatus && !privateState) {
-      return deviceFreezeReasonStore[deviceFreezeReason];
-    }
-    if (isLowPowerDevice && device4GIsFreeze && lowPowerDeviceOnlineState && !privateState) {
-      return deviceFreezeReasonStore[deviceFreezeReason];
-    }
-    if (onlineStatus && trafficLessOrEqualZero) {
-      return Strings.getLang('ipc_player_traffic_load_online_zero_tip');
-    }
-
-    // if (isLowPowerDevice && lowPowerDeviceOnlineState) {
-    //   return Strings.getLang('ipc_player_traffic_load_online_zero_tip');
-    // }
-
-    if (!onlineStatus) {
-      return Strings.getLang('ipc_player_no_line');
-    }
-    if (videoErrCode !== '') {
-      if (Strings["ipc_player_error_".concat(codeCoverToInt(videoErrCode))]) {
-        return "".concat(Strings.getLang("ipc_player_error_".concat(codeCoverToInt(videoErrCode))), "(").concat(videoErrCode, ")");
-      }
-      return "".concat(Strings.getLang("ipc_player_error_common"), "(").concat(videoErrCode, ")");
-    }
-    return playState.errorMsg;
-  });
-
-  /**
-   * 根据自定义类型获取错误码展示内容
-   */
-
-  const getErrorContentByType = useMemoizedFn((errCode, type) => {
-    const errContent = getErrCodeDetailDataByCode(String(errCode));
-    const contentEmpty = _isEmpty(errContent);
-    switch (type) {
-      // 是否展示建议文案
-      case 'suggestedFlag':
-        if (hideSuggestedText) {
-          return false;
-        }
-        if (contentEmpty) {
-          return false;
-        }
-        return errContent.suggestedText !== '';
-
-      // 建议文案
-      case 'suggestedText':
-        if (contentEmpty || privateState) {
-          return '';
-        }
-        return errContent.suggestedText;
-      // 是否展示点我重试
-      case 'retry':
-        if (!phoneNetworkConnect) {
-          return false;
-        }
-        if (!isLowPowerDevice && !onlineStatus) {
-          return false;
-        }
-        if (isLowPowerDevice && !lowPowerDeviceOnlineState) {
-          return false;
-        }
-        if (privateState && !isShare && !device4GIsFreeze) {
-          return true;
-        }
-        if (privateState && isShare) {
-          return false;
-        }
-
-        // 设备4G冻结，冻结原因为特殊情况下，展示retry
-        if (device4GIsFreeze && onlineStatus && !privateState && deviceFreezeReason === 1) {
-          return true;
-        }
-        if (contentEmpty || privateState) {
-          return true;
-        }
-        return errContent.try;
-      // 是否展示点我重试
-      case 'retryText':
-        if (privateState) {
-          return Strings.getLang('ipc_player_re_wake_camera');
-        }
-        return Strings.getLang('ipc_player_retry');
-      case 'help':
-        if (hideHelpButton) {
-          return false;
-        }
-        if (!phoneNetworkConnect || privateState) {
-          return false;
-        }
-        if (isLowPowerDevice && lowPowerDeviceOnlineState) {
-          return false;
-        }
-        if (isLowPowerDevice && !lowPowerDeviceOnlineState) {
-          return true;
-        }
-        if (!isLowPowerDevice && !onlineStatus) {
-          return true;
-        }
-        if (privateState && isShare) {
-          return false;
-        }
-        if (contentEmpty) {
-          return false;
-        }
-        return errContent.help;
-      case 'helpNum':
-        if (privateState && isShare) {
-          return false;
-        }
-        return errContent.helpNum;
-      case 'feedBack':
-        if (hideFeedBackButton) {
-          return false;
-        }
-        if (!phoneNetworkConnect) {
-          return true;
-        }
-        if (privateState) {
-          return false;
-        }
-        if (contentEmpty) {
-          return false;
-        }
-        return errContent.feedBack;
-      default:
-        return false;
-    }
-  });
-
-  /**
-   * 跳转帮助小程序
-   */
-  const handleGotoHelpMini = useMemoizedFn(async () => {
-    if (isLowPowerDevice && !lowPowerDeviceOnlineState || !onlineStatus) {
-      const realLanguage = await getLanguage();
-      const url = "godzilla://".concat(miniIdLabs.helpMini, "/pages/commonDetails/index?answer=/app-helpcenter/").concat(realLanguage, "/K94ow0gwu9bg2");
-      openTargetMinByShortLink(url);
-      return false;
-    }
-    const helpNum = getErrorContentByType(videoErrCode, 'helpNum');
-    const helpFeedBack = getErrorContentByType(videoErrCode, 'helpFeedBack');
-    const homeInfo = await getHomeInfo();
-    const devInfo = await getDeviceInfo(devId);
-    const url = "godzilla://".concat(miniIdLabs.ipcHelpMini, "?errCode=").concat(videoErrCode, "&deviceId=").concat(devId, "&homeId=").concat(homeInfo === null || homeInfo === void 0 ? void 0 : homeInfo.homeId, "&instanceId=").concat(devInfo === null || devInfo === void 0 ? void 0 : devInfo.uuid, "&helpNum=").concat(helpNum, "&helpFeedBack=").concat(helpFeedBack, "&themeColor=").concat(brandColor);
-    openTargetMinByShortLink(url);
-    return false;
-  });
-
-  /**
-   * 跳转反馈小程序
-   */
-
   return /*#__PURE__*/React.createElement(View, {
     className: getClassName('ipc-player'),
     onClick: () => {
@@ -1022,61 +665,47 @@ const Player = props => {
     borderColor: borderColor,
     borderWidth: borderWidth,
     backgroundColor: bgColor
-  }, extend)), /*#__PURE__*/React.createElement(CoverView, {
-    style: {
-      borderRadius: "".concat(borderRadius)
-    },
-    className: clsx(getClassName('load-box'), getClassName('bg-center'), !playState.loadingState && getClassName('hide')),
-    onClick: () => {
-      return false;
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    className: getClassName('load-icon')
-  }), /*#__PURE__*/React.createElement(View, {
-    className: getClassName('load-des')
-  }, loadText || playState.loadingText || Strings.getLang('ipc_player_get_video_stream'))), /*#__PURE__*/React.createElement(CoverView, {
-    style: {
-      borderRadius: "".concat(borderRadius)
-    },
-    className: clsx(getClassName('bg-center'), getClassName('error-container'), !playState.errorState && getClassName('hide')),
-    onClick: () => {
-      return false;
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    className: clsx(getClassName('err-icon-container'))
-  }, renderErrIcon ? renderErrIcon() : /*#__PURE__*/React.createElement(View, {
-    className: clsx(getClassName('err-icon'))
-  })), /*#__PURE__*/React.createElement(View, {
-    className: clsx(getClassName('err-text-container'))
-  }, /*#__PURE__*/React.createElement(View, {
-    className: clsx(getClassName('err-content'))
-  }, getErrorContent()), getErrorContentByType(videoErrCode, 'suggestedFlag') && /*#__PURE__*/React.createElement(View, {
-    className: clsx(getClassName('err-desc'))
-  }, getErrorContentByType(videoErrCode, 'suggestedText'))), /*#__PURE__*/React.createElement(View, {
-    className: clsx(getClassName('err-operator-container'))
-  }, getErrorContentByType(videoErrCode, 'retry') && /*#__PURE__*/React.createElement(View, {
-    className: clsx(getClassName('operator-btn'), getClassName('operator-retry')),
-    style: {
-      backgroundColor: "".concat(brandColor)
-    },
-    onClick: retry
-  }, getErrorContentByType(videoErrCode, 'retryText')), getErrorContentByType(videoErrCode, 'help') && /*#__PURE__*/React.createElement(View, {
-    className: clsx(getClassName('operator-btn'), getClassName('operator-help')),
-    onClick: handleGotoHelpMini
-  }, Strings.getLang('ipc_player_help')), getErrorContentByType(videoErrCode, 'feedBack') && /*#__PURE__*/React.createElement(View, {
-    className: clsx(getClassName('operator-btn'), getClassName('operator-feedback')),
-    onClick: () => {
-      const url = "godzilla://".concat(miniIdLabs.helpMini, "/pages/v2/problemSubmit/index");
-      openTargetMinByShortLink(url);
-    }
-  }, Strings.getLang('ipc_player_feedback')))), screenType === 'landscape' && (playState.loadingState || playState.errorState) && /*#__PURE__*/React.createElement(CoverView, {
-    className: clsx(getClassName('load-full-back-container')),
-    onClick: () => {
+  }, extend)), /*#__PURE__*/React.createElement(LoadingOverlay, {
+    isLoading: playState.loadingState,
+    loadingText: loadText || playState.loadingText,
+    borderRadius: borderRadius,
+    getClassName: getClassName
+  }), /*#__PURE__*/React.createElement(ErrorOverlay, {
+    devId: devId,
+    isError: playState.errorState,
+    videoErrCode: videoErrCode,
+    borderRadius: borderRadius,
+    brandColor: brandColor,
+    getClassName: getClassName,
+    renderErrIcon: renderErrIcon,
+    onRetry: retry,
+    phoneNetworkConnect: phoneNetworkConnect,
+    onlineStatus: onlineStatus,
+    privateState: privateState,
+    isLowPowerDevice: isLowPowerDevice,
+    lowPowerDeviceOnlineState: lowPowerDeviceOnlineState,
+    lowPrivateOutTimeFlag: lowPrivateOutTimeFlag,
+    device4GIsFreeze: device4GIsFreeze,
+    deviceFreezeReason: deviceFreezeReason,
+    playStateErrorMsg: playState.errorMsg,
+    hideSuggestedText: hideSuggestedText,
+    hideHelpButton: hideHelpButton,
+    hideFeedBackButton: hideFeedBackButton,
+    isShare: isShare,
+    limitFlow: limitFlow,
+    autoPlay: autoPlay
+  }), /*#__PURE__*/React.createElement(FullScreenBackButton, {
+    isVisible: screenType === 'landscape' && (playState.loadingState || playState.errorState),
+    getClassName: getClassName,
+    onBackFullScreen: () => {
       setScreenType('portrait');
       setPageOrientation({
         pageOrientation: 'portrait',
         success: () => {
-          // setScreenType('portrait');
+          console.log('Landscape mode exited successfully');
+        },
+        fail: () => {
+          console.log('Failed to exit landscape mode');
         }
       });
     }