<commit_before><template>
    <tr
        @dblclick.prevent="playRightAwayyyyyyy"
        class="song-item"
        :class="{ selected: selected, playing: song.playbackState === 'playing' || song.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="song.playbackState === 'playing'"></i>
            <i class="fa fa-play-circle" v-else></i>
        </td>
    </tr>
</template>

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

    export default {
        props: ['song'],

        data() {
            return {
                selected: false,
            };
        },

        methods: {
            /**
             * Play the song right away.
             */
            playRightAwayyyyyyy() {
                if (!queueStore.contains(this.song)) {
                    queueStore.queueAfterCurrent(this.song);
                }

                playback.play(this.song);
            },

            /**
             * 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:
                        this.playRightAwayyyyyyy();
                        break;
                }
            },

            /**
             * 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() {
                this.selected = true;
            },

            /**
             * Deselect the current component.
             */
            deselect() {
                this.selected = false;
            },
        },
    };
</script>

<style lang="sass">
    @import "../../../sass/partials/_vars.scss";
    @import "../../../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>
<commit_msg>each song item can now be used to navigate to its artist or album view<commit_after><template>
    <tr
        @dblclick.prevent="playRightAwayyyyyyy"
        class="song-item"
        :class="{ selected: selected, playing: song.playbackState === 'playing' || song.playbackState === 'paused' }"
    >
        <td class="title">{{ song.title }}</td>
        <td class="artist"><a @click.prevent="viewArtistDetails">{{ song.album.artist.name }}</a></td>
        <td class="album"><a @click.prevent="viewAlbumDetails">{{ song.album.name }}</a></td>
        <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>
        </td>
    </tr>
</template>

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

    export default {
        props: ['song'],

        data() {
            return {
                selected: false,
            };
        },

        methods: {
            /**
             * Play the song right away.
             */
            playRightAwayyyyyyy() {
                if (!queueStore.contains(this.song)) {
                    queueStore.queueAfterCurrent(this.song);
                }

                playback.play(this.song);
            },

            /**
             * 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:
                        this.playRightAwayyyyyyy();
                        break;
                }
            },

            /**
             * 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() {
                this.selected = true;
            },

            /**
             * Deselect the current component.
             */
            deselect() {
                this.selected = false;
            },

            /**
             * Load the album details screen.
             */
            viewAlbumDetails() {
                this.$root.loadAlbum(this.song.album);
            },

            /**
             * Load the artist details screen.
             */
            viewArtistDetails() {
                this.$root.loadArtist(this.song.artist);
            },
        },
    };
</script>

<style lang="sass">
    @import "../../../sass/partials/_vars.scss";
    @import "../../../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>

{'fraction_non_alphanumeric': 0.13458110516934046, 'fraction_numerical': 0.010101010101010102, 'mean_word_length': 1.124644998422215, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 51, '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': '7144974', 'n_tokens_mistral': 1928, 'n_tokens_neox': 1750, 'n_words': 372}