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

package/lib/plugins/fullScreen/fullScreen.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useContext } from 'react';
-import { View, setPageOrientation } from '@ray-js/ray';
+import { View, setPageOrientation, Text } from '@ray-js/ray';
 import { useUpdateEffect } from 'ahooks';
 import clsx from 'clsx';
 import { UIEventContext } from '../../ui/context';
@@ -16,7 +16,8 @@ export function FullScreen(props) {
     addContent,
     deleteContent,
     setPtzActive,
-    setFullResolutionActive
+    setFullResolutionActive,
+    className
   } = props;
   const {
     screenType
@@ -42,9 +43,10 @@ export function FullScreen(props) {
     });
 
     // 添加全屏后，返回竖屏的控件
-    addContent('top', {
+    addContent('topLeft', {
       id: verticalScreenId,
       content: VerticalScreen,
+      absoluteContentClassName: 'ipc-player-plugin-vertical-screen-wrap',
       initProps: _objectSpread(_objectSpread({}, props), {}, {
         onClick: () => {
           event.emit(showAllComponent);
@@ -56,11 +58,9 @@ export function FullScreen(props) {
     addContent('absolute', {
       id: voiceIntercomId,
       content: props => {
-        return /*#__PURE__*/React.createElement(View, {
-          className: clsx('ipc-player-plugin-full-screen-voice')
-        }, /*#__PURE__*/React.createElement(VoiceIntercom, props));
+        return /*#__PURE__*/React.createElement(VoiceIntercom, props);
       },
-      absoluteContentClassName: 'ipc-player-plugin-full-screen-voice-warp',
+      absoluteContentClassName: 'ipc-player-plugin-full-screen-voice-wrap',
       initProps: _objectSpread({}, props)
     });
   };
@@ -79,7 +79,7 @@ export function FullScreen(props) {
       });
       ty.showMenuButton();
       ty.showStatusBar();
-      deleteContent('top', verticalScreenId);
+      deleteContent('topLeft', verticalScreenId);
       deleteContent('absolute', voiceIntercomId);
       deleteContent('absolute', ptzControlId);
       deleteContent('absolute', fullResolutionId);
@@ -108,7 +108,9 @@ export function FullScreen(props) {
   };
   if (screenType === 'full') return null;
   return /*#__PURE__*/React.createElement(View, {
-    className: "ipc-player-plugin-full-screen icon-panel icon-panel-landscape",
+    className: clsx(className),
     onClick: () => handClick('full')
-  });
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-landscape', 'ipc-player-plugin-full-screen')
+  }));
 }

package/lib/plugins/fullScreen/fullScreen.less

@@ -1,18 +1,19 @@
 .ipc-player-plugin-full-screen {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: calc(16px * var(--ipc-player-size-scale, 1));
+  // position: absolute;
+  // top: 50%;
+  // transform: translateY(-50%);
+  // right: calc(16px * var(--ipc-player-size-scale, 1));
   color: var(--iconColor);
-  font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
 }
 
-.ipc-player-plugin-full-screen-voice-warp {
+.ipc-player-plugin-full-screen-voice-wrap {
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
-  right: calc(10px * var(--ipc-player-size-scale, 1));;
-  z-index: 3;
+  // transform: translate(180%, 0);
+  right: calc(36px * var(--ipc-player-size-scale, 1));;
+  z-index: 340;
 }
 
 .ipc-player-plugin-full-screen-voice {

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

@@ -4,5 +4,5 @@ import type { ComponentConfigProps } from '../../interface';
 type Props = ComponentConfigProps & {
     onClick?: () => void;
 };
-export declare function VerticalScreen({ onClick }: Props): React.JSX.Element;
+export declare function VerticalScreen({ onClick, className }: Props): React.JSX.Element;
 export {};

package/lib/plugins/fullScreen/verticalScreen.js

@@ -1,15 +1,18 @@
 import React from 'react';
-import { View } from '@ray-js/ray';
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
 import './verticalScreen.less';
 const NILL = () => null;
 export function VerticalScreen(_ref) {
   let {
-    onClick = NILL
+    onClick = NILL,
+    className
   } = _ref;
+  console.log(className, 'className');
   return /*#__PURE__*/React.createElement(View, {
-    className: "ipc-player-plugin-vertical-screen",
+    className: clsx(className),
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(View, {
-    className: "icon-panel icon-panel-left-arrow ipc-player-plugin-vertical-screen-icon"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-left-arrow', 'ipc-player-plugin-vertical-screen-icon')
   }));
 }

package/lib/plugins/fullScreen/verticalScreen.less

@@ -1,13 +1,8 @@
-.ipc-player-plugin-vertical-screen {
-  position: absolute;
-  padding: 10rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  // left: 24px;
-  left: calc(12px * var(--ipc-player-size-scale, 1));
-  .ipc-player-plugin-vertical-screen-icon {
-    // font-size: var(--iconFontSize);
-    font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
-    color: var(--iconColor);
-  }
+.ipc-player-plugin-vertical-screen-wrap {
+  background-color: red;
+}
+
+.ipc-player-plugin-vertical-screen-icon {
+  color: var(--iconColor);
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
 }

package/lib/plugins/fullScreen/voiceIntercom.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
-import { CoverView } from '@ray-js/ray';
+import { View } from '@ray-js/ray';
 import clsx from 'clsx';
 import { VoiceIntercom as Component } from '../voiceIntercom';
 import { useComponentHideState } from '../../ui/hooks';
@@ -21,7 +21,7 @@ export function VoiceIntercom(props) {
   const {
     event
   } = useContext(UIEventContext);
-  return /*#__PURE__*/React.createElement(CoverView, {
+  return /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-full-screen-voice', {
       'ipc-player-plugin-full-screen-voice-hide': shouldHide || isPtzActive || fullResolutionActive
     })

package/lib/plugins/index.d.ts

@@ -1,10 +1,12 @@
 export * from './battery';
+export * from './battery/batteryFull';
 export * from './screenshot';
 export * from './tempHumidity';
 export * from './recordVideo';
 export * from './fullScreen';
-export * from './videoBitKbps';
+export * from './videoBitKBP';
 export * from './voiceIntercom';
 export * from './muted';
 export * from './ptz';
 export * from './resolution';
+export * from './smallIntercom';

package/lib/plugins/index.js

@@ -1,10 +1,14 @@
+// 非全屏电池插件
 export * from './battery';
+// 全屏电池插件
+export * from './battery/batteryFull';
 export * from './screenshot';
 export * from './tempHumidity';
 export * from './recordVideo';
 export * from './fullScreen';
-export * from './videoBitKbps';
+export * from './videoBitKBP';
 export * from './voiceIntercom';
 export * from './muted';
 export * from './ptz';
-export * from './resolution';
+export * from './resolution';
+export * from './smallIntercom';

package/lib/plugins/muted/muted.js

@@ -1,11 +1,13 @@
 import { View, Text } from '@ray-js/ray';
 import React from 'react';
+import clsx from 'clsx';
 import { useStore } from '../../ctx/store';
 import './muted.less';
 export const Muted = props => {
   const {
     mute,
-    setMute
+    setMute,
+    className
   } = props;
   const {
     isMuted
@@ -13,6 +15,7 @@ export const Muted = props => {
     isMuted: mute
   });
   return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className),
     onClick: () => {
       // IPCPlayerContext.setMuted({
       //   mute: !isMuted,
@@ -24,9 +27,6 @@ export const Muted = props => {
       //   },
       // });
       setMute(!isMuted);
-    },
-    style: {
-      display: 'flex'
     }
   }, isMuted ? /*#__PURE__*/React.createElement(Text, {
     className: "ipc-player-plugin-muted-text-icon icon-panel icon-panel-mute-off"

package/lib/plugins/muted/muted.less

@@ -1,4 +1,11 @@
+.muteIconBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(var(--iconBoxSize) * var(--ipc-player-size-scale, 1));
+  height: calc(var(--iconBoxSize) * var(--ipc-player-size-scale, 1));
+}
 .ipc-player-plugin-muted-text-icon {
   color: var(--iconColor);
-  font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
 }

package/lib/plugins/ptz/ptz.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { View, Text } from '@ray-js/ray';
 import clsx from 'clsx';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useStore, updateAtom } from '../../ctx/store';
 import { ptzControlId } from '../../ui/constant';
 import './ptz.less';
@@ -12,43 +12,30 @@ export const Ptz = props => {
     screenType: screenTypeAtom,
     ptzActive,
     addContent,
-    deleteContent
+    deleteContent,
+    className
   } = props;
   const {
     screenType,
-    isPtzActive
+    isPtzActive,
+    brandColor
   } = useStore({
     screenType: screenTypeAtom,
-    isPtzActive: ptzActive
+    isPtzActive: ptzActive,
+    brandColor: props.brandColor
   });
-  useEffect(() => {
-    // init();
-  }, []);
-
-  // const init = () => {
-  //   IPCPlayerContext.isMuted({
-  //     success: res => {
-  //       setIsMuted(res);
-  //     },
-  //     fail: res => {
-  //       console.log('res===isMuted err', res);
-  //     },
-  //   });
-  // };
-
   if (screenType === 'vertical') {
     return null;
   }
   return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className),
     onClick: () => {
       if (!isPtzActive) {
         // 添加ptz空间
         addContent('absolute', {
           id: ptzControlId,
           content: props => {
-            return /*#__PURE__*/React.createElement(View, {
-              className: "ipc-player-plugin-full-screen-ptz-control"
-            }, /*#__PURE__*/React.createElement(PtzControl, props));
+            return /*#__PURE__*/React.createElement(PtzControl, props);
           },
           absoluteContentClassName: 'ipc-player-plugin-full-screen-ptz-control-warp',
           initProps: _objectSpread({}, props)
@@ -57,11 +44,11 @@ export const Ptz = props => {
         deleteContent('absolute', ptzControlId);
       }
       updateAtom(ptzActive, !isPtzActive);
-    },
-    style: {
-      display: 'flex'
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    className: clsx('ipc-player-plugin-ptz-text-icon', 'icon-panel', 'icon-panel-ptz', isPtzActive && 'ipc-ptz-active')
+    className: clsx('icon-panel', 'icon-panel-ptz', 'ipc-player-plugin-ptz-text-icon'),
+    style: _objectSpread({}, isPtzActive && {
+      color: brandColor
+    })
   }));
 };

package/lib/plugins/ptz/ptz.less

@@ -1,12 +1,7 @@
 .ipc-player-plugin-ptz-text-icon {
   color: var(--iconColor);
-  font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
 }
-
-.ipc-ptz-active {
-  color: var(--iconActiveColor);
-}
-
 // .ipc-player-plugin-full-screen-ptz {
 //   position: absolute;
 //   top: 60%;
@@ -35,7 +30,7 @@
 }
 
 .arrow-icon-wrapper {
-  font-size: 12px;
+  font-size: 25px;
   color: #707070;
 }
 

package/lib/plugins/ptz/ptzControl.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { ComponentConfigProps } from '../../interface';
-import './ptz.less';
 export declare const PtzControl: (props: ComponentConfigProps) => React.JSX.Element;

package/lib/plugins/ptz/ptzControl.js

@@ -1,13 +1,43 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { CoverView } from '@ray-js/ray';
 import clsx from 'clsx';
+import _find from 'lodash/find';
+import _get from 'lodash/get';
 import IpcPtzZoom from '@ray-js/ipc-ptz-zoom';
+import IpcUtils from '@ray-js/ray-ipc-utils';
 import { useComponentHideState } from '../../ui/hooks';
 import { UIEventContext } from '../../ui/context';
 import { useStore } from '../../ctx/store';
+import { getEnumRangeIsValid } from '../../utils/device';
 import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
-import './ptz.less';
+import Styles from './ptz.less';
+const getPtzData = devId => {
+  return [{
+    type: 'top',
+    show: getEnumRangeIsValid(devId, 'ptz_control', '0'),
+    dpValue: '0',
+    icon: 'ptz-arrow'
+  }, {
+    type: 'right',
+    show: getEnumRangeIsValid(devId, 'ptz_control', '2'),
+    dpValue: '2',
+    icon: 'ptz-arrow'
+  }, {
+    type: 'left',
+    show: getEnumRangeIsValid(devId, 'ptz_control', '6'),
+    dpValue: '6',
+    icon: 'ptz-arrow'
+  }, {
+    type: 'bottom',
+    show: getEnumRangeIsValid(devId, 'ptz_control', '4'),
+    dpValue: '4',
+    icon: 'ptz-arrow'
+  }];
+};
 export const PtzControl = props => {
+  const {
+    devId
+  } = props;
   const {
     screenType,
     brandColor
@@ -19,6 +49,16 @@ export const PtzControl = props => {
   const {
     event
   } = useContext(UIEventContext);
+  const ptzTimeId = useRef(null);
+  const ptzData = useRef(getPtzData(devId));
+  useEffect(() => {
+    return () => {
+      if (ptzTimeId.current) {
+        clearInterval(ptzTimeId.current);
+        ptzTimeId.current = null;
+      }
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-plugin-full-screen-ptz-control', {
       'ipc-player-plugin-full-screen-ptz-control-hide': shouldHide
@@ -26,40 +66,44 @@ export const PtzControl = props => {
   }, /*#__PURE__*/React.createElement(IpcPtzZoom, {
     ptzSize: "172px",
     zoomData: [],
-    ptzData: [{
-      type: 'top',
-      // show: getEnumRangeIsValid('ptz_control', '0'),
-      show: true,
-      dpValue: '0',
-      icon: 'ptz-arrow'
-    }, {
-      type: 'right',
-      // show: getEnumRangeIsValid('ptz_control', '2'),
-      show: true,
-      dpValue: '2',
-      icon: 'ptz-arrow'
-    }, {
-      type: 'left',
-      // show: getEnumRangeIsValid('ptz_control', '6'),
-      show: true,
-      dpValue: '6',
-      icon: 'ptz-arrow'
-    }, {
-      type: 'bottom',
-      // show: getEnumRangeIsValid('ptz_control', '4'),
-      show: true,
-      dpValue: '4',
-      icon: 'ptz-arrow'
-    }],
-    onTouchPtzStart: data => {
-      console.log(data, 'data');
+    ptzData: ptzData.current,
+    onTouchPtzStart: async data => {
       event.emit(pauseTimeToHideAllComponent);
+      const {
+        type
+      } = data;
+      const dpData = await IpcUtils.getDpIdByCode(devId, 'ptz_control');
+      if (dpData.code === 0) {
+        const ptzControlId = dpData.data;
+        const sndDpValue = _get(_find(ptzData.current, {
+          type
+        }), 'dpValue', null);
+        IpcUtils.publishDps(devId, {
+          [ptzControlId]: sndDpValue
+        });
+        ptzTimeId.current = setInterval(() => {
+          IpcUtils.publishDps(devId, {
+            [ptzControlId]: sndDpValue
+          });
+        }, 1000);
+      }
     },
-    onTouchPtzEnd: () => {
-      console.log('dsads');
+    onTouchPtzEnd: async () => {
+      const ptzStopData = await IpcUtils.getDpIdByCode(devId, 'ptz_stop');
+      if (ptzStopData.code === 0) {
+        const ptzStopId = ptzStopData.data;
+        IpcUtils.publishDps(devId, {
+          [ptzStopId]: true
+        });
+      }
+      if (ptzTimeId.current) {
+        clearInterval(ptzTimeId.current);
+        ptzTimeId.current = null;
+      }
       event.emit(startTimeToHideAllComponent);
     },
     brandColor: brandColor,
-    iconClassName: clsx('arrow-icon-wrapper')
+    iconClassName: Styles['arrow-icon-wrapper'],
+    darkMode: true
   }));
 };