@ray-js/ray-ipc-player 2.0.3 → 2.0.5-beta-1

package/README-zh_CN.md

@@ -0,0 +1,201 @@
+# ray-ipc-player
+
+针对 ipc-player 基础能力进行封装，包含 loading、设备异常、离线等提示
+
+### 属性
+
+```ts
+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 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 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 extend
+   * @description.zh 扩展属性
+   * @default {}
+   */
+  extend?: Record<string, any>;
+};
+```
+
+#### onChangeStreamStatus 说明
+
+主要暴露出拉流过程中的一些状态事件：
+
+- -1000: 未知异常
+
+- 1001: connect 连接成功
+
+- -1001: connect 连接失败
+
+- 1002: preview 成功
+
+- -1002: preview 失败
+
+- -1010: 网络状态不可用
+
+- -1012: 设备被移除
+
+- 1009: disconnect 成功
+
+- -1009: disconnect 失败
+
+### 用法
+
+```tsx
+import React, { useState, useCallback } from 'react';
+import Player from '@ray-js/ray-ipc-player';
+import { Button, View } from '@ray-js/components';
+
+const PlayerDemo = () => {
+  const [updateLayout, setUpdateLayout] = useState('');
+  const [state, setState] = useState({}); // player实例
+  const [playerWidth, setPlayerWidth] = useState('200px'); // player宽度
+  /** onCtx用法
+   *  playerCtx.ctx: 拿到的是通过createIpcPlayerContext创建的ipc-player实例，包含预览、清晰度、静音、录像、截图等方法
+   *  playerCtx.retry: 暴露出的重试方法
+   */
+  const onCtx = playerCtx => {
+    setState(playerCtx);
+  };
+
+  // 切换清晰度
+  const handleClarity = useCallback(() => {
+    if (previewStatus) {
+      state.ctx.setClarity({
+        clarity: 'hd',
+        success: res => {
+          console.log('切换清晰度成功：', res);
+        },
+        fail: e => {
+          console.log('切换清晰度失败：', e);
+        },
+      });
+    }
+  }, [previewStatus]);
+
+  const handleChangeWidth = () => {
+    setPlayerWidth(playerWidth);
+    // 更新外层父节点宽度样式时，同步通知更新播放器视图
+    setUpdateLayout(Math.random().toString());
+  };
+
+  return (
+    <View style={{ width: playerWidth }}>
+      <Player
+        devId={devId}
+        onlineStatus={true}
+        onCtx={onCtx}
+        updateLayout={updateLayout}
+        extend={{
+          soundMode: 'speaker',
+          orientation: 'vertical',
+        }}
+      />
+      <Button onClick={() => handleClarity}>切换清晰度</Button>
+      <Button onClick={() => handleChangeWidth}>更新宽度</Button>
+    </View>
+  );
+};
+
+export default PlayerDemo;
+```

package/README.md

@@ -1,115 +1,184 @@
 # ray-ipc-player
 
-针对 ipc-player 基础能力进行封装，包含 loading、设备异常、离线等提示
+Encapsulates basic ipc-player capabilities, including loading, device exception, and offline prompts
 
-### 属性
+### property
 
 ```ts
 export type IProps = {
-  devId: string; // 设备id
-  onlineStatus: Boolean; // 设备是否在线
-  privateState?: boolean; // 设备隐私模式
-  defaultMute?: Boolean; // 默认静音
-  clarity?: string; // 默认标清 normal：标清，hd：高清
-  updateLayout?: any; // 外层父节点样式变化，播放器监听不到，需要主动触发播放器视图更新，每次需要设置不同的值
-  onChangeStreamStatus?: (statusCode: number) => void; // 视频流状态发生变化
-  onCtx?: (playerRef: object) => void; // 获取ipcPlayer实例ctx以及重试方法retry
-  onInitPreview?: (devId: string) => void; // 初始化预览成功
-  onPlayerTap?: (devId: string) => void; // 播放器区域点击事件
-  scalable?: Boolean; // 是否可缩放
-  scaleMultiple?: number; // 缩放比例
-  rotateZ?: number; // 摄像头旋转角度
-  ptzControllable?: Boolean; // 是否开启视频区云平台控制
-  playerStyle?: { // 播放器样式
-    bgColor?: string; // 背景底色
-    borderRadius?: number | string; // 边框圆角
-    borderStyle?: 'solid' | 'dashed'; // 边框样式
-    borderColor?: string; // 边框颜色
-    borderWidth?: string | number; // 边框宽度
+  /**
+   * @description.en devId
+   * @default ""
+   */
+  devId: string;
+  /**
+   * @description.en Whether the device is online
+   * @default true
+   */
+  onlineStatus: boolean;
+  /**
+   * @description.en Privacy mode
+   * @default false
+   */
+  privateState?: boolean;
+  /**
+   * @description.en defaultMute
+   * @default true
+   */
+  defaultMute?: boolean;
+  /**
+   * @description.en clarity
+   * @default "normal"
+   */
+  clarity?: 'normal' | 'hd';
+  /**
+   * @description.en Notifying the view of updates, each time you need to set a different value
+   * @default ""
+   */
+  updateLayout?: any;
+  /**
+   * @description.en Notifies the video stream that the state has changed
+   * @default (data) => void
+   */
+  onChangeStreamStatus?: (data) => void;
+  /**
+   * @description.en Obtain ipcPlayer instance ctx and retry method Retry
+   * @default (playerRef) => void
+   */
+  onCtx?: (playerRef) => void;
+  /**
+   * @description.en The initialization preview is successful
+   * @default (devId) => void
+   */
+  onInitPreview?: (data) => void;
+  /**
+   * @description.en Click events in the player area
+   * @default (devId) => void
+   */
+  onPlayerTap?: (data) => void;
+  /**
+   * @description.en Scalable or not
+   * @default true
+   */
+  scalable?: boolean;
+  /**
+   * @description.en Scale of scale
+   * @default 0
+   */
+  scaleMultiple?: number;
+  /**
+   * @description.en Camera rotation Angle
+   * @default 0
+   */
+  rotateZ?: number;
+  /**
+   * @description.en Whether to enable the video area cradle head control
+   * @default true
+   */
+  ptzControllable?: boolean;
+  /**
+   * @description.en playerStyle
+   * @default {}
+   */
+  playerStyle?: {
+    bgColor?: string;
+    borderRadius?: number | string;
+    borderStyle?: 'solid' | 'dashed';
+    borderColor?: string;
+    borderWidth?: string | number;
   };
-  loadText?: string; // 加载过程中的文案，可结合onChangeStreamStatus事件做文案配置
-  extend?: object; // 扩展属性
+  /**
+   * @description.en Loading copy
+   * @default "Getting a video stream..."
+   */
+  loadText?: string;
+  /**
+   * @description.en Extended Attributes
+   * @default {}
+   */
+  extend?: Record<string, any>;
 };
 ```
 
