@ray-js/ipc-player-integration 0.0.1-beta-6 → 0.0.1-beta-8

package/lib/plugins/recordVideo/recordVideo.js

@@ -1,6 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useContext } from 'react';
 import { View } from '@ray-js/ray';
-import { useStore } from '../../ctx/store';
+import clsx from 'clsx';
+import { UIEventContext } from '../../ui/context';
+import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
+import { useStore, getDefaultStore } from '../../ctx/store';
 import './recordVideo.less';
 const RECORD_VIDEO_TOAST_ID = 'record_video_toast_id';
 function formatTimeDiff(diff) {
@@ -62,6 +65,9 @@ function TimeRecord() {
   }, sec));
 }
 export function RecordVideo(props) {
+  const {
+    event
+  } = useContext(UIEventContext);
   const {
     addContent,
     deleteContent
@@ -75,23 +81,35 @@ export function RecordVideo(props) {
   } = useStore({
     recording: recordingAtom
   });
-  const handRecordVideo = async target => {
-    await setRecording(target);
+  const handRecordVideo = async () => {
+    const store = getDefaultStore();
+    const _recording = store.get(recordingAtom);
+    const target = !_recording;
     if (target) {
-      deleteContent('absolute', RECORD_VIDEO_TOAST_ID);
+      event.emit(pauseTimeToHideAllComponent);
     } else {
+      event.emit(startTimeToHideAllComponent);
+    }
+    await setRecording(target);
+    if (target) {
       addContent('absolute', {
         id: RECORD_VIDEO_TOAST_ID,
+        absoluteContentClassName: 'ipc-player-plugin-record-video-toast-wrap',
         content: () => /*#__PURE__*/React.createElement(View, {
           className: "ipc-player-plugin-record-video-toast"
         }, /*#__PURE__*/React.createElement(View, {
           className: "ipc-player-plugin-record-video-toast-point"
         }), /*#__PURE__*/React.createElement(TimeRecord, null))
       });
+    } else {
+      deleteContent('absolute', RECORD_VIDEO_TOAST_ID);
     }
   };
   return /*#__PURE__*/React.createElement(View, {
-    onClick: () => handRecordVideo(!recording),
-    className: "ipc-player-plugin-record-video-icon icon-panel icon-panel-luping"
+    onClick: () => handRecordVideo(),
+    className: clsx('ipc-player-plugin-record-video-icon', 'icon-panel', recording ? 'icon-panel-record-stop' : 'icon-panel-record'),
+    style: {
+      color: recording ? 'rgba(255, 56, 56, 1)' : undefined
+    }
   });
 }

package/lib/plugins/recordVideo/recordVideo.less

@@ -2,15 +2,17 @@
   font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
   color: var(--iconColor);
 }
-.ipc-player-plugin-record-video-toast {
+.ipc-player-plugin-record-video-toast-wrap {
   z-index: 2;
   position: absolute;
+  top: calc(7px * var(--ipc-player-size-scale, 1));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.ipc-player-plugin-record-video-toast {
   display: flex;
   padding: calc(12px * var(--ipc-player-size-scale, 1));
   align-items: center;
-  left: 50%;
-  transform: translateX(-50%);
-  top: calc(7px * var(--ipc-player-size-scale, 1));
   background-color: var(--bg-color);
   border-radius: calc(8px * var(--ipc-player-size-scale, 1));
   .ipc-player-plugin-record-video-toast-point {

package/lib/plugins/screenshot/screenshot.js

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
-import { View, Image, CoverView } from '@ray-js/ray';
+import { View, Image } from '@ray-js/ray';
+import IpcUtils from '@ray-js/ray-ipc-utils';
 import './screenshot.less';
 const CLOSE_TIME = 5000;
 export function Screenshot(props) {
@@ -7,7 +8,9 @@ export function Screenshot(props) {
     IPCPlayerContext,
     addContent,
     saveToAlbum,
-    deleteContent
+    deleteContent,
+    devId,
+    toast
   } = props;
   const timer = useRef();
   const timeToCloseToast = () => {
@@ -18,7 +21,28 @@ export function Screenshot(props) {
     }, CLOSE_TIME);
   };
   const handCheck = () => {
-    console.log('handCheck');
+    IpcUtils.goToIpcPageNativeRoute('ipc_album_panel', devId);
+  };
+  const showToast = str => {
+    deleteContent('absolute', 'plugin-screenshot-toast');
+    addContent('absolute', {
+      id: 'plugin-screenshot-toast',
+      absoluteContentClassName: 'ipc-player-plugin-screenshot-toast-warp',
+      content: () => {
+        return /*#__PURE__*/React.createElement(View, {
+          className: "ipc-player-plugin-screenshot-toast"
+        }, /*#__PURE__*/React.createElement(Image, {
+          className: "ipc-player-plugin-screenshot-toast-image",
+          src: str
+        }), /*#__PURE__*/React.createElement(View, {
+          className: "ipc-player-plugin-screenshot-toast-title"
+        }, I18n.t('screenshot_success_tip')), /*#__PURE__*/React.createElement(View, {
+          onClick: handCheck,
+          className: "ipc-player-plugin-screenshot-toast-bottom"
+        }, I18n.t('check')));
+      }
+    });
+    timeToCloseToast();
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     onClick: () => {
@@ -26,30 +50,17 @@ export function Screenshot(props) {
         saveToAlbum,
         // 保存到 IPC 相册
         success: res => {
-          deleteContent('absolute', 'plugin-screenshot-toast');
-          addContent('absolute', {
-            id: 'plugin-screenshot-toast',
-            content: () => {
-              return /*#__PURE__*/React.createElement(CoverView, {
-                className: "ipc-player-plugin-screenshot-toast"
-              }, /*#__PURE__*/React.createElement(Image, {
-                className: "ipc-player-plugin-screenshot-toast-image",
-                src: res.tempImagePath
-              }), /*#__PURE__*/React.createElement(View, {
-                className: "ipc-player-plugin-screenshot-toast-title"
-              }, "\u622A\u56FE\u5DF2\u4FDD\u5B58\u81F3\u76F8\u518C"), /*#__PURE__*/React.createElement(View, {
-                onClick: handCheck,
-                className: "ipc-player-plugin-screenshot-toast-bottom"
-              }, "\u67E5\u770B"));
-            }
-          });
-          timeToCloseToast();
+          showToast(res.tempImagePath);
         },
         fail: err => {
-          console.log('保存相册失败', err);
+          const errObj = err.innerError || err || {};
+          const errMsg = errObj.errorMsg || I18n.t('error_screenshot');
+          toast({
+            title: errMsg
+          });
         }
       });
     },
-    className: "icon-panel icon-panel-jieping ipc-player-plugin-screenshot-icon"
+    className: "icon-panel icon-panel-screenshot ipc-player-plugin-screenshot-icon"
   }));
 }

package/lib/plugins/screenshot/screenshot.less

@@ -2,14 +2,17 @@
   color: var(--iconColor);
   font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
 }
