From 3e1672d5be8271f12b85b53e6f29e4030a4201ea Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Wed, 6 Nov 2024 13:07:28 +0100 Subject: [PATCH 1/9] fix(playlist): too little vertical spacing --- .../ui-react/src/components/LayoutGrid/LayoutGrid.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.module.scss b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.module.scss index 124b0ea85..417b5f1f6 100644 --- a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.module.scss +++ b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.module.scss @@ -4,5 +4,5 @@ .cell { display: inline-block; - padding: 8px; + padding: 16px 8px; } From cf09b453f3e82f28019ecfa341611b15f3ebb966 Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Wed, 6 Nov 2024 13:11:11 +0100 Subject: [PATCH 2/9] fix(home): disabled pagination bullet shows pointer cursor --- .../src/components/FeaturedShelf/FeaturedShelf.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss b/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss index 87ba238b5..622c9edc3 100644 --- a/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss +++ b/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss @@ -352,7 +352,7 @@ $mobile-landscape-height: 100vh; } } - &:disabled { + &[aria-hidden="true"] { cursor: default; } } From 81ee933ffde274ff81b5b8d2af7d06f2675c4676 Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Wed, 6 Nov 2024 13:15:01 +0100 Subject: [PATCH 3/9] fix(home): featured shelf not respecting safe area --- .../src/components/FeaturedShelf/FeaturedShelf.module.scss | 4 ++-- platforms/web/src/styles/main.scss | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss b/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss index 622c9edc3..8ac21e479 100644 --- a/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss +++ b/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(--my-safe-area-top, 0)); min-height: calc($mobile-min-height - variables.$header-height); } diff --git a/platforms/web/src/styles/main.scss b/platforms/web/src/styles/main.scss index 0767a212b..07d2d5910 100644 --- a/platforms/web/src/styles/main.scss +++ b/platforms/web/src/styles/main.scss @@ -17,6 +17,8 @@ --card-color: #{theme.$card-color}; --card-border-hover-color: #{theme.$card-border-hover-color}; --card-tag-bg: #{theme.$card-tag-bg}; + + --my-safe-area-top: 0; // Can be overridden for specific platforms } @include accessibility.globalClassNames; From 4e551c5d1d7ab9bb3e70fa5bb1694fa5d0991aa0 Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Wed, 6 Nov 2024 13:15:37 +0100 Subject: [PATCH 4/9] fix(search): searchbar not vertically centered on mobile --- .../src/containers/HeaderSearch/HeaderSearch.module.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.module.scss b/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.module.scss index 4fa28d5f2..0815e25dc 100644 --- a/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.module.scss +++ b/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%); } } From 6037dab33883924d36d5616691f8e954bb5b46f0 Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Wed, 6 Nov 2024 13:16:21 +0100 Subject: [PATCH 5/9] fix(home): broken featured animation --- .../ui-react/src/components/FeaturedShelf/FeaturedShelf.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.tsx b/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.tsx index f5d8971db..69baf9fd7 100644 --- a/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.tsx +++ b/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'); From 5f5f04586145028c86c889a52d6eec3599663906 Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Wed, 6 Nov 2024 13:20:47 +0100 Subject: [PATCH 6/9] fix(home): more info button not available on mobile --- .../src/components/FeaturedShelf/FeaturedMetadata.tsx | 10 +++++++++- .../FeaturedShelf/FeaturedMetadataMobile.tsx | 4 +++- .../components/FeaturedShelf/FeaturedShelf.module.scss | 4 ---- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/ui-react/src/components/FeaturedShelf/FeaturedMetadata.tsx b/packages/ui-react/src/components/FeaturedShelf/FeaturedMetadata.tsx index 8b6d2a180..263916b3c 100644 --- a/packages/ui-react/src/components/FeaturedShelf/FeaturedMetadata.tsx +++ b/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 (
{!loading && item?.title}
- {hasVideo && isWatchable && } + {hasVideo && isWatchable && !isMobile && ( + + )}
diff --git a/packages/ui-react/src/components/FeaturedShelf/FeaturedMetadataMobile.tsx b/packages/ui-react/src/components/FeaturedShelf/FeaturedMetadataMobile.tsx index 55efa9685..a3587d252 100644 --- a/packages/ui-react/src/components/FeaturedShelf/FeaturedMetadataMobile.tsx +++ b/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 /> - +