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

package/lib/ctx/ctx.composition.js

@@ -4,23 +4,29 @@ const _excluded = ["title", "duration"];
 import IPCUtils from '@ray-js/ray-ipc-utils';
 import { IntercomMode, MuteMode, ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import { createUseCtx } from './ctx';
-import { Battery, Screenshot, TempHumidity, RecordVideo, FullScreen, VideoBitKbps, Muted, Resolution, Ptz } from '../plugins';
+import { SmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, RecordVideo, FullScreen, VideoBitKBP, Muted, Resolution, Ptz } from '../plugins';
 import { authorizeStatus } from '../utils/authorize';
 const createPlayContext = ty.createIpcPlayerContext;
 // const createPlayContext = () => null;
 
-const topContent = [{
+const topLeftContent = [{
   id: 'Battery',
   content: Battery
+}];
+const topRightContent = [{
+  id: 'BatteryFull',
+  content: BatteryFull
 }, {
   id: 'TempHumidity',
   content: TempHumidity
 }, {
-  id: 'VideoBitKbps',
-  content: VideoBitKbps
+  id: 'VideoBitKBP',
+  content: VideoBitKBP
 }];
-const absoluteContent = [];
-const bottomContent = [{
+const bottomLeftContent = [{
+  id: 'SmallIntercom',
+  content: SmallIntercom
+}, {
   id: 'Screenshot',
   content: Screenshot
 }, {
@@ -35,10 +41,12 @@ const bottomContent = [{
 }, {
   id: 'Resolution',
   content: Resolution
-}, {
+}];
+const bottomRightContent = [{
   id: 'FullScreen',
   content: FullScreen
 }];
+const absoluteContent = [];
 const toast = _ref => {
   let {
       title,
@@ -94,9 +102,11 @@ const setMuteMemoryState = (devId, value) => {
 };
 export const useCtx = createUseCtx({
   createPlayContext,
-  defaultTopContent: topContent,
+  defaultTopLeftContent: topLeftContent,
+  defaultTopRightContent: topRightContent,
+  defaultBottomLeftContent: bottomLeftContent,
+  defaultBottomRightContent: bottomRightContent,
   defaultAbsoluteContent: absoluteContent,
-  defaultBottomContent: bottomContent,
   authorizeStatus: authorizeStatus,
   toast,
   getMemoryState,

package/lib/ctx/ctx.d.ts

@@ -2,13 +2,15 @@ import { ComponentConfig, UseCtx } from '../interface';
 import type { createPlayContext, AuthorizeStatus, Toast, GetMemoryState, SetMuteMemoryState } from './ports.output';
 type Depend = {
     createPlayContext: createPlayContext;
-    defaultTopContent?: ComponentConfig[];
-    defaultBottomContent?: ComponentConfig[];
+    defaultTopLeftContent?: ComponentConfig[];
+    defaultTopRightContent?: ComponentConfig[];
+    defaultBottomLeftContent?: ComponentConfig[];
+    defaultBottomRightContent?: ComponentConfig[];
     defaultAbsoluteContent?: ComponentConfig[];
     authorizeStatus: AuthorizeStatus;
     toast: Toast;
     getMemoryState: GetMemoryState;
     setMuteMemoryState: SetMuteMemoryState;
 };
-export declare const createUseCtx: ({ createPlayContext, defaultTopContent, defaultBottomContent, defaultAbsoluteContent, authorizeStatus, toast, getMemoryState, setMuteMemoryState, }: Depend) => UseCtx;
+export declare const createUseCtx: ({ createPlayContext, defaultTopLeftContent, defaultTopRightContent, defaultBottomLeftContent, defaultBottomRightContent, defaultAbsoluteContent, authorizeStatus, toast, getMemoryState, setMuteMemoryState, }: Depend) => UseCtx;
 export {};

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';
@@ -6,8 +7,10 @@ const SAVE_TO_ALBUM = 1;
 export const createUseCtx = _ref => {
   let {
     createPlayContext,
-    defaultTopContent,
-    defaultBottomContent,
+    defaultTopLeftContent,
+    defaultTopRightContent,
+    defaultBottomLeftContent,
+    defaultBottomRightContent,
     defaultAbsoluteContent,
     authorizeStatus,
     toast,
@@ -17,8 +20,10 @@ export const createUseCtx = _ref => {
   return _ref2 => {
     let {
       devId,
-      initTopContent,
-      initBottomContent,
+      initTopLeftContent,
+      initTopRightContent,
+      initBottomLeftContent,
+      initBottomRightContent,
       initAbsoluteContent,
       saveToAlbum = SAVE_TO_ALBUM
     } = _ref2;
@@ -29,11 +34,14 @@ export const createUseCtx = _ref => {
     // 录像中
     const [recording] = useAtom(false);
 
+    // 录像是否不可点击
+    const [recordingDisabled, setRecordingDisabled] = useAtom(false);
+
     // 静音 true 代表静音 false 代表不静音
     const [mute] = useAtom(true);
 
     // 品牌色 默认
-    const [brandColor, setBrandColor] = useAtom('#FF592A');
+    const [brandColor, setBrandColor] = useAtom('#4b9ae9');
 
     // ptz 是否点击
     const [ptzActive, setPtzActive] = useAtom(false);
@@ -55,8 +63,10 @@ export const createUseCtx = _ref => {
     const setPlayState = useCallback(value => {
       updateAtom(playState, value);
     }, [playState]);
-    const [topContent] = useAtom(initTopContent || defaultTopContent || []);
-    const [bottomContent] = useAtom(initBottomContent || defaultBottomContent || []);
+    const [topLeftContent] = useAtom(initTopLeftContent || defaultTopLeftContent || []);
+    const [topRightContent] = useAtom(initTopRightContent || defaultTopRightContent || []);
+    const [bottomLeftContent] = useAtom(initBottomLeftContent || defaultBottomLeftContent || []);
+    const [bottomRightContent] = useAtom(initBottomRightContent || defaultBottomRightContent || []);
     const [absoluteContent] = useAtom(initAbsoluteContent || defaultAbsoluteContent || []);
     const {
       _playState
@@ -135,6 +145,7 @@ export const createUseCtx = _ref => {
       saveToAlbum,
       screenType,
       recording,
+      recordingDisabled,
       mute,
       resolution,
       resolutionList,
@@ -190,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) => {
@@ -208,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
                 });
@@ -225,30 +238,46 @@ export const createUseCtx = _ref => {
           }
         });
       },
+      setRecordingDisabled,
       setPtzActive,
       setFullResolutionActive,
       setScreenType,
-      topContent,
-      bottomContent,
+      topLeftContent,
+      topRightContent,
+      bottomLeftContent,
+      bottomRightContent,
       absoluteContent,
-      addContent: (type, config) => {
-        function createNewData(originData, newData) {
-          if (newData instanceof Array) return [...originData, ...newData];
-          return [...originData, newData];
-        }
-        if (type === 'top') {
-          updateAtom(topContent, prevValue => createNewData(prevValue, config));
-        } else if (type === 'bottom') {
-          updateAtom(bottomContent, prevValue => createNewData(prevValue, config));
+      addContent: function (type, config) {
+        let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+        // 组合数据, 保存到对应位置, 并去重
+        const createNewData = (originData, newData, position) => {
+          // 如果newData是数组, 则插入整个数组
+          if (Array.isArray(newData)) {
+            return [...originData.slice(0, position), ...newData, ...originData.slice(position)];
+          }
+          return [...originData.slice(0, position), newData, ...originData.slice(position)];
+        };
+        if (type === 'topLeft') {
+          updateAtom(topLeftContent, prevValue => createNewData(prevValue, config, position));
+        } else if (type === 'topRight') {
+          updateAtom(topRightContent, prevValue => createNewData(prevValue, config, position));
+        } else if (type === 'bottomLeft') {
+          updateAtom(bottomLeftContent, prevValue => createNewData(prevValue, config, position));
+        } else if (type === 'bottomRight') {
+          updateAtom(bottomRightContent, prevValue => createNewData(prevValue, config, position));
         } else {
-          updateAtom(absoluteContent, prevValue => createNewData(prevValue, config));
+          updateAtom(absoluteContent, prevValue => createNewData(prevValue, config, position));
         }
       },
       deleteContent: (type, id) => {
-        if (type === 'top') {
-          updateAtom(topContent, prevValue => prevValue.filter(item => item.id !== id));
-        } else if (type === 'bottom') {
-          updateAtom(bottomContent, prevValue => prevValue.filter(item => item.id !== id));
+        if (type === 'topLeft') {
+          updateAtom(topLeftContent, prevValue => prevValue.filter(item => item.id !== id));
+        } else if (type === 'topRight') {
+          updateAtom(topRightContent, prevValue => prevValue.filter(item => item.id !== id));
+        } else if (type === 'bottomLeft') {
+          updateAtom(bottomLeftContent, prevValue => prevValue.filter(item => item.id !== id));
+        } else if (type === 'bottomRight') {
+          updateAtom(bottomLeftContent, prevValue => prevValue.filter(item => item.id !== id));
         } else {
           updateAtom(absoluteContent, prevValue => prevValue.filter(item => item.id !== id));
         }

package/lib/ctx/store.d.ts

@@ -1,6 +1,6 @@
 import { RetAtom } from '../interface';
 export { getDefaultStore } from 'jotai';
-export declare const topContent: import("jotai").PrimitiveAtom<never[]> & {
+export declare const topLeftContent: import("jotai").PrimitiveAtom<never[]> & {
     init: never[];
 };
 type Action<T> = T | ((prevValue: T) => T);

package/lib/ctx/store.js

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { atom, useAtomValue, getDefaultStore } from 'jotai';
 export { getDefaultStore } from 'jotai';
-export const topContent = atom([]);
+export const topLeftContent = atom([]);
 export const useAtom = defaultValue => {
   const ref = useRef();
   if (!ref.current) {

package/lib/i18n/index.d.ts

@@ -4,19 +4,47 @@ declare const Strings: kit.I18N<{
         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_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_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_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_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

@@ -3,11 +3,25 @@ declare const _default: {
         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_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_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

@@ -2,11 +2,25 @@ export default {
   en: {
     ipc_player_resolution_HD: 'HD',
     ipc_player_resolution_SD: 'SD',
-    ipc_player_current_resolution_is_equal: 'Already at current clarity'
+    ipc_player_current_resolution_is_equal: 'Already at current clarity',
+    ipc_player_screenshot_success_tip: 'Screenshot saved to album',
+    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_current_resolution_is_equal: '已是当前清晰度',
+    ipc_player_screenshot_success_tip: '截图已保存在APP相册',
+    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

@@ -26,13 +26,15 @@ export declare const enum PlayState {
 }
 export type UseCtx = (options: {
     devId: string;
-    initTopContent?: ComponentConfig[];
-    initBottomContent?: ComponentConfig[];
+    initTopLeftContent?: ComponentConfig[];
+    initTopRightContent?: ComponentConfig[];
+    initBottomLeftContent?: ComponentConfig[];
+    initBottomRightContent?: ComponentConfig[];
     initAbsoluteContent?: ComponentConfig[];
     saveToAlbum?: 0 | 1;
 }) => {
     devId: string;
-    brandColor: string;
+    brandColor: RetAtom<string>;
     saveToAlbum: 0 | 1;
     screenType: RetAtom<ScreenType>;
     recording: RetAtom<boolean>;
@@ -45,8 +47,10 @@ export type UseCtx = (options: {
     fullResolutionActive: RetAtom<boolean>;
     playState: RetAtom<PlayState>;
     IPCPlayerInstance: IpcContext;
-    topContent: RetAtom<ComponentConfig[]>;
-    bottomContent: RetAtom<ComponentConfig[]>;
+    topLeftContent: RetAtom<ComponentConfig[]>;
+    topRightContent: RetAtom<ComponentConfig[]>;
+    bottomLeftContent: RetAtom<ComponentConfig[]>;
+    bottomRightContent: RetAtom<ComponentConfig[]>;
     absoluteContent: RetAtom<ComponentConfig[]>;
     setBrandColor: (color: string) => void;
     setScreenType: (type: ScreenType) => void;
@@ -60,16 +64,17 @@ export type UseCtx = (options: {
     changeStreamStatus: (value: PlayerStreamStatus) => void;
     getStreamStatus: () => PlayerStreamStatus;
     setPlayState: (value: PlayState) => void;
-    addContent: <T>(type: 'top' | 'bottom' | 'absolute', config: ComponentConfig<T> | ComponentConfig<T>[]) => void;
-    deleteContent: (type: 'top' | 'bottom' | 'absolute', id: string) => void;
+    addContent: <T>(type: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'absolute', config: ComponentConfig<T> | ComponentConfig<T>[]) => void;
+    deleteContent: (type: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'absolute', id: string) => void;
     toast: Toast;
 };
 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;
@@ -78,3 +83,8 @@ export type PlayStatusData = {
     playState: PlayState;
     playCode: number;
 };
+export type RecordInfoData = boolean | {
+    tempImagePath: string;
+    filePath: string;
+    thumbPath: string;
+};

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

@@ -3,7 +3,7 @@ export declare const Battery: import("react").FunctionComponent<{
     IPCPlayerContext: IpcContext;
 } & {
     devId: string;
-    brandColor: string;
+    brandColor: import("../..").RetAtom<string>;
     saveToAlbum: 0 | 1;
     screenType: import("../..").RetAtom<import("../..").ScreenType>;
     recording: import("../..").RetAtom<boolean>;
@@ -16,8 +16,10 @@ export declare const Battery: import("react").FunctionComponent<{
     fullResolutionActive: import("../..").RetAtom<boolean>;
     playState: import("../..").RetAtom<import("../..").PlayState>;
     IPCPlayerInstance: IpcContext;
-    topContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
-    bottomContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    topLeftContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    topRightContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    bottomLeftContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    bottomRightContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
     absoluteContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
     setBrandColor: (color: string) => void;
     setScreenType: (type: import("../..").ScreenType) => void;
@@ -31,8 +33,48 @@ export declare const Battery: import("react").FunctionComponent<{
     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;
+    addContent: <T>(type: "absolute" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight", config: import("../..").ComponentConfig<T> | import("../..").ComponentConfig<T>[]) => void;
+    deleteContent: (type: "absolute" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight", id: string) => void;
+    toast: import("../../ports.output").Toast;
+} & {
+    className?: string | undefined;
+}>;
+export declare const BatteryFull: import("react").FunctionComponent<{
+    IPCPlayerContext: IpcContext;
+} & {
+    devId: string;
+    brandColor: import("../..").RetAtom<string>;
+    saveToAlbum: 0 | 1;
+    screenType: import("../..").RetAtom<import("../..").ScreenType>;
+    recording: import("../..").RetAtom<boolean>;
+    mute: import("../..").RetAtom<boolean>;
+    intercom: import("../..").RetAtom<boolean>;
+    intercomMode: import("../..").RetAtom<import("@ray-js/ray-ipc-utils/lib/interface").IntercomMode>;
+    ptzActive: import("../..").RetAtom<boolean>;
+    resolution: import("../..").RetAtom<string>;
+    resolutionList: import("../..").RetAtom<string[]>;
+    fullResolutionActive: import("../..").RetAtom<boolean>;
+    playState: import("../..").RetAtom<import("../..").PlayState>;
+    IPCPlayerInstance: IpcContext;
+    topLeftContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    topRightContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    bottomLeftContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    bottomRightContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    absoluteContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
+    setBrandColor: (color: string) => void;
+    setScreenType: (type: import("../..").ScreenType) => void;
+    setPtzActive: (type: boolean) => void;
+    setResolution: (type: string) => void;
+    setResolutionList: (type: string[]) => void;
+    setFullResolutionActive: (type: boolean) => void;
+    setRecording: (value: boolean) => Promise<boolean>;
+    setIntercom: (value: boolean) => Promise<boolean>;
+    setMute: (value: boolean) => Promise<boolean>;
+    changeStreamStatus: (value: import("../..").PlayerStreamStatus) => void;
+    getStreamStatus: () => import("../..").PlayerStreamStatus;
+    setPlayState: (value: import("../..").PlayState) => void;
+    addContent: <T>(type: "absolute" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight", config: import("../..").ComponentConfig<T> | import("../..").ComponentConfig<T>[]) => void;
+    deleteContent: (type: "absolute" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight", id: string) => void;
     toast: import("../../ports.output").Toast;
 } & {
     className?: string | undefined;

package/lib/plugins/battery/battery.composition.js

@@ -1,5 +1,9 @@
 import { createBattery } from './battery';
+import { createBatteryFull } from './batteryFull';
 import { useBattery } from '../../hooks';
 export const Battery = createBattery({
   useBattery // todo
+});
+export const BatteryFull = createBatteryFull({
+  useBattery // todo
 });

package/lib/plugins/battery/battery.js

@@ -10,24 +10,24 @@ export const createBattery = _ref => {
   return props => {
     const {
       className,
-      devId,
-      screenType
+      devId
     } = props;
-    const store = useStore({
+    const {
       screenType
+    } = useStore({
+      screenType: props.screenType
     });
     const {
       batteryValue,
       batteryCharging
     } = useBattery(devId);
-    if (batteryValue === undefined) {
+    if (batteryValue === undefined || screenType === 'full') {
       return null;
     }
     return /*#__PURE__*/React.createElement(View, {
-      className: clsx('ipc-player-plugin-battery', {
-        'ipc-player-plugin-battery-relative': store.screenType === 'full',
-        'ipc-player-plugin-battery-absolute': store.screenType === 'vertical'
-      }, className)
+      className: clsx(className)
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "ipc-player-plugin-battery"
     }, /*#__PURE__*/React.createElement(View, {
       className: "ipc-player-plugin-battery-border"
     }, /*#__PURE__*/React.createElement(View, {
@@ -41,6 +41,6 @@ export const createBattery = _ref => {
       className: "ipc-player-plugin-battery-value-value"
     }))), /*#__PURE__*/React.createElement(Text, {
       className: "ipc-player-plugin-battery-text"
-    }, batteryValue, "%"));
+    }, batteryValue, "%")));
   };
 };

package/lib/plugins/battery/battery.less

@@ -4,20 +4,10 @@
   height: calc(24px * var(--ipc-player-size-scale, 1));
   padding: 0 calc(9px * var(--ipc-player-size-scale, 1));
   border-radius: calc(24px * var(--ipc-player-size-scale, 1));
-  background-color: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  &.ipc-player-plugin-battery-absolute {
-    position: absolute;
-    top: 50%;
-    left: calc(16px * var(--ipc-player-size-scale, 1));
-    transform: translateY(-50%);
-  }
-  &.ipc-player-plugin-battery-relative {
-    position: relative;
-    top: 0;
-    left: 0;
-    transform: translateY(0);
-  }
+  background-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  // backdrop-filter: blur(10px);
+  
   .ipc-player-plugin-battery-border {
     position: relative;
     width: calc(16px * var(--ipc-player-size-scale, 1));

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { UseBattery } from '../../ports.output';
+import { ComponentConfigProps } from '../../interface';
+import './battery.less';
+type Depend = {
+    useBattery: UseBattery;
+};
+type Props = ComponentConfigProps & {
+    className?: string;
+};
+type CreateBattery = (deps: Depend) => React.FunctionComponent<Props>;
+export declare const createBatteryFull: CreateBattery;
+export {};

package/lib/plugins/battery/batteryFull.js

@@ -0,0 +1,46 @@
+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 createBatteryFull = _ref => {
+  let {
+    useBattery
+  } = _ref;
+  return props => {
+    const {
+      className,
+      devId
+    } = props;
+    const {
+      screenType
+    } = useStore({
+      screenType: props.screenType
+    });
+    const {
+      batteryValue,
+      batteryCharging
+    } = useBattery(devId);
+    if (batteryValue === undefined || screenType === 'vertical') {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      className: clsx(className)
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "ipc-player-plugin-battery"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "ipc-player-plugin-battery-border"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "ipc-player-plugin-battery-border-1"
+    }), /*#__PURE__*/React.createElement(View, {
+      className: "ipc-player-plugin-battery-value-wrap"
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        width: `${batteryValue}%`
+      },
+      className: "ipc-player-plugin-battery-value-value"
+    }))), /*#__PURE__*/React.createElement(Text, {
+      className: "ipc-player-plugin-battery-text"
+    }, batteryValue, "%")));
+  };
+};