@ray-js/ipc-player-integration 0.0.1-beta-21 → 0.0.1-beta-22

package/lib/plugins/{videoBitKbps/videoBitKbps.js → videoBitKBP/videoBitKBP.js}

@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import { View } from '@ray-js/ray';
-import './videoBitKbps.less';
+import clsx from 'clsx';
 import IpcUtils from '@ray-js/ray-ipc-utils';
 import { PlayState } from '../../interface';
+import './videoBitKBP.less';
 import { useStore } from '../../ctx/store';
-export const VideoBitKbps = props => {
+export const VideoBitKBP = props => {
   const {
     devId,
-    playState
+    playState,
+    className
   } = props;
-  const [bitKbps, setBitKbps] = useState('');
+  const [bitKBP, setBitKBP] = useState('');
   const store = useStore({
     playState
   });
@@ -28,10 +30,15 @@ export const VideoBitKbps = props => {
   const init = async () => {
     const res = await IpcUtils.getVideoBitrateKbps(devId);
     if (res.code !== -1) {
-      setBitKbps(`${res.data.kbps}KB/S`);
+      setBitKBP(`${res.data.kbps}KB/S`);
     }
   };
+  if (bitKBP === '') {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(View, {
-    className: "ipc-player-plugin-videoBitKbps"
-  }, bitKbps);
+    className: clsx(className)
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-videoBitKBP"
+  }, bitKBP));
 };

package/lib/plugins/{videoBitKbps/videoBitKbps.less → videoBitKBP/videoBitKBP.less}

@@ -1,12 +1,11 @@
-.ipc-player-plugin-videoBitKbps {
+.ipc-player-plugin-videoBitKBP {
     display: flex;
     align-items: center;
     height: calc(24px * var(--ipc-player-size-scale, 1));
-    padding: 0 calc(8px * 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));
-    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));
+    background-color: rgba(255, 255, 255, 0.3);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

package/lib/ui/bottomLeftContent.d.ts

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

package/lib/ui/{topContent.js → bottomLeftContent.js}

@@ -3,7 +3,7 @@ import { CoverView, View } from '@ray-js/ray';
 import clsx from 'clsx';
 import { useStore } from '../ctx/store';
 import { useComponentHideState } from './hooks';
-export function TopContent(_ref) {
+const BottomLeftContent = _ref => {
   let {
     ctx,
     children
@@ -18,15 +18,16 @@ export function TopContent(_ref) {
   });
   const [shouldHide] = useComponentHideState(screenType);
   return /*#__PURE__*/React.createElement(CoverView, {
-    className: "ipc-player-top-content-warp"
+    className: clsx('ipc-player-bottom-left-content-wrap', {
+      'ipc-player-bottom-left-content-hide': shouldHide || fullResolutionActive,
+      'ipc-player-bottom-left-content-show': !shouldHide && !fullResolutionActive
+    })
   }, /*#__PURE__*/React.createElement(View, {
     style: {
-      // @ts-ignore
-      '--height': screenType === 'vertical' ? '48px' : '69px',
-      '--gap': '16px'
+      paddingBottom: screenType === 'vertical' ? '14px' : '20px',
+      paddingLeft: screenType === 'vertical' ? 0 : '25px'
     },
-    className: clsx('ipc-player-content-item', 'ipc-player-top-content', {
-      'ipc-player-top-content-hide': shouldHide || fullResolutionActive
-    })
+    className: clsx('ipc-player-bottom-left-content-container')
   }, children));
-}
+};
+export default BottomLeftContent;

package/lib/ui/bottomRightContent.d.ts

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

package/lib/ui/bottomRightContent.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CoverView, View } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useStore } from '../ctx/store';
+import { useComponentHideState } from './hooks';
+const BottomRightContent = _ref => {
+  let {
+    ctx,
+    children
+  } = _ref;
+  const {
+    screenType,
+    fullResolutionActive
+  } = useStore({
+    screenType: ctx.screenType,
+    playState: ctx.playState,
+    fullResolutionActive: ctx.fullResolutionActive
+  });
+  const [shouldHide] = useComponentHideState(screenType);
+  return /*#__PURE__*/React.createElement(CoverView, {
+    className: clsx('ipc-player-bottom-right-content-wrap', {
+      'ipc-player-bottom-right-content-hide': shouldHide || fullResolutionActive,
+      'ipc-player-bottom-right-content-show': !shouldHide && !fullResolutionActive
+    })
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      paddingBottom: screenType === 'vertical' ? '14px' : '20px',
+      paddingRight: screenType === 'vertical' ? 0 : '25px'
+    },
+    className: clsx('ipc-player-bottom-right-content-container')
+  }, children));
+};
+export default BottomRightContent;

