feat(discover): filter by original languages

server/lib/settings/index.ts

@@ -121,6 +121,22 @@ export interface ProxySettings {
   bypassLocalAddresses: boolean;
 }
 
+interface FilterSettings {
+  filterSearch: boolean;
+  filterTrending: boolean;
+  filterSimilarSeries: boolean;
+  filterTvRecommendations: boolean;
+  filterSimilarMovies: boolean;
+  filterMovieRecommendations: boolean;
+  filterTvUpcoming: boolean;
+  filterUpcomingMovies: boolean;
+  filterDiscoverMovies: boolean;
+  filterTvDiscover: boolean;
+  filterPopularMovies: boolean;
+  filterTvPopular: boolean;
+  filterCustomSliders: boolean;
+}
+
 export interface MainSettings {
   apiKey: string;
   applicationTitle: string;
@@ -146,6 +162,7 @@ export interface MainSettings {
   enableSpecialEpisodes: boolean;
   locale: string;
   youtubeUrl: string;
+  filters: FilterSettings;
 }
 
 export interface ProxySettings {
@@ -177,7 +194,7 @@ interface PublicSettings {
   initialized: boolean;
 }
 
-interface FullPublicSettings extends PublicSettings {
+export interface FullPublicSettings extends PublicSettings {
   applicationTitle: string;
   applicationUrl: string;
   hideAvailable: boolean;
@@ -203,6 +220,7 @@ interface FullPublicSettings extends PublicSettings {
   userEmailRequired: boolean;
   newPlexLogin: boolean;
   youtubeUrl: string;
+  filters: FilterSettings;
 }
 
 export interface NotificationAgentConfig {
@@ -403,6 +421,21 @@ class Settings {
         enableSpecialEpisodes: false,
         locale: 'en',
         youtubeUrl: '',
+        filters: {
+          filterSearch: false,
+          filterTrending: false,
+          filterSimilarSeries: false,
+          filterTvRecommendations: false,
+          filterSimilarMovies: false,
+          filterMovieRecommendations: false,
+          filterTvUpcoming: false,
+          filterUpcomingMovies: false,
+          filterDiscoverMovies: false,
+          filterTvDiscover: false,
+          filterPopularMovies: false,
+          filterTvPopular: false,
+          filterCustomSliders: false,
+        },
       },
       plex: {
         name: '',
@@ -697,6 +730,7 @@ class Settings {
         this.data.notifications.agents.email.options.userEmailRequired,
       newPlexLogin: this.data.main.newPlexLogin,
       youtubeUrl: this.data.main.youtubeUrl,
+      filters: this.data.main.filters,
     };
   }
 

src/components/Discover/DiscoverMovieKeyword/index.tsx

@@ -2,8 +2,10 @@ import Header from '@app/components/Common/Header';
 import ListView from '@app/components/Common/ListView';
 import PageTitle from '@app/components/Common/PageTitle';
 import useDiscover, { encodeURIExtraParams } from '@app/hooks/useDiscover';
+import useFilterByLanguages from '@app/hooks/useFilterByLanguages';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
+import { FilterByLanguage } from '@app/types/filters';
 import defineMessages from '@app/utils/defineMessages';
 import type { TmdbKeyword } from '@server/api/themoviedb/interfaces';
 import type { MovieResult } from '@server/models/Search';
@@ -34,6 +36,13 @@ const DiscoverMovieKeyword = () => {
     }
   );
 
+  const filteredTitles = useFilterByLanguages({
+    titles,
+    movie: true,
+    tv: false,
+    key: FilterByLanguage.DISCOVER_MOVIES,
+  });
+
   if (error) {
     return <Error statusCode={500} />;
   }
@@ -53,10 +62,11 @@ const DiscoverMovieKeyword = () => {
         <Header>{title}</Header>
       </div>
       <ListView
-        items={titles}
+        items={filteredTitles}
         isEmpty={isEmpty}
         isLoading={
-          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+          isLoadingInitialData ||
+          (isLoadingMore && (filteredTitles?.length ?? 0) > 0)
         }
         isReachingEnd={isReachingEnd}
         onScrollBottom={fetchMore}

src/components/Discover/DiscoverMovies/index.tsx

@@ -9,8 +9,10 @@ import {
 } from '@app/components/Discover/constants';
 import FilterSlideover from '@app/components/Discover/FilterSlideover';
 import useDiscover from '@app/hooks/useDiscover';
+import useFilterByLanguages from '@app/hooks/useFilterByLanguages';
 import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
 import Error from '@app/pages/_error';
+import { FilterByLanguage } from '@app/types/filters';
 import defineMessages from '@app/utils/defineMessages';
 import { BarsArrowDownIcon, FunnelIcon } from '@heroicons/react/24/solid';
 import type { SortOptions as TMDBSortOptions } from '@server/api/themoviedb';
@@ -65,6 +67,13 @@ const DiscoverMovies = () => {
   );
   const [showFilters, setShowFilters] = useState(false);
 
+  const filteredTitles = useFilterByLanguages({
+    titles,
+    movie: true,
+    tv: false,
+    key: FilterByLanguage.DISCOVER_MOVIES,
+  });
+
   if (error) {
     return <Error statusCode={500} />;
   }
@@ -133,10 +142,11 @@ const DiscoverMovies = () => {
         </div>
       </div>
       <ListView
-        items={titles}
+        items={filteredTitles}
         isEmpty={isEmpty}
         isLoading={
-          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+          isLoadingInitialData ||
+          (isLoadingMore && (filteredTitles?.length ?? 0) > 0)
         }
         isReachingEnd={isReachingEnd}
         onScrollBottom={fetchMore}

src/components/Discover/DiscoverTv/index.tsx

@@ -9,8 +9,10 @@ import {
 } from '@app/components/Discover/constants';
 import FilterSlideover from '@app/components/Discover/FilterSlideover';
 import useDiscover from '@app/hooks/useDiscover';
+import useFilterByLanguages from '@app/hooks/useFilterByLanguages';
 import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
 import Error from '@app/pages/_error';
+import { FilterByLanguage } from '@app/types/filters';
 import defineMessages from '@app/utils/defineMessages';
 import { BarsArrowDownIcon, FunnelIcon } from '@heroicons/react/24/solid';
 import type { SortOptions as TMDBSortOptions } from '@server/api/themoviedb';
@@ -63,6 +65,13 @@ const DiscoverTv = () => {
     ...preparedFilters,
   });
 
+  const filteredTitles = useFilterByLanguages({
+    titles,
+    movie: false,
+    tv: true,
+    key: FilterByLanguage.TV_DISCOVER,
+  });
+
   if (error) {
     return <Error statusCode={500} />;
   }
@@ -131,11 +140,12 @@ const DiscoverTv = () => {
         </div>
       </div>
       <ListView
-        items={titles}
+        items={filteredTitles}
         isEmpty={isEmpty}
         isReachingEnd={isReachingEnd}
         isLoading={
-          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+          isLoadingInitialData ||
+          (isLoadingMore && (filteredTitles?.length ?? 0) > 0)
         }
         onScrollBottom={fetchMore}
       />

src/components/Discover/DiscoverTvKeyword/index.tsx

@@ -2,8 +2,10 @@ import Header from '@app/components/Common/Header';
 import ListView from '@app/components/Common/ListView';
 import PageTitle from '@app/components/Common/PageTitle';
 import useDiscover, { encodeURIExtraParams } from '@app/hooks/useDiscover';
+import useFilterByLanguages from '@app/hooks/useFilterByLanguages';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
+import { FilterByLanguage } from '@app/types/filters';
 import defineMessages from '@app/utils/defineMessages';
 import type { TmdbKeyword } from '@server/api/themoviedb/interfaces';
 import type { TvResult } from '@server/models/Search';
@@ -34,6 +36,13 @@ const DiscoverTvKeyword = () => {
     }
   );
 
+  const filteredTitles = useFilterByLanguages({
+    titles,
+    movie: false,
+    tv: true,
+    key: FilterByLanguage.TV_DISCOVER,
+  });
+
   if (error) {
     return <Error statusCode={500} />;
   }
@@ -53,10 +62,11 @@ const DiscoverTvKeyword = () => {
         <Header>{title}</Header>
       </div>
       <ListView
-        items={titles}
+        items={filteredTitles}
         isEmpty={isEmpty}
         isLoading={
-          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+          isLoadingInitialData ||
+          (isLoadingMore && (filteredTitles?.length ?? 0) > 0)
         }
         isReachingEnd={isReachingEnd}
         onScrollBottom={fetchMore}

src/components/Discover/DiscoverTvUpcoming.tsx

@@ -2,7 +2,9 @@ import Header from '@app/components/Common/Header';
 import ListView from '@app/components/Common/ListView';
 import PageTitle from '@app/components/Common/PageTitle';
 import useDiscover from '@app/hooks/useDiscover';
+import useFilterByLanguages from '@app/hooks/useFilterByLanguages';
 import Error from '@app/pages/_error';
+import { FilterByLanguage } from '@app/types/filters';
 import defineMessages from '@app/utils/defineMessages';
 import type { TvResult } from '@server/models/Search';
 import { useIntl } from 'react-intl';
@@ -24,6 +26,13 @@ const DiscoverTvUpcoming = () => {
     error,
   } = useDiscover<TvResult>('/api/v1/discover/tv/upcoming');
 
+  const filteredTitles = useFilterByLanguages({
+    titles,
+    movie: false,
+    tv: true,
+    key: FilterByLanguage.TV_UPCOMING,
+  });
+
   if (error) {
     return <Error statusCode={500} />;
   }
@@ -35,11 +44,12 @@ const DiscoverTvUpcoming = () => {
         <Header>{intl.formatMessage(messages.upcomingtv)}</Header>
       </div>
       <ListView
-        items={titles}
+        items={filteredTitles}
         isEmpty={isEmpty}
         isReachingEnd={isReachingEnd}
         isLoading={
-          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+          isLoadingInitialData ||
+          (isLoadingMore && (filteredTitles?.length ?? 0) > 0)
         }
         onScrollBottom={fetchMore}
       />

src/components/Discover/FilterSlideover/index.tsx

@@ -205,6 +205,7 @@ const FilterSlideover = ({
           setFieldValue={(_key, value) => {
             updateQueryParams('language', value);
           }}
+          isDisabled={!!currentSettings.originalLanguage}
         />
         <span className="text-lg font-semibold">
           {intl.formatMessage(messages.certification)}

src/components/Discover/Trending.tsx

@@ -2,7 +2,9 @@ import Header from '@app/components/Common/Header';
 import ListView from '@app/components/Common/ListView';
 import PageTitle from '@app/components/Common/PageTitle';
 import useDiscover from '@app/hooks/useDiscover';
+import useFilterByLanguages from '@app/hooks/useFilterByLanguages';
 import Error from '@app/pages/_error';
+import { FilterByLanguage } from '@app/types/filters';
 import defineMessages from '@app/utils/defineMessages';
 import type {
   MovieResult,
@@ -29,6 +31,13 @@ const Trending = () => {
     '/api/v1/discover/trending'
   );
 
+  const filteredTitles = useFilterByLanguages({
+    titles,
+    movie: true,
+    tv: true,
+    key: FilterByLanguage.TRENDING,
+  });
+
   if (error) {
     return <Error statusCode={500} />;
   }
@@ -40,10 +49,11 @@ const Trending = () => {
         <Header>{intl.formatMessage(messages.trending)}</Header>
       </div>
       <ListView
-        items={titles}
+        items={filteredTitles}
         isEmpty={isEmpty}
         isLoading={
-          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+          isLoadingInitialData ||
+          (isLoadingMore && (filteredTitles?.length ?? 0) > 0)
         }
         isReachingEnd={isReachingEnd}
         onScrollBottom={fetchMore}

src/components/Discover/Upcoming.tsx

@@ -2,7 +2,9 @@ import Header from '@app/components/Common/Header';
 import ListView from '@app/components/Common/ListView';
 import PageTitle from '@app/components/Common/PageTitle';
 import useDiscover from '@app/hooks/useDiscover';
+import useFilterByLanguages from '@app/hooks/useFilterByLanguages';
 import Error from '@app/pages/_error';
+import { FilterByLanguage } from '@app/types/filters';
 import defineMessages from '@app/utils/defineMessages';
 import type { MovieResult } from '@server/models/Search';
 import { useIntl } from 'react-intl';
@@ -24,6 +26,13 @@ const UpcomingMovies = () => {
     error,
   } = useDiscover<MovieResult>('/api/v1/discover/movies/upcoming');
 
+  const filteredTitles = useFilterByLanguages({
+    titles,
+    movie: true,
+    tv: false,
+    key: FilterByLanguage.UPCOMING_MOVIES,
+  });
+
   if (error) {
     return <Error statusCode={500} />;
   }
@@ -35,10 +44,11 @@ const UpcomingMovies = () => {
         <Header>{intl.formatMessage(messages.upcomingmovies)}</Header>
       </div>
       <ListView
-        items={titles}
+        items={filteredTitles}
         isEmpty={isEmpty}
         isLoading={
-          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+          isLoadingInitialData ||
+          (isLoadingMore && (filteredTitles?.length ?? 0) > 0)
         }
         isReachingEnd={isReachingEnd}
         onScrollBottom={fetchMore}