Merge branch 'develop' into feat/sprint-4-fixes-and-improvements

# Conflicts: # src/components/Button/Button.module.scss # src/components/CardGrid/CardGrid.tsx # src/components/Header/Header.tsx # src/components/Layout/Layout.tsx # src/components/Shelf/Shelf.tsx # src/screens/Home/Home.tsx # src/screens/Series/Series.tsx
jwplayer · Jun 24, 2021 · 5216923 · 5216923
2 parents 27616cb + 5290a41
commit 5216923
Show file tree

Hide file tree

Showing 37 changed files with 267 additions and 190 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 140
+  "printWidth": 150
 }
diff --git a/public/config.json b/public/config.json
@@ -4,18 +4,15 @@
   },
   "content": [
     {
-      "backgroundColor": "#C105FA",
       "enableText": true,
       "featured": true,
       "playlistId": "CJE23b5T"
     },
     {
-      "backgroundColor": "#C105FA",
       "enableText": true,
       "playlistId": "sR5VypYk"
     },
     {
-      "backgroundColor": "#C105FA",
       "enableText": true,
       "playlistId": "o45EkQBf"
     }
@@ -38,24 +35,13 @@
   "options": {
     "dynamicBlur": true,
     "posterFading": true,
-    "backgroundColor": "#D42828",
-    "enableAddToHome": false,
+    "backgroundColor": null,
+    "shelveTitles": true,
     "enableContinueWatching": true,
-    "enableCookieNotice": false,
-    "enableHeader": true,
-    "enableInVideoSearch": false,
-    "highlightColor": "#CCCCCC",
-    "rightRail": {
-      "enabled": true
-    },
-    "showcaseContentOnly": false,
-    "useRecommendationsPlaylist": true,
-    "videoTitlePosition": "above"
+    "highlightColor": null
   },
   "player": "7xMa4gNw",
   "recommendationsPlaylist": "fuD6TWcf",
   "searchPlaylist": "tQ832H1H",
-  "siteName": "Blender",
-  "theme": "dark",
-  "version": "2"
+  "siteName": "Blender"
 }
