ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

new custom web player

Browse Source
This commit is contained in:
lenafx
2026-01-03 03:06:09 +01:00
parent f72fff982c
commit 40197b6476
14 changed files with 6740 additions and 2671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1817
desktop/src/scripts/anime/player.js
View File

File diff suppressed because it is too large Load Diff

BIN
desktop/src/scripts/libass/default.woff2 Normal file
View File

Binary file not shown.

1
desktop/src/scripts/libass/subtitles-octopus-worker.js Normal file
View File

File diff suppressed because one or more lines are too long

BIN
desktop/src/scripts/libass/subtitles-octopus-worker.wasm Normal file
View File

Binary file not shown.

1680
desktop/src/scripts/libass/subtitles-octopus.js Normal file
View File

File diff suppressed because it is too large Load Diff

152
desktop/views/anime/anime.html
View File

@@ -5,18 +5,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" /> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
<title>WaifuBoard</title> <title>WaifuBoard</title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<link rel="stylesheet" href="/views/css/globals.css" /> <link rel="stylesheet" href="/views/css/globals.css" />
<link rel="stylesheet" href="/views/css/components/anilist-modal.css" /> <link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
<link rel="stylesheet" href="/views/css/anime/anime.css" /> <link rel="stylesheet" href="/views/css/anime/anime.css" />
<link rel="stylesheet" href="/views/css/anime/player.css" /> <link rel="stylesheet" href="/views/css/anime/player.css" />
<link rel="stylesheet" href="/views/css/components/match-modal.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css"> <link rel="stylesheet" href="/views/css/components/titlebar.css">
<script src="/src/scripts/titlebar.js"></script> <script src="/src/scripts/titlebar.js"></script>
<link rel="stylesheet" href="/views/css/components/match-modal.css">
</head> </head>
<body> <body>
<div id="titlebar"> <div id="titlebar">
@@ -54,18 +51,27 @@
<div class="player-wrapper" id="player-wrapper" style="display: none;"> <div class="player-wrapper" id="player-wrapper" style="display: none;">
<div class="player-container"> <div class="player-container">
<!-- Side Navigation Buttons -->
<button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode"> <button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg> <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M15 18l-6-6 6-6"/>
</svg>
</button> </button>
<button id="next-ep-btn" class="side-nav-btn right" title="Next Episode"> <button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg> <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 18l6-6-6-6"/>
</svg>
</button> </button>
<!-- Header Controls -->
<div class="player-header"> <div class="player-header">
<div class="header-left"> <div class="header-left">
<button class="btn-icon-glass" id="close-player-btn" title="Close Player"> <button class="btn-icon-glass" id="close-player-btn" title="Close Player">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 12H5"/>
<path d="M12 19l-7-7 7-7"/>
</svg>
</button> </button>
<div class="episode-info"> <div class="episode-info">
<span class="ep-label">Watching</span> <span class="ep-label">Watching</span>
@@ -75,25 +81,28 @@
<div class="header-right"> <div class="header-right">
<button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;"> <button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline> <polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line> <line x1="12" y1="15" x2="12" y2="3"></line>
</svg> </svg>
</button> </button>
<div class="settings-group"> <div class="settings-group">
<button id="mpv-btn" class="glass-btn-mpv" title="Open in MPV">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 3l14 9-14 9V3z"></path>
</svg>
<span>MPV</span>
</button>
<button class="btn-icon-glass" id="manual-match-btn" title="Manual Match" style="display: none;"> <button class="btn-icon-glass" id="manual-match-btn" title="Manual Match" style="display: none;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg> </svg>
</button> </button>
<button id="mpv-btn" class="glass-btn-mpv" title="Open in MPV">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M5 3l14 9-14 9V3z"></path>
</svg>
<span>MPV</span>
</button>
<div class="sd-toggle" id="sd-toggle" data-state="sub"> <div class="sd-toggle" id="sd-toggle" data-state="sub">
<div class="sd-bg"></div> <div class="sd-bg"></div>
<div class="sd-option active" id="opt-sub">Sub</div> <div class="sd-option active" id="opt-sub">Sub</div>
@@ -106,40 +115,82 @@
</div> </div>
</div> </div>
<!-- Video Frame -->
<div class="video-frame"> <div class="video-frame">
<video id="player" controls crossorigin playsinline></video> <video id="player" crossorigin playsinline></video>
<canvas id="subtitles-canvas"></canvas>
<div id="player-loading" class="player-loading-overlay"> <div id="player-loading" class="player-loading-overlay">
<div class="spinner"></div> <div class="spinner"></div>
<p id="player-loading-text">Loading Stream...</p> <p id="player-loading-text">Loading Stream...</p>
</div> </div>
</div> </div>
</div>
</div>
<div class="modal-overlay" id="download-modal">
<div class="modal-content download-settings-content">
<button class="modal-close" id="close-download-modal">✕</button>
<h2 class="modal-title">Download Settings</h2>
<div class="download-sections-wrapper"> <!-- Skip Overlay Button -->
<div id="dl-quality-section" class="dl-section" style="display:none;"> <button id="skip-overlay-btn">
<h3>Video Quality</h3> Skip Intro
<div class="dl-list" id="dl-quality-list"></div> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<path d="M13 17l5-5-5-5M6 17l5-5-5-5"/>
</svg>
</button>
<!-- Custom Controls -->
<div class="custom-controls">
<div class="controls-gradient"></div>
<!-- Progress Bar -->
<div class="progress-container">
<div class="progress-buffer"></div>
<div class="progress-played"></div>
<div class="progress-handle"></div>
</div> </div>
<div id="dl-audio-section" class="dl-section" style="display:none;"> <!-- Controls Row -->
<h3>Audio Tracks</h3> <div class="controls-row">
<div class="dl-list" id="dl-audio-list"></div> <div class="controls-left">
</div> <button class="control-btn play-pause" id="play-pause-btn" title="Play/Pause (Space)">
<svg viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<div id="dl-subs-section" class="dl-section"> <div class="volume-control">
<h3>Subtitles</h3> <button class="control-btn" id="volume-btn" title="Mute (M)">
<div class="dl-list" id="dl-subs-list"></div> <svg viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
</svg>
</button>
<div class="volume-slider-container">
<input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="100">
</div> </div>
</div> </div>
<div class="dl-actions"> <span class="time-display" id="time-display">0:00 / 0:00</span>
<button class="btn-cancel" id="cancel-dl-btn">Cancel</button> </div>
<button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
<div class="controls-center">
<!-- Center space for future controls -->
</div>
<div class="controls-right">
<button class="control-btn" id="settings-btn" title="Settings">
<svg viewBox="0 0 24 24">
<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
</svg>
</button>
<button class="control-btn" id="fullscreen-btn" title="Fullscreen (F)">
<svg viewBox="0 0 24 24">
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
</svg>
</button>
</div>
</div>
</div>
<!-- Settings Panel -->
<div class="settings-panel" id="settings-panel">
<!-- Populated dynamically by JS -->
</div> </div>
</div> </div>
</div> </div>
@@ -215,6 +266,35 @@
</section> </section>
</div> </div>
<div class="modal-overlay" id="download-modal">
<div class="modal-content download-settings-content">
<button class="modal-close" id="close-download-modal">✕</button>
<h2 class="modal-title">Download Settings</h2>
<div class="download-sections-wrapper">
<div id="dl-quality-section" class="dl-section" style="display:none;">
<h3>Video Quality</h3>
<div class="dl-list" id="dl-quality-list"></div>
</div>
<div id="dl-audio-section" class="dl-section" style="display:none;">
<h3>Audio Tracks</h3>
<div class="dl-list" id="dl-audio-list"></div>
</div>
<div id="dl-subs-section" class="dl-section">
<h3>Subtitles</h3>
<div class="dl-list" id="dl-subs-list"></div>
</div>
</div>
<div class="dl-actions">
<button class="btn-cancel" id="cancel-dl-btn">Cancel</button>
<button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
</div>
</div>
</div>
<script src="/src/scripts/utils/auth-utils.js"></script> <script src="/src/scripts/utils/auth-utils.js"></script>
<script src="/src/scripts/utils/url-utils.js"></script> <script src="/src/scripts/utils/url-utils.js"></script>
<script src="/src/scripts/utils/pagination-manager.js"></script> <script src="/src/scripts/utils/pagination-manager.js"></script>

