Koha9
2fc8a32b5f
feat: Implement internationalization and rename project Merge commit 'a745adc1ab02adbd17ed19574f47070f87eba50b'
840 lines
32 KiB
TypeScript
840 lines
32 KiB
TypeScript
|
|
import React, { useEffect, useState, useCallback, useRef } from 'react';
|
|
import { Playlist, ServerType, SyncStrategy, PlexServerConnection, PathMappingConfig, PathMappingMode, SyncState, ScheduleSettings, ScheduleMode, BackupSettings } from './types';
|
|
import { apiService } from './services/api';
|
|
import {
|
|
STRIPE_BASE_SPEED,
|
|
STRIPE_DECEL_DURATION_MS,
|
|
STRIPE_TILE_SIZE,
|
|
STRIPE_BACKGROUND_SIZE,
|
|
SYNC_SUCCESS_TOTAL_MS,
|
|
SYNC_ERROR_RESET_MS,
|
|
TOAST_AUTO_DISMISS_MS,
|
|
TOAST_EXIT_DURATION_MS
|
|
} from './Config';
|
|
import { SYNC_BANNER_PADDING_X, SYNC_BANNER_PADDING_Y, SYNC_BANNER_MIN_WIDTH } from './Config';
|
|
import ServerPanel from './components/ServerPanel';
|
|
import StrategySelector from './components/StrategySelector';
|
|
import ConnectionModal from './components/ConnectionModal';
|
|
import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff, Clock, Eye, EyeOff, Type, Code2, Archive, Languages } from 'lucide-react';
|
|
import { useLanguage } from './LanguageContext';
|
|
|
|
interface Toast {
|
|
id: number;
|
|
message: string;
|
|
exiting: boolean;
|
|
entering: boolean;
|
|
}
|
|
|
|
// Custom hook to handle the stripe animation logic
|
|
const useStripeAnimation = (syncState: SyncState) => {
|
|
const leftYellowRef = useRef<HTMLDivElement>(null);
|
|
const leftGreenRef = useRef<HTMLDivElement>(null);
|
|
const rightYellowRef = useRef<HTMLDivElement>(null);
|
|
const rightGreenRef = useRef<HTMLDivElement>(null);
|
|
|
|
const requestRef = useRef<number | undefined>(undefined);
|
|
const lastTimeRef = useRef<number>(0);
|
|
const offsetRef = useRef<number>(0);
|
|
|
|
// State tracking for deceleration
|
|
const isDeceleratingRef = useRef(false);
|
|
const decelStartTimeRef = useRef(0);
|
|
|
|
const animate = (time: number) => {
|
|
if (lastTimeRef.current === 0) lastTimeRef.current = time;
|
|
const dt = (time - lastTimeRef.current) / 1000;
|
|
lastTimeRef.current = time;
|
|
|
|
let speed = STRIPE_BASE_SPEED; // pixels per second
|
|
|
|
if (isDeceleratingRef.current) {
|
|
const t = time - decelStartTimeRef.current;
|
|
const duration = STRIPE_DECEL_DURATION_MS; // deceleration duration
|
|
if (t >= duration) {
|
|
speed = 0;
|
|
} else {
|
|
// Linear slow down
|
|
speed = speed * (1 - (t / duration));
|
|
}
|
|
}
|
|
|
|
// Update offset
|
|
offsetRef.current += speed * dt;
|
|
const modOffset = offsetRef.current % STRIPE_TILE_SIZE;
|
|
|
|
// Apply to DOM elements directly for performance
|
|
const leftPos = `right ${modOffset}px top 0`;
|
|
const rightPos = `left ${modOffset}px top 0`;
|
|
|
|
if (leftYellowRef.current) leftYellowRef.current.style.backgroundPosition = leftPos;
|
|
if (leftGreenRef.current) leftGreenRef.current.style.backgroundPosition = leftPos;
|
|
if (rightYellowRef.current) rightYellowRef.current.style.backgroundPosition = rightPos;
|
|
if (rightGreenRef.current) rightGreenRef.current.style.backgroundPosition = rightPos;
|
|
|
|
// Continue loop if moving or if we are in the middle of decelerating
|
|
if (speed > 0 || (isDeceleratingRef.current && (time - decelStartTimeRef.current) < STRIPE_DECEL_DURATION_MS)) {
|
|
requestRef.current = requestAnimationFrame(animate);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (syncState === SyncState.SYNCING) {
|
|
isDeceleratingRef.current = false;
|
|
lastTimeRef.current = 0;
|
|
// Start animation loop
|
|
if (!requestRef.current) {
|
|
requestRef.current = requestAnimationFrame(animate);
|
|
}
|
|
} else if (syncState === SyncState.SUCCESS) {
|
|
isDeceleratingRef.current = true;
|
|
decelStartTimeRef.current = performance.now();
|
|
// Ensure loop is running to handle deceleration phase
|
|
if (!requestRef.current) {
|
|
requestRef.current = requestAnimationFrame(animate);
|
|
}
|
|
} else {
|
|
// IDLE or ERROR: Stop animation
|
|
if (requestRef.current) {
|
|
cancelAnimationFrame(requestRef.current);
|
|
requestRef.current = undefined;
|
|
}
|
|
offsetRef.current = 0;
|
|
}
|
|
|
|
return () => {
|
|
if (requestRef.current) {
|
|
cancelAnimationFrame(requestRef.current);
|
|
requestRef.current = undefined;
|
|
}
|
|
};
|
|
}, [syncState]);
|
|
|
|
return { leftYellowRef, leftGreenRef, rightYellowRef, rightGreenRef };
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const { t, language, setLanguage } = useLanguage();
|
|
const [localPlaylists, setLocalPlaylists] = useState<Playlist[]>([]);
|
|
const [cloudPlaylists, setCloudPlaylists] = useState<Playlist[]>([]);
|
|
const [cloudServerInfo, setCloudServerInfo] = useState<PlexServerConnection | undefined>(undefined);
|
|
|
|
const [loadingLocal, setLoadingLocal] = useState(false);
|
|
const [loadingCloud, setLoadingCloud] = useState(false);
|
|
|
|
// Sync State
|
|
const [syncState, setSyncState] = useState<SyncState>(SyncState.IDLE);
|
|
|
|
// Animation Refs
|
|
const { leftYellowRef, leftGreenRef, rightYellowRef, rightGreenRef } = useStripeAnimation(syncState);
|
|
|
|
// 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);
|
|
const [isLangMenuOpen, setIsLangMenuOpen] = useState(false);
|
|
|
|
// Strategy State
|
|
const [currentStrategy, setCurrentStrategy] = useState<SyncStrategy>(SyncStrategy.LOCAL_OVERWRITE);
|
|
|
|
// Path Mapping State (Includes Simple and Regex Rules)
|
|
const [pathMappingConfig, setPathMappingConfig] = useState<PathMappingConfig>({
|
|
mode: PathMappingMode.SIMPLE,
|
|
simple: [],
|
|
regex: {
|
|
localPre: [],
|
|
localPost: [],
|
|
remotePre: [],
|
|
remotePost: []
|
|
}
|
|
});
|
|
|
|
// Schedule State
|
|
const [scheduleSettings, setScheduleSettings] = useState<ScheduleSettings>({
|
|
mode: ScheduleMode.DISABLED,
|
|
cronExpression: '',
|
|
dailyTime: '02:00',
|
|
weeklyDays: [0], // Sunday
|
|
weeklyTime: '03:00',
|
|
autoWatch: false
|
|
});
|
|
|
|
// Backup State
|
|
const [backupSettings, setBackupSettings] = useState<BackupSettings>({
|
|
enabled: false,
|
|
retentionCount: 5
|
|
});
|
|
|
|
// Toast Notification System
|
|
const [toasts, setToasts] = useState<Toast[]>([]);
|
|
const timeoutsRef = useRef<{[key: number]: ReturnType<typeof setTimeout>}>({});
|
|
|
|
const removeToast = (id: number) => {
|
|
setToasts(prev => prev.filter(t => t.id !== id));
|
|
if (timeoutsRef.current[id]) {
|
|
clearTimeout(timeoutsRef.current[id]);
|
|
delete timeoutsRef.current[id];
|
|
}
|
|
};
|
|
|
|
const addToast = (message: string) => {
|
|
const id = Date.now();
|
|
// Start with entering: true to position it above
|
|
const newToast: Toast = { id, message, exiting: false, entering: true };
|
|
|
|
setToasts(prev => {
|
|
// Mark all existing toasts as exiting immediately so they slide up
|
|
const exitingToasts = prev.map(t => ({ ...t, exiting: true, entering: false }));
|
|
return [...exitingToasts, newToast];
|
|
});
|
|
|
|
// Auto dismiss the new toast after 3 seconds
|
|
const dismissTimer = setTimeout(() => {
|
|
setToasts(prev => prev.map(t => t.id === id ? { ...t, exiting: true } : t));
|
|
}, TOAST_AUTO_DISMISS_MS);
|
|
|
|
timeoutsRef.current[id] = dismissTimer;
|
|
};
|
|
|
|
// Effect to trigger the "slide down" animation
|
|
useEffect(() => {
|
|
const enteringIds = toasts.filter(t => t.entering).map(t => t.id);
|
|
|
|
if (enteringIds.length > 0) {
|
|
let raf1: number;
|
|
let raf2: number;
|
|
|
|
raf1 = requestAnimationFrame(() => {
|
|
raf2 = requestAnimationFrame(() => {
|
|
setToasts(prev => prev.map(t =>
|
|
enteringIds.includes(t.id) ? { ...t, entering: false } : t
|
|
));
|
|
});
|
|
});
|
|
|
|
return () => {
|
|
cancelAnimationFrame(raf1);
|
|
cancelAnimationFrame(raf2);
|
|
};
|
|
}
|
|
}, [toasts]);
|
|
|
|
// Cleanup effect for exiting toasts
|
|
useEffect(() => {
|
|
const exitingToasts = toasts.filter(t => t.exiting);
|
|
exitingToasts.forEach(t => {
|
|
if (!timeoutsRef.current[`remove-${t.id}`]) {
|
|
timeoutsRef.current[`remove-${t.id}`] = setTimeout(() => {
|
|
removeToast(t.id);
|
|
delete timeoutsRef.current[`remove-${t.id}`];
|
|
}, TOAST_EXIT_DURATION_MS);
|
|
}
|
|
});
|
|
}, [toasts]);
|
|
|
|
// 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, 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(t('toasts.localRefreshCancelled'));
|
|
}
|
|
};
|
|
|
|
// 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, abortController.signal);
|
|
if (!abortController.signal.aborted) {
|
|
if (playlistResult.status === 'success') {
|
|
setCloudPlaylists(playlistResult.data);
|
|
}
|
|
|
|
// Fetch server info
|
|
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(t('toasts.cloudRefreshCancelled'));
|
|
}
|
|
};
|
|
|
|
// 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
|
|
const handleStrategyChange = (strategy: SyncStrategy, label: string) => {
|
|
setCurrentStrategy(strategy);
|
|
addToast(t('toasts.strategySaved', { strategy: label }));
|
|
};
|
|
|
|
// Handle Path Mapping Save
|
|
const handleSavePathMapping = (config: PathMappingConfig) => {
|
|
setPathMappingConfig(config);
|
|
addToast(t('toasts.mappingSaved'));
|
|
};
|
|
|
|
// Handle Backup Settings Save
|
|
const handleSaveBackupSettings = async (settings: BackupSettings) => {
|
|
const result = await apiService.saveBackupSettings(settings);
|
|
if (result.status === 'success') {
|
|
setBackupSettings(settings);
|
|
addToast(t('toasts.backupSaved'));
|
|
} else {
|
|
addToast(t('toasts.backupFailed'));
|
|
}
|
|
};
|
|
|
|
// Handle Schedule Save
|
|
const handleSaveSchedule = async (settings: ScheduleSettings): Promise<boolean> => {
|
|
// Call API (validation happens in Mock)
|
|
const result = await apiService.saveScheduleSettings(settings);
|
|
|
|
if (result.status === 'success') {
|
|
// Only update local state if successful
|
|
setScheduleSettings(settings);
|
|
|
|
if (settings.mode === ScheduleMode.DISABLED) {
|
|
addToast(t('toasts.scheduleDisabled'));
|
|
} else if (settings.mode === ScheduleMode.CRON && settings.cronExpression.trim() === '') {
|
|
addToast(t('toasts.scheduleEmpty'));
|
|
} else {
|
|
addToast(t('toasts.scheduleStarted'));
|
|
}
|
|
return true;
|
|
} else {
|
|
addToast(result.message || t('toasts.scheduleFailed'));
|
|
return false;
|
|
}
|
|
};
|
|
|
|
// Handle Sync Trigger
|
|
const handleSyncTrigger = async () => {
|
|
if (syncState !== SyncState.IDLE) return;
|
|
|
|
setSyncState(SyncState.SYNCING);
|
|
|
|
// Note: We deliberately do not clear playlists here to keep UI populated during sync
|
|
const result = await apiService.syncPlaylists(currentStrategy, pathMappingConfig);
|
|
|
|
if (result.status === 'success') {
|
|
// Transition to Success state
|
|
setSyncState(SyncState.SUCCESS);
|
|
|
|
// Timing Breakdown:
|
|
// T+0.0s: State is SUCCESS.
|
|
// - JS Animation loop detects change and begins decelerating speed from 56 -> 0 over 0.5s.
|
|
// - CSS opacity transitions Yellow -> Green over 0.3s.
|
|
|
|
// T+0.5s: Deceleration complete. Speed is 0. Background is static.
|
|
// We hold this static state for another 0.5s.
|
|
|
|
// T+1.0s: Total success duration complete. Disappear.
|
|
setTimeout(() => {
|
|
setSyncState(SyncState.IDLE);
|
|
refreshLocal();
|
|
refreshCloud();
|
|
}, SYNC_SUCCESS_TOTAL_MS);
|
|
|
|
} else {
|
|
setSyncState(SyncState.ERROR);
|
|
addToast(t('toasts.syncFailed'));
|
|
setTimeout(() => setSyncState(SyncState.IDLE), SYNC_ERROR_RESET_MS);
|
|
}
|
|
};
|
|
|
|
const handleConnectSuccess = (serverInfo: PlexServerConnection) => {
|
|
setCloudServerInfo(serverInfo);
|
|
// Refresh playlists after new connection
|
|
refreshCloud();
|
|
};
|
|
|
|
const getToastStyles = (toast: Toast): React.CSSProperties => {
|
|
if (toast.exiting || toast.entering) {
|
|
return {
|
|
opacity: 0,
|
|
transform: 'translateY(-40px) scale(0.95)',
|
|
};
|
|
}
|
|
return {
|
|
opacity: 1,
|
|
transform: 'translateY(0) scale(1)',
|
|
};
|
|
};
|
|
|
|
const getToastClasses = () => {
|
|
return "absolute top-2 flex items-center space-x-2 px-4 py-2 rounded-full shadow-lg border text-sm font-medium pointer-events-auto bg-gray-800 text-plex-orange border-plex-orange/30 transition-all duration-300 ease-out origin-top z-50 backdrop-blur-md";
|
|
};
|
|
|
|
const isConnected = cloudServerInfo?.isConnected;
|
|
|
|
// Helper: Calculate Next Run Info
|
|
const getScheduleDisplayInfo = (settings: ScheduleSettings) => {
|
|
const result = {
|
|
label: t('schedule.schedule'),
|
|
value: t('schedule.notConfigured'),
|
|
active: false,
|
|
autoWatch: settings.autoWatch
|
|
};
|
|
|
|
if (settings.mode === ScheduleMode.DISABLED) {
|
|
result.label = t('dashboard.autoSync');
|
|
result.value = t('common.disabled');
|
|
return result;
|
|
}
|
|
|
|
if (settings.mode === ScheduleMode.CRON) {
|
|
result.label = t('schedule.cron');
|
|
result.value = settings.cronExpression || t('server.waiting');
|
|
result.active = true;
|
|
return result;
|
|
}
|
|
|
|
const now = new Date();
|
|
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
let nextRun: Date | null = null;
|
|
let timeStr = '';
|
|
|
|
if (settings.mode === ScheduleMode.DAILY) {
|
|
const [h, m] = settings.dailyTime.split(':').map(Number);
|
|
const target = new Date();
|
|
target.setHours(h, m, 0, 0);
|
|
timeStr = settings.dailyTime;
|
|
|
|
if (now < target) {
|
|
nextRun = target;
|
|
} else {
|
|
const tomorrow = new Date();
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
tomorrow.setHours(h, m, 0, 0);
|
|
nextRun = tomorrow;
|
|
}
|
|
} else if (settings.mode === ScheduleMode.WEEKLY) {
|
|
timeStr = settings.weeklyTime;
|
|
const [h, m] = settings.weeklyTime.split(':').map(Number);
|
|
const activeDays = [...settings.weeklyDays].sort();
|
|
|
|
if (activeDays.length === 0) {
|
|
result.label = t('schedule.weekly');
|
|
result.value = t('common.none');
|
|
return result;
|
|
}
|
|
|
|
// Check rest of today
|
|
if (activeDays.includes(now.getDay())) {
|
|
const todayTarget = new Date();
|
|
todayTarget.setHours(h, m, 0, 0);
|
|
if (todayTarget > now) {
|
|
nextRun = todayTarget;
|
|
}
|
|
}
|
|
|
|
// Check future days
|
|
if (!nextRun) {
|
|
for (let i = 1; i <= 7; i++) {
|
|
const nextDayIndex = (now.getDay() + i) % 7;
|
|
if (activeDays.includes(nextDayIndex)) {
|
|
const d = new Date();
|
|
d.setDate(now.getDate() + i);
|
|
d.setHours(h, m, 0, 0);
|
|
nextRun = d;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (nextRun) {
|
|
// Format logic
|
|
const isToday = nextRun.getDate() === now.getDate() && nextRun.getMonth() === now.getMonth();
|
|
const isTomorrow = new Date(now.getTime() + 86400000).getDate() === nextRun.getDate();
|
|
|
|
let dateStr = '';
|
|
if (isToday) dateStr = t('schedule.today');
|
|
else if (isTomorrow) dateStr = t('schedule.tomorrow');
|
|
else dateStr = days[nextRun.getDay()];
|
|
|
|
result.label = settings.mode === ScheduleMode.DAILY ? t('schedule.daily') : t('schedule.weekly');
|
|
result.value = `${dateStr} @ ${timeStr}`;
|
|
result.active = true;
|
|
return result;
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
const scheduleInfo = getScheduleDisplayInfo(scheduleSettings);
|
|
|
|
// Helper: Calculate Path Mapping Info
|
|
const getPathMappingDisplayInfo = (config: PathMappingConfig) => {
|
|
let count = 0;
|
|
let modeLabel = '';
|
|
let Icon = Type;
|
|
|
|
if (config.mode === PathMappingMode.SIMPLE) {
|
|
modeLabel = t('common.none').replace('None', 'Simple'); // Fallback hack if simple not in dict, but it is in mapping
|
|
modeLabel = 'Simple';
|
|
count = config.simple.length;
|
|
Icon = Type;
|
|
} else {
|
|
modeLabel = 'Regex';
|
|
count = config.regex.localPre.length +
|
|
config.regex.localPost.length +
|
|
config.regex.remotePre.length +
|
|
config.regex.remotePost.length;
|
|
Icon = Code2;
|
|
}
|
|
|
|
if (count === 0) {
|
|
return {
|
|
label: t('dashboard.mapping'),
|
|
value: t('dashboard.notSet'),
|
|
active: false,
|
|
Icon: Icon
|
|
};
|
|
}
|
|
|
|
return {
|
|
label: t('dashboard.mapping'),
|
|
value: `${modeLabel} (${count})`,
|
|
active: true,
|
|
Icon: Icon
|
|
};
|
|
};
|
|
|
|
const pathMappingInfo = getPathMappingDisplayInfo(pathMappingConfig);
|
|
|
|
// Helper: Calculate Backup Info
|
|
const getBackupDisplayInfo = (settings: BackupSettings) => {
|
|
if (!settings.enabled) {
|
|
return {
|
|
label: t('dashboard.backup'),
|
|
value: t('common.disabled'),
|
|
active: false
|
|
};
|
|
}
|
|
return {
|
|
label: t('dashboard.backup'),
|
|
value: t('dashboard.keep', { count: settings.retentionCount }),
|
|
active: true
|
|
};
|
|
};
|
|
|
|
const backupInfo = getBackupDisplayInfo(backupSettings);
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-gray-900 text-gray-100 font-sans overflow-hidden bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-gray-800 via-gray-900 to-black">
|
|
|
|
{/* App Header */}
|
|
<header className={`flex-none shadow-md z-20 relative backdrop-blur-md transition-all duration-500 ease-in-out h-16 ${syncState === SyncState.IDLE ? 'bg-gray-800/80 border-b border-white/5' : 'bg-black border-none'}`}>
|
|
|
|
{/* Syncing/Success Animated Background Layer */}
|
|
{syncState !== SyncState.IDLE && (
|
|
<div className="absolute inset-0 w-full h-full overflow-hidden bg-black">
|
|
|
|
{/* Left Side: Gradient 135deg (TR -> BL /), Anchored RIGHT (Center). Moves LEFT (Right offset increases). */}
|
|
<div className="absolute left-0 top-0 bottom-0 w-1/2 overflow-hidden z-0">
|
|
{/* Layer 1: Yellow (Syncing) */}
|
|
<div
|
|
ref={leftYellowRef}
|
|
className={`absolute inset-0 transition-opacity duration-300 ease-out ${syncState === SyncState.SUCCESS ? 'opacity-0' : 'opacity-100'}`}
|
|
style={{
|
|
backgroundPosition: 'right 0 top 0',
|
|
backgroundImage: `repeating-linear-gradient(135deg, transparent, transparent 20px, #e5a00d 20px, #e5a00d 40px)`,
|
|
backgroundSize: STRIPE_BACKGROUND_SIZE,
|
|
}}
|
|
/>
|
|
{/* Layer 2: Green (Success) - Fade In */}
|
|
<div
|
|
ref={leftGreenRef}
|
|
className={`absolute inset-0 transition-opacity duration-300 ease-out ${syncState === SyncState.SUCCESS ? 'opacity-100' : 'opacity-0'}`}
|
|
style={{
|
|
backgroundPosition: 'right 0 top 0',
|
|
backgroundImage: `repeating-linear-gradient(135deg, transparent, transparent 20px, #22c55e 20px, #22c55e 40px)`,
|
|
backgroundSize: STRIPE_BACKGROUND_SIZE,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Side: Gradient 225deg (TL -> BR \), Anchored LEFT (Center). Moves RIGHT (Left offset increases). */}
|
|
<div className="absolute right-0 top-0 bottom-0 w-1/2 overflow-hidden z-0">
|
|
{/* Layer 1: Yellow (Syncing) */}
|
|
<div
|
|
ref={rightYellowRef}
|
|
className={`absolute inset-0 transition-opacity duration-300 ease-out ${syncState === SyncState.SUCCESS ? 'opacity-0' : 'opacity-100'}`}
|
|
style={{
|
|
backgroundPosition: 'left 0 top 0',
|
|
backgroundImage: `repeating-linear-gradient(225deg, transparent, transparent 20px, #e5a00d 20px, #e5a00d 40px)`,
|
|
backgroundSize: STRIPE_BACKGROUND_SIZE,
|
|
}}
|
|
/>
|
|
{/* Layer 2: Green (Success) - Fade In */}
|
|
<div
|
|
ref={rightGreenRef}
|
|
className={`absolute inset-0 transition-opacity duration-300 ease-out ${syncState === SyncState.SUCCESS ? 'opacity-100' : 'opacity-0'}`}
|
|
style={{
|
|
backgroundPosition: 'left 0 top 0',
|
|
backgroundImage: `repeating-linear-gradient(225deg, transparent, transparent 20px, #22c55e 20px, #22c55e 40px)`,
|
|
backgroundSize: STRIPE_BACKGROUND_SIZE,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Content Container */}
|
|
<div className="relative max-w-7xl mx-auto px-4 md:px-6 h-full flex items-center justify-between">
|
|
|
|
{syncState === SyncState.IDLE ? (
|
|
<>
|
|
{/* Normal Toolbar Left */}
|
|
<div className="flex items-center space-x-3">
|
|
<div className="p-1.5 rounded-lg shadow-lg bg-gradient-to-br from-plex-orange to-yellow-600 text-gray-900 shadow-plex-orange/20">
|
|
<ArrowLeftRight size={24} strokeWidth={2.5} />
|
|
</div>
|
|
<h1 className="text-xl font-bold tracking-tight text-white">
|
|
<span className="text-plex-orange">PMS</span> Playlist Sync
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Normal Toolbar Right */}
|
|
<div className="flex items-center gap-4">
|
|
|
|
{/* Unified Status Dock */}
|
|
<div className="hidden md:flex items-center bg-gray-900/40 border border-gray-700/50 rounded-lg p-1 mr-2 backdrop-blur-sm shadow-sm transition-all hover:bg-gray-900/60 hover:border-gray-600/50">
|
|
|
|
{/* Path Mapping Section */}
|
|
<div className="flex flex-col px-3 py-0.5 border-r border-gray-700/30 min-w-[90px] group/item">
|
|
<span className="text-[9px] font-bold text-gray-500 uppercase tracking-widest group-hover/item:text-gray-400 transition-colors">{pathMappingInfo.label}</span>
|
|
<div className={`flex items-center gap-1.5 text-xs font-medium ${pathMappingInfo.active ? 'text-blue-400' : 'text-gray-600'}`}>
|
|
<pathMappingInfo.Icon size={12} strokeWidth={2.5} />
|
|
<span className="truncate">{pathMappingInfo.value}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Backup Section */}
|
|
<div className="flex flex-col px-3 py-0.5 border-r border-gray-700/30 min-w-[90px] group/item">
|
|
<span className="text-[9px] font-bold text-gray-500 uppercase tracking-widest group-hover/item:text-gray-400 transition-colors">{backupInfo.label}</span>
|
|
<div className={`flex items-center gap-1.5 text-xs font-medium ${backupInfo.active ? 'text-indigo-400' : 'text-gray-600'}`}>
|
|
<Archive size={12} strokeWidth={2.5} />
|
|
<span>{backupInfo.active ? t('dashboard.retain', { count: backupSettings.retentionCount }) : backupInfo.value}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Schedule Section */}
|
|
<div className="flex flex-col px-3 py-0.5 min-w-[140px] group/item">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[9px] font-bold text-gray-500 uppercase tracking-widest group-hover/item:text-gray-400 transition-colors">{t('dashboard.autoSync')}</span>
|
|
{/* Watch Indicator Badge */}
|
|
<div
|
|
className={`flex items-center gap-1 px-1 rounded-[2px] transition-colors ${scheduleInfo.autoWatch ? 'text-plex-orange bg-plex-orange/10' : 'text-gray-700 bg-gray-800'}`}
|
|
title={scheduleInfo.autoWatch ? t('dashboard.watchModeActive') : t('dashboard.watchModeDisabled')}
|
|
>
|
|
{scheduleInfo.autoWatch ? <Eye size={9} /> : <EyeOff size={9} />}
|
|
<span className="text-[8px] font-bold uppercase">{t('dashboard.watch')}</span>
|
|
</div>
|
|
</div>
|
|
<div className={`flex items-center gap-1.5 text-xs font-medium mt-0.5 ${scheduleInfo.active ? 'text-green-400' : 'text-gray-600'}`}>
|
|
<Clock size={12} strokeWidth={2.5} />
|
|
<span className="truncate max-w-[120px]">{scheduleInfo.active ? scheduleInfo.value : t('common.disabled')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Language Switcher */}
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsLangMenuOpen(!isLangMenuOpen)}
|
|
className="flex items-center justify-center w-9 h-9 rounded-full border border-gray-700 bg-gray-800/50 text-gray-400 hover:text-white hover:bg-gray-700 transition-all"
|
|
title="Switch Language"
|
|
>
|
|
<Languages size={18} />
|
|
</button>
|
|
{isLangMenuOpen && (
|
|
<>
|
|
<div className="fixed inset-0 z-40" onClick={() => setIsLangMenuOpen(false)}></div>
|
|
<div className="absolute right-0 top-full mt-2 w-32 bg-gray-800 border border-gray-700 rounded-lg shadow-xl z-50 overflow-hidden">
|
|
<button
|
|
onClick={() => { setLanguage('en'); setIsLangMenuOpen(false); }}
|
|
className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'en' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
|
|
>
|
|
English
|
|
</button>
|
|
<button
|
|
onClick={() => { setLanguage('es'); setIsLangMenuOpen(false); }}
|
|
className={`w-full px-4 py-2 text-sm text-left hover:bg-gray-700 transition-colors ${language === 'es' ? 'text-plex-orange font-bold' : 'text-gray-300'}`}
|
|
>
|
|
Español
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Connection Status Button */}
|
|
<button
|
|
onClick={() => setIsConnectionModalOpen(true)}
|
|
className={`flex items-center justify-center w-9 h-9 rounded-full border transition-all duration-300 hover:scale-105 active:scale-95 shadow-md
|
|
${isConnected
|
|
? "bg-green-500/10 border-green-500/50 text-green-400 hover:bg-green-500/20 hover:shadow-green-500/20"
|
|
: "bg-red-500/10 border-red-500/50 text-red-400 hover:bg-red-500/20 hover:shadow-red-500/20"
|
|
}`}
|
|
title={isConnected ? t('dashboard.connected') : t('dashboard.disconnected')}
|
|
>
|
|
{isConnected ? <Server size={18} /> : <ServerOff size={18} />}
|
|
</button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
/* Syncing / Success Text Banner */
|
|
<div className="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
|
|
<div
|
|
className="bg-black shadow-none rounded-none border-none"
|
|
style={{
|
|
padding: `${SYNC_BANNER_PADDING_Y}px ${SYNC_BANNER_PADDING_X}px`,
|
|
minWidth: `${SYNC_BANNER_MIN_WIDTH}px`,
|
|
}}
|
|
>
|
|
<h1 className={`text-xl md:text-2xl font-black tracking-[0.2em] uppercase whitespace-nowrap transition-colors duration-300 ${syncState === SyncState.SUCCESS ? 'text-[#22c55e]' : 'text-[#F59E0B]'}`}>
|
|
{syncState === SyncState.SYNCING ? t('dashboard.synchronizing') : t('dashboard.syncComplete')}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</header>
|
|
|
|
{/* Notification Toasts Container */}
|
|
<div className="fixed top-20 left-0 right-0 flex justify-center h-0 overflow-visible z-[100] pointer-events-none">
|
|
{toasts.map((toast) => (
|
|
<div
|
|
key={toast.id}
|
|
className={getToastClasses()}
|
|
style={getToastStyles(toast)}
|
|
>
|
|
<ShieldCheck size={16} />
|
|
<span>{toast.message}</span>
|
|
<button
|
|
onClick={() => setToasts(prev => prev.map(t => t.id === toast.id ? { ...t, exiting: true } : t))}
|
|
className="ml-2 hover:text-white transition-colors"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Main Content Area */}
|
|
<main className="flex-1 overflow-hidden relative z-10">
|
|
{/* 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">
|
|
<ServerPanel
|
|
type={ServerType.LOCAL}
|
|
playlists={localPlaylists}
|
|
isLoading={loadingLocal}
|
|
onRefresh={refreshLocal}
|
|
onCancel={cancelLocalRefresh}
|
|
/>
|
|
</div>
|
|
|
|
{/* Strategy Selector - Positioned specifically between headers */}
|
|
<div className="absolute
|
|
z-30
|
|
/* Mobile Positioning: Center Vertically, Anchored Right */
|
|
top-1/2 right-[52px] transform translate-x-1/2 -translate-y-1/2
|
|
|
|
/* Desktop Positioning: Center Horizontally, Anchored Top */
|
|
md:top-[64px] md:right-auto md:left-1/2 md:transform md:-translate-x-1/2 md:-translate-y-1/2"
|
|
>
|
|
<StrategySelector
|
|
currentStrategy={currentStrategy}
|
|
onSelect={handleStrategyChange}
|
|
savedPathMapping={pathMappingConfig}
|
|
onSavePathMapping={handleSavePathMapping}
|
|
savedBackup={backupSettings}
|
|
onSaveBackup={handleSaveBackupSettings}
|
|
savedSchedule={scheduleSettings}
|
|
onSaveSchedule={handleSaveSchedule}
|
|
syncState={syncState}
|
|
onSync={handleSyncTrigger}
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Column - Cloud */}
|
|
<div className="flex-1 min-h-0 h-full w-full">
|
|
<ServerPanel
|
|
type={ServerType.CLOUD}
|
|
playlists={cloudPlaylists}
|
|
isLoading={loadingCloud}
|
|
onRefresh={refreshCloud}
|
|
onCancel={cancelCloudRefresh}
|
|
serverInfo={cloudServerInfo}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="flex-none py-4 text-center text-xs text-gray-600 border-t border-white/5 bg-gray-900/50 backdrop-blur">
|
|
<p>{t('app.footer', { year: new Date().getFullYear() })}</p>
|
|
</footer>
|
|
|
|
{/* Modals */}
|
|
<ConnectionModal
|
|
isOpen={isConnectionModalOpen}
|
|
onClose={() => setIsConnectionModalOpen(false)}
|
|
onConnectSuccess={handleConnectSuccess}
|
|
onShowMessage={addToast}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|