Fix overlay blocking too much of the video on small screens

killergerbah · Jul 21, 2024 · 5ca8416 · 5ca8416
1 parent c83dacb
commit 5ca8416
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/extension/src/controllers/mobile-video-overlay-controller.ts b/extension/src/controllers/mobile-video-overlay-controller.ts
@@ -6,12 +6,14 @@ import {
     VideoToExtensionCommand,
 } from '@project/common';
 import Binding from '../services/binding';
-import { CachingElementOverlay, ElementOverlay, OffsetAnchor } from '../services/element-overlay';
+import { CachingElementOverlay, OffsetAnchor } from '../services/element-overlay';
 import { adjacentSubtitle } from '@project/common/key-binder';
 
+const smallScreenVideoHeighThreshold = 300;
+
 export class MobileVideoOverlayController {
     private readonly _context: Binding;
-    private _overlay: ElementOverlay;
+    private _overlay: CachingElementOverlay;
     private _pauseListener?: () => void;
     private _playListener?: () => void;
     private _seekedListener?: () => void;
@@ -24,6 +26,7 @@ export class MobileVideoOverlayController {
         sendResponse: (response?: any) => void
     ) => void;
     private _bound = false;
+    private _smallScreen = false;
 
     constructor(context: Binding, offsetAnchor: OffsetAnchor) {
         this._context = context;
@@ -187,15 +190,25 @@ export class MobileVideoOverlayController {
 
     private _doShow() {
         const anchor = this._overlay.offsetAnchor === OffsetAnchor.bottom ? 'bottom' : 'top';
+        const smallScreen = this._context.video.getBoundingClientRect().height < smallScreenVideoHeighThreshold;
+        const height = smallScreen ? 64 : 108;
+        const tooltips = !smallScreen;
+
+        if (smallScreen !== this._smallScreen) {
+            this._overlay.uncacheHtml();
+            this._smallScreen = smallScreen;
+        }
+
         this._overlay.setHtml([
             {
                 key: 'ui',
                 html: () =>
-                    `<iframe style="border: 0; color-scheme: normal; width: 400px; height: 108px" src="${chrome.runtime.getURL(
+                    `<iframe style="border: 0; color-scheme: normal; width: 400px; height: ${height}px" src="${chrome.runtime.getURL(
                         'mobile-video-overlay-ui.html'
-                    )}?src=${encodeURIComponent(this._context.video.src)}&anchor=${anchor}"/>`,
+                    )}?src=${encodeURIComponent(this._context.video.src)}&anchor=${anchor}&tooltips=${tooltips}"/>`,
             },
         ]);
+
         this._showing = true;
     }
 

diff --git a/extension/src/ui/components/MobileVideoOverlay.tsx b/extension/src/ui/components/MobileVideoOverlay.tsx
@@ -7,7 +7,7 @@ import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
 import SubtitlesIcon from '@material-ui/icons/Subtitles';
-import { useCallback, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import {
     AsbPlayerToVideoCommandV2,
     CopySubtitleMessage,
@@ -27,7 +27,7 @@ import makeStyles from '@material-ui/core/styles/makeStyles';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { useI18n } from '../hooks/use-i18n';
 import { useTranslation } from 'react-i18next';
-import MuiTooltip from '@material-ui/core/Tooltip';
+import MuiTooltip, { TooltipProps } from '@material-ui/core/Tooltip';
 import LogoIcon from '@project/common/components/LogoIcon';
 import CloseIcon from '@material-ui/icons/Close';
 import HoldableIconButton from './HoldableIconButton';
@@ -49,13 +49,23 @@ const useStyles = makeStyles({
         borderRadius: 16,
     },
 });
+const params = new URLSearchParams(location.search);
+const anchor = params.get('anchor') as 'top' | 'bottom';
+const tooltipsEnabled = params.get('tooltips') === 'true';
 
-const anchor = new URLSearchParams(location.search).get('anchor') as 'top' | 'bottom';
-const Tooltip =
+const DisabledTooltip = ({ children }: { children: React.ReactNode } & TooltipProps) => {
+    return children;
+};
+
+let Tooltip =
     anchor === 'bottom'
         ? withStyles({ tooltipPlacementBottom: { marginTop: 0, marginBottom: 16 } })(MuiTooltip)
         : withStyles({ tooltipPlacementTop: { marginTop: 16, marginBottom: 0 } })(MuiTooltip);
 
+if (!tooltipsEnabled) {
+    Tooltip = DisabledTooltip;
+}
+
 const GridContainer = ({ children, ...props }: { children: React.ReactNode } & GridProps) => {
     return (
         <Grid container alignContent="center" justifyContent="center" {...props}>