diff --git a/deps/yt-dlp b/deps/yt-dlp index 56d8482..c8b50c9 100644 --- a/deps/yt-dlp +++ b/deps/yt-dlp @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0e8bc5558efce5ae2a6397710eed72fd8d434e45904e4fe029dd21c610a95d4d -size 3062048 +oid sha256:d6ff4b07579a491436d83413cad1ff18f5fa2a01f80effceb9b70147276ffeb8 +size 3117225 diff --git a/deps/yt-dlp.exe b/deps/yt-dlp.exe index f73cd34..aa36160 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:5374c46da65bbe661d3220a23646c785c3e53264485edc31436e8dba3889337c -size 18136476 +oid sha256:e08151c7943ab8510c1c3d7e2a8efc3942384e05f879eaaa9f1af52354596825 +size 18122736 diff --git a/deps/yt-dlp_linux_aarch64 b/deps/yt-dlp_linux_aarch64 index 4d6c042..dd587c3 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:ada3ea834ae8ec91b30f1bcdeb85aba7453aa75373bad1b834b8977ed1350eac -size 19025728 +oid sha256:e81fb51bc5d48cf3f8270dc73a03eb0495359d9aef1711144eecd53ebcc4376e +size 19003624 diff --git a/deps/yt-dlp_linux_armv7l b/deps/yt-dlp_linux_armv7l index a03cf10..5cb36d6 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:aea0355239a7e7f9778492d515ea6e77f71a4f035b2a2f352518bb5a7ed8bfdb -size 17990008 +oid sha256:6b2c831061443e2005ec03caa523cff082c4a442d769848a96e10cff0360ef57 +size 17969664 diff --git a/public/index.html b/public/index.html index 5ac94cd..a4c836f 100644 --- a/public/index.html +++ b/public/index.html @@ -1,180 +1,186 @@ + + + + Repiped + + + + + + - - - - Repiped - - - - + +
+
+ - -
- -
- - -
- - - -
- -
-
-
- - -
-
- -
-
-

Search Results

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

- -
-
- -
-
-
-
-
-
-
-
-
- - -
-
- -
-
-
-
-
- Preparing video... -
-
-
-
-
-
-

-
-
- Uploader avatar -
- - -
+ + + + +
+
+ +
+
+
+ + +
+
+ +
+
+

Search Results

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

+ +
+
+ +
+
+
+
+
+ +
+
+
+
+ + +
+
+
+ + -
-

Watch More

