123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- <script setup lang="ts">
- import { defineAsyncComponent, ref, onMounted } from "vue";
- import Toast from "toasters";
- import { storeToRefs } from "pinia";
- import { useWebsocketsStore } from "@/stores/websockets";
- import { useUserPreferencesStore } from "@/stores/userPreferences";
- const SaveButton = defineAsyncComponent(
- () => import("@/components/SaveButton.vue")
- );
- const { socket } = useWebsocketsStore();
- const userPreferencesStore = useUserPreferencesStore();
- const saveButton = ref();
- const localNightmode = ref(false);
- const localAutoSkipDisliked = ref(false);
- const localActivityLogPublic = ref(false);
- const localAnonymousSongRequests = ref(false);
- const localActivityWatch = ref(false);
- const {
- nightmode,
- autoSkipDisliked,
- activityLogPublic,
- anonymousSongRequests,
- activityWatch
- } = storeToRefs(userPreferencesStore);
- const saveChanges = () => {
- if (
- localNightmode.value === nightmode.value &&
- localAutoSkipDisliked.value === autoSkipDisliked.value &&
- localActivityLogPublic.value === activityLogPublic.value &&
- localAnonymousSongRequests.value === anonymousSongRequests.value &&
- localActivityWatch.value === activityWatch.value
- ) {
- new Toast("Please make a change before saving.");
- return saveButton.value.handleFailedSave();
- }
- saveButton.value.status = "disabled";
- return socket.dispatch(
- "users.updatePreferences",
- {
- nightmode: localNightmode.value,
- autoSkipDisliked: localAutoSkipDisliked.value,
- activityLogPublic: localActivityLogPublic.value,
- anonymousSongRequests: localAnonymousSongRequests.value,
- activityWatch: localActivityWatch.value
- },
- res => {
- if (res.status !== "success") {
- new Toast(res.message);
- return saveButton.value.handleFailedSave();
- }
- new Toast("Successfully updated preferences");
- return saveButton.value.handleSuccessfulSave();
- }
- );
- };
- onMounted(() => {
- socket.onConnect(() => {
- socket.dispatch("users.getPreferences", res => {
- const { preferences } = res.data;
- if (res.status === "success") {
- localNightmode.value = preferences.nightmode;
- localAutoSkipDisliked.value = preferences.autoSkipDisliked;
- localActivityLogPublic.value = preferences.activityLogPublic;
- localAnonymousSongRequests.value =
- preferences.anonymousSongRequests;
- localActivityWatch.value = preferences.activityWatch;
- }
- });
- });
- socket.on("keep.event:user.preferences.updated", res => {
- const { preferences } = res.data;
- if (preferences.nightmode !== undefined)
- localNightmode.value = preferences.nightmode;
- if (preferences.autoSkipDisliked !== undefined)
- localAutoSkipDisliked.value = preferences.autoSkipDisliked;
- if (preferences.activityLogPublic !== undefined)
- localActivityLogPublic.value = preferences.activityLogPublic;
- if (preferences.anonymousSongRequests !== undefined)
- localAnonymousSongRequests.value =
- preferences.anonymousSongRequests;
- if (preferences.activityWatch !== undefined)
- localActivityWatch.value = preferences.activityWatch;
- });
- });
- </script>
- <template>
- <div class="content preferences-tab">
- <h4 class="section-title">Change preferences</h4>
- <p class="section-description">Tailor these settings to your liking</p>
- <hr class="section-horizontal-rule" />
- <p class="control is-expanded checkbox-control">
- <label class="switch">
- <input
- type="checkbox"
- id="nightmode"
- v-model="localNightmode"
- />
- <span class="slider round"></span>
- </label>
- <label for="nightmode">
- <p>Use nightmode</p>
- </label>
- </p>
- <p class="control is-expanded checkbox-control">
- <label class="switch">
- <input
- type="checkbox"
- id="autoSkipDisliked"
- v-model="localAutoSkipDisliked"
- />
- <span class="slider round"></span>
- </label>
- <label for="autoSkipDisliked">
- <p>Automatically vote to skip disliked songs</p>
- </label>
- </p>
- <p class="control is-expanded checkbox-control">
- <label class="switch">
- <input
- type="checkbox"
- id="activityLogPublic"
- v-model="localActivityLogPublic"
- />
- <span class="slider round"></span>
- </label>
- <label for="activityLogPublic">
- <p>Allow my activity log to be viewed publicly</p>
- </label>
- </p>
- <p class="control is-expanded checkbox-control">
- <label class="switch">
- <input
- type="checkbox"
- id="anonymousSongRequests"
- v-model="localAnonymousSongRequests"
- />
- <span class="slider round"></span>
- </label>
- <label for="anonymousSongRequests">
- <span></span>
- <p>Request songs anonymously</p>
- </label>
- </p>
- <p class="control is-expanded checkbox-control">
- <label class="switch">
- <input
- type="checkbox"
- id="activityWatch"
- v-model="localActivityWatch"
- />
- <span class="slider round"></span>
- </label>
- <label for="activityWatch">
- <span></span>
- <p>Use ActivityWatch integration (requires extension)</p>
- </label>
- </p>
- <SaveButton ref="saveButton" @clicked="saveChanges()" />
- </div>
- </template>
|