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

package/lib/plugins/voiceIntercom/voiceIntercom.js

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import { useStore } from '../../ctx/store';
 import './voiceIntercom.less';
 import { PlayerStreamStatus } from '../../interface';
+const NILL = () => null;
 export function VoiceIntercom(_ref) {
   let {
     style,
@@ -14,7 +15,9 @@ export function VoiceIntercom(_ref) {
     setIntercom,
     mute: muteAtom,
     setMute,
-    getStreamStatus
+    getStreamStatus,
+    onTouchStart = NILL,
+    onTouchEnd = NILL
   } = _ref;
   const {
     recording,
@@ -61,12 +64,13 @@ export function VoiceIntercom(_ref) {
   return /*#__PURE__*/React.createElement(View, {
     style: _objectSpread({}, style),
     className: clsx('ipc-player-plugin-voice-intercom', className),
+    onTouchStart: onTouchStart,
     onLongClick: () => {
-      console.log('2222');
       longClickStartedRef.current = true;
       startVoice(!intercom, recording, mute);
     },
-    onTouchEnd: () => {
+    onTouchEnd: e => {
+      onTouchEnd(e);
       if (!longClickStartedRef.current) return;
       longClickStartedRef.current = false;
       endVoice();

package/lib/plugins/voiceIntercom/voiceIntercom.less

@@ -1,10 +1,11 @@
 .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;
+  width: calc(72px * var(--ipc-player-size-scale, 1));
+  height: calc(72px * var(--ipc-player-size-scale, 1));
+  border-radius: calc(72px * var(--ipc-player-size-scale, 1));
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 58rpx;
+  font-size: calc(29px * var(--ipc-player-size-scale, 1));
+  color: #fff;
 }

package/lib/ui/bottomContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UseCtx } from '../interface';
+type Props = {
+    ctx: ReturnType<UseCtx>;
+    children: React.ReactNode;
+};
+export declare function BottomContent({ ctx, children }: Props): React.JSX.Element;
+export {};

package/lib/ui/bottomContent.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { CoverView, View } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useStore } from '../ctx/store';
+import { useComponentHideState } from './hooks';
+export function BottomContent(_ref) {
+  let {
+    ctx,
+    children
+  } = _ref;
+  const {
+    screenType
+  } = useStore({
+    screenType: ctx.screenType,
+    playState: ctx.playState
+  });
+  const [shouldHide] = useComponentHideState(screenType);
+  return /*#__PURE__*/React.createElement(CoverView, {
+    className: "ipc-player-bottom-content-warp"
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      // @ts-ignore
+      '--height': screenType === 'vertical' ? '48px' : '69px',
+      '--gap': '25px'
+    },
+    className: clsx('ipc-player-content-item', 'ipc-player-bottom-content', {
+      'ipc-player-bottom-content-hide': shouldHide
+    })
+  }, children));
+}

package/lib/ui/constant.d.ts

@@ -0,0 +1,5 @@
+export declare const showAllComponent = "showAllComponent";
+export declare const hideAllComponent = "hideAllComponent";
+export declare const playerTap = "playerTap";
+export declare const pauseTimeToHideAllComponent = "pauseTimeToHideAllComponent";
+export declare const startTimeToHideAllComponent = "startTimeToHideAllComponent";

package/lib/ui/constant.js

@@ -0,0 +1,5 @@
+export const showAllComponent = 'showAllComponent';
+export const hideAllComponent = 'hideAllComponent';
+export const playerTap = 'playerTap';
+export const pauseTimeToHideAllComponent = 'pauseTimeToHideAllComponent';
+export const startTimeToHideAllComponent = 'startTimeToHideAllComponent';

package/lib/ui/context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { EventInstance } from './event';
+export type UIEvent = {
+    event: EventInstance;
+};
+export declare const UIEventContext: import("react").Context<UIEvent>;

package/lib/ui/context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export const UIEventContext = /*#__PURE__*/createContext({
+  event: {
+    off: () => null,
+    on: () => null,
+    emit: () => null
+  }
+});

package/lib/ui/event.d.ts

@@ -0,0 +1,8 @@
+type Task = (...args: any[]) => void;
+export type EventInstance = {
+    on: (type: string, cb: Task) => void;
+    off: (type: string, cb: Task) => void;
+    emit: (type: string, ...args: any[]) => void;
+};
+export declare function getEventInstance(): EventInstance;
+export {};

package/lib/ui/event.js

@@ -0,0 +1,26 @@
+export function getEventInstance() {
+  const map = {};
+  return {
+    on(type, cb) {
+      if (!map[type]) {
+        map[type] = [];
+      }
+      map[type].push(cb);
+    },
+    off(type, cb) {
+      if (map[type]) {
+        map[type] = map[type].filter(item => item !== cb);
+      }
+    },
+    emit(type) {
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+      if (map[type]) {
+        map[type].forEach(cb => {
+          cb && cb.apply(null, ...args);
+        });
+      }
+    }
+  };
+}

package/lib/ui/hooks.d.ts

@@ -0,0 +1 @@
+export declare function useComponentHideState(screenType: any): boolean[];

package/lib/ui/hooks.js

@@ -0,0 +1,25 @@
+import { useContext, useState, useEffect } from 'react';
+import { UIEventContext } from './context';
+import { hideAllComponent, showAllComponent } from './constant';
+export function useComponentHideState(screenType) {
+  const {
+    event
+  } = useContext(UIEventContext);
+  const [shouldHide, setShouldHide] = useState(false);
+  const listenHideEvent = () => {
+    if (screenType === 'vertical') return;
+    setShouldHide(true);
+  };
+  const listenShowEvent = () => {
+    setShouldHide(false);
+  };
+  useEffect(() => {
+    event.on(hideAllComponent, listenHideEvent);
+    event.on(showAllComponent, listenShowEvent);
+    return () => {
+      event.off(hideAllComponent, listenHideEvent);
+      event.off(showAllComponent, listenShowEvent);
+    };
+  }, [listenHideEvent]);
+  return [shouldHide];
+}

package/lib/ui/index.d.ts

@@ -1 +1,3 @@
 export * from './ui';
+export * from './hooks';
+export * from './context';

package/lib/ui/index.js

@@ -1 +1,3 @@
-export * from './ui';
+export * from './ui';
+export * from './hooks';
+export * from './context';

package/lib/ui/topContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UseCtx } from '../interface';
+type Props = {
+    ctx: ReturnType<UseCtx>;
+    children: React.ReactNode;
+};
+export declare function TopContent({ ctx, children }: Props): React.JSX.Element;
+export {};

package/lib/ui/topContent.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { CoverView, View } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useStore } from '../ctx/store';
+import { useComponentHideState } from './hooks';
+export function TopContent(_ref) {
+  let {
+    ctx,
+    children
+  } = _ref;
+  const {
+    screenType
+  } = useStore({
+    screenType: ctx.screenType,
+    playState: ctx.playState
+  });
+  const [shouldHide] = useComponentHideState(screenType);
+  return /*#__PURE__*/React.createElement(CoverView, {
+    className: "ipc-player-top-content-warp"
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      // @ts-ignore
+      '--height': screenType === 'vertical' ? '48px' : '69px',
+      '--gap': '16px'
+    },
+    className: clsx('ipc-player-content-item', 'ipc-player-top-content', {
+      'ipc-player-top-content-hide': shouldHide
+    })
+  }, children));
+}

