obvtiger/repiped
1
0
Fork 1
Code Issues 2 Pull requests Projects 1 Releases Packages Wiki Activity Actions

inital release

Browse source
This commit is contained in:
obvtiger 2025-04-30 19:01:10 +02:00
commit 1d708c14cf
26 changed files with 34335 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

22521
public/hls.min.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

180
public/index.html Normal file
View 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
View file

File diff suppressed because it is too large Load diff

5609
public/plyr.min.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

1015
public/script.js Normal file
View file

File diff suppressed because it is too large Load diff

836
public/style.css Normal file
View 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;
}
}