@ray-js/ipc-player-integration 0.0.1-beta-5 → 0.0.1-beta-7

package/lib/ctx/store.d.ts

@@ -1,4 +1,5 @@
 import { RetAtom } from '../interface';
+export { getDefaultStore } from 'jotai';
 export declare const topContent: import("jotai").PrimitiveAtom<never[]> & {
     init: never[];
 };
@@ -8,4 +9,3 @@ type ExtractReturnType<T> = {
 };
 export declare const useStore: <V, T extends Record<string, RetAtom<V>>>(options: T) => ExtractReturnType<T>;
 export declare const updateAtom: <T>(atom: RetAtom<T>, value: T | ((prevValue: T) => T)) => void;
-export {};

package/lib/ctx/store.js

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { atom, useAtomValue, getDefaultStore } from 'jotai';
+export { getDefaultStore } from 'jotai';
 export const topContent = atom([]);
 export const useAtom = defaultValue => {
   const ref = useRef();

package/lib/hooks/useTemperature/index.js

@@ -10,7 +10,6 @@ export const useTemperature = devId => {
     dpCodes: [TEMP_UNIT_SELECT, SENSOR_TEMPERATURE, TEMP_REPORT_F]
   });
   useEffect(() => {
-    console.log('res===1', dpState);
     //  1=华氏度  0=摄氏度
     if (dpState[TEMP_UNIT_SELECT] !== undefined) {
       setTempUnit(dpState[TEMP_UNIT_SELECT] + '');

package/lib/hooks/useVideoBitKbps/index.js

@@ -1,44 +1,22 @@
 import { useEffect, useState } from 'react';
+import IpcUtils from '@ray-js/ray-ipc-utils';
 export const useVideoBitKbps = devId => {
   const [bitKbps, setBitKbps] = useState('');
   useEffect(() => {
     // const timer = setInterval(() => {
     init();
-    // }, 5000);
+    // }, 1000);
     // return () => {
     //   clearInterval(timer);
     //   timer === null;
     // };
   }, []);
   const init = async () => {
-    let res = await getVideoBitrateKbps();
-    console.log('res===bitKbps', res);
-    res += 'KB/S';
-    setBitKbps(res);
-  };
-  const getVideoBitrateKbps = () => {
-    return new Promise((resolve, reject) => {
-      ty.ipc.getVideoBitrateKbps({
-        devId,
-        extendParam: {},
-        success: _ref => {
-          let {
-            kpbs = '0'
-          } = _ref;
-          resolve(kpbs);
-        },
-        fail: _ref2 => {
-          let {
-            errorMsg,
-            errorCode
-          } = _ref2;
-          return reject(errorMsg);
-        }
-      });
-    }).catch(error => {
-      console.log('res===getVideoBitrateKbps', error);
-      return '0';
-    });
+    const res = await IpcUtils.getVideoBitrateKbps(devId);
+    console.log('res===getVideoBitrateKbps', res);
+    if (res.code !== -1) {
+      setBitKbps(res.data.kbps + 'KB/S');
+    }
   };
   return bitKbps;
 };

package/lib/iconfont/iconfont.css

@@ -7,7 +7,6 @@
 
 .icon-panel {
   font-family: "icon-panel" !important;
-  font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

package/lib/interface.d.ts

@@ -54,6 +54,8 @@ export type ComponentConfig<T = ReturnType<UseCtx> & Record<string, any>> = {
     id: string;
     content: (props: T) => React.ReactElement;
     initProps?: T;
+    absolutePosition?: Pick<React.CSSProperties, 'top' | 'left' | 'right' | 'bottom'>;
+    absoluteContentClassName?: string;
 };
 export type ComponentConfigProps = {
     IPCPlayerContext: IpcContext;

package/lib/plugins/battery/battery.less

@@ -1,16 +1,15 @@
 .ipc-player-plugin-battery {
   display: flex;
   align-items: center;
-  background-color: red;
-  height: 48rpx;
-  padding: 0 18rpx;
-  border-radius: 48rpx;
+  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.1);
   backdrop-filter: blur(10px);
   &.ipc-player-plugin-battery-absolute {
     position: absolute;
     top: 50%;
-    left: 11px;
+    left: calc(16px * var(--ipc-player-size-scale, 1));
     transform: translateY(-50%);
   }
   &.ipc-player-plugin-battery-relative {
@@ -21,26 +20,26 @@
   }
   .ipc-player-plugin-battery-border {
     position: relative;
-    width: 32rpx;
-    height: 24rpx;
+    width: calc(16px * var(--ipc-player-size-scale, 1));
+    height: calc(12px * var(--ipc-player-size-scale, 1));;
     box-sizing: border-box;
-    border: 4rpx solid #fff;
-    margin-right: 8rpx;
-    border-radius: 6rpx;
+    border: calc(2px * var(--ipc-player-size-scale, 1)) solid #fff;
+    margin-right: calc(4px * var(--ipc-player-size-scale, 1));;
+    border-radius: calc(3px * var(--ipc-player-size-scale, 1));;
     overflow: visible;
     .ipc-player-plugin-battery-border-1 {
       position: absolute;
-      height: 10rpx;
-      width: 5rpx;
+      height: calc(5px * var(--ipc-player-size-scale, 1));
+      width: calc(2px * var(--ipc-player-size-scale, 1));
       background-color: #fff;
-      left: -7rpx;
-      top: 4rpx;
-      border-radius: 4rpx;
+      left: calc(-3.5px * var(--ipc-player-size-scale, 1));
+      top: calc(2px * var(--ipc-player-size-scale, 1));
+      border-radius: calc(2px * var(--ipc-player-size-scale, 1));
     }
     .ipc-player-plugin-battery-value-wrap {
       position: absolute;
-      width: 20rpx;
-      height: 12rpx;
+      width: calc(10px * var(--ipc-player-size-scale, 1));
+      height: calc(6px * var(--ipc-player-size-scale, 1));
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
@@ -59,8 +58,8 @@
 
 
 .ipc-player-plugin-battery-text {
-  font-size: 24rpx;
-  line-height: 24rpx;
+  font-size: calc(12px * var(--ipc-player-size-scale, 1));
+  line-height: calc(12px * var(--ipc-player-size-scale, 1));
   color: var(--fontColor);
   font-family: 'Manrope';
   font-weight: 600;

package/lib/plugins/fullScreen/fullScreen.js

@@ -1,9 +1,11 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React from 'react';
-import { View, setPageOrientation, CoverView } from '@ray-js/ray';
+import React, { useContext } from 'react';
+import { View, setPageOrientation } from '@ray-js/ray';
+import { UIEventContext } from '../../ui/context';
+import { startTimeToHideAllComponent, showAllComponent } from '../../ui/constant';
 import { useStore } from '../../ctx/store';
 import { VerticalScreen } from './verticalScreen';
-import { VoiceIntercom } from '../voiceIntercom';
+import { VoiceIntercom } from './voiceIntercom';
 import './fullScreen.less';
 const VerticalScreenId = 'VerticalScreen';
 const VoiceIntercomId = 'VoiceIntercom';
@@ -19,6 +21,9 @@ export function FullScreen(props) {
   } = useStore({
     screenType: screenTypeAtom
   });
+  const {
+    event
+  } = useContext(UIEventContext);
   const handFull = () => {
     ty.hideMenuButton();
     ty.hideStatusBar();
@@ -26,36 +31,38 @@ export function FullScreen(props) {
       type: 'custom'
     });
 
-    // 显示全屏按钮5s后隐藏
-    // showFullButtonAnd5sHide();
     // 添加全屏后，返回竖屏的控件
     addContent('top', {
       id: VerticalScreenId,
       content: VerticalScreen,
       initProps: _objectSpread(_objectSpread({}, props), {}, {
-        onClick: handClick.bind(null, 'vertical')
+        onClick: () => {
+          event.emit(showAllComponent);
+          handClick('vertical');
+        }
       })
     });
     // 全屏后，添加语音对讲控件
     addContent('absolute', {
       id: VoiceIntercomId,
       content: props => {
-        return /*#__PURE__*/React.createElement(CoverView, {
+        return /*#__PURE__*/React.createElement(View, {
           className: "ipc-player-plugin-full-screen-voice"
         }, /*#__PURE__*/React.createElement(VoiceIntercom, props));
       },
+      absoluteContentClassName: 'ipc-player-plugin-full-screen-voice-warp',
       initProps: _objectSpread({}, props)
     });
   };
   const handClick = target => {
     const pageOrientation = target === 'vertical' ? 'portrait' : 'landscape';
     setScreenType(target);
-    handFull(); // todo
     setPageOrientation({
       pageOrientation,
       success: () => {
         if (target === 'full') {
           handFull();
+          event.emit(startTimeToHideAllComponent);
         } else {
           ty.setNavigationBarBack({
             type: 'system'

package/lib/plugins/fullScreen/fullScreen.less

@@ -2,15 +2,23 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  right: 18px;
+  right: calc(16px * var(--ipc-player-size-scale, 1));
   color: var(--iconColor);
-  font-size: var(--iconFontSize);
+  font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
 }
 
-.ipc-player-plugin-full-screen-voice {
+.ipc-player-plugin-full-screen-voice-warp {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
-  right: 20px;
+  transform: translate(0, -50%);
+  right: calc(10px * var(--ipc-player-size-scale, 1));;
   z-index: 3;
+}
+
+.ipc-player-plugin-full-screen-voice {
+  transform: translate(0, 0);
+  transition: transform ease-in 0.3s;
+  &.ipc-player-plugin-full-screen-voice-hide {
+    transform: translate(180%, 0);
+  }
 }

package/lib/plugins/fullScreen/verticalScreen.less

@@ -3,9 +3,11 @@
   padding: 10rpx;
   top: 50%;
   transform: translateY(-50%);
-  left: 24px;
+  // left: 24px;
+  left: calc(12px * var(--ipc-player-size-scale, 1));
   .ipc-player-plugin-vertical-screen-icon {
-    font-size: var(--iconFontSize);
+    // font-size: var(--iconFontSize);
+    font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
     color: var(--iconColor);
   }
 }

package/lib/plugins/fullScreen/voiceIntercom.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ComponentConfigProps } from '../../interface';
+type Props = ComponentConfigProps;
+export declare function VoiceIntercom(props: Props): React.JSX.Element;
+export {};

package/lib/plugins/fullScreen/voiceIntercom.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useContext } from 'react';
+import { CoverView } from '@ray-js/ray';
+import clsx from 'clsx';
+import { VoiceIntercom as Component } from '../voiceIntercom';
+import { useComponentHideState } from '../../ui/hooks';
+import { UIEventContext } from '../../ui/context';
+import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
+import { useStore } from '../../ctx/store';
+export function VoiceIntercom(props) {
+  const {
+    screenType
+  } = useStore({
+    screenType: props.screenType
+  });
+  const [shouldHide] = useComponentHideState(screenType);
+  const {
+    event
+  } = useContext(UIEventContext);
+  return /*#__PURE__*/React.createElement(CoverView, {
+    className: clsx('ipc-player-plugin-full-screen-voice', {
+      'ipc-player-plugin-full-screen-voice-hide': shouldHide
+    })
+  }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    onTouchStart: () => {
+      event.emit(pauseTimeToHideAllComponent);
+    },
+    onTouchEnd: () => {
+      event.emit(startTimeToHideAllComponent);
+    }
+  })));
+}

package/lib/plugins/muted/muted.js

@@ -44,8 +44,8 @@ export const Muted = props => {
       display: 'flex'
     }
   }, isMuted ? /*#__PURE__*/React.createElement(Text, {
-    className: "text-icon icon-panel icon-panel-jingyin"
+    className: "ipc-player-plugin-muted-text-icon icon-panel icon-panel-jingyin"
   }) : /*#__PURE__*/React.createElement(Text, {
-    className: "text-icon icon-panel icon-panel-yinliang"
+    className: "ipc-player-plugin-muted-text-icon icon-panel icon-panel-yinliang"
   }));
 };

package/lib/plugins/muted/muted.less

@@ -1,5 +1,4 @@
-.text-icon {
-    color: var(--iconColor);
-    font-size: var(--iconFontSize);
-    padding: 8rpx;
+.ipc-player-plugin-muted-text-icon {
+  color: var(--iconColor);
+  font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
 }

package/lib/plugins/recordVideo/recordVideo.less

@@ -1,37 +1,37 @@
 .ipc-player-plugin-record-video-icon {
-  font-size: var(--iconFontSize);
+  font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
   color: var(--iconColor);
 }
 .ipc-player-plugin-record-video-toast {
   z-index: 2;
   position: absolute;
   display: flex;
-  padding: 24rpx;
+  padding: calc(12px * var(--ipc-player-size-scale, 1));
   align-items: center;
   left: 50%;
   transform: translateX(-50%);
-  top: 14rpx;
+  top: calc(7px * var(--ipc-player-size-scale, 1));
   background-color: var(--bg-color);
-  border-radius: 16rpx;
+  border-radius: calc(8px * var(--ipc-player-size-scale, 1));
   .ipc-player-plugin-record-video-toast-point {
-    width: 12rpx;
-    height: 12rpx;
-    border-radius: 12rpx;
+    width: calc(6px * var(--ipc-player-size-scale, 1));
+    height: calc(6px * var(--ipc-player-size-scale, 1));
+    border-radius: calc(6px * var(--ipc-player-size-scale, 1));
     background-color: #FF3838;
   }
   .ipc-player-plugin-record-video-toast-time {
-    font-size: 24rpx;
+    font-size: calc(12px * var(--ipc-player-size-scale, 1));;
     font-weight: 600;
     color: var(--fontColor);
-    margin-left: 16rpx;
+    margin-left: calc(8px * var(--ipc-player-size-scale, 1));;
     display: flex;
     align-items: center;
     .ipc-player-plugin-record-video-toast-time-warp {
-      width: 34rpx;
+      width: calc(17px * var(--ipc-player-size-scale, 1));;
       text-align: center;
     }
     .ipc-player-plugin-record-video-toast-time-delimiter {
-      margin: 0 4rpx;
+      margin: 0 calc(2px * var(--ipc-player-size-scale, 1));;
     }
   }
 }

package/lib/plugins/screenshot/screenshot.less

@@ -1,38 +1,42 @@
 .ipc-player-plugin-screenshot-icon {
   color: var(--iconColor);
-  font-size: var(--iconFontSize);
+  font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
 }
 .ipc-player-plugin-screenshot-toast {
   position: absolute;
   width: 90%;
-  border-radius: 16rpx;
+  border-radius: calc(8px * var(--ipc-player-size-scale, 1));;
   background-color: var(--bg-color);
   left: 50%;
   transform: translateX(-50%);
-  top: 32rpx;
+  top: calc(16px * var(--ipc-player-size-scale, 1));
   display: flex;
   align-items: center;
-  padding: 16rpx 32rpx;
+  padding: calc(8px * var(--ipc-player-size-scale, 1)) calc(16px * var(--ipc-player-size-scale, 1));
   z-index: 3;
   .ipc-player-plugin-screenshot-toast-image {
-    width: 132rpx;
-    height: 74rpx;
-    border-radius: 8rpx;
+    width: calc(66px * var(--ipc-player-size-scale, 1));
+    height: calc(37px * var(--ipc-player-size-scale, 1));
+    border-radius: calc(4px * var(--ipc-player-size-scale, 1));
   }
   .ipc-player-plugin-screenshot-toast-title {
-    margin-left: 24rpx;
-    font-size: 28rpx;
+    margin-left: calc(12px * var(--ipc-player-size-scale, 1));
+    font-size: calc(14px * var(--ipc-player-size-scale, 1));
     color: var(--fontColor);
-    line-height: 40rpx;
+    line-height: calc(20px * var(--ipc-player-size-scale, 1));
     max-width: 60%;
   }
   .ipc-player-plugin-screenshot-toast-bottom {
     position: absolute;
-    right: 32rpx;
+    // right: 32rpx;
+    right: calc(16px * var(--ipc-player-size-scale, 1));
     border: 1rpx solid #1989FA;
-    border-radius: 8rpx;
-    padding: 10rpx 22rpx;
+    // border-radius: 8rpx;
+    border-radius: calc(4px * var(--ipc-player-size-scale, 1));
+    // padding: 10rpx 22rpx;
+    padding: calc(5px * var(--ipc-player-size-scale, 1)) calc(11px * var(--ipc-player-size-scale, 1));
     color: #1989FA;
-    font-size: 28rpx;
+    // font-size: 28rpx;
+    font-size: calc(14px * var(--ipc-player-size-scale, 1));
   }
 }

package/lib/plugins/tempHumidity/tempHumidity.js

@@ -17,22 +17,20 @@ export const TempHumidity = props => {
   const tempRender = () => {
     if (tempUnit === '1') {
       return tempF && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-        className: "text-icon-tempHumidity icon-panel icon-panel-wendu"
+        className: "ipc-player-plugin-tempHumidity-text-icon icon-panel icon-panel-wendu"
       }), /*#__PURE__*/React.createElement(Text, {
         className: "tempHumidity"
       }, tempF));
     }
     return tempC && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-      className: "text-icon-tempHumidity icon-panel icon-panel-wendu"
-    }), /*#__PURE__*/React.createElement(Text, {
-      className: "tempHumidity"
-    }, tempC), /*#__PURE__*/React.createElement(Text, {
-      className: "divider"
+      className: "ipc-player-plugin-tempHumidity-text-icon icon-panel icon-panel-wendu"
+    }), /*#__PURE__*/React.createElement(Text, null, tempC), /*#__PURE__*/React.createElement(Text, {
+      className: "ipc-player-plugin-tempHumidity-divider"
     }, "/"));
   };
   const humRender = () => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-      className: "text-icon-tempHumidity icon-panel icon-panel-shidu"
+      className: "ipc-player-plugin-tempHumidity-text-icon icon-panel icon-panel-shidu"
     }), /*#__PURE__*/React.createElement(Text, {
       className: "tempHumidity"
     }, `${humidity}`));

