Upload 6 files

components/LoadingScreen.tsx

@@ -1,80 +1,80 @@
-import React, { useState, useEffect } from 'react';
-
-interface LoadingScreenProps {
-  isBar?: boolean;
-  progress?: number;
-}
-
-const LoadingScreen: React.FC<LoadingScreenProps> = ({ isBar = false, progress = 0 }) => {
-  const [dots, setDots] = useState('.');
-
-  useEffect(() => {
-    const dotAnimation = setInterval(() => {
-      setDots(prevDots => {
-        if (prevDots.length >= 5) {
-          return '.';
-        }
-        return prevDots + '.';
-      });
-    }, 1000);
-
-    return () => clearInterval(dotAnimation);
-  }, []);
-
-  return (
-    <div className="fixed inset-0 z-50 flex h-screen w-screen flex-col items-center justify-center bg-bg font-sans text-fg">
-      <h1 className="mb-8 text-3xl font-bold">Mempersiapkan Presentasi...</h1>
-
-      {isBar ? (
-        <>
-          <div style={styles.progressBarContainer}>
-            <div style={{ ...styles.progressBar, width: `${progress}%` }}></div>
-          </div>
-          <p className="mt-4 text-xl font-medium">{Math.round(progress)}%</p>
-        </>
-      ) : (
-        <div className='flex flex-row gap-10'>
-          <h2 className="mt-8 text-3xl font-bold">
-            LOADING
-            <span className="w-12 text-left">{dots}</span>
-          </h2>
-        </div>
-      )}
-    </div>
-  );
-};
-
-const styles: { [key: string]: React.CSSProperties } = {
-  container: {
-    width: '100vw',
-    height: '100vh',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#071026',
-    color: '#e6eef8',
-    fontFamily: 'Inter, system-ui, sans-serif',
-  },
-  title: {
-    marginBottom: '2rem',
-  },
-  progressBarContainer: {
-    width: '50%',
-    maxWidth: '500px',
-    height: '20px',
-    backgroundColor: '#0e2335',
-    borderRadius: '10px',
-    overflow: 'hidden',
-  },
-  progressBar: {
-    height: '100%',
-    backgroundColor: '#60a5fa',
-  },
-  progressText: {
-    marginTop: '1rem',
-    fontSize: '1.2rem',
-  }
-};
-
-export default LoadingScreen;
+import React, { useState, useEffect } from 'react';
+
+interface LoadingScreenProps {
+  isBar?: boolean;
+  progress?: number;
+}
+
+const LoadingScreen: React.FC<LoadingScreenProps> = ({ isBar = false, progress = 0 }) => {
+  const [dots, setDots] = useState('.');
+
+  useEffect(() => {
+    const dotAnimation = setInterval(() => {
+      setDots(prevDots => {
+        if (prevDots.length >= 5) {
+          return '.';
+        }
+        return prevDots + '.';
+      });
+    }, 1000);
+
+    return () => clearInterval(dotAnimation);
+  }, []);
+
+  return (
+    <div className="fixed inset-0 z-50 flex h-screen w-screen flex-col items-center justify-center bg-bg font-sans text-fg">
+      <h1 className="mb-8 text-3xl font-bold">Mempersiapkan Presentasi...</h1>
+
+      {isBar ? (
+        <>
+          <div style={styles.progressBarContainer}>
+            <div style={{ ...styles.progressBar, width: `${progress}%` }}></div>
+          </div>
+          <p className="mt-4 text-xl font-medium">{Math.round(progress)}%</p>
+        </>
+      ) : (
+        <div className='flex flex-row gap-10'>
+          <h2 className="mt-8 text-3xl font-bold">
+            LOADING
+            <span className="w-12 text-left">{dots}</span>
+          </h2>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const styles: { [key: string]: React.CSSProperties } = {
+  container: {
+    width: '100vw',
+    height: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#071026',
+    color: '#e6eef8',
+    fontFamily: 'Inter, system-ui, sans-serif',
+  },
+  title: {
+    marginBottom: '2rem',
+  },
+  progressBarContainer: {
+    width: '50%',
+    maxWidth: '500px',
+    height: '20px',
+    backgroundColor: '#0e2335',
+    borderRadius: '10px',
+    overflow: 'hidden',
+  },
+  progressBar: {
+    height: '100%',
+    backgroundColor: '#60a5fa',
+  },
+  progressText: {
+    marginTop: '1rem',
+    fontSize: '1.2rem',
+  }
+};
+
+export default LoadingScreen;

components/LoginModal.tsx

@@ -1,144 +1,144 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Mode } from '@/types';
-
-interface LoginModalProps {
-  onLoginSuccess: (mode: Mode) => void;
-  onClose: () => void;
-}
-
-const LoginModal: React.FC<LoginModalProps> = ({ onLoginSuccess, onClose }) => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [hasFocused, setHasFocused] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const modalRef = useRef<HTMLDivElement>(null);
-  const usernameRef = useRef<HTMLInputElement>(null);
-
-  const CONTROLLER_NAME = process.env.CONTROLLER_NAME || '';
-  const CONTROLLER_PASSWORD = process.env.CONTROLLER_PASSWORD || '';
-
-  if (!CONTROLLER_NAME || !CONTROLLER_PASSWORD) {
-    throw new Error("Environment variables for login credentials are not set.");
-  }
-
-  useEffect(() => {
-    if (!hasFocused) {
-      setHasFocused(true);
-      usernameRef.current?.focus();
-    }
-    
-    const handleEsc = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-      }
-    };
-    window.addEventListener('keydown', handleEsc);
-
-    return () => {
-      window.removeEventListener('keydown', handleEsc);
-    };
-  }, [onClose]);
-  
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-    setIsSubmitting(true);
-
-    setTimeout(() => {
-      if (username === CONTROLLER_NAME && password === CONTROLLER_PASSWORD) {
-        onLoginSuccess('controller');
-      } else {
-        setError('Username atau PIN/Password salah. Silakan coba lagi.');
-      }
-      setIsSubmitting(false);
-    }, 500);
-  };
-  
-  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
-      if (modalRef.current && e.target === modalRef.current) {
-          onClose();
-      }
-  };
-
-  return (
-    <div 
-      ref={modalRef}
-      onClick={handleBackdropClick}
-      className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 transition-opacity duration-300 animate-fade-in"
-    >
-      <div className="bg-gray-800 border border-gray-700 rounded-lg shadow-xl p-6 sm:p-8 w-full max-w-sm transform animate-scale-in">
-        <h2 className="text-2xl font-bold text-center text-indigo-400 mb-6">Login</h2>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-1">
-              Username
-            </label>
-            <input
-              ref={usernameRef}
-              type="text"
-              id="username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              className="w-full bg-gray-900 border border-gray-600 rounded-md px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
-              required
-            />
-          </div>
-          <div>
-            <label htmlFor="password"  className="block text-sm font-medium text-gray-300 mb-1">
-              PIN / Password
-            </label>
-            <input
-              type="password"
-              id="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full bg-gray-900 border border-gray-600 rounded-md px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
-              required
-            />
-          </div>
-          {error && <p className="text-red-400 text-sm text-center">{error}</p>}
-          <div className="pt-2 flex flex-col sm:flex-row-reverse gap-3">
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              className="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-md font-semibold text-white transition-colors disabled:bg-indigo-800 disabled:cursor-not-allowed flex items-center justify-center"
-            >
-              {isSubmitting && <SpinnerIcon />}
-              {isSubmitting ? 'Memverifikasi...' : 'Login'}
-            </button>
-            <button
-              type="button"
-              onClick={onClose}
-              className="w-full px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded-md font-semibold text-white transition-colors"
-            >
-              Batal
-            </button>
-          </div>
-        </form>
-      </div>
-       <style>{`
-        @keyframes fade-in {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
-        @keyframes scale-in {
-          from { opacity: 0; transform: scale(0.95); }
-          to { opacity: 1; transform: scale(1); }
-        }
-        .animate-fade-in { animation: fade-in 0.3s ease-out forwards; }
-        .animate-scale-in { animation: scale-in 0.3s ease-out forwards; }
-      `}</style>
-    </div>
-  );
-};
-
-const SpinnerIcon = () => (
-    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-    </svg>
-);
-
-
-export default LoginModal;
+import React, { useState, useEffect, useRef } from 'react';
+import { Mode } from '@/types';
+
+interface LoginModalProps {
+  onLoginSuccess: (mode: Mode) => void;
+  onClose: () => void;
+}
+
+const LoginModal: React.FC<LoginModalProps> = ({ onLoginSuccess, onClose }) => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [hasFocused, setHasFocused] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const usernameRef = useRef<HTMLInputElement>(null);
+
+  const CONTROLLER_NAME = process.env.CONTROLLER_NAME || '';
+  const CONTROLLER_PASSWORD = process.env.CONTROLLER_PASSWORD || '';
+
+  if (!CONTROLLER_NAME || !CONTROLLER_PASSWORD) {
+    throw new Error("Environment variables for login credentials are not set.");
+  }
+
+  useEffect(() => {
+    if (!hasFocused) {
+      setHasFocused(true);
+      usernameRef.current?.focus();
+    }
+    
+    const handleEsc = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+
+    return () => {
+      window.removeEventListener('keydown', handleEsc);
+    };
+  }, [onClose]);
+  
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+
+    setTimeout(() => {
+      if (username === CONTROLLER_NAME && password === CONTROLLER_PASSWORD) {
+        onLoginSuccess('controller');
+      } else {
+        setError('Username atau PIN/Password salah. Silakan coba lagi.');
+      }
+      setIsSubmitting(false);
+    }, 500);
+  };
+  
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      if (modalRef.current && e.target === modalRef.current) {
+          onClose();
+      }
+  };
+
+  return (
+    <div 
+      ref={modalRef}
+      onClick={handleBackdropClick}
+      className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 transition-opacity duration-300 animate-fade-in"
+    >
+      <div className="bg-gray-800 border border-gray-700 rounded-lg shadow-xl p-6 sm:p-8 w-full max-w-sm transform animate-scale-in">
+        <h2 className="text-2xl font-bold text-center text-indigo-400 mb-6">Login</h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-1">
+              Username
+            </label>
+            <input
+              ref={usernameRef}
+              type="text"
+              id="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="w-full bg-gray-900 border border-gray-600 rounded-md px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="password"  className="block text-sm font-medium text-gray-300 mb-1">
+              PIN / Password
+            </label>
+            <input
+              type="password"
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full bg-gray-900 border border-gray-600 rounded-md px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+              required
+            />
+          </div>
+          {error && <p className="text-red-400 text-sm text-center">{error}</p>}
+          <div className="pt-2 flex flex-col sm:flex-row-reverse gap-3">
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-md font-semibold text-white transition-colors disabled:bg-indigo-800 disabled:cursor-not-allowed flex items-center justify-center"
+            >
+              {isSubmitting && <SpinnerIcon />}
+              {isSubmitting ? 'Memverifikasi...' : 'Login'}
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              className="w-full px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded-md font-semibold text-white transition-colors"
+            >
+              Batal
+            </button>
+          </div>
+        </form>
+      </div>
+       <style>{`
+        @keyframes fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes scale-in {
+          from { opacity: 0; transform: scale(0.95); }
+          to { opacity: 1; transform: scale(1); }
+        }
+        .animate-fade-in { animation: fade-in 0.3s ease-out forwards; }
+        .animate-scale-in { animation: scale-in 0.3s ease-out forwards; }
+      `}</style>
+    </div>
+  );
+};
+
+const SpinnerIcon = () => (
+    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+);
+
+
+export default LoginModal;