-.ipc-player-plugin-screenshot-toast {
+.ipc-player-plugin-screenshot-toast-warp {
   position: absolute;
   width: 90%;
-  border-radius: calc(8px * var(--ipc-player-size-scale, 1));;
-  background-color: var(--bg-color);
+  max-width: 750rpx;
   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(--bg-color);
   display: flex;
   align-items: center;
   padding: calc(8px * var(--ipc-player-size-scale, 1)) calc(16px * var(--ipc-player-size-scale, 1));

package/lib/plugins/tempHumidity/tempHumidity.js

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

package/lib/plugins/videoBitKbps/videoBitKbps.js

@@ -1,102 +1,36 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View } from '@ray-js/ray';
-import { useVideoBitKbps } from '../../hooks';
 import './videoBitKbps.less';
-import { getCurrentSupportedTalkMode, getMobileOrientation, getVideoBitrateKbps, requestWifiSignal, isSupportedTalk, isSupportFloatWindow, openFloatWindow, setScreenOrientation, wakeUpDevice } from '../../utils/ipcApi';
+import IpcUtils from '@ray-js/ray-ipc-utils';
+import { PlayState } from '../../interface';
+import { useStore } from '../../ctx/store';
 export const VideoBitKbps = props => {
   const {
     devId,
-    IPCPlayerContext
+    playState
   } = props;
-  const bitKbps = useVideoBitKbps(devId);
+  const [bitKbps, setBitKbps] = useState('');
+  const store = useStore({
+    playState
+  });
   useEffect(() => {
-    // TODO: test
-    // test();
-  }, []);
-  useEffect(() => {
-    // TODO: test
-    testOther();
-  }, []);
-  const testOther = async () => {
-    console.log('res===ttt');
-    try {
-      await requestWifiSignal(devId);
-    } catch (error) {
-      console.log('res===catch', error);
+    let timer;
+    if (store.playState === PlayState.PLAYING) {
+      init();
+      timer = setInterval(() => {
+        init();
+      }, 5000);
+    }
+    return () => {
+      clearInterval(timer);
+    };
+  }, [store.playState]);
+  const init = async () => {
+    const res = await IpcUtils.getVideoBitrateKbps(devId);
+    if (res.code !== -1) {
+      setBitKbps(`${res.data.kbps}KB/S`);
     }
-    await getVideoBitrateKbps(devId); // 过
-    await wakeUpDevice(devId); // 过
-    await getMobileOrientation(); // 过
-    await setScreenOrientation('portrait'); // xxx
-    await isSupportFloatWindow(devId);
-    await isSupportedTalk(devId);
-    await getCurrentSupportedTalkMode(devId);
-    await openFloatWindow(devId); // 无
   };
-
-  // const test = () => {
-  //   console.log('res===ppp test');
-  //   //  缩放倍数
-  //   IPCPlayerContext.setScaleMultiple({
-  //     scaleMultiple: 1,
-  //     success: res => {
-  //       console.log('res===ppp setScaleMultiple success', res);
-  //     },
-  //     fail: error => {
-  //       console.log('res===ppp setScaleMultiple fail', error);
-  //     },
-  //   });
-
-  //   IPCPlayerContext.setTrackingStatus({
-  //     // status: false,  // 非必传
-  //     success: res => {
-  //       console.log('res===ppp setTrackingStatus success', res);
-  //     },
-  //     fail: error => {
-  //       console.log('res===ppp setTrackingStatus fail', error);
-  //     },
-  //   });
-
-  //   IPCPlayerContext.setScalable({
-  //     scaleble: 1,
-  //     success: res => {
-  //       console.log('res===ppp setScalable success', res);
-  //     },
-  //     fail: error => {
-  //       console.log('res===ppp setScalable fail', error);
-  //     },
-  //   });
-
-  //   IPCPlayerContext.isPTZControllable({
-  //     success: res => {
-  //       console.log('res===ppp isPTZControllable success', res);
-  //     },
-  //     fail: error => {
-  //       console.log('res===ppp isPTZControllable fail', error);
-  //     },
-  //   });
-
-  //   IPCPlayerContext.setRotateZ({
-  //     rotateZ: 0,
-  //     success: res => {
-  //       console.log('res===ppp setRotateZ success', res);
-  //     },
-  //     fail: error => {
-  //       console.log('res===ppp setRotateZ fail', error);
-  //     },
-  //   });
-
-  //   // IPCPlayerContext.setMaxScaleMultiple({
-  //   //   maxScaleMultiple: 90, // 0-360
-  //   //   success: (res) => {
-  //   //     console.log('res===ppp maxScaleMultiple success', res);
-  //   //   },
-  //   //   fail: (error) => {
-  //   //     console.log('res===ppp maxScaleMultiple fail', error);
-  //   //   }
-  //   // })
-  // };
-
   return /*#__PURE__*/React.createElement(View, {
     className: "ipc-player-plugin-videoBitKbps"
   }, bitKbps);

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

@@ -0,0 +1,4 @@
+declare module '*.gif' {
+  const content: any;
+  export default content;
+}

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

@@ -5,8 +5,9 @@ import { ComponentConfigProps } from '../../interface';
 type Props = ComponentConfigProps & {
     style?: React.CSSProperties;
     className?: string;
+    iconClassName?: string;
     onTouchStart?: TouchEventHandler['onTouchStart'];
     onTouchEnd?: TouchEventHandler['onTouchEnd'];
 };
-export declare function VoiceIntercom({ style, className, recording: recordingAtom, intercom: intercomAtom, setIntercom, mute: muteAtom, setMute, getStreamStatus, onTouchStart, onTouchEnd, }: Props): React.JSX.Element;
+export declare function VoiceIntercom({ style, className, iconClassName, recording: recordingAtom, intercom: intercomAtom, setIntercom, mute: muteAtom, setMute, getStreamStatus, onTouchStart, onTouchEnd, }: Props): React.JSX.Element;
 export {};

package/lib/plugins/voiceIntercom/voiceIntercom.js

@@ -1,15 +1,19 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useRef } from 'react';
-import { View } from '@ray-js/ray';
+import React, { useRef, useContext } from 'react';
+import { View, Image } from '@ray-js/ray';
 import clsx from 'clsx';
-import { useStore } from '../../ctx/store';
+import Res from './voice.gif';
+import { useStore, getDefaultStore } from '../../ctx/store';
 import './voiceIntercom.less';
 import { PlayerStreamStatus } from '../../interface';
+import { UIEventContext } from '../../ui/context';
+import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
 const NILL = () => null;
 export function VoiceIntercom(_ref) {
   let {
     style,
     className,
+    iconClassName,
     recording: recordingAtom,
     intercom: intercomAtom,
     setIntercom,
@@ -20,62 +24,63 @@ export function VoiceIntercom(_ref) {
     onTouchEnd = NILL
   } = _ref;
   const {
-    recording,
+    event
+  } = useContext(UIEventContext);
+  const {
     mute,
     intercom
   } = useStore({
-    recording: recordingAtom,
     mute: muteAtom,
     intercom: intercomAtom
   });
-  const longClickStartedRef = useRef(false);
   // 对讲开始之前的静音状态
   const originMuteStatusBeforeVoice = useRef(mute);
-  const intercomRef = useRef(false);
-  const startVoice = async (_intercom, _recording, _mute) => {
-    if (intercomRef.current) return;
-    if (_recording) {
-      console.log('Cannot talk during video recording');
-      return;
-    }
+  const loading = useRef(false);
+  const startVoice = async _mute => {
     if (getStreamStatus() !== PlayerStreamStatus.PreviewSuccess) {
       console.log('PlayerStreamStatus not 1002');
       return;
     }
-    intercomRef.current = true;
     originMuteStatusBeforeVoice.current = _mute;
     // 如果对讲开始之前，是静音的，则需要关闭静音
     if (_mute) {
       await setMute(false);
     }
-    setIntercom(_intercom);
+    await setIntercom(true);
   };
   const endVoice = async () => {
-    try {
-      // 将静音状态恢复为开始对讲之前的状态
-      await setMute(originMuteStatusBeforeVoice.current);
-      await setIntercom(false);
-    } catch (err) {
-      //
-    } finally {
-      intercomRef.current = false;
-    }
+    await setMute(originMuteStatusBeforeVoice.current);
+    await setIntercom(false);
   };
   return /*#__PURE__*/React.createElement(View, {
     style: _objectSpread({}, style),
     className: clsx('ipc-player-plugin-voice-intercom', className),
-    onTouchStart: onTouchStart,
-    onLongClick: () => {
-      longClickStartedRef.current = true;
-      startVoice(!intercom, recording, mute);
+    onTouchStart: async e => {
+      onTouchStart(e);
+      const store = getDefaultStore();
+      if (loading.current) return;
+      loading.current = true;
+      const _intercom = store.get(intercomAtom);
+      const _recording = store.get(recordingAtom);
+      if (!_intercom && _recording) {
+        console.log('录制中，无法对讲');
+        loading.current = false;
+        return;
+      }
+      if (!_intercom) {
+        event.emit(pauseTimeToHideAllComponent);
+        await startVoice(mute);
+      } else {
+        event.emit(startTimeToHideAllComponent);
+        await endVoice();
+      }
+      loading.current = false;
     },
-    onTouchEnd: e => {
-      onTouchEnd(e);
-      if (!longClickStartedRef.current) return;
-      longClickStartedRef.current = false;
-      endVoice();
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    className: "icon-panel icon-panel-yuyin"
+    onTouchEnd: onTouchEnd
+  }, intercom ? /*#__PURE__*/React.createElement(Image, {
+    src: Res,
+    className: clsx('ipc-player-plugin-voice-intercom-img', iconClassName)
+  }) : /*#__PURE__*/React.createElement(View, {
+    className: clsx('icon-panel', 'icon-panel-one-way-intercom', iconClassName)
   }));
 }

package/lib/plugins/voiceIntercom/voiceIntercom.less

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

package/lib/ports.output.d.ts

@@ -4,3 +4,7 @@ export type UseBattery = (devId: string) => {
 };
 export type UseTemperature = (devId: string) => number;
 export type UseHumidity = () => number;
+export type Toast = (options: {
+    title: string;
+    duration?: number;
+} & Record<string, any>) => void;

package/lib/ui/ui.js

@@ -85,7 +85,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    * 视频流加载状态封装
    */
 
-  const handPlayerTap = useCallback(() => {
+  const handPlayerTap = useCallback(data => {
+    console.log('res===on onVideoTap', data);
     const store = getDefaultStore();
     const _screenType = store.get(instance.screenType);
     eventRef.current.emit(playerTap);
@@ -138,7 +139,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       eventRef.current.off(pauseTimeToHideAllComponent, listenPause);
     };
   });
-  const playerReady = playState === PlayState.PLAYING;
+  // const playerReady = playState === PlayState.PLAYING;
+  const playerReady = true;
   return /*#__PURE__*/React.createElement(UIEventContext.Provider, {
     value: {
       event: eventRef.current
@@ -188,7 +190,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     },
     clarity: "hd",
     privateState: false,
-    onPlayerTap: handPlayerTap
+    onPlayerTap: handPlayerTap // 对应原来的onVideoTap
   }), playerReady && /*#__PURE__*/React.createElement(TopContent, {
     ctx: instance
   }, renderTopContent), playerReady && /*#__PURE__*/React.createElement(BottomContent, {

package/lib/ui/ui.less

@@ -1,6 +1,7 @@
 .ipc-player-content {
   position: relative;
   overflow: hidden;
+
   .ipc-player-top-content-warp {
     position: absolute;
     width: 100%;
@@ -8,6 +9,7 @@
     top: 0;
     z-index: 100;
   }
+
   .ipc-player-bottom-content-warp {
     position: absolute;
     z-index: 100;
@@ -15,6 +17,7 @@
     left: 0;
     bottom: 0;
   }
+
   .ipc-player-content-item {
     --height: 48px;
     --gap: 10px;
@@ -26,12 +29,15 @@
     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%)
@@ -46,5 +52,5 @@
 }
 
 .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-6",
+  "version": "0.0.1-beta-8",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -35,7 +35,8 @@
     "@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.2"
   },

package/lib/hooks/useVideoBitKbps/index.d.ts

@@ -1 +0,0 @@
-export declare const useVideoBitKbps: (devId: string) => string;

package/lib/hooks/useVideoBitKbps/index.js

@@ -1,20 +0,0 @@
-import { getVideoBitrateKbps } from '../../utils/ipcApi';
-import { useEffect, useState } from 'react';
-export const useVideoBitKbps = devId => {
-  const [bitKbps, setBitKbps] = useState('');
-  useEffect(() => {
-    // const timer = setInterval(() => {
-    init();
-    // }, 5000);
-    // return () => {
-    //   clearInterval(timer);
-    //   timer === null;
-    // };
-  }, []);
-  const init = async () => {
-    const res = await getVideoBitrateKbps(devId);
-    console.log('res===bitKbps', res);
-    setBitKbps(res.kpbs + 'KB/S');
-  };
-  return bitKbps;
-};