betterttv icon indicating copy to clipboard operation
betterttv copied to clipboard

Idea: Preview stream when hovering sidebar streamers

Open Far-Se opened this issue 3 years ago • 0 comments

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.

Far-Se avatar Feb 12 '22 06:02 Far-Se