package/lib/ui/ui.d.ts

@@ -7,6 +7,7 @@ type CSSVariable = {
     '--iconFontSize': string;
     '--bg-color': string;
     '--fontColor': string;
+    '--fontSize': string;
 };
 type Props = {
     devId: string;
@@ -16,5 +17,5 @@ type Props = {
     style?: React.CSSProperties;
     CSSVariable?: Partial<CSSVariable>;
 };
-export declare const IPCPlayerIntegration: (props: Props) => React.JSX.Element;
+export declare const IPCPlayerIntegration: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;
 export {};

package/lib/ui/ui.js

@@ -1,11 +1,16 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useRef } from 'react';
+import React, { useRef, useMemo, useEffect, useCallback } from 'react';
 import { View, CoverView, getSystemInfoSync } from '@ray-js/ray';
 import clsx from 'clsx';
 import IPCPlayer from '@ray-js/ray-ipc-player';
 import { PlayState, PlayerStreamStatus } from '../interface';
 import { useCtx } from '../ctx/ctx.composition';
-import { useStore } from '../ctx/store';
+import { useStore, getDefaultStore } from '../ctx/store';
+import { getEventInstance } from './event';
+import { UIEventContext } from './context';
+import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent } from './constant';
+import { BottomContent } from './bottomContent';
+import { TopContent } from './topContent';
 import './ui.less';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
