// ==UserScript==
// @name CHZZK Live Bar
// @version 1.0.6
// @match https://chzzk.naver.com/*
// @description 치지직 라이브 방송 접속 시점부터의 최대 1분 30초간의 재생바를 제공합니다.
// @run-at document-idle
// @grant none
// @author k22pr
// @namespace k22pr/chzzk-live-bar
// @license MIT
// ==/UserScript==
console.log("live-bar.js");
(function () {
const VIDEO_ELEMENT_NAME = "video.webplayer-internal-video";
const BOTTOM_SEL = "div.pzp-pc__bottom";
const EDGE_EPS = 0.5;
const LIVE_EPS = 3.5;
const MAX_VIDEO_DURATION = 60 * 1.5;
const CSS = `
.live-bar-box{display:flex !important;position:absolute;left:0px;bottom:30px !important;width:100%;font-size:11px;line-height:1;}
// .live-bar-box{opacity:1 !important;}
.live-bar-box .live-bar-ui{width:100%;display:flex;gap:8px;align-items:center;color:#fff;padding:6px 8px;}
.live-bar-box .go{width:45px;border:0;border-radius:6px;padding:2px 8px;background:#868e96;color:#fff;cursor:pointer;font-size:11px;line-height:1;margin-left:4px;}
.live-bar-box .go.live{background:rgb(221, 51, 51);box-shadow:0px 0px 4px rgba(221, 51, 51, 0.5);}
.live-bar-box .t{white-space:nowrap;min-width:20px;text-align:center}
.live-bar-box .time{display:flex;gap:4px;align-items:center}
.live-bar-box .slide-box{display:flex;flex:1;position:relative;align-items:center;width:100%; height:3px;padding:8px 0px;cursor:pointer}
.live-bar-box .slide-box:hover{height:6px;}
.live-bar-box .slide-box div{transition:height 0.2s;}
.live-bar-box .slide-box .track{position:absolute;left:0px;width:100%;height:3px;background:rgba(255,255,255,0.5);}
.live-bar-box .slide-box .rng{position:absolute;left:0px;height:3px;background:#00f889;transition:width 0.1s;transition-delay: 0.1}
.live-bar-box .slide-box:hover .track{height:6px;border-radius:3px;box-shadow:0px 0px 4px rgba(0,0,0,0.3);}
.live-bar-box .slide-box:hover .rng{height:6px;border-radius:3px;box-shadow:0px 0px 5px #00f889;}
.live-bar-box.no-anim .slide-box .rng { transition: none !important; }
.live-bar-box .hover-tip{
position:absolute; top:0; transform:translate(-50%,-140%);
background:rgba(0,0,0,.7); color:#fff; padding:2px 6px; border-radius:4px;
font-size:11px/1; pointer-events:none;
opacity:0; transition:opacity .12s;
}
.live-bar-box .hover-tip.show{ opacity:1; }
.live-bar-box .hover-x{
position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,1);
transform:translateX(-.5px); opacity:0; transition:opacity .12s;
}
.live-bar-box .hover-x.show{ opacity:1; }
`;
const styleOnce = (() => {
let done = false;
return () => {
if (done) return;
done = true;
const s = document.createElement("style");
s.textContent = CSS;
document.head.appendChild(s);
};
})();
const timeFormat = (t) => {
const h = (t / 3600) | 0,
m = ((t % 3600) / 60) | 0,
s = t % 60 | 0;
return h
? `${t > 0 ? "" : "-"}${Math.abs(h)}:${String(Math.abs(m)).padStart(
2,
"0"
)}:${String(Math.abs(s)).padStart(2, "0")}`
: `${t > 0 ? "" : "-"}${Math.abs(m)}:${String(Math.abs(s)).padStart(
2,
"0"
)}`;
};
const getEdges = (v) => {
const s = v.seekable;
if (s && s.length) {
const start = s.start(0);
const end = s.end(s.length - 1);
return {
start: Math.max(start, end - MAX_VIDEO_DURATION),
end: s.end(s.length - 1),
ok: true,
};
}
const b = v.buffered;
if (b && b.length) {
const start = b.start(0);
const end = b.end(b.length - 1);
return {
start: Math.max(start, end - MAX_VIDEO_DURATION),
end: b.end(b.length - 1),
ok: true,
};
}
return { start: 0, end: isFinite(v.duration) ? v.duration : 0, ok: false };
};
function findBottomContainer(v) {
let c = document.querySelector(BOTTOM_SEL);
if (c) return c;
let node = v;
while (node) {
const root = node.getRootNode?.();
const host = root && root.host;
if (!host) break;
const inHost = root.querySelector?.(BOTTOM_SEL);
if (inHost) return inHost;
node = host;
}
return null;
}
function mount(v) {
if (v.__liveBarMounted) return;
const bottom = findBottomContainer(v);
if (!bottom) return;
styleOnce();
if (bottom.querySelector(".live-bar-box")) return;
document.querySelector(`${BOTTOM_SEL} .slider`)?.remove();
const wrap = document.createElement("div");
wrap.className = "live-bar-box pzp-pc__progress-slider";
wrap.innerHTML = `
<div class="live-bar-ui">
<div class='slide-box'>
<div class='track'></div>
<div class="rng"></div>
</div>
<div class='time'>
<span class="t total">0:00</span>
<button class="go">LIVE</button>
</div>
</div>
`;
bottom.appendChild(wrap);
const rng = wrap.querySelector(".rng");
const tTotal = wrap.querySelector(".total");
const btn = wrap.querySelector(".go");
const slide = wrap.querySelector(".slide-box");
const tip = document.createElement("div");
tip.className = "hover-tip";
tip.textContent = "0:00";
const cross = document.createElement("div");
cross.className = "hover-x";
slide.appendChild(cross);
slide.appendChild(tip);
let raf = 0,
lastEvt = null;
const useRVFC = "requestVideoFrameCallback" in v;
let rafId = 0;
const onMove = (e) => {
lastEvt = e;
if (!raf)
raf = requestAnimationFrame(() => {
raf = 0;
if (lastEvt) renderAt(lastEvt.clientX);
});
};
function seekFromClick(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
wrap.classList.add("no-anim");
const rect = slide.getBoundingClientRect();
const x = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
const ratio = rect.width ? x / rect.width : 0;
const { start, end } = getEdges(v);
const target = start + ratio * (end - start);
seekTo(target);
requestAnimationFrame(() => wrap.classList.remove("no-anim"));
}
const atLiveEdge = (currentTime) => {
const { end } = getEdges(v);
return currentTime - end > -LIVE_EPS;
};
function renderAt(clientX) {
const rect = slide.getBoundingClientRect();
const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
const ratio = rect.width ? x / rect.width : 0;
const { start, end, ok } = getEdges(v);
const lo = ok ? start : 0;
const hi =
ok && isFinite(end) ? end : isFinite(v.duration) ? v.duration : lo;
if (!isFinite(hi) || hi <= lo) return;
const t = lo + ratio * (hi - lo);
const nearLive = atLiveEdge(t);
tip.textContent = nearLive ? "LIVE" : timeFormat(t - hi);
cross.style.left = `${x}px`;
tip.style.left = `${x}px`;
}
function updateUI() {
const { start, end } = getEdges(v);
const percent = (v.currentTime - start) / (end - start);
if (end - v.currentTime < LIVE_EPS) {
rng.style.width = "100%";
} else {
rng.style.width = `${Math.min(100, percent * 100)}%`;
}
const totalTime = Math.max(0, end - start);
tTotal.textContent = timeFormat(Math.min(totalTime, MAX_VIDEO_DURATION));
const live = atLiveEdge(v.currentTime);
if (live) {
btn.textContent = "LIVE";
btn.classList.add("live", live);
} else {
btn.textContent = timeFormat(v.currentTime - end + start - totalTime);
btn.classList.remove("live");
}
if (lastEvt) renderAt(lastEvt.clientX);
}
function seekTo(val) {
const { start, end } = getEdges(v);
const lo = start,
hi = end;
v.currentTime = Math.min(hi, Math.max(lo, val));
}
slide.addEventListener("mousedown", seekFromClick);
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
wrap.classList.add("no-anim");
if (e.key === "ArrowLeft") {
seekTo(parseFloat(v.currentTime) - 5);
} else if (e.key === "ArrowRight") {
seekTo(parseFloat(v.currentTime) + 5);
}
requestAnimationFrame(() => wrap.classList.remove("no-anim"));
}
});
btn.addEventListener("click", () => {
const { end, ok } = getEdges(v);
if (!ok) return;
seekTo(end - EDGE_EPS);
});
slide.addEventListener(
"pointerenter",
(e) => {
tip.classList.add("show");
cross.classList.add("show");
onMove(e);
},
{ passive: true }
);
slide.addEventListener("pointermove", onMove, { passive: true });
slide.addEventListener("pointerleave", () => {
tip.classList.remove("show");
cross.classList.remove("show");
});
function loopRVFC() {
v.requestVideoFrameCallback(() => {
updateUI();
loopRVFC();
});
}
function loopRAF() {
updateUI();
rafId = requestAnimationFrame(loopRAF);
}
[
"loadedmetadata",
"durationchange",
"progress",
"playing",
"pause",
"waiting",
"seeked",
"seeking",
"ratechange",
"timeupdate",
"resize",
].forEach((ev) => v.addEventListener(ev, updateUI));
updateUI();
if (useRVFC) loopRVFC();
else loopRAF();
const mo = new MutationObserver(() => {
if (!document.contains(v) || !document.contains(wrap)) {
if (rafId) cancelAnimationFrame(rafId);
wrap.remove();
mo.disconnect();
}
});
mo.observe(document.documentElement, { childList: true, subtree: true });
v.__liveBarMounted = true;
}
function tryMountAll() {
const hasLive = location.pathname.includes("/live/");
if (!hasLive) return;
document.querySelectorAll(VIDEO_ELEMENT_NAME).forEach((v) => {
const bottom = findBottomContainer(v);
if (bottom) mount(v);
});
}
(function () {
const fireLoc = () => setTimeout(tryMountAll, 0);
const _ps = history.pushState,
_rs = history.replaceState;
history.pushState = function () {
const r = _ps.apply(this, arguments);
fireLoc();
return r;
};
history.replaceState = function () {
const r = _rs.apply(this, arguments);
fireLoc();
return r;
};
window.addEventListener("popstate", fireLoc);
})();
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", tryMountAll, { once: true });
} else {
tryMountAll();
}
new MutationObserver((list) => {
for (const m of list) {
for (const n of m.addedNodes) {
if (n.nodeType !== 1) continue;
if (
n.matches?.(VIDEO_ELEMENT_NAME) ||
n.querySelector?.(VIDEO_ELEMENT_NAME)
)
tryMountAll();
if (n.matches?.(BOTTOM_SEL) || n.querySelector?.(BOTTOM_SEL))
tryMountAll();
}
}
}).observe(document.documentElement, { childList: true, subtree: true });
})();
