2015-12-13 04:42:28 +00:00
|
|
|
|
<template>
|
|
|
|
|
<footer id="mainFooter">
|
|
|
|
|
<div class="side player-controls" id="playerControls">
|
2015-12-14 04:51:52 +00:00
|
|
|
|
<i class="prev fa fa-step-backward control" @click.prevent="playPrev"></i>
|
2015-12-13 04:42:28 +00:00
|
|
|
|
|
2016-02-08 12:21:24 +00:00
|
|
|
|
<span class="play control"
|
|
|
|
|
v-show="song.playbackState === 'stopped' || song.playbackState === 'paused'"
|
|
|
|
|
@click.prevent="resume"
|
|
|
|
|
>
|
2015-12-13 04:42:28 +00:00
|
|
|
|
<i class="fa fa-play"></i>
|
|
|
|
|
</span>
|
2016-02-08 12:21:24 +00:00
|
|
|
|
<span class="pause control" v-else @click.prevent="pause">
|
2015-12-13 04:42:28 +00:00
|
|
|
|
<i class="fa fa-pause"></i>
|
|
|
|
|
</span>
|
|
|
|
|
|
2015-12-14 04:51:52 +00:00
|
|
|
|
<i class="next fa fa-step-forward control" @click.prevent="playNext"></i>
|
2015-12-13 04:42:28 +00:00
|
|
|
|
</div>
|
2016-02-08 12:21:24 +00:00
|
|
|
|
|
2015-12-13 04:42:28 +00:00
|
|
|
|
<div class="media-info-wrap">
|
|
|
|
|
<div class="middle-pane">
|
|
|
|
|
|
2016-01-16 18:11:24 +00:00
|
|
|
|
<span class="album-thumb" v-if="cover" :style="{ backgroundImage: 'url(' + cover + ')' }"></span>
|
2015-12-13 04:42:28 +00:00
|
|
|
|
|
|
|
|
|
<div class="progress" id="progressPane">
|
|
|
|
|
<h3 class="title">{{ song.title }}</h3>
|
|
|
|
|
<p class="meta">
|
2016-02-13 03:18:59 +00:00
|
|
|
|
<a class="artist" @click.prevent="loadArtist(song.album.artist)">{{ song.album.artist.name }}</a> –
|
|
|
|
|
<a class="album" @click.prevent="loadAlbum(song.album)">{{ song.album.name }}</a>
|
2015-12-13 04:42:28 +00:00
|
|
|
|
</p>
|
|
|
|
|
|
2016-02-18 14:59:09 +00:00
|
|
|
|
<div class="plyr">
|
2016-01-25 10:55:00 +00:00
|
|
|
|
<audio crossorigin="anonymous" controls></audio>
|
2015-12-13 04:42:28 +00:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2016-02-08 12:21:24 +00:00
|
|
|
|
|
2015-12-13 04:42:28 +00:00
|
|
|
|
<span class="other-controls" :class="{ 'with-gradient': prefs.showExtraPanel }">
|
2016-01-11 15:25:58 +00:00
|
|
|
|
<equalizer v-if="useEqualizer" v-show="showEqualizer"></equalizer>
|
|
|
|
|
|
2016-02-08 12:21:24 +00:00
|
|
|
|
<sound-bar v-show="song.playbackState === 'playing'"></sound-bar>
|
2016-01-11 15:25:58 +00:00
|
|
|
|
|
2016-02-08 12:21:24 +00:00
|
|
|
|
<i class="like control fa fa-heart" :class="{ liked: song.liked }"
|
2015-12-13 04:42:28 +00:00
|
|
|
|
@click.prevent="like"></i>
|
|
|
|
|
|
2016-02-08 12:21:24 +00:00
|
|
|
|
<span class="control"
|
2015-12-19 16:36:44 +00:00
|
|
|
|
@click.prevent="toggleExtraPanel"
|
|
|
|
|
:class="{ active: prefs.showExtraPanel }">Info</span>
|
2016-02-08 12:21:24 +00:00
|
|
|
|
|
|
|
|
|
<i class="fa fa-sliders control"
|
|
|
|
|
v-if="useEqualizer"
|
2016-01-11 15:25:58 +00:00
|
|
|
|
@click="showEqualizer = !showEqualizer"
|
|
|
|
|
:class="{ active: showEqualizer }"></i>
|
|
|
|
|
|
|
|
|
|
<i v-else
|
2016-02-08 12:21:24 +00:00
|
|
|
|
class="queue control fa fa-list-ol control"
|
2016-01-16 18:11:24 +00:00
|
|
|
|
:class="{ active: viewingQueue }"
|
2015-12-13 04:42:28 +00:00
|
|
|
|
@click.prevent="$root.loadMainView('queue')"></i>
|
|
|
|
|
|
|
|
|
|
<span class="repeat control {{ prefs.repeatMode }}" @click.prevent="changeRepeatMode">
|
|
|
|
|
<i class="fa fa-repeat"></i>
|
|
|
|
|
</span>
|
2016-02-08 12:21:24 +00:00
|
|
|
|
|
2015-12-13 04:42:28 +00:00
|
|
|
|
<span class="volume control" id="volume">
|
|
|
|
|
<i class="fa fa-volume-up" @click.prevent="mute" v-show="!muted"></i>
|
|
|
|
|
<i class="fa fa-volume-off" @click.prevent="unmute" v-show="muted"></i>
|
2016-02-18 14:59:09 +00:00
|
|
|
|
<input type="range" id="volumeRange" max="10" step="0.1" class="plyr__volume">
|
2015-12-13 04:42:28 +00:00
|
|
|
|
</span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2016-01-11 15:25:58 +00:00
|
|
|
|
import config from '../../config';
|
|
|
|
|
import playback from '../../services/playback';
|
2016-04-10 09:51:06 +00:00
|
|
|
|
import { isAudioContextSupported } from '../../services/utils';
|
2016-01-11 15:25:58 +00:00
|
|
|
|
|
2015-12-13 04:42:28 +00:00
|
|
|
|
import songStore from '../../stores/song';
|
|
|
|
|
import favoriteStore from '../../stores/favorite';
|
|
|
|
|
import preferenceStore from '../../stores/preference';
|
2016-01-11 15:25:58 +00:00
|
|
|
|
|
|
|
|
|
import soundBar from '../shared/sound-bar.vue';
|
|
|
|
|
import equalizer from './equalizer.vue';
|
2015-12-13 04:42:28 +00:00
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
2016-02-08 12:21:24 +00:00
|
|
|
|
return {
|
2015-12-13 04:42:28 +00:00
|
|
|
|
song: songStore.stub,
|
|
|
|
|
muted: false,
|
|
|
|
|
viewingQueue: false,
|
|
|
|
|
|
|
|
|
|
prefs: preferenceStore.state,
|
2016-01-11 15:25:58 +00:00
|
|
|
|
showEqualizer: false,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Indicate if we should build and use an equalizer.
|
2016-02-08 12:21:24 +00:00
|
|
|
|
*
|
2016-01-17 14:26:24 +00:00
|
|
|
|
* @type {Boolean}
|
2016-01-11 15:25:58 +00:00
|
|
|
|
*/
|
2016-04-10 09:51:06 +00:00
|
|
|
|
useEqualizer: isAudioContextSupported(),
|
2015-12-13 04:42:28 +00:00
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
2016-01-11 15:25:58 +00:00
|
|
|
|
components: { soundBar, equalizer },
|
2015-12-13 04:42:28 +00:00
|
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
|
/**
|
|
|
|
|
* Get the album cover for the current song.
|
2016-02-08 12:21:24 +00:00
|
|
|
|
*
|
2016-01-17 14:26:24 +00:00
|
|
|
|
* @return {?String}
|
2015-12-13 04:42:28 +00:00
|
|
|
|
*/
|
|
|
|
|
cover() {
|
|
|
|
|
// don't display the default cover here
|
|
|
|
|
if (this.song.album.cover === config.unknownCover) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return this.song.album.cover;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Get the previous song in queue.
|
2016-02-08 12:21:24 +00:00
|
|
|
|
*
|
2016-01-07 09:03:38 +00:00
|
|
|
|
* @return {?Object}
|
2015-12-13 04:42:28 +00:00
|
|
|
|
*/
|
|
|
|
|
prev() {
|
2016-03-18 04:45:12 +00:00
|
|
|
|
return playback.previous;
|
2015-12-13 04:42:28 +00:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Get the next song in queue.
|
2016-02-08 12:21:24 +00:00
|
|
|
|
*
|
2016-01-07 09:03:38 +00:00
|
|
|
|
* @return {?Object}
|
2015-12-13 04:42:28 +00:00
|
|
|
|
*/
|
|
|
|
|
next() {
|
2016-03-18 04:45:12 +00:00
|
|
|
|
return playback.next;
|
2015-12-13 04:42:28 +00:00
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
/**
|
|
|
|
|
* Mute the volume.
|
|
|
|
|
*/
|
|
|
|
|
mute() {
|
2016-01-16 03:47:28 +00:00
|
|
|
|
this.muted = true;
|
|
|
|
|
|
2015-12-13 04:42:28 +00:00
|
|
|
|
return playback.mute();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Unmute the volume.
|
|
|
|
|
*/
|
|
|
|
|
unmute() {
|
2016-01-16 03:47:28 +00:00
|
|
|
|
this.muted = false;
|
|
|
|
|
|
2015-12-13 04:42:28 +00:00
|
|
|
|
return playback.unmute();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Play the previous song in queue.
|
|
|
|
|
*/
|
|
|
|
|
playPrev() {
|
|
|
|
|
return playback.playPrev();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Play the next song in queue.
|
|
|
|
|
*/
|
|
|
|
|
playNext() {
|
|
|
|
|
return playback.playNext();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Resume the current song.
|
|
|
|
|
* If the current song is the stub, just play the first song in the queue.
|
|
|
|
|
*/
|
|
|
|
|
resume() {
|
|
|
|
|
if (!this.song.id) {
|
|
|
|
|
return playback.playFirstInQueue();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
playback.resume();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
2016-01-16 03:47:28 +00:00
|
|
|
|
* Pause the playback.
|
2015-12-13 04:42:28 +00:00
|
|
|
|
*/
|
|
|
|
|
pause() {
|
|
|
|
|
playback.pause();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Change the repeat mode.
|
|
|
|
|
*/
|
|
|
|
|
changeRepeatMode() {
|
|
|
|
|
return playback.changeRepeatMode();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Like the current song.
|
|
|
|
|
*/
|
|
|
|
|
like() {
|
|
|
|
|
if (!this.song.id) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2015-12-21 13:05:25 +00:00
|
|
|
|
favoriteStore.toggleOne(this.song);
|
2015-12-13 04:42:28 +00:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
2015-12-19 16:36:44 +00:00
|
|
|
|
* Toggle hide or show the extra panel.
|
2015-12-13 04:42:28 +00:00
|
|
|
|
*/
|
2015-12-19 16:36:44 +00:00
|
|
|
|
toggleExtraPanel() {
|
2015-12-13 04:42:28 +00:00
|
|
|
|
preferenceStore.set('showExtraPanel', !this.prefs.showExtraPanel);
|
|
|
|
|
},
|
2016-02-13 03:18:59 +00:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Load the artist details panel.
|
|
|
|
|
*
|
|
|
|
|
* @param {Object} artist
|
|
|
|
|
*/
|
|
|
|
|
loadArtist(artist) {
|
|
|
|
|
this.$root.loadArtist(artist);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Load the album details panel.
|
|
|
|
|
*
|
|
|
|
|
* @param {Object} album
|
|
|
|
|
*/
|
|
|
|
|
loadAlbum(album) {
|
|
|
|
|
this.$root.loadAlbum(album);
|
|
|
|
|
},
|
2015-12-13 04:42:28 +00:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
events: {
|
|
|
|
|
/**
|
2016-01-07 09:03:38 +00:00
|
|
|
|
* Listen to song:played event and set the current playing song.
|
2016-02-08 12:21:24 +00:00
|
|
|
|
*
|
2016-01-07 09:03:38 +00:00
|
|
|
|
* @param {Object} song
|
2016-02-08 12:21:24 +00:00
|
|
|
|
*
|
2016-01-17 14:26:24 +00:00
|
|
|
|
* @return {Boolean}
|
2015-12-13 04:42:28 +00:00
|
|
|
|
*/
|
2016-01-07 09:03:38 +00:00
|
|
|
|
'song:played': function (song) {
|
2015-12-13 04:42:28 +00:00
|
|
|
|
this.song = song;
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Listen to main-content-view:load event and highlight the Queue icon if
|
|
|
|
|
* the Queue screen is being loaded.
|
|
|
|
|
*/
|
|
|
|
|
'main-content-view:load': function (view) {
|
|
|
|
|
this.viewingQueue = view === 'queue';
|
2016-01-05 14:04:00 +00:00
|
|
|
|
|
|
|
|
|
return true;
|
2015-12-13 04:42:28 +00:00
|
|
|
|
},
|
2015-12-30 04:14:47 +00:00
|
|
|
|
|
|
|
|
|
'koel:teardown': function () {
|
|
|
|
|
this.song = songStore.stub;
|
|
|
|
|
},
|
2015-12-13 04:42:28 +00:00
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="sass">
|
2016-03-13 17:00:32 +00:00
|
|
|
|
@import "../../../sass/partials/_vars.scss";
|
|
|
|
|
@import "../../../sass/partials/_mixins.scss";
|
2015-12-13 04:42:28 +00:00
|
|
|
|
|
|
|
|
|
@mixin hasSoftGradientOnTop($startColor) {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
// Add a reverse gradient here to elimate the "hard cut" feel when the
|
|
|
|
|
// song list is too long.
|
|
|
|
|
&::before {
|
|
|
|
|
$gradientHeight: 2*$footerHeight/3;
|
|
|
|
|
content: " ";
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: $gradientHeight;
|
|
|
|
|
top: -$gradientHeight;
|
|
|
|
|
left: 0;
|
2016-02-08 12:21:24 +00:00
|
|
|
|
|
2015-12-13 04:42:28 +00:00
|
|
|
|
// Safari 8 won't recognize rgba(255, 255, 255, 0) and treat it as black.
|
|
|
|
|
// rgba($startColor, 0) is a workaround.
|
2016-02-08 12:21:24 +00:00
|
|
|
|
background-image: linear-gradient(to bottom, rgba($startColor, 0) 0%, rgba($startColor, 1) 100%);
|
2015-12-13 04:42:28 +00:00
|
|
|
|
pointer-events: none; // click-through
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#mainFooter {
|
|
|
|
|
background: $color2ndBgr;
|
|
|
|
|
position: fixed;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: $footerHeight;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
border-top: 1px solid $colorMainBgr;
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
flex: 1;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
|
|
|
|
|
.media-info-wrap {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.other-controls {
|
|
|
|
|
@include vertical-center();
|
|
|
|
|
@include hasSoftGradientOnTop($colorMainBgr);
|
|
|
|
|
|
|
|
|
|
&.with-gradient {
|
2016-02-08 12:21:24 +00:00
|
|
|
|
@include hasSoftGradientOnTop($colorExtraBgr);
|
2015-12-13 04:42:28 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
text-transform: uppercase;
|
2016-01-12 14:53:15 +00:00
|
|
|
|
flex: 0 0 $extraPanelWidth;
|
2015-12-13 04:42:28 +00:00
|
|
|
|
color: $colorLink;
|
|
|
|
|
|
|
|
|
|
.control {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
|
|
|
|
|
&.active {
|
2016-01-11 15:25:58 +00:00
|
|
|
|
color: $colorHighlight;
|
2015-12-13 04:42:28 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.repeat {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
&.REPEAT_ALL, &.REPEAT_ONE {
|
|
|
|
|
color: $colorHighlight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.REPEAT_ONE::after {
|
|
|
|
|
content: "1";
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
font-size: 50%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.like {
|
|
|
|
|
&:hover {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.liked {
|
|
|
|
|
color: $colorHeart;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2016-03-17 09:46:24 +00:00
|
|
|
|
@media only screen and (max-width: 768px) {
|
2015-12-13 04:42:28 +00:00
|
|
|
|
position: absolute !important;
|
|
|
|
|
right: 0;
|
|
|
|
|
height: $footerHeight;
|
|
|
|
|
display: block;
|
|
|
|
|
text-align: right;
|
|
|
|
|
top: 0;
|
|
|
|
|
line-height: $footerHeight;
|
|
|
|
|
width: 168px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.queue {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#playerControls {
|
|
|
|
|
@include vertical-center();
|
|
|
|
|
flex: 0 0 256px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
background: $colorPlayerControlsBgr;
|
|
|
|
|
|
|
|
|
|
@include hasSoftGradientOnTop($colorSidebarBgr);
|
|
|
|
|
|
|
|
|
|
.prev, .next {
|
|
|
|
|
transition: .3s;
|
|
|
|
|
}
|
2016-02-08 12:21:24 +00:00
|
|
|
|
|
2015-12-13 04:42:28 +00:00
|
|
|
|
.play, .pause {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 42px;
|
|
|
|
|
height: 42px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border: 1px solid #a0a0a0;
|
|
|
|
|
margin: 0 16px;
|
|
|
|
|
text-indent: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pause {
|
|
|
|
|
text-indent: 0;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.enabled {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2016-03-17 09:46:24 +00:00
|
|
|
|
@media only screen and (max-width: 768px) {
|
2016-02-13 14:09:15 +00:00
|
|
|
|
flex: 1;
|
2015-12-13 04:42:28 +00:00
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.middle-pane {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.album-thumb {
|
|
|
|
|
flex: 0 0 $footerHeight;
|
|
|
|
|
height: $footerHeight;
|
|
|
|
|
background: url(/public/img/covers/unknown-album.png);
|
|
|
|
|
background-size: $footerHeight;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include hasSoftGradientOnTop($colorMainBgr);
|
|
|
|
|
|
2016-03-17 09:46:24 +00:00
|
|
|
|
@media only screen and (max-width: 768px) {
|
2015-12-13 04:42:28 +00:00
|
|
|
|
width: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
height: 8px;
|
|
|
|
|
|
|
|
|
|
.album-thumb {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::before {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#progressPane {
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#progressPane {
|
|
|
|
|
flex: 1;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding-top: 16px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
background: rgba(1, 1, 1, .2);
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.meta {
|
|
|
|
|
font-size: 90%;
|
2016-02-13 03:18:59 +00:00
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
&:hover {
|
|
|
|
|
color: $colorHighlight;
|
|
|
|
|
}
|
|
|
|
|
}
|
2015-12-13 04:42:28 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2015-12-13 17:03:00 +00:00
|
|
|
|
// Some little tweaks here and there
|
2016-02-18 14:59:09 +00:00
|
|
|
|
.plyr {
|
2015-12-13 04:42:28 +00:00
|
|
|
|
width: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2016-02-17 15:53:53 +00:00
|
|
|
|
.plyr__controls {
|
2015-12-13 04:42:28 +00:00
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
2016-02-18 01:41:59 +00:00
|
|
|
|
padding: 0;
|
2015-12-13 04:42:28 +00:00
|
|
|
|
}
|
|
|
|
|
|
2016-02-17 15:53:53 +00:00
|
|
|
|
.plyr__controls--left, .plyr__controls--right {
|
2015-12-13 04:42:28 +00:00
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2016-03-17 09:46:24 +00:00
|
|
|
|
@media only screen and (max-width: 768px) {
|
2015-12-13 04:42:28 +00:00
|
|
|
|
.meta, .title {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
top: -5px !important;
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#volume {
|
|
|
|
|
@include vertical-center();
|
2016-02-08 12:21:24 +00:00
|
|
|
|
|
2015-12-13 04:42:28 +00:00
|
|
|
|
// More tweaks
|
|
|
|
|
input[type=range] {
|
|
|
|
|
margin-top: -3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
i {
|
|
|
|
|
width: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
2016-03-17 09:46:24 +00:00
|
|
|
|
@media only screen and (max-width: 768px) {
|
2015-12-13 04:42:28 +00:00
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|