-#### onChangeStreamStatus 说明
+#### onChangeStreamStatus instructions
 
-主要暴露出拉流过程中的一些状态事件：
+It mainly exposes some status events during the pull flow: the initialization preview is successful:
 
-- -1000: 未知异常
+- -1000: Unknown anomaly
 
-- 1001: connect 连接成功
+- 1001: Connection successful
 
-- -1001: connect 连接失败
+- -1001: Connection failure
 
-- 1002: preview 成功
+- 1002: preview successful
 
-- -1002: preview 失败
+- -1002: preview failure
 
-- -1010: 网络状态不可用
+- -1010: The network status is unavailable
 
-- -1012: 设备被移除
+- -1012: The device is removed.
 
-- 1009: disconnect 成功
+- 1009: disconnect successful
 
-- -1009: disconnect 失败
+- -1009: disconnect failure
 
-### 用法
+### usage
 
 ```tsx
 import React, { useState, useCallback } from 'react';
-import Player from "@ray-js/ray-ipc-player";
+import Player from '@ray-js/ray-ipc-player';
 import { Button, View } from '@ray-js/components';
 
 const PlayerDemo = () => {
   const [updateLayout, setUpdateLayout] = useState('');
-  const [state, setState] = useState({}); // player实例
-  const [playerWidth, setPlayerWidth] = useState('200px'); // player宽度
-  /** onCtx用法
-   *  playerCtx.ctx: 拿到的是通过createIpcPlayerContext创建的ipc-player实例，包含预览、清晰度、静音、录像、截图等方法
-   *  playerCtx.retry: 暴露出的重试方法
+  const [state, setState] = useState({});
+  const [playerWidth, setPlayerWidth] = useState('200px');
+  /** onCtx usage
+   *  playerCtx.ctx: The instance of ipc-player,includes preview, definition, mute, video, screenshot and other methods
+   *  playerCtx.retry: retry
    */
-  const onCtx = (playerCtx) => {
-    setState(playerCtx)
-  }
+  const onCtx = playerCtx => {
+    setState(playerCtx);
+  };
 
-  // 切换清晰度
+  // Clarity of switching
   const handleClarity = useCallback(() => {
     if (previewStatus) {
       state.ctx.setClarity({
         clarity: 'hd',
         success: res => {
-          console.log('切换清晰度成功：', res);
+          console.log('Succeeded in switching clarity:', res);
         },
         fail: e => {
-          console.log('切换清晰度失败：', e);
+          console.log('Failed to switch clarity:', e);
         },
       });
     }
-  }, [previewStatus])
+  }, [previewStatus]);
 
   const handleChangeWidth = () => {
     setPlayerWidth(playerWidth);
-    // 更新外层父节点宽度样式时，同步通知更新播放器视图
+    // Update the player view with a synchronous notification when the width style of the outer parent node is updated
     setUpdateLayout(Math.random().toString());
-  }
+  };
 
   return (
-    <View style={{width: playerWidth}}>
+    <View style={{ width: playerWidth }}>
       <Player
         devId={devId}
+        onlineStatus={true}
         onCtx={onCtx}
         updateLayout={updateLayout}
         extend={{
           soundMode: 'speaker',
-          orientation: 'vertical'
+          orientation: 'vertical',
         }}
       />
-      <Button onClick={() => handleClarity}>切换清晰度</Button>
-      <Button onClick={() => handleChangeWidth}>更新宽度</Button>
+      <Button onClick={() => handleClarity}>Clarity of switching</Button>
+      <Button onClick={() => handleChangeWidth}>Update the width</Button>
     </View>
-  )
-}
+  );
+};
 
 export default PlayerDemo;
 ```

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@ray-js/ray-ipc-player",
-  "version": "2.0.3",
+  "version": "2.0.5-beta-1",
   "description": "ray小程序播放器",
   "keywords": [
-    "tuya-panel",
+    "tuya-miniapp",
     "ray"
   ],
   "main": "lib/index.js",