refactor(home): minor style improvements

jwplayer · Oct 23, 2024 · 5b1b076 · 5b1b076
1 parent c984449
commit 5b1b076
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/packages/ui-react/src/components/FeaturedShelf/FeaturedMetadata.tsx b/packages/ui-react/src/components/FeaturedShelf/FeaturedMetadata.tsx
@@ -31,12 +31,14 @@ const FeaturedMetadata = ({
 
   if (!item) return null;
 
+  const hasVideo = item.sources.find((source) => source.file.indexOf('.m3u8') > -1 || source.file.indexOf('.mp4') > -1);
+
   return (
     <div className={styles.metadata} style={{ ...style, visibility: hidden ? 'hidden' : undefined }} aria-hidden={hidden ? 'true' : undefined}>
       <h2 className={classNames(loading ? styles.loadingTitle : styles.title)}>{!loading && item?.title}</h2>
       <TruncatedText text={item?.description} maximumLines={3} className={styles.description} />
       <div>
-        <StartWatchingButton item={item} playUrl={mediaURL({ id: item.mediaid, title: item.title, playlistId, play: true })} />
+        {hasVideo && <StartWatchingButton item={item} playUrl={mediaURL({ id: item.mediaid, title: item.title, playlistId, play: true })} />}
         <Button
           label={t('common:more_info')}
           onClick={() => !!item && navigate(mediaURL({ id: item.mediaid, title: item.title, playlistId }))}

diff --git a/packages/ui-react/src/components/FeaturedShelf/FeaturedPagination.tsx b/packages/ui-react/src/components/FeaturedShelf/FeaturedPagination.tsx
@@ -72,7 +72,7 @@ const FeaturedPagination = ({
           return <div className={classNames(styles.dotPlaceholder)} key={itemIndex} aria-hidden="true" />;
         }
 
-        const movementBase = 22; // dot width + gap = 10 + 12
+        const movementBase = 22; // dot width (10) + gap(12)
         const movementTotal = Math.abs(index - nextIndex) * movementBase;
         const movement = direction === 'left' ? movementTotal : direction === 'right' ? 0 - movementTotal : 0;
         const transform = `translateX(${movement}px)`;

diff --git a/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss b/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss
@@ -17,6 +17,7 @@
   font-size: 18px;
   line-height: 1.5em;
   letter-spacing: 0.5px;
+  background-color:var(--featured-shelf-background-color);
 
   &:hover .chevron:not(:disabled) {
     opacity: 0.8;
@@ -54,7 +55,7 @@
   top: 0;
   right: 0;
   left: 0;
-  z-index: -1;
+  z-index: 0;
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
@@ -85,8 +86,8 @@
   height: calc(60vh + 56px);
   justify-self: flex-end;
 
-  -webkit-mask-image: linear-gradient(to right, #0000 0, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.8) 80%);
-    mask-image: linear-gradient(to right, #0000 0, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.8) 80%);
+  -webkit-mask-image: linear-gradient(to right, #0000 0, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.8) 80%);
+  mask-image: linear-gradient(to right, #0000 0, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.8) 80%);
 
   > div {
     position: absolute;
@@ -117,7 +118,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.6) 95%, rgba(0, 0, 0, 1) 100%);
+  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.8) 95%, rgba(0, 0, 0, 1) 100%);
 }
 
 .fade2 {
@@ -267,6 +268,10 @@
       outline: none;
     }
   }
+
+  &:disabled {
+    cursor: default;
+  }
 }
 
 .dotActive {

diff --git a/packages/ui-react/src/utils/theming.ts b/packages/ui-react/src/utils/theming.ts
@@ -21,6 +21,9 @@ export const setThemingVariables = (config: Config) => {
   if (backgroundColor) {
     root.style.setProperty('--body-background-color', backgroundColor);
     root.style.setProperty('--background-contrast-color', calculateContrastColor(backgroundColor));
+
+    // Featured shelf should be dark, with fallback to gray
+    root.style.setProperty('--featured-shelf-background-color', calculateContrastColor(backgroundColor) === '#fff' ? backgroundColor : '#1f1f1f');
   }
   if (bodyFont) {
     root.style.setProperty('--body-font-family', bodyFont);