UserScript: YouTube-Live-Stream auf Twitch anzeigen (proof of concept)

Projekte Development
1

Wer gelegentlich mal auf Twitch rumzappt, vermisst sicher den Rocketbeans-Twitch-Stream, in den man bequem reinzappen konnte. Ich habe mal angefangen, ein Userscript für Greasemonkey zu bauen:

// ==UserScript==
// @name        Rocket Beans TV auf Twitch
// @namespace   rocketbeanstvontwitch
// @description Zeigt Rocket Beans TV auf Twitch.tv an
// @include     https://www.twitch.tv/*
// @version     1
// @grant       none
// ==/UserScript==

function AddLogo() {
  //console.log("adding logo");
  var smallsearch = document.getElementById("small_search");
  var center = document.createElement("center");
  var link = document.createElement("a");
  center.appendChild(link);
  link.setAttribute("href", "https://www.twitch.tv/rocketbeanstv");
  var logo = document.createElement("img");
  link.appendChild(logo);
  // TODO: more beautiful logo
  logo.setAttribute("src", "https://static-cdn.jtvnw.net/jtv_user_pictures/rocketbeanstv-profile_image-389ff6f2d5ae9804-300x300.jpeg");
  logo.setAttribute("width", "60%");
  logo.style.margin = "10 auto";
  smallsearch.appendChild(center);
  console.log(smallsearch);
}
 
function ReplacePlayer(){
      // <iframe src="https://www.youtube.com/embed/rzCDzR8eR7o?modestbranding=1&amp;showinfo=0" data-src="https://www.youtube.com/embed/rzCDzR8eR7o?modestbranding=1&amp;showinfo=0" mozallowfullscreen="" webkitallowfullscreen="" allowfullscreen=""></iframe>
   var oldplayer = document.getElementById("player");
   var playerContainer = oldplayer.parentElement;
   playerContainer.removeChild(oldplayer);
   var iframe = document.createElement("iframe");
   iframe.style.width = "100%";
   iframe.style.height = "100%";
   iframe.setAttribute("mozallowfullscreen" ,""); 
   iframe.setAttribute("webkitallowfullscreen", "");
   iframe.setAttribute("allowfullscreen", "");
   iframe.setAttribute("src", "https://www.youtube.com/embed/NozmNCnivwU?modestbranding=1&amp;showinfo=0&amp;autoplay=true");
   iframe.setAttribute("data-src", "https://www.youtube.com/embed/NozmNCnivwU?modestbranding=1&amp;showinfo=0&amp;autoplay=true");
    playerContainer.appendChild(iframe);
  }
 
function ReplaceChat(){
  var oldchat = document.getElementsByClassName("chat-room")[0];
  oldchat.removeChild(oldchat.firstElementChild);
  var chatIframe = document.createElement("iframe");
  chatIframe.setAttribute("src", "https://www.youtube.com/live_chat?v=NozmNCnivwU&embed_domain=www.twitch.tv");
  chatIframe.style.width = "100%";
  chatIframe.style.height = "100%";
  oldchat.appendChild(chatIframe);
}

 
 function UpdateSchedule(){
    // TODO
    //setTimeout(UpdateSchedule, ???)
 }

 function AddTVSchedule(){
   // TODO
   //setTimeout(UpdateSchedule, ???);
 }
 
 
 function ManipulateTwich() {
   //console.log("onload called");
   AddLogo();
   if(document.location.pathname.startsWith("/rocketbeanstv")){
     // better put some mutation observer here
     setTimeout(ReplacePlayer, 5000);
     setTimeout(ReplaceChat, 5000);
   }
   //console.log("logo added");
 }
 
// This is ugly. Better replace it with some event listener or something.
 setTimeout(ManipulateTwich, 1000);

Das Script ist nur als Proof-Of-Concept zu verstehen. Es ist an verschiedenen Stellen kaputt:

  • Logo in der Seitenliste sieht hässlich aus, wenn die Leiste aufgeklappt ist
  • Player hat merkwürdige Größenverhältnisse
  • YouTube-Chat geht noch nicht ✓
  • YouTube-Chat ist noch erzwungen
  • Statt mutation listener werden simple timer verwendet → Player wird nur bei Laden der Seite ausgetauscht, nicht bei Veränderung der Seite
  • Sendeplan ist noch nicht da
  • Video-ID ist hardkodiert. Alles geht kaputt, wenn der Stream neustartet (ggf. mal schauen, wie RocketView das macht)

Updates:

  • 2016-11-08: Typo beseitigt und URL angepasst: Twitch-Chat jetzt durch YouTube-Chat ausgetauscht. Allerdings noch hardkodiert