@ray-js/ipc-player-integration 0.0.1-beta-1

package/lib/plugins/muted/muted.d.ts

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

package/lib/plugins/muted/muted.js

@@ -0,0 +1,42 @@
+import { View, Text } from '@ray-js/ray';
+import React, { useEffect, useState } from 'react';
+import './muted.less';
+export const Muted = props => {
+  const {
+    IPCPlayerContext
+  } = props;
+  const [isMuted, setIsMuted] = useState(true);
+  useEffect(() => {
+    init();
+  }, []);
+  const init = () => {
+    IPCPlayerContext.isMuted({
+      success: res => {
+        setIsMuted(res);
+      },
+      fail: res => {
+        console.log('res===isMuted err', res);
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    onClick: () => {
+      IPCPlayerContext.setMuted({
+        mute: !isMuted,
+        success: () => {
+          setIsMuted(!isMuted);
+        },
+        fail: res => {
+          console.log('res===setMuted err', res);
+        }
+      });
+    },
+    style: {
+      display: 'flex'
+    }
+  }, isMuted ? /*#__PURE__*/React.createElement(Text, {
+    className: "text-icon icon-panel icon-panel-jingyin"
+  }) : /*#__PURE__*/React.createElement(Text, {
+    className: "text-icon icon-panel icon-panel-yinliang"
+  }));
+};

package/lib/plugins/muted/muted.less

@@ -0,0 +1,5 @@
+.text-icon {
+    color: var(--iconColor);
+    font-size: var(--iconFontSize);
+    padding: 8rpx;
+}

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

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

package/lib/plugins/recordVideo/index.js

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

package/lib/plugins/recordVideo/recordVideo.d.ts

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

package/lib/plugins/recordVideo/recordVideo.js

@@ -0,0 +1,93 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { View } from '@ray-js/ray';
+import './recordVideo.less';
+const RECORD_VIDEO_TOAST_ID = 'record_video_toast_id';
+function formatTimeDiff(diff) {
+  const padWithZero = true;
+  const diffMs = Math.abs(diff);
+  const minutes = Math.floor(diffMs / (1000 * 60));
+  const sec = Math.floor(diffMs % (1000 * 60) / 1000);
+  const formattedMinutes = String(minutes).padStart(2, '0');
+  const formattedSec = String(sec).padStart(2, '0');
+  return [formattedMinutes, formattedSec];
+}
+function useTime() {
+  const timer = useRef();
+  const startTime = useRef(0);
+  if (!startTime.current) {
+    startTime.current = new Date().getTime();
+  }
+  const [diffTime, setDiffTime] = useState(0);
+  useEffect(() => {
+    // @ts-ignore
+    timer.current = setInterval(() => {
+      const now = new Date().getTime();
+      setDiffTime(now - startTime.current);
+    }, 1000);
+    return () => {
+      clearInterval(timer.current);
+    };
+  }, []);
+  const cancel = () => {
+    clearInterval(timer.current);
+  };
+  if (!diffTime) {
+    return {
+      min: '00',
+      sec: '00',
+      cancel
+    };
+  }
+  const ret = formatTimeDiff(diffTime);
+  return {
+    min: ret[0],
+    sec: ret[1]
+  };
+}
+function TimeRecord() {
+  const {
+    min,
+    sec,
+    cancel
+  } = useTime();
+  return /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-record-video-toast-time"
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-record-video-toast-time-warp"
+  }, min), /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-record-video-toast-time-delimiter"
+  }, ":"), /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-record-video-toast-time-warp"
+  }, sec));
+}
+export function RecordVideo(props) {
+  const {
+    IPCPlayerContext,
+    addContent,
+    deleteContent
+  } = props;
+  // const [recording, setRecording] = useState(false);
+  const {
+    recording,
+    setRecording
+  } = props;
+  const handRecordVideo = async target => {
+    await setRecording(target);
+    if (target) {
+      deleteContent('absolute', RECORD_VIDEO_TOAST_ID);
+    } else {
+      addContent('absolute', {
+        id: RECORD_VIDEO_TOAST_ID,
+        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))
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    onClick: () => handRecordVideo(!recording),
+    className: "ipc-player-plugin-record-video-icon icon-panel icon-panel-luping"
+  });
+}

package/lib/plugins/recordVideo/recordVideo.less

@@ -0,0 +1,37 @@
+.ipc-player-plugin-record-video-icon {
+  font-size: var(--iconFontSize);
+  color: var(--iconColor);
+}
+.ipc-player-plugin-record-video-toast {
+  z-index: 2;
+  position: absolute;
+  display: flex;
+  padding: 24rpx;
+  align-items: center;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 14rpx;
+  background-color: var(--bg-color);
+  border-radius: 16rpx;
+  .ipc-player-plugin-record-video-toast-point {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 12rpx;
+    background-color: #FF3838;
+  }
+  .ipc-player-plugin-record-video-toast-time {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: var(--fontColor);
+    margin-left: 16rpx;
+    display: flex;
+    align-items: center;
+    .ipc-player-plugin-record-video-toast-time-warp {
+      width: 34rpx;
+      text-align: center;
+    }
+    .ipc-player-plugin-record-video-toast-time-delimiter {
+      margin: 0 4rpx;
+    }
+  }
+}

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

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

