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

package/lib/hooks/usePlayerConnection.js

@@ -0,0 +1,320 @@
+import "core-js/modules/es.json.stringify.js";
+import { useCallback } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { publishDps, showToast, performanceEvent, getCurrentPages } from '@ray-js/ray';
+import Strings from '../i18n';
+import { getIsConnected, getIsOnPreview, getDpIdByDpCode, ipcTTTOperatorLog } from '../utils';
+/**
+ * 播放器连接相关逻辑的自定义 hook
+ */
+export const usePlayerConnection = _ref => {
+  let {
+    devId,
+    ipcCtx,
+    playState,
+    setPlayState,
+    setVideoErrCode,
+    onChangeStreamStatus,
+    onInitPreview,
+    playerRoute,
+    privateState,
+    isLowPowerDevice,
+    awakeStatus,
+    wirelessFlag,
+    setEnableWakeUpInterval,
+    setLowPrivateOutTimeFlag,
+    setMqttPrivateFlag,
+    privateLowPowerDeviceTimeOutRef,
+    privateWakeOutTimeRef,
+    firstPreviewTimeRef,
+    retryCount,
+    muteRef,
+    setMuted
+  } = _ref;
+  /**
+   * 获取当前页面路由
+   */
+  const getPlayerRoute = useCallback(() => {
+    const pages = getCurrentPages(); // 获取当前页面栈
+    const currentPage = pages[pages.length - 1]; // 获取当前页面实例
+    return currentPage.route;
+  }, []);
+
+  /**
+   * 重试连接
+   */
+  const _retry = useCallback(async () => {
+    console.log('调用了重试');
+    ipcTTTOperatorLog('VID: ipcCtx.isConnected');
+    const connectState = await getIsConnected(ipcCtx.current);
+    console.log('调用了重试--connectState');
+    const isOnPreview = await getIsOnPreview(ipcCtx.current);
+    console.log('调用了重试--isOnPreview');
+    setPlayState(d => {
+      d.connectState = !!connectState;
+      d.errorMsg = '';
+      d.errorState = false;
+      d.loadingState = !isOnPreview;
+    });
+    setVideoErrCode('');
+    ipcTTTOperatorLog("VID: start_create_p2p_connect");
+    ipcCtx.current && createConnect();
+  }, [ipcCtx, setPlayState, setVideoErrCode]);
+
+  /**
+   * 无需关心连接状态直接发起重新连接
+   */
+  const _reConnect = useCallback(() => {
+    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('');
+    ipcTTTOperatorLog("VID: start_create_p2p_connect");
+    ipcCtx.current && createConnect();
+  }, [playerRoute, getPlayerRoute, setPlayState, setVideoErrCode, ipcCtx]);
+
+  /**
+   * 关闭隐私模式，重新拉流
+   */
+  const handleReWakeCamera = useCallback(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('下发隐私模式成功');
+        }
+      });
+    }
+  }, [devId, setPlayState, setVideoErrCode]);
+
+  /**
+   * 低功耗设备关闭隐私模式，先判断设备是否唤醒，唤醒后才可下发隐私模式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;
+      });
+      handleReWakeCamera();
+      // 如果值为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 createConnect = useMemoizedFn(async params => {
+    var _ipcCtx$current;
+    if (playerRoute !== '' && playerRoute !== getPlayerRoute()) {
+      console.log('不在播放器路由内, 不进行连接操作');
+      return;
+    }
+    // 若走到连接状态，需清除低功耗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;
+    (_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;
+            }
+          });
+        }
+        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));
+        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 = useCallback(() => {
+    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)));
+      }
+    });
+  }, [ipcCtx, setMuted]);
+
+  /**
+   * 断开连接
+   */
+  const disconnect = useCallback(() => {
+    return new Promise((resolve, reject) => {
+      var _ipcCtx$current4;
+      (_ipcCtx$current4 = ipcCtx.current) === null || _ipcCtx$current4 === void 0 || _ipcCtx$current4.disconnect({
+        success: res => {
+          resolve(res);
+          setPlayState(d => {
+            d.connectState = false;
+          });
+          onChangeStreamStatus && onChangeStreamStatus(1009);
+        },
+        fail: e => {
+          reject(e);
+          onChangeStreamStatus && onChangeStreamStatus(-1009);
+        }
+      });
+    });
+  }, [ipcCtx, setPlayState, onChangeStreamStatus]);
+  return {
+    _retry,
+    _reConnect,
+    createConnect,
+    startPreview,
+    stopPreview,
+    disconnect,
+    handleReWakeCamera,
+    handleReWakeCameraLowPowerDevice,
+    getPlayerRoute
+  };
+};