components/Player.tsx

@@ -1,314 +1,314 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { getData, saveData } from '../services/githubService';
-import { type Mode, type GitHubData, defaultData, LastAction, reversePaths, realPaths } from '../types';
-import LoginModal from './LoginModal';
-import UpdateRefreshDataMode from './UpdateRefreshDataMode';
-import { FaEllipsisV } from 'react-icons/fa';
-
-// Tipe untuk props
-interface PlayerProps {
-  preloadedUrls: Record<string, string>; // Kunci: path asli, Nilai: Object URL
-  totalSegments: number;
-}
-
-const Player: React.FC<PlayerProps> = ({ preloadedUrls, totalSegments }) => {
-  // === State & Refs ===
-  const [mode, setMode] = useState<Mode>('controller');
-  const [isMobileMenuOpen, setMobileMenuOpen] = useState(false)
-  const [isLoginVisible, setLoginVisible] = useState(false);
-  const [githubData, setGithubData] = useState<GitHubData>(defaultData);
-  const [sha, setSha] = useState("");
-  const [isPlaying, setPlaying] = useState(false);
-  const [currentSegmentIdx, setCurrentSegmentIdx] = useState(0);
-  const saveRef = useRef<HTMLButtonElement>(null);
-  const appWrapRef = useRef<HTMLDivElement>(null);
-  const [lastActionsState, setLastActionsState] = useState<[LastAction, LastAction]>([null, null]);
-
-  const [activePlayerIndex, setActivePlayerIndex] = useState(0);
-
-  const videoRefs = [
-    useRef<HTMLVideoElement>(null),
-    useRef<HTMLVideoElement>(null),
-    useRef<HTMLVideoElement>(null),
-  ];
-  
-  const clamp = (v: number, a: number, b: number) => Math.max(a, Math.min(b, v));
-
-  useEffect(() => {
-    videoRefs.forEach((ref, index) => {
-      const video = ref.current;
-      if (video && video.src) {
-        if (index === activePlayerIndex) {
-          video.play().catch(e => {});
-        } else {
-          console.log({currentSegmentIdx});
-          if (currentSegmentIdx === 0) {
-            video.currentTime = 0;
-          }
-          video.pause();
-        }
-      }
-    });
-  }, [activePlayerIndex]);
-
-  const updatePlayerAndBuffers = useCallback((isSaveOnly: boolean, newIndex?: number, direction?: LastAction) => {
-    console.log({currentSegmentIdx, newIndex, direction});
-    if (newIndex < 0 || newIndex > totalSegments - 1) return;
-    
-    (async () => {
-      if (mode !== 'controller' && false) return;
-
-      const dataToSave: GitHubData = {
-          idx: newIndex,
-          direction: direction
-      };
-      
-      let newSha = sha;
-
-      try {
-        const response = await getData();
-        newSha = response.sha;
-      } catch (error) {
-          console.error("Gagal mengambil data sebelum menyimpan:", error);
-      }
-
-      try {
-          await saveData(dataToSave, "Update data", newSha);
-          console.log('Data berhasil disimpan!');
-      } catch (error) {
-          console.error("Gagal menyimpan data:", error);
-      }
-    })();
-
-    if (isSaveOnly) return;
-
-    // Tentukan player mana yang akan menjadi aktif
-    const nextPlayerIndex = (activePlayerIndex + 1) % 3;
-
-    // Tentukan URL untuk player yang akan aktif
-    const activeUrlPath = direction === 'prev'
-      ? `${reversePaths}${newIndex}.mp4`
-      : `${realPaths}${newIndex}.mp4`;
-    
-    // Set src untuk player yang akan aktif
-    const activePlayer = videoRefs[nextPlayerIndex].current;
-    if (activePlayer) {
-      activePlayer.src = preloadedUrls[activeUrlPath];
-    }
-    
-    // Ganti player yang aktif
-    setActivePlayerIndex(nextPlayerIndex);
-    setCurrentSegmentIdx(newIndex);
-    setLastActionsState(prev => [prev[1], direction]);
-
-    // Update buffer untuk player yang tidak aktif
-    const nextBufferPlayer = videoRefs[(nextPlayerIndex + 1) % 3].current;
-    const prevBufferPlayer = videoRefs[(nextPlayerIndex + 2) % 3].current;
-
-    if (nextBufferPlayer && newIndex < totalSegments - 1) {
-      nextBufferPlayer.src = preloadedUrls[`${realPaths}${newIndex + 1}.mp4`];
-    }
-
-    if (prevBufferPlayer && newIndex > 0) {
-      prevBufferPlayer.src = preloadedUrls[`${reversePaths}${newIndex - 1}.mp4`];
-    }
-  }, [activePlayerIndex, totalSegments]);
-
-  const handleNext = useCallback(() => {
-    if (isPlaying) return;
-    const nextIdx = currentSegmentIdx + (lastActionsState[1] === null ? 0 : 1) - (lastActionsState[1] === 'prev' ? 1 : (lastActionsState[1] === null ? -1 : 0));
-    updatePlayerAndBuffers(false, nextIdx, 'next');
-    setLastActionsState(prev => [prev[1], 'next']);
-  }, [currentSegmentIdx, isPlaying, lastActionsState, totalSegments, preloadedUrls]);
-
-  const handlePrev = useCallback(() => {
-    if (isPlaying) return;
-    const prevIdx = currentSegmentIdx - (lastActionsState[1] === null ? 0 : 1) + (['next', 'jump'].includes(lastActionsState[1]) ? 1 : 0);
-    updatePlayerAndBuffers(false, prevIdx, 'prev');
-    setLastActionsState(prev => [prev[1], 'prev']);
-  }, [currentSegmentIdx, isPlaying, lastActionsState, totalSegments, preloadedUrls]);
-
-  const handleSkip = useCallback(() => {
-    const activePlayer = videoRefs[activePlayerIndex].current;
-    if (isPlaying && activePlayer) {
-      activePlayer.currentTime = activePlayer.duration - 0.01;
-      activePlayer.pause();
-    }
-  }, [currentSegmentIdx, isPlaying, lastActionsState, totalSegments, preloadedUrls]);
-  
-  const handleSegmentInputChange = (e: React.ChangeEvent<HTMLInputElement> | number) => {
-    const page = clamp(Number(typeof e === 'number' ? e : e.target.value), 0, totalSegments - 1);
-    updatePlayerAndBuffers(false, page, 'jump');
-    setLastActionsState(prev => [prev[1], 'jump']);
-  }
-
-  const toggleFullScreen = () => {
-    if (!document.fullscreenElement) {
-      appWrapRef.current?.requestFullscreen();
-    } else {
-      document.exitFullscreen();
-    }
-  };
-
-  // === Logika Sinkronisasi Data (githubService) ===
-  const fetchData = useCallback(async () => {
-    try {
-        const response = await getData();
-        setGithubData(response.data);
-        setSha(response.sha);
-    } catch (error) {
-        console.error("Gagal mengambil data:", error);
-    }
-  }, []);
-
-  // Handler untuk event keyboard
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      // Hanya aktifkan shortcut keyboard jika mode adalah presenter
-      if (mode === 'controller') {
-        if (event.key === 'ArrowRight') {
-          isPlaying ? handleSkip() : handleNext();
-        } else if (event.key === 'ArrowLeft') {
-          isPlaying ? handleSkip() : handlePrev();
-        } else if (event.key === 's') {
-          updatePlayerAndBuffers(true, currentSegmentIdx, lastActionsState[1])
-        }
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isPlaying, handleNext, handlePrev, mode]); // Tambahkan mode sebagai dependency
-
-  // Polling data untuk mode 'preview'
-  useEffect(() => {
-    if (mode === 'preview') {
-      fetchData(); // Ambil data saat pertama kali masuk mode preview
-      const intervalId = setInterval(fetchData, 5000);
-      return () => clearInterval(intervalId);
-    }
-  }, [mode, fetchData]);
-
-  // Reaksi terhadap perubahan data yang di-fetch dalam mode 'preview'
-  useEffect(() => {
-    const isPreviewMode = mode === 'preview';
-    const hasChangedGithubData = githubData && (githubData.idx !== currentSegmentIdx || githubData.direction !== lastActionsState[1]);
-    const someVideoIsNull = videoRefs.some(
-      videoRef => !videoRef.current || !videoRef.current.src || videoRef.current.src === "undefined"
-    );
-
-    console.log({ preloadedUrls: Object.values(preloadedUrls) })
-
-    console.log(isPreviewMode, hasChangedGithubData, someVideoIsNull);
-    console.log(mode, JSON.stringify(githubData), JSON.stringify(videoRefs.map(videoRef => videoRef.current.src || undefined)));
-
-    if (isPreviewMode && (hasChangedGithubData || someVideoIsNull)) {
-        console.log('Data baru terdeteksi:', githubData);
-        updatePlayerAndBuffers(false, githubData.idx, githubData.direction);
-    }
-  }, [githubData, mode, preloadedUrls]);
-
-  return (
-    <>
-      <main ref={appWrapRef} className="fixed inset-0 z-10 flex flex-col items-center justify-start w-screen h-screen bg-bg">
-        <div className="group fixed inset-0 flex h-screen w-screen items-end justify-center bg-black">
-          {videoRefs.map((ref, index) => (
-            <video
-              key={index}
-              ref={ref}
-              className="absolute inset-0 h-full w-full object-contain bg-black"
-              style={{ zIndex: activePlayerIndex === index ? 1 : 0 }}
-              onPlay={() => activePlayerIndex === index && setPlaying(true)}
-              onPause={() => activePlayerIndex === index && setPlaying(false)}
-              onEnded={() => activePlayerIndex === index && setPlaying(false)}
-              playsInline
-              preload="auto"
-              muted
-            />
-          ))}
-          
-          <div className="absolute inset-x-0 bottom-0 sm:h-auto h-[25vh] z-20 flex w-full justify-center opacity-100 sm:opacity-0 transition-opacity duration-300 hover:opacity-100 backdrop-blur-sm">
-            <div className="flex w-full items-center justify-between rounded-t-2xl bg-bg/50 px-6 py-4 shadow-lg">
-              <div className="flex items-center justify-center gap-2.5">
-                <button
-                  id="prevBtn"
-                  className="btn"
-                  onClick={handlePrev}
-                  disabled={mode === 'preview' || isPlaying || (currentSegmentIdx <= 0 && lastActionsState[1] !== "prev")}
-                >⟨</button>
-                <button
-                  id="nextBtn"
-                  className="btn"
-                  onClick={handleNext}
-                  disabled={mode === 'preview' || isPlaying || currentSegmentIdx >= totalSegments - 1}
-                >⟩</button>
-                {isPlaying && <button id="skipBtn" className="btn" onClick={handleSkip}>⟨⟨ ⟩⟩</button>}
-              </div>
-              
-              <div className="hidden items-center gap-4 sm:flex">
-                  <UpdateRefreshDataMode
-                    mode={mode}
-                    saveRef={saveRef}
-                    onFetch={fetchData}
-                    onSave={() => updatePlayerAndBuffers(true, currentSegmentIdx, lastActionsState[1])}
-                    onLogin={() => setLoginVisible(true)}
-                    onLogout={() => setMode('preview')}
-                    isMobile={isMobileMenuOpen}
-                  />
-              </div>
-              
-              <div className="flex items-center justify-center">
-                <input
-                  type="number"
-                  id="inputSegment"
-                  className="btn w-[55px] text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                  min="0"
-                  max={totalSegments - 1}
-                  value={String(currentSegmentIdx)}
-                  onChange={(e) => setCurrentSegmentIdx(Number(e.target.value))}
-                  onBlur={handleSegmentInputChange}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') handleSegmentInputChange(currentSegmentIdx);
-                  }}
-                  disabled={mode === 'preview'}
-                />
-                <button id="fsBtn" className="btn small ml-2.5" onClick={toggleFullScreen}>⤢</button>
-              </div>
-            </div>
-          </div>
-          
-          <div className="absolute top-0 right-0 z-30 p-4 sm:hidden">
-            <button onClick={() => setMobileMenuOpen(!isMobileMenuOpen)} className="btn small">
-              <FaEllipsisV />
-            </button>
-          </div>
-        </div>
-        
-        <div className={`fixed bottom-0 z-40 w-full p-4 bg-bg/80 backdrop-blur-sm transition-transform duration-300 ease-in-out sm:hidden ${isMobileMenuOpen ? 'translate-y-0' : 'translate-y-full'}`}>
-            <div className="flex flex-col items-center gap-4">
-                <UpdateRefreshDataMode
-                    mode={mode}
-                    saveRef={saveRef}
-                    onFetch={fetchData}
-                    onSave={() => updatePlayerAndBuffers(true, currentSegmentIdx, lastActionsState[1])}
-                    onLogin={() => setLoginVisible(true)}
-                    onLogout={() => setMode('preview')}
-                    isMobile={isMobileMenuOpen}
-                  />
-                <button onClick={() => setMobileMenuOpen(false)} className="btn w-full mt-2">Tutup</button>
-            </div>
-        </div>
-        {isLoginVisible && (
-          <LoginModal 
-            onClose={() => setLoginVisible(false)}
-            onLoginSuccess={(selectedMode) => {
-              setMode(selectedMode);
-              setLoginVisible(false);
-            }}
-          />
-        )}
-      </main>
-    </>
-  );
-};
-
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { getData, saveData } from '../services/githubService';
+import { type Mode, type GitHubData, defaultData, LastAction, reversePaths, realPaths } from '../types';
+import LoginModal from './LoginModal';
+import UpdateRefreshDataMode from './UpdateRefreshDataMode';
+import { FaEllipsisV } from 'react-icons/fa';
+
+// Tipe untuk props
+interface PlayerProps {
+  preloadedUrls: Record<string, string>; // Kunci: path asli, Nilai: Object URL
+  totalSegments: number;
+}
+
+const Player: React.FC<PlayerProps> = ({ preloadedUrls, totalSegments }) => {
+  // === State & Refs ===
+  const [mode, setMode] = useState<Mode>('preview');
+  const [isMobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [isLoginVisible, setLoginVisible] = useState(false);
+  const [githubData, setGithubData] = useState<GitHubData>(defaultData);
+  const [sha, setSha] = useState("");
+  const [isPlaying, setPlaying] = useState(false);
+  const [currentSegmentIdx, setCurrentSegmentIdx] = useState(0);
+  const saveRef = useRef<HTMLButtonElement>(null);
+  const appWrapRef = useRef<HTMLDivElement>(null);
+  const [lastActionsState, setLastActionsState] = useState<[LastAction, LastAction]>([null, null]);
+
+  const [activePlayerIndex, setActivePlayerIndex] = useState(0);
+
+  const videoRefs = [
+    useRef<HTMLVideoElement>(null),
+    useRef<HTMLVideoElement>(null),
+    useRef<HTMLVideoElement>(null),
+  ];
+  
+  const clamp = (v: number, a: number, b: number) => Math.max(a, Math.min(b, v));
+
+  useEffect(() => {
+    videoRefs.forEach((ref, index) => {
+      const video = ref.current;
+      if (video && video.src) {
+        if (index === activePlayerIndex) {
+          video.play().catch(e => {});
+        } else {
+          console.log({currentSegmentIdx});
+          if (currentSegmentIdx === 0) {
+            video.currentTime = 0;
+          }
+          video.pause();
+        }
+      }
+    });
+  }, [activePlayerIndex]);
+
+  const updatePlayerAndBuffers = useCallback((isSaveOnly: boolean, newIndex?: number, direction?: LastAction) => {
+    console.log({currentSegmentIdx, newIndex, direction});
+    if (newIndex < 0 || newIndex > totalSegments - 1) return;
+    
+    (async () => {
+      if (mode !== 'controller') return;
+
+      const dataToSave: GitHubData = {
+          idx: newIndex,
+          direction: direction
+      };
+      
+      let newSha = sha;
+
+      try {
+        const response = await getData();
+        newSha = response.sha;
+      } catch (error) {
+          console.error("Gagal mengambil data sebelum menyimpan:", error);
+      }
+
+      try {
+          await saveData(dataToSave, "Update data", newSha);
+          console.log('Data berhasil disimpan!');
+      } catch (error) {
+          console.error("Gagal menyimpan data:", error);
+      }
+    })();
+
+    if (isSaveOnly) return;
+
+    // Tentukan player mana yang akan menjadi aktif
+    const nextPlayerIndex = (activePlayerIndex + 1) % 3;
+
+    // Tentukan URL untuk player yang akan aktif
+    const activeUrlPath = direction === 'prev'
+      ? `${reversePaths}${newIndex}.mp4`
+      : `${realPaths}${newIndex}.mp4`;
+    
+    // Set src untuk player yang akan aktif
+    const activePlayer = videoRefs[nextPlayerIndex].current;
+    if (activePlayer) {
+      activePlayer.src = preloadedUrls[activeUrlPath];
+    }
+    
+    // Ganti player yang aktif
+    setActivePlayerIndex(nextPlayerIndex);
+    setCurrentSegmentIdx(newIndex);
+    setLastActionsState(prev => [prev[1], direction]);
+
+    // Update buffer untuk player yang tidak aktif
+    const nextBufferPlayer = videoRefs[(nextPlayerIndex + 1) % 3].current;
+    const prevBufferPlayer = videoRefs[(nextPlayerIndex + 2) % 3].current;
+
+    if (nextBufferPlayer && newIndex < totalSegments - 1) {
+      nextBufferPlayer.src = preloadedUrls[`${realPaths}${newIndex + 1}.mp4`];
+    }
+
+    if (prevBufferPlayer && newIndex > 0) {
+      prevBufferPlayer.src = preloadedUrls[`${reversePaths}${newIndex - 1}.mp4`];
+    }
+  }, [activePlayerIndex, totalSegments]);
+
+  const handleNext = useCallback(() => {
+    if (isPlaying) return;
+    const nextIdx = currentSegmentIdx + (lastActionsState[1] === null ? 0 : 1) - (lastActionsState[1] === 'prev' ? 1 : (lastActionsState[1] === null ? -1 : 0));
+    updatePlayerAndBuffers(false, nextIdx, 'next');
+    setLastActionsState(prev => [prev[1], 'next']);
+  }, [currentSegmentIdx, isPlaying, lastActionsState, totalSegments, preloadedUrls]);
+
+  const handlePrev = useCallback(() => {
+    if (isPlaying) return;
+    const prevIdx = currentSegmentIdx - (lastActionsState[1] === null ? 0 : 1) + (['next', 'jump'].includes(lastActionsState[1]) ? 1 : 0);
+    updatePlayerAndBuffers(false, prevIdx, 'prev');
+    setLastActionsState(prev => [prev[1], 'prev']);
+  }, [currentSegmentIdx, isPlaying, lastActionsState, totalSegments, preloadedUrls]);
+
+  const handleSkip = useCallback(() => {
+    const activePlayer = videoRefs[activePlayerIndex].current;
+    if (isPlaying && activePlayer) {
+      activePlayer.currentTime = activePlayer.duration - 0.01;
+      activePlayer.pause();
+    }
+  }, [currentSegmentIdx, isPlaying, lastActionsState, totalSegments, preloadedUrls]);
+  
+  const handleSegmentInputChange = (e: React.ChangeEvent<HTMLInputElement> | number) => {
+    const page = clamp(Number(typeof e === 'number' ? e : e.target.value), 0, totalSegments - 1);
+    updatePlayerAndBuffers(false, page, 'jump');
+    setLastActionsState(prev => [prev[1], 'jump']);
+  }
+
+  const toggleFullScreen = () => {
+    if (!document.fullscreenElement) {
+      appWrapRef.current?.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  };
+
+  // === Logika Sinkronisasi Data (githubService) ===
+  const fetchData = useCallback(async () => {
+    try {
+        const response = await getData();
+        setGithubData(response.data);
+        setSha(response.sha);
+    } catch (error) {
+        console.error("Gagal mengambil data:", error);
+    }
+  }, []);
+
+  // Handler untuk event keyboard
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Hanya aktifkan shortcut keyboard jika mode adalah presenter
+      if (mode === 'controller') {
+        if (event.key === 'ArrowRight') {
+          isPlaying ? handleSkip() : handleNext();
+        } else if (event.key === 'ArrowLeft') {
+          isPlaying ? handleSkip() : handlePrev();
+        } else if (event.key === 's') {
+          updatePlayerAndBuffers(true, currentSegmentIdx, lastActionsState[1])
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isPlaying, handleNext, handlePrev, mode]); // Tambahkan mode sebagai dependency
+
+  // Polling data untuk mode 'preview'
+  useEffect(() => {
+    if (mode === 'preview') {
+      fetchData(); // Ambil data saat pertama kali masuk mode preview
+      const intervalId = setInterval(fetchData, 5000);
+      return () => clearInterval(intervalId);
+    }
+  }, [mode, fetchData]);
+
+  // Reaksi terhadap perubahan data yang di-fetch dalam mode 'preview'
+  useEffect(() => {
+    const isPreviewMode = mode === 'preview';
+    const hasChangedGithubData = githubData && (githubData.idx !== currentSegmentIdx || githubData.direction !== lastActionsState[1]);
+    const someVideoIsNull = videoRefs.some(
+      videoRef => !videoRef.current || !videoRef.current.src || videoRef.current.src === "undefined"
+    );
+
+    console.log({ preloadedUrls: Object.values(preloadedUrls) })
+
+    console.log(isPreviewMode, hasChangedGithubData, someVideoIsNull);
+    console.log(mode, JSON.stringify(githubData), JSON.stringify(videoRefs.map(videoRef => videoRef.current.src || undefined)));
+
+    if (isPreviewMode && (hasChangedGithubData || someVideoIsNull)) {
+        console.log('Data baru terdeteksi:', githubData);
+        updatePlayerAndBuffers(false, githubData.idx, githubData.direction);
+    }
+  }, [githubData, mode, preloadedUrls]);
+
+  return (
+    <>
+      <main ref={appWrapRef} className="fixed inset-0 z-10 flex flex-col items-center justify-start w-screen h-screen bg-bg">
+        <div className="group fixed inset-0 flex h-screen w-screen items-end justify-center bg-black">
+          {videoRefs.map((ref, index) => (
+            <video
+              key={index}
+              ref={ref}
+              className="absolute inset-0 h-full w-full object-contain bg-black"
+              style={{ zIndex: activePlayerIndex === index ? 1 : 0 }}
+              onPlay={() => activePlayerIndex === index && setPlaying(true)}
+              onPause={() => activePlayerIndex === index && setPlaying(false)}
+              onEnded={() => activePlayerIndex === index && setPlaying(false)}
+              playsInline
+              preload="auto"
+              muted
+            />
+          ))}
+          
+          <div className="absolute inset-x-0 bottom-0 sm:h-auto h-[25vh] z-20 flex w-full justify-center opacity-100 sm:opacity-0 transition-opacity duration-300 hover:opacity-100 backdrop-blur-sm">
+            <div className="flex w-full items-center justify-between rounded-t-2xl bg-bg/50 px-6 py-4 shadow-lg">
+              <div className="flex items-center justify-center gap-2.5">
+                <button
+                  id="prevBtn"
+                  className="btn"
+                  onClick={handlePrev}
+                  disabled={mode === 'preview' || isPlaying || currentSegmentIdx <= 0}
+                >⟨</button>
+                <button
+                  id="nextBtn"
+                  className="btn"
+                  onClick={handleNext}
+                  disabled={mode === 'preview' || isPlaying || currentSegmentIdx >= totalSegments - 1}
+                >⟩</button>
+                {isPlaying && <button id="skipBtn" className="btn" onClick={handleSkip}>⟨⟨ ⟩⟩</button>}
+              </div>
+              
+              <div className="hidden items-center gap-4 sm:flex">
+                  <UpdateRefreshDataMode
+                    mode={mode}
+                    saveRef={saveRef}
+                    onFetch={fetchData}
+                    onSave={() => updatePlayerAndBuffers(true, currentSegmentIdx, lastActionsState[1])}
+                    onLogin={() => setLoginVisible(true)}
+                    onLogout={() => setMode('preview')}
+                    isMobile={isMobileMenuOpen}
+                  />
+              </div>
+              
+              <div className="flex items-center justify-center">
+                <input
+                  type="number"
+                  id="inputSegment"
+                  className="btn w-[55px] text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  min="0"
+                  max={totalSegments - 1}
+                  value={String(currentSegmentIdx)}
+                  onChange={(e) => setCurrentSegmentIdx(Number(e.target.value))}
+                  onBlur={handleSegmentInputChange}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleSegmentInputChange(currentSegmentIdx);
+                  }}
+                  disabled={mode === 'preview'}
+                />
+                <button id="fsBtn" className="btn small ml-2.5" onClick={toggleFullScreen}>⤢</button>
+              </div>
+            </div>
+          </div>
+          
+          <div className="absolute top-0 right-0 z-30 p-4 sm:hidden">
+            <button onClick={() => setMobileMenuOpen(!isMobileMenuOpen)} className="btn small">
+              <FaEllipsisV />
+            </button>
+          </div>
+        </div>
+        
+        <div className={`fixed bottom-0 z-40 w-full p-4 bg-bg/80 backdrop-blur-sm transition-transform duration-300 ease-in-out sm:hidden ${isMobileMenuOpen ? 'translate-y-0' : 'translate-y-full'}`}>
+            <div className="flex flex-col items-center gap-4">
+                <UpdateRefreshDataMode
+                    mode={mode}
+                    saveRef={saveRef}
+                    onFetch={fetchData}
+                    onSave={() => updatePlayerAndBuffers(true, currentSegmentIdx, lastActionsState[1])}
+                    onLogin={() => setLoginVisible(true)}
+                    onLogout={() => setMode('preview')}
+                    isMobile={isMobileMenuOpen}
+                  />
+                <button onClick={() => setMobileMenuOpen(false)} className="btn w-full mt-2">Tutup</button>
+            </div>
+        </div>
+        {isLoginVisible && (
+          <LoginModal 
+            onClose={() => setLoginVisible(false)}
+            onLoginSuccess={(selectedMode) => {
+              setMode(selectedMode);
+              setLoginVisible(false);
+            }}
+          />
+        )}
+      </main>
+    </>
+  );
+};
+
 export default Player;

