@ray-js/ipc-player-integration 0.0.1-beta-35 → 0.0.1-beta-37

package/lib/ctx/ctx.composition.js

@@ -75,7 +75,6 @@ const getMemoryState = devId => {
       if (res.code === -1) {
         return resolve(defaultValue);
       }
-      console.log(res, '========');
       const muteValue = res.data.microphoneSettings.cachedMuteMode === MuteMode.OFF;
       return resolve({
         mute: muteValue,

package/lib/ctx/ctx.js

@@ -3,6 +3,7 @@ import Strings from '../i18n';
 import { useAtom, updateAtom, getDefaultStore, useStore } from './store';
 import { PlayState, IntercomMode } from '../interface';
 import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
+import { getEventInstance } from './event';
 const SAVE_TO_ALBUM = 1;
 export const createUseCtx = _ref => {
   let {
@@ -70,6 +71,10 @@ export const createUseCtx = _ref => {
     } = useStore({
       _playState: playState
     });
+    const eventRef = useRef();
+    if (!eventRef.current) {
+      eventRef.current = getEventInstance();
+    }
     useEffect(() => {
       if (devId && _playState === PlayState.PLAYING) {
         // 获取缓存的值且同步
@@ -77,8 +82,8 @@ export const createUseCtx = _ref => {
           console.log('==== getMemoryState ====', res);
           _setMute(res.mute);
           setIntercomMode(res.intercomMode);
-          _setResolution(res.resolution);
           setResolutionList(res.resolutionList);
+          _setResolution(res.resolution);
         });
       }
     }, [devId, _playState]);
@@ -335,7 +340,8 @@ export const createUseCtx = _ref => {
       getStreamStatus: () => {
         return streamStatus.current;
       },
-      toast
+      toast,
+      event: eventRef.current
     };
   };
 };

package/lib/ctx/event.d.ts

@@ -0,0 +1,8 @@
+type Task = (...args: any[]) => void;
+export type EventInstance = {
+    on: (type: string, cb: Task) => void;
+    off: (type: string, cb: Task) => void;
+    emit: (type: string, ...args: any[]) => void;
+};
+export declare function getEventInstance(): EventInstance;
+export {};

package/lib/ctx/event.js

@@ -0,0 +1,26 @@
+export function getEventInstance() {
+  const map = {};
+  return {
+    on(type, cb) {
+      if (!map[type]) {
+        map[type] = [];
+      }
+      map[type].push(cb);
+    },
+    off(type, cb) {
+      if (map[type]) {
+        map[type] = map[type].filter(item => item !== cb);
+      }
+    },
+    emit(type) {
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+      if (map[type]) {
+        map[type].forEach(cb => {
+          cb && cb.apply(null, args); // eslint-disable-line
+        });
+      }
+    }
+  };
+}

package/lib/interface.d.ts

@@ -25,6 +25,12 @@ export declare const enum PlayState {
     PAUSE = 2
 }
 export type ContentPlaceType = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'absolute';
+type Task = (...args: any[]) => void;
+export type EventInstance = {
+    on: (type: string, cb: Task) => void;
+    off: (type: string, cb: Task) => void;
+    emit: (type: string, ...args: any[]) => void;
+};
 export type UseCtx = (options: {
     devId: string;
     initTopLeftContent?: ComponentConfig[];
@@ -71,6 +77,7 @@ export type UseCtx = (options: {
     hideContent: (type: ContentPlaceType, id: string) => void;
     showContent: (type: ContentPlaceType, id: string) => void;
     toast: Toast;
+    event: EventInstance;
 };
 export type ComponentConfig<T = ReturnType<UseCtx> & Record<string, any>> = {
     id: string;

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

@@ -39,6 +39,7 @@ export declare const Battery: import("react").FunctionComponent<{
     hideContent: (type: import("../..").ContentPlaceType, id: string) => void;
     showContent: (type: import("../..").ContentPlaceType, id: string) => void;
     toast: import("../../ports.output").Toast;
+    event: import("../../interface").EventInstance;
 } & {
     className?: string | undefined;
 }>;
@@ -82,6 +83,7 @@ export declare const BatteryFull: import("react").FunctionComponent<{
     hideContent: (type: import("../..").ContentPlaceType, id: string) => void;
     showContent: (type: import("../..").ContentPlaceType, id: string) => void;
     toast: import("../../ports.output").Toast;
+    event: import("../../interface").EventInstance;
 } & {
     className?: string | undefined;
 }>;

package/lib/plugins/battery/battery.less

@@ -4,9 +4,8 @@
   height: calc(24px * var(--ipc-player-size-scale, 1));
   padding: 0 calc(9px * var(--ipc-player-size-scale, 1));
   border-radius: calc(24px * var(--ipc-player-size-scale, 1));
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  // backdrop-filter: blur(10px);
   
   .ipc-player-plugin-battery-border {
     position: relative;

package/lib/plugins/fullScreen/fullScreen.js

@@ -93,19 +93,17 @@ export function FullScreen(props) {
       handleFull();
     },
     vertical: () => {
-      event.emit(pauseTimeToHideAllComponent);
       ty.setNavigationBarBack({
         type: 'system'
       });
-      ty.showMenuButton();
-      ty.showStatusBar();
       event.emit(pauseTimeToHideAllComponent);
-      deleteContent('topLeft', verticalScreenId);
       deleteContent('absolute', voiceIntercomId);
       deleteContent('absolute', ptzControlId);
+      deleteContent('topLeft', verticalScreenId);
       deleteContent('absolute', fullResolutionId);
       deleteContent('absolute', fullTravelRouteControlId);
-      // 还原全屏清晰度状态值
+      ty.showMenuButton();
+      ty.showStatusBar();
     }
   };
   useUpdateEffect(() => {

package/lib/plugins/ptz/ptz.less

@@ -49,6 +49,12 @@
     }
 }
 
+.ipc-player-plugin-full-screen-ptz-disappear {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
 .arrow-icon-wrapper {
   font-size: 25px;
   color: #707070;

package/lib/plugins/ptz/ptzControl.js

@@ -72,7 +72,8 @@ export const PtzControl = props => {
   }, []);
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-plugin-full-screen-ptz-control', {
-      'ipc-player-plugin-full-screen-ptz-control-hide': shouldHide || !isPtzActive
+      'ipc-player-plugin-full-screen-ptz-control-hide': shouldHide || !isPtzActive,
+      'ipc-player-plugin-full-screen-ptz-disappear': screenType === 'vertical'
     })
   }, /*#__PURE__*/React.createElement(IpcPtzZoom, {
     ptzSize: "172px",

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

@@ -4,7 +4,7 @@ import './resolution.less';
 export type ChangeResolutionWhenClick = ScreenType[];
 type Props = ComponentConfigProps & {
     className?: string;
-    changeResolutionWhenClick?: ChangeResolutionWhenClick;
+    verticalResolutionCustomClick?: boolean;
 };
 export declare const Resolution: (props: Props) => React.JSX.Element;
 export {};

package/lib/plugins/resolution/resolution.js

@@ -2,13 +2,13 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { View, Text } from '@ray-js/ray';
 import clsx from 'clsx';
 import React, { useContext } from 'react';
+import { useMemoizedFn } from 'ahooks';
 import Strings from '../../i18n';
 import { FullResolutionControl } from './fullResolutionControl';
 import { fullResolutionId, pauseTimeToHideAllComponent, hideAllComponent } from '../../ui/constant';
 import { UIEventContext } from '../../ui/context';
 import { useStore } from '../../ctx/store';
 import './resolution.less';
-const defaultChangeResolutionWhenClick = ['full'];
 export const Resolution = props => {
   const {
     IPCPlayerContext,
@@ -16,7 +16,7 @@ export const Resolution = props => {
     addContent,
     hasContent,
     className,
-    changeResolutionWhenClick = defaultChangeResolutionWhenClick
+    verticalResolutionCustomClick
   } = props;
   const {
     resolution,
@@ -28,32 +28,33 @@ export const Resolution = props => {
   const {
     event
   } = useContext(UIEventContext);
-  return /*#__PURE__*/React.createElement(View, {
-    onClick: () => {
-      event.emit('resolutionBtnControlClick');
-      if (!(changeResolutionWhenClick !== null && changeResolutionWhenClick !== void 0 && changeResolutionWhenClick.length)) return false;
-      if (screenType === 'full' && defaultChangeResolutionWhenClick.includes(screenType)) {
-        event.emit(hideAllComponent);
-        if (hasContent('absolute', fullResolutionId)) {
-          event.emit('showFullResolutionControl');
-        } else {
-          addContent('absolute', {
-            id: fullResolutionId,
-            content: props => {
-              return /*#__PURE__*/React.createElement(FullResolutionControl, props);
-            },
-            absoluteContentClassName: 'ipc-player-plugin-full-resolution-control-wrap',
-            initProps: _objectSpread({}, props)
-          });
-        }
-        return false;
-      }
-      if (screenType === 'vertical' && defaultChangeResolutionWhenClick.includes(screenType)) {
-        setResolution(resolution === 'HD' ? 'SD' : 'HD');
+  const onResolution = useMemoizedFn(() => {
+    event.emit('resolutionBtnControlClick');
+    if (screenType === 'full') {
+      event.emit(hideAllComponent);
+      if (hasContent('absolute', fullResolutionId)) {
+        event.emit('showFullResolutionControl');
+      } else {
+        addContent('absolute', {
+          id: fullResolutionId,
+          content: props => {
+            return /*#__PURE__*/React.createElement(FullResolutionControl, props);
+          },
+          absoluteContentClassName: 'ipc-player-plugin-full-resolution-control-wrap',
+          initProps: _objectSpread({}, props)
+        });
       }
-      event.emit(pauseTimeToHideAllComponent);
-      return true;
-    },
+      return false;
+    }
+    if (verticalResolutionCustomClick) return false;
+    if (screenType === 'vertical') {
+      setResolution(resolution === 'HD' ? 'SD' : 'HD');
+    }
+    event.emit(pauseTimeToHideAllComponent);
+    return true;
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    onClick: onResolution,
     className: clsx(className, screenType === 'vertical' ? 'ipc-player-plugin-resolution-vertical' : 'ipc-player-plugin-resolution-full')
   }, /*#__PURE__*/React.createElement(View, {
     className: "ipc-player-plugin-resolution"

package/lib/plugins/tempHumidity/tempHumidity.js

@@ -48,9 +48,9 @@ export const TempHumidity = props => {
     className: clsx('ipc-player-plugin-tempHumidity')
   }, (() => {
     if ((tempC || tempUnit === '1' && tempF) && humidity) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, tempRender(), /*#__PURE__*/React.createElement(Text, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, tempRender(), /*#__PURE__*/React.createElement(View, {
         className: "ipc-player-plugin-tempHumidity-divider"
-      }, "/"), humRender());
+      }), humRender());
     }
     if (tempC || tempUnit === '1' && tempF) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, tempRender());

package/lib/plugins/tempHumidity/tempHumidity.less

@@ -6,13 +6,16 @@
     border-radius: calc(24px * var(--ipc-player-size-scale, 1));
     color: var(--iconColor);
     font-size: calc(12px * var(--ipc-player-size-scale, 1));
-    background-color: rgba(255, 255, 255, 0.3);
+    background-color: rgba(255, 255, 255, 0.2);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .ipc-player-plugin-tempHumidity-divider {
-    margin: calc(4px * var(--ipc-player-size-scale, 1));
-    color: var(--iconColor);
+    margin: calc(6px * var(--ipc-player-size-scale, 1));
+    color: rgba(0,0,0,0.2);
+    width: calc(1px * var(--ipc-player-size-scale, 1));
+    height: calc(12px * var(--ipc-player-size-scale, 1));
+    background-color: rgba(255, 255, 255, 0.2);
 }
 
 // .text-icon-tempHumidity {

package/lib/plugins/videoBitKBP/videoBitKBP.less

@@ -6,6 +6,6 @@
     border-radius: calc(24px * var(--ipc-player-size-scale, 1));
     color: var(--iconColor);
     font-size: calc(12px * var(--ipc-player-size-scale, 1));
-    background-color: rgba(255, 255, 255, 0.3);
+    background-color: rgba(255, 255, 255, 0.2);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

package/lib/plugins/voiceIntercom/voiceIntercom.js

@@ -30,6 +30,8 @@ export const VoiceIntercom = props => {
   } = props;
   const [frame, setFrame] = useState(0);
   const talkingInterval = useRef(null);
+  // 每帧间隔（ms）
+
   const {
     event
   } = useContext(UIEventContext);
@@ -79,18 +81,43 @@ export const VoiceIntercom = props => {
     await setIntercom(false);
     event.emit(startTimeToHideAllComponent);
   };
+  // 获取 requestAnimationFrame 和兼容性回退
+  const requestFrame = callback => {
+    if (typeof requestAnimationFrame !== 'undefined') {
+      return requestAnimationFrame(callback);
+    }
+    return setTimeout(callback, 30); // 使用 setTimeout 模拟帧更新
+  };
+  const cancelFrame = id => {
+    if (typeof cancelAnimationFrame !== 'undefined') {
+      cancelAnimationFrame(id);
+    } else {
+      clearTimeout(id); // 清除 setTimeout
+    }
+  };
+
   /**
    * 处理对讲中动画
    */
   useEffect(() => {
-    if (intercom) {
-      talkingInterval.current = setInterval(() => {
-        setFrame(prevFrame => (prevFrame + 1) % 124); // 循环播放帧
-      }, 30); // 每帧间隔 15ms，加快动画速度
-    } else {
-      talkingInterval.current && clearInterval(talkingInterval.current);
-    }
-    return () => clearInterval(talkingInterval.current);
+    const updateFrame = () => {
+      setFrame(prevFrame => (prevFrame + 1) % 124);
+      talkingInterval.current = requestFrame(updateFrame);
+    };
+    const stopAnimation = () => {
+      if (talkingInterval.current) {
+        cancelFrame(talkingInterval.current);
+        talkingInterval.current = null;
+      }
+    };
+    intercom ? (() => {
+      if (!talkingInterval.current) {
+        talkingInterval.current = requestFrame(updateFrame);
+      }
+    })() : stopAnimation();
+    return () => {
+      stopAnimation();
+    };
   }, [intercom]);
 
   // 根据当前帧和矩形索引计算高度

package/lib/ui/bottomLeftContent.js

@@ -19,7 +19,7 @@ const BottomLeftContent = _ref => {
     className: clsx('ipc-player-bottom-left-content-wrap')
   }, /*#__PURE__*/React.createElement(View, {
     style: {
-      paddingBottom: screenType === 'vertical' ? '14px' : '20px',
+      paddingBottom: screenType === 'vertical' ? '14px' : '32px',
       paddingLeft: screenType === 'vertical' ? 0 : '25px'
     },
     className: clsx('ipc-player-bottom-left-content-container', {

package/lib/ui/bottomRightContent.js

@@ -19,7 +19,7 @@ const BottomRightContent = _ref => {
     className: clsx('ipc-player-bottom-right-content-wrap')
   }, /*#__PURE__*/React.createElement(View, {
     style: {
-      paddingBottom: screenType === 'vertical' ? '14px' : '20px',
+      paddingBottom: screenType === 'vertical' ? '14px' : '32px',
       paddingRight: screenType === 'vertical' ? 0 : '25px'
     },
     className: clsx('ipc-player-bottom-right-content-container', {

package/lib/ui/ui.js

@@ -1,12 +1,11 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useContext, useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
+import React, { useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
 import { View, CoverView, getSystemInfoSync, usePageEvent } 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 { useStore } from '../ctx/store';
-import { getEventInstance } from './event';
 import { UIEventContext } from './context';
 import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent } from './constant';
 import BottomLeftContent from './bottomLeftContent';
@@ -67,19 +66,16 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   */
   const [componentHideState, setComponentHideState] = useState(false);
   prevTriggerEvent.current = componentHideState ? hideAllComponent : showAllComponent;
-  const eventRef = useRef();
+  const eventRef = useRef(instance.event);
+  if (eventRef.current !== instance.event) {
+    eventRef.current = instance.event;
+  }
   useImperativeHandle(eventRefProp, () => eventRef.current, [eventRef.current]);
   const timer = useRef();
-  if (!eventRef.current) {
-    eventRef.current = getEventInstance();
-  }
   useEffect(() => {
     setBrandColor(brandColor);
     setVerticalMic(verticalMic);
   }, []);
-  const {
-    event
-  } = useContext(UIEventContext);
 
   /**
    * 监听屏幕布局变化
@@ -159,9 +155,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     }, instance), {}, {
       IPCPlayerContext: instance.IPCPlayerInstance,
       // 添加通用变量单独组件类名
-      className: clsx('bottom-left-item-container')
+      className: clsx('bottom-left-item-container', {
+        'bottom-left-item-full-container': screenType === 'full'
+      })
     })));
-  }, [bottomLeftContent, instance]);
+  }, [bottomLeftContent, instance, screenType]);
 
   /**
    * 渲染播放器右下角内容
@@ -181,6 +179,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    * 视频流加载状态封装
    */
 
+  const disablePlayerTap = useRef(false);
+  const handDisablePlayerTap = value => {
+    disablePlayerTap.current = !!value;
+  };
   const triggerEvent = type => {
     if (prevTriggerEvent.current === type) return;
     if (timer.current) {
@@ -220,11 +222,13 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     eventRef.current.on(pauseTimeToHideAllComponent, listenPause);
     eventRef.current.on(showAllComponent, listenShowEvent);
     eventRef.current.on(hideAllComponent, listenHideEvent);
+    eventRef.current.on('disablePlayerTap', handDisablePlayerTap);
     return () => {
       eventRef.current.off(startTimeToHideAllComponent, listenStart);
       eventRef.current.off(pauseTimeToHideAllComponent, listenPause);
       eventRef.current.off(showAllComponent, listenShowEvent);
       eventRef.current.off(hideAllComponent, listenHideEvent);
+      eventRef.current.off('disablePlayerTap', handDisablePlayerTap);
     };
   }, []);
   const playerReady = playState === PlayState.PLAYING;
@@ -284,6 +288,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     clarity: resolution === 'HD' ? 'hd' : 'normal',
     privateState: privateState,
     onPlayerTap: data => {
+      if (disablePlayerTap.current) {
+        console.log('playerTap 事件已禁止');
+        return;
+      }
       console.log('res===on onVideoTap', data);
       eventRef.current.emit(playerTap);
       console.log(prevTriggerEvent.current, 'prevTriggerEvent.current');
@@ -292,7 +300,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       } else {
         triggerEvent(hideAllComponent);
       }
-      return false;
+      return false; // eslint-disable-line
     } // 对应原来的onVideoTap
   }), /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-top-content', {
@@ -312,7 +320,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       'ipc-player-bottom-content-show': !componentHideState
     }),
     style: {
-      height: screenType === 'vertical' ? '48px' : '60px'
+      height: screenType === 'vertical' ? '48px' : '72px'
     }
   }, /*#__PURE__*/React.createElement(BottomLeftContent, {
     ctx: instance

package/lib/ui/ui.less

@@ -203,6 +203,21 @@
     padding: 0 0 0 16px;
   }
 
+   // 左下角全屏子元素容器
+   .bottom-left-item-full-container {
+    padding: 0 24px !important;
+  }
+
+  .bottom-left-item-full-container:first-of-type {
+    padding: 0 24px 0 16px !important;
+  }
+  .bottom-left-item-full-container:last-of-type {
+    padding: 0 0 0 24px !important;
+  }
+  .bottom-left-item-full-container:only-of-type{
+    padding: 0 0 0 16px !important;
+  }
+
   // 右下角子元素容器
   .bottom-right-item-container {
     padding: 0 8px;

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

@@ -1,4 +1,6 @@
 import { UseCtx } from '../../interface';
 type Ctx = ReturnType<UseCtx>;
-export declare function initPlayerPlugins(ctx: Ctx): Promise<void>;
+export declare function initPlayerPlugins(ctx: Ctx, options: {
+    verticalResolutionCustomClick?: boolean;
+}): Promise<void>;
 export {};

package/lib/utils/plugins/index.js

@@ -1,11 +1,19 @@
+import _cloneDeep from 'lodash/cloneDeep';
 import { defaultTopLeftContent, defaultTopRightContent, defaultBottomLeftContent, defaultBottomRightContent } from '../../ctx';
 import { hasDpCode } from '../../utils/device';
 import { MoveInteractiveControlButton } from '../../plugins/moveInteractiveControl';
 // 根据当前 dp 信息决定设置哪些 plugin
-export async function initPlayerPlugins(ctx) {
+export async function initPlayerPlugins(ctx, options) {
   ctx.addContent('topLeft', defaultTopLeftContent);
   ctx.addContent('topRight', defaultTopRightContent);
-  ctx.addContent('bottomLeft', defaultBottomLeftContent);
+  const newDefaultBottomLeftContent = _cloneDeep(defaultBottomLeftContent);
+  const resolutionIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'Resolution');
+  if (resolutionIndex !== -1) {
+    newDefaultBottomLeftContent[resolutionIndex].initProps = {
+      verticalResolutionCustomClick: options.verticalResolutionCustomClick
+    };
+  }
+  ctx.addContent('bottomLeft', newDefaultBottomLeftContent);
   ctx.addContent('bottomRight', defaultBottomRightContent);
 
   // 根据 ipc_manual_petting 是否存在，决定是否要插入控件 moveInteractiveControl

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-35",
+  "version": "0.0.1-beta-37",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -36,7 +36,7 @@
     "ahooks": "^3.1.6"
   },
   "dependencies": {
-    "@ray-js/ipc-ptz-zoom": "0.0.2-beta-4",
+    "@ray-js/ipc-ptz-zoom": "0.0.2-beta-6",
     "@ray-js/panel-sdk": "^1.13.1",
     "@ray-js/ray-ipc-player": "2.0.20-beta-6",
     "@ray-js/ray-ipc-utils": "1.1.0-beta-13",