@ray-js/ipc-player-integration 0.0.1-beta-32 → 0.0.1-beta-34

package/lib/plugins/moveInteractiveControl/moveInteractiveControlUI.less

@@ -0,0 +1,71 @@
+.ipc-player-plugin-active-control-wrap {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bgColor);
+}
+
+.ipc-player-plugin-active-control {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: calc(8px * var(--ipc-player-size-scale, 1));
+  padding: calc(16px * var(--ipc-player-size-scale, 1));
+  padding-top: 0;
+}
+
+.ipc-player-plugin-active-control-title {
+  position: relative;
+  text-align: center;
+  font-size: calc(16px * var(--ipc-player-size-scale, 1));
+  font-weight: 600;
+  padding: calc(16px * var(--ipc-player-size-scale, 1));
+  color: var(--titleColor);
+}
+.ipc-player-plugin-active-control-item {
+  border-radius: calc(16px * var(--ipc-player-size-scale, 1));
+  background: var(--itemBgColor);
+  padding: calc(18px * var(--ipc-player-size-scale, 1)) calc(16px * var(--ipc-player-size-scale, 1));
+  font-size: calc(var(--itemFontSize) * var(--ipc-player-size-scale, 1));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--color);
+  &.ipc-player-plugin-active-control-item-active {
+    color: var(--activeColor);
+    .ipc-player-plugin-active-control-item-icon {
+      color: var(--activeColor);
+      .ipc-player-plugin-active-control-item-icon-mask {
+        background: var(--activeColor);
+        opacity: 0.05;
+      }
+    }
+  }
+}
+.ipc-player-plugin-active-control-item-icon {
+  position: relative;
+  z-index: 1;
+  width: calc(42px * var(--ipc-player-size-scale, 1));
+  height: calc(42px * var(--ipc-player-size-scale, 1));
+  border-radius: calc(42px * var(--ipc-player-size-scale, 1));
+  margin-bottom: calc(11px * var(--ipc-player-size-scale, 1));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(16px * var(--ipc-player-size-scale, 1));
+  color: var(--color);
+  overflow: hidden;
+  .ipc-player-plugin-active-control-item-icon-mask {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    background: var(--iconBgColor);
+    opacity: 1;
+  }
+}
+.ipc-player-plugin-active-control-item-title {
+  width: calc(70px * var(--ipc-player-size-scale, 1));
+  white-space: nowrap; /* 防止文本换行 */
+  overflow: hidden;    /* 隐藏溢出文本 */
+  text-overflow: ellipsis; /* 使用省略号表示溢出文本 */
+}

package/lib/plugins/ptz/ptz.d.ts

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

package/lib/plugins/ptz/ptz.js

@@ -1,8 +1,9 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { View, Text } from '@ray-js/ray';
 import clsx from 'clsx';
-import React from 'react';
-import { useStore, updateAtom } from '../../ctx/store';
+import React, { useEffect, useState, useContext } from 'react';
+import { UIEventContext } from '../../ui/context';
+import { useStore } from '../../ctx/store';
 import { ptzControlId } from '../../ui/constant';
 import './ptz.less';
 import { PtzControl } from './ptzControl';