components/UpdateRefreshDataMode.tsx

@@ -1,59 +1,59 @@
-import React, { Ref } from 'react';
-import type { Mode } from '../types';
-import { FaRedo, FaSave, FaSignInAlt, FaSignOutAlt } from 'react-icons/fa';
-
-interface UpdateRefreshDataModeProps {
-  mode: Mode;
-  saveRef: Ref<HTMLButtonElement>;
-  onFetch: () => void;
-  onSave: () => void;
-  onLogin: () => void;
-  onLogout: () => void;
-  isMobile: boolean
-}
-
-const UpdateRefreshDataMode: React.FC<UpdateRefreshDataModeProps> = ({ mode, saveRef, onFetch, onSave, onLogin, onLogout, isMobile }) => {
-    return (
-        <>
-            <div className={`flex justify-between items-center gap-10 ${isMobile ? "flex-col" : ""}`}>
-                <button
-                    onClick={onFetch}
-                    className={`flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500 transition-transform transform hover:scale-105`}
-                >
-                    <FaRedo className="h-4 w-4 mr-2" />
-                    Refresh
-                </button>
-            
-                {mode === "controller" &&
-                    <button
-                        ref={saveRef}
-                        onClick={onSave}
-                        className={`flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500 transition-transform transform hover:scale-105`}
-                    >
-                        <FaSave className="h-4 w-4 mr-2" />
-                        Save
-                    </button>
-                }
-
-                <button
-                    onClick={mode === "preview" ? onLogin : onLogout}
-                    className={`flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500 transition-transform transform hover:scale-105`}
-                >
-                    {mode === "preview" ? (
-                        <>
-                            <FaSignInAlt className="h-4 w-4 mr-2" />
-                            Login
-                        </>
-                    ) : (
-                        <>
-                            <FaSignOutAlt className="h-4 w-4 mr-2" />
-                            Logout
-                        </>
-                    )}
-                </button>
-            </div>
-        </>
-    )
-}
-
+import React, { Ref } from 'react';
+import type { Mode } from '../types';
+import { FaRedo, FaSave, FaSignInAlt, FaSignOutAlt } from 'react-icons/fa';
+
+interface UpdateRefreshDataModeProps {
+  mode: Mode;
+  saveRef: Ref<HTMLButtonElement>;
+  onFetch: () => void;
+  onSave: () => void;
+  onLogin: () => void;
+  onLogout: () => void;
+  isMobile: boolean
+}
+
+const UpdateRefreshDataMode: React.FC<UpdateRefreshDataModeProps> = ({ mode, saveRef, onFetch, onSave, onLogin, onLogout, isMobile }) => {
+    return (
+        <>
+            <div className={`flex justify-between items-center gap-10 ${isMobile ? "flex-col" : ""}`}>
+                <button
+                    onClick={onFetch}
+                    className={`flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500 transition-transform transform hover:scale-105`}
+                >
+                    <FaRedo className="h-4 w-4 mr-2" />
+                    Refresh
+                </button>
+            
+                {mode === "controller" &&
+                    <button
+                        ref={saveRef}
+                        onClick={onSave}
+                        className={`flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500 transition-transform transform hover:scale-105`}
+                    >
+                        <FaSave className="h-4 w-4 mr-2" />
+                        Save
+                    </button>
+                }
+
+                <button
+                    onClick={mode === "preview" ? onLogin : onLogout}
+                    className={`flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500 transition-transform transform hover:scale-105`}
+                >
+                    {mode === "preview" ? (
+                        <>
+                            <FaSignInAlt className="h-4 w-4 mr-2" />
+                            Login
+                        </>
+                    ) : (
+                        <>
+                            <FaSignOutAlt className="h-4 w-4 mr-2" />
+                            Logout
+                        </>
+                    )}
+                </button>
+            </div>
+        </>
+    )
+}
+
 export default UpdateRefreshDataMode;

