<commit_before><template>
    <tr 
        @dblclick.prevent="playRighAwayyyyyyy" 
        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() : playRighAwayyyyyyy()"></i>
        </td>
    </tr>
</template>

<script>
    import $ from 'jquery';
    import playback from '../../services/playback';
    import queueStore from '../../stores/queue';

    export default {
        props: ['song'],

        data() {
            return {
                playbackState: 'stopped',
            };
        },

        methods: {
            /**
             * Play the song right away.
             */
            playRighAwayyyyyyy() {
                if (!queueStore.contains(this.song)) {
                    queueStore.queueAfterCurrent(this.song);
                }
                
                Vue.nextTick(() => playback.play(this.song));
            },

            pause() {
                playback.pause();
            },

            resume() {
                playback.resume();
            },
        },

        events: {
            // Listen to playback events and set playback status

            'song:played': function (song) {
                this.playbackState = this.song.id === song.id ? 'playing' : 'stopped';
            },

            'song:stopped': function () {
                this.playbackState = 'stopped';
            },

            'song:paused': function (song) {
                if (this.song.id === song.id) {
                    this.playbackState = 'paused';<commit_msg>Move playback action up to td for better accessibility<commit_after><template>
    <tr 
        @dblclick.prevent="playRighAwayyyyyyy" 
        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" @click.stop="doPlayback">
            <i class="fa fa-pause-circle" v-show="playbackState === 'playing'"></i>
            <i class="fa fa-play-circle" v-else></i>
        </td>
    </tr>
</template>

<script>
    import $ from 'jquery';
    import playback from '../../services/playback';
    import queueStore from '../../stores/queue';

    export default {
        props: ['song'],

        data() {
            return {
                playbackState: 'stopped',
            };
        },

        methods: {
            /**
             * Play the song right away.
             */
            playRighAwayyyyyyy() {
                if (!queueStore.contains(this.song)) {
                    queueStore.queueAfterCurrent(this.song);
                }
                
                Vue.nextTick(() => playback.play(this.song));
            },

            /**
             * Take the right playback action based on the current playback state.
             */
            doPlayback() {
                switch (this.playbackState) {
                    case 'playing':
                        playback.pause();
                        break;
                    case 'paused':
                        playback.resume();
                        break;
                    default:
                        this.playRighAwayyyyyyy();
                        break;
                }
            },
        },

        events: {
            // Listen to playback events and set playback state.

            'song:played': function (song) {
                this.playbackState = this.song.id === song.id ? 'playing' : 'stopped';
            },

            'song:stopped': function () {
                this.playbackState = 'stopped';
            },

            'song:paused': function (song) {
                if (this.song.id === song.id) {
                    this.playbackState = 'paused';
{'fraction_non_alphanumeric': 0.14768683274021352, 'fraction_numerical': 0.0, 'mean_word_length': 1.3421875, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 6, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4549774', 'n_tokens_mistral': 1300, 'n_tokens_neox': 1180, 'n_words': 248}