Had a go at DevWars Week 1

had-a-go-at-devwars-week-1.markdown

Had a go at DevWars Week 1

Based on https://dribbble.com/shots/2133799-Is-This-Love-Music-Player?list=shots&sort=popular&timeframe=now&offset=91

A Pen by Zed Dash on CodePen.

License.

index.html

<div class="widget">
  <div class="albumcovermask">
    <img src="Hai n.n" alt="" class="albumcover" />
  </div>
  <div class="itemscontainer">
    <div class="progressbar">
      <div class="slider"></div>
    </div>
    <div class="songname"></div>
    <div class="artistname"></div>
    <div class="playpause play"></div>
    <div class="skip"></div>
    <div class="prev"></div>
    <div class="loop"></div>
    <div class="currtime"></div>
    <div class="totatime"></div>
  </div>
</div>

script.js

pentitle = "DevWar #1";

var play = false;
var loop = false;
var time = 0;
var maxtime = 0;

var song = 2;
//Artist, Album, Song, Music (No), Album Artwork (Or just another image), Length, Start
var songs = [
  ["Bob Marley", "Kaya Side 1", "Easy Skanking", "Ehh, not going to pirate", "http://2.bp.blogspot.com/-Y0hAJvZ7yAM/TnnmWamYNKI/AAAAAAAADOU/R0GAicqTlus/s1600/Bob_Marley_Photos_Wallpapers_Vvallpaper.net.jpg", 178, 0],
  ["Bob Marley", "Kaya Side 1", "Kaya", "Ehh, not going to pirate", "http://subversify.com/wp-content/uploads/2013/04/Bob-Marley-III.jpg", 195, 0],
  ["Bob Marley", "Kaya Side 1", "Is This Love", "Ehh, not going to pirate", "http://3.bp.blogspot.com/-I95GAed0AI8/UH4yfH4aRWI/AAAAAAAAFDk/d8WDWM8ixBw/s1600/02+bob-marley.jpg", 232, 97],
  ["Bob Marley", "Kaya Side 1", "Sun Is Shining", "Ehh, not going to pirate", "http://1.bp.blogspot.com/-Go0cXsT72OA/UxVxWSA_l4I/AAAAAAAAAME/KrcIZLX5x6g/s1600/bob-marley-short-hairstyles.jpg", 298, 0],
  ["Bob Marley", "Kaya Side 1", "Satisfy My Soul", "Ehh, still not going to pirate", "http://hddesktopwallpapers.in/wp-content/uploads/2015/07/bob-marley-wallpaper-smart.jpg", 271, 0]
];

start();
setInterval(timeincrement,100);
setInterval(validate,2500); //I'm using toggles so something can and probably will go wrong.


function start() {
  $(".albumcover").attr("src", $(".albumcover").attr("src").match() + songs[song][4]);
  $(".songname").text(songs[song][2]);
  $(".artistname").text(songs[song][0] + " - " + songs[song][1]);
  time = songs[song][6];
  maxtime = songs[song][5];
  timeincrement();
  init();
  songs[2][6]=0;
}

$(".playpause").click(function(){
  play = !play;
  $(this).toggleClass('play');
});
$(".loop").click(function(){
  loop = !loop;
  $(this).toggleClass('looping');
});
function timeincrement() {
  if(play && time < maxtime) {
    time+=0.1;
    if (time >= maxtime) {
      if (song < songs.length-1) {
        song++;
      } else if(loop) {
        song = 0;
      } else {
        song = 0;
        play = false;
        $(".playpause").removeClass('play');
      }
      start();
    }
    init();
  }
}

function init() {
  $(".currtime").text(Math.floor(time/60) + ":" + (Math.floor(time%60) < 10 ? '0'+Math.floor(time%60) : Math.floor(time%60)));
  $(".totatime").text(Math.floor(maxtime/60) + ":" + (Math.floor(maxtime%60) < 10 ? '0'+Math.floor(maxtime%60) : Math.floor(maxtime%60)));
  var width = (((time/maxtime)*100) + "%");
  $(".slider").css("width", width);
}
var mouseX;
$(document).mousemove( function(e) {
   mouseX = e.pageX;
});
$(".progressbar").click(function(){
  var percent = ((mouseX - $(this).offset().left) / 280);
  time = percent * maxtime;
  init();
});
$(".prev").click(function(){
  if (time > 5) {
    time = 0;
    init();
  } else {
    if(song == 0) {
      song = songs.length;
    }
    song--;
    start();
  }
});
$(".skip").click(function(){
    if(song == songs.length - 1) {
      song = -1;
    }
    song++;
    start();
});

