// ==UserScript==
// @name        Display YouTube channelId
// @description Display channelId on YouTube user pages
// @namespace   DisplayYTChannelId
// @match       https://www.youtube.com/*
// @grant       GM_xmlhttpRequest
// @version     2.2.2
// @author      Somepony
// ==/UserScript==

const matchURLs = ["https://www.youtube.com/channel/","https://www.youtube.com/c/","https://www.youtube.com/user/"];
const isFireOnQueryChanges = true; // e.g. http://www.example.com/test.htm?email=someone@example.com
const isFireOnHashChanges  = false; // e.g. http://www.example.com/test.htm#part2

// Select element
// Delete channelId tags from header element if they exist
async function getElement() {
  let element = document.querySelector('[id="meta"][class="style-scope ytd-c4-tabbed-header-renderer"]');
  if (element != null) {
    let tags_existing = element.getElementsByClassName("channelId");
    while (tags_existing[0]) {
      tags_existing[0].remove(tags_existing[0]);
    }
  }
  return element;
}

// Load current page again and get channelId
async function getchannelId(url) {
  let promise = new Promise((resolve, reject) => {
    let channelId = null;
    GM_xmlhttpRequest ({
    method:     'GET',
    url:        url,
    onload:     function (response) {
                  if (response.status == 200) {
                    let parser  = new DOMParser();
                    let doc = parser.parseFromString (response.responseText, "text/html");
                    channelId = doc.querySelector('[itemprop="channelId"]').content;
                  }
                  resolve(channelId);
                }
    });
  });
  return await promise;
}

async function main() {
  
  // Recursively tries to find element and delete any channelId tags if they exists
  let element = (async function() {
    while (true) {
      let x = await getElement();
      if (x != null) {
        return x;
      }
      await new Promise(r => setTimeout(r, 500));
    }
  }());
  
  // Get channelId of current URL
  let channelId = (async function() {
    while (true) {
      let x = await getchannelId(location.href);
      if (x != null) {
        return x;
      }
      await new Promise(r => setTimeout(r, 500));
    }
  }());
  
  // Append new tag with channelId
  let tag = document.createElement("yt-formatted-string");
  tag.classList.add("style-scope","ytd-c4-tabbed-header-renderer","channelId");
  tag.id = "subscriber-count";
  channelId = await channelId;
  element = await element;
  element.appendChild(tag);
  tag.innerHTML = `<br/>Channel ID: ${channelId}`;
}

if (window.top == window.self) {
  var lastPathStr = null;
  var lastQueryStr = null;
  var lastHashStr = null;
  (function pageURLCheckTimer() {
    
    // Run if match URL
    if (matchURLs.some(x => location.href.startsWith(x))) {
      if (   lastPathStr !== location.pathname
        || (isFireOnQueryChanges && lastQueryStr !== location.search)
        || (isFireOnHashChanges  && lastHashStr  !== location.hash)
      ) {
        lastPathStr  = location.pathname;
        lastQueryStr = location.search;
        lastHashStr  = location.hash;
        try {
          main();
        } catch(e) {
          console.log(e);
        }
      }
    }
    
    setTimeout(pageURLCheckTimer, 100);
  }());
}