feat(discover): support filtering by tmdb user vote count on discover page (#3407)

src/components/Discover/FilterSlideover/index.tsx

@@ -35,8 +35,10 @@ const messages = defineMessages({
   ratingText: 'Ratings between {minValue} and {maxValue}',
   clearfilters: 'Clear Active Filters',
   tmdbuserscore: 'TMDB User Score',
+  tmdbuservotecount: 'TMDB User Vote Count',
   runtime: 'Runtime',
   streamingservices: 'Streaming Services',
+  voteCount: 'Number of votes between {minValue} and {maxValue}',
 });
 
 type FilterSlideoverProps = {
@@ -246,6 +248,45 @@ const FilterSlideover = ({
             })}
           />
         </div>
+        <span className="text-lg font-semibold">
+          {intl.formatMessage(messages.tmdbuservotecount)}
+        </span>
+        <div className="relative z-0">
+          <MultiRangeSlider
+            min={0}
+            max={1000}
+            defaultMaxValue={
+              currentFilters.voteCountLte
+                ? Number(currentFilters.voteCountLte)
+                : undefined
+            }
+            defaultMinValue={
+              currentFilters.voteCountGte
+                ? Number(currentFilters.voteCountGte)
+                : undefined
+            }
+            onUpdateMin={(min) => {
+              updateQueryParams(
+                'voteCountGte',
+                min !== 0 && Number(currentFilters.voteCountLte) !== 1000
+                  ? min.toString()
+                  : undefined
+              );
+            }}
+            onUpdateMax={(max) => {
+              updateQueryParams(
+                'voteCountLte',
+                max !== 1000 && Number(currentFilters.voteCountGte) !== 0
+                  ? max.toString()
+                  : undefined
+              );
+            }}
+            subText={intl.formatMessage(messages.voteCount, {
+              minValue: currentFilters.voteCountGte ?? 0,
+              maxValue: currentFilters.voteCountLte ?? 1000,
+            })}
+          />
+        </div>
         <span className="text-lg font-semibold">
           {intl.formatMessage(messages.streamingservices)}
         </span>

src/components/Discover/constants.ts

@@ -104,6 +104,8 @@ export const QueryFilterOptions = z.object({
   withRuntimeLte: z.string().optional(),
   voteAverageGte: z.string().optional(),
   voteAverageLte: z.string().optional(),
+  voteCountLte: z.string().optional(),
+  voteCountGte: z.string().optional(),
   watchRegion: z.string().optional(),
   watchProviders: z.string().optional(),
 });
@@ -169,6 +171,14 @@ export const prepareFilterValues = (
     filterValues.voteAverageLte = values.voteAverageLte;
   }
 
+  if (values.voteCountGte) {
+    filterValues.voteCountGte = values.voteCountGte;
+  }
+
+  if (values.voteCountLte) {
+    filterValues.voteCountLte = values.voteCountLte;
+  }
+
   if (values.watchProviders) {
     filterValues.watchProviders = values.watchProviders;
   }
@@ -190,6 +200,12 @@ export const countActiveFilters = (filterValues: FilterOptions): number => {
     delete clonedFilters.voteAverageLte;
   }
 
+  if (clonedFilters.voteCountGte || filterValues.voteCountLte) {
+    totalCount += 1;
+    delete clonedFilters.voteCountGte;
+    delete clonedFilters.voteCountLte;
+  }
+
   if (clonedFilters.withRuntimeGte || filterValues.withRuntimeLte) {
     totalCount += 1;
     delete clonedFilters.withRuntimeGte;