forked from obvtiger/repiped
inital release
This commit is contained in:
obvtiger
commit
1d708c14cf
26 changed files with 34335 additions and 0 deletions
6
.env.example
Normal file
6
.env.example
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
# Server Configuration
|
||||||
|
PORT=3000
|
||||||
|
|
||||||
|
# Video Caching Configuration
|
||||||
|
# Set to true to keep video files permanently, false to delete unused videos after 10 minutes
|
||||||
|
ENABLE_CACHING=true
|
||||||
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
deps/* filter=lfs diff=lfs merge=lfs -text
|
||||||
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
cookies.txt
|
||||||
|
node_modules/
|
||||||
|
videohost/
|
||||||
|
cache/
|
||||||
|
.env
|
||||||
23
Dockerfile
Normal file
23
Dockerfile
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
FROM node
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
RUN npm install
|
||||||
|
|
||||||
|
RUN apt update -y
|
||||||
|
RUN apt install python3 -y
|
||||||
|
RUN apt install ffmpeg -y
|
||||||
|
|
||||||
|
COPY deps/ ./deps/
|
||||||
|
COPY public/ ./public/
|
||||||
|
COPY server.js ./
|
||||||
|
COPY middleware/ ./middleware/
|
||||||
|
COPY routes/ ./routes/
|
||||||
|
COPY cookies.txt ./
|
||||||
|
|
||||||
|
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
CMD ["node", "server.js"]
|
||||||
BIN
bun.lockb
Normal file
BIN
bun.lockb
Normal file
Binary file not shown.
BIN
deps/yt-dlp
(Stored with Git LFS)
vendored
Normal file
BIN
deps/yt-dlp
(Stored with Git LFS)
vendored
Normal file
Binary file not shown.
BIN
deps/yt-dlp.exe
(Stored with Git LFS)
vendored
Normal file
BIN
deps/yt-dlp.exe
(Stored with Git LFS)
vendored
Normal file
Binary file not shown.
BIN
deps/yt-dlp_linux_aarch64
(Stored with Git LFS)
vendored
Normal file
BIN
deps/yt-dlp_linux_aarch64
(Stored with Git LFS)
vendored
Normal file
Binary file not shown.
BIN
deps/yt-dlp_linux_armv7l
(Stored with Git LFS)
vendored
Normal file
BIN
deps/yt-dlp_linux_armv7l
(Stored with Git LFS)
vendored
Normal file
Binary file not shown.
114
middleware/cacheManager.js
Normal file
114
middleware/cacheManager.js
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
const fs = require("fs");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
const videoAccessLog = new Map();
|
||||||
|
|
||||||
|
const CACHE_TIMEOUT = 10 * 60 * 1000;
|
||||||
|
|
||||||
|
function createCacheManager() {
|
||||||
|
setInterval(cleanupUnusedVideos, 5 * 60 * 1000);
|
||||||
|
|
||||||
|
setTimeout(cleanupUnusedVideos, 30 * 1000);
|
||||||
|
|
||||||
|
scanExistingVideos();
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
`Video caching ${
|
||||||
|
process.env.ENABLE_CACHING === "true" ? "enabled" : "disabled"
|
||||||
|
}`
|
||||||
|
);
|
||||||
|
|
||||||
|
return function cacheMiddleware(req, res, next) {
|
||||||
|
if (req.path.startsWith("/videocd/")) {
|
||||||
|
const pathParts = req.path.split("/").filter(Boolean);
|
||||||
|
if (pathParts.length >= 2) {
|
||||||
|
const videoId = pathParts[1];
|
||||||
|
videoAccessLog.set(videoId, Date.now());
|
||||||
|
console.log(`Video ${videoId} accessed at ${new Date().toISOString()}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
next();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function scanExistingVideos() {
|
||||||
|
const videoHostDir = path.join(process.cwd(), "videohost");
|
||||||
|
|
||||||
|
if (!fs.existsSync(videoHostDir)) {
|
||||||
|
console.log("Video directory does not exist yet");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const videoDirs = fs.readdirSync(videoHostDir);
|
||||||
|
const now = Date.now();
|
||||||
|
|
||||||
|
for (const videoId of videoDirs) {
|
||||||
|
const videoDir = path.join(videoHostDir, videoId);
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (fs.statSync(videoDir).isDirectory()) {
|
||||||
|
videoAccessLog.set(videoId, now);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error checking directory ${videoId}: ${err.message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
`Found and tracking ${videoAccessLog.size} existing video directories`
|
||||||
|
);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error scanning video directory: ${err.message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function cleanupUnusedVideos() {
|
||||||
|
const isCachingEnabled = process.env.ENABLE_CACHING === "true";
|
||||||
|
|
||||||
|
if (isCachingEnabled) {
|
||||||
|
console.log("Video caching is enabled, skipping cleanup");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Running video cache cleanup check");
|
||||||
|
const now = Date.now();
|
||||||
|
const videoHostDir = path.join(process.cwd(), "videohost");
|
||||||
|
|
||||||
|
if (!fs.existsSync(videoHostDir)) {
|
||||||
|
console.log("Video directory does not exist, nothing to clean up");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const videoDirs = fs.readdirSync(videoHostDir);
|
||||||
|
|
||||||
|
for (const videoId of videoDirs) {
|
||||||
|
const lastAccess = videoAccessLog.get(videoId) || 0;
|
||||||
|
const timeSinceAccess = now - lastAccess;
|
||||||
|
|
||||||
|
if (timeSinceAccess > CACHE_TIMEOUT) {
|
||||||
|
const videoDir = path.join(videoHostDir, videoId);
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (fs.statSync(videoDir).isDirectory()) {
|
||||||
|
console.log(
|
||||||
|
`Removing unused video directory: ${videoId} (last accessed ${Math.floor(
|
||||||
|
timeSinceAccess / 60000
|
||||||
|
)} minutes ago)`
|
||||||
|
);
|
||||||
|
fs.rmSync(videoDir, { recursive: true, force: true });
|
||||||
|
videoAccessLog.delete(videoId);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error deleting directory ${videoId}: ${err.message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error during video cache cleanup: ${err.message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = createCacheManager;
|
||||||
1704
package-lock.json
generated
Normal file
1704
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
12
package.json
Normal file
12
package.json
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.9.0",
|
||||||
|
"cheerio": "^1.0.0",
|
||||||
|
"dotenv": "^16.5.0",
|
||||||
|
"express": "^5.1.0",
|
||||||
|
"express-ws": "^5.0.2",
|
||||||
|
"morgan": "^1.10.0",
|
||||||
|
"puppeteer": "^24.7.2",
|
||||||
|
"yt-search": "^2.6.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
22521
public/hls.min.js
vendored
Normal file
22521
public/hls.min.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
180
public/index.html
Normal file
180
public/index.html
Normal file
|
|
@ -0,0 +1,180 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Repiped</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
|
||||||
|
<link rel="stylesheet" href="plyr.min.css" />
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="logo" id="logo">
|
||||||
|
<i class="fas fa-play logo-icon"></i>
|
||||||
|
<h1>Repiped</h1>
|
||||||
|
</div>
|
||||||
|
<div class="search-bar">
|
||||||
|
<input type="text" class="search-input" id="search-input" placeholder="Search for videos..." />
|
||||||
|
<button class="search-button" id="search-button">
|
||||||
|
<i class="fas fa-search"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<a href="https://git.eplg.services/obvtiger/repiped" target="_blank" class="github-button" title="View source code">
|
||||||
|
<i class="fas fa-code-branch"></i>
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="page active" id="trending-page">
|
||||||
|
<div id="trending-content">
|
||||||
|
<div class="loading-container" id="trending-loader">
|
||||||
|
<div class="loader"></div>
|
||||||
|
</div>
|
||||||
|
<div class="trending-grid" id="trending-grid" style="display: none"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page" id="search-results-page">
|
||||||
|
<div class="search-heading">
|
||||||
|
<h2 class="search-query" id="search-query">Search Results</h2>
|
||||||
|
<span class="search-count" id="search-count">0 results</span>
|
||||||
|
</div>
|
||||||
|
<div id="search-content">
|
||||||
|
<div class="loading-container" id="search-loader">
|
||||||
|
<div class="loader"></div>
|
||||||
|
</div>
|
||||||
|
<div class="search-grid" id="search-grid" style="display: none"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page" id="channel-page">
|
||||||
|
<div class="channel-header">
|
||||||
|
<div class="channel-banner-container">
|
||||||
|
<img class="channel-banner" id="channel-banner" src="" alt="Channel banner" />
|
||||||
|
</div>
|
||||||
|
<div class="channel-info">
|
||||||
|
<div class="channel-avatar-container">
|
||||||
|
<img class="channel-avatar" id="channel-avatar" src="" alt="Channel avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="channel-details">
|
||||||
|
<div class="channel-title-container">
|
||||||
|
<h1 class="channel-title" id="channel-title"></h1>
|
||||||
|
<span class="channel-verified" id="channel-verified" style="display: none"><i
|
||||||
|
class="fas fa-check-circle"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="channel-stats">
|
||||||
|
<span class="channel-subs" id="channel-subs"></span>
|
||||||
|
</div>
|
||||||
|
<div class="channel-description" id="channel-description"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="channel-content">
|
||||||
|
<div class="loading-container" id="channel-loader">
|
||||||
|
<div class="loader"></div>
|
||||||
|
</div>
|
||||||
|
<div class="channel-videos-grid" id="channel-videos-grid" style="display: none"></div>
|
||||||
|
<div class="load-more-container" id="channel-load-more" style="display: none">
|
||||||
|
<div class="loader" id="channel-load-more-spinner" style="display: none"></div>
|
||||||
|
<button class="load-more-button" id="channel-load-more-button">
|
||||||
|
Load More
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page" id="video-player-page">
|
||||||
|
<div class="video-player-container">
|
||||||
|
<div class="player-wrapper" id="player-wrapper">
|
||||||
|
<div id="preparation-overlay" class="preparation-overlay">
|
||||||
|
<div class="preparation-status" id="preparation-status">
|
||||||
|
Preparing video...
|
||||||
|
</div>
|
||||||
|
<div class="preparation-progress-container">
|
||||||
|
<div class="preparation-progress-bar" id="preparation-progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
<button class="reload-button" id="reload-button" style="display: none">
|
||||||
|
Reload Page
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="video-detail">
|
||||||
|
<h1 class="video-detail-title" id="detail-title"></h1>
|
||||||
|
<div class="video-detail-meta">
|
||||||
|
<div class="video-detail-uploader">
|
||||||
|
<img class="uploader-avatar-large" id="detail-avatar" src="" alt="Uploader avatar" />
|
||||||
|
<div class="uploader-info">
|
||||||
|
<span class="uploader-name" id="detail-uploader"></span>
|
||||||
|
<span class="uploaded-date" id="detail-uploaded"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="video-detail-stats">
|
||||||
|
<div class="detail-stat">
|
||||||
|
<i class="fas fa-eye"></i>
|
||||||
|
<span id="detail-views"></span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-stat">
|
||||||
|
<i class="fas fa-clock"></i>
|
||||||
|
<span id="detail-duration"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="video-description" id="detail-description"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="related-videos">
|
||||||
|
<h2 class="section-title">Watch More</h2>
|
||||||
|
<div class="related-grid" id="related-grid"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template id="video-card-template">
|
||||||
|
<div class="video-card animated-item">
|
||||||
|
<div class="thumbnail-container">
|
||||||
|
<img class="thumbnail" src="" alt="Video thumbnail" />
|
||||||
|
<span class="duration"></span>
|
||||||
|
</div>
|
||||||
|
<div class="video-info">
|
||||||
|
<h3 class="video-title"></h3>
|
||||||
|
<div class="video-meta">
|
||||||
|
<div class="uploader">
|
||||||
|
<img class="uploader-avatar" src="" alt="Uploader avatar" />
|
||||||
|
<span class="uploader-name"></span>
|
||||||
|
</div>
|
||||||
|
<div class="video-stats">
|
||||||
|
<span class="stat views">
|
||||||
|
<i class="fas fa-eye"></i>
|
||||||
|
<span class="view-count"></span>
|
||||||
|
</span>
|
||||||
|
<span class="stat uploaded">
|
||||||
|
<i class="fas fa-clock"></i>
|
||||||
|
<span class="upload-time"></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template id="skeleton-template">
|
||||||
|
<div class="video-card animated-item">
|
||||||
|
<div class="skeleton skeleton-video"></div>
|
||||||
|
<div class="video-info">
|
||||||
|
<div class="skeleton skeleton-title"></div>
|
||||||
|
<div class="skeleton skeleton-uploader"></div>
|
||||||
|
<div class="skeleton skeleton-stats"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="plyr.min.js"></script>
|
||||||
|
<script src="hls.min.js"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
1410
public/plyr.min.css
vendored
Normal file
1410
public/plyr.min.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
5609
public/plyr.min.js
vendored
Normal file
5609
public/plyr.min.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
1015
public/script.js
Normal file
1015
public/script.js
Normal file
File diff suppressed because it is too large
Load diff
836
public/style.css
Normal file
836
public/style.css
Normal file
|
|
@ -0,0 +1,836 @@
|
||||||
|
:root {
|
||||||
|
--background: #000000;
|
||||||
|
--surface: #0f0f0f;
|
||||||
|
--surface-light: #1a1a1a;
|
||||||
|
--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: 4px;
|
||||||
|
--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(--text-primary);
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: var(--surface);
|
||||||
|
padding: 12px 16px;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo h1 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-icon {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex: 1;
|
||||||
|
max-width: 500px;
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-button {
|
||||||
|
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(--hover-overlay);
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-button {
|
||||||
|
display: 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: 1.1rem;
|
||||||
|
transition: var(--transition);
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-button:hover {
|
||||||
|
background-color: var(--hover-overlay);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 24px;
|
||||||
|
perspective: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.trending-grid,
|
||||||
|
.search-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
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;
|
||||||
|
-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 {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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));
|
||||||
|
}
|
||||||
|
|
||||||
|
.page.zoom-in {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1.05);
|
||||||
|
filter: blur(var(--blur-amount));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.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;
|
||||||
|
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: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-wrapper {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 56.25%;
|
||||||
|
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background-color: black;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-wrapper iframe {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-detail {
|
||||||
|
background-color: var(--surface);
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-detail-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-detail-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-detail-uploader {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploader-avatar-large {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploader-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploader-name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-detail-stats {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-stat {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-query {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
margin-top: -40px;
|
||||||
|
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;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.channel-videos-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
106
readme.md
Normal file
106
readme.md
Normal file
|
|
@ -0,0 +1,106 @@
|
||||||
|
# RePiped
|
||||||
|
|
||||||
|
RePiped is an alternative frontend for YouTube, inspired by the Piped project. It provides a privacy-focused way to watch YouTube content with additional features.
|
||||||
|
|
||||||
|
This was made because piped is not working reliably anymore.
|
||||||
|
Repiped uses yt-dlp to fetch the videos and ffmpeg to stream them.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- 🎥 Watch YouTube videos without tracking
|
||||||
|
- 📦 Video caching for faster playback and reduced bandwidth usage
|
||||||
|
- 🍪 Cookie utilization for authenticated features
|
||||||
|
- 🔒 Privacy-focused
|
||||||
|
- 🚀 Fast and beautiful interface
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
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
|
||||||
|
1. Clone this repo and fetch all lfs objects
|
||||||
|
```bash
|
||||||
|
git clone https://git.eplg.services/obvtiger/repiped.git
|
||||||
|
cd repiped
|
||||||
|
git lfs fetch --all
|
||||||
|
```
|
||||||
|
Make sure that the `ffmpeg` and `yt-dlp` binaries are in the `deps` folder.
|
||||||
|
Otherwise try to download the binaries from this repo and manually placing them into the deps directory.
|
||||||
|
|
||||||
|
2. Install all node dependencies
|
||||||
|
```bash
|
||||||
|
npm i
|
||||||
|
```
|
||||||
|
or
|
||||||
|
```bash
|
||||||
|
bun i
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Configure your environment variables in a `.env` file
|
||||||
|
|
||||||
|
4. Export the cookies of a YouTube account using the cookies.txt extension on chrome or firefox and place it into a cookies.txt file next to the `server.js`
|
||||||
|
|
||||||
|
5. Run the server
|
||||||
|
```bash
|
||||||
|
node server.js
|
||||||
|
```
|
||||||
|
|
||||||
|
6. Open your browser and navigate to `http://localhost:3000`
|
||||||
|
|
||||||
|
### Running inside Docker
|
||||||
|
|
||||||
|
1. Clone this repo and fetch all lfs objects
|
||||||
|
```bash
|
||||||
|
git clone https://git.eplg.services/obvtiger/repiped.git
|
||||||
|
cd repiped
|
||||||
|
git lfs fetch --all
|
||||||
|
```
|
||||||
|
Make sure that the `ffmpeg` and `yt-dlp` binaries are in the `deps` folder.
|
||||||
|
Otherwise try to download the binaries from this repo and manually placing them into the deps directory.
|
||||||
|
|
||||||
|
2. Configure your environment variables in a `.env` file
|
||||||
|
|
||||||
|
3. Export the cookies of a YouTube account using the cookies.txt extension on chrome or firefox and place it into a cookies.txt file next to the `server.js`
|
||||||
|
|
||||||
|
4. Build the docker image
|
||||||
|
```bash
|
||||||
|
docker build -t repiped .
|
||||||
|
```
|
||||||
|
|
||||||
|
6. Run the docker container
|
||||||
|
```bash
|
||||||
|
docker run -d -p 3000:3000 repiped
|
||||||
|
```
|
||||||
|
|
||||||
|
## Technical Details
|
||||||
|
|
||||||
|
- Uses YouTube cookies for authenticated features while protecting user privacy
|
||||||
|
- Implements video caching system to improve performance
|
||||||
|
- Built with privacy and efficiency in mind
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
This project is under active development. Contributions are welcome!
|
||||||
|
|
||||||
|
## Disclaimer
|
||||||
|
|
||||||
|
Run this at your own risk!
|
||||||
|
Generally running this is legally safe. It is just a frontend for YouTube with a builtin proxy with caching capabilities. If you are not sure, turn off caching in the `.env`.
|
||||||
|
|
||||||
|
## Disclaimer
|
||||||
|
|
||||||
|
This project is not affiliated with YouTube or Google. It is an independent alternative frontend.
|
||||||
|
|
||||||
|
## Environment Configuration
|
||||||
|
|
||||||
|
The application can be configured using environment variables in a `.env` file:
|
||||||
|
|
||||||
|
| Variable | Description | Default |
|
||||||
|
|----------|-------------|---------|
|
||||||
|
| PORT | The port the server will listen on | 3000 |
|
||||||
|
| ENABLE_CACHING | Enable/disable video caching | true |
|
||||||
|
|
||||||
|
### Video Caching
|
||||||
|
|
||||||
|
When `ENABLE_CACHING` is set to `false`, video directories that haven't been accessed for 10 minutes will be automatically deleted to save disk space. When set to `true`, all downloaded videos will be kept permanently.
|
||||||
132
routes/avatar.js
Normal file
132
routes/avatar.js
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
const axios = require('axios');
|
||||||
|
const cheerio = require('cheerio');
|
||||||
|
|
||||||
|
const avatarCache = new Map();
|
||||||
|
const pendingFetches = new Map();
|
||||||
|
const CACHE_TTL = 24 * 60 * 60 * 1000;
|
||||||
|
|
||||||
|
async function fetchAvatarImage(channelId) {
|
||||||
|
try {
|
||||||
|
|
||||||
|
const channelUrl = `https://www.youtube.com/${channelId.startsWith('UC') ? 'channel/' : ''}${channelId}`;
|
||||||
|
|
||||||
|
console.log("loading" + channelUrl);
|
||||||
|
const htmlResponse = await axios.get(channelUrl, {
|
||||||
|
headers: {
|
||||||
|
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const $ = cheerio.load(htmlResponse.data);
|
||||||
|
const imageUrl = $('meta[property="og:image"]').attr('content');
|
||||||
|
|
||||||
|
if (!imageUrl) {
|
||||||
|
throw new Error('Profile picture URL not found in page');
|
||||||
|
}
|
||||||
|
|
||||||
|
const imageResponse = await axios.get(imageUrl, {
|
||||||
|
responseType: 'arraybuffer',
|
||||||
|
headers: {
|
||||||
|
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const buffer = Buffer.from(imageResponse.data);
|
||||||
|
const contentType = imageResponse.headers['content-type'] || 'image/jpeg';
|
||||||
|
|
||||||
|
avatarCache.set(channelId, {
|
||||||
|
buffer,
|
||||||
|
contentType,
|
||||||
|
timestamp: Date.now()
|
||||||
|
});
|
||||||
|
|
||||||
|
return { buffer, contentType };
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error(`Failed to fetch avatar: ${error.message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function avatarRouteHandler(app) {
|
||||||
|
app.get("/api/avatar/:channelId.png", async (req, res) => {
|
||||||
|
try {
|
||||||
|
let channelId = req.params.channelId;
|
||||||
|
if (!channelId) {
|
||||||
|
return res.status(400).json({ error: "Invalid channel ID" });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!channelId.startsWith('UC') && !channelId.startsWith('@')) {
|
||||||
|
channelId = `@${channelId}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const cached = avatarCache.get(channelId);
|
||||||
|
if (cached && (Date.now() - cached.timestamp) < CACHE_TTL) {
|
||||||
|
console.log(`Cache hit for ${channelId}`);
|
||||||
|
res.set('Content-Type', cached.contentType);
|
||||||
|
return res.send(cached.buffer);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pendingFetches.has(channelId)) {
|
||||||
|
console.log(`Awaiting pending fetch for ${channelId}`);
|
||||||
|
const { buffer, contentType } = await pendingFetches.get(channelId);
|
||||||
|
res.set('Content-Type', contentType);
|
||||||
|
return res.send(buffer);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`Fetching avatar for ${channelId}`);
|
||||||
|
const fetchPromise = fetchAvatarImage(channelId);
|
||||||
|
pendingFetches.set(channelId, fetchPromise);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { buffer, contentType } = await fetchPromise;
|
||||||
|
res.set('Content-Type', contentType);
|
||||||
|
res.send(buffer);
|
||||||
|
} finally {
|
||||||
|
pendingFetches.delete(channelId);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error fetching avatar: ${err.message} ${err.stack}`);
|
||||||
|
res.status(500).json({ error: "Error fetching avatar" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get("/api/avatar/channel/:channelId.png", async (req, res) => {
|
||||||
|
try {
|
||||||
|
let channelId = req.params.channelId;
|
||||||
|
if (!channelId && !channelId.startsWith('UC')) {
|
||||||
|
return res.status(400).json({ error: "Invalid channel ID" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const cached = avatarCache.get(channelId);
|
||||||
|
if (cached && (Date.now() - cached.timestamp) < CACHE_TTL) {
|
||||||
|
console.log(`Cache hit for ${channelId}`);
|
||||||
|
res.set('Content-Type', cached.contentType);
|
||||||
|
return res.send(cached.buffer);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pendingFetches.has(channelId)) {
|
||||||
|
console.log(`Awaiting pending fetch for ${channelId}`);
|
||||||
|
const { buffer, contentType } = await pendingFetches.get(channelId);
|
||||||
|
res.set('Content-Type', contentType);
|
||||||
|
return res.send(buffer);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`Fetching avatar for ${channelId}`);
|
||||||
|
const fetchPromise = fetchAvatarImage(channelId);
|
||||||
|
pendingFetches.set(channelId, fetchPromise);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { buffer, contentType } = await fetchPromise;
|
||||||
|
res.set('Content-Type', contentType);
|
||||||
|
res.send(buffer);
|
||||||
|
} finally {
|
||||||
|
pendingFetches.delete(channelId);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error fetching avatar: ${err.message} ${err.stack}`);
|
||||||
|
res.status(500).json({ error: "Error fetching avatar" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = avatarRouteHandler;
|
||||||
431
routes/prepare.js
Normal file
431
routes/prepare.js
Normal file
|
|
@ -0,0 +1,431 @@
|
||||||
|
const fs = require("fs");
|
||||||
|
const path = require("path");
|
||||||
|
const { exec } = require("child_process");
|
||||||
|
const isWindows = process.platform === "win32";
|
||||||
|
const isArm = process.arch === "arm" || process.arch === "arm64";
|
||||||
|
const isAarch64 = process.arch === "arm64";
|
||||||
|
|
||||||
|
const ytDlpPath = path.join(
|
||||||
|
"deps",
|
||||||
|
isWindows ? "yt-dlp.exe" :
|
||||||
|
isArm ? (isAarch64 ? "yt-dlp_linux_aarch64" : "yt-dlp_linux_armv7l") :
|
||||||
|
"yt-dlp"
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!isWindows) {
|
||||||
|
fs.chmodSync(ytDlpPath, 0o755);
|
||||||
|
}
|
||||||
|
|
||||||
|
process.env.PATH = `${path.join(process.cwd(), "deps")}${path.delimiter}${process.env.PATH}`;
|
||||||
|
|
||||||
|
|
||||||
|
const activeVideoProcesses = new Map();
|
||||||
|
const PROCESS_TIMEOUT = 30 * 60 * 1000;
|
||||||
|
|
||||||
|
function logWithVideoId(videoId, message, isError = false) {
|
||||||
|
const timestamp = new Date().toISOString();
|
||||||
|
const logFn = isError ? console.error : console.log;
|
||||||
|
logFn(`[${timestamp}][${videoId || "NO_VIDEO_ID"}] ${message}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function processVideo(videoId) {
|
||||||
|
function updateProgress(percentage, state) {
|
||||||
|
if (activeVideoProcesses.has(videoId)) {
|
||||||
|
const processInfo = activeVideoProcesses.get(videoId);
|
||||||
|
processInfo.progress = percentage;
|
||||||
|
if (state) {
|
||||||
|
processInfo.state = state;
|
||||||
|
}
|
||||||
|
|
||||||
|
logWithVideoId(
|
||||||
|
videoId,
|
||||||
|
`Progress update: ${percentage.toFixed(2)}% (${
|
||||||
|
state || processInfo.state
|
||||||
|
})`
|
||||||
|
);
|
||||||
|
|
||||||
|
for (const client of processInfo.clients) {
|
||||||
|
if (client.ws.readyState === 1) {
|
||||||
|
client.ws.send(JSON.stringify({ preparing: percentage }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
logWithVideoId(videoId, "Starting video download");
|
||||||
|
updateProgress(0, "downloading");
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
try {
|
||||||
|
const videoDirectory = `videohost/${videoId}`;
|
||||||
|
if (!fs.existsSync(videoDirectory)) {
|
||||||
|
fs.mkdirSync(videoDirectory, { recursive: true });
|
||||||
|
}
|
||||||
|
const process = exec(
|
||||||
|
`${ytDlpPath} --cookies cookies.txt --force-ipv4 --prefer-insecure -f "bestvideo[ext=mp4][height<=1440][vcodec^=avc]+bestaudio[ext=m4a]" --merge-output-format mp4 -o "videohost/${videoId}.mp4" "https://youtube.com/watch?v=${videoId}"`
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
`${ytDlpPath} --cookies cookies.txt --force-ipv4 --prefer-insecure -f "bestvideo[ext=mp4][height<=1440][vcodec^=avc]+bestaudio[ext=m4a]" --merge-output-format mp4 -o "videohost/${videoId}.mp4" "https://youtube.com/watch?v=${videoId}"`
|
||||||
|
);
|
||||||
|
|
||||||
|
let isFirstDownload = true;
|
||||||
|
let currentDestination = "";
|
||||||
|
|
||||||
|
process.stdout.on("data", (data) => {
|
||||||
|
const output = data.toString();
|
||||||
|
|
||||||
|
if (output.includes("[download] Destination:")) {
|
||||||
|
isFirstDownload = !currentDestination;
|
||||||
|
currentDestination = output;
|
||||||
|
}
|
||||||
|
|
||||||
|
const match = output.match(/\[download\]\s+(\d+\.\d+)% of/);
|
||||||
|
if (match) {
|
||||||
|
let percentage = parseFloat(match[1]);
|
||||||
|
if (!isFirstDownload) {
|
||||||
|
percentage = 72 + percentage * 0.08;
|
||||||
|
} else {
|
||||||
|
percentage = percentage * 0.72;
|
||||||
|
}
|
||||||
|
updateProgress(percentage, "downloading");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
process.stderr.on("data", (data) => {
|
||||||
|
logWithVideoId(videoId, `yt-dlp stderr: ${data}`, true);
|
||||||
|
});
|
||||||
|
|
||||||
|
process.on("close", async (code) => {
|
||||||
|
if (code === 0) {
|
||||||
|
logWithVideoId(
|
||||||
|
videoId,
|
||||||
|
"Download completed, starting conversion to HLS"
|
||||||
|
);
|
||||||
|
updateProgress(80, "preparing");
|
||||||
|
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||||
|
|
||||||
|
logWithVideoId(videoId, "Starting conversion to HLS");
|
||||||
|
updateProgress(80, "converting");
|
||||||
|
|
||||||
|
try {
|
||||||
|
await convertToHLS(videoId, updateProgress);
|
||||||
|
|
||||||
|
fs.unlink(`videohost/${videoId}.mp4`, (err) => {
|
||||||
|
if (err) {
|
||||||
|
logWithVideoId(
|
||||||
|
videoId,
|
||||||
|
`Error deleting original file: ${err.message}`,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
logWithVideoId(
|
||||||
|
videoId,
|
||||||
|
"Original mp4 file deleted successfully"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
resolve();
|
||||||
|
} catch (error) {
|
||||||
|
reject(error);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
logWithVideoId(
|
||||||
|
videoId,
|
||||||
|
`Download process exited with code ${code}`,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
reject(new Error("Unable to prepare video. Please try again later."));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
reject(new Error(`Failed to start download process: ${error.message}`));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function convertToHLS(videoId, updateProgress) {
|
||||||
|
logWithVideoId(videoId, "Starting HLS conversion");
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
try {
|
||||||
|
const videoDirectory = `videohost/${videoId}`;
|
||||||
|
|
||||||
|
const conversionProcess = exec(
|
||||||
|
`ffmpeg -i "videohost/${videoId}.mp4" -c:v copy -c:a copy -hls_time 6 -hls_list_size 0 -hls_segment_type mpegts -hls_playlist_type vod -hls_segment_filename "${videoDirectory}/%03d.ts" "${videoDirectory}/playlist.m3u8"`
|
||||||
|
);
|
||||||
|
|
||||||
|
let totalDuration = 0;
|
||||||
|
|
||||||
|
conversionProcess.stderr.on("data", (data) => {
|
||||||
|
const output = data.toString();
|
||||||
|
console.log("ffmpeg stderr:", output);
|
||||||
|
|
||||||
|
const durationMatch = output.match(
|
||||||
|
/Duration: (\d{2}):(\d{2}):(\d{2})\.(\d{2})/
|
||||||
|
);
|
||||||
|
if (durationMatch) {
|
||||||
|
const [_, hours, minutes, seconds, centiseconds] = durationMatch;
|
||||||
|
totalDuration =
|
||||||
|
parseFloat(hours) * 3600 +
|
||||||
|
parseFloat(minutes) * 60 +
|
||||||
|
parseFloat(seconds) +
|
||||||
|
parseFloat(centiseconds) / 100;
|
||||||
|
|
||||||
|
logWithVideoId(
|
||||||
|
videoId,
|
||||||
|
`Video duration: ${totalDuration.toFixed(2)} seconds`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeMatch = output.match(/time=(\d{2}):(\d{2}):(\d{2})\.(\d{2})/);
|
||||||
|
if (timeMatch && totalDuration > 0) {
|
||||||
|
const [_, hours, minutes, seconds, centiseconds] = timeMatch;
|
||||||
|
const currentTime =
|
||||||
|
parseFloat(hours) * 3600 +
|
||||||
|
parseFloat(minutes) * 60 +
|
||||||
|
parseFloat(seconds) +
|
||||||
|
parseFloat(centiseconds) / 100;
|
||||||
|
|
||||||
|
const percentage = 80 + (currentTime / totalDuration) * 20;
|
||||||
|
updateProgress(Math.min(percentage, 100), "converting");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
conversionProcess.stdout.on("data", (data) => {
|
||||||
|
logWithVideoId(videoId, `ffmpeg stdout: ${data}`);
|
||||||
|
});
|
||||||
|
|
||||||
|
conversionProcess.on("close", (code) => {
|
||||||
|
if (code === 0) {
|
||||||
|
logWithVideoId(videoId, "Conversion completed successfully");
|
||||||
|
updateProgress(100, "completed");
|
||||||
|
resolve();
|
||||||
|
} else {
|
||||||
|
reject(new Error(`Conversion process exited with code ${code}`));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
reject(new Error(`Failed to start conversion process: ${error.message}`));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function setupCleanupInterval() {
|
||||||
|
setInterval(() => {
|
||||||
|
const now = Date.now();
|
||||||
|
for (const [videoId, info] of activeVideoProcesses.entries()) {
|
||||||
|
if (now - info.startTime > PROCESS_TIMEOUT) {
|
||||||
|
logWithVideoId(
|
||||||
|
videoId,
|
||||||
|
"Cleaning up stalled process in periodic check",
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
for (const client of info.clients) {
|
||||||
|
if (client.ws.readyState === 1) {
|
||||||
|
client.ws.send(
|
||||||
|
JSON.stringify({
|
||||||
|
ok: false,
|
||||||
|
error: "Video processing timed out",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (info.timeoutId) {
|
||||||
|
clearTimeout(info.timeoutId);
|
||||||
|
}
|
||||||
|
|
||||||
|
activeVideoProcesses.delete(videoId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 5 * 60 * 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function prepareRouteHandler(app) {
|
||||||
|
app.ws("/api/v1/prepare", (ws, req) => {
|
||||||
|
let videoId = null;
|
||||||
|
let clientId = Date.now() + Math.random().toString(36).substring(2, 15);
|
||||||
|
|
||||||
|
logWithVideoId(null, `New WebSocket connection established (${clientId})`);
|
||||||
|
|
||||||
|
ws.on("message", async (msg) => {
|
||||||
|
try {
|
||||||
|
const parsedMessage = JSON.parse(msg);
|
||||||
|
|
||||||
|
if (parsedMessage.videoId) {
|
||||||
|
videoId = parsedMessage.videoId;
|
||||||
|
ws.send(JSON.stringify({ ok: true }));
|
||||||
|
logWithVideoId(videoId, `Request for video (client: ${clientId})`);
|
||||||
|
|
||||||
|
const isValidYoutubeId = /^[a-zA-Z0-9_-]{11}$/.test(videoId);
|
||||||
|
if (!isValidYoutubeId) {
|
||||||
|
ws.send(
|
||||||
|
JSON.stringify({ ok: false, error: "Invalid YouTube video ID" })
|
||||||
|
);
|
||||||
|
logWithVideoId(videoId, "Invalid YouTube video ID", true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const videoPath = `videohost/${videoId}/playlist.m3u8`;
|
||||||
|
if (fs.existsSync(videoPath)) {
|
||||||
|
logWithVideoId(videoId, "Video already exists - sending stream URL");
|
||||||
|
ws.send(
|
||||||
|
JSON.stringify({
|
||||||
|
done: true,
|
||||||
|
streamUrl: "/videocd/" + videoId + "/playlist.m3u8",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (activeVideoProcesses.has(videoId)) {
|
||||||
|
const processInfo = activeVideoProcesses.get(videoId);
|
||||||
|
logWithVideoId(
|
||||||
|
videoId,
|
||||||
|
`Video is already being processed (state: ${
|
||||||
|
processInfo.state
|
||||||
|
}, progress: ${processInfo.progress.toFixed(
|
||||||
|
2
|
||||||
|
)}%), attaching client ${clientId}`
|
||||||
|
);
|
||||||
|
|
||||||
|
processInfo.clients.push({ ws, clientId });
|
||||||
|
|
||||||
|
ws.send(JSON.stringify({ preparing: processInfo.progress }));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const processInfo = {
|
||||||
|
clients: [{ ws, clientId }],
|
||||||
|
state: "initializing",
|
||||||
|
progress: 0,
|
||||||
|
startTime: Date.now(),
|
||||||
|
timeoutId: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
processInfo.timeoutId = setTimeout(() => {
|
||||||
|
if (activeVideoProcesses.has(videoId)) {
|
||||||
|
logWithVideoId(videoId, "Process timed out after 30 minutes", true);
|
||||||
|
|
||||||
|
const info = activeVideoProcesses.get(videoId);
|
||||||
|
for (const client of info.clients) {
|
||||||
|
if (client.ws.readyState === 1) {
|
||||||
|
client.ws.send(
|
||||||
|
JSON.stringify({
|
||||||
|
ok: false,
|
||||||
|
error: "Video processing timed out",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
activeVideoProcesses.delete(videoId);
|
||||||
|
}
|
||||||
|
}, PROCESS_TIMEOUT);
|
||||||
|
|
||||||
|
activeVideoProcesses.set(videoId, processInfo);
|
||||||
|
logWithVideoId(videoId, "Starting new video processing");
|
||||||
|
|
||||||
|
try {
|
||||||
|
await processVideo(videoId);
|
||||||
|
|
||||||
|
if (processInfo.timeoutId) {
|
||||||
|
clearTimeout(processInfo.timeoutId);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (activeVideoProcesses.has(videoId)) {
|
||||||
|
const info = activeVideoProcesses.get(videoId);
|
||||||
|
logWithVideoId(
|
||||||
|
videoId,
|
||||||
|
`Processing completed. Notifying ${info.clients.length} clients`
|
||||||
|
);
|
||||||
|
|
||||||
|
for (const client of info.clients) {
|
||||||
|
if (client.ws.readyState === 1) {
|
||||||
|
client.ws.send(
|
||||||
|
JSON.stringify({
|
||||||
|
done: true,
|
||||||
|
streamUrl: "/videocd/" + videoId + "/playlist.m3u8",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
activeVideoProcesses.delete(videoId);
|
||||||
|
}
|
||||||
|
|
||||||
|
logWithVideoId(videoId, "Video prepared successfully");
|
||||||
|
} catch (error) {
|
||||||
|
if (processInfo.timeoutId) {
|
||||||
|
clearTimeout(processInfo.timeoutId);
|
||||||
|
}
|
||||||
|
|
||||||
|
logWithVideoId(
|
||||||
|
videoId,
|
||||||
|
`Error processing video: ${error.message}`,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
if (activeVideoProcesses.has(videoId)) {
|
||||||
|
const info = activeVideoProcesses.get(videoId);
|
||||||
|
for (const client of info.clients) {
|
||||||
|
if (client.ws.readyState === 1) {
|
||||||
|
client.ws.send(
|
||||||
|
JSON.stringify({
|
||||||
|
ok: false,
|
||||||
|
error:
|
||||||
|
"Unable to prepare video. Please try reloading the page.",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
activeVideoProcesses.delete(videoId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
logWithVideoId(videoId, `Unexpected error: ${error.message}`, true);
|
||||||
|
ws.send(JSON.stringify({ ok: false, error: "Server error occurred" }));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
ws.on("close", () => {
|
||||||
|
logWithVideoId(videoId, `WebSocket closed for client ${clientId}`);
|
||||||
|
|
||||||
|
if (videoId && activeVideoProcesses.has(videoId)) {
|
||||||
|
const processInfo = activeVideoProcesses.get(videoId);
|
||||||
|
const clientIndex = processInfo.clients.findIndex(
|
||||||
|
(client) => client.clientId === clientId
|
||||||
|
);
|
||||||
|
|
||||||
|
if (clientIndex !== -1) {
|
||||||
|
processInfo.clients.splice(clientIndex, 1);
|
||||||
|
logWithVideoId(
|
||||||
|
videoId,
|
||||||
|
`Removed client ${clientId} from process. Remaining clients: ${processInfo.clients.length}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
ws.on("error", (error) => {
|
||||||
|
logWithVideoId(
|
||||||
|
videoId,
|
||||||
|
`WebSocket error for client ${clientId}: ${error.message}`,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
setupCleanupInterval();
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = prepareRouteHandler;
|
||||||
46
routes/search.js
Normal file
46
routes/search.js
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
const https = require("https");
|
||||||
|
const yts = require('yt-search');
|
||||||
|
|
||||||
|
function searchRouteHandler(app) {
|
||||||
|
app.get("/api/search", async (req, res) => {
|
||||||
|
try {
|
||||||
|
const query = req.query.q;
|
||||||
|
if (!query) {
|
||||||
|
return res.status(400).json({ error: "Search query is required" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const results = await yts(query);
|
||||||
|
console.log(results.videos[0])
|
||||||
|
|
||||||
|
const formattedResults = {
|
||||||
|
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`,
|
||||||
|
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
|
||||||
|
})),
|
||||||
|
nextpage: "",
|
||||||
|
suggestion: "",
|
||||||
|
corrected: false
|
||||||
|
};
|
||||||
|
|
||||||
|
res.json(formattedResults);
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error searching videos: ${err.message}`);
|
||||||
|
res.status(500).send("Error searching videos");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = searchRouteHandler;
|
||||||
11
routes/static.js
Normal file
11
routes/static.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
const express = require("express");
|
||||||
|
|
||||||
|
function staticRouteHandler(app) {
|
||||||
|
// main application
|
||||||
|
app.use("/", express.static("public"));
|
||||||
|
|
||||||
|
// video files
|
||||||
|
app.use("/videocd/", express.static("videohost"));
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = staticRouteHandler;
|
||||||
71
routes/thumbnail.js
Normal file
71
routes/thumbnail.js
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
const https = require("https");
|
||||||
|
const fs = require("fs");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
function thumbnailRouteHandler(app) {
|
||||||
|
const cacheDir = path.join(__dirname, "../cache");
|
||||||
|
if (!fs.existsSync(cacheDir)) {
|
||||||
|
fs.mkdirSync(cacheDir);
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
fs.readdir(cacheDir, (err, files) => {
|
||||||
|
if (err) {
|
||||||
|
console.error("Error reading cache directory:", err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const now = Date.now();
|
||||||
|
files.forEach(file => {
|
||||||
|
const filePath = path.join(cacheDir, file);
|
||||||
|
fs.stat(filePath, (err, stats) => {
|
||||||
|
if (err) {
|
||||||
|
console.error("Error getting file stats:", err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (now - stats.mtime.getTime() > 30 * 24 * 60 * 60 * 1000) {
|
||||||
|
fs.unlink(filePath, err => {
|
||||||
|
if (err) console.error("Error deleting cached file:", err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, 24 * 60 * 60 * 1000);
|
||||||
|
|
||||||
|
app.get("/api/thumbnail/:videoId", (req, res) => {
|
||||||
|
const videoId = req.params.videoId;
|
||||||
|
const cachePath = path.join(cacheDir, `${videoId}.jpg`);
|
||||||
|
|
||||||
|
if (fs.existsSync(cachePath)) {
|
||||||
|
return fs.createReadStream(cachePath).pipe(res);
|
||||||
|
}
|
||||||
|
|
||||||
|
const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
|
||||||
|
|
||||||
|
https.get(thumbnailUrl, (response) => {
|
||||||
|
if (response.statusCode === 404) {
|
||||||
|
const fallbackUrl = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
|
||||||
|
https.get(fallbackUrl, (fallbackResponse) => {
|
||||||
|
const fileStream = fs.createWriteStream(cachePath);
|
||||||
|
fallbackResponse.pipe(fileStream);
|
||||||
|
fallbackResponse.pipe(res);
|
||||||
|
}).on("error", (err) => {
|
||||||
|
console.error(`Error fetching fallback thumbnail: ${err.message}`);
|
||||||
|
res.status(500).send("Error fetching thumbnail");
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const fileStream = fs.createWriteStream(cachePath);
|
||||||
|
response.pipe(fileStream);
|
||||||
|
response.pipe(res);
|
||||||
|
}).on("error", (err) => {
|
||||||
|
console.error(`Error fetching thumbnail: ${err.message}`);
|
||||||
|
res.status(500).send("Error fetching thumbnail");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = thumbnailRouteHandler;
|
||||||
55
routes/trending.js
Normal file
55
routes/trending.js
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
const https = require("https");
|
||||||
|
|
||||||
|
function trendingRouteHandler(app) {
|
||||||
|
let cachedData = null;
|
||||||
|
let cacheTimestamp = null;
|
||||||
|
const CACHE_DURATION = 10 * 60 * 1000;
|
||||||
|
|
||||||
|
app.get("/api/trending", (req, res) => {
|
||||||
|
if (cachedData && cacheTimestamp && Date.now() - cacheTimestamp < CACHE_DURATION) {
|
||||||
|
return res.json(cachedData);
|
||||||
|
}
|
||||||
|
|
||||||
|
https.get("https://pipedapi.wireway.ch/trending?region=US", (response) => {
|
||||||
|
let data = "";
|
||||||
|
|
||||||
|
response.on("data", (chunk) => {
|
||||||
|
data += chunk;
|
||||||
|
});
|
||||||
|
|
||||||
|
response.on("end", () => {
|
||||||
|
try {
|
||||||
|
const jsonData = JSON.parse(data);
|
||||||
|
|
||||||
|
jsonData.forEach(item => {
|
||||||
|
if (item.url && item.url.startsWith("/watch?v=")) {
|
||||||
|
const videoId = item.url.replace("/watch?v=", "");
|
||||||
|
item.thumbnail = `/api/thumbnail/${videoId}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
cachedData = jsonData;
|
||||||
|
cacheTimestamp = Date.now();
|
||||||
|
|
||||||
|
res.json(jsonData);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error parsing trending data: ${err.message}`);
|
||||||
|
if (cachedData) {
|
||||||
|
cacheTimestamp = Date.now();
|
||||||
|
return res.json(cachedData);
|
||||||
|
}
|
||||||
|
res.status(500).send("Error processing trending data");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}).on("error", (err) => {
|
||||||
|
console.error(`Error fetching trending data: ${err.message}`);
|
||||||
|
if (cachedData) {
|
||||||
|
cacheTimestamp = Date.now();
|
||||||
|
return res.json(cachedData);
|
||||||
|
}
|
||||||
|
res.status(500).send("Error fetching trending data");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = trendingRouteHandler;
|
||||||
35
server.js
Normal file
35
server.js
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
const express = require("express");
|
||||||
|
const app = express();
|
||||||
|
const enableWs = require("express-ws");
|
||||||
|
const fs = require("fs");
|
||||||
|
const path = require("path");
|
||||||
|
require("dotenv").config();
|
||||||
|
|
||||||
|
enableWs(app);
|
||||||
|
|
||||||
|
const createCacheManager = require("./middleware/cacheManager");
|
||||||
|
app.use(createCacheManager());
|
||||||
|
|
||||||
|
const videoHostDir = path.join(__dirname, "videohost");
|
||||||
|
if (!fs.existsSync(videoHostDir)) {
|
||||||
|
fs.mkdirSync(videoHostDir);
|
||||||
|
console.log("Created videohost directory");
|
||||||
|
}
|
||||||
|
|
||||||
|
const routesPath = path.join(__dirname, "routes");
|
||||||
|
fs.readdirSync(routesPath).forEach((file) => {
|
||||||
|
if (file.endsWith(".js")) {
|
||||||
|
const routeHandler = require(path.join(routesPath, file));
|
||||||
|
routeHandler(app);
|
||||||
|
console.log(`Loaded route handler: ${file}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const PORT = process.env.PORT || 3000;
|
||||||
|
app.listen(PORT, () => {
|
||||||
|
console.log(`Server is running on http://localhost:${PORT}`);
|
||||||
|
process.on("SIGINT", () => {
|
||||||
|
console.log("Shutting down repiped...");
|
||||||
|
process.exit(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue