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

package/lib/components/ErrorOverlay.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+interface ErrorOverlayProps {
+    isError: boolean;
+    videoErrCode: string | number;
+    borderRadius: number;
+    brandColor: string;
+    getClassName: (className: string) => string;
+    renderErrIcon?: () => React.ReactNode;
+    onRetry: () => void;
+    phoneNetworkConnect: boolean;
+    onlineStatus: boolean;
+    privateState: boolean;
+    isLowPowerDevice: boolean;
+    lowPowerDeviceOnlineState: boolean;
+    lowPrivateOutTimeFlag: boolean;
+    device4GIsFreeze: boolean;
+    deviceFreezeReason: number;
+    playStateErrorMsg: string;
+    devId: string;
+    hideSuggestedText: boolean;
+    hideHelpButton: boolean;
+    hideFeedBackButton: boolean;
+    isShare: boolean;
+    limitFlow: boolean;
+    autoPlay: boolean;
+}
+declare const ErrorOverlay: React.FC<ErrorOverlayProps>;
+export default ErrorOverlay;

package/lib/components/ErrorOverlay.js

@@ -0,0 +1,293 @@
+import React, { useMemo, useCallback } from 'react';
+import { View, CoverView } from '@ray-js/components';
+import clsx from 'clsx';
+import _isEmpty from 'lodash/isEmpty';
+import { getServiceUrl } from '@ray-js/ray-ipc-utils';
+import Strings from '../i18n';
+import { openTargetMinByShortLink, getLanguage, getHomeInfo, getDeviceInfo } from '../utils';
+import { getErrCodeDetailDataByCode, codeCoverToInt } from '../config/errCodeConfig';
+import { deviceFreezeReasonStore, miniIdLabs } from '../config';
+const ErrorOverlay = _ref => {
+  let {
+    isError,
+    videoErrCode,
+    borderRadius,
+    brandColor,
+    getClassName,
+    renderErrIcon,
+    onRetry,
+    phoneNetworkConnect,
+    onlineStatus,
+    privateState,
+    isLowPowerDevice,
+    lowPowerDeviceOnlineState,
+    lowPrivateOutTimeFlag,
+    device4GIsFreeze,
+    deviceFreezeReason,
+    playStateErrorMsg,
+    devId,
+    hideSuggestedText,
+    hideHelpButton,
+    hideFeedBackButton,
+    isShare,
+    limitFlow,
+    autoPlay
+  } = _ref;
+  /**
+   * 获取错误展示内容
+   */
+  const getErrorContent = useMemo(() => {
+    if (!phoneNetworkConnect) {
+      return Strings.getLang('ipc_player_network_fail');
+    }
+
+    // 离线&流量不足
+    if (!onlineStatus && limitFlow) {
+      return Strings.getLang('ipc_player_traffic_load_offline_limit_tip');
+    }
+    if (!onlineStatus) {
+      return Strings.getLang('ipc_player_device_offline');
+    }
+
+    // 在线&流量不足
+    if (onlineStatus && limitFlow) {
+      return Strings.getLang('ipc_player_traffic_load_online_zero_tip');
+    }
+
+    // 未自动播放
+    if (!autoPlay) {
+      return Strings.getLang('ipc_player_sleep_tip');
+    }
+    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 (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 playStateErrorMsg;
+  }, [phoneNetworkConnect, onlineStatus, privateState, isLowPowerDevice, lowPowerDeviceOnlineState, lowPrivateOutTimeFlag, device4GIsFreeze, deviceFreezeReason, limitFlow, autoPlay, videoErrCode, playStateErrorMsg]);
+
+  /**
+   * 根据自定义类型获取错误码展示内容
+   */
+  const getErrorContentByType = useCallback((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 (limitFlow) {
+          return true;
+        }
+        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 (limitFlow) {
+          return Strings.getLang('ipc_player_recharge_flow_btn');
+        }
+        if (!autoPlay) {
+          return Strings.getLang('ipc_player_open_sleep_mode');
+        }
+        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;
+    }
+  }, [hideSuggestedText, privateState, limitFlow, phoneNetworkConnect, isLowPowerDevice, onlineStatus, lowPowerDeviceOnlineState, isShare, device4GIsFreeze, deviceFreezeReason, hideHelpButton, hideFeedBackButton]);
+
+  /**
+   * 跳转4G流量充值页面
+   */
+  const handleGotoTrafficRecharge = useCallback(async () => {
+    const result = await getServiceUrl(devId, 'traffic_service', {}, true);
+    console.log('result', result);
+  }, [devId]);
+
+  /**
+   * 跳转帮助小程序
+   */
+  const handleGotoHelpMini = useCallback(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;
+  }, [isLowPowerDevice, lowPowerDeviceOnlineState, onlineStatus, videoErrCode, devId, brandColor, getErrorContentByType]);
+
+  /**
+   * 跳转反馈小程序
+   */
+  const handleGotoFeedBackMini = useCallback(() => {
+    const url = "godzilla://".concat(miniIdLabs.helpMini, "/pages/v2/problemSubmit/index");
+    openTargetMinByShortLink(url);
+  }, []);
+
+  // 自定义处理点击重试逻辑
+  const handleCustomRetry = useCallback(() => {
+    if (limitFlow) {
+      // 流量不足时的处理逻辑，跳转到充值页面
+      handleGotoTrafficRecharge();
+    } else {
+      onRetry();
+    }
+  }, [limitFlow, onRetry, handleGotoTrafficRecharge, onlineStatus]);
+
+  /**
+   * 获取错误图标 className
+   */
+  const getErrorIconClassName = useCallback(() => {
+    if (limitFlow && onlineStatus) {
+      return 'err-icon-flow-limit';
+    }
+    if (!autoPlay) {
+      return 'err-icon-sleep';
+    }
+    return 'err-icon';
+  }, [autoPlay, limitFlow, onlineStatus]);
+  if (!isError) return null;
+  return /*#__PURE__*/React.createElement(CoverView, {
+    style: {
+      borderRadius: "".concat(borderRadius)
+    },
+    className: clsx(getClassName('bg-center'), getClassName('error-container'), !isError && getClassName('hide')),
+    onClick: () => {
+      return false;
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx(getClassName('err-icon-container'))
+  }, renderErrIcon ? renderErrIcon() : /*#__PURE__*/React.createElement(View, {
+    className: clsx(getClassName(getErrorIconClassName()))
+  })), /*#__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: handleCustomRetry
+  }, getErrorContentByType(videoErrCode, 'retryText'), limitFlow && /*#__PURE__*/React.createElement(View, {
+    className: clsx(getClassName('btn-right-arrow'))
+  })), 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: handleGotoFeedBackMini
+  }, Strings.getLang('ipc_player_feedback'))));
+};
+export default ErrorOverlay;