diff --git a/src/components/Animation/Animation.tsx b/src/components/Animation/Animation.tsx
@@ -26,26 +26,31 @@ const Animation = ({
   const seconds = duration / 1000;
   const transition = `transform ${seconds}s ease-out`; // todo: -webkit-transform;
 
-  const timeout = useRef<NodeJS.Timeout>();
-  const timeout2 = useRef<NodeJS.Timeout>();
+  const timeout = useRef<number>();
+  const timeout2 = useRef<number>();
 
   useEffect(() => {
     if (timeout.current) clearTimeout(timeout.current);
     if (timeout2.current) clearTimeout(timeout2.current);
     if (open) {
       setHasOpenedBefore(true);
-      timeout.current = setTimeout(() => setStatus('opening'), delay);
-      timeout2.current = setTimeout(() => {
+      timeout.current = window.setTimeout(() => setStatus('opening'), delay);
+      timeout2.current = window.setTimeout(() => {
         setStatus('open');
         onOpenAnimationEnd && onOpenAnimationEnd();
       }, duration + delay);
     } else if (hasOpenedBefore) {
-      timeout.current = setTimeout(() => setStatus('closing'), delay);
-      timeout2.current = setTimeout(() => {
+      timeout.current = window.setTimeout(() => setStatus('closing'), delay);
+      timeout2.current = window.setTimeout(() => {
         setStatus('closed');
         onCloseAnimationEnd && onCloseAnimationEnd();
       }, duration + delay);
     }
+
+    return () => {
+      clearTimeout(timeout.current);
+      clearTimeout(timeout2.current);
+    };
   }, [duration, delay, transition, open, onOpenAnimationEnd, onCloseAnimationEnd, hasOpenedBefore, setHasOpenedBefore]);
 
   if (!open && status === 'closed') {

diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -25,6 +25,19 @@ $large-button-height: 40px;
   cursor: pointer;
   transition: background-color 0.1s ease, transform 0.1s ease;
 
+  @media (hover: hover) and (pointer: fine) {
+    &:hover,
+    &:focus {
+      transform: scale(1.1);
+    }
+    &:focus:not(:focus-visible):not(:hover) {
+      transform: scale(1);
+    }
+    &:focus-visible {
+      transform: scale(1.1);
+    }
+  }
+
   &.large {
     height: $large-button-height;
   }
@@ -35,15 +48,15 @@ $large-button-height: 40px;
   }
 
   &.primary {
-    color: var(--highlight-contrast-color, white);
-    background-color: var(--highlight-color, black);
+    color: var(--highlight-contrast-color, theme.$btn-primary-color);
+    background-color: var(--highlight-color, theme.$btn-primary-bg);
   }
 
   &.outlined {
     border: 1px solid rgba(255, 255, 255, 0.3);
 
     &.active,
-    &:focus {
+    &:focus-visible {
       color: var(--highlight-contrast-color, white);
       background-color: var(--highlight-color, black);
       border-color: var(--highlight-color);
@@ -54,10 +67,10 @@ $large-button-height: 40px;
     background: none;
     opacity: 0.7;
 
-    &.active {
+    &.active,
+    &:focus {
       opacity: 1;
     }
-
     &:hover {
       z-index: 1;
       background: theme.$btn-default-bg;
@@ -79,13 +92,6 @@ $large-button-height: 40px;
     width: 18px;
     height: 18px;
   }
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover,
-    &:focus {
-      transform: scale(1.06);
-    }
-  }
 }
 
 .startIcon {

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -21,6 +21,7 @@ type Props = {
   size?: 'medium' | 'large';
   to?: string;
   role?: string;
+  className?: string;
 } & React.AriaAttributes;
 
 const Button: React.FC<Props> = ({
@@ -34,9 +35,10 @@ const Button: React.FC<Props> = ({
   size = 'medium',
   to,
   onClick,
+  className,
   ...rest
 }: Props) => {
-  const className = classNames(styles.button, [styles[color]], [styles[variant]], {
+  const combinedClassNames = classNames(styles.button, className, [styles[color]], [styles[variant]], {
     [styles.active]: active,
     [styles.fullWidth]: fullWidth,
     [styles.large]: size === 'large',
@@ -46,13 +48,13 @@ const Button: React.FC<Props> = ({
   const span = <span className={styles.buttonLabel}>{label}</span>;
 
   return to ? (
-    <NavLink className={className} to={to} activeClassName={styles.active} {...rest} exact>
+    <NavLink className={combinedClassNames} to={to} activeClassName={styles.active} {...rest} exact>
       {icon}
       {span}
       {children}
     </NavLink>
   ) : (
-    <button className={className} onClick={onClick} {...rest}>
+    <button className={combinedClassNames} onClick={onClick} {...rest}>
       {icon}
       {span}
       {children}

diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -25,7 +25,6 @@
   }
 
   &.featured {
-
     .title {
       height: 1.1em;
       padding-right: 8px;
@@ -129,7 +128,6 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
 }
 
 .title {
-
   height: 2.4em;
   overflow: hidden;
   color: var(--card-color);
@@ -170,6 +168,7 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   font-family: var(--body-font-family);
   font-weight: 600;
   font-size: 13px;
+  white-space: nowrap;
   background-color: rgba(variables.$black, 0.6);
   border-radius: 4px;
   @include responsive.mobile-only {

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -22,6 +22,7 @@ type CardProps = {
   loading?: boolean;
   isCurrent?: boolean;
   currentLabel?: string;
+  enableTitle?: boolean;
 };
 
 function Card({
@@ -35,6 +36,7 @@ function Card({
   episodeNumber,
   progress,
   posterAspect = '16:9',
+  enableTitle = true,
   featured = false,
   disabled = false,
   loading = false,
@@ -82,7 +84,7 @@ function Card({
         {isCurrent && <div className={styles.currentLabel}>{currentLabel}</div>}
         {!loading && (
           <div className={styles.meta}>
-            {featured && !disabled && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
+            {featured && !disabled && enableTitle && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
             {renderTag()}
           </div>
         )}
@@ -92,7 +94,7 @@ function Card({
           </div>
         ) : null}
       </div>
-      {!featured && !disabled && (
+      {!featured && !disabled && enableTitle && (
         <div className={styles.titleContainer}>
           <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>
         </div>

diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx
@@ -20,9 +20,10 @@ const defaultCols: Breakpoints = {
 type CardGridProps = {
   playlist: PlaylistItem[];
   onCardHover?: (item: PlaylistItem) => void;
-  onCardClick: (item: PlaylistItem) => void;
+  onCardClick: (item: PlaylistItem, playlistId?: string) => void;
   watchHistory?: { [key: string]: number };
   isLoading: boolean;
+  enableCardTitles?: boolean;
   cols?: Breakpoints;
   currentCardItem?: PlaylistItem;
   currentCardLabel?: string;
@@ -33,6 +34,7 @@ function CardGrid({
   onCardClick,
   onCardHover,
   watchHistory,
+  enableCardTitles = true,
   isLoading = false,
   cols = defaultCols,
   currentCardItem,
@@ -55,13 +57,14 @@ function CardGrid({
           <Card
             key={mediaid}
             title={title}
+            enableTitle={enableCardTitles}
             duration={duration}
             posterSource={findPlaylistImageForWidth(playlistItem, imageSourceWidth)}
             progress={watchHistory ? watchHistory[mediaid] : undefined}
             seriesId={seriesId}
             episodeNumber={episodeNumber}
             seasonNumber={seasonNumber}
-            onClick={() => onCardClick(playlistItem)}
+            onClick={() => onCardClick(playlistItem, playlistItem.feedid)}
             onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
             loading={isLoading}
             isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}
@@ -74,7 +77,7 @@ function CardGrid({
 
   return (
     <div className={styles.container}>
-      <VirtualizedGrid rowCount={rows.length} cols={cols} cellRenderer={cellRenderer} spacing={50} />
+      <VirtualizedGrid rowCount={rows.length} cols={cols} cellRenderer={cellRenderer} spacing={enableCardTitles ? 50 : 4} />
     </div>
   );
 }

diff --git a/src/components/CollapsibleText/CollapsibleText.module.scss b/src/components/CollapsibleText/CollapsibleText.module.scss
@@ -17,6 +17,7 @@
 
   &.collapsed {
     mask-image: linear-gradient(-180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%);
+    -webkit-mask-image: linear-gradient(-180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%); /* stylelint-disable-line */
   }
 }
 

diff --git a/src/components/CollapsibleText/CollapsibleText.tsx b/src/components/CollapsibleText/CollapsibleText.tsx
@@ -21,10 +21,13 @@ const CollapsibleText: React.FC<Props> = ({ text, className, maxHeight = 'none'
 
   const ariaLabel = expanded ? 'Collapse' : 'Expand';
 
+  const clippablePixels = 4;
+
   useEffect(() => {
     divRef.current &&
       setDoesFlowOver(
-        divRef.current.scrollHeight > divRef.current.offsetHeight || (maxHeight < divRef.current.offsetHeight && maxHeight !== 'none'),
+        divRef.current.scrollHeight > divRef.current.offsetHeight + clippablePixels ||
+          (maxHeight < divRef.current.offsetHeight && maxHeight !== 'none'),
       );
   }, [maxHeight, text, breakpoint]);
 

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,4 +1,4 @@
-import React, { ReactFragment } from 'react';
+import React, { ReactFragment, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
@@ -38,6 +38,7 @@ const Header: React.FC<Props> = ({
   onCloseSearchButtonClick,
 }) => {
   const { t } = useTranslation('menu');
+  const [logoLoaded, setLogoLoaded] = useState(false);
   const breakpoint = useBreakpoint();
   const headerClassName = classNames(styles.header, styles[headerType], {
     [styles.mobileSearchActive]: searchActive && breakpoint <= Breakpoint.sm,
@@ -87,11 +88,11 @@ const Header: React.FC<Props> = ({
         </div>
         {logoSrc && (
           <div className={styles.brand}>
-            <Logo src={logoSrc} />
+            <Logo src={logoSrc} onLoad={() => setLogoLoaded(true)} />
           </div>
         )}
         <nav className={styles.nav} aria-label="menu">
-          {children}
+          {logoLoaded ? children : null}
         </nav>
         <div className={styles.search}>{searchEnabled ? search : null}</div>
       </div>

diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -39,17 +39,7 @@ exports[`<Header /> renders header 1`] = `
       <nav
         aria-label="menu"
         class="nav"
-      >
-        <a
-          aria-current="page"
-          class="button default outlined active"
-          href="/"
-        >
-          <span>
-            Home
-          </span>
-        </a>
-      </nav>
+      />
       <div
         class="search"
       >

diff --git a/src/components/Layout/Layout.module.scss b/src/components/Layout/Layout.module.scss
@@ -4,7 +4,7 @@
 .layout {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: calc(100vh - calc(100vh - 100%));
 }
 .main {
   flex: 1;

diff --git a/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
@@ -45,17 +45,7 @@ exports[`<Layout /> renders layout 1`] = `
           <nav
             aria-label="menu"
             class="nav"
-          >
-            <a
-              aria-current="page"
-              class="button default text active"
-              href="/"
-            >
-              <span>
-                home
-              </span>
-            </a>
-          </nav>
+          />
           <div
             class="search"
           />
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ @@
       &.collapsed {
         mask-image: linear-gradient(-180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%);
+        -webkit-mask-image: linear-gradient(-180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%); /* stylelint-disable-line */
       }
     }
@@ Expand Down @@