@ray-js/ray-ipc-player 2.0.19-beta-beta-1 → 2.0.20-beta-1

package/lib/index.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-import { IProps } from './typings';
 declare const Player: (props: IProps) => JSX.Element;
 export default Player;

package/lib/index.js

@@ -6,7 +6,7 @@ import { useImmer } from 'use-immer';
 import { IpcPlayer, View, CoverView } from '@ray-js/components';
 import { setPageOrientation, usePageEvent } from '@ray-js/ray';
 import clsx from 'clsx';
-import locals from './i18n';
+import Strings from './i18n';
 import Styles from './index.module.less';
 import { IpcFailCode } from './constant';
 import { putDpData, getIsConnected, getIsOnPreview } from './utils';
@@ -39,7 +39,8 @@ const Player = props => {
     },
     privateState = false,
     objectFit = 'contain',
-    extend = {}
+    extend = {},
+    brandColor = '#FF592A'
   } = props;
   const {
     borderRadius,
@@ -58,7 +59,8 @@ const Player = props => {
     errorMsg: '',
     // 异常信息
     updateLy: '',
-    deviceOnlineState: true,
+    deviceOnlineState: onlineStatus,
+    // 设备在线状态
     initLy: false
   });
   const [screenType, setScreenType] = useState('portrait');
@@ -74,6 +76,7 @@ const Player = props => {
   usePageEvent('onShow', useCallback(async () => {
     // 视图准备就绪
     if (playState.initLy && ipcCtx.current) {
+      console.log('retry连接');
       retry();
     }
   }, [playState.connectState, privateState, playState.initLy]));
@@ -107,7 +110,7 @@ const Player = props => {
     });
   }, [updateLayout]);
 
