From 7c920466dd81cf6c65e89e0054388608f4ff3b37 Mon Sep 17 00:00:00 2001
From: Shiny Nematoda <snematoda@noreply.codeberg.org>
Date: Mon, 27 Mar 2023 19:05:33 +0000
Subject: [PATCH] Changes: - Initial support for playlist reordering (#112) -
 Fallback for piped instance api

---
 src/assets/version.json      |  2 +-
 src/components/Playlists.vue | 50 +++++++++++++++++++++++++++++++++---
 src/components/Prefs.vue     | 21 +++++++--------
 3 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/src/assets/version.json b/src/assets/version.json
index ade524e..7c883ce 100644
--- a/src/assets/version.json
+++ b/src/assets/version.json
@@ -1,3 +1,3 @@
 {
-  "date": "2023-03-26"
+  "date": "2023-03-27"
 }
diff --git a/src/components/Playlists.vue b/src/components/Playlists.vue
index 4a76cb3..3911290 100644
--- a/src/components/Playlists.vue
+++ b/src/components/Playlists.vue
@@ -1,22 +1,59 @@
 <script setup>
+import { ref } from 'vue'
+
 import { useData, usePlayer } from '@/stores/player.js';
 import { useI18n } from '@/stores/misc.js';
 
+const emit = defineEmits(['playthis']);
+
 const { t } = useI18n(),
   player = usePlayer(),
   data = useData();
 
-defineEmits(['playthis']);
+const canDrag = ref(false);
+
+let to = undefined;
+
+function isHandle(el) {
+  return el.classList.contains('pl-handle')
+}
+
+function handleClick(e) {
+  if (!isHandle(e.target)) $emit('playthis', plurl)
+}
+
+function setCanDrag(e) {
+  if (isHandle(e.target)) canDrag.value = true
+  else canDrag.value = false
+}
+
+function drag(i, e) {
+  const el = document.querySelector(`.pl-item:nth-child(${i + 1})`),
+  bounds = el.getBoundingClientRect(),
+  diff = e.clientY - bounds.top,
+  min = bounds.height / 2;
+
+  if (diff > min) to = i + 1
+  else if (-diff > min) to = i - 1
+}
+
+function drop(i) {
+  if (to) data.state.urls.splice(to, 0, data.state.urls.splice(i, 1)[0])
+}
 </script>
 
 <template>
   <Transition name="fade">
     <div class="pl-modal placeholder" :data-placeholder="t('playlist.add')">
       <div
-        v-for="plurl in data.state.urls"
+        v-for="(plurl, i) in data.state.urls"
         class="pl-item"
+        :draggable="canDrag"
         :key="plurl.url"
-        @click="$emit('playthis', plurl)">
+        @click="handleClick"
+        @pointerdown="setCanDrag"
+        @dragover.prevent="drag(i, $event)"
+        @dragend="drop(i)">
         <span
           v-if="data.state.url == plurl.url"
           class="bars-wrap"
@@ -33,6 +70,8 @@ defineEmits(['playthis']);
             loading="lazy" />
         </div>
         <span class="pl-main caps">{{ plurl.title }}</span>
+        <span
+          class="bi bi-grip-horizontal pl-handle clickable"></span>
       </div>
     </div>
   </Transition>
@@ -97,4 +136,9 @@ defineEmits(['playthis']);
 .pl-img[data-active='false'] {
   display: none;
 }
+.pl-handle {
+  cursor: pointer;
+  margin-left: auto;
+  margin-right:.75rem;
+}
 </style>
diff --git a/src/components/Prefs.vue b/src/components/Prefs.vue
index 586c921..61f4cf8 100644
--- a/src/components/Prefs.vue
+++ b/src/components/Prefs.vue
@@ -22,10 +22,12 @@ const { t, setupLocale } = useI18n(),
   next = ref(false),
   compact = ref(false);
 
-getJson('https://piped-instances.kavin.rocks').then(i => {
-  instances.value = i;
-  console.log(i);
-});
+getJson('https://piped-instances.kavin.rocks')
+  .then(i => i || getJson('https://instances.tokhmi.xyz'))
+  .then(i => {
+    instances.value = i;
+    console.log(i);
+  });
 
 getJson('https://raw.codeberg.page/Hyperpipe/pages/api/backend.json').then(
   i => {
@@ -43,7 +45,6 @@ function getStore(key) {
 }
 
 function setStore(key, value) {
-  console.log(key, value);
   useStore().setItem(key, value);
 }
 
@@ -67,13 +68,13 @@ function setCodec(codec) {
     window.audioPlayer.configure('preferredAudioCodecs', codec.split(':'));
 }
 
-function getStoreBool(key, ele) {
-  ele.value = getStore(key) || ele.value;
+function getStoreBool(key, ele, def) {
+  ele.value = getStore(key) || def;
 }
 
 const verifyApi = computed(() =>
     hypInstances.value
-      .map(i => i.api_url.replace('https://', '').replace('http://'))
+      .map(i => i.api_url.replace('https://', '').replace('http://', ''))
       .includes(getStore('api') || HYPERPIPE_INSTANCE),
   ),
   verifyPipedApi = computed(() =>
@@ -88,8 +89,8 @@ const verifyApi = computed(() =>
   );
 
 onMounted(() => {
-  getStoreBool('next', next);
-  getStoreBool('compact', compact);
+  getStoreBool('next', next, true);
+  getStoreBool('compact', compact, false);
 });
 </script>