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

package/lib/plugins/recordVideo/recordVideo.js

@@ -1,11 +1,16 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
-import { View } from '@ray-js/ray';
+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 Strings from '../../i18n';
 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';
+const CLOSE_TIME = 5000;
+const RESET_TIMER = 3000;
+const RECORD_VIDEO_SUCCESS_TOAST_ID = 'record_video_SUCCESS_toast_id';
+const RECORD_VIDEO_TIMER_ID = 'record_video_timer_id';
 function formatTimeDiff(diff) {
   const padWithZero = true;
   const diffMs = Math.abs(diff);
@@ -49,11 +54,18 @@ function useTime() {
   };
 }
 function TimeRecord() {
+  // const { showTimer } = props;
   const {
     min,
     sec,
     cancel
   } = useTime();
+  // useEffect(() => {
+  //   console.log('____________', showTimer);
+  //   if (!showTimer) {
+  //     cancel();
+  //   }
+  // }, [showTimer]);
   return /*#__PURE__*/React.createElement(View, {
     className: "ipc-player-plugin-record-video-toast-time"
   }, /*#__PURE__*/React.createElement(View, {
@@ -70,46 +82,162 @@ export function RecordVideo(props) {
   } = useContext(UIEventContext);
   const {
     addContent,
-    deleteContent
-  } = props;
-  const {
+    deleteContent,
     recording: recordingAtom,
-    setRecording
+    setRecording,
+    setRecordingDisabled,
+    devId,
+    className
   } = props;
   const {
-    recording
+    recording,
+    brandColor,
+    screenType,
+    recordingDisabled
   } = useStore({
-    recording: recordingAtom
+    recording: recordingAtom,
+    brandColor: props.brandColor,
+    screenType: props.screenType,
+    recordingDisabled: props.recordingDisabled
   });
+  const [state, setState] = useSetState({
+    showTimer: false,
+    showShot: false,
+    shotUrl: ''
+  });
+
+  /** 设置5秒后关闭录制成功弹窗 */
+  const timer = useRef();
+  const timeToCloseRecordToast = () => {
+    clearTimeout(timer.current);
+    // @ts-ignore
+    timer.current = setTimeout(() => {
+      setState({
+        showShot: false,
+        shotUrl: ''
+      });
+      deleteContent('absolute', RECORD_VIDEO_SUCCESS_TOAST_ID);
+    }, CLOSE_TIME);
+  };
+
+  /** 设置3秒后还原禁止结束录像状态 */
+  const recordDisabledTimer = useRef();
+  const timeToResetRecordDisabled = () => {
+    clearTimeout(recordDisabledTimer.current);
+    // @ts-ignore
+    recordDisabledTimer.current = setTimeout(() => {
+      setRecordingDisabled(false);
+    }, RESET_TIMER);
+  };
+  useUpdateEffect(() => {
+    if (state.showShot && screenType) {
+      showRecordToast();
+    }
+  }, [state.showShot, screenType]);
+
+  /** 根据showTimer的显示定时器 */
+  useUpdateEffect(() => {
+    if (state.showTimer) {
+      showRecordTimer();
+    } else {
+      deleteContent('absolute', RECORD_VIDEO_TIMER_ID);
+      // 清除定时器，元素移除
+    }
+  }, [state.showTimer]);
+
+  /** 跳转相册 */
+  const handCheck = () => {
+    IpcUtils.goToIpcPageNativeRoute('ipc_album_panel', devId);
+  };
+
+  /** 添加录制成功弹窗 */
+  const showRecordToast = () => {
+    deleteContent('absolute', RECORD_VIDEO_SUCCESS_TOAST_ID);
+    addContent('absolute', {
+      id: RECORD_VIDEO_SUCCESS_TOAST_ID,
+      absoluteContentClassName: 'ipc-player-plugin-record-success-toast-wrap',
+      absolutePosition: {
+        top: screenType === 'vertical' ? '12px' : '60px',
+        left: screenType === 'vertical' ? '16px' : '50%',
+        right: screenType === 'vertical' ? '16px' : 'unset',
+        display: 'flex',
+        width: screenType === 'vertical' ? 'auto' : '400px',
+        marginLeft: screenType === 'vertical' ? '0' : '-200px'
+      },
+      content: () => {
+        return /*#__PURE__*/React.createElement(View, {
+          className: "ipc-player-plugin-record-success-toast"
+        }, /*#__PURE__*/React.createElement(View, {
+          className: "ipc-player-plugin-record-success-toast-image-box"
+        }, /*#__PURE__*/React.createElement(Image, {
+          className: "ipc-player-plugin-record-success-toast-image",
+          src: state.shotUrl
+        })), /*#__PURE__*/React.createElement(View, {
+          className: "ipc-player-plugin-record-success-toast-title"
+        }, Strings.getLang('ipc_player_record_success_tip')), /*#__PURE__*/React.createElement(View, {
+          onClick: handCheck,
+          className: "ipc-player-plugin-record-success-toast-bottom",
+          style: {
+            color: brandColor,
+            borderColor: brandColor
+          }
+        }, Strings.getLang('ipc_player_record_success_check')));
+      }
+    });
+    timeToCloseRecordToast();
+  };
+  const showRecordTimer = () => {
+    deleteContent('absolute', RECORD_VIDEO_TIMER_ID);
+    addContent('absolute', {
+      id: RECORD_VIDEO_TIMER_ID,
+      absoluteContentClassName: 'ipc-player-plugin-record-video-toast-wrap',
+      content: () => /*#__PURE__*/React.createElement(View, {
+        className: clsx('ipc-player-plugin-record-video-toast', {
+          'ipc-player-plugin-record-video-toast-show': state.showTimer,
+          'ipc-player-plugin-record-video-toast-hide': !state.showTimer
+        })
+      }, /*#__PURE__*/React.createElement(View, {
+        className: "ipc-player-plugin-record-video-toast-point",
+        style: {
+          backgroundColor: brandColor
+        }
+      }), /*#__PURE__*/React.createElement(TimeRecord, null))
+    });
+  };
   const handRecordVideo = async () => {
     const store = getDefaultStore();
     const _recording = store.get(recordingAtom);
     const target = !_recording;
-    if (target) {
-      event.emit(pauseTimeToHideAllComponent);
-    } else {
-      event.emit(startTimeToHideAllComponent);
+    if (recordingDisabled) {
+      return false;
     }
-    await setRecording(target);
+    const recordInfo = 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))
+      setRecordingDisabled(true);
+      setState({
+        showTimer: true
       });
+      /** 录制开始后3秒后才可结束 */
+      timeToResetRecordDisabled();
     } else {
-      deleteContent('absolute', RECORD_VIDEO_TOAST_ID);
+      setState({
+        showTimer: false,
+        showShot: true,
+        shotUrl: recordInfo.tempImagePath
+      });
     }
+    return true;
   };
   return /*#__PURE__*/React.createElement(View, {
     onClick: () => handRecordVideo(),
-    className: clsx('ipc-player-plugin-record-video-icon', 'icon-panel', recording ? 'icon-panel-record-stop' : 'icon-panel-record'),
+    className: clsx(className, ''),
     style: {
-      color: recording ? 'rgba(255, 56, 56, 1)' : undefined
+      opacity: recordingDisabled ? 0.5 : 1
     }
-  });
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'ipc-player-plugin-record-video-icon', recording ? 'icon-panel-record-stop' : 'icon-panel-record'),
+    style: {
+      color: recording ? brandColor : undefined
+    }
+  }));
 }