@@ -10,20 +11,29 @@ export const Ptz = props => {
   const {
     IPCPlayerContext,
     screenType: screenTypeAtom,
-    ptzActive,
     addContent,
     deleteContent,
+    showContent,
+    hideContent,
     className
   } = props;
   const {
     screenType,
-    isPtzActive,
     brandColor
   } = useStore({
     screenType: screenTypeAtom,
-    isPtzActive: ptzActive,
     brandColor: props.brandColor
   });
+  const [isPtzActive, setIsPtzActive] = useState(false);
+  const {
+    event
+  } = useContext(UIEventContext);
+  useEffect(() => {
+    if (screenType === 'vertical') {
+      event.emit('ptzControlHide');
+      setIsPtzActive(false);
+    }
+  }, [screenType]);
   if (screenType === 'vertical') {
     return null;
   }
@@ -31,6 +41,7 @@ export const Ptz = props => {
     className: clsx(className),
     onClick: () => {
       if (!isPtzActive) {
+        showContent('bottomLeft', 'FullSmallIntercom');
         // 添加ptz空间
         addContent('absolute', {
           id: ptzControlId,
@@ -40,10 +51,13 @@ export const Ptz = props => {
           absoluteContentClassName: 'ipc-player-plugin-full-screen-ptz-control-wrap',
           initProps: _objectSpread({}, props)
         });
+        event.emit('ptzControlShow');
       } else {
-        deleteContent('absolute', ptzControlId);
+        // deleteContent('absolute', ptzControlId);
+        hideContent('bottomLeft', 'FullSmallIntercom');
+        event.emit('ptzControlHide');
       }
-      updateAtom(ptzActive, !isPtzActive);
+      setIsPtzActive(!isPtzActive);
     }
   }, /*#__PURE__*/React.createElement(Text, {
     className: clsx('icon-panel', 'icon-panel-ptz', 'ipc-player-plugin-ptz-text-icon'),

package/lib/plugins/ptz/ptz.less

@@ -1,3 +1,5 @@
+@animation-time: 0.3s;
+
 .ipc-player-plugin-ptz-text-icon {
   color: var(--iconColor);
   font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
@@ -13,20 +15,38 @@
 
 .ipc-player-plugin-full-screen-ptz-control-wrap {
   position: absolute;
-  bottom: 10px;
+  bottom: 32px;
   // transform: translate(0, -20%);
-  right: calc(10px * var(--ipc-player-size-scale, 1));;
+  right: calc(32px * var(--ipc-player-size-scale, 1));;
   z-index: 3;
 }
 
 
+@keyframes ipc-player-plugin-full-screen-ptz-control-move-in {
+  0% {
+    transform: translate(0, 200%); /* 从下方滑入 */
+  }
+  100% {
+    transform: translate(0, 0); /* 移动到目标位置 */
+  }
+}
+
+@keyframes ipc-player-plugin-full-screen-ptz-control-move-out {
+  0% {
+    transform: translate(0, 0); /* 从当前位置开始 */
+  }
+  100% {
+    transform: translate(0, 200%); /* 向下滑出，隐藏 */
+  }
+}
 
 .ipc-player-plugin-full-screen-ptz-control {
   transform: translate(0, 0);
-  transition: transform ease-in 0.3s;
-  &.ipc-player-plugin-full-screen-ptz-control-hide {
-    transform: translate(0, 200%);
-  }
+  transition: @animation-time ease-in;
+  animation: ipc-player-plugin-full-screen-ptz-control-move-in @animation-time ease-in-out forwards;
+    &.ipc-player-plugin-full-screen-ptz-control-hide {
+      animation: ipc-player-plugin-full-screen-ptz-control-move-out @animation-time ease-in-out forwards;
+    }
 }
 
 .arrow-icon-wrapper {

package/lib/plugins/ptz/ptzControl.js

@@ -1,10 +1,11 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { CoverView } from '@ray-js/ray';
 import clsx from 'clsx';
 import _find from 'lodash/find';
 import _get from 'lodash/get';
 import IpcPtzZoom from '@ray-js/ipc-ptz-zoom';
 import IpcUtils from '@ray-js/ray-ipc-utils';
+import { useMemoizedFn } from '../../hooks';
 import { useComponentHideState } from '../../ui/hooks';
 import { UIEventContext } from '../../ui/context';
 import { useStore } from '../../ctx/store';
@@ -40,19 +41,27 @@ export const PtzControl = props => {
   } = props;
   const {
     screenType,
-    brandColor,
-    fullResolutionActive
+    brandColor
   } = useStore({
     screenType: props.screenType,
-    brandColor: props.brandColor,
-    fullResolutionActive: props.fullResolutionActive
+    brandColor: props.brandColor
   });
-  const [shouldHide] = useComponentHideState(screenType);
+  const [shouldHide] = useComponentHideState();
+  const [isPtzActive, setIsPtzActive] = useState(true);
   const {
     event
   } = useContext(UIEventContext);
   const ptzTimeId = useRef(null);
   const ptzData = useRef(getPtzData(devId));
+  const onPtzControlHide = useMemoizedFn(() => {
+    setIsPtzActive(false);
+  });
+  useEffect(() => {
+    event.on('ptzControlHide', onPtzControlHide);
+    return () => {
+      event.off('ptzControlHide', onPtzControlHide);
+    };
+  }, []);
   useEffect(() => {
     return () => {
       if (ptzTimeId.current) {
@@ -63,7 +72,7 @@ export const PtzControl = props => {
   }, []);
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-plugin-full-screen-ptz-control', {
-      'ipc-player-plugin-full-screen-ptz-control-hide': shouldHide || fullResolutionActive
+      'ipc-player-plugin-full-screen-ptz-control-hide': shouldHide || !isPtzActive
     })
   }, /*#__PURE__*/React.createElement(IpcPtzZoom, {
     ptzSize: "172px",

package/lib/plugins/resolution/fullResolutionControl.js

@@ -1,31 +1,46 @@
-import React from 'react';
+import React, { useCallback, useState, useContext, useEffect } from 'react';
 import { Text, View } from '@ray-js/ray';
 import clsx from 'clsx';
 import Strings from '../../i18n';
-import { useComponentHideState } from '../../ui/hooks';
+import { useMemoizedFn } from '../../hooks';
 import { useStore } from '../../ctx/store';
+import { UIEventContext } from '../../ui/context';
+import { playerTap } from '../../ui/constant';
 import './resolution.less';
 export const FullResolutionControl = props => {
   const {
-    setResolution,
-    setFullResolutionActive
+    setResolution
   } = props;
   const {
     screenType,
-    fullResolutionActive,
     resolution,
     resolutionList,
     brandColor
   } = useStore({
     screenType: props.screenType,
-    fullResolutionActive: props.fullResolutionActive,
     resolutionList: props.resolutionList,
     brandColor: props.brandColor,
     resolution: props.resolution
   });
-  const [shouldHide] = useComponentHideState(screenType);
-  const changeResolution = value => {
-    console.log('________', value);
+  const {
+    event
+  } = useContext(UIEventContext);
+  const [hide, setHide] = useState(false);
+  const onShowFullResolutionControl = useMemoizedFn(() => {
+    setHide(false);
+  });
+  const onPlayerTap = useMemoizedFn(() => {
+    setHide(true);
+  });
+  useEffect(() => {
+    event.on('showFullResolutionControl', onShowFullResolutionControl);
+    event.on(playerTap, onPlayerTap);
+    return () => {
+      event.off('showFullResolutionControl', onShowFullResolutionControl);
+      event.off(playerTap, onPlayerTap);
+    };
+  }, []);
+  const changeResolution = useCallback(value => {
     if (value === resolution) {
       ty.showToast({
         icon: 'none',
@@ -33,12 +48,11 @@ export const FullResolutionControl = props => {
       });
     } else {
       setResolution(value);
-      setFullResolutionActive(false);
     }
-  };
+  }, [resolution]);
   return /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-full-resolution-control', {
-      'ipc-player-plugin-full-resolution-control-hide': shouldHide || !fullResolutionActive
+      'ipc-player-plugin-full-resolution-control-hide': hide
     })
   }, resolutionList.map(item => /*#__PURE__*/React.createElement(Text, {
     onClick: () => changeResolution(item),

package/lib/plugins/resolution/resolution.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
-import { ComponentConfigProps } from '../../interface';
+import { ComponentConfigProps, ScreenType } from '../../interface';
 import './resolution.less';
-export declare const Resolution: (props: ComponentConfigProps) => React.JSX.Element;
+export type ChangeResolutionWhenClick = ScreenType[];
+type Props = ComponentConfigProps & {
+    className?: string;
+    changeResolutionWhenClick?: ChangeResolutionWhenClick;
+};
+export declare const Resolution: (props: Props) => React.JSX.Element;
+export {};

package/lib/plugins/resolution/resolution.js

@@ -4,52 +4,54 @@ import clsx from 'clsx';
 import React, { useContext } from 'react';
 import Strings from '../../i18n';
 import { FullResolutionControl } from './fullResolutionControl';
-import { fullResolutionId, pauseTimeToHideAllComponent } from '../../ui/constant';
+import { fullResolutionId, pauseTimeToHideAllComponent, hideAllComponent } from '../../ui/constant';
 import { UIEventContext } from '../../ui/context';
 import { useStore } from '../../ctx/store';
 import './resolution.less';
+const defaultChangeResolutionWhenClick = ['full'];
 export const Resolution = props => {
   const {
     IPCPlayerContext,
     setResolution,
     addContent,
-    deleteContent,
-    setFullResolutionActive,
-    className
+    hasContent,
+    className,
+    changeResolutionWhenClick = defaultChangeResolutionWhenClick
   } = props;
   const {
     resolution,
     screenType
   } = useStore({
     resolution: props.resolution,
-    screenType: props.screenType,
-    fullResolutionActive: props.fullResolutionActive
+    screenType: props.screenType
   });
   const {
     event
   } = useContext(UIEventContext);
   return /*#__PURE__*/React.createElement(View, {
     onClick: () => {
-      if (screenType === 'full') {
-        console.log('dsakdhjksahdhsadsahdkhskahdkshk');
-        // 更改全屏清晰度展开状态
-        setFullResolutionActive(true);
-        // 移除全屏清晰度空间
-        deleteContent('absolute', fullResolutionId);
-        // 添加全屏清晰度空间
-        addContent('absolute', {
-          id: fullResolutionId,
-          content: props => {
-            return /*#__PURE__*/React.createElement(FullResolutionControl, props);
-          },
-          absoluteContentClassName: 'ipc-player-plugin-full-resolution-control-wrap',
-          initProps: _objectSpread({}, props)
-        });
-        event.emit(pauseTimeToHideAllComponent);
+      event.emit('resolutionBtnControlClick');
+      if (!(changeResolutionWhenClick !== null && changeResolutionWhenClick !== void 0 && changeResolutionWhenClick.length)) return false;
+      if (screenType === 'full' && defaultChangeResolutionWhenClick.includes(screenType)) {
+        event.emit(hideAllComponent);
+        if (hasContent('absolute', fullResolutionId)) {
+          event.emit('showFullResolutionControl');
+        } else {
+          addContent('absolute', {
+            id: fullResolutionId,
+            content: props => {
+              return /*#__PURE__*/React.createElement(FullResolutionControl, props);
+            },
+            absoluteContentClassName: 'ipc-player-plugin-full-resolution-control-wrap',
+            initProps: _objectSpread({}, props)
+          });
+        }
         return false;
       }
+      if (screenType === 'vertical' && defaultChangeResolutionWhenClick.includes(screenType)) {
+        setResolution(resolution === 'HD' ? 'SD' : 'HD');
+      }
       event.emit(pauseTimeToHideAllComponent);
-      setResolution(resolution === 'HD' ? 'SD' : 'HD');
       return true;
     },
     className: clsx(className, screenType === 'vertical' ? 'ipc-player-plugin-resolution-vertical' : 'ipc-player-plugin-resolution-full')

package/lib/plugins/resolution/resolution.less

@@ -1,3 +1,5 @@
+@animation-time: 0.3s;
+
 .ipc-player-plugin-resolution {
   background-color: rgba(255,255,255,0.2);
   padding: calc(4px * var(--ipc-player-size-scale, 1)) calc(5px * var(--ipc-player-size-scale, 1)) !important;
@@ -15,15 +17,15 @@
 }
 
 .ipc-player-plugin-full-resolution-control {
-  transform: translate(0, 0);
   height: 100%;
-  transition: transform 0.3s ease-in, opacity 0.3s ease-in, width 0.3s ease-in;
+  transition: transform @animation-time ease-in, opacity @animation-time ease-in, width @animation-time ease-in;
   width: 200px; 
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: rgba(0,0,0,0.9);
+  animation: ipc-player-plugin-full-resolution-control-move-in @animation-time ease-in-out;
     &.ipc-player-plugin-full-resolution-control-hide {
       transform: translate(300%, 0);
       opacity: 0;
@@ -43,6 +45,15 @@
   z-index: 345;
 }
 
+@keyframes ipc-player-plugin-full-resolution-control-move-in {
+  from {
+    transform: translate(300%, 0);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+
 .ipc-player-plugin-full-resolution-control-text {
   font-size: 14px;
   font-weight: 400;

package/lib/plugins/verticalSmallIntercom/verticalSmallIntercom.d.ts

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

package/lib/plugins/verticalSmallIntercom/verticalSmallIntercom.js

@@ -17,7 +17,6 @@ export function VerticalSmallIntercom(props) {
     brandColor
   } = useStore({
     screenType: props.screenType,
-    ptzActive: props.ptzActive,
     verticalMic: props.verticalMic,
     intercomMode: props.intercomMode,
     brandColor: props.brandColor

package/lib/plugins/videoBitKBP/videoBitKBP.d.ts

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

package/lib/ui/bottomLeftContent.js

@@ -9,14 +9,12 @@ const BottomLeftContent = _ref => {
     children
   } = _ref;
   const {
-    screenType,
-    fullResolutionActive
+    screenType
   } = useStore({
     screenType: ctx.screenType,
-    playState: ctx.playState,
-    fullResolutionActive: ctx.fullResolutionActive
+    playState: ctx.playState
   });
-  const [shouldHide] = useComponentHideState(screenType);
+  const [shouldHide] = useComponentHideState();
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-bottom-left-content-wrap')
   }, /*#__PURE__*/React.createElement(View, {
@@ -25,8 +23,8 @@ const BottomLeftContent = _ref => {
       paddingLeft: screenType === 'vertical' ? 0 : '25px'
     },
     className: clsx('ipc-player-bottom-left-content-container', {
-      'ipc-player-bottom-left-content-hide': shouldHide || fullResolutionActive,
-      'ipc-player-bottom-left-content-show': !shouldHide && !fullResolutionActive
+      // 'ipc-player-bottom-left-content-hide': shouldHide,
+      // 'ipc-player-bottom-left-content-show': !shouldHide,
     })
   }, children));
 };

package/lib/ui/bottomRightContent.js

@@ -9,14 +9,12 @@ const BottomRightContent = _ref => {
     children
   } = _ref;
   const {
-    screenType,
-    fullResolutionActive
+    screenType
   } = useStore({
     screenType: ctx.screenType,
-    playState: ctx.playState,
-    fullResolutionActive: ctx.fullResolutionActive
+    playState: ctx.playState
   });
-  const [shouldHide] = useComponentHideState(screenType);
+  const [shouldHide] = useComponentHideState();
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-bottom-right-content-wrap')
   }, /*#__PURE__*/React.createElement(View, {
@@ -25,8 +23,8 @@ const BottomRightContent = _ref => {
       paddingRight: screenType === 'vertical' ? 0 : '25px'
     },
     className: clsx('ipc-player-bottom-right-content-container', {
-      'ipc-player-bottom-right-content-hide': shouldHide || fullResolutionActive,
-      'ipc-player-bottom-right-content-show': !shouldHide && !fullResolutionActive
+      // 'ipc-player-bottom-right-content-hide': shouldHide,
+      // 'ipc-player-bottom-right-content-show': !shouldHide,
     })
   }, children));
 };

package/lib/ui/constant.d.ts

@@ -4,6 +4,7 @@ export declare const playerTap = "playerTap";
 export declare const pauseTimeToHideAllComponent = "pauseTimeToHideAllComponent";
 export declare const startTimeToHideAllComponent = "startTimeToHideAllComponent";
 export declare const voiceIntercomId = "voiceIntercomId";
+export declare const fullTravelRouteControlId = "fullTravelRouteControl";
 export declare const verticalScreenId = "verticalScreenId";
 export declare const ptzControlId = "ptzControlId";
 export declare const fullResolutionId = "fullResolutionId";

package/lib/ui/constant.js

@@ -4,6 +4,7 @@ export const playerTap = 'playerTap';
 export const pauseTimeToHideAllComponent = 'pauseTimeToHideAllComponent';
 export const startTimeToHideAllComponent = 'startTimeToHideAllComponent';
 export const voiceIntercomId = 'voiceIntercomId';
+export const fullTravelRouteControlId = 'fullTravelRouteControl';
 export const verticalScreenId = 'verticalScreenId';
 export const ptzControlId = 'ptzControlId';
 export const fullResolutionId = 'fullResolutionId';

package/lib/ui/context.d.ts

@@ -2,5 +2,6 @@
 import { EventInstance } from './event';
 export type UIEvent = {
     event: EventInstance;
+    componentHideState: boolean;
 };
 export declare const UIEventContext: import("react").Context<UIEvent>;

package/lib/ui/context.js

@@ -4,5 +4,6 @@ export const UIEventContext = /*#__PURE__*/createContext({
     off: () => null,
     on: () => null,
     emit: () => null
-  }
+  },
+  componentHideState: false
 });

package/lib/ui/hooks.d.ts

@@ -1 +1 @@
-export declare const useComponentHideState: (screenType: any) => boolean[];
+export declare const useComponentHideState: () => boolean[];

package/lib/ui/hooks.js

@@ -1,26 +1,8 @@
-import { useContext, useState, useEffect } from 'react';
+import { useContext } from 'react';
 import { UIEventContext } from './context';
-import { hideAllComponent, showAllComponent } from './constant';
 export const useComponentHideState = () => {
   const {
-    event
+    componentHideState
   } = useContext(UIEventContext);
-  const [shouldHide, setShouldHide] = useState(false);
-  const listenHideEvent = () => {
-    // 横竖屏都支持点击隐藏
-    // if (screenType === 'vertical') return;
-    setShouldHide(true);
-  };
-  const listenShowEvent = () => {
-    setShouldHide(false);
-  };
-  useEffect(() => {
-    event.on(hideAllComponent, listenHideEvent);
-    event.on(showAllComponent, listenShowEvent);
-    return () => {
-      event.off(hideAllComponent, listenHideEvent);
-      event.off(showAllComponent, listenShowEvent);
-    };
-  }, [listenHideEvent]);
-  return [shouldHide];
+  return [componentHideState];
 };

package/lib/ui/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ui';
 export * from './hooks';
 export * from './context';
+export type * from './event';

package/lib/ui/topLeftContent.d.ts

@@ -4,5 +4,5 @@ type Props = {
     ctx: ReturnType<UseCtx>;
     children: React.ReactNode;
 };
-declare const TopLeftContent: ({ ctx, children }: Props) => React.JSX.Element;
-export default TopLeftContent;
+declare const _default: React.MemoExoticComponent<({ ctx, children }: Props) => React.JSX.Element>;
+export default _default;

package/lib/ui/topLeftContent.js

@@ -9,14 +9,12 @@ const TopLeftContent = _ref => {
     children
   } = _ref;
   const {
-    screenType,
-    fullResolutionActive
+    screenType
   } = useStore({
     screenType: ctx.screenType,
-    playState: ctx.playState,
-    fullResolutionActive: ctx.fullResolutionActive
+    playState: ctx.playState
   });
-  const [shouldHide] = useComponentHideState(screenType);
+  const [shouldHide] = useComponentHideState();
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-top-left-content-wrap')
   }, /*#__PURE__*/React.createElement(View, {
@@ -25,9 +23,9 @@ const TopLeftContent = _ref => {
       paddingLeft: screenType === 'vertical' ? 0 : '25px'
     },
     className: clsx('ipc-player-top-left-content-container', {
-      'ipc-player-top-left-content-hide': shouldHide || fullResolutionActive,
-      'ipc-player-top-left-content-show': !shouldHide && !fullResolutionActive
+      // 'ipc-player-top-left-content-hide': shouldHide,
+      // 'ipc-player-top-left-content-show': !shouldHide,
     })
   }, children));
 };
-export default TopLeftContent;
+export default /*#__PURE__*/React.memo(TopLeftContent);