Shrink vertical space taken by overlay iframe

killergerbah · Feb 24, 2024 · 966a3dd · 966a3dd
1 parent b0135da
commit 966a3dd
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 37 deletions.
diff --git a/common/app/components/Controls.tsx b/common/app/components/Controls.tsx
@@ -1087,14 +1087,16 @@ export default function Controls({
                                 </div>
                             </Grid>
                             {offsetEnabled && !showVolumeBar && !isReallySmallScreen && (
-                                <Grid item>
-                                    <SubtitleOffsetInput
-                                        inputRef={offsetInputRef}
-                                        offset={offset}
-                                        onOffset={handleOffsetChange}
-                                        disableKeyEvents={disableKeyEvents}
-                                    />
-                                </Grid>
+                                <Tooltip title={t('controls.subtitleOffset')!}>
+                                    <Grid item>
+                                        <SubtitleOffsetInput
+                                            inputRef={offsetInputRef}
+                                            offset={offset}
+                                            onOffset={handleOffsetChange}
+                                            disableKeyEvents={disableKeyEvents}
+                                        />
+                                    </Grid>
+                                </Tooltip>
                             )}
                             {playbackRateEnabled && !showVolumeBar && !isReallySmallScreen && (
                                 <Grid item>

diff --git a/common/app/components/SubtitleOffsetInput.tsx b/common/app/components/SubtitleOffsetInput.tsx
@@ -1,5 +1,4 @@
 import Input from '@material-ui/core/Input';
-import Tooltip from '@material-ui/core/Tooltip';
 import React, { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { useTranslation } from 'react-i18next';
@@ -90,18 +89,16 @@ export default function SubtitleOffsetInput({ inputRef, offset, onOffset, disabl
     }, [updateOffset, onOffset, disableKeyEvents, inputRef, offset]);
 
     return (
-        <Tooltip title={t('controls.subtitleOffset')!}>
-            <Input
-                style={{
-                    width: `${offsetInputWidth}ch`,
-                }}
-                inputRef={inputRef}
-                disableUnderline={true}
-                className={classes.input}
-                placeholder={'±' + Number(0).toFixed(2)}
-                onClick={handleNumberInputClicked}
-                onChange={(e) => setOffsetInputWidth(Math.max(5, e.target.value.length))}
-            />
-        </Tooltip>
+        <Input
+            style={{
+                width: `${offsetInputWidth}ch`,
+            }}
+            inputRef={inputRef}
+            disableUnderline={true}
+            className={classes.input}
+            placeholder={'±' + Number(0).toFixed(2)}
+            onClick={handleNumberInputClicked}
+            onChange={(e) => setOffsetInputWidth(Math.max(5, e.target.value.length))}
+        />
     );
 }
diff --git a/extension/src/controllers/mobile-video-overlay-controller.ts b/extension/src/controllers/mobile-video-overlay-controller.ts
@@ -184,7 +184,7 @@ export class MobileVideoOverlayController {
             {
                 key: 'ui',
                 html: () =>
-                    `<iframe style="border: 0; color-scheme: normal; width: 400px; height: 130px" src="${chrome.runtime.getURL(
+                    `<iframe style="border: 0; color-scheme: normal; width: 400px; height: 108px" src="${chrome.runtime.getURL(
                         'mobile-video-overlay-ui.html'
                     )}?src=${encodeURIComponent(this._context.video.src)}&anchor=${anchor}"/>`,
             },

diff --git a/extension/src/ui/components/MobileVideoOverlay.tsx b/extension/src/ui/components/MobileVideoOverlay.tsx
@@ -23,10 +23,10 @@ import { ExtensionSettingsStorage } from '../../services/extension-settings-stor
 import SubtitleOffsetInput from '@project/common/app/components/SubtitleOffsetInput';
 import { useMobileVideoOverlayLocation } from '../hooks/use-mobile-video-overlay-location';
 import { useMobileVideoOverlayModel } from '../hooks/use-mobile-video-overlay-model';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import { useI18n } from '../hooks/use-i18n';
 import { useTranslation } from 'react-i18next';
-import { Tooltip } from '@material-ui/core';
+import MuiTooltip from '@material-ui/core/Tooltip';
 import LogoIcon from '@project/common/components/LogoIcon';
 import CloseIcon from '@material-ui/icons/Close';
 import HoldableIconButton from './HoldableIconButton';
@@ -50,6 +50,12 @@ const useStyles = makeStyles({
     },
 });
 
+const anchor = new URLSearchParams(location.search).get('anchor') as 'top' | 'bottom';
+const Tooltip =
+    anchor === 'bottom'
+        ? withStyles({ tooltipPlacementBottom: { marginTop: 0, marginBottom: 16 } })(MuiTooltip)
+        : withStyles({ tooltipPlacementTop: { marginTop: 16, marginBottom: 0 } })(MuiTooltip);
+
 const GridContainer = ({ children, ...props }: { children: React.ReactNode } & GridProps) => {
     return (
         <Grid container alignContent="center" justifyContent="center" {...props}>
@@ -195,7 +201,7 @@ const MobileVideoOverlay = () => {
                     </Box>
                 </Grid>
                 <Grid item>
-                    <Tooltip title={miningButtonTooltip(model)!}>
+                    <Tooltip placement={anchor} title={miningButtonTooltip(model)!}>
                         {model.emptySubtitleTrack && model.recordingEnabled ? (
                             // Wrap in span so that Tooltip doesn't complain about disabled child. Spacing also looks better.
                             <span>
@@ -217,7 +223,7 @@ const MobileVideoOverlay = () => {
                     </Tooltip>
                 </Grid>
                 <Grid item>
-                    <Tooltip title={t('action.loadSubtitles')!}>
+                    <Tooltip placement={anchor} title={t('action.loadSubtitles')!}>
                         <span>
                             <IconButton disabled={model.recording} onClick={handleLoadSubtitles}>
                                 <SubtitlesIcon className={model.recording ? classes.inactiveButton : classes.button} />
@@ -228,7 +234,7 @@ const MobileVideoOverlay = () => {
                 {!model.emptySubtitleTrack && (
                     <>
                         <Grid item>
-                            <Tooltip title={t('action.increaseOffsetButton')!}>
+                            <Tooltip placement={anchor} title={t('action.increaseOffsetButton')!}>
                                 <span>
                                     <HoldableIconButton
                                         onClick={handleOffsetToPrevious}
@@ -244,15 +250,17 @@ const MobileVideoOverlay = () => {
                                 </span>
                             </Tooltip>
                         </Grid>
+                        <Tooltip placement={anchor} title={t('controls.subtitleOffset')!}>
+                            <Grid item>
+                                <SubtitleOffsetInput
+                                    inputRef={offsetInputRef}
+                                    offset={model.offset}
+                                    onOffset={handleOffset}
+                                />
+                            </Grid>
+                        </Tooltip>
                         <Grid item>
-                            <SubtitleOffsetInput
-                                inputRef={offsetInputRef}
-                                offset={model.offset}
-                                onOffset={handleOffset}
-                            />
-                        </Grid>
-                        <Grid item>
-                            <Tooltip title={t('action.decreaseOffsetButton')!}>
+                            <Tooltip placement={anchor} title={t('action.decreaseOffsetButton')!}>
                                 <span>
                                     <HoldableIconButton
                                         onClick={handleOffsetToNext}
@@ -271,7 +279,7 @@ const MobileVideoOverlay = () => {
                     </>
                 )}
                 <Grid item>
-                    <Tooltip title={t('action.hideOverlay')!}>
+                    <Tooltip placement={anchor} title={t('action.hideOverlay')!}>
                         <span>
                             <IconButton disabled={model.recording} onClick={handleDisableOverlay}>
                                 <CloseIcon className={classes.button} />