mirror of
https://github.com/nimbold/Firelink.git
synced 2026-08-07 18:03:23 +00:00
fix(media): harden YouTube metadata loading
Bundle the self-contained yt-dlp onedir runtime to avoid per-request extraction latency, explicitly use bundled Deno, and guard the packaging layout. Also fix Add window menu/reset behavior and harden diagnostics and toast lifecycle handling.
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
useDownloadStore,
|
||||
|
||||
getSiteLogin,
|
||||
type AddDownloadAction
|
||||
} from '../store/useDownloadStore';
|
||||
@@ -288,6 +287,7 @@ export const AddDownloadsModal = () => {
|
||||
const [pendingUseSharedDestination, setPendingUseSharedDestination] = useState(false);
|
||||
const [resolvedLocation, setResolvedLocation] = useState('');
|
||||
const [isActionMenuOpen, setIsActionMenuOpen] = useState(false);
|
||||
const [isQueueMenuOpen, setIsQueueMenuOpen] = useState(false);
|
||||
const actionMenuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Right Form
|
||||
@@ -332,6 +332,7 @@ export const AddDownloadsModal = () => {
|
||||
setCookies(pendingAddCookies);
|
||||
setMirrors('');
|
||||
setIsActionMenuOpen(false);
|
||||
setIsQueueMenuOpen(false);
|
||||
} else {
|
||||
setUrls('');
|
||||
}
|
||||
@@ -341,8 +342,7 @@ export const AddDownloadsModal = () => {
|
||||
pendingAddReferer,
|
||||
pendingAddHeaders,
|
||||
pendingAddCookies,
|
||||
baseDownloadFolder,
|
||||
queues
|
||||
baseDownloadFolder
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -350,6 +350,7 @@ export const AddDownloadsModal = () => {
|
||||
const closeMenu = (event: PointerEvent) => {
|
||||
if (!actionMenuRef.current?.contains(event.target as Node)) {
|
||||
setIsActionMenuOpen(false);
|
||||
setIsQueueMenuOpen(false);
|
||||
}
|
||||
};
|
||||
window.addEventListener('pointerdown', closeMenu);
|
||||
@@ -1006,7 +1007,7 @@ export const AddDownloadsModal = () => {
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-xs text-text-secondary font-medium">Connections per File</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input type="range" min="1" max="16" value={connections} onChange={e=>setConnections(Number(e.target.value))} className={`add-download-range w-24 accent-blue-500 cursor-pointer ${parsedItems.some(i => i.isMedia) ? 'opacity-50 pointer-events-none' : ''}`} aria-label="Connections per file" />
|
||||
<input type="range" min="1" max="16" value={connections} onChange={e=>setConnections(Number(e.target.value))} className="add-download-range w-24 accent-blue-500 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50" disabled={parsedItems.some(i => i.isMedia)} aria-label="Connections per file" />
|
||||
<span className="add-download-value text-xs text-text-primary font-mono w-6 text-center">{connections}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1111,7 +1112,10 @@ export const AddDownloadsModal = () => {
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsActionMenuOpen(open => !open)}
|
||||
onClick={() => {
|
||||
setIsActionMenuOpen(open => !open);
|
||||
setIsQueueMenuOpen(false);
|
||||
}}
|
||||
disabled={parsedItems.length === 0}
|
||||
className="add-download-button add-download-button-secondary px-4 text-xs"
|
||||
aria-label="Add to..."
|
||||
@@ -1141,6 +1145,9 @@ export const AddDownloadsModal = () => {
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={isQueueMenuOpen}
|
||||
onClick={() => setIsQueueMenuOpen(open => !open)}
|
||||
className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left hover:bg-item-hover"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -1149,7 +1156,7 @@ export const AddDownloadsModal = () => {
|
||||
</div>
|
||||
<ChevronRight size={14} />
|
||||
</button>
|
||||
<div className="app-modal absolute bottom-0 right-[calc(100%+4px)] z-[80] hidden min-w-[160px] py-1.5 group-hover:block">
|
||||
<div className={`app-modal absolute bottom-0 right-[calc(100%+4px)] z-[80] min-w-[160px] py-1.5 ${isQueueMenuOpen ? 'block' : 'hidden group-hover:block'}`}>
|
||||
{queues.map(queue => (
|
||||
<button
|
||||
key={queue.id}
|
||||
@@ -1157,6 +1164,7 @@ export const AddDownloadsModal = () => {
|
||||
role="menuitem"
|
||||
onClick={() => {
|
||||
setIsActionMenuOpen(false);
|
||||
setIsQueueMenuOpen(false);
|
||||
void handleAction({ type: 'add-to-queue', queueId: queue.id });
|
||||
}}
|
||||
className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-item-hover"
|
||||
|
||||
@@ -28,7 +28,9 @@ export default function DiagnosticsView() {
|
||||
const MAX_LOG_LINES = 2000;
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
const unlistenPromise = attachLogger((logRecord) => {
|
||||
if (!active) return;
|
||||
const level = getLevelStr(logRecord.level);
|
||||
const message = logRecord.message;
|
||||
if (message.includes('[download]') && message.includes('%')) return;
|
||||
@@ -37,7 +39,10 @@ export default function DiagnosticsView() {
|
||||
return next.length > MAX_LOG_LINES ? next.slice(-MAX_LOG_LINES) : next;
|
||||
});
|
||||
});
|
||||
return () => { unlistenPromise.then(f => f()); };
|
||||
return () => {
|
||||
active = false;
|
||||
void unlistenPromise.then(unlisten => unlisten()).catch(() => undefined);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
|
||||
import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect, useRef } from 'react';
|
||||
import { CheckCircle2, AlertCircle, Info, XCircle, X } from 'lucide-react';
|
||||
|
||||
export type ToastVariant = 'success' | 'info' | 'warning' | 'error';
|
||||
@@ -11,6 +11,10 @@ export interface ToastMessage {
|
||||
isActionable?: boolean;
|
||||
}
|
||||
|
||||
interface ToastState extends ToastMessage {
|
||||
exiting?: boolean;
|
||||
}
|
||||
|
||||
interface ToastContextType {
|
||||
addToast: (toast: Omit<ToastMessage, 'id'>) => void;
|
||||
removeToast: (id: string) => void;
|
||||
@@ -19,14 +23,16 @@ interface ToastContextType {
|
||||
const ToastContext = createContext<ToastContextType | undefined>(undefined);
|
||||
|
||||
export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
|
||||
const [toasts, setToasts] = useState<ToastMessage[]>([]);
|
||||
const [toasts, setToasts] = useState<ToastState[]>([]);
|
||||
const nextToastId = useRef(0);
|
||||
|
||||
const addToast = useCallback((toast: Omit<ToastMessage, 'id'>) => {
|
||||
setToasts(prev => [...prev, { ...toast, id: Math.random().toString(36).substring(2, 9) }]);
|
||||
nextToastId.current += 1;
|
||||
setToasts(prev => [...prev, { ...toast, id: `toast-${nextToastId.current}` }]);
|
||||
}, []);
|
||||
|
||||
const removeToast = useCallback((id: string) => {
|
||||
setToasts(prev => prev.map(t => t.id === id ? { ...t, exiting: true } : t) as any);
|
||||
setToasts(prev => prev.map(t => t.id === id ? { ...t, exiting: true } : t));
|
||||
setTimeout(() => {
|
||||
setToasts(prev => prev.filter(t => t.id !== id));
|
||||
}, 300); // Matches the exit animation duration
|
||||
@@ -35,7 +41,7 @@ export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) =
|
||||
return (
|
||||
<ToastContext.Provider value={{ addToast, removeToast }}>
|
||||
{children}
|
||||
<ToastContainer toasts={toasts as any} removeToast={removeToast} />
|
||||
<ToastContainer toasts={toasts} removeToast={removeToast} />
|
||||
</ToastContext.Provider>
|
||||
);
|
||||
};
|
||||
@@ -46,13 +52,13 @@ export const useToast = () => {
|
||||
return context;
|
||||
};
|
||||
|
||||
const ToastItem: React.FC<{ toast: ToastMessage & { exiting?: boolean }; removeToast: (id: string) => void }> = ({ toast, removeToast }) => {
|
||||
const ToastItem: React.FC<{ toast: ToastState; removeToast: (id: string) => void }> = ({ toast, removeToast }) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
let timeoutDuration = toast.duration ?? 5000;
|
||||
if (timeoutDuration < 5000) timeoutDuration = 5000;
|
||||
|
||||
|
||||
if (toast.isActionable || (toast.variant === 'error' && !toast.duration)) {
|
||||
return;
|
||||
}
|
||||
@@ -103,7 +109,7 @@ const ToastItem: React.FC<{ toast: ToastMessage & { exiting?: boolean }; removeT
|
||||
>
|
||||
<div className="mt-0.5">{Icon}</div>
|
||||
<div className="font-semibold flex-1 tracking-tight">{toast.message}</div>
|
||||
<button
|
||||
<button
|
||||
onClick={() => removeToast(toast.id)}
|
||||
className="shrink-0 ml-2 mt-0.5 opacity-60 hover:opacity-100 hover:bg-black/5 dark:hover:bg-white/10 p-1 rounded-full transition-all active:scale-90"
|
||||
aria-label="Dismiss notification"
|
||||
@@ -114,7 +120,7 @@ const ToastItem: React.FC<{ toast: ToastMessage & { exiting?: boolean }; removeT
|
||||
);
|
||||
};
|
||||
|
||||
const ToastContainer: React.FC<{ toasts: ToastMessage[]; removeToast: (id: string) => void }> = ({ toasts, removeToast }) => {
|
||||
const ToastContainer: React.FC<{ toasts: ToastState[]; removeToast: (id: string) => void }> = ({ toasts, removeToast }) => {
|
||||
return (
|
||||
<div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] flex w-full max-w-[420px] flex-col gap-3 pointer-events-none items-center px-4">
|
||||
<style>{`
|
||||
|
||||
Reference in New Issue
Block a user