{% extends 'base.html.twig' %}

{% block title %}Hello DefaultController!{% endblock %}

{% block body %}
       <style>

// Insperation: https://dribbble.com/shots/1962035-Freebie-Music-Player-Dark-Version

body {
   background-color: #EDEDED;
}

$player-height: 190px;
$player-width: 430px;

h1 {
   font-family: 'Open Sans', sans-serif;
   font-size: 13pt;
   font-weight: 600;
   text-transform: uppercase;
   color: white;
   cursor: default;
}

h4 {
   font-family: 'Open Sans', sans-serif;
   font-size: 8pt;
   font-weight: 400;
   cursor: default;
}

h2 {
   font-family: 'Open Sans', sans-serif;
   font-size: 13pt;
   font-weight: 300;
   color: white;
   cursor: default;
}

@mixin unselectable() {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.player {
   height: $player-height;
   width: $player-width;
   background-color: #1E2125;
   position: absolute;
   @include unselectable();
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);

   ul {
      list-style: none;
      li {
         display: inline-block;
      }
   }
}

.cover {
   position: absolute;
   top: 0;
   left: 0;
   img {
      height: $player-height;
      width: $player-height;
   }
}

.info {

   h1 {
      margin-top: 15px;
      margin-left: 180px;
      line-height: 0;
   }

   h4 {
      margin-left: 180px;
      line-height: 20px;
      color: #636367;
   }

   h2 {
      margin-left: 180px;
   }
}

.button-items {
   margin-left: 180px;
}

#slider {
	width: 502px;
	height: 2px;
	background: #151518;
   border-radius: 2px;
   div {
      width: 4px;
      height: 4px;
      margin-top: 1px;
      background: #EF6DBC;
      border-radius: 2px;
   }
}

#timer {
   color: #494B4E;
   line-height: 0;
   font-size: 9pt;
   float: right;
   font-family: Arial, Sans-Serif;
}

.controls {
   margin-top: 20px;

   svg:nth-child(2) {
      margin-left: 5px;
      margin-right: 5px;
   }
}

#play {
   padding: 0 3px;
   width: 30px;
   height: 30px;
   x: 0px;
   y: 0px;
   enable-background: new 0 0 25 25;

   g {
      stroke: #FEFEFE;
      stroke-width: 1;
      stroke-miterlimit: 10;

      path {
         fill: #FEFEFE;
      }
   }
}

#play:hover {
   cursor: pointer;
   g {
      stroke: #8F4DA9;
      cursor: pointer;

      path {
         fill: #9b59b6;
         cursor: pointer;
      }
   }
}

.step-backward {
   width: 18px;
   height: 18px;
   x: 0px;
   y: 0px;
   enable-background: new 0 0 25 25;
   margin-bottom: 5px;

   g polygon {
      fill: #FEFEFE;
   }
}

.step-foreward {
   width: 18px;
   height: 18px;
   x: 0px;
   y: 0px;
   enable-background: new 0 0 25 25;
   margin-bottom: 5px;

   g polygon {
      fill: #FEFEFE;
   }
}

#pause {
   x: 0px;
   y: 0px;
   enable-background: new 0 0 25 25;
   width: 30px;
   height: 30px;
   position: absolute;
   margin-left: -38px;
   cursor: pointer;

   rect {
      fill: white;
   }
}

#pause:hover rect {
   fill: #8F4DA9;
}

.step-backward g polygon:hover, .step-foreward g polygon:hover {
   fill: #EF6DBC;
   cursor: pointer;
}

.social {
   text-align: center;
}

.twitter {
  color: #BDBDBD;
  font-family: sans-serif;
  text-decoration: none;
  
  &:hover {
    color: #ecf0f1;
  }
}

.github {
  color: #BDBDBD;
  font-family: sans-serif;
  text-decoration: none;
  
  &:hover {
    color: #ecf0f1;
  }
}

p {
  color: #BDBDBD;
}

#skip {
  float: right;
  margin-top: 10px;
  
  p {
    color: #2980b9;
  }
  
  p:hover {
    color: #e74c3c;
    cursor: pointer;
  }
}

.expend {
   padding: 0.5px;
   cursor: pointer;
   }
