Click on the Play button to watch and listen the OP/END directly on MAL! Click on the OP/END music title text to search for the music title on youtube on a new tab.
As of
// ==UserScript==
// @name Openings/Endings Enhancer - MAL
// @namespace Search_Ops_Ends
// @version 0.7
// @description Click on the Play button to watch and listen the OP/END directly on MAL! Click on the OP/END music title text to search for the music title on youtube on a new tab.
// @author hacker09
// @match https://myanimelist.net/anime/*
// @match https://myanimelist.net/manga/*
// @icon https://www.google.com/s2/favicons?domain=myanimelist.net
// @run-at document-end
// ==/UserScript==
(async function() {
'use strict';
if (document.querySelectorAll('span[class*="theme-song"]').length !== 0) //If there's at least one op/end listed on the page
{ //Starts the if condition
var TimesExecuted = 0; //Creates a new variable
window.onscroll = async function() { //Creates a new function to run when the page is scrolled
TimesExecuted += 1; //Sum the amount of times that the page is scrolled
if (TimesExecuted === 1) { //On the first time that the page is hovered
const response1 = await (await fetch('https://staging.animethemes.moe/api/resource?filter[external_id]=' + location.pathname.split('/')[2] + '&filter[site]=MyAnimeList&include=anime')).json(); //Get the anime id on themes.moe
const FinalResponse = await (await fetch('https://staging.animethemes.moe/api/anime?filter[anime][id]=' + response1.resources[0].anime[0].id + '&include=themes.entries.videos')).json(); //Get the videos from theme.moe
function OnClick(el, link) { //Creates a new function
if (document.getElementsByName('MusicIframe')[0].style.display === 'none') { //If the video is hidden
document.getElementsByName('MusicIframe')[0].src = link; //Add the video source url to the iframe
el.src = "https://i.imgur.com/p66Ij4i.png"; //Change the btn to pause
document.getElementsByName('MusicIframe')[0].style.display = ''; //Show the video
} else { //If the video is being shown
document.getElementsByName('MusicIframe')[0].src = ''; //Remove the video source url of the iframe
el.src = "https://i.imgur.com/4qHDObk.png"; //Change the btn to play
document.getElementsByName('MusicIframe')[0].style.display = 'none'; //Hides the video
} //Finishes the else condition
} //Finishes the onclick function
FinalResponse.anime[0].themes.forEach(function(video, i) { //forEach video link
if (document.querySelectorAll('span[class*="theme-song"]').length > i) //If the current looped video number isn't greater than the amount of ops/ends in the page
{ //Starts the if condition
document.querySelectorAll('span[class*="theme-song"]')[i].insertAdjacentHTML('beforeend', `<img id="PlayPause" src="https://i.imgur.com/4qHDObk.png" style="cursor: 'pointer'; margin-left: 5px;" />`); //Add the play btn in front of the OP/END
document.querySelectorAll("#PlayPause")[i].onclick = function(e) { //When the play/pause img is clicked
e.preventDefault(); //Stop YT from being opened
e.stopPropagation(); //Stop YT from being opened
OnClick(this, video.entries[0].videos[0].link.replace('staging.', '')); //Call the OnClick function
}; //Run the OnClick function on every play/pause btn when clicked
} //Finishes the if condition
}); //Finishes the foreach function
document.querySelectorAll("div.di-t")[1].insertAdjacentHTML('afterEnd', `<iframe width="800" height="400" name="MusicIframe" style="display:none;" allowfullscreen></iframe>`); //Add the iframe on the page
} // //Finishes the if condition
}; //Finishes the onscroll event listener
document.querySelectorAll('span[class*="theme-song"]').forEach(function(el) { //For each op/end
var title = el.innerText.split(': '); //Save the op/end title on a variable
if (title[1] !== undefined) //If there's a number: in front of the op/end title
{ //Starts the if condition
title = title[1].split('(ep')[0].trim(); //Save the op/end title on a variable
} //Finishes the if condition
else //If there's no number: in front of the op/end title
{ //Starts the else condition
title = title[0].split('(ep')[0].trim(); //Save the op/end title on a variable
} //Finishes the else condition
el.style.cursor = 'pointer'; //Make the op/end title element look like it's clickable
el.onclick = function() //When the op/end title is clicked
{ //Starts the onclick function
window.open('https://www.youtube.com/results?search_query=' + title, 'blank'); //Search the music title on youtube on a new tab
}; //Finishes the onclick function
el.onmouseout = function() //When the op/end title is unhovered
{ //Starts the onmouseout function
this.style.color = ''; //Readd the default color
}; //Finishes the onmouseout function
el.onmouseover = function() //When the op/end title is hovered
{ //Starts the onmouseover function
this.style.color = '#6386d5'; //Change the default text color to blue
}; //Finishes the onmouseover function
}); //Finishes the for each condition
} //Finishes the if condition
})();