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

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

@@ -6,8 +6,10 @@ const SAVE_TO_ALBUM = 1;
 export const createUseCtx = _ref => {
   let {
     createPlayContext,
-    defaultTopContent,
-    defaultBottomContent,
+    defaultTopLeftContent,
+    defaultTopRightContent,
+    defaultBottomLeftContent,
+    defaultBottomRightContent,
     defaultAbsoluteContent,
     authorizeStatus,
     toast,
@@ -17,8 +19,10 @@ export const createUseCtx = _ref => {
   return _ref2 => {
     let {
       devId,
-      initTopContent,
-      initBottomContent,
+      initTopLeftContent,
+      initTopRightContent,
+      initBottomLeftContent,
+      initBottomRightContent,
       initAbsoluteContent,
       saveToAlbum = SAVE_TO_ALBUM
     } = _ref2;
@@ -55,8 +59,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
@@ -228,27 +234,42 @@ export const createUseCtx = _ref => {
       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,31 @@ 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_recording_success_tip: string;
+        ipc_player_shot_or_record_check: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
+        ipc_player_screenshot_success_tip: string;
+        ipc_player_recording_success_tip: string;
+        ipc_player_shot_or_record_check: string;
     };
 }, {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
     ipc_player_current_resolution_is_equal: string;
+    ipc_player_screenshot_success_tip: string;
+    ipc_player_recording_success_tip: string;
+    ipc_player_shot_or_record_check: string;
 } | {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
     ipc_player_current_resolution_is_equal: string;
+    ipc_player_screenshot_success_tip: string;
+    ipc_player_recording_success_tip: string;
+    ipc_player_shot_or_record_check: string;
 }>;
 export default Strings;

package/lib/i18n/strings.d.ts

@@ -3,11 +3,17 @@ 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_recording_success_tip: string;
+        ipc_player_shot_or_record_check: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
+        ipc_player_screenshot_success_tip: string;
+        ipc_player_recording_success_tip: string;
+        ipc_player_shot_or_record_check: string;
     };
 };
 export default _default;

package/lib/i18n/strings.js

@@ -2,11 +2,17 @@ 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_recording_success_tip: 'Recording saved to album',
+    ipc_player_shot_or_record_check: 'View'
   },
   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_recording_success_tip: '录像已保存在APP相册',
+    ipc_player_shot_or_record_check: '查看'
   }
 };

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,8 +64,8 @@ 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>> = {

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, "%")));
+  };
+};

package/lib/plugins/fullScreen/fullScreen.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useContext } from 'react';
-import { View, setPageOrientation } from '@ray-js/ray';
+import { View, setPageOrientation, Text } from '@ray-js/ray';
 import { useUpdateEffect } from 'ahooks';
 import clsx from 'clsx';
 import { UIEventContext } from '../../ui/context';
@@ -16,7 +16,8 @@ export function FullScreen(props) {
     addContent,
     deleteContent,
     setPtzActive,
-    setFullResolutionActive
+    setFullResolutionActive,
+    className
   } = props;
   const {
     screenType
@@ -42,9 +43,10 @@ export function FullScreen(props) {
     });
 
     // 添加全屏后，返回竖屏的控件
-    addContent('top', {
+    addContent('topLeft', {
       id: verticalScreenId,
       content: VerticalScreen,
+      absoluteContentClassName: 'ipc-player-plugin-vertical-screen-wrap',
       initProps: _objectSpread(_objectSpread({}, props), {}, {
         onClick: () => {
           event.emit(showAllComponent);
@@ -60,7 +62,7 @@ export function FullScreen(props) {
           className: clsx('ipc-player-plugin-full-screen-voice')
         }, /*#__PURE__*/React.createElement(VoiceIntercom, props));
       },
-      absoluteContentClassName: 'ipc-player-plugin-full-screen-voice-warp',
+      absoluteContentClassName: 'ipc-player-plugin-full-screen-voice-wrap',
       initProps: _objectSpread({}, props)
     });
   };
@@ -79,7 +81,7 @@ export function FullScreen(props) {
       });
       ty.showMenuButton();
       ty.showStatusBar();
-      deleteContent('top', verticalScreenId);
+      deleteContent('topLeft', verticalScreenId);
       deleteContent('absolute', voiceIntercomId);
       deleteContent('absolute', ptzControlId);
       deleteContent('absolute', fullResolutionId);
@@ -108,7 +110,9 @@ export function FullScreen(props) {
   };
   if (screenType === 'full') return null;
   return /*#__PURE__*/React.createElement(View, {
-    className: "ipc-player-plugin-full-screen icon-panel icon-panel-landscape",
+    className: clsx(className),
     onClick: () => handClick('full')
-  });
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-landscape', 'ipc-player-plugin-full-screen')
+  }));
 }

package/lib/plugins/fullScreen/fullScreen.less

@@ -1,17 +1,17 @@
 .ipc-player-plugin-full-screen {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: calc(16px * var(--ipc-player-size-scale, 1));
+  // position: absolute;
+  // top: 50%;
+  // transform: translateY(-50%);
+  // right: calc(16px * var(--ipc-player-size-scale, 1));
   color: var(--iconColor);
-  font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
 }
 
-.ipc-player-plugin-full-screen-voice-warp {
+.ipc-player-plugin-full-screen-voice-wrap {
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
-  right: calc(10px * var(--ipc-player-size-scale, 1));;
+  right: calc(36px * var(--ipc-player-size-scale, 1));;
   z-index: 3;
 }
 

package/lib/plugins/fullScreen/verticalScreen.d.ts

@@ -4,5 +4,5 @@ import type { ComponentConfigProps } from '../../interface';
 type Props = ComponentConfigProps & {
     onClick?: () => void;
 };
-export declare function VerticalScreen({ onClick }: Props): React.JSX.Element;
+export declare function VerticalScreen({ onClick, className }: Props): React.JSX.Element;
 export {};

package/lib/plugins/fullScreen/verticalScreen.js

@@ -1,15 +1,18 @@
 import React from 'react';
-import { View } from '@ray-js/ray';
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
 import './verticalScreen.less';
 const NILL = () => null;
 export function VerticalScreen(_ref) {
   let {
-    onClick = NILL
+    onClick = NILL,
+    className
   } = _ref;
+  console.log(className, 'className');
   return /*#__PURE__*/React.createElement(View, {
-    className: "ipc-player-plugin-vertical-screen",
+    className: clsx(className),
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(View, {
-    className: "icon-panel icon-panel-left-arrow ipc-player-plugin-vertical-screen-icon"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-left-arrow', 'ipc-player-plugin-vertical-screen-icon')
   }));
 }