koel/resources/assets/js/components/shared/song-item.vue

122 lines
3.1 KiB
Vue
Raw Normal View History

2015-12-13 04:42:28 +00:00
<template>
<tr
@dblclick.prevent="playRightAwayyyyyyy"
2015-12-13 04:42:28 +00:00
class="song-item"
:class="{ selected: selected, playing: song.playbackState === 'playing' || song.playbackState === 'paused' }"
2015-12-13 04:42:28 +00:00
>
2016-03-20 14:23:01 +00:00
<td class="track-number">{{ song.track || '' }}</td>
2016-02-14 07:18:40 +00:00
<td class="title">{{ song.title }}</td>
2016-03-20 14:06:57 +00:00
<td class="artist">{{ song.album.artist.name }}</td>
<td class="album">{{ song.album.name }}</td>
2016-03-31 04:12:14 +00:00
<td class="time">{{* song.fmtLength }}</td>
<td class="play" @click.stop="doPlayback">
<i class="fa fa-pause-circle" v-show="song.playbackState === 'playing'"></i>
<i class="fa fa-play-circle" v-else></i>
2016-01-07 04:22:02 +00:00
</td>
2015-12-13 04:42:28 +00:00
</tr>
</template>
<script>
import playback from '../../services/playback';
2016-01-07 08:11:11 +00:00
import queueStore from '../../stores/queue';
2015-12-13 04:42:28 +00:00
export default {
2016-02-14 07:18:40 +00:00
props: ['song'],
2015-12-13 04:42:28 +00:00
data() {
return {
selected: false,
2015-12-13 04:42:28 +00:00
};
},
methods: {
/**
2016-01-07 08:11:11 +00:00
* Play the song right away.
2015-12-13 04:42:28 +00:00
*/
2016-01-31 15:59:06 +00:00
playRightAwayyyyyyy() {
2016-01-07 08:11:11 +00:00
if (!queueStore.contains(this.song)) {
queueStore.queueAfterCurrent(this.song);
}
playback.play(this.song);
2015-12-13 04:42:28 +00:00
},
2016-01-06 16:41:59 +00:00
/**
* Take the right playback action based on the current playback state.
*/
doPlayback() {
switch (this.song.playbackState) {
case 'playing':
playback.pause();
break;
case 'paused':
playback.resume();
break;
default:
2016-01-31 15:59:06 +00:00
this.playRightAwayyyyyyy();
break;
}
2016-01-06 16:41:59 +00:00
},
/**
* Toggle the "selected" state of the current component.
*/
toggleSelectedState() {
this.selected = !this.selected;
},
/**
* Select the current component (apply a CSS class on its DOM).
*/
select() {
2016-03-13 17:00:32 +00:00
this.selected = true;
},
/**
* Deselect the current component.
*/
deselect() {
this.selected = false;
2016-03-14 17:16:38 +00:00
},
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
.song-item {
border-bottom: 1px solid $color2ndBgr;
2016-01-07 04:22:02 +00:00
html.no-touchevents &:hover {
2015-12-13 04:42:28 +00:00
background: rgba(255, 255, 255, .05);
}
2016-03-20 14:24:58 +00:00
.time, .track-number {
2015-12-13 04:42:28 +00:00
color: $color2ndText;
}
.title {
min-width: 192px;
}
2016-01-07 04:22:02 +00:00
.play {
2016-01-06 16:41:59 +00:00
max-width: 32px;
2016-01-07 04:22:02 +00:00
opacity: .5;
i {
font-size: 150%;
}
2016-01-06 16:41:59 +00:00
}
2015-12-13 04:42:28 +00:00
&.selected {
background-color: rgba(255, 255, 255, .08);
}
&.playing {
color: $colorHighlight;
}
}
</style>