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

package/lib/ui/topRightContent.js

@@ -9,14 +9,12 @@ const TopRightContent = _ref => {
     children
   } = _ref;
   const {
-    screenType,
-    fullResolutionActive
+    screenType
   } = useStore({
     screenType: ctx.screenType,
-    playState: ctx.playState,
-    fullResolutionActive: ctx.fullResolutionActive
+    playState: ctx.playState
   });
-  const [shouldHide] = useComponentHideState(screenType);
+  const [shouldHide] = useComponentHideState();
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-top-right-content-wrap')
   }, /*#__PURE__*/React.createElement(View, {
@@ -25,8 +23,8 @@ const TopRightContent = _ref => {
       paddingRight: screenType === 'vertical' ? 0 : '25px'
     },
     className: clsx('ipc-player-top-right-content-container', {
-      'ipc-player-top-right-content-hide': shouldHide || fullResolutionActive,
-      'ipc-player-top-right-content-show': !shouldHide && !fullResolutionActive
+      // 'ipc-player-top-right-content-hide': shouldHide,
+      // 'ipc-player-top-right-content-show': !shouldHide,
     })
   }, children));
 };

package/lib/ui/ui.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { PlayStatusData, UseCtx } from '../interface';
+import { EventInstance } from './event';
 import './ui.less';
 type CtxInstance = ReturnType<UseCtx>;
 type CSSVariable = {
@@ -24,6 +25,7 @@ type Props = {
     CSSVariable?: Partial<CSSVariable>;
     brandColor?: string;
     verticalMic?: boolean;
+    eventRef?: React.RefObject<EventInstance>;
 };
 export declare const IPCPlayerIntegration: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;
 export {};

package/lib/ui/ui.js

@@ -1,11 +1,11 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useContext, useRef, useMemo, useEffect, useCallback } from 'react';
+import React, { useContext, 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, getDefaultStore } from '../ctx/store';
+import { useStore } from '../ctx/store';
 import { getEventInstance } from './event';
 import { UIEventContext } from './context';
 import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent } from './constant';
@@ -13,6 +13,7 @@ import BottomLeftContent from './bottomLeftContent';
 import BottomRightContent from './bottomRightContent';
 import TopLeftContent from './topLeftContent';
 import TopRightContent from './topRightContent';
+import { useMemoizedFn } from '../hooks';
 import './ui.less';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
@@ -46,18 +47,28 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     privateState = false,
     deviceOnline = true,
     brandColor = '#FF592A',
-    verticalMic = true
+    verticalMic = true,
+    eventRef: eventRefProp
   } = props;
   const instance = getCtxInstance(props.instance, devId);
   const {
     setPlayState,
     setScreenType,
-    setFullResolutionActive,
     setBrandColor,
     setVerticalMic
   } = instance;
   const prevTriggerEvent = useRef();
+
+  /*
+    player 的UI效果期望有一些控件在初始化的时候都展示，在点击 Player 之后隐藏：
+    在控件显示时，点击播放器期望隐藏控件
+    在控件消失时，点击播放器期望展示控件
+    这里用一个统一的状态标志期望控件是否展示
+  */
+  const [componentHideState, setComponentHideState] = useState(false);
+  prevTriggerEvent.current = componentHideState ? hideAllComponent : showAllComponent;
   const eventRef = useRef();
+  useImperativeHandle(eventRefProp, () => eventRef.current, [eventRef.current]);
   const timer = useRef();
   if (!eventRef.current) {
     eventRef.current = getEventInstance();
@@ -92,7 +103,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     absoluteContent,
     screenType,
     playState,
-    fullResolutionActive,
     resolution,
     mute
   } = useStore({
@@ -103,7 +113,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     absoluteContent: instance.absoluteContent,
     screenType: instance.screenType,
     playState: instance.playState,
-    fullResolutionActive: instance.fullResolutionActive,
     resolution: instance.resolution,
     mute: instance.mute
   });
