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

package/lib/ctx/ctx.composition.js

@@ -1,14 +1,12 @@
 import { createUseCtx } from './ctx';
 import { Battery, Screenshot, TempHumidity, RecordVideo, FullScreen, VideoBitKbps, Muted } from '../plugins';
+import { authorizeStatus } from '../utils/authorize';
 const createPlayContext = ty.createIpcPlayerContext;
 // const createPlayContext = () => null;
 
 const topContent = [{
   id: 'Battery',
-  content: Battery,
-  initProps: {
-    className: 1
-  }
+  content: Battery
 }, {
   id: 'TempHumidity',
   content: TempHumidity
@@ -34,5 +32,6 @@ export const useCtx = createUseCtx({
   createPlayContext,
   defaultTopContent: topContent,
   defaultAbsoluteContent: absoluteContent,
-  defaultBottomContent: bottomContent
+  defaultBottomContent: bottomContent,
+  authorizeStatus: authorizeStatus
 });

package/lib/ctx/ctx.d.ts

@@ -1,10 +1,11 @@
 import { ComponentConfig, UseCtx } from '../interface';
-import type { createPlayContext } from './ports.output';
+import type { createPlayContext, AuthorizeStatus } from './ports.output';
 type Depend = {
     createPlayContext: createPlayContext;
     defaultTopContent?: ComponentConfig[];
     defaultBottomContent?: ComponentConfig[];
     defaultAbsoluteContent?: ComponentConfig[];
+    authorizeStatus: AuthorizeStatus;
 };
-export declare const createUseCtx: ({ createPlayContext, defaultTopContent, defaultBottomContent, defaultAbsoluteContent, }: Depend) => UseCtx;
+export declare const createUseCtx: ({ createPlayContext, defaultTopContent, defaultBottomContent, defaultAbsoluteContent, authorizeStatus, }: Depend) => UseCtx;
 export {};

package/lib/ctx/ctx.js

@@ -1,5 +1,5 @@
-import { useState, useRef } from 'react';
-import { authorizeStatus } from '../utils/authorize';
+import { useRef, useCallback } from 'react';
+import { useAtom, updateAtom } from './store';
 import { PlayState } from '../interface';
 const SAVE_TO_ALBUM = 1;
 export const createUseCtx = _ref => {
@@ -7,7 +7,8 @@ export const createUseCtx = _ref => {
     createPlayContext,
     defaultTopContent,
     defaultBottomContent,
-    defaultAbsoluteContent
+    defaultAbsoluteContent,
+    authorizeStatus
   } = _ref;
   return _ref2 => {
     let {
@@ -19,17 +20,22 @@ export const createUseCtx = _ref => {
     } = _ref2;
     const streamStatus = useRef();
     // 全屏、竖屏
-    const [screenType, setScreenType] = useState('vertical');
+    const screenType = useAtom('vertical');
     // 录像中
-    const [recording, setRecording] = useState(false);
+    const recording = useAtom(false);
+
     // 静音
-    const [mute, setMute] = useState(false);
+    const mute = useAtom(false);
+
     // 对讲中
-    const [intercom, setIntercom] = useState(false);
-    const [playState, setPlayState] = useState(PlayState.CONNECTING);
-    const [topContent, setTopContent] = useState(initTopContent || defaultTopContent || []);
-    const [bottomContent, setBottomContent] = useState(initBottomContent || defaultBottomContent || []);
-    const [absoluteContent, setAbsoluteContent] = useState(initAbsoluteContent || defaultAbsoluteContent || []);
+    const intercom = useAtom(false);
+    const playState = useAtom(PlayState.CONNECTING);
+    const setPlayState = useCallback(value => {
+      updateAtom(playState, value);
+    }, [playState]);
+    const topContent = useAtom(initTopContent || defaultTopContent || []);
+    const bottomContent = useAtom(initBottomContent || defaultBottomContent || []);
+    const absoluteContent = useAtom(initAbsoluteContent || defaultAbsoluteContent || []);
     const IPCPlayerInstance = useRef();
     if (!IPCPlayerInstance.current) {
       IPCPlayerInstance.current = createPlayContext(devId);
@@ -50,7 +56,7 @@ export const createUseCtx = _ref => {
           if (target) {
             IPCPlayerInstance.current.startTalk({
               success: () => {
-                setIntercom(true);
+                updateAtom(intercom, true);
                 resolve(true);
               },
               fail: err => {
@@ -60,11 +66,11 @@ export const createUseCtx = _ref => {
           } else {
             IPCPlayerInstance.current.stopTalk({
               success: () => {
-                setIntercom(false);
+                updateAtom(intercom, false);
                 resolve(true);
               },
               fail: err => {
-                setIntercom(true);
+                updateAtom(intercom, true);
                 reject(err);
               }
             });
@@ -73,15 +79,15 @@ export const createUseCtx = _ref => {
       },
       setMute: async target => {
         return new Promise((resolve, reject) => {
-          setMute(target);
+          updateAtom(mute, target);
           IPCPlayerInstance.current.setMuted({
             mute: target,
             success: () => {
-              setMute(true);
+              updateAtom(mute, true);
               resolve(true);
             },
             fail: err => {
-              setMute(!target);
+              updateAtom(mute, !target);
               reject(err);
             }
           });
@@ -95,7 +101,7 @@ export const createUseCtx = _ref => {
             IPCPlayerInstance.current.startRecord({
               saveToAlbum,
               success: () => {
-                setRecording(true);
+                updateAtom(recording, true);
                 resolve(true);
               },
               fail: err => {
@@ -106,18 +112,20 @@ export const createUseCtx = _ref => {
             IPCPlayerInstance.current.stopRecord({
               saveToAlbum,
               success: () => {
-                setRecording(false);
+                updateAtom(recording, false);
                 resolve(true);
               },
               fail: err => {
-                setRecording(true);
+                updateAtom(recording, true);
                 reject(err);
               }
             });
           }
         });
       },
-      setScreenType,
+      setScreenType: value => {
+        updateAtom(screenType, value);
+      },
       topContent,
       bottomContent,
       absoluteContent,
@@ -127,24 +135,20 @@ export const createUseCtx = _ref => {
           return [...originData, newData];
         }
         if (type === 'top') {
-          setTopContent(createNewData(topContent, config));
+          updateAtom(topContent, prevValue => createNewData(prevValue, config));
         } else if (type === 'bottom') {
-          setBottomContent(createNewData(bottomContent, config));
+          updateAtom(bottomContent, prevValue => createNewData(prevValue, config));
         } else {
-          setAbsoluteContent(createNewData(absoluteContent, config));
+          updateAtom(absoluteContent, prevValue => createNewData(prevValue, config));
         }
       },
       deleteContent: (type, id) => {
-        let newData;
         if (type === 'top') {
-          newData = topContent.filter(item => item.id !== id);
-          setTopContent(newData);
+          updateAtom(topContent, prevValue => prevValue.filter(item => item.id !== id));
         } else if (type === 'bottom') {
-          newData = bottomContent.filter(item => item.id !== id);
-          setBottomContent(newData);
+          updateAtom(bottomContent, prevValue => prevValue.filter(item => item.id !== id));
         } else {
-          newData = absoluteContent.filter(item => item.id !== id);
-          setAbsoluteContent(newData);
+          updateAtom(absoluteContent, prevValue => prevValue.filter(item => item.id !== id));
         }
       },
       IPCPlayerInstance: IPCPlayerInstance.current,

package/lib/ctx/ctx.test.js

@@ -1,12 +1,13 @@
 import { act, renderHook } from '@testing-library/react-hooks';
 import { createUseCtx } from './ctx';
+import { useStore } from './store';
 describe('createCtx', () => {
   it('init props', () => {
     const topContent = {
       id: 'top',
       content: () => null
     };
-    const bottomContent = {
+    const defaultBottomContent = {
       id: 'bottom',
       content: () => null,
       initProps: {
@@ -25,29 +26,66 @@ describe('createCtx', () => {
         initProps: {
           name: 2
         }
-      }]
+      }],
+      authorizeStatus: () => Promise.resolve(true)
     });
     const {
       result
-    } = renderHook(() => useCtx({
-      devId: 'devId',
-      initBottomContent: [bottomContent],
-      initAbsoluteContent: []
-    }));
+    } = renderHook(() => {
+      const {
+        topContent,
+        bottomContent,
+        absoluteContent,
+        IPCPlayerInstance
+      } = useCtx({
+        devId: 'devId',
+        initBottomContent: [defaultBottomContent],
+        initAbsoluteContent: []
+      });
+      const store = useStore({
+        topContent: topContent,
+        bottomContent: bottomContent,
+        absoluteContent: absoluteContent
+      });
+      return {
+        topContent: store.topContent,
+        bottomContent: store.bottomContent,
+        absoluteContent: store.absoluteContent,
+        IPCPlayerInstance
+      };
+    });
     expect(result.current.topContent).toEqual([topContent]);
-    expect(result.current.bottomContent).toEqual([bottomContent]);
+    expect(result.current.bottomContent).toEqual([defaultBottomContent]);
     expect(result.current.absoluteContent).toEqual([]);
     expect(result.current.IPCPlayerInstance).toBe(IPCPlayerContext);
   });
-  it('createCtx, add a content and delete content', () => {
+  it('createCtx, add a content and delete content', async () => {
     const useCtx = createUseCtx({
-      createPlayContext: () => null
+      createPlayContext: () => null,
+      authorizeStatus: () => Promise.resolve(true)
     });
     const {
       result
-    } = renderHook(() => useCtx({
-      devId: 'devId'
-    }));
+    } = renderHook(() => {
+      const {
+        addContent,
+        topContent,
+        bottomContent,
+        deleteContent
+      } = useCtx({
+        devId: 'devId'
+      });
+      const store = useStore({
+        topContent,
+        bottomContent
+      });
+      return {
+        addContent,
+        topContent: store.topContent,
+        bottomContent: store.bottomContent,
+        deleteContent
+      };
+    });
     const topContent = {
       id: 'top',
       content: () => null
@@ -72,13 +110,26 @@ describe('createCtx', () => {
   });
   it('add content list', () => {
     const useCtx = createUseCtx({
-      createPlayContext: () => null
+      createPlayContext: () => null,
+      authorizeStatus: () => Promise.resolve(true)
     });
     const {
       result
-    } = renderHook(() => useCtx({
-      devId: 'devId'
-    }));
+    } = renderHook(() => {
+      const {
+        addContent,
+        topContent
+      } = useCtx({
+        devId: 'devId'
+      });
+      const store = useStore({
+        topContent
+      });
+      return {
+        addContent,
+        topContent: store.topContent
+      };
+    });
     const topContent1 = {
       id: 'top1',
       content: () => null
@@ -92,4 +143,28 @@ describe('createCtx', () => {
     });
     expect(result.current.topContent).toEqual([topContent1, topContent2]);
   });
+
+  // it('Select Update', () => {
+  //   const useCtx = createUseCtx({
+  //     createPlayContext: () => null,
+  //     authorizeStatus: () => Promise.resolve(true),
+  //   });
+  //   const { result } = renderHook(() =>
+  //     useCtx({
+  //       devId: 'devId',
+  //     })
+  //   );
+  //   const { result: re1 } = renderHook(() => {
+  //     const store = useStore({
+  //       topContent: result.current.topContent,
+  //     });
+  //     return store;
+  //   });
+  //   const { result: re2 } = renderHook(() => {
+  //     const store = useStore({
+  //       bottomContent: result.current.bottomContent,
+  //     });
+  //     return store;
+  //   });
+  // });
 });

package/lib/ctx/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ctx';
 export * from './ctx.composition';
+export * from './store';

package/lib/ctx/index.js

@@ -1,2 +1,3 @@
 export * from './ctx';
-export * from './ctx.composition';
+export * from './ctx.composition';
+export * from './store';

package/lib/ctx/ports.output.d.ts

@@ -1 +1,2 @@
 export type createPlayContext = (devId: string) => IpcContext;
+export type AuthorizeStatus = (type: string) => Promise<boolean>;

package/lib/ctx/store.d.ts

@@ -0,0 +1,11 @@
+import { RetAtom } from '../interface';
+export declare const topContent: import("jotai").PrimitiveAtom<never[]> & {
+    init: never[];
+};
+export declare const useAtom: <T extends unknown>(defaultValue: T) => RetAtom<T>;
+type ExtractReturnType<T> = {
+    [K in keyof T]: T[K] extends RetAtom<infer R> ? R : never;
+};
+export declare const useStore: <V, T extends Record<string, RetAtom<V>>>(options: T) => ExtractReturnType<T>;
+export declare const updateAtom: <T>(atom: RetAtom<T>, value: T | ((prevValue: T) => T)) => void;
+export {};

package/lib/ctx/store.js

@@ -0,0 +1,37 @@
+import { useRef } from 'react';
+import { atom, useAtomValue, getDefaultStore } from 'jotai';
+export const topContent = atom([]);
+export const useAtom = defaultValue => {
+  const ref = useRef();
+  if (!ref.current) {
+    // @ts-ignore
+    ref.current = atom(defaultValue);
+  }
+  return ref.current;
+};
+export const useStore = options => {
+  const combinedAtomRef = useRef();
+  if (!combinedAtomRef.current) {
+    // @ts-ignore
+    combinedAtomRef.current = atom(get => {
+      const ret = {};
+      Object.keys(options).forEach(key => {
+        ret[key] = get(options[key]);
+      });
+      return ret;
+    });
+  }
+  const state = useAtomValue(combinedAtomRef.current);
+  return state;
+};
+export const updateAtom = (atom, value) => {
+  const store = getDefaultStore();
+  const oldValue = store.get(atom);
+  if (typeof value === 'function') {
+    // @ts-ignore
+    const newValue = value(oldValue);
+    store.set(atom, newValue);
+  } else {
+    store.set(atom, value);
+  }
+};

package/lib/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ui';
 export * from './ctx';
 export * from './plugins';
+export * from './interface';

package/lib/index.js

@@ -1,3 +1,4 @@
 export * from './ui';
 export * from './ctx';
-export * from './plugins';
+export * from './plugins';
+export * from './interface';

package/lib/interface.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-export type ComponentConfig<T = Record<string, unknown>> = {
-    id: string;
-    content: (props: T) => React.ReactElement;
-    initProps?: T;
+import { PrimitiveAtom } from 'jotai';
+type WithInitialValue<Value> = {
+    init: Value;
 };
+export type RetAtom<T> = PrimitiveAtom<T> & WithInitialValue<T>;
 export type ScreenType = 'full' | 'vertical';
 export declare const enum PlayerStreamStatus {
     UnknownException = -1000,
@@ -31,15 +31,15 @@ export type UseCtx = (options: {
 }) => {
     devId: string;
     saveToAlbum: 0 | 1;
-    screenType: ScreenType;
-    recording: boolean;
-    mute: boolean;
-    intercom: boolean;
-    playState: PlayState;
+    screenType: RetAtom<ScreenType>;
+    recording: RetAtom<boolean>;
+    mute: RetAtom<boolean>;
+    intercom: RetAtom<boolean>;
+    playState: RetAtom<PlayState>;
     IPCPlayerInstance: IpcContext;
-    topContent: ComponentConfig[];
-    bottomContent: ComponentConfig[];
-    absoluteContent: ComponentConfig[];
+    topContent: RetAtom<ComponentConfig[]>;
+    bottomContent: RetAtom<ComponentConfig[]>;
+    absoluteContent: RetAtom<ComponentConfig[]>;
     setScreenType: (type: ScreenType) => void;
     setRecording: (value: boolean) => Promise<boolean>;
     setIntercom: (value: boolean) => Promise<boolean>;
@@ -50,6 +50,11 @@ export type UseCtx = (options: {
     addContent: <T>(type: 'top' | 'bottom' | 'absolute', config: ComponentConfig<T> | ComponentConfig<T>[]) => void;
     deleteContent: (type: 'top' | 'bottom' | 'absolute', id: string) => void;
 };
+export type ComponentConfig<T = ReturnType<UseCtx> & Record<string, any>> = {
+    id: string;
+    content: (props: T) => React.ReactElement;
+    initProps?: T;
+};
 export type ComponentConfigProps = {
     IPCPlayerContext: IpcContext;
 } & ReturnType<UseCtx>;
@@ -57,3 +62,4 @@ export type PlayStatusData = {
     playState: PlayState;
     playCode: number;
 };
+export {};

package/lib/plugins/battery/battery.composition.d.ts

@@ -4,23 +4,23 @@ export declare const Battery: import("react").FunctionComponent<{
 } & {
     devId: string;
     saveToAlbum: 0 | 1;
-    screenType: import("../../interface").ScreenType;
-    recording: boolean;
-    mute: boolean;
-    intercom: boolean;
-    playState: import("../../interface").PlayState;
+    screenType: import("../..").RetAtom<import("../..").ScreenType>;
+    recording: import("../..").RetAtom<boolean>;
+    mute: import("../..").RetAtom<boolean>;
+    intercom: import("../..").RetAtom<boolean>;
+    playState: import("../..").RetAtom<import("../..").PlayState>;
     IPCPlayerInstance: IpcContext;
-    topContent: import("../../interface").ComponentConfig<Record<string, unknown>>[];
-    bottomContent: import("../../interface").ComponentConfig<Record<string, unknown>>[];
-    absoluteContent: import("../../interface").ComponentConfig<Record<string, unknown>>[];
-    setScreenType: (type: import("../../interface").ScreenType) => void;
+    topContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    bottomContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    absoluteContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    setScreenType: (type: import("../..").ScreenType) => void;
     setRecording: (value: boolean) => Promise<boolean>;
     setIntercom: (value: boolean) => Promise<boolean>;
     setMute: (value: boolean) => Promise<boolean>;
-    changeStreamStatus: (value: import("../../interface").PlayerStreamStatus) => void;
-    getStreamStatus: () => import("../../interface").PlayerStreamStatus;
-    setPlayState: (value: import("../../interface").PlayState) => void;
-    addContent: <T>(type: "absolute" | "top" | "bottom", config: import("../../interface").ComponentConfig<T> | import("../../interface").ComponentConfig<T>[]) => void;
+    changeStreamStatus: (value: import("../..").PlayerStreamStatus) => void;
+    getStreamStatus: () => import("../..").PlayerStreamStatus;
+    setPlayState: (value: import("../..").PlayState) => void;
+    addContent: <T>(type: "absolute" | "top" | "bottom", config: import("../..").ComponentConfig<T> | import("../..").ComponentConfig<T>[]) => void;
     deleteContent: (type: "absolute" | "top" | "bottom", id: string) => void;
 } & {
     className?: string | undefined;

package/lib/plugins/battery/battery.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text } from '@ray-js/ray';
 import clsx from 'clsx';
+import { useStore } from '../../ctx/store';
 import './battery.less';
 export const createBattery = _ref => {
   let {
@@ -12,14 +13,17 @@ export const createBattery = _ref => {
       devId,
       screenType
     } = props;
+    const store = useStore({
+      screenType
+    });
     const {
       batteryValue,
       batteryCharging
     } = useBattery(devId);
     return /*#__PURE__*/React.createElement(View, {
       className: clsx('ipc-player-plugin-battery', {
-        'ipc-player-plugin-battery-relative': screenType === 'full',
-        'ipc-player-plugin-battery-absolute': screenType === 'vertical'
+        'ipc-player-plugin-battery-relative': store.screenType === 'full',
+        'ipc-player-plugin-battery-absolute': store.screenType === 'vertical'
       }, className)
     }, /*#__PURE__*/React.createElement(View, {
       className: "ipc-player-plugin-battery-border"

package/lib/plugins/fullScreen/fullScreen.js

@@ -1,6 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import { View, setPageOrientation, CoverView } from '@ray-js/ray';
+import { useStore } from '../../ctx/store';
 import { VerticalScreen } from './verticalScreen';
 import { VoiceIntercom } from '../voiceIntercom';
 import './fullScreen.less';
@@ -8,12 +9,16 @@ const VerticalScreenId = 'VerticalScreen';
 const VoiceIntercomId = 'VoiceIntercom';
 export function FullScreen(props) {
   const {
-    screenType,
+    screenType: screenTypeAtom,
     setScreenType,
-    devId,
     addContent,
     deleteContent
   } = props;
+  const {
+    screenType
+  } = useStore({
+    screenType: screenTypeAtom
+  });
   const handFull = () => {
     ty.hideMenuButton();
     ty.hideStatusBar();

package/lib/plugins/fullScreen/verticalScreen.js

@@ -10,6 +10,6 @@ export function VerticalScreen(_ref) {
     className: "ipc-player-plugin-vertical-screen",
     onClick: onClick
   }, /*#__PURE__*/React.createElement(View, {
-    className: "icon-panel icon-panel-fanhui ipc-player-plugin-vertical-screen-icon"
+    className: "icon-panel icon-panel-fanhui-copy ipc-player-plugin-vertical-screen-icon"
   }));
 }

package/lib/plugins/muted/muted.js

@@ -1,11 +1,20 @@
 import { View, Text } from '@ray-js/ray';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
+import { useStore, updateAtom } from '../../ctx/store';
 import './muted.less';
 export const Muted = props => {
   const {
-    IPCPlayerContext
+    IPCPlayerContext,
+    mute
   } = props;
-  const [isMuted, setIsMuted] = useState(true);
+  const {
+    isMuted
+  } = useStore({
+    isMuted: mute
+  });
+  const setIsMuted = value => {
+    updateAtom(mute, value);
+  };
   useEffect(() => {
     init();
   }, []);

package/lib/plugins/recordVideo/recordVideo.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { View } from '@ray-js/ray';
+import { useStore } from '../../ctx/store';
 import './recordVideo.less';
 const RECORD_VIDEO_TOAST_ID = 'record_video_toast_id';
 function formatTimeDiff(diff) {
@@ -62,15 +63,18 @@ function TimeRecord() {
 }
 export function RecordVideo(props) {
   const {
-    IPCPlayerContext,
     addContent,
     deleteContent
   } = props;
-  // const [recording, setRecording] = useState(false);
   const {
-    recording,
+    recording: recordingAtom,
     setRecording
   } = props;
+  const {
+    recording
+  } = useStore({
+    recording: recordingAtom
+  });
   const handRecordVideo = async target => {
     await setRecording(target);
     if (target) {

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

@@ -5,5 +5,5 @@ 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 declare function VoiceIntercom({ style, className, recording: recordingAtom, intercom: intercomAtom, setIntercom, mute: muteAtom, setMute, getStreamStatus, }: Props): React.JSX.Element;
 export {};

package/lib/plugins/voiceIntercom/voiceIntercom.js

@@ -2,19 +2,29 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useRef } from 'react';
 import { View } from '@ray-js/ray';
 import clsx from 'clsx';
+import { useStore } from '../../ctx/store';
 import './voiceIntercom.less';
 import { PlayerStreamStatus } from '../../interface';
 export function VoiceIntercom(_ref) {
   let {
     style,
     className,
-    recording,
-    intercom,
+    recording: recordingAtom,
+    intercom: intercomAtom,
     setIntercom,
-    mute,
+    mute: muteAtom,
     setMute,
     getStreamStatus
   } = _ref;
+  const {
+    recording,
+    mute,
+    intercom
+  } = useStore({
+    recording: recordingAtom,
+    mute: muteAtom,
+    intercom: intercomAtom
+  });
   const longClickStartedRef = useRef(false);
   // 对讲开始之前的静音状态
   const originMuteStatusBeforeVoice = useRef(mute);

package/lib/ui/ui.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { PlayStatusData } from '../interface';
-import { useCtx } from '../ctx/ctx.composition';
+import { PlayStatusData, UseCtx } from '../interface';
 import './ui.less';
-type CtxInstance = ReturnType<typeof useCtx>;
+type CtxInstance = ReturnType<UseCtx>;
 type CSSVariable = {
     '--iconColor': string;
     '--iconFontSize': string;

package/lib/ui/ui.js

@@ -5,6 +5,7 @@ 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 './ui.less';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
@@ -31,25 +32,35 @@ export const IPCPlayerIntegration = props => {
   } = props;
   const instance = getCtxInstance(props.instance, devId);
   const {
-    topContent,
-    absoluteContent,
-    bottomContent,
-    playState,
     setPlayState
   } = instance;
   const systemInfo = useRef(null);
   if (!systemInfo.current) {
     systemInfo.current = getSystemInfoSync();
   }
+  const {
+    topContent,
+    bottomContent,
+    absoluteContent,
+    screenType,
+    playState
+  } = useStore({
+    topContent: instance.topContent,
+    bottomContent: instance.bottomContent,
+    absoluteContent: instance.absoluteContent,
+    screenType: instance.screenType,
+    playState: instance.playState
+  });
 
   /**
    * 视频流加载状态封装
    */
 
+  const playerReady = playState === PlayState.PLAYING;
   return /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-content', className),
     style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultCSSVariable), CSSVariable), style), {}, {
-      height: instance.screenType === 'full' ? `${systemInfo.current.screenWidth}px` : style === null || style === void 0 ? void 0 : style.height
+      height: screenType === 'full' ? `${systemInfo.current.screenWidth}px` : style === null || style === void 0 ? void 0 : style.height
     })
   }, /*#__PURE__*/React.createElement(View, {
     style: {
@@ -88,9 +99,9 @@ export const IPCPlayerIntegration = props => {
     privateState: false
   })), /*#__PURE__*/React.createElement(CoverView, {
     style: {
-      height: instance.screenType === 'vertical' ? '48px' : '69px'
+      height: screenType === 'vertical' ? '48px' : '69px'
     },
-    className: clsx('ipc-player-top-content', playState === PlayState.PLAYING ? 'ipc-player-element-visible' : 'ipc-player-element-hidden')
+    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({
@@ -100,9 +111,9 @@ export const IPCPlayerIntegration = props => {
     })));
   })()), /*#__PURE__*/React.createElement(CoverView, {
     style: {
-      height: instance.screenType === 'vertical' ? '48px' : '69px'
+      height: screenType === 'vertical' ? '48px' : '69px'
     },
-    className: clsx('ipc-player-bottom-content', playState === PlayState.PLAYING ? 'ipc-player-element-visible' : 'ipc-player-element-hidden')
+    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), {}, {
@@ -110,7 +121,7 @@ export const IPCPlayerIntegration = props => {
     }, instance), {}, {
       IPCPlayerContext: instance.IPCPlayerInstance
     })));
-  })()), playState === PlayState.PLAYING && (() => {
+  })()), 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-1",
+  "version": "0.0.1-beta-3",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -49,6 +49,7 @@
     "core-js": "^3.19.1",
     "eslint-config-tuya-panel": "^0.4.2",
     "husky": "^1.2.0",
+    "jotai": "^2.10.1",
     "lint-staged": "^10.2.11",
     "standard-version": "9.3.2"
   },