@@ -19,11 +24,13 @@ function getCtxInstance(instance, devId) {
 
 const defaultCSSVariable = {
   '--iconColor': '#fff',
-  '--iconFontSize': '40rpx',
+  '--iconFontSize': '20px',
   '--bg-color': '#000',
-  '--fontColor': '#fff'
+  '--fontColor': '#fff',
+  '--fontSize': '12px'
 };
-export const IPCPlayerIntegration = props => {
+const HIDE_COMPONENT_TIME = 5000;
+export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   const {
     className,
     devId,
@@ -34,6 +41,12 @@ export const IPCPlayerIntegration = props => {
   const {
     setPlayState
   } = instance;
+  const prevTriggerEvent = useRef();
+  const eventRef = useRef();
+  const timer = useRef();
+  if (!eventRef.current) {
+    eventRef.current = getEventInstance();
+  }
   const systemInfo = useRef(null);
   if (!systemInfo.current) {
     systemInfo.current = getSystemInfoSync();
@@ -51,30 +64,96 @@ export const IPCPlayerIntegration = props => {
     screenType: instance.screenType,
     playState: instance.playState
   });
+  const renderTopContent = useMemo(() => {
+    if (!topContent || !(topContent !== null && topContent !== void 0 && topContent.length)) return null;
+    return topContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
+      key: item.id
+    }, item.initProps), instance), {}, {
+      IPCPlayerContext: instance.IPCPlayerInstance
+    })));
+  }, [topContent, instance]);
+  const renderBottomContent = useMemo(() => {
+    if (!bottomContent || !(bottomContent !== null && bottomContent !== void 0 && bottomContent.length)) return null;
+    return bottomContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({}, item.initProps), {}, {
+      key: item.id
+    }, instance), {}, {
+      IPCPlayerContext: instance.IPCPlayerInstance
+    })));
+  }, [bottomContent, instance]);
 
   /**
    * 视频流加载状态封装
    */
 