@@ -117,7 +126,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    */
   const renderTopLeftContent = useMemo(() => {
     if (!topLeftContent || !(topLeftContent !== null && topLeftContent !== void 0 && topLeftContent.length)) return null;
-    return topLeftContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
+    return topLeftContent.map(item => item.hidden ? null : /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
       key: item.id
     }, item.initProps), instance), {}, {
       IPCPlayerContext: instance.IPCPlayerInstance,
@@ -131,7 +140,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    */
   const renderTopRightContent = useMemo(() => {
     if (!topRightContent || !(topRightContent !== null && topRightContent !== void 0 && topRightContent.length)) return null;
-    return topRightContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
+    return topRightContent.map(item => item.hidden ? null : /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
       key: item.id
     }, item.initProps), instance), {}, {
       IPCPlayerContext: instance.IPCPlayerInstance,
@@ -145,7 +154,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    */
   const renderBottomLeftContent = useMemo(() => {
     if (!bottomLeftContent || !(bottomLeftContent !== null && bottomLeftContent !== void 0 && bottomLeftContent.length)) return null;
-    return bottomLeftContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({}, item.initProps), {}, {
+    return bottomLeftContent.map(item => item.hidden ? null : /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({}, item.initProps), {}, {
       key: item.id
     }, instance), {}, {
       IPCPlayerContext: instance.IPCPlayerInstance,
@@ -159,7 +168,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    */
   const renderBottomRightContent = useMemo(() => {
     if (!bottomRightContent || !(bottomRightContent !== null && bottomRightContent !== void 0 && bottomRightContent.length)) return null;
-    return bottomRightContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({}, item.initProps), {}, {
+    return bottomRightContent.map(item => item.hidden ? null : /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({}, item.initProps), {}, {
       key: item.id
     }, instance), {}, {
       IPCPlayerContext: instance.IPCPlayerInstance,
@@ -173,10 +182,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    */
 
   const triggerEvent = type => {
-    getDefaultStore();
-    console.log('_______Dsahdjashjdhsjah');
-    // const _screenType = store.get(instance.screenType);
-    // if (prevTriggerEvent.current === type || _screenType === 'vertical') return;
     if (prevTriggerEvent.current === type) return;
     if (timer.current) {
       clearTimeout(timer.current);
@@ -189,9 +194,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       }, HIDE_COMPONENT_TIME);
     }
     eventRef.current.emit(type);
-    prevTriggerEvent.current = type;
   };
-  const listenStart = useCallback(() => {
+  const listenStart = useMemoizedFn(() => {
     timer.current && clearTimeout(timer.current);
     // 重新开始计时
     if (!timer.current) {
@@ -200,27 +204,34 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
         triggerEvent(hideAllComponent);
       }, HIDE_COMPONENT_TIME);
     }
-  }, []);
-  const listenPause = useCallback(() => {
+  });
+  const listenPause = useMemoizedFn(() => {
     timer.current && clearTimeout(timer.current);
     timer.current = null;
-  }, []);
+  });
+  const listenHideEvent = useMemoizedFn(() => {
+    setComponentHideState(true);
+  });
+  const listenShowEvent = useMemoizedFn(() => {
+    setComponentHideState(false);
+  });
   useEffect(() => {
     eventRef.current.on(startTimeToHideAllComponent, listenStart);
-    return () => {
-      eventRef.current.off(startTimeToHideAllComponent, listenStart);
-    };
-  }, [listenStart]);
-  useEffect(() => {
     eventRef.current.on(pauseTimeToHideAllComponent, listenPause);
+    eventRef.current.on(showAllComponent, listenShowEvent);
+    eventRef.current.on(hideAllComponent, listenHideEvent);
     return () => {
+      eventRef.current.off(startTimeToHideAllComponent, listenStart);
       eventRef.current.off(pauseTimeToHideAllComponent, listenPause);
+      eventRef.current.off(showAllComponent, listenShowEvent);
+      eventRef.current.off(hideAllComponent, listenHideEvent);
     };
-  });
+  }, []);
   const playerReady = playState === PlayState.PLAYING;
   return /*#__PURE__*/React.createElement(UIEventContext.Provider, {
     value: {
-      event: eventRef.current
+      event: eventRef.current,
+      componentHideState
     }
   }, /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-content', className),
@@ -274,18 +285,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     privateState: privateState,
     onPlayerTap: data => {
       console.log('res===on onVideoTap', data);
-      const store = getDefaultStore();
-      const _screenType = store.get(instance.screenType);
-      const _fullResolutionActive = store.get(instance.fullResolutionActive);
       eventRef.current.emit(playerTap);
-      // 如果全屏清晰度展开, 则点击关闭全屏清晰度, 展示所有组件
-      if (_fullResolutionActive && _screenType === 'full') {
-        setFullResolutionActive(false);
-        // 展示相应菜单启动自动隐藏定时
-        triggerEvent(showAllComponent);
-        event.emit(startTimeToHideAllComponent);
-        return false;
-      }
       console.log(prevTriggerEvent.current, 'prevTriggerEvent.current');
       if (prevTriggerEvent.current === hideAllComponent) {
         triggerEvent(showAllComponent);
@@ -294,17 +294,34 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       }
       return false;
     } // 对应原来的onVideoTap
-  }), /*#__PURE__*/React.createElement(TopLeftContent, {
+  }), /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-top-content', {
+      'ipc-player-top-content-hide': componentHideState,
+      'ipc-player-top-content-show': !componentHideState
+    }),
+    style: {
+      height: screenType === 'vertical' ? '48px' : '60px'
+    }
+  }, /*#__PURE__*/React.createElement(TopLeftContent, {
     ctx: instance
   }, renderTopLeftContent), /*#__PURE__*/React.createElement(TopRightContent, {
     ctx: instance
-  }, renderTopRightContent), /*#__PURE__*/React.createElement(BottomLeftContent, {
+  }, renderTopRightContent)), /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-bottom-content', {
+      'ipc-player-bottom-content-hide': componentHideState,
+      'ipc-player-bottom-content-show': !componentHideState
+    }),
+    style: {
+      height: screenType === 'vertical' ? '48px' : '60px'
+    }
+  }, /*#__PURE__*/React.createElement(BottomLeftContent, {
     ctx: instance
   }, renderBottomLeftContent), /*#__PURE__*/React.createElement(BottomRightContent, {
     ctx: instance
-  }, renderBottomRightContent), playerReady && (() => {
+  }, renderBottomRightContent)), playerReady && (() => {
     if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
     return absoluteContent.map(item => {
+      if (item.hidden) return null;
       return /*#__PURE__*/React.createElement(CoverView, {
         key: item.id,
         style: _objectSpread({

package/lib/ui/ui.less

@@ -2,6 +2,50 @@
   position: relative;
   overflow: hidden;
 
+  // 顶部长条
+  .ipc-player-top-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 90;
+    height: 60px;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
+  }
+  // 底部长条 
+  .ipc-player-bottom-content {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding-top: 12px;
+    z-index: 90;
+    height: 60px;
+    background: linear-gradient(360deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);;
+  }
+
+  // 顶部整条内容隐藏
+  .ipc-player-top-content-show {
+    transform: translate(0, 0);
+    transition: transform ease-in 0.3s;
+  }
+
+  .ipc-player-top-content-hide {
+    transform: translate(0, -110%);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  // 底部整条内容隐藏
+  .ipc-player-bottom-content-show {
+    transform: translate(0, 0);
+    transition: transform ease-in 0.3s;
+  }
+  
+  .ipc-player-bottom-content-hide {
+    transform: translate(0, 110%);
+    transition: transform 0.3s ease-in-out;
+  }
+
   // 左上角容器样式
   .ipc-player-top-left-content-wrap {
     position: absolute;
@@ -106,13 +150,6 @@
     flex-direction: inherit;
   }
 
-  .ipc-player-bottom-right-content-wrap {
-    position: absolute;
-    z-index: 100;
-    right: 0;
-    bottom: 0;
-  }
-
   .ipc-player-bottom-right-item-container {
     padding: 0 8px;
     height: 100%;
@@ -153,14 +190,14 @@
 
    // 左下角子元素容器
    .bottom-left-item-container {
-    padding: 0 8px;
+    padding: 0 12px;
   }
 
   .bottom-left-item-container:first-of-type {
-    padding: 0 8px 0 16px;
+    padding: 0 12px 0 16px;
   }
   .bottom-left-item-container:last-of-type {
-    padding: 0 0 0 8px;
+    padding: 0 0 0 12px;
   }
   .bottom-left-item-container:only-of-type{
     padding: 0 0 0 16px;
@@ -172,10 +209,10 @@
   }
 
   .bottom-right-item-container:first-of-type {
-    padding: 0 8px 0 0;
+    padding: 0 12px 0 0;
   }
   .bottom-right-item-container:last-of-type {
-    padding: 0 16px 0 8px;
+    padding: 0 16px 0 12px;
   }
   .bottom-right-item-container:only-of-type {
     padding: 0 16px 0 0;

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

@@ -9,6 +9,8 @@ export interface IDpCode {
     time: number;
     type: string;
 }
+type ReturnDeviceInfo = Parameters<Parameters<typeof ty.device.getDeviceInfo>[0]['success']>[0];
+export declare function getDeviceInfo(devId: string): Promise<ReturnDeviceInfo>;
 export declare function getDpIdsByCodes<T extends string>(devId: string, dpIds: T[]): Promise<Record<T, string>>;
 export declare const showMathPowValue: (value: any, scale: any) => string | 0;
 export declare const getDevInfo: <T>(deviceId: string) => Promise<any>;
@@ -17,3 +19,5 @@ export declare const getDevInfo: <T>(deviceId: string) => Promise<any>;
  * @param result: {code: number, msg: string}
  */
 export declare const getEnumRangeIsValid: (devId: any, dpCode: any, rangValue: any) => Promise<any>;
+export declare function hasDpCode(devId: string, code: string): Promise<boolean>;
+export {};

package/lib/utils/device/index.js

@@ -21,6 +21,25 @@ export function getDpValue(options) {
     });
   });
 }
+const memoryDevInfo = {};
+export function getDeviceInfo(devId) {
+  return new Promise((resolve, reject) => {
+    if (memoryDevInfo[devId]) {
+      resolve(memoryDevInfo[devId]);
+      return;
+    }
+    ty.device.getDeviceInfo({
+      deviceId: devId,
+      success: res => {
+        memoryDevInfo[devId] = res;
+        resolve(res);
+      },
+      fail: err => {
+        reject(err); // eslint-disable-line
+      }
+    });
+  });
+}
 export function getDpIdsByCodes(devId) {
   return new Promise((resolve, reject) => {
     ty.device.getDeviceInfo({
@@ -104,4 +123,11 @@ export const getEnumRangeIsValid = async (devId, dpCode, rangValue) => {
     return false;
   }
   return false;
-};
+};
+export function hasDpCode(devId, code) {
+  return new Promise((resolve, reject) => {
+    getDeviceInfo(devId).then(res => {
+      resolve(res.dpCodes[code] !== undefined);
+    }, err => reject(err));
+  });
+}

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

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

package/lib/utils/plugins/index.js

@@ -0,0 +1,20 @@
+import { defaultTopLeftContent, defaultTopRightContent, defaultBottomLeftContent, defaultBottomRightContent } from '../../ctx';
+import { hasDpCode } from '../../utils/device';
+import { MoveInteractiveControlButton } from '../../plugins/moveInteractiveControl';
+// 根据当前 dp 信息决定设置哪些 plugin
+export async function initPlayerPlugins(ctx) {
+  ctx.addContent('topLeft', defaultTopLeftContent);
+  ctx.addContent('topRight', defaultTopRightContent);
+  ctx.addContent('bottomLeft', defaultBottomLeftContent);
+  ctx.addContent('bottomRight', defaultBottomRightContent);
+
+  // 根据 ipc_manual_petting 是否存在，决定是否要插入控件 moveInteractiveControl
+  hasDpCode(ctx.devId, 'ipc_manual_petting').then(res => {
+    if (res) {
+      ctx.addContent('bottomLeft', {
+        id: 'MoveInteractiveControlButton',
+        content: MoveInteractiveControlButton
+      }, -1);
+    }
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-32",
+  "version": "0.0.1-beta-34",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -31,7 +31,10 @@
     "release-it": "standard-version",
     "test": "yarn jest"
   },
-  "peerDependencies": {},
+  "peerDependencies": {
+    "@ray-js/direction-control": "0.0.3-beta-1",
+    "ahooks": "^3.1.6"
+  },
   "dependencies": {
     "@ray-js/ipc-ptz-zoom": "0.0.2-beta-4",
     "@ray-js/panel-sdk": "^1.13.1",
@@ -45,9 +48,11 @@
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@ray-js/cli": "^1.4.9",
+    "@ray-js/direction-control": "0.0.3-beta-1",
     "@ray-js/ray": "^1.4.9",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.14",
+    "ahooks": "^3.8.4",
     "core-js": "^3.19.1",
     "eslint-config-tuya-panel": "^0.4.2",
     "husky": "^1.2.0",