package/lib/plugins/screenshot/index.js

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

package/lib/plugins/screenshot/screenshot.d.ts

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

package/lib/plugins/screenshot/screenshot.js

@@ -0,0 +1,55 @@
+import React, { useRef } from 'react';
+import { View, Image, CoverView } from '@ray-js/ray';
+import './screenshot.less';
+const CLOSE_TIME = 5000;
+export function Screenshot(props) {
+  const {
+    IPCPlayerContext,
+    addContent,
+    saveToAlbum,
+    deleteContent
+  } = props;
+  const timer = useRef();
+  const timeToCloseToast = () => {
+    clearInterval(timer.current);
+    // @ts-ignore
+    timer.current = setTimeout(() => {
+      deleteContent('absolute', 'plugin-screenshot-toast');
+    }, CLOSE_TIME);
+  };
+  const handCheck = () => {
+    console.log('handCheck');
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    onClick: () => {
+      IPCPlayerContext.snapshot({
+        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();
+        },
+        fail: err => {
+          console.log('保存相册失败', err);
+        }
+      });
+    },
+    className: "icon-panel icon-panel-jieping ipc-player-plugin-screenshot-icon"
+  }));
+}

package/lib/plugins/screenshot/screenshot.less

@@ -0,0 +1,38 @@
+.ipc-player-plugin-screenshot-icon {
+  color: var(--iconColor);
+  font-size: var(--iconFontSize);
+}
+.ipc-player-plugin-screenshot-toast {
+  position: absolute;
+  width: 90%;
+  border-radius: 16rpx;
+  background-color: var(--bg-color);
+  left: 50%;
+  transform: translateX(-50%);
+  top: 32rpx;
+  display: flex;
+  align-items: center;
+  padding: 16rpx 32rpx;
+  z-index: 3;
+  .ipc-player-plugin-screenshot-toast-image {
+    width: 132rpx;
+    height: 74rpx;
+    border-radius: 8rpx;
+  }
+  .ipc-player-plugin-screenshot-toast-title {
+    margin-left: 24rpx;
+    font-size: 28rpx;
+    color: var(--fontColor);
+    line-height: 40rpx;
+    max-width: 60%;
+  }
+  .ipc-player-plugin-screenshot-toast-bottom {
+    position: absolute;
+    right: 32rpx;
+    border: 1rpx solid #1989FA;
+    border-radius: 8rpx;
+    padding: 10rpx 22rpx;
+    color: #1989FA;
+    font-size: 28rpx;
+  }
+}

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

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

package/lib/plugins/tempHumidity/index.js

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

package/lib/plugins/tempHumidity/tempHumidity.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './tempHumidity.less';
+interface IProp extends ComponentConfigProps {
+    className?: string;
+}
+export declare const TempHumidity: (props: IProp) => React.JSX.Element;
+export {};

package/lib/plugins/tempHumidity/tempHumidity.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useTemperature, useHumidity } from '../../hooks';
+import './tempHumidity.less';
+export const TempHumidity = props => {
+  const {
+    className,
+    devId
+  } = props;
+  const {
+    tempUnit,
+    tempC,
+    tempF
+  } = useTemperature(devId);
+  const humidity = useHumidity(devId);
+  const tempRender = () => {
+    if (tempUnit === '1') {
+      return tempF && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+        className: "text-icon-tempHumidity icon-panel icon-panel-wendu"
+      }), /*#__PURE__*/React.createElement(Text, {
+        className: "tempHumidity"
+      }, tempF));
+    }
+    return tempC && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+      className: "text-icon-tempHumidity icon-panel icon-panel-wendu"
+    }), /*#__PURE__*/React.createElement(Text, {
+      className: "tempHumidity"
+    }, tempC), /*#__PURE__*/React.createElement(Text, {
+      className: "divider"
+    }, "/"));
+  };
+  const humRender = () => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+      className: "text-icon-tempHumidity icon-panel icon-panel-shidu"
+    }), /*#__PURE__*/React.createElement(Text, {
+      className: "tempHumidity"
+    }, `${humidity}`));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (tempC || humidity) && /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-tempHumidity', className)
+  }, (() => {
+    if (tempC && humidity) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, tempRender(), humRender());
+    }
+    if (tempC) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, tempRender());
+    }
+    if (humidity) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, humRender());
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  })()));
+};

package/lib/plugins/tempHumidity/tempHumidity.less

@@ -0,0 +1,21 @@
+.ipc-player-plugin-tempHumidity {
+    display: flex;
+    align-items: center;
+    padding: 5px 8px;
+    border-radius: 12.5px;
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    color: var(--iconColor);
+}
+
+.divider {
+    margin: 0 4px;
+    color: var(--iconColor);
+}
+
+.text-icon-tempHumidity {
+    color: var(--iconColor);
+    font-size: var(--iconFontSize);
+    margin-right: 4rpx;
+}

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

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