package/lib/hooks/usePlayerProps.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 处理播放器 props 解构的自定义 hook
+ */
+export declare const usePlayerProps: any;

package/lib/hooks/usePlayerProps.js

@@ -0,0 +1,108 @@
+/**
+ * 处理播放器 props 解构的自定义 hook
+ */
+export const usePlayerProps = props => {
+  const {
+    updateLayout = '',
+    devId = '',
+    objectFit = 'contain',
+    onChangeStreamStatus,
+    onPlayerTap,
+    onZoomChange,
+    onCameraPreviewFailure,
+    onCameraNotifyWeakNetwork,
+    onInitPreview,
+    defaultMute = true,
+    onlineStatus = true,
+    loadText = '',
+    rotateZ = 0,
+    scalable = true,
+    scaleMultiple = 0,
+    ptzControllable = true,
+    clarity = 'normal',
+    ipcPlayerContext,
+    onCtx,
+    playerStyle = {
+      borderRadius: 0,
+      bgColor: '#000000',
+      borderStyle: 'solid',
+      borderColor: '',
+      borderWidth: 0
+    },
+    privateState = false,
+    extend = {},
+    brandColor = '#FF592A',
+    renderErrIcon,
+    isShare = false,
+    onPlayerContainerTap,
+    reConnect = false,
+    awakeStatus = undefined,
+    ignoreHideStopPreview = false,
+    onChangeIgnoreHideStopPreview,
+    hideSuggestedText = false,
+    hideHelpButton = false,
+    hideFeedBackButton = false,
+    playerRoute = '',
+    defaultAutoPlay = true,
+    limitFlow = false
+  } = props;
+
+  // 解构 playerStyle
+  const {
+    borderRadius,
+    bgColor,
+    borderStyle,
+    borderColor,
+    borderWidth
+  } = playerStyle;
+
+  // 计算衍生状态
+  const isLowPowerDevice = awakeStatus !== undefined;
+  return {
+    // 基础配置
+    updateLayout,
+    devId,
+    objectFit,
+    defaultMute,
+    onlineStatus,
+    loadText,
+    rotateZ,
+    scalable,
+    scaleMultiple,
+    ptzControllable,
+    clarity,
+    ipcPlayerContext,
+    privateState,
+    extend,
+    brandColor,
+    isShare,
+    reConnect,
+    awakeStatus,
+    ignoreHideStopPreview,
+    hideSuggestedText,
+    hideHelpButton,
+    hideFeedBackButton,
+    playerRoute,
+    defaultAutoPlay,
+    limitFlow,
+    // 样式相关
+    borderRadius,
+    bgColor,
+    borderStyle,
+    borderColor,
+    borderWidth,
+    // 计算属性
+    isLowPowerDevice,
+    // 回调函数
+    onChangeStreamStatus,
+    onPlayerTap,
+    onZoomChange,
+    onCameraPreviewFailure,
+    onCameraNotifyWeakNetwork,
+    onInitPreview,
+    onCtx,
+    renderErrIcon,
+    onPlayerContainerTap,
+    onChangeIgnoreHideStopPreview
+  };
+};

package/lib/i18n/index.d.ts

