update

refactoring/js/components/VideoList.js

@@ -0,0 +1,285 @@
+// js/components/VideoList.js
+import { nostrClient } from "../nostr.js";
+import { formatTimeAgo } from "../utils/timeUtils.js";
+import { escapeHTML } from "../utils/htmlUtils.js";
+
+export class VideoList {
+  constructor() {
+    this.videoList = document.getElementById("videoList");
+    this.pubkey = null; // We'll need this for private video filtering
+  }
+
+  setPubkey(pubkey) {
+    this.pubkey = pubkey;
+  }
+
+  async loadVideos() {
+    console.log("Starting loadVideos...");
+    try {
+      const videos = await nostrClient.fetchVideos();
+      console.log("Raw videos from nostrClient:", videos);
+
+      if (!videos) {
+        console.log("No videos received");
+        throw new Error("No videos received from relays");
+      }
+
+      // Convert to array if not already
+      const videosArray = Array.isArray(videos) ? videos : [videos];
+
+      // Filter private videos
+      const displayedVideos = videosArray.filter((video) => {
+        if (!video.isPrivate) {
+          return true;
+        }
+        return this.pubkey && video.pubkey === this.pubkey;
+      });
+
+      if (displayedVideos.length === 0) {
+        console.log("No valid videos found after filtering.");
+        this.renderEmptyState(
+          "No public videos available yet. Be the first to upload one!"
+        );
+        return;
+      }
+
+      console.log("Processing filtered videos:", displayedVideos);
+      await this.renderVideoList(displayedVideos);
+      console.log(`Rendered ${displayedVideos.length} videos successfully`);
+    } catch (error) {
+      console.log("Failed to fetch videos:", error);
+      this.renderEmptyState(
+        "No videos available at the moment. Please try again later."
+      );
+    }
+  }
+
+  renderEmptyState(message) {
+    if (this.videoList) {
+      this.videoList.innerHTML = `
+        <p class="text-center text-gray-500">
+            ${escapeHTML(message)}
+        </p>`;
+    }
+  }
+
+  async renderVideoList(videos) {
+    try {
+      console.log("RENDER VIDEO LIST - Start", {
+        videosReceived: videos,
+        videosCount: videos ? videos.length : "N/A",
+        videosType: typeof videos,
+      });
+
+      if (!videos || videos.length === 0) {
+        this.renderEmptyState("No videos found.");
+        return;
+      }
+
+      // Sort by creation date
+      const videoArray = [...videos].sort(
+        (a, b) => b.created_at - a.created_at
+      );
+
+      // Fetch user profiles
+      const userProfiles = await this.fetchUserProfiles(videoArray);
+
+      // Build HTML for each video
+      const renderedVideos = videoArray
+        .map((video, index) => this.renderVideoCard(video, index, userProfiles))
+        .filter(Boolean);
+
+      if (renderedVideos.length === 0) {
+        this.renderEmptyState("No valid videos to display.");
+        return;
+      }
+
+      this.videoList.innerHTML = renderedVideos.join("");
+      console.log("Videos rendered successfully");
+    } catch (error) {
+      console.error("Rendering error:", error);
+      this.renderEmptyState("Error loading videos.");
+    }
+  }
+
+  async fetchUserProfiles(videos) {
+    const userProfiles = new Map();
+    const uniquePubkeys = [...new Set(videos.map((v) => v.pubkey))];
+
+    for (const pubkey of uniquePubkeys) {
+      try {
+        const profile = await nostrClient.fetchUserProfile(pubkey);
+        userProfiles.set(pubkey, profile);
+      } catch (error) {
+        console.error(`Profile fetch error for ${pubkey}:`, error);
+        userProfiles.set(pubkey, {
+          name: "Unknown",
+          picture: `https://robohash.org/${pubkey}`,
+        });
+      }
+    }
+
+    return userProfiles;
+  }
+
+  renderVideoCard(video, index, userProfiles) {
+    try {
+      if (!this.validateVideo(video, index)) {
+        console.error(`Invalid video: ${video.title}`);
+        return "";
+      }
+
+      const profile = userProfiles.get(video.pubkey) || {
+        name: "Unknown",
+        picture: `https://robohash.org/${video.pubkey}`,
+      };
+
+      const canEdit = video.pubkey === this.pubkey;
+      const highlightClass =
+        video.isPrivate && canEdit
+          ? "border-2 border-yellow-500"
+          : "border-none";
+
+      return `
+        <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
+            ${this.renderThumbnail(video)}
+            ${this.renderCardInfo(video, profile)}
+        </div>
+      `;
+    } catch (error) {
+      console.error(`Error processing video ${index}:`, error);
+      return "";
+    }
+  }
+
+  renderThumbnail(video) {
+    return `
+      <div 
+        class="aspect-w-16 aspect-h-9 bg-gray-800 cursor-pointer relative group"
+        onclick="window.app.playVideo('${encodeURIComponent(video.magnet)}')"
+      >
+        ${
+          video.thumbnail
+            ? this.renderThumbnailImage(video)
+            : this.renderPlaceholderThumbnail()
+        }
+        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-opacity duration-300"></div>
+      </div>
+    `;
+  }
+
+  renderThumbnailImage(video) {
+    return `
+      <img
+        src="${escapeHTML(video.thumbnail)}"
+        alt="${escapeHTML(video.title)}"
+        class="w-full h-full object-cover"
+      >
+    `;
+  }
+
+  renderPlaceholderThumbnail() {
+    return `
+      <div class="flex items-center justify-center h-full bg-gray-800">
+        <svg class="w-16 h-16 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </div>
+    `;
+  }
+
+  renderCardInfo(video, profile) {
+    const timeAgo = formatTimeAgo(video.created_at);
+    const canEdit = video.pubkey === this.pubkey;
+
+    return `
+      <div class="p-4">
+        <h3 class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
+            onclick="window.app.playVideo('${encodeURIComponent(
+              video.magnet
+            )}')">
+          ${escapeHTML(video.title)}
+        </h3>
+        
+        <div class="flex items-center justify-between">
+          <div class="flex items-center space-x-3">
+            <div class="w-8 h-8 rounded-full bg-gray-700 overflow-hidden">
+              <img src="${escapeHTML(profile.picture)}"
+                   alt="${profile.name}"
+                   class="w-full h-full object-cover">
+            </div>
+            <div class="min-w-0">
+              <p class="text-sm text-gray-400 hover:text-gray-300 cursor-pointer">
+                ${escapeHTML(profile.name)}
+              </p>
+              <div class="flex items-center text-xs text-gray-500 mt-1">
+                <span>${timeAgo}</span>
+              </div>
+            </div>
+          </div>
+          ${this.renderGearMenu(video, canEdit)}
+        </div>
+      </div>
+    `;
+  }
+
+  renderGearMenu(video, canEdit) {
+    if (!canEdit) return "";
+
+    return `
+      <div class="relative inline-block ml-3 overflow-visible">
+        <button type="button"
+                class="inline-flex items-center p-2 rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onclick="document.getElementById('settingsDropdown-${video.id}').classList.toggle('hidden')">
+          <img src="assets/svg/video-settings-gear.svg" 
+               alt="Settings"
+               class="w-5 h-5"/>
+        </button>
+        <div id="settingsDropdown-${video.id}"
+             class="hidden absolute right-0 bottom-full mb-2 w-32 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50">
+          <div class="py-1">
+            <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                    onclick="app.handleEditVideo('${video.id}'); document.getElementById('settingsDropdown-${video.id}').classList.add('hidden');">
+              Edit
+            </button>
+            <button class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
+                    onclick="app.handleDeleteVideo('${video.id}'); document.getElementById('settingsDropdown-${video.id}').classList.add('hidden');">
+              Delete
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  validateVideo(video, index) {
+    const validationResults = {
+      hasId: Boolean(video?.id),
+      isValidId: typeof video?.id === "string" && video.id.trim().length > 0,
+      hasVideo: Boolean(video),
+      hasTitle: Boolean(video?.title),
+      hasMagnet: Boolean(video?.magnet),
+      hasMode: Boolean(video?.mode),
+      hasPubkey: Boolean(video?.pubkey),
+      isValidTitle: typeof video?.title === "string" && video.title.length > 0,
+      isValidMagnet:
+        typeof video?.magnet === "string" && video.magnet.length > 0,
+      isValidMode:
+        typeof video?.mode === "string" && ["dev", "live"].includes(video.mode),
+    };
+
+    const passed = Object.values(validationResults).every(Boolean);
+    console.log(
+      `Video ${video?.title} validation results:`,
+      validationResults,
+      passed ? "PASSED" : "FAILED"
+    );
+
+    return passed;
+  }
+}
+
+export const videoList = new VideoList();