diff --git a/deps/yt-dlp b/deps/yt-dlp index 8e14c7b..56d8482 100644 --- a/deps/yt-dlp +++ b/deps/yt-dlp @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:79f572051557f529eaeba0d1c0b7093cb7a8e24686d51af7cb8ffb067dd7f457 -size 36374704 +oid sha256:0e8bc5558efce5ae2a6397710eed72fd8d434e45904e4fe029dd21c610a95d4d +size 3062048 diff --git a/deps/yt-dlp.exe b/deps/yt-dlp.exe index f0e37dd..f73cd34 100644 --- a/deps/yt-dlp.exe +++ b/deps/yt-dlp.exe @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c35921a051770047211b522af957e65a3eb4f788572533b4ce6b67b619b2a443 -size 18108627 +oid sha256:5374c46da65bbe661d3220a23646c785c3e53264485edc31436e8dba3889337c +size 18136476 diff --git a/deps/yt-dlp_linux_aarch64 b/deps/yt-dlp_linux_aarch64 index a4c456e..4d6c042 100644 --- a/deps/yt-dlp_linux_aarch64 +++ b/deps/yt-dlp_linux_aarch64 @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ad4d96f81dd175d43f5fe8387b4b96225a047d502b0fc070b4943534d7c25a79 -size 18988968 +oid sha256:ada3ea834ae8ec91b30f1bcdeb85aba7453aa75373bad1b834b8977ed1350eac +size 19025728 diff --git a/deps/yt-dlp_linux_armv7l b/deps/yt-dlp_linux_armv7l index be3a2e9..a03cf10 100644 --- a/deps/yt-dlp_linux_armv7l +++ b/deps/yt-dlp_linux_armv7l @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d1a267d441f2d4ba8c55df405f1e109f60e17519489ced7f12046b72cd186d25 -size 17954792 +oid sha256:aea0355239a7e7f9778492d515ea6e77f71a4f035b2a2f352518bb5a7ed8bfdb +size 17990008 diff --git a/public/index.html b/public/index.html index a4c836f..5ac94cd 100644 --- a/public/index.html +++ b/public/index.html @@ -1,186 +1,180 @@ - - - - Repiped - - - - - - - -
-
-
+ -
-
-
- - -
+
+
+

Search Results

+ 0 results
- -
-
-

Search Results

- 0 results -
-
-
-
-
- +
+
+
+
+
-
-
-
- Channel banner +
+
+
+ Channel banner +
+
+
+ Channel avatar
-
-
- Channel avatar +
+
+

+
-
-
-

