<?php 
        
        $D = date(d);
        $A = date(Y);
        $M = date(m);
        $date = "$A$M$D";
        $A = substr($date, 0, 4);
        $M = substr($date, 4, 2);
        $D = substr($date, 6, 2);
        if ($M == '01') {$m = "enero";};
        if ($M == '02') {$m = "febrero";};
        if ($M == '03') {$m = "marzo";};
        if ($M == '04') {$m = "abril";};
        if ($M == '05') {$m = "mayo";};
        if ($M == '06') {$m = "junio";};
        if ($M == '07') {$m = "julio";};
        if ($M == '08') {$m = "agosto";};
        if ($M == '09') {$m = "septiembre";};
        if ($M == '10') {$m = "octubre";};
        if ($M == '11') {$m = "noviembre";};
        if ($M == '12') {$m = "diciembre";};
                
                
        function dame_el_dia2 ($fecha) {
            
            $array_dias['Sunday'] = "domingo";
            $array_dias['Monday'] = "lunes";
            $array_dias['Tuesday'] = "martes";
            $array_dias['Wednesday'] = "miercoles";
            $array_dias['Thursday'] = "jueves";
            $array_dias['Friday'] = "viernes";
            $array_dias['Saturday'] = "sabado";
            
            return $array_dias[date('l', strtotime($fecha))];
        }
                
                
        $dia = dame_el_dia2($date); 

        include 'concha.php'; 
        include 'concha_extras.php';
            
?>
<style>
    .textSmall{
        white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
    }
    .cc_streaminfo{
        color:<? echo $d_color_menu?>;
    }
    
</style>
    
<div class="container-fluid">
    
    <div class="row">
            
        <div class="col-2 d-flex align-items-center justify-content-center p-0">
            
            <audio id="player" src="<?php echo $ip_stream ?>/;stream.mp3" type="audio/mp3" ontimeupdate="updateProgress();" autoplay>
                <source  id="source">
                Audio no soportado
            </audio>
            
            <div id="controls">
                
                <div class="timer d-none" id="timer"></div>
                <div class="volumen d-none justify-content-center align-items-center">
                		
                <i class="fas fa-volume-down p-2"></i> 
                <input type="range" name="volumen" id="volumen" min="0" max="1" step="0.01" value="0.75"> 
                <i class="fas fa-volume-up p-2"></i>
                </div>
                	
                <i class="d-none fas fa-backward fa-5x" onclick="prevMusic();"></i>
                <i class="fas fa-play" onclick="togglePlay();" id="iconPlay"></i> 
                <i class="d-none fas fa-forward fa-5x" onclick="nextMusic();"></i>
                	
                <span id="currentPlay" class="d-none"></span>
                <progress class="d-none" id="progress" value="0" max="100" ></progress>
                	
                <div id="playList" class="d-none"></div>
                
                                	
            </div>

        </div>
           
        <div class="col-10">
            
            <div class="container-fluid">
                
                <div class="row">
                    
                        
                            <div class="col-2 p-0 text-right">
                                <img class="cc_streaminfo img-fluid" data-type="trackimageurl" data-username="<?php echo $usuario_stream ?>" style="max-width:42px;background: <?php echo $d_color_menu?>;" />
                            </div>
                            <div class="col-10 text-left">
                                <b><span id="cc_strinfo_tracktitle_<?php echo $usuario_stream ?>" class="cc_streaminfo" >Cargando</span></b><br>
                                <span id="cc_strinfo_trackartist_<?php echo $usuario_stream ?>" class="cc_streaminfo"></span>
                            </div>
                                            
                        

                    
                </div>
                
            </div>
            
        </div>
    
    </div>

       
</div>
<script>

 window.addEventListener("load", function(event) {
     
     let audioTag = document.querySelector('audio');
     
     
     if (!audioTag.paused) {
         toggleIcon();
     }
     
     //if (!audioTag.duration){
     //    
     //    var element = document.getElementById("iconPlay")
	 //   element.classList.remove("fa-play");
     //}
     
     //console.log(audioTag.paused, audioTag);
     
     let promise = audioTag.play();
     if (promise !== undefined) {
       promise.then(_ => {
         // Autoplay started!
         console.log(audioTag.paused, audioTag);
       }).catch(error => {
         // Autoplay was prevented.
         // Show a "Play" button so that user can start playback.
         console.log(error);
       });
     }
   });
  
        //Array con el listado de canciones a mostrar en el reprodutor
const canciones = [
"bensound-summer.mp3"
]
var indiceActual = new Array(1)
//Funcion para crear mediante javascript el listado de canciones
function crearPlayList(){
	const listado = document.createElement('ol')
	listado.setAttribute("id", 'listadoMusica')
	for (let i = 0; i<canciones.length; i++){
		const item = document.createElement('li')
		item.appendChild(document.createTextNode(canciones[i])) 
		item.setAttribute("id", canciones.indexOf(canciones[i]))
		listado.appendChild(item)
	}
	return listado
}
document.getElementById('playList').appendChild(crearPlayList())
 
var listadoMusica= document.getElementById('listadoMusica')
listadoMusica.onclick = (e) =>{
	const itemClick = e.target
	removeActive()
	itemClick.classList.add("active");
	reproduccionActual("Reproduciendo: "+ itemClick.innerText)
	loadMusic(itemClick.innerText)
	player.play()
	indiceActual[0]= e.target.id
	classIconPlay();
 
}
//Funcion para cambiar el icono del reprodutor
function classIconPlay(){
	var element = document.getElementById("iconPlay")
	element.classList.remove("fa-pause");
    element.classList.add("fa-play");
}
//Funcion para control del volumen
const volumen= document.getElementById("volumen")
volumen.oninput= (e) =>{
	const vol = e.target.value
	player.volume = vol;
}
//Funcion para actualizar la barra de progreso del reprodutor
const updateProgress = () =>{
	if (player.currentTime >0){
		const barra = document.getElementById('progress')
		barra.value = (player.currentTime / player.duration) * 100
		
		var duracionSegundos= player.duration.toFixed(0);
		dura=secondsToString(duracionSegundos);
		var actualSegundos = player.currentTime.toFixed(0)
		actual=secondsToString(actualSegundos);
		
		duracion= actual +' / '+ dura
		document.getElementById('timer').innerText=duracion 
	}
	if (player.ended){
		nextMusic();//Reproducir la siguiente pista
	} 
}
//Funcion para reproducir la proxima cancion
function nextMusic(){  
	const source = document.getElementById('source');
	var musicaActual= Number(indiceActual[0]);
	if (canciones.length == (musicaActual+1)){
		var siguiente = 0
	} else {
		var siguiente = musicaActual + 1
	}
	removeActive()
	var item=document.getElementById(siguiente)
	item.classList.add("active");
	loadMusic(canciones[siguiente]);
	player.play()
	indiceActual[0]= siguiente
	reproduccionActual("Reproduciendo: "+ canciones[siguiente])
	classIconPlay()
}
//Funcion para reproducir la cancion anterior
function prevMusic(){  
	const source = document.getElementById('source');
	var musicaActual= Number(indiceActual[0]);
	if (musicaActual==0){
		var anterior= canciones.length - 1
	} else {
		var anterior = musicaActual - 1
	}
	removeActive()
	var item=document.getElementById(anterior)
	item.classList.add("active");
	loadMusic(canciones[anterior]);
	player.play()
	indiceActual[0]= anterior
	reproduccionActual("Reproduciendo: "+ canciones[anterior])
	classIconPlay()
}
//Funcion para remover todas las clases css activas
function removeActive(){
	var elems = document.querySelectorAll(".active");
 	 [].forEach.call(elems, function(el) {
    	el.classList.remove("active");
 	 });
 	 return elems
}
//Funcion para mostrar el nombre del arhivo actual en reproduccion
function reproduccionActual(texto){
	document.getElementById('currentPlay').innerText=texto
}
//Funcion para cargar las canciones en el reproductor
function loadMusic(ruta){
	var source = document.getElementById('source')
	var folder ="audio";//Carpeta donde tenemos almancenada la musica
	source.src= folder+"/"+ruta
	var index= indiceActual[0]= canciones.indexOf(ruta)
	removeActive()
	var item=document.getElementById(index)
	item.classList.add("active");
	reproduccionActual("Reproduciendo: "+ ruta)
	player.load()
}
//Funcion para pausar o darle play 
function togglePlay() {
	if (player.paused){
		toggleIcon();
		//console.log(audioTag.paused, audioTag);
		return player.play();
	} else {
		toggleIcon();
		//console.log(audioTag.paused, audioTag);
		return player.pause();
	}
}
//Funcion para cambiar el icono play o pause
function toggleIcon() {
   var element = document.getElementById("iconPlay");
   element.classList.toggle("fa-pause");
   element.classList.toggle("fa-play");
}
//Funcion para que al dar click sobre la barra de progeso se permita adelantar
progress.addEventListener('click', adelantar);
function adelantar(e){
	const scrubTime = (e.offsetX / progress.offsetWidth) * player.duration;
	player.currentTime = scrubTime;
	sonsole.log(e);
}
//Funcion para convertir segundos a minutos y horas
function secondsToString(seconds) {
	var hour="";
	if (seconds>3600){
		hour = Math.floor(seconds / 3600);
		hour = (hour < 10)? '0' + hour : hour;
		hour+=":"
	}
   var minute = Math.floor((seconds / 60) % 60);
  minute = (minute < 10)? '0' + minute : minute;
  var second = seconds % 60;
  second = (second < 10)? '0' + second : second;
  return hour  + minute + ':' + second;
}
loadMusic(canciones[0]);


</script>
<script language="javascript" type="text/javascript" src="https://centova.radiosnethosting.com:2199/system/streaminfo.js"></script>
<script language="javascript">

    (function(){ 
        
        var centovacast = (window.centovacast||(window.centovacast={}));
        
        (centovacast.streaminfo || (centovacast.streaminfo={})).config = {
        
            poll_limit: 120,        // specify how many times to poll the server
            poll_frequency: 15000  // specify the poll frequency in milliseconds
        
        };
        
    })();
    
</script>