package/lib/components/FullScreenBackButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface FullScreenBackButtonProps {
+    isVisible: boolean;
+    getClassName: (className: string) => string;
+    onBackFullScreen: () => void;
+}
+declare const FullScreenBackButton: React.FC<FullScreenBackButtonProps>;
+export default FullScreenBackButton;

package/lib/components/FullScreenBackButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CoverView } from '@ray-js/components';
+import clsx from 'clsx';
+const FullScreenBackButton = _ref => {
+  let {
+    isVisible,
+    getClassName,
+    onBackFullScreen
+  } = _ref;
+  if (!isVisible) return null;
+  return /*#__PURE__*/React.createElement(CoverView, {
+    className: clsx(getClassName('load-full-back-container')),
+    onClick: onBackFullScreen
+  });
+};
+export default FullScreenBackButton;

package/lib/components/LoadingOverlay.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface LoadingOverlayProps {
+    isLoading: boolean;
+    loadingText?: string;
+    borderRadius: number;
+    getClassName: (className: string) => string;
+}
+declare const LoadingOverlay: React.FC<LoadingOverlayProps>;
+export default LoadingOverlay;

package/lib/components/LoadingOverlay.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, CoverView } from '@ray-js/components';
+import clsx from 'clsx';
+import Strings from '../i18n';
+const LoadingOverlay = _ref => {
+  let {
+    isLoading,
+    loadingText,
+    borderRadius,
+    getClassName
+  } = _ref;
+  if (!isLoading) return null;
+  return /*#__PURE__*/React.createElement(CoverView, {
+    style: {
+      borderRadius: "".concat(borderRadius)
+    },
+    className: clsx(getClassName('load-box'), getClassName('bg-center'), !isLoading && getClassName('hide')),
+    onClick: () => {
+      return false;
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: getClassName('load-icon')
+  }), /*#__PURE__*/React.createElement(View, {
+    className: getClassName('load-des')
+  }, loadingText || Strings.getLang('ipc_player_get_video_stream')));
+};
+export default LoadingOverlay;

