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:
NimBold
2026-06-20 23:57:13 +03:30
parent 7ec855efd4
commit a8b792074f
147 changed files with 1330 additions and 73 deletions
+14 -6
View File
@@ -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"
+6 -1
View File
@@ -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(() => {
+16 -10
View File
@@ -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>{`