@ray-js/ipc-player-integration 0.0.30 → 0.0.31-beta.1

package/lib/iconfont/iconfont.json

@@ -5,6 +5,356 @@
   "css_prefix_text": "icon-panel-",
   "description": "IPC 小程序公版",
   "glyphs": [
+    {
+      "icon_id": "47215545",
+      "name": "nightvision-mode-black-color",
+      "font_class": "nightvision-mode-black-color",
+      "unicode": "e6a2",
+      "unicode_decimal": 59042
+    },
+    {
+      "icon_id": "47215544",
+      "name": "nightvision-mode-true-color",
+      "font_class": "nightvision-mode-true-color",
+      "unicode": "e6a3",
+      "unicode_decimal": 59043
+    },
+    {
+      "icon_id": "47215543",
+      "name": "nightvision-mode-color",
+      "font_class": "nightvision-mode-color",
+      "unicode": "e6bc",
+      "unicode_decimal": 59068
+    },
+    {
+      "icon_id": "47214631",
+      "name": "wi-Fi",
+      "font_class": "wi-Fi",
+      "unicode": "e6bb",
+      "unicode_decimal": 59067
+    },
+    {
+      "icon_id": "47214513",
+      "name": "motion-tracking",
+      "font_class": "motion-tracking",
+      "unicode": "e6ba",
+      "unicode_decimal": 59066
+    },
+    {
+      "icon_id": "47214487",
+      "name": "optical-zoom",
+      "font_class": "optical-zoom",
+      "unicode": "e6b8",
+      "unicode_decimal": 59064
+    },
+    {
+      "icon_id": "47214486",
+      "name": "pip-mode",
+      "font_class": "pip-mode",
+      "unicode": "e6b9",
+      "unicode_decimal": 59065
+    },
+    {
+      "icon_id": "47214463",
+      "name": "basic-shimmer",
+      "font_class": "basic-shimmer",
+      "unicode": "e6b5",
+      "unicode_decimal": 59061
+    },
+    {
+      "icon_id": "47214464",
+      "name": "basic-nightvision-close",
+      "font_class": "basic-nightvision-close",
+      "unicode": "e6b6",
+      "unicode_decimal": 59062
+    },
+    {
+      "icon_id": "47214462",
+      "name": "basic-nightvision-open",
+      "font_class": "basic-nightvision-open",
+      "unicode": "e6b7",
+      "unicode_decimal": 59063
+    },
+    {
+      "icon_id": "47214467",
+      "name": "nightvision-mode-ir",
+      "font_class": "nightvision-mode-ir",
+      "unicode": "e6b3",
+      "unicode_decimal": 59059
+    },
+    {
+      "icon_id": "47214466",
+      "name": "nightvision-mode-auto",
+      "font_class": "nightvision-mode-auto",
+      "unicode": "e6b4",
+      "unicode_decimal": 59060
+    },
+    {
+      "icon_id": "47188073",
+      "name": "锁",
+      "font_class": "suo",
+      "unicode": "e6b2",
+      "unicode_decimal": 59058
+    },
+    {
+      "icon_id": "47188035",
+      "name": "警笛",
+      "font_class": "jingdi",
+      "unicode": "e6b0",
+      "unicode_decimal": 59056
+    },
+    {
+      "icon_id": "47188034",
+      "name": "灯",
+      "font_class": "deng",
+      "unicode": "e6b1",
+      "unicode_decimal": 59057
+    },
+    {
+      "icon_id": "47187999",
+      "name": "下载",
+      "font_class": "xiazai",
+      "unicode": "e6ae",
+      "unicode_decimal": 59054
+    },
+    {
+      "icon_id": "47187998",
+      "name": "分享",
+      "font_class": "fenxiang",
+      "unicode": "e6af",
+      "unicode_decimal": 59055
+    },
+    {
+      "icon_id": "47187589",
+      "name": "收藏",
+      "font_class": "a-zu1032",
+      "unicode": "e6ad",
+      "unicode_decimal": 59053
+    },
+    {
+      "icon_id": "47187573",
+      "name": "记录",
+      "font_class": "jilu",
+      "unicode": "e6ac",
+      "unicode_decimal": 59052
+    },
+    {
+      "icon_id": "47187414",
+      "name": "定位（小）",
+      "font_class": "a-dingweixiao",
+      "unicode": "e6ab",
+      "unicode_decimal": 59051
+    },
+    {
+      "icon_id": "47187136",
+      "name": "足迹分享",
+      "font_class": "zujifenxiang",
+      "unicode": "e6aa",
+      "unicode_decimal": 59050
+    },
+    {
+      "icon_id": "47186554",
+      "name": "足迹",
+      "font_class": "zuji",
+      "unicode": "e6a7",
+      "unicode_decimal": 59047
+    },
+    {
+      "icon_id": "47186548",
+      "name": "宠物档案",
+      "font_class": "chongwudangan",
+      "unicode": "e6a8",
+      "unicode_decimal": 59048
+    },
+    {
+      "icon_id": "47186450",
+      "name": "遛宠",
+      "font_class": "liuchong",
+      "unicode": "e6a6",
+      "unicode_decimal": 59046
+    },
+    {
+      "icon_id": "47186340",
+      "name": "围栏",
+      "font_class": "weilan",
+      "unicode": "e6a9",
+      "unicode_decimal": 59049
+    },
+    {
+      "icon_id": "47131812",
+      "name": "WER",
+      "font_class": "WER",
+      "unicode": "e6a5",
+      "unicode_decimal": 59045
+    },
+    {
+      "icon_id": "47131735",
+      "name": "infrared-night-vision",
+      "font_class": "infrared-night-vision",
+      "unicode": "e6a4",
+      "unicode_decimal": 59044
+    },
+    {
+      "icon_id": "47131298",
+      "name": "night-vision",
+      "font_class": "night-vision",
+      "unicode": "e6a1",
+      "unicode_decimal": 59041
+    },
+    {
+      "icon_id": "47073070",
+      "name": "Access-Key-Password",
+      "font_class": "Access-Key-Password",
+      "unicode": "e643",
+      "unicode_decimal": 58947
+    },
+    {
+      "icon_id": "47073029",
+      "name": "Access-Mobile",
+      "font_class": "Access-Mobile1",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
+    {
+      "icon_id": "47072934",
+      "name": "Access-QuickReply",
+      "font_class": "Access-QuickReply",
+      "unicode": "e631",
+      "unicode_decimal": 58929
+    },
+    {
+      "icon_id": "47072914",
+      "name": "Access-Key-FaceID",
+      "font_class": "Access-Key-FaceID2",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "47072572",
+      "name": "Access-NoBlock",
+      "font_class": "Access-NoBlock",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "47072558",
+      "name": "Access-Password-View",
+      "font_class": "Access-Password-View",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
+    {
+      "icon_id": "47072205",
+      "name": "Access-Door",
+      "font_class": "Access-Door",
+      "unicode": "e69e",
+      "unicode_decimal": 59038
+    },
+    {
+      "icon_id": "47071738",
+      "name": "Access-Camera",
+      "font_class": "Access-Camera",
+      "unicode": "e69a",
+      "unicode_decimal": 59034
+    },
+    {
+      "icon_id": "47071730",
+      "name": "Access-Member",
+      "font_class": "Access-Member",
+      "unicode": "e69c",
+      "unicode_decimal": 59036
+    },
+    {
+      "icon_id": "47071754",
+      "name": "Access-Password-Hide",
+      "font_class": "Access-Password-Hide",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "47071752",
+      "name": "Access-AI Guardian",
+      "font_class": "a-Access-AIGuardian",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
+    },
+    {
+      "icon_id": "47071749",
+      "name": "Access-Key-Fingerprint",
+      "font_class": "Access-Key-Fingerprint",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "47071747",
+      "name": "Access-Send",
+      "font_class": "Access-Send",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "47071744",
+      "name": "Access-Password-Clear",
+      "font_class": "Access-Password-Clear",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    },
+    {
+      "icon_id": "47071743",
+      "name": "Access-Notification-large",
+      "font_class": "Access-Notification-large",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "47071742",
+      "name": "Access-Intercom-large",
+      "font_class": "Access-Intercom-large",
+      "unicode": "e63f",
+      "unicode_decimal": 58943
+    },
+    {
+      "icon_id": "47071737",
+      "name": "Access-Brightness",
+      "font_class": "Access-Brightness",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "47071741",
+      "name": "Access-TempAccess-large",
+      "font_class": "Access-TempAccess-large",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "47071740",
+      "name": "Access-Undo",
+      "font_class": "Access-Undo",
+      "unicode": "e699",
+      "unicode_decimal": 59033
+    },
+    {
+      "icon_id": "47071756",
+      "name": "Access-Key-Card",
+      "font_class": "Access-Key-Card",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "47071755",
+      "name": "Access-Replay",
+      "font_class": "Access-Replay",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "47034105",
+      "name": "Access-Copy",
+      "font_class": "Access-Copy",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
     {
       "icon_id": "46981006",
       "name": "tip-right-arrow",
@@ -43,7 +393,7 @@
     {
       "icon_id": "46763588",
       "name": "door-close-small",
-      "font_class": "door-close-small",
+      "font_class": "Access-door-close-small",
       "unicode": "e6671",
       "unicode_decimal": 943729
     },

package/lib/interface.d.ts

@@ -61,6 +61,7 @@ export type UseCtx = (options: {
     intercom: RetAtom<boolean>;
     intercomMode: RetAtom<IntercomMode>;
     intercomSupported: RetAtom<boolean>;
+    maxZoomSettings: RetAtom<number>;
     resolution: RetAtom<string>;
     resolutionList: RetAtom<string[]>;
     playState: RetAtom<PlayState>;

package/lib/ui/constant.d.ts

@@ -39,6 +39,8 @@ export declare const widgetLabs: {
     readonly FULL_SCREEN: "FullScreen";
     readonly VERTICAL_SCREEN: "VerticalScreen";
 };
+export declare const zoomLevelChange = "zoomLevelChange";
+export declare const setScaleMultipleEvent = "setScaleMultipleEvent";
 export declare const decodeClarityDic: {
     SS: string;
     SD: string;

package/lib/ui/constant.js

@@ -40,6 +40,8 @@ export const widgetLabs = {
   FULL_SCREEN: 'FullScreen',
   VERTICAL_SCREEN: 'VerticalScreen'
 };
+export const zoomLevelChange = 'zoomLevelChange';
+export const setScaleMultipleEvent = 'setScaleMultipleEvent';
 export const decodeClarityDic = {
   SS: 'ss',
   // 省流量

package/lib/ui/ui.js

@@ -11,7 +11,7 @@ import { PlayState, PlayerStreamStatus, MultiCameraScreenMode } from '../interfa
 import { useCtx } from '../ctx/ctx.composition';
 import { useStore, updateAtom } from '../ctx/store';
 import { UIEventContext } from './context';
-import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent, decodeClarityDic, changeIgnoreHideStopPreview, moveablePtzControlId, tileActionsId, tileTipId, landscapeTipId, multiPtzId, ptzMoveableTipId, showFlowLowTipId } from './constant';
+import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent, decodeClarityDic, changeIgnoreHideStopPreview, moveablePtzControlId, tileActionsId, tileTipId, landscapeTipId, multiPtzId, ptzMoveableTipId, showFlowLowTipId, zoomLevelChange, setScaleMultipleEvent } from './constant';
 import BottomLeftContent from './bottomLeftContent';
 import BottomRightContent from './bottomRightContent';
 import TopLeftContent from './topLeftContent';
@@ -410,7 +410,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       eventRef.current.emit('disablePlayerTap', false);
       showComponents();
     }
-  }, [isVerticalFullLayout, screenType, playerFit, instance]);
+  }, [isVerticalFullLayout, screenType, playerFit]);
   useEffect(() => {
     if (createCtx) {
       setScaleMultiple(playerFit === 'contain' ? 1 : -2);
@@ -659,6 +659,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     instance.changeStreamStatus(code);
   });
   const disablePlayerTap = useRef(false);
+  // 标记正在执行隐藏，防止 playerTap 子组件监听触发 showAllComponent 干扰隐藏
+  const isHidingByTapRef = useRef(false);
   const hasInitializedLandscapeMultiRef = useRef(false);
   const multiTapTimerRef = useRef(null);
   const prevSelectedIndexRef = useRef(selectedLenInfo.index);
@@ -693,14 +695,15 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     eventRef.current.emit(type);
   };
   const listenStart = useMemoizedFn(() => {
-    timer.current && clearTimeout(timer.current);
-    // 重新开始计时
-    if (!timer.current) {
-      // @ts-ignore
-      timer.current = setTimeout(() => {
-        triggerEvent(hideAllComponent);
-      }, HIDE_COMPONENT_TIME);
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
     }
+    // 重新开始计时
+    // @ts-ignore
+    timer.current = setTimeout(() => {
+      triggerEvent(hideAllComponent);
+    }, HIDE_COMPONENT_TIME);
   });
   const listenPause = useMemoizedFn(() => {
     timer.current && clearTimeout(timer.current);
@@ -710,11 +713,15 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     setComponentHideState(true);
   });
   const listenShowEvent = useMemoizedFn(() => {
+    if (isHidingByTapRef.current) return;
     setComponentHideState(false);
   });
   const onChangeIgnoreHideStopPreview = state => {
     setIgnoreStopOnHide(state);
   };
+  const onSetScaleMultiple = value => {
+    setScaleMultiple(value);
+  };
   useEffect(() => {
     eventRef.current.on(startTimeToHideAllComponent, listenStart);
     eventRef.current.on(pauseTimeToHideAllComponent, listenPause);
@@ -723,6 +730,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     eventRef.current.on('disablePlayerTap', handDisablePlayerTap);
     eventRef.current.on('refreshBottomLeft', refreshBottomLeft);
     eventRef.current.on(changeIgnoreHideStopPreview, onChangeIgnoreHideStopPreview);
+    eventRef.current.on(setScaleMultipleEvent, onSetScaleMultiple);
     return () => {
       eventRef.current.off(startTimeToHideAllComponent, listenStart);
       eventRef.current.off(pauseTimeToHideAllComponent, listenPause);
@@ -731,6 +739,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       eventRef.current.off('disablePlayerTap', handDisablePlayerTap);
       eventRef.current.off('refreshBottomLeft', refreshBottomLeft);
       eventRef.current.off(changeIgnoreHideStopPreview, onChangeIgnoreHideStopPreview);
+      eventRef.current.off(setScaleMultipleEvent, onSetScaleMultiple);
       if (multiTapTimerRef.current) {
         clearTimeout(multiTapTimerRef.current);
         multiTapTimerRef.current = null;
@@ -788,6 +797,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       setScaleMultiple(zoomLevel);
     }
     setCurrentZoomLevel(zoomLevel);
+    instance.event.emit(zoomLevelChange, zoomLevel);
     return false;
   });
   const playerContainerHeight = screenType === 'vertical' ? (style === null || style === void 0 ? void 0 : style.height) || '100%' : '100vh';
@@ -851,8 +861,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
         return;
       }
       console.log('res===on onVideoTap', data);
-      eventRef.current.emit(playerTap);
-      console.log(prevTriggerEvent.current, 'prevTriggerEvent.current');
       if (instance.multiCameraCtx.isSupport) {
         var _instance$multiCamera, _instance$multiCamera2;
         const preTapIndex = (_instance$multiCamera = (_instance$multiCamera2 = instance.multiCameraCtx.selectedLenInfoRef.current) === null || _instance$multiCamera2 === void 0 ? void 0 : _instance$multiCamera2.index) !== null && _instance$multiCamera !== void 0 ? _instance$multiCamera : prevSelectedIndexRef.current;
@@ -881,10 +889,21 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
           prevSelectedIndexRef.current = currentIndex;
           multiTapTimerRef.current = null;
         }, 50);
-      } else if (prevTriggerEvent.current === hideAllComponent) {
-        triggerEvent(showAllComponent);
+      } else if (componentHideState) {
+        // 当前隐藏 → 显示（带自动隐藏计时器）
+        showComponents();
+        eventRef.current.emit(playerTap);
       } else {
-        triggerEvent(hideAllComponent);
+        // 当前显示 → 隐藏
+        if (timer.current) {
+          clearTimeout(timer.current);
+          timer.current = null;
+        }
+        setComponentHideState(true);
+        // 标记正在隐藏，防止 emit(playerTap) 触发子组件 emit(showAllComponent) 导致隐藏被覆盖
+        isHidingByTapRef.current = true;
+        eventRef.current.emit(playerTap);
+        isHidingByTapRef.current = false;
       }
       onPlayerTap && onPlayerTap(data);
       return false; // eslint-disable-line

