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

package/lib/plugins/smallIntercom/smallIntercom.less

@@ -0,0 +1,50 @@
+.ipc-player-plugin-small-intercom-icon {
+  color: var(--iconColor);
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
+}
+.ipc-player-plugin-screenshot-toast-wrap {
+  position: absolute;
+  // max-width: 300px;
+  // left: 50%;
+  // transform: translateX(-50%);
+  // top: calc(16px * var(--ipc-player-size-scale, 1));
+}
+.ipc-player-plugin-screenshot-toast {
+  border-radius: calc(8px * var(--ipc-player-size-scale, 1));;
+  background-color: var(--shot-card-bg-color);
+  display: flex;
+  align-items: center;
+  padding: calc(8px * var(--ipc-player-size-scale, 1)) calc(12px * var(--ipc-player-size-scale, 1));
+  z-index: 100;
+  .ipc-player-plugin-screenshot-toast-image-box {
+    border-radius: calc(4px * var(--ipc-player-size-scale, 1));
+    overflow: hidden;
+    width: calc(66px * var(--ipc-player-size-scale, 1));
+    height: calc(66px * 0.57 * var(--ipc-player-size-scale, 1));
+  }
+  .ipc-player-plugin-screenshot-toast-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .ipc-player-plugin-screenshot-toast-title {
+    flex: 1;
+    margin-left: calc(12px * var(--ipc-player-size-scale, 1));
+    font-size: calc(14px * var(--ipc-player-size-scale, 1));
+    color: var(--fontColor);
+    margin-right: calc(12px * var(--ipc-player-size-scale, 1));
+    word-break: break-word;
+    
+  }
+  .ipc-player-plugin-screenshot-toast-bottom {
+    border: 1px solid #1989FA;
+    min-width: calc(52px * var(--ipc-player-size-scale, 1));
+    max-width: calc(100px * var(--ipc-player-size-scale, 1));
+    border-radius: calc(4px * var(--ipc-player-size-scale, 1));
+    padding: calc(5px * var(--ipc-player-size-scale, 1)) calc(11px * var(--ipc-player-size-scale, 1));
+    font-size: calc(14px * var(--ipc-player-size-scale, 1));
+    white-space: nowrap;
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+  }
+}

package/lib/plugins/tempHumidity/tempHumidity.d.ts

@@ -4,5 +4,5 @@ import './tempHumidity.less';
 interface IProp extends ComponentConfigProps {
     className?: string;
 }
-export declare const TempHumidity: (props: IProp) => React.JSX.Element;
+export declare const TempHumidity: (props: IProp) => React.JSX.Element | null;
 export {};

package/lib/plugins/tempHumidity/tempHumidity.js

@@ -27,7 +27,7 @@ export const TempHumidity = props => {
         className: "ipc-player-plugin-tempHumidity-text-icon icon-panel icon-panel-temperature"
       }), /*#__PURE__*/React.createElement(Text, null, tempC));
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
+    return null;
   };
   const humRender = () => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
@@ -36,8 +36,16 @@ export const TempHumidity = props => {
       className: "tempHumidity"
     }, `${humidity}`));
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, (tempC || tempF || humidity) && /*#__PURE__*/React.createElement(View, {
-    className: clsx('ipc-player-plugin-tempHumidity', className)
+  console.log(tempC, tempF, humidity);
+
+  // 当无值时返回null
+  if (!tempC && !tempF && !humidity) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className)
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-tempHumidity')
   }, (() => {
     if ((tempC || tempUnit === '1' && tempF) && humidity) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, tempRender(), /*#__PURE__*/React.createElement(Text, {
@@ -50,6 +58,6 @@ export const TempHumidity = props => {
     if (humidity) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, humRender());
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
+    return null;
   })()));
 };

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

@@ -0,0 +1 @@
+export * from './videoBitKBP';

package/lib/plugins/videoBitKBP/index.js

@@ -0,0 +1 @@
+export * from './videoBitKBP';

