@ray-js/ipc-player-integration 0.0.1-beta-14 → 0.0.1-beta-16

package/lib/ctx/ctx.composition.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["title", "duration"];
 import IPCUtils from '@ray-js/ray-ipc-utils';
-import { IntercomMode, MuteMode } from '@ray-js/ray-ipc-utils/lib/interface';
+import { IntercomMode, MuteMode, ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import { createUseCtx } from './ctx';
 import { Battery, Screenshot, TempHumidity, RecordVideo, FullScreen, VideoBitKbps, Muted, Resolution, Ptz } from '../plugins';
 import { authorizeStatus } from '../utils/authorize';
@@ -54,17 +54,22 @@ const toast = _ref => {
 const getMemoryState = devId => {
   const defaultValue = {
     mute: true,
-    intercomMode: IntercomMode.TwoWay
+    intercomMode: IntercomMode.TwoWay,
+    resolution: ClarityType.HD,
+    resolutionList: [ClarityType.HD, ClarityType.SD]
   };
   return new Promise(resolve => {
     IPCUtils.getCameraConfigInfo(devId).then(res => {
       if (res.code === -1) {
         return resolve(defaultValue);
       }
-      const value = res.data.microphoneSettings.cachedMuteMode === MuteMode.OFF;
+      console.log(res, '========');
+      const muteValue = res.data.microphoneSettings.cachedMuteMode === MuteMode.OFF;
       return resolve({
-        mute: value,
-        intercomMode: res.data.intercomInfo.cachedIntercomMode
+        mute: muteValue,
+        intercomMode: res.data.intercomInfo.cachedIntercomMode,
+        resolution: res.data.videoResolution.cachedResolution,
+        resolutionList: res.data.videoResolution.availableResolutions
       });
     }).catch(() => {
       resolve(defaultValue);

package/lib/ctx/ctx.js

@@ -1,6 +1,7 @@
 import { useRef, useCallback, useEffect } from 'react';
 import { useAtom, updateAtom, getDefaultStore, useStore } from './store';
 import { PlayState, IntercomMode } from '../interface';
+import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 const SAVE_TO_ALBUM = 1;
 export const createUseCtx = _ref => {
   let {
@@ -31,12 +32,17 @@ export const createUseCtx = _ref => {
     // 静音 true 代表静音 false 代表不静音
     const [mute] = useAtom(false);
 
-    // 清晰度
-    const [resolution] = useAtom('HD');
+    // 品牌色 默认
+    const [brandColor, setBrandColor] = useAtom('#FF592A');
 
     // ptz 是否点击
     const [ptzActive, setPtzActive] = useAtom(false);
 
+    // resolution 当前清晰度
+    const [resolution] = useAtom('HD');
+    // resolution 清晰度列表
+    const [resolutionList, setResolutionList] = useAtom([]);
+
     // 单向对讲还是双向对讲
     const [intercomMode, setIntercomMode] = useAtom(IntercomMode.TwoWay);
 
@@ -64,6 +70,8 @@ export const createUseCtx = _ref => {
           console.log('==== getMemoryState ====', res);
           _setMute(res.mute);
           setIntercomMode(res.intercomMode);
+          _setResolution(res.resolution, 'res.resolution');
+          setResolutionList(res.resolutionList);
         });
       }
     }, [devId, _playState]);
@@ -103,20 +111,40 @@ export const createUseCtx = _ref => {
      * 设置清晰度
      *
      */
-
+    const _setResolution = async target => {
+      // target 为需要切换的清晰度
+      return new Promise((resolve, reject) => {
+        IPCPlayerInstance.current.setClarity({
+          clarity: target === ClarityType.HD ? 'hd' : 'normal',
+          success: () => {
+            console.log('setClarity success', target);
+            updateAtom(resolution, target);
+            resolve(true);
+          },
+          fail: err => {
+            console.log(err, 'setClarity err');
+            // updateAtom(mute, !target);
+            reject(err);
+          }
+        });
+      });
+    };
     return {
       devId,
+      brandColor,
       saveToAlbum,
       screenType,
       recording,
       mute,
       resolution,
+      resolutionList,
       ptzActive,
       fullResolutionActive,
       intercom,
       intercomMode,
       playState,
       setPlayState,
+      setBrandColor,
       setIntercom: async target => {
         const store = getDefaultStore();
         const _intercom = store.get(intercom);
@@ -156,24 +184,8 @@ export const createUseCtx = _ref => {
         });
       },
       setMute: _setMute,
-      setResolution: async target => {
-        console.log('执行清晰度方法');
-        return new Promise((resolve, reject) => {
-          IPCPlayerInstance.current.setClarity({
-            clarity: target,
-            success: () => {
-              console.log('setClarity success');
-              updateAtom(resolution, target === 'hd' ? 'HD' : 'SD');
-              resolve(true);
-            },
-            fail: err => {
-              console.log('setClarity err');
-              // updateAtom(mute, !target);
-              reject(err);
-            }
-          });
-        });
-      },
+      setResolution: _setResolution,
+      setResolutionList,
       setRecording: async target => {
         const store = getDefaultStore();
         const _recording = store.get(recording);

package/lib/i18n/index.d.ts

@@ -0,0 +1,22 @@
+import { kit } from '@ray-js/panel-sdk';
+declare const Strings: kit.I18N<{
+    en: {
+        ipc_player_resolution_HD: string;
+        ipc_player_resolution_SD: string;
+        ipc_player_current_resolution_is_equal: string;
+    };
+    zh: {
+        ipc_player_resolution_HD: string;
+        ipc_player_resolution_SD: string;
+        ipc_player_current_resolution_is_equal: string;
+    };
+}, {
+    ipc_player_resolution_HD: string;
+    ipc_player_resolution_SD: string;
+    ipc_player_current_resolution_is_equal: string;
+} | {
+    ipc_player_resolution_HD: string;
+    ipc_player_resolution_SD: string;
+    ipc_player_current_resolution_is_equal: string;
+}>;
+export default Strings;

package/lib/i18n/index.js

@@ -0,0 +1,7 @@
+import { kit } from '@ray-js/panel-sdk';
+import strings from './strings';
+const {
+  I18N
+} = kit;
+const Strings = new I18N(strings);
+export default Strings;

package/lib/i18n/strings.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    en: {
+        ipc_player_resolution_HD: string;
+        ipc_player_resolution_SD: string;
+        ipc_player_current_resolution_is_equal: string;
+    };
+    zh: {
+        ipc_player_resolution_HD: string;
+        ipc_player_resolution_SD: string;
+        ipc_player_current_resolution_is_equal: string;
+    };
+};
+export default _default;

package/lib/i18n/strings.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    ipc_player_resolution_HD: 'HD',
+    ipc_player_resolution_SD: 'SD',
+    ipc_player_current_resolution_is_equal: 'Already at current clarity'
+  },
+  zh: {
+    ipc_player_resolution_HD: '高清',
+    ipc_player_resolution_SD: '标清',
+    ipc_player_current_resolution_is_equal: '已是当前清晰度'
+  }
+};

package/lib/interface.d.ts

@@ -32,6 +32,7 @@ export type UseCtx = (options: {
     saveToAlbum?: 0 | 1;
 }) => {
     devId: string;
+    brandColor: string;
     saveToAlbum: 0 | 1;
     screenType: RetAtom<ScreenType>;
     recording: RetAtom<boolean>;
@@ -39,14 +40,19 @@ export type UseCtx = (options: {
     intercom: RetAtom<boolean>;
     intercomMode: RetAtom<IntercomMode>;
     ptzActive: RetAtom<boolean>;
+    resolution: RetAtom<string>;
+    resolutionList: RetAtom<string[]>;
     fullResolutionActive: RetAtom<boolean>;
     playState: RetAtom<PlayState>;
     IPCPlayerInstance: IpcContext;
     topContent: RetAtom<ComponentConfig[]>;
     bottomContent: RetAtom<ComponentConfig[]>;
     absoluteContent: RetAtom<ComponentConfig[]>;
+    setBrandColor: (color: string) => void;
     setScreenType: (type: ScreenType) => void;
     setPtzActive: (type: boolean) => void;
+    setResolution: (type: string) => void;
+    setResolutionList: (type: string[]) => void;
     setFullResolutionActive: (type: boolean) => void;
     setRecording: (value: boolean) => Promise<boolean>;
     setIntercom: (value: boolean) => Promise<boolean>;

package/lib/plugins/battery/battery.composition.d.ts

@@ -3,6 +3,7 @@ export declare const Battery: import("react").FunctionComponent<{
     IPCPlayerContext: IpcContext;
 } & {
     devId: string;
+    brandColor: string;
     saveToAlbum: 0 | 1;
     screenType: import("../..").RetAtom<import("../..").ScreenType>;
     recording: import("../..").RetAtom<boolean>;
@@ -10,14 +11,19 @@ export declare const Battery: import("react").FunctionComponent<{
     intercom: import("../..").RetAtom<boolean>;
     intercomMode: import("../..").RetAtom<import("@ray-js/ray-ipc-utils/lib/interface").IntercomMode>;
     ptzActive: import("../..").RetAtom<boolean>;
+    resolution: import("../..").RetAtom<string>;
+    resolutionList: import("../..").RetAtom<string[]>;
     fullResolutionActive: import("../..").RetAtom<boolean>;
     playState: import("../..").RetAtom<import("../..").PlayState>;
     IPCPlayerInstance: IpcContext;
     topContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
     bottomContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
     absoluteContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    setBrandColor: (color: string) => void;
     setScreenType: (type: import("../..").ScreenType) => void;
     setPtzActive: (type: boolean) => void;
+    setResolution: (type: string) => void;
+    setResolutionList: (type: string[]) => void;
     setFullResolutionActive: (type: boolean) => void;
     setRecording: (value: boolean) => Promise<boolean>;
     setIntercom: (value: boolean) => Promise<boolean>;

package/lib/plugins/ptz/ptzControl.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import { CoverView } from '@ray-js/ray';
 import clsx from 'clsx';
@@ -10,19 +9,21 @@ import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../
 import './ptz.less';
 export const PtzControl = props => {
   const {
-    screenType
+    screenType,
+    brandColor
   } = useStore({
-    screenType: props.screenType
+    screenType: props.screenType,
+    brandColor: props.brandColor
   });
   const [shouldHide] = useComponentHideState(screenType);
   const {
     event
   } = useContext(UIEventContext);
-  return /*#__PURE__*/React.createElement(CoverView, _extends({
+  return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-plugin-full-screen-ptz-control', {
       'ipc-player-plugin-full-screen-ptz-control-hide': shouldHide
     })
-  }, props), /*#__PURE__*/React.createElement(IpcPtzZoom, {
+  }, /*#__PURE__*/React.createElement(IpcPtzZoom, {
     ptzSize: "172px",
     zoomData: [],
     ptzData: [{
@@ -58,7 +59,7 @@ export const PtzControl = props => {
       console.log('dsads');
       event.emit(startTimeToHideAllComponent);
     },
-    brandColor: "red",
+    brandColor: brandColor,
     iconClassName: clsx('arrow-icon-wrapper')
   }));
 };

package/lib/plugins/resolution/fullResolutionControl.js

@@ -1,31 +1,56 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import { Text, View } from '@ray-js/ray';
 import clsx from 'clsx';
+import Strings from '../../i18n';
 import { useComponentHideState } from '../../ui/hooks';
 import { UIEventContext } from '../../ui/context';
 import { useStore } from '../../ctx/store';
 import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
 import './resolution.less';
 export const FullResolutionControl = props => {
+  const {
+    setResolution,
+    setFullResolutionActive
+  } = props;
   const {
     screenType,
-    fullResolutionActive
+    fullResolutionActive,
+    resolution,
+    resolutionList,
+    brandColor
   } = useStore({
     screenType: props.screenType,
-    fullResolutionActive: props.fullResolutionActive
+    fullResolutionActive: props.fullResolutionActive,
+    resolutionList: props.resolutionList,
+    brandColor: props.brandColor,
+    resolution: props.resolution
   });
+  console.log(resolutionList, 'resolutionList');
   const [shouldHide] = useComponentHideState(screenType);
   const {
     event
   } = useContext(UIEventContext);
-  return /*#__PURE__*/React.createElement(View, _extends({
+  const changeResolution = value => {
+    if (value === resolution) {
+      ty.showToast({
+        icon: 'none',
+        title: Strings.getLang('ipc_player_current_resolution_is_equal')
+      });
+    } else {
+      setResolution(value);
+      setFullResolutionActive(false);
+    }
+  };
+  return /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-full-resolution-control', {
       'ipc-player-plugin-full-resolution-control-hide': shouldHide || !fullResolutionActive
     })
-  }, props), /*#__PURE__*/React.createElement(Text, {
-    className: clsx('ipc-player-plugin-full-resolution-control-text')
-  }, "\u9AD8\u6E05"), /*#__PURE__*/React.createElement(Text, {
-    className: clsx('ipc-player-plugin-full-resolution-control-text')
-  }, "\u6807\u6E05"));
+  }, resolutionList.map(item => /*#__PURE__*/React.createElement(Text, {
+    onClick: () => changeResolution(item),
+    key: item,
+    className: clsx('ipc-player-plugin-full-resolution-control-text'),
+    style: item === resolution && {
+      color: brandColor
+    }
+  }, I18n.t(`ipc_player_resolution_${item}`))));
 };

package/lib/plugins/resolution/resolution.js

@@ -1,41 +1,31 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { View, Text } from '@ray-js/ray';
 import clsx from 'clsx';
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
+import Strings from '../../i18n';
 import { FullResolutionControl } from './fullResolutionControl';
 import { fullResolutionId, pauseTimeToHideAllComponent } from '../../ui/constant';
 import { UIEventContext } from '../../ui/context';
-import { useStore, updateAtom } from '../../ctx/store';
+import { useStore } from '../../ctx/store';
 import './resolution.less';
 export const Resolution = props => {
   const {
     IPCPlayerContext,
-    resolution,
     setResolution,
-    screenType: screenTypeAtom,
-    fullResolutionActive,
-    addContent
+    addContent,
+    setFullResolutionActive
   } = props;
   const {
-    currentResolution,
-    screenType,
-    isFullResolutionActive
+    resolution,
+    screenType
   } = useStore({
-    currentResolution: resolution,
-    screenType: screenTypeAtom,
-    isFullResolutionActive: fullResolutionActive
+    resolution: props.resolution,
+    screenType: props.screenType,
+    fullResolutionActive: props.fullResolutionActive
   });
   const {
     event
   } = useContext(UIEventContext);
-  console.log(screenType, 'screenType');
-  // const setIsMuted = (value: typeof currentResolution) => {
-  //   // updateAtom(mute, value);
-  // };
-
-  useEffect(() => {
-    // init();
-  }, []);
   return /*#__PURE__*/React.createElement(View, {
     onClick: () => {
       if (screenType === 'full') {
@@ -48,15 +38,15 @@ export const Resolution = props => {
           absoluteContentClassName: 'ipc-player-plugin-full-resolution-control-wrap',
           initProps: _objectSpread({}, props)
         });
-        updateAtom(fullResolutionActive, true);
+        setFullResolutionActive(true);
         event.emit(pauseTimeToHideAllComponent);
         return false;
       }
-      setResolution(currentResolution === 'HD' ? 'normal' : 'hd');
+      setResolution(resolution === 'HD' ? 'SD' : 'HD');
       return true;
     },
     className: clsx('ipc-player-plugin-resolution', screenType === 'vertical' ? 'ipc-player-plugin-resolution-vertical' : 'ipc-player-plugin-resolution-full')
   }, /*#__PURE__*/React.createElement(Text, {
     className: "resolutionText"
-  }, currentResolution));
+  }, Strings.getLang(`ipc_player_resolution_${resolution}`)));
 };

package/lib/plugins/resolution/resolution.less

@@ -38,6 +38,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  background-color: transparent;
   // transform: translate(200%, 0);
   z-index: 3;
 }
@@ -48,4 +49,5 @@
   text-align: center;
   color: #ffffff;
   min-height: 40px;
+  width: 100%;
 }

package/lib/ui/ui.d.ts

@@ -16,6 +16,8 @@ type Props = {
     className?: string;
     onPlayStatus?: (data: PlayStatusData) => void;
     style?: React.CSSProperties;
+    privateState?: boolean;
+    deviceOnline?: boolean;
     CSSVariable?: Partial<CSSVariable>;
 };
 export declare const IPCPlayerIntegration: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;

package/lib/ui/ui.js

@@ -38,10 +38,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     className,
     devId,
     style,
-    CSSVariable = defaultCSSVariable
+    CSSVariable = defaultCSSVariable,
+    privateState = false,
+    deviceOnline = true
   } = props;
   const instance = getCtxInstance(props.instance, devId);
-  console.log(instance, 'instance');
   const {
     setPlayState,
     setScreenType,
@@ -184,7 +185,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     objectFit: "",
     defaultMute: true,
     devId: devId,
-    onlineStatus: true,
+    onlineStatus: deviceOnline,
     ipcPlayerContext: instance.IPCPlayerInstance,
     onChangeStreamStatus: code => {
       var _props$onPlayStatus;
@@ -234,7 +235,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       }, 3000);
     },
     clarity: "hd",
-    privateState: false,
+    privateState: privateState,
     onPlayerTap: handPlayerTap // 对应原来的onVideoTap
   }), playerReady && /*#__PURE__*/React.createElement(TopContent, {
     ctx: instance

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-14",
+  "version": "0.0.1-beta-16",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [