koel/resources/assets/js/components/shared/song-item.vue
2016-01-07 12:22:02 +08:00

108 lines
2.5 KiB
Vue

<template>
<tr
@dblclick.prevent="play"
class="song-item"
:class="{ 'selected': selected, 'playing': playbackState === 'playing' || playbackState === 'paused' }"
>
<td class="title">{{ song.title }}</td>
<td class="artist">{{ song.album.artist.name }}</td>
<td class="album">{{ song.album.name }}</td>
<td class="time">{{ song.fmtLength }}</td>
<td class="play">
<i class="fa fa-pause-circle"
v-show="playbackState === 'playing'"
@click.stop="pause"></i>
<i class="fa fa-play-circle" v-else
@click.stop="playbackState === 'paused' ? resume() : play()"></i>
</td>
</tr>
</template>
<script>
import $ from 'jquery';
import playback from '../../services/playback';
export default {
props: ['song'],
data() {
return {
playbackState: 'stopped',
};
},
methods: {
/**
* Play the song.
*/
play() {
playback.play(this.song);
},
pause() {
playback.pause();
},
resume() {
playback.resume();
},
},
events: {
// Listen to playback events and set playback status
'song:play': function (song) {
this.playbackState = this.song.id === song.id ? 'playing' : 'stopped';
},
'song:stop': function () {
this.playbackState = 'stopped';
},
'song:pause': function (song) {
if (this.song.id === song.id) {
this.playbackState = 'paused';
}
},
},
};
</script>
<style lang="sass">
@import "resources/assets/sass/partials/_vars.scss";
@import "resources/assets/sass/partials/_mixins.scss";
.song-item {
border-bottom: 1px solid $color2ndBgr;
html.no-touchevents &:hover {
background: rgba(255, 255, 255, .05);
}
.time {
color: $color2ndText;
}
.title {
min-width: 192px;
}
.play {
max-width: 32px;
opacity: .5;
i {
font-size: 150%;
}
}
&.selected {
background-color: rgba(255, 255, 255, .08);
}
&.playing {
color: $colorHighlight;
}
}
</style>