<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/emoreno911/pen/zNMOew?depth=everything&limit=all&order=popularity&page=86&q=material+&show_forks=false" />
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100,400,500,700'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css'>
<style class="cp-pen-styles">body {
font-family: 'Roboto', sans-serif;
color: #444;
background-color: #f3f3f3;
background-color: #e3e3e3;
}
.wrapper {
background-color: #f8f8f8;
position: relative;
display: flex;
height: 610px;
width: 365px;
margin: 10px auto;
box-shadow: 0px 2px 15px #ddc;
/*border-radius: 5px;*/
}
.list {
width: 100%;
height: 100%;
}
.list header {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0 15px 0 35px;
box-shadow: 0 1px 15px #e3e3e3;
}
.list header > * { display: inline-block; }
.list header h3 {
min-width: 220px;
font-weight: 400;
font-size: 20px;
margin: 15px 20px 15px 40px;
flex-grow: 1;
}
.list header i {
font-size: 24px;
}
.list section {
height: calc(100% - 64px);
overflow: hidden;
}
.list-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
height: 84px;
}
.list-item > * {
display: inline-block;
vertical-align: middle;
}
.list-item .thumb {
width: 64px;
height: 64px;
margin: 10px;
}
.list-item img {
position: absolute;
left: 12px;
width: 64px;
height: 64px;
border-radius: 5px;
box-shadow: 0px 2px 5px #999;
cursor: pointer;
z-index: 1;
transition: all .4s ease;
}
.list-item img.open {
top: 0 !important;
/*top: -54px !important;*/
left: 0;
height: 365px;
width: 100%;
z-index: 10;
transition: all .4s ease-in-out;
}
/*************************************************/
@keyframes expand-on {
from { transform: translateY(160px); opacity: 0 }
to { transform: translateY(0); opacity: 1 }
}
@keyframes expand-off {
from { transform: translateY(0); opacity: 1 }
to { transform: translateY(160px); opacity: 0 }
}
@keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
/*************************************************/
.list-item span {
margin-bottom: 5px;
}
.list-item small {
color: #888;
font-size: 12px;
}
.list-item .title { flex-grow: 1; padding-left: 5px; min-width: 190px}
.list-item .title > * { display: block; }
.list-item .length { padding: 20px; }
.detail {
display: none;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12px;
z-index: 10;
}
.detail.open { display: flex; }
.detail i.close { opacity: 0; }
.detail.open i.close { opacity: 1; animation: fade-in .6s ease; }
.detail.open .info .title { animation: expand-on .5s ease }
.detail.open .player { animation: expand-on .25s ease }
.detail.lock .info .title,
.detail.lock .player { animation: expand-off .3s ease }
.info .title i,
.player .track,
.player .controls i { opacity: 0; }
.info .title i:nth-child(1) { transform: translateX(40px); }
.info .title i:nth-child(3) { transform: translateX(-40px); }
.player .controls i:nth-child(1) { transform: translateX(80px); }
.player .controls i:nth-child(2) { transform: translateX(40px); }
.player .controls i:nth-child(4) { transform: translateX(-40px); }
.player .controls i:nth-child(5) { transform: translateX(-80px); }
.detail.ready .info .title > *,
.detail.ready .player .track,
.detail.ready .player .controls > * {
opacity: 1;
transform: translateX(0);
transition: all .4s ease;
}
/*.detail .info img { width: 100%; }
.detail .info img { opacity: 0 }
.detail.lock .info img { opacity: 0 !important; }
.detail.ready .info img { opacity: 1; animation: fade-in .4s ease }*/
.detail .info .thumb > div { width: 100%; }
.detail .info .thumb { opacity: 0 }
.detail.lock .info .thumb { opacity: 0 !important; } /* this must be important */
.detail.ready .info .thumb { opacity: 1; animation: fade-in .4s ease }
.detail.ready .info .thumb { background-color: #444; }
/*#4f6 #82d*/
.player {
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: #fff;
flex-grow: 1;
}
.player .controls {
display: flex;
justify-content: space-around;
align-items: center;
}
.player .controls i { font-size: 26px; color: #666; }
.player .controls .zmdi-fast-rewind,
.player .controls .zmdi-fast-forward { cursor: pointer; }
.player .track { padding: 0 10px; }
.player .track .counter {
display: flex;
justify-content: space-between;
font-size: 11px;
font-weight: 500;
letter-spacing: .5;
color: #666;
margin-top: 5px;
}
.player .track .progress {
width: 100%;
height: 3px;
margin-bottom: 10px;
border-radius: 5px;
position: relative;
background-color: rgba(0,0,0,0.3);
cursor: pointer;
margin-top: -4px;
}
.player .track .bar {
position: absolute;
background-color: #666;
height: 100%;
width: 0;
border-radius: 10px;
transition: all .4s ease;
}
.player .track .bar:before{
content: "";
display: block;
position: absolute;
/*right: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
top: -3px;*/
right: -3px;
width: 4px;
height: 8px;
top: -2px;
}
.info .slide {
display: flex;
flex-direction: column;
}
.info .thumb { flex-grow: 1; }
.info .title {
display: flex;
justify-content: space-around;
align-items: center;
flex-grow: .02;
background: #fff;
}
.info .title i { font-size: 22px; color: #888; }
.info .title h3 > * { display: block; }
.info .title h3 { text-align: center; font-weight: 500; }
.info .title h3 span { margin-bottom: 5px; }
.info .title h3 small { font-size: 14px; font-weight: 400; }
.detail i.close {
position: absolute;
right: 15px;
top: 10px;
color: #fff;
font-size: 24px;
text-shadow: 1px 1px 5px #444;
transition: text-shadow .4s ease;
cursor: pointer;
z-index: 100;
}
.detail i.close:hover {
text-shadow: 1px 1px 2px #888;
transition: text-shadow .4s ease;
}
.info {
position: relative;
width: 100%;
overflow: hidden;
}
.slider {
position: relative;
/*width: 300%;*/
/*height: 100%;*/
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
transition: -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
transition: transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
transition: transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1), -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
will-change: transform;
}
.slider .slide { display: none; float: left; }
.slider .slide:nth-child(1) { display: flex !important; }
/** Pure Css Slider **/
.slider { width: calc(365px * 6); }
.slider .slide {
display: flex;
width: 365px;
}
.slider .slide .thumb {
height: 365px;
position: relative;
/*background-color: rgba(0,0,0,.4);*/
transition: transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
}
.slider .slide .thumb > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(50% + 1px);
background-size: cover;
transition: transform 0.4s cubic-bezier(0.51, 0.92, 0.24, 1);
}
.slider .slide .thumb > div:first-child { background-position: top left }
.slider .slide .thumb > div:last-child { background-position: bottom left; top: 50%; }
.slide .thumb.skewLeft > div { transition: all 0.6s cubic-bezier(0.51, 0.92, 0.24, 1); }
.slide .thumb.skewLeft > div:first-child { transform: skew(-3deg) translateX(-8px);}
.slide .thumb.skewLeft > div:last-child { transform: skew(3deg) translateX(-8px);}
.slide .thumb.skewRight > div { transition: all 0.6s cubic-bezier(0.51, 0.92, 0.24, 1); }
.slide .thumb.skewRight > div:first-child { transform: skew(3deg) translateX(8px);}
.slide .thumb.skewRight > div:last-child { transform: skew(-3deg) translateX(8px);}
.wrapper[data-pos="0"] .slider {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.wrapper[data-pos="1"] .slider {
-webkit-transform: translateX(-365px);
transform: translateX(-365px);
}
.wrapper[data-pos="2"] .slider {
-webkit-transform: translateX(-730px);
transform: translateX(-730px);
}
.wrapper[data-pos="3"] .slider {
-webkit-transform: translateX(-1095px);
transform: translateX(-1095px);
}
.wrapper[data-pos="4"] .slider {
-webkit-transform: translateX(-1460px);
transform: translateX(-1460px);
}
.wrapper[data-pos="5"] .slider {
-webkit-transform: translateX(-1825px);
transform: translateX(-1825px);
}
.wrapper[data-pos="0"] .player-indicator,
.wrapper[data-pos="0"] .player .track .bar,
.wrapper[data-pos="0"] .player .track .bar:before,
.wrapper[data-pos="0"] .player .playbtn {
background-color: rgba(0, 150, 136, 1);
transition: all .4s ease-in-out;
}
.wrapper[data-pos="1"] .player-indicator,
.wrapper[data-pos="1"] .player .track .bar,
.wrapper[data-pos="1"] .player .track .bar:before,
.wrapper[data-pos="1"] .player .playbtn {
background-color: rgba(63, 81, 181, 1);
transition: all .4s ease-in-out;
}
.wrapper[data-pos="2"] .player-indicator,
.wrapper[data-pos="2"] .player .track .bar,
.wrapper[data-pos="2"] .player .track .bar:before,
.wrapper[data-pos="2"] .player .playbtn {
background-color: rgba(96, 125, 139, 1);
transition: all .4s ease-in-out;
}
.wrapper[data-pos="3"] .player-indicator,
.wrapper[data-pos="3"] .player .track .bar,
.wrapper[data-pos="3"] .player .track .bar:before,
.wrapper[data-pos="3"] .player .playbtn {
background-color: rgba(90, 71, 46, 1);
transition: all .4s ease-in-out;
}
.wrapper[data-pos="4"] .player-indicator,
.wrapper[data-pos="4"] .player .track .bar,
.wrapper[data-pos="4"] .player .track .bar:before,
.wrapper[data-pos="4"] .player .playbtn {
background-color: rgba(238, 119, 51, 1);
transition: all .4s ease-in-out;
}
.wrapper[data-pos="5"] .player-indicator,
.wrapper[data-pos="5"] .player .track .bar,
.wrapper[data-pos="5"] .player .track .bar:before,
.wrapper[data-pos="5"] .player .playbtn {
background-color: rgba(244, 67, 54, 1);
transition: all .4s ease-in-out;
}
.wrapper[data-pos="0"] .player .track .progress {
background-color: rgba(0, 150, 136, .3);
}
.wrapper[data-pos="1"] .player .track .progress {
background-color: rgba(63, 81, 181, .3);
}
.wrapper[data-pos="2"] .player .track .progress {
/*background-color: rgba(136, 34, 221, .3);*/
background-color: rgba(96, 125, 139, .3);
}
.wrapper[data-pos="3"] .player .track .progress {
background-color: rgba(90, 71, 46, .3);
}
.wrapper[data-pos="4"] .player .track .progress {
background-color: rgba(238, 119, 51, .3);
}
.wrapper[data-pos="5"] .player .track .progress {
background-color: rgba(244, 67, 54, .3);
}
.playbtn {
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
background: #bbb;
border-radius: 50%;
cursor: pointer;
}
.playbtn span {
display: block;
margin-left: 5px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #fff;
transition: all .5s ease;
}
.playbtn.pause span{
margin-left: -10px;
width: 7px;
height:20px;
border-width: 0;
background-color: #fff;
transition: all .5s ease;
}
.playbtn span:before {
display: block;
content: "";
width: 0;
height: 0;
position: relative;
left: 12px;
background-color: #fff;
}
.playbtn.pause span:before {
width: 7px;
height: 20px;
}
.analyser {
width: 100%;
height: 24px;
}
.player-indicator {
display: none;
position: absolute;
right: 15px;
top: 75px;
cursor: pointer;
transition: top .4s ease;
}
.player-indicator .playb {
padding: 9px 6px 7px 10px;
color: white;
}
.player-indicator .bars {
display: flex;
justify-content: center;
align-items: flex-end;
width: 36px;
height: 32px;
margin: 2px 0;
}
.player-indicator .bars div {
display: flex;
align-items: flex-end;
width: 5px;
margin-left: 1px;
background-color: rgba(255, 255, 255, 0.2);
height: 100%;
}
.player-indicator .bars div:before {
content: "";
display: block;
width: 100%;
background-color: rgba(137, 255, 0, 0.5);
/*background: linear-gradient(to bottom, #2196F3 0%, #89ff00 70%, #FFEB3B 100%);*/
animation: animate_height 1s ease-in-out infinite;
}
.player-indicator .bars div:nth-child(2):before { animation-delay: .5s; animation-timing-function: ease-out; }
.player-indicator .bars div:nth-child(3):before { animation-delay: .2s; animation-timing-function: ease-in; }
.player-indicator .bars div:nth-child(4):before { animation-delay: .4s; }
.player-indicator .bars div:nth-child(5):before { animation-delay: .1s; }
.wrapper.playing .player-indicator,
.wrapper.paused .player-indicator {
display: flex;
}
.wrapper.paused .player-indicator .bars div:before {
height: 0;
animation: none;
}
.wrapper.paused .player-indicator .playb:before {
content: "►";
display: block;
}
.wrapper.playing .player-indicator .playb:before {
content: "❚❚";
display: block;
position: relative;
left: -1px;
}
@keyframes animate_height {
0% { height: 5% }
50% { height: 95% }
100% { height: 20% }
}
.wrapper[data-pos="0"] .player-indicator { top: 78px; }
.wrapper[data-pos="1"] .player-indicator { top: calc(76px + 1 * 91px); }
.wrapper[data-pos="2"] .player-indicator { top: calc(75px + 2 * 91px); }
.wrapper[data-pos="3"] .player-indicator { top: calc(75px + 3 * 90px); }
.wrapper[data-pos="4"] .player-indicator { top: calc(74px + 4 * 90px); }
.wrapper[data-pos="5"] .player-indicator { top: calc(73px + 5 * 90px); }</style></head><body>
<div class="wrapper" data-pos="0">
<div class="list">
<div class="player-indicator">
<div class="playb"></div>
<div class="bars">
<div></div><div></div><div></div><div></div><div></div>
</div>
</div>
<header>
<div><i class="zmdi zmdi-arrow-left"></i></div>
<h3>Favourites</h3>
<div><i class="zmdi zmdi-more-vert"></i></div>
</header>
<section></section>
</div>
<div class="detail">
<div class="info">
<i class="zmdi zmdi-close close"></i>
<div class="slider">
<!-- slides here -->
</div>
</div>
<div class="player">
<div class="controls">
<i class="zmdi zmdi-shuffle"></i>
<i class="zmdi zmdi-fast-rewind"></i>
<div class="playbtn"><span></span></div>
<i class="zmdi zmdi-fast-forward"></i>
<i class="zmdi zmdi-replay"></i>
</div>
<div class="track">
<audio class="audio" preload="true"></audio>
<canvas class="analyser"></canvas>
<div class="progress">
<div class="bar"></div>
</div>
<div class="counter"><span class="begin">0:00</span><span class="end">0:00</span></div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdn.jsdelivr.net/domtastic/0.12/domtastic.min.js'></script><script src='https://hammerjs.github.io/dist/hammer.min.js'></script>
<script>var Player = function(containerSelector, opts) {
this.$container = document.querySelector(containerSelector);
this.$audioEl = this.$container.querySelector('.audio');
this.$timeline = this.$container.querySelector('.progress');
this.$playbtn = this.$container.querySelector('.playbtn');
this.duration = 0;
this.timelineWidth = 0;
this.currentTrack = 0;
this.playerState = 'stop';
this.$audioEl.crossOrigin = "anonymous";
this.$audioEl.volume = 0.15;
this.tracks = opts.tracks;
this.$audioEl.addEventListener("timeupdate", this.timeUpdate.bind(this), false);
this.$playbtn.addEventListener("click", this.play.bind(this), false);
this.$audioEl.addEventListener("canplaythrough", () => { this.duration = this.$audioEl.duration; }, false);
this.$timeline.addEventListener("click", (e) => {
var skipTo = e.offsetX / this.timelineWidth;
this.$audioEl.currentTime = this.duration * skipTo;
});
this.analyserInitialized = false;
}
Player.prototype.play = function() {
this.timelineWidth = this.$timeline.offsetWidth;
if (this.$audioEl.paused) {
this.$audioEl.play();
// remove play, add pause
this.$playbtn.className = "playbtn pause";
this.setPlayerState('play');
} else { // pause audio
this.$audioEl.pause();
// remove pause, add play
this.$playbtn.className = "playbtn";
this.setPlayerState('pause');
}
setTimeout(()=>{
this.$container.querySelector('.end').innerText = this.formatTime(this.$audioEl.duration);
this.duration = this.$audioEl.duration;
}, 1000);
// check for the analyser
if(!this.analyserInitialized) {
this.setupAnalyser();
this.analyserInitialized = true;
}
// color references for analyser bars
this.barBG = this.getBgColor(this.$timeline);
this.barFG = this.getBgColor(this.$timeline.querySelector('.bar'));
}
Player.prototype.timeUpdate = function() {
var playPercent =
(this.$audioEl.duration == 'Infinity')? 100
: this.$audioEl.currentTime * 100 / this.$audioEl.duration;
this.setTimeline(playPercent, this.$audioEl.currentTime);
if (playPercent > 99.9) {
this.$playbtn.className = "playbtn";
this.setPlayerState('stop');
}
}
Player.prototype.changeTrack = function(index, autoplay) {
//Stopping the download of media
this.$audioEl.removeAttribute("src");
this.$audioEl.load();
this.currentTrack = index;
this.$audioEl.setAttribute("src", this.tracks[index].src);
this.$audioEl.load();
setTimeout(()=>{
this.setTimeline(0, 0, this.$audioEl.duration);
if(autoplay){
this.play();
}
}, 400);
}
Player.prototype.setTimeline = function(playPercent, elapsed, duration) {
var _playPercent = (playPercent > 99)? playPercent - 1 : playPercent,
_elapsed = elapsed || this.$audioEl.currentTime;
this.$timeline.querySelector('.bar').style.width = _playPercent + "%";
this.$container.querySelector('.begin').innerText = this.formatTime(_elapsed);
if(duration)
this.$container.querySelector('.end').innerText = this.formatTime(duration);
}
Player.prototype.setPlayerState = function(state) {
var evt = new CustomEvent('playerStateChanged', {'detail': state});
this.playerState = state;
this.$container.dispatchEvent(evt);
}
Player.prototype.formatTime = function(seconds) {
minutes = Math.floor(seconds / 60);
minutes = (minutes >= 10) ? minutes : "" + minutes;
seconds = Math.floor(seconds % 60);
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}
// http://www.developphp.com/video/JavaScript/Analyser-Bars-Animation-HTML-Audio-API-Tutorial
Player.prototype.setupAnalyser = function() {
this.$canvas = this.$container.querySelector('.analyser');
this.ctx = this.$canvas.getContext('2d');
this.audioContext = new AudioContext() || new webkitAudioContext();
this.analyser = this.audioContext.createAnalyser();
var source = this.audioContext.createMediaElementSource(this.$audioEl);
source.connect(this.analyser);
this.analyser.connect(this.audioContext.destination);
this.frameLooper();
}
Player.prototype.frameLooper = function() {
window.requestAnimationFrame(this.frameLooper.bind(this));
var fbc_array = new Uint8Array(this.analyser.frequencyBinCount);
var bars = 75;
var currentPercent = parseInt(this.$audioEl.currentTime*bars/this.$audioEl.duration);
this.analyser.getByteFrequencyData(fbc_array);
this.ctx.clearRect(0, 0, this.$canvas.width, this.$canvas.height); // Clear the canvas
this.ctx.fillStyle = this.barFG; // Color of the bars
for (var i = 0; i < bars; i++) {
if(i > currentPercent)
this.ctx.fillStyle = this.barBG;
bar_x = i * 4;
bar_width = 3.5;
bar_height = -(fbc_array[i] / 2);
this.ctx.fillRect(bar_x, this.$canvas.height, bar_width, bar_height);
}
}
// https://permadi.com/tutorial/cssGettingBackgroundColor/index.html
Player.prototype.getBgColor = function(element)
{
if (element.currentStyle)
return element.currentStyle.backgroundColor;
if (window.getComputedStyle)
{
var elementStyle=window.getComputedStyle(element,"");
if (elementStyle)
return elementStyle.getPropertyValue("background-color");
}
// Return 0 if both methods failed.
return 0;
}
</script>
<script >"use strict";
/** https://github.com/emoreno911/UI-to-Code/tree/master/material_music **/
/*** In the player view Swipe left or right to change the current song ***/
var listItems = [],
detailItems = [],
playlist = [{ "time": "178", "title": "Snowflake - Living Nightmare", "img": "https://dl.dropbox.com/s/wacl6yr2b32sqds/snowflake.jpg", "src": "https://dl.dropbox.com/s/4ef8ana3rsm7sdu/snowflake.mp3" }, { "time": "124", "title": "Bensound - Dubstep", "img": "https://dl.dropbox.com/s/7a1psxm2i4m644k/dubstep2.jpg", "src": "https://dl.dropbox.com/s/ebsjr0uq9zfg9x0/dubstep.mp3" }, { "time": "78", "title": "Secret Of Life - 42", "img": "https://dl.dropbox.com/s/z1j07kiqo9r2mj9/track3.jpeg", "src": "https://dl.dropbox.com/s/goyhvi2np0mov5n/track3.mp3" }, { "time": "216", "title": "Bensound - Retrosoul", "img": "https://dl.dropbox.com/s/e2b9l3cbjy4wthw/retrosoul.jpg", "src": "https://dl.dropbox.com/s/lfc7z6kz2q1k2vo/retrosoul.mp3" }, { "time": "175", "title": "Snowflake - Holiday Funky Blues", "img": "https://dl.dropbox.com/s/myu3b9qtf74sz3i/snowflake2.jpg", "src": "https://dl.dropbox.com/s/kwy27cjasc6yodw/snowflake3.mp3" }, { "time": "105", "title": "Bensound - Happy Rock", "img": "https://dl.dropbox.com/s/fz8452movdjnfe8/happyrock.jpg", "src": "https://dl.dropbox.com/s/03abwi15hveg4yj/happyrock.mp3" }];
playlist.forEach(function (el, i) {
var _el$title$split = el.title.split('-');
var artist = _el$title$split[0];
var title = _el$title$split[1];
var top = 66 * (i + 1) + i * 22;
var z = i + 1;
var itemList = "<div class=\"list-item\" data-index=\"" + i + "\">\n <div class=\"thumb\">\n \t<img src=\"" + el.img + "\" alt=\"song_title\" style=\"top: " + top + "px\">\n </div>\n <div class=\"title\">\n <span>" + title + "</span>\n <small>" + artist + "</small>\n </div>\n <div class=\"length\"><small>" + (formatTime(el.time) || "0:00") + "</small></div>\n </div>";
var itemDetail = "<div class=\"slide\">\n <div class=\"thumb\">\n <div style=\"background-image:url(" + el.img + ")\"></div>\n <div style=\"background-image:url(" + el.img + ")\"></div>\n </div>\n <div class=\"title\">\n <i class=\"zmdi zmdi-minus-circle-outline\"></i>\n <h3><span>" + title + "</span><small>" + artist + "</small></h3>\n <i class=\"zmdi zmdi-favorite-outline\"></i>\n </div>\n </div>";
listItems.push(itemList);
detailItems.push(itemDetail);
});
document.querySelector('.list section').innerHTML = listItems.join('');
document.querySelector('.detail .slider').innerHTML = detailItems.join('');
var positionElement = document.querySelector('.wrapper'),
sliderElement = document.querySelector('.slider');
var $listItemImg = $('.list-item img'),
$detail = $('.detail');
var _player = new Player('.player', { tracks: playlist });
_player.$container.addEventListener('playerStateChanged', function (evt) {
//console.log('player changed to ' + evt.detail);
var $wrapper = $('.wrapper');
if (evt.detail == 'play') $wrapper.removeClass('paused').addClass('playing');else if (evt.detail == 'pause') $wrapper.removeClass('playing').addClass('paused');else $wrapper.removeClass('paused').removeClass('playing');
}, false);
$('.player-indicator .playb').on('click', function (evt) {
_player.play();
});
$('.list-item').on('click', function (evt) {
// select the current detail item
var $this = $(this),
index = this.getAttribute('data-index');
positionElement.setAttribute('data-pos', index);
currentSlide = parseInt(index);
$this.find('img').addClass('open');
$detail.addClass('open');
setTimeout(function () {
$detail.addClass('ready');
if (_player.currentTrack != currentSlide) _player.changeTrack(currentSlide, true);
}, 300);
});
$('.detail .close').on('click', function (evt) {
$listItemImg.removeClass('open');
$detail.addClass('lock');
setTimeout(function () {
$detail.removeClass('ready lock open');
}, 250);
});
$('.controls .zmdi-fast-rewind').on('click', prev);
$('.controls .zmdi-fast-forward').on('click', next);
var slideCount = 6,
step = 5,
maxSpan = 100,
currentSpan = 0,
currentSlide = 0;
var hammertime = new Hammer(sliderElement);
hammertime.on("panleft panright panstart panend", function (evt) {
if (evt.type == 'panleft') {
currentSpan += step;
if (currentSpan > maxSpan) next();
}
if (evt.type == 'panright') {
currentSpan -= step;
if (currentSpan < -(maxSpan + 20)) prev();
}
// pull the borders
if (evt.type == 'panstart' && evt.additionalEvent == 'panleft') {
var s = currentSlide + 1;
$('.slide:nth-child(' + s + ') .thumb').addClass('skewLeft');
}
if (evt.type == 'panstart' && evt.additionalEvent == 'panright') {
var s = currentSlide + 1;
$('.slide:nth-child(' + s + ') .thumb').addClass('skewRight');
}
if (evt.type == 'panend') {
$('.thumb').removeClass('skewLeft skewRight');
currentSpan = 0;
}
});
function next() {
var slide = parseInt(positionElement.getAttribute('data-pos')),
newSlide = slide + 1 > slideCount - 1 ? slide : slide + 1;
positionElement.setAttribute('data-pos', newSlide);
currentSlide = newSlide;
currentSpan = 0;
_player.changeTrack(currentSlide, true);
// sync the selected list item with the current detail item
$listItemImg.removeClass('open').eq(currentSlide).addClass('open');
}
function prev() {
var slide = parseInt(positionElement.getAttribute('data-pos')),
newSlide = slide - 1 < 0 ? slide : slide - 1;
positionElement.setAttribute('data-pos', newSlide);
currentSlide = newSlide;
currentSpan = 0;
_player.changeTrack(currentSlide, true);
// sync the selected list item with the current detail item
$listItemImg.removeClass('open').eq(currentSlide).addClass('open');
}
function formatTime(seconds) {
var minutes = Math.floor(seconds / 60);
minutes = minutes >= 10 ? minutes : "" + minutes;
seconds = Math.floor(seconds % 60);
seconds = seconds >= 10 ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}
//# sourceURL=pen.js
</script>
</body></html>
