@ray-js/ipc-player-integration 0.0.1-beta-33 → 0.0.1-beta-35

package/lib/plugins/fullScreen/fullScreen.js

@@ -3,11 +3,15 @@ import React, { useContext } from 'react';
 import { View, setPageOrientation, Text } from '@ray-js/ray';
 import { useUpdateEffect } from 'ahooks';
 import clsx from 'clsx';
+import { unstable_batchedUpdates as batchedUpdates } from '@ray-core/ray';
 import { UIEventContext } from '../../ui/context';
-import { showAllComponent, voiceIntercomId, verticalScreenId, ptzControlId, fullResolutionId, pauseTimeToHideAllComponent } from '../../ui/constant';
+import { showAllComponent, voiceIntercomId, verticalScreenId, fullTravelRouteControlId, ptzControlId, fullResolutionId, pauseTimeToHideAllComponent } from '../../ui/constant';
 import { useStore } from '../../ctx/store';
 import { VerticalScreen } from './verticalScreen';
 import { FullVoiceIntercom } from './fullVoiceIntercom';
+import { FullTravelRouteControl } from './fullTravelRouteControl';
+import { hasDpCode } from '../../utils/device';
+import { DIRECTION_CONTROL_DP_CODE } from './constant';
 import './fullScreen.less';
 export function FullScreen(props) {
   const {
@@ -15,9 +19,9 @@ export function FullScreen(props) {
     setScreenType,
     addContent,
     deleteContent,
-    setPtzActive,
-    setFullResolutionActive,
-    className
+    className,
+    showContent,
+    devId
   } = props;
   const {
     screenType
@@ -36,33 +40,48 @@ export function FullScreen(props) {
    * 全屏统一操作
    */
   const handleFull = () => {
-    ty.hideMenuButton();
-    ty.hideStatusBar();
-    ty.setNavigationBarBack({
-      type: 'custom'
-    });
+    hasDpCode(devId, DIRECTION_CONTROL_DP_CODE).then(hasDirectionControlDpCode => {
+      ty.hideMenuButton();
+      ty.hideStatusBar();
+      ty.setNavigationBarBack({
+        type: 'custom'
+      });
+      batchedUpdates(() => {
+        // 添加全屏后，返回竖屏的控件
+        addContent('topLeft', {
+          id: verticalScreenId,
+          content: VerticalScreen,
+          absoluteContentClassName: 'ipc-player-plugin-vertical-screen-wrap',
+          initProps: _objectSpread(_objectSpread({}, props), {}, {
+            onClick: () => {
+              event.emit(pauseTimeToHideAllComponent);
+              event.emit(showAllComponent);
+              handClick('vertical');
+            }
+          })
+        });
 
-    // 添加全屏后，返回竖屏的控件
-    addContent('topLeft', {
-      id: verticalScreenId,
-      content: VerticalScreen,
-      absoluteContentClassName: 'ipc-player-plugin-vertical-screen-wrap',
-      initProps: _objectSpread(_objectSpread({}, props), {}, {
-        onClick: () => {
-          event.emit(pauseTimeToHideAllComponent);
-          event.emit(showAllComponent);
-          handClick('vertical');
+        // 如果 dp DIRECTION_CONTROL_DP_CODE 存在，添加摄像机方向移动控件 否则 添加语音对讲控件
+        // 全屏后，添加语音对讲控件 显示全屏状态下的 小的语音对讲组件
+        if (hasDirectionControlDpCode) {
+          addContent('absolute', {
+            id: fullTravelRouteControlId,
+            content: props => /*#__PURE__*/React.createElement(FullTravelRouteControl, props),
+            absoluteContentClassName: 'ipc-player-plugin-full-screen-voice-wrap',
+            initProps: _objectSpread({}, props)
+          });
+          showContent('bottomLeft', 'FullSmallIntercom');
+        } else {
+          addContent('absolute', {
+            id: voiceIntercomId,
+            content: props => {
+              return /*#__PURE__*/React.createElement(FullVoiceIntercom, props);
+            },
+            absoluteContentClassName: 'ipc-player-plugin-full-screen-voice-wrap',
+            initProps: _objectSpread({}, props)
+          });
         }
-      })
-    });
-    // 全屏后，添加语音对讲控件
-    addContent('absolute', {
-      id: voiceIntercomId,
-      content: props => {
-        return /*#__PURE__*/React.createElement(FullVoiceIntercom, props);
-      },
-      absoluteContentClassName: 'ipc-player-plugin-full-screen-voice-wrap',
-      initProps: _objectSpread({}, props)
+      }, null);
     });
   };
 
@@ -85,10 +104,8 @@ export function FullScreen(props) {
       deleteContent('absolute', voiceIntercomId);
       deleteContent('absolute', ptzControlId);
       deleteContent('absolute', fullResolutionId);
-      // 还原Ptz点击状态值
-      setPtzActive(false);
+      deleteContent('absolute', fullTravelRouteControlId);
       // 还原全屏清晰度状态值
-      setFullResolutionActive(false);
     }
   };
   useUpdateEffect(() => {

package/lib/plugins/fullScreen/fullScreen.less

@@ -12,7 +12,7 @@
   top: 50%;
   transform: translate(0, -50%);
   // transform: translate(180%, 0);
-  right: calc(36px * var(--ipc-player-size-scale, 1));;
+  right: calc(36px * var(--ipc-player-size-scale, 1));
   z-index: 340;
 }
 
@@ -22,4 +22,9 @@
   &.ipc-player-plugin-full-screen-voice-hide {
     transform: translate(180%, 0);
   }
+}
+
+.ipc-plugin-full-travel-route-control {
+  width: calc(172px * var(--ipc-player-size-scale, 1));
+  height: calc(172px * var(--ipc-player-size-scale, 1));
 }

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

@@ -0,0 +1,8 @@
+/**
+ * 全屏状态下要添加的摄像机行进路线控件
+ */
+import React from 'react';
+import type { ComponentConfigProps } from '../../interface';
+type Props = ComponentConfigProps;
+export declare function FullTravelRouteControl(props: Props): React.JSX.Element;
+export {};

package/lib/plugins/fullScreen/fullTravelRouteControl.js

@@ -0,0 +1,73 @@
+/**
+ * 全屏状态下要添加的摄像机行进路线控件
+ */
+
+import React, { useEffect, useContext, useState, useRef } from 'react';
+import { View } from '@ray-js/ray';
+import clsx from 'clsx';
+import RectDirectionControl from '@ray-js/direction-control';
+import { useDebounceFn, useMemoizedFn } from 'ahooks';
+import { UIEventContext } from '../../ui/context';
+import { useDpState } from '../../hooks';
+import { useComponentHideState } from '../../ui/hooks';
+import { pauseTimeToHideAllComponent, startTimeToHideAllComponent } from '../../ui/constant';
+import { DIRECTION_CONTROL_DP_CODE } from './constant';
+export function FullTravelRouteControl(props) {
+  const [shouldHide] = useComponentHideState();
+  const [isPtzActive, setIsPtzActive] = useState(false);
+  const {
+    event
+  } = useContext(UIEventContext);
+  const prevRotate = useRef('-1');
+  const [state, _, sendDp] = useDpState({
+    devId: props.devId,
+    dpCodes: [DIRECTION_CONTROL_DP_CODE],
+    listenDpChange: true
+  });
+  const onPtzControlShow = useMemoizedFn(() => {
+    setIsPtzActive(true);
+  });
+  const onPtzControlHide = useMemoizedFn(() => {
+    setIsPtzActive(false);
+  });
+  useEffect(() => {
+    event.on('ptzControlShow', onPtzControlShow);
+    event.on('ptzControlHide', onPtzControlHide);
+    return () => {
+      event.off('ptzControlShow', onPtzControlShow);
+      event.off('ptzControlHide', onPtzControlHide);
+    };
+  }, []);
+  const {
+    run: sendDpValue
+  } = useDebounceFn(value => {
+    if (value === prevRotate.current) return;
+    sendDp({
+      [DIRECTION_CONTROL_DP_CODE]: value
+    });
+    prevRotate.current = value;
+  }, {
+    wait: 50,
+    leading: false,
+    trailing: false
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-full-screen-voice', {
+      'ipc-player-plugin-full-screen-voice-hide': shouldHide || isPtzActive
+    })
+  }, /*#__PURE__*/React.createElement(RectDirectionControl, {
+    className: "ipc-plugin-full-travel-route-control",
+    value: 0,
+    onTouchStart: value => {
+      sendDpValue(String(value));
+    },
+    onTouchMove: value => {
+      event.emit(pauseTimeToHideAllComponent);
+      sendDpValue(String(value));
+    },
+    onTouchEnd: () => {
+      event.emit(startTimeToHideAllComponent);
+      sendDpValue('-1');
+    }
+  }));
+}

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

@@ -1,3 +1,6 @@
+/**
+ * 全屏状态下要添加的语音对讲控件
+ */
 import React from 'react';
 import type { ComponentConfigProps } from '../../interface';
 type Props = ComponentConfigProps;

package/lib/plugins/fullScreen/fullVoiceIntercom.js

@@ -1,29 +1,38 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useContext } from 'react';
+/**
+ * 全屏状态下要添加的语音对讲控件
+ */
+import React, { useContext, useState, useEffect } from 'react';
 import { View } from '@ray-js/ray';
 import clsx from 'clsx';
 import { VoiceIntercom } from '../voiceIntercom';
 import { useComponentHideState } from '../../ui/hooks';
+import { useMemoizedFn } from '../../hooks';
 import { UIEventContext } from '../../ui/context';
 import { pauseTimeToHideAllComponent } from '../../ui/constant';
-import { useStore } from '../../ctx/store';
 export function FullVoiceIntercom(props) {
-  const {
-    screenType,
-    isPtzActive,
-    fullResolutionActive
-  } = useStore({
-    screenType: props.screenType,
-    isPtzActive: props.ptzActive,
-    fullResolutionActive: props.fullResolutionActive
-  });
-  const [shouldHide] = useComponentHideState(screenType);
+  const [shouldHide] = useComponentHideState();
+  const [isPtzActive, setIsPtzActive] = useState(false);
   const {
     event
   } = useContext(UIEventContext);
+  const onPtzControlShow = useMemoizedFn(() => {
+    setIsPtzActive(true);
+  });
+  const onPtzControlHide = useMemoizedFn(() => {
+    setIsPtzActive(false);
+  });
+  useEffect(() => {
+    event.on('ptzControlShow', onPtzControlShow);
+    event.on('ptzControlHide', onPtzControlHide);
+    return () => {
+      event.off('ptzControlShow', onPtzControlShow);
+      event.off('ptzControlHide', onPtzControlHide);
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-full-screen-voice', {
-      'ipc-player-plugin-full-screen-voice-hide': shouldHide || isPtzActive || fullResolutionActive
+      'ipc-player-plugin-full-screen-voice-hide': shouldHide || isPtzActive
     })
   }, /*#__PURE__*/React.createElement(VoiceIntercom, _extends({}, props, {
     talkingColor: "#FFFFFF",

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

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

package/lib/plugins/fullSmallIntercom/fullSmallIntercom.d.ts

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

package/lib/plugins/fullSmallIntercom/fullSmallIntercom.js

@@ -13,17 +13,15 @@ export function FullSmallIntercom(props) {
   } = props;
   const {
     screenType,
-    ptzActive,
     brandColor
   } = useStore({
     screenType: props.screenType,
-    ptzActive: props.ptzActive,
     brandColor: props.brandColor
   });
   const {
     event
   } = useContext(UIEventContext);
-  if (screenType === 'vertical' && !ptzActive) {
+  if (screenType === 'vertical') {
     return null;
   }
   const onTouchStart = () => {
@@ -32,7 +30,7 @@ export function FullSmallIntercom(props) {
   const onTouchEnd = () => {
     // event.emit(startTimeToHideAllComponent);
   };
-  if (screenType === 'full' && ptzActive) {
+  if (screenType === 'full') {
     return /*#__PURE__*/React.createElement(View, {
       className: clsx(className)
     }, /*#__PURE__*/React.createElement(VoiceIntercom, _extends({}, props, {

package/lib/plugins/index.d.ts

@@ -11,3 +11,4 @@ export * from './ptz';
 export * from './resolution';
 export * from './fullSmallIntercom';
 export * from './verticalSmallIntercom';
+export * from './moveInteractiveControl';

package/lib/plugins/index.js

@@ -12,4 +12,5 @@ export * from './muted';
 export * from './ptz';
 export * from './resolution';
 export * from './fullSmallIntercom';
-export * from './verticalSmallIntercom';
+export * from './verticalSmallIntercom';
+export * from './moveInteractiveControl';

package/lib/plugins/moveInteractiveControl/controlButton.d.ts

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

package/lib/plugins/moveInteractiveControl/controlButton.js

@@ -0,0 +1,44 @@
+import React, { useContext } from 'react';
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useStore } from '../../ctx/store';
+import { UIEventContext } from '../../ui/context';
+import { hideAllComponent } from '../../ui/constant';
+import { MoveInteractiveControl } from './moveInteractiveControl';
+import './controlButton.less';
+const ID = 'MoveInteractiveControl';
+export function MoveInteractiveControlButton(props) {
+  const {
+    screenType: screenTypeAtom,
+    addContent,
+    hasContent,
+    className
+  } = props;
+  const {
+    event
+  } = useContext(UIEventContext);
+  const {
+    screenType
+  } = useStore({
+    screenType: screenTypeAtom
+  });
+  // 竖屏状态下不展示控件按钮
+  if (screenType === 'vertical') return null;
+  return /*#__PURE__*/React.createElement(View, {
+    onClick: () => {
+      event.emit(hideAllComponent);
+      if (hasContent('absolute', ID)) {
+        event.emit('showMoveInteractiveControl');
+      } else {
+        addContent('absolute', {
+          id: ID,
+          absoluteContentClassName: 'ipc-player-plugin-move-control-wrap',
+          content: () => /*#__PURE__*/React.createElement(MoveInteractiveControl, props)
+        });
+      }
+    },
+    className: className
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-move-control-interactive', 'ipc-plugin-move-interactive-icon')
+  }));
+}

package/lib/plugins/moveInteractiveControl/controlButton.less

@@ -0,0 +1,4 @@
+.ipc-plugin-move-interactive-icon {
+  color: var(--iconColor);
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1));
+}

package/lib/plugins/moveInteractiveControl/index.d.ts

@@ -0,0 +1,2 @@
+export * from './moveInteractiveControlUI';
+export * from './controlButton';

package/lib/plugins/moveInteractiveControl/index.js

@@ -0,0 +1,2 @@
+export * from './moveInteractiveControlUI';
+export * from './controlButton';

package/lib/plugins/moveInteractiveControl/moveInteractiveControl.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './moveInteractiveControl.less';
+import { ComponentConfigProps } from '../../interface';
+type Props = ComponentConfigProps;
+export declare function MoveInteractiveControl(props: Props): React.JSX.Element;
+export {};

package/lib/plugins/moveInteractiveControl/moveInteractiveControl.js

@@ -0,0 +1,50 @@
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { MoveInterActiveControlUI } from './moveInteractiveControlUI';
+import { playerTap, showAllComponent } from '../../ui/constant';
+import { useDpState } from '../../hooks';
+import { UIEventContext } from '../../ui/context';
+import './moveInteractiveControl.less';
+const TYPE_CODE = 'ipc_manual_petting';
+const STATE_CODE = 'ipc_manual_petting_state';
+export function MoveInteractiveControl(props) {
+  const {
+    devId
+  } = props;
+  const [state, _, sendDp] = useDpState({
+    devId,
+    dpCodes: [TYPE_CODE, STATE_CODE],
+    listenDpChange: false
+  });
+  console.log('state', state);
+  const {
+    event
+  } = useContext(UIEventContext);
+  const [hide, setHide] = useState(false);
+  const onPlayerTap = useCallback(() => {
+    setHide(true);
+    event.emit(showAllComponent);
+  }, []);
+  const onShowMoveInteractiveControl = useCallback(() => {
+    setHide(false);
+  }, []);
+  useEffect(() => {
+    event.on(playerTap, onPlayerTap);
+    event.on('showMoveInteractiveControl', onShowMoveInteractiveControl);
+    return () => {
+      event.off(playerTap, onPlayerTap);
+      event.off('showMoveInteractiveControl', onShowMoveInteractiveControl);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(MoveInterActiveControlUI, {
+    wrapClsName: clsx('ipc-player-plugin-move-control', {
+      'ipc-player-plugin-move-control-hide': hide
+    }),
+    onClick: value => {
+      sendDp({
+        [TYPE_CODE]: value
+      });
+    },
+    activeKey: state[STATE_CODE] ? state[TYPE_CODE] : undefined
+  });
+}

package/lib/plugins/moveInteractiveControl/moveInteractiveControl.less

@@ -0,0 +1,38 @@
+@animation-time: 0.3s;
+
+.ipc-player-plugin-move-control-wrap {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  z-index: 345;
+}
+
+@keyframes ipc-player-plugin-move-interactive {
+  from {
+    transform: translate(200%, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+
+.ipc-player-plugin-move-control {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  transition: transform @animation-time ease-in, opacity @animation-time ease-in;
+  animation: ipc-player-plugin-move-interactive 0.3s ease-in-out;
+  width: calc(288px * var(--ipc-player-size-scale, 1));
+  &.ipc-player-plugin-move-control-hide {
+    transform: translate(100%, 0);
+    opacity: 0;
+  }
+  &.ipc-player-plugin-move-control-show {
+    transform: translate(0, 0);
+  }
+}

package/lib/plugins/moveInteractiveControl/moveInteractiveControlUI.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import './moveInteractiveControlUI.less';
+type CSSVariable = {
+    '--bgColor'?: string;
+    '--itemBgColor'?: string;
+    '--iconBgColor'?: string;
+    '--color'?: string;
+    '--titleFontSize'?: string;
+    '--titleColor'?: string;
+    '--itemFontSize'?: string;
+    '--iconFontSize'?: string;
+    '--activeColor'?: string;
+};
+export type MoveInterActiveControlUIProps = {
+    wrapClsName?: string;
+    contentClsName?: string;
+    CSSVariable?: CSSVariable;
+    menu?: MenuItem[];
+    onClick?: (key: MenuItem['key']) => void;
+    activeKey?: string;
+};
+type MenuItem = {
+    key: string;
+    label: string | React.ReactElement;
+    iconName?: string;
+};
+export declare function MoveInterActiveControlUI(props: MoveInterActiveControlUIProps): React.JSX.Element;
+export {};

package/lib/plugins/moveInteractiveControl/moveInteractiveControlUI.js

@@ -0,0 +1,103 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import { View, ScrollView } from '@ray-js/ray';
+import clsx from 'clsx';
+import './moveInteractiveControlUI.less';
+const defaultMenu = [{
+  key: '0',
+  label: I18n.t('dp_ipc_manual_petting_0'),
+  iconName: 'icon-panel-move-control-rotate-place'
+}, {
+  key: '1',
+  label: I18n.t('dp_ipc_manual_petting_1'),
+  iconName: 'icon-panel-move-control-straight-line'
+}, {
+  key: '2',
+  label: I18n.t('dp_ipc_manual_petting_2'),
+  iconName: 'icon-panel-move-control-8'
+}, {
+  key: '3',
+  label: I18n.t('dp_ipc_manual_petting_3'),
+  iconName: 'icon-panel-move-control-rotation'
+}, {
+  key: '4',
+  label: I18n.t('dp_ipc_manual_petting_4'),
+  iconName: 'icon-panel-move-control-big-rotation'
+}, {
+  key: '5',
+  label: I18n.t('dp_ipc_manual_petting_5'),
+  iconName: 'icon-panel-move-control-z'
+}, {
+  key: '6',
+  label: I18n.t('dp_ipc_manual_petting_6'),
+  iconName: 'icon-panel-move-control-wave'
+}, {
+  key: '7',
+  label: I18n.t('dp_ipc_manual_petting_7'),
+  iconName: 'icon-panel-move-control-p-steering'
+}, {
+  key: '8',
+  label: I18n.t('dp_ipc_manual_petting_8'),
+  iconName: 'icon-panel-move-control-chacha'
+}, {
+  key: '9',
+  label: I18n.t('dp_ipc_manual_petting_9'),
+  iconName: 'icon-panel-tange1'
+}, {
+  key: '10',
+  label: I18n.t('dp_ipc_manual_petting_10'),
+  iconName: 'icon-panel-move-control-waltz'
+}];
+const defaultCSSVariable = {
+  '--bgColor': '#1A1A1A',
+  '--itemBgColor': 'rgba(255, 255, 255, 0.05)',
+  '--iconBgColor': 'rgba(255, 255, 255, 0.05)',
+  '--color': 'rgba(255, 255, 255, 0.7)',
+  '--titleColor': '#fff',
+  '--titleFontSize': '16px',
+  '--itemFontSize': '14px',
+  '--iconFontSize': '14px',
+  '--activeColor': '#FF592A'
+};
+export function MoveInterActiveControlUI(props) {
+  const {
+    contentClsName,
+    wrapClsName,
+    CSSVariable = defaultCSSVariable,
+    menu = defaultMenu,
+    activeKey,
+    onClick
+  } = props;
+  const handClick = item => {
+    onClick && onClick(item.key);
+  };
+  return /*#__PURE__*/React.createElement(View
+  // @ts-ignore
+  , {
+    style: _objectSpread({}, CSSVariable),
+    className: clsx('ipc-player-plugin-active-control-wrap', wrapClsName)
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-active-control-title')
+  }, I18n.t('interactive')), /*#__PURE__*/React.createElement(ScrollView, {
+    style: {
+      flex: 1
+    },
+    scrollY: true
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-active-control', contentClsName)
+  }, menu.map(item => /*#__PURE__*/React.createElement(View, {
+    onClick: () => handClick(item),
+    key: item.key,
+    className: clsx('ipc-player-plugin-active-control-item', {
+      'ipc-player-plugin-active-control-item-active': activeKey === item.key
+    })
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-active-control-item-icon')
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-active-control-item-icon-mask')
+  }), /*#__PURE__*/React.createElement(View, {
+    className: clsx('icon-panel', item.iconName)
+  })), /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-active-control-item-title')
+  }, item.label))))));
+}