Windows Media Player skin for YouTube – revision as of 04 June 2022 23:13 (UTC)

// Windows Media Player skin for YouTube (desktop and mobile)

function start_WMPskin() {
    var WMPskin = {};

    function isDomain(domain) {
        if (window.location.hostname.search(domain) >= 0) return true; else return false;
    }

    function appendChildWithID(tagName,tagID,parent_element) {
        // default parent element to document.body if unspecified
        if (parent_element === undefined) parent_element = document.body;
        parent_element.appendChild(document.createElement(tagName)); // add div
        parent_element.lastElementChild.id=tagID; // give it ID
    }

    function findMediaOnPage() {
        if (document.getElementsByTagName("audio")[0]) {
            WMPskin.media_exists = true;
            return document.getElementsByTagName("audio")[0];
        }
        if (document.getElementsByTagName("video")[0]) {
            WMPskin.media_exists = true;
            return document.getElementsByTagName("video")[0];
        } else {
            WMPskin.media_exists = false;
            console.debug("No media player found on page.");
        }
    }


    var symbol_play = "▶︎";
    var symbol_pause= "ll"; // if rounded arial font unavailable: "❚ ❚";


    var WMplayer_replica_HTML = `
    <div class="wmp_bar placeholder"></div>
    <div class="wmp_bar progressbar"></div>

    <div class="wmp_left">
      <button class="wmpbutton title" id="wmp_title">Title</button>
      <button class="wmpbutton timer" id="wmp_timer">00:00</button>
    </div>

    <div class="wmp_center_1">
      <button class="wmpbutton shuf">🔀️&#xFE0E;</button>
      <button class="wmpbutton rpt">🔄&#xFE0E;</button>
      <button class="wmpbutton stop">⏹&#xFE0E;</button>

        <div class="wmp_center_2">
          <button class="wmpbutton rew" id="wmp_rew">◀◀</button>
          <button class="wmpbutton play" id="wmp_play">▶︎</button>
          <button class="wmpbutton fwd" id="wmp_fwd">▶︎▶︎</button>
        </div>

      <button class="wmpbutton vol" id="wmp_speaker">🔊&#xFE0E;</button>
      <div class="wmpbutton vol_slider"></div>
    </div>


    <style>

    #wmplayer_replica button {
        border:none;
        background:none;
        color:white;
        cursor:pointer;
    }

    #wmplayer_replica {
        height:70px;
        padding:10px;
        color: white;
        background-color: #223;
        font-family:arial,'segoe ui';

        bottom:0;
        width:100%;
        text-align:center;
        position:absolute;
        display:flex;
        background-image: linear-gradient(to bottom, #445 0%, #112 40%, #001 90%, #347 100%);
    }

    .wmp_bar {
        position:absolute;
        top:-5px;
        left:0px;
        width:100%;
        height:5px;
        display:block;
        background-color: #49F;
        background-image: linear-gradient(to left, #AEF 0px, #49F 30px);
        cursor:pointer;
    }

    .wmp_bar.placeholder {
        background-image:unset;
        background-color:grey;
        opacity:0.5;
    }

    .wmp_bar.progressbar {
        pointer-events: none;
    }

    .wmp_left {
        display:inline-block; position:relative; top:15px;
        width:30%;
    }

    .wmpbutton.title {
        display:inline-block;
        max-width:80%;
        text-align:right;
        margin-left:auto;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .wmpbutton.timer { margin-left:10px; }

    .wmp_center_1 button { display:inline-block; margin-right:5px;  }

    .wmpbutton { display:inline-block; font-size: 20px; }
    #wmplayer_replica .wmpbutton.play {
        display:inline-block;
        font-size:30px;
        margin:auto;
        padding-bottom:5px;
        padding-left:8px;
        align-content: center;
        background-color: #15C;
        background-image: linear-gradient(to bottom, #abe 0%, #36c 49%, #129 50%, #8ef 100%);
        border-radius: 100px;
        width:50px; height:50px;
        box-shadow: 0 0 5px white;
        margin:0 40px;
        transform:scale(1.3);
        font-family:'arial rounded mt bold',arial,helvetica,roboto,sans-serif;
        font-weight:bold;
    }
    .wmp_center_1 {
        display:block;
        margin:auto;
        border-radius: 100px;
        padding:5px 0;
        vertical-align:middle;
        box-shadow: 0 0 2px black;
        width:600px;
        background-image: linear-gradient(to bottom, #777 0%, #334 49%, #111 50%, #001 100%);
        box-shadow: 0 0 2px white;
    }

    .wmp_center_2 {
        display:inline-block;
        background-color: #345;
        background-image: linear-gradient(to bottom, #abc 0%, #568 49%, #001 50%, #023 100%);
        width:300px;
        border-radius: 1000px;
    }

    .wmpbutton.vol_slider {
        width:100px;
        height:5px;
        background-color:#26F;
        border-radius: 100px;

        position: relative;
        top: -5px;
    }

    #wmplayer_replica button:hover { filter: brightness(1.2); }
    #wmplayer_replica button:active  { filter: brightness(0.6); }
    </style>
    ` ;


    // domain fallback
        WMPskin.video = findMediaOnPage();
    if (isDomain("www.youtube.com")) {
        WMPskin.domain_valid = true;
        WMPskin.media_placeholder = document.getElementById("player-container-outer");
    } else if (isDomain("m.youtube.com")) {
        WMPskin.media_placeholder = document.getElementById("player-container-id");
    } else {
        WMPskin.domain_valid = false;
        WMPskin.media_placeholder = WMPskin.video.parentElement; // generic fallback
        console.warn("WMPskin: unsupported domain. Currently, it only works on YouTube.");
    }

    // insert player interface
    appendChildWithID("div","wmplayer_replica",WMPskin.media_placeholder);
    document.getElementById("wmplayer_replica").innerHTML = WMplayer_replica_HTML;

    // system variables
        WMPskin.div = document.getElementById("wmplayer_replica");
        WMPskin.timer = document.getElementById("wmp_timer");
        WMPskin.timer_mode = 0;
        WMPskin.title = document.getElementById("wmp_title");
        WMPskin.bar_placeholder = document.getElementsByClassName("wmp_bar")[0];
        WMPskin.bar = document.getElementsByClassName("wmp_bar")[1];
        WMPskin.play = document.getElementById("wmp_play");
        WMPskin.rew = document.getElementById("wmp_rew");
        WMPskin.fwd = document.getElementById("wmp_fwd");
        WMPskin.speaker = document.getElementById("wmp_speaker");
        WMPskin.domain_valid = true;


    WMPskin.updateTimer = function(pause_override) {
        if ( WMPskin.media_exists && ( ! WMPskin.video.paused || pause_override )  ) {
            WMPskin.updatePlayButton();
            WMPskin.bar.style.width = (WMPskin.video.currentTime / WMPskin.video.duration)*100+"%";
            switch(WMPskin.timer_mode) {
                case 0: WMPskin.timer.innerHTML = mediaTimer(WMPskin.video.currentTime); break;
                case 1: WMPskin.timer.innerHTML = "-"+mediaTimer(WMPskin.video.duration-WMPskin.video.currentTime); break;
                case 2: WMPskin.timer.innerHTML = mediaTimer(WMPskin.video.currentTime)+" / "+ mediaTimer(WMPskin.video.duration); break;
            }
        }
            WMPskin.title.innerHTML = document.title;
        if ( isDomain("youtube.com") ) WMPskin.title.innerHTML = decodeURI(WMPskin.title.innerHTML.substring(0,WMPskin.title.innerHTML.search(/(-|–)(?:.(?!(-|–)))+$/)-1 ) ); // remove "- YouTube"
        if ( ! WMPskin.media_exists && ! WMPskin.updateTimer_no_player_alerted ) {
            console.log("Windows Media Player skin could not find a media element on page.");
            WMPskin.updateTimer_no_player_alerted = true;
        }
    };

    var media_time = {};

    function mediaTimer_core(seconds) {

        if ( seconds >= 3600 ) {
            // hours
            media_time.HH = Math.floor( seconds/3600 );
        }

        // minutes
        media_time.MM = Math.floor( seconds/60%60 );
        // leading zero
        if ( seconds%3600 < 600 ) media_time.MM = "0" + media_time.MM;

        // seconds
        media_time.SS = Math.floor( seconds%60 );
        // leading zero
        if ( seconds%60 < 10 ) media_time.SS = "0" + media_time.SS;

        if ( seconds >= 3600 ) {
            return  media_time.HH+":"+media_time.MM+":"+media_time.SS;
        } else { return media_time.MM+":"+media_time.SS; }
    }

    function mediaTimer(seconds) {
        if (seconds >= 0) return mediaTimer_core(seconds); // zero or positive
        if (seconds < 0) // negative
            {
             seconds = seconds * (-1);
             return "-"+mediaTimer_core(seconds);
            }
        if (seconds == undefined || isNaN(seconds) ) return "–&thinsp;–:–&thinsp;–";

    }
    function togglePlay(media) {
        if (media) {
            media.paused ? media.play() : media.pause();
        } else return false;
    }

    WMPskin.updateInterval = setInterval(WMPskin.updateTimer, 200);

        WMPskin.clickSeekBar = function(m){
            if (WMPskin.video) {
                var clickPos = m.clientX / WMPskin.bar_placeholder.offsetWidth;
                console.debug("WMPlayer skin: clickPos: " + clickPos);
                WMPskin.video.currentTime = WMPskin.video.duration * clickPos;
                WMPskin.updateTimer(true);
            }
        };

    WMPskin.bar_placeholder.addEventListener("mousedown", WMPskin.clickSeekBar );

    WMPskin.fwd.onclick = function() { WMPskin.video.currentTime+=30; WMPskin.updateTimer(true); };
    WMPskin.rew.onclick = function() { WMPskin.video.currentTime-=10; WMPskin.updateTimer(true); };

    WMPskin.updatePlayButton = function() {
        if (WMPskin.video.paused) {
            WMPskin.play.innerHTML=symbol_play;
        } else {
            WMPskin.play.innerHTML=symbol_pause+"&nbsp;";
        }
    };


    WMPskin.play.onclick = function() {
        togglePlay(WMPskin.video);
        WMPskin.updatePlayButton();
    };
    WMPskin.speaker.onclick = function() {
        if (WMPskin.video.muted) {
            WMPskin.video.muted = 0;
            WMPskin.speaker.innerHTML="🔊&#xFE0E;";
        } else {
            WMPskin.video.muted = 1;
            WMPskin.speaker.innerHTML="🔇&#xFE0E;";
        }
    };

    WMPskin.timer.onclick = function() {
            switch(WMPskin.timer_mode) {
                case 0: WMPskin.timer_mode = 1; break;
                case 1: WMPskin.timer_mode = 2; break;
                case 2: WMPskin.timer_mode = 0; break;
            }
            WMPskin.updateTimer(true);
    };

    // to avoid missing out on media element
    WMPskin.findPlayerInterval = setInterval( function(){
        WMPskin.video=findMediaOnPage();
            WMPskin.updatePlayButton();
    }, 2000);


    // full screen optimizations

    window.addEventListener('resize', function() {
        if (window.innerWidth > 1500) {
            if ( ! document.getElementById("WMPskin_fullscreen_style") ) {
                appendChildWithID("style","WMPskin_fullscreen_style",WMPskin.div);
            }
            document.getElementById("WMPskin_fullscreen_style").innerHTML = ".wmp_center_1 { position:absolute; left:50%; margin-left:-250px;} .wmp_left { text-align: left; } #wmplayer_replica { min-height:80px;}";
        }

        if (window.innerWidth < 1500 && document.getElementById("WMPskin_fullscreen_style") ) {
            document.getElementById("WMPskin_fullscreen_style").outerHTML="";
        }

    } );
}

window.addEventListener('load', start_WMPskin);

// patch
var start_WMPskin_retry = setInterval(function(takedownWarningPolymer){
    if(document.readyState == "complete" && ! document.getElementById("wmplayer_replica") )
        start_WMPskin();
        if (document.getElementById("wmplayer_replica") ) { clearInterval(start_WMPskin_retry); }
}, 1000);

window.addEventListener('click', function(){ if ( ! document.getElementById("wmplayer_replica") ) start_WMPskin(); } );