svg:hover g polygon {
      fill: #EF6DBC;
   
}
.music-player {
  background-color: #1E2125;
  border-radius: 15px;
  box-shadow: 0 20px 50px -30px #000;
  width: 600px;
  overflow: hidden;
  margin: 50px auto;
}
.music-player--banner {
  background: url(http://thecatholiccatalogue.com/wp-content/uploads/2013/05/bob-marley-photo.jpg);
  background-size: cover;
  height: 150px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  position:relative;
  z-index:1;
}
.music-player--main {
  /* height: 100px; */
}
.music-player--progress {
  position: relative;
  overflow:auto;
  padding: 5px;

}
.progress--progress-bar {
  position: absolute;
  width: 100%;
  top: -1px;
  left: 0;
  -webkit-appearance: none;
  height: 3px;
  z-index:2
}
.progress--progress-bar::-webkit-progress-bar {
    height: 4px;
    background: transparent;
 }
.progress--progress-bar::-webkit-progress-value {
  background: #ED5483;
 }

.progress--time {
  color: #A9A9A9;
  font-size: 10px;
  float: left;
}
.progress--time__end {
  float: right;
}

.music-player--controls {
  padding: 0px 20px 20px;
   margin-top: 20px;

   svg:nth-child(2) {
      margin-left: 5px;
      margin-right: 5px;
   }
}
.controls--play-button {
  display:inline-block;
  border-radius: 50%;
  padding: 13px 15px;
  background: #444;
  color: white;
  font-size: 18px;
  cursor: pointer;
}
.controls--play-button:hover {
  background: gray;
}
.song-info {
  display:inline-block;
  position:relative;
  top:5px;
  margin-left:5px
}
.song-info--title {
  font-size: 18px;
  color: #8E8E8E;
}
.song-info--artist {
  font-size: 12px;
  color: #D8D8D8;
}

.controls--actions {
  display:inline-block;
  vertical-align: top;
  margin-top: 10px;
  float:right;
}
.controls--actions i {
    font-size: 20px;
    color: #BCBECA;
    cursor: pointer;
}
.controls--actions .actions--repeat {
  position:relative;
  top: 2px;
}
.controls--actions .actions--repeat:hover {
  color: #444
}
.controls--actions .fa-backward, .controls--actions .fa-forward {
  border-radius: 50%;
  background: #BCBECA;
  color: white;
  font-size: 9px;
  padding: 5px 4px 5px 7px;
}
.controls--actions .fa-backward:hover, .controls--actions .fa-forward:hover {
  background: #444;
}
.controls--actions .fa-backward {
  padding: 5px 6px 5px 5px;
}
</style>
            
               
               </br></br>
    
               
  <div class="uk-container uk-container-center">
    <div class="uk-grid" data-uk-grid-match data-uk-grid-margin>
        <div class="tm-main uk-width-medium-3-4 tm-middle">
            <main class="tm-content">
                <section>
                    <div data-uk-slider class="">
                        <div class="uk-slider-container post-gallery">
                            <ul class="uk-slider uk-grid-width-medium-1-1">
                            </ul>
                            <a href="" class="tm-slidenav tm-post-gallery-previous" data-uk-slider-item="previous" draggable="false"><i class="uk-icon-angle-left"></i></a>
                            <a href="" class="tm-slidenav tm-post-gallery-next" data-uk-slider-item="next" draggable="false"><i class="uk-icon-angle-right"></i></a>
                        </div>
                    </div>
                    <div id="primary" class="site-content post-content">
                        <div class="main-heading">
                            <h1 class="tm-page-title">CONTENT + RIGHT</h1>
                        </div>
                        <div id="content" role="main">
                          <!-- Called of font style  file -->

      <link href='https://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>

    <div class="container-audio">
        <audio id="player" controls="controls"  loop autoplay>
                   <source type="audio/mp3">
                   Your browser dose not Support the audio Tag
               </audio>
    </div>
    
            <div class="music-player">
   <header class="music-player--banner"></header>
   
   <ul>
      
      
         The Noisy Freaks
         
         

         <div class="music-player--controls">
            <audio id="music" preload="auto" loop="false">
               <source src="https://dl.dropbox.com/s/oswkgcw749xc8xs/The-Noisy-Freaks.mp3?dl=1" type="audio/mp3">
                  <source src="https://dl.dropbox.com/s/75jpngrgnavyu7f/The-Noisy-Freaks.ogg?dl=1" type="audio/ogg">
            </audio>
            <div id="slider"><div id="elapsed"></div></div>
            <p id="timer">0:00</p>
            <div class="music-player--controls">
               <span class="expend"><svg class="step-backward" viewBox="0 0 25 25" xml:space="preserve">
                  <g><polygon points="4.9,4.3 9,4.3 9,11.6 21.4,4.3 21.4,20.7 9,13.4 9,20.7 4.9,20.7"/></g>
               </svg></span>

               <svg id="play" viewBox="0 0 25 25" xml:space="preserve">
                   <defs><rect x="-49.5" y="-132.9" width="446.4" height="366.4"/></defs>
                  <g><circle fill="none" cx="12.5" cy="12.5" r="10.8"/>
                       <path fill-rule="evenodd" clip-rule="evenodd" d="M8.7,6.9V18c0,0,0.2,1.4,1.8,0l8.1-4.8c0,0,1.2-1.1-1-2L9.8,6.5 C9.8,6.5,9.1,6,8.7,6.9z"/>
                  </g>
               </svg>
              

               <svg id="pause" viewBox="0 0 25 25" xml:space="preserve">
                  <g>
                     <rect x="6" y="4.6" width="3.8" height="15.7"/>
                     <rect x="14" y="4.6" width="3.9" height="15.7"/>
                  </g>
               </svg>

               <span class="expend"><svg class="step-foreward" viewBox="0 0 25 25" xml:space="preserve">
                  <g><polygon points="20.7,4.3 16.6,4.3 16.6,11.6 4.3,4.3 4.3,20.7 16.7,13.4 16.6,20.7 20.7,20.7"/></g>
                </svg></span>
            </div>
         </div>
      </li>
   </ul>
</div>

    
    <ul id="pl" class="loadMore list-group">
                {% for sound in sound %}
                   <li ><a href="{{ asset('/'~ sound)}}" onclick="loadSong()" >{{ asset('/'~ sound[14 :])}}</a></li>
                                    
            {% endfor %}  
            </ul>
           <span>plus</span>
                        <!-- #content -->
                    </div>
                    <!-- #primary -->
                </section>
            </main>
            <section class="music-player">
  <header class="music-player--banner"></header>
  <main class="music-player--main">
    <div class="music-player--progress">
    <audio id="music" preload="auto" loop="false">
               <source src="https://dl.dropbox.com/s/oswkgcw749xc8xs/The-Noisy-Freaks.mp3?dl=1" type="audio/mp3">
                  <source src="https://dl.dropbox.com/s/75jpngrgnavyu7f/The-Noisy-Freaks.ogg?dl=1" type="audio/ogg">
            </audio>
      <progress class="progress--progress-bar" value="43" max="100"></progress>
      <div class="progress--time">1:37</div>
      <div class="progress--time progress--time__end">3:52</div>
    </div>
    <div class="music-player--controls">
      <i class="fa fa-pause controls--play-button"></i>
      
      <div class="song-info">
        <div class="song-info--title">Is This Love</div>
        <div class="song-info--artist">Bob Marley</div>
      </div>
      <div class="controls--actions">
        <i class="fa fa-retweet actions--repeat"></i>
        <i class="fa fa-backward actions--back"></i>
        <i class="fa fa-forward actions--forward"></i>
      </div>
    </div>
  </main>
</section>
        </div>

        <aside class="tm-sidebar-b uk-width-medium-1-4 tm-middle">
            <div class="uk-panel uk-panel-box widget_text">
                <div class="uk-panel-badge uk-badge uk-badge-danger"></div>
                <h3 class="uk-panel-title"><i class="uk-icon-bank"></i> Livre</h3>
                <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
                        <ul id="myUL">
                        {% for key, value in livre %}
                        <li><a href="{{ path('audio', {'id': key}) }}">{{value}}</a></li>
                        {% endfor %}
                        </ul>
                 </div>
            
        </aside>
    </div>
</div>             
    
          
               
            {% endblock %}
            {% block javascripts %}
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

                        <script>
var music = document.getElementById("music");
var playButton = document.getElementById("play");
var pauseButton = document.getElementById("pause");
var playhead = document.getElementById("elapsed");
var timeline = document.getElementById("slider");
var timer = document.getElementById("timer");
var duration;
pauseButton.style.visibility = "hidden";

var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
music.addEventListener("timeupdate", timeUpdate, false);

function timeUpdate() {
	var playPercent = timelineWidth * (music.currentTime / duration);
	playhead.style.width = playPercent + "px";

	var secondsIn = Math.floor(((music.currentTime / duration) / 3.5) * 100);
	if (secondsIn <= 9) {
		timer.innerHTML = "0:0" + secondsIn;
	} else {
		timer.innerHTML = "0:" + secondsIn;
	}
}

playButton.onclick = function() {
	music.play();
	playButton.style.visibility = "hidden";
	pause.style.visibility = "visible";
}

pauseButton.onclick = function() {
	music.pause();
	playButton.style.visibility = "visible";
	pause.style.visibility = "hidden";
}

music.addEventListener("canplaythrough", function () {
	duration = music.duration;
}, false);
            function loadSong(elt, e) {
            if(!e) var e = window.event;
            document.getElementById("music").src=elt.href;
            document.getElementById("music").load();
            document.getElementById("music").play();
            return false;
            }
            window.onload = function() {
            links = document.getElementById("pl").getElementsByTagName("a");
            for(var i = 0; i<links.length; i++) {

            links[i].onclick=function(e) { 
                timeUpdate();
                return loadSong(this, e);
                 };
            }
            }      
  $(function () {
    $('span').click(function () {
        $('#pl li:hidden').slice(0, 2).show();
        if ($('#pl li').length == $('#pl li:visible').length) {
            $('span ').hide();
        }
    });
});


 </script>
    {% endblock %}