Show latency on kick
// ==UserScript==
// @name Kick Latency
// @namespace latency
// @version 1.9.5
// @description Show latency on kick
// @icon https://img.freepik.com/premium-vector/kick-logo-vector-download-kick-streaming-icon-logo-vector-eps_691560-10811.jpg
// @author frz
// @match https://kick.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
let header = null, spinner = null, tooltip = null, container = null, textSpan = null;
const link = document.createElement('link');
link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap';
link.rel = 'stylesheet';
document.head.appendChild(link);
function styleHeader(el) {
Object.assign(el.style, {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
userSelect: 'none'
});
}
function createRedDot() {
const d = document.createElement('span');
Object.assign(d.style, {
display: 'inline-block',
width: '8px',
height: '8px',
borderRadius: '50%',
background: '#FF4B4B',
marginRight: '6px',
transition: 'transform 0.2s ease'
});
return d;
}
function readKickLatency() {
const v = document.querySelector('video');
if (!v || !v.buffered.length) return null;
const lat = v.buffered.end(v.buffered.length - 1) - v.currentTime;
return lat > 0 ? lat.toFixed(2) + 's' : '0.00s';
}
function createSpinner() {
if (spinner) return spinner;
spinner = document.createElement('div');
Object.assign(spinner.style, {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
zIndex: '9999',
display: 'none'
});
const v = document.querySelector('video');
if (v && v.parentElement) v.parentElement.appendChild(spinner);
return spinner;
}
function reloadPlayer() {
const v = document.querySelector('video');
if (!v) return;
const sp = createSpinner();
sp.style.display = 'block';
const ct = v.currentTime;
v.pause();
setTimeout(() => {
try {
v.currentTime = ct;
v.play().catch(() => {});
} catch {
location.reload();
}
sp.style.display = 'none';
}, 1200);
}
function createTooltip() {
if (tooltip) return;
tooltip = document.createElement('div');
tooltip.textContent = 'Stream delay click to refresh player';
Object.assign(tooltip.style, {
position: 'fixed',
padding: '6px 12px',
fontSize: '13px',
fontWeight: '500',
color: '#fff',
background: 'rgba(0,0,0,0.4)',
backdropFilter: 'blur(6px)',
borderRadius: '6px',
whiteSpace: 'nowrap',
pointerEvents: 'auto',
opacity: '0',
transform: 'translateX(-50%) translateY(10px)',
zIndex: '2147483647'
});
document.body.appendChild(tooltip);
requestAnimationFrame(() => {
tooltip.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
});
}
function showTooltip() {
if (!container) return;
const rect = container.getBoundingClientRect();
tooltip.style.left = rect.left + rect.width / 2 + 'px';
tooltip.style.top = rect.bottom + 8 + 'px';
tooltip.style.transform = 'translateX(-50%) translateY(0)';
tooltip.style.opacity = '1';
container.style.transform = 'translateY(-2px)';
textSpan.style.color = '#fff';
}
function hideTooltip() {
if (!container) return;
tooltip.style.opacity = '0';
tooltip.style.transform = 'translateX(-50%) translateY(10px)';
container.style.transform = 'translateY(0)';
textSpan.style.color = 'rgba(255,255,255,0.85)';
}
function updateHeader() {
if (!header) return;
const lat = readKickLatency();
if (!lat) return;
if (!container) {
container = document.createElement('div');
container.style.display = 'flex';
container.style.alignItems = 'center';
container.style.transition = 'transform 0.2s ease';
header.innerHTML = '';
header.appendChild(container);
const dot = createRedDot();
container.appendChild(dot);
textSpan = document.createElement('span');
textSpan.style.color = 'rgba(255,255,255,0.85)';
textSpan.style.fontWeight = '600';
textSpan.style.fontSize = '15px';
textSpan.style.transition = 'color 0.2s ease';
container.appendChild(textSpan);
createTooltip();
}
textSpan.textContent = `Latency: ${lat}`;
}
function findHeader() {
const candidate = Array.from(document.querySelectorAll('span.absolute')).find(e => {
const text = e.textContent.trim().toLowerCase();
return text === 'чат' || text === 'chat';
});
if (candidate && candidate !== header) {
header = candidate;
container = null;
textSpan = null;
styleHeader(header);
header.addEventListener('click', reloadPlayer);
header.addEventListener('mouseenter', showTooltip);
header.addEventListener('mouseleave', hideTooltip);
updateHeader();
}
}
const obs = new MutationObserver(findHeader);
obs.observe(document.body, { childList: true, subtree: true });
setInterval(updateHeader, 2000);
})();