1061
desktop/views/css/anime/player.css
View File

File diff suppressed because it is too large Load Diff

1817
docker/src/scripts/anime/player.js
View File

File diff suppressed because it is too large Load Diff

BIN
docker/src/scripts/libass/default.woff2 Normal file
View File

Binary file not shown.

1
docker/src/scripts/libass/subtitles-octopus-worker.js Normal file
View File

File diff suppressed because one or more lines are too long

BIN
docker/src/scripts/libass/subtitles-octopus-worker.wasm Normal file
View File

Binary file not shown.

1680
docker/src/scripts/libass/subtitles-octopus.js Normal file
View File

File diff suppressed because it is too large Load Diff

141
docker/views/anime/anime.html
View File

@@ -5,11 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" /> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
<title>WaifuBoard</title> <title>WaifuBoard</title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" /> <script src="/src/scripts/libass/subtitles-octopus.js"></script>
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<link rel="stylesheet" href="/views/css/globals.css" /> <link rel="stylesheet" href="/views/css/globals.css" />
<link rel="stylesheet" href="/views/css/components/anilist-modal.css" /> <link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
<link rel="stylesheet" href="/views/css/anime/anime.css" /> <link rel="stylesheet" href="/views/css/anime/anime.css" />
@@ -41,18 +38,27 @@
<div class="player-wrapper" id="player-wrapper" style="display: none;"> <div class="player-wrapper" id="player-wrapper" style="display: none;">
<div class="player-container"> <div class="player-container">
<!-- Side Navigation Buttons -->
<button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode"> <button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg> <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M15 18l-6-6 6-6"/>
</svg>
</button> </button>
<button id="next-ep-btn" class="side-nav-btn right" title="Next Episode"> <button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg> <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 18l6-6-6-6"/>
</svg>
</button> </button>
<!-- Header Controls -->
<div class="player-header"> <div class="player-header">
<div class="header-left"> <div class="header-left">
<button class="btn-icon-glass" id="close-player-btn" title="Close Player"> <button class="btn-icon-glass" id="close-player-btn" title="Close Player">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 12H5"/>
<path d="M12 19l-7-7 7-7"/>
</svg>
</button> </button>
<div class="episode-info"> <div class="episode-info">
<span class="ep-label">Watching</span> <span class="ep-label">Watching</span>
@@ -62,15 +68,21 @@
<div class="header-right"> <div class="header-right">
<button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;"> <button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
</button> </button>
<div class="settings-group"> <div class="settings-group">
<button class="btn-icon-glass" id="manual-match-btn" title="Manual Match" style="display: none;"> <button class="btn-icon-glass" id="manual-match-btn" title="Manual Match" style="display: none;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg> </svg>
</button> </button>
<div class="sd-toggle" id="sd-toggle" data-state="sub"> <div class="sd-toggle" id="sd-toggle" data-state="sub">
<div class="sd-bg"></div> <div class="sd-bg"></div>
<div class="sd-option active" id="opt-sub">Sub</div> <div class="sd-option active" id="opt-sub">Sub</div>
@@ -83,40 +95,82 @@
</div> </div>
</div> </div>
<!-- Video Frame -->
<div class="video-frame"> <div class="video-frame">
<video id="player" controls crossorigin playsinline></video> <video id="player" crossorigin playsinline></video>
<canvas id="subtitles-canvas"></canvas>
<div id="player-loading" class="player-loading-overlay"> <div id="player-loading" class="player-loading-overlay">
<div class="spinner"></div> <div class="spinner"></div>
<p id="player-loading-text">Loading Stream...</p> <p id="player-loading-text">Loading Stream...</p>
</div> </div>
</div> </div>
</div>
</div>
<div class="modal-overlay" id="download-modal">
<div class="modal-content download-settings-content">
<button class="modal-close" id="close-download-modal">✕</button>
<h2 class="modal-title">Download Settings</h2>
<div class="download-sections-wrapper"> <!-- Skip Overlay Button -->
<div id="dl-quality-section" class="dl-section" style="display:none;"> <button id="skip-overlay-btn">
<h3>Video Quality</h3> Skip Intro
<div class="dl-list" id="dl-quality-list"></div> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<path d="M13 17l5-5-5-5M6 17l5-5-5-5"/>
</svg>
</button>
<!-- Custom Controls -->
<div class="custom-controls">
<div class="controls-gradient"></div>
<!-- Progress Bar -->
<div class="progress-container">
<div class="progress-buffer"></div>
<div class="progress-played"></div>
<div class="progress-handle"></div>
</div> </div>
<div id="dl-audio-section" class="dl-section" style="display:none;"> <!-- Controls Row -->
<h3>Audio Tracks</h3> <div class="controls-row">
<div class="dl-list" id="dl-audio-list"></div> <div class="controls-left">
</div> <button class="control-btn play-pause" id="play-pause-btn" title="Play/Pause (Space)">
<svg viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<div id="dl-subs-section" class="dl-section"> <div class="volume-control">
<h3>Subtitles</h3> <button class="control-btn" id="volume-btn" title="Mute (M)">
<div class="dl-list" id="dl-subs-list"></div> <svg viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
</svg>
</button>
<div class="volume-slider-container">
<input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="100">
</div> </div>
</div> </div>
<div class="dl-actions"> <span class="time-display" id="time-display">0:00 / 0:00</span>
<button class="btn-cancel" id="cancel-dl-btn">Cancel</button> </div>
<button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
<div class="controls-center">
<!-- Center space for future controls -->
</div>
<div class="controls-right">
<button class="control-btn" id="settings-btn" title="Settings">
<svg viewBox="0 0 24 24">
<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
</svg>
</button>
<button class="control-btn" id="fullscreen-btn" title="Fullscreen (F)">
<svg viewBox="0 0 24 24">
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
</svg>
</button>
</div>
</div>
</div>
<!-- Settings Panel -->
<div class="settings-panel" id="settings-panel">
<!-- Populated dynamically by JS -->
</div> </div>
</div> </div>
</div> </div>
@@ -192,6 +246,35 @@
</section> </section>
</div> </div>
<div class="modal-overlay" id="download-modal">
<div class="modal-content download-settings-content">
<button class="modal-close" id="close-download-modal">✕</button>
<h2 class="modal-title">Download Settings</h2>
<div class="download-sections-wrapper">
<div id="dl-quality-section" class="dl-section" style="display:none;">
<h3>Video Quality</h3>
<div class="dl-list" id="dl-quality-list"></div>
</div>
<div id="dl-audio-section" class="dl-section" style="display:none;">
<h3>Audio Tracks</h3>
<div class="dl-list" id="dl-audio-list"></div>
</div>
<div id="dl-subs-section" class="dl-section">
<h3>Subtitles</h3>
<div class="dl-list" id="dl-subs-list"></div>
</div>
</div>
<div class="dl-actions">
<button class="btn-cancel" id="cancel-dl-btn">Cancel</button>
<button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
</div>
</div>
</div>
<script src="/src/scripts/utils/auth-utils.js"></script> <script src="/src/scripts/utils/auth-utils.js"></script>
<script src="/src/scripts/utils/url-utils.js"></script> <script src="/src/scripts/utils/url-utils.js"></script>
<script src="/src/scripts/utils/pagination-manager.js"></script> <script src="/src/scripts/utils/pagination-manager.js"></script>

1061
docker/views/css/anime/player.css
View File

File diff suppressed because it is too large Load Diff