package/lib/plugins/{videoBitKbps/videoBitKbps.d.ts → videoBitKBP/videoBitKBP.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
-import './videoBitKbps.less';
 import { ComponentConfigProps } from '../../interface';
+import './videoBitKBP.less';
 type Props = ComponentConfigProps;
-export declare const VideoBitKbps: (props: Props) => React.JSX.Element;
+export declare const VideoBitKBP: (props: Props) => React.JSX.Element | null;
 export {};

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/plugins/voiceIntercom/voiceIntercom.d.ts

@@ -9,5 +9,5 @@ type Props = ComponentConfigProps & {
     onTouchStart?: TouchEventHandler['onTouchStart'];
     onTouchEnd?: TouchEventHandler['onTouchEnd'];
 };
-export declare function VoiceIntercom({ style, className, iconClassName, recording: recordingAtom, intercom: intercomAtom, intercomMode: intercomModeAtom, setIntercom, mute: muteAtom, setMute, getStreamStatus, onTouchStart, onTouchEnd, }: Props): React.JSX.Element;
+export declare const VoiceIntercom: (props: Props) => React.JSX.Element;
 export {};

package/lib/plugins/voiceIntercom/voiceIntercom.js

@@ -7,34 +7,39 @@ import { useStore, getDefaultStore } from '../../ctx/store';
 import './voiceIntercom.less';
 import { PlayerStreamStatus, IntercomMode } from '../../interface';
 import { UIEventContext } from '../../ui/context';
+import { radialGradient } from '../../utils';
 import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
 const NILL = () => null;
-export function VoiceIntercom(_ref) {
-  let {
+export const VoiceIntercom = props => {
+  const {
     style,
     className,
     iconClassName,
-    recording: recordingAtom,
-    intercom: intercomAtom,
-    intercomMode: intercomModeAtom,
+    // recording: recordingAtom,
+    // intercom: intercomAtom,
+    // intercomMode: intercomModeAtom,
     setIntercom,
-    mute: muteAtom,
+    // mute: muteAtom,
     setMute,
     getStreamStatus,
     onTouchStart = NILL,
     onTouchEnd = NILL
-  } = _ref;
+  } = props;
   const {
     event
   } = useContext(UIEventContext);
   const {
+    recording,
     mute,
     intercom,
-    intercomMode
+    intercomMode,
+    brandColor
   } = useStore({
-    mute: muteAtom,
-    intercom: intercomAtom,
-    intercomMode: intercomModeAtom
+    recording: props.recording,
+    mute: props.mute,
+    intercom: props.intercom,
+    intercomMode: props.intercomMode,
+    brandColor: props.brandColor
   });
   // 对讲开始之前的静音状态
   const originMuteStatusBeforeVoice = useRef(mute);
@@ -70,17 +75,19 @@ export function VoiceIntercom(_ref) {
     event.emit(startTimeToHideAllComponent);
   };
   return /*#__PURE__*/React.createElement(View, {
-    style: _objectSpread({}, style),
+    style: _objectSpread(_objectSpread({}, style), {
+      background: radialGradient(brandColor)
+    }),
     className: clsx('ipc-player-plugin-voice-intercom', className),
     onTouchStart: async e => {
       onTouchStart(e);
-      const store = getDefaultStore();
+      getDefaultStore();
       if (loading.current) return;
       loading.current = true;
-      const _intercom = store.get(intercomAtom);
-      const _recording = store.get(recordingAtom);
-      const target = !_intercom;
-      if (target && _recording) {
+      // const _intercom = store.get(intercomAtom);
+      // const _recording = store.get(recordingAtom);
+      const target = !intercom;
+      if (target && recording) {
         console.log('录制中，无法对讲');
         loading.current = false;
         return;
@@ -104,4 +111,4 @@ export function VoiceIntercom(_ref) {
   }) : /*#__PURE__*/React.createElement(View, {
     className: clsx('icon-panel', 'icon-panel-one-way-intercom', 'intercom-default-icon', iconClassName)
   }));
-}
+};

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/bottomLeftContent.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 BottomLeftContent = _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-left-content-wrap')
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      paddingBottom: screenType === 'vertical' ? '14px' : '20px',
+      paddingLeft: screenType === 'vertical' ? 0 : '25px'
+    },
+    className: clsx('ipc-player-bottom-left-content-container', {
+      'ipc-player-bottom-left-content-hide': shouldHide || fullResolutionActive,
+      'ipc-player-bottom-left-content-show': !shouldHide && !fullResolutionActive
+    })
+  }, 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')
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      paddingBottom: screenType === 'vertical' ? '14px' : '20px',
+      paddingRight: screenType === 'vertical' ? 0 : '25px'
+    },
+    className: clsx('ipc-player-bottom-right-content-container', {
+      'ipc-player-bottom-right-content-hide': shouldHide || fullResolutionActive,
+      'ipc-player-bottom-right-content-show': !shouldHide && !fullResolutionActive
+    })
+  }, 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/{bottomContent.js → topLeftContent.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 TopLeftContent = _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-left-content-wrap')
   }, /*#__PURE__*/React.createElement(View, {
     style: {
-      // @ts-ignore
-      '--height': screenType === 'vertical' ? '48px' : '69px',
-      '--gap': '25px'
+      paddingTop: screenType === 'vertical' ? '12px' : '16px',
+      paddingLeft: 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-left-content-container', {
+      'ipc-player-top-left-content-hide': shouldHide || fullResolutionActive,
+      'ipc-player-top-left-content-show': !shouldHide && !fullResolutionActive
     })
   }, 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/{topContent.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 TopContent(_ref) {
+const TopRightContent = _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-top-right-content-wrap')
   }, /*#__PURE__*/React.createElement(View, {
     style: {
-      // @ts-ignore
-      '--height': screenType === 'vertical' ? '48px' : '69px',
-      '--gap': '16px'
+      paddingTop: screenType === 'vertical' ? '12px' : '16px',
+      paddingRight: 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-right-content-container', {
+      'ipc-player-top-right-content-hide': shouldHide || fullResolutionActive,
+      'ipc-player-top-right-content-show': !shouldHide && !fullResolutionActive
     })
   }, 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;
 };