Raw Source Toggle Dropdown

• Minified Source

alike03 / Youtube Widescreen

// ==UserScript==
// @name        Youtube Widescreen
// @description	Gives you the option to convert any Youtube Channel with one click to Widescreen Format.
// @author      alike03
// @version     1.0.1
// @namespace   youtubeWS
// @icon        https://addons.cdn.mozilla.net/user-media/addon_icons/2252/2252505-64.png
// @updateURL   https://openuserjs.org/meta/alike03/Youtube_Widescreen.meta.js
// @supportURL  https://openuserjs.org/scripts/alike03/Youtube_Widescreen/issues
// @downloadURL https://openuserjs.org/src/scripts/alike03/Youtube_Widescreen.user.js
// @homepageURL http://alike.ml/UserScript.php
// @match       https://*.youtube.com/*
// @require     https://code.jquery.com/jquery-3.4.1.min.js
// @copyright   2019, alike03 (https://openuserjs.org/users/alike03)
// @license     MIT
// ==/UserScript==
  
window.addEventListener("spfdone", process); // old youtube design
window.addEventListener("yt-navigate-start", remove); // new youtube design
window.addEventListener("yt-navigate-finish", process); // new youtube design
window.addEventListener("load", process); // one-time early processing
window.addEventListener("unload", saveData);

//Get Screenress
let sc_height = screen.height;
let sc_width = screen.width;
let ratio = screen.width / 1920;
let channelWidend = false;

let savedChannels = null;
let movie_player = null;
let video = null;

//Get savedChannels
if (localStorage.getItem("savedChannels1") != null)
  savedChannels = JSON.parse(localStorage.getItem("savedChannels1"));
if (savedChannels == null)
  savedChannels = [];

function checkPlayerExistence() {
  if (movie_player == null && document.getElementById("movie_player") != null) {
    movie_player = document.getElementById("movie_player");
    video = document.getElementById("movie_player").getElementsByTagName("video")[0];
  }
}

function remove() {
  $("#widescreenButton").remove();
  $(video).removeClass("widescreen-fullscreen");
}

function process() {
  checkPlayerExistence();
  if (movie_player != null) {
    (function () {
      let channelName = null;

      //Check if it's the old or the new Design
      if ($("body").is("#body")) {
        $("#watch7-subscription-container span:nth-child(4)").after(' <span id="widescreenButton" class="yt-uix-button-subscription-container"><button class="yt-uix-button yt-uix-button-size-default yt-uix-button-subscribed-branded yt-uix-subscription-button yt-can-buffer hover-enabled yt-uix-servicelink" type="button" aria-busy="false"><span class="yt-uix-button-content"><span class="enable-widescreen" aria-label="Make Videos from this Channel Widescreen">Enable Widescreen</span><span class="disable-widescreen" aria-label="Disable Widescreen">Disable Widescreen</span></span></button></span>')
      } else {
        var checkExistBL = setInterval(function () {
          if ($("#container div#info div#flex").length) {
            remove();
            $("#container div#info div#flex").after('<button id="widescreenButton" class="wsButtonNew"><span class="enable-widescreen" aria-label="Make Videos from this Channel Widescreen">Enable Widescreen</span><span class="disable-widescreen" aria-label="Disable Widescreen">Disable Widescreen</span></button>');
            clearInterval(checkExistBL);
          }
        }, 100);
      }

      var checkExistWB = setInterval(function () {
        if ($("#widescreenButton").length) {
          getChannel();
          clearInterval(checkExistWB);
          $('#widescreenButton').click(function () {
            buttonClick();
          })
        }
      }, 100);

      let ytdapp = document.getElementsByTagName("ytd-app")[0];
      observer.observe(movie_player, { attributes: true });
      //observer.observe(ytdapp, {attributes: true});
    })()
  }
};



function getChannel() {
  if ($("body").is("#body")) {
    channelName = $(".yt-user-info a:first-child").text();
    setTimeout(function () {
      enableButton();
    }, 1000);
  } else {
    var checkExist = setInterval(function () {
      if ($("#owner-container #owner-name a:first-child").text().length) {
        channelName = $("#owner-container #owner-name a:first-child").text();
        enableButton();
        clearInterval(checkExist);
      }
    }, 100);
  }
}

function enableButton() {
  if (savedChannels.includes(channelName)) {
    $('#widescreenButton .disable-widescreen').css("display", "inline");
    channelWidend = true;
  } else {
    $('#widescreenButton .enable-widescreen').css("display", "inline");
    channelWidend = false;
  }
}

function newVidCheck() {
  if (savedChannels.includes(channelName)) {
  } else {
  }
}

function buttonClick() {
  if (savedChannels.includes(channelName)) {
    savedChannels.pop(channelName);
    $('#widescreenButton .disable-widescreen').hide();
    $('#widescreenButton .enable-widescreen').show();
    channelWidend = false;
  } else {
    savedChannels.push(channelName);
    $('#widescreenButton .disable-widescreen').show();
    $('#widescreenButton .enable-widescreen').hide();
    channelWidend = true;
  }
  localStorage.setItem("savedChannels1", JSON.stringify(savedChannels));
  checkWidescreen();
  console.log(savedChannels);
}

function checkWidescreen() {
  let attributeValue = movie_player.classList;
  if (attributeValue.contains("ytp-fullscreen") && !$(video).hasClass("widescreen-fullscreen") && channelWidend === true) {
    $(video).addClass("widescreen-fullscreen");
  }
  if ($(video).hasClass("widescreen-fullscreen") && (!attributeValue.contains("ytp-fullscreen") || channelWidend === false)) {
    $(video).removeClass("widescreen-fullscreen");
  }
}

let observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    if (mutation.attributeName === "class" || mutation.attributeName === "masthead-hidden_") {
      checkWidescreen();
    }
  });
});

let css = [
  ".html5-video-container video.widescreen-fullscreen {",
  "width: " + sc_width + "px !important;",
  "height: " + sc_height + "px !important;",
  "left: 0 !important;",
  "transform: scale(" + ratio + ", " + ratio + ") translate(0px, 0px);",
  "}",
  ".disable-widescreen, .enable-widescreen {",
  "display: none",
  "}",
  "button.wsButtonNew {",
  "border: none;",
  "background: none;",
  "cursor: pointer;",
  "}",
  ".wsButtonNew > span {",
  "font-size: 1.3rem;",
  "font-weight: bolder;",
  "letter-spacing: .007px;",
  "text-transform: uppercase;",
  "color: var(--yt-spec-text-secondary);",
  "}"
].join("\n");
{
  var node = document.createElement("style");
  node.appendChild(document.createTextNode(css));
  var heads = document.getElementsByTagName("head");
  if (heads.length > 0) {
    heads[0].appendChild(node);
  } else {
    document.documentElement.appendChild(node);
  }
}

function saveData() {
  localStorage.setItem("savedChannels1", JSON.stringify(savedChannels));
}

console.log("Youtube Widescreen");