package/lib/ui/constant.d.ts

@@ -7,3 +7,4 @@ export declare const voiceIntercomId = "voiceIntercomId";
 export declare const verticalScreenId = "verticalScreenId";
 export declare const ptzControlId = "ptzControlId";
 export declare const fullResolutionId = "fullResolutionId";
+export declare const batteryId = "Battery";

package/lib/ui/constant.js

@@ -6,4 +6,5 @@ export const startTimeToHideAllComponent = 'startTimeToHideAllComponent';
 export const voiceIntercomId = 'voiceIntercomId';
 export const verticalScreenId = 'verticalScreenId';
 export const ptzControlId = 'ptzControlId';
-export const fullResolutionId = 'fullResolutionId';
+export const fullResolutionId = 'fullResolutionId';
+export const batteryId = 'Battery';

package/lib/ui/hooks.d.ts

@@ -1 +1 @@
-export declare function useComponentHideState(screenType: any): boolean[];
+export declare const useComponentHideState: (screenType: any) => boolean[];

package/lib/ui/hooks.js

@@ -1,13 +1,14 @@
 import { useContext, useState, useEffect } from 'react';
 import { UIEventContext } from './context';
 import { hideAllComponent, showAllComponent } from './constant';
-export function useComponentHideState(screenType) {
+export const useComponentHideState = () => {
   const {
     event
   } = useContext(UIEventContext);
   const [shouldHide, setShouldHide] = useState(false);
   const listenHideEvent = () => {
-    if (screenType === 'vertical') return;
+    // 横竖屏都支持点击隐藏
+    // if (screenType === 'vertical') return;
     setShouldHide(true);
   };
   const listenShowEvent = () => {
@@ -22,4 +23,4 @@ export function useComponentHideState(screenType) {
     };
   }, [listenHideEvent]);
   return [shouldHide];
-}
+};

package/lib/ui/{bottomContent.d.ts → topLeftContent.d.ts}

@@ -4,5 +4,5 @@ type Props = {
     ctx: ReturnType<UseCtx>;
     children: React.ReactNode;
 };
-export declare function BottomContent({ ctx, children }: Props): React.JSX.Element;
-export {};
+declare const TopLeftContent: ({ ctx, children }: Props) => React.JSX.Element;
+export default TopLeftContent;

package/lib/ui/topLeftContent.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { CoverView, View } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useStore } from '../ctx/store';
+import { useComponentHideState } from './hooks';
+const TopLeftContent = _ref => {
+  let {
+    ctx,
+    children
+  } = _ref;
+  const {
+    screenType,
+    fullResolutionActive
+  } = useStore({
+    screenType: ctx.screenType,
+    playState: ctx.playState,
+    fullResolutionActive: ctx.fullResolutionActive
+  });
+  const [shouldHide] = useComponentHideState(screenType);
+  return /*#__PURE__*/React.createElement(CoverView, {
+    className: clsx('ipc-player-top-left-content-wrap', {
+      'ipc-player-top-left-content-hide': shouldHide || fullResolutionActive,
+      'ipc-player-top-left-content-show': !shouldHide && !fullResolutionActive
+    })
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      paddingTop: screenType === 'vertical' ? '12px' : '16px',
+      paddingLeft: screenType === 'vertical' ? 0 : '25px'
+    }
+    // className={clsx('ipc-player-content-item', 'ipc-player-top-content', {
+    //   'ipc-player-top-content-hide': shouldHide || fullResolutionActive,
+    // })}
+    ,
+    className: clsx('ipc-player-top-left-content-container')
+  }, children));
+};
+export default TopLeftContent;

package/lib/ui/{topContent.d.ts → topRightContent.d.ts}

@@ -4,5 +4,5 @@ type Props = {
     ctx: ReturnType<UseCtx>;
     children: React.ReactNode;
 };
-export declare function TopContent({ ctx, children }: Props): React.JSX.Element;
-export {};
+declare const TopRightContent: ({ ctx, children }: Props) => React.JSX.Element;
+export default TopRightContent;

package/lib/ui/{bottomContent.js → topRightContent.js}

