@ray-js/ipc-player-integration 0.0.1-beta-1

package/lib/ui/ui.js

@@ -0,0 +1,121 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useRef } from 'react';
+import { View, CoverView, getSystemInfoSync } from '@ray-js/ray';
+import clsx from 'clsx';
+import IPCPlayer from '@ray-js/ray-ipc-player';
+import { PlayState, PlayerStreamStatus } from '../interface';
+import { useCtx } from '../ctx/ctx.composition';
+import './ui.less';
+function getCtxInstance(instance, devId) {
+  if (instance) return instance;
+  return useCtx({
+    // eslint-disable-line
+    devId
+  });
+}
+
+// todo 提出更多 CSS变量以支持自定义样式
+
+const defaultCSSVariable = {
+  '--iconColor': '#fff',
+  '--iconFontSize': '40rpx',
+  '--bg-color': '#000',
+  '--fontColor': '#fff'
+};
+export const IPCPlayerIntegration = props => {
+  const {
+    className,
+    devId,
+    style,
+    CSSVariable = defaultCSSVariable
+  } = props;
+  const instance = getCtxInstance(props.instance, devId);
+  const {
+    topContent,
+    absoluteContent,
+    bottomContent,
+    playState,
+    setPlayState
+  } = instance;
+  const systemInfo = useRef(null);
+  if (!systemInfo.current) {
+    systemInfo.current = getSystemInfoSync();
+  }
+
+  /**
+   * 视频流加载状态封装
+   */
+
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-content', className),
+    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultCSSVariable), CSSVariable), style), {}, {
+      height: instance.screenType === 'full' ? `${systemInfo.current.screenWidth}px` : style === null || style === void 0 ? void 0 : style.height
+    })
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(IPCPlayer, {
+    objectFit: "fillCrop",
+    defaultMute: true,
+    devId: devId,
+    onlineStatus: true,
+    ipcPlayerContext: instance.IPCPlayerInstance
+    // updateLayout={`${playerLayout}`}
+    ,
+    onChangeStreamStatus: code => {
+      var _props$onPlayStatus;
+      const playStateMap = {
+        [PlayerStreamStatus.PreviewSuccess]: PlayState.PLAYING,
+        // 播放中
+        [PlayerStreamStatus.PAUSE]: PlayState.PAUSE // 暂停
+      };
+      const playState = playStateMap[code];
+      if (typeof playState !== 'undefined') {
+        setPlayState(playState);
+      }
+      (_props$onPlayStatus = props.onPlayStatus) === null || _props$onPlayStatus === void 0 || _props$onPlayStatus.call(props, {
+        playState,
+        playCode: code
+      });
+      instance.changeStreamStatus(code);
+    }
+    // onCtx={getIpcPlayer}
+    // onPlayerTap={handlePlayerClick}
+    ,
+    clarity: "hd",
+    privateState: false
+  })), /*#__PURE__*/React.createElement(CoverView, {
+    style: {
+      height: instance.screenType === 'vertical' ? '48px' : '69px'
+    },
+    className: clsx('ipc-player-top-content', playState === PlayState.PLAYING ? 'ipc-player-element-visible' : 'ipc-player-element-hidden')
+  }, (() => {
+    if (!topContent || !(topContent !== null && topContent !== void 0 && topContent.length)) return null;
+    return topContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
+      key: item.id
+    }, item.initProps), instance), {}, {
+      IPCPlayerContext: instance.IPCPlayerInstance
+    })));
+  })()), /*#__PURE__*/React.createElement(CoverView, {
+    style: {
+      height: instance.screenType === 'vertical' ? '48px' : '69px'
+    },
+    className: clsx('ipc-player-bottom-content', playState === PlayState.PLAYING ? 'ipc-player-element-visible' : 'ipc-player-element-hidden')
+  }, (() => {
+    if (!bottomContent || !(bottomContent !== null && bottomContent !== void 0 && bottomContent.length)) return null;
+    return bottomContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({}, item.initProps), {}, {
+      key: item.id
+    }, instance), {}, {
+      IPCPlayerContext: instance.IPCPlayerInstance
+    })));
+  })()), playState === PlayState.PLAYING && (() => {
+    if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
+    return absoluteContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
+      key: item.id
+    }, item.initProps), instance), {}, {
+      IPCPlayerContext: instance.IPCPlayerInstance
+    })));
+  })());
+};

package/lib/ui/ui.less

@@ -0,0 +1,44 @@
+.ipc-player-content {
+  position: relative;
+
+  &.ipc-player-content-full {
+    height: 100vw;
+  }
+
+  .ipc-player-top-content {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 0;
+    gap: 20rpx;
+    z-index: 2;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 11rpx;
+    font-size: 24rpx;
+    box-sizing: border-box;
+  }
+
+  .ipc-player-bottom-content {
+    position: absolute;
+    z-index: 2;
+    display: flex;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    align-items: center;
+    gap: 20rpx;
+    padding: 11rpx;
+    font-size: 24rpx;
+    box-sizing: border-box;
+  }
+}
+
+.ipc-player-element-visible {
+  visibility: visible !important;
+}
+
+.ipc-player-element-hidden {
+  visibility: hidden !important;
+}

