From 46fa36e1fcb25d10a687661a9181b014d5dcd893 Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@outlook.com>
Date: Sat, 6 Jul 2024 16:53:00 +0000
Subject: [PATCH] Add PlayerSettingsModal component

Includes a toggle switch for enabling/disabling the chapter track feature.
---
 .../components/modals/PlayerSettingsModal.vue | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 client/components/modals/PlayerSettingsModal.vue

diff --git a/client/components/modals/PlayerSettingsModal.vue b/client/components/modals/PlayerSettingsModal.vue
new file mode 100644
index 000000000..5b3ece502
--- /dev/null
+++ b/client/components/modals/PlayerSettingsModal.vue
@@ -0,0 +1,42 @@
+<template>
+  <modals-modal v-model="show" name="player-settings" :width="500" :height="'unset'">
+    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-4" style="max-height: 80vh">
+      <h3 class="text-xl font-semibold mb-4">Player Settings</h3>
+      <div class="flex items-center">
+        <ui-toggle-switch v-model="useChapterTrack" @input="setUseChapterTrack" />
+        <div class="pl-4"><span>Use Chapter Track</span></div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean
+  },
+  data() {
+    return {
+      useChapterTrack: false
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    setUseChapterTrack(val) {
+      this.$store.dispatch('user/updateUserSettings', { useChapterTrack: this.useChapterTrack })
+    }
+  },
+  mounted() {
+    this.useChapterTrack = this.$store.state.user.settings.useChapterTrack
+  }
+}
+</script>
\ No newline at end of file