package/lib/plugins/tempHumidity/tempHumidity.less

@@ -1,21 +1,24 @@
 .ipc-player-plugin-tempHumidity {
     display: flex;
     align-items: center;
-    padding: 5px 8px;
-    border-radius: 12.5px;
+    height: calc(24px * var(--ipc-player-size-scale, 1));
+    padding: 0 calc(8px * var(--ipc-player-size-scale, 1));
+    border-radius: calc(24px * var(--ipc-player-size-scale, 1));
     opacity: 1;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     color: var(--iconColor);
+    font-size: calc(12px * var(--ipc-player-size-scale, 1));
 }
 
-.divider {
-    margin: 0 4px;
+.ipc-player-plugin-tempHumidity-divider {
+    margin: calc(4px * var(--ipc-player-size-scale, 1));
     color: var(--iconColor);
 }
 
-.text-icon-tempHumidity {
+// .text-icon-tempHumidity {
+.ipc-player-plugin-tempHumidity-text-icon {
     color: var(--iconColor);
-    font-size: var(--iconFontSize);
-    margin-right: 4rpx;
+    font-size: calc(12px * var(--ipc-player-size-scale, 1));
+    margin-right: calc(2px * var(--ipc-player-size-scale, 1));
 }

package/lib/plugins/videoBitKbps/videoBitKbps.js

@@ -8,6 +8,6 @@ export const VideoBitKbps = props => {
   } = props;
   const bitKbps = useVideoBitKbps(devId);
   return /*#__PURE__*/React.createElement(View, {
-    className: "videoBitKbps"
+    className: "ipc-player-plugin-videoBitKbps"
   }, bitKbps);
 };

package/lib/plugins/videoBitKbps/videoBitKbps.less

@@ -1,11 +1,12 @@
-.videoBitKbps {
+.ipc-player-plugin-videoBitKbps {
     display: flex;
     align-items: center;
-    padding: 5px 8px;
-    border-radius: 12.5px;
+    height: calc(24px * var(--ipc-player-size-scale, 1));
+    padding: 0 calc(8px * var(--ipc-player-size-scale, 1));
+    border-radius: calc(24px * var(--ipc-player-size-scale, 1));
     opacity: 1;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
-    margin-right: 8px;
     color: var(--iconColor);
+    font-size: calc(12px * var(--ipc-player-size-scale, 1));
 }

package/lib/plugins/voiceIntercom/voiceIntercom.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
+import { TouchEventHandler } from '@ray-js/components/lib/types';
 import './voiceIntercom.less';
 import { ComponentConfigProps } from '../../interface';
 type Props = ComponentConfigProps & {
     style?: React.CSSProperties;
     className?: string;
+    onTouchStart?: TouchEventHandler['onTouchStart'];
+    onTouchEnd?: TouchEventHandler['onTouchEnd'];
 };
-export declare function VoiceIntercom({ style, className, recording: recordingAtom, intercom: intercomAtom, setIntercom, mute: muteAtom, setMute, getStreamStatus, }: Props): React.JSX.Element;
+export declare function VoiceIntercom({ style, className, recording: recordingAtom, intercom: intercomAtom, setIntercom, mute: muteAtom, setMute, getStreamStatus, onTouchStart, onTouchEnd, }: Props): React.JSX.Element;
 export {};

package/lib/plugins/voiceIntercom/voiceIntercom.js

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import { useStore } from '../../ctx/store';
 import './voiceIntercom.less';
 import { PlayerStreamStatus } from '../../interface';
+const NILL = () => null;
 export function VoiceIntercom(_ref) {
   let {
     style,
@@ -14,7 +15,9 @@ export function VoiceIntercom(_ref) {
     setIntercom,
     mute: muteAtom,
     setMute,
-    getStreamStatus
+    getStreamStatus,
+    onTouchStart = NILL,
+    onTouchEnd = NILL
   } = _ref;
   const {
     recording,
@@ -61,12 +64,13 @@ export function VoiceIntercom(_ref) {
   return /*#__PURE__*/React.createElement(View, {
     style: _objectSpread({}, style),
     className: clsx('ipc-player-plugin-voice-intercom', className),
+    onTouchStart: onTouchStart,
     onLongClick: () => {
-      console.log('2222');
       longClickStartedRef.current = true;
       startVoice(!intercom, recording, mute);
     },
-    onTouchEnd: () => {
+    onTouchEnd: e => {
+      onTouchEnd(e);
       if (!longClickStartedRef.current) return;
       longClickStartedRef.current = false;
       endVoice();

package/lib/plugins/voiceIntercom/voiceIntercom.less

@@ -1,10 +1,11 @@
 .ipc-player-plugin-voice-intercom {
   background: var(--ipc-player-plugin-voice-bg, radial-gradient(77% 77% at 34% 28%, #FF997C 0%, #FF592A 99%));
-  width: 144rpx;
-  height: 144rpx;
-  border-radius: 144rpx;
+  width: calc(72px * var(--ipc-player-size-scale, 1));
+  height: calc(72px * var(--ipc-player-size-scale, 1));
+  border-radius: calc(72px * var(--ipc-player-size-scale, 1));
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 58rpx;
+  font-size: calc(29px * var(--ipc-player-size-scale, 1));
+  color: #fff;
 }

package/lib/ui/bottomContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UseCtx } from '../interface';
+type Props = {
+    ctx: ReturnType<UseCtx>;
+    children: React.ReactNode;
+};
+export declare function BottomContent({ ctx, children }: Props): React.JSX.Element;
+export {};

package/lib/ui/bottomContent.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { CoverView, View } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useStore } from '../ctx/store';
+import { useComponentHideState } from './hooks';
+export function BottomContent(_ref) {
+  let {
+    ctx,
+    children
+  } = _ref;
+  const {
+    screenType
+  } = useStore({
+    screenType: ctx.screenType,
+    playState: ctx.playState
+  });
+  const [shouldHide] = useComponentHideState(screenType);
+  return /*#__PURE__*/React.createElement(CoverView, {
+    className: "ipc-player-bottom-content-warp"
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      // @ts-ignore
+      '--height': screenType === 'vertical' ? '48px' : '69px',
+      '--gap': '25px'
+    },
+    className: clsx('ipc-player-content-item', 'ipc-player-bottom-content', {
+      'ipc-player-bottom-content-hide': shouldHide
+    })
+  }, children));
+}

package/lib/ui/constant.d.ts

@@ -0,0 +1,5 @@
+export declare const showAllComponent = "showAllComponent";
+export declare const hideAllComponent = "hideAllComponent";
+export declare const playerTap = "playerTap";
+export declare const pauseTimeToHideAllComponent = "pauseTimeToHideAllComponent";
+export declare const startTimeToHideAllComponent = "startTimeToHideAllComponent";

package/lib/ui/constant.js

@@ -0,0 +1,5 @@
+export const showAllComponent = 'showAllComponent';
+export const hideAllComponent = 'hideAllComponent';
+export const playerTap = 'playerTap';
+export const pauseTimeToHideAllComponent = 'pauseTimeToHideAllComponent';
+export const startTimeToHideAllComponent = 'startTimeToHideAllComponent';

package/lib/ui/context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { EventInstance } from './event';
+export type UIEvent = {
+    event: EventInstance;
+};
+export declare const UIEventContext: import("react").Context<UIEvent>;

package/lib/ui/context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export const UIEventContext = /*#__PURE__*/createContext({
+  event: {
+    off: () => null,
+    on: () => null,
+    emit: () => null
+  }
+});

package/lib/ui/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/ui/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);
+        });
+      }
+    }
+  };
+}

package/lib/ui/hooks.d.ts

@@ -0,0 +1 @@
+export declare function useComponentHideState(screenType: any): boolean[];

package/lib/ui/hooks.js

@@ -0,0 +1,25 @@
+import { useContext, useState, useEffect } from 'react';
+import { UIEventContext } from './context';
+import { hideAllComponent, showAllComponent } from './constant';
+export function useComponentHideState(screenType) {
+  const {
+    event
+  } = useContext(UIEventContext);
+  const [shouldHide, setShouldHide] = useState(false);
+  const listenHideEvent = () => {
+    if (screenType === 'vertical') return;
+    setShouldHide(true);
+  };
+  const listenShowEvent = () => {
+    setShouldHide(false);
+  };
+  useEffect(() => {
+    event.on(hideAllComponent, listenHideEvent);
+    event.on(showAllComponent, listenShowEvent);
+    return () => {
+      event.off(hideAllComponent, listenHideEvent);
+      event.off(showAllComponent, listenShowEvent);
+    };
+  }, [listenHideEvent]);
+  return [shouldHide];
+}

package/lib/ui/index.d.ts

@@ -1 +1,3 @@
 export * from './ui';
+export * from './hooks';
+export * from './context';

package/lib/ui/index.js

@@ -1 +1,3 @@
-export * from './ui';
+export * from './ui';
+export * from './hooks';
+export * from './context';

package/lib/ui/topContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UseCtx } from '../interface';
+type Props = {
+    ctx: ReturnType<UseCtx>;
+    children: React.ReactNode;
+};
+export declare function TopContent({ ctx, children }: Props): React.JSX.Element;
+export {};