- -
-
- -
-
+
+
+
- -
-
-
-
- - +
+
+
+
+
+ +
- - - - - + + + + + + \ No newline at end of file diff --git a/public/trending.js b/public/script.js similarity index 58% rename from public/trending.js rename to public/script.js index 93af7a7..d4a3039 100644 --- a/public/trending.js +++ b/public/script.js @@ -1,7 +1,23 @@ document.addEventListener("DOMContentLoaded", () => { + const overlay = document.createElement("div"); + overlay.id = "transition-overlay"; + overlay.className = "transition-overlay"; + document.body.appendChild(overlay); + + let activeVideoId = null; + let prepareInProgress = false; + let activeWs = null; + let hlsInstance = null; + let previousPage = "trending-page"; + let lastSearchQuery = ""; + let activeChannelId = null; + let channelNextPageData = null; + let isLoadingMoreVideos = false; + const trendingPage = document.getElementById("trending-page"); const searchResultsPage = document.getElementById("search-results-page"); const channelPage = document.getElementById("channel-page"); + const videoPlayerPage = document.getElementById("video-player-page"); const trendingGrid = document.getElementById("trending-grid"); const trendingLoader = document.getElementById("trending-loader"); const searchGrid = document.getElementById("search-grid"); @@ -10,6 +26,8 @@ document.addEventListener("DOMContentLoaded", () => { const searchCountText = document.getElementById("search-count"); const searchInput = document.getElementById("search-input"); const searchButton = document.getElementById("search-button"); + const relatedGrid = document.getElementById("related-grid"); + const playerWrapper = document.getElementById("player-wrapper"); const logo = document.getElementById("logo"); const channelVideosGrid = document.getElementById("channel-videos-grid"); const channelLoader = document.getElementById("channel-loader"); @@ -21,49 +39,60 @@ document.addEventListener("DOMContentLoaded", () => { const channelSubs = document.getElementById("channel-subs"); const channelDescription = document.getElementById("channel-description"); + const preparationOverlay = document.getElementById("preparation-overlay"); + const preparationStatus = document.getElementById("preparation-status"); + const preparationProgressBar = document.getElementById( + "preparation-progress-bar" + ); + + const detailTitle = document.getElementById("detail-title"); + const detailAvatar = document.getElementById("detail-avatar"); + const detailUploader = document.getElementById("detail-uploader"); + const detailUploaded = document.getElementById("detail-uploaded"); + const detailViews = document.getElementById("detail-views"); + const detailDuration = document.getElementById("detail-duration"); + const detailDescription = document.getElementById("detail-description"); + + let player = null; + const videoCardTemplate = document.getElementById("video-card-template"); const skeletonTemplate = document.getElementById("skeleton-template"); - let lastSearchQuery = ""; - let activeChannelId = null; - let channelNextPageData = null; - let isLoadingMoreVideos = false; - const trendingApiUrl = "/api/trending"; const searchApiUrl = "/api/search"; + const wsProcotol = window.location.protocol === "https:" ? "wss://" : "ws://"; + const wsBaseUrl = wsProcotol + window.location.host + "/api/v1/prepare"; + const reloadButton = document.getElementById("reload-button"); - function formatViews(views) { - if (views >= 1000000) { - return `${(views / 1000000).toFixed(1)}M`; - } else if (views >= 1000) { - return `${(views / 1000).toFixed(1)}K`; - } else { - return views.toString(); + reloadButton.addEventListener("click", () => { + window.location.reload(); + }); + + function switchPage(fromPageId, toPageId) { + const fromPage = document.getElementById(fromPageId); + const toPage = document.getElementById(toPageId); + + if (!fromPage || !toPage) return; + + if (toPageId !== "video-player-page") { + previousPage = fromPageId; } - } - function formatDuration(seconds) { - const hours = Math.floor(seconds / 3600); - const minutes = Math.floor((seconds % 3600) / 60); - const secs = seconds % 60; + fromPage.classList.add("zoom-out"); - if (hours > 0) { - return `${hours}:${minutes.toString().padStart(2, "0")}:${secs - .toString() - .padStart(2, "0")}`; - } else { - return `${minutes}:${secs.toString().padStart(2, "0")}`; - } - } + setTimeout(() => { + fromPage.classList.remove("active"); + fromPage.classList.remove("zoom-out"); - function formatSubscribers(count) { - if (count >= 1000000) { - return `${(count / 1000000).toFixed(1)}M subscribers`; - } else if (count >= 1000) { - return `${(count / 1000).toFixed(1)}K subscribers`; - } else { - return `${count} subscribers`; - } + toPage.classList.add("zoom-in"); + toPage.classList.add("active"); + + requestAnimationFrame(() => { + requestAnimationFrame(() => { + toPage.classList.remove("zoom-in"); + }); + }); + }, 300); } function getHashParams() { @@ -96,45 +125,118 @@ document.addEventListener("DOMContentLoaded", () => { } } - function switchPage(fromPageId, toPageId) { - const fromPage = document.getElementById(fromPageId); - const toPage = document.getElementById(toPageId); + function cleanupResources() { + if (activeWs && activeWs.readyState === WebSocket.OPEN) { + activeWs.close(); + activeWs = null; + } - if (!fromPage || !toPage) return; + if (hlsInstance) { + hlsInstance.destroy(); + hlsInstance = null; + } - fromPage.classList.add("zoom-out"); + if (player) { + player.destroy(); + player = null; + } - setTimeout(() => { - fromPage.classList.remove("active"); - fromPage.classList.remove("zoom-out"); - - toPage.classList.add("zoom-in"); - toPage.classList.add("active"); - - requestAnimationFrame(() => { - requestAnimationFrame(() => { - toPage.classList.remove("zoom-in"); - }); - }); - }, 300); + prepareInProgress = false; } - function showSkeletons(container, count = 12) { - container.innerHTML = ""; - for (let i = 0; i < count; i++) { - const skeleton = skeletonTemplate.content.cloneNode(true); - skeleton.firstElementChild.style.animationDelay = `${i * 0.05}s`; - container.appendChild(skeleton); + function getVideoElement() { + const existingVideo = playerWrapper.querySelector("video"); + if (existingVideo) { + existingVideo.remove(); } - container.style.display = "grid"; - if (container === trendingGrid) { + const videoElement = document.createElement("video"); + videoElement.id = "video-player"; + videoElement.setAttribute("controls", ""); + videoElement.setAttribute("crossorigin", ""); + videoElement.setAttribute("playsinline", ""); + + playerWrapper.appendChild(videoElement); + + return videoElement; + } + + async function fetchVideoDetails(videoId) { + try { + if (videoId === activeVideoId) { + return; + } + + activeVideoId = videoId; + + trendingLoader.style.display = "flex"; + + const response = await fetch(trendingApiUrl); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + + const videos = await response.json(); + const video = videos.find((v) => v.url.includes(videoId)); + + if (video) { + openVideoPlayer(video); + } else { + console.error("Video not found in trending"); + trendingLoader.style.display = "none"; + alert("Video not found. Showing trending videos instead."); + goToTrendingPage(); + } + } catch (error) { + console.error("Error fetching video details:", error); trendingLoader.style.display = "none"; - } else if (container === searchGrid) { - searchLoader.style.display = "none"; } } + function goToTrendingPage() { + cleanupResources(); + + activeVideoId = null; + + activeChannelId = null; + + updateHash(); + + if (videoPlayerPage.classList.contains("active")) { + switchPage("video-player-page", "trending-page"); + } else if (searchResultsPage.classList.contains("active")) { + switchPage("search-results-page", "trending-page"); + } else if (channelPage.classList.contains("active")) { + switchPage("channel-page", "trending-page"); + } + + fetchTrendingVideos(); + } + + function checkInitialHash() { + const params = getHashParams(); + if (params.videoId) { + fetchVideoDetails(params.videoId); + } else if (params.search) { + performSearch(params.search); + } else if (params.channelId) { + fetchChannelData(params.channelId); + } + } + + window.addEventListener("hashchange", () => { + const params = getHashParams(); + if (params.videoId) { + fetchVideoDetails(params.videoId); + } else if (params.search) { + performSearch(params.search); + } else if (params.channelId) { + fetchChannelData(params.channelId); + } else { + goToTrendingPage(); + } + }); + const observeElements = () => { const observer = new IntersectionObserver( (entries) => { @@ -159,12 +261,81 @@ document.addEventListener("DOMContentLoaded", () => { }); }; - function openVideoPlayer(video) { - sessionStorage.setItem("currentVideo", JSON.stringify(video)); - sessionStorage.setItem("lastSearchQuery", lastSearchQuery); + function formatViews(views) { + if (views >= 1000000) { + return `${(views / 1000000).toFixed(1)}M`; + } else if (views >= 1000) { + return `${(views / 1000).toFixed(1)}K`; + } else { + return views.toString(); + } + } - const videoId = video.url.replace("/watch?v=", ""); - window.location.href = `video.html?v=${videoId}`; + function showSkeletons(container, count = 12) { + container.innerHTML = ""; + for (let i = 0; i < count; i++) { + const skeleton = skeletonTemplate.content.cloneNode(true); + skeleton.firstElementChild.style.animationDelay = `${i * 0.05}s`; + container.appendChild(skeleton); + } + container.style.display = "grid"; + + if (container === trendingGrid) { + trendingLoader.style.display = "none"; + } else if (container === searchGrid) { + searchLoader.style.display = "none"; + } + } + + function formatDuration(seconds) { + const hours = Math.floor(seconds / 3600); + const minutes = Math.floor((seconds % 3600) / 60); + const secs = seconds % 60; + + if (hours > 0) { + return `${hours}:${minutes.toString().padStart(2, "0")}:${secs + .toString() + .padStart(2, "0")}`; + } else { + return `${minutes}:${secs.toString().padStart(2, "0")}`; + } + } + + function formatUploadTime(timestamp) { + const now = new Date(); + const uploadDate = new Date(timestamp); + const diffMs = now - uploadDate; + const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); + + if (diffDays < 1) { + const diffHours = Math.floor(diffMs / (1000 * 60 * 60)); + if (diffHours < 1) { + const diffMinutes = Math.floor(diffMs / (1000 * 60)); + return `${diffMinutes} minutes ago`; + } + return `${diffHours} hours ago`; + } else if (diffDays < 7) { + return `${diffDays} days ago`; + } else if (diffDays < 30) { + const diffWeeks = Math.floor(diffDays / 7); + return `${diffWeeks} weeks ago`; + } else if (diffDays < 365) { + const diffMonths = Math.floor(diffDays / 30); + return `${diffMonths} months ago`; + } else { + const diffYears = Math.floor(diffDays / 365); + return `${diffYears} years ago`; + } + } + + function formatSubscribers(count) { + if (count >= 1000000) { + return `${(count / 1000000).toFixed(1)}M subscribers`; + } else if (count >= 1000) { + return `${(count / 1000).toFixed(1)}K subscribers`; + } else { + return `${count} subscribers`; + } } function createVideoCard(video, index) { @@ -204,7 +375,8 @@ document.addEventListener("DOMContentLoaded", () => { uploadTime.textContent = video.uploadedDate || "Unknown date"; videoCard.style.animationDelay = `${index * 0.05}s`; - videoCard.addEventListener("click", async (e) => { + + videoCard.addEventListener("click", (e) => { if ( e.target === uploaderAvatar || e.target === uploaderName || @@ -212,19 +384,17 @@ document.addEventListener("DOMContentLoaded", () => { ) { e.stopPropagation(); if (video.uploaderUrl) { - const username = video.uploaderUrl; - openChannelPage(username); + openChannelPage(video.uploaderUrl.replace("/channel/", "")); } } else { openVideoPlayer(video); } }); - uploader.addEventListener("click", async (e) => { + uploader.addEventListener("click", (e) => { e.stopPropagation(); if (video.uploaderUrl) { - const username = video.uploaderUrl; - openChannelPage(username); + openChannelPage(video.uploaderUrl.replace("/channel/", "")); } }); } catch (error) { @@ -246,8 +416,6 @@ document.addEventListener("DOMContentLoaded", () => { const videos = await response.json(); - sessionStorage.setItem("trendingVideos", JSON.stringify(videos)); - showSkeletons(trendingGrid); setTimeout(() => { @@ -268,12 +436,12 @@ document.addEventListener("DOMContentLoaded", () => { trendingLoader.style.display = "none"; trendingGrid.style.display = "block"; trendingGrid.innerHTML = ` -
- -

Failed to load videos

-

Please try again later.

-
- `; +
+ +

Error loading videos. Please try again later.

+

${error.message}

+
+ `; } } @@ -281,10 +449,13 @@ document.addEventListener("DOMContentLoaded", () => { if (!query || query.trim() === "") return; lastSearchQuery = query.trim(); + updateHash({ search: lastSearchQuery }); if (trendingPage.classList.contains("active")) { switchPage("trending-page", "search-results-page"); + } else if (videoPlayerPage.classList.contains("active")) { + switchPage("video-player-page", "search-results-page"); } else if (channelPage.classList.contains("active")) { switchPage("channel-page", "search-results-page"); } @@ -313,11 +484,8 @@ document.addEventListener("DOMContentLoaded", () => { ? searchData.items.filter((item) => item.type === "stream") : []; - sessionStorage.setItem("searchResults", JSON.stringify(results)); - console.log( - `Found ${results.length} video results out of ${ - searchData.items ? searchData.items.length : 0 + `Found ${results.length} video results out of ${searchData.items ? searchData.items.length : 0 } total items` ); @@ -327,12 +495,11 @@ document.addEventListener("DOMContentLoaded", () => { searchLoader.style.display = "none"; searchGrid.style.display = "block"; searchGrid.innerHTML = ` -
- -

No videos found

-

No video results found for "${lastSearchQuery}"

-
- `; +
+ +

No video results found for "${lastSearchQuery}"

+
+ `; } else { showSkeletons(searchGrid, Math.min(12, results.length)); @@ -352,35 +519,221 @@ document.addEventListener("DOMContentLoaded", () => { searchLoader.style.display = "none"; searchGrid.style.display = "block"; searchGrid.innerHTML = ` -
- -

Search failed

-

Error searching videos. Please try again later.

-
- `; +
+ +

Error searching videos. Please try again later.

+

${error.message}

+
+ `; } } - function goToTrendingPage() { - updateHash(); + function initializePlayer(streamUrl) { + const videoElement = getVideoElement(); - if (searchResultsPage.classList.contains("active")) { - switchPage("search-results-page", "trending-page"); + if (player) { + player.destroy(); + } + + player = new Plyr(videoElement, { + controls: [ + "play-large", + "play", + "progress", + "current-time", + "mute", + "volume", + "settings", + "pip", + "airplay", + "fullscreen", + ], + settings: ["captions", "quality", "speed"], + tooltips: { controls: true, seek: true }, + keyboard: { focused: true, global: true }, + }); + + if (videoElement.canPlayType("application/vnd.apple.mpegurl")) { + videoElement.src = streamUrl; + } else if (Hls.isSupported()) { + if (hlsInstance) { + hlsInstance.destroy(); + } + + hlsInstance = new Hls({ + maxBufferLength: 30, + maxMaxBufferLength: 60, + }); + + hlsInstance.loadSource(streamUrl); + hlsInstance.attachMedia(videoElement); + + hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => { + videoElement.play().catch((e) => { + console.warn("Autoplay prevented:", e); + }); + }); + } else { + console.error("HLS is not supported in this browser"); + preparationStatus.textContent = + "Your browser does not support HLS playback"; + } + } + + function prepareVideo(videoId) { + if (prepareInProgress) { + return; + } + + prepareInProgress = true; + + preparationOverlay.style.display = "flex"; + preparationStatus.textContent = "Preparing video..."; + preparationProgressBar.style.width = "0%"; + + const cleanVideoId = videoId.replace("/watch?v=", ""); + + if (activeWs && activeWs.readyState === WebSocket.OPEN) { + activeWs.close(); + } + + activeWs = new WebSocket(wsBaseUrl); + + activeWs.onopen = () => { + activeWs.send(JSON.stringify({ videoId: cleanVideoId })); + }; + + activeWs.onmessage = (event) => { + const data = JSON.parse(event.data); + + if (data.ok === "true") { + preparationStatus.textContent = "Connection established..."; + } else if (data.preparing !== undefined) { + const percentage = parseFloat(data.preparing); + preparationProgressBar.style.width = `${percentage}%`; + preparationStatus.textContent = `Preparing video... ${percentage.toFixed( + 0 + )}%`; + } else if (data.done && data.streamUrl) { + preparationStatus.textContent = "Video ready! Starting playback..."; + preparationProgressBar.style.width = "100%"; + + setTimeout(() => { + preparationOverlay.style.display = "none"; + + initializePlayer(data.streamUrl); + + prepareInProgress = false; + }, 500); + + activeWs.close(); + activeWs = null; + } else { + preparationStatus.textContent = "Video playback failed. Reloading the page fixes this."; + preparationProgressBar.style.width = "100%"; + } + }; + + activeWs.onerror = (error) => { + console.error("WebSocket error:", error); + preparationStatus.textContent = + "Error preparing video. Please try again."; + prepareInProgress = false; + + setTimeout(() => { + preparationOverlay.style.display = "none"; + }, 3000); + }; + + activeWs.onclose = () => { + console.log("WebSocket connection closed"); + if (activeWs === activeWs) { + activeWs = null; + } + }; + } + + function openVideoPlayer(video) { + cleanupResources(); + + detailTitle.textContent = video.title; + detailAvatar.src = video.uploaderAvatar; + detailUploader.textContent = video.uploaderName; + detailUploaded.textContent = video.uploadedDate; + detailViews.textContent = formatViews(video.views); + detailDuration.textContent = formatDuration(video.duration); + detailDescription.textContent = + video.shortDescription || "No description available"; + + const videoDetailUploader = document.querySelector( + ".video-detail-uploader" + ); + if (videoDetailUploader) { + videoDetailUploader.style.cursor = "pointer"; + videoDetailUploader.addEventListener("click", () => { + if (video.uploaderUrl) { + openChannelPage(video.uploaderUrl.replace("/channel/", "")); + } + }); + } + + if (trendingPage.classList.contains("active")) { + switchPage("trending-page", "video-player-page"); + } else if (searchResultsPage.classList.contains("active")) { + switchPage("search-results-page", "video-player-page"); } else if (channelPage.classList.contains("active")) { - switchPage("channel-page", "trending-page"); + switchPage("channel-page", "video-player-page"); } - fetchTrendingVideos(); + window.scrollTo(0, 0); + + const videoId = video.url.replace("/watch?v=", ""); + updateHash({ videoId }); + + activeVideoId = videoId; + + prepareVideo(video.url); + + fetchRelatedVideos(video); } + + async function fetchRelatedVideos(currentVideo) { + try { + const response = await fetch(trendingApiUrl); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + + let videos = await response.json(); + + videos = videos + .filter((video) => video.url !== currentVideo.url) + .slice(0, 8); + + relatedGrid.innerHTML = ""; + + videos.forEach((video, index) => { + const card = createVideoCard(video, index); + if (card) { + relatedGrid.appendChild(card); + } + }); + + observeElements(); + } catch (error) { + console.error("Error fetching related videos:", error); + relatedGrid.innerHTML = `

Error loading related videos.

`; + } + } + async function fetchChannelData(channelId) { try { - const resolvedChannelId = await resolveChannelId(channelId); - - if (resolvedChannelId === activeChannelId) { + if (channelId === activeChannelId) { return; } - activeChannelId = resolvedChannelId; + activeChannelId = channelId; + channelNextPageData = null; updateHash({ channelId }); @@ -389,6 +742,8 @@ document.addEventListener("DOMContentLoaded", () => { switchPage("trending-page", "channel-page"); } else if (searchResultsPage.classList.contains("active")) { switchPage("search-results-page", "channel-page"); + } else if (videoPlayerPage.classList.contains("active")) { + switchPage("video-player-page", "channel-page"); } channelLoader.style.display = "flex"; @@ -401,23 +756,11 @@ document.addEventListener("DOMContentLoaded", () => { channelAvatar.src = ""; channelBanner.src = ""; channelVerified.style.display = "none"; - let finalChannelId = channelId; - if (!channelId.startsWith("UC")) { - const url = `/api/channel/${channelId}`; - console.log(`Resolving channel ID from: ${url}`); + const url = `https://pipedapi.wireway.ch/channel/${channelId}`; + console.log(`Fetching channel data from: ${url}`); - const idResponse = await fetch(url); - if (!idResponse.ok) { - throw new Error(`Network response was not ok: ${idResponse.status}`); - } - const idData = await idResponse.json(); - finalChannelId = idData.channelId; - } - - const pipedUrl = `https://pipedapi.wireway.ch/channel/${finalChannelId}`; - console.log(`Fetching channel data from: ${pipedUrl}`); - const response = await fetch(pipedUrl); + const response = await fetch(url); if (!response.ok) { throw new Error(`Network response was not ok: ${response.status}`); @@ -503,12 +846,11 @@ document.addEventListener("DOMContentLoaded", () => { } } else { channelVideosGrid.innerHTML = ` -
- -

No videos available

-

This channel hasn't uploaded any videos yet.

-
- `; +
+ +

No videos available

+
+ `; } channelLoader.style.display = "none"; @@ -519,12 +861,12 @@ document.addEventListener("DOMContentLoaded", () => { channelLoader.style.display = "none"; channelVideosGrid.style.display = "block"; channelVideosGrid.innerHTML = ` -
- -

Failed to load channel

-

Error loading channel. Please try again later.

-
- `; +
+ +

Error loading channel. Please try again later.

+

${error.message}

+
+ `; } } @@ -545,7 +887,7 @@ document.addEventListener("DOMContentLoaded", () => { loadMoreButton.style.display = "none"; loadMoreSpinner.style.display = "block"; - const url = `https://pipedapi.wireway.ch/nextpage/channel/${activeChannelId}?nextpage=${encodeURIComponent( + const url = `https: channelNextPageData )}`; console.log(`Fetching next page data from: ${url}`); @@ -601,20 +943,19 @@ document.addEventListener("DOMContentLoaded", () => { const loadMoreContainer = document.getElementById("channel-load-more"); loadMoreContainer.innerHTML = ` -
-

Error loading more videos. Click to try again.

-
- `; +
Error loading more videos. Tap to try again.
+ `; - loadMoreContainer.addEventListener("click", () => { + setTimeout(() => { loadMoreContainer.innerHTML = ` - - - `; + + + `; + document .getElementById("channel-load-more-button") .addEventListener("click", loadMoreChannelVideos); - }); + }, 3000); } finally { document.getElementById("channel-load-more-spinner").style.display = "none"; @@ -622,27 +963,6 @@ document.addEventListener("DOMContentLoaded", () => { } } - async function openChannelPage(channelIdOrUsername) { - try { - // Remove any existing hash params - const channelId = await resolveChannelId(channelIdOrUsername); - updateHash({ channelId }); - fetchChannelData(channelId); - } catch (error) { - console.error("Error opening channel page:", error); - } - } - - function checkInitialHash() { - const params = getHashParams(); - if (params.search) { - searchInput.value = params.search; - performSearch(params.search); - } else if (params.channelId) { - fetchChannelData(params.channelId); - } - } - function setupInfiniteScroll() { window.addEventListener("scroll", function () { if ( @@ -667,6 +987,14 @@ document.addEventListener("DOMContentLoaded", () => { .addEventListener("click", loadMoreChannelVideos); } + function openChannelPage(channelId) { + if (videoPlayerPage.classList.contains("active")) { + cleanupResources(); + } + + fetchChannelData(channelId); + } + logo.addEventListener("click", () => { goToTrendingPage(); }); @@ -681,37 +1009,6 @@ document.addEventListener("DOMContentLoaded", () => { } }); - window.addEventListener("hashchange", () => { - const params = getHashParams(); - if (params.search) { - performSearch(params.search); - } else if (params.channelId) { - fetchChannelData(params.channelId); - } else { - goToTrendingPage(); - } - }); - - async function resolveChannelId(username) { - if (!username) return null; - if (!username.startsWith("@")) return username; - - try { - const response = await fetch( - `/api/channel/${encodeURIComponent(username)}` - ); - if (!response.ok) { - console.error("Failed to resolve channel ID for:", username); - return username; - } - const data = await response.json(); - return data.channelId; - } catch (error) { - console.error("Error resolving channel ID:", error); - return username; - } - } - fetchTrendingVideos(); checkInitialHash(); setupInfiniteScroll(); diff --git a/public/style.css b/public/style.css index d64b2bc..840993b 100644 --- a/public/style.css +++ b/public/style.css @@ -1,164 +1,252 @@ :root { --background: #000000; - --foreground: #ffffff; - --card: #0a0a0a; - --card-foreground: #ffffff; - --popover: #0a0a0a; - --popover-foreground: #ffffff; + --surface: #0f0f0f; + --surface-light: #1a1a1a; --primary: #ffffff; - --primary-foreground: #000000; - --secondary: #1a1a1a; - --secondary-foreground: #ffffff; - --muted: #1a1a1a; - --muted-foreground: #a1a1aa; - --accent: #1a1a1a; - --accent-foreground: #ffffff; - --destructive: #dc2626; - --destructive-foreground: #ffffff; - --border: #27272a; - --input: #27272a; - --ring: #ffffff; - --radius: 0.5rem; + --secondary: #e0e0e0; + --text-primary: #ffffff; + --text-secondary: #a0a0a0; + --hover-overlay: rgba(255, 255, 255, 0.1); + --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); + --radius: 8px; + --transition: all 0.25s ease; + --transition-fast: all 0.15s ease; + --blur-amount: 10px; } * { margin: 0; padding: 0; box-sizing: border-box; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, sans-serif; } body { background-color: var(--background); - color: var(--foreground); - font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - line-height: 1.5; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + color: var(--text-primary); + min-height: 100vh; + overflow-x: hidden; } header { - border-bottom: 1px solid var(--border); - background-color: var(--background); + background-color: var(--surface); + padding: 12px 16px; position: sticky; top: 0; - z-index: 50; - backdrop-filter: blur(8px); - background-color: rgba(0, 0, 0, 0.8); -} - -.header-content { + z-index: 100; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); display: flex; - align-items: center; justify-content: space-between; - padding: 1rem 1.5rem; - max-width: 1400px; - margin: 0 auto; + align-items: center; + transition: var(--transition); } .logo { display: flex; align-items: center; - gap: 0.5rem; + gap: 10px; cursor: pointer; - transition: opacity 0.2s; -} - -.logo:hover { - opacity: 0.8; } .logo h1 { - font-size: 1.25rem; - font-weight: 700; - color: var(--foreground); + font-size: 1.2rem; + color: var(--text-primary); + font-weight: 500; + letter-spacing: 0.5px; + margin-bottom: 1px; } .logo-icon { - color: var(--foreground); - font-size: 1.125rem; + color: var(--text-primary); + font-size: 1rem; } -.search-container { +.search-bar { display: flex; align-items: center; + gap: 8px; flex: 1; - max-width: 32rem; - margin: 0 2rem; -} - -.search-form { - display: flex; - width: 100%; - position: relative; + max-width: 500px; + margin: 0 20px; } .search-input { flex: 1; - height: 2.5rem; - padding: 0 1rem; - border: 1px solid var(--border); - border-radius: var(--radius); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - background-color: var(--background); - color: var(--foreground); - font-size: 0.875rem; - transition: border-color 0.2s, box-shadow 0.2s; + padding: 10px 16px; + border-radius: 30px; + border: none; + background-color: var(--surface-light); + color: var(--text-primary); + font-size: 1rem; + transition: var(--transition); + background-color: var(--surface-light); } .search-input:focus { outline: none; - border-color: var(--ring); - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); -} - -.search-input::placeholder { - color: var(--muted-foreground); + background-color: var(--hover-overlay); } .search-button { - height: 2.5rem; - padding: 0 1rem; - border: 1px solid var(--border); - border-left: none; - border-radius: var(--radius); - border-top-left-radius: 0; - border-bottom-left-radius: 0; - background-color: var(--secondary); - color: var(--secondary-foreground); - cursor: pointer; - transition: background-color 0.2s, border-color 0.2s; + background-color: var(--surface-light); + border: none; + border-radius: 50%; + height: 40px; + width: 40px; display: flex; align-items: center; justify-content: center; + color: var(--text-primary); + cursor: pointer; + transition: var(--transition); } .search-button:hover { - background-color: var(--accent); + background-color: var(--hover-overlay); } .github-button { - display: inline-flex; + display: flex; align-items: center; justify-content: center; - width: 2.5rem; - height: 2.5rem; - border: 1px solid var(--border); - border-radius: var(--radius); - background-color: var(--background); - color: var(--foreground); + width: 40px; + height: 40px; + border-radius: 50%; + background-color: var(--surface-light); + color: var(--text-primary); + font-size: 1rem; + font-weight: 700; + transition: var(--transition); + cursor: pointer; text-decoration: none; - transition: background-color 0.2s, border-color 0.2s; + margin-right: 10px; } .github-button:hover { - background-color: var(--secondary); + background-color: var(--hover-overlay); } .container { - max-width: 1400px; + max-width: 1600px; margin: 0 auto; - padding: 2rem 1.5rem; + padding: 24px; + perspective: 1000px; +} + +.trending-grid, .search-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 12px; +} + +.search-grid { + margin-top: 32px; +} + +.video-card { + background-color: var(--surface); + border-radius: var(--radius); + overflow: hidden; + cursor: pointer; + box-shadow: none; + transition: var(--transition); + position: relative; + transform: translateY(0); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.video-card:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + border-color: rgba(255, 255, 255, 0.1); +} + +.thumbnail-container { + position: relative; + overflow: hidden; + padding-top: 56.25%; +} + +.thumbnail { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; +} + +.video-card:hover .thumbnail { + transform: scale(1.05); +} + +.duration { + position: absolute; + bottom: 8px; + right: 8px; + background-color: rgba(0, 0, 0, 0.8); + color: white; + padding: 2px 6px; + border-radius: 4px; + font-size: 0.8rem; + font-weight: 500; +} + +.video-info { + padding: 16px; +} + +.video-title { + font-size: 0.95rem; + margin-bottom: 8px; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + transition: var(--transition); + letter-spacing: 0.2px; + line-height: 1.4; +} + +.video-card:hover .video-title { + color: var(--secondary); +} + +.video-meta { + display: flex; + flex-direction: column; + gap: 6px; +} + +.uploader { + color: var(--text-secondary); + font-size: 0.9rem; + display: flex; + align-items: center; + gap: 8px; +} + +.uploader-avatar { + width: 24px; + height: 24px; + border-radius: 50%; + object-fit: cover; +} + +.video-stats { + display: flex; + font-size: 0.8rem; + color: var(--text-secondary); + gap: 12px; +} + +.stat { + display: flex; + align-items: center; + gap: 4px; } .page { @@ -168,237 +256,163 @@ header { top: 0; left: 0; width: 100%; - transition: opacity 0.2s ease-in-out; + height: auto; + transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease; + transform-origin: center top; + transform: scale(1); + filter: blur(0); + pointer-events: none; } -.page.active { +.active { opacity: 1; visibility: visible; position: relative; + transform: scale(1); + filter: blur(0); + pointer-events: auto; } -.trending-grid, -.search-grid, -.channel-videos-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); - gap: 1.5rem; +.page.zoom-out { + opacity: 0; + transform: scale(0.95); + filter: blur(var(--blur-amount)); } -.related-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); - gap: 1rem; +.page.zoom-in { + opacity: 0; + transform: scale(1.05); + filter: blur(var(--blur-amount)); } -.video-card { - background-color: var(--card); - border: 1px solid var(--border); - border-radius: var(--radius); - overflow: hidden; - cursor: pointer; - transition: border-color 0.2s, box-shadow 0.2s; -} - -.video-card:hover { - border-color: var(--muted-foreground); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); -} - -.thumbnail-container { - position: relative; - aspect-ratio: 16 / 9; - overflow: hidden; - background-color: var(--muted); -} - -.thumbnail { +.transition-overlay { + position: fixed; + top: 0; + left: 0; width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.2s; -} - -.video-card:hover .thumbnail { - transform: scale(1.02); -} - -.duration { - position: absolute; - bottom: 0.5rem; - right: 0.5rem; - background-color: rgba(0, 0, 0, 0.8); - color: white; - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - font-size: 0.75rem; - font-weight: 500; -} - -.video-info { - padding: 1rem; -} - -.video-title { - font-size: 0.875rem; - font-weight: 600; - margin-bottom: 0.5rem; - line-height: 1.25; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; + height: 100vh; + z-index: 1000; + pointer-events: none; + display: flex; + justify-content: center; + align-items: center; overflow: hidden; - color: var(--card-foreground); -} - -.video-meta { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.uploader { - display: flex; - align-items: center; - gap: 0.5rem; - color: var(--muted-foreground); - font-size: 0.875rem; -} - -.uploader-avatar { - width: 1.5rem; - height: 1.5rem; + opacity: 0; + visibility: hidden; + background-color: var(--background); + transform: scale(0); border-radius: 50%; - object-fit: cover; + transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), + opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), + border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1); } -.video-stats { - display: flex; - align-items: center; - gap: 0.75rem; - font-size: 0.75rem; - color: var(--muted-foreground); +.transition-overlay.active { + opacity: 1; + visibility: visible; + transform: scale(2); + border-radius: 0; } -.stat { - display: flex; - align-items: center; - gap: 0.25rem; +.skeleton { + background: linear-gradient( + 90deg, + var(--surface), + var(--surface-light), + var(--surface) + ); + background-size: 200% 100%; + animation: shine 1.5s infinite; + border-radius: var(--radius); +} + +@keyframes shine { + 0% { + background-position: 200% 0; + } + + 100% { + background-position: -200% 0; + } +} + +.skeleton-video { + height: 200px; +} + +.skeleton-title { + height: 20px; + margin: 10px 0; + width: 90%; +} + +.skeleton-uploader { + height: 16px; + width: 60%; + margin-bottom: 8px; +} + +.skeleton-stats { + height: 14px; + width: 40%; } .video-player-container { display: flex; flex-direction: column; - gap: 1.5rem; + gap: 24px; } .player-wrapper { position: relative; - aspect-ratio: 16 / 9; - background-color: #000; + padding-bottom: 56.25%; + + height: 0; + overflow: hidden; border-radius: var(--radius); - border: 1px solid var(--border); + background-color: black; + box-shadow: var(--shadow); } -.player-wrapper video { +.player-wrapper iframe { + position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; - object-fit: contain; - background-color: #000; -} - -.preparation-overlay { - position: absolute; - inset: 0; - background-color: rgba(0, 0, 0, 0.9); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 1rem; - z-index: 10; -} - -.preparation-status { - font-size: 0.875rem; - font-weight: 500; - color: var(--foreground); - text-align: center; -} - -.preparation-progress-container { - width: 16rem; - height: 0.25rem; - background-color: var(--muted); - border-radius: 0.125rem; - overflow: hidden; -} - -.preparation-progress-bar { - height: 100%; - background-color: var(--primary); - border-radius: 0.125rem; - transition: width 0.3s ease; - width: 0%; -} - -.reload-button { - display: inline-flex; - align-items: center; - justify-content: center; - height: 2.25rem; - padding: 0 1rem; - border: 1px solid var(--border); - border-radius: var(--radius); - background-color: var(--secondary); - color: var(--secondary-foreground); - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: background-color 0.2s; -} - -.reload-button:hover { - background-color: var(--accent); + border: none; } .video-detail { - background-color: var(--card); - border: 1px solid var(--border); + background-color: var(--surface); + padding: 24px; border-radius: var(--radius); - padding: 1.5rem; + box-shadow: var(--shadow); } .video-detail-title { font-size: 1.5rem; - font-weight: 700; - margin-bottom: 1rem; - line-height: 1.25; + margin-bottom: 16px; } .video-detail-meta { display: flex; justify-content: space-between; - align-items: start; - margin-bottom: 1.5rem; - gap: 1rem; + align-items: center; + margin-bottom: 24px; + flex-wrap: wrap; + gap: 16px; } .video-detail-uploader { display: flex; align-items: center; - gap: 0.75rem; - cursor: pointer; - transition: opacity 0.2s; -} - -.video-detail-uploader:hover { - opacity: 0.8; + gap: 12px; } .uploader-avatar-large { - width: 3rem; - height: 3rem; + width: 48px; + height: 48px; border-radius: 50%; object-fit: cover; } @@ -413,176 +427,205 @@ header { font-size: 1rem; } -.uploaded-date { - font-size: 0.875rem; - color: var(--muted-foreground); -} - .video-detail-stats { display: flex; - gap: 1.5rem; + gap: 24px; align-items: center; } .detail-stat { display: flex; align-items: center; - gap: 0.5rem; - color: var(--muted-foreground); - font-size: 0.875rem; + gap: 8px; + color: var(--text-secondary); } -.video-description { - color: var(--muted-foreground); - line-height: 1.6; - font-size: 0.875rem; +.detail-stat i { + font-size: 1.2rem; +} + +.related-videos { + margin-top: 32px; +} + +.section-title { + font-size: 1.1rem; + margin-bottom: 20px; + position: relative; + display: inline-block; + letter-spacing: 0.5px; + font-weight: 400; +} + +.section-title::after { + content: ""; + position: absolute; + left: 0; + bottom: -4px; + width: 40px; + height: 1px; + background-color: var(--secondary); +} + +.related-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 20px; } .search-heading { - margin-bottom: 1.5rem; + margin-bottom: 16px; display: flex; align-items: center; - gap: 0.75rem; + gap: 12px; } .search-query { font-size: 1.5rem; - font-weight: 700; + font-weight: 500; + letter-spacing: 0.3px; + color: var(--text-primary); } .search-count { - font-size: 0.875rem; - color: var(--muted-foreground); - background-color: var(--muted); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; + font-size: 0.9rem; + color: var(--text-secondary); + background-color: var(--surface-light); + padding: 4px 8px; + border-radius: 4px; } -.channel-header { - background-color: var(--card); - border: 1px solid var(--border); - border-radius: var(--radius); - overflow: hidden; - margin-bottom: 2rem; +.no-results { + text-align: center; + padding: 40px 0; + color: var(--text-secondary); + font-size: 1.1rem; } -.channel-banner-container { - height: 10rem; - background-color: var(--muted); - overflow: hidden; +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } } -.channel-banner { +.animated-item { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.5s ease, transform 0.5s ease; +} + +.animated-item.visible { + opacity: 1; + transform: translateY(0); +} + +.preparation-overlay { + position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; - object-fit: cover; -} - -.channel-info { - padding: 1.5rem; - display: flex; - gap: 1rem; -} - -.channel-avatar-container { - flex-shrink: 0; - margin-top: -2rem; -} - -.channel-avatar { - width: 5rem; - height: 5rem; - border-radius: 50%; - border: 3px solid var(--background); - background-color: var(--muted); -} - -.channel-details { - flex: 1; -} - -.channel-title-container { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.5rem; -} - -.channel-title { - font-size: 1.5rem; - font-weight: 700; -} - -.channel-verified { - color: var(--muted-foreground); -} - -.channel-stats { - color: var(--muted-foreground); - font-size: 0.875rem; - margin-bottom: 1rem; -} - -.channel-description { - color: var(--muted-foreground); - line-height: 1.6; - font-size: 0.875rem; - white-space: pre-line; - max-height: 6rem; - overflow-y: auto; -} - -.load-more-container { + background-color: rgba(0, 0, 0, 0.9); display: flex; + flex-direction: column; justify-content: center; - margin-top: 2rem; -} - -.load-more-button { - display: inline-flex; align-items: center; - justify-content: center; - height: 2.5rem; - padding: 0 1.5rem; - border: 1px solid var(--border); + z-index: 10; border-radius: var(--radius); - background-color: var(--secondary); - color: var(--secondary-foreground); - font-size: 0.875rem; - font-weight: 500; +} + +.preparation-status { + font-size: 1rem; + margin-bottom: 16px; + color: var(--text-primary); + text-align: center; + letter-spacing: 0.3px; +} + +.preparation-progress-container { + width: 80%; + max-width: 300px; + background-color: var(--surface-light); + height: 4px; + border-radius: 2px; + overflow: hidden; + position: relative; +} + +.preparation-progress-bar { + height: 100%; + width: 0%; + background-color: var(--primary); + border-radius: 2px; + transition: width 0.3s ease; + position: relative; + overflow: hidden; +} + +.preparation-progress-bar::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0.1), + rgba(255, 255, 255, 0.2), + rgba(255, 255, 255, 0.1) + ); + animation: shimmer 1.5s infinite; + transform: translateX(-100%); +} + +.reload-button { + margin-top: 20px; + padding: 10px 20px; + background-color: var(--surface-light); + border: none; + border-radius: var(--radius); + color: var(--text-primary); + font-size: 0.95rem; cursor: pointer; - transition: background-color 0.2s; + transition: var(--transition); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } -.load-more-button:hover { - background-color: var(--accent); +.reload-button:hover { + background-color: var(--hover-overlay); + transform: translateY(-2px); } -.section-title { - font-size: 1.25rem; - font-weight: 700; - margin-bottom: 1.5rem; - padding-bottom: 0.5rem; - border-bottom: 1px solid var(--border); +@keyframes shimmer { + 100% { + transform: translateX(100%); + } } .loading-container { display: flex; justify-content: center; align-items: center; - min-height: 20rem; + height: 60vh; } .loader { - width: 2rem; - height: 2rem; - border: 2px solid var(--muted); - border-top: 2px solid var(--foreground); + width: 48px; + height: 48px; + border: 5px solid var(--surface-light); + border-bottom-color: var(--primary); border-radius: 50%; - animation: spin 1s linear infinite; + animation: rotation 1s linear infinite; } -@keyframes spin { +@keyframes rotation { 0% { transform: rotate(0deg); } @@ -592,94 +635,10 @@ header { } } -.skeleton { - background: linear-gradient(90deg, - var(--muted) 25%, - var(--secondary) 50%, - var(--muted) 75%); - background-size: 200% 100%; - animation: shimmer 1.5s infinite; - border-radius: var(--radius); -} - -@keyframes shimmer { - 0% { - background-position: 200% 0; - } - - 100% { - background-position: -200% 0; - } -} - -.skeleton-video { - aspect-ratio: 16 / 9; -} - -.skeleton-title { - height: 1rem; - margin: 0.5rem 0; - width: 90%; -} - -.skeleton-uploader { - height: 0.875rem; - width: 60%; - margin-bottom: 0.5rem; -} - -.skeleton-stats { - height: 0.75rem; - width: 40%; -} - -.no-results { - text-align: center; - padding: 3rem 1rem; - color: var(--muted-foreground); -} - -.no-results i { - margin-bottom: 1rem; - opacity: 0.5; -} - -.animated-item { - opacity: 0; - transform: translateY(1rem); - transition: opacity 0.4s ease, transform 0.4s ease; -} - -.animated-item.visible { - opacity: 1; - transform: translateY(0); -} - @media (max-width: 768px) { - .header-content { - flex-direction: column; - gap: 1rem; - } - - .search-container { - order: 3; - margin: 0; - width: 100%; - } - - .container { - padding: 1rem; - } - .trending-grid, - .search-grid, - .channel-videos-grid { - grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); - gap: 1rem; - } - - .related-grid { - grid-template-columns: 1fr; + .search-grid { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .video-detail-meta { @@ -687,10 +646,158 @@ header { align-items: flex-start; } + .container { + padding: 16px; + } + + .search-bar { + max-width: 100%; + margin: 16px 0 0; + order: 3; + width: 100%; + } + + header { + flex-wrap: wrap; + } +} + +@media (max-width: 480px) { + .trending-grid, + .search-grid { + grid-template-columns: 1fr; + } + + .related-grid { + grid-template-columns: 1fr; + } + .video-detail-stats { flex-wrap: wrap; } +} +.channel-header { + border-radius: var(--radius); + overflow: hidden; + margin-bottom: 32px; + background-color: var(--surface); + box-shadow: var(--shadow); +} + +.channel-banner-container { + position: relative; + height: 150px; + overflow: hidden; + background-color: var(--surface-light); +} + +.channel-banner { + width: 100%; + height: 100%; + object-fit: cover; +} + +.channel-info { + display: flex; + padding: 24px; + position: relative; + gap: 20px; +} + +.channel-avatar-container { + flex-shrink: 0; +} + +.channel-avatar { + width: 80px; + height: 80px; + border-radius: 50%; + border: 3px solid var(--surface); + box-shadow: var(--shadow); + background-color: var(--surface-light); +} + +.channel-details { + flex-grow: 1; +} + +.channel-title-container { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 8px; +} + +.channel-title { + font-size: 1.5rem; + font-weight: 500; + letter-spacing: 0.3px; +} + +.channel-verified { + color: var(--text-secondary); + font-size: 1.1rem; +} + +.channel-stats { + color: var(--text-secondary); + font-size: 0.9rem; + margin-bottom: 16px; +} + +.channel-description { + color: var(--text-primary); + line-height: 1.5; + font-size: 0.95rem; + white-space: pre-line; + max-height: 100px; + overflow-y: auto; + margin-top: 12px; +} + +.channel-videos-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 24px; +} + +.load-more-container { + display: flex; + justify-content: center; + align-items: center; + margin-top: 40px; + flex-direction: column; + min-height: 60px; +} + +.load-more-button { + background-color: var(--surface); + color: var(--text-primary); + border: none; + padding: 12px 24px; + border-radius: var(--radius); + cursor: pointer; + font-size: 1rem; + transition: var(--transition); + box-shadow: var(--shadow); +} + +.load-more-button:hover { + background-color: var(--surface-light); + transform: translateY(-2px); +} + +.load-more-error { + color: #ff5555; + background-color: rgba(255, 85, 85, 0.1); + border-radius: var(--radius); + padding: 12px 24px; + text-align: center; + cursor: pointer; +} + +@media (max-width: 768px) { .channel-info { flex-direction: column; align-items: center; @@ -698,20 +805,24 @@ header { } .channel-avatar-container { - margin-top: -3rem; + margin-top: -50px; + } + + .channel-title-container { + justify-content: center; + } + + .channel-description { + text-align: left; + } + + .channel-videos-grid { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } @media (max-width: 480px) { - - .trending-grid, - .search-grid, - .channel-videos-grid, - .related-grid { + .channel-videos-grid { grid-template-columns: 1fr; } - - .video-detail-title { - font-size: 1.25rem; - } -} \ No newline at end of file +} diff --git a/public/video.html b/public/video.html deleted file mode 100644 index ed4ed87..0000000 --- a/public/video.html +++ /dev/null @@ -1,152 +0,0 @@ - - - - - - Repiped - Video Player - - - - - - - - - -
-
- - -
-
- - -
-
- - - - -
-
- -
-
-
-
-
- Preparing video... -
-
-
-
- -
-
- -
-

Loading...

-
-
- Uploader avatar -
- Loading... - Loading... -
-
-
-
- - Loading... -
-
- - Loading... -
-
-
-
- Loading... -
-
-
- -
-

Related Videos

- -
-
- - - - - - - - diff --git a/public/video.js b/public/video.js deleted file mode 100644 index 58c3fc4..0000000 --- a/public/video.js +++ /dev/null @@ -1,534 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - const playerWrapper = document.getElementById("player-wrapper"); - const preparationOverlay = document.getElementById("preparation-overlay"); - const preparationStatus = document.getElementById("preparation-status"); - const preparationProgressBar = document.getElementById( - "preparation-progress-bar" - ); - const reloadButton = document.getElementById("reload-button"); - const relatedGrid = document.getElementById("related-grid"); - const logo = document.getElementById("logo"); - const searchInput = document.getElementById("search-input"); - const searchButton = document.getElementById("search-button"); - - const detailTitle = document.getElementById("detail-title"); - const detailAvatar = document.getElementById("detail-avatar"); - const detailUploader = document.getElementById("detail-uploader"); - const detailUploaded = document.getElementById("detail-uploaded"); - const detailViews = document.getElementById("detail-views"); - const detailDuration = document.getElementById("detail-duration"); - const detailDescription = document.getElementById("detail-description"); - - const videoCardTemplate = document.getElementById("video-card-template"); - - let activeWs = null; - let hlsInstance = null; - let player = null; - let prepareInProgress = false; - let currentVideo = null; - - const trendingApiUrl = "/api/trending"; - const searchApiUrl = "/api/search"; - const wsProtocol = window.location.protocol === "https:" ? "wss://" : "ws://"; - const wsBaseUrl = wsProtocol + window.location.host + "/api/v1/prepare"; - - function formatViews(views) { - if (views >= 1000000) { - return `${(views / 1000000).toFixed(1)}M`; - } else if (views >= 1000) { - return `${(views / 1000).toFixed(1)}K`; - } else { - return views.toString(); - } - } - - function formatDuration(seconds) { - const hours = Math.floor(seconds / 3600); - const minutes = Math.floor((seconds % 3600) / 60); - const secs = seconds % 60; - - if (hours > 0) { - return `${hours}:${minutes.toString().padStart(2, "0")}:${secs - .toString() - .padStart(2, "0")}`; - } else { - return `${minutes}:${secs.toString().padStart(2, "0")}`; - } - } - - function getVideoIdFromUrl() { - const urlParams = new URLSearchParams(window.location.search); - return urlParams.get("v"); - } - - function getVideoElement() { - const existingVideo = playerWrapper.querySelector("video"); - if (existingVideo) { - existingVideo.remove(); - } - - const videoElement = document.createElement("video"); - videoElement.id = "video-player"; - videoElement.setAttribute("controls", ""); - videoElement.setAttribute("crossorigin", ""); - videoElement.setAttribute("playsinline", ""); - - playerWrapper.appendChild(videoElement); - return videoElement; - } - - function cleanupResources() { - if (activeWs && activeWs.readyState === WebSocket.OPEN) { - activeWs.close(); - activeWs = null; - } - - if (hlsInstance) { - hlsInstance.destroy(); - hlsInstance = null; - } - - if (player) { - player.destroy(); - player = null; - } - - prepareInProgress = false; - } - - const observeElements = () => { - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - entry.target.classList.add("visible"); - observer.unobserve(entry.target); - } - }); - }, - { - root: null, - threshold: 0.1, - rootMargin: "0px 0px -50px 0px", - } - ); - - document - .querySelectorAll(".animated-item:not(.visible)") - .forEach((item) => { - observer.observe(item); - }); - }; - - function openVideoPlayer(video) { - sessionStorage.setItem("currentVideo", JSON.stringify(video)); - const videoId = video.url.replace("/watch?v=", ""); - window.location.href = `video.html?v=${videoId}`; - } - - function createVideoCard(video, index) { - if (video.type !== "stream" && video.type !== undefined) { - return null; - } - - const card = videoCardTemplate.content.cloneNode(true); - const thumbnail = card.querySelector(".thumbnail"); - const duration = card.querySelector(".duration"); - const title = card.querySelector(".video-title"); - const uploaderAvatar = card.querySelector(".uploader-avatar"); - const uploaderName = card.querySelector(".uploader-name"); - const viewCount = card.querySelector(".view-count"); - const uploadTime = card.querySelector(".upload-time"); - const videoCard = card.querySelector(".video-card"); - - try { - thumbnail.src = video.thumbnail || ""; - thumbnail.alt = video.title || "Video thumbnail"; - - if (typeof video.duration === "number") { - duration.textContent = formatDuration(video.duration); - } else { - duration.textContent = "0:00"; - } - - title.textContent = video.title || "Untitled video"; - uploaderAvatar.src = video.uploaderAvatar || ""; - uploaderAvatar.alt = `${video.uploaderName || "Uploader"} avatar`; - uploaderName.textContent = video.uploaderName || "Unknown uploader"; - viewCount.textContent = formatViews(video.views || 0); - uploadTime.textContent = video.uploadedDate || "Unknown date"; - - videoCard.style.animationDelay = `${index * 0.05}s`; - videoCard.addEventListener("click", async (e) => { - const uploader = card.querySelector(".uploader"); - if ( - e.target === uploaderAvatar || - e.target === uploaderName || - (e.target.parentElement && e.target.parentElement === uploader) - ) { - e.stopPropagation(); - if (video.uploaderUrl) { - const username = video.uploaderUrl; - const channelId = await getChannelId(username); - window.location.href = `index.html#channelId=${channelId}`; - } - } else { - openVideoPlayer(video); - } - }); - } catch (error) { - console.error("Error creating video card:", error, video); - } - - return card; - } - - async function findVideoById(videoId) { - const storedVideo = sessionStorage.getItem("currentVideo"); - if (storedVideo) { - const video = JSON.parse(storedVideo); - if (video.url.includes(videoId)) { - return video; - } - } - - const storedTrending = sessionStorage.getItem("trendingVideos"); - if (storedTrending) { - const trendingVideos = JSON.parse(storedTrending); - const foundInTrending = trendingVideos.find((v) => - v.url.includes(videoId) - ); - if (foundInTrending) { - return foundInTrending; - } - } - - const storedSearch = sessionStorage.getItem("searchResults"); - if (storedSearch) { - const searchResults = JSON.parse(storedSearch); - const foundInSearch = searchResults.find((v) => v.url.includes(videoId)); - if (foundInSearch) { - return foundInSearch; - } - } - - try { - console.log("Video not found in cache, fetching from trending API..."); - const response = await fetch(trendingApiUrl); - if (response.ok) { - const videos = await response.json(); - const foundVideo = videos.find((v) => v.url.includes(videoId)); - if (foundVideo) { - return foundVideo; - } - } - - const lastSearchQuery = sessionStorage.getItem("lastSearchQuery"); - if (lastSearchQuery) { - console.log("Trying search API with last query..."); - const searchUrl = `${searchApiUrl}?q=${encodeURIComponent( - lastSearchQuery - )}&filter=all`; - const searchResponse = await fetch(searchUrl); - if (searchResponse.ok) { - const searchData = await searchResponse.json(); - const searchResults = searchData.items - ? searchData.items.filter((item) => item.type === "stream") - : []; - const foundInSearch = searchResults.find((v) => - v.url.includes(videoId) - ); - if (foundInSearch) { - return foundInSearch; - } - } - } - } catch (error) { - console.error("Error fetching video from API:", error); - } - - return null; - } - - function initializePlayer(streamUrl) { - const videoElement = getVideoElement(); - - if (player) { - player.destroy(); - } - - player = new Plyr(videoElement, { - controls: [ - "play-large", - "play", - "progress", - "current-time", - "mute", - "volume", - "settings", - "pip", - "airplay", - "fullscreen", - ], - settings: ["captions", "quality", "speed"], - tooltips: { controls: true, seek: true }, - keyboard: { focused: true, global: true }, - }); - - if (videoElement.canPlayType("application/vnd.apple.mpegurl")) { - videoElement.src = streamUrl; - } else if (Hls.isSupported()) { - if (hlsInstance) { - hlsInstance.destroy(); - } - - hlsInstance = new Hls({ - maxBufferLength: 30, - maxMaxBufferLength: 60, - }); - - hlsInstance.loadSource(streamUrl); - hlsInstance.attachMedia(videoElement); - - hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => { - videoElement.play().catch((e) => { - console.warn("Autoplay prevented:", e); - }); - }); - } else { - console.error("HLS is not supported in this browser"); - preparationStatus.textContent = - "Your browser does not support HLS playback"; - } - } - - function prepareVideo(videoUrl) { - if (prepareInProgress) { - return; - } - - prepareInProgress = true; - preparationOverlay.style.display = "flex"; - preparationStatus.textContent = "Preparing video..."; - preparationProgressBar.style.width = "0%"; - reloadButton.style.display = "none"; - - const cleanVideoId = videoUrl.replace("/watch?v=", ""); - - if (activeWs && activeWs.readyState === WebSocket.OPEN) { - activeWs.close(); - } - - activeWs = new WebSocket(wsBaseUrl); - - activeWs.onopen = () => { - activeWs.send(JSON.stringify({ videoId: cleanVideoId })); - }; - - activeWs.onmessage = (event) => { - const data = JSON.parse(event.data); - - if (data.ok === "true") { - preparationStatus.textContent = "Connection established..."; - } else if (data.preparing !== undefined) { - const percentage = parseFloat(data.preparing); - preparationProgressBar.style.width = `${percentage}%`; - preparationStatus.textContent = `Preparing video... ${percentage.toFixed( - 0 - )}%`; - } else if (data.done && data.streamUrl) { - preparationStatus.textContent = "Video ready! Starting playback..."; - preparationProgressBar.style.width = "100%"; - - setTimeout(() => { - preparationOverlay.style.display = "none"; - initializePlayer(data.streamUrl); - prepareInProgress = false; - }, 500); - - activeWs.close(); - activeWs = null; - } else { - preparationStatus.textContent = - "Video playback failed. Try reloading the page."; - reloadButton.style.display = "block"; - prepareInProgress = false; - } - }; - - activeWs.onerror = (error) => { - console.error("WebSocket error:", error); - preparationStatus.textContent = - "Error preparing video. Please try again."; - reloadButton.style.display = "block"; - prepareInProgress = false; - - setTimeout(() => { - if (preparationOverlay.style.display !== "none") { - preparationOverlay.style.display = "none"; - } - }, 3000); - }; - - activeWs.onclose = () => { - console.log("WebSocket connection closed"); - if (activeWs === activeWs) { - activeWs = null; - } - }; - } - async function getChannelId(username) { - try { - if (username.startsWith("UC")) { - return username; - } - - const response = await fetch( - `/api/channel/${encodeURIComponent(username)}` - ); - if (!response.ok) { - throw new Error(`Failed to fetch channel ID: ${response.status}`); - } - const data = await response.json(); - return data.channelId; - } catch (error) { - console.error("Error fetching channel ID:", error); - return username; - } - } - - function displayVideoDetails(video) { - document.title = `${video.title} - Repiped`; - detailTitle.textContent = video.title; - detailAvatar.src = video.uploaderAvatar; - detailUploader.textContent = video.uploaderName; - detailUploaded.textContent = video.uploadedDate; - detailViews.textContent = formatViews(video.views); - detailDuration.textContent = formatDuration(video.duration); - detailDescription.textContent = - video.shortDescription || "No description available"; - - const videoDetailUploader = document.querySelector( - ".video-detail-uploader" - ); - if (videoDetailUploader) { - videoDetailUploader.style.cursor = "pointer"; - videoDetailUploader.addEventListener("click", async () => { - if (video.uploaderUrl) { - const username = video.uploaderUrl; - const channelId = await getChannelId(username); - window.location.href = `index.html#channelId=${channelId}`; - } - }); - } - } - - async function fetchRelatedVideos(currentVideo) { - try { - let videos = []; - const storedTrending = sessionStorage.getItem("trendingVideos"); - - if (storedTrending) { - videos = JSON.parse(storedTrending); - } else { - const response = await fetch(trendingApiUrl); - if (!response.ok) { - throw new Error("Network response was not ok"); - } - videos = await response.json(); - } - - videos = videos - .filter((video) => video.url !== currentVideo.url) - .slice(0, 8); - - relatedGrid.innerHTML = ""; - - videos.forEach((video, index) => { - const card = createVideoCard(video, index); - if (card) { - relatedGrid.appendChild(card); - } - }); - - observeElements(); - } catch (error) { - console.error("Error fetching related videos:", error); - relatedGrid.innerHTML = ` -
- -

Failed to load related videos

-

Error loading related videos.

-
- `; - } - } - - async function performSearch(query) { - if (!query || query.trim() === "") return; - - window.location.href = `index.html#search=${encodeURIComponent( - query.trim() - )}`; - } - - async function loadVideo() { - const videoId = getVideoIdFromUrl(); - - if (!videoId) { - alert("No video ID provided"); - window.location.href = "index.html"; - return; - } - - console.log(`Loading video: ${videoId}`); - - try { - const video = await findVideoById(videoId); - - if (!video) { - alert("Video not found. Redirecting to home page."); - window.location.href = "index.html"; - return; - } - - currentVideo = video; - - sessionStorage.setItem("currentVideo", JSON.stringify(video)); - - displayVideoDetails(video); - - prepareVideo(video.url); - - fetchRelatedVideos(video); - } catch (error) { - console.error("Error loading video:", error); - alert("Error loading video. Redirecting to home page."); - window.location.href = "index.html"; - } - } - - logo.addEventListener("click", () => { - window.location.href = "index.html"; - }); - - searchButton.addEventListener("click", () => { - performSearch(searchInput.value); - }); - - searchInput.addEventListener("keypress", (e) => { - if (e.key === "Enter") { - performSearch(searchInput.value); - } - }); - - reloadButton.addEventListener("click", () => { - window.location.reload(); - }); - - window.addEventListener("beforeunload", () => { - cleanupResources(); - }); - - loadVideo(); -}); diff --git a/readme.md b/readme.md index 6ccac35..f53204a 100644 --- a/readme.md +++ b/readme.md @@ -15,7 +15,7 @@ Repiped uses yt-dlp to fetch the videos and ffmpeg to stream them. ## Installation -Repiped supports Windows and Linux operating systems. Yt-dlp are provided in the deps folder. +Repiped supports Windows and Linux operating systems. ffmpeg and yt-dlp are provided in the deps folder. To install follow these simple steps: ### Running on the normal system diff --git a/routes/channel.js b/routes/channel.js deleted file mode 100644 index c78f100..0000000 --- a/routes/channel.js +++ /dev/null @@ -1,41 +0,0 @@ -const axios = require("axios"); -const cheerio = require("cheerio"); - -function channelRouteHandler(app) { - app.get("/api/channel/:username", async (req, res) => { - try { - const username = req.params.username; - if (!username) { - return res.status(400).json({ error: "Username is required" }); - } - - const response = await axios.get(`https://www.youtube.com/${username}`); - const $ = cheerio.load(response.data); - const canonicalLink = $('link[rel="canonical"]').attr("href"); - - if (!canonicalLink) { - return res.status(404).json({ error: "Channel not found" }); - } - - const channelIdMatch = canonicalLink.match(/\/channel\/([\w-]+)/); - const channelId = channelIdMatch ? channelIdMatch[1] : null; - - if (!channelId) { - return res.status(404).json({ error: "Could not extract channel ID" }); - } - - return res.json({ - channelId: channelId, - username: username, - }); - } catch (error) { - console.error("Error fetching channel ID:", error.message); - return res.status(500).json({ - error: "Failed to fetch channel ID", - message: error.message, - }); - } - }); -} - -module.exports = channelRouteHandler; diff --git a/routes/search.js b/routes/search.js index c2c269a..beccacb 100644 --- a/routes/search.js +++ b/routes/search.js @@ -1,5 +1,5 @@ const https = require("https"); -const yts = require("yt-search"); +const yts = require('yt-search'); function searchRouteHandler(app) { app.get("/api/search", async (req, res) => { @@ -10,36 +10,32 @@ function searchRouteHandler(app) { } const results = await yts(query); - console.log(results.videos[0]); - + console.log(results.videos[0]) + const formattedResults = { - items: results.videos.map((video) => ({ + items: results.videos.map(video => ({ url: `/watch?v=${video.videoId}`, type: "stream", title: video.title, thumbnail: `/api/thumbnail/${video.videoId}`, uploaderName: video.author.name, - uploaderUrl: `${video.author.url.replace( - "https://youtube.com/", - "" - )}`, - uploaderAvatar: `/api/avatar/${video.author.url.replace( - "https://youtube.com/", - "" - )}.png`, + uploaderUrl: `/channel/${video.author.url}`, + uploaderAvatar: `/api/avatar/${video.author.url.replace("https://youtube.com/", "")}.png`, uploadedDate: video.ago, shortDescription: video.description, duration: video.seconds, views: video.views, uploaded: new Date(video.timestamp * 1000).getTime(), - isShort: video.duration.seconds < 60, + uploaderVerified: false, + isShort: video.duration.seconds < 60 })), nextpage: "", suggestion: "", - corrected: false, + corrected: false }; res.json(formattedResults); + } catch (err) { console.error(`Error searching videos: ${err.message}`); res.status(500).send("Error searching videos");