diff --git a/js/channelProfile.js b/js/channelProfile.js
index 2bbcd26c..3eef1de3 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -8,8 +8,9 @@ import { subscriptions } from "./subscriptions.js"; // <-- NEW import
import { attachHealthBadges } from "./gridHealth.js";
import { attachUrlHealthBadges } from "./urlHealthObserver.js";
import { accessControl } from "./accessControl.js";
-import { escapeHTML } from "./utils/domUtils.js";
import { getApplication } from "./applicationContext.js";
+import { escapeHTML } from "./utils/domUtils.js";
+import { VideoCard } from "./ui/components/VideoCard.js";
import {
calculateZapShares,
describeShareType,
@@ -1704,9 +1705,97 @@ async function loadUserVideos(pubkey) {
container.dataset.hasChannelVideos = "true";
const fragment = document.createDocumentFragment();
const allKnownEventsArray = Array.from(nostrClient.allEvents.values());
+ const loadedThumbnails =
+ app?.loadedThumbnails instanceof Map ? app.loadedThumbnails : null;
+ const unsupportedBtihMessage =
+ typeof app?.getUnsupportedBtihMessage === "function"
+ ? app.getUnsupportedBtihMessage()
+ : "This magnet link is missing a compatible BitTorrent v1 info hash.";
+
+ const extractPlaybackDetail = (trigger, video) => {
+ if (
+ app?.videoListView &&
+ typeof app.videoListView.extractPlaybackDetail === "function"
+ ) {
+ return app.videoListView.extractPlaybackDetail(trigger, video);
+ }
+
+ const element = trigger instanceof HTMLElement ? trigger : null;
+ const target =
+ element?.closest("[data-play-url],[data-play-magnet]") || element;
+
+ const rawUrlValue =
+ (target?.dataset && typeof target.dataset.playUrl === "string"
+ ? target.dataset.playUrl
+ : null) ?? target?.getAttribute?.("data-play-url") ?? "";
+ const rawMagnetValue =
+ (target?.dataset && typeof target.dataset.playMagnet === "string"
+ ? target.dataset.playMagnet
+ : null) ?? target?.getAttribute?.("data-play-magnet") ?? "";
+
+ let url = "";
+ if (rawUrlValue) {
+ try {
+ url = decodeURIComponent(rawUrlValue);
+ } catch (error) {
+ url = rawUrlValue;
+ }
+ }
+
+ const magnet = typeof rawMagnetValue === "string" ? rawMagnetValue : "";
+ const videoId =
+ target?.dataset?.videoId ||
+ target?.getAttribute?.("data-video-id") ||
+ video?.id ||
+ "";
+
+ return { videoId, url, magnet, video };
+ };
+
+ const playbackHandler =
+ typeof app?.videoListViewPlaybackHandler === "function"
+ ? app.videoListViewPlaybackHandler.bind(app)
+ : null;
+
+ const startPlayback = (detail) => {
+ if (playbackHandler) {
+ playbackHandler(detail);
+ return;
+ }
+
+ if (detail.videoId && typeof app?.playVideoByEventId === "function") {
+ Promise.resolve(
+ app.playVideoByEventId(detail.videoId, {
+ url: detail.url,
+ magnet: detail.magnet,
+ title: detail.video?.title,
+ description: detail.video?.description,
+ })
+ ).catch((error) => {
+ console.error("Failed to play channel video via event id:", error);
+ if (typeof app?.playVideoWithFallback === "function") {
+ app.playVideoWithFallback({
+ url: detail.url,
+ magnet: detail.magnet,
+ });
+ }
+ });
+ return;
+ }
+
+ if (typeof app?.playVideoWithFallback === "function") {
+ Promise.resolve(
+ app.playVideoWithFallback({ url: detail.url, magnet: detail.magnet })
+ ).catch((error) => {
+ console.error(
+ "Failed to start fallback playback for channel video:",
+ error
+ );
+ });
+ }
+ };
videos.forEach((video, index) => {
- // Decrypt if user owns a private video
if (
video.isPrivate &&
video.pubkey === nostrClient.pubkey &&
@@ -1716,304 +1805,118 @@ async function loadUserVideos(pubkey) {
video.alreadyDecrypted = true;
}
- // Ensure the global videos map is kept up to date so delegated handlers
- // have the freshest metadata for this event.
app?.videosMap?.set(video.id, video);
- // Check if user can edit
const canEdit = video.pubkey === app.pubkey;
let hasOlder = false;
if (canEdit && video.videoRootId) {
hasOlder = app.hasOlderVersion(video, allKnownEventsArray);
}
- const revertButton = hasOlder
- ? `
-
- `
- : "";
-
- let gearMenu = "";
- if (canEdit) {
- gearMenu = `
-
-
-
-
-
- ${revertButton}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${moreMenu}${gearMenu}
-
- `;
-
- // Fallback thumbnail
- const fallbackThumb = "assets/jpg/video-thumbnail-fallback.jpg";
- const safeThumb = video.thumbnail || fallbackThumb;
- const safeTitle = escapeHTML(video.title);
-
- const cardEl = document.createElement("div");
- cardEl.classList.add(
- "video-card",
- "bg-gray-900",
- "rounded-lg",
- "overflow-hidden",
- "shadow-lg",
- "hover:shadow-2xl",
- "transition-all",
- "duration-300"
- );
-
- cardEl.dataset.ownerIsViewer = canEdit ? "true" : "false";
- if (typeof video.pubkey === "string" && video.pubkey) {
- cardEl.dataset.ownerPubkey = video.pubkey;
- } else if (cardEl.dataset.ownerPubkey) {
- delete cardEl.dataset.ownerPubkey;
- }
- if (typeof video.id === "string" && video.id) {
- cardEl.dataset.videoId = video.id;
- } else if (cardEl.dataset.videoId) {
- delete cardEl.dataset.videoId;
- }
-
- const rawMagnet =
- typeof video.magnet === "string" ? video.magnet : "";
- const trimmedMagnet = rawMagnet ? rawMagnet.trim() : "";
- const legacyInfoHash =
- typeof video.infoHash === "string" ? video.infoHash.trim() : "";
- const playbackUrl =
- typeof video.url === "string" ? video.url : "";
- const trimmedUrl = playbackUrl ? playbackUrl.trim() : "";
- const playbackMagnet = trimmedMagnet || legacyInfoHash || "";
- const magnetProvided = playbackMagnet.length > 0;
- const magnetSupported = app.isMagnetUriSupported(playbackMagnet);
- const showUnsupportedTorrentBadge =
- !trimmedUrl && magnetProvided && !magnetSupported;
- const urlBadgeHtml = trimmedUrl
- ? app.getUrlHealthPlaceholderMarkup({ includeMargin: false })
- : "";
- const torrentHealthBadgeHtml =
- magnetSupported && magnetProvided
- ? app.getTorrentHealthBadgeMarkup({ includeMargin: false })
- : "";
- const connectionBadgesHtml =
- urlBadgeHtml || torrentHealthBadgeHtml
- ? `
-
- ${urlBadgeHtml}${torrentHealthBadgeHtml}
-
- `
- : "";
-
- cardEl.innerHTML = `
-
-
-
-
-
-
-
-
- ${safeTitle}
-
-
- ${new Date(video.created_at * 1000).toLocaleString()}
-
-
- ${cardControls}
-
- ${connectionBadgesHtml}
-