package/lib/ui/topContent.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { CoverView, View } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useStore } from '../ctx/store';
+import { useComponentHideState } from './hooks';
+export function TopContent(_ref) {
+  let {
+    ctx,
+    children
+  } = _ref;
+  const {
+    screenType
+  } = useStore({
+    screenType: ctx.screenType,
+    playState: ctx.playState
+  });
+  const [shouldHide] = useComponentHideState(screenType);
+  return /*#__PURE__*/React.createElement(CoverView, {
+    className: "ipc-player-top-content-warp"
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      // @ts-ignore
+      '--height': screenType === 'vertical' ? '48px' : '69px',
+      '--gap': '16px'
+    },
+    className: clsx('ipc-player-content-item', 'ipc-player-top-content', {
+      'ipc-player-top-content-hide': shouldHide
+    })
+  }, children));
+}

package/lib/ui/ui.d.ts

@@ -7,6 +7,7 @@ type CSSVariable = {
     '--iconFontSize': string;
     '--bg-color': string;
     '--fontColor': string;
+    '--fontSize': string;
 };
 type Props = {
     devId: string;
@@ -16,5 +17,5 @@ type Props = {
     style?: React.CSSProperties;
     CSSVariable?: Partial<CSSVariable>;
 };
-export declare const IPCPlayerIntegration: (props: Props) => React.JSX.Element;
+export declare const IPCPlayerIntegration: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;
 export {};

package/lib/ui/ui.js

@@ -1,11 +1,16 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useRef } from 'react';
+import React, { useRef, useMemo, useEffect, useCallback } from 'react';
 import { View, CoverView, getSystemInfoSync } 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 { useStore, getDefaultStore } from '../ctx/store';
