feat: adds streaming services custom slider (#3361)

* feat: adding streaming services as a slider is now an option

* fix: truncated slider titles on mobile

server/constants/discover.ts

@@ -20,6 +20,8 @@ export enum DiscoverSliderType {
   TMDB_SEARCH,
   TMDB_STUDIO,
   TMDB_NETWORK,
+  TMDB_MOVIE_STREAMING_SERVICES,
+  TMDB_TV_STREAMING_SERVICES,
 }
 
 export const defaultSliders: Partial<DiscoverSlider>[] = [

src/components/Discover/CreateSlider/index.tsx

@@ -2,6 +2,7 @@ import Button from '@app/components/Common/Button';
 import Tooltip from '@app/components/Common/Tooltip';
 import { sliderTitles } from '@app/components/Discover/constants';
 import MediaSlider from '@app/components/MediaSlider';
+import { WatchProviderSelector } from '@app/components/Selector';
 import { encodeURIExtraParams } from '@app/hooks/useDiscover';
 import type {
   TmdbCompanySearchResponse,
@@ -55,7 +56,7 @@ type CreateOption = {
   dataUrl: string;
   params?: string;
   titlePlaceholderText: string;
-  dataPlaceholderText: string;
+  dataPlaceholderText?: string;
 };
 
 const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
@@ -276,6 +277,20 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
       titlePlaceholderText: intl.formatMessage(messages.slidernameplaceholder),
       dataPlaceholderText: intl.formatMessage(messages.providetmdbsearch),
     },
+    {
+      type: DiscoverSliderType.TMDB_MOVIE_STREAMING_SERVICES,
+      title: intl.formatMessage(sliderTitles.tmdbmoviestreamingservices),
+      dataUrl: '/api/v1/discover/movies',
+      params: 'watchRegion=$regionValue&watchProviders=$providersValue',
+      titlePlaceholderText: intl.formatMessage(messages.slidernameplaceholder),
+    },
+    {
+      type: DiscoverSliderType.TMDB_TV_STREAMING_SERVICES,
+      title: intl.formatMessage(sliderTitles.tmdbtvstreamingservices),
+      dataUrl: '/api/v1/discover/tv',
+      params: 'watchRegion=$regionValue&watchProviders=$providersValue',
+      titlePlaceholderText: intl.formatMessage(messages.slidernameplaceholder),
+    },
   ];
 
   return (
@@ -417,6 +432,40 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
               />
             );
             break;
+          case DiscoverSliderType.TMDB_MOVIE_STREAMING_SERVICES:
+            dataInput = (
+              <WatchProviderSelector
+                type={'movie'}
+                region={slider?.data?.split(',')[0]}
+                activeProviders={
+                  slider?.data
+                    ?.split(',')[1]
+                    .split('|')
+                    .map((v) => Number(v)) ?? []
+                }
+                onChange={(region, providers) => {
+                  setFieldValue('data', `${region},${providers.join('|')}`);
+                }}
+              />
+            );
+            break;
+          case DiscoverSliderType.TMDB_TV_STREAMING_SERVICES:
+            dataInput = (
+              <WatchProviderSelector
+                type={'tv'}
+                region={slider?.data?.split(',')[0]}
+                activeProviders={
+                  slider?.data
+                    ?.split(',')[1]
+                    .split('|')
+                    .map((v) => Number(v)) ?? []
+                }
+                onChange={(region, providers) => {
+                  setFieldValue('data', `${region},${providers.join('|')}`);
+                }}
+              />
+            );
+            break;
           default:
             dataInput = (
               <Field
@@ -488,10 +537,25 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
                     '$value',
                     encodeURIExtraParams(values.data)
                   )}
-                  extraParams={activeOption.params?.replace(
-                    '$value',
-                    encodeURIExtraParams(values.data)
-                  )}
+                  extraParams={
+                    activeOption.type ===
+                      DiscoverSliderType.TMDB_MOVIE_STREAMING_SERVICES ||
+                    activeOption.type ===
+                      DiscoverSliderType.TMDB_TV_STREAMING_SERVICES
+                      ? activeOption.params
+                          ?.replace(
+                            '$regionValue',
+                            encodeURIExtraParams(values?.data.split(',')[0])
+                          )
+                          .replace(
+                            '$providersValue',
+                            encodeURIExtraParams(values?.data.split(',')[1])
+                          )
+                      : activeOption.params?.replace(
+                          '$value',
+                          encodeURIExtraParams(values.data)
+                        )
+                  }
                   onNewTitles={updateResultCount}
                 />
               </div>

src/components/Discover/DiscoverSliderEdit/index.tsx