- -
-
-
- - - - - - - - - - \ No newline at end of file + + + diff --git a/public/style.css b/public/style.css index 840993b..d64b2bc 100644 --- a/public/style.css +++ b/public/style.css @@ -1,252 +1,164 @@ :root { --background: #000000; - --surface: #0f0f0f; - --surface-light: #1a1a1a; + --foreground: #ffffff; + --card: #0a0a0a; + --card-foreground: #ffffff; + --popover: #0a0a0a; + --popover-foreground: #ffffff; --primary: #ffffff; - --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; + --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; } * { 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(--text-primary); - min-height: 100vh; - overflow-x: hidden; + 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; } header { - background-color: var(--surface); - padding: 12px 16px; + border-bottom: 1px solid var(--border); + background-color: var(--background); position: sticky; top: 0; - z-index: 100; - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); + z-index: 50; + backdrop-filter: blur(8px); + background-color: rgba(0, 0, 0, 0.8); +} + +.header-content { display: flex; - justify-content: space-between; align-items: center; - transition: var(--transition); + justify-content: space-between; + padding: 1rem 1.5rem; + max-width: 1400px; + margin: 0 auto; } .logo { display: flex; align-items: center; - gap: 10px; + gap: 0.5rem; cursor: pointer; + transition: opacity 0.2s; +} + +.logo:hover { + opacity: 0.8; } .logo h1 { - font-size: 1.2rem; - color: var(--text-primary); - font-weight: 500; - letter-spacing: 0.5px; - margin-bottom: 1px; + font-size: 1.25rem; + font-weight: 700; + color: var(--foreground); } .logo-icon { - color: var(--text-primary); - font-size: 1rem; + color: var(--foreground); + font-size: 1.125rem; } -.search-bar { +.search-container { display: flex; align-items: center; - gap: 8px; flex: 1; - max-width: 500px; - margin: 0 20px; + max-width: 32rem; + margin: 0 2rem; +} + +.search-form { + display: flex; + width: 100%; + position: relative; } .search-input { flex: 1; - 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); + 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; } .search-input:focus { outline: none; - background-color: var(--hover-overlay); + border-color: var(--ring); + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); +} + +.search-input::placeholder { + color: var(--muted-foreground); } .search-button { - background-color: var(--surface-light); - border: none; - border-radius: 50%; - height: 40px; - width: 40px; + 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; display: flex; align-items: center; justify-content: center; - color: var(--text-primary); - cursor: pointer; - transition: var(--transition); } .search-button:hover { - background-color: var(--hover-overlay); + background-color: var(--accent); } .github-button { - display: flex; + display: inline-flex; align-items: center; justify-content: center; - 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; + width: 2.5rem; + height: 2.5rem; + border: 1px solid var(--border); + border-radius: var(--radius); + background-color: var(--background); + color: var(--foreground); text-decoration: none; - margin-right: 10px; + transition: background-color 0.2s, border-color 0.2s; } .github-button:hover { - background-color: var(--hover-overlay); + background-color: var(--secondary); } .container { - max-width: 1600px; + max-width: 1400px; margin: 0 auto; - 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; + padding: 2rem 1.5rem; } .page { @@ -256,163 +168,237 @@ header { top: 0; left: 0; width: 100%; - 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; + transition: opacity 0.2s ease-in-out; } -.active { +.page.active { opacity: 1; visibility: visible; position: relative; - transform: scale(1); - filter: blur(0); - pointer-events: auto; } -.page.zoom-out { - opacity: 0; - transform: scale(0.95); - filter: blur(var(--blur-amount)); +.trending-grid, +.search-grid, +.channel-videos-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); + gap: 1.5rem; } -.page.zoom-in { - opacity: 0; - transform: scale(1.05); - filter: blur(var(--blur-amount)); +.related-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); + gap: 1rem; } -.transition-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100vh; - z-index: 1000; - pointer-events: none; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - opacity: 0; - visibility: hidden; - background-color: var(--background); - transform: scale(0); - border-radius: 50%; - 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); -} - -.transition-overlay.active { - opacity: 1; - visibility: visible; - transform: scale(2); - border-radius: 0; -} - -.skeleton { - background: linear-gradient( - 90deg, - var(--surface), - var(--surface-light), - var(--surface) - ); - background-size: 200% 100%; - animation: shine 1.5s infinite; +.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; } -@keyframes shine { - 0% { - background-position: 200% 0; - } - - 100% { - background-position: -200% 0; - } +.video-card:hover { + border-color: var(--muted-foreground); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } -.skeleton-video { - height: 200px; +.thumbnail-container { + position: relative; + aspect-ratio: 16 / 9; + overflow: hidden; + background-color: var(--muted); } -.skeleton-title { - height: 20px; - margin: 10px 0; - width: 90%; +.thumbnail { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.2s; } -.skeleton-uploader { - height: 16px; - width: 60%; - margin-bottom: 8px; +.video-card:hover .thumbnail { + transform: scale(1.02); } -.skeleton-stats { - height: 14px; - width: 40%; +.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; + 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; + border-radius: 50%; + object-fit: cover; +} + +.video-stats { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 0.75rem; + color: var(--muted-foreground); +} + +.stat { + display: flex; + align-items: center; + gap: 0.25rem; } .video-player-container { display: flex; flex-direction: column; - gap: 24px; + gap: 1.5rem; } .player-wrapper { position: relative; - padding-bottom: 56.25%; - - height: 0; - overflow: hidden; + aspect-ratio: 16 / 9; + background-color: #000; border-radius: var(--radius); - background-color: black; - box-shadow: var(--shadow); + border: 1px solid var(--border); } -.player-wrapper iframe { - position: absolute; - top: 0; - left: 0; +.player-wrapper video { width: 100%; height: 100%; - border: none; + 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); } .video-detail { - background-color: var(--surface); - padding: 24px; + background-color: var(--card); + border: 1px solid var(--border); border-radius: var(--radius); - box-shadow: var(--shadow); + padding: 1.5rem; } .video-detail-title { font-size: 1.5rem; - margin-bottom: 16px; + font-weight: 700; + margin-bottom: 1rem; + line-height: 1.25; } .video-detail-meta { display: flex; justify-content: space-between; - align-items: center; - margin-bottom: 24px; - flex-wrap: wrap; - gap: 16px; + align-items: start; + margin-bottom: 1.5rem; + gap: 1rem; } .video-detail-uploader { display: flex; align-items: center; - gap: 12px; + gap: 0.75rem; + cursor: pointer; + transition: opacity 0.2s; +} + +.video-detail-uploader:hover { + opacity: 0.8; } .uploader-avatar-large { - width: 48px; - height: 48px; + width: 3rem; + height: 3rem; border-radius: 50%; object-fit: cover; } @@ -427,269 +413,63 @@ header { font-size: 1rem; } +.uploaded-date { + font-size: 0.875rem; + color: var(--muted-foreground); +} + .video-detail-stats { display: flex; - gap: 24px; + gap: 1.5rem; align-items: center; } .detail-stat { display: flex; align-items: center; - gap: 8px; - color: var(--text-secondary); + gap: 0.5rem; + color: var(--muted-foreground); + 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; +.video-description { + color: var(--muted-foreground); + line-height: 1.6; + font-size: 0.875rem; } .search-heading { - margin-bottom: 16px; + margin-bottom: 1.5rem; display: flex; align-items: center; - gap: 12px; + gap: 0.75rem; } .search-query { font-size: 1.5rem; - font-weight: 500; - letter-spacing: 0.3px; - color: var(--text-primary); + font-weight: 700; } .search-count { - font-size: 0.9rem; - color: var(--text-secondary); - background-color: var(--surface-light); - padding: 4px 8px; - border-radius: 4px; -} - -.no-results { - text-align: center; - padding: 40px 0; - color: var(--text-secondary); - font-size: 1.1rem; -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(20px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - -.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%; - background-color: rgba(0, 0, 0, 0.9); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - z-index: 10; - border-radius: var(--radius); -} - -.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: var(--transition); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -} - -.reload-button:hover { - background-color: var(--hover-overlay); - transform: translateY(-2px); -} - -@keyframes shimmer { - 100% { - transform: translateX(100%); - } -} - -.loading-container { - display: flex; - justify-content: center; - align-items: center; - height: 60vh; -} - -.loader { - width: 48px; - height: 48px; - border: 5px solid var(--surface-light); - border-bottom-color: var(--primary); - border-radius: 50%; - animation: rotation 1s linear infinite; -} - -@keyframes rotation { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -@media (max-width: 768px) { - .trending-grid, - .search-grid { - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - } - - .video-detail-meta { - flex-direction: column; - 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; - } + font-size: 0.875rem; + color: var(--muted-foreground); + background-color: var(--muted); + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; } .channel-header { + background-color: var(--card); + border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; - margin-bottom: 32px; - background-color: var(--surface); - box-shadow: var(--shadow); + margin-bottom: 2rem; } .channel-banner-container { - position: relative; - height: 150px; + height: 10rem; + background-color: var(--muted); overflow: hidden; - background-color: var(--surface-light); } .channel-banner { @@ -699,105 +479,218 @@ header { } .channel-info { + padding: 1.5rem; display: flex; - padding: 24px; - position: relative; - gap: 20px; + gap: 1rem; } .channel-avatar-container { flex-shrink: 0; + margin-top: -2rem; } .channel-avatar { - width: 80px; - height: 80px; + width: 5rem; + height: 5rem; border-radius: 50%; - border: 3px solid var(--surface); - box-shadow: var(--shadow); - background-color: var(--surface-light); + border: 3px solid var(--background); + background-color: var(--muted); } .channel-details { - flex-grow: 1; + flex: 1; } .channel-title-container { display: flex; align-items: center; - gap: 8px; - margin-bottom: 8px; + gap: 0.5rem; + margin-bottom: 0.5rem; } .channel-title { font-size: 1.5rem; - font-weight: 500; - letter-spacing: 0.3px; + font-weight: 700; } .channel-verified { - color: var(--text-secondary); - font-size: 1.1rem; + color: var(--muted-foreground); } .channel-stats { - color: var(--text-secondary); - font-size: 0.9rem; - margin-bottom: 16px; + color: var(--muted-foreground); + font-size: 0.875rem; + margin-bottom: 1rem; } .channel-description { - color: var(--text-primary); - line-height: 1.5; - font-size: 0.95rem; + color: var(--muted-foreground); + line-height: 1.6; + font-size: 0.875rem; white-space: pre-line; - max-height: 100px; + max-height: 6rem; 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; + margin-top: 2rem; } .load-more-button { - background-color: var(--surface); - color: var(--text-primary); - border: none; - padding: 12px 24px; + display: inline-flex; + align-items: center; + justify-content: center; + height: 2.5rem; + padding: 0 1.5rem; + 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; - font-size: 1rem; - transition: var(--transition); - box-shadow: var(--shadow); + transition: background-color 0.2s; } .load-more-button:hover { - background-color: var(--surface-light); - transform: translateY(-2px); + background-color: var(--accent); } -.load-more-error { - color: #ff5555; - background-color: rgba(255, 85, 85, 0.1); +.section-title { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: 1.5rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid var(--border); +} + +.loading-container { + display: flex; + justify-content: center; + align-items: center; + min-height: 20rem; +} + +.loader { + width: 2rem; + height: 2rem; + border: 2px solid var(--muted); + border-top: 2px solid var(--foreground); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.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); - padding: 12px 24px; +} + +@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; - cursor: pointer; + 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; + } + + .video-detail-meta { + flex-direction: column; + align-items: flex-start; + } + + .video-detail-stats { + flex-wrap: wrap; + } + .channel-info { flex-direction: column; align-items: center; @@ -805,24 +698,20 @@ header { } .channel-avatar-container { - 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)); + margin-top: -3rem; } } @media (max-width: 480px) { - .channel-videos-grid { + + .trending-grid, + .search-grid, + .channel-videos-grid, + .related-grid { grid-template-columns: 1fr; } -} + + .video-detail-title { + font-size: 1.25rem; + } +} \ No newline at end of file diff --git a/public/script.js b/public/trending.js similarity index 58% rename from public/script.js rename to public/trending.js index d4a3039..76e2374 100644 --- a/public/script.js +++ b/public/trending.js @@ -1,23 +1,7 @@ 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"); @@ -26,8 +10,6 @@ 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"); @@ -39,60 +21,49 @@ 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"); - 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 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(); } + } - fromPage.classList.add("zoom-out"); + function formatDuration(seconds) { + const hours = Math.floor(seconds / 3600); + const minutes = Math.floor((seconds % 3600) / 60); + const secs = seconds % 60; - setTimeout(() => { - fromPage.classList.remove("active"); - fromPage.classList.remove("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")}`; + } + } - toPage.classList.add("zoom-in"); - toPage.classList.add("active"); - - requestAnimationFrame(() => { - requestAnimationFrame(() => { - toPage.classList.remove("zoom-in"); - }); - }); - }, 300); + 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 getHashParams() { @@ -125,118 +96,45 @@ document.addEventListener("DOMContentLoaded", () => { } } - function cleanupResources() { - if (activeWs && activeWs.readyState === WebSocket.OPEN) { - activeWs.close(); - activeWs = null; - } + function switchPage(fromPageId, toPageId) { + const fromPage = document.getElementById(fromPageId); + const toPage = document.getElementById(toPageId); - if (hlsInstance) { - hlsInstance.destroy(); - hlsInstance = null; - } + if (!fromPage || !toPage) return; - if (player) { - player.destroy(); - player = null; - } + fromPage.classList.add("zoom-out"); - prepareInProgress = false; + 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); } - function getVideoElement() { - const existingVideo = playerWrapper.querySelector("video"); - if (existingVideo) { - existingVideo.remove(); + 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"; - 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); + if (container === trendingGrid) { 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) => { @@ -261,81 +159,12 @@ document.addEventListener("DOMContentLoaded", () => { }); }; - 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 openVideoPlayer(video) { + sessionStorage.setItem("currentVideo", JSON.stringify(video)); + sessionStorage.setItem("lastSearchQuery", lastSearchQuery); - 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`; - } + const videoId = video.url.replace("/watch?v=", ""); + window.location.href = `video.html?v=${videoId}`; } function createVideoCard(video, index) { @@ -375,8 +204,7 @@ document.addEventListener("DOMContentLoaded", () => { uploadTime.textContent = video.uploadedDate || "Unknown date"; videoCard.style.animationDelay = `${index * 0.05}s`; - - videoCard.addEventListener("click", (e) => { + videoCard.addEventListener("click", async (e) => { if ( e.target === uploaderAvatar || e.target === uploaderName || @@ -384,17 +212,19 @@ document.addEventListener("DOMContentLoaded", () => { ) { e.stopPropagation(); if (video.uploaderUrl) { - openChannelPage(video.uploaderUrl.replace("/channel/", "")); + const username = video.uploaderUrl; + openChannelPage(username); } } else { openVideoPlayer(video); } }); - uploader.addEventListener("click", (e) => { + uploader.addEventListener("click", async (e) => { e.stopPropagation(); if (video.uploaderUrl) { - openChannelPage(video.uploaderUrl.replace("/channel/", "")); + const username = video.uploaderUrl; + openChannelPage(username); } }); } catch (error) { @@ -416,6 +246,8 @@ document.addEventListener("DOMContentLoaded", () => { const videos = await response.json(); + sessionStorage.setItem("trendingVideos", JSON.stringify(videos)); + showSkeletons(trendingGrid); setTimeout(() => { @@ -436,12 +268,12 @@ document.addEventListener("DOMContentLoaded", () => { trendingLoader.style.display = "none"; trendingGrid.style.display = "block"; trendingGrid.innerHTML = ` -
- -

Error loading videos. Please try again later.

-

${error.message}

-
- `; +
+ +

Failed to load videos

+

Please try again later.

+
+ `; } } @@ -449,13 +281,10 @@ 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"); } @@ -484,8 +313,11 @@ 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` ); @@ -495,11 +327,12 @@ document.addEventListener("DOMContentLoaded", () => { searchLoader.style.display = "none"; searchGrid.style.display = "block"; searchGrid.innerHTML = ` -
- -

