Ya lo tenias casi. El era problema el uso de la variable i
que no la seteabas y actualizabas bien.
Te he actualizado el código con lo necesario para que funcione para tu caso.
He añadido estos 2 método que se encargan de comprobar la visibilidad de los botones prev/next.
function toggleVisibilityPrev() {
// se comprueba que si el video que se esta reproduciendo es el inicial (indice 0) se oculta el boton de previo, sino se muestra
prevBtn.style.display = currentVideo <= 0 ? 'none' : 'block'
}
function toggleVisibilityNext() {
// se comprueba que si el video que se esta reproduciendo es el final se oculta el boton de previo
nextBtn.style.display = currentVideo >= totalVideos ? 'none' : 'block'
}
// Youtube player
document.addEventListener('DOMContentLoaded', function (event) {
// Array con lista de videos disponibles. Este proces lo tendria que hacer con PHP para obtener estos datos
//var vdo = ['n7l1oAYRThQ', 'G3P1IJaY6AA', '353B-kOxWz4'];
var vdo = [
{ id: 'n7l1oAYRThQ', title: 'Video 1' },
{ id: 'G3P1IJaY6AA', title: 'Video 2' },
{ id: '353B-kOxWz4', title: 'Video 3' }
]
const totalVideos = vdo.length - 1
// Selecionamos botones prev/next
var prevBtn = document.querySelector('.btn-Prev')
var nextBtn = document.querySelector('.btn-Next')
// current index (indice actual)
var currentVideo = 0
// Se usan para comprobar la visibilidad de los botones prev/next
toggleVisibilityPrev()
toggleVisibilityNext()
// Creamos variable - boton .btn-play
var editButtons = document.querySelectorAll('.btn-Play')
// Buscamos todos los botones existentes para obtener el boton onclick
editButtons.forEach(function (item, idx) {
// Añadimos evento onclick a nuestro botones
item.addEventListener('click', function (e) {
// Obtengo numero index actual
//let index = vdo.findIndex(el=> el ==item.dataset.id);
// en vez de usare el item para comparar el id puedes usar el e.target que hace referencia al botón clicado
let index = vdo.findIndex((el) => el.id == e.target.dataset.id)
// Actualizo current index
currentVideo = index
//Obtenemos titulo
var dataTitle = e.target.dataset.title
//Cambiar HTML layout de un DIV #titulo
document.getElementById('title_vdo').innerHTML = dataTitle
// Pasamos el id del video a reproducir.
player.loadVideoById(e.target.dataset.id)
// Dirigimos con scroll hacia nuestro reproductor (#player)
$('html, body').animate({
scrollTop: $('#player').offset().top
}, 2000)
})
})
// Evento onclick PREV
prevBtn.addEventListener('click', function (e) {
currentVideo = currentVideo - 1
console.log(currentVideo)
toggleVisibilityNext()
toggleVisibilityPrev()
loadVdo()
})
// Evento onclick NEXT
nextBtn.addEventListener('click', function (e) {
// Mostramos data-id del boton on click
currentVideo = currentVideo + 1
console.log(currentVideo)
toggleVisibilityNext()
toggleVisibilityPrev()
loadVdo()
})
// Pasamos video a la API Youtube Player
// Ahora tambien se encarga de actualizar el nombre del video que se va a reproducir
function loadVdo() {
const video = vdo[currentVideo]
document.getElementById('title_vdo').innerHTML = video.title
// Pasamos el id del video a reproducir.
return player.loadVideoById(video.id)
}
function toggleVisibilityPrev() {
// se comprueba que
prevBtn.style.display = currentVideo <= 0 ? 'none' : 'block'
}
function toggleVisibilityNext() {
nextBtn.style.display = currentVideo >= totalVideos ? 'none' : 'block'
}
})