@font-face{font-family:'DeogonPrincessClassic';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/DeogonPrincessClassic.woff2') format('woff2');font-weight:normal;font-style:normal;}@font-face{font-family:'kdg_Medium';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/kdg_Medium.woff') format('woff');font-weight:normal;font-style:normal;}
body {
  font-family:'kdg_Medium';text-shadow:1px 1px 2px rgba(0,0,0,0.6);
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
background: #000 url("https://cdn.pixabay.com/photo/2015/06/19/20/13/sunset-815270_1280.jpg");
background-size: cover;
background-position: center;
background-repeat : no-repeat;
}
.content {
  overflow: hidden;
  flex-grow: 1;
  height: calc(100% - 80px);
}
.content .lyrics {
  padding: 50vh 0;
  min-height: calc(100vh - 80px);
  width: calc(100% - 40px);
  margin: 0 20px;
  text-align: center;
  transition: all 0.25s;
  position: relative;
}
.content .lyrics > div {
  display:none;
}
.content .lyrics > div:before {
  content: attr(note);
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}
.content .lyrics > div.highlighted {
  display:block;
  color: #fff;
  font-size:1.785em;
  text-shadow:1px 1px 2px rgba(0,0,0,0.8);
}
.player audio{
  z-index: 10;
  background: #F1F3F4;
  color: #000;
  width: 100%;
  min-height: 50px;
  max-height: 50px;
  display: flex;
  flex-direction: row;
}
@-webkit-keyframes pop-in {
  0%, 95% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes pop-in {
  0%, 95% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}

console.clear();
var _data = JSON.parse(`{"lyrics":[
{"line":"","time":-1},
{"line":"Let's Go To the Forest<br>Kero Kero Bonito","time":3000},
{"line":"Hey, let's all go into the forest","note":"Verse 1","time":16000},
{"line":"Nobody will notice for a while","time":20000},
{"line":"There we can visit all the creatures","time":24000},
{"line":"Maybe they can teach us facts of life","time":27500},
{"line":"","time":32000},
{"line":"Or we can travel to the ocean","note":"Verse 2","time":55500},
{"line":"Don't forget your lotion","time":59500},
{"line":"It's quite hot","time":61500},
{"line":"I once met seven lovely crabs","time":64000},
{"line":"They said I should go back and join them for tea","time":67500},
{"line":"","time":72000},
{"line":"Oh wait, the forest got demolished","note":"Verse 3","time":95500},
{"line":"When they built the airport years ago","time":99000},
{"line":"But we can still go see the ocean","time":103500},
{"line":"Cause they put it in a bowl at the mall","time":107500},
{"line":"","time":112000}
]}`);

var currentLine = "";

function align() {
   var a = $(".highlighted").height();
   var c = $(".content").height();
   var d = $(".highlighted").offset().top - $(".highlighted").parent().offset().top;
   var e = d + (a/2) - (c/2);
   $(".content").animate(
       {scrollTop: e + "px"}, {easing: "swing", duration: 250}
   );
}

var lyricHeight = $(".lyrics").height();
$(window).on("resize", function() {
   if ($(".lyrics").height() != lyricHeight) {
      lyricHeight = $(".lyrics").height();
      align();
   }
});

$(document).ready(function(){
   $("audio").on('timeupdate', function(e){
      var time = this.currentTime*1000;
      var past = _data["lyrics"].filter(function (item) {
         return item.time < time;
      });
      if (_data["lyrics"][past.length] != currentLine) {
         currentLine = _data["lyrics"][past.length];
         $(".lyrics div").removeClass("highlighted");
         $(`.lyrics div:nth-child(${past.length})`).addClass("highlighted");
         align();
      }
   });
});

generate();

function generate() {
   var html = "";
   for(var i = 0; i < _data["lyrics"].length; i++) {
      html += "<div";
      if(i == 0) {
         html+=` class="highlighted"`;
         currentLine = 0;
      }
      if(_data["lyrics"][i]["note"]) {
         html += ` note="${_data["lyrics"][i]["note"]}"`;
      }
      html += ">";
      html += _data["lyrics"][i]["line"] == "" ? "" : _data["lyrics"][i]["line"];
      html += "</div>"
   }
   $(".lyrics").html(html);
   align();
}