+  const handPlayerTap = useCallback(() => {
+    const store = getDefaultStore();
+    const _screenType = store.get(instance.screenType);
+    eventRef.current.emit(playerTap);
+    if (_screenType === 'full') {
+      if (prevTriggerEvent.current === hideAllComponent) {
+        triggerEvent(showAllComponent);
+      } else {
+        triggerEvent(hideAllComponent);
+      }
+    }
+  }, []);
+  const triggerEvent = type => {
+    const store = getDefaultStore();
+    const _screenType = store.get(instance.screenType);
+    if (prevTriggerEvent.current === type || _screenType === 'vertical') return;
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    if (type === showAllComponent) {
+      // @ts-ignore
+      timer.current = setTimeout(() => {
+        triggerEvent(hideAllComponent);
+      }, HIDE_COMPONENT_TIME);
+    }
+    eventRef.current.emit(type);
+    prevTriggerEvent.current = type;
+  };
+  const listenStart = useCallback(() => {
+    if (!timer.current) {
+      // @ts-ignore
+      timer.current = setTimeout(() => {
+        triggerEvent(hideAllComponent);
+      }, HIDE_COMPONENT_TIME);
+    }
+  }, []);
+  const listenPause = useCallback(() => {
+    clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+  useEffect(() => {
+    eventRef.current.on(startTimeToHideAllComponent, listenStart);
+    return () => {
+      eventRef.current.off(startTimeToHideAllComponent, listenStart);
+    };
+  }, [listenStart]);
+  useEffect(() => {
+    eventRef.current.on(pauseTimeToHideAllComponent, listenPause);
+    return () => {
+      eventRef.current.off(pauseTimeToHideAllComponent, listenPause);
+    };
+  });
   const playerReady = playState === PlayState.PLAYING;
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(UIEventContext.Provider, {
+    value: {
+      event: eventRef.current
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-content', className),
     style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultCSSVariable), CSSVariable), style), {}, {
-      height: screenType === 'full' ? `${systemInfo.current.screenWidth}px` : style === null || style === void 0 ? void 0 : style.height
+      height: screenType === 'vertical' ? (style === null || style === void 0 ? void 0 : style.height) || '100%' : '100vh'
     })
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      width: '100%',
-      height: '100%'
-    }
   }, /*#__PURE__*/React.createElement(IPCPlayer, {
-    objectFit: "fillCrop",
+    objectFit: "",
     defaultMute: true,
     devId: devId,
     onlineStatus: true,
-    ipcPlayerContext: instance.IPCPlayerInstance
-    // updateLayout={`${playerLayout}`}
-    ,
+    ipcPlayerContext: instance.IPCPlayerInstance,
     onChangeStreamStatus: code => {
       var _props$onPlayStatus;
       const playStateMap = {
@@ -95,38 +174,39 @@ export const IPCPlayerIntegration = props => {
     // onCtx={getIpcPlayer}
     // onPlayerTap={handlePlayerClick}
     ,
-    clarity: "hd",
-    privateState: false
-  })), /*#__PURE__*/React.createElement(CoverView, {
-    style: {
-      height: screenType === 'vertical' ? '48px' : '69px'
+    onZoomChange: () => {
+      console.log('res===onZoomChange');
     },
-    className: clsx('ipc-player-top-content', playerReady ? 'ipc-player-element-visible' : 'ipc-player-element-hidden')
-  }, (() => {
-    if (!topContent || !(topContent !== null && topContent !== void 0 && topContent.length)) return null;
-    return topContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
-      key: item.id
-    }, item.initProps), instance), {}, {
-      IPCPlayerContext: instance.IPCPlayerInstance
-    })));
-  })()), /*#__PURE__*/React.createElement(CoverView, {
-    style: {
-      height: screenType === 'vertical' ? '48px' : '69px'
+    onSessionDidDisconnected: () => {
+      console.log('res===onSessionDidDisconnected');
     },
-    className: clsx('ipc-player-bottom-content', playerReady ? 'ipc-player-element-visible' : 'ipc-player-element-hidden')
-  }, (() => {
-    if (!bottomContent || !(bottomContent !== null && bottomContent !== void 0 && bottomContent.length)) return null;
-    return bottomContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({}, item.initProps), {}, {
-      key: item.id
-    }, instance), {}, {
-      IPCPlayerContext: instance.IPCPlayerInstance
-    })));
-  })()), playerReady && (() => {
+    onCameraPreviewFailure: () => {
+      console.log('res===onCameraPreviewFailure');
+    },
+    onCameraNotifyWeakNetwork: () => {
+      console.log('res===onCameraNotifyWeakNetwork');
+    },
+    clarity: "hd",
+    privateState: false,
+    onPlayerTap: handPlayerTap
+  }), playerReady && /*#__PURE__*/React.createElement(TopContent, {
+    ctx: instance
+  }, renderTopContent), playerReady && /*#__PURE__*/React.createElement(BottomContent, {
+    ctx: instance
+  }, renderBottomContent), playerReady && (() => {
     if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
-    return absoluteContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
-      key: item.id
-    }, item.initProps), instance), {}, {
-      IPCPlayerContext: instance.IPCPlayerInstance
-    })));
-  })());
-};
+    return absoluteContent.map(item => {
+      return /*#__PURE__*/React.createElement(CoverView, {
+        key: item.id,
+        style: _objectSpread({
+          position: 'absolute'
+        }, item.absolutePosition),
+        className: item.absoluteContentClassName
+      }, /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
+        key: item.id
+      }, item.initProps), instance), {}, {
+        IPCPlayerContext: instance.IPCPlayerInstance
+      })));
+    });
+  })()));
+});

package/lib/ui/ui.less

