API tools faq
paste
Advertisement
Guest User

Windows Media Player skin for YouTube – revision as of 01 June 2022, 13:07 (UTC)

a guest
Jun 1st, 2022
17
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.70 KB
Copied copy raw download clone embed print report
  1. // Windows Media Player skin for YouTube (desktop and mobile)
  2. var WMPskin = {};
  3.  
  4. function isDomain(domain) {
  5.     if (window.location.hostname.search(domain) >= 0) return true; else return false;
  6. }
  7.  
  8. function appendChildWithID(tagName,tagID,parent_element) {
  9.     // default parent element to document.body if unspecified
  10.     if (parent_element === undefined) parent_element = document.body;
  11.     parent_element.appendChild(document.createElement(tagName)); // add div
  12.     parent_element.lastElementChild.id=tagID; // give it ID
  13. }
  14.  
  15. function findVideoOnPage() {
  16.     if (document.getElementsByTagName("audio")[0]) {
  17.         WMPskin.media_exists = true;
  18.         return document.getElementsByTagName("audio")[0];
  19.     }
  20.     if (document.getElementsByTagName("video")[0]) {
  21.         WMPskin.media_exists = true;
  22.         return document.getElementsByTagName("video")[0];
  23.     } else {
  24.         WMPskin.media_exists = false;
  25.         console.debug("No media player found on page.");
  26.     }
  27. }
  28.  
  29.  
  30. var symbol_play = "▶︎";
  31. var symbol_pause= "ll"; // if rounded arial font unavailable: "❚ ❚";
  32.  
  33.  
  34. var WMplayer_replica_HTML = `
  35. <div class="wmp_bar placeholder"></div>
  36. <div class="wmp_bar progressbar"></div>
  37.  
  38. <div class="wmp_left">
  39.   <button class="wmpbutton title" id="wmp_title">Title</button>
  40.   <button class="wmpbutton timer" id="wmp_timer">00:00</button>
  41. </div>
  42.  
  43. <div class="wmp_center_1">
  44.   <button class="wmpbutton shuf">🔀️&#xFE0E;</button>
  45.   <button class="wmpbutton rpt">🔄&#xFE0E;</button>
  46.   <button class="wmpbutton stop">⏹&#xFE0E;</button>
  47.  
  48.     <div class="wmp_center_2">
  49.       <button class="wmpbutton rew" id="wmp_rew">◀◀</button>
  50.       <button class="wmpbutton play" id="wmp_play">▶︎</button>
  51.       <button class="wmpbutton fwd" id="wmp_fwd">▶︎▶︎</button>
  52.     </div>
  53.  
  54.   <button class="wmpbutton vol" id="wmp_speaker">🔊&#xFE0E;</button>
  55.   <div class="wmpbutton vol_slider"></div>
  56. </div>
  57.  
  58.  
  59. <style>
  60.  
  61. #wmplayer_replica button {
  62.     border:none;
  63.     background:none;
  64.     color:white;
  65.     cursor:pointer;
  66. }
  67.  
  68. #wmplayer_replica {
  69.     height:70px;
  70.     padding:10px;
  71.     color: white;
  72.     background-color: #223;
  73.     font-family:arial,'segoe ui';
  74.  
  75.     bottom:0;
  76.     width:100%;
  77.     text-align:center;
  78.     position:absolute;
  79.     display:flex;
  80.     background-image: linear-gradient(to bottom, #445 0%, #112 40%, #001 90%, #347 100%);
  81. }
  82.  
  83. .wmp_bar {
  84.     position:absolute;
  85.     top:-5px;
  86.     left:0px;
  87.     width:100%;
  88.     height:5px;
  89.     display:block;
  90.     background-color: #49F;
  91.     background-image: linear-gradient(to left, #AEF 0px, #49F 30px);
  92.     cursor:pointer;
  93. }
  94.  
  95. .wmp_bar.placeholder {
  96.     background-image:unset;
  97.     background-color:grey;
  98.     opacity:0.5;
  99. }
  100.  
  101. .wmp_bar.progressbar {
  102.     pointer-events: none;
  103. }
  104.  
  105. .wmp_left {
  106.     display:inline-block; position:relative; top:15px;
  107.     width:30%;
  108. }
  109.  
  110. .wmpbutton.title {
  111.     display:inline-block;
  112.     max-width:80%;
  113.     text-align:right;
  114.     margin-left:auto;
  115.     text-overflow: ellipsis;
  116.     overflow: hidden;  
  117.     white-space: nowrap;
  118. }
  119.  
  120. .wmpbutton.timer { margin-left:10px; }
  121.  
  122. .wmp_center_1 button { display:inline-block; margin-right:5px;  }
  123.  
  124. .wmpbutton { display:inline-block; font-size: 20px; }
  125. #wmplayer_replica .wmpbutton.play {
  126.     display:inline-block;
  127.     font-size:30px;
  128.     margin:auto;
  129.     padding-bottom:5px;
  130.     padding-left:8px;
  131.     align-content: center;
  132.     background-color: #15C;
  133.     background-image: linear-gradient(to bottom, #abe 0%, #36c 49%, #129 50%, #8ef 100%);
  134.     border-radius: 100px;
  135.     width:50px; height:50px;
  136.     box-shadow: 0 0 5px white;
  137.     margin:0 40px;
  138.     transform:scale(1.3);
  139.     font-family:'arial rounded mt bold';
  140.     font-weight:"bold";
  141. }
  142. .wmp_center_1 {
  143.     display:block;
  144.     margin:auto;
  145.     border-radius: 100px;
  146.     padding:5px 0;
  147.     vertical-align:middle;
  148.     box-shadow: 0 0 2px black;
  149.     width:600px;
  150.     background-image: linear-gradient(to bottom, #777 0%, #334 49%, #111 50%, #001 100%);
  151.     box-shadow: 0 0 2px white;
  152. }
  153.  
  154. .wmp_center_2 {
  155.     display:inline-block;
  156.     background-color: #345;
  157.     background-image: linear-gradient(to bottom, #abc 0%, #568 49%, #001 50%, #023 100%);
  158.     width:300px;
  159.     border-radius: 1000px;
  160. }
  161.  
  162. .wmpbutton.vol_slider {
  163.     width:100px;
  164.     height:5px;
  165.     background-color:#26F;
  166.     border-radius: 100px;
  167.  
  168.     position: relative;
  169.     top: -5px;
  170. }
  171.  
  172. #wmplayer_replica button:hover { filter: brightness(1.2); }
  173. #wmplayer_replica button:active  { filter: brightness(0.6); }
  174. </style>
  175. ` ;
  176.  
  177. if (isDomain("www.youtube.com")) {
  178.     WMPskin.media_placeholder = document.getElementById("player-container-outer");
  179. } else if (isDomain("m.youtube.com")) {
  180.     WMPskin.media_placeholder = document.getElementById("player-container-id");
  181. } else {
  182.     WMPskin.domain_valid = false;
  183.     WMPskin.media_placeholder = document.getElementsByTagName("audio")[0].parentElement;
  184.     console.warn("WMPskin: unsupported domain. Currently, it only works on YouTube.");
  185. }
  186.  
  187. appendChildWithID("div","wmplayer_replica",WMPskin.media_placeholder);
  188. document.getElementById("wmplayer_replica").innerHTML = WMplayer_replica_HTML;
  189.     WMPskin.div = document.getElementById("wmplayer_replica");
  190.     WMPskin.video = document.getElementsByTagName("audio")[0];
  191.     WMPskin.timer = document.getElementById("wmp_timer");
  192.     WMPskin.title = document.getElementById("wmp_title");
  193.     WMPskin.bar_placeholder = document.getElementsByClassName("wmp_bar")[0];
  194.     WMPskin.bar = document.getElementsByClassName("wmp_bar")[1];
  195.     WMPskin.play = document.getElementById("wmp_play");
  196.     WMPskin.rew = document.getElementById("wmp_rew");
  197.     WMPskin.fwd = document.getElementById("wmp_fwd");
  198.     WMPskin.speaker = document.getElementById("wmp_speaker");
  199.     WMPskin.domain_valid = true;
  200.  
  201. WMPskin.updateTimer = function() {
  202.     if ( WMPskin.media_exists && ! WMPskin.video.paused) {
  203.         WMPskin.bar.style.width = (WMPskin.video.currentTime / WMPskin.video.duration)*100+"%";
  204.         WMPskin.timer.innerHTML = mediaTimer(WMPskin.video.currentTime);
  205.         WMPskin.title.innerHTML = document.title;
  206.     }
  207.     if ( ! WMPskin.media_exists && ! WMPskin.updateTimer_no_player_alerted ) {
  208.         console.log("Windows Media Player skin could not find a media element on page.");
  209.         WMPskin.updateTimer_no_player_alerted = true;
  210.     }
  211. };
  212.  
  213. var media_time = {};
  214.  
  215. function mediaTimer_core(seconds) {
  216.  
  217.     if ( seconds >= 3600 ) {
  218.         // hours
  219.         media_time.HH = Math.floor( seconds/3600 );
  220.     }
  221.  
  222.     // minutes
  223.     media_time.MM = Math.floor( seconds/60%60 );
  224.     // leading zero
  225.     if ( seconds%3600 < 600 ) media_time.MM = "0" + media_time.MM;
  226.  
  227.     // seconds
  228.     media_time.SS = Math.floor( seconds%60 );
  229.     // leading zero
  230.     if ( seconds%60 < 10 ) media_time.SS = "0" + media_time.SS;
  231.  
  232.     if ( seconds >= 3600 ) {
  233.         return  media_time.HH+":"+media_time.MM+":"+media_time.SS;
  234.     } else { return media_time.MM+":"+media_time.SS; }
  235. }
  236.  
  237. function mediaTimer(seconds) {
  238.     if (seconds >= 0) return mediaTimer_core(seconds); // zero or positive
  239.     if (seconds < 0) // negative
  240.         {
  241.          seconds = seconds * (-1);
  242.          return "-"+mediaTimer_core(seconds);
  243.         }
  244.     if (seconds == undefined || isNaN(seconds) ) return "–&thinsp;–:–&thinsp;–:–&thinsp;–";
  245.  
  246. }
  247. function togglePlay(media) {
  248.     if (media) {
  249.         media.paused ? media.play() : media.pause();
  250.     }
  251. }
  252.  
  253. WMPskin.updateInterval = setInterval(WMPskin.updateTimer, 200);
  254.  
  255.     WMPskin.clickSeekBar = function(m){
  256.         if (WMPskin.video) {
  257.             var clickPos = m.clientX / WMPskin.bar_placeholder.offsetWidth;
  258.             console.debug("clickPos: " + clickPos);
  259.             WMPskin.video.currentTime = WMPskin.video.duration * clickPos;
  260.         }
  261.     };
  262.  
  263. WMPskin.bar_placeholder.addEventListener("mousedown", WMPskin.clickSeekBar );
  264.  
  265. WMPskin.fwd.onclick = function() { WMPskin.video.currentTime+=30 };
  266. WMPskin.rew.onclick = function() { WMPskin.video.currentTime-=10 };
  267.  
  268. WMPskin.updatePlayButton = function() {
  269.     if (WMPskin.video.paused) {
  270.         WMPskin.play.innerHTML=symbol_play;
  271.     } else {
  272.         WMPskin.play.innerHTML=symbol_pause+"&nbsp;";
  273.     }
  274. };
  275.  
  276.  
  277. WMPskin.play.onclick = function() {
  278.     togglePlay(WMPskin.video);
  279.     WMPskin.updatePlayButton();
  280. };
  281. WMPskin.speaker.onclick = function() {
  282.     if (WMPskin.video.muted) {
  283.         WMPskin.video.muted = 0;
  284.         WMPskin.speaker.innerHTML="🔊&#xFE0E;";
  285.     } else {
  286.         WMPskin.video.muted = 1;
  287.         WMPskin.speaker.innerHTML="🔇&#xFE0E;";
  288.     }
  289. };
  290.  
  291. // to avoid missing out on media element
  292. WMPskin.findPlayerInterval = setInterval( function(){
  293.     WMPskin.video=findVideoOnPage();
  294.         WMPskin.updatePlayButton();
  295. }, 2000);
  296.  
  297.  
  298. // full screen optimizations
  299.  
  300. window.addEventListener('resize', function() {
  301.     if (window.innerWidth > 1500) {
  302.         appendChildWithID("style","WMPskin_fullscreen_style",WMPskin.div);
  303.         WMPskin.div.lastElementChild.innerHTML = ".wmp_center_1 { position:absolute; left:50%; margin-left:-250px;} .wmp_left { text-align: left; } #wmplayer_replica { min-height:70px;}";
  304.     }  
  305.  
  306.     if (window.innerWidth < 1500) {
  307.         document.getElementById("WMPskin_fullscreen_style").outerHTML="";
  308.     }
  309.  
  310. } );
Advertisement
RAW Paste Data Copied
Advertisement
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!