package/lib/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as LoadingOverlay } from './LoadingOverlay';
+export { default as ErrorOverlay } from './ErrorOverlay';
+export { default as FullScreenBackButton } from './FullScreenBackButton';

package/lib/components/index.js

@@ -0,0 +1,3 @@
+export { default as LoadingOverlay } from './LoadingOverlay';
+export { default as ErrorOverlay } from './ErrorOverlay';
+export { default as FullScreenBackButton } from './FullScreenBackButton';

package/lib/hooks/index.d.ts

@@ -4,4 +4,5 @@ interface UseWakeUpDeviceOptions {
     intervalTime?: number;
 }
 export declare const useWakeUpDevice: ({ deviceId, enabled, intervalTime, }: UseWakeUpDeviceOptions) => void;
-export {};
+export { usePlayerProps } from './usePlayerProps';
+export { usePlayerConnection } from './usePlayerConnection';

package/lib/hooks/index.js

@@ -31,4 +31,6 @@ export const useWakeUpDevice = _ref => {
       }
     };
   }, [enabled, deviceId, intervalTime]);
-};
+};
+export { usePlayerProps } from './usePlayerProps';
+export { usePlayerConnection } from './usePlayerConnection';

package/lib/hooks/usePlayerConnection.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+/// <reference types="node" />
+interface UsePlayerConnectionOptions {
+    devId: string;
+    ipcCtx: React.MutableRefObject<any>;
+    playState: any;
+    setPlayState: (updater: (draft: any) => void) => void;
+    setVideoErrCode: (code: string | number) => void;
+    onChangeStreamStatus?: (status: number) => void;
+    onInitPreview?: (devId: string) => void;
+    playerRoute: string;
+    privateState: boolean;
+    isLowPowerDevice: boolean;
+    awakeStatus?: boolean;
+    wirelessFlag: boolean;
+    setEnableWakeUpInterval: (enabled: boolean) => void;
+    setLowPrivateOutTimeFlag: (flag: boolean) => void;
+    setMqttPrivateFlag: (flag: boolean) => void;
+    privateLowPowerDeviceTimeOutRef: React.MutableRefObject<NodeJS.Timeout | null>;
+    privateWakeOutTimeRef: React.MutableRefObject<NodeJS.Timeout | null>;
+    firstPreviewTimeRef: React.MutableRefObject<boolean>;
+    retryCount: React.MutableRefObject<number>;
+    muteRef: React.MutableRefObject<boolean>;
+    setMuted: (val: boolean) => void;
+}
+/**
+ * 播放器连接相关逻辑的自定义 hook
+ */
+export declare const usePlayerConnection: ({ devId, ipcCtx, playState, setPlayState, setVideoErrCode, onChangeStreamStatus, onInitPreview, playerRoute, privateState, isLowPowerDevice, awakeStatus, wirelessFlag, setEnableWakeUpInterval, setLowPrivateOutTimeFlag, setMqttPrivateFlag, privateLowPowerDeviceTimeOutRef, privateWakeOutTimeRef, firstPreviewTimeRef, retryCount, muteRef, setMuted, }: UsePlayerConnectionOptions) => {
+    _retry: () => Promise<void>;
+    _reConnect: () => void;
+    createConnect: (this: unknown, params?: string | undefined) => Promise<void>;
+    startPreview: (this: any, params: any) => void;
+    stopPreview: () => void;
+    disconnect: () => Promise<unknown>;
+    handleReWakeCamera: () => Promise<void>;
+    handleReWakeCameraLowPowerDevice: (this: unknown) => void;
+    getPlayerRoute: () => string;
+};
+export {};