feat(project): add support for shelveTitles option

jwplayer · Jun 24, 2021 · ab37b6b · ab37b6b
1 parent c754f95
commit ab37b6b
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 27 deletions.
diff --git a/public/config.json b/public/config.json
@@ -4,18 +4,15 @@
   },
   "content": [
     {
-      "backgroundColor": "#C105FA",
       "enableText": true,
       "featured": true,
       "playlistId": "CJE23b5T"
     },
     {
-      "backgroundColor": "#C105FA",
       "enableText": true,
       "playlistId": "sR5VypYk"
     },
     {
-      "backgroundColor": "#C105FA",
       "enableText": true,
       "playlistId": "o45EkQBf"
     }
@@ -38,24 +35,13 @@
   "options": {
     "dynamicBlur": true,
     "posterFading": true,
-    "backgroundColor": "#D42828",
-    "enableAddToHome": false,
+    "backgroundColor": null,
+    "shelveTitles": true,
     "enableContinueWatching": true,
-    "enableCookieNotice": false,
-    "enableHeader": true,
-    "enableInVideoSearch": false,
-    "highlightColor": "#CCCCCC",
-    "rightRail": {
-      "enabled": true
-    },
-    "showcaseContentOnly": false,
-    "useRecommendationsPlaylist": true,
-    "videoTitlePosition": "above"
+    "highlightColor": null
   },
   "player": "7xMa4gNw",
   "recommendationsPlaylist": "fuD6TWcf",
   "searchPlaylist": "tQ832H1H",
-  "siteName": "Blender",
-  "theme": "dark",
-  "version": "2"
+  "siteName": "Blender"
 }
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -22,6 +22,7 @@ type CardProps = {
   loading?: boolean;
   isCurrent?: boolean;
   currentLabel?: string;
+  enableTitle?: boolean;
 };
 
 function Card({
@@ -35,6 +36,7 @@ function Card({
   episodeNumber,
   progress,
   posterAspect = '16:9',
+  enableTitle = true,
   featured = false,
   disabled = false,
   loading = false,
@@ -81,7 +83,7 @@ function Card({
       <div className={posterClassNames} style={{ backgroundImage: posterSource ? `url(${posterSource})` : '' }}>
         {!loading && (
           <div className={styles.meta}>
-            {featured && !disabled && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
+            {featured && !disabled && enableTitle && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
             {renderTag()}
           </div>
         )}
@@ -92,7 +94,7 @@ function Card({
           </div>
         ) : null}
       </div>
-      {!featured && !disabled && (
+      {!featured && !disabled && enableTitle && (
         <div className={styles.titleContainer}>
           <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>
         </div>

diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx
@@ -22,6 +22,7 @@ type CardGridProps = {
   onCardHover?: (item: PlaylistItem) => void;
   onCardClick: (item: PlaylistItem) => void;
   isLoading: boolean;
+  enableCardTitles?: boolean;
   cols?: Breakpoints;
   currentCardItem?: PlaylistItem;
   currentCardLabel?: string;
@@ -31,6 +32,7 @@ function CardGrid({
   playlist,
   onCardClick,
   onCardHover,
+  enableCardTitles = true,
   isLoading = false,
   cols = defaultCols,
   currentCardItem,
@@ -53,6 +55,7 @@ function CardGrid({
           <Card
             key={mediaid}
             title={title}
+            enableTitle={enableCardTitles}
             duration={duration}
             posterSource={findPlaylistImageForWidth(playlistItem, imageSourceWidth)}
             seriesId={seriesId}
@@ -71,7 +74,7 @@ function CardGrid({
 
   return (
     <div className={styles.container}>
-      <VirtualizedGrid rowCount={rows.length} cols={cols} cellRenderer={cellRenderer} spacing={50} />
+      <VirtualizedGrid rowCount={rows.length} cols={cols} cellRenderer={cellRenderer} spacing={enableCardTitles ? 50 : 4} />
     </div>
   );
 }

diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -33,6 +33,8 @@ export type ShelfProps = {
   onCardClick: (playlistItem: PlaylistItem) => void;
   onCardHover?: (playlistItem: PlaylistItem) => void;
   watchHistory?: { [key: string]: number };
+  enableTitle?: boolean;
+  enableCardTitles?: boolean;
   featured?: boolean;
   loading?: boolean;
   error?: unknown;
@@ -45,6 +47,8 @@ const Shelf: React.FC<ShelfProps> = ({
   onCardHover,
   title,
   watchHistory,
+  enableTitle = true,
+  enableCardTitles = true,
   featured = false,
   loading = false,
   error = null,
@@ -65,7 +69,9 @@ const Shelf: React.FC<ShelfProps> = ({
 
   return (
     <div className={classNames(styles.shelf, { [styles.featured]: featured })} data-mediaid={playlist.feedid}>
-      {!featured && <h2 className={classNames(styles.title, { [styles.loading]: loading })}>{title || playlist.title}</h2>}
+      {!featured && enableTitle ? (
+        <h2 className={classNames(styles.title, { [styles.loading]: loading })}>{title || playlist.title}</h2>
+      ) : null}
       <TileDock<PlaylistItem>
         items={playlist.playlist}
         tilesToShow={tilesToShow}
@@ -103,6 +109,7 @@ const Shelf: React.FC<ShelfProps> = ({
         renderTile={(item, isInView) => (
           <Card
             title={item.title}
+            enableTitle={enableCardTitles}
             duration={item.duration}
             progress={watchHistory ? watchHistory[item.mediaid] : undefined}
             posterSource={findPlaylistImageForWidth(item, imageSourceWidth)}

diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx
@@ -76,6 +76,8 @@ const Home = (): JSX.Element => {
                 watchHistory={playlist.feedid === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
                 onCardClick={onCardClick}
                 onCardHover={onCardHover}
+                enableTitle={contentItem.enableText}
+                enableCardTitles={config.options.shelveTitles}
                 title={playlist.title}
                 featured={contentItem.featured === true}
               />
@@ -106,9 +108,9 @@ const Home = (): JSX.Element => {
     };
     const calculateRegular = () => {
       const tilesToShow = tileBreakpoints[breakpoint];
-      const shelfTitlesHeight = config.options.shelveTitles ? 40 : 0;
+      const shelfTitlesHeight = item.enableText ? 40 : 0;
       const shelfMetaHeight = shelfTitlesHeight + 12;
-      const cardMetaHeight = 40;
+      const cardMetaHeight = config.options.shelveTitles ? 40 : 0;
       const shelfHorizontalMargin = isMobile ? 76 : 0;
       const cardWidth = (document.body.offsetWidth - shelfHorizontalMargin) / tilesToShow;
       const cardHeight = cardWidth * (9 / 16);

diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
@@ -147,6 +147,7 @@ const Movie = ({
               isLoading={isLoading}
               currentCardItem={item}
               currentCardLabel={t('currently_playing')}
+              enableCardTitles={config.options.shelveTitles}
             />
           </>
         ) : undefined}

diff --git a/src/screens/Playlist/Playlist.tsx b/src/screens/Playlist/Playlist.tsx
@@ -62,7 +62,13 @@ function Playlist({
         )}
       </header>
       <main className={styles.main}>
-        <CardGrid playlist={filteredPlaylist} onCardClick={onCardClick} onCardHover={onCardHover} isLoading={isLoading} />
+        <CardGrid
+          playlist={filteredPlaylist}
+          onCardClick={onCardClick}
+          onCardHover={onCardHover}
+          isLoading={isLoading}
+          enableCardTitles={config.options.shelveTitles}
+        />
       </main>
     </div>
   );

diff --git a/src/screens/Search/Search.tsx b/src/screens/Search/Search.tsx
@@ -27,7 +27,7 @@ const Search: React.FC<RouteComponentProps<SearchRouteParams>> = ({
   },
 }) => {
   const { t } = useTranslation('search');
-  const { siteName, searchPlaylist } = useContext(ConfigContext);
+  const { siteName, searchPlaylist, options } = useContext(ConfigContext);
   const firstRender = useFirstRender();
   const searchQuery = UIStore.useState((s) => s.searchQuery);
   const { updateSearchQuery } = useSearchQueryUpdater();
@@ -87,7 +87,13 @@ const Search: React.FC<RouteComponentProps<SearchRouteParams>> = ({
         <h2>{t('heading')}</h2>
       </header>
       <main className={styles.main}>
-        <CardGrid playlist={playlist} onCardClick={onCardClick} onCardHover={onCardHover} isLoading={firstRender} />
+        <CardGrid
+          playlist={playlist}
+          onCardClick={onCardClick}
+          onCardHover={onCardHover}
+          isLoading={firstRender}
+          enableCardTitles={options.shelveTitles}
+        />
       </main>
     </div>
   );

diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
@@ -175,6 +175,7 @@ const Series = ({
             isLoading={isLoading}
             currentCardItem={item}
             currentCardLabel={t('current_episode')}
+            enableCardTitles={config.options.shelveTitles}
           />
         </>
       </VideoComponent>

diff --git a/src/services/config.service.ts b/src/services/config.service.ts
@@ -10,6 +10,7 @@ import { PersonalShelf } from '../enum/PersonalShelf';
 const contentSchema: SchemaOf<Content> = object({
   playlistId: string().defined(),
   featured: boolean().notRequired(),
+  enableText: boolean().notRequired(),
 }).defined();
 
 const menuSchema: SchemaOf<Menu> = object().shape({
@@ -69,6 +70,7 @@ const loadConfig = async (configLocation: string) => {
   const data = await response.json();
 
   addPersonalShelves(data);
+  addContentDefaultOptions(data);
 
   if (data.version) {
     return parseDeprecatedConfig(data);
@@ -85,13 +87,22 @@ const addPersonalShelves = (data: Config) => {
   if (!data.content.some(({ playlistId }) => playlistId === PersonalShelf.Favorites)) {
     data.content.push({ playlistId: PersonalShelf.Favorites });
   }
+
   if (data.options.enableContinueWatching) {
     if (!data.content.some(({ playlistId }) => playlistId === PersonalShelf.ContinueWatching)) {
       data.content.splice(1, 0, { playlistId: PersonalShelf.ContinueWatching });
     }
   }
 };
 
+/**
+ * Add content default options
+ * @param {Config} data
+ */
+const addContentDefaultOptions = (data: Config) => {
+  data.content = data.content.map((content) => Object.assign({ enableText: true, featured: false }, content));
+};
+
 /**
  * Serialize deprecated config to v3 config
  * @param {Config} config

diff --git a/types/Config.d.ts b/types/Config.d.ts
@@ -27,6 +27,7 @@ export type Simple = {
 export type Content = {
   playlistId: string;
   featured?: boolean;
+  enableText?: boolean;
 };
 
 export type Menu = {