Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 06:34:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

Resolve issues after merge

Browse source
This commit is contained in:
An Phan 2016-02-18 22:59:09 +08:00
parent 69fdda6529
commit e78f498e13
3 changed files with 14 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
resources/assets/js/components/site-footer/index.vue
View file

@ -28,7 +28,7 @@
<a class="album" @click.prevent="loadAlbum(song.album)">{{ song.album.name }}</a>
</p>
<div class="player plyr">
<div class="plyr">
<audio crossorigin="anonymous" controls></audio>
</div>
</div>
@ -63,7 +63,7 @@
<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>
<input type="range" id="volumeRange" max="10" step="0.1" class="player-volume">
<input type="range" id="volumeRange" max="10" step="0.1" class="plyr__volume">
</span>
</span>
</div>
@ -487,14 +487,9 @@
}
}
$blue: $colorHighlight;
$control-color: $colorHighlight;
$control-bg-hover: $colorHighlight;
$volume-track-height: 8px;
// Some little tweaks here and there
.player {
.plyr {
width: 100%;
position: absolute;
top: 0;

11
resources/assets/js/services/playback.js
View file

@ -34,7 +34,7 @@ export default {
controls: [],
});
this.player = $('.player')[0].plyr;
this.player = $('.plyr')[0].plyr;
this.$volumeInput = $('#volumeRange');
/**
@ -104,10 +104,14 @@ export default {
this.player.source({
sources: [{
src: `${sharedStore.state.cdnUrl}api/${song.id}/play?jwt-token=${ls.get('jwt-token')}`
src: `${sharedStore.state.cdnUrl}api/${song.id}/play?jwt-token=${ls.get('jwt-token')}`,
title: `${song.album.artist.name} - ${song.title}`,
}]
});
$('title').text(`${song.title} ♫ ${config.appTitle}`);
$('.player audio').attr('title', `${song.album.artist.name} - ${song.title}`);
// We'll just "restart" playing the song, which will handle notification, scrobbling etc.
this.restart();
},
@ -123,9 +127,6 @@ export default {
this.app.$broadcast('song:played', song);
$('title').text(`${song.title} ♫ ${config.appTitle}`);
$('.player audio').attr('title', `${song.album.artist.name} - ${song.title}`);
this.player.restart();
this.player.play();

5
resources/assets/sass/app.scss
View file

@ -3,7 +3,12 @@
@import "partials/_vars.scss";
@import "partials/_mixins.scss";
// Here we set some default variables to tweak plyr to our theme.
$plyr-blue: $colorHighlight;
$plyr-control-color: $colorHighlight;
$plyr-control-bg-hover: $colorHighlight;
$plyr-volume-track-height: 6px;
$plyr-control-spacing: 6px;
@import "vendor/_plyr.scss";
@import "partials/_shared.scss";