package/lib/widgets/index.d.ts

@@ -18,3 +18,4 @@ export * from './multiCamera';
 export * from './smallIntercom';
 export * from './toggleVerticalFull';
 export * from './flowLowTip';
+export * from './realTimeMagnification';

package/lib/widgets/index.js

@@ -17,4 +17,5 @@ export * from './ptzControlTip';
 export * from './multiCamera';
 export * from './smallIntercom';
 export * from './toggleVerticalFull';
-export * from './flowLowTip';
+export * from './flowLowTip';
+export * from './realTimeMagnification';

package/lib/widgets/muted/muted.js

@@ -3,7 +3,7 @@ import React, { useContext } from 'react';
 import clsx from 'clsx';
 import { useStore } from '../../ctx/store';
 import { UIEventContext } from '../../ui/context';
-import { widgetLabs, widgetClick } from '../../ui/constant';
+import { widgetLabs, widgetClick, pauseTimeToHideAllComponent, startTimeToHideAllComponent } from '../../ui/constant';
 import './muted.less';
 export const Muted = props => {
   const {
@@ -27,7 +27,9 @@ export const Muted = props => {
       event.emit(widgetClick, {
         widgetId: widgetLabs.MUTED
       });
+      event.emit(pauseTimeToHideAllComponent);
       setMute(!isMuted);
+      event.emit(startTimeToHideAllComponent);
     }
   }, isMuted ? /*#__PURE__*/React.createElement(Text, {
     className: "ipc-player-plugin-muted-text-icon icon-panel icon-panel-mute-off"

package/lib/widgets/realTimeMagnification/index.d.ts

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

package/lib/widgets/realTimeMagnification/index.js

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

package/lib/widgets/realTimeMagnification/realTimeMagnification.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './realTimeMagnification.less';
+type Props = ComponentConfigProps & {
+    className?: string;
+};
+export declare const RealTimeMagnification: (props: Props) => React.JSX.Element | null;
+export {};

package/lib/widgets/realTimeMagnification/realTimeMagnification.js

@@ -0,0 +1,91 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import { PlayState } from '../../interface';
+import { useStore } from '../../ctx/store';
+import { zoomLevelChange, setScaleMultipleEvent, pauseTimeToHideAllComponent, startTimeToHideAllComponent } from '../../ui/constant';
+import './realTimeMagnification.less';
+
+/** 全量档位列表 */
+const ALL_ZOOM_LEVELS = [1, 2, 4, 6, 8, 12];
+export const RealTimeMagnification = props => {
+  const {
+    playState,
+    event,
+    className,
+    screenType: screenTypeAtom,
+    maxZoomSettings: maxZoomAtom
+  } = props;
+  const {
+    playState: currentPlayState,
+    screenType,
+    maxZoomSettings
+  } = useStore({
+    playState,
+    screenType: screenTypeAtom,
+    maxZoomSettings: maxZoomAtom
+  });
+  const [currentZoom, setCurrentZoom] = useState(1);
+
+  /** 根据 maxZoomSettings 动态生成可用档位列表 */
+  const zoomLevels = useMemo(() => {
+    const max = maxZoomSettings || 6;
+    const levels = ALL_ZOOM_LEVELS.filter(level => level <= max);
+    // 若最大值不在预设档位中，追加到末尾
+    if (max > 1 && levels[levels.length - 1] !== max) {
+      levels.push(max);
+    }
+    return levels;
+  }, [maxZoomSettings]);
+  useEffect(() => {
+    const onZoomChange = zoomLevel => {
+      if (zoomLevel > 0) {
+        setCurrentZoom(zoomLevel);
+      }
+    };
+    event.on(zoomLevelChange, onZoomChange);
+    return () => {
+      event.off(zoomLevelChange, onZoomChange);
+    };
+  }, [event]);
+
+  /** 获取当前倍数对应的档位显示值（取最接近且 <= currentZoom 的档位） */
+  const getDisplayZoom = useCallback(() => {
+    for (let i = zoomLevels.length - 1; i >= 0; i--) {
+      if (currentZoom >= zoomLevels[i]) {
+        return zoomLevels[i];
+      }
+    }
+    return zoomLevels[0];
+  }, [currentZoom, zoomLevels]);
+
+  /** 获取下一档倍数，循环切换 */
+  const getNextZoom = useCallback(() => {
+    const display = getDisplayZoom();
+    const currentIndex = zoomLevels.indexOf(display);
+    const nextIndex = (currentIndex + 1) % zoomLevels.length;
+    return zoomLevels[nextIndex];
+  }, [getDisplayZoom, zoomLevels]);
+
+  /** 点击切换到下一档倍数 */
+  const handleClick = useCallback(() => {
+    event.emit(pauseTimeToHideAllComponent);
+    const nextZoom = getNextZoom();
+    console.log('RealTimeMagnification click', 'currentZoom:', currentZoom, 'nextZoom:', nextZoom);
+    event.emit(setScaleMultipleEvent, nextZoom);
+    event.emit(startTimeToHideAllComponent);
+  }, [getNextZoom, event, currentZoom]);
+  if (currentPlayState !== PlayState.PLAYING) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    onClick: handleClick,
+    className: clsx(className)
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-realtime-magnification', {
+      'ipc-player-plugin-realtime-magnification-full': screenType === 'full'
+    })
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "magnificationText"
+  }, currentZoom.toFixed(1), "X")));
+};

package/lib/widgets/realTimeMagnification/realTimeMagnification.less

@@ -0,0 +1,20 @@
+.ipc-player-plugin-realtime-magnification {
+  background-color: rgba(255, 255, 255, 0.3);
+  padding: calc(4px * var(--ipc-player-size-scale, 1)) calc(5px * var(--ipc-player-size-scale, 1));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: calc(4px * var(--ipc-player-size-scale, 1));
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  .magnificationText {
+    color: var(--iconColor);
+    font-weight: 600;
+    font-size: calc(12px * var(--ipc-player-size-scale, 1));
+  }
+}
+.ipc-player-plugin-realtime-magnification-full {
+  padding-left: calc(8px * var(--ipc-player-size-scale, 1));
+  padding-right: calc(8px * var(--ipc-player-size-scale, 1));
+  border-radius: calc(5px * var(--ipc-player-size-scale, 1));
+}