fix(project): improve featured shelf and general ui (#634)

* fix(playlist): too little vertical spacing

* fix(home): disabled pagination bullet shows pointer cursor

* fix(home): featured shelf not respecting safe area

* fix(search): searchbar not vertically centered on mobile

* fix(home): broken featured animation

* fix(home): more info button not available on mobile

* fix(videodetail): unwanted fixed hero

* refactor(project): add safe area css variables

* refactor(home): remove obsolete conditions

packages/ui-react/src/components/FeaturedShelf/FeaturedMetadata.tsx

@@ -21,12 +21,14 @@ const FeaturedMetadata = ({
   playlistId,
   style,
   hidden,
+  isMobile,
 }: {
   item: PlaylistItem | null;
   loading: boolean;
   playlistId: string | undefined;
   style?: CSSProperties;
   hidden?: boolean;
+  isMobile?: boolean;
 }) => {
   const navigate = useNavigate();
   const { t } = useTranslation('common');
@@ -37,6 +39,8 @@ const FeaturedMetadata = ({
     !isContentType(item, MEDIA_CONTENT_TYPE.hub) && !isContentType(item, MEDIA_CONTENT_TYPE.liveChannel) && !isContentType(item, MEDIA_CONTENT_TYPE.page);
   const hasVideo = item.sources.find((source) => source.file.indexOf('.m3u8') > -1 || source.file.indexOf('.mp4') > -1);
 
+  const showStartWatchingButton = hasVideo && isWatchable && !isMobile;
+
   return (
     <div
       className={styles.metadata}
@@ -47,12 +51,14 @@ const FeaturedMetadata = ({
       <h2 className={classNames(loading ? styles.loadingTitle : styles.title)}>{!loading && item?.title}</h2>
       <TruncatedText text={item?.description} maximumLines={3} />
       <div>
-        {hasVideo && isWatchable && <StartWatchingButton item={item} playUrl={mediaURL({ id: item.mediaid, title: item.title, playlistId, play: true })} />}
+        {showStartWatchingButton && <StartWatchingButton item={item} playUrl={mediaURL({ id: item.mediaid, title: item.title, playlistId, play: true })} />}
         <Button
           label={t('common:more_info')}
           onClick={() => navigate(mediaURL({ id: item.mediaid, title: item.title, playlistId }))}
           startIcon={<Icon icon={ChevronRight} />}
           size="large"
+          variant={showStartWatchingButton ? undefined : 'contained'}
+          color={showStartWatchingButton ? undefined : 'primary'}
         />
       </div>
     </div>

packages/ui-react/src/components/FeaturedShelf/FeaturedMetadataMobile.tsx

@@ -109,14 +109,16 @@ const FeaturedMetadataMobile = ({ item, leftItem, rightItem, playlistId, loading
         playlistId={playlistId}
         style={{ left: '-100%' }}
         hidden={direction !== 'left' && swipeAction !== 'slide'}
+        isMobile
       />
-      <FeaturedMetadata loading={loading} item={item} playlistId={playlistId} />
+      <FeaturedMetadata loading={loading} item={item} playlistId={playlistId} isMobile />
       <FeaturedMetadata
         loading={loading}
         item={rightItem}
         playlistId={playlistId}
         style={{ left: '100%' }}
         hidden={direction !== 'right' && swipeAction !== 'slide'}
+        isMobile
       />
     </div>
   );

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

@@ -8,7 +8,7 @@ $desktop-max-height: 700px;
 $desktop-min-height: 275px;
 
 $tablet-height: 70vw;
-$tablet-min-height: 375x;
+$tablet-min-height: 375px;
 
 $mobile-height: 70vh;
 $mobile-min-height: 450px;
@@ -47,7 +47,7 @@ $mobile-landscape-height: 100vh;
   }
 
   @include responsive.mobile-only() {
-    height: calc($mobile-height - variables.$header-height);
+    height: calc($mobile-height - variables.$header-height - var(--safe-area-top, 0));
     min-height: calc($mobile-min-height - variables.$header-height);
   }
 
@@ -226,10 +226,6 @@ $mobile-landscape-height: 100vh;
     }
     > div {
       font-size: 14px;
-
-      > button:nth-child(2) {
-        display: none;
-      }
     }
   }
 
@@ -352,7 +348,7 @@ $mobile-landscape-height: 100vh;
     }
   }
 
-  &:disabled {
+  &[aria-hidden="true"] {
     cursor: default;
   }
 }

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useLayoutEffect, useState, type CSSProperties, type TransitionEventHandler } from 'react';
+import React, { useCallback, useEffect, useState, type CSSProperties, type TransitionEventHandler } from 'react';
 import type { PosterAspectRatio } from '@jwp/ott-common/src/utils/collection';
 import type { AccessModel } from '@jwp/ott-common/types/config';
 import type { Playlist, PlaylistItem } from '@jwp/ott-common/types/playlist';
@@ -65,7 +65,7 @@ const FeaturedShelf = ({ playlist, loading = false, error = null }: Props) => {
     [animationPhase],
   );
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!direction) return;
     if (animationPhase === 'init') {
       setAnimationPhase('start');

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

@@ -32,7 +32,7 @@
 }
 
 .poster {
-  position: fixed;
+  position: absolute;
   top: 0;
   right: 0;
   z-index: -1;

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

@@ -4,5 +4,5 @@
 
 .cell {
   display: inline-block;
-  padding: 8px;
+  padding: 16px 8px;
 }

packages/ui-react/src/containers/HeaderSearch/HeaderSearch.module.scss

@@ -15,9 +15,10 @@
 
   @include responsive.mobile-and-tablet() {
     position: absolute;
-    top: 0;
+    top: 50%;
     right: 0;
     left: 0;
     width: auto;
+    transform: translateY(-50%);
   }
 }

platforms/web/src/styles/main.scss

@@ -17,6 +17,12 @@
   --card-color: #{theme.$card-color};
   --card-border-hover-color: #{theme.$card-border-hover-color};
   --card-tag-bg: #{theme.$card-tag-bg};
+
+  // Safe area insets, can be overridden for specific platforms
+  --safe-area-top: 0;
+  --safe-area-right: 0;
+  --safe-area-bottom: 0;
+  --safe-area-left: 0;
 }
 
 @include accessibility.globalClassNames;