services/githubService.ts

@@ -1,130 +1,130 @@
-import { defaultData, type GitHubData } from '../types';
-
-const GITHUB_TOKEN = process.env.GITHUB_API_KEY;
-const REPO_OWNER = 'Adityadn64';
-const REPO_NAME = 'Tampilan-MP42PPT';
-const FILE_PATH = 'data.json';
-const API_URL = `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contents/${FILE_PATH}`;
-
-// Fungsi untuk decode Base64 yang aman untuk Unicode
-function b64DecodeUnicode(str: string) {
-  try {
-    return decodeURIComponent(atob(str).split('').map(function(c) {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-    }).join(''));
-  } catch (e) {
-    console.error("Gagal mendekode Base64:", e);
-    // Kembalikan struktur data default jika gagal
-    return JSON.stringify({ questions: [], message: null });
-  }
-}
-
-// Fungsi untuk encode ke Base64 yang aman untuk Unicode
-function b64EncodeUnicode(str: string) {
-    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
-        function toSolidBytes(match, p1) {
-            return String.fromCharCode(parseInt(p1, 16));
-    }));
-}
-
-export const getData = async (): Promise<{ data: GitHubData, sha: string | null }> => {
-  if (!GITHUB_TOKEN) {
-    throw new Error("GITHUB_API_KEY tidak diatur.");
-  }
-  
-  const response = await fetch(API_URL, {
-    headers: {
-      'Authorization': `token ${GITHUB_TOKEN}`,
-      'Accept': 'application/vnd.github+json',
-      'X-GitHub-Api-Version': '2022-11-28',
-    },
-    cache: 'no-cache', // Selalu ambil data terbaru
-  });
-
-  if (response.status === 404) {
-    // File tidak ada, ini adalah kondisi yang valid untuk repositori baru.
-    return { data: defaultData, sha: null };
-  }
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({ message: response.statusText }));
-    throw new Error(`Gagal mengambil data dari GitHub: ${errorData.message}`);
-  }
-
-  const responseData = await response.json();
-  const decodedContent = b64DecodeUnicode(responseData.content);
-  
-  try {
-    const data = JSON.parse(decodedContent);
-    // Pastikan data memiliki struktur yang diharapkan
-    const validatedData: GitHubData = {
-      idx: data.idx,
-      direction: data.direction
-    };
-
-    console.log({data}, {validatedData})
-    return { data: validatedData, sha: responseData.sha };
-  } catch(e) {
-    console.error("Gagal mem-parsing JSON dari GitHub:", e);
-    throw new Error("Format data dari GitHub tidak valid.");
-  }
-};
-
-export const saveData = async (
-  data: GitHubData, 
-  commitMessage: string, 
-  sha: string | null
-): Promise<{ sha: string }> => {
-  if (!GITHUB_TOKEN) {
-    throw new Error("GITHUB_API_KEY tidak diatur.");
-  }
-
-  const content = JSON.stringify(data, null, 2);
-  const encodedContent = b64EncodeUnicode(content);
-  
-  console.log(content);
-  
-  const body: { message: string; content: string; sha?: string } = {
-    message: commitMessage,
-    content: encodedContent,
-  };
-  
-  if (sha) {
-    body.sha = sha;
-  }
-
-  let isSuccess = false;
-  let responseData;
-
-  while (!isSuccess) {
-    try {
-      const response = await fetch(API_URL, {
-        method: 'PUT',
-        headers: {
-          'Authorization': `Bearer ${GITHUB_TOKEN}`,
-          'Accept': 'application/vnd.github+json',
-          'X-GitHub-Api-Version': '2022-11-28',
-        },
-        body: JSON.stringify(body),
-      });
-
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({ message: response.statusText }));
-        throw new Error(`Gagal menyimpan data ke GitHub: ${errorData.message}`);
-      }
-
-      responseData = await response.json();
-      isSuccess = true;
-    } catch (e) {
-      if (e.message.includes("does not match")) {
-        const newData = await getData();
-        body.sha = newData.sha;
-      } else {
-        isSuccess = true;
-      }
-    }
-  }
-
-  return { sha: responseData.content.sha };
-};
+import { defaultData, type GitHubData } from '../types';
+
+const GITHUB_TOKEN = process.env.GITHUB_API_KEY;
+const REPO_OWNER = 'Adityadn64';
+const REPO_NAME = 'Tampilan-MP42PPT';
+const FILE_PATH = 'data.json';
+const API_URL = `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contents/${FILE_PATH}`;
+
+// Fungsi untuk decode Base64 yang aman untuk Unicode
+function b64DecodeUnicode(str: string) {
+  try {
+    return decodeURIComponent(atob(str).split('').map(function(c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+  } catch (e) {
+    console.error("Gagal mendekode Base64:", e);
+    // Kembalikan struktur data default jika gagal
+    return JSON.stringify({ questions: [], message: null });
+  }
+}
+
+// Fungsi untuk encode ke Base64 yang aman untuk Unicode
+function b64EncodeUnicode(str: string) {
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
+        function toSolidBytes(match, p1) {
+            return String.fromCharCode(parseInt(p1, 16));
+    }));
+}
+
+export const getData = async (): Promise<{ data: GitHubData, sha: string | null }> => {
+  if (!GITHUB_TOKEN) {
+    throw new Error("GITHUB_API_KEY tidak diatur.");
+  }
+  
+  const response = await fetch(API_URL, {
+    headers: {
+      'Authorization': `token ${GITHUB_TOKEN}`,
+      'Accept': 'application/vnd.github+json',
+      'X-GitHub-Api-Version': '2022-11-28',
+    },
+    cache: 'no-cache', // Selalu ambil data terbaru
+  });
+
+  if (response.status === 404) {
+    // File tidak ada, ini adalah kondisi yang valid untuk repositori baru.
+    return { data: defaultData, sha: null };
+  }
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({ message: response.statusText }));
+    throw new Error(`Gagal mengambil data dari GitHub: ${errorData.message}`);
+  }
+
+  const responseData = await response.json();
+  const decodedContent = b64DecodeUnicode(responseData.content);
+  
+  try {
+    const data = JSON.parse(decodedContent);
+    // Pastikan data memiliki struktur yang diharapkan
+    const validatedData: GitHubData = {
+      idx: data.idx,
+      direction: data.direction
+    };
+
+    console.log({data}, {validatedData})
+    return { data: validatedData, sha: responseData.sha };
+  } catch(e) {
+    console.error("Gagal mem-parsing JSON dari GitHub:", e);
+    throw new Error("Format data dari GitHub tidak valid.");
+  }
+};
+
+export const saveData = async (
+  data: GitHubData, 
+  commitMessage: string, 
+  sha: string | null
+): Promise<{ sha: string }> => {
+  if (!GITHUB_TOKEN) {
+    throw new Error("GITHUB_API_KEY tidak diatur.");
+  }
+
+  const content = JSON.stringify(data, null, 2);
+  const encodedContent = b64EncodeUnicode(content);
+  
+  console.log(content);
+  
+  const body: { message: string; content: string; sha?: string } = {
+    message: commitMessage,
+    content: encodedContent,
+  };
+  
+  if (sha) {
+    body.sha = sha;
+  }
+
+  let isSuccess = false;
+  let responseData;
+
+  while (!isSuccess) {
+    try {
+      const response = await fetch(API_URL, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${GITHUB_TOKEN}`,
+          'Accept': 'application/vnd.github+json',
+          'X-GitHub-Api-Version': '2022-11-28',
+        },
+        body: JSON.stringify(body),
+      });
+
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({ message: response.statusText }));
+        throw new Error(`Gagal menyimpan data ke GitHub: ${errorData.message}`);
+      }
+
+      responseData = await response.json();
+      isSuccess = true;
+    } catch (e) {
+      if (e.message.includes("does not match")) {
+        const newData = await getData();
+        body.sha = newData.sha;
+      } else {
+        isSuccess = true;
+      }
+    }
+  }
+
+  return { sha: responseData.content.sha };
+};

services/localDataService.ts

@@ -1,108 +1,108 @@
-import { defaultData, type GitHubData } from '../types';
-
-const address = window.location.origin;
-const API_URL = address.replace("3000", "4000") + "/api/data";
-
-// Fungsi untuk decode Base64 yang aman untuk Unicode
-function b64DecodeUnicode(str: string) {
-  try {
-    return decodeURIComponent(atob(str).split('').map(function(c) {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-    }).join(''));
-  } catch (e) {
-    console.error("Gagal mendekode Base64:", e);
-    // Kembalikan struktur data default jika gagal
-    return JSON.stringify({ questions: [], message: null });
-  }
-}
-
-// Fungsi untuk encode ke Base64 yang aman untuk Unicode
-function b64EncodeUnicode(str: string) {
-    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
-        function toSolidBytes(match, p1) {
-            return String.fromCharCode(parseInt(p1, 16));
-    }));
-}
-
-export const getData = async (): Promise<{ data: GitHubData, sha: string | null }> => {
-  const response = await fetch(API_URL);
-
-  if (response.status === 404) {
-    // File tidak ada, ini adalah kondisi yang valid untuk repositori baru.
-    return { data: defaultData, sha: null };
-  }
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({ message: response.statusText }));
-    throw new Error(`Gagal mengambil data dari GitHub: ${errorData.message}`);
-  }
-
-  const responseData = await response.json();
-  const decodedContent = b64DecodeUnicode(responseData.content || "e30=");
-  
-  try {
-    const data = JSON.parse(decodedContent);
-    // Pastikan data memiliki struktur yang diharapkan
-    const validatedData: GitHubData = {
-      idx: data.idx,
-      direction: data.direction
-    };
-    return { data: validatedData, sha: responseData.sha };
-  } catch(e) {
-    console.error("Gagal mem-parsing JSON dari GitHub:", e);
-    throw new Error("Format data dari GitHub tidak valid.");
-  }
-};
-
-export const saveData = async (
-  data: GitHubData, 
-  commitMessage: string, 
-  sha: string | null
-): Promise<{ sha: string }> => {
-  const content = JSON.stringify(data, null, 2);
-  const encodedContent = b64EncodeUnicode(content);
-
-  console.dir(data, { depth: null, colors: true });
-
-  const body: { message: string; content: string; sha?: string } = {
-    message: commitMessage,
-    content: encodedContent,
-  };
-  
-  if (sha) {
-    body.sha = sha;
-  }
-
-  let isSuccess = false;
-  let responseData;
-
-  while (!isSuccess) {
-    try {
-      const response = await fetch(API_URL, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(body),
-      });
-
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({ message: response.statusText }));
-        throw new Error(`Gagal menyimpan data ke GitHub: ${errorData.message}`);
-      }
-
-      responseData = await response.json();
-      isSuccess = true;
-    } catch (e) {
-      if (e.message.includes("does not match")) {
-        const newData = await getData();
-        body.sha = newData.sha;
-      } else {
-        isSuccess = true;
-      }
-    }
-  }
-
-  return { sha: responseData.content.sha };
-};
+import { defaultData, type GitHubData } from '../types';
+
+const address = window.location.origin;
+const API_URL = address.replace("3000", "4000") + "/api/data";
+
+// Fungsi untuk decode Base64 yang aman untuk Unicode
+function b64DecodeUnicode(str: string) {
+  try {
+    return decodeURIComponent(atob(str).split('').map(function(c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+  } catch (e) {
+    console.error("Gagal mendekode Base64:", e);
+    // Kembalikan struktur data default jika gagal
+    return JSON.stringify({ questions: [], message: null });
+  }
+}
+
+// Fungsi untuk encode ke Base64 yang aman untuk Unicode
+function b64EncodeUnicode(str: string) {
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
+        function toSolidBytes(match, p1) {
+            return String.fromCharCode(parseInt(p1, 16));
+    }));
+}
+
+export const getData = async (): Promise<{ data: GitHubData, sha: string | null }> => {
+  const response = await fetch(API_URL);
+
+  if (response.status === 404) {
+    // File tidak ada, ini adalah kondisi yang valid untuk repositori baru.
+    return { data: defaultData, sha: null };
+  }
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({ message: response.statusText }));
+    throw new Error(`Gagal mengambil data dari GitHub: ${errorData.message}`);
+  }
+
+  const responseData = await response.json();
+  const decodedContent = b64DecodeUnicode(responseData.content || "e30=");
+  
+  try {
+    const data = JSON.parse(decodedContent);
+    // Pastikan data memiliki struktur yang diharapkan
+    const validatedData: GitHubData = {
+      idx: data.idx,
+      direction: data.direction
+    };
+    return { data: validatedData, sha: responseData.sha };
+  } catch(e) {
+    console.error("Gagal mem-parsing JSON dari GitHub:", e);
+    throw new Error("Format data dari GitHub tidak valid.");
+  }
+};
+
+export const saveData = async (
+  data: GitHubData, 
+  commitMessage: string, 
+  sha: string | null
+): Promise<{ sha: string }> => {
+  const content = JSON.stringify(data, null, 2);
+  const encodedContent = b64EncodeUnicode(content);
+
+  console.dir(data, { depth: null, colors: true });
+
+  const body: { message: string; content: string; sha?: string } = {
+    message: commitMessage,
+    content: encodedContent,
+  };
+  
+  if (sha) {
+    body.sha = sha;
+  }
+
+  let isSuccess = false;
+  let responseData;
+
+  while (!isSuccess) {
+    try {
+      const response = await fetch(API_URL, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(body),
+      });
+
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({ message: response.statusText }));
+        throw new Error(`Gagal menyimpan data ke GitHub: ${errorData.message}`);
+      }
+
+      responseData = await response.json();
+      isSuccess = true;
+    } catch (e) {
+      if (e.message.includes("does not match")) {
+        const newData = await getData();
+        body.sha = newData.sha;
+      } else {
+        isSuccess = true;
+      }
+    }
+  }
+
+  return { sha: responseData.content.sha };
+};