Koha9/PlexPlaylistSync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge commit '5a29265854cee9c039f746f5685a538eff048fae'

Browse Source
This commit is contained in:
Koha9
2025-11-28 22:43:39 +09:00
parent 4c6af7115e 5a29265854
commit e5ba790b44
6 changed files with 269 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sample-front-end/App.tsx
+48 -8
View File
@@ -22,6 +22,10 @@ const App: React.FC = () => {
const [loadingLocal, setLoadingLocal] = useState(false);
const [loadingCloud, setLoadingCloud] = useState(false);
// Abort Controllers for Refresh Actions
const localAbortRef = useRef<AbortController | null>(null);
const cloudAbortRef = useRef<AbortController | null>(null);
// Connection Modal State
const [isConnectionModalOpen, setIsConnectionModalOpen] = useState(false);
@@ -100,36 +104,71 @@ const App: React.FC = () => {
// Fetch Local Playlists
const refreshLocal = useCallback(async () => {
if (localAbortRef.current) localAbortRef.current.abort();
const abortController = new AbortController();
localAbortRef.current = abortController;
setLoadingLocal(true);
const result = await apiService.getPlaylists(ServerType.LOCAL);
const result = await apiService.getPlaylists(ServerType.LOCAL, abortController.signal);
if (result.status === 'success') {
setLocalPlaylists(result.data);
}
setLoadingLocal(false);
localAbortRef.current = null;
}, []);
const cancelLocalRefresh = () => {
if (localAbortRef.current) {
localAbortRef.current.abort();
localAbortRef.current = null;
setLoadingLocal(false);
addToast("Local refresh cancelled.");
}
};
// Fetch Cloud Playlists and Info
const refreshCloud = useCallback(async () => {
if (cloudAbortRef.current) cloudAbortRef.current.abort();
const abortController = new AbortController();
cloudAbortRef.current = abortController;
setLoadingCloud(true);
// Fetch playlists
const playlistResult = await apiService.getPlaylists(ServerType.CLOUD);
const playlistResult = await apiService.getPlaylists(ServerType.CLOUD, abortController.signal);
if (!abortController.signal.aborted) {
if (playlistResult.status === 'success') {
setCloudPlaylists(playlistResult.data);
}
// Fetch server info
const infoResult = await apiService.getServerStatus();
const infoResult = await apiService.getServerStatus(abortController.signal);
if (infoResult.status === 'success') {
setCloudServerInfo(infoResult.data);
}
setLoadingCloud(false);
cloudAbortRef.current = null;
}
}, []);
const cancelCloudRefresh = () => {
if (cloudAbortRef.current) {
cloudAbortRef.current.abort();
cloudAbortRef.current = null;
setLoadingCloud(false);
addToast("Cloud refresh cancelled.");
}
};
// Initial Load
useEffect(() => {
refreshLocal();
refreshCloud();
return () => {
// Cleanup on unmount
if (localAbortRef.current) localAbortRef.current.abort();
if (cloudAbortRef.current) cloudAbortRef.current.abort();
}
}, [refreshLocal, refreshCloud]);
// Handle Strategy Change
@@ -146,8 +185,8 @@ const App: React.FC = () => {
const handleConnectSuccess = (serverInfo: PlexServerConnection) => {
setCloudServerInfo(serverInfo);
// Removed implicit toast here to allow the caller (ConnectionModal) to handle specific messaging
refreshCloud(); // Refresh playlists after new connection
// Refresh playlists after new connection
refreshCloud();
};
const getToastStyles = (toast: Toast): React.CSSProperties => {
@@ -221,7 +260,8 @@ const App: React.FC = () => {
{/* Main Content Area */}
<main className="flex-1 overflow-hidden relative z-10">
<div className="absolute inset-0 flex flex-col md:flex-row max-w-7xl mx-auto p-4 md:p-6 gap-3 md:gap-6">
{/* Reduced gap from gap-3/gap-6 to gap-2/gap-3 for tighter layout */}
<div className="absolute inset-0 flex flex-col md:flex-row max-w-7xl mx-auto p-4 md:p-6 gap-2 md:gap-3">
{/* Left Column - Local */}
<div className="flex-1 min-h-0 h-full w-full">
@@ -230,12 +270,11 @@ const App: React.FC = () => {
playlists={localPlaylists}
isLoading={loadingLocal}
onRefresh={refreshLocal}
onCancel={cancelLocalRefresh}
/>
</div>
{/* Strategy Selector - Positioned specifically between headers */}
{/* Desktop: Centered Horizontally, Top aligned with Headers (Padding Top 24px + Header Half Height ~40px = ~64px) */}
{/* Mobile: Centered Vertically, Right aligned with Headers (Padding Right 16px + Header Half Width ~36px = ~52px) */}
<div className="absolute
z-30
/* Mobile Positioning: Center Vertically, Anchored Right */
@@ -259,6 +298,7 @@ const App: React.FC = () => {
playlists={cloudPlaylists}
isLoading={loadingCloud}
onRefresh={refreshCloud}
onCancel={cancelCloudRefresh}
serverInfo={cloudServerInfo}
/>
</div>
sample-front-end/components/ConnectionModal.tsx
+91 -31
View File
@@ -1,8 +1,8 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { PlexConnectionSettings, PlexServerConnection, PlexLibrary } from '../types';
import { apiService } from '../services/api';
import { X, Server, Lock, User, Key, Globe, Eye, EyeOff, CheckCircle, Library, ChevronDown } from 'lucide-react';
import { X, Server, Lock, User, Key, Globe, Eye, EyeOff, CheckCircle, Library, ChevronDown, ChevronRight, Settings, Loader2 } from 'lucide-react';
interface ConnectionModalProps {
isOpen: boolean;
@@ -18,18 +18,22 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
port: '32400',
token: '',
username: '',
password: ''
password: '',
timeout: 9
});
const [isConnecting, setIsConnecting] = useState(false);
const [error, setError] = useState<string | null>(null);
const [showPassword, setShowPassword] = useState(false);
const [showAdvanced, setShowAdvanced] = useState(false);
// Post-connection state
const [connectedServerInfo, setConnectedServerInfo] = useState<PlexServerConnection | null>(null);
const [libraries, setLibraries] = useState<PlexLibrary[]>([]);
const [selectedLibraryId, setSelectedLibraryId] = useState<string>('');
const abortControllerRef = useRef<AbortController | null>(null);
// Reset state when opening
useEffect(() => {
if (isOpen) {
@@ -38,6 +42,12 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
setLibraries([]);
setSelectedLibraryId('');
}
return () => {
// Cleanup any pending request if modal closes
if (abortControllerRef.current) {
abortControllerRef.current.abort();
}
};
}, [isOpen]);
if (!isOpen) return null;
@@ -47,6 +57,11 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleTimeoutChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const val = parseInt(e.target.value) || 0;
setFormData(prev => ({ ...prev, timeout: val }));
};
const handleLibraryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const newId = e.target.value;
setSelectedLibraryId(newId);
@@ -55,31 +70,46 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
if (lib && connectedServerInfo) {
const updatedInfo = { ...connectedServerInfo, libraryName: lib.title };
setConnectedServerInfo(updatedInfo);
// Notify parent of update
onConnectSuccess(updatedInfo);
// Show toast
onShowMessage(`Library switched to ${lib.title}`);
}
};
const isTokenProvided = formData.token.trim().length > 0;
// Dynamic styles for disabled fields
const disabledInputClass = isTokenProvided
? "bg-gray-700/50 text-gray-500 line-through decoration-gray-500 cursor-not-allowed border-gray-700"
: "bg-gray-800 text-gray-100 border-gray-600 focus:border-plex-orange focus:ring-1 focus:ring-plex-orange";
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
// If already connecting, this acts as Cancel
if (isConnecting) {
if (abortControllerRef.current) {
abortControllerRef.current.abort();
abortControllerRef.current = null;
setIsConnecting(false);
setError("Connection cancelled by user.");
}
return;
}
setError(null);
setIsConnecting(true);
const result = await apiService.connectToPlex(formData);
const abortController = new AbortController();
abortControllerRef.current = abortController;
const result = await apiService.connectToPlex(formData, abortController.signal);
// Only proceed if we weren't aborted/cancelled (though apiService handles error msg)
if (abortController.signal.aborted) return;
setIsConnecting(false);
abortControllerRef.current = null;
if (result.status === 'success' && result.data) {
// Update Token field and clear user/pass
setFormData(prev => ({
...prev,
token: result.data.token,
@@ -89,17 +119,13 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
const info = result.data.serverInfo;
setConnectedServerInfo(info);
// Explicitly show connection message here
onShowMessage(`Successfully connected to ${info.name || 'Plex Server'}`);
// Handle libraries
const libs = info.libraries || [];
setLibraries(libs);
if (libs.length > 0) {
const defaultLib = libs[0];
setSelectedLibraryId(defaultLib.id);
// Pass connection info back with default library name explicitly set (though mock already does it)
onConnectSuccess({
...info,
libraryName: defaultLib.title
@@ -116,10 +142,10 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
<div className="bg-gray-900 border border-gray-700 rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
<div className="bg-gray-900 border border-gray-700 rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200 flex flex-col max-h-[90vh]">
{/* Header */}
<div className="px-6 py-4 bg-gray-800 border-b border-gray-700 flex items-center justify-between">
<div className="px-6 py-4 bg-gray-800 border-b border-gray-700 flex items-center justify-between flex-none">
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
<Server size={18} className={isConnected ? "text-green-400" : "text-plex-orange"} />
{isConnected ? 'Server Connected' : 'Connect Plex Server'}
@@ -130,7 +156,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
</div>
{/* Body */}
<div className="p-6">
<div className="p-6 overflow-y-auto custom-scrollbar">
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
@@ -148,7 +174,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
name="protocol"
value={formData.protocol}
onChange={handleChange}
disabled={isConnected}
disabled={isConnected || isConnecting}
className={`w-full h-10 px-2 bg-gray-800 border border-gray-600 rounded-md text-sm text-white focus:border-plex-orange focus:outline-none ${isConnected ? 'opacity-60 cursor-not-allowed' : ''}`}
>
<option value="http">HTTP</option>
@@ -164,7 +190,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
type="text"
name="address"
required
disabled={isConnected}
disabled={isConnected || isConnecting}
placeholder="IP Address or Domain"
value={formData.address}
onChange={handleChange}
@@ -178,7 +204,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
<input
type="text"
name="port"
disabled={isConnected}
disabled={isConnected || isConnecting}
placeholder="Port (e.g. 32400)"
value={formData.port}
onChange={handleChange}
@@ -201,7 +227,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
<input
type="text"
name="token"
disabled={isConnected}
disabled={isConnected || isConnecting}
placeholder="X-Plex-Token (Optional)"
value={formData.token}
onChange={handleChange}
@@ -223,7 +249,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
<input
type="text"
name="username"
disabled={isTokenProvided}
disabled={isTokenProvided || isConnecting}
placeholder="Username / Email"
value={formData.username}
onChange={handleChange}
@@ -239,7 +265,7 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
<input
type={showPassword ? "text" : "password"}
name="password"
disabled={isTokenProvided}
disabled={isTokenProvided || isConnecting}
placeholder="Password"
value={formData.password}
onChange={handleChange}
@@ -247,33 +273,67 @@ const ConnectionModal: React.FC<ConnectionModalProps> = ({ isOpen, onClose, onCo
/>
<button
type="button"
disabled={isTokenProvided}
disabled={isTokenProvided || isConnecting}
onClick={() => setShowPassword(!showPassword)}
className={`absolute inset-y-0 right-0 pr-3 flex items-center ${isTokenProvided ? 'cursor-not-allowed opacity-50' : 'cursor-pointer text-gray-400 hover:text-white'}`}
>
{showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
</button>
</div>
{isTokenProvided && (
<p className="text-[10px] text-yellow-500/80 italic text-center">
Credential login disabled when token is present.
</p>
)}
</>
)}
</div>
{/* Advanced Options */}
{!isConnected && (
<div className="border border-gray-800 rounded-lg overflow-hidden">
<button
type="button"
onClick={() => setShowAdvanced(!showAdvanced)}
className="w-full flex items-center justify-between px-3 py-2 bg-gray-800/50 hover:bg-gray-800 text-xs font-medium text-gray-400 hover:text-gray-200 transition-colors"
>
<div className="flex items-center gap-2">
<Settings size={14} />
<span>Advanced Options</span>
</div>
{showAdvanced ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
</button>
{showAdvanced && (
<div className="p-3 bg-gray-900/50 space-y-3 animate-in slide-in-from-top-2">
<div>
<label className="text-xs text-gray-500 mb-1 block">Connection Timeout (Seconds)</label>
<input
type="number"
min="1"
max="60"
name="timeout"
value={formData.timeout || 9}
onChange={handleTimeoutChange}
disabled={isConnecting}
className="w-full h-8 px-2 bg-gray-800 border border-gray-700 rounded-md text-xs text-white focus:border-plex-orange focus:outline-none"
/>
</div>
</div>
)}
</div>
)}
{!isConnected ? (
<button
type="submit"
disabled={isConnecting}
className={`w-full mt-4 py-2.5 rounded-lg text-sm font-bold text-gray-900 transition-all shadow-lg
className={`w-full mt-4 py-2.5 rounded-lg text-sm font-bold text-gray-900 transition-all shadow-lg flex items-center justify-center gap-2
${isConnecting
? 'bg-gray-600 cursor-wait'
? 'bg-red-500/80 hover:bg-red-500 text-white animate-pulse'
: 'bg-plex-orange hover:bg-yellow-500 active:scale-[0.98] shadow-plex-orange/20'
}`}
>
{isConnecting ? 'Connecting...' : 'Connect Server'}
{isConnecting ? (
<>
<Loader2 size={16} className="animate-spin" />
<span>Connecting... <span className="opacity-75 font-normal ml-1">(Cancel)</span></span>
</>
) : 'Connect Server'}
</button>
) : (
<div className="mt-2 p-2 bg-green-500/10 border border-green-500/20 rounded-lg text-center">
sample-front-end/components/ServerPanel.tsx
+36 -14
View File
@@ -2,17 +2,18 @@
import React from 'react';
import { Playlist, ServerType, PlexServerConnection } from '../types';
import PlaylistCard from './PlaylistCard';
import { RefreshCw, Server, Cloud, WifiOff } from 'lucide-react';
import { RefreshCw, Server, Cloud, WifiOff, X } from 'lucide-react';
interface ServerPanelProps {
type: ServerType;
playlists: Playlist[];
isLoading: boolean;
onRefresh: () => void;
onCancel?: () => void;
serverInfo?: PlexServerConnection;
}
const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, onRefresh, serverInfo }) => {
const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, onRefresh, onCancel, serverInfo }) => {
const isLocal = type === ServerType.LOCAL;
let Icon = isLocal ? Server : Cloud;
@@ -65,13 +66,21 @@ const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, o
}
}
// Handle Refresh/Cancel Click
const handleAction = () => {
if (isLoading && onCancel) {
onCancel();
} else {
onRefresh();
}
};
return (
<div className={`flex flex-row md:flex-col h-full ${bgGradient} rounded-2xl border ${borderColor} backdrop-blur-xl shadow-xl overflow-hidden transition-all duration-300`}>
{/* Header */}
{/* Mobile: Order Last (Right side), Vertical Text */}
{/* Desktop: Order First (Top side), Horizontal Text */}
<div className={`
<div
className={`
relative flex-none
order-last md:order-first
w-[72px] md:w-full
@@ -79,7 +88,8 @@ const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, o
flex flex-col md:flex-row items-center justify-between
py-6 md:py-0 md:px-8
bg-gray-800/60 border-l md:border-l-0 md:border-b border-white/5
`}>
`}
>
{/* Title Group */}
<div className="flex flex-col md:flex-row items-center md:space-x-4 overflow-hidden w-full md:w-auto h-full md:h-full md:py-4">
@@ -89,9 +99,8 @@ const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, o
<Icon size={22} strokeWidth={2} />
</div>
{/* Text Container - Vertical on Mobile, Horizontal on Desktop */}
{/* Text Container */}
<div className="flex-1 min-w-0 flex flex-col justify-center items-center md:items-start h-full md:h-auto w-full md:w-auto">
{/* Use vertical-rl for vertical text flow, rotate-180 to flip it bottom-up */}
<div className="flex flex-col justify-center w-full md:w-auto [writing-mode:vertical-rl] rotate-180 md:[writing-mode:horizontal-tb] md:rotate-0 items-center md:items-start gap-1 md:gap-0">
<h2 className="text-sm md:text-lg font-bold text-gray-100 tracking-wide whitespace-nowrap" title={displayTitle}>
{displayTitle}
@@ -103,14 +112,27 @@ const ServerPanel: React.FC<ServerPanelProps> = ({ type, playlists, isLoading, o
</div>
</div>
{/* Refresh Button */}
{/* Refresh/Stop Button */}
<button
onClick={onRefresh}
disabled={isLoading}
className="flex-shrink-0 p-2.5 text-gray-400 hover:text-white hover:bg-white/10 rounded-full transition-all active:scale-90 disabled:opacity-50 disabled:cursor-not-allowed mt-4 md:mt-0 md:ml-4"
title="Refresh Playlists"
onClick={handleAction}
className={`flex-shrink-0 p-2.5 rounded-full transition-all active:scale-90 mt-4 md:mt-0 md:ml-4 border border-transparent group relative
${isLoading
? 'text-plex-orange bg-plex-orange/10 border-plex-orange/20 hover:bg-red-500/10 hover:border-red-500/30'
: 'text-gray-400 hover:text-white hover:bg-white/10'
}
`}
title={isLoading ? "Cancel Refresh" : "Refresh Playlists"}
>
<RefreshCw size={20} className={isLoading ? 'animate-spin text-plex-orange' : ''} strokeWidth={2} />
{isLoading ? (
<div className="relative flex items-center justify-center">
{/* Outer Spinner */}
<RefreshCw size={20} strokeWidth={2} className="animate-spin opacity-40 group-hover:opacity-20 transition-opacity" />
{/* Inner Cancel X */}
<X size={12} strokeWidth={3} className="absolute text-plex-orange group-hover:text-red-400 transition-colors" />
</div>
) : (
<RefreshCw size={20} strokeWidth={2} />
)}
</button>
</div>
sample-front-end/components/StrategySelector.tsx
+2 -2
View File
@@ -129,10 +129,10 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
return (
<div className="relative group" ref={dropdownRef}>
{/* Trigger Button */}
{/* Trigger Button - Added Ring to create visual 'cutout' over panels */}
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800/90 border border-gray-600 hover:border-plex-orange text-gray-300 hover:text-white hover:bg-gray-700/80 transition-all shadow-2xl hover:shadow-plex-orange/30 ring-1 ring-black/40 backdrop-blur-sm active:scale-95"
className="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800/90 border border-gray-600 hover:border-plex-orange text-gray-300 hover:text-white hover:bg-gray-700/80 transition-all shadow-2xl hover:shadow-plex-orange/30 ring-[6px] md:ring-8 ring-gray-900 backdrop-blur-sm active:scale-95"
title={`Current Strategy: ${selectedOption.label}`}
>
<selectedOption.icon size={22} className={selectedOption.color} strokeWidth={2.5} />
sample-front-end/services/api.ts
+74 -24
View File
@@ -13,28 +13,28 @@ const MOCK_LIBRARIES: PlexLibrary[] = [
];
// Helper to simulate network request or call actual API
const fetchPlaylists = async (type: ServerType): Promise<Playlist[]> => {
// In a real Docker environment with FastAPI, you would do:
// const response = await fetch(`/api/playlists/${type.toLowerCase()}`);
// const data = await response.json();
// return data;
// Mocking for UI demonstration
return new Promise((resolve) => {
setTimeout(() => {
const fetchPlaylists = async (type: ServerType, signal?: AbortSignal): Promise<Playlist[]> => {
return new Promise((resolve, reject) => {
const timer = setTimeout(() => {
if (type === ServerType.LOCAL) {
resolve([...MOCK_LOCAL_PLAYLISTS]);
} else {
resolve([...MOCK_CLOUD_PLAYLISTS]);
}
}, SIMULATE_DELAY_MS);
if (signal) {
signal.addEventListener('abort', () => {
clearTimeout(timer);
reject(new DOMException('Aborted', 'AbortError'));
});
}
});
};
const fetchServerStatus = async (): Promise<PlexServerConnection> => {
// Mocking server status
return new Promise((resolve) => {
setTimeout(() => {
const fetchServerStatus = async (signal?: AbortSignal): Promise<PlexServerConnection> => {
return new Promise((resolve, reject) => {
const timer = setTimeout(() => {
// 90% chance of success for demo
const isSuccess = Math.random() > 0.1;
if (isSuccess) {
@@ -51,12 +51,32 @@ const fetchServerStatus = async (): Promise<PlexServerConnection> => {
});
}
}, SIMULATE_DELAY_MS);
if (signal) {
signal.addEventListener('abort', () => {
clearTimeout(timer);
reject(new DOMException('Aborted', 'AbortError'));
});
}
});
};
const authenticatePlex = async (settings: PlexConnectionSettings): Promise<{ token: string, serverInfo: PlexServerConnection }> => {
const authenticatePlex = async (settings: PlexConnectionSettings, signal?: AbortSignal): Promise<{ token: string, serverInfo: PlexServerConnection }> => {
return new Promise((resolve, reject) => {
setTimeout(() => {
// Determine effective timeout
const timeoutSeconds = settings.timeout || 9;
const timeoutMs = timeoutSeconds * 1000;
// Simulate latency (random between 1s and 2s, or longer to test timeout)
const latency = 1500;
const timer = setTimeout(() => {
// Check if we timed out (simulated)
if (latency > timeoutMs) {
reject(new Error(`Connection timed out after ${settings.timeout}s`));
return;
}
// Simulate validation
if (!settings.address) {
reject(new Error("Server address is required"));
@@ -84,26 +104,49 @@ const authenticatePlex = async (settings: PlexConnectionSettings): Promise<{ tok
libraries: MOCK_LIBRARIES
}
});
}, 1500);
}, latency);
// Handle User Cancellation
if (signal) {
signal.addEventListener('abort', () => {
clearTimeout(timer);
reject(new DOMException('Aborted', 'AbortError'));
});
}
// Handle Actual Timeout Logic (if latency was indeterminate in real world)
// In this mock, the latency is fixed at 1500, but logic above simulates the check.
// However, if the user set timeout < 1.5s, we should reject sooner.
if (timeoutMs < latency) {
setTimeout(() => {
clearTimeout(timer);
reject(new Error(`Connection timed out after ${settings.timeout}s`));
}, timeoutMs);
}
});
}
export const apiService = {
getPlaylists: async (serverType: ServerType): Promise<ApiResponse<Playlist[]>> => {
getPlaylists: async (serverType: ServerType, signal?: AbortSignal): Promise<ApiResponse<Playlist[]>> => {
try {
const data = await fetchPlaylists(serverType);
const data = await fetchPlaylists(serverType, signal);
return { data, status: 'success' };
} catch (error) {
} catch (error: any) {
if (error.name === 'AbortError') {
// Return a specific status or handle gracefully
return { data: [], status: 'error', message: 'Request cancelled' };
}
console.error(`Error fetching ${serverType} playlists:`, error);
return { data: [], status: 'error', message: 'Failed to fetch playlists' };
}
},
getServerStatus: async (): Promise<ApiResponse<PlexServerConnection>> => {
getServerStatus: async (signal?: AbortSignal): Promise<ApiResponse<PlexServerConnection>> => {
try {
const data = await fetchServerStatus();
const data = await fetchServerStatus(signal);
return { data, status: 'success' };
} catch (error) {
} catch (error: any) {
if (error.name === 'AbortError') return { data: { isConnected: false }, status: 'error', message: 'Cancelled' };
return {
data: { isConnected: false },
status: 'error',
@@ -112,11 +155,18 @@ export const apiService = {
}
},
connectToPlex: async (settings: PlexConnectionSettings): Promise<ApiResponse<{ token: string, serverInfo: PlexServerConnection }>> => {
connectToPlex: async (settings: PlexConnectionSettings, signal?: AbortSignal): Promise<ApiResponse<{ token: string, serverInfo: PlexServerConnection }>> => {
try {
const data = await authenticatePlex(settings);
const data = await authenticatePlex(settings, signal);
return { data, status: 'success', message: 'Connected successfully' };
} catch (error: any) {
if (error.name === 'AbortError') {
return {
data: { token: '', serverInfo: { isConnected: false } },
status: 'error',
message: 'Connection cancelled'
};
}
return {
data: { token: '', serverInfo: { isConnected: false } },
status: 'error',
sample-front-end/types.ts
+1
View File
@@ -55,6 +55,7 @@ export interface PlexConnectionSettings {
token: string;
username?: string;
password?: string;
timeout?: number; // in seconds
}
export interface ApiResponse<T> {