@ray-js/ray-ipc-player 2.0.18-beta-1 → 2.0.18-beta-2

package/lib/index.module.less

@@ -12,6 +12,7 @@
 .load_box {
   color: #ffffff;
   font-size: 0.3rem;
+  z-index: 200;
 }
 
 .bg_center {
@@ -24,6 +25,7 @@
   justify-content: center;
   align-items: center;
   background: var(--video-bg);
+  z-index: 200;
 }
 
 .state_label {

package/lib/types/index.d.ts

@@ -0,0 +1,7 @@
+declare module '*.module.less' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less';
+declare module '*.png';

package/lib/utils.js

@@ -1,37 +1,31 @@
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.promise.js";
-export var putDpData = function (dpIds, deviceId) {
-  return new Promise(function (resolve, reject) {
+export const putDpData = (dpIds, deviceId) => {
+  return new Promise((resolve, reject) => {
     ty.device.publishDps({
       deviceId: deviceId,
       mode: 2,
       pipelines: [],
       options: {},
       dps: dpIds,
-      success: function success(res) {
-        return resolve(res);
-      },
-      fail: function fail(e) {
-        return reject(e);
-      }
+      success: res => resolve(res),
+      fail: e => reject(e)
     });
   });
 };
+
 /**
  * 获取当前是否Connected （p2p连接状态）
  * @param ipcCtx 
  * @returns 
  */
-
-export var getIsConnected = function (ipcCtx) {
-  return new Promise(function (resolve) {
+export const getIsConnected = ipcCtx => {
+  return new Promise(resolve => {
     if (typeof (ipcCtx === null || ipcCtx === void 0 ? void 0 : ipcCtx.isConnected) === 'function') {
-      ipcCtx === null || ipcCtx === void 0 ? void 0 : ipcCtx.isConnected({
-        success: function success(res) {
+      ipcCtx === null || ipcCtx === void 0 || ipcCtx.isConnected({
+        success: res => {
           // console.log(res, 'getIsConnected---');
           resolve(res);
         },
-        fail: function fail() {
+        fail: () => {
           // console.error(e, 'getIsConnected---');
           resolve(false);
         }
@@ -41,21 +35,21 @@ export var getIsConnected = function (ipcCtx) {
     }
   });
 };
+
 /**
  * 获取当前是否已经在拉流状态
  * @param ipcCtx 
  * @returns 
  */
-
-export var getIsOnPreview = function (ipcCtx) {
-  return new Promise(function (resolve) {
+export const getIsOnPreview = ipcCtx => {
+  return new Promise(resolve => {
     if (typeof (ipcCtx === null || ipcCtx === void 0 ? void 0 : ipcCtx.isOnPreview) === 'function') {
-      ipcCtx === null || ipcCtx === void 0 ? void 0 : ipcCtx.isOnPreview({
-        success: function success(res) {
+      ipcCtx === null || ipcCtx === void 0 || ipcCtx.isOnPreview({
+        success: res => {
           // console.log(res, 'getIsOnPreview---');
           resolve(res);
         },
-        fail: function fail() {
+        fail: () => {
           // console.error(e, 'getIsOnPreview---');
           resolve(false);
         }

package/package.json

@@ -1,59 +1,66 @@
 {
   "name": "@ray-js/ray-ipc-player",
-  "version": "2.0.18-beta-1",
+  "version": "2.0.18-beta-2",
   "description": "ray小程序播放器",
   "keywords": [
     "tuya-miniapp",
     "ray"
   ],
-  "main": "lib/index.js",
+  "main": "lib/index",
+  "files": [
+    "lib"
+  ],
+  "license": "MIT",
   "types": "lib/index.d.ts",
+  "maintainers": [
+    "tuya_npm",
+    {
+      "name": "tuyafe",
+      "email": "tuyafe@tuya.com"
+    }
+  ],
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
     "build": "ray build --type=component",
-    "watch": "ray start --type=component",
-    "build:tuya": "ray build ./example --target=tuya",
+    "watch": "ray start --type=component --output ./example/src/lib",
+    "build:tuya": "ray build -t tuya ./example",
     "build:wechat": "ray build ./example --target=wechat",
     "build:web": "ray build ./example --target=web",
     "build:native": "ray build ./example --target=native",
     "start:native": "ray start ./example -t native --verbose",
-    "start:tuya": "ray start ./example -t tuya --verbose",
+    "start:tuya": "ray start -t tuya ./example --bundler=webpack",
     "start:wechat": "ray start ./example -t wechat --verbose",
     "start:web": "ray start ./example -t web",
     "prepublishOnly": "yarn build",
     "release-it": "standard-version"
   },
-  "license": "MIT",
+  "peerDependencies": {},
   "dependencies": {
-    "@ray-js/panel-sdk": "latest",
     "classnames": "^2.3.1",
     "immer": "^9.0.15",
-    "use-immer": "^0.5.1"
+    "use-immer": "^0.5.1",
+    "@ray-js/panel-sdk": "^1.13.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
-    "@ray-js/babel-preset-standard": "latest",
-    "@ray-js/cli": "latest",
-    "@ray-js/ray": "1.5.44-beta.0",
-    "@ray-js/rn-transformer-helper": "latest",
-    "@ray-js/types": "latest",
-    "@types/node": "^17.0.43",
+    "@ray-js/cli": "^1.4.9",
+    "@ray-js/ray": "^1.4.9",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^29.5.14",
     "core-js": "^3.19.1",
-    "eslint-config-tuya-panel": "^0.4.1",
+    "eslint-config-tuya-panel": "^0.4.2",
     "husky": "^1.2.0",
     "lint-staged": "^10.2.11",
     "standard-version": "9.3.2"
   },
   "resolutions": {
-    "follow-redirects": "1.15.6",
-    "shell-quote": "1.7.3",
-    "@babel/traverse": "7.23.2",
-    "decode-uri-component": "0.2.1"
+    "@ray-js/builder-mp": "1.6.2"
   },
   "husky": {
     "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js"
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
+      "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {
@@ -65,11 +72,5 @@
       "prettier --write",
       "git add"
     ]
-  },
-  "maintainers": [
-    {
-      "name": "tuyafe",
-      "email": "tuyafe@tuya.com"
-    }
-  ]
+  }
 }

package/README-zh_CN.md

@@ -1,209 +0,0 @@
-[English](./README.md) | 简体中文
-
-# 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 objectFit：contain|fillCrop
-   * @description.zh 填充模式设置：contain: 图像长边填满屏幕，短边区域会被填充⿊⾊, fillCrop: 图像铺满屏幕
-   * @default "contain"
-   */
-   objectFit?: 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;
-```