Twitch Player auf der RBTV Seite (inoffiziell) nachrüsten

Da RBTV von offizieller Seite aus den Twitchstream nicht mehr auf rocketbeans.tv unterstützt, habe ich mich mal rangesetzt und den “Stream-Switch-Button” der alten Webseite per User- / Javascript wieder zurückgeholt und den Twitchstream als Standard gesetzt.

Dafür den folgenden Code als neues Script bei Tampermonkey (Chrome) oder Greasemonkey (FF) abspeichern.

// ==UserScript==
// @name          RBTV Twitch Player
// @author        toeffy
// @description   Fügt den Twitchplayer der RBTV-Seite hinzu und ermöglicht das Wechseln auf den Youtube-Stream
// @include       https://www.rocketbeans.tv/*
// @include       https://rocketbeans.tv/*
// @run-at        document-idle
// @version       1
// ==/UserScript==

setTimeout(swapPlayer,650);

function swapPlayer() {
    'use strict';

    // Controls
    var newDiv = document.createElement("DIV");
    newDiv.style.backgroundColor = "#383838";
    newDiv.style.marginLeft = "1rem";
    newDiv.style.borderRadius = "5px";

    var btnTwitch = document.createElement("BUTTON");
    btnTwitch.className = "btn btn-iconOnly hideInSmallPlayer";
    btnTwitch.style.borderRadius = "5px 0 0 5px";
    btnTwitch.style.marginRight = "0";
    btnTwitch.title = "Twitch-Stream";
    btnTwitch.addEventListener("click", playerTwitch);
    var iconTwitch = document.createElement("A");
    iconTwitch.className = "rbtv-icon rbtv-brand_twitch";
    btnTwitch.appendChild(iconTwitch);
    newDiv.appendChild(btnTwitch);

    var btnYt = document.createElement("BUTTON");
    btnYt.className = "btn btn-iconOnly hideInSmallPlayer";
    btnYt.style.borderRadius = "0 5px 5px 0";
    btnYt.title = "Youtube-Stream";
    btnYt.addEventListener("click", playerYt);
    var iconYt = document.createElement("A");
    iconYt.className = "rbtv-icon rbtv-brand_youtube";
    btnYt.appendChild(iconYt);
    newDiv.appendChild(btnYt);

    document.getElementsByClassName("livestream-info_controls_buttons")[0].appendChild(newDiv);

    // swap iFrame Source
    var iframe = document.getElementsByTagName("IFRAME")[0];

    // Twitch-Button Action
    function playerTwitch() {
        if (iframe.src.includes("www.youtube.com")) {
            iframe.src = "https://player.twitch.tv/?channel=rocketbeanstv";
            switchBtn();
        }
    }

    // YouTube-Button Action
    function playerYt() {
        if (iframe.src.includes("twitch.tv")) {
            iframe.src = "//www.youtube.com/embed/live_stream?channel=UCQvTDmHza8erxZqDkjQ4bQQ&modestbranding=0&showinfo=0&iv_load_policy=3&rel=0&autoplay=1";
            switchBtn();
        }
    }

    // Switch Button to active
    function switchBtn(){
        if (iframe.src.includes("www.youtube.com")){
            btnYt.classList.add ("active");
            btnTwitch.classList.remove ("active");
        }
        else {
            btnTwitch.classList.add ("active");
            btnYt.classList.remove ("active");
        }
    }
        // call Twitch as standard
        playerTwitch();
    };

Ich bin kein richtiger Programmierer, konnte ich mir aber die richtigen Code-Schnipsel zusammenbasteln. Verbesserungen sind gerne erwünscht.

Edit: Jetzt mit static Youtube-Livestream-URL

8 „Gefällt mir“

Um den Player nicht zu früh laden zu lassen, könnte man das ausführen mittels eines Delays herauszögern…

Falls du weiter dran basteln willst: http://www.endmemo.com/js/pause.php

2 „Gefällt mir“

Danke dir! :slight_smile: Die Timeout-Funktion verzögert jetzt den Code um 650ms und wartet somit auf den eingebetteten Youtube-Stream. Ist natürlich leider dann auch von der Seiten-Performance und der eigenen Internetverbindung abhängig.

Die wait-Funktion unter dem Link hat beim Testen lustigerweise die Animation des Seiten-Ladekreises angehalten und somit den Aufbau der Seite verlängert :smiley:

1 „Gefällt mir“

Ja, „wait“ verzögert alle Scripts, die anschließend laufen, durch Timeout kannst du bestimmte einzelne Funktionen gezielt verlangsamen :slight_smile:

Ziemlich cool, aber man sollte auch bedenken das Twitch nicht mehr monetarisiert ist und die Bohnen dadurch keine Einnahmen mehr über Werbung etc. erzielen. Also wenn es nicht zu sehr schmerzt und man allgemein keine Probleme mit dem YT-Player hat, sollte man weiter darauf zurückgreifen. :budikopf:

5 „Gefällt mir“