-  // 设备离线、隐私模式
+  /** 监听设备离线、隐私模式 */
   useEffect(() => {
     console.log(onlineStatus, 'onlineStatus');
     setPlayState(d => {
@@ -115,9 +118,10 @@ const Player = props => {
       d.errorState = privateState;
     });
     if (!onlineStatus) {
+      console.log('监听到设备离线');
       setPlayState(d => {
         d.errorState = true;
-        d.errorMsg = locals.getLang('ipc_player_no_line');
+        d.errorMsg = Strings.getLang('ipc_player_no_line');
       });
     } else if (playState.initLy && !privateState) {
       retry();
@@ -140,8 +144,9 @@ const Player = props => {
   };
   const retry = useCallback(() => {
     // console.log('retry:', muteRef.current);
-    !privateState && _retry();
-  }, [playState.connectState, privateState]);
+    console.log('重新拉流启动');
+    onlineStatus && !privateState && _retry();
+  }, [playState.connectState, privateState, onlineStatus]);
 
   // 创建ipc实例
   const createIpcCtx = () => {
@@ -173,7 +178,7 @@ const Player = props => {
         setPlayState(d => {
           d.connectState = false;
           d.errorState = true;
-          d.errorMsg = locals.getLang('ipc_player_connect_fail');
+          d.errorMsg = Strings.getLang('ipc_player_connect_fail');
           d.loadingState = false;
         });
         onChangeStreamStatus && onChangeStreamStatus(-1001);
@@ -214,7 +219,7 @@ const Player = props => {
         setPlayState(d => {
           d.errorState = true;
           d.loadingState = false;
-          d.errorMsg = locals.getLang('ipc_player_preview_fail');
+          d.errorMsg = Strings.getLang('ipc_player_preview_fail');
         });
         onChangeStreamStatus && onChangeStreamStatus(-1002);
       },
@@ -281,7 +286,7 @@ const Player = props => {
       setPlayState(d => {
         d.loadingState = false;
         d.errorState = true;
-        d.errorMsg = locals.getLang(IpcFailCode[type]);
+        d.errorMsg = Strings.getLang(IpcFailCode[type]);
         d.connectState = false;
       });
     }
@@ -323,16 +328,14 @@ const Player = props => {
   return /*#__PURE__*/React.createElement(View, {
     className: Styles.ipc_player,
     onClick: handlePlayerClick
-  }, /*#__PURE__*/React.createElement(IpcPlayer
-  // @ts-ignore
-  , _extends({
+  }, /*#__PURE__*/React.createElement(IpcPlayer, _extends({
     className: "".concat(Styles.player, " ").concat(playState.updateLy),
     onVideoTap: handlePlayerClick,
     onZoomChange: onZoomChange,
     onCameraPreviewFailure: onCameraPreviewFailure,
     onCameraNotifyWeakNetwork: onCameraNotifyWeakNetwork,
     onInitDone: () => {
-      // console.log('视图层准备就绪:', devId);
+      console.log('视图层准备就绪~');
       setPlayState(d => {
         d.updateLy = Math.random();
         d.initLy = true;
@@ -341,7 +344,7 @@ const Player = props => {
     onError: onError,
     onConnectChange: e => {
       var _e$detail2;
-      // console.log('连接状态发生变化', e);
+      console.log('连接状态发生变化', e);
       const code = e === null || e === void 0 || (_e$detail2 = e.detail) === null || _e$detail2 === void 0 ? void 0 : _e$detail2.state;
       onChangeStreamStatus && onChangeStreamStatus(code === 0 ? 1001 : -1001);
       if (code === 0) {
@@ -357,7 +360,7 @@ const Player = props => {
           d.connectState = false;
           d.loadingState = false;
           d.errorState = true;
-          d.errorMsg = locals.getLang(IpcFailCode[-1001]);
+          d.errorMsg = Strings.getLang(IpcFailCode[-1001]);
         });
       }
     },
@@ -380,19 +383,25 @@ const Player = props => {
     style: {
       borderRadius: "".concat(borderRadius)
     },
-    className: clsx(Styles.load_box, Styles.bg_center, !playState.loadingState && Styles.hide)
+    className: clsx(Styles.load_box, Styles.bg_center, !playState.loadingState && Styles.hide),
+    onClick: () => {
+      return false;
+    }
   }, /*#__PURE__*/React.createElement(View, {
     className: Styles.load_icon
   }), /*#__PURE__*/React.createElement(View, {
     className: Styles.load_des
-  }, loadText || locals.getLang('ipc_player_get_video_stream'))), /*#__PURE__*/React.createElement(CoverView, {
+  }, loadText || Strings.getLang('ipc_player_get_video_stream'))), /*#__PURE__*/React.createElement(CoverView, {
     style: {
       borderRadius: "".concat(borderRadius)
     },
-    className: clsx(Styles.bg_center, Styles.state_label, !playState.errorState && Styles.hide)
+    className: clsx(Styles.bg_center, Styles.state_label, !playState.errorState && Styles.hide),
+    onClick: () => {
+      return false;
+    }
   }, privateState && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
     className: Styles.device_sleep
-  }, locals.getLang('ipc_player_device_sleep')), /*#__PURE__*/React.createElement(View, {
+  }, Strings.getLang('ipc_player_device_sleep')), /*#__PURE__*/React.createElement(View, {
     className: Styles.re_wake_camera
     // @ts-ignore
     ,
@@ -401,7 +410,7 @@ const Player = props => {
         105: false
       }, devId);
     }
-  }, locals.getLang('ipc_player_re_wake_camera'))), !privateState && /*#__PURE__*/React.createElement(View, {
+  }, Strings.getLang('ipc_player_re_wake_camera'))), !privateState && /*#__PURE__*/React.createElement(View, {
     className: clsx(Styles.err_container)
   }, /*#__PURE__*/React.createElement(View, {
     className: clsx(Styles.iconfont, Styles.icon_tishi, !playState.deviceOnlineState && Styles.hide)
@@ -409,12 +418,12 @@ const Player = props => {
     className: Styles.err_msg
   }, /*#__PURE__*/React.createElement(View, {
     className: clsx(Styles.msg, Styles.ellipsis)
-  }, playState.errorMsg), /*#__PURE__*/React.createElement(View
+  }, playState.deviceOnlineState ? playState.errorMsg : Strings.getLang('ipc_player_no_line')), /*#__PURE__*/React.createElement(View
   // @ts-ignore
   , {
     onClick: retry,
     className: clsx(Styles.retry, !playState.deviceOnlineState && Styles.hide)
-  }, locals.getLang('ipc_player_retry'))))), screenType === 'landscape' && (playState.loadingState || playState.errorState) && /*#__PURE__*/React.createElement(CoverView, {
+  }, Strings.getLang('ipc_player_retry'))))), screenType === 'landscape' && (playState.loadingState || playState.errorState) && /*#__PURE__*/React.createElement(CoverView, {
     className: clsx(Styles.load_full_back_container),
     onClick: () => {
       setPageOrientation({

package/lib/index.module.less

@@ -39,7 +39,7 @@
 }
 
 :root[theme='dark'] {
-  --video-bg: rgba(255, 255, 255, 0.1);
+  --video-bg: #000000;
 }
 
 .load_icon {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ray-ipc-player",
-  "version": "2.0.19-beta-beta-1",
+  "version": "2.0.20-beta-1",
   "description": "ray小程序播放器",
   "keywords": [
     "tuya-miniapp",

package/lib/typings/index.d.ts

@@ -1,149 +0,0 @@
-declare module '*.module.less' {
-  const classes: {
-    readonly [key: string]: string;
-  };
-  export default classes;
-  declare module '*.less';
-}
-export type IProps = {
-  /**
-   * @description.en devId
-   * @description.zh 设备id
-   * @default ""
-   */
-  devId: string;
-  /**
-   * @description.en onlineStatus
-   * @description.zh 设备是否在线
-   * @default true
-   */
-  onlineStatus: boolean;
-  /**
-   * @description.en privateState
-   * @description.zh 隐私模式
-   * @default false
-   */
-  privateState?: boolean;
-  /**
-   * @description.en defaultMute
-   * @description.zh 默认静音
-   * @default true
-   */
-  defaultMute?: boolean;
-  /**
-   * @description.en clarity
-   * @description.zh 清晰度 normal：标清，hd：高清
-   * @default "normal"
-   */
-  clarity?: 'normal' | 'hd';
-  /**
-   * @description.en updateLayout
-   * @description.zh 外层父节点样式变化，播放器监听不到，需要主动触发播放器视图更新，每次需要设置不同的字符串值
-   * @default ""
-   */
-  updateLayout?: any;
-  /**
-   * @description.en IPC Player instance. If not passed, an instance will be generated inside the component.
-   * @description.zh IPC Player实例，如果不传组件内部会生成实例
-   * @default ""
-   */
-  ipcPlayerContext?: IpcContext;
-  /**
-   * @description.en onChangeStreamStatus
-   * @description.zh 通知视频流状态发生变化
-   * @default (data) => void
-   */
-  onChangeStreamStatus?: (data) => void;
-  /**
-   * @description.en onCtx
-   * @description.zh 获取ipcPlayer实例ctx以及重试方法retry
-   * @default (playerRef) => void
-   */
-  onCtx?: (playerRef) => void;
-  /**
-   * @description.en onInitPreview
-   * @description.zh 初始化预览成功通知
-   * @default (devId) => void
-   */
-  onInitPreview?: (data) => void;
-  /**
-   * @description.en onPlayerTap
-   * @description.zh 播放器区域点击事件
-   * @default (devId) => void
-   */
-  onPlayerTap?: (data) => void;
-  /**
-   * @description.en onZoomchange
-   * @description.zh 视频缩放比例及当前倍数变化，detail = { zoomLevel }, zoomLevel 为缩放比例
-   */
-  onZoomChange?: (data) => void;
-  /**
-   * @description.en onSessionDidDisconnected
-   * @description.zh 事件：session断开事件
-   */
-  onSessionDidDisconnected?: (data) => void;
-  /**
-   * @description.en onCameraPreviewFailure
-   * @description.zh 事件：预览失败，错误码监听事件
-   */
-  onCameraPreviewFailure?: (data) => void;
-  /**
-   * @description.en onCameraNotifyWeakNetwork
-   * @description.zh 事件：画面网速监听状态值事件
-   */
-  onCameraNotifyWeakNetwork?: (data) => void;
-  /**
-   * @description.en scalable
-   * @description.zh 是否可缩放
-   * @default true
-   */
-  scalable?: boolean;
-  /**
-   * @description.en scaleMultiple
-   * @description.zh 缩放比例
-   * @default 0
-   */
-  scaleMultiple?: number;
-  /**
-   * @description.en rotateZ
-   * @description.zh 摄像头旋转角度
-   * @default 0
-   */
-  rotateZ?: number;
-  /**
-   * @description.en ptzControllable
-   * @description.zh 是否开启视频区云平台控制
-   * @default true
-   */
-  ptzControllable?: boolean;
-  /**
-   * @description.en playerStyle
-   * @description.zh 播放器样式
-   * @default {}
-   */
-  playerStyle?: {
-    bgColor?: string; // 背景底色
-    borderRadius?: number | string; // 边框圆角
-    borderStyle?: 'solid' | 'dashed'; // 边框样式
-    borderColor?: string; // 边框颜色
-    borderWidth?: string | number; // 边框宽度
-  };
-  /**
-   * @description.en loadText
-   * @description.zh 加载过程中的文案，可结合onChangeStreamStatus事件做文案配置
-   * @default "正在获取视频流..."
-   */
-  loadText?: string;
-  /**
-   * @description.en objectFit：contain|fillCrop
-   * @description.zh 填充模式设置：contain: 图像长边填满屏幕，短边区域会被填充⿊⾊, fillCrop: 图像铺满屏幕
-   * @default "contain"
-   */
-  objectFit?: string;
-  /**
-   * @description.en extend
-   * @description.zh 扩展属性
-   * @default {}
-   */
-  extend?: Record<string, any>;
-};