+import { getEventInstance } from './event';
+import { UIEventContext } from './context';
+import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent } from './constant';
+import { BottomContent } from './bottomContent';
+import { TopContent } from './topContent';
 import './ui.less';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
@@ -19,11 +24,13 @@ function getCtxInstance(instance, devId) {
 
 const defaultCSSVariable = {
   '--iconColor': '#fff',
-  '--iconFontSize': '40rpx',
+  '--iconFontSize': '20px',
   '--bg-color': '#000',
-  '--fontColor': '#fff'
+  '--fontColor': '#fff',
+  '--fontSize': '12px'
 };
-export const IPCPlayerIntegration = props => {
+const HIDE_COMPONENT_TIME = 5000;
+export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   const {
     className,
     devId,
@@ -34,6 +41,12 @@ export const IPCPlayerIntegration = props => {
   const {
     setPlayState
   } = instance;
+  const prevTriggerEvent = useRef();
+  const eventRef = useRef();
+  const timer = useRef();
+  if (!eventRef.current) {
+    eventRef.current = getEventInstance();
+  }
   const systemInfo = useRef(null);
   if (!systemInfo.current) {
     systemInfo.current = getSystemInfoSync();
@@ -51,30 +64,97 @@ export const IPCPlayerIntegration = props => {
     screenType: instance.screenType,
     playState: instance.playState
   });
+  const renderTopContent = useMemo(() => {
+    if (!topContent || !(topContent !== null && topContent !== void 0 && topContent.length)) return null;
+    return topContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
+      key: item.id
+    }, item.initProps), instance), {}, {
+      IPCPlayerContext: instance.IPCPlayerInstance
+    })));
+  }, [topContent, instance]);
+  const renderBottomContent = useMemo(() => {
+    if (!bottomContent || !(bottomContent !== null && bottomContent !== void 0 && bottomContent.length)) return null;
+    return bottomContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({}, item.initProps), {}, {
+      key: item.id
+    }, instance), {}, {
+      IPCPlayerContext: instance.IPCPlayerInstance
+    })));
+  }, [bottomContent, instance]);
 
   /**
    * 视频流加载状态封装
    */
 