package/lib/plugins/recordVideo/recordVideo.less

@@ -1,19 +1,32 @@
 .ipc-player-plugin-record-video-icon {
-  font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
   color: var(--iconColor);
 }
 .ipc-player-plugin-record-video-toast-wrap {
-  z-index: 110;
+  z-index: 400;
   position: absolute;
   top: calc(7px * var(--ipc-player-size-scale, 1));
   left: 50%;
   transform: translateX(-50%);
 }
+
+// 计时器显示
+.ipc-player-plugin-record-video-toast-show {
+  transform: translate(0, 0) !important;
+  transition: transform ease-in 3s;
+}
+// 计时器隐藏
+.ipc-player-plugin-record-video-toast-hide {
+  transform: translate(0, -110%) !important;
+  transition: transform 0.3s ease-in-out;
+}
+
 .ipc-player-plugin-record-video-toast {
+  transform: translate(0, -110%);
   display: flex;
   padding: calc(12px * var(--ipc-player-size-scale, 1));
   align-items: center;
-  background-color: var(--bg-color);
+  background-color: var(--shot-card-bg-color);
   border-radius: calc(8px * var(--ipc-player-size-scale, 1));
   // background-color: #fff;
   background: linear-gradient(0deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), #000000;
@@ -21,21 +34,65 @@
     width: calc(6px * var(--ipc-player-size-scale, 1));
     height: calc(6px * var(--ipc-player-size-scale, 1));
     border-radius: calc(6px * var(--ipc-player-size-scale, 1));
-    background-color: #FF3838;
   }
   .ipc-player-plugin-record-video-toast-time {
     font-size: calc(12px * var(--ipc-player-size-scale, 1));;
-    font-weight: 600;
+    font-weight: 700;
     color: var(--fontColor);
     margin-left: calc(8px * var(--ipc-player-size-scale, 1));;
     display: flex;
     align-items: center;
+    font-family: Manrope !important;
     .ipc-player-plugin-record-video-toast-time-warp {
-      width: calc(17px * var(--ipc-player-size-scale, 1));;
       text-align: center;
     }
     .ipc-player-plugin-record-video-toast-time-delimiter {
       margin: 0 calc(2px * var(--ipc-player-size-scale, 1));;
     }
   }
