disable extra controls while slideshow is running

prabhuignoto · Feb 21, 2024 · 8c17f03 · 8c17f03
1 parent 16bfbd0
commit 8c17f03
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/timeline/timeline-toolbar.tsx b/src/components/timeline/timeline-toolbar.tsx
@@ -44,6 +44,7 @@ const TimelineToolbar: FunctionComponent<TimelineToolbarProps> = ({
     toolbarPosition,
     textDensity,
     isMobile,
+
   } = useContext(GlobalContext);
 
   // Define the toolbar items
@@ -104,7 +105,7 @@ const TimelineToolbar: FunctionComponent<TimelineToolbarProps> = ({
         onToggleDarkMode={toggleDarkMode}
         onPaused={onPaused}
       />
-      <ToolbarExtraControl $isMobile={isMobile}>
+      <ToolbarExtraControl $isMobile={isMobile} $slideShowRunning={slideShowRunning}>
         <ToolbarExtraControlChild key="quick-jump">
           {enableQuickJump ? (
             <QuickJump

diff --git a/src/components/timeline/timeline.style.ts b/src/components/timeline/timeline.style.ts
@@ -161,12 +161,16 @@ export const ToolbarWrapper = styled.div<{ position: 'top' | 'bottom' }>`
   order: ${(p) => (p.position === 'top' ? 0 : 1)};
 `;
 
-export const ToolbarExtraControl = styled.ul<{ $isMobile: boolean }>`
+export const ToolbarExtraControl = styled.ul<{
+  $isMobile: boolean;
+  $slideShowRunning: boolean;
+}>`
   display: flex;
   align-items: center;
   list-style: none;
   margin: 0;
   padding: 0.5rem;
+  visibility: ${(p) => (p.$slideShowRunning ? 'hidden' : 'visible')};
   // margin-top: ${(p) => (p.$isMobile ? '1rem' : '0')};
 `;