// ==UserScript==
// @name         Animephae next/prev buttons on player
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds next and prev buttons on the player on animephae
// @author       Jin Park
// @match        https://animepahe.com/play/*
// @icon         https://www.google.com/s2/favicons?domain=animepahe.com
// @grant        none
// @downloadURL none
// ==/UserScript==

/* jshint esversion:6 */

(function() {
    'use strict';

const next = document.querySelector("[aria-labelledby='episodeMenu']").getElementsByClassName('active')[0].nextElementSibling;
const prev = document.querySelector("[aria-labelledby='episodeMenu']").getElementsByClassName('active')[0].previousElementSibling;

let nextButtonStr = '<button class="next-button" style="font-size: 20px;position: absolute;top: 50%;right: 2%;z-index: 9999999999999999999;color: white;border: 0;padding: 0;background-color: transparent;"><i class="arrow right"></i></button>'
let prevButtonStr = '<button class="next-button" style="font-size: 20px;position: absolute;top: 50%;left: 2%;z-index: 9999999999999999999;color: white;border: 0;padding: 0;background-color: transparent;"><i class="arrow left"></i></button>'

let buttonStyleStr = `<style>
.player:not(:hover) > .next-button, .player:not(:hover) > .next-button {display: none;}
.arrow {
    border: solid white;
    border-width: 0 8px 8px 0;
    display: inline-block;
    padding: 8px;
    opacity: 0.5
  }
  .right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  .left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }
</style>`

const player = document.getElementsByClassName('player')[0]

const parser = new DOMParser();
const nextButton = parser.parseFromString(nextButtonStr, 'text/html').getElementsByTagName('button')[0];
const prevButton = parser.parseFromString(prevButtonStr, 'text/html').getElementsByTagName('button')[0];
const buttonStyle = parser.parseFromString(buttonStyleStr, 'text/html').getElementsByTagName('style')[0];

if (next) {
    player.appendChild(nextButton)
}

if (prev) {
    player.appendChild(prevButton)
}

document.body.appendChild(buttonStyle)

})();