lmmelo16
1 year ago
committed by
GitHub
22 changed files with 405 additions and 49 deletions
@ -0,0 +1,51 @@ |
|||||||
|
import { useEffect, useState } from "react"; |
||||||
|
import type { DragEvent, ReactNode } from "react"; |
||||||
|
|
||||||
|
interface FileDropHandlerProps { |
||||||
|
children: ReactNode; |
||||||
|
className: string; |
||||||
|
onDrop: (event: DragEvent<HTMLDivElement>) => void; |
||||||
|
onDraggingChange: (isDragging: boolean) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export function FileDropHandler(props: FileDropHandlerProps) { |
||||||
|
const [dragging, setDragging] = useState(false); |
||||||
|
|
||||||
|
const handleDragEnter = (event: DragEvent<HTMLDivElement>) => { |
||||||
|
event.preventDefault(); |
||||||
|
setDragging(true); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleDragLeave = (event: DragEvent<HTMLDivElement>) => { |
||||||
|
if (!event.currentTarget.contains(event.relatedTarget as Node)) { |
||||||
|
setDragging(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const handleDragOver = (event: DragEvent<HTMLDivElement>) => { |
||||||
|
event.preventDefault(); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleDrop = (event: DragEvent<HTMLDivElement>) => { |
||||||
|
event.preventDefault(); |
||||||
|
setDragging(false); |
||||||
|
|
||||||
|
props.onDrop(event); |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
props.onDraggingChange(dragging); |
||||||
|
}, [dragging, props]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
onDragEnter={handleDragEnter} |
||||||
|
onDragLeave={handleDragLeave} |
||||||
|
onDragOver={handleDragOver} |
||||||
|
onDrop={handleDrop} |
||||||
|
className={props.className} |
||||||
|
> |
||||||
|
{props.children} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,65 @@ |
|||||||
|
import { useCallback } from "react"; |
||||||
|
import { useTranslation } from "react-i18next"; |
||||||
|
|
||||||
|
import { FlagIcon } from "@/components/FlagIcon"; |
||||||
|
import { Menu } from "@/components/player/internals/ContextMenu"; |
||||||
|
import { useOverlayRouter } from "@/hooks/useOverlayRouter"; |
||||||
|
import { AudioTrack } from "@/stores/player/slices/source"; |
||||||
|
import { usePlayerStore } from "@/stores/player/store"; |
||||||
|
import { getPrettyLanguageNameFromLocale } from "@/utils/language"; |
||||||
|
|
||||||
|
import { SelectableLink } from "../../internals/ContextMenu/Links"; |
||||||
|
|
||||||
|
export function AudioOption(props: { |
||||||
|
langCode?: string; |
||||||
|
children: React.ReactNode; |
||||||
|
selected?: boolean; |
||||||
|
onClick?: () => void; |
||||||
|
}) { |
||||||
|
return ( |
||||||
|
<SelectableLink selected={props.selected} onClick={props.onClick}> |
||||||
|
<span className="flex items-center"> |
||||||
|
<span data-code={props.langCode} className="mr-3 inline-flex"> |
||||||
|
<FlagIcon langCode={props.langCode} /> |
||||||
|
</span> |
||||||
|
<span>{props.children}</span> |
||||||
|
</span> |
||||||
|
</SelectableLink> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export function AudioView({ id }: { id: string }) { |
||||||
|
const { t } = useTranslation(); |
||||||
|
const unknownChoice = t("player.menus.subtitles.unknownLanguage"); |
||||||
|
|
||||||
|
const router = useOverlayRouter(id); |
||||||
|
const audioTracks = usePlayerStore((s) => s.audioTracks); |
||||||
|
const currentAudioTrack = usePlayerStore((s) => s.currentAudioTrack); |
||||||
|
const changeAudioTrack = usePlayerStore((s) => s.display?.changeAudioTrack); |
||||||
|
|
||||||
|
const change = useCallback( |
||||||
|
(track: AudioTrack) => { |
||||||
|
changeAudioTrack?.(track); |
||||||
|
router.close(); |
||||||
|
}, |
||||||
|
[router, changeAudioTrack], |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Menu.BackLink onClick={() => router.navigate("/")}>Audio</Menu.BackLink> |
||||||
|
<Menu.Section className="flex flex-col pb-4"> |
||||||
|
{audioTracks.map((v) => ( |
||||||
|
<AudioOption |
||||||
|
key={v.id} |
||||||
|
selected={v.id === currentAudioTrack?.id} |
||||||
|
langCode={v.language} |
||||||
|
onClick={audioTracks.includes(v) ? () => change(v) : undefined} |
||||||
|
> |
||||||
|
{getPrettyLanguageNameFromLocale(v.language) ?? unknownChoice} |
||||||
|
</AudioOption> |
||||||
|
))} |
||||||
|
</Menu.Section> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
import { isAllowedExtensionVersion } from "@/backend/extension/compatibility"; |
||||||
|
import { extensionInfo } from "@/backend/extension/messaging"; |
||||||
|
|
||||||
|
export type ExtensionStatus = |
||||||
|
| "unknown" |
||||||
|
| "failed" |
||||||
|
| "disallowed" |
||||||
|
| "noperms" |
||||||
|
| "outdated" |
||||||
|
| "success"; |
||||||
|
|
||||||
|
export async function getExtensionState(): Promise<ExtensionStatus> { |
||||||
|
const info = await extensionInfo(); |
||||||
|
if (!info) return "unknown"; // cant talk to extension
|
||||||
|
if (!info.success) return "failed"; // extension failed to respond
|
||||||
|
if (!info.allowed) return "disallowed"; // extension is not enabled on this page
|
||||||
|
if (!info.hasPermission) return "noperms"; // extension has no perms to do it's tasks
|
||||||
|
if (!isAllowedExtensionVersion(info.version)) return "outdated"; // extension is too old
|
||||||
|
return "success"; // no problems
|
||||||
|
} |
||||||
Loading…
Reference in new issue