betterttv
betterttv copied to clipboard
Idea: Preview stream when hovering sidebar streamers
Feature Preview:
https://user-images.githubusercontent.com/20853986/153699626-d776d8c8-cc70-452b-abf7-f6b116238121.mp4
My code for it, the random size is to dodge cache so you see current stream and not outdated:
setInterval(() => {
//Tooltip img
let el = document.querySelector('.online-side-nav-channel-tooltip__body');
if (el) {
let user = document.querySelector('[data-test-selector="recommended-channel"]:hover') || document.querySelector('[data-test-selector="followed-channel"]:hover');
if (user) {
user = user.getAttribute('href').split('/')[1];
if (!el.querySelector('img')) {
const size = 235 + Math.floor(Math.random() * 13);
el.querySelector('div>p').insertAdjacentHTML('afterBegin', `<img src="https://static-cdn.jtvnw.net/previews-ttv/live_user_${user}-440x${size}.jpg" data-ping="248" height="102" width="187">`);
1 || el.querySelector('div>p').insertAdjacentHTML('afterBegin', `<iframe src="https://player.twitch.tv/?channel=${user}&muted=true&parent=www.twitch.tv&controls=false&quality=mobile" height="150" width="280" allowfullscreen="true"></iframe>`);
}
}
}
}, 200);
The iframe line works but twitch gives a random 1min screen with some advert to watch it on twitch, so you can remove it, I left it there for an alternative.