@ray-js/ipc-player-integration 0.0.1-beta-59 → 0.0.1-beta-61

package/lib/{plugins → widgets}/ptz/ptzControl.js

@@ -1,16 +1,18 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { CoverView } from '@ray-js/ray';
+import { CoverView, getStorage } 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 { getDpIdByCode, publishDps } from '@ray-js/ray-ipc-utils';
 import { useMemoizedFn } from '../../hooks';
 import { useComponentHideState } from '../../ui/hooks';
 import { UIEventContext } from '../../ui/context';
+import { PtzControlTip } from '../ptzControlTip';
+import { ptzControlTipId, pauseTimeToHideAllComponent } from '../../ui/constant';
 import { useStore } from '../../ctx/store';
 import { getEnumRangeIsValid } from '../../utils/device';
-import { pauseTimeToHideAllComponent } from '../../ui/constant';
 import Styles from './ptz.less';
 const getPtzData = devId => {
   return [{
@@ -37,7 +39,8 @@ const getPtzData = devId => {
 };
 export const PtzControl = props => {
   const {
-    devId
+    devId,
+    addContent
   } = props;
   const {
     screenType,
@@ -48,6 +51,7 @@ export const PtzControl = props => {
   });
   const [shouldHide] = useComponentHideState();
   const [isPtzActive, setIsPtzActive] = useState(true);
+  const [showPtzControlTip, setShowPtzControlTip] = useState(false);
   const {
     event
   } = useContext(UIEventContext);
@@ -59,6 +63,18 @@ export const PtzControl = props => {
   const onPtzControlShow = useMemoizedFn(() => {
     setIsPtzActive(true);
   });
+
+  // 获取是否有ptz控制tip
+  useEffect(() => {
+    getStorage({
+      key: `${devId}_ptzControlTip}`,
+      success: res => {
+        if (!res.data) {
+          setShowPtzControlTip(true);
+        }
+      }
+    });
+  }, []);
   useEffect(() => {
     event.on('ptzControlHide', onPtzControlHide);
     event.on('ptzControlShow', onPtzControlShow);
@@ -86,30 +102,41 @@ export const PtzControl = props => {
     ptzData: ptzData.current,
     onTouchPtzStart: async data => {
       event.emit(pauseTimeToHideAllComponent);
+      // event.emit('ptzControlTipShow', true);
       const {
         type
       } = data;
-      const dpData = await IpcUtils.getDpIdByCode(devId, 'ptz_control');
+      const dpData = await getDpIdByCode(devId, 'ptz_control');
       if (dpData.code === 0) {
         const ptzControlId = dpData.data;
         const sndDpValue = _get(_find(ptzData.current, {
           type
         }), 'dpValue', null);
-        IpcUtils.publishDps(devId, {
+        publishDps(devId, {
           [ptzControlId]: sndDpValue
         });
         ptzTimeId.current = setInterval(() => {
-          IpcUtils.publishDps(devId, {
+          publishDps(devId, {
             [ptzControlId]: sndDpValue
           });
         }, 1000);
       }
+      if (showPtzControlTip) {
+        addContent('absolute', {
+          id: ptzControlTipId,
+          content: props => {
+            return /*#__PURE__*/React.createElement(PtzControlTip, props);
+          },
+          absoluteContentClassName: 'ipc-player-plugin-ptz-control-tip-wrap',
+          initProps: _objectSpread({}, props)
+        });
+      }
     },
     onTouchPtzEnd: async () => {
-      const ptzStopData = await IpcUtils.getDpIdByCode(devId, 'ptz_stop');
+      const ptzStopData = await getDpIdByCode(devId, 'ptz_stop');
       if (ptzStopData.code === 0) {
         const ptzStopId = ptzStopData.data;
-        IpcUtils.publishDps(devId, {
+        publishDps(devId, {
           [ptzStopId]: true
         });
       }

package/lib/widgets/ptzControlTip/index.d.ts

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

package/lib/widgets/ptzControlTip/index.js

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

package/lib/widgets/ptzControlTip/ptzControlTip.d.ts

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

package/lib/widgets/ptzControlTip/ptzControlTip.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { View, Image, CoverView, Text, setStorage } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useStore } from '../../ctx/store';
+import { ptzControlTipId } from '../../ui/constant';
+import { PlayState } from '../../interface';
+import './ptzControlTip.less';
+import { playerPtzControlTip } from '../../res';
+import Strings from '../../i18n';
+export const PtzControlTip = props => {
+  const {
+    devId,
+    deleteContent
+  } = props;
+  const [showTipModal, setShowTipModal] = useState(true);
+  const {
+    playState
+  } = useStore({
+    playState: props.playState
+  });
+  // 获取缓存状态
+  const changeShowTipModal = () => {
+    setShowTipModal(false);
+    deleteContent('absolute', ptzControlTipId);
+    setStorage({
+      key: `${devId}_ptzControlTip}`,
+      data: 'true'
+    });
+  };
+  if (showTipModal && playState === PlayState.PLAYING) {
+    return /*#__PURE__*/React.createElement(CoverView, {
+      className: clsx('playerControlTipContainer')
+    }, /*#__PURE__*/React.createElement(Image, {
+      mode: "widthFix",
+      src: playerPtzControlTip,
+      className: clsx('controlTipImage')
+    }), /*#__PURE__*/React.createElement(Text, {
+      className: clsx('controlTipText')
+    }, Strings.getLang('ipc_player_ptz_control_tip')), /*#__PURE__*/React.createElement(View, {
+      className: clsx('controlTipCloseButton'),
+      onClick: changeShowTipModal
+    }, Strings.getLang('ipc_player_ptz_close_control_tip')));
+  }
+  return null;
+};

package/lib/widgets/ptzControlTip/ptzControlTip.less

@@ -0,0 +1,42 @@
+.playerControlTipContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+    background-color: rgba(0,0,0,0.5);
+    flex-direction: column;
+    padding: 0 calc(50px * var(--ipc-player-size-scale, 1));;
+    transition: all 0.3 ease;
+    .controlTipImage {
+      width: calc(170px * var(--ipc-player-size-scale, 1));;
+    }
+    .controlTipText {
+      margin-top: calc(10px * var(--ipc-player-size-scale, 1));
+      color: rgba(255,255,255,0.7);
+      word-break: break-all;
+      text-align: center;
+      font-size: calc(12px * var(--ipc-player-size-scale, 1));
+      font-weight: 400;
+    }
+    .controlTipCloseButton {
+        border-radius: calc(4px * var(--ipc-player-size-scale, 1));
+        background-color: rgba(255, 255, 255, 0.3);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        margin-top: 20rpx;
+        text-align: center;
+        height: calc(32px * var(--ipc-player-size-scale, 1));
+        padding: 0 calc(24px * var(--ipc-player-size-scale, 1));
+        overflow: hidden;
+        border-radius: calc(32px * var(--ipc-player-size-scale, 1));
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: calc(12px * var(--ipc-player-size-scale, 1));;
+        color: #ffffff;
+    }
+  }

package/lib/{plugins → widgets}/recordVideo/recordVideo.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useContext } from 'react';
 import { View, Text, Image } from '@ray-js/ray';
 import { useSetState, useUpdateEffect } from 'ahooks';
 import clsx from 'clsx';
-import IpcUtils from '@ray-js/ray-ipc-utils';
+import { goToIpcPageNativeRoute } from '@ray-js/ray-ipc-utils';
 import Strings from '../../i18n';
 import { PlayState } from '../../interface';
 import { UIEventContext } from '../../ui/context';
@@ -167,7 +167,7 @@ export function RecordVideo(props) {
     });
     deleteContent('absolute', RECORD_VIDEO_SUCCESS_TOAST_ID);
     clearInterval(timer.current);
-    IpcUtils.goToIpcPageNativeRoute('ipc_album_panel', devId);
+    goToIpcPageNativeRoute('ipc_album_panel', devId);
   };
 
   /** 添加录制成功弹窗 */
@@ -243,7 +243,6 @@ export function RecordVideo(props) {
     }
     try {
       const recordInfo = await setRecording(target);
-      console.log(recordInfo, 'recordInfo====');
       if (target) {
         setRecordingDisabled(true);
         setState({

package/lib/{plugins → widgets}/screenshot/screenshot.js

@@ -1,8 +1,8 @@
 import React, { useContext, useRef } from 'react';
-import { View, Image, Text, showModal, openAppSystemSettingPage, getSystemInfoSync } from '@ray-js/ray';
+import { View, Image, Text, showModal, openAppSystemSettingPage } from '@ray-js/ray';
 import { useSetState, useUpdateEffect, useMemoizedFn } from 'ahooks';
 import clsx from 'clsx';
-import IpcUtils from '@ray-js/ray-ipc-utils';
+import { goToIpcPageNativeRoute } from '@ray-js/ray-ipc-utils';
 import Strings from '../../i18n';
 import { useStore } from '../../ctx/store';
 import { UIEventContext } from '../../ui/context';
@@ -61,7 +61,7 @@ export function Screenshot(props) {
     });
     deleteContent('absolute', 'plugin-screenshot-toast');
     clearInterval(timer.current);
-    IpcUtils.goToIpcPageNativeRoute('ipc_album_panel', devId);
+    goToIpcPageNativeRoute('ipc_album_panel', devId);
   };
 
   /** 添加截屏成功弹窗 */
@@ -163,10 +163,6 @@ export function Screenshot(props) {
               isShowGlobal: true,
               success: res => {
                 if (res.confirm) {
-                  const {
-                    platform
-                  } = getSystemInfoSync();
-                  console.log(platform, 'platform');
                   openAppSystemSettingPage({
                     scope: 'App-Settings',
                     success: () => {

package/lib/{plugins → widgets}/tempHumidity/tempHumidity.js

@@ -36,8 +36,6 @@ export const TempHumidity = props => {
       className: "tempHumidity"
     }, `${humidity}`));
   };
-  console.log(tempC, tempF, humidity);
-
   // 当无值时返回null
   if (!tempC && !tempF && !humidity) {
     return null;

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { View } from '@ray-js/ray';
 import clsx from 'clsx';
-import IpcUtils from '@ray-js/ray-ipc-utils';
+import { getVideoBitrateKbps } from '@ray-js/ray-ipc-utils';
 import { PlayState } from '../../interface';
 import './videoBitKBP.less';
 import { useStore } from '../../ctx/store';
@@ -30,7 +30,7 @@ export const VideoBitKBP = props => {
     };
   }, [store.playState]);
   const init = async () => {
-    const res = await IpcUtils.getVideoBitrateKbps(devId);
+    const res = await getVideoBitrateKbps(devId);
     if (res.code !== -1) {
       setBitKBP(`${res.data.kbps}KB/S`);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-59",
+  "version": "0.0.1-beta-61",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -38,8 +38,8 @@
   "dependencies": {
     "@ray-js/ipc-ptz-zoom": "0.0.2-beta-7",
     "@ray-js/panel-sdk": "^1.13.1",
-    "@ray-js/ray-ipc-player": "2.0.20-beta-12",
-    "@ray-js/ray-ipc-utils": "1.1.0-beta-16",
+    "@ray-js/ray-ipc-player": "2.0.20-beta-13",
+    "@ray-js/ray-ipc-utils": "1.1.0-beta-17",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",
     "jotai": "^2.10.2"