fix(home): heroshelf description clamping not working ios

refactor(home): minor style updates refactor: minor update
jwplayer · Nov 14, 2024 · a41a0cd · a41a0cd
1 parent b06fc10
commit a41a0cd
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 15 deletions.
diff --git a/packages/ui-react/src/components/HeroShelf/HeroShelf.module.scss b/packages/ui-react/src/components/HeroShelf/HeroShelf.module.scss
@@ -98,7 +98,6 @@ $mobile-landscape-height: 100vh;
   height: 56.25vw;
   max-height: 700px;
   background-color: var(--hero-shelf-background-color);
-  transition: opacity ease-out 0.3s;
 
   @include responsive.tablet-only() {
     height: $tablet-height;
@@ -196,8 +195,8 @@ $mobile-landscape-height: 100vh;
   display: flex;
   flex-direction: column;
   gap: 24px;
-  width: 46%;
-  max-width: 46%;
+  min-width: 50%;
+  max-width: 50%;
   padding-left: calc(variables.$base-spacing * 4);
 
   > h2 {
@@ -233,13 +232,23 @@ $mobile-landscape-height: 100vh;
   }
 
   @include responsive.mobile-only-landscape() {
-    max-width: 70%;
     min-height: initial;
     padding: 0 calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3);
+
+    > h2 {
+      font-size: 24px;
+    }
+    > div {
+      font-size: 14px;
+    }
   }
 
   @include responsive.tablet-small-only() {
     padding: 0 calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3);
+
+    > div > button {
+      width: auto !important; // Override StartWatchingButton fullWidth prop
+    }
   }
 
   @include responsive.mobile-only() {

diff --git a/packages/ui-react/src/components/HeroShelf/HeroShelf.tsx b/packages/ui-react/src/components/HeroShelf/HeroShelf.tsx
@@ -32,7 +32,7 @@ const HeroShelf = ({ playlist, loading = false, error = null }: Props) => {
   const [animationPhase, setAnimationPhase] = useState<'init' | 'start' | 'end' | null>(null);
   const [isSwipeAnimation, setIsSwipeAnimation] = useState(false);
 
-  useScrolledDown(50, isMobile ? 200 : 700, (progress: number) => {
+  useScrolledDown(50, isMobile ? 200 : 600, (progress: number) => {
     if (posterRef.current) posterRef.current.style.opacity = `${Math.max(1 - progress, isMobile ? 0 : 0.1)}`;
   });
 
@@ -182,14 +182,7 @@ const HeroShelf = ({ playlist, loading = false, error = null }: Props) => {
           />
         )}
         renderItem={() => (
-          <HeroShelfMetadata
-            loading={loading}
-            item={renderedItem}
-            playlistId={playlist.feedid}
-            isMobile={isMobile}
-            key={renderedItem?.mediaid}
-            style={getMetadataStyle()}
-          />
+          <HeroShelfMetadata loading={loading} item={renderedItem} playlistId={playlist.feedid} key={renderedItem?.mediaid} style={getMetadataStyle()} />
         )}
         renderRightItem={(isSwiping: boolean) => (
           <HeroShelfMetadata

diff --git a/packages/ui-react/src/components/HeroShelf/HeroShelfMetadata.tsx b/packages/ui-react/src/components/HeroShelf/HeroShelfMetadata.tsx
@@ -28,12 +28,11 @@ const HeroShelfMetadata = ({
   playlistId: string | undefined;
   style: CSSProperties;
   hidden?: boolean;
-  isMobile?: boolean;
 }) => {
   const navigate = useNavigate();
   const { t } = useTranslation('common');
   const breakpoint = useBreakpoint();
-  const isMobile = breakpoint <= Breakpoint.sm;
+  const isMobile = breakpoint < Breakpoint.sm;
 
   if (!item) return null;
 

diff --git a/packages/ui-react/src/components/TruncatedText/TruncatedText.tsx b/packages/ui-react/src/components/TruncatedText/TruncatedText.tsx
@@ -18,6 +18,8 @@ const TruncatedText: React.FC<TruncatedTextProps> = ({ text, maximumLines, class
       style={{
         maxHeight: `calc(1.5em * ${maximumLines})`,
         WebkitLineClamp: maximumLines,
+        lineClamp: maximumLines,
+        display: '-webkit-box',
       }}
     >
       <MarkdownComponent markdownString={text} inline />