@ray-js/ipc-player-integration 0.0.1-beta-22 → 0.0.1-beta-24

package/lib/ctx/ctx.js

@@ -1,4 +1,5 @@
 import { useRef, useCallback, useEffect } from 'react';
+import Strings from '../i18n';
 import { useAtom, updateAtom, getDefaultStore, useStore } from './store';
 import { PlayState, IntercomMode } from '../interface';
 import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
@@ -33,6 +34,9 @@ export const createUseCtx = _ref => {
     // 录像中
     const [recording] = useAtom(false);
 
+    // 录像是否不可点击
+    const [recordingDisabled, setRecordingDisabled] = useAtom(false);
+
     // 静音 true 代表静音 false 代表不静音
     const [mute] = useAtom(true);
 
@@ -141,6 +145,7 @@ export const createUseCtx = _ref => {
       saveToAlbum,
       screenType,
       recording,
+      recordingDisabled,
       mute,
       resolution,
       resolutionList,
@@ -196,7 +201,9 @@ export const createUseCtx = _ref => {
         const store = getDefaultStore();
         const _recording = store.get(recording);
         if (target && target === _recording) {
-          console.log('Cannot record during video recording');
+          toast({
+            title: Strings.getLang('ipc_player_recording_now_tip')
+          });
           return false;
         }
         return new Promise((resolve, reject) => {
@@ -214,15 +221,15 @@ export const createUseCtx = _ref => {
           } else {
             IPCPlayerInstance.current.stopRecord({
               saveToAlbum,
-              success: () => {
+              success: res => {
                 updateAtom(recording, false);
-                resolve(true);
+                resolve(res);
               },
               fail: err => {
-                updateAtom(recording, true);
+                updateAtom(recording, false);
                 reject(err);
                 const errObj = err.innerError || err || {};
-                const errMsg = errObj.errorMsg || I18n.t('error_recording');
+                const errMsg = errObj.errorMsg || Strings.getLang('ipc_player_stop_recording_err');
                 toast({
                   title: errMsg
                 });
@@ -231,6 +238,7 @@ export const createUseCtx = _ref => {
           }
         });
       },
+      setRecordingDisabled,
       setPtzActive,
       setFullResolutionActive,
       setScreenType,

package/lib/i18n/index.d.ts

@@ -5,30 +5,46 @@ declare const Strings: kit.I18N<{
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
-        ipc_player_recording_success_tip: string;
-        ipc_player_shot_or_record_check: string;
+        ipc_player_error_screenshot_error_tip: string;
+        ipc_player_record_success_tip: string;
+        ipc_player_shot_success_check: string;
+        ipc_player_record_success_check: string;
+        ipc_player_recording_now_tip: string;
+        ipc_player_stop_recording_err: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
-        ipc_player_recording_success_tip: string;
-        ipc_player_shot_or_record_check: string;
+        ipc_player_error_screenshot_error_tip: string;
+        ipc_player_record_success_tip: string;
+        ipc_player_shot_success_check: string;
+        ipc_player_record_success_check: string;
+        ipc_player_recording_now_tip: string;
+        ipc_player_stop_recording_err: string;
     };
 }, {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
     ipc_player_current_resolution_is_equal: string;
     ipc_player_screenshot_success_tip: string;
-    ipc_player_recording_success_tip: string;
-    ipc_player_shot_or_record_check: string;
+    ipc_player_error_screenshot_error_tip: string;
+    ipc_player_record_success_tip: string;
+    ipc_player_shot_success_check: string;
+    ipc_player_record_success_check: string;
+    ipc_player_recording_now_tip: string;
+    ipc_player_stop_recording_err: string;
 } | {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
     ipc_player_current_resolution_is_equal: string;
     ipc_player_screenshot_success_tip: string;
-    ipc_player_recording_success_tip: string;
-    ipc_player_shot_or_record_check: string;
+    ipc_player_error_screenshot_error_tip: string;
+    ipc_player_record_success_tip: string;
+    ipc_player_shot_success_check: string;
+    ipc_player_record_success_check: string;
+    ipc_player_recording_now_tip: string;
+    ipc_player_stop_recording_err: string;
 }>;
 export default Strings;

package/lib/i18n/strings.d.ts

@@ -4,16 +4,24 @@ declare const _default: {
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
-        ipc_player_recording_success_tip: string;
-        ipc_player_shot_or_record_check: string;
+        ipc_player_error_screenshot_error_tip: string;
+        ipc_player_record_success_tip: string;
+        ipc_player_shot_success_check: string;
+        ipc_player_record_success_check: string;
+        ipc_player_recording_now_tip: string;
+        ipc_player_stop_recording_err: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
-        ipc_player_recording_success_tip: string;
-        ipc_player_shot_or_record_check: string;
+        ipc_player_error_screenshot_error_tip: string;
+        ipc_player_record_success_tip: string;
+        ipc_player_shot_success_check: string;
+        ipc_player_record_success_check: string;
+        ipc_player_recording_now_tip: string;
+        ipc_player_stop_recording_err: string;
     };
 };
 export default _default;

package/lib/i18n/strings.js

@@ -4,15 +4,23 @@ export default {
     ipc_player_resolution_SD: 'SD',
     ipc_player_current_resolution_is_equal: 'Already at current clarity',
     ipc_player_screenshot_success_tip: 'Screenshot saved to album',
-    ipc_player_recording_success_tip: 'Recording saved to album',
-    ipc_player_shot_or_record_check: 'View'
+    ipc_player_error_screenshot_error_tip: 'Screenshot failed. Please try again later.',
+    ipc_player_record_success_tip: 'Recording saved to album',
+    ipc_player_shot_success_check: 'View',
+    ipc_player_record_success_check: 'View',
+    ipc_player_recording_now_tip: 'Recording in progress...',
+    ipc_player_stop_recording_err: 'Failed to stop recording. Please exit and try again.'
   },
   zh: {
     ipc_player_resolution_HD: '高清',
     ipc_player_resolution_SD: '标清',
     ipc_player_current_resolution_is_equal: '已是当前清晰度',
     ipc_player_screenshot_success_tip: '截图已保存在APP相册',
-    ipc_player_recording_success_tip: '录像已保存在APP相册',
-    ipc_player_shot_or_record_check: '查看'
+    ipc_player_error_screenshot_error_tip: '截图失败了，请稍后再试',
+    ipc_player_record_success_tip: '录像已保存在APP相册',
+    ipc_player_shot_success_check: '查看',
+    ipc_player_record_success_check: '查看',
+    ipc_player_recording_now_tip: '正在录像中...',
+    ipc_player_stop_recording_err: '结束录像失败，请退出重试'
   }
 };

package/lib/interface.d.ts

@@ -72,8 +72,9 @@ export type ComponentConfig<T = ReturnType<UseCtx> & Record<string, any>> = {
     id: string;
     content: (props: T) => React.ReactElement;
     initProps?: T;
-    absolutePosition?: Pick<React.CSSProperties, 'top' | 'left' | 'right' | 'bottom'>;
+    absolutePosition?: React.CSSProperties;
     absoluteContentClassName?: string;
+    absoluteContentStyle?: React.CSSProperties;
 };
 export type ComponentConfigProps = {
     IPCPlayerContext: IpcContext;
@@ -82,3 +83,8 @@ export type PlayStatusData = {
     playState: PlayState;
     playCode: number;
 };
+export type RecordInfoData = boolean | {
+    tempImagePath: string;
+    filePath: string;
+    thumbPath: string;
+};

package/lib/plugins/fullScreen/fullScreen.js

@@ -58,9 +58,7 @@ 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-wrap',
       initProps: _objectSpread({}, props)

package/lib/plugins/fullScreen/fullScreen.less

@@ -11,8 +11,9 @@
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
+  // transform: translate(180%, 0);
   right: calc(36px * var(--ipc-player-size-scale, 1));;
-  z-index: 3;
+  z-index: 340;
 }
 
 .ipc-player-plugin-full-screen-voice {

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/ptz/ptz.js

@@ -17,10 +17,12 @@ export const Ptz = props => {
   } = props;
   const {
     screenType,
-    isPtzActive
+    isPtzActive,
+    brandColor
   } = useStore({
     screenType: screenTypeAtom,
-    isPtzActive: ptzActive
+    isPtzActive: ptzActive,
+    brandColor: props.brandColor
   });
   if (screenType === 'vertical') {
     return null;
@@ -33,9 +35,7 @@ export const Ptz = props => {
         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)
@@ -46,6 +46,9 @@ export const Ptz = props => {
       updateAtom(ptzActive, !isPtzActive);
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    className: clsx('icon-panel', 'icon-panel-ptz', 'ipc-player-plugin-ptz-text-icon', 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

@@ -2,11 +2,6 @@
   color: var(--iconColor);
   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,38 +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: () => {
+    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: () => {
+    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
   }));
 };

package/lib/plugins/recordVideo/recordVideo.js

@@ -1,11 +1,16 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
-import { View, Text } 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, {
@@ -73,44 +85,159 @@ export function RecordVideo(props) {
     deleteContent,
     recording: recordingAtom,
     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(className, '')
+    className: clsx(className, ''),
+    style: {
+      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 ? 'rgba(255, 56, 56, 1)' : undefined
+      color: recording ? brandColor : undefined
     }
   }));
 }