From 6d781b327b17c2af9d855f829c56266ccfc37957 Mon Sep 17 00:00:00 2001 From: Keep Creating Online Date: Sun, 26 Jan 2025 14:51:34 -0500 Subject: [PATCH] fixed html header issue and forced 16:9 thumbnail aspect --- src/css/style.css | 19 ++++++++ src/index.html | 2 - src/js/app.js | 109 ++++++++++++++++++++++------------------------ 3 files changed, 72 insertions(+), 58 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index e9e8897..4d6ecda 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -472,3 +472,22 @@ footer a:hover { pointer-events: none; } + +/* Create a container that preserves a 16:9 aspect ratio via padding-top. */ +/* Force 16:9 ratio using padding-top technique */ +.ratio-16-9 { + position: relative; + width: 100%; + padding-top: 56.25%; /* 16:9 => 9/16 = 0.5625 => 56.25% */ + background-color: #1e293b; /* fallback background if image doesn't load */ +} + +.ratio-16-9 > img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + diff --git a/src/index.html b/src/index.html index 5e787b5..bb6226b 100644 --- a/src/index.html +++ b/src/index.html @@ -1,6 +1,4 @@ - - diff --git a/src/js/app.js b/src/js/app.js index acc34ff..d55fa90 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -549,26 +549,23 @@ class bitvidApp { } const videoArray = Array.isArray(videos) ? videos : [videos]; - if (videoArray.length === 0) { console.error("VIDEO ARRAY IS EMPTY"); this.videoList.innerHTML = `

No videos available.

`; return; } - // Sort by creation date + // Sort newest first videoArray.sort((a, b) => b.created_at - a.created_at); + // Fetch user profiles const userProfiles = new Map(); const uniquePubkeys = [...new Set(videoArray.map((v) => v.pubkey))]; - - // Fetch user profiles for (const pubkey of uniquePubkeys) { try { const userEvents = await nostrClient.pool.list(nostrClient.relays, [ { kinds: [0], authors: [pubkey], limit: 1 }, ]); - if (userEvents[0]?.content) { const profile = JSON.parse(userEvents[0].content); userProfiles.set(pubkey, { @@ -590,7 +587,7 @@ class bitvidApp { } } - // Build video cards + // Build each video card const renderedVideos = videoArray .map((video, index) => { try { @@ -599,24 +596,24 @@ class bitvidApp { return ""; } - // Create share URL + // Create a share URL const nevent = window.NostrTools.nip19.neventEncode({ id: video.id }); const shareUrl = `${window.location.pathname}?v=${encodeURIComponent(nevent)}`; - // Get profile info + // Gather profile info const profile = userProfiles.get(video.pubkey) || { name: "Unknown", picture: `https://robohash.org/${video.pubkey}`, }; const timeAgo = this.formatTimeAgo(video.created_at); - // Determine edit capability + // Check if user can edit const canEdit = video.pubkey === this.pubkey; const highlightClass = video.isPrivate && canEdit ? "border-2 border-yellow-500" : "border-none"; - // If user can edit, show gear menu + // Gear menu if canEdit const gearMenu = canEdit ? `
@@ -654,78 +651,78 @@ class bitvidApp { ` : ""; - // Main video card + // Build the card HTML return `
- - + + + +
${this.escapeHTML(video.title)} -
- +
+ -
-

- ${this.escapeHTML(video.title)} -

- -
-
-
- ${profile.name} -
-
-

- ${this.escapeHTML(profile.name)} -

-
- ${timeAgo} -
+
+

+ ${this.escapeHTML(video.title)} +

+
+
+
+ ${profile.name} +
+
+

+ ${this.escapeHTML(profile.name)} +

+
+ ${timeAgo}
- ${gearMenu}
+ ${gearMenu}
+
`; - } catch (error) { - console.error(`Error processing video ${index}:`, error); + } catch (err) { + console.error(`Error processing video ${index}:`, err); return ""; } }) .filter((html) => html.length > 0); - console.log("Rendered videos:", renderedVideos.length); - if (renderedVideos.length === 0) { this.videoList.innerHTML = `

No valid videos to display.

`; return;