koel/resources/assets/js/components/shared/song-item.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>