Local video: Change alert anchor depending on subtitle track 0 alignment

killergerbah · Jan 5, 2025 · 5587851 · 5587851
1 parent b5d7060
commit 5587851
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/common/app/components/Alert.tsx b/common/app/components/Alert.tsx
@@ -8,11 +8,16 @@ const useAlertStyles = makeStyles({
         display: 'flex',
         justifyContent: 'center',
         position: 'fixed',
-        top: '10vh',
         width: '100%',
         pointerEvents: 'none',
         zIndex: 2000,
     },
+    bottom: {
+        bottom: '10vh',
+    },
+    top: {
+        top: '10vh',
+    },
 });
 
 interface Props {
@@ -21,6 +26,7 @@ interface Props {
     onClose: () => void;
     severity: Color | undefined;
     disableAutoHide?: boolean;
+    anchor?: 'top' | 'bottom';
     children: React.ReactNode;
 }
 
@@ -33,9 +39,9 @@ export default function Alert(props: Props) {
             return () => clearTimeout(timeout);
         }
     }, [props.open, props.autoHideDuration, props.disableAutoHide, props.onClose]);
-
+    const anchorClass = props.anchor === 'bottom' ? classes.bottom : classes.top;
     return (
-        <div className={classes.root}>
+        <div className={`${classes.root} ${anchorClass}`}>
             <Grow in={props.open}>
                 <MuiAlert severity={props.severity}>{props.children}</MuiAlert>
             </Grow>

diff --git a/common/app/components/VideoPlayer.tsx b/common/app/components/VideoPlayer.tsx
@@ -1544,6 +1544,7 @@ export default function VideoPlayer({
         };
     };
     const baseBottomSubtitleOffset = !playing() && isMobile ? overlayContainerHeight : 0;
+    const alertAnchor = subtitleAlignments[0] === 'top' ? 'bottom' : 'top';
 
     if (!playerChannelSubscribed) {
         return null;
@@ -1557,6 +1558,7 @@ export default function VideoPlayer({
                 onClose={handleAlertClosed}
                 autoHideDuration={3000}
                 severity={alertSeverity}
+                anchor={alertAnchor}
             >
                 {alertMessage}
             </Alert>