@@ -164,6 +164,10 @@ const DiscoverSliderEdit = ({
         return intl.formatMessage(sliderTitles.tmdbnetwork);
       case DiscoverSliderType.TMDB_SEARCH:
         return intl.formatMessage(sliderTitles.tmdbsearch);
+      case DiscoverSliderType.TMDB_MOVIE_STREAMING_SERVICES:
+        return intl.formatMessage(sliderTitles.tmdbmoviestreamingservices);
+      case DiscoverSliderType.TMDB_TV_STREAMING_SERVICES:
+        return intl.formatMessage(sliderTitles.tmdbtvstreamingservices);
       default:
         return 'Unknown Slider';
     }
@@ -195,7 +199,9 @@ const DiscoverSliderEdit = ({
           className={`${slider.data ? 'mb-4' : 'mb-0'} flex space-x-2 md:mb-0`}
         >
           <Bars3Icon className="h-6 w-6" />
-          <div>{getSliderTitle(slider)}</div>
+          <div className="w-7/12 truncate md:w-full">
+            {getSliderTitle(slider)}
+          </div>
         </div>
         <div
           className={`pointer-events-none ${

src/components/Discover/constants.ts

@@ -86,6 +86,8 @@ export const sliderTitles = defineMessages({
   tmdbnetwork: 'TMDB Network',
   tmdbstudio: 'TMDB Studio',
   tmdbsearch: 'TMDB Search',
+  tmdbmoviestreamingservices: 'TMDB Movie Streaming Services',
+  tmdbtvstreamingservices: 'TMDB TV Streaming Services',
 });
 
 export const QueryFilterOptions = z.object({

src/components/Discover/index.tsx

@@ -365,6 +365,36 @@ const Discover = () => {
               />
             );
             break;
+          case DiscoverSliderType.TMDB_MOVIE_STREAMING_SERVICES:
+            sliderComponent = (
+              <MediaSlider
+                sliderKey={`custom-slider-${slider.id}`}
+                title={slider.title ?? ''}
+                url="/api/v1/discover/movies"
+                extraParams={`watchRegion=${
+                  slider.data?.split(',')[0]
+                }&watchProviders=${slider.data?.split(',')[1]}`}
+                linkUrl={`/discover/movies?watchRegion=${
+                  slider.data?.split(',')[0]
+                }&watchProviders=${slider.data?.split(',')[1]}`}
+              />
+            );
+            break;
+          case DiscoverSliderType.TMDB_TV_STREAMING_SERVICES:
+            sliderComponent = (
+              <MediaSlider
+                sliderKey={`custom-slider-${slider.id}`}
+                title={slider.title ?? ''}
+                url="/api/v1/discover/tv"
+                extraParams={`watchRegion=${
+                  slider.data?.split(',')[0]
+                }&watchProviders=${slider.data?.split(',')[1]}`}
+                linkUrl={`/discover/tv?watchRegion=${
+                  slider.data?.split(',')[0]
+                }&watchProviders=${slider.data?.split(',')[1]}`}
+              />
+            );
+            break;
         }
 
         if (isEditing) {

src/components/Selector/index.tsx

@@ -305,7 +305,9 @@ export const WatchProviderSelector = ({
 
   useEffect(() => {
     onChange(watchRegion, activeProvider);
-  }, [activeProvider, watchRegion, onChange]);
+    // removed onChange as a dependency as we only need to call it when the value(s) change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeProvider, watchRegion]);
 
   const orderedData = useMemo(() => {
     if (!data) {
@@ -344,7 +346,7 @@ export const WatchProviderSelector = ({
         <SmallLoadingSpinner />
       ) : (
         <div className="grid">
-          <div className="grid grid-cols-6 gap-2">
+          <div className="provider-icons grid gap-2">
             {initialProviders.map((provider) => {
               const isActive = activeProvider.includes(provider.id);
               return (
@@ -353,7 +355,7 @@ export const WatchProviderSelector = ({
                   key={`prodiver-${provider.id}`}
                 >
                   <div
-                    className={`provider-container relative h-full w-full cursor-pointer rounded-lg p-2 ring-1 ${
+                    className={`provider-container relative w-full cursor-pointer rounded-lg p-2 ring-1 ${
                       isActive
                         ? 'bg-gray-600 ring-indigo-500 hover:bg-gray-500'
                         : 'bg-gray-700 ring-gray-500 hover:bg-gray-600'
@@ -386,7 +388,7 @@ export const WatchProviderSelector = ({
             })}
           </div>
           {showMore && otherProviders.length > 0 && (
-            <div className="relative top-2 grid grid-cols-6 gap-2">
+            <div className="provider-icons relative top-2 grid gap-2">
               {otherProviders.map((provider) => {
                 const isActive = activeProvider.includes(provider.id);
                 return (
@@ -395,7 +397,7 @@ export const WatchProviderSelector = ({
                     key={`prodiver-${provider.id}`}
                   >
                     <div
-                      className={`provider-container relative h-full w-full cursor-pointer rounded-lg p-2 ring-1 transition ${
+                      className={`provider-container relative w-full cursor-pointer rounded-lg p-2 ring-1 transition ${
                         isActive
                           ? 'bg-gray-600 ring-indigo-500 hover:bg-gray-500'
                           : 'bg-gray-700 ring-gray-500 hover:bg-gray-600'

src/i18n/locale/en.json

@@ -105,11 +105,13 @@
   "components.Discover.studios": "Studios",
   "components.Discover.tmdbmoviegenre": "TMDB Movie Genre",
   "components.Discover.tmdbmoviekeyword": "TMDB Movie Keyword",
+  "components.Discover.tmdbmoviestreamingservices": "TMDB Movie Streaming Services",
   "components.Discover.tmdbnetwork": "TMDB Network",
   "components.Discover.tmdbsearch": "TMDB Search",
   "components.Discover.tmdbstudio": "TMDB Studio",
   "components.Discover.tmdbtvgenre": "TMDB Series Genre",
   "components.Discover.tmdbtvkeyword": "TMDB Series Keyword",
+  "components.Discover.tmdbtvstreamingservices": "TMDB TV Streaming Services",
   "components.Discover.trending": "Trending",
   "components.Discover.tvgenres": "Series Genres",
   "components.Discover.upcoming": "Upcoming Movies",

src/styles/globals.css

@@ -73,6 +73,10 @@
     grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
   }
 
+  .provider-icons {
+    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
+  }
+
   .slider-header {
     @apply relative mt-6 mb-4 flex;
   }