fix(home): disabled out of view cards

- disable cards that are out of view - also fixes tileDock itemSlice to correctly slice
jwplayer · May 10, 2021 · 03dcc0d · 03dcc0d
1 parent 9f9bcea
commit 03dcc0d
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 23 deletions.
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -11,9 +11,8 @@
     transform: scale(1.05);
 
     & .poster {
-      box-shadow: 0 0 0 3px var(--highlight-color, variables.$white),
-        0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%),
-        0 4px 5px rgb(0 0 0 / 20%);
+      box-shadow: 0 0 0 3px var(--highlight-color, variables.$white), 0 8px 10px rgb(0 0 0 / 14%),
+        0 3px 14px rgb(0 0 0 / 12%), 0 4px 5px rgb(0 0 0 / 20%);
     }
   }
 }
@@ -29,6 +28,16 @@
   }
 }
 
+.disabled {
+  &:hover {
+    transform: scale(1);
+    cursor: default;
+    & .poster {
+      box-shadow: none;
+    }
+  }
+}
+
 .poster {
   position: relative;
   overflow: hidden;

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -14,6 +14,7 @@ type CardProps = {
   seriesId?: string;
   posterAspect?: '1:1' | '2:1' | '2:3' | '4:3' | '5:3' | '16:9' | '9:16';
   featured?: boolean;
+  disabled?: boolean;
 };
 
 function Card({
@@ -25,8 +26,9 @@ function Card({
   seriesId,
   posterAspect = '16:9',
   featured = false,
+  disabled = false,
 }: CardProps): JSX.Element {
-  const cardClassName = classNames(styles.card, { [styles.featured]: featured });
+  const cardClassName = classNames(styles.card, { [styles.featured]: featured, [styles.disabled]: disabled });
   const posterClassNames = classNames(styles.poster, styles[`aspect${posterAspect.replace(':', '')}`]);
   const metaData = () => {
     if (seriesId) {

diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -61,10 +61,8 @@ const Shelf: React.FC<ShelfProps> = ({
           <div
             className={isInitState ? styles.arrowDisabled : styles.arrow}
             onClick={() => {
-              if (!isInitState) {
-                setIsInitState(false);
-                handleClick();
-              }
+              setIsInitState(false);
+              handleClick();
             }}
           >
             <ArrowLeft />
@@ -81,7 +79,7 @@ const Shelf: React.FC<ShelfProps> = ({
             <ArrowRight />
           </div>
         )}
-        renderTile={(item) => {
+        renderTile={(item, isInView) => {
           if (loading || typeof item === 'number') {
             return <Card title={'...'} duration={0} featured={featured} />;
           }
@@ -91,9 +89,10 @@ const Shelf: React.FC<ShelfProps> = ({
               title={item.title}
               duration={item.duration}
               posterSource={item.image}
-              onClick={() => onCardClick(item)}
+              onClick={() => (isInView ? onCardClick(item) : null)}
               onHover={() => onCardHover(item)}
               featured={featured}
+              disabled={!isInView}
             />
           );
         }}

diff --git a/src/components/TileDock/TileDock.tsx b/src/components/TileDock/TileDock.tsx
@@ -15,7 +15,7 @@ export type TileDockProps<T> = {
   showControls?: boolean;
   animated?: boolean;
   transitionTime?: string;
-  renderTile: (item: T) => JSX.Element;
+  renderTile: (item: T, isInView: boolean) => JSX.Element;
   renderLeftControl?: (handleClick: () => void) => JSX.Element;
   renderRightControl?: (handleClick: () => void) => JSX.Element;
 };
@@ -49,11 +49,11 @@ const sliceItems = <T,>(
 
   const sliceFrom: number = index;
   const sliceTo: number = index + tilesToShow * 3;
-  const cycleModeEndlessCompensation: number = cycleMode === 'endless' ? tilesToShow : 1;
-  const listStartClone: T[] = items.slice(0, tilesToShow + cycleModeEndlessCompensation);
-  const listEndClone: T[] = items.slice(0 - tilesToShow + 1);
+  const cycleModeEndlessCompensation: number = cycleMode === 'endless' ? tilesToShow : 0;
+  const listStartClone: T[] = items.slice(0, tilesToShow + cycleModeEndlessCompensation + 1);
+  const listEndClone: T[] = items.slice(0 - (tilesToShow + cycleModeEndlessCompensation + 1));
   const itemsWithClones: T[] = [...listEndClone, ...items, ...listStartClone];
-  const itemsSlice: T[] = itemsWithClones.slice(sliceFrom, sliceTo);
+  const itemsSlice: T[] = itemsWithClones.slice(sliceFrom, sliceTo + 2);
 
   return makeTiles(items, itemsSlice);
 };
@@ -82,7 +82,7 @@ const TileDock = <T extends unknown>({
   const frameRef = useRef<HTMLUListElement>() as React.MutableRefObject<HTMLUListElement>;
   const tileWidth: number = 100 / tilesToShow;
   const isMultiPage: boolean = items.length > tilesToShow;
-  const transformWithOffset: number = isMultiPage ? 100 - tileWidth * (tilesToShow - 1) + transform : 0;
+  const transformWithOffset: number = isMultiPage ? 100 - tileWidth * (tilesToShow + 1) + transform : 0;
 
   const tileList: Tile<T>[] = useMemo(() => {
     return sliceItems<T>(items, isMultiPage, index, tilesToShow, cycleMode);
@@ -190,25 +190,22 @@ const TileDock = <T extends unknown>({
         {tileList.map((tile: Tile<T>, listIndex) => {
           // Todo:
           // const isTabable = isAnimating || !isMultiPage || (listIndex > tilesToShow - 1 && listIndex < tilesToShow * 2);
-          const isVisible = true; // Todo: hide all but visible?
-          const isOpaque =
-            !isMultiPage ||
-            (listIndex > tilesToShow - (slideOffset + 2) && listIndex < tilesToShow * 2 - slideOffset - 1);
+          const isInView =
+            !isMultiPage || (listIndex > tilesToShow - slideOffset && listIndex < tilesToShow * 2 + 1 - slideOffset);
 
           return (
             <li
               key={tile.key}
               style={{
                 width: `${tileWidth}%`,
-                visibility: isVisible ? 'visible' : 'hidden',
                 paddingLeft: spacing / 2,
                 paddingRight: spacing / 2,
                 boxSizing: 'border-box',
-                opacity: isOpaque ? 1 : 0.1,
+                opacity: isInView ? 1 : 0.1,
                 transition: 'opacity .2s ease-in 0s',
               }}
             >
-              {renderTile(tile.item)}
+              {renderTile(tile.item, isInView)}
             </li>
           );
         })}