Merge branch 'movie-web:dev' into dev

This commit is contained in:
zisra 2024-01-11 15:11:15 -06:00 committed by GitHub
commit 97b50d8460
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 17 deletions

View File

@ -75,6 +75,7 @@ function CustomCaptionOption() {
setCaption({
language: "custom",
srtData: converted,
id: "custom-caption",
});
setCustomSubs();
});
@ -115,39 +116,38 @@ function useSubtitleList(subs: CaptionListItem[], searchQuery: string) {
export function CaptionsView({ id }: { id: string }) {
const { t } = useTranslation();
const router = useOverlayRouter(id);
const lang = usePlayerStore((s) => s.caption.selected?.language);
const selectedCaptionId = usePlayerStore((s) => s.caption.selected?.id);
const [currentlyDownloading, setCurrentlyDownloading] = useState<
string | null
>(null);
const { selectLanguage, disable } = useCaptions();
const { selectCaptionById, disable } = useCaptions();
const captionList = usePlayerStore((s) => s.captionList);
const [searchQuery, setSearchQuery] = useState("");
const subtitleList = useSubtitleList(captionList, searchQuery);
const [downloadReq, startDownload] = useAsyncFn(
async (language: string) => {
setCurrentlyDownloading(language);
return selectLanguage(language);
async (captionId: string) => {
setCurrentlyDownloading(captionId);
return selectCaptionById(captionId);
},
[selectLanguage, setCurrentlyDownloading],
[selectCaptionById, setCurrentlyDownloading],
);
const content = subtitleList.map((v, i) => {
return (
<CaptionOption
// key must use index to prevent url collisions
// eslint-disable-next-line react/no-array-index-key
key={`${i}-${v.url}`}
key={v.id}
countryCode={v.language}
selected={lang === v.language}
loading={v.language === currentlyDownloading && downloadReq.loading}
selected={v.id === selectedCaptionId}
loading={v.id === currentlyDownloading && downloadReq.loading}
error={
v.language === currentlyDownloading && downloadReq.error
v.id === currentlyDownloading && downloadReq.error
? downloadReq.error.toString()
: undefined
}
onClick={() => startDownload(v.language)}
onClick={() => startDownload(v.id)}
>
{v.languageName}
</CaptionOption>
@ -176,7 +176,7 @@ export function CaptionsView({ id }: { id: string }) {
</div>
</div>
<Menu.ScrollToActiveSection className="!pt-1 mt-2 pb-3">
<CaptionOption onClick={() => disable()} selected={!lang}>
<CaptionOption onClick={() => disable()} selected={!selectedCaptionId}>
{t("player.menus.subtitles.offChoice")}
</CaptionOption>
<CustomCaptionOption />

View File

@ -41,6 +41,7 @@ export interface DisplayMeta {
}
export interface DisplayCaption {
id: string;
srtData: string;
language: string;
url?: string;

View File

@ -14,22 +14,32 @@ export function useCaptions() {
const lastSelectedLanguage = useSubtitleStore((s) => s.lastSelectedLanguage);
const captionList = usePlayerStore((s) => s.captionList);
const selectLanguage = useCallback(
async (language: string) => {
const caption = captionList.find((v) => v.language === language);
const selectCaptionById = useCallback(
async (captionId: string) => {
const caption = captionList.find((v) => v.id === captionId);
if (!caption) return;
const srtData = await downloadCaption(caption);
setCaption({
id: caption.id,
language: caption.language,
srtData,
url: caption.url,
});
resetSubtitleSpecificSettings();
setLanguage(language);
setLanguage(caption.language);
},
[setLanguage, captionList, setCaption, resetSubtitleSpecificSettings],
);
const selectLanguage = useCallback(
async (language: string) => {
const caption = captionList.find((v) => v.language === language);
if (!caption) return;
return selectCaptionById(caption.id);
},
[captionList, selectCaptionById],
);
const disable = useCallback(async () => {
setCaption(null);
setLanguage(null);
@ -56,5 +66,6 @@ export function useCaptions() {
selectLastUsedLanguage,
toggleLastUsed,
selectLastUsedLanguageIfEnabled,
selectCaptionById,
};
}

View File

@ -80,6 +80,7 @@ export function convertProviderCaption(
captions: RunOutput["stream"]["captions"],
): CaptionListItem[] {
return captions.map((v) => ({
id: v.id,
language: v.language,
url: v.url,
needsProxy: v.hasCorsRestrictions,

View File

@ -42,12 +42,14 @@ export interface PlayerMeta {
}
export interface Caption {
id: string;
language: string;
url?: string;
srtData: string;
}
export interface CaptionListItem {
id: string;
language: string;
url: string;
needsProxy: boolean;