Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
97 lines (86 sloc) 3.22 KB
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../../bower_components/core-selector/core-selector.html">
<link rel="import" href="player-color-thief.html">
<polymer-element name="player-songs" attributes="songs song">
<template>
<style>
core-header-panel {
background-color: black;
height: 100%;
}
core-toolbar {
background-color: #121112;
color: white;
font-size: 18px;
}
.song {
box-sizing: border-box;
padding-left: 2px;
padding-right: 2px;
width: 50%;
height: 250px;
color: white;
position: relative;
will-change: transform;
}
.song[needZ] {
z-index: 10001;
}
.bg {
height: 180px;
background-size: cover;
background-position: center;
}
.footer {
box-sizing: border-box;
padding: 16px;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.title {
font-weight: 500;
}
@media (min-width: 767px) {
.song {
width: 25%;
}
}
@media (min-width: 1200px) {
.song {
width: 20%;
}
}
</style>
<core-header-panel mode="seamed">
<core-toolbar>
<div flex>My Library</div>
</core-toolbar>
<core-selector selected="{{selected}}" layout horizontal wrap>
<template repeat="{{sng, i in songs}}">
<div class="song" needZ?="{{song.title === sng.title}}">
<div hero-id="{{sng.title}}" hero>
<div class="bg" style="background-image: url(images/{{sng.img}});">
<player-color-thief song="{{sng}}"></player-color-thief>
</div>
<div class="footer" style="background-color: {{sng.dominantColor}}; color: {{sng.textColor}};">
<span class="title">{{sng.title}}</span><br>
<small>{{sng.artist}}</small>
</div>
</div>
</div>
</template>
</core-selector>
</core-header-panel>
</template>
<script>
Polymer('player-songs', {
selectedChanged: function () {
this.song = this.songs[this.selected];
}
});
</script>
</polymer-element>
You can’t perform that action at this time.