function validate() {
  if(!play) {
    $(".playpause").addClass('play');
  } else {
    $(".playpause").removeClass('play');
  }
  if(loop) {
    $(".loop").addClass('looping');
  } else {
    $(".loop").removeClass('looping');
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700);
/*https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/devwars1_sprites.png*/
body {
  background-color:#D2D5D6;
	font-family: 'Roboto', sans-serif;
}
.redditname {
  position: absolute;
  bottom:0px;
  left:0px;
  color:#000;
  
}
.widget {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  height:210px;
  width:280px;
  border-radius:12px;
  box-shadow:0 8px 20px -5px #999;
  background-color:#fff;
  overflow:hidden;
}
.widget * {
  user-select: none;
  cursor: default;
}
.albumcovermask {
  position: absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:32px;
  overflow:hidden;
  transition:bottom .3s ease;
}
.widget:hover .albumcovermask,.widget:hover .progressbar {
  bottom:82px;
}
.itemscontainer {
  position: absolute;
  bottom:-50px;
  height:82px;
  width:280px;
  transition:bottom .3s ease;
}
.widget:hover .itemscontainer {
  bottom:0px;
}
.progressbar {
  z-index:100;
  position: absolute;
  left:0px;
  top:-1px;
  height:1px;
  width:280px;
  background-color:#DAD7D7;
  transition:all .3s ease;
}
.progressbar:hover {
  top:-6px;
  height:6px;
}
.slider {
  position: absolute;
  left:0px;
  top:0px;
  bottom:0px;
  height:100%;
  background-color:#FF2672;
  width:41%;
  box-shadow:0 0 3px 0 #FF2672;
}
.albumcover {
  position: absolute;
  top:50%;
  transform:translateY(-50%);
  width:100%;
}
.playpause {
  position: absolute;
  bottom: 16px;
  left:16px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/devwars1_sprites.png');
  background-position:0px 0px;
  overflow:hidden;
  width:40px;
  height:40px;
  cursor: pointer;
  transition:opacity .3s ease;
  border-radius:20px;
  background-color:#3A3543;
  opacity:0;
}
.play {
  background-position:0px 40px;
}
.widget:hover .playpause {
  opacity:1;
}
.playpause:hover {
  opacity:0.7 !important;
}
.songname {
  position: absolute;
  bottom:58px;
  left:65px;
  color: #5F636C;
  font-size:18px;
  transition:bottom .3s ease;
}
.widget:hover .songname {
  bottom:34px;
}
.artistname {
  position: absolute;
  bottom:50px;
  left:65px;
  color: #BEC3CF;
  font-size:11px;
  transition:bottom .3s ease;
}
.widget:hover .artistname {
  bottom:20px;
}

.skip {
  position: absolute;
  top: 32px;
  right:15px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/devwars1_sprites.png');
  background-position:-59px -17px;
  width:17px;
  height:17px;
  cursor: pointer;
  transition:opacity .3s ease;
  opacity:0;
}
.widget:hover .skip {
  opacity:0.4;
}
.skip:hover {
  opacity:1 !important;
}
.prev {
  position: absolute;
  top: 32px;
  right:35px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/devwars1_sprites.png');
  background-position:-40px -17px;
  width:17px;
  height:17px;
  cursor: pointer;
  transition:opacity .3s ease;
  opacity:0;
}
.widget:hover .prev {
  opacity:0.4;
}
.prev:hover {
  opacity:1 !important;
}
.loop {
  position: absolute;
  top: 34px;
  right:55px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/devwars1_sprites.png');
  background-position:-59px -34px;
  width:17px;
  height:14px;
  cursor: pointer;
  transition:opacity .3s ease;
  opacity:0;
}
.widget:hover .loop {
  opacity:0.4;
}
.loop:hover, .widget:hover .looping {
  opacity:1 !important;
}
.currtime {
  position: absolute;
  top:3px;
  left:5px;
  color:#909499;
  font-size:9px;
}
.totatime {
  position: absolute;
  top:3px;
  right:5px;
  color:#909499;
  font-size:9px;
}