git_admin/CoRE.Vision
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

player: extract branded .pjs player into shared static/player.{js,css}

Browse Source 
One source of truth for the branded player on desktop (archive) and
mobile. The ArchivePlayer class moves out of app.js into player.js
(name kept; app.js still does `new ArchivePlayer`); the .pjs styles
move out of style.css into player.css. Both archive.html and mobile.html
load the shared module before their own script.

The shared player gains two additive, backward-compatible options:
- live: timeline hidden, only pause/play + fullscreen (mobile Live).
- autohide:false: control bar always visible (touch); desktop keeps
  autohide (default true), so desktop archive behaves exactly as before.
Fullscreen is now self-contained (no global toggleFullscreen dep) so it
works on mobile too, with an iOS <video> fallback.

mobile.js drops its duplicated Player class and uses ArchivePlayer.

Verified on .79: /archive 200 loads player.{js,css}; app.js has no
class def; mobile (Host :8443) loads the shared module.

VERSION 0.0.154 -> 0.0.155

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
core
2026-06-02 00:28:04 +05:00
parent 6f9142a795
commit f263d84a8d
9 changed files with 252 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/static/mobile.css
+6 -34
View File
@@ -69,38 +69,10 @@ html, body {
.m-seg.active .m-dur { color: #fff; }
.m-empty { color: #8b93a7; text-align: center; padding: 28px 16px; font-size: 14px; }
/* ── фирменный плеер (.pjs) — единый для live и архива ── */
.player-wrap .pjs { position: relative; width: 100%; height: 100%; background: #000; outline: none; overflow: hidden; }
.pjs-video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; cursor: pointer; }
.pjs-center { position: absolute; inset: 0; pointer-events: none; }
.pjs-bigplay {
position: absolute; top: 50%; left: 50%; width: 74px; height: 74px; border-radius: 50%;
border: none; cursor: pointer; pointer-events: auto; background: rgba(10,12,18,.55); color: #fff;
font-size: 26px; padding-left: 5px; opacity: 0; transition: opacity .15s, transform .15s;
transform: translate(-50%, -50%) scale(.9);
}
.pjs.paused:not(.buffering) .pjs-bigplay { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pjs-spinner {
position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
border: 3px solid rgba(255,255,255,.22); border-top-color: #fff; border-radius: 50%; opacity: 0;
}
.pjs.buffering .pjs-spinner { opacity: 1; animation: pjs-spin .8s linear infinite; }
@keyframes pjs-spin { to { transform: rotate(360deg); } }
/* нижняя панель — на тач всегда видима */
.pjs-bar {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
display: flex; align-items: center; gap: 12px;
padding: 26px 12px calc(11px + env(safe-area-inset-bottom, 0));
background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.pjs-btn { background: none; border: none; color: #fff; cursor: pointer; font-size: 20px; line-height: 1; padding: 6px 8px; border-radius: 6px; }
.pjs-btn:active { background: rgba(255,255,255,.18); }
.pjs-time, .pjs-dur { color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; }
.pjs-seek { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.25); cursor: pointer; touch-action: none; }
.pjs-buf { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.35); border-radius: 3px; }
.pjs-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #e23b3b; border-radius: 3px; }
.pjs-knob { position: absolute; top: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #e23b3b; box-shadow: 0 0 4px rgba(0,0,0,.5); transform: translateY(-50%); }
/* live: только пауза/плей + во весь экран (без шкалы/времени/скорости) */
.pjs.live .pjs-time, .pjs.live .pjs-dur, .pjs.live .pjs-seek, .pjs.live .pjs-speed { display: none; }
/* фирменный плеер (.pjs) — общий static/player.css; ниже только тач-подгонка размеров */
.pjs-btn { font-size: 20px; padding: 6px 8px; }
.pjs-seek { height: 6px; }
.pjs-seek:hover { height: 6px; }
.pjs-knob { width: 16px; height: 16px; margin-left: -8px; }
.pjs-bar { gap: 12px; padding-bottom: calc(11px + env(safe-area-inset-bottom, 0)); }
.pjs.live .pjs-bar { justify-content: center; gap: 30px; }