@@ -127,6 +127,10 @@ declare const _default: kit.I18N<{
         ipc_sim_err_system: string;
         ipc_sim_err_of_traffic: string;
         ipc_player_traffic_load_online_zero_tip: string;
+        ipc_player_traffic_load_offline_limit_tip: string;
+        ipc_player_recharge_flow_btn: string;
+        ipc_player_sleep_tip: string;
+        ipc_player_open_sleep_mode: string;
     };
     zh: {
         ipc_player_get_video_stream: string;
@@ -255,6 +259,10 @@ declare const _default: kit.I18N<{
         ipc_player_sim_err_system: string;
         ipc_player_sim_err_of_traffic: string;
         ipc_player_traffic_load_online_zero_tip: string;
+        ipc_player_traffic_load_offline_limit_tip: string;
+        ipc_player_recharge_flow_btn: string;
+        ipc_player_sleep_tip: string;
+        ipc_player_open_sleep_mode: string;
     };
 }, {
     ipc_player_get_video_stream: string;
@@ -383,6 +391,10 @@ declare const _default: kit.I18N<{
     ipc_sim_err_system: string;
     ipc_sim_err_of_traffic: string;
     ipc_player_traffic_load_online_zero_tip: string;
+    ipc_player_traffic_load_offline_limit_tip: string;
+    ipc_player_recharge_flow_btn: string;
+    ipc_player_sleep_tip: string;
+    ipc_player_open_sleep_mode: string;
 } | {
     ipc_player_get_video_stream: string;
     ipc_player_private_open_stream: string;
@@ -510,5 +522,9 @@ declare const _default: kit.I18N<{
     ipc_player_sim_err_system: string;
     ipc_player_sim_err_of_traffic: string;
     ipc_player_traffic_load_online_zero_tip: string;
+    ipc_player_traffic_load_offline_limit_tip: string;
+    ipc_player_recharge_flow_btn: string;
+    ipc_player_sleep_tip: string;
+    ipc_player_open_sleep_mode: string;
 }>;
 export default _default;

package/lib/i18n/strings.d.ts

@@ -126,6 +126,10 @@ declare const _default: {
         ipc_sim_err_system: string;
         ipc_sim_err_of_traffic: string;
         ipc_player_traffic_load_online_zero_tip: string;
+        ipc_player_traffic_load_offline_limit_tip: string;
+        ipc_player_recharge_flow_btn: string;
+        ipc_player_sleep_tip: string;
+        ipc_player_open_sleep_mode: string;
     };
     zh: {
         ipc_player_get_video_stream: string;
@@ -254,6 +258,10 @@ declare const _default: {
         ipc_player_sim_err_system: string;
         ipc_player_sim_err_of_traffic: string;
         ipc_player_traffic_load_online_zero_tip: string;
+        ipc_player_traffic_load_offline_limit_tip: string;
+        ipc_player_recharge_flow_btn: string;
+        ipc_player_sleep_tip: string;
+        ipc_player_open_sleep_mode: string;
     };
 };
 export default _default;

package/lib/i18n/strings.js

@@ -137,7 +137,11 @@ export default {
     // 4G流量
     ipc_sim_err_system: 'System freezes',
     ipc_sim_err_of_traffic: 'The current device has no data, please recharge first',
-    ipc_player_traffic_load_online_zero_tip: 'Insufficient traffic, Please recharge in time'
+    ipc_player_traffic_load_online_zero_tip: 'Insufficient traffic, Please recharge in time',
+    ipc_player_traffic_load_offline_limit_tip: 'Device offline. Please top up 4G data.',
+    ipc_player_recharge_flow_btn: 'Top up',
+    ipc_player_sleep_tip: 'The device is in sleep mode',
+    ipc_player_open_sleep_mode: 'Open'
   },
   zh: {
     ipc_player_get_video_stream: '正在获取视频流',
@@ -277,6 +281,10 @@ export default {
     // 4G流量
     ipc_player_sim_err_system: '系统冻结',
     ipc_player_sim_err_of_traffic: '当前设备已无流量,请尽快充值',
-    ipc_player_traffic_load_online_zero_tip: '可用流量额度不足，已关闭视频流，请及时充值流量'
+    ipc_player_traffic_load_online_zero_tip: '可用流量额度不足，已关闭视频流，请及时充值流量',
+    ipc_player_traffic_load_offline_limit_tip: '设备已离线，请及时充值4G流量',
+    ipc_player_recharge_flow_btn: '去充值',
+    ipc_player_sleep_tip: '设备处于休眠中',
+    ipc_player_open_sleep_mode: '开启'
   }
 };