+
diff --git a/src/components/player/atoms/settings/Opensubtitles.tsx b/src/components/player/atoms/settings/Opensubtitles.tsx
new file mode 100644
index 000000000..b4dd2b1be
--- /dev/null
+++ b/src/components/player/atoms/settings/Opensubtitles.tsx
@@ -0,0 +1,141 @@
+import Fuse from "fuse.js";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAsyncFn } from "react-use";
+
+import { FlagIcon } from "@/components/FlagIcon";
+import { useCaptions } from "@/components/player/hooks/useCaptions";
+import { Menu } from "@/components/player/internals/ContextMenu";
+import { Input } from "@/components/player/internals/ContextMenu/Input";
+import { SelectableLink } from "@/components/player/internals/ContextMenu/Links";
+import { useOverlayRouter } from "@/hooks/useOverlayRouter";
+import { CaptionListItem } from "@/stores/player/slices/source";
+import { usePlayerStore } from "@/stores/player/store";
+import {
+ getPrettyLanguageNameFromLocale,
+ sortLangCodes,
+} from "@/utils/language";
+
+export function CaptionOption(props: {
+ countryCode?: string;
+ children: React.ReactNode;
+ selected?: boolean;
+ loading?: boolean;
+ onClick?: () => void;
+ error?: React.ReactNode;
+}) {
+ return (
+
+
+
+
+ );
+}
+
+function useSubtitleList(subs: CaptionListItem[], searchQuery: string) {
+ const { t: translate } = useTranslation();
+ const unknownChoice = translate("player.menus.subtitles.unknownLanguage");
+ return useMemo(() => {
+ const input = subs
+ .map((t) => ({
+ ...t,
+ languageName:
+ getPrettyLanguageNameFromLocale(t.language) ?? unknownChoice,
+ }))
+ .filter((x) => x.opensubtitles);
+ const sorted = sortLangCodes(input.map((t) => t.language));
+ let results = input.sort((a, b) => {
+ return sorted.indexOf(a.language) - sorted.indexOf(b.language);
+ });
+
+ if (searchQuery.trim().length > 0) {
+ const fuse = new Fuse(input, {
+ includeScore: true,
+ keys: ["languageName"],
+ });
+
+ results = fuse.search(searchQuery).map((res) => res.item);
+ }
+
+ return results;
+ }, [subs, searchQuery, unknownChoice]);
+}
+
+export function OpenSubtitlesCaptionView({ id }: { id: string }) {
+ const { t } = useTranslation();
+ const router = useOverlayRouter(id);
+ const selectedCaptionId = usePlayerStore((s) => s.caption.selected?.id);
+ const [currentlyDownloading, setCurrentlyDownloading] = useState<
+ string | null
+ >(null);
+ const { selectCaptionById } = useCaptions();
+ const captionList = usePlayerStore((s) => s.captionList);
+ const getHlsCaptionList = usePlayerStore((s) => s.display?.getCaptionList);
+
+ const captions = useMemo(
+ () =>
+ captionList.length !== 0 ? captionList : getHlsCaptionList?.() ?? [],
+ [captionList, getHlsCaptionList],
+ );
+
+ const [searchQuery, setSearchQuery] = useState("");
+ const subtitleList = useSubtitleList(captions, searchQuery);
+
+ const [downloadReq, startDownload] = useAsyncFn(
+ async (captionId: string) => {
+ setCurrentlyDownloading(captionId);
+ return selectCaptionById(captionId);
+ },
+ [selectCaptionById, setCurrentlyDownloading],
+ );
+
+ const content = subtitleList.map((v) => {
+ return (
+ startDownload(v.id)}
+ >
+ {v.languageName}
+
+ );
+ });
+
+ return (
+ <>
+
+ {content}
+
+
+ );
+}
+
+export default OpenSubtitlesCaptionView;
diff --git a/src/components/player/hooks/useCaptions.ts b/src/components/player/hooks/useCaptions.ts
index 4bbdae4fc..521840586 100644
--- a/src/components/player/hooks/useCaptions.ts
+++ b/src/components/player/hooks/useCaptions.ts
@@ -19,6 +19,7 @@ export function useCaptions() {
);
const setCaption = usePlayerStore((s) => s.setCaption);
const lastSelectedLanguage = useSubtitleStore((s) => s.lastSelectedLanguage);
+ const setIsOpenSubtitles = useSubtitleStore((s) => s.setIsOpenSubtitles);
const captionList = usePlayerStore((s) => s.captionList);
const getHlsCaptionList = usePlayerStore((s) => s.display?.getCaptionList);
@@ -77,11 +78,13 @@ export function useCaptions() {
captionToSet.srtData = srtData;
}
+ setIsOpenSubtitles(!!caption.opensubtitles);
setCaption(captionToSet);
resetSubtitleSpecificSettings();
setLanguage(caption.language);
},
[
+ setIsOpenSubtitles,
setLanguage,
captions,
setCaption,
@@ -101,9 +104,10 @@ export function useCaptions() {
);
const disable = useCallback(async () => {
+ setIsOpenSubtitles(false);
setCaption(null);
setLanguage(null);
- }, [setCaption, setLanguage]);
+ }, [setCaption, setLanguage, setIsOpenSubtitles]);
const selectLastUsedLanguage = useCallback(async () => {
const language = lastSelectedLanguage ?? "en";
diff --git a/src/components/player/internals/ContextMenu/Links.tsx b/src/components/player/internals/ContextMenu/Links.tsx
index 616647a98..9b49db887 100644
--- a/src/components/player/internals/ContextMenu/Links.tsx
+++ b/src/components/player/internals/ContextMenu/Links.tsx
@@ -123,14 +123,34 @@ export function SelectableLink(props: {
children?: ReactNode;
disabled?: boolean;
error?: ReactNode;
+ chevron?: boolean;
}) {
let rightContent;
if (props.selected) {
+ if (props.chevron) {
+ rightContent = (
+
+ ("/genre/movie/list", {
+ api_key: conf().TMDB_READ_API_KEY,
+ language: "en-US",
+ });
+
+ // Shuffle the array of genres
+ for (let i = data.genres.length - 1; i > 0; i -= 1) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [data.genres[i], data.genres[j]] = [data.genres[j], data.genres[i]];
+ }
+
+ // Fetch only the first 4 genres
+ setGenres(data.genres.slice(0, 4));
+ } catch (error) {
+ console.error("Error fetching genres:", error);
+ }
+ };
+
+ fetchGenres();
+ }, []);
+
+ // Fetch movies for each genre
+ useEffect(() => {
+ const fetchMoviesForGenre = async (genreId: number) => {
+ try {
+ const movies: any[] = [];
+ for (let page = 1; page <= 6; page += 1) {
+ // Fetch only 6 pages
+ const data = await get("/discover/movie", {
+ api_key: conf().TMDB_READ_API_KEY,
+ with_genres: genreId.toString(),
+ language: "en-US",
+ page: page.toString(),
+ });
+
+ movies.push(...data.results);
+ }
+
+ // Shuffle the movies
+ for (let i = movies.length - 1; i > 0; i -= 1) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [movies[i], movies[j]] = [movies[j], movies[i]];
+ }
+
+ setGenreMovies((prevGenreMovies) => ({
+ ...prevGenreMovies,
+ [genreId]: movies,
+ }));
+ } catch (error) {
+ console.error(`Error fetching movies for genre ${genreId}:`, error);
+ }
+ };
+
+ genres.forEach((genre) => fetchMoviesForGenre(genre.id));
+ }, [genres]);
+
// Update the scrollCarousel function to use the new ref map
function scrollCarousel(categorySlug: string, direction: string) {
const carousel = carouselRefs.current[categorySlug];
@@ -176,6 +235,7 @@ export function Discover() {
const movieWidth = movieElements[0].offsetWidth;
const visibleMovies = Math.floor(carousel.offsetWidth / movieWidth);
const scrollAmount = movieWidth * visibleMovies * 0.69; // Silly number :3
+
if (direction === "left") {
if (carousel.scrollLeft <= 5) {
carousel.scrollBy({
@@ -252,21 +312,6 @@ export function Discover() {
}, 345); // Disable scrolling every 3 milliseconds after interaction (only for mouse wheel doe)
}
- const handleMouseEnter = () => {
- document.body.style.overflow = "hidden";
- };
-
- const handleMouseLeave = () => {
- document.body.style.overflow = "auto";
- };
-
- useEffect(() => {
- window.addEventListener("mouseleave", handleMouseLeave);
- return () => {
- window.removeEventListener("mouseleave", handleMouseLeave);
- };
- }, []);
-
function renderMovies(medias: Media[], category: string, isTVShow = false) {
const categorySlug = `${category.toLowerCase().replace(/ /g, "-")}${Math.random()}`; // Convert the category to a slug
const displayCategory =
@@ -277,6 +322,7 @@ export function Discover() {
: isTVShow
? `${category} Shows`
: `${category} Movies`;
+
// https://tailwindcss.com/docs/border-style
return (
+
+
+ ) : (
+ content
+ )}
+ {t("player.menus.subtitles.empty")}
+
+
+
+ router.navigate("/captions")}>
+ {t("player.menus.subtitles.OpenSubtitlesChoice")}
+
+
+
+
+
+
@@ -295,48 +341,58 @@ export function Discover() {
carouselRefs.current[categorySlug] = el;
}}
>
- {medias.slice(0, 20).map((media) => (
-
- navigate(
- `/media/tmdb-${isTVShow ? "tv" : "movie"}-${media.id}-${
- isTVShow ? media.name : media.title
- }`,
+ {medias
+ .filter((media, index, self) => {
+ return (
+ index ===
+ self.findIndex(
+ (m) => m.id === media.id && m.title === media.title,
)
- }
- className="text-center relative mt-3 mx-[0.285em] mb-3 transition-transform hover:scale-105 duration-[0.45s]"
- style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
- >
-
- 
-
-
- ))}
+ );
+ })
+ .slice(0, 20)
+ .map((media) => (
+
+ navigate(
+ `/media/tmdb-${isTVShow ? "tv" : "movie"}-${media.id}-${
+ isTVShow ? media.name : media.title
+ }`,
+ )
+ }
+ className="text-center relative mt-3 mx-[0.285em] mb-3 transition-transform hover:scale-105 duration-[0.45s]"
+ style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
+ >
+
+
+
+ ))}
- {isTVShow - ? (media.name?.length ?? 0) > 32 - ? `${media.name?.slice(0, 32)}...` - : media.name - : (media.title?.length ?? 0) > 32 - ? `${media.title?.slice(0, 32)}...` - : media.title} -
-+ {isTVShow + ? (media.name?.length ?? 0) > 32 + ? `${media.name?.slice(0, 32)}...` + : media.name + : (media.title?.length ?? 0) > 32 + ? `${media.title?.slice(0, 32)}...` + : media.title} +
+
@@ -400,66 +456,6 @@ export function Discover() {
}
};
- // Fetch Movie genres
- useEffect(() => {
- const fetchGenres = async () => {
- try {
- const data = await get("/genre/movie/list", {
- api_key: conf().TMDB_READ_API_KEY,
- language: "en-US",
- });
-
- // Shuffle the array of genres
- for (let i = data.genres.length - 1; i > 0; i -= 1) {
- const j = Math.floor(Math.random() * (i + 1));
- [data.genres[i], data.genres[j]] = [data.genres[j], data.genres[i]];
- }
-
- // Fetch only the first 4 genres
- setGenres(data.genres.slice(0, 4));
- } catch (error) {
- console.error("Error fetching genres:", error);
- }
- };
-
- fetchGenres();
- }, []);
-
- // Fetch movies for each genre
- useEffect(() => {
- const fetchMoviesForGenre = async (genreId: number) => {
- try {
- const movies: any[] = [];
- for (let page = 1; page <= 6; page += 1) {
- // Fetch only 6 pages
- const data = await get("/discover/movie", {
- api_key: conf().TMDB_READ_API_KEY,
- with_genres: genreId.toString(),
- language: "en-US",
- page: page.toString(),
- });
-
- movies.push(...data.results);
- }
-
- // Shuffle the movies
- for (let i = movies.length - 1; i > 0; i -= 1) {
- const j = Math.floor(Math.random() * (i + 1));
- [movies[i], movies[j]] = [movies[j], movies[i]];
- }
-
- setGenreMovies((prevGenreMovies) => ({
- ...prevGenreMovies,
- [genreId]: movies,
- }));
- } catch (error) {
- console.error(`Error fetching movies for genre ${genreId}:`, error);
- }
- };
-
- genres.forEach((genre) => fetchMoviesForGenre(genre.id));
- }, [genres]);
-
useEffect(() => {
let countdownInterval: NodeJS.Timeout;
if (countdown !== null && countdown > 0) {
@@ -547,7 +543,7 @@ export function Discover() {
))}
{genres.map((genre) => (
@@ -574,7 +570,7 @@ export function Discover() {
))}
{tvGenres.map((genre) => (
diff --git a/src/pages/Dmca.tsx b/src/pages/Dmca.tsx
index b96a2ce55..dbb59e8ec 100644
--- a/src/pages/Dmca.tsx
+++ b/src/pages/Dmca.tsx
@@ -28,6 +28,9 @@ export function DmcaPage() {
components={{
bold: ,
}}
+ values={{
+ dmca: conf().DMCA_EMAIL,
+ }}
/>
diff --git a/src/stores/player/slices/source.ts b/src/stores/player/slices/source.ts
index 5cbfc6db8..779244263 100644
--- a/src/stores/player/slices/source.ts
+++ b/src/stores/player/slices/source.ts
@@ -54,6 +54,7 @@ export interface CaptionListItem {
url: string;
needsProxy: boolean;
hls?: boolean;
+ opensubtitles?: boolean;
}
export interface AudioTrack {
diff --git a/src/stores/subtitles/index.ts b/src/stores/subtitles/index.ts
index eaac0cb2d..fab666442 100644
--- a/src/stores/subtitles/index.ts
+++ b/src/stores/subtitles/index.ts
@@ -36,11 +36,13 @@ export interface SubtitleStore {
};
enabled: boolean;
lastSelectedLanguage: string | null;
+ isOpenSubtitles: boolean;
styling: SubtitleStyling;
overrideCasing: boolean;
delay: number;
updateStyling(newStyling: Partial): void;
setLanguage(language: string | null): void;
+ setIsOpenSubtitles(isOpenSubtitles: boolean): void;
setCustomSubs(): void;
setOverrideCasing(enabled: boolean): void;
setDelay(delay: number): void;
@@ -56,6 +58,7 @@ export const useSubtitleStore = create(
lastSelectedLanguage: null,
},
lastSelectedLanguage: null,
+ isOpenSubtitles: false,
overrideCasing: false,
delay: 0,
styling: {
@@ -96,6 +99,11 @@ export const useSubtitleStore = create(
if (lang) s.lastSelectedLanguage = lang;
});
},
+ setIsOpenSubtitles(isOpenSubtitles) {
+ set((s) => {
+ s.isOpenSubtitles = isOpenSubtitles;
+ });
+ },
setCustomSubs() {
set((s) => {
s.enabled = true;
diff --git a/src/utils/language.ts b/src/utils/language.ts
index 9889d1c5e..505399857 100644
--- a/src/utils/language.ts
+++ b/src/utils/language.ts
@@ -63,7 +63,7 @@ const extraLanguages: Record = {
name: "Pirate",
nativeName: "Pirate Tongue",
},
- cat: {
+ kitty: {
code: "cat",
name: "Cat",
nativeName: "Kitty Speak",