@@ -1,40 +1,46 @@
 .ipc-player-content {
   position: relative;
-
-  &.ipc-player-content-full {
-    height: 100vw;
-  }
-
-  .ipc-player-top-content {
+  overflow: hidden;
+  .ipc-player-top-content-warp {
     position: absolute;
     width: 100%;
     left: 0;
     top: 0;
-    gap: 20rpx;
-    z-index: 2;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 11rpx;
-    font-size: 24rpx;
-    box-sizing: border-box;
+    z-index: 100;
   }
-
-  .ipc-player-bottom-content {
+  .ipc-player-bottom-content-warp {
     position: absolute;
-    z-index: 2;
-    display: flex;
+    z-index: 100;
     width: 100%;
     left: 0;
     bottom: 0;
+  }
+  .ipc-player-content-item {
+    --height: 48px;
+    --gap: 10px;
+    display: flex;
+    width: 100%;
+    height: calc(var(--height) * var(--ipc-player-size-scale, 1));
     align-items: center;
-    gap: 20rpx;
-    padding: 11rpx;
-    font-size: 24rpx;
-    box-sizing: border-box;
+    gap: calc(var(--gap) * var(--ipc-player-size-scale, 1));
+    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%)
+      }
+    }
   }
 }
 
+
 .ipc-player-element-visible {
   visibility: visible !important;
 }

package/lib/utils/ipcApi/index.d.ts

@@ -0,0 +1,78 @@
+export interface IApiError {
+    errorMsg: string;
+    errorCode: string;
+    innerError: {
+        errorMsg: string;
+        errorCode: string;
+    };
+}
+/**
+ * 获取信号强度
+ * @param devId
+ * @param dps 扩展参数
+ * @returns
+ */
+export declare const requestWifiSignal: <T>(devId: string, dps?: {}) => Promise<IApiError | T>;
+/**
+ * 获取视频码率
+ * @param devId
+ * @param extendParam 扩展参数
+ * @returns
+ */
+export declare const getVideoBitrateKbps: <T>(devId: string, extendParam?: {}) => Promise<IApiError | T>;
+export declare const addCameraDeviceObserver: <T>(devId: string, extendParam?: {}) => Promise<IApiError | T>;
+export declare const networkStatusDidChangedEvent: (callback: any) => void;
+/**
+ * IPC-低功耗唤醒:低功耗唤醒,唤醒门铃设备
+ * 需引入DeviceKit，且在>=3.1.0-ipcwake.1版本才可使用
+ * @param devId
+ * @returns
+ */
+export declare const wakeUpDevice: <T>(devId: string, dps?: {}) => Promise<IApiError | T>;
+/**
+ * 画中画：是否支持画中画：只有安卓在用
+ * 需引入IPCKit，且在>=1.0.0-TTT432.1版本才可使用
+ * @param devId
+ * @param extendParam 扩展参数
+ * @returns
+ */
+export declare const getMobileOrientation: <T>() => Promise<IApiError | T>;
+/**
+ * 屏幕旋转设置，auto(暂不支持) / portrait / landscape。pad 模式下不支持屏幕旋转
+ * 需引入MiniKit，且在>=2.4.1版本才可使用
+ * @param pageOrientation
+ * @returns
+ */
+export declare const setScreenOrientation: <T>(pageOrientation: string) => Promise<IApiError | T>;
+/**
+ * 画中画：是否支持画中画：只有安卓在用
+ * 需引入IPCKit，且在>=1.0.0-TTT432.1版本才可使用
+ * @param devId
+ * @param extendParam 扩展参数
+ * @returns
+ */
+export declare const isSupportFloatWindow: <T>(devId: string, extendParam?: {}) => Promise<IApiError | T>;
+/**
+ * 画中画：开启画中画
+ * 需引入IPCKit，且在>=1.0.0-TTT432.1版本才可使用
+ * @param devId
+ * @param extendParam 扩展参数
+ * @returns
+ */
+export declare const openFloatWindow: <T>(devId: string, extendParam?: {}) => Promise<IApiError | T>;
+/**
+ * IPC-APP 缓存支持的对讲方式:是否支持对讲
+ * 需引入IPCKit，且在>=1.0.0-TTT432.1版本才可使用
+ * @param devId
+ * @param extendParam 扩展参数
+ * @returns
+ */
+export declare const isSupportedTalk: <T>(devId: string, extendParam?: {}) => Promise<IApiError | T>;
+/**
+ * 设备支持的对讲模式
+ * 需引入IPCKit，且在>=1.0.0-TTT432.1版本才可使用
+ * @param devId
+ * @param extendParam 扩展参数
+ * @returns 设备支持的对讲模式。回掉方法的参数为数值型，0 未知；1：单向对讲；2：双向对讲。
+ */
+export declare const getCurrentSupportedTalkMode: <T>(devId: string, extendParam?: {}) => Promise<IApiError | T>;