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

feat: new shadcn-style ui, code cleanup and better reliability

Browse source
This commit is contained in:
obvTiger 2025-06-12 10:16:14 +02:00
parent 4027e37f26
commit 77b597e5d8
6 changed files with 1953 additions and 750 deletions
Download patch file Download diff file Expand all files Collapse all files

152
public/video.html Normal file
View file

@ -0,0 +1,152 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Repiped - Video Player</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="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="header-content">
<div class="logo" id="logo">
<i class="fas fa-play logo-icon"></i>
<h1>Repiped</h1>
</div>
<div class="search-container">
<div class="search-form">
<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>
</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>
</div>
</header>
<div class="container">
<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"
>
<i class="fas fa-redo-alt" style="margin-right: 0.5rem"></i>
Reload Page
</button>
</div>
</div>
<div class="video-detail">
<h1 class="video-detail-title" id="detail-title">Loading...</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"
>Loading...</span
>
<span class="uploaded-date" id="detail-uploaded"
>Loading...</span
>
</div>
</div>
<div class="video-detail-stats">
<div class="detail-stat">
<i class="fas fa-eye"></i>
<span id="detail-views">Loading...</span>
</div>
<div class="detail-stat">
<i class="fas fa-clock"></i>
<span id="detail-duration">Loading...</span>
</div>
</div>
</div>
<div class="video-description" id="detail-description">
Loading...
</div>
</div>
</div>
<div class="related-videos">
<h2 class="section-title">Related Videos</h2>
<div class="related-grid" id="related-grid"></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>
<script src="plyr.min.js"></script>
<script src="hls.min.js"></script>
<script src="video.js"></script>
</body>
</html>