+  const handPlayerTap = useCallback(data => {
+    console.log('res===on onVideoTap', data);
+    const store = getDefaultStore();
+    const _screenType = store.get(instance.screenType);
+    eventRef.current.emit(playerTap);
+    if (_screenType === 'full') {
+      if (prevTriggerEvent.current === hideAllComponent) {
+        triggerEvent(showAllComponent);
+      } else {
+        triggerEvent(hideAllComponent);
+      }
+    }
+  }, []);
+  const triggerEvent = type => {
+    const store = getDefaultStore();
+    const _screenType = store.get(instance.screenType);
+    if (prevTriggerEvent.current === type || _screenType === 'vertical') return;
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    if (type === showAllComponent) {
+      // @ts-ignore
+      timer.current = setTimeout(() => {
+        triggerEvent(hideAllComponent);
+      }, HIDE_COMPONENT_TIME);
+    }
+    eventRef.current.emit(type);
+    prevTriggerEvent.current = type;
+  };
+  const listenStart = useCallback(() => {
+    if (!timer.current) {
+      // @ts-ignore
+      timer.current = setTimeout(() => {
+        triggerEvent(hideAllComponent);
+      }, HIDE_COMPONENT_TIME);
+    }
+  }, []);
+  const listenPause = useCallback(() => {
+    clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+  useEffect(() => {
+    eventRef.current.on(startTimeToHideAllComponent, listenStart);
+    return () => {
+      eventRef.current.off(startTimeToHideAllComponent, listenStart);
+    };
+  }, [listenStart]);
+  useEffect(() => {
+    eventRef.current.on(pauseTimeToHideAllComponent, listenPause);
+    return () => {
+      eventRef.current.off(pauseTimeToHideAllComponent, listenPause);
+    };
+  });
   const playerReady = playState === PlayState.PLAYING;
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(UIEventContext.Provider, {
+    value: {
+      event: eventRef.current
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-content', className),
     style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultCSSVariable), CSSVariable), style), {}, {
-      height: screenType === 'full' ? `${systemInfo.current.screenWidth}px` : style === null || style === void 0 ? void 0 : style.height
+      height: screenType === 'vertical' ? (style === null || style === void 0 ? void 0 : style.height) || '100%' : '100vh'
     })
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      width: '100%',
-      height: '100%'
-    }
   }, /*#__PURE__*/React.createElement(IPCPlayer, {
-    objectFit: "fillCrop",
+    objectFit: "",
     defaultMute: true,
     devId: devId,
     onlineStatus: true,
-    ipcPlayerContext: instance.IPCPlayerInstance
-    // updateLayout={`${playerLayout}`}
-    ,
+    ipcPlayerContext: instance.IPCPlayerInstance,
     onChangeStreamStatus: code => {
       var _props$onPlayStatus;
       const playStateMap = {
@@ -95,38 +175,39 @@ export const IPCPlayerIntegration = props => {
     // onCtx={getIpcPlayer}
     // onPlayerTap={handlePlayerClick}
     ,
-    clarity: "hd",
-    privateState: false
-  })), /*#__PURE__*/React.createElement(CoverView, {
-    style: {
-      height: screenType === 'vertical' ? '48px' : '69px'
+    onZoomChange: () => {
+      console.log('res===onZoomChange');
     },
-    className: clsx('ipc-player-top-content', playerReady ? 'ipc-player-element-visible' : 'ipc-player-element-hidden')
-  }, (() => {
-    if (!topContent || !(topContent !== null && topContent !== void 0 && topContent.length)) return null;
-    return topContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
-      key: item.id
-    }, item.initProps), instance), {}, {
-      IPCPlayerContext: instance.IPCPlayerInstance
-    })));
-  })()), /*#__PURE__*/React.createElement(CoverView, {
-    style: {
-      height: screenType === 'vertical' ? '48px' : '69px'
+    onSessionDidDisconnected: () => {
+      console.log('res===onSessionDidDisconnected');
     },
-    className: clsx('ipc-player-bottom-content', playerReady ? 'ipc-player-element-visible' : 'ipc-player-element-hidden')
-  }, (() => {
-    if (!bottomContent || !(bottomContent !== null && bottomContent !== void 0 && bottomContent.length)) return null;
-    return bottomContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({}, item.initProps), {}, {
-      key: item.id
-    }, instance), {}, {
-      IPCPlayerContext: instance.IPCPlayerInstance
-    })));
-  })()), playerReady && (() => {
+    onCameraPreviewFailure: () => {
+      console.log('res===onCameraPreviewFailure');
+    },
+    onCameraNotifyWeakNetwork: () => {
+      console.log('res===onCameraNotifyWeakNetwork');
+    },
+    clarity: "hd",
+    privateState: false,
+    onPlayerTap: handPlayerTap // 对应原来的onVideoTap
+  }), playerReady && /*#__PURE__*/React.createElement(TopContent, {
+    ctx: instance
+  }, renderTopContent), playerReady && /*#__PURE__*/React.createElement(BottomContent, {
+    ctx: instance
+  }, renderBottomContent), playerReady && (() => {
     if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
-    return absoluteContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
-      key: item.id
-    }, item.initProps), instance), {}, {
-      IPCPlayerContext: instance.IPCPlayerInstance
-    })));
-  })());
-};
+    return absoluteContent.map(item => {
+      return /*#__PURE__*/React.createElement(CoverView, {
+        key: item.id,
+        style: _objectSpread({
+          position: 'absolute'
+        }, item.absolutePosition),
+        className: item.absoluteContentClassName
+      }, /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
+        key: item.id
+      }, item.initProps), instance), {}, {
+        IPCPlayerContext: instance.IPCPlayerInstance
+      })));
+    });
+  })()));
+});

