Start

.gitattributes

@@ -0,0 +1,7 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.dll filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.crdownload filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+python/results/*
+python/results.zip
+dist/*
+public/assets/audios/*
+
+node_modules
+# dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,83 @@
+// src/App.tsx
+import React, { useEffect, useRef, useState } from 'react';
+import Player from './components/Player'; // Pastikan path ini benar
+import { realPaths, reversePaths } from './types';
+import LoadingScreen from './components/LoadingScreen';
+
+// === Konfigurasi Awal ===
+export const INITIAL_SEGMENT_COUNT = 46; 
+
+const App: React.FC = () => {
+  const [isPreloading, setIsPreloading] = useState<boolean>(true);
+  const [loadingProgress, setLoadingProgress] = useState<number>(0);
+  const preloadedUrlsRef = useRef<Record<string, string>>({});
+
+  useEffect(() => {
+    // Fungsi untuk melakukan pra-pemuatan semua video
+    const preloadVideos = async () => {
+      const videoPaths: string[] = [];
+      // Buat daftar semua path video yang akan di-load
+      for (let i = 0; i <= INITIAL_SEGMENT_COUNT; i++) {
+        videoPaths.push(`${realPaths}${i}.mp4`);
+        videoPaths.push(`${reversePaths}${i}.mp4`);
+      }
+
+      const totalVideos = videoPaths.length;
+
+      if (totalVideos === 0) {
+        setTimeout(() => {
+          setIsPreloading(false);
+        }, 1000)
+        return;
+      }
+      
+      let loadedCount = 0;
+
+      // Fungsi untuk mengambil satu video
+      const fetchVideo = async (path: string) => {
+        try {
+          const response = await fetch(path);
+          if (!response.ok) {
+            throw new Error(`Gagal memuat video: ${path}`);
+          }
+          const blob = await response.blob();
+          const url = URL.createObjectURL(blob);
+          preloadedUrlsRef.current[path] = url;
+        } catch (error) {
+          console.error(error);
+          // Mungkin Anda ingin menangani error di sini, misal dengan placeholder
+          preloadedUrlsRef.current[path] = ''; // Tandai sebagai gagal
+        } finally {
+          // Perbarui progress bar setelah setiap video (berhasil atau gagal)
+          loadedCount++;
+          const progress = (loadedCount / totalVideos) * 100;
+          setLoadingProgress(prev => prev > progress ? prev : progress);
+        }
+      };
+
+      // Jalankan semua fetch secara paralel untuk mempercepat
+      await Promise.all(videoPaths.map(fetchVideo));
+      
+      setTimeout(() => {
+        setIsPreloading(false);
+      }, 1000);
+    };
+
+    preloadVideos();
+
+    // Cleanup: Hapus Object URL saat komponen di-unmount untuk mencegah memory leak
+    return () => {
+      Object.values(preloadedUrlsRef.current).forEach(url => {
+        if (url) URL.revokeObjectURL(url);
+      });
+    };
+  }, [INITIAL_SEGMENT_COUNT]);
+
+  if (isPreloading) {
+    <LoadingScreen isBar progress={loadingProgress} />
+  }
+
+  return <Player preloadedUrls={preloadedUrlsRef.current} totalSegments={INITIAL_SEGMENT_COUNT} />;
+};
+
+export default App;

README.md

@@ -0,0 +1,161 @@
+---
+title: PPT BUDAYA INDONESIA HTML CONTROL LOGIC
+emoji: 📚
+colorFrom: indigo
+colorTo: indigo
+app_build_command: npm run build
+app_file: dist/index.html
+sdk: static
+pinned: false
+license: apache-2.0
+short_description: 'Warna-Warni Nusantara​: Menyelami Kekayaan Budaya Indonesia​'
+---
+
+# Interactive Video Presentation Controller
+
+[![React](https://img.shields.io/badge/React-18-blue?logo=react)](https://reactjs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?logo=typescript)](https://www.typescriptlang.org/)
+[![Python](https://img.shields.io/badge/Python-3.11-blue?logo=python)](https://www.python.org/)
+[![OpenCV](https://img.shields.io/badge/OpenCV-4-blue?logo=opencv)](https://opencv.org/)
+[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+
+Sebuah sistem presentasi video interaktif dengan mode "Controller" dan "Preview" yang disinkronkan secara real-time menggunakan GitHub Gist API.
+
+**Tema Presentasi:** "Warna-Warni Nusantara: Menyelami Kekayaan Budaya Indonesia"
+
+[**(Tautan Demo Langsung di Hugging Face Spaces)**](https://adityadn-ppt-budaya-indonesia-html-control-logic.static.hf.space/index.html)
+
+---
+
+## Konsep
+
+Proyek ini memecahkan masalah presentasi jarak jauh di mana seorang presenter perlu mengontrol pemutaran video di layar audiens secara mulus. Ini dicapai dengan:
+
+1.  **Pra-pemrosesan Video**: Sebuah skrip Python menggunakan OpenCV untuk memotong video presentasi utama menjadi segmen-segmen kecil, baik untuk pemutaran maju (`real`) maupun mundur (`reverse`).
+2.  **Frontend Cerdas**: Aplikasi React yang melakukan pra-pemuatan (pre-loads) semua segmen video untuk transisi yang instan dan bebas kedipan.
+3.  **Sinkronisasi Real-time**:
+    *   **Mode Controller**: Digunakan oleh presenter. Memiliki kontrol penuh (maju, mundur, lompat segmen) dan menyimpan status halaman saat ini ke GitHub Gist setiap kali ada perubahan.
+    *   **Mode Preview**: Digunakan oleh audiens. Secara berkala mengambil (polls) status terbaru dari GitHub Gist dan secara otomatis memutar segmen video yang sesuai.
+
+## Fitur Utama
+
+-   **Transisi Video Super Mulus**: Menggunakan teknik *triple-buffering* dengan 3 elemen video untuk menghilangkan kedipan saat berpindah segmen.
+-   **Pra-pemuatan Cerdas**: Semua segmen video diunduh terlebih dahulu saat aplikasi dimuat, memastikan tidak ada buffering saat presentasi.
+-   **Dua Mode Operasi**: Mode `controller` untuk presenter dan mode `preview` untuk audiens.
+-   **Navigasi Penuh**: Kontrol maju, mundur, lompat ke segmen tertentu, dan skip.
+-   **Kontrol Keyboard**: Navigasi menggunakan tombol panah (`ArrowLeft`, `ArrowRight`) di mode controller.
+-   **Backend Ringan**: Menggunakan GitHub Gist sebagai database real-time yang sederhana dan gratis.
+
+## Tumpukan Teknologi
+
+-   **Backend & Pemrosesan Video**:
+    -   Python
+    -   OpenCV
+    -   tqdm
+-   **Frontend**:
+    -   React
+    -   TypeScript
+    -   Vite (diasumsikan)
+-   **Sinkronisasi**:
+    -   GitHub Gist API
+
+## Struktur Proyek
+
+```
+.
+├── python/                 # Skrip untuk pemrosesan video
+│   ├── assets/             # Tempat menaruh video sumber (real & reverse)
+│   ├── results/            # Folder output untuk segmen video (diabaikan oleh Git)
+│   └── cut_video.py        # Skrip utama untuk memotong video
+├── public/                 # Aset statis untuk aplikasi React
+│   └── assets/            # Folder hasil pemotongan video HARUS dipindahkan ke sini
+├── src/                    # Kode sumber aplikasi React
+│   ├── components/
+│   │   ├── Player.tsx      # Komponen inti pemutar video
+│   │   └── ...
+│   ├── services/
+│   │   └── githubService.ts# Logika untuk interaksi dengan API Gist
+│   ├── App.tsx             # Komponen utama yang menangani preloading
+│   └── types.ts            # Definisi tipe TypeScript
+├── .env.example            # Template untuk variabel lingkungan
+├── .gitignore              # Mengabaikan file yang tidak perlu
+└── README.md               # Anda sedang membaca ini
+```
+
+## Panduan Instalasi dan Penggunaan
+
+Proses ini terdiri dari dua bagian utama: mempersiapkan segmen video dan menjalankan aplikasi web.
+
+### Bagian 1: Mempersiapkan Segmen Video (Python)
+
+Langkah ini hanya perlu dilakukan sekali atau setiap kali Anda memiliki video sumber baru.
+
+1.  **Prasyarat**: Pastikan Anda memiliki Python 3.x dan `pip` terinstal.
+2.  **Instal Dependensi**: Buka terminal di dalam folder `python/` dan instal pustaka yang diperlukan.
+    ```bash
+    pip install opencv-python tqdm
+    ```
+3.  **Siapkan Video Sumber**:
+    -   Letakkan video presentasi utama Anda di dalam folder `python/assets/` dengan nama `ppt_real.mp4`.
+    -   Letakkan versi terbalik dari video tersebut di dalam folder yang sama dengan nama `ppt_reverse.mp4`.
+4.  **Jalankan Skrip**: Jalankan skrip pemotongan video dari direktori root proyek.
+    ```bash
+    python python/cut_video.py
+    ```
+    Skrip ini akan membuat folder `python/results/` yang berisi semua segmen video `.mp4` yang sudah dipotong.
+
+### Bagian 2: Menjalankan Aplikasi Web (React)
+
+1.  **Pindahkan Aset Video**: **Langkah Krusial!** Pindahkan folder `results` yang baru saja dibuat dari dalam `python/` ke dalam folder `public/`. Struktur akhir harus menjadi `public/results/`.
+    ```
+    public/
+    └── results/
+        ├── real/
+        │   ├── 0.mp4
+        │   └── ...
+        └── reverse/
+            ├── 0.mp4
+            └── ...
+    ```
+2.  **Prasyarat**: Pastikan Anda memiliki Node.js dan `npm` (atau `yarn`) terinstal.
+3.  **Instal Dependensi Frontend**: Buka terminal di direktori root proyek dan jalankan:
+    ```bash
+    npm install
+    ```
+4.  **Konfigurasi Variabel Lingkungan**:
+    -   Buat file bernama `.env` di direktori root proyek.
+    -   Salin konten dari `.env.example` ke dalam `.env`.
+    -   Isi file `.env` dengan kredensial Anda:
+        ```env
+        VITE_GIST_ID=ID_GIST_ANDA
+        VITE_GITHUB_TOKEN=TOKEN_AKSES_PRIBADI_GITHUB_ANDA
+        ```
+    -   **`VITE_GIST_ID`**: ID dari Gist publik/rahasia yang akan Anda gunakan sebagai database.
+    -   **`VITE_GITHUB_TOKEN`**: Personal Access Token (PAT) dari GitHub dengan izin (`scope`) untuk `gist`.
+5.  **Jalankan Server Pengembangan**:
+    ```bash
+    npm run dev
+    ```
+    Buka browser Anda dan kunjungi `http://localhost:5173` (atau port yang ditampilkan).
+
+6.  **Build untuk Produksi**:
+    ```bash
+    npm run build
+    ```
+    Hasilnya akan ada di dalam folder `dist/`, yang siap untuk di-deploy.
+
+## Cara Menggunakan
+
+-   **Mode Preview (Audiens)**: Cukup buka aplikasi. Ini adalah mode default. Layar akan secara pasif menunggu pembaruan dari Gist.
+-   **Mode Controller (Presenter)**:
+    1.  Klik tombol "Mode" atau ikon sejenisnya.
+    2.  Login (jika ada implementasi login).
+    3.  Sekarang Anda berada di mode `controller`. Gunakan tombol `⟨` dan `⟩` di layar atau tombol panah keyboard untuk bernavigasi. Setiap perubahan akan secara otomatis disimpan ke Gist, dan layar audiens akan mengikutinya.
+
+## Lisensi
+
+Proyek ini dilisensikan di bawah Lisensi Apache 2.0. Lihat file `LICENSE` untuk detailnya.
+
+## Copyright
+
+© 2025 Aditya Dwi Nugraha. All Rights Reserved.

components/LoadingScreen.tsx

@@ -0,0 +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;

components/LoginModal.tsx

@@ -0,0 +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;

components/Player.tsx

@@ -0,0 +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>('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

@@ -0,0 +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>
+        </>
+    )
+}
+
+export default UpdateRefreshDataMode;

data.json

@@ -0,0 +1 @@
+[]

index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="id">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PPT BUDAYA INDONESIA HTML CONTROL LOGIC</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="icon" href="/icon/Icon_Full.png" type="image/x-icon">
+    <link rel="stylesheet" href="styles.css">
+    
+<script type="importmap">
+{
+  "imports": {
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.25.0",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "react": "https://aistudiocdn.com/react@^19.2.0"
+  }
+}
+</script>
+</head>
+  <body class="bg-gray-900 text-white">
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>

index.ts

@@ -0,0 +1,83 @@
+import express from 'express';
+import fs from 'fs/promises';
+import path from 'path';
+import cors from 'cors';
+import { existsSync } from 'fs';
+import { Buffer } from 'buffer';
+
+const app = express();
+const PORT = process.env.PORT || 4000;
+// ES module compatible __dirname replacement
+let dirname = decodeURIComponent(new URL(import.meta.url).pathname);
+dirname = path.dirname(dirname);
+// Windows: remove leading slash if present (e.g. /E:/...)
+if (process.platform === 'win32') {
+  if (dirname.startsWith('/')) {
+    dirname = dirname.slice(1);
+  }
+  // Handle Windows backslashes in file URL
+  dirname = dirname.replace(/\\/g, '/');
+}
+const DATA_PATH = path.resolve(dirname, 'data.json');
+console.log('Data path:', DATA_PATH);
+
+app.use(cors());
+app.use(express.json());
+
+// Ensure data.json exists with empty array as default
+async function ensureDataFile() {
+  try {
+    if (!existsSync(DATA_PATH)) {
+      await fs.writeFile(DATA_PATH, '[]', 'utf8');
+    }
+  } catch (err) {
+    console.error('Failed to create data.json:', err);
+  }
+}
+
+// Initialize data file
+ensureDataFile();
+
+const decodeStrToBase64 = (str: string):string => Buffer.from(str, 'base64').toString('binary');
+const encodeBase64ToStr = (str: string):string => Buffer.from(str, 'binary').toString('base64');
+
+const randomSha = () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+
+app.get('/api/data', async (_req, res) => {
+  try {
+    if (!existsSync(DATA_PATH)) {
+      return res.json({});
+    }
+    const data = await fs.readFile(DATA_PATH, 'utf8');
+    try {
+      const result = encodeBase64ToStr(data);
+      res.json({ content: result, sha: randomSha() });
+    } catch (parseErr) {
+      console.error('Invalid JSON in data.json:', parseErr);
+      res.status(500).json({ error: 'Invalid JSON in data.json' });
+    }
+  } catch (err) {
+    console.error('Failed to read data.json:', err);
+    if (err.code === 'ENOENT') {
+      return res.json([]);
+    } else {
+      return res.status(500).json({ error: 'Failed to read data.json' });
+    }
+  }
+});
+
+app.post('/api/data', async (req, res) => {
+  const data = req.body;
+  const result = decodeStrToBase64(data.content);
+  try {
+    await fs.writeFile(DATA_PATH, result || "{}", 'utf8');
+    res.json({ content: {sha: randomSha() } });
+  } catch (err) {
+    console.error('Failed to write data.json:', err);
+    res.status(500).json({ error: `Failed to write data.json: ${err.message}` });
+  }
+});
+
+app.listen(PORT, () => {
+  console.log(`✅ Express server running on http://localhost:${PORT}`);
+});

index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "Interactive Video Presentation Controller",
+  "description": "Sebuah sistem presentasi video interaktif dengan mode 'Controller' dan 'Preview' yang disinkronkan secara real-time menggunakan GitHub Gist API.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "pencatat-soal",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently \"vite\" \"node index.ts\"",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@google/genai": "^1.25.0",
+    "@octokit/core": "^7.0.5",
+    "axios": "^1.12.2",
+    "cors": "^2.8.5",
+    "jspdf": "^3.0.3",
+    "pdfjs-dist": "^5.4.296",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0",
+    "react-spinners": "^0.17.0",
+    "vite-plugin-pwa": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.0.0",
+    "concurrently": "^9.2.1",
+    "express": "^5.1.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

public/assets/videos/real_0.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9cbb93a17e0604ef0d76af1fbef28e7918cc421d149b0a6d84beee3ad2148320
+size 3735246

public/assets/videos/real_1.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2e32aaa6d8cc6bdd7d371868282fa202ad2bc4042b3105388ab0f4c2af9b5874
+size 4174300

public/assets/videos/real_10.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:62230adc0e9f270db6604a9c14e4ce8f6aa620c1483e0ea74adceeceb0c42fcd
+size 4547384

public/assets/videos/real_11.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:25e6b1dc58313ffba4251956c3d00ed3f49c4da7d0d34536664e163558329671
+size 4234298

public/assets/videos/real_12.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6eed3de82e0ec23c7ca3ae7b858d4fe7bbe4639ad57ffafa87d8e2d3c54b02ad
+size 2090580

public/assets/videos/real_13.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e77c3645d494ec82dbc1df3312c7237200f2dea47dee406e86e72b592409e4c5
+size 3972103

public/assets/videos/real_14.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c8c1d0f290a7d96d67d0a3934b3fee3567944026ec916ac71e66c2d70b16cd59
+size 3968402

public/assets/videos/real_15.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:81f821c1c772c635a0905ff1e5806cc1860b9dba602907b85eebd74427549b86
+size 4091631

public/assets/videos/real_16.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ad659eec47457bc8b76645bca13b3bcc092ad3ad1e381c4977e6965e3b8a57eb
+size 2232686

public/assets/videos/real_17.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fee05ce457329d50966f5006a305a88aa5efcbbf62e2503201b0d3474fb305e0
+size 3948220

public/assets/videos/real_18.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d5f1b509062996c05a1192febbd6972ae535b35ea9c04df83d15e4b457031c02
+size 3950956

public/assets/videos/real_19.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1754f6fda1b2e2070a8b8ddbfc086385f2002cfd389a3d22266e93b5f9ab053e
+size 3787307

public/assets/videos/real_2.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f026f3700cc72382f8bf023cf40a128c5296b840a3d1b5adf5b0ae0ac0aa928d
+size 4359900

public/assets/videos/real_20.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:310ea2683a34fac942602650abcbc19e2f2cd84ceca626d3cf800ab6751072e1
+size 1400941

public/assets/videos/real_21.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d79c59f56d8c6ebe63cc9bd7356f2f3add967a111759742c3cfea1393bf1ec23
+size 3400946

public/assets/videos/real_22.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:843540a2a052edb37c99201bf74bd27d0ac73e2451c46d3c50a7fe87aa402932
+size 3413783

public/assets/videos/real_23.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:16381f4e723d1b2856a16be75b6bd1270e9bdacafb84e6a89a1c01b4d9cbc247
+size 3641821

public/assets/videos/real_24.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:49c0f77a522c8048abfd0eb1d38855ffd01b5e125d84cfe8203efa2d75b0a3ac
+size 1717925

public/assets/videos/real_25.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:969f4a74242a2e93599b9d4524810dff2f73999189a5eabaf7c210eb0f0c1e95
+size 3878854

public/assets/videos/real_26.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8f4ab908ca5af1e675fa470f12ed8cb649a0853c2fddf6461d140bfa613cb0f7
+size 4244007

public/assets/videos/real_27.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7babc15b75a21c615c6a2bbe40ff795c9cce4eebd4fe2a59b38978e52a52d257
+size 4391328

public/assets/videos/real_28.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:42d1b6b44bb5703c058c4a3d3d68a8c8c507682f4a198027214a1bb3551732ff
+size 2529054

public/assets/videos/real_29.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:84c5c74a7c20b7f2ada11ca7bbb733626fca58171f995f73d3b64e25213c243b
+size 3749539

public/assets/videos/real_3.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6432bf50db5fff7d8e5d2145a53720e416211a55ad99451d9502f2d74e9b014c
+size 3469974

public/assets/videos/real_30.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:795242b270bc71c7e78ee24eb79417159104875b637f363d954b18f85721ab35
+size 3820793

public/assets/videos/real_31.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:df6ba88622d8adc20f34e56deec9843ce1fb8aedd7b879290b02f59bdbb0e633
+size 3798127

public/assets/videos/real_32.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a9fffb1a222585dfd9e038aadb3ef6eae67cd259045b69dc52d2689c000a399b
+size 1617585

public/assets/videos/real_33.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ff8259dbf90a8eed497df8bd2984a6404c037b5c42d29744f2f57bd771144a75
+size 4080431

public/assets/videos/real_34.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0aac3008d5772f3abda2e7d3160acf1e1dbf868c984ac512d5195cb9d43a3cd2
+size 4155432

public/assets/videos/real_35.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3fd63898cc8cd0c0589fc0ff845a2970d840e1ad185fae66f42990acdb512e48
+size 4049220

public/assets/videos/real_36.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:10bdab1d1e53a913cc68383d2fc767ab48973964f7f4b9bdfecc31533d6e7de5
+size 1687502

public/assets/videos/real_37.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:afeb8d3e45dadb39cddba1597e1373f13eebead34a82f7337af2a586adf85c39
+size 3943424

public/assets/videos/real_38.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:069d900723296ec706b9286fcf887589e44ab15e76437f8e28e9a05886194972
+size 4048348

public/assets/videos/real_39.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7d9ceb9c2fc3ae7591a62a010a9ca39b6e35ef47f1e42896870bcf9d1e4e9684
+size 4028342

public/assets/videos/real_4.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4c638e95c3c5ca0678c8269390f5e96ce3e9c13c52721c625ce0534ac30039dc
+size 3152333