From 17dcd4329018624fa518b821b605110ff948b787 Mon Sep 17 00:00:00 2001
From: Shiny Nematoda <snematoda@noreply.codeberg.org>
Date: Sun, 2 Apr 2023 21:44:04 +0530
Subject: [PATCH] closes #119

---
 src/components/NewPlaylist.vue | 12 +++---------
 src/components/Playlists.vue   | 33 ++++++++++++++++++---------------
 src/components/Prefs.vue       | 21 ++++++++++++++++++---
 src/scripts/dash.js            |  5 ++---
 src/scripts/fetch.js           | 34 +++++++++++++++++++++++-----------
 src/scripts/xml.js             |  4 +---
 6 files changed, 65 insertions(+), 44 deletions(-)

diff --git a/src/components/NewPlaylist.vue b/src/components/NewPlaylist.vue
index a2dd33a..cd39e07 100644
--- a/src/components/NewPlaylist.vue
+++ b/src/components/NewPlaylist.vue
@@ -15,6 +15,7 @@ import {
 } from '@/scripts/db.js';
 
 import {
+  useAuthLogout,
   useAuthCreatePlaylist,
   getAuthPlaylists,
   getJsonAuth,
@@ -134,9 +135,7 @@ const Open = async key => {
             });
           }
         }
-      } else {
-        useCreatePlaylist(i.name, i.urls);
-      }
+      } else useCreatePlaylist(i.name, i.urls);
 
       List();
     }
@@ -206,12 +205,7 @@ const Login = async () => {
     }
   },
   Logout = async () => {
-    const res = await getJsonAuth('/logout', {
-      method: 'POST',
-      headers: {
-        Authorization: store.auth,
-      },
-    });
+    const res = await useAuthLogout();
 
     if (!res.error) {
       store.removeItem('auth');
diff --git a/src/components/Playlists.vue b/src/components/Playlists.vue
index 54b2c04..7710326 100644
--- a/src/components/Playlists.vue
+++ b/src/components/Playlists.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { ref, onMounted } from 'vue'
-import Sortable from 'sortablejs';
+import { ref, onMounted } from 'vue';
+import Sortable from 'sortablejs/modular/sortable.core.esm.js';
 
 import { useData, usePlayer } from '@/stores/player.js';
 import { useI18n } from '@/stores/misc.js';
@@ -13,12 +13,8 @@ const { t } = useI18n(),
 
 const pl = ref(null);
 
-function isHandle(el) {
-  return el.classList.contains('pl-handle')
-}
-
 function handleClick(plurl, e) {
-  if (!isHandle(e.target)) emit('playthis', plurl)
+  if (!e.target.classList.contains('pl-handle')) emit('playthis', plurl);
 }
 
 onMounted(() => {
@@ -26,15 +22,23 @@ onMounted(() => {
     handle: '.pl-handle',
     animation: 150,
     onEnd: e => {
-      data.state.urls.splice(e.newIndex, 0, data.state.urls.splice(e.oldIndex, 1)[0])
-    }
-  })
-})
+      data.state.urls.splice(
+        e.newIndex,
+        0,
+        data.state.urls.splice(e.oldIndex, 1)[0],
+      );
+    },
+  });
+});
 </script>
 
 <template>
   <Transition name="fade">
-    <div id="pl" ref="pl" class="pl-modal placeholder" :data-placeholder="t('playlist.add')">
+    <div
+      id="pl"
+      ref="pl"
+      class="pl-modal placeholder"
+      :data-placeholder="t('playlist.add')">
       <div
         v-for="plurl in data.state.urls"
         class="pl-item"