No video results found for "${lastSearchQuery}"

-
- `; +
+ +

No videos found

+

No video results found for "${lastSearchQuery}"

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

Error searching videos. Please try again later.

-

${error.message}

-
- `; +
+ +

Search failed

+

Error searching videos. Please try again later.

+
+ `; } } - function initializePlayer(streamUrl) { - const videoElement = getVideoElement(); + function goToTrendingPage() { + updateHash(); - 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"); + if (searchResultsPage.classList.contains("active")) { + switchPage("search-results-page", "trending-page"); } else if (channelPage.classList.contains("active")) { - switchPage("channel-page", "video-player-page"); + switchPage("channel-page", "trending-page"); } - window.scrollTo(0, 0); - - const videoId = video.url.replace("/watch?v=", ""); - updateHash({ videoId }); - - activeVideoId = videoId; - - prepareVideo(video.url); - - fetchRelatedVideos(video); + fetchTrendingVideos(); } - - 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 { - if (channelId === activeChannelId) { + const resolvedChannelId = await resolveChannelId(channelId); + + if (resolvedChannelId === activeChannelId) { return; } - activeChannelId = channelId; - + activeChannelId = resolvedChannelId; channelNextPageData = null; updateHash({ channelId }); @@ -742,8 +389,6 @@ 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"; @@ -756,11 +401,23 @@ document.addEventListener("DOMContentLoaded", () => { channelAvatar.src = ""; channelBanner.src = ""; channelVerified.style.display = "none"; + let finalChannelId = channelId; - const url = `https://pipedapi.wireway.ch/channel/${channelId}`; - console.log(`Fetching channel data from: ${url}`); + if (!channelId.startsWith("UC")) { + const url = `/api/channel/${channelId.replace("/channel/","")}`; + console.log(`Resolving channel ID from: ${url}`); - const response = await fetch(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); if (!response.ok) { throw new Error(`Network response was not ok: ${response.status}`); @@ -846,11 +503,12 @@ document.addEventListener("DOMContentLoaded", () => { } } else { channelVideosGrid.innerHTML = ` -
- -

