<style type="text/css">

	#audio-player {<?php if ($pos_player == "fixed") {echo "border-bottom: none; !important";}else{echo "border-top: none !important;";} ?>}

	.light_player{font-family: 'Oswald', sans-serif;background: <?php if(!empty($color_bg_player)){ echo $color_bg_player; }else{echo "#1167ae";}; ?>; width: 100%;padding-bottom: 2px; min-height: 50px}
	.light_player .title{font-size: 16px;color: <?php if(!empty($color_text_player)){ echo $color_text_player; }else{echo "#fff";}; ?>;font-weight: 400;}
	.light_player .fa{ font-size: 24px;color: <?php if(!empty($color_text_player)){ echo $color_text_player; }else{echo "#fff";}; ?>;padding-top: 12px;cursor: pointer;}
	.pt-btn-nome{padding-top: 15px;}
	.pl-4, .px-4 {padding-left: 1.5rem !important;}
	.pr-2, .px-2 {padding-right: 1rem !important;}
	@media only screen and (max-width: 767px) {
		.pt-btn-nome{padding-top: 4px;}
		.light_player .fa{font-size: 20px;}
		.light_player .title{display: none;}
		.light_player .slider{position: relative;top: 2px; bottom: 10px}
		.btn-social{display: none;}
	}
</style>
<div class="navbar-fixed-top player-sticky">
	<section id="audio-player">
	<div class="light_player">
		<div class="text-center">
			<div class="col-sm-4 pt-btn-nome">
				<div class="title"><?php echo $nome_stream; ?></div>
			</div>
			<div class="col-sm-4">
				<a id="play_light" onclick="play()"><i class="fa fa-play"></i></a>
				<a id="pause_light" onclick="pause()" style="display:none;"><i class="fa fa-pause"></i></a>

				
				<i class="fa fa-volume-up pl-4"></i>
				<input type= "range" class="slider" id="slider" value="80" maxlength="100">
			

				<audio id="light_player" autoplay preload="none">
					<source src="<?php echo $url_player_stream; ?>" type="audio/mpeg">
					<source src="<?php echo $url_player_stream; ?>" type="audio/aac">
				</audio>

			</div>

			<div class="col-sm-4 btn-social">
				<?php if (!empty($nub_whatsapp)){ ?>
				<a class="no-ajaxy" href="https://api.whatsapp.com/send?phone=<?php echo $nub_whatsapp; ?>" target="_blank"><i class="fa fa-whatsapp pr-2"></i></a>
				<?php } ?>

				<?php if (!empty($instagram_url)){ ?>
				<a class="no-ajaxy" href="<?php echo $instagram_url; ?>" target="_blank"><i class="fa fa-instagram pr-2"></i></a>
				<?php } ?>

				<?php if (!empty($youtube_url)){ ?>
				<a class="no-ajaxy" href="<?php echo $youtube_url; ?>" target="_blank"><i class="fa fa-youtube pr-2"></i></a>
				<?php } ?>

				<?php if (!empty($facebook_url)){ ?>
				<a class="no-ajaxy" href="<?php echo $facebook_url; ?>" target="_blank"><i class="fa fa-facebook pr-2"></i></a>
				<?php } ?>

				<?php if (!empty($twitter_url)){ ?>
				<a class="no-ajaxy" href="<?php echo $twitter_url; ?>" target="_blank"><i class="fa fa-twitter pr-2"></i></a>
				<?php } ?>

				<?php if (!empty($email_contact)){ ?>
				<a class="no-ajaxy" href="mailto:<?php echo $email_contact; ?>" target="_blank"><i class="fa fa-envelope pr-2"></i></a>
				<?php } ?>
			</div>

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

<script type="text/javascript">
	var player = document.getElementById('light_player');
	var playBtn = document.getElementById('play_light');
	var pauseBtn = document.getElementById('pause_light');
	
	//autoplay
	playPromise = player.play();

    if (playPromise !== undefined) {
	    playPromise.then(_ => {
      		player.play();
        	playBtn.style.display = "none";
	  		pauseBtn.style.display = "inline-block";
      }).catch(error => {
      		player.pause();
      		playBtn.style.display = "inline-block";
	 		pauseBtn.style.display = "none";
      });
    }

	var play = function() {
	  player.play();
	  playBtn.style.display = "none";
	  pauseBtn.style.display = "inline-block";
	};

	var pause = function() {
	  player.pause();
	  playBtn.style.display = "inline-block";
	  pauseBtn.style.display = "none";
	};

	player.volume = 0.8;

	slider.oninput = () => {
	  document.getElementById("light_player").volume = ~~(slider.value) * 0.01;
	}
</script>