+}
+
+/** 录制成功弹窗 */
+.ipc-player-plugin-record-success-toast-wrap {
+  position: absolute;
+}
+.ipc-player-plugin-record-success-toast {
+  flex: 1;
+  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-record-success-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-record-success-toast-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .ipc-player-plugin-record-success-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-record-success-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/resolution/fullResolutionControl.js

@@ -12,6 +12,7 @@ export const FullResolutionControl = props => {
     setResolution,
     setFullResolutionActive
   } = props;
+  console.log(props, 'props========');
   const {
     screenType,
     fullResolutionActive,
@@ -25,7 +26,6 @@ export const FullResolutionControl = props => {
     brandColor: props.brandColor,
     resolution: props.resolution
   });
-  console.log(resolutionList, 'resolutionList');
   const [shouldHide] = useComponentHideState(screenType);
   const {
     event
@@ -52,5 +52,5 @@ export const FullResolutionControl = props => {
     style: item === resolution && {
       color: brandColor
     }
-  }, I18n.t(`ipc_player_resolution_${item}`))));
+  }, Strings.getLang(`ipc_player_resolution_${item}`))));
 };

package/lib/plugins/resolution/resolution.js

@@ -13,7 +13,9 @@ export const Resolution = props => {
     IPCPlayerContext,
     setResolution,
     addContent,
-    setFullResolutionActive
+    deleteContent,
+    setFullResolutionActive,
+    className
   } = props;
   const {
     resolution,
@@ -29,6 +31,8 @@ export const Resolution = props => {
   return /*#__PURE__*/React.createElement(View, {
     onClick: () => {
       if (screenType === 'full') {
+        // 移除全屏清晰度空间
+        deleteContent('absolute', fullResolutionId);
         // 添加全屏清晰度空间
         addContent('absolute', {
           id: fullResolutionId,
@@ -45,8 +49,10 @@ export const Resolution = props => {
       setResolution(resolution === 'HD' ? 'SD' : 'HD');
       return true;
     },
-    className: clsx('ipc-player-plugin-resolution', screenType === 'vertical' ? 'ipc-player-plugin-resolution-vertical' : 'ipc-player-plugin-resolution-full')
+    className: clsx(className, screenType === 'vertical' ? 'ipc-player-plugin-resolution-vertical' : 'ipc-player-plugin-resolution-full')
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-resolution"
   }, /*#__PURE__*/React.createElement(Text, {
     className: "resolutionText"
-  }, Strings.getLang(`ipc_player_resolution_${resolution}`)));
+  }, Strings.getLang(`ipc_player_resolution_${resolution}`))));
 };

package/lib/plugins/resolution/resolution.less

@@ -1,15 +1,16 @@
 .ipc-player-plugin-resolution {
   background-color: rgba(255,255,255,0.2);
-  padding: calc(2px * var(--ipc-player-size-scale, 1)) calc(4px * var(--ipc-player-size-scale, 1));
+  padding: calc(4px * var(--ipc-player-size-scale, 1)) calc(5px * var(--ipc-player-size-scale, 1)) !important;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: calc(8px * var(--ipc-player-size-scale, 1));
-  backdrop-filter: blur(8rpx);
+  background-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   .resolutionText {
     color: var(--iconColor);
     font-weight: 600;
-    font-size: calc(12px * var(--ipc-player-size-scale, 1));
+    font-size: calc(14px * var(--ipc-player-size-scale, 1));
   }
 }
 
@@ -39,8 +40,7 @@
   justify-content: center;
   align-items: center;
   background-color: transparent;
-  // transform: translate(200%, 0);
-  z-index: 3;
+  z-index: 345;
 }
 
 .ipc-player-plugin-full-resolution-control-text {

package/lib/plugins/screenshot/screenshot.js

@@ -1,6 +1,10 @@
 import React, { useRef } from 'react';
-import { View, Image } from '@ray-js/ray';
+import { View, Image, Text } from '@ray-js/ray';
+import { useSetState, useUpdateEffect } from 'ahooks';
+import clsx from 'clsx';
 import IpcUtils from '@ray-js/ray-ipc-utils';
+import Strings from '../../i18n';
+import { useStore } from '../../ctx/store';
 import './screenshot.less';
 const CLOSE_TIME = 5000;
 export function Screenshot(props) {
@@ -10,58 +14,105 @@ export function Screenshot(props) {
     saveToAlbum,
     deleteContent,
     devId,
-    toast
+    toast,
+    className
   } = props;
+  const {
+    screenType,
+    brandColor
+  } = useStore({
+    screenType: props.screenType,
+    brandColor: props.brandColor
+  });
+
+  /** 记录截屏url */
+  const [state, setState] = useSetState({
+    showShot: false,
+    shotUrl: ''
+  });
+  useUpdateEffect(() => {
+    if (state.showShot && screenType) {
+      showShotToast();
+    }
+  }, [state.showShot, screenType]);
   const timer = useRef();
   const timeToCloseToast = () => {
     clearInterval(timer.current);
     // @ts-ignore
     timer.current = setTimeout(() => {
+      setState({
+        showShot: false,
+        shotUrl: ''
+      });
       deleteContent('absolute', 'plugin-screenshot-toast');
     }, CLOSE_TIME);
   };
+
+  /** 跳转相册 */
   const handCheck = () => {
     IpcUtils.goToIpcPageNativeRoute('ipc_album_panel', devId);
   };
-  const showToast = str => {
+
+  /** 添加截屏成功弹窗 */
+  const showShotToast = () => {
     deleteContent('absolute', 'plugin-screenshot-toast');
     addContent('absolute', {
       id: 'plugin-screenshot-toast',
-      absoluteContentClassName: 'ipc-player-plugin-screenshot-toast-warp',
+      absoluteContentClassName: 'ipc-player-plugin-screenshot-toast-wrap',
+      absolutePosition: {
+        top: screenType === 'vertical' ? '12px' : '60px',
+        left: screenType === 'vertical' ? '16px' : '50%',
+        right: screenType === 'vertical' ? '16px' : 'unset',
+        display: 'flex',
+        width: screenType === 'vertical' ? 'auto' : '400px',
+        marginLeft: screenType === 'vertical' ? '0' : '-200px'
+      },
       content: () => {
         return /*#__PURE__*/React.createElement(View, {
           className: "ipc-player-plugin-screenshot-toast"
+        }, /*#__PURE__*/React.createElement(View, {
+          className: "ipc-player-plugin-screenshot-toast-image-box"
         }, /*#__PURE__*/React.createElement(Image, {
           className: "ipc-player-plugin-screenshot-toast-image",
-          src: str
-        }), /*#__PURE__*/React.createElement(View, {
+          src: state.shotUrl
+        })), /*#__PURE__*/React.createElement(View, {
           className: "ipc-player-plugin-screenshot-toast-title"
-        }, I18n.t('screenshot_success_tip')), /*#__PURE__*/React.createElement(View, {
+        }, Strings.getLang('ipc_player_screenshot_success_tip')), /*#__PURE__*/React.createElement(View, {
           onClick: handCheck,
-          className: "ipc-player-plugin-screenshot-toast-bottom"
-        }, I18n.t('check')));
+          className: "ipc-player-plugin-screenshot-toast-bottom",
+          style: {
+            color: brandColor,
+            borderColor: brandColor
+          }
+        }, Strings.getLang('ipc_player_shot_success_check')));
       }
     });
     timeToCloseToast();
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className),
     onClick: () => {
       console.log('截屏！！！');
       IPCPlayerContext.snapshot({
         saveToAlbum,
         // 保存到 IPC 相册
         success: res => {
-          showToast(res.tempImagePath);
+          console.log(res, 'res');
+          setState({
+            showShot: true,
+            shotUrl: res.tempImagePath
+          });
         },
         fail: err => {
           const errObj = err.innerError || err || {};
-          const errMsg = errObj.errorMsg || I18n.t('error_screenshot');
+          const errMsg = errObj.errorMsg || Strings.getLang('ipc_player_error_screenshot_error_tip');
           toast({
             title: errMsg
           });
         }
       });
-    },
-    className: "icon-panel icon-panel-screenshot ipc-player-plugin-screenshot-icon"
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-screenshot', 'ipc-player-plugin-screenshot-icon')
   }));
 }