No videos available

-
- `; +
+ +

No videos available

+

This channel hasn't uploaded any videos yet.

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

Error loading channel. Please try again later.

-

${error.message}

-
- `; +
+ +

Failed to load channel

+

Error loading channel. Please try again later.

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

Error loading more videos. Click to try again.

+
+ `; - setTimeout(() => { + loadMoreContainer.addEventListener("click", () => { loadMoreContainer.innerHTML = ` - - - `; - + + + `; document .getElementById("channel-load-more-button") .addEventListener("click", loadMoreChannelVideos); - }, 3000); + }); } finally { document.getElementById("channel-load-more-spinner").style.display = "none"; @@ -963,6 +622,27 @@ 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 ( @@ -987,14 +667,6 @@ document.addEventListener("DOMContentLoaded", () => { .addEventListener("click", loadMoreChannelVideos); } - function openChannelPage(channelId) { - if (videoPlayerPage.classList.contains("active")) { - cleanupResources(); - } - - fetchChannelData(channelId); - } - logo.addEventListener("click", () => { goToTrendingPage(); }); @@ -1009,6 +681,37 @@ 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/video.html b/public/video.html new file mode 100644 index 0000000..ed4ed87 --- /dev/null +++ b/public/video.html @@ -0,0 +1,152 @@ + + + + + + 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 new file mode 100644 index 0000000..58c3fc4 --- /dev/null +++ b/public/video.js @@ -0,0 +1,534 @@ +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 f53204a..6ccac35 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. ffmpeg and yt-dlp are provided in the deps folder. +Repiped supports Windows and Linux operating systems. 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 new file mode 100644 index 0000000..c78f100 --- /dev/null +++ b/routes/channel.js @@ -0,0 +1,41 @@ +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 beccacb..c2c269a 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,32 +10,36 @@ 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: `/channel/${video.author.url}`, - uploaderAvatar: `/api/avatar/${video.author.url.replace("https://youtube.com/", "")}.png`, + uploaderUrl: `${video.author.url.replace( + "https://youtube.com/", + "" + )}`, + 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(), - uploaderVerified: false, - isShort: video.duration.seconds < 60 + 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");