MediaStrip: hide arrows if there are fewer thumbnails than there are …

…thumbnails per slide
britannica · Jul 9, 2019 · 2c1fbe8 · 2c1fbe8
1 parent bbf8cbe
commit 2c1fbe8
Showing 1 changed file with 33 additions and 28 deletions.
diff --git a/src/components/MediaStrip/MediaStrip.js b/src/components/MediaStrip/MediaStrip.js
@@ -1,14 +1,13 @@
 import classnames from 'classnames';
-import React, { useEffect, useState } from 'react';
+import { debounce } from 'lodash-es';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import AssemblyProp from '../../prop-types/AssemblyProp';
 import { findCurrentMediaIndex } from '../MediaOverlay/helpers/helpers';
 import SnapSlider from '../SnapSlider/SnapSlider';
 import Thumbnail from '../Thumbnail/Thumbnail';
 import styles from './MediaStrip.module.scss';
 
-// todo: consider list virtualization, possibly react-window
-
 const THUMBNAIL_WIDTH = 110;
 const THUMBNAIL_HEIGHT = 75;
 
@@ -21,37 +20,43 @@ const MediaStrip = ({
   selectedAssembly,
   ThumbnailComponent,
 }) => {
-  const [initialIndex, setInitialIndex] = useState(selectedAssembly ? findCurrentMediaIndex(assemblies, selectedAssembly.assemblyId) : 0);
+  const sliderRef = useRef();
+  const initialIndex = useRef(selectedAssembly ? findCurrentMediaIndex(assemblies, selectedAssembly.assemblyId) : 0);
+  const [thumbnailsPerSlide, setThumbnailsPerSlide] = useState(0);
+
+
+  // On mount, set the number of thumbnails per slide
+
+  useEffect(() => {
+    window.addEventListener('resize', debounce(() => {
+      setThumbnailsPerSlide(Math.floor(sliderRef.current.clientWidth / THUMBNAIL_WIDTH));
+    }, 200));
+
+    setThumbnailsPerSlide(Math.floor(sliderRef.current.clientWidth / THUMBNAIL_WIDTH));
+  }, []);
 
   return (
     <div className={classnames(styles.MediaStrip, { [styles.captions]: captions }, 'd-print-none', className)}>
       <SnapSlider
-        scrollTo={THUMBNAIL_WIDTH * initialIndex}
-        /*initialIndex={initialIndex}
-        selectedIndex={findCurrentMediaIndex(assemblies, selectedAssembly.assemblyId)}
-        thumbnailWidth={THUMBNAIL_WIDTH}*/
+        scrollToOnMount={THUMBNAIL_WIDTH * initialIndex.current}
+        sliderRef={sliderRef}
+        hideArrows={assemblies.length <= thumbnailsPerSlide}
       >
         {/* todo: can we replace the track with react-window? animated example https://codesandbox.io/s/k2lpl9m0l3 */}
-        {({ trackWidth, scrollAmount }) => {
-          console.log(trackWidth, scrollAmount);
-
-          return (
-            assemblies.map(assembly => (
-              <Thumbnail
-                assembly={assembly}
-                key={assembly.assemblyId}
-                hasCaption={captions}
-                container={styles.MediaStrip}
-                height={THUMBNAIL_HEIGHT}
-                lazyContainer={lazyContainer}
-                isOpaque={opaque}
-                isSelected={selectedAssembly?.assemblyId === assembly.assemblyId}
-                width={THUMBNAIL_WIDTH}
-                ThumbnailComponent={ThumbnailComponent}
-              />
-            ))
-          );
-        }}
+        {assemblies.map(assembly => (
+          <Thumbnail
+            assembly={assembly}
+            key={assembly.assemblyId}
+            hasCaption={captions}
+            container={styles.MediaStrip}
+            height={THUMBNAIL_HEIGHT}
+            lazyContainer={lazyContainer}
+            isOpaque={opaque}
+            isSelected={selectedAssembly?.assemblyId === assembly.assemblyId}
+            width={THUMBNAIL_WIDTH}
+            ThumbnailComponent={ThumbnailComponent}
+          />
+        ))}
       </SnapSlider>
     </div>
   );