MusicFrontend/src/components/items/extraButtons.vue

<template>
    <div class="extraButtonsDiv">
        <button @click="resetPlaylist">Reset playlist</button>
        <button @click="resetPoints">Reset points</button>
        <button @click="handleSyncButtonClick">Sync soundtracks</button>
        <button @click="startSoundTest">Sound test</button>
        <button @click="showSearchModal">Search</button>
        <sync-progress-modal
            :isOpen="showSyncModal"
            :syncInProgress="syncInProgress"
            @close="handleSyncComplete"
        ></sync-progress-modal>
        <search-modal ref="searchModal"></search-modal>
    </div>
</template>

<script>
import SyncProgressModal from "./SyncProgressModal.vue";
import SearchModal from "./SearchModal.vue";

export default {
    components: {
        SyncProgressModal,
        SearchModal,
    },
    data() {
        return {
            emptyPlaylist: [],
            showSyncModal: false,
            syncInProgress: false,
            syncCompleted: false,
        };
    },
    methods: {
        async resetPoints() {
            this.$store.dispatch("resetPlayerScore");
            this.$store.dispatch("resetPlayerWelcomed");
            this.$store.dispatch("resetPlayerMatchPoint");
            this.$store.dispatch("setRoundStarted", false);
        },
        async resetPlaylist() {
            await this.APIresetPlaylist();
            this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
            this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
            this.$store.dispatch("setCurrentTrackHidden", false);
        },
        async startSync() {
            try {
                // Start the sync
                const response = await this.APIsyncSoundtracks();
                // Check if sync was actually started or if one is in progress
                if (response && (response.status === 423 || (response.data && response.data.includes("in progress")))) {
                    // Sync is already in progress - show modal with polling
                    this.syncInProgress = true;
                } else {
                    this.syncInProgress = true;
                }
                // Show the modal which will poll for progress
                this.showSyncModal = true;
            } catch (error) {
                console.error("Failed to start sync:", error);
                // If error is 423, sync is already in progress
                if (error.response && error.response.status === 423) {
                    this.syncInProgress = true;
                    this.showSyncModal = true;
                }
            }
        },
        handleSyncButtonClick() {
            // If we have a completed sync result, just show it
            // Otherwise start a new sync
            if (this.syncCompleted) {
                this.showSyncResults();
            } else {
                this.startSync();
            }
        },
        showSyncResults() {
            // Show modal with existing results (no new sync)
            this.syncInProgress = false;
            this.showSyncModal = true;
        },
        async handleSyncComplete() {
            this.syncInProgress = false;
            this.syncCompleted = true;
            this.showSyncModal = false;
            // Refresh data after sync completes
            await this.APIresetPlaylist();
            this.$store.dispatch("resetPlayerScore");
            this.$store.dispatch("resetPlayerWelcomed");
            this.$store.dispatch("resetPlayerMatchPoint");
            this.$store.dispatch("setRoundStarted", false);
            this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
            this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
            this.$store.dispatch("setCurrentTrackHidden", false);
            this.$store.dispatch("reloadSoundtracksList", true);
        },
        startSoundTest() {
            this.$emit("start-sound-test");
        },
        showSearchModal() {
            this.$refs.searchModal.openModal();
        },
        APIresetPlaylist() {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/reset`,
                })
                    .then(() => {
                        resolve();
                    })
                    .catch(function(error) {
                        console.log(error);
                        reject();
                    });
            });
        },
        APIsyncSoundtracks() {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/sync`,
                })
                    .then((response) => {
                        resolve(response);
                    })
                    .catch(function(error) {
                        console.log(error);
                        reject(error);
                    });
            });
        },
    },
};
</script>

<style scoped>
.extraButtonsDiv {
    display: flex;
    margin-top: 2px;
    margin-left: 10px;
}

button {
    display: flex;
    align-items: center;
    height: 65%;
    margin-right: 0.4vw;
    border-radius: 10px;
    border-width: 1px;
}

@media only screen and (max-width: 1000px) {
    .extraButtonsDiv {
        display: flex;
        position: relative;
        flex-wrap: wrap;
        justify-content: center;
    }

    button {
        width: 51vw;
        height: 40px;
        margin-bottom: 10px;
        justify-content: center;
    }
}
</style>