HookTube Search Restore 0.2.1

// ==UserScript==
// @name        HookTube Search Restore
// @namespace   hkt_search_restore
// @description Restores search functionality to HookTube.
// @include     *://hooktube.com/*
// @version     0.2.1
// @grant       GM.xmlHttpRequest
// @run-at      document-end
// @noframes
// ==/UserScript==

/*
 * CHANGELOG (DD/MM/YY):
 *
 * 11/07/18 -
 *      Initial.
 * 12/07/18 -
 *      HookTube added a redirect from "/channel/CHANNEL_ID" to the homepage, now using "/channel?cid=CHANNEL_ID" to display channels.
 *      Added description, likes, dislikes, views, and links to channel on video view page.
 *      Fixed issues with script re-running on a page it has already run on when going back in history.
 */

if (document.getElementById("hkt_search") !== null) {
  return;
}

const TIMEOUT             = 15;
const CHANNEL             = "/channel";
const SEARCH              = "/search";
const WATCH               = "/watch";
const CHANNEL_INTROG      = "?cid=";
const SEARCH_INTROG       = "?q=";
const YTNOAD              = "youtubenoad";
const YTNOAD_CHANNEL_URL  = YTNOAD + ".com/" + CHANNEL_INTROG;
const YTNOAD_SEARCH_URL   = YTNOAD + ".com/" + SEARCH_INTROG;
const YTNOAD_TYPE_VIDEO   = "play_circle_filled";
const YTNOAD_TYPE_PLIST   = "playlist_play";
const YTNOAD_TYPE_CHANNEL = "person";
const HKT                 = "hooktube";
const HKT_CHANNEL_URL     = HKT + ".com" + CHANNEL + CHANNEL_INTROG;
const HKT_SEARCH_URL      = HKT + ".com" + SEARCH + SEARCH_INTROG;
const PROTOCOL            = window.location.protocol + "//";

/*
 * address - expected to be a youtubenoad.com/?q= (search) or youtubenoad.com/?cid= (channel) address
 * cbload - callback when data is loaded
 * cbtimeout - callback if request to youtubenoad times out
 */
function getVideoEntries(address, cbload, cbtimeout) {
  GM.xmlHttpRequest({
    method: "GET",
    headers: {
      "Accept": "text/html"
    },
    url: address,
    timeout: 1000 * TIMEOUT,
    ontimeout: function(rsp) {
      cbtimeout();
    },
    onload: function(rsp) {
            let temp = document.createElement("span");
      temp.innerHTML = rsp.responseText;

      let entries = temp.getElementsByClassName("card");
      let videos_list = [];
      let videos_count = 0;
      let channels_list = [];
      let channels_count = 0;
      let playlists_list = [];
      let playlists_count = 0;

      for (let i = 0; i < entries.length; i++) {
        let type = entries[i].children[0].children[1].children[0].innerHTML;

        if (type === YTNOAD_TYPE_VIDEO) {
          videos_list[videos_count++] = {
            title: entries[i].children[1].children[0].children[3].dataset.tooltip,
            url: entries[i].children[0].children[0].href.replace(YTNOAD, HKT),
            img: entries[i].children[0].children[0].children[0].src,
            channel: {
              name: entries[i].children[1].children[0].children[1].innerHTML,
              url: entries[i].children[1].children[0].children[1].href.replace(YTNOAD_CHANNEL_URL, HKT_CHANNEL_URL)
            }
          };
        } else if (type === YTNOAD_TYPE_PLIST) {
          // @todo
          // not important, but maybe
        } else if (type === YTNOAD_TYPE_CHANNEL) {
            // not important either
        }
      }

      let next_page_url = "";
      let more_btn = temp.getElementsByClassName("main")[0].children[0].children[0].lastChild.previousSibling;
      if (more_btn.children.length !== 0) {
        // first page has only "next" button, subsequent pages have "previous" button
        if (more_btn.children.length == 2) {
          next_page_url = more_btn.children[1].children[0].href;
        } else {
          next_page_url = more_btn.children[0].children[0].href;
        }
      }

      cbload({
        videos: videos_list,
        channels: channels_list,
        playlists: playlists_list,
        next: next_page_url
      });
    }
  });
}

function createVideoTile(video_data) {
    let outer = document.createElement("div");
  outer.className = "col-lg-4 col-md-6 col-sm-12";
  let inner = document.createElement("div");
  inner.className = "row mb-2";

  let thumb = document.createElement("div");
  thumb.className = "col-sm-5 thumb";
  let thumb_link = document.createElement("a");
  thumb_link.href = video_data.url;
  thumb_link.title = video_data.title;
  let thumb_img = document.createElement("img");
  thumb_img.src = video_data.img.replace("hqdefault", "mqdefault");
  thumb_img.alt = video_data.title;

  let dets = document.createElement("div");
  dets.className = "col-sm-7";
  dets.style.overflow = "hidden";
  dets.style.textOverflow = "ellipsis";
  let dets_vidlink = document.createElement("a");
  dets_vidlink.href = video_data.url;
  dets_vidlink.title = video_data.title;
  dets_vidlink.innerHTML = video_data.title;
  let dets_channellink = document.createElement("a");
  dets_channellink.href = video_data.channel.url;
  dets_channellink.innerHTML = video_data.channel.name;
  dets_channellink.style.display = "block";
  dets_channellink.style.color = "black";

  dets.appendChild(dets_vidlink);
  dets.appendChild(dets_channellink);
  thumb_link.appendChild(thumb_img);
  thumb.appendChild(thumb_link);
  inner.appendChild(thumb);
  inner.appendChild(dets);
  outer.appendChild(inner);

  return outer;
}


