lmmelo16
1 year ago
committed by
GitHub
22 changed files with 405 additions and 49 deletions
@ -0,0 +1,51 @@
@@ -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 @@
@@ -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 @@
@@ -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