Squashed 'sample-front-end/' changes from 601ffe4..552f9c4
552f9c4 feat: Centralize animation and timing constants cc962c2 feat: Adjust sync animation gradient e623426 feat: Add playlist sync functionality and animations git-subtree-dir: sample-front-end git-subtree-split: 552f9c471324793b85af14534e81d45d319036a2
This commit is contained in:
+190
-133
@@ -1,6 +1,6 @@
|
||||
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { SyncStrategy, RegexReplacement } from '../types';
|
||||
import { SyncStrategy, RegexReplacement, SyncState } from '../types';
|
||||
import {
|
||||
ArrowRightCircle,
|
||||
ArrowLeftCircle,
|
||||
@@ -11,7 +11,9 @@ import {
|
||||
Plus,
|
||||
Trash2,
|
||||
Save,
|
||||
RotateCcw
|
||||
RotateCcw,
|
||||
Zap,
|
||||
Loader2
|
||||
} from 'lucide-react';
|
||||
|
||||
interface StrategyOption {
|
||||
@@ -58,13 +60,17 @@ interface StrategySelectorProps {
|
||||
onSelect: (strategy: SyncStrategy, label: string) => void;
|
||||
savedRegexReplacements: RegexReplacement[];
|
||||
onSaveRegex: (replacements: RegexReplacement[]) => void;
|
||||
syncState: SyncState;
|
||||
onSync: () => void;
|
||||
}
|
||||
|
||||
const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
currentStrategy,
|
||||
onSelect,
|
||||
savedRegexReplacements,
|
||||
onSaveRegex
|
||||
onSaveRegex,
|
||||
syncState,
|
||||
onSync
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
@@ -73,6 +79,9 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
const [localReplacements, setLocalReplacements] = useState<RegexReplacement[]>([]);
|
||||
const [isDirty, setIsDirty] = useState(false);
|
||||
|
||||
const isSyncing = syncState === SyncState.SYNCING;
|
||||
const isLocked = isSyncing || syncState === SyncState.SUCCESS;
|
||||
|
||||
// Initialize local state when prop updates (only if not dirty, or initially)
|
||||
useEffect(() => {
|
||||
setLocalReplacements(JSON.parse(JSON.stringify(savedRegexReplacements)));
|
||||
@@ -98,35 +107,49 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
}, []);
|
||||
|
||||
const handleSelect = (strategy: StrategyOption) => {
|
||||
if (isLocked) return;
|
||||
onSelect(strategy.value, strategy.label);
|
||||
};
|
||||
|
||||
// Regex Handlers
|
||||
const handleAddRegex = () => {
|
||||
if (isLocked) return;
|
||||
const newId = Date.now().toString();
|
||||
setLocalReplacements(prev => [...prev, { id: newId, pattern: '', replacement: '' }]);
|
||||
};
|
||||
|
||||
const handleDeleteRegex = (id: string) => {
|
||||
if (isLocked) return;
|
||||
setLocalReplacements(prev => prev.filter(r => r.id !== id));
|
||||
};
|
||||
|
||||
const handleUpdateRegex = (id: string, field: 'pattern' | 'replacement', value: string) => {
|
||||
if (isLocked) return;
|
||||
setLocalReplacements(prev => prev.map(r =>
|
||||
r.id === id ? { ...r, [field]: value } : r
|
||||
));
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
if (isLocked) return;
|
||||
setLocalReplacements(JSON.parse(JSON.stringify(savedRegexReplacements)));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (isLocked) return;
|
||||
const validReplacements = localReplacements.filter(r => r.pattern.trim() !== '');
|
||||
setLocalReplacements(validReplacements);
|
||||
onSaveRegex(validReplacements);
|
||||
};
|
||||
|
||||
const handleSyncClick = () => {
|
||||
if (isLocked) return;
|
||||
onSync();
|
||||
};
|
||||
|
||||
// If syncing or locked, apply grayscale filter to content sections
|
||||
const contentClass = isLocked ? "opacity-50 pointer-events-none grayscale transition-all" : "transition-all";
|
||||
|
||||
return (
|
||||
<div className="relative group" ref={dropdownRef}>
|
||||
{/* Trigger Button - Added Ring to create visual 'cutout' over panels */}
|
||||
@@ -154,140 +177,174 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
transition-all duration-200 ease-out
|
||||
${isOpen ? 'opacity-100 scale-100 visible translate-y-0' : 'opacity-0 scale-95 invisible pointer-events-none -translate-y-2'}`}
|
||||
>
|
||||
{/* Section 1: Sync Strategy */}
|
||||
<div className="px-4 py-3 bg-black/20 border-b border-white/5">
|
||||
<h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Sync Strategy</h3>
|
||||
<div className="space-y-1">
|
||||
{STRATEGIES.map((strategy) => (
|
||||
<div
|
||||
key={strategy.value}
|
||||
onClick={() => handleSelect(strategy)}
|
||||
className={`group flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all border ${
|
||||
currentStrategy === strategy.value
|
||||
? 'bg-white/10 border-white/10 shadow-sm'
|
||||
: 'hover:bg-white/5 border-transparent'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-3 overflow-hidden">
|
||||
<strategy.icon size={18} className={strategy.color} />
|
||||
<span className={`text-sm font-medium truncate ${currentStrategy === strategy.value ? 'text-white' : 'text-gray-300 group-hover:text-white'}`}>
|
||||
{strategy.label}
|
||||
</span>
|
||||
<div className={contentClass}>
|
||||
{/* Section 1: Sync Strategy */}
|
||||
<div className="px-4 py-3 bg-black/20 border-b border-white/5">
|
||||
<h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Sync Strategy</h3>
|
||||
<div className="space-y-1">
|
||||
{STRATEGIES.map((strategy) => (
|
||||
<div
|
||||
key={strategy.value}
|
||||
onClick={() => handleSelect(strategy)}
|
||||
className={`group flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all border ${
|
||||
currentStrategy === strategy.value
|
||||
? 'bg-white/10 border-white/10 shadow-sm'
|
||||
: 'hover:bg-white/5 border-transparent'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-3 overflow-hidden">
|
||||
<strategy.icon size={18} className={strategy.color} />
|
||||
<span className={`text-sm font-medium truncate ${currentStrategy === strategy.value ? 'text-white' : 'text-gray-300 group-hover:text-white'}`}>
|
||||
{strategy.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="relative group/tooltip">
|
||||
<HelpCircle size={14} className="text-gray-600 hover:text-gray-400 transition-colors" />
|
||||
<div className="absolute right-0 bottom-full mb-2 w-48 p-2.5 bg-gray-900 text-xs text-gray-300 rounded-lg shadow-xl border border-gray-700 pointer-events-none opacity-0 group-hover/tooltip:opacity-100 transition-opacity z-50">
|
||||
{strategy.description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{currentStrategy === strategy.value && (
|
||||
<Check size={14} className="text-plex-orange" strokeWidth={3} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="relative group/tooltip">
|
||||
<HelpCircle size={14} className="text-gray-600 hover:text-gray-400 transition-colors" />
|
||||
<div className="absolute right-0 bottom-full mb-2 w-48 p-2.5 bg-gray-900 text-xs text-gray-300 rounded-lg shadow-xl border border-gray-700 pointer-events-none opacity-0 group-hover/tooltip:opacity-100 transition-opacity z-50">
|
||||
{strategy.description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{currentStrategy === strategy.value && (
|
||||
<Check size={14} className="text-plex-orange" strokeWidth={3} />
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 2: Regex Preprocessing */}
|
||||
<div className="p-4 bg-gray-900/40">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Regex Rules</h3>
|
||||
{localReplacements.length === 0 && (
|
||||
<button
|
||||
onClick={handleAddRegex}
|
||||
className="p-1 rounded bg-gray-700/50 hover:bg-gray-600 text-gray-400 hover:text-white transition-colors"
|
||||
title="Add Rule"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 mb-4 max-h-52 overflow-y-auto pr-1 custom-scrollbar">
|
||||
{localReplacements.length === 0 ? (
|
||||
<div className="text-xs text-gray-600 italic text-center py-4 border border-dashed border-gray-700/50 rounded-lg">
|
||||
No regex replacements configured.
|
||||
</div>
|
||||
) : (
|
||||
localReplacements.map((regex) => (
|
||||
<div key={regex.id} className="flex items-center space-x-2 animate-in slide-in-from-left-2 duration-200">
|
||||
<div className="flex-1 min-w-0">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Regex Pattern"
|
||||
value={regex.pattern}
|
||||
onChange={(e) => handleUpdateRegex(regex.id, 'pattern', e.target.value)}
|
||||
className={`w-full bg-gray-900/80 border rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:ring-1 transition-all placeholder-gray-600
|
||||
${!regex.pattern && isDirty ? 'border-red-500/30 focus:border-red-500' : 'border-gray-700 focus:border-plex-orange'}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-none text-gray-600">
|
||||
<ArrowRightCircle size={12} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Replacement"
|
||||
value={regex.replacement}
|
||||
onChange={(e) => handleUpdateRegex(regex.id, 'replacement', e.target.value)}
|
||||
className="w-full bg-gray-900/80 border border-gray-700 rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-plex-orange focus:ring-1 focus:ring-plex-orange transition-all placeholder-gray-600"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteRegex(regex.id)}
|
||||
className="text-gray-600 hover:text-red-400 p-1.5 hover:bg-red-500/10 rounded transition-colors"
|
||||
title="Delete Rule"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="space-y-3 pt-3 border-t border-white/5">
|
||||
{localReplacements.length > 0 && (
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={handleAddRegex}
|
||||
className="flex items-center space-x-1.5 text-xs text-plex-orange hover:text-yellow-400 transition-colors opacity-80 hover:opacity-100"
|
||||
>
|
||||
<Plus size={12} />
|
||||
<span className="font-medium">Add Rule</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
onClick={handleReset}
|
||||
disabled={!isDirty}
|
||||
className={`flex items-center justify-center space-x-2 py-1.5 rounded-lg text-xs font-medium border transition-all
|
||||
${isDirty
|
||||
? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white'
|
||||
: 'bg-transparent border-gray-800 text-gray-600 cursor-not-allowed'}`}
|
||||
>
|
||||
<RotateCcw size={14} />
|
||||
<span>Revert</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!isDirty}
|
||||
className={`flex items-center justify-center space-x-2 py-1.5 rounded-lg text-xs font-bold border transition-all
|
||||
${isDirty
|
||||
? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10'
|
||||
: 'bg-gray-800/50 border-gray-800 text-gray-600 cursor-not-allowed'}`}
|
||||
>
|
||||
<Save size={14} />
|
||||
<span>Save Changes</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 2: Regex Preprocessing */}
|
||||
<div className="p-4 bg-gray-900/40">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Regex Rules</h3>
|
||||
{localReplacements.length === 0 && (
|
||||
<button
|
||||
onClick={handleAddRegex}
|
||||
className="p-1 rounded bg-gray-700/50 hover:bg-gray-600 text-gray-400 hover:text-white transition-colors"
|
||||
title="Add Rule"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 mb-4 max-h-52 overflow-y-auto pr-1 custom-scrollbar">
|
||||
{localReplacements.length === 0 ? (
|
||||
<div className="text-xs text-gray-600 italic text-center py-4 border border-dashed border-gray-700/50 rounded-lg">
|
||||
No regex replacements configured.
|
||||
</div>
|
||||
) : (
|
||||
localReplacements.map((regex) => (
|
||||
<div key={regex.id} className="flex items-center space-x-2 animate-in slide-in-from-left-2 duration-200">
|
||||
<div className="flex-1 min-w-0">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Regex Pattern"
|
||||
value={regex.pattern}
|
||||
onChange={(e) => handleUpdateRegex(regex.id, 'pattern', e.target.value)}
|
||||
className={`w-full bg-gray-900/80 border rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:ring-1 transition-all placeholder-gray-600
|
||||
${!regex.pattern && isDirty ? 'border-red-500/30 focus:border-red-500' : 'border-gray-700 focus:border-plex-orange'}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-none text-gray-600">
|
||||
<ArrowRightCircle size={12} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Replacement"
|
||||
value={regex.replacement}
|
||||
onChange={(e) => handleUpdateRegex(regex.id, 'replacement', e.target.value)}
|
||||
className="w-full bg-gray-900/80 border border-gray-700 rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-plex-orange focus:ring-1 focus:ring-plex-orange transition-all placeholder-gray-600"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteRegex(regex.id)}
|
||||
className="text-gray-600 hover:text-red-400 p-1.5 hover:bg-red-500/10 rounded transition-colors"
|
||||
title="Delete Rule"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="space-y-3 pt-3 border-t border-white/5">
|
||||
{localReplacements.length > 0 && (
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={handleAddRegex}
|
||||
className="flex items-center space-x-1.5 text-xs text-plex-orange hover:text-yellow-400 transition-colors opacity-80 hover:opacity-100"
|
||||
>
|
||||
<Plus size={12} />
|
||||
<span className="font-medium">Add Rule</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
onClick={handleReset}
|
||||
disabled={!isDirty}
|
||||
className={`flex items-center justify-center space-x-2 py-1.5 rounded-lg text-xs font-medium border transition-all
|
||||
${isDirty
|
||||
? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white'
|
||||
: 'bg-transparent border-gray-800 text-gray-600 cursor-not-allowed'}`}
|
||||
>
|
||||
<RotateCcw size={14} />
|
||||
<span>Revert</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!isDirty}
|
||||
className={`flex items-center justify-center space-x-2 py-1.5 rounded-lg text-xs font-bold border transition-all
|
||||
${isDirty
|
||||
? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10'
|
||||
: 'bg-gray-800/50 border-gray-800 text-gray-600 cursor-not-allowed'}`}
|
||||
>
|
||||
<Save size={14} />
|
||||
<span>Save Changes</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Section 3: Sync Now Button */}
|
||||
<div className="p-4 bg-gray-950/50 border-t border-white/5">
|
||||
<button
|
||||
onClick={handleSyncClick}
|
||||
disabled={isLocked || isDirty} // Disable if syncing OR if there are unsaved regex changes
|
||||
className={`w-full py-3 rounded-lg text-sm font-bold flex items-center justify-center gap-2 transition-all shadow-lg
|
||||
${isLocked
|
||||
? 'bg-gray-700/30 text-gray-500 cursor-not-allowed border border-gray-700/50'
|
||||
: isDirty
|
||||
? 'bg-gray-800 text-gray-500 cursor-not-allowed border border-gray-700' // Must save rules first
|
||||
: 'bg-green-600 hover:bg-green-500 text-white border border-green-500 shadow-green-900/20 active:scale-[0.98]'
|
||||
}`}
|
||||
>
|
||||
{isSyncing ? (
|
||||
<>
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
<span>Sync in Progress...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Zap size={16} fill="currentColor" />
|
||||
<span>Sync Now</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{isDirty && (
|
||||
<p className="text-[10px] text-plex-orange text-center mt-2">
|
||||
Please save or revert regex rules changes before syncing.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user