// ==UserScript==
// @name         Anime Songs - AniList Player
// @namespace    Openings and Endings Player
// @version      1.1
// @description  This Script allows You to play Openings and Endings directly on AniList
// @author       NurarihyonMaou
// @match        https://anilist.co/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        GM_xmlhttpRequest
// @grant        GM_setValue
// @grant        GM_getValue
// @require      http://code.jquery.com/jquery-3.5.1.min.js

// @downloadURL none
// ==/UserScript==

const $ = window.jQuery;

var result;

var openings;

var Anime;
var baseURL = "https://themes.moe/api/anime/search/";
var url = baseURL;
var AID = [];

var AnimeID;

function loadVideos(AnimeID) {
  var Song = 0;

  (function init() {
    openings = document.getElementsByClassName("openings");

    if (openings.length > 0) {
      GM_xmlhttpRequest({
        method: "POST",
        url: "https://themes.moe/api/themes/search",
        data: AnimeID,
        headers: { "Content-Type": "application/json" },
        onload: function (response) {
          result = JSON.parse(response.responseText);

          $(openings).append(
            "<video style='display: none' id='Player' width='500px' height='300' src='' allowfullscreen controls autoplay/>"
          );

          var number = 0;

          start_position: while (true) {
            number++;

            if (
              $("div.openings, div.endings").children(".tag").html().length > 0
            )
              break;
            else continue start_position;
          }
          for (Song; Song < result[0].themes.length; Song++) {
            $("div.openings, div.endings")
              .children(".tag")
              .filter(function () {
                var test = $(this);

                if (
                  $(test)
                    .text()
                    .split(" by ")[0]
                    .replace(/\(([^)]+)\)/, "")
                    .replace(/[“"”]+/g, "")
                    .replace(/\#\d*:/g, "")
                    .replace(/[^\w\s]/gi, " ")
                    .trim() ==
                  result[0].themes[Song].themeName
                    .replace(/\(([^)]+)\)/, "")
                    .replace(/\#\d*:/g, "")
                    .replace(/[^\w\s]/gi, " ")
                    .trim()
                ) {
                  $(test).html(
                    "<a href='" +
                      result[0].themes[Song].mirror.mirrorURL +
                      "'>" +
                      $(test).text() +
                      "</a>"
                  );
                }
              });
          }
        },
        onerror: function (error) {
          console.log(error);
        },
      });

      $(".tag").click(function (e) {
        e.preventDefault();

         if($(this).children().length == 0){
           alert("Sadly, this OP/ED is Missing");
          }
        else if (
          $("body #Player").css("display") == "none" ||
          $(this).children().attr("href") != $("body #Player").attr("src")
        ) {
          $("body #Player").css("display", "block");

          $("body #Player").attr("src", $(this).children().attr("href"));
        } else if (
          $(this).children().attr("href") == $("body #Player").attr("src")
        ) {
          $("body #Player").css("display", "none");
          $("body #Player").attr("src", "");
        }
      });
    } else {
      setTimeout(init, 0);
    }
  })();
}

function getAID() {
  GM_xmlhttpRequest({
    method: "GET",
    url: url,
    onload: function (response) {
      AID[0] = JSON.parse(response.responseText)[0];

      AID = JSON.stringify(AID);
      AID = AID.replace(/[“'"”]+/g, "");

      loadVideos(AID);
      url = baseURL;
      AID = [];
    },
    onerror: function (error) {
      console.log(error);
    },
  });
}

(function init() {
  openings = document.getElementsByClassName("openings");
  if (openings.length > 0) {
    Anime = $("div.content").find("h1").text().trim();
    url += Anime;

    if (url != baseURL) getAID();

    let mList = document.querySelector(".content h1"),
      options = {
        characterData: true,
        childList: true,
        subtree: true,
      },
      observer = new MutationObserver(mCallback);

    function mCallback(mutations) {
      if (mutations.length == 1) {
        Anime = $("div.content").find("h1").text().trim();
        url += Anime;
        if (url != baseURL) getAID();
      }
    }

    observer.observe(mList, options);
  } else {
    setTimeout(init, 0);
  }
})();

var oldURL;

(function () {
  var pushState = history.pushState;
  var replaceState = history.replaceState;

  history.pushState = function () {
    pushState.apply(history, arguments);
    window.dispatchEvent(new Event("pushstate"));
    window.dispatchEvent(new Event("locationchange"));
  };

  history.replaceState = function () {
    replaceState.apply(history, arguments);
    window.dispatchEvent(new Event("replacestate"));
    window.dispatchEvent(new Event("locationchange"));
  };

  window.addEventListener("popstate", function () {
    window.dispatchEvent(new Event("locationchange"));
  });
})();

$(window).on("load", function () {
  GM_setValue("oldURL", $(location).attr("pathname").split("/")[1]);
});

window.addEventListener("locationchange", function () {
  oldURL = GM_getValue("oldURL");

  if (
    oldURL != "anime" &&
    $(location).attr("pathname").split("/")[1] == "anime"
  ) {
    GM_setValue("oldURL", $(location).attr("pathname").split("/")[1]);
    location.reload();
  } else GM_setValue("oldURL", $(location).attr("pathname").split("/")[1]);
});