Update assets/js/all_videos.js

assets/js/all_videos.js

@@ -1,8 +1,6 @@
 // assets/js/all_videos.js
 
 const CSV_PATH = "cleaned_data.csv";
-
-/* >>> DATASET VIDEO BASE <<< */
 const VIDEO_DATASET_BASE =
   "https://huggingface.co/datasets/therarelab/codebook-videos/resolve/main/videos/";
 
@@ -16,18 +14,46 @@ function parseCSV(text) {
   const lines = text.trim().split("\n");
   const header = lines[0].split(",").map(s => s.trim());
   const rows = [];
-
   for (let i = 1; i < lines.length; i++) {
     const cols = lines[i].split(",");
     const obj = {};
-    for (let j = 0; j < header.length; j++) {
-      obj[header[j]] = (cols[j] ?? "").trim();
-    }
+    for (let j = 0; j < header.length; j++) obj[header[j]] = (cols[j] ?? "").trim();
     rows.push(obj);
   }
   return rows;
 }
 
+function makeLoadButtonCell({ filename, label, start, end }) {
+  const video_url = VIDEO_DATASET_BASE + encodeURIComponent(filename);
+
+  const wrap = document.createElement("div");
+  wrap.className = "video-cell";
+
+  // Lightweight placeholder
+  wrap.innerHTML = `
+    <div style="display:flex; flex-direction:column; gap:8px;">
+      <button class="btn" style="width:max-content;">▶ Load clip</button>
+      <div class="note" style="margin:0; opacity:0.85;">
+        Loads video on demand (faster page).
+      </div>
+    </div>
+  `;
+
+  const btn = wrap.querySelector("button");
+  btn.addEventListener("click", () => {
+    // Replace placeholder with actual video
+    wrap.innerHTML = `
+      <video preload="metadata" controls playsinline>
+        <source src="${video_url}" type="video/mp4">
+      </video>
+    `;
+    const videoEl = wrap.querySelector("video");
+    attachLabeledLoop(videoEl, { label, startFrame: start, endFrame: end, fps: DEFAULT_FPS });
+  });
+
+  return wrap;
+}
+
 function render(rows) {
   tbody.innerHTML = "";
 
@@ -47,35 +73,21 @@ function render(rows) {
     shown++;
     uniqueVideos.add(filename);
 
-    const video_url =
-      VIDEO_DATASET_BASE + encodeURIComponent(filename);
-
     const tr = document.createElement("tr");
-
     tr.innerHTML = `
       <td>${filename}</td>
       <td>
         <a href="category.html?cat=${encodeURIComponent(label)}"
-           style="color: var(--accent); text-decoration: none;">
-           ${label}
+           style="color: var(--accent); text-decoration:none;">
+          ${label}
         </a>
       </td>
       <td>${start}-${end}</td>
-      <td class="video-cell">
-        <video preload="metadata" controls>
-          <source src="${video_url}" type="video/mp4">
-        </video>
-      </td>
+      <td></td>
     `;
 
-    const videoEl = tr.querySelector("video");
-
-    attachLabeledLoop(videoEl, {
-      label,
-      startFrame: start,
-      endFrame: end,
-      fps: DEFAULT_FPS
-    });
+    const tdVideo = tr.querySelectorAll("td")[3];
+    tdVideo.appendChild(makeLoadButtonCell({ filename, label, start, end }));
 
     tbody.appendChild(tr);
   }
@@ -93,6 +105,103 @@ fetch(CSV_PATH)
   })
   .catch(err => {
     console.error(err);
-    tbody.innerHTML =
-      `<tr><td colspan="4">Could not load cleaned_data.csv</td></tr>`;
+    tbody.innerHTML = `<tr><td colspan="4">Could not load cleaned_data.csv</td></tr>`;
   });
+
+
+// const CSV_PATH = "cleaned_data.csv";
+
+// /* >>> DATASET VIDEO BASE <<< */
+// const VIDEO_DATASET_BASE =
+//   "https://huggingface.co/datasets/therarelab/codebook-videos/resolve/main/videos/";
+
+// const searchInput = document.getElementById("search");
+// const tbody = document.querySelector("#segmentsTable tbody");
+
+// const rowsCountEl = document.getElementById("rowsCount");
+// const videosCountEl = document.getElementById("videosCount");
+
+// function parseCSV(text) {
+//   const lines = text.trim().split("\n");
+//   const header = lines[0].split(",").map(s => s.trim());
+//   const rows = [];
+
+//   for (let i = 1; i < lines.length; i++) {
+//     const cols = lines[i].split(",");
+//     const obj = {};
+//     for (let j = 0; j < header.length; j++) {
+//       obj[header[j]] = (cols[j] ?? "").trim();
+//     }
+//     rows.push(obj);
+//   }
+//   return rows;
+// }
+
+// function render(rows) {
+//   tbody.innerHTML = "";
+
+//   const q = (searchInput.value || "").toLowerCase().trim();
+//   const uniqueVideos = new Set();
+//   let shown = 0;
+
+//   for (const r of rows) {
+//     const filename = r.filename || "";
+//     const label = r.label || "";
+//     const start = r.start || "";
+//     const end = r.end || "";
+
+//     const hay = `${filename} ${label}`.toLowerCase();
+//     if (q && !hay.includes(q)) continue;
+
+//     shown++;
+//     uniqueVideos.add(filename);
+
+//     const video_url =
+//       VIDEO_DATASET_BASE + encodeURIComponent(filename);
+
+//     const tr = document.createElement("tr");
+
+//     tr.innerHTML = `
+//       <td>${filename}</td>
+//       <td>
+//         <a href="category.html?cat=${encodeURIComponent(label)}"
+//            style="color: var(--accent); text-decoration: none;">
+//            ${label}
+//         </a>
+//       </td>
+//       <td>${start}-${end}</td>
+//       <td class="video-cell">
+//         <video preload="metadata" controls>
+//           <source src="${video_url}" type="video/mp4">
+//         </video>
+//       </td>
+//     `;
+
+//     const videoEl = tr.querySelector("video");
+
+//     attachLabeledLoop(videoEl, {
+//       label,
+//       startFrame: start,
+//       endFrame: end,
+//       fps: DEFAULT_FPS
+//     });
+
+//     tbody.appendChild(tr);
+//   }
+
+//   rowsCountEl.textContent = `${shown} segments`;
+//   videosCountEl.textContent = `${uniqueVideos.size} videos`;
+// }
+
+// fetch(CSV_PATH)
+//   .then(r => r.text())
+//   .then(text => {
+//     const rows = parseCSV(text);
+//     render(rows);
+//     searchInput.addEventListener("input", () => render(rows));
+//   })
+//   .catch(err => {
+//     console.error(err);
+//     tbody.innerHTML =
+//       `<tr><td colspan="4">Could not load cleaned_data.csv</td></tr>`;
+//   });