@ray-js/ipc-player-integration 0.0.1-beta-12 → 0.0.1-beta-13

package/lib/ctx/ctx.composition.js

@@ -1,8 +1,10 @@
 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 { MuteMode } from '@ray-js/ray-ipc-utils/lib/interface';
 import { createUseCtx } from './ctx';
-import { Battery, Screenshot, TempHumidity, RecordVideo, FullScreen, VideoBitKbps, Muted, Resolution } from '../plugins';
+import { Battery, Screenshot, TempHumidity, RecordVideo, FullScreen, VideoBitKbps, Muted, Resolution, Ptz } from '../plugins';
 import { authorizeStatus } from '../utils/authorize';
 const createPlayContext = ty.createIpcPlayerContext;
 // const createPlayContext = () => null;
@@ -27,6 +29,9 @@ const bottomContent = [{
 }, {
   id: 'Muted',
   content: Muted
+}, {
+  id: 'Ptz',
+  content: Ptz
 }, {
   id: 'Resolution',
   content: Resolution
@@ -46,11 +51,48 @@ const toast = _ref => {
     icon: 'none'
   }, config));
 };
+const getMemoryState = devId => {
+  return new Promise(resolve => {
+    IPCUtils.getCameraConfigInfo(devId).then(res => {
+      if (res.code === -1) {
+        return resolve({
+          mute: true
+        });
+      }
+      const value = res.data.microphoneSettings.cachedMuteMode === MuteMode.OFF;
+      return resolve({
+        mute: value
+      });
+    }).catch(() => {
+      resolve({
+        mute: true
+      });
+    });
+  });
+};
+const setMuteMemoryState = (devId, value) => {
+  const storageKey = `${devId}_microphone`;
+  const originStorage = ty.getStorageSync({
+    key: storageKey
+  });
+  const newData = originStorage ? _objectSpread({}, originStorage) : null;
+  if (newData) {
+    const muteMode = value ? MuteMode.OFF : MuteMode.ON;
+    newData.cachedMuteMode = muteMode;
+    // @ts-ignore
+    ty.setStorageSync({
+      key: storageKey,
+      data: newData
+    });
+  }
+};
 export const useCtx = createUseCtx({
   createPlayContext,
   defaultTopContent: topContent,
   defaultAbsoluteContent: absoluteContent,
   defaultBottomContent: bottomContent,
   authorizeStatus: authorizeStatus,
-  toast
+  toast,
+  getMemoryState,
+  setMuteMemoryState
 });

package/lib/ctx/ctx.d.ts

@@ -1,5 +1,5 @@
 import { ComponentConfig, UseCtx } from '../interface';
