152 lines
4.8 KiB
HTML
152 lines
4.8 KiB
HTML
<!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>
|