Update css/player-base.js
This commit is contained in:
ashley
parent
eceeb15ed7
commit
74dcb64871
@ -733,191 +733,158 @@ function validatePlayerObject(player) {
|
||||
const extractedData = extractPlayerData(base_player);
|
||||
const initializedPlayer = initializePlayer(extractedData);
|
||||
|
||||
const saa = document.createElement('style');
|
||||
saa.innerHTML = `
|
||||
.vjs-play-progress {
|
||||
background-image: linear-gradient(to right,
|
||||
#ff0045,
|
||||
#ff0e55,
|
||||
#ff1d79
|
||||
);
|
||||
}
|
||||
|
||||
// --- Custom VJS skin + loading overlay ---
|
||||
(function () {
|
||||
const css = `
|
||||
.video-js.poke-skin { --bg:#000000b3; --fg:#fff; --muted:#b8c0cc; --accent:#ff1d79; --accent2:#ff0e55; --accent3:#ff0045; --ring:#ffffff22; --blur:8px; --br:16px; }
|
||||
/* control bar container */
|
||||
.vjs-control-bar {
|
||||
border-radius: 16px;
|
||||
background-color: #0007 !important;
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.video-js.poke-skin .vjs-control-bar {
|
||||
background: var(--bg) !important;
|
||||
border-radius: var(--br);
|
||||
backdrop-filter: blur(var(--blur));
|
||||
-webkit-backdrop-filter: blur(var(--blur));
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px var(--ring);
|
||||
padding: .4rem .5rem;
|
||||
gap: .35rem;
|
||||
}
|
||||
/* keep these transparent like you had */
|
||||
.vjs-remaining-time,
|
||||
.vjs-fullscreen-control {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.video-js.poke-skin .vjs-control.vjs-button,
|
||||
.video-js.poke-skin .vjs-volume-panel,
|
||||
.video-js.poke-skin .vjs-fullscreen-control,
|
||||
.video-js.poke-skin .vjs-play-control {
|
||||
background: rgba(255,255,255,.06);
|
||||
border-radius: 9999px;
|
||||
backdrop-filter: blur(var(--blur));
|
||||
-webkit-backdrop-filter: blur(var(--blur));
|
||||
box-shadow: inset 0 0 0 1px var(--ring), 0 4px 14px rgba(0,0,0,.25);
|
||||
transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
.video-js.poke-skin .vjs-volume-panel { padding: 0 .25rem; }
|
||||
/* circular frosted-glass buttons (play/pause, mute, fs, pip, etc.) */
|
||||
.vjs-control-bar .vjs-button,
|
||||
.vjs-play-control,
|
||||
.vjs-mute-control,
|
||||
.vjs-fullscreen-control,
|
||||
.vjs-picture-in-picture-control,
|
||||
.vjs-remaining-time .vjs-control-text { /* harmless noop for consistency */ }
|
||||
|
||||
.video-js.poke-skin .vjs-control.vjs-button:hover,
|
||||
.video-js.poke-skin .vjs-volume-panel:hover,
|
||||
.video-js.poke-skin .vjs-fullscreen-control:hover,
|
||||
.video-js.poke-skin .vjs-play-control:hover {
|
||||
background: rgba(255,255,255,.12);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 6px 18px rgba(0,0,0,.35);
|
||||
}
|
||||
.vjs-control-bar .vjs-button {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
min-width: 38px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.08);
|
||||
backdrop-filter: blur(6px);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.12);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 4px;
|
||||
transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
|
||||
}
|
||||
|
||||
.video-js.poke-skin .vjs-play-control,
|
||||
.video-js.poke-skin .vjs-fullscreen-control,
|
||||
.video-js.poke-skin .vjs-mute-control {
|
||||
width: 42px; height: 42px; display: grid; place-items: center; margin: 0 .15rem;
|
||||
}
|
||||
.video-js.poke-skin .vjs-play-control .vjs-icon-placeholder:before,
|
||||
.video-js.poke-skin .vjs-fullscreen-control .vjs-icon-placeholder:before,
|
||||
.video-js.poke-skin .vjs-mute-control .vjs-icon-placeholder:before {
|
||||
color: var(--fg);
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.vjs-control-bar .vjs-button:hover {
|
||||
background: rgba(255,255,255,0.14);
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.video-js.poke-skin .vjs-time-control { color: var(--muted); text-shadow: 0 1px 1px #000a; }
|
||||
.vjs-control-bar .vjs-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.video-js.poke-skin .vjs-progress-control {
|
||||
flex: 1 1 auto; margin: 0 .35rem; min-width: 120px;
|
||||
}
|
||||
.video-js.poke-skin .vjs-progress-holder {
|
||||
height: 10px; border-radius: 9999px; background: rgba(255,255,255,.08);
|
||||
box-shadow: inset 0 0 0 1px var(--ring);
|
||||
}
|
||||
.video-js.poke-skin .vjs-load-progress {
|
||||
background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.1));
|
||||
border-radius: inherit;
|
||||
}
|
||||
.video-js.poke-skin .vjs-play-progress {
|
||||
background-image: linear-gradient(90deg, var(--accent3), var(--accent2), var(--accent));
|
||||
border-radius: inherit;
|
||||
position: relative;
|
||||
}
|
||||
.video-js.poke-skin .vjs-play-progress::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -6px; top: 50%; transform: translateY(-50%);
|
||||
width: 18px; height: 18px; border-radius: 9999px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 6px rgba(255,29,121,.18), 0 2px 10px rgba(0,0,0,.35);
|
||||
}
|
||||
.vjs-control-bar .vjs-button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(255,0,90,0.35), inset 0 0 0 1px rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.video-js.poke-skin .vjs-slider { background: transparent; }
|
||||
.video-js.poke-skin .vjs-volume-panel .vjs-volume-control .vjs-volume-bar,
|
||||
.video-js.poke-skin .vjs-volume-panel .vjs-volume-control .vjs-volume-level {
|
||||
border-radius: 9999px; height: 8px;
|
||||
}
|
||||
.video-js.poke-skin .vjs-volume-panel .vjs-volume-control .vjs-volume-bar {
|
||||
background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px var(--ring);
|
||||
}
|
||||
.video-js.poke-skin .vjs-volume-panel .vjs-volume-control .vjs-volume-level {
|
||||
background-image: linear-gradient(90deg, var(--accent3), var(--accent2), var(--accent));
|
||||
}
|
||||
.video-js.poke-skin .vjs-volume-panel .vjs-volume-control .vjs-volume-level:after {
|
||||
content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
|
||||
width:14px; height:14px; border-radius:9999px; background:#fff; box-shadow:0 0 0 4px rgba(255,29,121,.16);
|
||||
}
|
||||
/* icon sizing inside circular buttons */
|
||||
.vjs-control-bar .vjs-icon-placeholder:before {
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.video-js.poke-skin .vjs-remaining-time,
|
||||
.video-js.poke-skin .vjs-fullscreen-control { background: transparent !important; }
|
||||
/* progress (seek) bar: frosted track + rounded ends */
|
||||
.vjs-progress-control {
|
||||
flex: 1 1 auto;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.video-js.poke-skin .vjs-big-play-button {
|
||||
border: none; border-radius: 9999px;
|
||||
width: 74px; height: 74px;
|
||||
background: rgba(0,0,0,.45);
|
||||
backdrop-filter: blur(var(--blur));
|
||||
-webkit-backdrop-filter: blur(var(--blur));
|
||||
box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px var(--ring);
|
||||
}
|
||||
.video-js.poke-skin .vjs-big-play-button .vjs-icon-placeholder:before { color: #fff; font-size: 1.6rem; }
|
||||
.vjs-progress-control .vjs-progress-holder {
|
||||
height: 8px !important;
|
||||
border-radius: 999px !important;
|
||||
background: rgba(255,255,255,0.08) !important;
|
||||
backdrop-filter: blur(6px);
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 4px 12px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.video-js.poke-skin .poke-wait {
|
||||
position: absolute; inset: 0; display: none; place-items: center; z-index: 12;
|
||||
background: radial-gradient(800px 400px at 50% 60%, rgba(0,0,0,.55), rgba(0,0,0,.8));
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
.video-js.poke-skin.vjs-waiting .poke-wait,
|
||||
.video-js.poke-skin.poke-show-wait .poke-wait { display: grid; }
|
||||
.vjs-progress-control .vjs-load-progress,
|
||||
.vjs-progress-control .vjs-play-progress {
|
||||
border-radius: inherit !important;
|
||||
}
|
||||
|
||||
.video-js.poke-skin .poke-wait-box {
|
||||
display: grid; gap: .6rem; padding: 1rem 1.2rem; border-radius: 16px;
|
||||
background: rgba(20,20,28,.55);
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,.45), inset 0 0 0 1px var(--ring);
|
||||
color: var(--fg); text-align: center; min-width: 260px;
|
||||
}
|
||||
.video-js.poke-skin .poke-wait-text { font: 600 14px/1.2 ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu; letter-spacing:.2px; }
|
||||
.video-js.poke-skin .poke-wait-sub { font: 12px/1.2 ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu; color: var(--muted); }
|
||||
.vjs-progress-control .vjs-play-progress {
|
||||
background-image: linear-gradient(to right, #ff0045, #ff0e55, #ff1d79) !important;
|
||||
}
|
||||
|
||||
.video-js.poke-skin .poke-dots { display:inline-grid; grid-auto-flow:column; gap:6px; justify-content:center; }
|
||||
.video-js.poke-skin .poke-dot { width:6px; height:6px; border-radius:9999px; background:#fff; opacity:.9; animation: poke-bounce 900ms infinite ease-in-out; }
|
||||
.video-js.poke-skin .poke-dot:nth-child(2){ animation-delay:.15s }
|
||||
.video-js.poke-skin .poke-dot:nth-child(3){ animation-delay:.3s }
|
||||
@keyframes poke-bounce { 0%,80%,100%{ transform:translateY(0); opacity:.6 } 40%{ transform:translateY(-6px); opacity:1 } }
|
||||
`;
|
||||
const style = document.createElement('style');
|
||||
style.textContent = css;
|
||||
document.head.appendChild(style);
|
||||
.vjs-progress-control .vjs-slider-handle {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
border-radius: 50% !important;
|
||||
background: #fff !important;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 4px rgba(255,0,90,0.20);
|
||||
top: -4px !important; /* center on 8px track */
|
||||
}
|
||||
|
||||
function mountPokeSkin(player) {
|
||||
const root = player.el();
|
||||
player.addClass('poke-skin');
|
||||
/* volume panel spacing and circular handle too */
|
||||
.vjs-volume-panel {
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
if (!root.querySelector('.poke-wait')) {
|
||||
const wait = document.createElement('div');
|
||||
wait.className = 'poke-wait';
|
||||
wait.innerHTML = `
|
||||
<div class="poke-wait-box">
|
||||
<div class="poke-wait-text">Loading… please wait</div>
|
||||
<div class="poke-wait-sub" data-rot></div>
|
||||
<div class="poke-dots"><div class="poke-dot"></div><div class="poke-dot"></div><div class="poke-dot"></div></div>
|
||||
</div>`;
|
||||
root.appendChild(wait);
|
||||
.vjs-volume-bar {
|
||||
height: 6px !important;
|
||||
border-radius: 999px !important;
|
||||
background: rgba(255,255,255,0.10) !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
const hints = [
|
||||
'Stabilizing stream…',
|
||||
'Syncing audio & video…',
|
||||
'Warming buffers…',
|
||||
'Checking connection…',
|
||||
'Re-requesting segments…'
|
||||
];
|
||||
let i = 0; const rot = wait.querySelector('[data-rot]');
|
||||
const tick = () => { rot.textContent = hints[i % hints.length]; i++; };
|
||||
tick(); wait._rot = setInterval(tick, 1200);
|
||||
player.on('dispose', () => clearInterval(wait._rot));
|
||||
}
|
||||
.vjs-volume-level {
|
||||
border-radius: inherit !important;
|
||||
background-image: linear-gradient(to right, #ff0045, #ff1d79) !important;
|
||||
}
|
||||
|
||||
const show = () => player.addClass('poke-show-wait');
|
||||
const hide = () => player.removeClass('poke-show-wait');
|
||||
.vjs-volume-bar .vjs-slider-handle {
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
border-radius: 50% !important;
|
||||
background: #fff !important;
|
||||
top: -4px !important;
|
||||
box-shadow: 0 3px 12px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,0,90,0.18);
|
||||
}
|
||||
|
||||
player.on('waiting', show);
|
||||
player.on('stalled', show);
|
||||
player.on('seeking', show);
|
||||
/* give text timers a small chip look (optional), but keep transparent base */
|
||||
.vjs-current-time,
|
||||
.vjs-time-divider,
|
||||
.vjs-duration {
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
player.on('canplay', hide);
|
||||
player.on('playing', hide);
|
||||
player.on('pause', hide);
|
||||
player.on('error', () => {
|
||||
// keep overlay if really broken; otherwise hide on next canplay/playing
|
||||
});
|
||||
}
|
||||
/* tighter layout on small screens */
|
||||
@media (max-width: 640px) {
|
||||
.vjs-control-bar { gap: 8px; padding: 6px 8px; }
|
||||
.vjs-control-bar .vjs-button { width: 34px; height: 34px; min-width: 34px; }
|
||||
.vjs-control-bar .vjs-icon-placeholder:before { font-size: 16px; line-height: 34px; }
|
||||
.vjs-progress-control .vjs-progress-holder { height: 6px !important; }
|
||||
.vjs-progress-control .vjs-slider-handle { width: 14px !important; height: 14px !important; top: -4px !important; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(saa);
|
||||
|
||||
if (window.videojs && window.video) {
|
||||
try { mountPokeSkin(window.video); } catch {}
|
||||
} else {
|
||||
document.addEventListener('readystatechange', () => {
|
||||
if (window.videojs && window.video) { try { mountPokeSkin(window.video); } catch {} }
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
window.pokePlayer = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user