-import type { createPlayContext, AuthorizeStatus, Toast } from './ports.output';
+import type { createPlayContext, AuthorizeStatus, Toast, GetMemoryState, SetMuteMemoryState } from './ports.output';
 type Depend = {
     createPlayContext: createPlayContext;
     defaultTopContent?: ComponentConfig[];
@@ -7,6 +7,8 @@ type Depend = {
     defaultAbsoluteContent?: ComponentConfig[];
     authorizeStatus: AuthorizeStatus;
     toast: Toast;
+    getMemoryState: GetMemoryState;
+    setMuteMemoryState: SetMuteMemoryState;
 };
-export declare const createUseCtx: ({ createPlayContext, defaultTopContent, defaultBottomContent, defaultAbsoluteContent, authorizeStatus, toast, }: Depend) => UseCtx;
+export declare const createUseCtx: ({ createPlayContext, defaultTopContent, defaultBottomContent, defaultAbsoluteContent, authorizeStatus, toast, getMemoryState, setMuteMemoryState, }: Depend) => UseCtx;
 export {};

package/lib/ctx/ctx.js

@@ -1,5 +1,5 @@
-import { useRef, useCallback } from 'react';
-import { useAtom, updateAtom, getDefaultStore } from './store';
+import { useRef, useCallback, useEffect } from 'react';
+import { useAtom, updateAtom, getDefaultStore, useStore } from './store';
 import { PlayState } from '../interface';
 const SAVE_TO_ALBUM = 1;
 export const createUseCtx = _ref => {
@@ -9,7 +9,9 @@ export const createUseCtx = _ref => {
     defaultBottomContent,
     defaultAbsoluteContent,
     authorizeStatus,
-    toast
+    toast,
+    getMemoryState,
+    setMuteMemoryState
   } = _ref;
   return _ref2 => {
     let {
@@ -25,12 +27,16 @@ export const createUseCtx = _ref => {
     // 录像中
     const recording = useAtom(false);
 
-    // 静音
+    // 静音 true 代表静音 false 代表不静音
     const mute = useAtom(false);
 
     // 清晰度
     const resolution = useAtom('HD');
 
+    // ptz 是否点击
+    const ptzActive = useAtom(false);
+    // 全屏清晰度UI切换是否展示
+    const fullResolutionActive = useAtom(false);
     // 对讲中
     const intercom = useAtom(false);
     const playState = useAtom(PlayState.CONNECTING);
@@ -40,10 +46,50 @@ export const createUseCtx = _ref => {
     const topContent = useAtom(initTopContent || defaultTopContent || []);
     const bottomContent = useAtom(initBottomContent || defaultBottomContent || []);
     const absoluteContent = useAtom(initAbsoluteContent || defaultAbsoluteContent || []);
+    const {
+      _playState
+    } = useStore({
+      _playState: playState
+    });
+    useEffect(() => {
+      if (devId && _playState === PlayState.PLAYING) {
+        // 获取缓存的值且同步
+        getMemoryState(devId).then(res => {
+          _setMute(res.mute);
+        });
+      }
+    }, [devId, _playState]);
     const IPCPlayerInstance = useRef();
     if (!IPCPlayerInstance.current) {
       IPCPlayerInstance.current = createPlayContext(devId);
     }
+    const _setMute = async target => {
+      return new Promise((resolve, reject) => {
+        IPCPlayerInstance.current.setMuted({
+          mute: target,
+          success: () => {
+            console.log('=== set mute success ===', target);
+            setMuteMemoryState(devId, target);
+            updateAtom(mute, target);
+            resolve(true);
+          },
+          fail: err => {
+            IPCPlayerInstance.current.isMuted({
+              success(res) {
+                console.log('==== 当前静音状态 ====', res);
+                updateAtom(mute, res);
+              }
+            });
+            reject(err);
+            const errObj = err.innerError || err || {};
+            const errMsg = errObj.errorMsg || I18n.t('error_setMute');
+            toast({
+              title: errMsg
+            });
+          }
+        });
+      });
+    };
 
     /**
      * 设置清晰度
@@ -57,6 +103,8 @@ export const createUseCtx = _ref => {
       recording,
       mute,
       resolution,
+      ptzActive,
+      fullResolutionActive,
       intercom,
       playState,
       setPlayState,
@@ -98,22 +146,7 @@ export const createUseCtx = _ref => {
           }
         });
       },
-      setMute: async target => {
-        return new Promise((resolve, reject) => {
-          updateAtom(mute, target);
-          IPCPlayerInstance.current.setMuted({
-            mute: target,
-            success: () => {
-              updateAtom(mute, target);
-              resolve(true);
-            },
-            fail: err => {
-              updateAtom(mute, !target);
-              reject(err);
-            }
-          });
-        });
-      },
+      setMute: _setMute,
       setResolution: async target => {
         console.log('执行清晰度方法');
         return new Promise((resolve, reject) => {
@@ -171,6 +204,12 @@ export const createUseCtx = _ref => {
           }
         });
       },
+      setPtzActive: value => {
+        updateAtom(ptzActive, value);
+      },
+      setFullResolutionActive: value => {
+        updateAtom(fullResolutionActive, value);
+      },
       setScreenType: value => {
         updateAtom(screenType, value);
       },

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

@@ -1,3 +1,7 @@
 export type { Toast } from '../ports.output';
 export type createPlayContext = (devId: string) => IpcContext;
 export type AuthorizeStatus = (type: string) => Promise<boolean>;
+export type GetMemoryState = (devId: string) => Promise<{
+    mute: boolean;
+}>;
+export type SetMuteMemoryState = (devId: string, value: boolean) => void;

package/lib/interface.d.ts

@@ -36,12 +36,16 @@ export type UseCtx = (options: {
     recording: RetAtom<boolean>;
     mute: RetAtom<boolean>;
     intercom: RetAtom<boolean>;
+    ptzActive: RetAtom<boolean>;
+    fullResolutionActive: RetAtom<boolean>;
     playState: RetAtom<PlayState>;
     IPCPlayerInstance: IpcContext;
     topContent: RetAtom<ComponentConfig[]>;
     bottomContent: RetAtom<ComponentConfig[]>;
     absoluteContent: RetAtom<ComponentConfig[]>;
     setScreenType: (type: ScreenType) => void;
+    setPtzActive: (type: boolean) => void;
+    setFullResolutionActive: (type: boolean) => void;
     setRecording: (value: boolean) => Promise<boolean>;
     setIntercom: (value: boolean) => Promise<boolean>;
     setMute: (value: boolean) => Promise<boolean>;

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

@@ -8,12 +8,16 @@ export declare const Battery: import("react").FunctionComponent<{
     recording: import("../..").RetAtom<boolean>;
     mute: import("../..").RetAtom<boolean>;
     intercom: import("../..").RetAtom<boolean>;
+    ptzActive: import("../..").RetAtom<boolean>;
+    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>>[]>;
     setScreenType: (type: import("../..").ScreenType) => void;
+    setPtzActive: (type: boolean) => void;
+    setFullResolutionActive: (type: boolean) => void;
     setRecording: (value: boolean) => Promise<boolean>;
     setIntercom: (value: boolean) => Promise<boolean>;
     setMute: (value: boolean) => Promise<boolean>;

package/lib/plugins/fullScreen/fullScreen.js

@@ -1,20 +1,22 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useContext } from 'react';
 import { View, setPageOrientation } from '@ray-js/ray';
+import { useUpdateEffect } from 'ahooks';
+import clsx from 'clsx';
 import { UIEventContext } from '../../ui/context';
-import { startTimeToHideAllComponent, showAllComponent } from '../../ui/constant';
+import { startTimeToHideAllComponent, showAllComponent, voiceIntercomId, verticalScreenId, ptzControlId, fullResolutionId } from '../../ui/constant';
 import { useStore } from '../../ctx/store';
 import { VerticalScreen } from './verticalScreen';
 import { VoiceIntercom } from './voiceIntercom';
 import './fullScreen.less';
-const VerticalScreenId = 'VerticalScreen';
-const VoiceIntercomId = 'VoiceIntercom';
 export function FullScreen(props) {
   const {
     screenType: screenTypeAtom,
     setScreenType,
     addContent,
-    deleteContent
+    deleteContent,
+    setPtzActive,
+    setFullResolutionActive
   } = props;
   const {
     screenType
@@ -24,7 +26,15 @@ export function FullScreen(props) {
   const {
     event
   } = useContext(UIEventContext);
-  const handFull = () => {
+
+  /**
+   * 竖屏统一操作
+   */
+
+  /**
+   * 全屏统一操作
+   */
+  const handleFull = () => {
     ty.hideMenuButton();
     ty.hideStatusBar();
     ty.setNavigationBarBack({
@@ -33,7 +43,7 @@ export function FullScreen(props) {
 
     // 添加全屏后，返回竖屏的控件
     addContent('top', {
-      id: VerticalScreenId,
+      id: verticalScreenId,
       content: VerticalScreen,
       initProps: _objectSpread(_objectSpread({}, props), {}, {
         onClick: () => {
@@ -44,33 +54,54 @@ export function FullScreen(props) {
     });
     // 全屏后，添加语音对讲控件
     addContent('absolute', {
-      id: VoiceIntercomId,
+      id: voiceIntercomId,
       content: props => {
         return /*#__PURE__*/React.createElement(View, {
-          className: "ipc-player-plugin-full-screen-voice"
+          className: clsx('ipc-player-plugin-full-screen-voice')
         }, /*#__PURE__*/React.createElement(VoiceIntercom, props));
       },
       absoluteContentClassName: 'ipc-player-plugin-full-screen-voice-warp',
       initProps: _objectSpread({}, props)
     });
   };
+
+  /**
+   * 针对横竖屏方法统一集中处理
+   */
+  const handlers = {
+    full: () => {
+      handleFull();
+      event.emit(startTimeToHideAllComponent);
+    },
+    vertical: () => {
+      ty.setNavigationBarBack({
+        type: 'system'
+      });
+      ty.showMenuButton();
+      ty.showStatusBar();
+      deleteContent('top', verticalScreenId);
+      deleteContent('absolute', voiceIntercomId);
+      deleteContent('absolute', ptzControlId);
+      deleteContent('absolute', fullResolutionId);
+      // 还原Ptz点击状态值
+      setPtzActive(false);
+      // 还原全屏清晰度状态值
+      setFullResolutionActive(false);
+    }
+  };
+  useUpdateEffect(() => {
+    var _handlers$screenType;
+    (_handlers$screenType = handlers[screenType]) === null || _handlers$screenType === void 0 || _handlers$screenType.call(handlers);
+  }, [screenType]);
   const handClick = target => {
     const pageOrientation = target === 'vertical' ? 'portrait' : 'landscape';
-    setScreenType(target);
     setPageOrientation({
       pageOrientation,
       success: () => {
+        setScreenType(target);
         if (target === 'full') {
-          handFull();
-          event.emit(startTimeToHideAllComponent);
-        } else {
-          ty.setNavigationBarBack({
-            type: 'system'
-          });
-          ty.showMenuButton();
-          ty.showStatusBar();
-          deleteContent('top', VerticalScreenId);
-          deleteContent('absolute', VoiceIntercomId);
+          // handFull();
+          // event.emit(startTimeToHideAllComponent);
         }
       }
     });

package/lib/plugins/fullScreen/voiceIntercom.js

@@ -9,9 +9,13 @@ import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../
 import { useStore } from '../../ctx/store';
 export function VoiceIntercom(props) {
   const {
-    screenType
+    screenType,
+    isPtzActive,
+    fullResolutionActive
   } = useStore({
-    screenType: props.screenType
+    screenType: props.screenType,
+    isPtzActive: props.ptzActive,
+    fullResolutionActive: props.fullResolutionActive
   });
   const [shouldHide] = useComponentHideState(screenType);
   const {
@@ -19,7 +23,7 @@ export function VoiceIntercom(props) {
   } = useContext(UIEventContext);
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-plugin-full-screen-voice', {
-      'ipc-player-plugin-full-screen-voice-hide': shouldHide
+      'ipc-player-plugin-full-screen-voice-hide': shouldHide || isPtzActive || fullResolutionActive
     })
   }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
     onTouchStart: () => {

package/lib/plugins/index.d.ts

@@ -6,4 +6,5 @@ export * from './fullScreen';
 export * from './videoBitKbps';
 export * from './voiceIntercom';
 export * from './muted';
+export * from './ptz';
 export * from './resolution';

package/lib/plugins/index.js

@@ -6,4 +6,5 @@ export * from './fullScreen';
 export * from './videoBitKbps';
 export * from './voiceIntercom';
 export * from './muted';
+export * from './ptz';
 export * from './resolution';

package/lib/plugins/muted/muted.js

@@ -1,44 +1,29 @@
 import { View, Text } from '@ray-js/ray';
-import React, { useEffect } from 'react';
-import { useStore, updateAtom } from '../../ctx/store';
+import React from 'react';
+import { useStore } from '../../ctx/store';
 import './muted.less';
 export const Muted = props => {
   const {
-    IPCPlayerContext,
-    mute
+    mute,
+    setMute
   } = props;
   const {
     isMuted
   } = useStore({
     isMuted: mute
   });
-  const setIsMuted = value => {
-    updateAtom(mute, value);
-  };
-  useEffect(() => {
-    init();
-  }, []);
-  const init = () => {
-    IPCPlayerContext.isMuted({
-      success: res => {
-        setIsMuted(res);
-      },
-      fail: res => {
-        console.log('res===isMuted err', res);
-      }
-    });
-  };
   return /*#__PURE__*/React.createElement(View, {
     onClick: () => {
-      IPCPlayerContext.setMuted({
-        mute: !isMuted,
-        success: () => {
-          setIsMuted(!isMuted);
-        },
-        fail: res => {
-          console.log('res===setMuted err', res);
-        }
-      });
+      // IPCPlayerContext.setMuted({
+      //   mute: !isMuted,
+      //   success: res => {
+      //     setIsMuted(!isMuted);
+      //   },
+      //   fail: res => {
+      //     console.log('res===setMuted err', res);
+      //   },
+      // });
+      setMute(!isMuted);
     },
     style: {
       display: 'flex'

package/lib/plugins/ptz/index.d.ts

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

package/lib/plugins/ptz/index.js

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

package/lib/plugins/ptz/ptz.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './ptz.less';
+export declare const Ptz: (props: ComponentConfigProps) => React.JSX.Element | null;

package/lib/plugins/ptz/ptz.js

@@ -0,0 +1,67 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import React, { useEffect } from 'react';
+import { useStore, updateAtom } from '../../ctx/store';
+import { ptzControlId } from '../../ui/constant';
+import './ptz.less';
+import { PtzControl } from './ptzControl';
+export const Ptz = props => {
+  const {
+    IPCPlayerContext,
+    screenType: screenTypeAtom,
+    ptzActive,
+    addContent,
+    deleteContent
+  } = props;
+  const {
+    screenType,
+    isPtzActive
+  } = useStore({
+    screenType: screenTypeAtom,
+    isPtzActive: ptzActive
+  });
+  useEffect(() => {
+    // init();
+  }, []);
+
+  // const init = () => {
+  //   IPCPlayerContext.isMuted({
+  //     success: res => {
+  //       setIsMuted(res);
+  //     },
+  //     fail: res => {
+  //       console.log('res===isMuted err', res);
+  //     },
+  //   });
+  // };
+
+  if (screenType === 'vertical') {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    onClick: () => {
+      if (!isPtzActive) {
+        // 添加ptz空间
+        addContent('absolute', {
+          id: ptzControlId,
+          content: props => {
+            return /*#__PURE__*/React.createElement(View, {
+              className: "ipc-player-plugin-full-screen-ptz-control"
+            }, /*#__PURE__*/React.createElement(PtzControl, props));
+          },
+          absoluteContentClassName: 'ipc-player-plugin-full-screen-ptz-control-warp',
+          initProps: _objectSpread({}, props)
+        });
+      } else {
+        deleteContent('absolute', ptzControlId);
+      }
+      updateAtom(ptzActive, !isPtzActive);
+    },
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('ipc-player-plugin-ptz-text-icon', 'icon-panel', 'icon-panel-ptz', isPtzActive && 'ipc-ptz-active')
+  }));
+};

package/lib/plugins/ptz/ptz.less

@@ -0,0 +1,42 @@
+.ipc-player-plugin-ptz-text-icon {
+  color: var(--iconColor);
+  font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
+}
+
+.ipc-ptz-active {
+  color: var(--iconActiveColor);
+}
+
+// .ipc-player-plugin-full-screen-ptz {
+//   position: absolute;
+//   top: 60%;
+//   transform: translateY(-50%);
+//   right: calc(16px * var(--ipc-player-size-scale, 1));
+//   color: var(--iconColor);
+//   font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
+// }
+
+.ipc-player-plugin-full-screen-ptz-control-warp {
+  position: absolute;
+  bottom: 10px;
+  // transform: translate(0, -20%);
+  right: calc(10px * var(--ipc-player-size-scale, 1));;
+  z-index: 3;
+}
+
+
+
+.ipc-player-plugin-full-screen-ptz-control {
+  transform: translate(0, 0);
+  transition: transform ease-in 0.3s;
+  &.ipc-player-plugin-full-screen-ptz-control-hide {
+    transform: translate(0, 200%);
+  }
+}
+
+.arrow-icon-wrapper {
+  font-size: 12px;
+  color: #707070;
+}
+
+

package/lib/plugins/ptz/ptzControl.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './ptz.less';
+export declare const PtzControl: (props: ComponentConfigProps) => React.JSX.Element;

package/lib/plugins/ptz/ptzControl.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useContext } from 'react';
+import { CoverView } from '@ray-js/ray';
+import clsx from 'clsx';
+import IpcPtzZoom from '@ray-js/ipc-ptz-zoom';
+import { useComponentHideState } from '../../ui/hooks';
+import { UIEventContext } from '../../ui/context';
+import { useStore } from '../../ctx/store';
+import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
+import './ptz.less';
+export const PtzControl = props => {
+  const {
+    screenType
+  } = useStore({
+    screenType: props.screenType
+  });
+  const [shouldHide] = useComponentHideState(screenType);
+  const {
+    event
+  } = useContext(UIEventContext);
+  return /*#__PURE__*/React.createElement(CoverView, _extends({
+    className: clsx('ipc-player-plugin-full-screen-ptz-control', {
+      'ipc-player-plugin-full-screen-ptz-control-hide': shouldHide
+    })
+  }, props), /*#__PURE__*/React.createElement(IpcPtzZoom, {
+    ptzSize: "172px",
+    zoomData: [],
+    ptzData: [{
+      type: 'top',
+      // show: getEnumRangeIsValid('ptz_control', '0'),
+      show: true,
+      dpValue: '0',
+      icon: 'ptz-arrow'
+    }, {
+      type: 'right',
+      // show: getEnumRangeIsValid('ptz_control', '2'),
+      show: true,
+      dpValue: '2',
+      icon: 'ptz-arrow'
+    }, {
+      type: 'left',
+      // show: getEnumRangeIsValid('ptz_control', '6'),
+      show: true,
+      dpValue: '6',
+      icon: 'ptz-arrow'
+    }, {
+      type: 'bottom',
+      // show: getEnumRangeIsValid('ptz_control', '4'),
+      show: true,
+      dpValue: '4',
+      icon: 'ptz-arrow'
+    }],
+    onTouchPtzStart: data => {
+      console.log(data, 'data');
+      event.emit(pauseTimeToHideAllComponent);
+    },
+    onTouchPtzEnd: () => {
+      console.log('dsads');
+      event.emit(startTimeToHideAllComponent);
+    },
+    brandColor: "red",
+    iconClassName: clsx('arrow-icon-wrapper')
+  }));
+};

package/lib/plugins/resolution/fullResolutionControl.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './resolution.less';
+export declare const FullResolutionControl: (props: ComponentConfigProps) => React.JSX.Element;

package/lib/plugins/resolution/fullResolutionControl.js

@@ -0,0 +1,31 @@
+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 { 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 {
+    screenType,
+    fullResolutionActive
+  } = useStore({
+    screenType: props.screenType,
+    fullResolutionActive: props.fullResolutionActive
+  });
+  const [shouldHide] = useComponentHideState(screenType);
+  const {
+    event
+  } = useContext(UIEventContext);
+  return /*#__PURE__*/React.createElement(View, _extends({
+    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"));
+};

package/lib/plugins/resolution/resolution.js

@@ -1,19 +1,34 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { View, Text } from '@ray-js/ray';
-import React, { useEffect } from 'react';
-import { useStore } from '../../ctx/store';
+import clsx from 'clsx';
+import React, { useContext, useEffect } from 'react';
+import { FullResolutionControl } from './fullResolutionControl';
+import { fullResolutionId, pauseTimeToHideAllComponent } from '../../ui/constant';
+import { UIEventContext } from '../../ui/context';
+import { useStore, updateAtom } from '../../ctx/store';
 import './resolution.less';
 export const Resolution = props => {
-  console.log(props, 'props');
   const {
     IPCPlayerContext,
     resolution,
-    setResolution
+    setResolution,
+    screenType: screenTypeAtom,
+    fullResolutionActive,
+    addContent
   } = props;
   const {
-    currentResolution
+    currentResolution,
+    screenType,
+    isFullResolutionActive
   } = useStore({
-    currentResolution: resolution
+    currentResolution: resolution,
+    screenType: screenTypeAtom,
+    isFullResolutionActive: fullResolutionActive
   });
+  const {
+    event
+  } = useContext(UIEventContext);
+  console.log(screenType, 'screenType');
   // const setIsMuted = (value: typeof currentResolution) => {
   //   // updateAtom(mute, value);
   // };
@@ -23,19 +38,24 @@ export const Resolution = props => {
   }, []);
   return /*#__PURE__*/React.createElement(View, {
     onClick: () => {
-      console.log('_____');
+      if (screenType === 'full') {
+        // 添加全屏清晰度空间
+        addContent('absolute', {
+          id: fullResolutionId,
+          content: props => {
+            return /*#__PURE__*/React.createElement(FullResolutionControl, props);
+          },
+          absoluteContentClassName: 'ipc-player-plugin-full-resolution-control-wrap',
+          initProps: _objectSpread({}, props)
+        });
+        updateAtom(fullResolutionActive, true);
+        event.emit(pauseTimeToHideAllComponent);
+        return false;
+      }
       setResolution(currentResolution === 'HD' ? 'normal' : 'hd');
-      // // IPCPlayerContext.setMuted({
-      // //   mute: !isMuted,
-      // //   success: res => {
-      // //     setIsMuted(!isMuted);
-      // //   },
-      // //   fail: res => {
-      // //     console.log('res===setMuted err', res);
-      // //   },
-      // // });
+      return true;
     },
-    className: "resolutionWrapper"
+    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));

package/lib/plugins/resolution/resolution.less

@@ -1,15 +1,51 @@
-.resolutionWrapper {
+.ipc-player-plugin-resolution {
   background-color: rgba(255,255,255,0.2);
-  padding: 2px 4px;
+  padding: calc(2px * var(--ipc-player-size-scale, 1)) calc(4px * var(--ipc-player-size-scale, 1));
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 8rpx;
+  border-radius: calc(8px * var(--ipc-player-size-scale, 1));
   backdrop-filter: blur(8rpx);
   .resolutionText {
-    color: #ffffff;
+    color: var(--iconColor);
     font-weight: 600;
-    font-size: 24rpx;
-    
+    font-size: calc(12px * var(--ipc-player-size-scale, 1));
   }
-}
+}
+
+.ipc-player-plugin-full-resolution-control {
+  transform: translate(0, 0);
+  height: 100%;
+  transition: transform 0.3s ease-in, opacity 0.3s ease-in, width 0.3s ease-in;
+  width: 200px; 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0,0,0,0.9);
+    &.ipc-player-plugin-full-resolution-control-hide {
+      transform: translate(300%, 0);
+      opacity: 0;
+      width: 0;
+  }
+}
+
+.ipc-player-plugin-full-resolution-control-wrap {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // transform: translate(200%, 0);
+  z-index: 3;
+}
+
+.ipc-player-plugin-full-resolution-control-text {
+  font-size: 14px;
+  font-weight: 400;
+  text-align: center;
+  color: #ffffff;
+  min-height: 40px;
+}

package/lib/ui/bottomContent.js

@@ -9,10 +9,12 @@ export function BottomContent(_ref) {
     children
   } = _ref;
   const {
-    screenType
+    screenType,
+    fullResolutionActive
   } = useStore({
     screenType: ctx.screenType,
-    playState: ctx.playState
+    playState: ctx.playState,
+    fullResolutionActive: ctx.fullResolutionActive
   });
   const [shouldHide] = useComponentHideState(screenType);
   return /*#__PURE__*/React.createElement(CoverView, {
@@ -24,7 +26,7 @@ export function BottomContent(_ref) {
       '--gap': '25px'
     },
     className: clsx('ipc-player-content-item', 'ipc-player-bottom-content', {
-      'ipc-player-bottom-content-hide': shouldHide
+      'ipc-player-bottom-content-hide': shouldHide || fullResolutionActive
     })
   }, children));
 }

package/lib/ui/constant.d.ts

@@ -3,3 +3,7 @@ export declare const hideAllComponent = "hideAllComponent";
 export declare const playerTap = "playerTap";
 export declare const pauseTimeToHideAllComponent = "pauseTimeToHideAllComponent";
 export declare const startTimeToHideAllComponent = "startTimeToHideAllComponent";
+export declare const voiceIntercomId = "voiceIntercomId";
+export declare const verticalScreenId = "verticalScreenId";
+export declare const ptzControlId = "ptzControlId";
+export declare const fullResolutionId = "fullResolutionId";

package/lib/ui/constant.js

@@ -2,4 +2,8 @@ export const showAllComponent = 'showAllComponent';
 export const hideAllComponent = 'hideAllComponent';
 export const playerTap = 'playerTap';
 export const pauseTimeToHideAllComponent = 'pauseTimeToHideAllComponent';
-export const startTimeToHideAllComponent = 'startTimeToHideAllComponent';
+export const startTimeToHideAllComponent = 'startTimeToHideAllComponent';
+export const voiceIntercomId = 'voiceIntercomId';
+export const verticalScreenId = 'verticalScreenId';
+export const ptzControlId = 'ptzControlId';
+export const fullResolutionId = 'fullResolutionId';

package/lib/ui/topContent.js

@@ -9,10 +9,12 @@ export function TopContent(_ref) {
     children
   } = _ref;
   const {
-    screenType
+    screenType,
+    fullResolutionActive
   } = useStore({
     screenType: ctx.screenType,
-    playState: ctx.playState
+    playState: ctx.playState,
+    fullResolutionActive: ctx.fullResolutionActive
   });
   const [shouldHide] = useComponentHideState(screenType);
   return /*#__PURE__*/React.createElement(CoverView, {
@@ -24,7 +26,7 @@ export function TopContent(_ref) {
       '--gap': '16px'
     },
     className: clsx('ipc-player-content-item', 'ipc-player-top-content', {
-      'ipc-player-top-content-hide': shouldHide
+      'ipc-player-top-content-hide': shouldHide || fullResolutionActive
     })
   }, children));
 }

package/lib/ui/ui.d.ts

@@ -4,6 +4,7 @@ import './ui.less';
 type CtxInstance = ReturnType<UseCtx>;
 type CSSVariable = {
     '--iconColor': string;
+    '--iconActiveColor': string;
     '--iconFontSize': string;
     '--bg-color': string;
     '--fontColor': string;

package/lib/ui/ui.js

@@ -1,5 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useRef, useMemo, useEffect, useCallback } from 'react';
+import React, { useContext, useRef, useMemo, useEffect, useCallback } from 'react';
 import { View, CoverView, getSystemInfoSync, usePageEvent } from '@ray-js/ray';
 import clsx from 'clsx';
 import IPCPlayer from '@ray-js/ray-ipc-player';
@@ -24,6 +24,8 @@ function getCtxInstance(instance, devId) {
 
 const defaultCSSVariable = {
   '--iconColor': '#fff',
+  // 有需要点击呈现不同颜色的icon
+  '--iconActiveColor': '#ec653c',
   '--iconFontSize': '20px',
   '--bg-color': '#000',
   '--fontColor': '#fff',
@@ -42,7 +44,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   console.log(instance, 'instance');
   const {
     setPlayState,
-    setScreenType
+    setScreenType,
+    setFullResolutionActive
   } = instance;
   const prevTriggerEvent = useRef();
   const eventRef = useRef();
@@ -50,6 +53,9 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   if (!eventRef.current) {
     eventRef.current = getEventInstance();
   }
+  const {
+    event
+  } = useContext(UIEventContext);
 
   /**
    * 监听屏幕布局变化
@@ -70,13 +76,15 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     bottomContent,
     absoluteContent,
     screenType,
-    playState
+    playState,
+    fullResolutionActive
   } = useStore({
     topContent: instance.topContent,
     bottomContent: instance.bottomContent,
     absoluteContent: instance.absoluteContent,
     screenType: instance.screenType,
-    playState: instance.playState
+    playState: instance.playState,
+    fullResolutionActive: instance.fullResolutionActive
   });
   const renderTopContent = useMemo(() => {
     if (!topContent || !(topContent !== null && topContent !== void 0 && topContent.length)) return null;
@@ -105,13 +113,22 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     const _screenType = store.get(instance.screenType);
     eventRef.current.emit(playerTap);
     if (_screenType === 'full') {
+      // 如果全屏清晰度展开, 则点击关闭全屏清晰度, 展示所有组件
+      if (fullResolutionActive) {
+        setFullResolutionActive(false);
+        // 展示相应菜单启动自动隐藏定时
+        triggerEvent(showAllComponent);
+        // event.emit(startTimeToHideAllComponent);
+        return false;
+      }
       if (prevTriggerEvent.current === hideAllComponent) {
         triggerEvent(showAllComponent);
       } else {
         triggerEvent(hideAllComponent);
       }
     }
-  }, []);
+    return false;
+  }, [fullResolutionActive]);
   const triggerEvent = type => {
     const store = getDefaultStore();
     const _screenType = store.get(instance.screenType);
@@ -225,6 +242,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     ctx: instance
   }, renderBottomContent), playerReady && (() => {
     if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
+    console.log(absoluteContent, 'absoluteContent');
     return absoluteContent.map(item => {
       return /*#__PURE__*/React.createElement(CoverView, {
         key: item.id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-12",
+  "version": "0.0.1-beta-13",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -36,7 +36,8 @@
   },
   "dependencies": {
     "@ray-js/ray-ipc-player": "2.0.18-beta-beta-1",
-    "@ray-js/ray-ipc-utils": "1.1.0-beta-7",
+    "@ray-js/ray-ipc-utils": "1.1.0-beta-12",
+    "@ray-js/ipc-ptz-zoom": "0.0.2-beta-1",
     "clsx": "^1.2.1",
     "jotai": "^2.10.2"
   },