@@ -3,7 +3,7 @@ import { CoverView, View } from '@ray-js/ray';
 import clsx from 'clsx';
 import { useStore } from '../ctx/store';
 import { useComponentHideState } from './hooks';
-export function BottomContent(_ref) {
+const TopRightContent = _ref => {
   let {
     ctx,
     children
@@ -18,15 +18,16 @@ export function BottomContent(_ref) {
   });
   const [shouldHide] = useComponentHideState(screenType);
   return /*#__PURE__*/React.createElement(CoverView, {
-    className: "ipc-player-bottom-content-warp"
+    className: clsx('ipc-player-top-right-content-wrap', {
+      'ipc-player-top-right-content-hide': shouldHide || fullResolutionActive,
+      'ipc-player-top-right-content-show': !shouldHide && !fullResolutionActive
+    })
   }, /*#__PURE__*/React.createElement(View, {
     style: {
-      // @ts-ignore
-      '--height': screenType === 'vertical' ? '48px' : '69px',
-      '--gap': '25px'
+      paddingTop: screenType === 'vertical' ? '12px' : '16px',
+      paddingRight: screenType === 'vertical' ? 0 : '25px'
     },
-    className: clsx('ipc-player-content-item', 'ipc-player-bottom-content', {
-      'ipc-player-bottom-content-hide': shouldHide || fullResolutionActive
-    })
+    className: clsx('ipc-player-top-right-content-container')
   }, children));
-}
+};
+export default TopRightContent;

package/lib/ui/ui.d.ts

@@ -6,7 +6,10 @@ type CSSVariable = {
     '--iconColor': string;
     '--iconActiveColor': string;
     '--iconFontSize': string;
+    '--iconPlayerSize': string;
+    '--iconBoxSize': string;
     '--bg-color': string;
+    '--shot-card-bg-color': string;
     '--fontColor': string;
     '--fontSize': string;
 };

package/lib/ui/ui.js

@@ -9,8 +9,10 @@ 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 BottomLeftContent from './bottomLeftContent';
+import BottomRightContent from './bottomRightContent';
+import TopLeftContent from './topLeftContent';
+import TopRightContent from './topRightContent';
 import './ui.less';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
@@ -27,13 +29,15 @@ const defaultCSSVariable = {
   // 有需要点击呈现不同颜色的icon
   '--iconActiveColor': '#ec653c',
   '--iconFontSize': '20px',
+  '--iconPlayerSize': '22px',
+  '--iconBoxSize': '24px',
   '--bg-color': '#000',
+  '--shot-card-bg-color': '#262626',
   '--fontColor': '#fff',
   '--fontSize': '12px'
 };
 const HIDE_COMPONENT_TIME = 5000;
 export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
-  console.log(props, 'props');
   const {
     className,
     devId,
@@ -73,8 +77,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     systemInfo.current = getSystemInfoSync();
   }
   const {
-    topContent,
-    bottomContent,
+    topLeftContent,
+    topRightContent,
+    bottomLeftContent,
+    bottomRightContent,
     absoluteContent,
     screenType,
     playState,
@@ -82,8 +88,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     resolution,
     mute
   } = useStore({
-    topContent: instance.topContent,
-    bottomContent: instance.bottomContent,
+    topLeftContent: instance.topLeftContent,
+    topRightContent: instance.topRightContent,
+    bottomLeftContent: instance.bottomLeftContent,
+    bottomRightContent: instance.bottomRightContent,
     absoluteContent: instance.absoluteContent,
     screenType: instance.screenType,
     playState: instance.playState,
@@ -91,22 +99,66 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     resolution: instance.resolution,
     mute: instance.mute
   });
-  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({
+
+  /**
+   * 渲染随机定位播放器内容
+   */
+
+  /**
+   * 渲染播放器左上角内容
+   */
+  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({
+      key: item.id
+    }, item.initProps), instance), {}, {
+      IPCPlayerContext: instance.IPCPlayerInstance,
+      // 添加通用变量单独组件类名
+      className: clsx('top-left-item-container')
+    })));
+  }, [topLeftContent, instance]);
+
+  /**
+   * 渲染播放器右上角内容
+   */
+  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({
       key: item.id
     }, item.initProps), instance), {}, {
-      IPCPlayerContext: instance.IPCPlayerInstance
+      IPCPlayerContext: instance.IPCPlayerInstance,
+      // 添加通用变量单独组件类名
+      className: clsx('top-right-item-container')
+    })));
+  }, [topRightContent, instance]);
+
+  /**
+   * 渲染播放器左下角内容
+   */
+  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), {}, {
+      key: item.id
+    }, instance), {}, {
+      IPCPlayerContext: instance.IPCPlayerInstance,
+      // 添加通用变量单独组件类名
+      className: clsx('bottom-left-item-container')
     })));
