<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>
<!--[if lt IE 9]>
<html lang="en" class="oldie">
<![endif]-->
<!--[if gte IE 9]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CodePen Embed - Music Player UI</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="4Z5OkRrI+Nl0Nz3Ye/pzB3QwdfQlf7YRbNI5ERYSPSgPNw4sdhuluwhtyFYJCusr5DmsMfApa61nGG9QieU98g==" />
<!-- STYLES -->
<link rel="stylesheet" media="all" href="https://production-assets.codepen.io/assets/embed/v2/embed-828dcd24e821b03275c137c7d3d9db15362e9955549a6ef2197ae4d57344ec97.css" />
<style>
.hide {
display: none !important;
}
.embed-nav {
background: #3d3d3e;
}
.embed-nav ul a,
.action-button {
color: #ffffff;
background-color: #666666;
}
.embed-nav ul a.active {
background: #888888;
color: #ffffff;
box-shadow: inset 0px 3px #dddddd;
}
.embed-nav .logo-wrap a {
color: #ffffff;
}
.embed-nav .cp-embed-logo, .embed-nav #icon-codepen-box {
fill: #ffffff !important;
}
</style>
<link rel="stylesheet" media="all" href="https://production-assets.codepen.io/assets/editor/themes/twilight-2cb75eda672e6bf9b693686a681374f37c6ea158ece367b9833d6254e47dffe8.css" />
<script async src="//www.google-analytics.com/analytics.js"></script>
</head>
<body onload="resizeEmbedWindow();" id="the-body" style="border: 1px solid #555555;" class="codepen-embed-body">
<div class="embed-nav group" id="embed-nav">
<ul class="code-types">
<li class="code-type">
<a id="html-link" href="#html-box" class="active" aria-pressed="true" role="button">
HTML
</a>
</li>
<li class="code-type">
<a id="css-link" href="#css-box" aria-pressed="false" role="button">
SCSS
</a>
</li>
<li class="code-type">
<a id="js-link" href="#js-box" aria-pressed="false" role="button">
JS
</a>
</li>
<li class="results results-type">
<a id="result-link" href="#result-box" class="active" aria-pressed="true" role="button">
Result
</a>
</li>
</ul>
<div class="logo-wrap" id="edit-area">
<a class="large-logo edit-on-codepen" target="_blank" rel="noopener" href="https://codepen.io/samdbeckham/pen/gazbrz" title="Edit on CodePen">
<span id="edit-on-text" class="open-on">EDIT ON</span>
<svg id="embed-codepen-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="411.438px" height="74.257px" viewBox="0 0 411.438 74.257" enable-background="new 0 0 411.438 74.257" xml:space="preserve">
<g>
<path class="cp-embed-logo" d="M25.857 18.232c4.618 0 8.85 1.67 12.14 4.429l4.472-5.33c-4.496-3.779-10.29-6.061-16.61-6.061 C11.6 11.27 0 22.87 0 37.128c0 14.26 11.6 25.86 25.86 25.856c6.32 0 12.114-2.282 16.61-6.061l-4.472-5.33 c-3.286 2.761-7.521 4.429-12.139 4.429c-10.419 0-18.896-8.476-18.896-18.894C6.962 26.71 15.44 18.23 25.86 18.232z"/>
<path class="cp-embed-logo" d="M168.993 12.763H155.07c-1.922 0-3.48 1.559-3.48 3.48v41.769c0 1.92 1.56 3.48 3.48 3.48h13.923 c13.436 0 24.365-10.93 24.365-24.365C193.358 23.69 182.43 12.76 168.99 12.763z M168.993 54.532h-10.442V19.725h10.442 c9.597 0 17.4 7.81 17.4 17.404C186.397 46.73 178.59 54.53 168.99 54.532z"/>
<path class="cp-embed-logo" d="M212.206 16.244v41.769c0 1.92 1.56 3.48 3.48 3.48h29.007v-6.961h-25.525V40.608h16.243v-6.961h-16.243 V19.725h25.525v-6.961h-29.007C213.765 12.76 212.21 14.32 212.21 16.244z"/>
<path class="cp-embed-logo" d="M317.569 16.244v41.769c0 1.92 1.56 3.48 3.48 3.48h29.006v-6.961H324.53V40.608h16.244v-6.961H324.53 V19.725h25.525v-6.961H321.05C319.128 12.76 317.57 14.32 317.57 16.244z"/>
<path class="cp-embed-logo" d="M284.443 12.763h-15.084c-1.922 0-3.48 1.559-3.48 3.48v45.25h6.962V40.608h11.603 c7.677 0 13.923-6.246 13.923-13.922C298.366 19.01 292.12 12.76 284.44 12.763z M284.443 33.647h-11.603V19.725h11.603 c3.839 0 6.96 3.12 6.96 6.961S288.282 33.65 284.44 33.647z"/>
<path class="cp-embed-logo" d="M404.476 12.763v35.636l-28.652-34.384c-0.938-1.127-2.481-1.545-3.859-1.045 c-1.378 0.5-2.296 1.808-2.296 3.273v45.25h6.962V25.858l28.652 34.383c0.675 0.81 1.66 1.25 2.67 1.25 c0.396 0 0.797-0.066 1.185-0.207c1.378-0.5 2.296-1.808 2.296-3.273v-45.25H404.476z"/>
<path class="cp-embed-logo" d="M131.815 25.261c-0.017-0.09-0.032-0.18-0.056-0.268c-0.015-0.053-0.033-0.103-0.05-0.155 c-0.025-0.078-0.051-0.156-0.082-0.232c-0.022-0.053-0.047-0.104-0.071-0.155c-0.034-0.072-0.069-0.143-0.109-0.212 c-0.028-0.051-0.06-0.099-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.194c-0.035-0.047-0.071-0.092-0.109-0.137 c-0.05-0.06-0.104-0.117-0.158-0.173c-0.042-0.042-0.084-0.084-0.128-0.125c-0.058-0.053-0.118-0.103-0.181-0.151 c-0.048-0.037-0.095-0.075-0.145-0.109c-0.018-0.013-0.034-0.028-0.053-0.04L96.511 0.536c-1.071-0.715-2.468-0.715-3.539 0 L59.034 23.161c-0.019 0.012-0.034 0.027-0.053 0.04c-0.05 0.035-0.097 0.072-0.145 0.109c-0.062 0.049-0.123 0.099-0.181 0.15 c-0.044 0.04-0.086 0.082-0.127 0.125c-0.056 0.056-0.108 0.113-0.159 0.173c-0.038 0.045-0.074 0.09-0.109 0.14 c-0.048 0.063-0.092 0.127-0.135 0.194c-0.031 0.049-0.062 0.097-0.091 0.148c-0.04 0.069-0.075 0.14-0.108 0.21 c-0.024 0.051-0.05 0.103-0.071 0.155c-0.031 0.076-0.058 0.154-0.083 0.232c-0.017 0.052-0.035 0.103-0.049 0.15 c-0.023 0.088-0.04 0.177-0.056 0.268c-0.009 0.046-0.02 0.091-0.026 0.138c-0.018 0.138-0.028 0.276-0.028 0.417V48.44 c0 0.14 0.01 0.28 0.03 0.417c0.007 0.05 0.02 0.09 0.03 0.138c0.016 0.09 0.03 0.18 0.06 0.27 c0.014 0.05 0.03 0.1 0.05 0.155c0.025 0.08 0.05 0.16 0.08 0.233c0.021 0.05 0.05 0.1 0.07 0.15 c0.033 0.07 0.07 0.14 0.11 0.213c0.028 0.05 0.06 0.1 0.09 0.146c0.043 0.07 0.09 0.13 0.14 0.19 c0.035 0.05 0.07 0.09 0.11 0.138c0.051 0.06 0.1 0.12 0.16 0.173c0.041 0.04 0.08 0.09 0.13 0.12 c0.058 0.05 0.12 0.1 0.18 0.152c0.048 0.04 0.1 0.07 0.14 0.109c0.019 0.01 0.03 0.03 0.05 0.039L92.972 73.72 c0.536 0.36 1.15 0.54 1.77 0.537s1.234-0.18 1.77-0.537l33.938-22.625c0.019-0.012 0.035-0.026 0.053-0.039 c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.123-0.1 0.181-0.152c0.044-0.039 0.086-0.082 0.128-0.124 c0.055-0.056 0.108-0.113 0.158-0.173c0.038-0.045 0.074-0.09 0.109-0.138c0.048-0.063 0.092-0.128 0.135-0.194 c0.031-0.048 0.062-0.097 0.091-0.146c0.04-0.07 0.075-0.141 0.109-0.213c0.024-0.051 0.049-0.102 0.071-0.154 c0.031-0.077 0.057-0.155 0.082-0.233c0.017-0.052 0.035-0.103 0.05-0.155c0.023-0.088 0.039-0.178 0.056-0.268 c0.008-0.046 0.02-0.091 0.025-0.138c0.018-0.138 0.028-0.276 0.028-0.417V25.816c0-0.141-0.011-0.279-0.028-0.417 C131.835 25.35 131.82 25.31 131.81 25.261z M94.741 44.677l-11.285-7.548l11.285-7.549l11.286 7.549L94.741 44.677z M91.551 24.037L77.717 33.29L66.55 25.82L91.551 9.153V24.037z M71.978 37.128l-7.982 5.339V31.789L71.978 37.128z M77.717 40.97 l13.834 9.252v14.884L66.55 48.437L77.717 40.968z M97.932 50.22l13.834-9.252l11.168 7.469L97.932 65.104V50.22z M117.505 37.13 l7.983-5.34v10.679L117.505 37.128z M111.766 33.29l-13.834-9.252V9.153l25.002 16.667L111.766 33.29z"/>
</g>
</svg>
</a>
<a class="box-logo edit-on-codepen" target="_blank" rel="noopener" href="https://codepen.io/samdbeckham/pen/gazbrz" title="Edit on CodePen">
<svg viewBox="0 0 100 100">
<path id="icon-codepen-box" d="M99.961,34.205c-0.009-0.063-0.025-0.124-0.035-0.187c-0.021-0.121-0.043-0.242-0.075-0.36
c-0.019-0.071-0.044-0.14-0.067-0.208c-0.034-0.105-0.068-0.21-0.11-0.312c-0.029-0.071-0.063-0.142-0.096-0.21
c-0.045-0.097-0.092-0.192-0.146-0.284c-0.04-0.068-0.082-0.134-0.122-0.2c-0.058-0.089-0.117-0.176-0.182-0.26
c-0.047-0.063-0.097-0.126-0.147-0.187c-0.068-0.079-0.139-0.158-0.214-0.232c-0.056-0.058-0.112-0.115-0.171-0.168
c-0.079-0.071-0.161-0.14-0.243-0.205c-0.064-0.05-0.128-0.1-0.195-0.147c-0.025-0.016-0.047-0.037-0.071-0.053L52.383,0.722
c-1.444-0.962-3.323-0.962-4.767,0L1.914,31.19c-0.024,0.016-0.046,0.037-0.071,0.053c-0.067,0.047-0.13,0.098-0.193,0.147
c-0.084,0.065-0.166,0.134-0.243,0.205c-0.061,0.053-0.116,0.11-0.172,0.168c-0.075,0.074-0.146,0.153-0.213,0.232
c-0.051,0.061-0.101,0.124-0.148,0.187c-0.063,0.084-0.124,0.171-0.18,0.26c-0.043,0.066-0.084,0.132-0.124,0.2
c-0.053,0.092-0.1,0.187-0.146,0.284c-0.033,0.068-0.067,0.139-0.096,0.21c-0.042,0.103-0.076,0.208-0.11,0.312
c-0.022,0.068-0.047,0.137-0.067,0.208c-0.031,0.119-0.052,0.239-0.075,0.36c-0.011,0.063-0.026,0.124-0.034,0.187
C0.014,34.389,0,34.576,0,34.765v30.468c0,0.189,0.014,0.376,0.04,0.563c0.008,0.061,0.023,0.124,0.034,0.184
c0.022,0.121,0.043,0.242,0.075,0.36c0.02,0.071,0.045,0.14,0.067,0.208c0.034,0.105,0.068,0.21,0.11,0.315
c0.029,0.071,0.063,0.14,0.096,0.208c0.046,0.097,0.094,0.191,0.146,0.287c0.039,0.066,0.08,0.131,0.124,0.197
c0.056,0.089,0.117,0.176,0.18,0.261c0.047,0.065,0.097,0.126,0.148,0.187c0.067,0.079,0.138,0.158,0.213,0.231
c0.057,0.058,0.112,0.115,0.172,0.168c0.078,0.071,0.159,0.14,0.243,0.206c0.063,0.05,0.126,0.1,0.193,0.147
c0.025,0.016,0.047,0.037,0.071,0.053l45.703,30.469C48.338,99.758,49.169,100,50,100c0.83,0,1.661-0.242,2.383-0.723
l45.703-30.469c0.024-0.016,0.045-0.037,0.071-0.053c0.067-0.047,0.13-0.097,0.195-0.147c0.083-0.066,0.164-0.134,0.243-0.206
c0.059-0.053,0.115-0.11,0.171-0.168c0.075-0.074,0.146-0.153,0.214-0.231c0.05-0.061,0.1-0.121,0.147-0.187
c0.065-0.084,0.124-0.171,0.182-0.261c0.041-0.066,0.083-0.131,0.122-0.197c0.054-0.095,0.101-0.189,0.146-0.287
c0.033-0.068,0.067-0.137,0.096-0.208c0.042-0.105,0.076-0.21,0.11-0.315c0.022-0.068,0.048-0.137,0.067-0.208
c0.032-0.118,0.054-0.239,0.075-0.36c0.01-0.061,0.026-0.124,0.035-0.184C99.985,65.61,100,65.423,100,65.233V34.765
C100,34.576,99.985,34.389,99.961,34.205z M54.297,12.327l33.668,22.444L72.927,44.831L54.297,32.369V12.327z M45.703,12.327
v20.042L27.074,44.831l-15.04-10.061L45.703,12.327z M8.594,42.809L19.345,50L8.594,57.19V42.809z M45.703,87.672L12.035,65.228
l15.04-10.058L45.703,67.63V87.672z M50,60.165L34.802,50L50,39.833L65.198,50L50,60.165z M54.297,87.672V67.63L72.927,55.17
l15.039,10.058L54.297,87.672z M91.405,57.19L80.656,50l10.75-7.191V57.19z"/>
</svg>
</a>
</div>
</div>
<div id="output" class="split-output static" data-border-style="thin" data-header="true">
<div id="html-box" class="code-wrap code-box box active" role="region" aria-label="HTML">
<pre><code data-lang="xml" id="actual-html-code" data-og-lang="xml" data-alt-lang="xml"><div class="app">
<section class="player">
<img class="player__cover" :src="currentTrack.cover.large" alt="" />
<div class="player__timer">
<div class="player__timer__elapsed" v-text="player.elapsed | time"></div>
<div class="player__timer__total" v-text="currentTrack.duration | time"></div>
</div>
<div class="slider player__progress-bar">
<input type="range" :value="player.elapsed" :max="currentTrack.duration" />
</div>
<ul class="player__controls">
<li
class="control control--small"
v-bind:class="{
'control--active' : player.repeat,
'control--dimmed' : !player.repeat
}"
@click="toggleRepeat"
>
<svg class="icon" viewbox="0 0 100 100">
<use xlink:href="#repeat"></use>
</svg>
</li>
<li class="control" @click="skipBack">
<svg class="icon" viewbox="0 0 100 100" >
<use xlink:href="#skip-back"></use>
</svg>
</li>
<li class="control control--outlined">
<svg
class="icon"
viewbox="0 0 100 100"
@click="play"
v-if="!player.playing"
>
<use xlink:href="#play"></use>
</svg>
<svg
class="icon"
viewbox="0 0 100 100"
@click="pause"
v-if="player.playing"
>
<use xlink:href="#pause"></use>
</svg>
</li>
<li class="control" @click="skipForward">
<svg class="icon" viewbox="0 0 100 100">
<use xlink:href="#skip-forward"></use>
</svg>
</li>
<li
class="control control--small"
v-bind:class="{
'control--active' : player.shuffle,
'control--dimmed' : !player.shuffle
}"
@click="toggleShuffle"
>
<svg class="icon" viewbox="0 0 100 100">
<use xlink:href="#shuffle"></use>
</svg>
</li>
</ul>
<h1 class="player__title" v-text="currentTrack.title"></h1>
<h2 class="player__sub-title">{{currentTrack.album}} - {{currentTrack.artist}}</h2>
<div class="player__volume">
<div class="player__volume__icon">
<svg class="icon" viewbox="0 0 100 100">
<use xlink:href="#volume"></use>
</svg>
</div>
<div class="slider slider--volume player__volume__slider">
<input type="range" :value="player.volume" max="100" />
</div>
</div>
</section>
<aside class="playlist">
<header class="playlist__header">
<h1 class="playlist__title" v-text="playlist.title"></h1>
<div class="playlist__info">
<a href="#" v-text="playlist.author"></a> - {{playlist.tracks.length}} songs, {{playlistDuration | minutes}} min
<a href="#">
<svg class="icon icon--inline" viewbox="0 0 100 100">
<use xlink:href="#share"></use>
</svg>
</a>
</div>
</header>
<ol class="playlist__list">
<li
class="playlist__track"
@click="selectTrack($index)"
v-bind:class="{'playlist__track--active': player.currentTrack === $index}"
v-for="track in playlist.tracks"
>
<img :src="track.cover.small" class="playlist__track__cover" />
<div class="playlist__track__info">
<h3 class="playlist__track__title" v-text="track.title"></h3>
<span class="playlist__track__sub-title">{{track.album}} - {{track.artist}}</span>
</div>
<span class="playlist__track__time" v-text="track.duration | time"></span>
</li>
</ol>
</aside>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="hide">
<symbol id="play" viewBox="0 0 23.2 26.2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 11.6L6.7 2.4c-1.4-.8-2.6 0-2.6 1.8V22c0 1.8 1.2 2.7 2.6 1.8L23 14.6c1.5-.8 1.5-2.2 0-3z" />
</symbol>
<symbol id="repeat" viewBox="0 0 26.2 26.2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1 2.1v4h-10c-3.3 0-6 2.7-6 6 0 1 .3 1.9.7 2.8l2.5-1.8c-.1-.3-.2-.7-.2-1 0-1.7 1.3-3 3-3h10v4l8-5v-1l-8-5zm4.8 11c.1.3.2.7.2 1 0 1.7-1.3 3-3 3h-10v-4l-8 5v1l8 5v-4h10c3.3 0 6-2.7 6-6 0-1-.3-1.9-.7-2.8l-2.5 1.8z"
/>
</symbol>
<symbol id="share" viewBox="0 0 26.2 26.2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.1 23.1h-20v-20h10l2-2h-12c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2v-7l-2 2v5zm-18-2c3-8 7-8 13-8v4l7-7-7-7v4c-13 0-13 10-13 14z" />
</symbol>
<symbol id="shuffle" viewBox="0 0 26.2 26.2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1 1.1v4h-3c-3.3 0-6 2.7-6 6v4c0 1.7-1.3 3-3 3h-4v3h4c3.3 0 6-2.7 6-6v-4c0-1.7 1.3-3 3-3h3v4l8-5v-1l-8-5zM6.4 8.4L8.2 6c-.9-.6-2-.9-3.1-.9h-4v3h4c.5 0 .9.1 1.3.3zm10.7 9.7h-3c-.5 0-.9-.1-1.3-.3L11 20.2c.9.6 2 .9 3.1.9h3v4l8-5v-1l-8-5v4z"
/>
</symbol>
<symbol id="skip-back" viewBox="0 0 26.2 26.2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3 5.3l-8.2 4.8V6.7c0-1.3-.8-1.9-1.8-1.3L6.1 9.5V7.1c0-1.1-.9-2-2-2h-1c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h1c1.1 0 2-.9 2-2v-2.4l7.2 4.2c1 .6 1.8 0 1.8-1.3v-3.5l8.2 4.8c1 .6 1.8 0 1.8-1.3V6.7c0-1.4-.8-2-1.8-1.4z"
/>
</symbol>
<symbol id="skip-forward" viewBox="0 0 26.2 26.2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.1 5.1h-1c-1.1 0-2 .9-2 2v2.4l-7.2-4.2c-1-.6-1.8 0-1.8 1.3v3.5L2.9 5.3c-1-.6-1.8 0-1.8 1.3v12.9c0 1.3.8 1.9 1.8 1.3l8.2-4.8v3.5c0 1.3.8 1.9 1.8 1.3l7.2-4.2V19c0 1.1.9 2 2 2h1c1.1 0 2-.9 2-2V7c0-1-.9-1.9-2-1.9z"
/>
</symbol>
<symbol id="volume" viewBox="0 0 26.2 26.2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.1 13.1c0-3.3-2-6.2-4.9-7.4l-.8 1.8c2.2.9 3.7 3 3.7 5.5s-1.5 4.6-3.7 5.5l.8 1.8c2.9-1 4.9-3.9 4.9-7.2zm-4 0c0-1.7-1-3.1-2.5-3.7l-.8 1.8c.7.3 1.2 1 1.2 1.8s-.5 1.5-1.2 1.8l.8 1.8c1.5-.4 2.5-1.8 2.5-3.5zM17.7 2l-.8 1.8c3.6 1.5 6.2 5.1 6.2 9.2 0 4.2-2.5 7.7-6.2 9.2l.8 1.8c4.3-1.8 7.4-6.1 7.4-11.1s-3-9.1-7.4-10.9zM1.1 8.1v10h4l7 7v-24l-7 7h-4z"
/>
</symbol>
<symbol id="pause" viewBox="0 0 26.2 26.2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.1 2.1h-4c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-18c0-1.1-.9-2-2-2zm14 0h-4c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-18c0-1.1-.9-2-2-2z" />
</symbol>
</svg></code></pre>
</div>
<div id="css-box" class="code-wrap code-box box " role="region" aria-label="CSS">
<pre><code data-lang="text/x-scss" id="actual-css-code" data-og-lang="text/x-scss" data-alt-lang="css">// Variables
// =========
// Colors
// ------
$color__white: #fff;
$color__black: #3f3d34;
$color__gray: #7f7c6b;
$color__gray--dark: #4a473c;
$color__gray--light: #f2f2f2;
$color__yellow: #f9b94e;
$color__orange: #f9774e;
$color__beige: #ddd8c8;
// Font sizes
// -------
$font-size: 14;
$font-size--alpha: 1.95;
$font-size--beta: 1.5;
@mixin font-size($size){
font-size: #{$size * $font-size}px;
font-size: #{$size}rem;
line-height: 1em;
margin: 0 0 #{$size * $font-size / 2}px;
margin: 0 0 #{$size / 2}rem;
}
// Widths
// ------
$width--main: 75em;
$width--player: 33em;
$width--playlist: $width--main - $width--player;
// Spacing
// -------
$spacing: 2rem;
$spacing--large: 3rem;
$spacing--small: 1rem;
// Base
// ====
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
background-color: $color__orange;
background-image: linear-gradient(
135deg,
$color__yellow 0%,
$color__orange 100%
);
font-size: #{$font-size}px;
font-family: Nunito, arial, sans-serif;
font-weight: 400;
min-height: 100%;
}
.app {
color: $color__black;
box-shadow: 0 0 $spacing--small rgba($color__black, .6);
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: $width--main;
padding: 0;
width: 100%;
@media (min-width: $width--playlist) {
margin: $spacing--small auto;
}
@media (min-width: $width--main) {
margin: $spacing auto;
}
}
// Generic
// -------
a {
color: $color__orange;
text-decoration: none;
transition: color .4s;
&:hover,
&:focus {
color: lighten($color__orange, 10%);
}
}
img {
height: auto;
max-width: 100%;
}
// Components
// ==========
// Slider
// ------
$slider-height: 8px;
$slider__thumb-height: 20px;
$slider__thumb-width: 6px;
.slider {
line-height: 1em;
overflow: hidden;
padding: ($slider__thumb-height - $slider-height) / 2 0;
[type=range] {
appearance: none;
background: $color__gray--light;
height: $slider-height;
position: relative;
width: 100%;
&:focus {
outline: none;
}
&::-webkit-slider-thumb {
appearance: none;
background-color: $color__black;
border-radius: 99px;
cursor: pointer;
height: $slider__thumb-height;
position: relative;
transition: transform .2s;
width: $slider__thumb-width;
&:focus,
&:active {
transform: scale(1.3);
}
&:after {
background: $color__orange;
bottom: 0;
content: '';
display: block;
height: $slider-height;
margin-top: 0 - ($slider-height / 2);
pointer-events: none;
position: absolute;
right: $slider__thumb-width;
top: 50%;
width: 999px;
}
}
}
&--volume {
[type=range] {
&::-webkit-slider-thumb {
background-color: $color__white;
border: 3px solid $color__orange;
width: $slider__thumb-height;
&:after {
right: $slider__thumb-height - 6;
}
}
}
}
}
// Icon
// ----
.icon {
fill: currentcolor;
height: 100%;
width: 100%;
&--inline {
display: inline-block;
height: 1em;
width: 1em;
}
}
// Control
// -------
.control {
cursor: pointer;
margin: 0;
padding: $spacing--small;
transition: opacity .4s, color .4s;
&:hover,
&:focus {
opacity: .8;
}
&:active {
color: $color__orange;
transition: none;
}
&--small {
transform: scale(.4);
}
&--dimmed {
opacity: .6;
}
&--outlined {
border: 2px solid $color__gray--light;
border-radius: 100%;
}
&--active {
color: $color__orange;
}
}
// UI
// ====
// Player
// ------
.player {
background: $color__white;
text-align: center;
width: 100%;
@media (min-width: $width--player) {
width: percentage($width--player / $width--main);
}
&__title {
@include font-size($font-size--alpha);
}
&__sub-title {
@include font-size($font-size--beta);
color: $color__gray;
font-weight: 400;
}
&__cover {
display: block;
width: 100%;
}
&__timer {
background: $color__beige;
display: flex;
justify-content: space-between;
padding: $spacing--small;
}
&__progress-bar {
margin-top: 0 - $spacing--small;
}
&__controls {
display: flex;
list-style: none;
padding: $spacing--small $spacing;
}
&__volume {
display: flex;
padding: $spacing;
&__icon {
width: $spacing;
height: $spacing;
margin-right: $spacing--small;
}
&__slider {
width: 100%;
}
}
}
// Playlist
// --------
.playlist {
background: $color__gray--dark;
color: $color__gray--light;
width: 100%;
@media (min-width: $width--player) {
width: percentage($width--playlist / $width--main);
}
&__header {
background: $color__black;
padding: $spacing--large;
}
&__title {
@include font-size($font-size--alpha);
margin-top: 0;
}
&__info {
}
&__list {
list-style: none;
margin: 0;
padding: 0 $spacing--large;
}
&__track {
border-bottom: 1px solid $color__black;
cursor: pointer;
display: flex;
justify-content: space-between;
margin: 0;
padding: $spacing 0;
&--active {
color: $color__orange;
}
&__cover {
height: $spacing--large;
width: $spacing--large;
}
&__info {
margin: 0 $spacing;
width: 100%;
}
&__title {
@include font-size($font-size--beta);
}
}
}
// Overrides
// =========
.hide.hide {
display: none;
}</code></pre>
<a href="#0" id="view-css-compiled-button" class="action-button bottom right view-compiled-button" onclick="EMBED.viewCompiled('css');return false;">
View Compiled
</a>
</div>
<div id="js-box" class="code-wrap code-box box " role="region" aria-label="JS">
<pre><code data-lang="" id="actual-js-code" data-og-lang="" data-alt-lang="javascript">console.clear();
// Filters
// =======
Vue.filter('time', function(seconds) {
var minutes = Math.floor(seconds / 60),
seconds = Math.floor(seconds % 60);
if (seconds < 10) {
seconds = '0' + seconds;
}
return minutes + ':' + seconds;
});
Vue.filter('minutes', function(seconds) {
var minutes = Math.floor(seconds / 60);
return minutes;
})
// App
// =====
new Vue({
el: '.app',
data: function() {
return {
player: {
currentTrack: 0,
elapsed: 0,
playing: false,
repeat: false,
shuffle: true,
volume: 68
},
playlist: {
title: 'Designers MX - Open Space',
author: 'Kyle Barret',
tracks: [{
title: 'Window',
artist: 'The Album Leaf',
album: 'In a Safe Place',
duration: 274,
cover: {
small: 'http://is5.mzstatic.com/image/pf/us/r30/Music/y2004/m06/d11/h18/s05.tjsjltyd.100x100-75.jpg',
large: 'https://yuq.me/albums/79/690/3374011100.jpg'
}
}, {
title: 'Dayvan Cowboy',
artist: 'Boards of Canada',
album: 'The Campfire Headphase',
duration: 300,
cover: {
small: 'http://static.metacritic.com/images/products/music/8/a0c6c84a9d3ef6a577aee9a32d0b5b6f-98.jpg',
large: 'http://boardsofcanada.com/vinyl-reissues/_/img/WARPLP123R-Packshot-800.jpg'
}
}, {
title: 'Adrift',
artist: 'Tycho',
album: 'Awake',
duration: 283,
cover: {
small: 'http://cdn.ghostly.com/images/artists/34/albums/454/GI-208_1500x300_188_188.jpg',
large: 'http://cdn.ghostly.com/images/artists/34/albums/454/GI-208_1500x300_540_540.jpg'
}
}, {
title: 'Arrival at Sydney Harbour',
artist: 'Port Blue',
album: 'The Airship',
duration: 306,
cover: {
small: 'https://upload.wikimedia.org/wikipedia/ru/thumb/3/31/Port_Blue_-_The_Airship.jpg/200px-Port_Blue_-_The_Airship.jpg',
large: 'https://upload.wikimedia.org/wikipedia/en/8/8f/Theairship.jpg'
}
}, {
title: 'The Backwards Step',
artist: 'Hammock',
album: 'Chasing After Shadows',
duration: 289,
cover: {
small: 'https://upload.wikimedia.org/wikipedia/en/thumb/3/36/Chasing_after_shadows.jpg/100px-Chasing_after_shadows.jpg',
large: 'http://f1.bcbits.com/img/a3547927520_10.jpg'
}
}]
}
}
},
computed: {
currentTrack: function() {
return this.playlist.tracks[this.player.currentTrack];
},
playlistDuration: function() {
var duration = 0,
tracks = this.playlist.tracks,
i;
for (i = 0; i < tracks.length; i += 1) {
duration += tracks[i].duration;
}
return duration;
}
},
methods: {
pause: function() {
if (!this.player.playing) {
return;
}
this.$set('player.playing', false);
clearInterval(this.timer);
this.$set('timer', false);
},
play: function() {
if (this.player.playing) {
return;
}
var _this = this,
timer = setInterval(function() {
if (_this.player.elapsed >= _this.currentTrack.duration) {
_this.$set('player.elapsed', 0);
_this.skipForward();
}
_this.player.elapsed += .1;
}, 100);
this.$set('player.playing', true);
this.$set('timer', timer);
},
selectTrack: function(id) {
this.$set('player.currentTrack', id);
this.$set('player.elapsed', 0);
this.play();
},
skipForward: function() {
var track = this.player.currentTrack + 1;
track = track % this.playlist.tracks.length;
this.selectTrack(track);
},
skipBack: function() {
var track = this.player.currentTrack;
if (this.player.elapsed < 2) {
track = track - 1;
}
if (track < 0) {
track = 0;
}
this.selectTrack(track);
},
toggleRepeat: function() {
this.player.repeat = !this.player.repeat;
},
toggleShuffle: function() {
this.player.shuffle = !this.player.shuffle;
}
}
});</code></pre>
</div>
<div id="result-box" class="code-box active" role="region" aria-label="Result">
<iframe id="result-iframe" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
src="https://s.codepen.io/samdbeckham/fullembedgrid/gazbrz?type=embed&animations=run" allowTransparency="true" frameborder="0" scrolling="yes" allowfullscreen="true" name="CodePen Preview for Music Player UI" title="CodePen Preview for Music Player UI" data-src="https://s.codepen.io/samdbeckham/fullembedgrid/gazbrz?type=embed&animations=run">
</iframe>
<a href="#0" id="rerun-button" class="action-button rerun-button bottom right" onclick="EMBED.refreshResultIFrame(); return false;">
Rerun
</a>
</div>
<div id="about-box">
<div class="about-container">
<div class="about-user">
<div class="about-image" style="background-image: url(https://gravatar.com/avatar/9443bbfd13cb2285455a2d22b20020a6?s=512&d=https://codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png)"></div>
<div class="about-user-info">
<p>
This Pen is owned by <a href="https://codepen.io/samdbeckham" target="_blank">Sam Beckham</a> on CodePen.
Check out @samdbeckham's
<a href="/samdbeckham" target="_blank" rel="noopener">
110 Other Pens</a>
.
</p>
</div>
</div>
</div>
</div>
</div>
<script>
__processedPen = {"html":"<div class="app">\n <section class="player">\n <img class="player__cover" :src="currentTrack.cover.large" alt="" />\n <div class="player__timer">\n <div class="player__timer__elapsed" v-text="player.elapsed | time"></div>\n <div class="player__timer__total" v-text="currentTrack.duration | time"></div>\n </div>\n <div class="slider player__progress-bar">\n <input type="range" :value="player.elapsed" :max="currentTrack.duration" />\n </div>\n <ul class="player__controls">\n <li\n class="control control--small"\n v-bind:class="{\n 'control--active' : player.repeat,\n 'control--dimmed' : !player.repeat\n }"\n @click="toggleRepeat"\n >\n <svg class="icon" viewbox="0 0 100 100">\n <use xlink:href="#repeat"></use>\n </svg>\n </li>\n <li class="control" @click="skipBack">\n <svg class="icon" viewbox="0 0 100 100" >\n <use xlink:href="#skip-back"></use>\n </svg>\n </li>\n <li class="control control--outlined">\n <svg\n class="icon"\n viewbox="0 0 100 100"\n @click="play"\n v-if="!player.playing"\n >\n <use xlink:href="#play"></use>\n </svg>\n <svg\n class="icon"\n viewbox="0 0 100 100"\n @click="pause"\n v-if="player.playing"\n >\n <use xlink:href="#pause"></use>\n </svg>\n </li>\n <li class="control" @click="skipForward">\n <svg class="icon" viewbox="0 0 100 100">\n <use xlink:href="#skip-forward"></use>\n </svg>\n </li>\n <li\n class="control control--small"\n v-bind:class="{\n 'control--active' : player.shuffle,\n 'control--dimmed' : !player.shuffle\n }"\n @click="toggleShuffle"\n >\n <svg class="icon" viewbox="0 0 100 100">\n <use xlink:href="#shuffle"></use>\n </svg>\n </li>\n </ul>\n <h1 class="player__title" v-text="currentTrack.title"></h1>\n <h2 class="player__sub-title">{{currentTrack.album}} - {{currentTrack.artist}}</h2>\n <div class="player__volume">\n <div class="player__volume__icon">\n <svg class="icon" viewbox="0 0 100 100">\n <use xlink:href="#volume"></use>\n </svg>\n </div>\n <div class="slider slider--volume player__volume__slider">\n <input type="range" :value="player.volume" max="100" />\n </div>\n </div>\n </section>\n <aside class="playlist">\n <header class="playlist__header">\n <h1 class="playlist__title" v-text="playlist.title"></h1>\n <div class="playlist__info">\n <a href="#" v-text="playlist.author"></a> - {{playlist.tracks.length}} songs, {{playlistDuration | minutes}} min\n <a href="#">\n <svg class="icon icon--inline" viewbox="0 0 100 100">\n <use xlink:href="#share"></use>\n </svg>\n </a>\n </div>\n </header>\n <ol class="playlist__list">\n <li\n class="playlist__track"\n @click="selectTrack($index)"\n v-bind:class="{'playlist__track--active': player.currentTrack === $index}"\n v-for="track in playlist.tracks"\n >\n <img :src="track.cover.small" class="playlist__track__cover" />\n <div class="playlist__track__info">\n <h3 class="playlist__track__title" v-text="track.title"></h3>\n <span class="playlist__track__sub-title">{{track.album}} - {{track.artist}}</span>\n </div>\n <span class="playlist__track__time" v-text="track.duration | time"></span>\n </li>\n </ol>\n </aside>\n</div>\n\n<svg xmlns="http://www.w3.org/2000/svg" class="hide">\n <symbol id="play" viewBox="0 0 23.2 26.2">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M23 11.6L6.7 2.4c-1.4-.8-2.6 0-2.6 1.8V22c0 1.8 1.2 2.7 2.6 1.8L23 14.6c1.5-.8 1.5-2.2 0-3z" />\n </symbol>\n <symbol id="repeat" viewBox="0 0 26.2 26.2">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M17.1 2.1v4h-10c-3.3 0-6 2.7-6 6 0 1 .3 1.9.7 2.8l2.5-1.8c-.1-.3-.2-.7-.2-1 0-1.7 1.3-3 3-3h10v4l8-5v-1l-8-5zm4.8 11c.1.3.2.7.2 1 0 1.7-1.3 3-3 3h-10v-4l-8 5v1l8 5v-4h10c3.3 0 6-2.7 6-6 0-1-.3-1.9-.7-2.8l-2.5 1.8z"\n />\n </symbol>\n <symbol id="share" viewBox="0 0 26.2 26.2">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M23.1 23.1h-20v-20h10l2-2h-12c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2v-7l-2 2v5zm-18-2c3-8 7-8 13-8v4l7-7-7-7v4c-13 0-13 10-13 14z" />\n </symbol>\n <symbol id="shuffle" viewBox="0 0 26.2 26.2">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M17.1 1.1v4h-3c-3.3 0-6 2.7-6 6v4c0 1.7-1.3 3-3 3h-4v3h4c3.3 0 6-2.7 6-6v-4c0-1.7 1.3-3 3-3h3v4l8-5v-1l-8-5zM6.4 8.4L8.2 6c-.9-.6-2-.9-3.1-.9h-4v3h4c.5 0 .9.1 1.3.3zm10.7 9.7h-3c-.5 0-.9-.1-1.3-.3L11 20.2c.9.6 2 .9 3.1.9h3v4l8-5v-1l-8-5v4z"\n />\n </symbol>\n <symbol id="skip-back" viewBox="0 0 26.2 26.2">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M23.3 5.3l-8.2 4.8V6.7c0-1.3-.8-1.9-1.8-1.3L6.1 9.5V7.1c0-1.1-.9-2-2-2h-1c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h1c1.1 0 2-.9 2-2v-2.4l7.2 4.2c1 .6 1.8 0 1.8-1.3v-3.5l8.2 4.8c1 .6 1.8 0 1.8-1.3V6.7c0-1.4-.8-2-1.8-1.4z"\n />\n </symbol>\n <symbol id="skip-forward" viewBox="0 0 26.2 26.2">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M23.1 5.1h-1c-1.1 0-2 .9-2 2v2.4l-7.2-4.2c-1-.6-1.8 0-1.8 1.3v3.5L2.9 5.3c-1-.6-1.8 0-1.8 1.3v12.9c0 1.3.8 1.9 1.8 1.3l8.2-4.8v3.5c0 1.3.8 1.9 1.8 1.3l7.2-4.2V19c0 1.1.9 2 2 2h1c1.1 0 2-.9 2-2V7c0-1-.9-1.9-2-1.9z"\n />\n </symbol>\n <symbol id="volume" viewBox="0 0 26.2 26.2">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M21.1 13.1c0-3.3-2-6.2-4.9-7.4l-.8 1.8c2.2.9 3.7 3 3.7 5.5s-1.5 4.6-3.7 5.5l.8 1.8c2.9-1 4.9-3.9 4.9-7.2zm-4 0c0-1.7-1-3.1-2.5-3.7l-.8 1.8c.7.3 1.2 1 1.2 1.8s-.5 1.5-1.2 1.8l.8 1.8c1.5-.4 2.5-1.8 2.5-3.5zM17.7 2l-.8 1.8c3.6 1.5 6.2 5.1 6.2 9.2 0 4.2-2.5 7.7-6.2 9.2l.8 1.8c4.3-1.8 7.4-6.1 7.4-11.1s-3-9.1-7.4-10.9zM1.1 8.1v10h4l7 7v-24l-7 7h-4z"\n />\n </symbol>\n <symbol id="pause" viewBox="0 0 26.2 26.2">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M8.1 2.1h-4c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-18c0-1.1-.9-2-2-2zm14 0h-4c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-18c0-1.1-.9-2-2-2z" />\n </symbol>\n</svg>","css":"*,\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\nhtml {\n background-color: #f9774e;\n background-image: -webkit-linear-gradient(315deg, #f9b94e 0%, #f9774e 100%);\n background-image: linear-gradient(135deg, #f9b94e 0%, #f9774e 100%);\n font-size: 14px;\n font-family: Nunito, arial, sans-serif;\n font-weight: 400;\n min-height: 100%;\n}\n\n.app {\n color: #3f3d34;\n box-shadow: 0 0 1rem rgba(63, 61, 52, 0.6);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n margin: 0 auto;\n max-width: 75em;\n padding: 0;\n width: 100%;\n}\n@media (min-width: 42em) {\n .app {\n margin: 1rem auto;\n }\n}\n@media (min-width: 75em) {\n .app {\n margin: 2rem auto;\n }\n}\n\na {\n color: #f9774e;\n text-decoration: none;\n -webkit-transition: color .4s;\n transition: color .4s;\n}\na:hover, a:focus {\n color: #fb9d7f;\n}\n\nimg {\n height: auto;\n max-width: 100%;\n}\n\n.slider {\n line-height: 1em;\n overflow: hidden;\n padding: 6px 0;\n}\n.slider [type=range] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: #f2f2f2;\n height: 8px;\n position: relative;\n width: 100%;\n}\n.slider [type=range]:focus {\n outline: none;\n}\n.slider [type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n background-color: #3f3d34;\n border-radius: 99px;\n cursor: pointer;\n height: 20px;\n position: relative;\n -webkit-transition: -webkit-transform .2s;\n transition: -webkit-transform .2s;\n transition: transform .2s;\n transition: transform .2s, -webkit-transform .2s;\n width: 6px;\n}\n.slider [type=range]::-webkit-slider-thumb:focus, .slider [type=range]::-webkit-slider-thumb:active {\n -webkit-transform: scale(1.3);\n transform: scale(1.3);\n}\n.slider [type=range]::-webkit-slider-thumb:after {\n background: #f9774e;\n bottom: 0;\n content: '';\n display: block;\n height: 8px;\n margin-top: -4px;\n pointer-events: none;\n position: absolute;\n right: 6px;\n top: 50%;\n width: 999px;\n}\n.slider--volume [type=range]::-webkit-slider-thumb {\n background-color: #fff;\n border: 3px solid #f9774e;\n width: 20px;\n}\n.slider--volume [type=range]::-webkit-slider-thumb:after {\n right: 14px;\n}\n\n.icon {\n fill: currentcolor;\n height: 100%;\n width: 100%;\n}\n.icon--inline {\n display: inline-block;\n height: 1em;\n width: 1em;\n}\n\n.control {\n cursor: pointer;\n margin: 0;\n padding: 1rem;\n -webkit-transition: opacity .4s, color .4s;\n transition: opacity .4s, color .4s;\n}\n.control:hover, .control:focus {\n opacity: .8;\n}\n.control:active {\n color: #f9774e;\n -webkit-transition: none;\n transition: none;\n}\n.control--small {\n -webkit-transform: scale(0.4);\n transform: scale(0.4);\n}\n.control--dimmed {\n opacity: .6;\n}\n.control--outlined {\n border: 2px solid #f2f2f2;\n border-radius: 100%;\n}\n.control--active {\n color: #f9774e;\n}\n\n.player {\n background: #fff;\n text-align: center;\n width: 100%;\n}\n@media (min-width: 33em) {\n .player {\n width: 44%;\n }\n}\n.player__title {\n font-size: 27.3px;\n font-size: 1.95rem;\n line-height: 1em;\n margin: 0 0 13.65px;\n margin: 0 0 0.975rem;\n}\n.player__sub-title {\n font-size: 21px;\n font-size: 1.5rem;\n line-height: 1em;\n margin: 0 0 10.5px;\n margin: 0 0 0.75rem;\n color: #7f7c6b;\n font-weight: 400;\n}\n.player__cover {\n display: block;\n width: 100%;\n}\n.player__timer {\n background: #ddd8c8;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 1rem;\n}\n.player__progress-bar {\n margin-top: -1rem;\n}\n.player__controls {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n list-style: none;\n padding: 1rem 2rem;\n}\n.player__volume {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n padding: 2rem;\n}\n.player__volume__icon {\n width: 2rem;\n height: 2rem;\n margin-right: 1rem;\n}\n.player__volume__slider {\n width: 100%;\n}\n\n.playlist {\n background: #4a473c;\n color: #f2f2f2;\n width: 100%;\n}\n@media (min-width: 33em) {\n .playlist {\n width: 56%;\n }\n}\n.playlist__header {\n background: #3f3d34;\n padding: 3rem;\n}\n.playlist__title {\n font-size: 27.3px;\n font-size: 1.95rem;\n line-height: 1em;\n margin: 0 0 13.65px;\n margin: 0 0 0.975rem;\n margin-top: 0;\n}\n.playlist__list {\n list-style: none;\n margin: 0;\n padding: 0 3rem;\n}\n.playlist__track {\n border-bottom: 1px solid #3f3d34;\n cursor: pointer;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n margin: 0;\n padding: 2rem 0;\n}\n.playlist__track--active {\n color: #f9774e;\n}\n.playlist__track__cover {\n height: 3rem;\n width: 3rem;\n}\n.playlist__track__info {\n margin: 0 2rem;\n width: 100%;\n}\n.playlist__track__title {\n font-size: 21px;\n font-size: 1.5rem;\n line-height: 1em;\n margin: 0 0 10.5px;\n margin: 0 0 0.75rem;\n}\n\n.hide.hide {\n display: none;\n}\n","js":"console.clear();\n\n// Filters\n// =======\nVue.filter('time', function(seconds) {\n var minutes = Math.floor(seconds / 60),\n seconds = Math.floor(seconds % 60);\n\n if (seconds < 10) {\n seconds = '0' + seconds;\n }\n\n return minutes + ':' + seconds;\n});\n\nVue.filter('minutes', function(seconds) {\n var minutes = Math.floor(seconds / 60);\n \n return minutes;\n})\n\n// App\n// =====\nnew Vue({\n el: '.app',\n data: function() {\n return {\n player: {\n currentTrack: 0,\n elapsed: 0,\n playing: false,\n repeat: false,\n shuffle: true,\n volume: 68\n },\n playlist: {\n title: 'Designers MX - Open Space',\n author: 'Kyle Barret',\n tracks: [{\n title: 'Window',\n artist: 'The Album Leaf',\n album: 'In a Safe Place',\n duration: 274,\n cover: {\n small: 'http://is5.mzstatic.com/image/pf/us/r30/Music/y2004/m06/d11/h18/s05.tjsjltyd.100x100-75.jpg',\n large: 'https://yuq.me/albums/79/690/3374011100.jpg'\n }\n }, {\n title: 'Dayvan Cowboy',\n artist: 'Boards of Canada',\n album: 'The Campfire Headphase',\n duration: 300,\n cover: {\n small: 'http://static.metacritic.com/images/products/music/8/a0c6c84a9d3ef6a577aee9a32d0b5b6f-98.jpg',\n large: 'http://boardsofcanada.com/vinyl-reissues/_/img/WARPLP123R-Packshot-800.jpg'\n }\n }, {\n title: 'Adrift',\n artist: 'Tycho',\n album: 'Awake',\n duration: 283,\n cover: {\n small: 'http://cdn.ghostly.com/images/artists/34/albums/454/GI-208_1500x300_188_188.jpg',\n large: 'http://cdn.ghostly.com/images/artists/34/albums/454/GI-208_1500x300_540_540.jpg'\n }\n }, {\n title: 'Arrival at Sydney Harbour',\n artist: 'Port Blue',\n album: 'The Airship',\n duration: 306,\n cover: {\n small: 'https://upload.wikimedia.org/wikipedia/ru/thumb/3/31/Port_Blue_-_The_Airship.jpg/200px-Port_Blue_-_The_Airship.jpg',\n large: 'https://upload.wikimedia.org/wikipedia/en/8/8f/Theairship.jpg'\n }\n }, {\n title: 'The Backwards Step',\n artist: 'Hammock',\n album: 'Chasing After Shadows',\n duration: 289,\n cover: {\n small: 'https://upload.wikimedia.org/wikipedia/en/thumb/3/36/Chasing_after_shadows.jpg/100px-Chasing_after_shadows.jpg',\n large: 'http://f1.bcbits.com/img/a3547927520_10.jpg'\n }\n }]\n }\n }\n },\n computed: {\n currentTrack: function() {\n return this.playlist.tracks[this.player.currentTrack];\n },\n playlistDuration: function() {\n var duration = 0,\n tracks = this.playlist.tracks,\n i;\n \n for (i = 0; i < tracks.length; i += 1) {\n duration += tracks[i].duration;\n }\n \n return duration;\n }\n },\n methods: {\n pause: function() {\n if (!this.player.playing) {\n return;\n }\n this.$set('player.playing', false);\n clearInterval(this.timer);\n this.$set('timer', false);\n },\n play: function() {\n if (this.player.playing) {\n return;\n }\n var _this = this,\n timer = setInterval(function() {\n if (_this.player.elapsed >= _this.currentTrack.duration) {\n _this.$set('player.elapsed', 0);\n _this.skipForward();\n }\n _this.player.elapsed += .1;\n }, 100);\n \n this.$set('player.playing', true);\n this.$set('timer', timer);\n },\n selectTrack: function(id) {\n this.$set('player.currentTrack', id);\n this.$set('player.elapsed', 0);\n this.play();\n },\n skipForward: function() {\n var track = this.player.currentTrack + 1;\n \n track = track % this.playlist.tracks.length;\n this.selectTrack(track);\n },\n skipBack: function() {\n var track = this.player.currentTrack;\n \n if (this.player.elapsed < 2) {\n track = track - 1;\n }\n \n if (track < 0) {\n track = 0;\n }\n \n this.selectTrack(track);\n },\n toggleRepeat: function() {\n this.player.repeat = !this.player.repeat;\n },\n toggleShuffle: function() {\n this.player.shuffle = !this.player.shuffle;\n }\n }\n});"};
__preprocessorNames = {
"html": "HTML",
"css": "SCSS",
"js": "JS"
};
__pageType = "embed";
__editable = false;
__env = "production";
</script>
<script src="https://production-assets.codepen.io/assets/embed/v2/embed-dbf9d84bdb733800f612f481217ad19fd1b50f46e39a27a60917341746017b54.js"></script>
</body>
</html>
