fix(home): initially disable left arrow slider

jwplayer · May 10, 2021 · 9f9bcea · 9f9bcea
1 parent 33afa32
commit 9f9bcea
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/src/components/Shelf/Shelf.module.scss b/src/components/Shelf/Shelf.module.scss
@@ -19,4 +19,19 @@
 
 .arrow {
   cursor: pointer;
+  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
+  &:hover {
+    transform: scale(1.2);
+  }
+  > svg {
+    width: 30px;
+    height: 30px;
+  }
+}
+.arrowDisabled {
+  opacity: 0.3;
+  > svg {
+    width: 30px;
+    height: 30px;
+  }
 }
diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { Playlist, PlaylistItem } from 'types/playlist';
 
 import Card from '../Card/Card';
@@ -43,6 +43,7 @@ const Shelf: React.FC<ShelfProps> = ({
   loading = false,
 }: ShelfProps) => {
   const breakpoint: Breakpoint = useBreakpoint();
+  const [isInitState, setIsInitState] = useState(true);
   const tilesToShow: number = featured ? featuredTileBreakpoints[breakpoint] : tileBreakpoints[breakpoint];
 
   if (!playlist) return null;
@@ -57,12 +58,26 @@ const Shelf: React.FC<ShelfProps> = ({
         transitionTime={loading ? '0s' : '0.3s'}
         spacing={12}
         renderLeftControl={(handleClick) => (
-          <div className={styles.arrow} onClick={handleClick}>
+          <div
+            className={isInitState ? styles.arrowDisabled : styles.arrow}
+            onClick={() => {
+              if (!isInitState) {
+                setIsInitState(false);
+                handleClick();
+              }
+            }}
+          >
             <ArrowLeft />
           </div>
         )}
         renderRightControl={(handleClick) => (
-          <div className={styles.arrow} onClick={handleClick}>
+          <div
+            className={styles.arrow}
+            onClick={() => {
+              setIsInitState(false);
+              handleClick();
+            }}
+          >
             <ArrowRight />
           </div>
         )}