package/lib/utils/authorize/index.d.ts

@@ -0,0 +1 @@
+export declare function authorizeStatus(scope: string): Promise<boolean>;

package/lib/utils/authorize/index.js

@@ -0,0 +1,31 @@
+import { authorizeStatus as _authorizeStatus, authorize } from '@ray-js/ray';
+const memory = {};
+export function authorizeStatus(scope) {
+  return new Promise(resolve => {
+    if (memory[scope]) {
+      resolve(true);
+      return;
+    }
+    _authorizeStatus({
+      scope,
+      success: () => {
+        memory[scope] = true;
+        resolve(true);
+      },
+      fail: () => {
+        authorize({
+          scope,
+          success: res => {
+            console.log('authorize success', res);
+            memory[scope] = true;
+            resolve(true);
+          },
+          fail: err => {
+            console.log('authorize fail', err);
+            resolve(false);
+          }
+        });
+      }
+    });
+  });
+}

package/lib/utils/content/dpCode.d.ts

@@ -0,0 +1,4 @@
+export declare const TEMP_UNIT_SELECT = "temp_unit_select";
+export declare const TEMP_REPORT_F = "temp_report_f";
+export declare const SENSOR_TEMPERATURE = "sensor_temperature";
+export declare const SENSOR_HUMIDITY = "sensor_humidity";

package/lib/utils/content/dpCode.js

@@ -0,0 +1,7 @@
+export const TEMP_UNIT_SELECT = 'temp_unit_select'; //  温度单位选择
+
+export const TEMP_REPORT_F = 'temp_report_f'; //  华氏度
+
+export const SENSOR_TEMPERATURE = 'sensor_temperature'; //  摄氏度
+
+export const SENSOR_HUMIDITY = 'sensor_humidity'; // 湿度

package/lib/utils/device/index.d.ts

@@ -0,0 +1,13 @@
+export declare function getDpValue<T extends string>(options: {
+    devId: string;
+    dps: T[];
+}): Promise<Record<T, number | string | boolean>>;
+export interface IDpCode {
+    code: string;
+    dpId: number;
+    value: string;
+    time: number;
+    type: string;
+}
+export declare function getDpCodeObj(devId: string, dpCode: string): Promise<IDpCode | undefined>;
+export declare function getDpIdsByCodes<T extends string>(devId: string, dpIds: T[]): Promise<Record<T, string>>;

package/lib/utils/device/index.js

@@ -0,0 +1,68 @@
+import { getDpsInfos } from '@ray-js/ray';
+export function getDpValue(options) {
+  return new Promise((resolve, reject) => {
+    ty.device.getDeviceInfo({
+      deviceId: options.devId,
+      success: res => {
+        console.log('res', res);
+        const {
+          dps
+        } = res;
+        // @ts-ignore
+        const ret = {};
+        options.dps.forEach(dpId => {
+          ret[dpId] = dps[dpId];
+        });
+        resolve(ret);
+      },
+      fail: err => {
+        reject(err); // eslint-disable-line
+      }
+    });
+  });
+}
+export function getDpCodeObj(devId, dpCode) {
+  return new Promise((resolve, reject) => {
+    getDpsInfos({
+      devId: devId,
+      gwId: devId
+    }).then(res => {
+      let result;
+      for (let i = 0; i < res.length; i++) {
+        const ele = res[i];
+        const {
+          code,
+          value
+        } = ele;
+        if (code === dpCode) {
+          result = ele;
+          break;
+        }
+      }
+      resolve(result);
+    }).catch(error => {
+      reject(error);
+    });
+  });
+}
+export function getDpIdsByCodes(devId) {
+  return new Promise((resolve, reject) => {
+    ty.device.getDeviceInfo({
+      deviceId: devId,
+      success: res => {
+        console.log('res', res);
+        // console.log('res', res);
+        // const { dps } = res;
+        // // @ts-ignore
+        // const ret: Record<T, any> = {};
+        // options.dps.forEach(dpId => {
+        //   ret[dpId] = dps[dpId];
+        // });
+        // resolve(ret);
+      },
+      fail: err => {
+        reject(err); // eslint-disable-line
+      }
+    });
+  });
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@ray-js/ipc-player-integration",
+  "version": "0.0.1-beta-1",
+  "description": "IPC 播放器功能集成",
+  "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 --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 -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",
+    "test": "yarn jest"
+  },
+  "peerDependencies": {
+    "@ray-js/ray": "^1.4.9"
+  },
+  "dependencies": {
+    "@ray-js/ray-ipc-player": "2.0.17-beta-beta-1",
+    "clsx": "^1.2.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^9.0.1",
+    "@ray-js/cli": "^1.4.9",
+    "@ray-js/panel-sdk": "^1.13.0-storage.7",
+    "@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.2",
+    "husky": "^1.2.0",
+    "lint-staged": "^10.2.11",
+    "standard-version": "9.3.2"
+  },
+  "resolutions": {
+    "@ray-js/builder-mp": "1.4.15"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{json,md,yml,yaml}": [
+      "prettier --write",
+      "git add"
+    ]
+  }
+}