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
2025-11-29 04:08:38 +09:00
parent 5a29265854
commit 74b37a062c
6 changed files with 506 additions and 162 deletions
@@ -1,7 +1,17 @@
-
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { Playlist, ServerType, SyncStrategy, PlexServerConnection, RegexReplacement } from './types';
+import { Playlist, ServerType, SyncStrategy, PlexServerConnection, RegexReplacement, SyncState } 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';
@@ -14,6 +24,93 @@ interface Toast {
  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>();
+  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 [localPlaylists, setLocalPlaylists] = useState<Playlist[]>([]);
  const [cloudPlaylists, setCloudPlaylists] = useState<Playlist[]>([]);
@@ -22,6 +119,12 @@ const App: React.FC = () => {
  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);
@@ -59,9 +162,9 @@ const App: React.FC = () => {
    });

    // Auto dismiss the new toast after 3 seconds
-    const dismissTimer = setTimeout(() => {
+      const dismissTimer = setTimeout(() => {
      setToasts(prev => prev.map(t => t.id === id ? { ...t, exiting: true } : t));
-    }, 3000);
+    }, TOAST_AUTO_DISMISS_MS);
    
    timeoutsRef.current[id] = dismissTimer;
  };
@@ -97,7 +200,7 @@ const App: React.FC = () => {
        timeoutsRef.current[`remove-${t.id}`] = setTimeout(() => {
          removeToast(t.id);
          delete timeoutsRef.current[`remove-${t.id}`];
-        }, 300);
+        }, TOAST_EXIT_DURATION_MS);
      }
    });
  }, [toasts]);
@@ -183,6 +286,41 @@ const App: React.FC = () => {
    addToast('Regex preprocessing rules have been saved.');
  };

+  // 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, regexReplacements);
+    
+    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("Sync failed. Please check connection.");
+      setTimeout(() => setSyncState(SyncState.IDLE), SYNC_ERROR_RESET_MS);
+    }
+  };
+
  const handleConnectSuccess = (serverInfo: PlexServerConnection) => {
    setCloudServerInfo(serverInfo);
    // Refresh playlists after new connection
@@ -212,29 +350,107 @@ const App: React.FC = () => {
    <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 bg-gray-800/80 border-b border-white/5 shadow-md z-20 relative backdrop-blur-md">
-        <div className="max-w-7xl mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
-          <div className="flex items-center space-x-3">
-            <div className="bg-gradient-to-br from-plex-orange to-yellow-600 p-1.5 rounded-lg text-gray-900 shadow-lg shadow-plex-orange/20">
-              <ArrowLeftRight size={24} strokeWidth={2.5} />
+      <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>
-            <h1 className="text-xl font-bold tracking-tight text-white">
-              Plex<span className="text-plex-orange">Sync</span>
-            </h1>
          </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 */}
+              <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">
+                  Plex<span className="text-plex-orange">Sync</span>
+                </h1>
+              </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 ? "Connected to Plex" : "Disconnected"}
+              >
+                {isConnected ? <Server size={18} /> : <ServerOff size={18} />}
+              </button>
+            </>
+          ) : (
+            /* 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 ? 'SYNCHRONIZING' : 'SYNC COMPLETE'}
+                  </h1>
+               </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 ? "Connected to Plex" : "Disconnected"}
-          >
-            {isConnected ? <Server size={18} /> : <ServerOff size={18} />}
-          </button>
        </div>
      </header>

@@ -288,6 +504,8 @@ const App: React.FC = () => {
                onSelect={handleStrategyChange}
                savedRegexReplacements={regexReplacements}
                onSaveRegex={handleSaveRegex}
+                syncState={syncState}
+                onSync={handleSyncTrigger}
              />
          </div>

@@ -322,4 +540,4 @@ const App: React.FC = () => {
  );
 };

-export default App;
+export default App;