Update assets/js/all_videos.js

assets/js/all_videos.js

@@ -1,6 +1,8 @@
 // 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/";
 
@@ -14,46 +16,18 @@ 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 = "";
 
@@ -73,21 +47,35 @@ 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></td>
+      <td class="video-cell">
+        <video preload="metadata" controls>
+          <source src="${video_url}" type="video/mp4">
+        </video>
+      </td>
     `;
 
-    const tdVideo = tr.querySelectorAll("td")[3];
-    tdVideo.appendChild(makeLoadButtonCell({ filename, label, start, end }));
+    const videoEl = tr.querySelector("video");
+
+    attachLabeledLoop(videoEl, {
+      label,
+      startFrame: start,
+      endFrame: end,
+      fps: DEFAULT_FPS
+    });
 
     tbody.appendChild(tr);
   }
@@ -105,103 +93,6 @@ 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>`;
-//   });