-  }, [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), {}, {
+  }, [bottomLeftContent, instance]);
+
+  /**
+   * 渲染播放器右下角内容
+   */
+  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), {}, {
       key: item.id
     }, instance), {}, {
-      IPCPlayerContext: instance.IPCPlayerInstance
+      IPCPlayerContext: instance.IPCPlayerInstance,
+      // 添加通用变量单独组件类名
+      className: clsx('bottom-right-item-container')
     })));
-  }, [bottomContent, instance]);
+  }, [bottomLeftContent, instance]);
 
   /**
    * 视频流加载状态封装
@@ -117,27 +169,27 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     const store = getDefaultStore();
     const _screenType = store.get(instance.screenType);
     eventRef.current.emit(playerTap);
-    if (_screenType === 'full') {
-      // 如果全屏清晰度展开, 则点击关闭全屏清晰度, 展示所有组件
-      if (fullResolutionActive) {
-        setFullResolutionActive(false);
-        // 展示相应菜单启动自动隐藏定时
-        triggerEvent(showAllComponent);
-        // event.emit(startTimeToHideAllComponent);
-        return false;
-      }
-      if (prevTriggerEvent.current === hideAllComponent) {
-        triggerEvent(showAllComponent);
-      } else {
-        triggerEvent(hideAllComponent);
-      }
+    // if (_screenType === 'full') {
+    // 如果全屏清晰度展开, 则点击关闭全屏清晰度, 展示所有组件
+    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);
+    } else {
+      triggerEvent(hideAllComponent);
     }
     return false;
   }, [fullResolutionActive]);
   const triggerEvent = type => {
     const store = getDefaultStore();
-    const _screenType = store.get(instance.screenType);
-    if (prevTriggerEvent.current === type || _screenType === 'vertical') return;
+    store.get(instance.screenType); // if (prevTriggerEvent.current === type || _screenType === 'vertical') return;
+    if (prevTriggerEvent.current === type) return;
     if (timer.current) {
       clearTimeout(timer.current);
       timer.current = null;
@@ -183,6 +235,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }, /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-content', className),
     style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultCSSVariable), CSSVariable), style), {}, {
+      // backgroundColor: 'rgba(0,0,0,0.2)',
       height: screenType === 'vertical' ? (style === null || style === void 0 ? void 0 : style.height) || '100%' : '100vh'
     })
   }, /*#__PURE__*/React.createElement(IPCPlayer, {
@@ -193,6 +246,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     ipcPlayerContext: instance.IPCPlayerInstance,
     onChangeStreamStatus: code => {
       var _props$onPlayStatus;
+      console.log(code, 'code');
       const playStateMap = {
         [PlayerStreamStatus.PreviewSuccess]: PlayState.PLAYING,
         // 播放中
@@ -241,11 +295,15 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     clarity: resolution === 'HD' ? 'hd' : 'normal',
     privateState: privateState,
     onPlayerTap: handPlayerTap // 对应原来的onVideoTap
-  }), playerReady && /*#__PURE__*/React.createElement(TopContent, {
+  }), /*#__PURE__*/React.createElement(TopLeftContent, {
+    ctx: instance
+  }, renderTopLeftContent), /*#__PURE__*/React.createElement(TopRightContent, {
+    ctx: instance
+  }, renderTopRightContent), /*#__PURE__*/React.createElement(BottomLeftContent, {
     ctx: instance
-  }, renderTopContent), playerReady && /*#__PURE__*/React.createElement(BottomContent, {
+  }, renderBottomLeftContent), /*#__PURE__*/React.createElement(BottomRightContent, {
     ctx: instance
-  }, renderBottomContent), playerReady && (() => {
+  }, renderBottomRightContent), playerReady && (() => {
     if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
     console.log(absoluteContent, 'absoluteContent');
     return absoluteContent.map(item => {
@@ -258,7 +316,9 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       }, /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
         key: item.id
       }, item.initProps), instance), {}, {
-        IPCPlayerContext: instance.IPCPlayerInstance
+        IPCPlayerContext: instance.IPCPlayerInstance,
+        // 添加通用变量单独组件类名
+        className: clsx('absolute-item-container')
       })));
     });
   })()));