feat: fix merge with develop

CHANGELOG.md

@@ -1,3 +1,23 @@
+## [6.7.0](https://github.com/jwplayer/ott-web-app/compare/v6.6.0...v6.7.0) (2024-09-27)
+
+
+### Features
+
+* access bridge service ([#616](https://github.com/jwplayer/ott-web-app/issues/616)) ([aae2551](https://github.com/jwplayer/ott-web-app/commit/aae25515bcff0e4ad8428d8b8389220eb9126d5f)), closes [#594](https://github.com/jwplayer/ott-web-app/issues/594) [#598](https://github.com/jwplayer/ott-web-app/issues/598) [#590](https://github.com/jwplayer/ott-web-app/issues/590) [#605](https://github.com/jwplayer/ott-web-app/issues/605) [#606](https://github.com/jwplayer/ott-web-app/issues/606)
+* **i18n:** fix lint error ([c27a1e6](https://github.com/jwplayer/ott-web-app/commit/c27a1e69c360d9ebe9abcc9cf2e8bb3a088516aa))
+* **menu:** fix support for media menu item ([#621](https://github.com/jwplayer/ott-web-app/issues/621)) ([4ffb849](https://github.com/jwplayer/ott-web-app/commit/4ffb84923424de05f1f62455c7822354c0842173))
+* **menu:** support media type for menu ([#610](https://github.com/jwplayer/ott-web-app/issues/610)) ([80acd7f](https://github.com/jwplayer/ott-web-app/commit/80acd7f6c6672baf6e4a01dbecdf8540be68dbd7))
+* **project:** screen animations ([#614](https://github.com/jwplayer/ott-web-app/issues/614)) ([edbb246](https://github.com/jwplayer/ott-web-app/commit/edbb246c9edf926b872f5fdeb01d8cc0379f86ae))
+
+
+### Bug Fixes
+
+* card grid rendering previous items ([#613](https://github.com/jwplayer/ott-web-app/issues/613)) ([dce9f70](https://github.com/jwplayer/ott-web-app/commit/dce9f70875444ad965bb69d87a3f9445883ab9b1))
+* **e2e:** fix cleeng tests ([#624](https://github.com/jwplayer/ott-web-app/issues/624)) ([5231d86](https://github.com/jwplayer/ott-web-app/commit/5231d86b1aa05f6424fd8335f805fb42794d2698))
+* **project:** demo config reset doesnt work ([#609](https://github.com/jwplayer/ott-web-app/issues/609)) ([003e3e5](https://github.com/jwplayer/ott-web-app/commit/003e3e505929d62f3547c45def885a1b32b32e82))
+* **series:** first episode switching per season ([ddedb6b](https://github.com/jwplayer/ott-web-app/commit/ddedb6b6f636c720f0ba016b2fa07b41e964fe8e))
+* update plan types and access bridge port for the unit test workflow ([#619](https://github.com/jwplayer/ott-web-app/issues/619)) ([0e51bc4](https://github.com/jwplayer/ott-web-app/commit/0e51bc44288fb1ab2cd55dc8bdeaec8233819043))
+
 ## [6.6.0](https://github.com/jwplayer/ott-web-app/compare/v6.5.0...v6.6.0) (2024-09-06)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jwp/ott",
-  "version": "6.6.0",
+  "version": "6.7.0",
   "private": true,
   "license": "Apache-2.0",
   "repository": "https://github.com/jwplayer/ott-web-app.git",

packages/ui-react/src/components/Animation/Animation.tsx

@@ -15,6 +15,8 @@ type Props = {
 
 export type Status = 'opening' | 'open' | 'closing' | 'closed';
 
+const triggerReflow = (element: HTMLElement | null) => element?.scrollTop;
+
 const Animation: React.FC<Props> = ({
   className,
   createStyle,
@@ -26,6 +28,7 @@ const Animation: React.FC<Props> = ({
   keepMounted = false,
   children,
 }) => {
+  const nodeRef = useRef<HTMLDivElement>(null);
   const [status, setStatus] = useState<Status>('closed');
   const [hasOpenedBefore, setHasOpenedBefore] = useState<boolean>(false);
 
@@ -35,6 +38,9 @@ const Animation: React.FC<Props> = ({
   // use event callbacks to ignore reactive dependencies
   const openEvent = useEventCallback(() => {
     setHasOpenedBefore(true);
+    // trigger a reflow to ensure the transition is respected after mount
+    triggerReflow(nodeRef.current);
+
     timeout.current = window.setTimeout(() => setStatus('opening'), delay);
     timeout2.current = window.setTimeout(() => {
       setStatus('open');
@@ -70,7 +76,7 @@ const Animation: React.FC<Props> = ({
   }
 
   return (
-    <div style={createStyle(status)} className={className}>
+    <div style={createStyle(status)} className={className} ref={nodeRef}>
       {children}
     </div>
   );

packages/ui-react/src/components/Header/Header.module.scss

@@ -27,7 +27,8 @@
   // Make header static
   //
   &.static {
-    position: static;
+    position: relative;
+    z-index: 1;
     width: 100%;
   }
 }

packages/ui-react/src/containers/ShelfList/ShelfList.tsx

@@ -16,6 +16,7 @@ import usePlaylists from '@jwp/ott-hooks-react/src/usePlaylists';
 import Shelf from '../../components/Shelf/Shelf';
 import InfiniteScrollLoader from '../../components/InfiniteScrollLoader/InfiniteScrollLoader';
 import ErrorPage from '../../components/ErrorPage/ErrorPage';
+import Fade from '../../components/Animation/Fade/Fade';
 
 import styles from './ShelfList.module.scss';
 
@@ -83,20 +84,22 @@ const ShelfList = ({ rows }: Props) => {
               data-testid={testId(`shelf-${featured ? 'featured' : type === 'playlist' ? slugify(translatedTitle) : type}`)}
               aria-label={translatedTitle}
             >
-              <Shelf
-                loading={isPlaceholderData}
-                error={error}
-                type={type}
-                playlist={playlist}
-                watchHistory={type === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
-                title={translatedTitle}
-                featured={featured}
-                accessModel={accessModel}
-                isLoggedIn={!!user}
-                hasSubscription={!!subscription}
-                posterAspect={posterAspect}
-                visibleTilesDelta={visibleTilesDelta}
-              />
+              <Fade duration={250} delay={index * 33} open>
+                <Shelf
+                  loading={isPlaceholderData}
+                  error={error}
+                  type={type}
+                  playlist={playlist}
+                  watchHistory={type === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
+                  title={translatedTitle}
+                  featured={featured}
+                  accessModel={accessModel}
+                  isLoggedIn={!!user}
+                  hasSubscription={!!subscription}
+                  posterAspect={posterAspect}
+                  visibleTilesDelta={visibleTilesDelta}
+                />
+              </Fade>
             </section>
           );
         })}