feat: add streaming services filter (#3247)

* feat: add streaming services filter

* fix: count watch region/provider as one filter

src/components/Discover/FilterSlideover/index.tsx

@@ -8,6 +8,7 @@ import {
   CompanySelector,
   GenreSelector,
   KeywordSelector,
+  WatchProviderSelector,
 } from '@app/components/Selector';
 import useSettings from '@app/hooks/useSettings';
 import {
@@ -35,6 +36,7 @@ const messages = defineMessages({
   clearfilters: 'Clear Active Filters',
   tmdbuserscore: 'TMDB User Score',
   runtime: 'Runtime',
+  streamingservices: 'Streaming Services',
 });
 
 type FilterSlideoverProps = {
@@ -244,6 +246,30 @@ const FilterSlideover = ({
             })}
           />
         </div>
+        <span className="text-lg font-semibold">
+          {intl.formatMessage(messages.streamingservices)}
+        </span>
+        <WatchProviderSelector
+          type={type}
+          region={currentFilters.watchRegion}
+          activeProviders={
+            currentFilters.watchProviders?.split('|').map((v) => Number(v)) ??
+            []
+          }
+          onChange={(region, providers) => {
+            if (providers.length) {
+              batchUpdateQueryParams({
+                watchRegion: region,
+                watchProviders: providers.join('|'),
+              });
+            } else {
+              batchUpdateQueryParams({
+                watchRegion: undefined,
+                watchProviders: undefined,
+              });
+            }
+          }}
+        />
         <div className="pt-4">
           <Button
             className="w-full"

src/components/Discover/constants.ts

@@ -102,6 +102,8 @@ export const QueryFilterOptions = z.object({
   withRuntimeLte: z.string().optional(),
   voteAverageGte: z.string().optional(),
   voteAverageLte: z.string().optional(),
+  watchRegion: z.string().optional(),
+  watchProviders: z.string().optional(),
 });
 
 export type FilterOptions = z.infer<typeof QueryFilterOptions>;
@@ -165,6 +167,14 @@ export const prepareFilterValues = (
     filterValues.voteAverageLte = values.voteAverageLte;
   }
 
+  if (values.watchProviders) {
+    filterValues.watchProviders = values.watchProviders;
+  }
+
+  if (values.watchRegion) {
+    filterValues.watchRegion = values.watchRegion;
+  }
+
   return filterValues;
 };
 
@@ -184,6 +194,12 @@ export const countActiveFilters = (filterValues: FilterOptions): number => {
     delete clonedFilters.withRuntimeLte;
   }
 
+  if (clonedFilters.watchProviders) {
+    totalCount += 1;
+    delete clonedFilters.watchProviders;
+    delete clonedFilters.watchRegion;
+  }
+
   totalCount += Object.keys(clonedFilters).length;
 
   return totalCount;