package/lib/plugins/screenshot/screenshot.less

@@ -1,45 +1,47 @@
 .ipc-player-plugin-screenshot-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-player-plugin-screenshot-toast-warp {
+.ipc-player-plugin-screenshot-toast-wrap {
   position: absolute;
-  width: 90%;
-  max-width: 750rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  top: calc(16px * var(--ipc-player-size-scale, 1));
 }
 .ipc-player-plugin-screenshot-toast {
+  flex: 1;
   border-radius: calc(8px * var(--ipc-player-size-scale, 1));;
-  background-color: var(--bg-color);
+  background-color: var(--shot-card-bg-color);
   display: flex;
   align-items: center;
-  padding: calc(8px * var(--ipc-player-size-scale, 1)) calc(16px * var(--ipc-player-size-scale, 1));
-  z-index: 3;
-  .ipc-player-plugin-screenshot-toast-image {
-    width: calc(66px * var(--ipc-player-size-scale, 1));
-    height: calc(37px * var(--ipc-player-size-scale, 1));
+  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);
-    line-height: calc(20px * var(--ipc-player-size-scale, 1));
-    max-width: 60%;
+    margin-right: calc(12px * var(--ipc-player-size-scale, 1));
+    word-break: break-word;
+    
   }
   .ipc-player-plugin-screenshot-toast-bottom {
-    position: absolute;
-    // right: 32rpx;
-    right: calc(16px * var(--ipc-player-size-scale, 1));
-    border: 1rpx solid #1989FA;
-    // border-radius: 8rpx;
+    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: 10rpx 22rpx;
     padding: calc(5px * var(--ipc-player-size-scale, 1)) calc(11px * var(--ipc-player-size-scale, 1));
-    color: #1989FA;
-    // font-size: 28rpx;
     font-size: calc(14px * var(--ipc-player-size-scale, 1));
+    white-space: nowrap;
+    overflow: hidden; 
+    text-overflow: ellipsis; 
   }
 }

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

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

