Merge branch 'dev' into extension

This commit is contained in:
mrjvs 2024-01-20 14:57:40 +01:00 committed by GitHub
commit 8a79924abd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 48 additions and 25 deletions

View File

@ -173,7 +173,7 @@ jobs:
uses: docker/build-push-action@v5
with:
push: true
platforms: linux/amd64,linux/arm64,linux/arm
platforms: linux/amd64,linux/arm64
context: .
labels: ${{ steps.meta.outputs.labels }}
tags: ${{ steps.meta.outputs.tags }}

View File

@ -416,14 +416,14 @@
}
},
"server": {
"description": "If you would like to connect to a custom backend to store your data, enable this and provide the URL.",
"description": "If you would like to connect to a custom backend to store your data, enable this and provide the URL. <0>Instructions.</0>",
"label": "Custom server",
"urlLabel": "Custom server URL"
},
"title": "Connections",
"workers": {
"addButton": "Add new worker",
"description": "To make the application function, all traffic is routed through proxies. Enable this if you want to bring your own workers.",
"description": "To make the application function, all traffic is routed through proxies. Enable this if you want to bring your own workers. <0>Instructions.</0>",
"emptyState": "No workers yet, add one below",
"label": "Use custom proxy workers",
"urlLabel": "Worker URLs",

View File

@ -41,7 +41,7 @@ export function Button(props: Props) {
props.padding ?? "px-4 py-3",
props.className,
colorClasses,
props.disabled ? "cursor-not-allowed bg-opacity-60 text-opacity-60" : null,
props.disabled ? "!cursor-not-allowed bg-opacity-60 text-opacity-60" : null,
);
if (props.disabled)

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

@ -5,7 +5,6 @@ import { Avatar } from "@/components/Avatar";
import { Button } from "@/components/buttons/Button";
import { ColorPicker, initialColor } from "@/components/form/ColorPicker";
import { IconPicker, initialIcon } from "@/components/form/IconPicker";
import { Icon, Icons } from "@/components/Icon";
import {
LargeCard,
LargeCardButtons,

View File

@ -1,10 +1,11 @@
import { Dispatch, SetStateAction, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { Trans, useTranslation } from "react-i18next";
import { Button } from "@/components/buttons/Button";
import { Toggle } from "@/components/buttons/Toggle";
import { Icon, Icons } from "@/components/Icon";
import { SettingsCard } from "@/components/layout/SettingsCard";
import { MwLink } from "@/components/text/Link";
import { AuthInputBox } from "@/components/text-inputs/AuthInputBox";
import { Divider } from "@/components/utils/Divider";
import { Heading1 } from "@/components/utils/Text";
@ -53,7 +54,11 @@ function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) {
{t("settings.connections.workers.label")}
</p>
<p className="max-w-[20rem] font-medium">
{t("settings.connections.workers.description")}
<Trans i18nKey="settings.connections.workers.description">
<MwLink to="https://docs.movie-web.app/proxy/deploy">
Proxy documentation
</MwLink>
</Trans>
</p>
</div>
<div>
@ -119,7 +124,11 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
{t("settings.connections.server.label")}
</p>
<p className="max-w-[20rem] font-medium">
{t("settings.connections.server.description")}
<Trans i18nKey="settings.connections.server.description">
<MwLink to="https://docs.movie-web.app/backend/deploy">
Backend documentation
</MwLink>
</Trans>
</p>
</div>
<div>

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;