Add settings page

src/router/index.ts

@@ -6,6 +6,7 @@ const HomepageView = () => import('../views/HomepageView.vue')
 const CategoryView = () => import('../views/CategoryView.vue')
 const SearchPageView = () => import('../views/SearchPageView.vue')
 const VodView = () => import('../views/VodView.vue')
+const SettingsView = () => import('../views/SettingsView.vue')
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -35,6 +36,10 @@ const router = createRouter({
       path: '/:username',
       component: UserView
     },
+    {
+      path: '/settings',
+      component: SettingsView
+    },
     {
       path: '/videos/:vodID',
       component: VodView

src/views/SettingsView.vue

@@ -0,0 +1,86 @@
+<script lang="ts">
+export default {
+    setup() {
+        let settings
+
+        let storedSettings = localStorage.getItem("settings")
+        if (storedSettings === null) {
+            settings = {
+                "audioOnly": {
+                    "name": "Audio Only",
+                    "selected": false,
+                    "type": "checkbox"
+                },
+                "defaultQuality": {
+                    "name": "Default Quality",
+                    "options": ["160p", "360p", "480p", "720p", "1080p"],
+                    "selected": "480p",
+                    "type": "option"
+                },
+            }
+        } else {
+            settings = JSON.parse(storedSettings)
+        }
+
+        return {
+            settings
+        }
+    },
+    methods: {
+        save() {
+            const settings = JSON.stringify(this.settings)
+            localStorage.setItem('settings', settings)
+        },
+    //     download() {
+    //         var hiddenElement = document.createElement('a');
+
+    //         hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(this.settings));
+    //         hiddenElement.target = '_blank';
+    //         hiddenElement.download = 'safetwitch_prefs.json';
+    //         hiddenElement.click();
+    //     },
+    //     async handleImport(event: any) {
+    //         const file = await event.target.files[0].text()
+    //         const parsed = JSON.parse(file)
+
+    //         if (parsed.audioOnly == undefined) {
+    //             return
+    //         }
+
+    //         this.settings = file
+    //         this.save()
+    //     },
+        }
+    }
+</script>
+
+<template>
+    <div class="mx-auto w-[35rem] p-5 py-3 bg-ctp-crust rounded-md text-white">
+        <h1 class="font-bold text-3xl">Settings</h1>
+        <hr class="my-2">
+        <ul class="w-full space-y-1">
+            <li v-for="setting in settings">
+                <div v-if="setting.type == 'checkbox'" class="justify-between items-center flex">
+                    <label :for="setting.name">{{ setting.name }}</label>
+                    <input :name="setting.name" type="checkbox" v-model="setting.selected">
+                </div>
+
+                <div v-else-if="setting.type == 'option'" class="justify-between items-center flex">
+                    <label :for="setting.name">{{ setting.name }}</label>
+                    <select :name="setting.name" type="checkbox" v-model="setting.selected"
+                        class="text-black rounded-md h-8 p-0 pr-8 pl-2">
+                        <option v-for="option of setting.options" :value="option">
+                            {{ option }}
+                        </option>
+                    </select>
+                </div>
+            </li>
+        </ul>
+
+        <div class="space-x-2 mt-3">
+            <button @click="save" class="bg-ctp-surface0 p-4 py-2 rounded-md">Save</button>
+            <!-- <button @click="download" class="bg-ctp-surface0 p-4 py-2 rounded-md">Export</button>
+            <input type="file" @change="handleImport" name="fileinput" ref="fileinput"
+                class="bg-ctp-surface0 p-4 py-2 rounded-md"> -->
+        </div>
+</div></template>