package/lib/plugins/smallIntercom/index.js

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

package/lib/plugins/smallIntercom/smallIntercom.d.ts

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

package/lib/plugins/smallIntercom/smallIntercom.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useStore } from '../../ctx/store';
+import './smallIntercom.less';
+export function SmallIntercom(props) {
+  const {
+    IPCPlayerContext,
+    addContent,
+    saveToAlbum,
+    deleteContent,
+    devId,
+    toast,
+    className
+  } = props;
+  const {
+    screenType,
+    ptzActive
+  } = useStore({
+    screenType: props.screenType,
+    ptzActive: props.ptzActive
+  });
+  const handClick = () => {
+    console.log('截屏！！！');
+    // IPCPlayerContext.snapshot({
+    //   saveToAlbum, // 保存到 IPC 相册
+    //   success: res => {
+    //     showToast(res.tempImagePath);
+    //   },
+    //   fail: err => {
+    //     const errObj = err.innerError || err || {};
+    //     const errMsg = errObj.errorMsg || I18n.t('error_screenshot');
+    //     toast({ title: errMsg });
+    //   },
+    // });
+  };
+  if (screenType === 'vertical' && !ptzActive) {
+    return null;
+  }
+  if (screenType === 'full' && ptzActive) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: clsx(className),
+      onClick: handClick
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: clsx('icon-panel', 'icon-panel-one-way-intercom', 'ipc-player-plugin-small-intercom-icon')
+    }));
+  }
+  return null;
+}