Merge pull request #440 from jwplayer/release-candidate

Release Candidate - v5.1.1

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [5.1.1](https://github.com/jwplayer/ott-web-app/compare/v5.1.0...v5.1.1) (2024-01-24)
+
+
+### Bug Fixes
+
+* lock animation mode on first load ([1b36ae0](https://github.com/jwplayer/ott-web-app/commit/1b36ae0e391d9ec977fdd6e8b0ef3befa43ddc5a))
+* prevent slider from getting stuck in non-anmiated mode ([e827aff](https://github.com/jwplayer/ott-web-app/commit/e827affd97f4cd3dbff4296c8686b77fab4a06b4))
+* **project:** fix dfault schemas ([4f6e4b0](https://github.com/jwplayer/ott-web-app/commit/4f6e4b0af50c26b523c1fc8f12469baa5280f5a1))
+
 ## [5.1.0](https://github.com/jwplayer/ott-web-app/compare/v5.0.0...v5.1.0) (2024-01-18)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jw-ott-webapp",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "main": "index.js",
   "repository": "https://github.com/jwplayer/ott-web-app.git",
   "author": "JW Player",

scripts/content-types/content-types.json

@@ -161,7 +161,7 @@
       "hosting_type": "hosted",
       "is_active": true,
       "is_series": false,
-      "sections": []
+      "sections": ["access"]
     },
     {
       "name": "liveChannel",
@@ -261,7 +261,22 @@
       "hosting_type": "hosted",
       "is_active": true,
       "is_series": false,
-      "sections": []
+      "sections": [
+        {
+          "title": "Access",
+          "fields": [
+            {
+              "param": "free",
+              "label": "Free",
+              "description": "If this item can be watched for free and doesn't require a login or subscription, you can set this value to true. Otherwise, if you leave this setting false, the application level subscription and authentication level rules will apply.",
+              "details": {
+                "field_type": "toggle",
+                "default": true
+              }
+            }
+          ]
+        }
+      ]
     },
     {
       "name": "hub",

src/components/TileDock/TileDock.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { type ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import styles from './TileDock.module.scss';
 
@@ -16,13 +16,13 @@ export type TileDockProps<T> = {
   minimalTouchMovement?: number;
   showControls?: boolean;
   showDots?: boolean;
-  animated?: boolean;
+  animationModeOverride?: boolean;
   wrapWithEmptyTiles?: boolean;
   transitionTime?: string;
-  renderTile: (item: T, isInView: boolean) => JSX.Element;
-  renderLeftControl?: (handleClick: () => void) => JSX.Element;
-  renderRightControl?: (handleClick: () => void) => JSX.Element;
-  renderPaginationDots?: (index: number, pageIndex: number) => JSX.Element;
+  renderTile: (item: T, isInView: boolean) => ReactNode;
+  renderLeftControl?: (handleClick: () => void) => ReactNode;
+  renderRightControl?: (handleClick: () => void) => ReactNode;
+  renderPaginationDots?: (index: number, pageIndex: number) => ReactNode;
 };
 
 type Tile<T> = {
@@ -66,7 +66,7 @@ function TileDock<T>({
   spacing = 12,
   minimalTouchMovement = 30,
   showControls = true,
-  animated = !window.matchMedia('(prefers-reduced-motion)').matches,
+  animationModeOverride,
   transitionTime = '0.6s',
   wrapWithEmptyTiles = false,
   showDots = false,
@@ -75,11 +75,13 @@ function TileDock<T>({
   renderRightControl,
   renderPaginationDots,
 }: TileDockProps<T>) {
-  const [index, setIndex] = useState<number>(0);
-  const [slideToIndex, setSlideToIndex] = useState<number>(0);
-  const [transform, setTransform] = useState<number>(-100);
-  const [doAnimationReset, setDoAnimationReset] = useState<boolean>(false);
-  const [hasTransition, setHasTransition] = useState(false);
+  const [index, setIndex] = useState(0);
+  const [slideToIndex, setSlideToIndex] = useState(0);
+  const [transform, setTransform] = useState(-100);
+  // Prevent animation mode from changing after first load
+  const [isAnimated] = useState(animationModeOverride ?? !window.matchMedia('(prefers-reduced-motion)').matches);
+  const [isAnimationDone, setIsAnimationDone] = useState(false);
+  const [isAnimationRunning, setIsAnimationRunning] = useState(false);
 
   const frameRef = useRef<HTMLUListElement>() as React.MutableRefObject<HTMLUListElement>;
   const tileWidth: number = 100 / tilesToShow;
@@ -90,15 +92,16 @@ function TileDock<T>({
     return sliceItems<T>(items, isMultiPage, index, tilesToShow, cycleMode);
   }, [items, isMultiPage, index, tilesToShow, cycleMode]);
 
-  const transitionBasis: string = isMultiPage && animated && hasTransition ? `transform ${transitionTime} ease` : '';
+  const transitionBasis: string = isMultiPage && isAnimated && isAnimationRunning ? `transform ${transitionTime} ease` : '';
 
   const needControls: boolean = showControls && isMultiPage;
   const showLeftControl: boolean = needControls && !(cycleMode === 'stop' && index === 0);
   const showRightControl: boolean = needControls && !(cycleMode === 'stop' && index === items.length - tilesToShow);
 
   const slide = useCallback(
     (direction: Direction): void => {
-      if (hasTransition) {
+      // Debounce slide events based on if the animation is running
+      if (isAnimationRunning) {
         return;
       }
 
@@ -120,11 +123,17 @@ function TileDock<T>({
 
       setSlideToIndex(nextIndex);
       setTransform(-100 + movement);
-      setHasTransition(true);
 
-      if (!animated) setDoAnimationReset(true);
+      // If this is an animated slider, start the animation 'slide'
+      if (isAnimated) {
+        setIsAnimationRunning(true);
+      }
+      // If not anmiated, trigger the post animation code right away
+      else {
+        setIsAnimationDone(true);
+      }
     },
-    [animated, cycleMode, index, items.length, tileWidth, tilesToShow, hasTransition],
+    [isAnimated, cycleMode, index, items.length, tileWidth, tilesToShow, isAnimationRunning],
   );
 
   const handleTouchStart = useCallback(
@@ -134,7 +143,7 @@ function TileDock<T>({
         y: event.touches[0].clientY,
       };
 
-      function handleTouchMove(this: HTMLDocument, event: TouchEvent): void {
+      function handleTouchMove(this: Document, event: TouchEvent): void {
         const newPosition: Position = {
           x: event.changedTouches[0].clientX,
           y: event.changedTouches[0].clientY,
@@ -148,7 +157,7 @@ function TileDock<T>({
         }
       }
 
-      function handleTouchEnd(this: HTMLDocument, event: TouchEvent): void {
+      function handleTouchEnd(this: Document, event: TouchEvent): void {
         const newPosition = {
           x: event.changedTouches[0].clientX,
           y: event.changedTouches[0].clientY,
@@ -182,8 +191,9 @@ function TileDock<T>({
     [minimalTouchMovement, slide],
   );
 
+  // Run code after the slide animation to set the new index
   useLayoutEffect(() => {
-    const resetAnimation = (): void => {
+    const postAnimationCleanup = (): void => {
       let resetIndex: number = slideToIndex;
 
       resetIndex = resetIndex >= items.length ? slideToIndex - items.length : resetIndex;
@@ -195,16 +205,18 @@ function TileDock<T>({
 
       setIndex(resetIndex);
       setTransform(-100);
-      setDoAnimationReset(false);
+      setIsAnimationRunning(false);
+      setIsAnimationDone(false);
     };
 
-    if (doAnimationReset) resetAnimation();
-  }, [doAnimationReset, index, items.length, slideToIndex, tileWidth, tilesToShow, transitionBasis]);
+    if (isAnimationDone) {
+      postAnimationCleanup();
+    }
+  }, [isAnimationDone, index, items.length, slideToIndex, tileWidth, tilesToShow, transitionBasis]);
 
   const handleTransitionEnd = (event: React.TransitionEvent<HTMLUListElement>) => {
     if (event.target === frameRef.current) {
-      setDoAnimationReset(true);
-      setHasTransition(false);
+      setIsAnimationDone(true);
     }
   };