// ================================================================


const do_search  = window.location.pathname === SEARCH;
const do_channel = window.location.pathname === CHANNEL;
const do_watch = window.location.pathname === WATCH;

const input = document.createElement("input");
input.type = "text";
input.id = "hkt_search";
input.placeholder = "Search...";
input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
    let term = input.value.replace(/ /g, "+");
    window.location.href = PROTOCOL + HKT_SEARCH_URL + term;
  }
}, false);
document.getElementById("search-form").appendChild(input);

if (do_search || do_channel) {
  let warning = document.getElementById("warning");
    warning.children[0].innerHTML = "Loading...";
  warning.children[1].style.display = "none";

    let main = document.getElementsByClassName("main")[0];
  main.style.display = "none";
  main.children[0].style.display = "none";

  let vlist = document.getElementById("video-list");
  if (vlist == null) {
    vlist = document.createElement("div");
    vlist.id = "video-list";
    vlist.className = "row";
    main.insertBefore(vlist, main.children[0]);
  }

  let loadnext = document.createElement("button");
  loadnext.className = "btn btn-primary btn-block";
  loadnext.innerHTML = "Load More...";
  loadnext.style.display = "none";
  if (do_search) {
    main.insertBefore(loadnext, main.children[1]);
  } else {
    main.insertBefore(loadnext, document.getElementById("main-footer"));
  }

  let loading = document.createElement("button");
  loading.className = "btn btn-secondary btn-block";
  loading.innerHTML = "Loading...";
  loading.style.display = "none";
  main.insertBefore(loading, loadnext);

  let progress = function(address) {
    getVideoEntries(
      address,
      function(rsp) {
        for (let i = 0; i < rsp.videos.length; i++)
          vlist.appendChild(createVideoTile(rsp.videos[i]));

        if (do_channel) {
          document.title = rsp.videos[0].channel.name;
        }

        warning.style.display = "none";
        main.style.display = "block";
        loading.style.display = "none";

        if (rsp.next !== "") {
          loadnext.style.display = "block";
          loadnext.onclick = function(ev) {
            loadnext.style.display = "none";
            loading.style.display = "block";
            progress(rsp.next);
          };
        }
      },
      function() {
        loading.style.display = "none";
        loadnext.style.display = "block";
        loadnext.innerHTML = "Request Timed Out - Try Again";
        loadnext.onclick = function(ev) {
          loadnext.style.display = "none";
          loading.style.display = "block";
          progress(address);
        }
    });
  }

  if (do_search) {
    progress(PROTOCOL + YTNOAD_SEARCH_URL + window.location.search.substring(3) + "&nocache=true");
  } else {
    progress(PROTOCOL + YTNOAD_CHANNEL_URL + window.location.search.substring(5));
  }
} else if (do_watch) {
  GM.xmlHttpRequest({
    method: "GET",
    headers: {
      "Accept": "text/html"
    },
    url: window.location.href.replace(HKT, YTNOAD),
    timeout: 1000 * TIMEOUT,
    ontimeout: function(rsp) {
      console.log("TIMEOUT");
    },
    onload: function(rsp) {
      let temp = document.createElement("span");
      temp.innerHTML = rsp.responseText;

      let section = temp.getElementsByClassName("section")[0];
      let channel_id = section.children[0].children[0].children[0].children[0].href;
      channel_id = channel_id.substring(channel_id.indexOf("=") + 1);
      let views = section.children[0].children[0].children[0].lastChild.data.substring(9);
      let likes = "0";
      let dislikes = "0";
      let lds = section.children[0].children[0].children[1].innerHTML.split(" ");

      for (let i = 0; i < lds.length; i++) {
        if (lds[i] !== "") {
            if (lds[i] === "Likes:") {
            likes = lds[i + 1].substring(0, lds[i++ + 1].indexOf("&"));
          } else if (lds[i] === "Dislikes:") {
            dislikes = lds[i + 1].substring(0, lds[i++ + 1].indexOf("&"));
          }
        }
      }

      let description = section.children[1].children[0];
      description.children[0].remove();
      description = description.innerHTML;
      let date = section.children[1].children[1].children[0].innerHTML.substring(11);

      let video_channel_name_el = document.getElementById("video-channel-name");
      video_channel_name_el.style.borderBottom = "1px solid #727b84";
      let channel_name = video_channel_name_el.innerHTML.substring(13);
      let video_channel_link_el = document.createElement("a");
      video_channel_link_el.href = CHANNEL + CHANNEL_INTROG + channel_id;
      video_channel_link_el.innerHTML = channel_name;
      video_channel_name_el.innerHTML = "Published by ";
      video_channel_name_el.appendChild(video_channel_link_el);
      video_channel_name_el.appendChild(document.createTextNode(" on "));
      video_channel_name_el.appendChild(document.createTextNode(date));

      let description_el = document.getElementById("video-description");
      description_el.innerHTML = description;

      let vstats_el = document.getElementById("video-stats");
            let views_el = document.createElement("span");
      views_el.innerHTML = "<i class='fa fa-eye'></i> " + views;
      views_el.style.marginLeft = "20px";
      vstats_el.appendChild(views_el);
      let likes_el = document.createElement("span");
      likes_el.innerHTML = "<i class='fa fa-thumbs-o-up'></i> " + likes;
      likes_el.style.marginLeft = "20px";
      vstats_el.appendChild(likes_el);
      let dislikes_el = document.createElement("span");
      dislikes_el.innerHTML = "<i class='fa fa-thumbs-o-down'></i> " + dislikes;
      dislikes_el.style.marginLeft = "20px";
      vstats_el.appendChild(dislikes_el);
    }
  });
}