package/lib/plugins/videoBitKbps/index.js

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

package/lib/plugins/videoBitKbps/videoBitKbps.d.ts

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

package/lib/plugins/videoBitKbps/videoBitKbps.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { View } from '@ray-js/ray';
+import { useVideoBitKbps } from '../../hooks';
+import './videoBitKbps.less';
+export const VideoBitKbps = props => {
+  const {
+    devId
+  } = props;
+  const bitKbps = useVideoBitKbps(devId);
+  return /*#__PURE__*/React.createElement(View, {
+    className: "videoBitKbps"
+  }, bitKbps);
+};

package/lib/plugins/videoBitKbps/videoBitKbps.less

@@ -0,0 +1,11 @@
+.videoBitKbps {
+    display: flex;
+    align-items: center;
+    padding: 5px 8px;
+    border-radius: 12.5px;
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    margin-right: 8px;
+    color: var(--iconColor);
+}

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

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

package/lib/plugins/voiceIntercom/index.js

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import './voiceIntercom.less';
+import { ComponentConfigProps } from '../../interface';
+type Props = ComponentConfigProps & {
+    style?: React.CSSProperties;
+    className?: string;
+};
+export declare function VoiceIntercom({ style, className, recording, intercom, setIntercom, mute, setMute, getStreamStatus, }: Props): React.JSX.Element;
+export {};

package/lib/plugins/voiceIntercom/voiceIntercom.js

@@ -0,0 +1,67 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useRef } from 'react';
+import { View } from '@ray-js/ray';
+import clsx from 'clsx';
+import './voiceIntercom.less';
+import { PlayerStreamStatus } from '../../interface';
+export function VoiceIntercom(_ref) {
+  let {
+    style,
+    className,
+    recording,
+    intercom,
+    setIntercom,
+    mute,
+    setMute,
+    getStreamStatus
+  } = _ref;
+  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;
+    }
+    if (getStreamStatus() !== PlayerStreamStatus.PreviewSuccess) {
+      console.log('PlayerStreamStatus not 1002');
+      return;
+    }
+    intercomRef.current = true;
+    originMuteStatusBeforeVoice.current = _mute;
+    // 如果对讲开始之前，是静音的，则需要关闭静音
+    if (_mute) {
+      await setMute(false);
+    }
+    setIntercom(_intercom);
+  };
+  const endVoice = async () => {
+    try {
+      // 将静音状态恢复为开始对讲之前的状态
+      await setMute(originMuteStatusBeforeVoice.current);
+      await setIntercom(false);
+    } catch (err) {
+      //
+    } finally {
+      intercomRef.current = false;
+    }
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: _objectSpread({}, style),
+    className: clsx('ipc-player-plugin-voice-intercom', className),
+    onLongClick: () => {
+      console.log('2222');
+      longClickStartedRef.current = true;
+      startVoice(!intercom, recording, mute);
+    },
+    onTouchEnd: () => {
+      if (!longClickStartedRef.current) return;
+      longClickStartedRef.current = false;
+      endVoice();
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "icon-panel icon-panel-yuyin"
+  }));
+}

package/lib/plugins/voiceIntercom/voiceIntercom.less

@@ -0,0 +1,10 @@
+.ipc-player-plugin-voice-intercom {
+  background: var(--ipc-player-plugin-voice-bg, radial-gradient(77% 77% at 34% 28%, #FF997C 0%, #FF592A 99%));
+  width: 144rpx;
+  height: 144rpx;
+  border-radius: 144rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 58rpx;
+}

package/lib/ports.output.d.ts

@@ -0,0 +1,6 @@
+export type UseBattery = (devId: string) => {
+    batteryValue: number;
+    batteryCharging: boolean;
+};
+export type UseTemperature = (devId: string) => number;
+export type UseHumidity = () => number;

package/lib/ports.output.js

@@ -0,0 +1 @@
+export {};

package/lib/props.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface IProps {
+    /**
+     * @description.zh 类名
+     * @description.en class name
+     */
+    className?: string;
+    /**
+     * @description.zh 样式
+     * @description.en Style
+     */
+    style?: React.CSSProperties;
+}
+export declare const defaultProps: IProps;

package/lib/props.js

@@ -0,0 +1 @@
+export const defaultProps = {};

package/lib/ui/index.d.ts

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

package/lib/ui/index.js

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

package/lib/ui/ui.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { PlayStatusData } from '../interface';
+import { useCtx } from '../ctx/ctx.composition';
+import './ui.less';
+type CtxInstance = ReturnType<typeof useCtx>;
+type CSSVariable = {
+    '--iconColor': string;
+    '--iconFontSize': string;
+    '--bg-color': string;
+    '--fontColor': string;
+};
+type Props = {
+    devId: string;
+    instance?: CtxInstance;
+    className?: string;
+    onPlayStatus?: (data: PlayStatusData) => void;
+    style?: React.CSSProperties;
+    CSSVariable?: Partial<CSSVariable>;
+};
+export declare const IPCPlayerIntegration: (props: Props) => React.JSX.Element;
+export {};