"use strict";

// DragonPlay : Player Javascript
// https://web.silvercherry.fr/player.html
// Version 23.20.1 (Year, week, version) by SilverCherry (Marine Latour) - CC-BY

document.addEventListener("DOMContentLoaded", function() 
{ 

// Génération du player :
var audio = document.getElementsByTagName("audio");
var player = '<div class="player"><div class="pochette" style="display:none"><img></div><div class="play" title="Play" tabindex="0"><span></span></div><div class="pause" title="Pause" tabindex="0" style="display: none;"><span></span></div><div class="backward" title="Backward" tabindex="0"><span></span><span></span></div><div class="forward" title="Forward" tabindex="0"><span></span><span></span></div><div class="title"></div><div class="prog" aria-label="Progression" tabindex="0"><div class="progBarre"></div></div><div class="timer">00:00</div><div class="volumeF" title="Volume" aria-label="Volume : 1" tabindex="0"><div class="volumeBarre"></div></div></div>';
var head = document.getElementsByTagName("head")[0];
var style = document.createElement("style");
style.innerHTML = ":root{--player-col1:#FBFBFB;--player-col2:#333333;--player-odd:#CCCCCC;--player-even:#DDDDDD;--player-bar1:#333333;--player-bar2:#CCCCCC;--player-text:#333333}.player .timer{white-space:nowrap}.player,.player *{box-sizing:border-box;margin:0;padding:0;line-height:1;font-size:1em}audio{display:none}.player{display:flex;align-items:center;margin:20px;padding:5px;background-color:var(--player-col1);border-style:solid;border-width:2px 0;border-color:var(--player-col2);border-radius:5px;flex-wrap:wrap;justify-content:space-around;position:relative}.player::after{content:'';height:20px;width:40px;background-image:url('https://web.silvercherry.fr/img/DragonPlay.svg');background-repeat:no-repeat;background-size:contain}.player .pause span,.player .play span,.playlist .forward span,.playlist .backward span{display:inline-block;height:20px;border-style:solid;width:15px}.player .play span,.playlist .forward span:first-of-type{border-width:10px 0 10px 15px;border-color:transparent transparent transparent var(--player-col2)}.player .pause span{border-width:0 5px;border-color:transparent var(--player-col2)}.player .pause,.player .play,.playlist .forward,.playlist .backward{display:flex;align-items:center;width:15px;height:30px;margin:0 10px;cursor:pointer}.playlist .forward,.playlist .backward{width:20px}.player .play:hover span,.playlist .forward:hover span:first-of-type{opacity:.75}.player .pause:hover span{opacity:.75}.player .prog{overflow:hidden;cursor:pointer;max-width:100%;min-width:100px;height:20px;margin:0 10px;background-color:var(--player-bar2);flex-grow:1;border-radius:1px}.player .prog:hover .progBarre{opacity:.75}.player .progBarre{width:0;background-color:var(--player-bar1);height:20px;overflow:visible;text-indent:5px}.player .timer,.playlist{color:var(--player-text)}.player .volumeF{cursor:pointer;width:75px;height:10px;margin:5px 10px;background-color:var(--player-bar2);border-radius:1px;overflow:hidden}.player .volumeF:hover .volumeBarre{opacity:.75}.player .volumeBarre{width:100%;background-color:var(--player-bar1);height:10px}.playlist{margin:15px}.playlist .player{border-bottom:0;border-radius:5px 5px 0 0;margin:0}.playlist ul{background-color:var(--player-col1);margin:0;padding:0 5px 5px;list-style-type:none;border-style:solid;border-width:0 0 2px;border-color:var(--player-col2);border-radius:0 0 5px 5px}.playlist ul li{padding:5px;cursor:pointer}.playlist ul li:nth-of-type(odd){background-color:var(--player-odd)}.playlist ul li:nth-of-type(even){background-color:var(--player-even)}.playlist ul li:hover{opacity:.75}.playlist .backward span:first-of-type{border:0;border-right:5px solid var(--player-col2)}.playlist .forward span:last-of-type{border:0;border-left:5px solid var(--player-col2)}.playlist .backward span:last-of-type{border-width:10px 15px 10px 0;border-color:transparent var(--player-col2) transparent transparent}.playlist .backward:hover span:first-of-type,.playlist .forward:hover span:last-of-type{opacity:.75}.playlist .backward:hover span:last-of-type{opacity:.75}.player .title{margin:5px}.playlist ul li.active{text-decoration:underline;font-style:italic}.player .pochette{margin-right:25px;border:2px solid var(--player-col2)}.player .pochette img{max-width:150px;max-height:150px}";
head.appendChild(style);
var play = document.getElementsByClassName("play");
var pause = document.getElementsByClassName("pause");
var backward = document.getElementsByClassName("backward");
var forward = document.getElementsByClassName("forward");
// Mise en place du player ----------------------------------------------------
for (var i = 0; i <= audio.length - 1; i++) {
    audio[i].insertAdjacentHTML("afterend", player);
    var dataVolume = audio[i].getAttribute("data-volume");
    var dataPochette = audio[i].getAttribute("data-pochette");
    // (Et on profite de cette boucle pour check les titles et data-volume)
    if (audio[i].title !== null && audio[i].parentNode.className !== "playlist") {
        audio[i].nextElementSibling.getElementsByClassName("title")[0].innerHTML = audio[i].title;
    }
    if (dataVolume && dataVolume>=0 && dataVolume<=1) {
        audio[i].volume = dataVolume;
        audio[i].nextElementSibling.getElementsByClassName("volumeF")[0].children[0].style.width = (dataVolume*100)+"%";
        audio[i].nextElementSibling.getElementsByClassName("volumeF")[0].setAttribute("aria-label", "Volume : "+dataVolume);
    }
    if (dataPochette) {
        var pochette = audio[i].nextElementSibling.getElementsByClassName("pochette")[0];
        pochette.style.display = null;
        var img = audio[i].nextElementSibling.getElementsByClassName("pochette")[0].getElementsByTagName("img")[0];
        img.setAttribute("src", dataPochette);
        img.setAttribute("alt", "Pochette");
    }
    // Les boutons forward et backward sont réservés aux playlists, on les supprime des players solo
    if (audio[i].parentNode.className !== "playlist") {
        var deleteForward = audio[i].nextElementSibling.getElementsByClassName("forward")[0];
        audio[i].nextElementSibling.removeChild(deleteForward);
        var deleteBackward = audio[i].nextElementSibling.getElementsByClassName("backward")[0];
        audio[i].nextElementSibling.removeChild(deleteBackward);
    } else {
        var li = audio[i].nextElementSibling.nextElementSibling.children;
        for (var a = 0; a < li.length; a++) {
            li[a].setAttribute("tabindex", "0");
        }
    }
    // L'autoplay est un cancer pour les utilisateurs. Si vous souhaitez booster vos écoutes, falsifiez vos chiffres et épargnez vos utilisateurs.
    audio[i].removeAttribute("autoplay");
}

// ----------------------------------------------------------- //
// -------------------------- PLAY --------------------------- //
// ----------------------------------------------------------- //
function playFunction(thisElement)
{
    clearInterval(interval);
    for (var j = 0; j <= audio.length - 1; j++) {
        audio[j].pause();
        audio[j].nextElementSibling.getElementsByClassName("play")[0].style.display = null;
        audio[j].nextElementSibling.getElementsByClassName("pause")[0].style.display = "none";
    }
    thisElement.style.display = "none";
    thisElement.nextElementSibling.style.display = null;
    // Automatiquement renvoyé sur le bouton play
    thisElement.nextElementSibling.focus();
    clearInterval(time);
    if (thisElement.parentNode.parentNode.className === "playlist") Timer(false, true);
    else Timer();
    thisElement.parentNode.previousElementSibling.play();
    mediaSessionSettings(thisElement.parentNode.previousElementSibling);
}
// Event play
for (var i = 0; i <= audio.length - 1; i++) {
    play[i].addEventListener("click", function(){playFunction(this), false});
    play[i].addEventListener("keypress", function(e)
    {
        var key = e.which || e.keyCode;
        if (key === 13) playFunction(this);
    });
}

// ---------------------------------------------------------- //
// ----------------------- PAUSE ---------------------------- //
// ---------------------------------------------------------- //
function pauseFunction(thisElement)
{
    thisElement.parentNode.previousElementSibling.pause();
    clearInterval(time);
    thisElement.style.display = "none";
    thisElement.previousElementSibling.style.display = null;
    // Automatiquement renvoyé sur le bouton pause
    thisElement.previousElementSibling.focus();
}
// Event pause
for (var i = 0; i <= audio.length - 1; i++) {
    pause[i].addEventListener("click", function(){pauseFunction(this), false});
    pause[i].addEventListener("keypress", function(e)
    {
    var key = e.which || e.keyCode;
    if (key === 13) pauseFunction(this);
    });
}

// --------------------------------------------------------------- //
// ---------------------------- TIMER ---------------------------- //
// --------------------------------------------------------------- //
function convertSeconds(time) {
	var reste = time;
	var result = "";
	var nbHours = Math.floor(reste / 3600);
	reste -= nbHours * 3600;
	var nbMinutes = Math.floor(reste / 60);
	reste -= nbMinutes * 60;
	var nbSeconds = Math.floor(reste);
	if(nbHours > 0)
		result = result + ("0" + nbHours).slice(-2) + ':';
	result = result + ("0" + nbMinutes).slice(-2) + ':';
	result = result + ("0" + nbSeconds).slice(-2);
	return result;
}

// Fonction timer, l'interval pour récupérer la durée du fichier si disponible :
var time;
var timer = document.getElementsByClassName("timer");

var interval = setInterval(function()
{
    for (var i = 0; i <= audio.length - 1; i++) {
        var duree = audio[i].duration;
        if (audio[i].error && audio[i].error.code === 4) {
            timer[i].innerHTML = "File not found";
        } else if ((!audio[i].hasAttribute("preload") || (audio[i].hasAttribute("preload") && audio[i].getAttribute("preload") !== "none")) && isNaN(duree)) {
            timer[i].innerHTML = "load";
        } else if (audio[i].hasAttribute("preload") && audio[i].getAttribute("preload") === "none") {
            timer[i].innerHTML = "--:--";
        } else {
            timer[i].innerHTML = convertSeconds(duree);
        }
    }
}, 1000);
setTimeout(function()
{
    clearInterval(interval);
    for (var i = 0; i <= audio.length - 1; i++) {
        if (timer[i].innerHTML === "load") timer[i].innerHTML = "--:--";
    }
}, 10100);

var progBarre = document.getElementsByClassName("progBarre");
var audiotime = [];
var tempAudiotime = [];

function Timer(stop = false, activatePlaylist = false)
{
    if (stop === true) {
        clearInterval(time);
    } else {
        time = setInterval(function() 
        {
            for (var i = 0; i <= audio.length - 1; i++) {
                // Mise en place de l'affichage timer / barre de progression.
                tempAudiotime[i] = audiotime[i];
                audiotime[i] = audio[i].currentTime;
                if (tempAudiotime[i] == audiotime[i] && !audio[i].paused) {
                    timer[i].innerHTML = "load";
                } else if (audiotime[i] !== 0) {
                    timer[i].innerHTML = (audio[i].duration>3600 && audiotime[i]<3600?'00:':'')+convertSeconds(audiotime[i]);
                } 
                if (isNaN(audio[i].duration)) {
                    timer[i].innerHTML = "--:--";
                }
                if (audio[i].error && audio[i].error.code === 4) {
                    reset(audio[i]);
                    timer[i].innerHTML = "File not found";
                }
                var widthProg = audio[i].currentTime / audio[i].duration * 100;
                progBarre[i].style.width = widthProg+"%";
                if (audiotime[i] === audio[i].duration && activatePlaylist === false && !audio[i].hasAttribute("loop")) {
                    // Stop le fichier audio à la fin des balises qui ne loop pas.
                    reset(audio[i]);
                    Timer(true);
                } else if (audiotime[i] === audio[i].duration && activatePlaylist === true) {
                    // Check l'épisode suivant à lire dans la playlist
                    var thisPlaylist = audio[i].parentNode;
                    for (var k = 0; k <= playlist.length - 1; k++) {
                        if (thisPlaylist === playlist[k]) {
                            var nextPlaylistNumber = k;
                            playerPlaylist[k].src = next[k];
                            if(nextpochette[k] != ""){
                                playerPlaylist[k].setAttribute('data-pochette', nextpochette[k]);
                                playerPlaylist[k].nextElementSibling.getElementsByClassName("pochette")[0].getElementsByTagName("img")[0].src = nextpochette[k];
                            }
                            for (var j = 0; j <= thisPlaylist.getElementsByTagName("ul")[0].children.length - 1; j++) {
                                // Ecriture du titre à venir (premier fichier si fin de playlist)
                                var ul = thisPlaylist.getElementsByTagName("ul")[0];
                                if (ul.children[j].nextElementSibling !== null && ul.children[j].nextElementSibling.id === next[k]) {
                                    playerPlaylist[k].nextElementSibling.getElementsByClassName("title")[0].innerHTML = ul.children[j].nextElementSibling.innerHTML;
                                    playerPlaylist[k].title = ul.children[j].nextElementSibling.innerHTML;
                                    if (ul.children[j].nextElementSibling.nextElementSibling) {
                                        forward[k].id = ul.children[j].nextElementSibling.nextElementSibling.id;
                                        if(ul.children[j].nextElementSibling.nextElementSibling.hasAttribute('data-pochette'))
                                            forward[k].setAttribute('data-pochette', ul.children[j].nextElementSibling.nextElementSibling.getAttribute('data-pochette'));
                                    } else {
                                        forward[k].id = ul.children[0].id;
                                        if(ul.children[0].hasAttribute('data-pochette'))
                                            forward[k].setAttribute('data-pochette', ul.children[0].getAttribute('data-pochette'));
                                    }
                                    backward[k].id = ul.children[j].id;
                                    if(ul.children[j].hasAttribute('data-pochette'))
                                        backward[k].setAttribute('data-pochette', ul.children[j].getAttribute('data-pochette'));
                                    ul.children[j].classList.remove("active");
                                    ul.children[j].nextElementSibling.classList.add("active");
                                } else if (ul.children[j].nextElementSibling === null && ul.children[0].id === next[k]) {
                                    playerPlaylist[k].nextElementSibling.getElementsByClassName("title")[0].innerHTML = ul.children[0].innerHTML;
                                    playerPlaylist[k].title = ul.children[0].innerHTML;
                                    forward[k].id = ul.children[1].id;
                                    backward[k].id = ul.lastElementChild.id;
                                    if(ul.lastElementChild.hasAttribute('data-pochette'))
                                        backward[k].setAttribute('data-pochette', ul.lastElementChild.getAttribute('data-pochette'));
                                    ul.children[j].classList.remove("active");
                                    ul.children[0].classList.add("active");
                                }
                            }
                        }
                    }
                    audio[i].play();
                    mediaSessionSettings(audio[i]);
                    prepareNext(nextPlaylistNumber);
                }
            }
        }, 500);
    }
}

function reset(audioElement) {
    audioElement.currentTime = 0;
    audioElement.pause();
    audioElement.nextElementSibling.getElementsByClassName("progBarre")[0].style.width = "0%";
    audioElement.nextElementSibling.getElementsByClassName("timer")[0].innerHTML = "00:00:00";
    audioElement.nextElementSibling.getElementsByClassName("play")[0].style.display = null;
    audioElement.nextElementSibling.getElementsByClassName("pause")[0].style.display = "none";
}

function prepareNext(playlistNumber)
{
    for (var i = 0; i <= playlist.length - 1; i++) {
        var ul = playlist[i].getElementsByTagName("ul")[0];
        for (var j = 0; j <= ul.childElementCount - 1; j++) {
            if (playlistNumber === i 
                && ul.children[j].id === next[i] 
                && ul.children[j].nextElementSibling !== null) {
                next[i] = ul.children[j].nextElementSibling.id;
                if(ul.children[j].nextElementSibling.hasAttribute('data-pochette'))
                    nextpochette[i] = ul.children[j].nextElementSibling.getAttribute('data-pochette');
                return;
            } else if (playlistNumber === i 
                && ul.children[j].nextElementSibling === null) {
                next[i] = ul.children[0].id;
                if(ul.children[0].hasAttribute('data-pochette'))
                    nextpochette[i] = ul.children[0].getAttribute('data-pochette');
            }
        }
    }
}

// ---------------------------------------------------- //
// ---------------- BARRE PROGRESS -------------------- //
// ---------------------------------------------------- //
// https://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
function getCoords(elem) 
{
    var box = elem.getBoundingClientRect();
    var body = document.body;
    var docEl = document.documentElement;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;
    var left = box.left + scrollLeft - clientLeft;
    return Math.round(left);
}

// Barre de progression
var prog = document.getElementsByClassName("prog");
for (var i = 0; i <= audio.length - 1; i++) {
    // Contrôle pointer
    prog[i].addEventListener("pointerdown", PointerDown);
    function PointerDown(e){
        position(e, this, "prog");
        this.addEventListener("pointermove", PointerMove);
        this.addEventListener("pointerup", PointerUp, {once: true});
    }
    function PointerMove(e){
        position(e, this, "prog");
    }
    function PointerUp(e){
        this.removeEventListener("pointermove", PointerMove);
    }

    // Contrôle clavier
    prog[i].addEventListener("keydown", function(e)
    {
        var key = e.which || e.keyCode;
        if (key === 38 || key === 40) e.preventDefault();
        if (key === 39 || key === 107 || key === 38) progControl(this, "up");
        if (key === 37 || key === 109 || key === 40) progControl(this, "down");
    }, false);
}

function progControl(thisElement, pass)
{
    var audioParent = thisElement.parentNode.previousElementSibling;
    if (pass === "up") {
        if (audioParent.duration > (audioParent.currentTime + 5)) audioParent.currentTime += 5;
        else audioParent.currentTime = audioParent.duration - 1;
    } else if (pass === "down") {
        if (audioParent.currentTime > 5) audioParent.currentTime -= 5;
        else audioParent.currentTime = 0;
    }
    var widthProg = audioParent.currentTime * 100 / audioParent.duration;
    thisElement.children[0].style.width = widthProg+"%";
}

// --------------------------------------------------- //
// ------------------- BARRE VOLUME ------------------ //
// --------------------------------------------------- //
// Barre de volume
var volumeF = document.getElementsByClassName("volumeF");
for (var i = 0; i <= audio.length - 1; i++) {
    // Contrôle pointeur
    volumeF[i].addEventListener("pointerdown", PointerDown);
    function PointerDown(e){
        position(e, this, "volume");
        this.addEventListener("pointermove", PointerMove);
        this.addEventListener("pointerup", PointerUp, {once: true});
    }
    function PointerMove(e){
        position(e, this, "volume");
    }
    function PointerUp(e){
        this.removeEventListener("pointermove", PointerMove);
    }

    // Contrôle clavier
    volumeF[i].addEventListener("keydown", function(e)
    {
        var key = e.which || e.keyCode;
        if (key === 38 || key === 40) e.preventDefault();
        if (key === 39 || key === 107 || key === 38) volumeControl(this, "up");
        if (key === 37 || key === 109 || key === 40) volumeControl(this, "down");
    }, false);
}

function volumeControl(thisElement, pass)
{
    var audioParent = thisElement.parentNode.previousElementSibling;
    if (pass === "up") {
        if (audioParent.volume < 0.9) audioParent.volume += 0.1;
        else audioParent.volume = 1;
    } else if (pass === "down") {
        if (audioParent.volume > 0.1) audioParent.volume -= 0.1;
        else audioParent.volume = 0;
    }
    var widthProg = audioParent.volume * 100;
    thisElement.children[0].style.width = widthProg+"%";
    thisElement.setAttribute("aria-label", "Volume : "+audioParent.volume.toFixed(2));
}

function position(e, thisElement, localisation) {
    var xClient = e.clientX; // Position du curseur sur l'axe X (référenciel : gauche de la page).
    var leftOfDiv = getCoords(thisElement); // Position du début de l'élément sur l'axe X (référenciel : gauche de la div).
    var xPositionPointer = xClient - leftOfDiv; // Calul de la position du curseur par rapport à la gauche de la div.
    var width = thisElement.clientWidth; // Récupération de la width (sans les px pour le calcul).
    var purcent = 100 * xPositionPointer / width; // Mise en pourcentage de la position demandée.
    var audioParent = thisElement.parentNode.previousElementSibling;
    if(purcent < 0) purcent = 0;
    if(purcent > 100) purcent = 100;
    if(purcent >= 0 && purcent <= 100){
        if (localisation === "volume") {
            audioParent.volume = purcent / 100;
            var widthProg = audioParent.volume * 100;
            thisElement.setAttribute("aria-label", "Volume : "+audioParent.volume.toFixed(2));
        } else if (localisation === "prog") {
            audioParent.currentTime = purcent * audioParent.duration / 100; // Met le currentTime à la position demandée.
            var widthProg = audioParent.currentTime * 100 / audioParent.duration;
        }
        thisElement.children[0].style.width = widthProg+"%";
    }
}

// ---------------------------------------------------------- //
// ----------------------- PLAYLIST ------------------------- //
// ---------------------------------------------------------- //
// Préparation de la playlist
var playlist = document.getElementsByClassName("playlist");
var playerPlaylist = Array();
var next = Array();
var nextpochette = Array();
for (var z = 0; z <= playlist.length - 1; z++) {
    var UlPlaylist = playlist[z].getElementsByTagName("ul")[0];
    playerPlaylist[z] = playlist[z].getElementsByTagName("audio")[0];
    playerPlaylist[z].src = UlPlaylist.children[0].id;
    if(UlPlaylist.children[0].hasAttribute('data-pochette'))
        playerPlaylist[z].setAttribute('data-pochette', UlPlaylist.children[0].getAttribute('data-pochette'));
    UlPlaylist.children[0].classList.add("active");
    playerPlaylist[z].nextElementSibling.getElementsByClassName("title")[0].innerHTML = UlPlaylist.children[0].innerHTML;
    playerPlaylist[z].title = UlPlaylist.children[0].innerHTML;
    if(UlPlaylist.children.length > 1){
        next[z] = UlPlaylist.children[1].id;
        if(UlPlaylist.children[1].hasAttribute('data-pochette'))
            nextpochette[z] = UlPlaylist.children[1].getAttribute('data-pochette');
        else
            nextpochette[z] = "";
    }
    else{
        next[z] = UlPlaylist.children[0].id;
        if(UlPlaylist.children[0].hasAttribute('data-pochette'))
            nextpochette[z] = UlPlaylist.children[0].getAttribute('data-pochette');
        else
            nextpochette[z] = "";
    }
    forward[z].id = next[z];
    forward[z].setAttribute('data-pochette', nextpochette[z]);
    backward[z].id = UlPlaylist.lastElementChild.id;
    if(UlPlaylist.lastElementChild.hasAttribute('data-pochette'))
        backward[z].setAttribute('data-pochette', UlPlaylist.lastElementChild.getAttribute('data-pochette'));

    for (var j = 0; j <= UlPlaylist.childElementCount - 1; j++) {
        // Clic sur la liste
        UlPlaylist.children[j].addEventListener("click", function(){listClick(this)}, false);
        UlPlaylist.children[j].addEventListener("keypress", function(e) 
        {
            var key = e.which || e.keyCode;
            if (key === 13) listClick(this);
        });
    }

    var thisBackward = playlist[z].getElementsByClassName("backward")[0];
    thisBackward.addEventListener("click", function(){backwardFunction(this)}, false);
    thisBackward.addEventListener("keypress", function(e) 
    {
        var key = e.which || e.keyCode;
        if (key === 13) backwardFunction(this);
    });

    var thisForward = playlist[z].getElementsByClassName("forward")[0];
    thisForward.addEventListener("click", function(){forwardFunction(this), false});
    thisForward.addEventListener("keypress", function(e)
    {
        var key = e.which || e.keyCode;
        if (key === 13) forwardFunction(this);
    });
}

function listClick(thisElement)
{
    clearInterval(time);
    clearInterval(interval);
    var playlistNow = thisElement.parentNode.parentNode;
    for (var a = 0; a <= playlist.length - 1; a++) {
        if (playlistNow === playlist[a]) {
            playerPlaylist[a] = thisElement.parentNode.parentNode.getElementsByTagName("audio")[0];
            playerPlaylist[a].src = thisElement.id;
            if(thisElement.hasAttribute('data-pochette'))
                playerPlaylist[a].nextElementSibling.getElementsByClassName("pochette")[0].getElementsByTagName('img')[0].src = thisElement.getAttribute('data-pochette');
            playerPlaylist[a].nextElementSibling.getElementsByClassName("title")[0].innerHTML = thisElement.innerHTML;
            playerPlaylist[a].title = thisElement.innerHTML;
            forwardAndBackward(a, thisElement);
            break;
        }
    }
}

function backwardFunction(thisElement)
{
    clearInterval(time);
    clearInterval(interval);
    // Même chose
    var playlistNow = thisElement.parentNode.parentNode;
    for (var a = 0; a <= playlist.length - 1; a++) {
        if (playlistNow === playlist[a]) z = a;
    }
    // Redéfinir UlPlaylist qui s'est perdu dans les bois
    UlPlaylist = playlist[z].getElementsByTagName("ul")[0];
    for (var b = 0; b <= UlPlaylist.childElementCount - 1; b++) {
        if (thisElement.id === UlPlaylist.children[b].id) {
            var thisNow = UlPlaylist.children[b];
            var titleNow = UlPlaylist.children[b].innerHTML;
        }
    }
    playerPlaylist[z] = thisElement.parentNode.parentNode.getElementsByTagName("audio")[0];
    playerPlaylist[z].src = backward[z].id;
    if(backward[z].hasAttribute('data-pochette') && backward[z].getAttribute('data-pochette') != "")
        playerPlaylist[z].nextElementSibling.getElementsByClassName("pochette")[0].getElementsByTagName('img')[0].src = backward[z].getAttribute('data-pochette');
    playerPlaylist[z].nextElementSibling.getElementsByClassName("title")[0].innerHTML = titleNow;
    playerPlaylist[z].title = titleNow;
    forwardAndBackward(z, thisNow);
}

function forwardFunction(thisElement)
{
    clearInterval(time);
    clearInterval(interval);
    var playlistNow = thisElement.parentNode.parentNode;
    for (var a = 0; a <= playlist.length - 1; a++) {
        if (playlistNow === playlist[a]) z = a;
    }
    UlPlaylist = playlist[z].getElementsByTagName("ul")[0];
    for (var b = 0; b <= UlPlaylist.childElementCount - 1; b++) {
        if (thisElement.id === UlPlaylist.children[b].id) {
            var thisNow = UlPlaylist.children[b];
            var titleNow = UlPlaylist.children[b].innerHTML;
        }
    }
    playerPlaylist[z] = thisElement.parentNode.parentNode.getElementsByTagName("audio")[0];
    playerPlaylist[z].src = forward[z].id;
    if(forward[z].hasAttribute('data-pochette') && forward[z].getAttribute('data-pochette') != "")
        playerPlaylist[z].nextElementSibling.getElementsByClassName("pochette")[0].getElementsByTagName('img')[0].src = forward[z].getAttribute('data-pochette');
    playerPlaylist[z].nextElementSibling.getElementsByClassName("title")[0].innerHTML = titleNow;
    playerPlaylist[z].title = titleNow;
    forwardAndBackward(z, thisNow);
}

function forwardAndBackward(z, thisNow)
{
    var childrens = thisNow.parentNode.children;
    for (var a = 0; a <= childrens.length - 1; a++) {
        childrens[a].classList.remove("active");
    }
    thisNow.classList.add("active");
    if (thisNow.nextElementSibling !== null) {
        next[z] = thisNow.nextElementSibling.id;
        forward[z].id = next[z];
        if(thisNow.nextElementSibling.hasAttribute('data-pochette')){
            nextpochette[z] = thisNow.nextElementSibling.getAttribute('data-pochette');
            forward[z].setAttribute('data-pochette', thisNow.nextElementSibling.getAttribute('data-pochette'));
        }
    } else {
        next[z] = thisNow.parentNode.children[0].id;
        forward[z].id = next[z];
        if(thisNow.parentNode.children[0].hasAttribute('data-pochette')){
            nextpochette[z] = thisNow.parentNode.children[0].getAttribute('data-pochette');
            forward[z].setAttribute('data-pochette', thisNow.parentNode.children[0].getAttribute('data-pochette'));
        }
    }
    if (thisNow.previousElementSibling !== null) {
        backward[z].id = thisNow.previousElementSibling.id;
        if(thisNow.previousElementSibling.hasAttribute('data-pochette'))
            backward[z].setAttribute('data-pochette', thisNow.previousElementSibling.getAttribute('data-pochette'));
    } else {
        backward[z].id = thisNow.parentNode.lastElementChild.id;
        if(thisNow.parentNode.lastElementChild.hasAttribute('data-pochette'))
            backward[z].setAttribute('data-pochette', thisNow.parentNode.lastElementChild.getAttribute('data-pochette'));
    }
    for (var k = 0; k <= audio.length - 1; k++) {
        audio[k].pause();
        audio[k].nextElementSibling.getElementsByClassName("play")[0].style.display = null;
        audio[k].nextElementSibling.getElementsByClassName("pause")[0].style.display = "none";
    }
    playerPlaylist[z].nextElementSibling.getElementsByClassName("play")[0].style.display = "none";
    playerPlaylist[z].nextElementSibling.getElementsByClassName("pause")[0].style.display = null;
    playerPlaylist[z].play();
    mediaSessionSettings(playerPlaylist[z]);
    Timer(false, true);
}

// ---------------------------------------------------- //
// ------------ Gestion overlay windows 10 ------------ //
// ---------------------------------------------------- //
function mediaSessionSettings(audio){
    if ("mediaSession" in navigator) {
        var mediaTitle = "";
        var mediaArtiste = "";
        var mediaAlbum = "";
        var mediaPochette = "";
        if(audio.title !== undefined)
            mediaTitle = audio.title;
        if(audio.getAttribute("data-artiste") !== null)
            mediaArtiste = audio.getAttribute("data-artiste");
        if(audio.getAttribute("data-album") !== null)
            mediaAlbum = audio.getAttribute("data-album");
        if(audio.getAttribute("data-pochette") !== null)
            mediaPochette = audio.getAttribute("data-pochette");
        navigator.mediaSession.metadata = new MediaMetadata({
            title: mediaTitle,
            artist: mediaArtiste,
            album: mediaAlbum,
            artwork: [
                {
                    src: mediaPochette,
                    sizes: "96x96",
                    type: "image/png",
                },
            ],
        });
        
        navigator.mediaSession.setActionHandler("play", () => {
            playFunction(audio.nextElementSibling.getElementsByClassName("play")[0]);
        });
        navigator.mediaSession.setActionHandler("pause", () => {
            pauseFunction(audio.nextElementSibling.getElementsByClassName("pause")[0]);
        });
        if(audio.parentNode.className === "playlist"){
            navigator.mediaSession.setActionHandler("previoustrack", () => {
                backwardFunction(audio.nextElementSibling.getElementsByClassName("backward")[0]);
            });
            navigator.mediaSession.setActionHandler("nexttrack", () => {
                forwardFunction(audio.nextElementSibling.getElementsByClassName("forward")[0]);
            });
        } else {
            navigator.mediaSession.setActionHandler("previoustrack", null);
            navigator.mediaSession.setActionHandler("nexttrack", null);
        }
    }
}

});