package/lib/ui/ui.less

@@ -1,44 +1,56 @@
 .ipc-player-content {
   position: relative;
+  overflow: hidden;
 
-  &.ipc-player-content-full {
-    height: 100vw;
-  }
-
-  .ipc-player-top-content {
+  .ipc-player-top-content-warp {
     position: absolute;
     width: 100%;
     left: 0;
     top: 0;
-    gap: 20rpx;
-    z-index: 2;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 11rpx;
-    font-size: 24rpx;
-    box-sizing: border-box;
+    z-index: 100;
   }
 
-  .ipc-player-bottom-content {
+  .ipc-player-bottom-content-warp {
     position: absolute;
-    z-index: 2;
-    display: flex;
+    z-index: 100;
     width: 100%;
     left: 0;
     bottom: 0;
+  }
+
+  .ipc-player-content-item {
+    --height: 48px;
+    --gap: 10px;
+    display: flex;
+    width: 100%;
+    height: calc(var(--height) * var(--ipc-player-size-scale, 1));
     align-items: center;
-    gap: 20rpx;
-    padding: 11rpx;
-    font-size: 24rpx;
-    box-sizing: border-box;
+    gap: calc(var(--gap) * var(--ipc-player-size-scale, 1));
+    padding: 0 calc(16px * var(--ipc-player-size-scale, 1));
+    transform: translate(0, 0);
+    transition: transform ease-in 0.3s;
+
+    &.ipc-player-top-content {
+      justify-content: flex-end;
+
+      &.ipc-player-top-content-hide {
+        transform: translate(0, -110%);
+      }
+    }
+
+    &.ipc-player-bottom-content {
+      &.ipc-player-bottom-content-hide {
+        transform: translate(0, 110%)
+      }
+    }
   }
 }
 
+
 .ipc-player-element-visible {
   visibility: visible !important;
 }
 
 .ipc-player-element-hidden {
-  visibility: hidden !important;
+  // visibility: hidden !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-5",
+  "version": "0.0.1-beta-7",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -35,9 +35,10 @@
     "@ray-js/ray": "^1.4.9"
   },
   "dependencies": {
-    "@ray-js/ray-ipc-player": "2.0.17-beta-beta-1",
+    "@ray-js/ray-ipc-player": "2.0.18-beta-beta-1",
+    "@ray-js/ray-ipc-utils": "1.1.0-beta-7",
     "clsx": "^1.2.1",
-    "jotai": "^2.10.1"
+    "jotai": "^2.10.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",