@@ -56,8 +60,7 @@ onMounted(() => {
             loading="lazy" />
         </div>
         <span class="pl-main caps">{{ plurl.title }}</span>
-        <span
-          class="bi bi-grip-horizontal pl-handle clickable"></span>
+        <span class="bi bi-grip-horizontal pl-handle clickable"></span>
       </div>
     </div>
   </Transition>
@@ -125,6 +128,6 @@ onMounted(() => {
 .pl-handle {
   cursor: grab;
   margin-left: auto;
-  margin-right:.75rem;
+  margin-right: 0.75rem;
 }
 </style>
diff --git a/src/components/Prefs.vue b/src/components/Prefs.vue
index 61f4cf8..082f8cc 100644
--- a/src/components/Prefs.vue
+++ b/src/components/Prefs.vue
@@ -5,6 +5,7 @@ import {
   PIPED_INSTANCE,
   HYPERPIPE_INSTANCE,
   getJson,
+  useAuthLogout,
 } from '@/scripts/fetch.js';
 
 import { useStore } from '@/scripts/util.js';
@@ -17,6 +18,7 @@ import('@/assets/version.json').then(v => {
 });
 
 const { t, setupLocale } = useI18n(),
+  store = useStore(),
   instances = ref([]),
   hypInstances = ref([]),
   next = ref(false),
@@ -41,11 +43,11 @@ function getBool(val) {
 }
 
 function getStore(key) {
-  return useStore().getItem(key);
+  return store.getItem(key);
 }
 
 function setStore(key, value) {
-  useStore().setItem(key, value);
+  store.setItem(key, value);
 }
 
 function getTheme() {
@@ -72,6 +74,19 @@ function getStoreBool(key, ele, def) {
   ele.value = getStore(key) || def;
 }
 
+async function setAuth(key) {
+  if (getStore('authapi')) {
+    if (!confirm('This requires a logout. Confirm logout?')) return;
+
+    const res = await useAuthLogout();
+
+    if (res?.error) if (!confirm(`Got Error: ${res.error}. Continue?`)) return;
+  }
+
+  store.removeItem('auth');
+  setStore('authapi', key);
+}
+
 const verifyApi = computed(() =>
     hypInstances.value
       .map(i => i.api_url.replace('https://', '').replace('http://', ''))
@@ -271,7 +286,7 @@ onMounted(() => {
     v-if="instances"
     class="input"
     :value="getStore('authapi') || PIPED_INSTANCE"
-    @change="setStore('authapi', $event.target.value)">
+    @change="setAuth($event.target.value)">
     <option
       v-for="i in instances"
       :key="i.name"
diff --git a/src/scripts/dash.js b/src/scripts/dash.js
index cbcbec3..ce09eb6 100644
--- a/src/scripts/dash.js
+++ b/src/scripts/dash.js
@@ -8,9 +8,8 @@ export function useDash(streams, len) {
   streams.forEach(stream => {
     const i = mimeTypes.indexOf(stream.mimeType);
 
-    if (i > -1) {
-      mimes[i].push(stream);
-    } else {
+    if (i > -1) mimes[i].push(stream);
+    else {
       mimeTypes.push(stream.mimeType);
       mimes.push([]);
       mimes[mimeTypes.length - 1].push(stream);
diff --git a/src/scripts/fetch.js b/src/scripts/fetch.js
index 244fb57..2149b9c 100644
--- a/src/scripts/fetch.js
+++ b/src/scripts/fetch.js
@@ -29,9 +29,7 @@ export async function getJson(url, opts) {
         : res.error,
     );
     console.error(res.message);
-  } else if (res) {
-    return JSON.parse(useSanitize(JSON.stringify(res)));
-  }
+  } else if (res) return JSON.parse(useSanitize(JSON.stringify(res)));
 }
 
 export async function getJsonPiped(path, opts) {
@@ -59,10 +57,14 @@ export async function getJsonAuth(path, opts = {}) {
     });
 }
 
-export async function useAuthCreatePlaylist(name) {
-  const auth = useStore().getItem('auth');
+function useAuthToken() {
+  return useStore().getItem('auth');
+}
 
-  if (auth && name) {
+export async function useAuthCreatePlaylist(name) {
+  const auth = useAuthToken();
+
+  if (auth && name)
     return await getJsonAuth('/user/playlists/create', {
       method: 'POST',
       body: JSON.stringify({
@@ -73,11 +75,10 @@ export async function useAuthCreatePlaylist(name) {
         'Content-Type': 'application/json',
       },
     });
-  }
 }
 
 export async function getAuthPlaylists() {
-  const auth = useStore().getItem('auth');
+  const auth = useAuthToken();
 
   if (auth) {
     const res = await getJsonAuth('/user/playlists', {
@@ -91,9 +92,9 @@ export async function getAuthPlaylists() {
 }
 
 export async function useAuthAddToPlaylist(id, path) {
-  const auth = useStore().getItem('auth');
+  const auth = useAuthToken();
 
-  if (auth && id && path) {
+  if (auth && id && path)
     return getJsonAuth('/user/playlists/add', {
       method: 'POST',
       headers: {
@@ -104,5 +105,16 @@ export async function useAuthAddToPlaylist(id, path) {
         videoId: new URL('https://example.com' + path).searchParams.get('v'),
       }),
     });
-  }
+}
+
+export async function useAuthLogout() {
+  const auth = useAuthToken();
+
+  if (auth)
+    return await getJsonAuth('/logout', {
+      method: 'POST',
+      headers: {
+        Authorization: store.auth,
+      },
+    });
 }
diff --git a/src/scripts/xml.js b/src/scripts/xml.js
index 01f8ab3..8c4eb84 100644
--- a/src/scripts/xml.js
+++ b/src/scripts/xml.js
@@ -53,10 +53,8 @@ export function useXML(json) {
   base += '<?xml';
   base += useAttr(json.declaration.attributes);
   base += '?>';
-
+    
   base += useElems(json.elements);
 
-  console.log(base);
-
   return base;
 }