@ray-js/ipc-player-integration 0.0.1-beta-34 → 0.0.1-beta-36

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) {
         // 获取缓存的值且同步
@@ -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/i18n/index.d.ts

@@ -11,6 +11,7 @@ declare const Strings: kit.I18N<{
         ipc_player_record_success_check: string;
         ipc_player_recording_now_tip: string;
         ipc_player_stop_recording_err: string;
+        ipc_player_resolution_change_error: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
@@ -23,6 +24,7 @@ declare const Strings: kit.I18N<{
         ipc_player_record_success_check: string;
         ipc_player_recording_now_tip: string;
         ipc_player_stop_recording_err: string;
+        ipc_player_resolution_change_error: string;
     };
 }, {
     ipc_player_resolution_HD: string;
@@ -35,6 +37,7 @@ declare const Strings: kit.I18N<{
     ipc_player_record_success_check: string;
     ipc_player_recording_now_tip: string;
     ipc_player_stop_recording_err: string;
+    ipc_player_resolution_change_error: string;
 } | {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
@@ -46,5 +49,6 @@ declare const Strings: kit.I18N<{
     ipc_player_record_success_check: string;
     ipc_player_recording_now_tip: string;
     ipc_player_stop_recording_err: string;
+    ipc_player_resolution_change_error: string;
 }>;
 export default Strings;

package/lib/i18n/strings.d.ts

@@ -10,6 +10,7 @@ declare const _default: {
         ipc_player_record_success_check: string;
         ipc_player_recording_now_tip: string;
         ipc_player_stop_recording_err: string;
+        ipc_player_resolution_change_error: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
@@ -22,6 +23,7 @@ declare const _default: {
         ipc_player_record_success_check: string;
         ipc_player_recording_now_tip: string;
         ipc_player_stop_recording_err: string;
+        ipc_player_resolution_change_error: string;
     };
 };
 export default _default;

package/lib/i18n/strings.js

@@ -9,7 +9,8 @@ export default {
     ipc_player_shot_success_check: 'View',
     ipc_player_record_success_check: 'View',
     ipc_player_recording_now_tip: 'Recording in progress...',
-    ipc_player_stop_recording_err: 'Failed to stop recording. Please exit and try again.'
+    ipc_player_stop_recording_err: 'Failed to stop recording. Please exit and try again.',
+    ipc_player_resolution_change_error: 'Switch failed, check device and network.'
   },
   zh: {
     ipc_player_resolution_HD: '高清',
@@ -21,6 +22,7 @@ export default {
     ipc_player_shot_success_check: '查看',
     ipc_player_record_success_check: '查看',
     ipc_player_recording_now_tip: '正在录像中...',
-    ipc_player_stop_recording_err: '结束录像失败，请退出重试'
+    ipc_player_stop_recording_err: '结束录像失败，请退出重试',
+    ipc_player_resolution_change_error: '切换失败,请检查设备及网络状态'
   }
 };

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/resolution/fullResolutionControl.js

@@ -47,7 +47,14 @@ export const FullResolutionControl = props => {
         title: Strings.getLang('ipc_player_current_resolution_is_equal')
       });
     } else {
-      setResolution(value);
+      setResolution(value).then(() => {
+        setHide(true);
+      }).catch(() => {
+        ty.showToast({
+          icon: 'error',
+          title: Strings.getLang('ipc_player_resolution_change_error')
+        });
+      });
     }
   }, [resolution]);
   return /*#__PURE__*/React.createElement(View, {

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-34",
+  "version": "0.0.1-beta-36",
   "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-5",
     "@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",