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

package/README.md

@@ -0,0 +1,32 @@
+English | [简体中文](./README-zh_CN.md)
+
+# @ray-js/ipc-player-integration
+
+[![latest](https://img.shields.io/npm/v/@ray-js/ipc-player-integration/latest.svg)](https://www.npmjs.com/package/@ray-js/ipc-player-integration) [![download](https://img.shields.io/npm/dt/@ray-js/ipc-player-integration.svg)](https://www.npmjs.com/package/@ray-js/ipc-player-integration)
+
+> IPC 播放器功能集成
+
+## Installation
+
+```sh
+$ npm install @ray-js/ipc-player-integration
+# or
+$ yarn add @ray-js/ipc-player-integration
+```
+
+## Develop
+
+```sh
+# install deps
+yarn
+
+# watch compile demo
+yarn start:tuya
+```
+
+## Usage
+
+```tsx
+import Foo from '@ray-js/ipc-player-integration';
+export default () => <Foo />;
+```

package/lib/ctx/ctx.composition.d.ts

@@ -0,0 +1 @@
+export declare const useCtx: import("../interface").UseCtx;

package/lib/ctx/ctx.composition.js

@@ -0,0 +1,38 @@
+import { createUseCtx } from './ctx';
+import { Battery, Screenshot, TempHumidity, RecordVideo, FullScreen, VideoBitKbps, Muted } from '../plugins';
+const createPlayContext = ty.createIpcPlayerContext;
+// const createPlayContext = () => null;
+
+const topContent = [{
+  id: 'Battery',
+  content: Battery,
+  initProps: {
+    className: 1
+  }
+}, {
+  id: 'TempHumidity',
+  content: TempHumidity
+}, {
+  id: 'VideoBitKbps',
+  content: VideoBitKbps
+}];
+const absoluteContent = [];
+const bottomContent = [{
+  id: 'Screenshot',
+  content: Screenshot
+}, {
+  id: 'RecordVideo',
+  content: RecordVideo
+}, {
+  id: 'Muted',
+  content: Muted
+}, {
+  id: 'FullScreen',
+  content: FullScreen
+}];
+export const useCtx = createUseCtx({
+  createPlayContext,
+  defaultTopContent: topContent,
+  defaultAbsoluteContent: absoluteContent,
+  defaultBottomContent: bottomContent
+});

package/lib/ctx/ctx.d.ts

@@ -0,0 +1,10 @@
+import { ComponentConfig, UseCtx } from '../interface';
+import type { createPlayContext } from './ports.output';
+type Depend = {
+    createPlayContext: createPlayContext;
+    defaultTopContent?: ComponentConfig[];
+    defaultBottomContent?: ComponentConfig[];
+    defaultAbsoluteContent?: ComponentConfig[];
+};
+export declare const createUseCtx: ({ createPlayContext, defaultTopContent, defaultBottomContent, defaultAbsoluteContent, }: Depend) => UseCtx;
+export {};

package/lib/ctx/ctx.js

@@ -0,0 +1,159 @@
+import { useState, useRef } from 'react';
+import { authorizeStatus } from '../utils/authorize';
+import { PlayState } from '../interface';
+const SAVE_TO_ALBUM = 1;
+export const createUseCtx = _ref => {
+  let {
+    createPlayContext,
+    defaultTopContent,
+    defaultBottomContent,
+    defaultAbsoluteContent
+  } = _ref;
+  return _ref2 => {
+    let {
+      devId,
+      initTopContent,
+      initBottomContent,
+      initAbsoluteContent,
+      saveToAlbum = SAVE_TO_ALBUM
+    } = _ref2;
+    const streamStatus = useRef();
+    // 全屏、竖屏
+    const [screenType, setScreenType] = useState('vertical');
+    // 录像中
+    const [recording, setRecording] = useState(false);
+    // 静音
+    const [mute, setMute] = useState(false);
+    // 对讲中
+    const [intercom, setIntercom] = useState(false);
+    const [playState, setPlayState] = useState(PlayState.CONNECTING);
+    const [topContent, setTopContent] = useState(initTopContent || defaultTopContent || []);
+    const [bottomContent, setBottomContent] = useState(initBottomContent || defaultBottomContent || []);
+    const [absoluteContent, setAbsoluteContent] = useState(initAbsoluteContent || defaultAbsoluteContent || []);
+    const IPCPlayerInstance = useRef();
+    if (!IPCPlayerInstance.current) {
+      IPCPlayerInstance.current = createPlayContext(devId);
+    }
+    return {
+      devId,
+      saveToAlbum,
+      screenType,
+      recording,
+      mute,
+      intercom,
+      playState,
+      setPlayState,
+      setIntercom: async target => {
+        const res = await authorizeStatus('scope.record');
+        if (!res) return false;
+        return new Promise((resolve, reject) => {
+          if (target) {
+            IPCPlayerInstance.current.startTalk({
+              success: () => {
+                setIntercom(true);
+                resolve(true);
+              },
+              fail: err => {
+                reject(err);
+              }
+            });
+          } else {
+            IPCPlayerInstance.current.stopTalk({
+              success: () => {
+                setIntercom(false);
+                resolve(true);
+              },
+              fail: err => {
+                setIntercom(true);
+                reject(err);
+              }
+            });
+          }
+        });
+      },
+      setMute: async target => {
+        return new Promise((resolve, reject) => {
+          setMute(target);
+          IPCPlayerInstance.current.setMuted({
+            mute: target,
+            success: () => {
+              setMute(true);
+              resolve(true);
+            },
+            fail: err => {
+              setMute(!target);
+              reject(err);
+            }
+          });
+        });
+      },
+      setRecording: async target => {
+        const res = await authorizeStatus('scope.writePhotosAlbum');
+        if (!res) return false;
+        return new Promise((resolve, reject) => {
+          if (target) {
+            IPCPlayerInstance.current.startRecord({
+              saveToAlbum,
+              success: () => {
+                setRecording(true);
+                resolve(true);
+              },
+              fail: err => {
+                reject(err);
+              }
+            });
+          } else {
+            IPCPlayerInstance.current.stopRecord({
+              saveToAlbum,
+              success: () => {
+                setRecording(false);
+                resolve(true);
+              },
+              fail: err => {
+                setRecording(true);
+                reject(err);
+              }
+            });
+          }
+        });
+      },
+      setScreenType,
+      topContent,
+      bottomContent,
+      absoluteContent,
+      addContent: (type, config) => {
+        function createNewData(originData, newData) {
+          if (newData instanceof Array) return [...originData, ...newData];
+          return [...originData, newData];
+        }
+        if (type === 'top') {
+          setTopContent(createNewData(topContent, config));
+        } else if (type === 'bottom') {
+          setBottomContent(createNewData(bottomContent, config));
+        } else {
+          setAbsoluteContent(createNewData(absoluteContent, config));
+        }
+      },
+      deleteContent: (type, id) => {
+        let newData;
+        if (type === 'top') {
+          newData = topContent.filter(item => item.id !== id);
+          setTopContent(newData);
+        } else if (type === 'bottom') {
+          newData = bottomContent.filter(item => item.id !== id);
+          setBottomContent(newData);
+        } else {
+          newData = absoluteContent.filter(item => item.id !== id);
+          setAbsoluteContent(newData);
+        }
+      },
+      IPCPlayerInstance: IPCPlayerInstance.current,
+      changeStreamStatus: status => {
+        streamStatus.current = status;
+      },
+      getStreamStatus: () => {
+        return streamStatus.current;
+      }
+    };
+  };
+};

package/lib/ctx/ctx.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/ctx/ctx.test.js

@@ -0,0 +1,95 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import { createUseCtx } from './ctx';
+describe('createCtx', () => {
+  it('init props', () => {
+    const topContent = {
+      id: 'top',
+      content: () => null
+    };
+    const bottomContent = {
+      id: 'bottom',
+      content: () => null,
+      initProps: {
+        name: 1
+      }
+    };
+    const IPCPlayerContext = {
+      name: 'IPCPlayerContext'
+    };
+    const useCtx = createUseCtx({
+      createPlayContext: () => IPCPlayerContext,
+      defaultTopContent: [topContent],
+      defaultAbsoluteContent: [{
+        id: 'absolute',
+        content: () => null,
+        initProps: {
+          name: 2
+        }
+      }]
+    });
+    const {
+      result
+    } = renderHook(() => useCtx({
+      devId: 'devId',
+      initBottomContent: [bottomContent],
+      initAbsoluteContent: []
+    }));
+    expect(result.current.topContent).toEqual([topContent]);
+    expect(result.current.bottomContent).toEqual([bottomContent]);
+    expect(result.current.absoluteContent).toEqual([]);
+    expect(result.current.IPCPlayerInstance).toBe(IPCPlayerContext);
+  });
+  it('createCtx, add a content and delete content', () => {
+    const useCtx = createUseCtx({
+      createPlayContext: () => null
+    });
+    const {
+      result
+    } = renderHook(() => useCtx({
+      devId: 'devId'
+    }));
+    const topContent = {
+      id: 'top',
+      content: () => null
+    };
+    const bottomContent = {
+      id: 'bottom',
+      content: () => null,
+      initProps: {
+        name: 1
+      }
+    };
+    act(() => {
+      result.current.addContent('top', topContent);
+      result.current.addContent('bottom', bottomContent);
+    });
+    expect(result.current.topContent).toEqual([topContent]);
+    expect(result.current.bottomContent).toEqual([bottomContent]);
+    act(() => {
+      result.current.deleteContent('bottom', 'bottom');
+    });
+    expect(result.current.bottomContent).toEqual([]);
+  });
+  it('add content list', () => {
+    const useCtx = createUseCtx({
+      createPlayContext: () => null
+    });
+    const {
+      result
+    } = renderHook(() => useCtx({
+      devId: 'devId'
+    }));
+    const topContent1 = {
+      id: 'top1',
+      content: () => null
+    };
+    const topContent2 = {
+      id: 'top2',
+      content: () => null
+    };
+    act(() => {
+      result.current.addContent('top', [topContent1, topContent2]);
+    });
+    expect(result.current.topContent).toEqual([topContent1, topContent2]);
+  });
+});

package/lib/ctx/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ctx';
+export * from './ctx.composition';

package/lib/ctx/index.js

@@ -0,0 +1,2 @@
+export * from './ctx';
+export * from './ctx.composition';

package/lib/ctx/ports.output.d.ts

@@ -0,0 +1 @@
+export type createPlayContext = (devId: string) => IpcContext;

package/lib/ctx/ports.output.js

@@ -0,0 +1 @@
+export {};

package/lib/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useBattery';
+export * from './useHumidity';
+export * from './useTemperature';
+export * from './useVideoBitKbps';
+export * from './useDpState';

package/lib/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './useBattery';
+export * from './useHumidity';
+export * from './useTemperature';
+export * from './useVideoBitKbps';
+export * from './useDpState';

package/lib/hooks/useBattery/index.d.ts

@@ -0,0 +1,2 @@
+import type { UseBattery } from '../../ports.output';
+export declare const useBattery: UseBattery;

package/lib/hooks/useBattery/index.js

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import { useDpState } from '../useDpState';
+const POWER_MODE_DP_CODE = 'wireless_powermode';
+const POWER_VALUE_DP_CODE = 'wireless_electricity';
+export const useBattery = devId => {
+  const [dpState] = useDpState({
+    devId,
+    dpCodes: [POWER_MODE_DP_CODE, POWER_VALUE_DP_CODE]
+  });
+  const batteryInfo = useMemo(() => {
+    return {
+      batteryValue: dpState[POWER_VALUE_DP_CODE] || 0,
+      batteryCharging: dpState[POWER_MODE_DP_CODE] || false
+    };
+  }, [dpState]);
+  return batteryInfo;
+};

package/lib/hooks/useDpState/index.d.ts

@@ -0,0 +1 @@
+export * from './useDpState';

package/lib/hooks/useDpState/index.js

@@ -0,0 +1 @@
+export * from './useDpState';

package/lib/hooks/useDpState/useDpState.d.ts

@@ -0,0 +1,6 @@
+type Options<T> = {
+    devId: string;
+    dpCodes: T[];
+};
+export declare function useDpState<T extends string>(options: Options<T>): [Record<T, number | string | boolean>];
+export {};

package/lib/hooks/useDpState/useDpState.js

@@ -0,0 +1,79 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { getDeviceInfo, onDpDataChange, offDpDataChange } from '@ray-js/ray';
+function getInitData(codes) {
+  return codes.reduce((ret, key) => {
+    return _objectSpread(_objectSpread({}, ret), {}, {
+      [key]: undefined
+    });
+  }, {});
+}
+export function useDpState(options) {
+  const {
+    devId,
+    dpCodes
+  } = options;
+  const codeMapToIdRef = useRef();
+  const [values, setValues] = useState(() => {
+    return getInitData(options.dpCodes);
+  });
+  const valueRef = useRef(values);
+  if (valueRef.current !== values) {
+    valueRef.current = values;
+  }
+  const listenDpChange = useCallback(e => {
+    if (e.deviceId === devId) {
+      const {
+        dps
+      } = e;
+      let hasChange = false;
+      const newValue = _objectSpread({}, valueRef.current);
+      Object.keys(dps).forEach(dpId => {
+        const dpCode = codeMapToIdRef.current[dpId];
+        const currentValue = dps[dpId];
+        if (dpCode && typeof currentValue !== 'undefined') {
+          hasChange = hasChange || true;
+          newValue[dpCode] = currentValue;
+        }
+      });
+      if (hasChange) {
+        setValues(newValue);
+      }
+    }
+  }, [devId]);
+  useEffect(() => {
+    getDeviceInfo({
+      deviceId: devId,
+      success: res => {
+        const {
+          schema
+        } = res;
+        const IdMapToCode = {};
+        let count = 0;
+        for (const schemaItem of schema) {
+          // @ts-ignore
+          if (dpCodes.includes(schemaItem.code)) {
+            // @ts-ignore
+            IdMapToCode[schemaItem.id] = schemaItem.code;
+            count += 1;
+          }
+          if (count >= dpCodes.length) break;
+        }
+        codeMapToIdRef.current = IdMapToCode;
+        const initValue = options.dpCodes.reduce((ret, key) => {
+          return _objectSpread(_objectSpread({}, ret), {}, {
+            [key]: res.dpCodes[key]
+          });
+        }, {});
+        setValues(initValue);
+      }
+    });
+  }, [options.devId]);
+  useEffect(() => {
+    onDpDataChange(listenDpChange);
+    return () => {
+      offDpDataChange(listenDpChange);
+    };
+  }, [listenDpChange]);
+  return [values];
+}

package/lib/hooks/useHumidity/index.d.ts

@@ -0,0 +1 @@
+export declare const useHumidity: (devId: string) => string;

package/lib/hooks/useHumidity/index.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+import { useDpState } from '../useDpState';
+import { SENSOR_HUMIDITY } from '../../utils/content/dpCode';
+export const useHumidity = devId => {
+  const [humidity, setHumidity] = useState('');
+  const [dpState] = useDpState({
+    devId,
+    dpCodes: [SENSOR_HUMIDITY]
+  });
+  useEffect(() => {
+    if (dpState[SENSOR_HUMIDITY] !== undefined) {
+      setHumidity(dpState[SENSOR_HUMIDITY] + '%');
+    }
+  }, [dpState]);
+  return humidity;
+};

package/lib/hooks/useMuted/index.d.ts

@@ -0,0 +1 @@
+export declare const useMuted: () => number;

package/lib/hooks/useMuted/index.js

@@ -0,0 +1,3 @@
+export const useMuted = () => {
+  return 100;
+};

package/lib/hooks/useTemperature/index.d.ts

@@ -0,0 +1,5 @@
+export declare const useTemperature: (devId: string) => {
+    tempUnit: string;
+    tempC: string;
+    tempF: string;
+};

package/lib/hooks/useTemperature/index.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { TEMP_REPORT_F, TEMP_UNIT_SELECT, SENSOR_TEMPERATURE } from '../../utils/content/dpCode';
+import { useDpState } from '../useDpState';
+export const useTemperature = devId => {
+  const [tempUnit, setTempUnit] = useState('');
+  const [tempC, setTempC] = useState('');
+  const [tempF, setTempF] = useState('');
+  const [dpState] = useDpState({
+    devId,
+    dpCodes: [TEMP_UNIT_SELECT, SENSOR_TEMPERATURE, TEMP_REPORT_F]
+  });
+  useEffect(() => {
+    console.log('res===1', dpState);
+    //  1=华氏度  0=摄氏度
+    if (dpState[TEMP_UNIT_SELECT] !== undefined) {
+      setTempUnit(dpState[TEMP_UNIT_SELECT] + '');
+    }
+    if (dpState[SENSOR_TEMPERATURE] !== undefined) {
+      setTempC(dpState[SENSOR_TEMPERATURE] + '°C');
+    }
+    if (dpState[TEMP_REPORT_F] !== undefined) {
+      setTempF(dpState[TEMP_REPORT_F] + '°F');
+    }
+  }, [dpState]);
+  return {
+    tempUnit,
+    tempC,
+    tempF
+  };
+};

package/lib/hooks/useVideoBitKbps/index.d.ts

@@ -0,0 +1 @@
+export declare const useVideoBitKbps: (devId: string) => string;

package/lib/hooks/useVideoBitKbps/index.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+export const useVideoBitKbps = devId => {
+  const [bitKbps, setBitKbps] = useState('');
+  useEffect(() => {
+    // const timer = setInterval(() => {
+    init();
+    // }, 5000);
+    // return () => {
+    //   clearInterval(timer);
+    //   timer === null;
+    // };
+  }, []);
+  const init = async () => {
+    let res = await getVideoBitrateKbps();
+    console.log('res===bitKbps', res);
+    res += 'KB/S';
+    setBitKbps(res);
+  };
+  const getVideoBitrateKbps = () => {
+    return new Promise((resolve, reject) => {
+      ty.ipc.getVideoBitrateKbps({
+        devId,
+        extendParam: {},
+        success: _ref => {
+          let {
+            kpbs = '0'
+          } = _ref;
+          resolve(kpbs);
+        },
+        fail: _ref2 => {
+          let {
+            errorMsg,
+            errorCode
+          } = _ref2;
+          return reject(errorMsg);
+        }
+      });
+    }).catch(error => {
+      console.log('res===getVideoBitrateKbps', error);
+      return '0';
+    });
+  };
+  return bitKbps;
+};