From 351ef51c171aa1864585614699e6d18599fdae43 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 9 Sep 2022 16:46:58 +0200
Subject: [PATCH 01/56] added Play-all button to list view

---
 .../detailViewComponents/subcomponents/MetaDataPanel.vue  | 2 +-
 src/components/searchViewComponents/AudioList.vue         | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue b/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
index d24bc843..5f60dd12 100644
--- a/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
+++ b/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
@@ -34,7 +34,7 @@ const fileWidth = (file) =>
 const fileHeight = (file) =>
   file.metadata?.metadata?.height ||
   file.metadata?.metadata?.["Image Height"] ||
-  file.metadata?.metadata?.["tiff:ImageHeight"];
+  file.metadata?.metadata?.["tiff:ImageLength"];
 </script>
 
 <template>
diff --git a/src/components/searchViewComponents/AudioList.vue b/src/components/searchViewComponents/AudioList.vue
index de715672..a9b594ba 100644
--- a/src/components/searchViewComponents/AudioList.vue
+++ b/src/components/searchViewComponents/AudioList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { mdiMusic } from "@mdi/js";
+import { mdiMusic, mdiPlaylistMusic } from "@mdi/js";
 import { useDisplay } from "vuetify";
 import ListBase from "./BaseList.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
@@ -19,6 +19,12 @@ const { slicedHits } = useFileListComposable({ fileType });
 pageHits.value.slice(0,
 <template>
   <ListBase :file-type="fileType">
+    <v-btn rounded="pill" color="ipfsPrimary">
+      Play all
+      <template #prepend>
+        <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />
+      </template>
+    </v-btn>
     <v-col cols="12" xl="8" offset-xl="2">
       <v-row dense>
         <v-col

From 30b74b78720db873c8b53bd9764ce2fc4e85c769 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 9 Sep 2022 17:14:43 +0200
Subject: [PATCH 02/56] added playlist store and fill store when click Play all
 button

---
 .../searchViewComponents/AudioList.vue         |  8 ++++++--
 src/store/index.js                             |  2 ++
 src/store/modules/playlist.js                  | 18 ++++++++++++++++++
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/store/modules/playlist.js

diff --git a/src/components/searchViewComponents/AudioList.vue b/src/components/searchViewComponents/AudioList.vue
index a9b594ba..24c4527d 100644
--- a/src/components/searchViewComponents/AudioList.vue
+++ b/src/components/searchViewComponents/AudioList.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { mdiMusic, mdiPlaylistMusic } from "@mdi/js";
+import { useStore } from "vuex";
 import { useDisplay } from "vuetify";
 import ListBase from "./BaseList.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
@@ -9,17 +10,20 @@ import { Types } from "@/helpers/typeHelper";
 import { picsum } from "@/helpers/picsum";
 import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
 
+const store = useStore();
 const { xs, smAndDown, mdAndDown } = useDisplay();
 const { durationToColor, mime, prettyBytes } = imports;
 const fileType = Types.audio;
 
-const { slicedHits } = useFileListComposable({ fileType });
+const { slicedHits, pageHits } = useFileListComposable({ fileType });
+console.log(pageHits);
+const playAll = () => store.commit("playlist/setPlaylist", { entries: pageHits });
 </script>
 
 pageHits.value.slice(0,
 <template>
   <ListBase :file-type="fileType">
-    <v-btn rounded="pill" color="ipfsPrimary">
+    <v-btn rounded="pill" color="ipfsPrimary" @click="playAll">
       Play all
       <template #prepend>
         <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />
diff --git a/src/store/index.js b/src/store/index.js
index d888a479..be3e31bc 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,12 +1,14 @@
 import { createStore } from "vuex";
 import localStorage from "@/store/modules/localStorage";
 import { Types } from "@/helpers/typeHelper";
+import playlist from "./modules/playlist.js";
 import query from "./modules/query";
 import SearchResults from "./modules/SearchResults";
 
 export default createStore({
   modules: {
     localStorage,
+    playlist,
     query,
     // TODO: Rename 'results' to 'search' to cleanup weird results.results.
     results: {
diff --git a/src/store/modules/playlist.js b/src/store/modules/playlist.js
new file mode 100644
index 00000000..2a1d4734
--- /dev/null
+++ b/src/store/modules/playlist.js
@@ -0,0 +1,18 @@
+export default {
+  namespaced: true,
+  state: {
+    playlists: [],
+  },
+  mutations: {
+    setPlaylist(state, { entries }) {
+      state.playlists[0] = {
+        entries,
+      };
+    },
+  },
+  getters: {
+    getPlaylist(state) {
+      return state.playlists[0];
+    },
+  },
+};

From 0c34143f1d3b2e0b72c080f6d3ebf0101fe6aea2 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Mon, 12 Sep 2022 15:01:08 +0200
Subject: [PATCH 03/56] cast playlist to localStorage and recover from
 localStorage. move to TS for vuex

---
 .../searchViewComponents/AudioList.vue        |  3 +--
 src/interfaces/IFile.ts                       | 23 ++++++++++++++++
 src/interfaces/IPlaylist.ts                   |  5 ++++
 src/store/index.js                            |  2 +-
 src/store/modules/localStorage.js             | 22 +++++++++++-----
 src/store/modules/playlist.js                 | 18 -------------
 src/store/modules/playlist.ts                 | 26 +++++++++++++++++++
 7 files changed, 71 insertions(+), 28 deletions(-)
 create mode 100644 src/interfaces/IFile.ts
 create mode 100644 src/interfaces/IPlaylist.ts
 delete mode 100644 src/store/modules/playlist.js
 create mode 100644 src/store/modules/playlist.ts

diff --git a/src/components/searchViewComponents/AudioList.vue b/src/components/searchViewComponents/AudioList.vue
index 24c4527d..5f750d9c 100644
--- a/src/components/searchViewComponents/AudioList.vue
+++ b/src/components/searchViewComponents/AudioList.vue
@@ -16,8 +16,7 @@ const { durationToColor, mime, prettyBytes } = imports;
 const fileType = Types.audio;
 
 const { slicedHits, pageHits } = useFileListComposable({ fileType });
-console.log(pageHits);
-const playAll = () => store.commit("playlist/setPlaylist", { entries: pageHits });
+const playAll = () => store.commit("playlist/setPlaylist", { entries: pageHits.value });
 </script>
 
 pageHits.value.slice(0,
diff --git a/src/interfaces/IFile.ts b/src/interfaces/IFile.ts
new file mode 100644
index 00000000..123b1b44
--- /dev/null
+++ b/src/interfaces/IFile.ts
@@ -0,0 +1,23 @@
+export interface IReference {
+  name: string;
+  parent_hash: string;
+}
+export interface IFileMetadata {
+  ipfs_tika_version: string;
+  language?: {
+    confidence: string;
+    language: string;
+    rawScore: number;
+  };
+  metadata?: object;
+}
+export interface IFile {
+  hash: string;
+  "first-seen": string;
+  "last-seen": string;
+  title?: string;
+  size?: number;
+  mimetype?: string;
+  references: IReference[] | null;
+  metadata?: IFileMetadata;
+}
diff --git a/src/interfaces/IPlaylist.ts b/src/interfaces/IPlaylist.ts
new file mode 100644
index 00000000..f7a0e0c0
--- /dev/null
+++ b/src/interfaces/IPlaylist.ts
@@ -0,0 +1,5 @@
+import { IFile } from "./IFile";
+
+export interface IPlaylist {
+  entries: IFile[];
+}
diff --git a/src/store/index.js b/src/store/index.js
index be3e31bc..74ba4a1c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,7 +1,7 @@
 import { createStore } from "vuex";
 import localStorage from "@/store/modules/localStorage";
 import { Types } from "@/helpers/typeHelper";
-import playlist from "./modules/playlist.js";
+import playlist from "./modules/playlist";
 import query from "./modules/query";
 import SearchResults from "./modules/SearchResults";
 
diff --git a/src/store/modules/localStorage.js b/src/store/modules/localStorage.js
index 3101730f..6572daec 100644
--- a/src/store/modules/localStorage.js
+++ b/src/store/modules/localStorage.js
@@ -8,10 +8,14 @@ const fields = [
     defaultValue: true,
   },
   {
+    // TODO: refactor darkmode
     field: "darkMode",
-    // TODO: add third option for: system settings
     defaultValue: window.matchMedia("(prefers-color-scheme: dark)").matches,
   },
+  {
+    field: "playlist",
+    defaultValue: { entries: [] },
+  },
 ];
 
 const pascalize = (s) => s[0].toUpperCase() + s.slice(1);
@@ -19,18 +23,22 @@ const pascalize = (s) => s[0].toUpperCase() + s.slice(1);
 export default {
   namespaced: true,
   state: Object.fromEntries(
-    fields.map(({ field, defaultValue }) => [
-      field,
-      // N.b. to make more types possible than boolean alone, some magic needs to be done here.
-      defaultValue ? localStorage[field] !== "false" : localStorage[field] === "true",
-    ])
+    fields.map(({ field, defaultValue }) => {
+      try {
+        return [field, JSON.parse(localStorage[field] ?? null) ?? defaultValue];
+      } catch (error) {
+        console.error("wrong value in localStorage", error);
+        localStorage[field] = defaultValue;
+        return [field, defaultValue];
+      }
+    })
   ),
   mutations: Object.fromEntries(
     fields.map(({ field }) => [
       `set${pascalize(field)}`,
       (state, value) => {
         state[field] = value;
-        localStorage[field] = value;
+        localStorage[field] = JSON.stringify(value);
       },
     ])
   ),
diff --git a/src/store/modules/playlist.js b/src/store/modules/playlist.js
deleted file mode 100644
index 2a1d4734..00000000
--- a/src/store/modules/playlist.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export default {
-  namespaced: true,
-  state: {
-    playlists: [],
-  },
-  mutations: {
-    setPlaylist(state, { entries }) {
-      state.playlists[0] = {
-        entries,
-      };
-    },
-  },
-  getters: {
-    getPlaylist(state) {
-      return state.playlists[0];
-    },
-  },
-};
diff --git a/src/store/modules/playlist.ts b/src/store/modules/playlist.ts
new file mode 100644
index 00000000..d21b2e18
--- /dev/null
+++ b/src/store/modules/playlist.ts
@@ -0,0 +1,26 @@
+import { StoreOptions } from "vuex";
+import { IPlaylist } from "../../interfaces/IPlaylist";
+
+export interface IPlaylistStoreState {
+  // Currently we use 1 playlist; playlists[0]
+  playlists: IPlaylist[];
+}
+
+// Can not use explicit type, it messes with cross-module calls
+export default <StoreOptions<any>>{
+  namespaced: true,
+  state: {
+    playlists: [],
+  },
+  mutations: {
+    setPlaylist(state, playlist: IPlaylist): void {
+      state.playlists[0] = playlist;
+      this.commit("localStorage/setPlaylist", state.playlists[0]);
+    },
+  },
+  getters: {
+    getPlaylist(state, getters, rootState) {
+      return state.playlists?.[0] ?? rootState.localStorage.playlist;
+    },
+  },
+};

From a09615b925721af61f92a0e6930ae814beea6470 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Mon, 12 Sep 2022 16:24:52 +0200
Subject: [PATCH 04/56] add playlist view; remove obsolete code from
 searchFilterMenu

---
 src/components/pageLayout/AppHeader.vue                  | 9 ++++++++-
 src/components/pageLayout/PlaylistPanel.vue              | 7 +++++++
 .../subcomponents/SearchFilterMenu.vue                   | 5 -----
 src/store/modules/localStorage.js                        | 2 +-
 4 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 src/components/pageLayout/PlaylistPanel.vue

diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 0ac1f0ca..10594ec3 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -4,8 +4,11 @@ import SettingsMenu from "@/components/pageLayout/SettingsMenu.vue";
 import { computed } from "vue";
 import { useRoute } from "vue-router";
 const route = useRoute();
+import { useStore } from "vuex";
+const store = useStore();
+
+import { mdiClose, mdiMusic } from "@mdi/js";
 
-import { mdiClose } from "@mdi/js";
 import { useDisplay } from "vuetify";
 const { mdAndUp } = useDisplay();
 
@@ -55,6 +58,10 @@ const whiteLogo = computed(() => theme.current.value.dark || route.name === "Sea
           <div v-if="route.name === 'Search'" class="d-none d-lg-block" style="min-width: 200px" />
           <v-spacer v-else />
 
+          <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylistView">
+            <v-icon :icon="mdiMusic" />
+          </v-btn>
+
           <settings-menu />
 
           <hyperlink
diff --git a/src/components/pageLayout/PlaylistPanel.vue b/src/components/pageLayout/PlaylistPanel.vue
new file mode 100644
index 00000000..51771cd9
--- /dev/null
+++ b/src/components/pageLayout/PlaylistPanel.vue
@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+  <v-container>
+    <v-list></v-list>
+  </v-container>
+</template>
diff --git a/src/components/searchViewComponents/subcomponents/SearchFilterMenu.vue b/src/components/searchViewComponents/subcomponents/SearchFilterMenu.vue
index 1952a968..bf86fc67 100644
--- a/src/components/searchViewComponents/subcomponents/SearchFilterMenu.vue
+++ b/src/components/searchViewComponents/subcomponents/SearchFilterMenu.vue
@@ -20,11 +20,6 @@ import SearchFilters from "@/components/searchViewComponents/subcomponents/Searc
 
 export default {
   components: { SearchFilters },
-  computed: {
-    filters() {
-      return this.$store.getters["query/filters/filterWidgets"];
-    },
-  },
 };
 </script>
 
diff --git a/src/store/modules/localStorage.js b/src/store/modules/localStorage.js
index 6572daec..274fe506 100644
--- a/src/store/modules/localStorage.js
+++ b/src/store/modules/localStorage.js
@@ -14,7 +14,7 @@ const fields = [
   },
   {
     field: "playlist",
-    defaultValue: { entries: [] },
+    defaultValue: undefined,
   },
 ];
 

From 46cf53f520a0957be69d9c27d381ba5eb8ddd71a Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Mon, 12 Sep 2022 19:41:09 +0200
Subject: [PATCH 05/56] add music icon to app bar. Add enqueue function

---
 src/App.vue                                   |  1 +
 src/components/pageLayout/AppHeader.vue       |  5 +++-
 src/components/pageLayout/PlaylistPanel.vue   | 14 +++++++--
 .../searchViewComponents/AudioList.vue        | 17 +++--------
 .../searchViewComponents/BaseList.vue         | 30 +++++++++++++++----
 src/composables/audioControls.js              |  1 +
 src/composables/playlistComposable.ts         |  9 ++++++
 src/store/modules/playlist.ts                 | 19 ++++++++++--
 8 files changed, 72 insertions(+), 24 deletions(-)
 create mode 100644 src/composables/playlistComposable.ts

diff --git a/src/App.vue b/src/App.vue
index 8df9d0cf..4f5e3474 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@ const route = useRoute();
 
 import { playerActive } from "@/composables/audioControls";
 </script>
+
 <template>
   <v-app dark hidden class="overflow-hidden">
     <app-header v-if="route.name !== 'Home'" />
diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 10594ec3..7255cbf5 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -17,6 +17,9 @@ import Hyperlink from "@/components/shared/HyperLink.vue";
 const theme = useTheme();
 
 const whiteLogo = computed(() => theme.current.value.dark || route.name === "Search");
+
+import { usePlaylist } from "@/composables/playlistComposable";
+const { togglePlaylist } = usePlaylist();
 </script>
 
 <template>
@@ -58,7 +61,7 @@ const whiteLogo = computed(() => theme.current.value.dark || route.name === "Sea
           <div v-if="route.name === 'Search'" class="d-none d-lg-block" style="min-width: 200px" />
           <v-spacer v-else />
 
-          <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylistView">
+          <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylist">
             <v-icon :icon="mdiMusic" />
           </v-btn>
 
diff --git a/src/components/pageLayout/PlaylistPanel.vue b/src/components/pageLayout/PlaylistPanel.vue
index 51771cd9..4f432074 100644
--- a/src/components/pageLayout/PlaylistPanel.vue
+++ b/src/components/pageLayout/PlaylistPanel.vue
@@ -1,7 +1,17 @@
-<script setup></script>
+<script setup>
+import { useStore } from "vuex";
+const store = useStore();
+</script>
 
 <template>
   <v-container>
-    <v-list></v-list>
+    <v-list>
+      <v-list-item
+        v-for="entry in store.getters('playlist/getPlaylist')?.entries"
+        :key="entry.hash"
+      >
+        <v-list-item-title>{{ entry.title }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
   </v-container>
 </template>
diff --git a/src/components/searchViewComponents/AudioList.vue b/src/components/searchViewComponents/AudioList.vue
index 5f750d9c..506a4df4 100644
--- a/src/components/searchViewComponents/AudioList.vue
+++ b/src/components/searchViewComponents/AudioList.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { mdiMusic, mdiPlaylistMusic } from "@mdi/js";
-import { useStore } from "vuex";
+import { mdiMusic } from "@mdi/js";
 import { useDisplay } from "vuetify";
 import ListBase from "./BaseList.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
@@ -10,30 +9,22 @@ import { Types } from "@/helpers/typeHelper";
 import { picsum } from "@/helpers/picsum";
 import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
 
-const store = useStore();
 const { xs, smAndDown, mdAndDown } = useDisplay();
 const { durationToColor, mime, prettyBytes } = imports;
 const fileType = Types.audio;
 
-const { slicedHits, pageHits } = useFileListComposable({ fileType });
-const playAll = () => store.commit("playlist/setPlaylist", { entries: pageHits.value });
+const { slicedHits } = useFileListComposable({ fileType });
 </script>
 
 pageHits.value.slice(0,
 <template>
   <ListBase :file-type="fileType">
-    <v-btn rounded="pill" color="ipfsPrimary" @click="playAll">
-      Play all
-      <template #prepend>
-        <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />
-      </template>
-    </v-btn>
-    <v-col cols="12" xl="8" offset-xl="2">
+    <v-col cols="10" offset-xl="2">
       <v-row dense>
         <v-col
           v-for="(hit, index) in slicedHits(xs ? 2 : smAndDown ? 6 : mdAndDown ? 8 : 12)"
           :key="index"
-          cols="6"
+          cols="5"
           xs="4"
           sm="4"
           md="3"
diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index 2e94d837..2b722d5f 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -1,15 +1,17 @@
 <script setup>
+import { mdiPlaylistMusic } from "@mdi/js";
 import CardContent from "@/components/searchViewComponents/subcomponents/genericCardContent.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
-import { TypeListNames } from "@/helpers/typeHelper";
+import { Types, TypeListNames } from "@/helpers/typeHelper";
 import { useFileListComposable } from "@/composables/useFileListComposable";
 import { computed, onBeforeMount } from "vue";
 import { onBeforeRouteUpdate, useRoute } from "vue-router";
 import Hyperlink from "@/components/shared/HyperLink.vue";
 import { enterSearchQuery } from "@/router";
-import store from "@/store";
 import { batchSize, maxPages } from "@/helpers/ApiHelper";
 import { useDisplay } from "vuetify";
+import { useStore } from "vuex";
+const store = useStore();
 
 const infiniteScrollMargin = 200;
 const route = useRoute();
@@ -22,7 +24,11 @@ const props = defineProps({
   },
 });
 
-const { anyFileType, loading, loadedPages, infinite, slicedHits } = useFileListComposable(props);
+const { anyFileType, loading, loadedPages, infinite, slicedHits, pageHits } =
+  useFileListComposable(props);
+
+const playAll = () => store.commit("playlist/setPlaylist", { entries: pageHits.value });
+const enqueueAll = () => store.commit("playlist/enqueue", pageHits.value);
 
 const error = computed(() => {
   const error = store.getters[`results/${props.fileType}/error`];
@@ -129,8 +135,22 @@ const queryPage = computed({
       <v-col cols="12" xl="8" offset-xl="2">
         <v-card flat>
           <div class="justify-space-between d-flex flex-row">
-            <v-card-subtitle class="text-subtitle-1">
-              {{ TypeListNames[fileType] }} ({{ resultsTotal }})
+            <div v-if="fileType === Types.audio" class="flex-row d-flex">
+              <v-btn rounded="pill" color="ipfsPrimary" @click="playAll">
+                Play all
+                <template #prepend>
+                  <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />
+                </template>
+              </v-btn>
+              <v-btn rounded="pill" color="ipfsPrimary" @click="enqueueAll">
+                Enqueue all
+                <template #prepend>
+                  <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />
+                </template>
+              </v-btn>
+            </div>
+            <v-card-subtitle v-else class="text-subtitle-1">
+              <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
             </v-card-subtitle>
             <v-card-subtitle class="text-subtitle-1">
               <hyperlink
diff --git a/src/composables/audioControls.js b/src/composables/audioControls.js
index 9e15024c..620742f2 100644
--- a/src/composables/audioControls.js
+++ b/src/composables/audioControls.js
@@ -79,6 +79,7 @@ function soundError(errorMessage) {
 }
 
 export const playerActive = computed(() => Object.keys(sourceFile.value).length && audioPlayer);
+
 export const progress = computed({
   get() {
     return (time.value / duration.value) * 100;
diff --git a/src/composables/playlistComposable.ts b/src/composables/playlistComposable.ts
new file mode 100644
index 00000000..86ae5236
--- /dev/null
+++ b/src/composables/playlistComposable.ts
@@ -0,0 +1,9 @@
+import { ref } from "vue";
+
+export const usePlaylist = () => {
+  const playlistVisible = ref(false);
+  return {
+    playlistVisible,
+    togglePlaylist: () => (playlistVisible.value = !playlistVisible.value),
+  };
+};
diff --git a/src/store/modules/playlist.ts b/src/store/modules/playlist.ts
index d21b2e18..e2636517 100644
--- a/src/store/modules/playlist.ts
+++ b/src/store/modules/playlist.ts
@@ -1,4 +1,5 @@
 import { StoreOptions } from "vuex";
+import { IFile } from "../../interfaces/IFile";
 import { IPlaylist } from "../../interfaces/IPlaylist";
 
 export interface IPlaylistStoreState {
@@ -6,17 +7,29 @@ export interface IPlaylistStoreState {
   playlists: IPlaylist[];
 }
 
+const defaultPlaylist = { entries: [] };
+
 // Can not use explicit type, it messes with cross-module calls
 export default <StoreOptions<any>>{
   namespaced: true,
-  state: {
-    playlists: [],
+  state: (): IPlaylistStoreState => {
+    try {
+      return {
+        playlists: [JSON.parse(localStorage.playlist ?? null) ?? defaultPlaylist],
+      };
+    } catch (e) {
+      return { playlists: [defaultPlaylist] };
+    }
   },
   mutations: {
-    setPlaylist(state, playlist: IPlaylist): void {
+    setPlaylist(state, playlist: IPlaylist) {
       state.playlists[0] = playlist;
       this.commit("localStorage/setPlaylist", state.playlists[0]);
     },
+    enqueue(state, entries: IFile | IFile[]) {
+      state.playlists[0].entries = state.playlists[0].entries.concat(entries);
+      this.commit("localStorage/setPlaylist", state.playlists[0]);
+    },
   },
   getters: {
     getPlaylist(state, getters, rootState) {

From 698f68e7d6ebd9ddaf8745ea0b247f27c8cc3658 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Tue, 13 Sep 2022 14:12:28 +0200
Subject: [PATCH 06/56] added playlist panel

---
 src/App.vue                                   | 10 ++--
 .../subcomponents/MetaDataPanel.vue           |  6 +-
 src/components/pageLayout/AppFooter.vue       |  9 ++-
 src/components/pageLayout/AppHeader.vue       |  2 +-
 src/components/pageLayout/AudioPlayer.vue     | 19 ++++---
 src/components/pageLayout/PlayList.vue        | 55 +++++++++++++++++++
 src/components/pageLayout/PlaylistPanel.vue   | 32 +++++++----
 src/composables/playlistComposable.js         | 13 +++++
 src/composables/playlistComposable.ts         |  9 ---
 9 files changed, 117 insertions(+), 38 deletions(-)
 create mode 100644 src/components/pageLayout/PlayList.vue
 create mode 100644 src/composables/playlistComposable.js
 delete mode 100644 src/composables/playlistComposable.ts

diff --git a/src/App.vue b/src/App.vue
index 4f5e3474..aeca1ab7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,10 @@
 <script setup>
 //TODO: make AppHeader generic also for homeview
 import AppHeader from "@/components/pageLayout/AppHeader.vue";
-import { useDisplay } from "vuetify";
 import { useRoute } from "vue-router";
+import PlayList from "./components/pageLayout/PlayList.vue";
 
-const { mdAndUp } = useDisplay();
 const route = useRoute();
-
-import { playerActive } from "@/composables/audioControls";
 </script>
 
 <template>
@@ -18,8 +15,9 @@ import { playerActive } from "@/composables/audioControls";
       <router-view />
     </v-main>
 
-    <AudioPlayer v-if="playerActive" />
-    <AppFooter v-else-if="route.name === 'Home' || (route.name === 'Search' && mdAndUp)" />
+    <play-list />
+    <AudioPlayer />
+    <AppFooter />
   </v-app>
 </template>
 
diff --git a/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue b/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
index 5f60dd12..5aae5f12 100644
--- a/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
+++ b/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
@@ -54,14 +54,14 @@ const fileHeight = (file) =>
                   <tbody>
                     <tr v-if="file.title || file.metadata?.metadata?.['title']">
                       <th>Title:</th>
-                      <td v-if="file.metadata?.metadata?.['title']">
+                      <td v-if="file.metadata?.metadata?.title">
                         <router-link
-                          v-sane-html="file.metadata.metadata['title']"
+                          v-sane-html="file.metadata.metadata.title"
                           :to="
                             filterLink(
                               metadataLink({
                                 label: 'title',
-                                value: file.metadata.metadata['title'],
+                                value: file.metadata.metadata.title,
                               })
                             )
                           "
diff --git a/src/components/pageLayout/AppFooter.vue b/src/components/pageLayout/AppFooter.vue
index c18f096a..813ad370 100644
--- a/src/components/pageLayout/AppFooter.vue
+++ b/src/components/pageLayout/AppFooter.vue
@@ -1,10 +1,14 @@
 <script setup>
+import { useRoute } from "vue-router";
+const route = useRoute();
 import { playerActive } from "@/composables/audioControls";
+import { usePlaylist } from "@/composables/playlistComposable";
+const { playlistVisible } = usePlaylist();
 
 import { useDisplay } from "vuetify";
+const { mdAndUp, smAndUp } = useDisplay();
 import { mdiMastodon, mdiTwitter, mdiGithub, mdiHandCoin, mdiEmail } from "@mdi/js";
 
-const { smAndUp } = useDisplay();
 const footer_links = [
   {
     icon: mdiMastodon,
@@ -31,8 +35,9 @@ const footer_links = [
 
 <template>
   <v-card
+    v-if="route.name === 'Home' || (route.name === 'Search' && mdAndUp)"
     v-scroll="onScroll"
-    :class="{ 'footer--hidden': hideFooter && !playerActive }"
+    :class="{ 'footer--hidden': hideFooter || playerActive || playlistVisible }"
     position="fixed"
     variant="flat"
     tile
diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 7255cbf5..651cb1e0 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -18,7 +18,7 @@ const theme = useTheme();
 
 const whiteLogo = computed(() => theme.current.value.dark || route.name === "Search");
 
-import { usePlaylist } from "@/composables/playlistComposable";
+import { usePlaylist } from "@/composables/playlistComposable.js";
 const { togglePlaylist } = usePlaylist();
 </script>
 
diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index a60beeee..f1c1ce1c 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -6,7 +6,6 @@ const { mdAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
 
 import {
-  playerActive,
   play,
   pause,
   close,
@@ -23,20 +22,26 @@ import { onBeforeUnmount } from "vue";
 onBeforeUnmount(() => {
   close();
 });
+
+import { playerActive } from "@/composables/audioControls";
+import { usePlaylist } from "@/composables/playlistComposable";
+const { playlistVisible } = usePlaylist();
+
+import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
 </script>
 
 <template>
   <v-fade-transition class="audio-player-card">
     <v-card
-      v-if="playerActive"
-      transition="fade-transition"
+      v-if="playerActive || playlistVisible"
       style="z-index: 10000"
       position="fixed"
       location="bottom"
       color="black"
       class="d-flex"
-      tile
-      width="101%"
+      flat
+      rounded="0"
+      width="100%"
       height="100"
     >
       <v-progress-linear
@@ -74,12 +79,12 @@ onBeforeUnmount(() => {
         <div class="flex-column my-auto mx-4 align-center w-100" style="min-width: 0">
           <v-marquee>
             <v-card-title class="font-weight-default d-flex px-0">
-              <span v-sane-html="sourceFile.title" />
+              <span v-sane-html="fileTitle(sourceFile)" />
             </v-card-title>
           </v-marquee>
           <v-marquee>
             <v-card-subtitle class="d-flex py-2 px-0">
-              <span v-sane-html="sourceFile.author" />
+              <span v-sane-html="fileAuthor(sourceFile)" />
             </v-card-subtitle>
           </v-marquee>
         </div>
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
new file mode 100644
index 00000000..b9000fdd
--- /dev/null
+++ b/src/components/pageLayout/PlayList.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { computed } from "vue";
+import { useStore } from "vuex";
+const store = useStore();
+import VMarquee from "@/components/shared/VMarquee.vue";
+import { mdiMusic, mdiPlay, mdiPause, mdiAlert, mdiClose, mdiDotsVertical } from "@mdi/js";
+import { useDisplay } from "vuetify";
+const { mdAndUp } = useDisplay();
+import { picsum } from "@/helpers/picsum";
+
+import { usePlaylist } from "@/composables/playlistComposable";
+const { playlistVisible } = usePlaylist();
+
+const playlistEntries = computed(() => store.getters["playlist/getPlaylist"]?.entries);
+import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
+</script>
+
+<template>
+  <v-fade-transition class="audio-player-card">
+    <v-card
+      v-if="playlistVisible"
+      position="fixed"
+      width="100%"
+      height="80%"
+      class="mt-14 pb-6 overflow-y-auto"
+      color="black"
+      rounded="0"
+      flat
+    >
+      <v-card-title>Playlist</v-card-title>
+      <v-list bg-color="black">
+        <v-list-item v-for="entry in playlistEntries" :key="entry.hash" color="black">
+          <template #prepend>
+            <v-icon :icon="mdiDotsVertical" />
+            <v-list-item-avatar rounded="0">
+              <v-img
+                aspect-ratio="1"
+                bac
+                gradient="to bottom, rgba(255,255,255,.1), rgba(255,255,255,.5)"
+                :src="entry.src || picsum({ width: 75, height: 75, seed: entry.hash })"
+              />
+            </v-list-item-avatar>
+          </template>
+          <v-list-item-title v-sane-html="fileTitle(entry)" />
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-fade-transition>
+</template>
+
+<style lang="scss" scoped>
+.audio-player-card {
+  transition: all 500ms ease-in-out;
+}
+</style>
diff --git a/src/components/pageLayout/PlaylistPanel.vue b/src/components/pageLayout/PlaylistPanel.vue
index 4f432074..8e3b6d14 100644
--- a/src/components/pageLayout/PlaylistPanel.vue
+++ b/src/components/pageLayout/PlaylistPanel.vue
@@ -1,17 +1,29 @@
 <script setup>
 import { useStore } from "vuex";
 const store = useStore();
+
+import { usePlaylist } from "@/composables/playlistComposable";
+const { playlistVisible } = usePlaylist();
 </script>
 
 <template>
-  <v-container>
-    <v-list>
-      <v-list-item
-        v-for="entry in store.getters('playlist/getPlaylist')?.entries"
-        :key="entry.hash"
-      >
-        <v-list-item-title>{{ entry.title }}</v-list-item-title>
-      </v-list-item>
-    </v-list>
-  </v-container>
+  <v-fade-transition class="audio-player-card">
+    <v-card
+      v-if="playlistVisible"
+      position="fixed"
+      location="center"
+      width="100%"
+      height="100%"
+      color="black"
+    >
+      <v-list>
+        <v-list-item
+          v-for="entry in store.getters('playlist/getPlaylist')?.entries"
+          :key="entry.hash"
+        >
+          <v-list-item-title>{{ entry.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-fade-transition>
 </template>
diff --git a/src/composables/playlistComposable.js b/src/composables/playlistComposable.js
new file mode 100644
index 00000000..7eb5d038
--- /dev/null
+++ b/src/composables/playlistComposable.js
@@ -0,0 +1,13 @@
+import { ref } from "vue";
+
+const playlistVisible = ref(false);
+const togglePlaylist = () => {
+  playlistVisible.value = !playlistVisible.value;
+};
+
+export function usePlaylist() {
+  return {
+    playlistVisible,
+    togglePlaylist,
+  };
+}
diff --git a/src/composables/playlistComposable.ts b/src/composables/playlistComposable.ts
deleted file mode 100644
index 86ae5236..00000000
--- a/src/composables/playlistComposable.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ref } from "vue";
-
-export const usePlaylist = () => {
-  const playlistVisible = ref(false);
-  return {
-    playlistVisible,
-    togglePlaylist: () => (playlistVisible.value = !playlistVisible.value),
-  };
-};

From d396d6f2cfd57efa301fcd328b5093f63b3b0f76 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Tue, 13 Sep 2022 17:56:16 +0200
Subject: [PATCH 07/56] double click playlist entry to play it in the
 audioplayer

---
 src/components/pageLayout/AudioPlayer.vue |  1 -
 src/components/pageLayout/PlayList.vue    | 42 +++++++++++++++--------
 src/composables/audioControls.js          | 10 ++++--
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index f1c1ce1c..86da4dfd 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -45,7 +45,6 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
       height="100"
     >
       <v-progress-linear
-        v-if="!loading"
         v-model="progress"
         active
         style="position: absolute"
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index b9000fdd..50013166 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -11,6 +11,8 @@ import { picsum } from "@/helpers/picsum";
 import { usePlaylist } from "@/composables/playlistComposable";
 const { playlistVisible } = usePlaylist();
 
+import { loadSoundFile } from "../../composables/audioControls.js";
+
 const playlistEntries = computed(() => store.getters["playlist/getPlaylist"]?.entries);
 import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
 </script>
@@ -29,20 +31,32 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
     >
       <v-card-title>Playlist</v-card-title>
       <v-list bg-color="black">
-        <v-list-item v-for="entry in playlistEntries" :key="entry.hash" color="black">
-          <template #prepend>
-            <v-icon :icon="mdiDotsVertical" />
-            <v-list-item-avatar rounded="0">
-              <v-img
-                aspect-ratio="1"
-                bac
-                gradient="to bottom, rgba(255,255,255,.1), rgba(255,255,255,.5)"
-                :src="entry.src || picsum({ width: 75, height: 75, seed: entry.hash })"
-              />
-            </v-list-item-avatar>
-          </template>
-          <v-list-item-title v-sane-html="fileTitle(entry)" />
-        </v-list-item>
+        <v-hover v-for="entry in playlistEntries" :key="entry.hash" v-slot="{ isHovering, props }">
+          <v-list-item
+            color="black"
+            :active="isHovering"
+            active-color="white"
+            v-bind="props"
+            @dblclick="loadSoundFile(entry)"
+          >
+            <template #prepend>
+              <v-icon :icon="mdiDotsVertical" />
+              <v-list-item-avatar rounded="0">
+                <v-img
+                  aspect-ratio="1"
+                  bac
+                  gradient="to bottom, rgba(255,255,255,.1), rgba(255,255,255,.5)"
+                  :src="entry.src || picsum({ width: 75, height: 75, seed: entry.hash })"
+                />
+              </v-list-item-avatar>
+            </template>
+            <v-row>
+              <v-col cols="6">
+                <v-list-item-title v-sane-html="fileTitle(entry)" />
+              </v-col>
+            </v-row>
+          </v-list-item>
+        </v-hover>
       </v-list>
     </v-card>
   </v-fade-transition>
diff --git a/src/composables/audioControls.js b/src/composables/audioControls.js
index 620742f2..17bd50b0 100644
--- a/src/composables/audioControls.js
+++ b/src/composables/audioControls.js
@@ -29,7 +29,9 @@ const howlSettings = {
   preload: "metadata",
   autoplay: true,
   onend: () => (playing.value = false),
-  onstop: () => (playing.value = false),
+  onstop: () => {
+    playing.value = false;
+  },
   onpause: () => (playing.value = false),
   onplay: () => (playing.value = true),
   onload: () => {
@@ -82,7 +84,11 @@ export const playerActive = computed(() => Object.keys(sourceFile.value).length
 
 export const progress = computed({
   get() {
-    return (time.value / duration.value) * 100;
+    if (duration.value) {
+      return (time.value / duration.value) * 100;
+    } else {
+      return 0;
+    }
   },
   set(percentage) {
     if (loaded.value) {

From 60fdda52413418c884c026662965619010f12bf1 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Wed, 14 Sep 2022 22:49:12 +0200
Subject: [PATCH 08/56] refactored audiocontrols and audioplayer in to
 typescript

---
 allowJavaScriptModules.ts                     |   4 +
 package-lock.json                             |  26 ++++
 package.json                                  |   2 +
 .../detailViewComponents/AudioDetail.vue      |  28 ++--
 .../subcomponents/DetailHeader.vue            |   2 +-
 .../subcomponents/MetaDataPanel.vue           |   6 +-
 src/components/pageLayout/AppFooter.vue       |   6 +-
 src/components/pageLayout/AppHeader.vue       |   3 +-
 src/components/pageLayout/AudioPlayer.vue     |  49 ++----
 src/components/pageLayout/PlayList.vue        |  41 +++--
 src/components/pageLayout/PlaylistPanel.vue   |   3 +-
 .../searchViewComponents/AudioList.vue        |   2 +-
 .../searchViewComponents/BaseList.vue         |   7 +-
 src/composables/audioControls.js              | 144 -----------------
 src/composables/audioControls.ts              |  48 ++++++
 src/composables/audioPlayer.ts                | 145 ++++++++++++++++++
 src/composables/playlistComposable.js         |  13 --
 src/helpers/ApiHelper.js                      |   8 -
 src/helpers/{fileHelper.js => fileHelper.ts}  |   6 +-
 .../{resourceURL.js => resourceURL.ts}        |   2 +-
 src/interfaces/IPlaylist.ts                   |   1 +
 src/store/index.js                            |   2 +-
 src/store/modules/playlist.ts                 |  30 ++--
 23 files changed, 322 insertions(+), 256 deletions(-)
 create mode 100644 allowJavaScriptModules.ts
 delete mode 100644 src/composables/audioControls.js
 create mode 100644 src/composables/audioControls.ts
 create mode 100644 src/composables/audioPlayer.ts
 delete mode 100644 src/composables/playlistComposable.js
 rename src/helpers/{fileHelper.js => fileHelper.ts} (90%)
 rename src/helpers/{resourceURL.js => resourceURL.ts} (75%)

diff --git a/allowJavaScriptModules.ts b/allowJavaScriptModules.ts
new file mode 100644
index 00000000..577d378e
--- /dev/null
+++ b/allowJavaScriptModules.ts
@@ -0,0 +1,4 @@
+// declare any JS files that are imported into TS files without implicit specific type declarations
+// for some guidance: https://blog.atomist.com/declaration-file-fix/
+
+declare module "@/store";
diff --git a/package-lock.json b/package-lock.json
index ca2307fa..27e5f42e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,8 @@
       },
       "devDependencies": {
         "@mdi/js": "^6.9.96",
+        "@types/howler": "^2.2.7",
+        "@types/mime": "^3.0.1",
         "@typescript-eslint/eslint-plugin": "^5.31.0",
         "@typescript-eslint/parser": "^5.31.0",
         "@vitejs/plugin-vue": "^2.3.3",
@@ -256,6 +258,12 @@
         "@types/chai": "*"
       }
     },
+    "node_modules/@types/howler": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.2.7.tgz",
+      "integrity": "sha512-PEZldwZqJJw1PWRTpupyC7ajVTZA8aHd8nB/Y0n6zRZi5u8ktYDntsHj13ltEiBRqWwF06pASxBEvCTxniG8eA==",
+      "dev": true
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -268,6 +276,12 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "node_modules/@types/mime": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
+      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.31.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.31.0.tgz",
@@ -5073,6 +5087,12 @@
         "@types/chai": "*"
       }
     },
+    "@types/howler": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.2.7.tgz",
+      "integrity": "sha512-PEZldwZqJJw1PWRTpupyC7ajVTZA8aHd8nB/Y0n6zRZi5u8ktYDntsHj13ltEiBRqWwF06pASxBEvCTxniG8eA==",
+      "dev": true
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -5085,6 +5105,12 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "@types/mime": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
+      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==",
+      "dev": true
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "5.31.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.31.0.tgz",
diff --git a/package.json b/package.json
index de31fbfe..9c69420d 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,8 @@
   },
   "devDependencies": {
     "@mdi/js": "^6.9.96",
+    "@types/howler": "^2.2.7",
+    "@types/mime": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
     "@vitejs/plugin-vue": "^2.3.3",
diff --git a/src/components/detailViewComponents/AudioDetail.vue b/src/components/detailViewComponents/AudioDetail.vue
index 6613310d..3fa09694 100644
--- a/src/components/detailViewComponents/AudioDetail.vue
+++ b/src/components/detailViewComponents/AudioDetail.vue
@@ -9,11 +9,9 @@ import { picsum } from "@/helpers/picsum";
 import { detailProps } from "@/composables/useDetail";
 const props = defineProps(detailProps);
 
-import * as audioControls from "@/composables/audioControls";
+import { audioPlayer, loadAudioPlayer, audio } from "@/composables/audioControls.js";
 
-const currentlyLoadedInPlayer = computed(
-  () => props.file.hash === audioControls.sourceFile.value.hash
-);
+const currentlyLoadedInPlayer = computed(() => props.file.hash === audioPlayer.value?.file.hash);
 const image = (file, width, height) => file?.src || picsum({ width, height, seed: file.hash });
 const imgSrc = computed(() => image(props.file, 400, 300));
 </script>
@@ -27,27 +25,29 @@ const imgSrc = computed(() => image(props.file, 400, 300));
       gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
     >
       <AudioDetailButton
-        v-if="currentlyLoadedInPlayer && audioControls.audioError.value"
-        :title="audioControls.audioError.value"
+        v-if="currentlyLoadedInPlayer && audioPlayer.error"
+        :title="audioPlayer.error"
         :icon="mdiAlert"
       />
+      <AudioDetailButton v-else-if="currentlyLoadedInPlayer && audioPlayer.loading" loading />
       <AudioDetailButton
-        v-else-if="currentlyLoadedInPlayer && audioControls.loading.value"
-        loading
-      />
-      <AudioDetailButton
-        v-else-if="currentlyLoadedInPlayer && audioControls.playing.value"
+        v-else-if="currentlyLoadedInPlayer && audioPlayer.playing"
         title="Pause"
         :icon="mdiPause"
-        @click="audioControls.pause"
+        @click="audioPlayer.pause"
       />
       <AudioDetailButton
         v-else-if="currentlyLoadedInPlayer"
         title="Play"
         :icon="mdiPlay"
-        @click="audioControls.play"
+        @click="audioPlayer.play"
+      />
+      <AudioDetailButton
+        v-else
+        title="Play"
+        :icon="mdiPlay"
+        @click="loadAudioPlayer(audio(file))"
       />
-      <AudioDetailButton v-else title="Play" :icon="mdiPlay" @click="audioControls.load(file)" />
     </v-img>
   </generic-detail>
 </template>
diff --git a/src/components/detailViewComponents/subcomponents/DetailHeader.vue b/src/components/detailViewComponents/subcomponents/DetailHeader.vue
index 35e58416..8ef20740 100644
--- a/src/components/detailViewComponents/subcomponents/DetailHeader.vue
+++ b/src/components/detailViewComponents/subcomponents/DetailHeader.vue
@@ -4,7 +4,7 @@ import prettyBytes from "pretty-bytes";
 import DownloadButton from "@/components/detailViewComponents/subcomponents/DownloadButton.vue";
 import CopyHashButton from "@/components/detailViewComponents/subcomponents/CopyHashButton.vue";
 import { detailProps } from "@/composables/useDetail";
-import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
+import { fileTitle, fileAuthor } from "@/helpers/fileHelper.ts";
 defineProps(detailProps);
 </script>
 
diff --git a/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue b/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
index 5aae5f12..7c1220b6 100644
--- a/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
+++ b/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
@@ -5,7 +5,7 @@ import resourceURL from "@/helpers/resourceURL";
 import moment from "moment";
 import { elasticSearchEscape } from "@/helpers/ApiHelper";
 import { nsfwClassificationFormatter } from "@/helpers/nsfwClassifier";
-import { formatTime } from "@/composables/audioControls";
+import { formatTime } from "@/composables/audioControls.js";
 
 const route = useRoute();
 
@@ -126,11 +126,11 @@ const fileHeight = (file) =>
                       <th>Length:</th>
                       <td
                         v-if="file.metadata?.metadata?.['xmpDM:duration']"
-                        v-sane-html="formatTime(file.metadata.metadata['xmpDM:duration'], false)"
+                        v-sane-html="formatTime(file.metadata.metadata['xmpDM:duration']).join(':')"
                       />
                       <td
                         v-else
-                        v-sane-html="formatTime(file.metadata.metadata['length'], false)"
+                        v-sane-html="formatTime(file.metadata.metadata['length']).join(':')"
                       />
                     </tr>
                     <tr v-if="file.metadata?.metadata?.['subject']">
diff --git a/src/components/pageLayout/AppFooter.vue b/src/components/pageLayout/AppFooter.vue
index 813ad370..3c0a4720 100644
--- a/src/components/pageLayout/AppFooter.vue
+++ b/src/components/pageLayout/AppFooter.vue
@@ -1,9 +1,7 @@
 <script setup>
 import { useRoute } from "vue-router";
 const route = useRoute();
-import { playerActive } from "@/composables/audioControls";
-import { usePlaylist } from "@/composables/playlistComposable";
-const { playlistVisible } = usePlaylist();
+import { audioPlayer, playlistVisible } from "@/composables/audioControls";
 
 import { useDisplay } from "vuetify";
 const { mdAndUp, smAndUp } = useDisplay();
@@ -37,7 +35,7 @@ const footer_links = [
   <v-card
     v-if="route.name === 'Home' || (route.name === 'Search' && mdAndUp)"
     v-scroll="onScroll"
-    :class="{ 'footer--hidden': hideFooter || playerActive || playlistVisible }"
+    :class="{ 'footer--hidden': hideFooter || audioPlayer || playlistVisible }"
     position="fixed"
     variant="flat"
     tile
diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 651cb1e0..87f74299 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -18,8 +18,7 @@ const theme = useTheme();
 
 const whiteLogo = computed(() => theme.current.value.dark || route.name === "Search");
 
-import { usePlaylist } from "@/composables/playlistComposable.js";
-const { togglePlaylist } = usePlaylist();
+import { togglePlaylist } from "@/composables/audioControls.ts";
 </script>
 
 <template>
diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index 86da4dfd..fce0fe70 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -5,35 +5,20 @@ import { useDisplay } from "vuetify";
 const { mdAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
 
-import {
-  play,
-  pause,
-  close,
-  audioError,
-  loading,
-  playing,
-  sourceFile,
-  formattedTime as time,
-  formattedDuration as duration,
-  progress,
-} from "@/composables/audioControls";
+import { audioPlayer } from "@/composables/audioControls";
 
 import { onBeforeUnmount } from "vue";
 onBeforeUnmount(() => {
-  close();
+  audioPlayer.value.cleanup();
 });
 
-import { playerActive } from "@/composables/audioControls";
-import { usePlaylist } from "@/composables/playlistComposable";
-const { playlistVisible } = usePlaylist();
-
-import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
+import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
 </script>
 
 <template>
   <v-fade-transition class="audio-player-card">
     <v-card
-      v-if="playerActive || playlistVisible"
+      v-if="audioPlayer"
       style="z-index: 10000"
       position="fixed"
       location="bottom"
@@ -45,7 +30,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
       height="100"
     >
       <v-progress-linear
-        v-model="progress"
+        v-model="audioPlayer.progress"
         active
         style="position: absolute"
         color="ipfsPrimary-lighten-4"
@@ -59,7 +44,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
             aspect-ratio="1"
             bac
             gradient="to bottom, rgba(255,255,255,.1), rgba(255,255,255,.5)"
-            :src="sourceFile.src || picsum({ width: 75, height: 75, seed: sourceFile.hash })"
+            :src="picsum({ width: 75, height: 75, seed: audioPlayer.file.hash })"
           >
           </v-img>
           <v-icon
@@ -78,12 +63,12 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
         <div class="flex-column my-auto mx-4 align-center w-100" style="min-width: 0">
           <v-marquee>
             <v-card-title class="font-weight-default d-flex px-0">
-              <span v-sane-html="fileTitle(sourceFile)" />
+              <span v-sane-html="fileTitle(audioPlayer.file)" />
             </v-card-title>
           </v-marquee>
           <v-marquee>
             <v-card-subtitle class="d-flex py-2 px-0">
-              <span v-sane-html="fileAuthor(sourceFile)" />
+              <span v-sane-html="fileAuthor(audioPlayer.file)" />
             </v-card-subtitle>
           </v-marquee>
         </div>
@@ -92,18 +77,18 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
           :class="mdAndUp ? 'flex-row ml-auto' : 'flex-column'"
         >
           <v-card-title :style="{ fontSize: mdAndUp ? '20px' : '16px' }"
-            >{{ time }} / {{ duration }}</v-card-title
+            >{{ audioPlayer.time }} / {{ audioPlayer.duration }}</v-card-title
           >
           <div class="d-inline-flex flex-row">
             <v-btn
-              v-if="audioError"
+              v-if="audioPlayer.error"
               class="bg-ipfsPrimary-lighten-1 ml-2"
               :size="mdAndUp ? 'large' : 'default'"
-              :title="audioError"
+              :title="audioPlayer.error"
               :icon="mdiAlert"
             />
             <v-btn
-              v-else-if="loading"
+              v-else-if="audioPlayer.loading"
               class="bg-ipfsPrimary-lighten-1 ml-2"
               :size="mdAndUp ? 'large' : 'default'"
               icon
@@ -111,12 +96,12 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
               loading
             />
             <v-btn
-              v-else-if="playing"
+              v-else-if="audioPlayer.playing"
               class="bg-ipfsPrimary-lighten-1 ml-2"
               :size="mdAndUp ? 'large' : 'default'"
               :icon="mdiPause"
               title="Pause"
-              @click="pause"
+              @click="audioPlayer.pause"
             />
             <v-btn
               v-else
@@ -124,7 +109,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
               :size="mdAndUp ? 'large' : 'default'"
               :icon="mdiPlay"
               title="Play"
-              @click="play"
+              @click="audioPlayer.play"
             />
             <v-btn
               class="bg-ipfsPrimary-lighten-1 ml-2"
@@ -132,7 +117,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
               :size="mdAndUp ? 'large' : 'default'"
               :icon="mdiClose"
               title="Close"
-              @click="close"
+              @click="audioPlayer.cleanUp"
             />
           </div>
         </div>
@@ -146,6 +131,6 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
   cursor: pointer;
 }
 .audio-player-card {
-  transition: all 500ms ease-in-out;
+  transition: all 300ms ease-in-out;
 }
 </style>
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index 50013166..af750681 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { computed } from "vue";
 import { useStore } from "vuex";
 const store = useStore();
 import VMarquee from "@/components/shared/VMarquee.vue";
@@ -8,13 +7,10 @@ import { useDisplay } from "vuetify";
 const { mdAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
 
-import { usePlaylist } from "@/composables/playlistComposable";
-const { playlistVisible } = usePlaylist();
+import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
 
-import { loadSoundFile } from "../../composables/audioControls.js";
-
-const playlistEntries = computed(() => store.getters["playlist/getPlaylist"]?.entries);
-import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
+const playlistEntries = store.getters["playlist/getPlaylist"].entries;
+import { playlistVisible, loadAudioPlayer, playPlaylistEntry } from "@/composables/audioControls";
 </script>
 
 <template>
@@ -31,23 +27,44 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
     >
       <v-card-title>Playlist</v-card-title>
       <v-list bg-color="black">
-        <v-hover v-for="entry in playlistEntries" :key="entry.hash" v-slot="{ isHovering, props }">
+        <v-hover
+          v-for="(entry, index) in playlistEntries"
+          :key="index"
+          v-slot="{ isHovering, props }"
+        >
           <v-list-item
             color="black"
             :active="isHovering"
             active-color="white"
             v-bind="props"
-            @dblclick="loadSoundFile(entry)"
+            @dblclick="playPlaylistEntry(entry)"
           >
             <template #prepend>
               <v-icon :icon="mdiDotsVertical" />
-              <v-list-item-avatar rounded="0">
+              <v-list-item-avatar
+                rounded="0"
+                style="cursor: pointer"
+                @click="playPlaylistEntry(entry)"
+              >
                 <v-img
                   aspect-ratio="1"
                   bac
                   gradient="to bottom, rgba(255,255,255,.1), rgba(255,255,255,.5)"
                   :src="entry.src || picsum({ width: 75, height: 75, seed: entry.hash })"
-                />
+                >
+                  <v-icon
+                    size="42"
+                    color="white"
+                    style="
+                      opacity: 0.6;
+                      position: absolute;
+                      top: 50%;
+                      left: 50%;
+                      transform: translate(-50%, -50%);
+                    "
+                    :icon="mdiPlay"
+                  />
+                </v-img>
               </v-list-item-avatar>
             </template>
             <v-row>
@@ -64,6 +81,6 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
 
 <style lang="scss" scoped>
 .audio-player-card {
-  transition: all 500ms ease-in-out;
+  transition: all 300ms ease-in-out;
 }
 </style>
diff --git a/src/components/pageLayout/PlaylistPanel.vue b/src/components/pageLayout/PlaylistPanel.vue
index 8e3b6d14..e547c661 100644
--- a/src/components/pageLayout/PlaylistPanel.vue
+++ b/src/components/pageLayout/PlaylistPanel.vue
@@ -2,8 +2,7 @@
 import { useStore } from "vuex";
 const store = useStore();
 
-import { usePlaylist } from "@/composables/playlistComposable";
-const { playlistVisible } = usePlaylist();
+import { playlistVisible } from "@/composables/audioControls.ts";
 </script>
 
 <template>
diff --git a/src/components/searchViewComponents/AudioList.vue b/src/components/searchViewComponents/AudioList.vue
index 506a4df4..22f8d1e8 100644
--- a/src/components/searchViewComponents/AudioList.vue
+++ b/src/components/searchViewComponents/AudioList.vue
@@ -7,7 +7,7 @@ import { useFileListComposable, imports } from "@/composables/useFileListComposa
 import MediaCenterIcon from "@/components/searchViewComponents/subcomponents/MediaCenterIcon.vue";
 import { Types } from "@/helpers/typeHelper";
 import { picsum } from "@/helpers/picsum";
-import { fileTitle, fileAuthor } from "@/helpers/fileHelper.js";
+import { fileTitle, fileAuthor } from "@/helpers/fileHelper.ts";
 
 const { xs, smAndDown, mdAndDown } = useDisplay();
 const { durationToColor, mime, prettyBytes } = imports;
diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index 2b722d5f..0b09d10a 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -27,8 +27,7 @@ const props = defineProps({
 const { anyFileType, loading, loadedPages, infinite, slicedHits, pageHits } =
   useFileListComposable(props);
 
-const playAll = () => store.commit("playlist/setPlaylist", { entries: pageHits.value });
-const enqueueAll = () => store.commit("playlist/enqueue", pageHits.value);
+import { setPlaylist, enqueue } from "@/composables/audioControls.ts";
 
 const error = computed(() => {
   const error = store.getters[`results/${props.fileType}/error`];
@@ -136,13 +135,13 @@ const queryPage = computed({
         <v-card flat>
           <div class="justify-space-between d-flex flex-row">
             <div v-if="fileType === Types.audio" class="flex-row d-flex">
-              <v-btn rounded="pill" color="ipfsPrimary" @click="playAll">
+              <v-btn rounded="pill" color="ipfsPrimary" @click="setPlaylist(pageHits)">
                 Play all
                 <template #prepend>
                   <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />
                 </template>
               </v-btn>
-              <v-btn rounded="pill" color="ipfsPrimary" @click="enqueueAll">
+              <v-btn rounded="pill" color="ipfsPrimary" @click="enqueue(pageHits)">
                 Enqueue all
                 <template #prepend>
                   <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />
diff --git a/src/composables/audioControls.js b/src/composables/audioControls.js
deleted file mode 100644
index 17bd50b0..00000000
--- a/src/composables/audioControls.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import { ref, computed } from "vue";
-import { getFileExtension } from "@/helpers/fileHelper";
-import { Howl, Howler } from "howler";
-import getResourceURL from "@/helpers/resourceURL";
-
-let audioPlayer;
-let interval;
-const emptyObject = {};
-
-const errorCode = {
-  1: "User aborted request",
-  2: "Network error",
-  3: "Decoding error",
-  4: "Resource unsuitable/unavailable",
-};
-
-export const audioError = ref("");
-export const loading = ref(false);
-export const playing = ref(false);
-export const loaded = ref(false);
-export const sourceFile = ref(emptyObject);
-export const time = ref(0);
-export const formattedTime = computed(() => formatTime(time.value));
-export const duration = ref(0);
-export const formattedDuration = computed(() => formatTime(duration.value));
-
-const howlSettings = {
-  html5: true,
-  preload: "metadata",
-  autoplay: true,
-  onend: () => (playing.value = false),
-  onstop: () => {
-    playing.value = false;
-  },
-  onpause: () => (playing.value = false),
-  onplay: () => (playing.value = true),
-  onload: () => {
-    loading.value = false;
-    loaded.value = true;
-    interval = setInterval(() => {
-      time.value = audioPlayer.seek();
-    }, 100);
-    duration.value = audioPlayer.duration();
-  },
-  onloaderror: (source, message) => soundError(`Loading Error: ${errorCode[message]}`),
-  onplayerror: (source, message) => soundError(`Playback Error: ${errorCode[message]}`),
-};
-
-/**
- * load a sound file from ipfs into the Howl audio player and attach necessary hooks.
- *
- * @param file: required object {hash, ...}
- * @param options: optional extra options to pass to howl player or overrides.
- */
-export function load(file, options) {
-  if (!file || !file.hash) {
-    throw Error("No proper file specified");
-  }
-  // FIXME: Howler plans to implement accepting mimetype parameter in the future... since 2015
-  // https://github.com/goldfire/howler.js/issues/411
-  const fileExtension = getFileExtension(file);
-  if (!Howler.codecs(fileExtension)) {
-    throw Error(`Unsupported/undetected file type: '${fileExtension}'`);
-  }
-
-  close(); // unregister any hooks
-  loading.value = true;
-  sourceFile.value = file;
-
-  audioPlayer = new Howl({
-    ...howlSettings,
-    src: [getResourceURL(file.hash)],
-    format: [fileExtension],
-    ...options,
-  });
-}
-
-function soundError(errorMessage) {
-  console.error(`Audio Player ${errorMessage}`);
-  audioError.value = errorMessage;
-}
-
-export const playerActive = computed(() => Object.keys(sourceFile.value).length && audioPlayer);
-
-export const progress = computed({
-  get() {
-    if (duration.value) {
-      return (time.value / duration.value) * 100;
-    } else {
-      return 0;
-    }
-  },
-  set(percentage) {
-    if (loaded.value) {
-      audioPlayer.seek((percentage * duration.value) / 100);
-    }
-  },
-});
-
-export function loadSoundFile(soundFile) {
-  try {
-    load(soundFile);
-  } catch (e) {
-    soundError(e);
-  }
-}
-
-export function play() {
-  if (audioPlayer && loaded.value) audioPlayer.play();
-}
-
-export function pause() {
-  if (audioPlayer && loaded.value) audioPlayer.pause();
-}
-
-export function stop() {
-  if (audioPlayer && loaded.value) audioPlayer.stop();
-}
-
-export function close() {
-  if (audioPlayer) {
-    audioError.value = "";
-    audioPlayer.off();
-    audioPlayer.unload();
-    playing.value = false;
-    loading.value = false;
-    loaded.value = false;
-    time.value = 0;
-    duration.value = 0;
-    sourceFile.value = emptyObject;
-  }
-  clearInterval(interval);
-}
-
-/**
- * @param secs
- * @returns {string}
- */
-export function formatTime(secs, spaced = true) {
-  if (secs === undefined) return "-";
-  const minutes = Math.floor(secs / 60) || 0;
-  const seconds = Math.floor(secs - minutes * 60) || 0;
-  return `${minutes}${spaced ? " " : ""}:${spaced ? " " : ""}${seconds < 10 ? "0" : ""}${seconds}`;
-}
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
new file mode 100644
index 00000000..5d73bdd2
--- /dev/null
+++ b/src/composables/audioControls.ts
@@ -0,0 +1,48 @@
+import { ref } from "vue";
+import { IFile } from "../interfaces/IFile";
+import { Audio } from "./audioPlayer";
+
+import store from "@/store";
+
+export const audioPlayer = ref<Audio | undefined>(undefined);
+
+export const audio = (file: IFile) => new Audio(file);
+export const loadAudioPlayer = (audio: Audio) => {
+  console.log("Loading audio player", audio);
+  audioPlayer.value = audio;
+};
+
+export const playlistVisible = ref(false);
+export const togglePlaylist = () => {
+  playlistVisible.value = !playlistVisible.value;
+};
+const audioBank = new Map<string, Audio>();
+
+export const setPlaylist = (entries: IFile[]) => {
+  store.commit("playlist/setPlaylist", { entries });
+  for (const entry of entries) {
+    if (!audioBank.has(entry.hash)) audioBank.set(entry.hash, new Audio(entry));
+  }
+};
+
+export const enqueue = (entries: IFile[]) =>
+  setPlaylist(store.getters["playlist/getPlaylist"].entries.concat(entries));
+
+export const clearPlaylist = () => {
+  store.commit("playlist/setPlaylist", { entries: [] });
+};
+
+export const playPlaylistEntry = (entry: IFile) => {
+  const audio = audioBank.get(entry.hash);
+  audio && loadAudioPlayer(audio);
+};
+/**
+ * @param secs
+ * @returns [string, string]
+ */
+export function formatTime(secs: number): [string, string] | undefined {
+  if (secs === undefined) return;
+  const minutes = Math.floor(secs / 60) || 0;
+  const seconds = Math.floor(secs - minutes * 60) || 0;
+  return [`${minutes}`, `${seconds < 10 ? "0" : ""}${seconds}`];
+}
diff --git a/src/composables/audioPlayer.ts b/src/composables/audioPlayer.ts
new file mode 100644
index 00000000..9dc42665
--- /dev/null
+++ b/src/composables/audioPlayer.ts
@@ -0,0 +1,145 @@
+import { getFileExtension } from "@/helpers/fileHelper";
+import { Howl, Howler, HowlErrorCallback } from "howler";
+import getResourceURL from "@/helpers/resourceURL";
+import { IFile } from "../interfaces/IFile";
+
+const errorCode = {
+  "1": "User aborted request",
+  "2": "Network error",
+  "3": "Decoding error",
+  "4": "Resource unsuitable/unavailable",
+};
+
+export class Audio {
+  constructor(file: IFile, options = {}) {
+    this.file = file;
+    const fileExtension = getFileExtension(file);
+    if (!Howler.codecs(fileExtension)) {
+      this.reportError(`Unsupported/undetected file type: '${fileExtension}'`);
+      return;
+    }
+
+    this.loading = true;
+    this.player = new Howl({
+      html5: true,
+      preload: "metadata",
+      autoplay: false,
+      src: [getResourceURL(file.hash)],
+      format: [fileExtension],
+      onloaderror: (source, message) => {
+        this.reportError(`Load Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
+      },
+      onload: () => {
+        console.log("loaded audio:", this.file);
+        this.loading = false;
+        this.loaded = true;
+        this.duration = this.player.duration() || 0;
+      },
+      onplay: () => {
+        this.playing = true;
+        this.interval = setInterval(() => {
+          this.time = this.player.seek();
+        }, 100);
+      },
+      onpause: () => {
+        this.playing = false;
+        clearInterval(this.interval);
+      },
+      onstop: () => {
+        this.playing = false;
+        clearInterval(this.interval);
+      },
+      onend: () => {
+        this.playing = false;
+        clearInterval(this.interval);
+      },
+      ...options,
+    });
+
+    this.initialized = true;
+  }
+
+  private interval: number | undefined;
+  initialized = false;
+
+  error = "";
+  loaded = false;
+  loading = false;
+  playing = false;
+  duration = 0;
+  time: number | undefined;
+
+  file: IFile;
+  player: Howl = {} as Howl;
+
+  get progress() {
+    if (this.duration && this.time) {
+      return (this.time / this.duration) * 100;
+    } else {
+      return 0;
+    }
+  }
+
+  set progress(percentage) {
+    if (this.loaded) {
+      this.player.seek((percentage * this.duration) / 100);
+    }
+  }
+
+  private reportError(message: string) {
+    console.error(message);
+    this.error = message;
+  }
+
+  /**
+   * returns promise which resolves when the file has loaded
+   */
+  load() {
+    return new Promise((resolve, reject) => {
+      if (!this.initialized) return reject("Error: Audio player has not been initialized");
+      if (this.loaded) return resolve(undefined);
+      this.player.once("loaderror", () => {
+        reject();
+      });
+      this.player.once("load", () => resolve(undefined));
+      if (!this.loading) {
+        this.loading = true;
+        this.player.load();
+      }
+    });
+  }
+
+  /**
+   * returns promise which resolves once the audiofile reaches the end
+   */
+  play() {
+    return new Promise((resolve, reject) => {
+      if (!this.initialized) return reject("Error: Audio player has not been initialized");
+      this.player.once("playerror", (source, message) => {
+        this.reportError(`Playback Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
+        reject();
+      });
+      this.player.once("end", () => {
+        resolve(undefined);
+      });
+      this.player.play();
+    });
+  }
+
+  pause() {
+    if (!this.initialized) return;
+    this.player.pause();
+  }
+
+  cleanUp() {
+    clearInterval(this.interval);
+    this.player.off();
+    this.player.unload();
+    this.error = "";
+    this.loaded = false;
+    this.loading = false;
+    this.playing = false;
+    this.duration = 0;
+    this.time = undefined;
+  }
+}
diff --git a/src/composables/playlistComposable.js b/src/composables/playlistComposable.js
deleted file mode 100644
index 7eb5d038..00000000
--- a/src/composables/playlistComposable.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ref } from "vue";
-
-const playlistVisible = ref(false);
-const togglePlaylist = () => {
-  playlistVisible.value = !playlistVisible.value;
-};
-
-export function usePlaylist() {
-  return {
-    playlistVisible,
-    togglePlaylist,
-  };
-}
diff --git a/src/helpers/ApiHelper.js b/src/helpers/ApiHelper.js
index 186a0e33..d2095644 100644
--- a/src/helpers/ApiHelper.js
+++ b/src/helpers/ApiHelper.js
@@ -71,11 +71,3 @@ export function apiSearch(query, type, batch = 0) {
  * @param s
  */
 export const elasticSearchEscape = (s) => s?.replaceAll(/([/:])/g, (_, c) => `\\${c}`);
-
-export default {
-  maxPages,
-  batchSize,
-  api,
-  apiMetadataQuery,
-  apiSearch,
-};
diff --git a/src/helpers/fileHelper.js b/src/helpers/fileHelper.ts
similarity index 90%
rename from src/helpers/fileHelper.js
rename to src/helpers/fileHelper.ts
index 91084b92..503643bb 100644
--- a/src/helpers/fileHelper.js
+++ b/src/helpers/fileHelper.ts
@@ -1,5 +1,4 @@
 import * as mime from "mime/lite";
-import { computed } from "vue";
 
 // Howler (audio player) requires the following extensions:
 // "mp3", "mpeg", "opus", "ogg", "oga", "wav", "aac", "caf", "m4a", "m4b",
@@ -39,10 +38,15 @@ mime.define(
  */
 export function getFileExtension(file) {
   // Mimetype is leading
+  console.log(file);
   if (file.mimetype) {
     const ext = mime.getExtension(file.mimetype);
     if (ext) return ext;
   }
+  if (file.metadata?.metadata["Content-Type"]) {
+    const ext = mime.getExtension(file.metadata.metadata["Content-Type"][0].split(" ")[0]);
+    if (ext) return ext;
+  }
 
   const filename = file.references?.[0]?.name;
   if (filename) {
diff --git a/src/helpers/resourceURL.js b/src/helpers/resourceURL.ts
similarity index 75%
rename from src/helpers/resourceURL.js
rename to src/helpers/resourceURL.ts
index 5a79356e..b896b7a2 100644
--- a/src/helpers/resourceURL.js
+++ b/src/helpers/resourceURL.ts
@@ -1,6 +1,6 @@
 const gatewayURL = "https://gateway.ipfs.io";
 
-function getResourceURL(hash) {
+function getResourceURL(hash: string) {
   return `${gatewayURL}/ipfs/${hash}`;
 }
 
diff --git a/src/interfaces/IPlaylist.ts b/src/interfaces/IPlaylist.ts
index f7a0e0c0..4b7f0b4c 100644
--- a/src/interfaces/IPlaylist.ts
+++ b/src/interfaces/IPlaylist.ts
@@ -1,5 +1,6 @@
 import { IFile } from "./IFile";
 
 export interface IPlaylist {
+  index?: number | undefined;
   entries: IFile[];
 }
diff --git a/src/store/index.js b/src/store/index.js
index 74ba4a1c..3bf6234e 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -20,7 +20,7 @@ export default createStore({
         [Types.video]: SearchResults(Types.video),
         [Types.directories]: SearchResults(Types.directories),
         [Types.other]: SearchResults(Types.other),
-        [Types.unfiltered]: SearchResults(Types.unfiltere),
+        [Types.unfiltered]: SearchResults(Types.unfiltered),
       },
     },
   },
diff --git a/src/store/modules/playlist.ts b/src/store/modules/playlist.ts
index e2636517..8084a9a2 100644
--- a/src/store/modules/playlist.ts
+++ b/src/store/modules/playlist.ts
@@ -1,20 +1,19 @@
-import { StoreOptions } from "vuex";
-import { IFile } from "../../interfaces/IFile";
-import { IPlaylist } from "../../interfaces/IPlaylist";
+import { Module } from "vuex";
+import { IPlaylist } from "@/interfaces/IPlaylist";
 
 export interface IPlaylistStoreState {
-  // Currently we use 1 playlist; playlists[0]
+  activePlaylist?: number | undefined;
   playlists: IPlaylist[];
 }
 
 const defaultPlaylist = { entries: [] };
 
-// Can not use explicit type, it messes with cross-module calls
-export default <StoreOptions<any>>{
+export default <Module<any, unknown>>{
   namespaced: true,
   state: (): IPlaylistStoreState => {
     try {
       return {
+        activePlaylist: 0,
         playlists: [JSON.parse(localStorage.playlist ?? null) ?? defaultPlaylist],
       };
     } catch (e) {
@@ -23,17 +22,22 @@ export default <StoreOptions<any>>{
   },
   mutations: {
     setPlaylist(state, playlist: IPlaylist) {
-      state.playlists[0] = playlist;
-      this.commit("localStorage/setPlaylist", state.playlists[0]);
+      state.playlists[state.activePlaylist || 0] = playlist;
+      this.commit("localStorage/setPlaylist", state.playlists[state.activePlaylist || 0]);
     },
-    enqueue(state, entries: IFile | IFile[]) {
-      state.playlists[0].entries = state.playlists[0].entries.concat(entries);
-      this.commit("localStorage/setPlaylist", state.playlists[0]);
+    setActivePlaylist(state, playlist: number) {
+      state.activePlaylist = playlist;
+    },
+    setCurrentlyPlaying(state, index: number | undefined) {
+      state.playlists[state.activePlaylist || 0].index = index;
+      return index === undefined
+        ? undefined
+        : state.playlists[state.activePlaylist || 0].entries[index];
     },
   },
   getters: {
-    getPlaylist(state, getters, rootState) {
-      return state.playlists?.[0] ?? rootState.localStorage.playlist;
+    getPlaylist(state, getters, rootState: any) {
+      return state.playlists?.[state.activePlaylist || 0] ?? rootState.localStorage.playlist;
     },
   },
 };

From 2722f2c1672d110f8390f18ddb0b7fe7c05eadf0 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Thu, 15 Sep 2022 16:01:47 +0200
Subject: [PATCH 09/56] lots of styling fixes, scrollbar fixes, bug fixes,
 other fixes

---
 index.html                                    |  4 +-
 src/App.vue                                   | 15 ++----
 src/components/DetailView.vue                 | 10 ----
 src/components/SearchView.vue                 | 47 +++++++++----------
 .../detailViewComponents/AudioDetail.vue      |  2 +-
 .../subcomponents/MetaDataPanel.vue           |  2 +-
 src/components/pageLayout/AppFooter.vue       | 13 ++---
 src/components/pageLayout/AppHeader.vue       |  2 -
 src/components/pageLayout/AudioPlayer.vue     |  2 +-
 src/components/pageLayout/PlayList.vue        | 47 +++++++++++++------
 .../searchViewComponents/BaseList.vue         |  2 +-
 src/components/shared/BlinkBlink.vue          | 29 ++++++++++++
 src/composables/audioControls.ts              |  9 ++--
 src/composables/audioPlayer.ts                |  5 +-
 src/store/index.js                            |  2 +-
 .../modules/{playlist.ts => playlistStore.ts} | 28 +++++++++--
 16 files changed, 128 insertions(+), 91 deletions(-)
 create mode 100644 src/components/shared/BlinkBlink.vue
 rename src/store/modules/{playlist.ts => playlistStore.ts} (53%)

diff --git a/index.html b/index.html
index 275e82ca..3e07735c 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="overflow-y: hidden">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -25,7 +25,7 @@
         enabled. Please enable it to continue.</strong
       >
     </noscript>
-    <div id="app"></div>
+    <div id="app"/>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index aeca1ab7..7ebf17e0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,14 +8,14 @@ const route = useRoute();
 </script>
 
 <template>
-  <v-app dark hidden class="overflow-hidden">
+  <v-app dark hidden>
     <app-header v-if="route.name !== 'Home'" />
 
-    <v-main id="main">
+    <v-main id="main" class="pb-15">
+      <play-list />
       <router-view />
     </v-main>
 
-    <play-list />
     <AudioPlayer />
     <AppFooter />
   </v-app>
@@ -41,15 +41,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-h2 {
-  font-size: 120%;
-  letter-spacing: 0.09em;
-  font-weight: 500;
-  span {
-    font-weight: 500;
-  }
-}
-
 /*
     This is due to a bug with the application height in Safari on IPhone
     https://stackoverflow.com/questions/62167456/use-of-v-app-bar-causes-v-content-to-always-have-an-overflow-identical-to-the-he
diff --git a/src/components/DetailView.vue b/src/components/DetailView.vue
index 40963d0c..8f9c1f74 100644
--- a/src/components/DetailView.vue
+++ b/src/components/DetailView.vue
@@ -159,13 +159,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-.detail {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-</style>
diff --git a/src/components/SearchView.vue b/src/components/SearchView.vue
index 36319ed4..0b658a08 100644
--- a/src/components/SearchView.vue
+++ b/src/components/SearchView.vue
@@ -16,37 +16,36 @@ const route = useRoute();
 function listType(t) {
   return [t, Types.all, undefined].includes(route.query.type);
 }
+
+import { footerVisible } from "@/composables/footer.js";
+const onScroll = () => (footerVisible.value = false);
 </script>
 
 <template>
-  <div>
-    <search-filter-menu v-if="smAndDown" />
-    <SearchFilters v-else />
-    <GenericList v-if="listType(Types.text)" :file-type="Types.text" />
-    <AudioList v-if="listType(Types.audio)" />
-    <ImageList v-if="listType(Types.images)" />
-    <VideoList v-if="listType(Types.video)" />
-    <GenericList v-if="listType(Types.directories)" :file-type="Types.directories" />
-    <GenericList v-if="listType(Types.other)" :file-type="Types.other" />
-    <GenericList v-if="route.query.type == Types.unfiltered" :file-type="Types.unfiltered" />
+  <div data-id="search-view" class="overflow-y-scroll vh-100" @scroll="onScroll">
+    <div class="bottom-space">
+      <search-filter-menu v-if="smAndDown" />
+      <SearchFilters v-else />
+      <GenericList v-if="listType(Types.text)" :file-type="Types.text" />
+      <AudioList v-if="listType(Types.audio)" />
+      <ImageList v-if="listType(Types.images)" />
+      <VideoList v-if="listType(Types.video)" />
+      <GenericList v-if="listType(Types.directories)" :file-type="Types.directories" />
+      <GenericList v-if="listType(Types.other)" :file-type="Types.other" />
+      <GenericList v-if="route.query.type == Types.unfiltered" :file-type="Types.unfiltered" />
+    </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
-h2 {
-  font-size: 120%;
-  letter-spacing: 0.09em;
-  font-weight: 500;
-  span {
-    font-weight: 500;
-  }
+<style scoped>
+.bottom-space {
+  padding-bottom: 118px;
+}
+.vh-100 {
+  height: 100vh;
 }
 
-.searchbar {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+.overflow-y-scroll {
+  overflow-y: scroll;
 }
 </style>
diff --git a/src/components/detailViewComponents/AudioDetail.vue b/src/components/detailViewComponents/AudioDetail.vue
index 3fa09694..b52cf36f 100644
--- a/src/components/detailViewComponents/AudioDetail.vue
+++ b/src/components/detailViewComponents/AudioDetail.vue
@@ -9,7 +9,7 @@ import { picsum } from "@/helpers/picsum";
 import { detailProps } from "@/composables/useDetail";
 const props = defineProps(detailProps);
 
-import { audioPlayer, loadAudioPlayer, audio } from "@/composables/audioControls.js";
+import { audioPlayer, loadAudioPlayer, audio } from "@/composables/audioControls";
 
 const currentlyLoadedInPlayer = computed(() => props.file.hash === audioPlayer.value?.file.hash);
 const image = (file, width, height) => file?.src || picsum({ width, height, seed: file.hash });
diff --git a/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue b/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
index 7c1220b6..bb2eb5f0 100644
--- a/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
+++ b/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
@@ -5,7 +5,7 @@ import resourceURL from "@/helpers/resourceURL";
 import moment from "moment";
 import { elasticSearchEscape } from "@/helpers/ApiHelper";
 import { nsfwClassificationFormatter } from "@/helpers/nsfwClassifier";
-import { formatTime } from "@/composables/audioControls.js";
+import { formatTime } from "@/composables/audioControls";
 
 const route = useRoute();
 
diff --git a/src/components/pageLayout/AppFooter.vue b/src/components/pageLayout/AppFooter.vue
index 3c0a4720..9de8c26c 100644
--- a/src/components/pageLayout/AppFooter.vue
+++ b/src/components/pageLayout/AppFooter.vue
@@ -7,6 +7,8 @@ import { useDisplay } from "vuetify";
 const { mdAndUp, smAndUp } = useDisplay();
 import { mdiMastodon, mdiTwitter, mdiGithub, mdiHandCoin, mdiEmail } from "@mdi/js";
 
+import { footerVisible } from "@/composables/footer";
+
 const footer_links = [
   {
     icon: mdiMastodon,
@@ -34,8 +36,7 @@ const footer_links = [
 <template>
   <v-card
     v-if="route.name === 'Home' || (route.name === 'Search' && mdAndUp)"
-    v-scroll="onScroll"
-    :class="{ 'footer--hidden': hideFooter || audioPlayer || playlistVisible }"
+    :class="{ 'footer--hidden': !footerVisible || audioPlayer || playlistVisible }"
     position="fixed"
     variant="flat"
     tile
@@ -76,15 +77,7 @@ const footer_links = [
 export default {
   data: () => ({
     lastScrollPosition: 0,
-    hideFooter: false,
   }),
-  methods: {
-    onScroll() {
-      const { scrollTop } = document.documentElement;
-      this.hideFooter = scrollTop > 30 && scrollTop > this.lastScrollPosition;
-      this.lastScrollPosition = document.documentElement.scrollTop;
-    },
-  },
 };
 </script>
 
diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 87f74299..98c0fd68 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -80,5 +80,3 @@ import { togglePlaylist } from "@/composables/audioControls.ts";
     </v-container>
   </v-app-bar>
 </template>
-
-<style scoped></style>
diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index fce0fe70..fbaeef7f 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -9,7 +9,7 @@ import { audioPlayer } from "@/composables/audioControls";
 
 import { onBeforeUnmount } from "vue";
 onBeforeUnmount(() => {
-  audioPlayer.value.cleanup();
+  audioPlayer.value?.cleanUp();
 });
 
 import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index af750681..aa006dcd 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -1,8 +1,9 @@
-<script setup>
-import { useStore } from "vuex";
-const store = useStore();
-import VMarquee from "@/components/shared/VMarquee.vue";
-import { mdiMusic, mdiPlay, mdiPause, mdiAlert, mdiClose, mdiDotsVertical } from "@mdi/js";
+<script setup lang="ts">
+import { computed } from "vue";
+import store from "@/store";
+import { audioBank } from "../../store/modules/playlistStore";
+import { IFile } from "../../interfaces/IFile";
+import { mdiCircleSmall, mdiPlay, mdiDotsVertical } from "@mdi/js";
 import { useDisplay } from "vuetify";
 const { mdAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
@@ -10,17 +11,20 @@ import { picsum } from "@/helpers/picsum";
 import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
 
 const playlistEntries = store.getters["playlist/getPlaylist"].entries;
-import { playlistVisible, loadAudioPlayer, playPlaylistEntry } from "@/composables/audioControls";
+import { playlistVisible, playPlaylistEntry } from "@/composables/audioControls";
+import BlinkBlink from "../shared/BlinkBlink.vue";
+const audioEntry = (entry: IFile) => audioBank[entry.hash];
+const cursor = (entry: IFile) => (audioEntry(entry)?.error ? "default" : "pointer");
 </script>
 
 <template>
-  <v-fade-transition class="audio-player-card">
+  <v-fade-transition class="overflow-y-scroll vh-100">
     <v-card
       v-if="playlistVisible"
       position="fixed"
       width="100%"
-      height="80%"
-      class="mt-14 pb-6 overflow-y-auto"
+      class="overflow-y-auto"
+      style="z-index: 1000"
       color="black"
       rounded="0"
       flat
@@ -43,7 +47,7 @@ import { playlistVisible, loadAudioPlayer, playPlaylistEntry } from "@/composabl
               <v-icon :icon="mdiDotsVertical" />
               <v-list-item-avatar
                 rounded="0"
-                style="cursor: pointer"
+                :style="{ cursor: cursor(entry) }"
                 @click="playPlaylistEntry(entry)"
               >
                 <v-img
@@ -53,6 +57,7 @@ import { playlistVisible, loadAudioPlayer, playPlaylistEntry } from "@/composabl
                   :src="entry.src || picsum({ width: 75, height: 75, seed: entry.hash })"
                 >
                   <v-icon
+                    v-if="!audioEntry(entry).error"
                     size="42"
                     color="white"
                     style="
@@ -68,8 +73,16 @@ import { playlistVisible, loadAudioPlayer, playPlaylistEntry } from "@/composabl
               </v-list-item-avatar>
             </template>
             <v-row>
-              <v-col cols="6">
-                <v-list-item-title v-sane-html="fileTitle(entry)" />
+              <v-col cols="6" :class="audioEntry(entry)?.error ? 'text-grey-darken-1' : ''">
+                <v-list-item-title class="d-flex">
+                  <v-span v-sane-html="fileTitle(entry)" class="mx-1" />
+                  <blink-blink
+                    :blink="audioEntry(entry)?.loading"
+                    :off="!audioEntry(entry).loading"
+                  >
+                    <v-icon v-if="!audioEntry(entry).error" color="white" :icon="mdiCircleSmall" />
+                  </blink-blink>
+                </v-list-item-title>
               </v-col>
             </v-row>
           </v-list-item>
@@ -79,8 +92,12 @@ import { playlistVisible, loadAudioPlayer, playPlaylistEntry } from "@/composabl
   </v-fade-transition>
 </template>
 
-<style lang="scss" scoped>
-.audio-player-card {
-  transition: all 300ms ease-in-out;
+<style scoped>
+.vh-100 {
+  height: 100vh;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
 }
 </style>
diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index 0b09d10a..1349fc80 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -129,7 +129,7 @@ const queryPage = computed({
 </script>
 
 <template>
-  <v-container v-scroll="infiniteScroll" class="overflow-y-auto h-100">
+  <v-container v-scroll="infiniteScroll" class="overflow-y-hidden">
     <v-row dense>
       <v-col cols="12" xl="8" offset-xl="2">
         <v-card flat>
diff --git a/src/components/shared/BlinkBlink.vue b/src/components/shared/BlinkBlink.vue
new file mode 100644
index 00000000..1cd795d0
--- /dev/null
+++ b/src/components/shared/BlinkBlink.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const display = ref<boolean>(true);
+const props = defineProps({
+  speed: {
+    type: Number,
+    default: 500,
+  },
+  blink: {
+    type: Boolean,
+    default: true,
+  },
+  off: {
+    type: Boolean,
+    default: true,
+  },
+});
+setInterval(() => (display.value = !display.value), props.speed);
+</script>
+<template>
+  <div :class="{ hidden: (blink && display) || off }">
+    <slot />
+  </div>
+</template>
+<style scoped>
+.hidden {
+  visibility: hidden;
+}
+</style>
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index 5d73bdd2..297d6664 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -1,6 +1,7 @@
 import { ref } from "vue";
 import { IFile } from "../interfaces/IFile";
 import { Audio } from "./audioPlayer";
+import { audioBank } from "../store/modules/playlistStore";
 
 import store from "@/store";
 
@@ -16,13 +17,9 @@ export const playlistVisible = ref(false);
 export const togglePlaylist = () => {
   playlistVisible.value = !playlistVisible.value;
 };
-const audioBank = new Map<string, Audio>();
 
 export const setPlaylist = (entries: IFile[]) => {
   store.commit("playlist/setPlaylist", { entries });
-  for (const entry of entries) {
-    if (!audioBank.has(entry.hash)) audioBank.set(entry.hash, new Audio(entry));
-  }
 };
 
 export const enqueue = (entries: IFile[]) =>
@@ -33,8 +30,8 @@ export const clearPlaylist = () => {
 };
 
 export const playPlaylistEntry = (entry: IFile) => {
-  const audio = audioBank.get(entry.hash);
-  audio && loadAudioPlayer(audio);
+  const audio = audioBank[entry.hash];
+  audio && !audio.error && loadAudioPlayer(audio);
 };
 /**
  * @param secs
diff --git a/src/composables/audioPlayer.ts b/src/composables/audioPlayer.ts
index 9dc42665..71f01d68 100644
--- a/src/composables/audioPlayer.ts
+++ b/src/composables/audioPlayer.ts
@@ -87,8 +87,9 @@ export class Audio {
   }
 
   private reportError(message: string) {
-    console.error(message);
     this.error = message;
+    this.loading = false;
+    console.error(message);
   }
 
   /**
@@ -132,7 +133,7 @@ export class Audio {
   }
 
   cleanUp() {
-    clearInterval(this.interval);
+    this.interval && clearInterval(this.interval);
     this.player.off();
     this.player.unload();
     this.error = "";
diff --git a/src/store/index.js b/src/store/index.js
index 3bf6234e..a24d69d3 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,7 +1,7 @@
 import { createStore } from "vuex";
 import localStorage from "@/store/modules/localStorage";
 import { Types } from "@/helpers/typeHelper";
-import playlist from "./modules/playlist";
+import playlist from "./modules/playlistStore";
 import query from "./modules/query";
 import SearchResults from "./modules/SearchResults";
 
diff --git a/src/store/modules/playlist.ts b/src/store/modules/playlistStore.ts
similarity index 53%
rename from src/store/modules/playlist.ts
rename to src/store/modules/playlistStore.ts
index 8084a9a2..636747fa 100644
--- a/src/store/modules/playlist.ts
+++ b/src/store/modules/playlistStore.ts
@@ -1,20 +1,25 @@
+import { reactive, Ref, ref } from "vue";
 import { Module } from "vuex";
 import { IPlaylist } from "@/interfaces/IPlaylist";
+import { IFile } from "../../interfaces/IFile";
+import { Audio } from "../../composables/audioPlayer";
 
 export interface IPlaylistStoreState {
   activePlaylist?: number | undefined;
   playlists: IPlaylist[];
 }
 
-const defaultPlaylist = { entries: [] };
+const defaultPlaylist: IPlaylist = { entries: [] };
 
 export default <Module<any, unknown>>{
   namespaced: true,
   state: (): IPlaylistStoreState => {
     try {
+      const playlist: IPlaylist = JSON.parse(localStorage.playlist ?? null) ?? defaultPlaylist;
+      fillAudioBank(playlist.entries);
       return {
         activePlaylist: 0,
-        playlists: [JSON.parse(localStorage.playlist ?? null) ?? defaultPlaylist],
+        playlists: [playlist],
       };
     } catch (e) {
       return { playlists: [defaultPlaylist] };
@@ -36,8 +41,25 @@ export default <Module<any, unknown>>{
     },
   },
   getters: {
-    getPlaylist(state, getters, rootState: any) {
+    getPlaylist(state, getters, rootState: any): IPlaylist {
       return state.playlists?.[state.activePlaylist || 0] ?? rootState.localStorage.playlist;
     },
   },
 };
+
+// audioBank is used to make single Howl instances for audio files,
+// even when there are duplicates in the list
+interface dictionary {
+  [key: string]: Audio;
+}
+export const audioBank = reactive<dictionary>({});
+const fillAudioBank = (entries: IFile[], purge = true) => {
+  for (const entry of entries) {
+    if (!audioBank[entry.hash]) audioBank[entry.hash] = new Audio(entry);
+  }
+  if (!purge) return;
+  const keys = new Set(entries.map((entry) => entry.hash));
+  for (const hash in audioBank.value) {
+    if (!keys.has(hash)) delete audioBank[hash];
+  }
+};

From 5fe7a48692b12cba384ee8138d90ae3c5bde58d4 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Thu, 15 Sep 2022 22:45:38 +0200
Subject: [PATCH 10/56] got reactivity to work for the audio list

---
 src/components/pageLayout/PlayList.vue | 19 +++----
 src/composables/audioControls.ts       |  5 +-
 src/composables/audioPlayer.ts         | 79 +++++++++++++++++---------
 src/interfaces/IFile.ts                |  2 +
 src/store/modules/playlistStore.ts     | 40 ++++++++-----
 5 files changed, 88 insertions(+), 57 deletions(-)

diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index aa006dcd..bf9d952e 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import store from "@/store";
-import { audioBank } from "../../store/modules/playlistStore";
 import { IFile } from "../../interfaces/IFile";
 import { mdiCircleSmall, mdiPlay, mdiDotsVertical } from "@mdi/js";
 import { useDisplay } from "vuetify";
@@ -10,11 +9,10 @@ import { picsum } from "@/helpers/picsum";
 
 import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
 
-const playlistEntries = store.getters["playlist/getPlaylist"].entries;
+const playlistEntries = computed(() => store.getters["playlist/getPlaylist"].entries);
 import { playlistVisible, playPlaylistEntry } from "@/composables/audioControls";
 import BlinkBlink from "../shared/BlinkBlink.vue";
-const audioEntry = (entry: IFile) => audioBank[entry.hash];
-const cursor = (entry: IFile) => (audioEntry(entry)?.error ? "default" : "pointer");
+const cursor = (entry: IFile) => (entry.audio?.error ? "default" : "pointer");
 </script>
 
 <template>
@@ -57,7 +55,7 @@ const cursor = (entry: IFile) => (audioEntry(entry)?.error ? "default" : "pointe
                   :src="entry.src || picsum({ width: 75, height: 75, seed: entry.hash })"
                 >
                   <v-icon
-                    v-if="!audioEntry(entry).error"
+                    v-if="!entry.audio?.error"
                     size="42"
                     color="white"
                     style="
@@ -73,14 +71,11 @@ const cursor = (entry: IFile) => (audioEntry(entry)?.error ? "default" : "pointe
               </v-list-item-avatar>
             </template>
             <v-row>
-              <v-col cols="6" :class="audioEntry(entry)?.error ? 'text-grey-darken-1' : ''">
+              <v-col cols="6" :class="entry.audio?.error ? 'text-grey-darken-1' : ''">
                 <v-list-item-title class="d-flex">
-                  <v-span v-sane-html="fileTitle(entry)" class="mx-1" />
-                  <blink-blink
-                    :blink="audioEntry(entry)?.loading"
-                    :off="!audioEntry(entry).loading"
-                  >
-                    <v-icon v-if="!audioEntry(entry).error" color="white" :icon="mdiCircleSmall" />
+                  <v-span v-sane-html="entry.title" class="mx-1" />
+                  <blink-blink :blink="entry.audio?.loading" :off="!entry.audio.loading">
+                    <v-icon v-if="!entry.audio.error" color="white" :icon="mdiCircleSmall" />
                   </blink-blink>
                 </v-list-item-title>
               </v-col>
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index 297d6664..41163aa6 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -1,13 +1,11 @@
 import { ref } from "vue";
 import { IFile } from "../interfaces/IFile";
 import { Audio } from "./audioPlayer";
-import { audioBank } from "../store/modules/playlistStore";
 
 import store from "@/store";
 
 export const audioPlayer = ref<Audio | undefined>(undefined);
 
-export const audio = (file: IFile) => new Audio(file);
 export const loadAudioPlayer = (audio: Audio) => {
   console.log("Loading audio player", audio);
   audioPlayer.value = audio;
@@ -30,8 +28,7 @@ export const clearPlaylist = () => {
 };
 
 export const playPlaylistEntry = (entry: IFile) => {
-  const audio = audioBank[entry.hash];
-  audio && !audio.error && loadAudioPlayer(audio);
+  entry.audio && !entry.audio.error && loadAudioPlayer(entry.audio);
 };
 /**
  * @param secs
diff --git a/src/composables/audioPlayer.ts b/src/composables/audioPlayer.ts
index 71f01d68..796f2962 100644
--- a/src/composables/audioPlayer.ts
+++ b/src/composables/audioPlayer.ts
@@ -1,7 +1,8 @@
 import { getFileExtension } from "@/helpers/fileHelper";
-import { Howl, Howler, HowlErrorCallback } from "howler";
+import { Howl, Howler } from "howler";
 import getResourceURL from "@/helpers/resourceURL";
 import { IFile } from "../interfaces/IFile";
+import store from "@/store";
 
 const errorCode = {
   "1": "User aborted request",
@@ -10,15 +11,26 @@ const errorCode = {
   "4": "Resource unsuitable/unavailable",
 };
 
-export class Audio {
+export interface IAudio {
+  hash: string;
+  error: string;
+  loaded: boolean;
+  loading: boolean;
+  playing: boolean;
+  duration: number;
+  time: number | undefined;
+  interval?: number | undefined;
+  player?: Howl;
+}
+
+export class Audio implements IAudio {
   constructor(file: IFile, options = {}) {
-    this.file = file;
     const fileExtension = getFileExtension(file);
     if (!Howler.codecs(fileExtension)) {
       this.reportError(`Unsupported/undetected file type: '${fileExtension}'`);
       return;
     }
-
+    this.hash = file.hash;
     this.loading = true;
     this.player = new Howl({
       html5: true,
@@ -30,38 +42,41 @@ export class Audio {
         this.reportError(`Load Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
       },
       onload: () => {
-        console.log("loaded audio:", this.file);
         this.loading = false;
         this.loaded = true;
-        this.duration = this.player.duration() || 0;
+        this.duration = this.player?.duration() || 0;
+        this.commit();
       },
       onplay: () => {
         this.playing = true;
+        this.commit();
         this.interval = setInterval(() => {
-          this.time = this.player.seek();
+          this.time = this.player?.seek();
+          this.commit();
         }, 100);
       },
       onpause: () => {
         this.playing = false;
         clearInterval(this.interval);
+        this.commit();
       },
       onstop: () => {
         this.playing = false;
         clearInterval(this.interval);
+        this.commit();
       },
       onend: () => {
         this.playing = false;
         clearInterval(this.interval);
+        this.commit();
       },
       ...options,
     });
-
-    this.initialized = true;
   }
 
-  private interval: number | undefined;
-  initialized = false;
+  interval: number | undefined;
 
+  hash = "";
   error = "";
   loaded = false;
   loading = false;
@@ -69,8 +84,7 @@ export class Audio {
   duration = 0;
   time: number | undefined;
 
-  file: IFile;
-  player: Howl = {} as Howl;
+  player;
 
   get progress() {
     if (this.duration && this.time) {
@@ -82,14 +96,15 @@ export class Audio {
 
   set progress(percentage) {
     if (this.loaded) {
-      this.player.seek((percentage * this.duration) / 100);
+      this.player?.seek((percentage * this.duration) / 100);
     }
   }
 
-  private reportError(message: string) {
+  reportError(message: string) {
     this.error = message;
     this.loading = false;
-    console.error(message);
+    console.error("Audio Error:", message);
+    this.commit();
   }
 
   /**
@@ -97,15 +112,16 @@ export class Audio {
    */
   load() {
     return new Promise((resolve, reject) => {
-      if (!this.initialized) return reject("Error: Audio player has not been initialized");
+      if (!this.player) return reject("Error: Audio player has not been initialized");
       if (this.loaded) return resolve(undefined);
-      this.player.once("loaderror", () => {
+      this.player?.once("loaderror", () => {
         reject();
       });
-      this.player.once("load", () => resolve(undefined));
+      this.player?.once("load", () => resolve(undefined));
       if (!this.loading) {
         this.loading = true;
-        this.player.load();
+        this.player?.load();
+        this.commit();
       }
     });
   }
@@ -115,32 +131,39 @@ export class Audio {
    */
   play() {
     return new Promise((resolve, reject) => {
-      if (!this.initialized) return reject("Error: Audio player has not been initialized");
-      this.player.once("playerror", (source, message) => {
+      if (!this.player) return reject("Error: Audio player has not been initialized");
+      this.player?.once("playerror", (source, message) => {
         this.reportError(`Playback Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
         reject();
       });
-      this.player.once("end", () => {
+      this.player?.once("end", () => {
         resolve(undefined);
       });
-      this.player.play();
+      this.player?.play();
     });
   }
 
   pause() {
-    if (!this.initialized) return;
-    this.player.pause();
+    if (!this.player) return;
+    this.player?.pause();
   }
 
   cleanUp() {
     this.interval && clearInterval(this.interval);
-    this.player.off();
-    this.player.unload();
+    this.player?.off();
+    this.player?.unload();
     this.error = "";
     this.loaded = false;
     this.loading = false;
     this.playing = false;
     this.duration = 0;
     this.time = undefined;
+    this.commit();
+  }
+
+  commit() {
+    const { hash, error, loaded, loading, playing, duration, time } = this;
+    const payload = { hash, error, loaded, loading, playing, duration, time };
+    store.commit("playlist/setAudioState", payload);
   }
 }
diff --git a/src/interfaces/IFile.ts b/src/interfaces/IFile.ts
index 123b1b44..837c1571 100644
--- a/src/interfaces/IFile.ts
+++ b/src/interfaces/IFile.ts
@@ -1,3 +1,4 @@
+import { Audio } from "../composables/audioPlayer";
 export interface IReference {
   name: string;
   parent_hash: string;
@@ -20,4 +21,5 @@ export interface IFile {
   mimetype?: string;
   references: IReference[] | null;
   metadata?: IFileMetadata;
+  audio?: Audio;
 }
diff --git a/src/store/modules/playlistStore.ts b/src/store/modules/playlistStore.ts
index 636747fa..f214c20c 100644
--- a/src/store/modules/playlistStore.ts
+++ b/src/store/modules/playlistStore.ts
@@ -1,12 +1,12 @@
-import { reactive, Ref, ref } from "vue";
 import { Module } from "vuex";
 import { IPlaylist } from "@/interfaces/IPlaylist";
 import { IFile } from "../../interfaces/IFile";
-import { Audio } from "../../composables/audioPlayer";
+import { IAudio, Audio } from "../../composables/audioPlayer";
 
 export interface IPlaylistStoreState {
   activePlaylist?: number | undefined;
   playlists: IPlaylist[];
+  audioBank: Record<string, IAudio>;
 }
 
 const defaultPlaylist: IPlaylist = { entries: [] };
@@ -20,14 +20,16 @@ export default <Module<any, unknown>>{
       return {
         activePlaylist: 0,
         playlists: [playlist],
+        audioBank: fillAudioBank(playlist.entries),
       };
     } catch (e) {
-      return { playlists: [defaultPlaylist] };
+      return { playlists: [defaultPlaylist], audioBank: {} };
     }
   },
   mutations: {
     setPlaylist(state, playlist: IPlaylist) {
       state.playlists[state.activePlaylist || 0] = playlist;
+      state.audioBank = fillAudioBank(playlist.entries);
       this.commit("localStorage/setPlaylist", state.playlists[state.activePlaylist || 0]);
     },
     setActivePlaylist(state, playlist: number) {
@@ -39,27 +41,39 @@ export default <Module<any, unknown>>{
         ? undefined
         : state.playlists[state.activePlaylist || 0].entries[index];
     },
+    setAudioState(state, { hash, ...audio }) {
+      state.audioBank[hash] = {
+        ...state.audioBank[hash],
+        ...audio,
+      };
+    },
   },
   getters: {
-    getPlaylist(state, getters, rootState: any): IPlaylist {
-      return state.playlists?.[state.activePlaylist || 0] ?? rootState.localStorage.playlist;
+    getPlaylist(state): IPlaylist {
+      const playlist = state.playlists?.[state.activePlaylist || 0];
+      return {
+        ...playlist,
+        entries: playlist.entries.map((entry: IFile) => ({
+          ...entry,
+          audio: state.audioBank[entry.hash],
+        })),
+      };
     },
   },
 };
 
 // audioBank is used to make single Howl instances for audio files,
 // even when there are duplicates in the list
-interface dictionary {
-  [key: string]: Audio;
-}
-export const audioBank = reactive<dictionary>({});
 const fillAudioBank = (entries: IFile[], purge = true) => {
+  const audioBank: Record<string, IAudio> = {};
   for (const entry of entries) {
     if (!audioBank[entry.hash]) audioBank[entry.hash] = new Audio(entry);
   }
-  if (!purge) return;
-  const keys = new Set(entries.map((entry) => entry.hash));
-  for (const hash in audioBank.value) {
-    if (!keys.has(hash)) delete audioBank[hash];
+  if (purge) {
+    const keys = new Set(entries.map((entry) => entry.hash));
+    for (const hash in audioBank.value) {
+      if (!keys.has(hash)) delete audioBank[hash];
+    }
   }
+  return audioBank;
 };

From 6331010fbe538d779d227ade2c4556408b727bc2 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 16 Sep 2022 19:22:02 +0200
Subject: [PATCH 11/56] stuff works again

---
 src/components/pageLayout/AudioPlayer.vue |  30 ++--
 src/components/pageLayout/PlayList.vue    |  35 +++--
 src/components/shared/BlinkBlink.vue      |   2 +-
 src/composables/audioControls.ts          | 159 +++++++++++++++++++-
 src/composables/audioPlayer.ts            | 169 ----------------------
 src/helpers/fileHelper.ts                 |  16 +-
 src/interfaces/IFile.ts                   |   8 +-
 src/store/modules/playlistStore.ts        |  56 ++++---
 tsconfig.json                             |   3 +-
 9 files changed, 235 insertions(+), 243 deletions(-)
 delete mode 100644 src/composables/audioPlayer.ts

diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index fbaeef7f..3229757f 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -1,15 +1,26 @@
-<script setup>
+<script setup lang="ts">
+import { computed } from "vue";
 import VMarquee from "@/components/shared/VMarquee.vue";
 import { mdiMusic, mdiPlay, mdiPause, mdiAlert, mdiClose } from "@mdi/js";
 import { useDisplay } from "vuetify";
 const { mdAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
 
-import { audioPlayer } from "@/composables/audioControls";
+import { audioPlayer, formatTime } from "@/composables/audioControls";
 
-import { onBeforeUnmount } from "vue";
-onBeforeUnmount(() => {
-  audioPlayer.value?.cleanUp();
+const progress = computed({
+  get() {
+    if (audioPlayer.value.duration) {
+      return ((audioPlayer.value.time || 0) / audioPlayer.value.duration) * 100;
+    } else {
+      return 0;
+    }
+  },
+  set(percentage) {
+    if (audioPlayer.value.loaded) {
+      audioPlayer.value.player?.seek((percentage * audioPlayer.value.duration) / 100);
+    }
+  },
 });
 
 import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
@@ -18,7 +29,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
 <template>
   <v-fade-transition class="audio-player-card">
     <v-card
-      v-if="audioPlayer"
+      v-if="audioPlayer.file"
       style="z-index: 10000"
       position="fixed"
       location="bottom"
@@ -30,7 +41,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
       height="100"
     >
       <v-progress-linear
-        v-model="audioPlayer.progress"
+        v-model="progress"
         active
         style="position: absolute"
         color="ipfsPrimary-lighten-4"
@@ -44,7 +55,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
             aspect-ratio="1"
             bac
             gradient="to bottom, rgba(255,255,255,.1), rgba(255,255,255,.5)"
-            :src="picsum({ width: 75, height: 75, seed: audioPlayer.file.hash })"
+            :src="picsum({ width: 75, height: 75, seed: audioPlayer.file?.hash })"
           >
           </v-img>
           <v-icon
@@ -77,7 +88,8 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
           :class="mdAndUp ? 'flex-row ml-auto' : 'flex-column'"
         >
           <v-card-title :style="{ fontSize: mdAndUp ? '20px' : '16px' }"
-            >{{ audioPlayer.time }} / {{ audioPlayer.duration }}</v-card-title
+            >{{ formatTime(audioPlayer.time).join(" : ") }} /
+            {{ formatTime(audioPlayer.duration).join(" : ") }}</v-card-title
           >
           <div class="d-inline-flex flex-row">
             <v-btn
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index bf9d952e..5aa6d27e 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import store from "@/store";
-import { IFile } from "../../interfaces/IFile";
+import { audioPlayer, playlistVisible, playAudioFile } from "@/composables/audioControls";
 import { mdiCircleSmall, mdiPlay, mdiDotsVertical } from "@mdi/js";
 import { useDisplay } from "vuetify";
 const { mdAndUp } = useDisplay();
@@ -10,9 +10,7 @@ import { picsum } from "@/helpers/picsum";
 import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
 
 const playlistEntries = computed(() => store.getters["playlist/getPlaylist"].entries);
-import { playlistVisible, playPlaylistEntry } from "@/composables/audioControls";
 import BlinkBlink from "../shared/BlinkBlink.vue";
-const cursor = (entry: IFile) => (entry.audio?.error ? "default" : "pointer");
 </script>
 
 <template>
@@ -39,20 +37,26 @@ const cursor = (entry: IFile) => (entry.audio?.error ? "default" : "pointer");
             :active="isHovering"
             active-color="white"
             v-bind="props"
-            @dblclick="playPlaylistEntry(entry)"
+            @dblclick="playAudioFile(entry)"
           >
             <template #prepend>
               <v-icon :icon="mdiDotsVertical" />
               <v-list-item-avatar
                 rounded="0"
-                :style="{ cursor: cursor(entry) }"
-                @click="playPlaylistEntry(entry)"
+                :style="{ cursor: entry.audio?.error ? 'default' : 'pointer' }"
+                @click="playAudioFile(entry)"
               >
                 <v-img
                   aspect-ratio="1"
                   bac
-                  gradient="to bottom, rgba(255,255,255,.1), rgba(255,255,255,.5)"
-                  :src="entry.src || picsum({ width: 75, height: 75, seed: entry.hash })"
+                  :src="
+                    picsum({
+                      width: 75,
+                      height: 75,
+                      seed: entry.hash,
+                      grayscale: !!entry.audio?.error,
+                    })
+                  "
                 >
                   <v-icon
                     v-if="!entry.audio?.error"
@@ -71,12 +75,19 @@ const cursor = (entry: IFile) => (entry.audio?.error ? "default" : "pointer");
               </v-list-item-avatar>
             </template>
             <v-row>
-              <v-col cols="6" :class="entry.audio?.error ? 'text-grey-darken-1' : ''">
+              <v-col cols="12" :class="entry.audio?.error ? 'text-grey-darken-1' : ''">
                 <v-list-item-title class="d-flex">
-                  <v-span v-sane-html="entry.title" class="mx-1" />
-                  <blink-blink :blink="entry.audio?.loading" :off="!entry.audio.loading">
-                    <v-icon v-if="!entry.audio.error" color="white" :icon="mdiCircleSmall" />
+                  <span v-sane-html="fileTitle(entry)" class="mx-1" />
+                  <blink-blink
+                    v-if="entry.hash === audioPlayer?.file?.hash && audioPlayer?.loading"
+                  >
+                    <v-icon color="white" :icon="mdiCircleSmall" />
                   </blink-blink>
+                  <v-icon
+                    v-else-if="entry.hash === audioPlayer?.file?.hash && audioPlayer?.loaded"
+                    color="white"
+                    :icon="mdiCircleSmall"
+                  />
                 </v-list-item-title>
               </v-col>
             </v-row>
diff --git a/src/components/shared/BlinkBlink.vue b/src/components/shared/BlinkBlink.vue
index 1cd795d0..a3552bfb 100644
--- a/src/components/shared/BlinkBlink.vue
+++ b/src/components/shared/BlinkBlink.vue
@@ -12,7 +12,7 @@ const props = defineProps({
   },
   off: {
     type: Boolean,
-    default: true,
+    default: false,
   },
 });
 setInterval(() => (display.value = !display.value), props.speed);
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index 41163aa6..ec02d70b 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -1,16 +1,159 @@
 import { ref } from "vue";
 import { IFile } from "../interfaces/IFile";
-import { Audio } from "./audioPlayer";
 
 import store from "@/store";
+import { Howl, Howler } from "howler";
+import { getFileExtension } from "@/helpers/fileHelper";
+import getResourceURL from "@/helpers/resourceURL";
 
-export const audioPlayer = ref<Audio | undefined>(undefined);
-
-export const loadAudioPlayer = (audio: Audio) => {
-  console.log("Loading audio player", audio);
-  audioPlayer.value = audio;
+const errorCode = {
+  "1": "User aborted request",
+  "2": "Network error",
+  "3": "Decoding error",
+  "4": "Resource unsuitable/unavailable",
 };
 
+export interface IAudio {
+  file?: IFile;
+  error: string;
+  loaded: boolean;
+  loading: boolean;
+  playing: boolean;
+  duration: number;
+  time: number | undefined;
+  player?: Howl;
+  reportError: (message: string) => void;
+  load: (file?: IFile, options?: object) => Promise<unknown>;
+  play: (file?: IFile, options?: object) => Promise<unknown>;
+  pause: () => void;
+  initialize: (file: IFile, options?: object) => void;
+  cleanUp: () => void;
+}
+
+let interval: number;
+
+export const audioPlayer = ref<IAudio>({
+  error: "",
+  loaded: false,
+  loading: false,
+  playing: false,
+  duration: 0,
+  time: 0,
+  reportError(message) {
+    this.error = message;
+    this.loading = false;
+    console.error("Audio Error:", message);
+    store.commit("playlist/setAudioError", {
+      hash: this.file?.hash,
+      error: message,
+    });
+  },
+  /**
+   * returns promise which resolves when the file has loaded
+   */
+  load(file?: IFile, options = {}) {
+    return new Promise((resolve, reject) => {
+      // For debugging mainly; cause an error after 10s
+      if (file) {
+        console.log("Loading audio file in player", file);
+        this.initialize(file, options);
+      }
+      if (this.loaded) return resolve(undefined);
+      this.player?.once("loaderror", () => {
+        reject();
+      });
+      this.player?.once("load", () => resolve(undefined));
+      if (!this.loading) {
+        this.loading = true;
+        this.player?.load();
+      }
+    });
+  },
+
+  /**
+   * returns promise which resolves once the audiofile reaches the end
+   */
+  play(file?: IFile, options = {}) {
+    return new Promise((resolve, reject) => {
+      this.player?.once("playerror", (source, message) => {
+        this.reportError(`Playback Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
+        reject();
+      });
+      this.player?.once("end", () => {
+        resolve(undefined);
+      });
+      this.load(file, options)
+        .then(() => {
+          this.player?.play();
+        })
+        .catch((message) => {
+          this.reportError(message);
+        });
+    });
+  },
+
+  pause() {
+    if (!this.player) return;
+    this.player?.pause();
+  },
+
+  initialize(file: IFile, options = {}) {
+    const fileExtension = getFileExtension(file);
+    if (!Howler.codecs(fileExtension)) {
+      this.reportError(`Unsupported/undetected file type: '${fileExtension}'`);
+      return;
+    }
+    this.cleanUp();
+    this.file = file;
+    this.loading = true;
+    this.player = new Howl({
+      html5: true,
+      preload: "metadata",
+      autoplay: false,
+      src: [getResourceURL(file.hash)],
+      format: [fileExtension],
+      onloaderror: (source, message) => {
+        this.reportError(`Load Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
+      },
+      onload: () => {
+        this.loading = false;
+        this.loaded = true;
+        this.duration = this.player?.duration() || 0;
+      },
+      onplay: () => {
+        this.playing = true;
+        interval = setInterval(() => {
+          this.time = this.player?.seek();
+        }, 100);
+      },
+      onpause: () => {
+        this.playing = false;
+        clearInterval(interval);
+      },
+      onstop: () => {
+        this.playing = false;
+        clearInterval(interval);
+      },
+      onend: () => {
+        this.playing = false;
+        clearInterval(interval);
+      },
+      ...options,
+    });
+  },
+
+  cleanUp() {
+    this.player?.off();
+    this.player?.unload();
+    this.error = "";
+    this.loaded = false;
+    this.loading = false;
+    this.playing = false;
+    this.duration = 0;
+    this.time = 0;
+  },
+});
+
 export const playlistVisible = ref(false);
 export const togglePlaylist = () => {
   playlistVisible.value = !playlistVisible.value;
@@ -27,8 +170,8 @@ export const clearPlaylist = () => {
   store.commit("playlist/setPlaylist", { entries: [] });
 };
 
-export const playPlaylistEntry = (entry: IFile) => {
-  entry.audio && !entry.audio.error && loadAudioPlayer(entry.audio);
+export const playAudioFile = (file: IFile) => {
+  !file.audio?.error && audioPlayer.value.play(file);
 };
 /**
  * @param secs
diff --git a/src/composables/audioPlayer.ts b/src/composables/audioPlayer.ts
deleted file mode 100644
index 796f2962..00000000
--- a/src/composables/audioPlayer.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-import { getFileExtension } from "@/helpers/fileHelper";
-import { Howl, Howler } from "howler";
-import getResourceURL from "@/helpers/resourceURL";
-import { IFile } from "../interfaces/IFile";
-import store from "@/store";
-
-const errorCode = {
-  "1": "User aborted request",
-  "2": "Network error",
-  "3": "Decoding error",
-  "4": "Resource unsuitable/unavailable",
-};
-
-export interface IAudio {
-  hash: string;
-  error: string;
-  loaded: boolean;
-  loading: boolean;
-  playing: boolean;
-  duration: number;
-  time: number | undefined;
-  interval?: number | undefined;
-  player?: Howl;
-}
-
-export class Audio implements IAudio {
-  constructor(file: IFile, options = {}) {
-    const fileExtension = getFileExtension(file);
-    if (!Howler.codecs(fileExtension)) {
-      this.reportError(`Unsupported/undetected file type: '${fileExtension}'`);
-      return;
-    }
-    this.hash = file.hash;
-    this.loading = true;
-    this.player = new Howl({
-      html5: true,
-      preload: "metadata",
-      autoplay: false,
-      src: [getResourceURL(file.hash)],
-      format: [fileExtension],
-      onloaderror: (source, message) => {
-        this.reportError(`Load Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
-      },
-      onload: () => {
-        this.loading = false;
-        this.loaded = true;
-        this.duration = this.player?.duration() || 0;
-        this.commit();
-      },
-      onplay: () => {
-        this.playing = true;
-        this.commit();
-        this.interval = setInterval(() => {
-          this.time = this.player?.seek();
-          this.commit();
-        }, 100);
-      },
-      onpause: () => {
-        this.playing = false;
-        clearInterval(this.interval);
-        this.commit();
-      },
-      onstop: () => {
-        this.playing = false;
-        clearInterval(this.interval);
-        this.commit();
-      },
-      onend: () => {
-        this.playing = false;
-        clearInterval(this.interval);
-        this.commit();
-      },
-      ...options,
-    });
-  }
-
-  interval: number | undefined;
-
-  hash = "";
-  error = "";
-  loaded = false;
-  loading = false;
-  playing = false;
-  duration = 0;
-  time: number | undefined;
-
-  player;
-
-  get progress() {
-    if (this.duration && this.time) {
-      return (this.time / this.duration) * 100;
-    } else {
-      return 0;
-    }
-  }
-
-  set progress(percentage) {
-    if (this.loaded) {
-      this.player?.seek((percentage * this.duration) / 100);
-    }
-  }
-
-  reportError(message: string) {
-    this.error = message;
-    this.loading = false;
-    console.error("Audio Error:", message);
-    this.commit();
-  }
-
-  /**
-   * returns promise which resolves when the file has loaded
-   */
-  load() {
-    return new Promise((resolve, reject) => {
-      if (!this.player) return reject("Error: Audio player has not been initialized");
-      if (this.loaded) return resolve(undefined);
-      this.player?.once("loaderror", () => {
-        reject();
-      });
-      this.player?.once("load", () => resolve(undefined));
-      if (!this.loading) {
-        this.loading = true;
-        this.player?.load();
-        this.commit();
-      }
-    });
-  }
-
-  /**
-   * returns promise which resolves once the audiofile reaches the end
-   */
-  play() {
-    return new Promise((resolve, reject) => {
-      if (!this.player) return reject("Error: Audio player has not been initialized");
-      this.player?.once("playerror", (source, message) => {
-        this.reportError(`Playback Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
-        reject();
-      });
-      this.player?.once("end", () => {
-        resolve(undefined);
-      });
-      this.player?.play();
-    });
-  }
-
-  pause() {
-    if (!this.player) return;
-    this.player?.pause();
-  }
-
-  cleanUp() {
-    this.interval && clearInterval(this.interval);
-    this.player?.off();
-    this.player?.unload();
-    this.error = "";
-    this.loaded = false;
-    this.loading = false;
-    this.playing = false;
-    this.duration = 0;
-    this.time = undefined;
-    this.commit();
-  }
-
-  commit() {
-    const { hash, error, loaded, loading, playing, duration, time } = this;
-    const payload = { hash, error, loaded, loading, playing, duration, time };
-    store.commit("playlist/setAudioState", payload);
-  }
-}
diff --git a/src/helpers/fileHelper.ts b/src/helpers/fileHelper.ts
index 503643bb..c787a7e5 100644
--- a/src/helpers/fileHelper.ts
+++ b/src/helpers/fileHelper.ts
@@ -1,4 +1,5 @@
 import * as mime from "mime/lite";
+import { IFile } from "../interfaces/IFile";
 
 // Howler (audio player) requires the following extensions:
 // "mp3", "mpeg", "opus", "ogg", "oga", "wav", "aac", "caf", "m4a", "m4b",
@@ -36,18 +37,16 @@ mime.define(
  * @param file
  * @returns {string|string|*}
  */
-export function getFileExtension(file) {
+export function getFileExtension(file: IFile): string {
   // Mimetype is leading
-  console.log(file);
   if (file.mimetype) {
     const ext = mime.getExtension(file.mimetype);
     if (ext) return ext;
   }
-  if (file.metadata?.metadata["Content-Type"]) {
+  if (file.metadata?.metadata?.["Content-Type"][0]) {
     const ext = mime.getExtension(file.metadata.metadata["Content-Type"][0].split(" ")[0]);
     if (ext) return ext;
   }
-
   const filename = file.references?.[0]?.name;
   if (filename) {
     // Get filename extension, dealing with edge cases
@@ -55,12 +54,11 @@ export function getFileExtension(file) {
     /* eslint no-bitwise: ["error", { "allow": [">>>"] }] */
     return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
   }
-
   return "";
 }
-export const fileTitle = (file) => {
-  return file.metadata?.metadata?.["title"] || file.title || file.hash;
+export const fileTitle = (file: IFile): string => {
+  return file.metadata?.metadata?.["title"]?.[0] || file.title || file.hash;
 };
-export const fileAuthor = (file) => {
-  return file.metadata?.metadata?.["dc:creator"] || file.author || undefined;
+export const fileAuthor = (file: IFile): string | undefined => {
+  return file.metadata?.metadata?.["dc:creator"]?.[0] || file.author || undefined;
 };
diff --git a/src/interfaces/IFile.ts b/src/interfaces/IFile.ts
index 837c1571..b9c84851 100644
--- a/src/interfaces/IFile.ts
+++ b/src/interfaces/IFile.ts
@@ -1,4 +1,3 @@
-import { Audio } from "../composables/audioPlayer";
 export interface IReference {
   name: string;
   parent_hash: string;
@@ -10,16 +9,19 @@ export interface IFileMetadata {
     language: string;
     rawScore: number;
   };
-  metadata?: object;
+  metadata?: Record<string, string[]>;
 }
 export interface IFile {
   hash: string;
   "first-seen": string;
   "last-seen": string;
   title?: string;
+  author?: string;
   size?: number;
   mimetype?: string;
   references: IReference[] | null;
   metadata?: IFileMetadata;
-  audio?: Audio;
+  audio?: {
+    error: string;
+  };
 }
diff --git a/src/store/modules/playlistStore.ts b/src/store/modules/playlistStore.ts
index f214c20c..06469c82 100644
--- a/src/store/modules/playlistStore.ts
+++ b/src/store/modules/playlistStore.ts
@@ -1,12 +1,10 @@
 import { Module } from "vuex";
 import { IPlaylist } from "@/interfaces/IPlaylist";
 import { IFile } from "../../interfaces/IFile";
-import { IAudio, Audio } from "../../composables/audioPlayer";
 
 export interface IPlaylistStoreState {
   activePlaylist?: number | undefined;
   playlists: IPlaylist[];
-  audioBank: Record<string, IAudio>;
 }
 
 const defaultPlaylist: IPlaylist = { entries: [] };
@@ -16,20 +14,17 @@ export default <Module<any, unknown>>{
   state: (): IPlaylistStoreState => {
     try {
       const playlist: IPlaylist = JSON.parse(localStorage.playlist ?? null) ?? defaultPlaylist;
-      fillAudioBank(playlist.entries);
       return {
         activePlaylist: 0,
         playlists: [playlist],
-        audioBank: fillAudioBank(playlist.entries),
       };
     } catch (e) {
-      return { playlists: [defaultPlaylist], audioBank: {} };
+      return { playlists: [defaultPlaylist] };
     }
   },
   mutations: {
     setPlaylist(state, playlist: IPlaylist) {
       state.playlists[state.activePlaylist || 0] = playlist;
-      state.audioBank = fillAudioBank(playlist.entries);
       this.commit("localStorage/setPlaylist", state.playlists[state.activePlaylist || 0]);
     },
     setActivePlaylist(state, playlist: number) {
@@ -41,39 +36,38 @@ export default <Module<any, unknown>>{
         ? undefined
         : state.playlists[state.activePlaylist || 0].entries[index];
     },
-    setAudioState(state, { hash, ...audio }) {
-      state.audioBank[hash] = {
-        ...state.audioBank[hash],
-        ...audio,
-      };
+    setAudioError(state, { hash, error }) {
+      for (const playlist of state.playlists) {
+        for (const entry of playlist.entries) {
+          if (entry.hash === hash) {
+            entry.audio = {
+              error,
+            };
+          }
+        }
+      }
     },
   },
   getters: {
     getPlaylist(state): IPlaylist {
       const playlist = state.playlists?.[state.activePlaylist || 0];
-      return {
-        ...playlist,
-        entries: playlist.entries.map((entry: IFile) => ({
-          ...entry,
-          audio: state.audioBank[entry.hash],
-        })),
-      };
+      return playlist;
     },
   },
 };
 
 // audioBank is used to make single Howl instances for audio files,
 // even when there are duplicates in the list
-const fillAudioBank = (entries: IFile[], purge = true) => {
-  const audioBank: Record<string, IAudio> = {};
-  for (const entry of entries) {
-    if (!audioBank[entry.hash]) audioBank[entry.hash] = new Audio(entry);
-  }
-  if (purge) {
-    const keys = new Set(entries.map((entry) => entry.hash));
-    for (const hash in audioBank.value) {
-      if (!keys.has(hash)) delete audioBank[hash];
-    }
-  }
-  return audioBank;
-};
+// const fillAudioBank = (entries: IFile[], purge = true) => {
+//   const audioBank: Record<string, IAudio> = {};
+//   for (const entry of entries) {
+//     if (!audioBank[entry.hash]) audioBank[entry.hash] = new Audio(entry);
+//   }
+//   if (purge) {
+//     const keys = new Set(entries.map((entry) => entry.hash));
+//     for (const hash in audioBank.value) {
+//       if (!keys.has(hash)) delete audioBank[hash];
+//     }
+//   }
+//   return audioBank;
+// };
diff --git a/tsconfig.json b/tsconfig.json
index 66b53b4c..fedd9e91 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,7 +29,8 @@
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-     "paths": {
+    "baseUrl": ".",
+    "paths": {
        "@/*": [
          "./src/*"
        ]

From 2d482fa710f9e80338b3da0542aacac5cc96193c Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 16 Sep 2022 22:54:28 +0200
Subject: [PATCH 12/56] playlist playing working

---
 src/App.vue                                   | 16 ++--
 .../detailViewComponents/AudioDetail.vue      | 19 +----
 src/components/pageLayout/AppHeader.vue       |  1 -
 src/components/pageLayout/AudioPlayer.vue     | 14 +++-
 src/components/pageLayout/PlayList.vue        |  6 +-
 src/composables/audioControls.ts              | 78 ++++++++++++-------
 src/composables/footer.js                     |  3 +
 7 files changed, 79 insertions(+), 58 deletions(-)
 create mode 100644 src/composables/footer.js

diff --git a/src/App.vue b/src/App.vue
index 7ebf17e0..1aa8a4c8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@ const route = useRoute();
   <v-app dark hidden>
     <app-header v-if="route.name !== 'Home'" />
 
-    <v-main id="main" class="pb-15">
+    <v-main>
       <play-list />
       <router-view />
     </v-main>
@@ -52,11 +52,11 @@ export default {
   }
 }
 
-#main {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
+//#main {
+//  position: absolute;
+//  top: 0;
+//  left: 0;
+//  bottom: 0;
+//  right: 0;
+//}
 </style>
diff --git a/src/components/detailViewComponents/AudioDetail.vue b/src/components/detailViewComponents/AudioDetail.vue
index b52cf36f..4b69de1d 100644
--- a/src/components/detailViewComponents/AudioDetail.vue
+++ b/src/components/detailViewComponents/AudioDetail.vue
@@ -9,9 +9,9 @@ import { picsum } from "@/helpers/picsum";
 import { detailProps } from "@/composables/useDetail";
 const props = defineProps(detailProps);
 
-import { audioPlayer, loadAudioPlayer, audio } from "@/composables/audioControls";
+import { audioPlayer, playAudioFile, pauseAudio } from "@/composables/audioControls";
 
-const currentlyLoadedInPlayer = computed(() => props.file.hash === audioPlayer.value?.file.hash);
+const currentlyLoadedInPlayer = computed(() => props.file.hash === audioPlayer.value?.file?.hash);
 const image = (file, width, height) => file?.src || picsum({ width, height, seed: file.hash });
 const imgSrc = computed(() => image(props.file, 400, 300));
 </script>
@@ -34,20 +34,9 @@ const imgSrc = computed(() => image(props.file, 400, 300));
         v-else-if="currentlyLoadedInPlayer && audioPlayer.playing"
         title="Pause"
         :icon="mdiPause"
-        @click="audioPlayer.pause"
-      />
-      <AudioDetailButton
-        v-else-if="currentlyLoadedInPlayer"
-        title="Play"
-        :icon="mdiPlay"
-        @click="audioPlayer.play"
-      />
-      <AudioDetailButton
-        v-else
-        title="Play"
-        :icon="mdiPlay"
-        @click="loadAudioPlayer(audio(file))"
+        @click="pauseAudio"
       />
+      <AudioDetailButton v-else title="Play" :icon="mdiPlay" @click="playAudioFile(file)" />
     </v-img>
   </generic-detail>
 </template>
diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 98c0fd68..8262400e 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -23,7 +23,6 @@ import { togglePlaylist } from "@/composables/audioControls.ts";
 
 <template>
   <v-app-bar
-    app
     class="px-4"
     height="56"
     theme="route.name === Search ? 'dark' : 'light'"
diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index 3229757f..b6b8808d 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -6,7 +6,13 @@ import { useDisplay } from "vuetify";
 const { mdAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
 
-import { audioPlayer, formatTime } from "@/composables/audioControls";
+import {
+  audioPlayer,
+  formatTime,
+  playAudioFile,
+  pauseAudio,
+  cleanUpAudioPlayer,
+} from "@/composables/audioControls";
 
 const progress = computed({
   get() {
@@ -113,7 +119,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
               :size="mdAndUp ? 'large' : 'default'"
               :icon="mdiPause"
               title="Pause"
-              @click="audioPlayer.pause"
+              @click="pauseAudio"
             />
             <v-btn
               v-else
@@ -121,7 +127,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
               :size="mdAndUp ? 'large' : 'default'"
               :icon="mdiPlay"
               title="Play"
-              @click="audioPlayer.play"
+              @click="playAudioFile"
             />
             <v-btn
               class="bg-ipfsPrimary-lighten-1 ml-2"
@@ -129,7 +135,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
               :size="mdAndUp ? 'large' : 'default'"
               :icon="mdiClose"
               title="Close"
-              @click="audioPlayer.cleanUp"
+              @click="cleanUpAudioPlayer"
             />
           </div>
         </div>
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index 5aa6d27e..442965fe 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import store from "@/store";
-import { audioPlayer, playlistVisible, playAudioFile } from "@/composables/audioControls";
+import { audioPlayer, playlistVisible, startPlaylist } from "@/composables/audioControls";
 import { mdiCircleSmall, mdiPlay, mdiDotsVertical } from "@mdi/js";
 import { useDisplay } from "vuetify";
 const { mdAndUp } = useDisplay();
@@ -37,14 +37,14 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
             :active="isHovering"
             active-color="white"
             v-bind="props"
-            @dblclick="playAudioFile(entry)"
+            @dblclick="startPlaylist(index)"
           >
             <template #prepend>
               <v-icon :icon="mdiDotsVertical" />
               <v-list-item-avatar
                 rounded="0"
                 :style="{ cursor: entry.audio?.error ? 'default' : 'pointer' }"
-                @click="playAudioFile(entry)"
+                @click="startPlaylist(index)"
               >
                 <v-img
                   aspect-ratio="1"
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index ec02d70b..d8f7247f 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -22,9 +22,9 @@ export interface IAudio {
   duration: number;
   time: number | undefined;
   player?: Howl;
-  reportError: (message: string) => void;
-  load: (file?: IFile, options?: object) => Promise<unknown>;
-  play: (file?: IFile, options?: object) => Promise<unknown>;
+  reportError: (hash: string | undefined, message: string) => void;
+  load: (file?: IFile, options?: object) => Promise<IAudio>;
+  play: (file?: IFile, options?: object) => Promise<IAudio>;
   pause: () => void;
   initialize: (file: IFile, options?: object) => void;
   cleanUp: () => void;
@@ -39,30 +39,29 @@ export const audioPlayer = ref<IAudio>({
   playing: false,
   duration: 0,
   time: 0,
-  reportError(message) {
+  reportError(hash, message) {
     this.error = message;
     this.loading = false;
-    console.error("Audio Error:", message);
+    console.error("Audio Error:", message, this, hash);
     store.commit("playlist/setAudioError", {
-      hash: this.file?.hash,
+      hash,
       error: message,
     });
   },
   /**
    * returns promise which resolves when the file has loaded
    */
-  load(file?: IFile, options = {}) {
+  load(file?: IFile, options = {}): Promise<IAudio> {
     return new Promise((resolve, reject) => {
       // For debugging mainly; cause an error after 10s
       if (file) {
-        console.log("Loading audio file in player", file);
         this.initialize(file, options);
       }
-      if (this.loaded) return resolve(undefined);
+      if (this.loaded) return resolve(this);
       this.player?.once("loaderror", () => {
         reject();
       });
-      this.player?.once("load", () => resolve(undefined));
+      this.player?.once("load", () => resolve(this));
       if (!this.loading) {
         this.loading = true;
         this.player?.load();
@@ -73,34 +72,38 @@ export const audioPlayer = ref<IAudio>({
   /**
    * returns promise which resolves once the audiofile reaches the end
    */
-  play(file?: IFile, options = {}) {
+  play(file?: IFile, options = {}): Promise<IAudio> {
     return new Promise((resolve, reject) => {
-      this.player?.once("playerror", (source, message) => {
-        this.reportError(`Playback Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
-        reject();
-      });
-      this.player?.once("end", () => {
-        resolve(undefined);
-      });
       this.load(file, options)
-        .then(() => {
-          this.player?.play();
+        .then((audio) => {
+          this.player?.once("playerror", (source, message) => {
+            this.reportError(
+              this.file?.hash,
+              `Playback Error: ${errorCode[message as 1 | 2 | 3 | 4]}`
+            );
+            reject();
+          });
+          this.player?.once("end", () => {
+            resolve(this);
+          });
+          audio.player?.play();
         })
         .catch((message) => {
-          this.reportError(message);
+          // no need for reporting, because this is handled in a hook set in initialize
+          resolve(this);
         });
     });
   },
 
   pause() {
     if (!this.player) return;
-    this.player?.pause();
+    this.player.pause();
   },
 
   initialize(file: IFile, options = {}) {
     const fileExtension = getFileExtension(file);
     if (!Howler.codecs(fileExtension)) {
-      this.reportError(`Unsupported/undetected file type: '${fileExtension}'`);
+      this.reportError(file.hash, `Unsupported/undetected file type: '${fileExtension}'`);
       return;
     }
     this.cleanUp();
@@ -113,7 +116,7 @@ export const audioPlayer = ref<IAudio>({
       src: [getResourceURL(file.hash)],
       format: [fileExtension],
       onloaderror: (source, message) => {
-        this.reportError(`Load Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
+        this.reportError(file.hash, `Load Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
       },
       onload: () => {
         this.loading = false;
@@ -145,6 +148,7 @@ export const audioPlayer = ref<IAudio>({
   cleanUp() {
     this.player?.off();
     this.player?.unload();
+    this.file = undefined;
     this.error = "";
     this.loaded = false;
     this.loading = false;
@@ -159,20 +163,40 @@ export const togglePlaylist = () => {
   playlistVisible.value = !playlistVisible.value;
 };
 
-export const setPlaylist = (entries: IFile[]) => {
+export const setPlaylist = (entries: IFile[], autoPlay = true) => {
   store.commit("playlist/setPlaylist", { entries });
+  if (autoPlay) startPlaylist();
 };
 
 export const enqueue = (entries: IFile[]) =>
-  setPlaylist(store.getters["playlist/getPlaylist"].entries.concat(entries));
+  setPlaylist(store.getters["playlist/getPlaylist"].entries.concat(entries), false);
 
 export const clearPlaylist = () => {
   store.commit("playlist/setPlaylist", { entries: [] });
 };
 
+export const startPlaylist = async (index = 0) => {
+  for (let i = index; i < store.getters["playlist/getPlaylist"].entries.length; i++) {
+    console.log("starting song:", i, store.getters["playlist/getPlaylist"].entries[i]);
+    await playAudioFile(store.getters["playlist/getPlaylist"].entries[i]);
+  }
+};
+
 export const playAudioFile = (file: IFile) => {
-  !file.audio?.error && audioPlayer.value.play(file);
+  return new Promise((resolve, reject) => {
+    if (file.audio?.error) reject(file.audio.error);
+    audioPlayer.value.play(file).then(resolve).catch(reject);
+  });
 };
+
+export const pauseAudio = () => {
+  audioPlayer.value?.pause();
+};
+
+export const cleanUpAudioPlayer = () => {
+  audioPlayer.value?.cleanUp();
+};
+
 /**
  * @param secs
  * @returns [string, string]
diff --git a/src/composables/footer.js b/src/composables/footer.js
new file mode 100644
index 00000000..416b72c5
--- /dev/null
+++ b/src/composables/footer.js
@@ -0,0 +1,3 @@
+import { ref } from "vue";
+
+export const footerVisible = ref(true);

From 4148a3f631b747540d53d7c91d2183290aa5a0a9 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sat, 17 Sep 2022 00:52:50 +0200
Subject: [PATCH 13/56] add skip controls to player. Add blinking play button
 for song that is playing. Better loading indicator

---
 src/components/pageLayout/AudioPlayer.vue | 26 +++++++-
 src/components/pageLayout/PlayList.vue    | 74 ++++++++++++++---------
 src/components/shared/VMarquee.vue        | 20 +++++-
 src/composables/audioControls.ts          | 33 ++++++++--
 4 files changed, 116 insertions(+), 37 deletions(-)

diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index b6b8808d..725b0a0d 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import VMarquee from "@/components/shared/VMarquee.vue";
-import { mdiMusic, mdiPlay, mdiPause, mdiAlert, mdiClose } from "@mdi/js";
+import {
+  mdiMusic,
+  mdiPlay,
+  mdiPause,
+  mdiAlert,
+  mdiClose,
+  mdiSkipNext,
+  mdiSkipPrevious,
+} from "@mdi/js";
 import { useDisplay } from "vuetify";
 const { mdAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
@@ -12,6 +20,8 @@ import {
   playAudioFile,
   pauseAudio,
   cleanUpAudioPlayer,
+  playlistSkipPrevious,
+  playlistSkipNext,
 } from "@/composables/audioControls";
 
 const progress = computed({
@@ -98,6 +108,13 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
             {{ formatTime(audioPlayer.duration).join(" : ") }}</v-card-title
           >
           <div class="d-inline-flex flex-row">
+            <v-btn
+              class="bg-ipfsPrimary-lighten-1 ml-2"
+              :size="mdAndUp ? 'large' : 'default'"
+              :icon="mdiSkipPrevious"
+              title="Pause"
+              @click="playlistSkipPrevious"
+            />
             <v-btn
               v-if="audioPlayer.error"
               class="bg-ipfsPrimary-lighten-1 ml-2"
@@ -129,6 +146,13 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
               title="Play"
               @click="playAudioFile"
             />
+            <v-btn
+              class="bg-ipfsPrimary-lighten-1 ml-2"
+              :size="mdAndUp ? 'large' : 'default'"
+              :icon="mdiSkipNext"
+              title="Pause"
+              @click="playlistSkipNext"
+            />
             <v-btn
               class="bg-ipfsPrimary-lighten-1 ml-2"
               :class="{ 'mr-3': mdAndUp }"
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index 442965fe..49f081e9 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -11,6 +11,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
 
 const playlistEntries = computed(() => store.getters["playlist/getPlaylist"].entries);
 import BlinkBlink from "../shared/BlinkBlink.vue";
+import VMarquee from "@/components/shared/VMarquee.vue";
 </script>
 
 <template>
@@ -40,7 +41,7 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
             @dblclick="startPlaylist(index)"
           >
             <template #prepend>
-              <v-icon :icon="mdiDotsVertical" />
+              <v-icon :icon="mdiDotsVertical" size="22" />
               <v-list-item-avatar
                 rounded="0"
                 :style="{ cursor: entry.audio?.error ? 'default' : 'pointer' }"
@@ -58,37 +59,54 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
                     })
                   "
                 >
-                  <v-icon
-                    v-if="!entry.audio?.error"
-                    size="42"
-                    color="white"
-                    style="
-                      opacity: 0.6;
-                      position: absolute;
-                      top: 50%;
-                      left: 50%;
-                      transform: translate(-50%, -50%);
-                    "
-                    :icon="mdiPlay"
-                  />
-                </v-img>
-              </v-list-item-avatar>
-            </template>
-            <v-row>
-              <v-col cols="12" :class="entry.audio?.error ? 'text-grey-darken-1' : ''">
-                <v-list-item-title class="d-flex">
-                  <span v-sane-html="fileTitle(entry)" class="mx-1" />
                   <blink-blink
                     v-if="entry.hash === audioPlayer?.file?.hash && audioPlayer?.loading"
                   >
-                    <v-icon color="white" :icon="mdiCircleSmall" />
+                    <v-icon
+                      style="
+                        opacity: 0.9;
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                      "
+                      color="white"
+                      :icon="mdiCircleSmall"
+                    />
                   </blink-blink>
-                  <v-icon
-                    v-else-if="entry.hash === audioPlayer?.file?.hash && audioPlayer?.loaded"
-                    color="white"
-                    :icon="mdiCircleSmall"
-                  />
-                </v-list-item-title>
+                  <blink-blink
+                    v-else
+                    :blink="entry.hash === audioPlayer?.file?.hash && audioPlayer?.playing"
+                  >
+                    <v-icon
+                      v-if="!entry.audio?.error"
+                      size="42"
+                      color="white"
+                      style="
+                        opacity: 0.9;
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                      "
+                      :icon="mdiPlay"
+                    />
+                  </blink-blink>
+                </v-img>
+              </v-list-item-avatar>
+            </template>
+            <v-row>
+              <v-col cols="8" :class="entry.audio?.error ? 'text-grey-darken-1' : ''">
+                <v-marquee :active="isHovering" speed="6">
+                  <v-list-item-title class="d-flex">
+                    <span
+                      v-sane-html="
+                        `${[fileTitle(entry), fileAuthor(entry)].filter((e) => !!e).join(' - ')}`
+                      "
+                      class="mx-1"
+                    />
+                  </v-list-item-title>
+                </v-marquee>
               </v-col>
             </v-row>
           </v-list-item>
diff --git a/src/components/shared/VMarquee.vue b/src/components/shared/VMarquee.vue
index a7ba5a49..5c0f5350 100644
--- a/src/components/shared/VMarquee.vue
+++ b/src/components/shared/VMarquee.vue
@@ -1,5 +1,16 @@
 <script setup lang="ts">
 import { ref, onBeforeMount, onBeforeUnmount, onMounted, onUpdated } from "vue";
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: true,
+  },
+  speed: {
+    type: String,
+    default: "10",
+  },
+});
+const time = `${props.speed}s`;
 
 const marquee = ref({} as HTMLDivElement);
 
@@ -27,7 +38,12 @@ onUpdated(() => {
 </script>
 
 <template>
-  <div ref="marquee" data-id="v-marquee" :class="{ bounce: overflowing }" style="overflow: hidden">
+  <div
+    ref="marquee"
+    data-id="v-marquee"
+    :class="{ bounce: active && overflowing }"
+    style="overflow: hidden"
+  >
     <div style="display: block; width: fit-content; height: fit-content">
       <slot />
     </div>
@@ -44,7 +60,7 @@ onUpdated(() => {
   height: 100%;
   text-align: center;
   transform: translateX(0%);
-  animation: bouncing-text 10s linear infinite alternate;
+  animation: bouncing-text v-bind(time) linear infinite alternate;
 }
 
 @keyframes bouncing-text {
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index d8f7247f..9d07dd11 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -6,6 +6,8 @@ import { Howl, Howler } from "howler";
 import { getFileExtension } from "@/helpers/fileHelper";
 import getResourceURL from "@/helpers/resourceURL";
 
+const abortController = new AbortController();
+
 const errorCode = {
   "1": "User aborted request",
   "2": "Network error",
@@ -53,7 +55,9 @@ export const audioPlayer = ref<IAudio>({
    */
   load(file?: IFile, options = {}): Promise<IAudio> {
     return new Promise((resolve, reject) => {
-      // For debugging mainly; cause an error after 10s
+      abortController.signal.addEventListener("abort", () => {
+        reject();
+      });
       if (file) {
         this.initialize(file, options);
       }
@@ -74,6 +78,9 @@ export const audioPlayer = ref<IAudio>({
    */
   play(file?: IFile, options = {}): Promise<IAudio> {
     return new Promise((resolve, reject) => {
+      abortController.signal.addEventListener("abort", () => {
+        reject();
+      });
       this.load(file, options)
         .then((audio) => {
           this.player?.once("playerror", (source, message) => {
@@ -83,6 +90,9 @@ export const audioPlayer = ref<IAudio>({
             );
             reject();
           });
+          this.player?.once("stop", () => {
+            resolve(this);
+          });
           this.player?.once("end", () => {
             resolve(this);
           });
@@ -165,7 +175,7 @@ export const togglePlaylist = () => {
 
 export const setPlaylist = (entries: IFile[], autoPlay = true) => {
   store.commit("playlist/setPlaylist", { entries });
-  if (autoPlay) startPlaylist();
+  if (autoPlay) startPlaylist(0);
 };
 
 export const enqueue = (entries: IFile[]) =>
@@ -175,14 +185,25 @@ export const clearPlaylist = () => {
   store.commit("playlist/setPlaylist", { entries: [] });
 };
 
-export const startPlaylist = async (index = 0) => {
-  for (let i = index; i < store.getters["playlist/getPlaylist"].entries.length; i++) {
-    console.log("starting song:", i, store.getters["playlist/getPlaylist"].entries[i]);
-    await playAudioFile(store.getters["playlist/getPlaylist"].entries[i]);
+let playlistIndex = 0;
+export const startPlaylist = async (index?: number) => {
+  if (index !== undefined) playlistIndex = index;
+  while (playlistIndex < store.getters["playlist/getPlaylist"].entries.length) {
+    console.log("starting song:", playlistIndex);
+    await playAudioFile(store.getters["playlist/getPlaylist"].entries[playlistIndex]);
+    playlistIndex++;
   }
 };
+export const playlistSkipPrevious = () => {
+  startPlaylist(playlistIndex - 1);
+};
+
+export const playlistSkipNext = () => {
+  startPlaylist(playlistIndex + 1);
+};
 
 export const playAudioFile = (file: IFile) => {
+  abortController.abort();
   return new Promise((resolve, reject) => {
     if (file.audio?.error) reject(file.audio.error);
     audioPlayer.value.play(file).then(resolve).catch(reject);

From 7f50204587bf60525ace923454c0546b118b6f38 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sat, 17 Sep 2022 01:12:22 +0200
Subject: [PATCH 14/56] fix: cancel audio playback when play video

---
 src/components/pageLayout/PlayList.vue | 2 +-
 src/composables/audioControls.ts       | 8 +-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index 49f081e9..c46f3a34 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -96,7 +96,7 @@ import VMarquee from "@/components/shared/VMarquee.vue";
               </v-list-item-avatar>
             </template>
             <v-row>
-              <v-col cols="8" :class="entry.audio?.error ? 'text-grey-darken-1' : ''">
+              <v-col :class="entry.audio?.error ? 'text-grey-darken-1' : ''">
                 <v-marquee :active="isHovering" speed="6">
                   <v-list-item-title class="d-flex">
                     <span
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index 9d07dd11..e3dc0028 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -90,9 +90,6 @@ export const audioPlayer = ref<IAudio>({
             );
             reject();
           });
-          this.player?.once("stop", () => {
-            resolve(this);
-          });
           this.player?.once("end", () => {
             resolve(this);
           });
@@ -143,10 +140,6 @@ export const audioPlayer = ref<IAudio>({
         this.playing = false;
         clearInterval(interval);
       },
-      onstop: () => {
-        this.playing = false;
-        clearInterval(interval);
-      },
       onend: () => {
         this.playing = false;
         clearInterval(interval);
@@ -156,6 +149,7 @@ export const audioPlayer = ref<IAudio>({
   },
 
   cleanUp() {
+    abortController.abort();
     this.player?.off();
     this.player?.unload();
     this.file = undefined;

From 39c6cf104a7dfd7602a762c5601aeefed146d7fa Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sat, 17 Sep 2022 13:25:46 +0200
Subject: [PATCH 15/56] auto skip error files. remove white dots. Disable
 next/prev buttons for first/last song

---
 src/components/pageLayout/AudioPlayer.vue |  4 ++++
 src/components/pageLayout/PlayList.vue    |  7 +++---
 src/composables/audioControls.ts          | 28 +++++++++++++++++++----
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index 725b0a0d..fb4645bf 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -20,7 +20,9 @@ import {
   playAudioFile,
   pauseAudio,
   cleanUpAudioPlayer,
+  previousPlaylistEntry,
   playlistSkipPrevious,
+  nextPlaylistEntry,
   playlistSkipNext,
 } from "@/composables/audioControls";
 
@@ -112,6 +114,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
               class="bg-ipfsPrimary-lighten-1 ml-2"
               :size="mdAndUp ? 'large' : 'default'"
               :icon="mdiSkipPrevious"
+              :disabled="previousPlaylistEntry() === undefined"
               title="Pause"
               @click="playlistSkipPrevious"
             />
@@ -150,6 +153,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
               class="bg-ipfsPrimary-lighten-1 ml-2"
               :size="mdAndUp ? 'large' : 'default'"
               :icon="mdiSkipNext"
+              :disabled="nextPlaylistEntry() === undefined"
               title="Pause"
               @click="playlistSkipNext"
             />
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index c46f3a34..7245dcf3 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -4,7 +4,7 @@ import store from "@/store";
 import { audioPlayer, playlistVisible, startPlaylist } from "@/composables/audioControls";
 import { mdiCircleSmall, mdiPlay, mdiDotsVertical } from "@mdi/js";
 import { useDisplay } from "vuetify";
-const { mdAndUp } = useDisplay();
+const { smAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
 
 import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
@@ -26,8 +26,8 @@ import VMarquee from "@/components/shared/VMarquee.vue";
       rounded="0"
       flat
     >
-      <v-card-title>Playlist</v-card-title>
-      <v-list bg-color="black">
+      <v-card-title class="font-italic d-flex justify-center">Planetarify</v-card-title>
+      <v-list bg-color="black" class="">
         <v-hover
           v-for="(entry, index) in playlistEntries"
           :key="index"
@@ -41,7 +41,6 @@ import VMarquee from "@/components/shared/VMarquee.vue";
             @dblclick="startPlaylist(index)"
           >
             <template #prepend>
-              <v-icon :icon="mdiDotsVertical" size="22" />
               <v-list-item-avatar
                 rounded="0"
                 :style="{ cursor: entry.audio?.error ? 'default' : 'pointer' }"
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index e3dc0028..5ed1c28a 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -180,20 +180,38 @@ export const clearPlaylist = () => {
 };
 
 let playlistIndex = 0;
+const loop = ref(false);
+export const toggleLoop = () => {
+  loop.value = !loop.value;
+};
 export const startPlaylist = async (index?: number) => {
   if (index !== undefined) playlistIndex = index;
   while (playlistIndex < store.getters["playlist/getPlaylist"].entries.length) {
-    console.log("starting song:", playlistIndex);
-    await playAudioFile(store.getters["playlist/getPlaylist"].entries[playlistIndex]);
+    if (!store.getters["playlist/getPlaylist"].entries[playlistIndex].audio?.error) {
+      await playAudioFile(store.getters["playlist/getPlaylist"].entries[playlistIndex]);
+    }
     playlistIndex++;
   }
 };
+export const previousPlaylistEntry = () => {
+  if (playlistIndex === 0) {
+    if (loop.value) return store.getters["playlist/getPlaylist"].entries.length - 1;
+    return undefined;
+  }
+  return playlistIndex - 1;
+};
 export const playlistSkipPrevious = () => {
-  startPlaylist(playlistIndex - 1);
+  startPlaylist(previousPlaylistEntry());
+};
+export const nextPlaylistEntry = () => {
+  if (playlistIndex === store.getters["playlist/getPlaylist"].entries.length - 1) {
+    if (loop.value) return 0;
+    return undefined;
+  }
+  return playlistIndex + 1;
 };
-
 export const playlistSkipNext = () => {
-  startPlaylist(playlistIndex + 1);
+  startPlaylist(nextPlaylistEntry());
 };
 
 export const playAudioFile = (file: IFile) => {

From 35a099920fd9b30e847bbf2e8d27b2952a9b135d Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sat, 17 Sep 2022 16:07:57 +0200
Subject: [PATCH 16/56] fixed audio item search view box sizing

---
 .../searchViewComponents/AudioList.vue        | 58 ++++++++++++++-----
 .../searchViewComponents/BaseList.vue         | 11 +++-
 2 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/src/components/searchViewComponents/AudioList.vue b/src/components/searchViewComponents/AudioList.vue
index 22f8d1e8..f6c988f2 100644
--- a/src/components/searchViewComponents/AudioList.vue
+++ b/src/components/searchViewComponents/AudioList.vue
@@ -33,26 +33,52 @@ pageHits.value.slice(0,
           <hover-card :hit="hit" :index="index" :file-type="fileType">
             <v-img
               :src="hit.src || picsum({ seed: hit.hash })"
-              class="text-white align-content-stretch"
+              class="text-white"
               :aspect-ratio="1"
               gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
             >
-              <v-card-title
-                class="d-flex align-start text-wrap line"
-                style="font-size: medium; line-height: 1.4rem"
-              >
-                <span v-sane-html="fileTitle(hit)" />
-              </v-card-title>
               <media-center-icon :icon="mdiMusic" />
-              <v-card-text class="align-end">
-                <span v-if="fileAuthor(hit)" v-sane-html="fileAuthor(hit)" />
-                <span v-if="fileAuthor(hit) && hit?.metadata?.metadata?.['xmpDM:album']"> - </span>
-                <span
-                  v-if="hit?.metadata?.metadata?.['xmpDM:album']"
-                  v-sane-html="hit.metadata?.metadata?.['xmpDM:album']"
-                  class="font-italic"
-                />
-              </v-card-text>
+              <div class="h-100 d-flex justify-space-between flex-column position-absolute">
+                <v-card-title
+                  class="flex-shrink-1"
+                  style="
+                    white-space: break-spaces;
+                    font-size: medium;
+                    line-height: 1.4rem;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 4;
+                    line-clamp: 4;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    padding-bottom: 0px;
+                  "
+                >
+                  <span v-sane-html="fileTitle(hit)" />
+                </v-card-title>
+                <v-card-text class="d-flex align-end mt-2" style="max-height: 50%">
+                  <div
+                    style="
+                      display: -webkit-box;
+                      -webkit-box-orient: vertical;
+                      -webkit-line-clamp: 2;
+                      line-clamp: 2;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    "
+                  >
+                    <span v-if="fileAuthor(hit)" v-sane-html="fileAuthor(hit)" />
+                    <span v-if="fileAuthor(hit) && hit?.metadata?.metadata?.['xmpDM:album']">
+                      -
+                    </span>
+                    <span
+                      v-if="hit?.metadata?.metadata?.['xmpDM:album']"
+                      v-sane-html="hit.metadata?.metadata?.['xmpDM:album']"
+                      class="font-italic"
+                    />
+                  </div>
+                </v-card-text>
+              </div>
             </v-img>
 
             <v-card-text class="text-caption text-truncate">
diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index 1349fc80..dba1d370 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -27,7 +27,7 @@ const props = defineProps({
 const { anyFileType, loading, loadedPages, infinite, slicedHits, pageHits } =
   useFileListComposable(props);
 
-import { setPlaylist, enqueue } from "@/composables/audioControls.ts";
+import { togglePlaylist, setPlaylist, enqueue } from "@/composables/audioControls.ts";
 
 const error = computed(() => {
   const error = store.getters[`results/${props.fileType}/error`];
@@ -135,7 +135,14 @@ const queryPage = computed({
         <v-card flat>
           <div class="justify-space-between d-flex flex-row">
             <div v-if="fileType === Types.audio" class="flex-row d-flex">
-              <v-btn rounded="pill" color="ipfsPrimary" @click="setPlaylist(pageHits)">
+              <v-btn
+                rounded="pill"
+                color="ipfsPrimary"
+                @click="
+                  setPlaylist(pageHits);
+                  togglePlaylist();
+                "
+              >
                 Play all
                 <template #prepend>
                   <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />

From dabecc175c08a10a5b5f52a5a682a158162f2179 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sat, 17 Sep 2022 17:20:33 +0200
Subject: [PATCH 17/56] introducing unrelated feature: FileType Icons

---
 src/components/pageLayout/SearchBar.vue       | 12 ++++--
 .../searchViewComponents/BaseList.vue         | 41 +++++++++++--------
 .../subcomponents/SearchFilterMenu.vue        | 12 ++----
 src/helpers/typeHelper.js                     | 22 ++++++++++
 4 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/src/components/pageLayout/SearchBar.vue b/src/components/pageLayout/SearchBar.vue
index e4c23b04..2c69ea3b 100644
--- a/src/components/pageLayout/SearchBar.vue
+++ b/src/components/pageLayout/SearchBar.vue
@@ -3,15 +3,15 @@ import { computed } from "vue";
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
 import { enterSearchQuery } from "@/router";
-import { mdiMenuDown, mdiMagnify, mdiFilter } from "@mdi/js";
+import { mdiMenuDown, mdiMagnify, mdiFilter, mdiFormatListBulletedType } from "@mdi/js";
 import { useDisplay } from "vuetify";
 import { useMobileDevices } from "@/composables/useMobileDevices";
-import { searchTypes, listName, Types, TypeListNames } from "@/helpers/typeHelper";
+import { searchTypes, listName, Types, TypeListNames, TypeIcons } from "@/helpers/typeHelper";
 
 const store = useStore();
 const route = useRoute();
 
-const { smAndDown } = useDisplay();
+const { smAndDown, smAndUp } = useDisplay();
 const { hideKeyBoardOnAndroid } = useMobileDevices();
 
 const anyFiltersApplied = computed(() => store.getters["query/filters/anyFiltersApplied"]);
@@ -66,12 +66,15 @@ const fileType = computed({
           <v-menu offset-y location="left">
             <!-- FixMe: console warning about activator not being a reactive object-->
             <template #activator="{ props }">
-              <div class="mr-3 text-grey d-flex align-start" v-bind="props">
+              <div v-if="smAndUp" class="mr-3 text-grey d-flex align-start" v-bind="props">
                 <span class="text-capitalize" data-testid="type-filter-selector-value">
                   {{ listName(fileType) }}
                 </span>
                 <v-icon class="d-inline-block" :icon="mdiMenuDown" />
               </div>
+              <div v-else v-bind="props">
+                <v-icon class="d-inline-block" :icon="TypeIcons[fileType]" />
+              </div>
             </template>
             <v-list class="bg-white">
               <v-list-item
@@ -79,6 +82,7 @@ const fileType = computed({
                   ([t, n]) => n !== TypeListNames.unfiltered
                 )"
                 :key="type"
+                :prepend-icon="TypeIcons[type]"
                 @click="fileType = Types[type]"
               >
                 <v-list-item-title class="text-capitalize">
diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index dba1d370..79891b29 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { mdiPlaylistMusic } from "@mdi/js";
+import { mdiPlaylistMusic, mdiPlaylistMusicOutline, mdiMagnifyExpand } from "@mdi/js";
 import CardContent from "@/components/searchViewComponents/subcomponents/genericCardContent.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
 import { Types, TypeListNames } from "@/helpers/typeHelper";
@@ -134,10 +134,27 @@ const queryPage = computed({
       <v-col cols="12" xl="8" offset-xl="2">
         <v-card flat>
           <div class="justify-space-between d-flex flex-row">
-            <div v-if="fileType === Types.audio" class="flex-row d-flex">
+            <hyperlink
+              v-if="anyFileType"
+              :to="{ ...route, query: { ...route.query, type: fileType } }"
+            >
+              <v-btn color="ipfsPrimary-lighten-1">
+                <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
+                <template #prepend>
+                  <v-icon size="28" :icon="mdiMagnifyExpand" color="white" />
+                </template>
+              </v-btn>
+            </hyperlink>
+            <v-btn v-else variant="outlined" disabled color="ipfsPrimary-lighten-1">
+              <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
+            </v-btn>
+            <div
+              v-if="fileType === Types.audio"
+              class="flex-row d-flex justify-end"
+              style="column-gap: 5px"
+            >
               <v-btn
-                rounded="pill"
-                color="ipfsPrimary"
+                color="ipfsPrimary-lighten-1"
                 @click="
                   setPlaylist(pageHits);
                   togglePlaylist();
@@ -148,25 +165,13 @@ const queryPage = computed({
                   <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />
                 </template>
               </v-btn>
-              <v-btn rounded="pill" color="ipfsPrimary" @click="enqueue(pageHits)">
+              <v-btn color="ipfsPrimary-lighten-1" @click="enqueue(pageHits)">
                 Enqueue all
                 <template #prepend>
-                  <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />
+                  <v-icon size="28" :icon="mdiPlaylistMusicOutline" color="white" />
                 </template>
               </v-btn>
             </div>
-            <v-card-subtitle v-else class="text-subtitle-1">
-              <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
-            </v-card-subtitle>
-            <v-card-subtitle class="text-subtitle-1">
-              <hyperlink
-                v-if="anyFileType"
-                :to="{ ...route, query: { ...route.query, type: fileType } }"
-                class="text-subtitle-1 text-secondary"
-              >
-                View all
-              </hyperlink>
-            </v-card-subtitle>
           </div>
         </v-card>
       </v-col>
diff --git a/src/components/searchViewComponents/subcomponents/SearchFilterMenu.vue b/src/components/searchViewComponents/subcomponents/SearchFilterMenu.vue
index bf86fc67..dcc69023 100644
--- a/src/components/searchViewComponents/subcomponents/SearchFilterMenu.vue
+++ b/src/components/searchViewComponents/subcomponents/SearchFilterMenu.vue
@@ -1,3 +1,7 @@
+<script setup>
+import SearchFilters from "@/components/searchViewComponents/subcomponents/SearchFilters.vue";
+</script>
+
 <template>
   <v-menu
     :close-on-content-click="false"
@@ -15,14 +19,6 @@
   </v-menu>
 </template>
 
-<script>
-import SearchFilters from "@/components/searchViewComponents/subcomponents/SearchFilters.vue";
-
-export default {
-  components: { SearchFilters },
-};
-</script>
-
 <style lang="scss" scoped>
 .menu {
   // to align below header, which is 56px
diff --git a/src/helpers/typeHelper.js b/src/helpers/typeHelper.js
index 1c734f13..c196c282 100644
--- a/src/helpers/typeHelper.js
+++ b/src/helpers/typeHelper.js
@@ -1,3 +1,14 @@
+import {
+  mdiFormatListBulletedType,
+  mdiFileDocumentOutline,
+  mdiMusic,
+  mdiFileImageOutline,
+  mdiFileVideoOutline,
+  mdiFolderOutline,
+  mdiFileQuestionOutline,
+  mdiHelp,
+} from "@mdi/js";
+
 export const Types = {
   all: "all",
   text: "text",
@@ -20,6 +31,17 @@ export const TypeListNames = {
   unfiltered: "Unsorted",
 };
 
+export const TypeIcons = {
+  all: mdiFormatListBulletedType,
+  text: mdiFileDocumentOutline,
+  audio: mdiMusic,
+  images: mdiFileImageOutline,
+  video: mdiFileVideoOutline,
+  directories: mdiFolderOutline,
+  other: mdiFileQuestionOutline,
+  unfiltered: mdiHelp,
+};
+
 export const searchTypes = Object.entries(TypeListNames);
 export const listName = (type) =>
   TypeListNames[Object.keys(Types).find((key) => Types[key] === type)];

From 9f780a16272f418c4f61cd791736cb2ba75bcca1 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sat, 17 Sep 2022 17:26:17 +0200
Subject: [PATCH 18/56] fix spacing of buttons on general page

---
 src/components/searchViewComponents/BaseList.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index 79891b29..0cac7189 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -2,7 +2,7 @@
 import { mdiPlaylistMusic, mdiPlaylistMusicOutline, mdiMagnifyExpand } from "@mdi/js";
 import CardContent from "@/components/searchViewComponents/subcomponents/genericCardContent.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
-import { Types, TypeListNames } from "@/helpers/typeHelper";
+import { Types, TypeListNames, TypeIcons } from "@/helpers/typeHelper";
 import { useFileListComposable } from "@/composables/useFileListComposable";
 import { computed, onBeforeMount } from "vue";
 import { onBeforeRouteUpdate, useRoute } from "vue-router";
@@ -15,7 +15,7 @@ const store = useStore();
 
 const infiniteScrollMargin = 200;
 const route = useRoute();
-const { smAndDown } = useDisplay();
+const { smAndDown, smAndUp } = useDisplay();
 
 const props = defineProps({
   fileType: {
@@ -141,7 +141,7 @@ const queryPage = computed({
               <v-btn color="ipfsPrimary-lighten-1">
                 <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
                 <template #prepend>
-                  <v-icon size="28" :icon="mdiMagnifyExpand" color="white" />
+                  <v-icon size="28" :icon="TypeIcons[fileType]" color="white" />
                 </template>
               </v-btn>
             </hyperlink>
@@ -149,7 +149,7 @@ const queryPage = computed({
               <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
             </v-btn>
             <div
-              v-if="fileType === Types.audio"
+              v-if="fileType === Types.audio && smAndUp"
               class="flex-row d-flex justify-end"
               style="column-gap: 5px"
             >

From 21d5ffaf1c18f711c0671a1e169f59c9589cffd5 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sat, 17 Sep 2022 20:39:07 +0200
Subject: [PATCH 19/56] cleanup search list view

---
 .../searchViewComponents/AudioList.vue        | 136 +++++++++---------
 .../searchViewComponents/BaseList.vue         |  95 ++++++------
 .../searchViewComponents/ImageList.vue        |  58 ++++----
 3 files changed, 144 insertions(+), 145 deletions(-)

diff --git a/src/components/searchViewComponents/AudioList.vue b/src/components/searchViewComponents/AudioList.vue
index f6c988f2..840c083b 100644
--- a/src/components/searchViewComponents/AudioList.vue
+++ b/src/components/searchViewComponents/AudioList.vue
@@ -19,82 +19,80 @@ const { slicedHits } = useFileListComposable({ fileType });
 pageHits.value.slice(0,
 <template>
   <ListBase :file-type="fileType">
-    <v-col cols="10" offset-xl="2">
-      <v-row dense>
-        <v-col
-          v-for="(hit, index) in slicedHits(xs ? 2 : smAndDown ? 6 : mdAndDown ? 8 : 12)"
-          :key="index"
-          cols="5"
-          xs="4"
-          sm="4"
-          md="3"
-          lg="2"
-        >
-          <hover-card :hit="hit" :index="index" :file-type="fileType">
-            <v-img
-              :src="hit.src || picsum({ seed: hit.hash })"
-              class="text-white"
-              :aspect-ratio="1"
-              gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
-            >
-              <media-center-icon :icon="mdiMusic" />
-              <div class="h-100 d-flex justify-space-between flex-column position-absolute">
-                <v-card-title
-                  class="flex-shrink-1"
+    <v-row dense>
+      <v-col
+        v-for="(hit, index) in slicedHits(xs ? 2 : smAndDown ? 6 : mdAndDown ? 8 : 12)"
+        :key="index"
+        offset-xl="2"
+        cols="6"
+        sm="4"
+        md="3"
+        lg="2"
+      >
+        <hover-card :hit="hit" :index="index" :file-type="fileType">
+          <v-img
+            :src="hit.src || picsum({ seed: hit.hash })"
+            class="text-white"
+            :aspect-ratio="1"
+            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+          >
+            <media-center-icon :icon="mdiMusic" />
+            <div class="h-100 d-flex justify-space-between flex-column position-absolute">
+              <v-card-title
+                class="flex-shrink-1"
+                style="
+                  white-space: break-spaces;
+                  font-size: medium;
+                  line-height: 1.4rem;
+                  display: -webkit-box;
+                  -webkit-box-orient: vertical;
+                  -webkit-line-clamp: 4;
+                  line-clamp: 4;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  padding-bottom: 0px;
+                "
+              >
+                <span v-sane-html="fileTitle(hit)" />
+              </v-card-title>
+              <v-card-text class="d-flex align-end mt-2" style="max-height: 50%">
+                <div
                   style="
-                    white-space: break-spaces;
-                    font-size: medium;
-                    line-height: 1.4rem;
                     display: -webkit-box;
                     -webkit-box-orient: vertical;
-                    -webkit-line-clamp: 4;
-                    line-clamp: 4;
+                    -webkit-line-clamp: 2;
+                    line-clamp: 2;
                     overflow: hidden;
                     text-overflow: ellipsis;
-                    padding-bottom: 0px;
                   "
                 >
-                  <span v-sane-html="fileTitle(hit)" />
-                </v-card-title>
-                <v-card-text class="d-flex align-end mt-2" style="max-height: 50%">
-                  <div
-                    style="
-                      display: -webkit-box;
-                      -webkit-box-orient: vertical;
-                      -webkit-line-clamp: 2;
-                      line-clamp: 2;
-                      overflow: hidden;
-                      text-overflow: ellipsis;
-                    "
-                  >
-                    <span v-if="fileAuthor(hit)" v-sane-html="fileAuthor(hit)" />
-                    <span v-if="fileAuthor(hit) && hit?.metadata?.metadata?.['xmpDM:album']">
-                      -
-                    </span>
-                    <span
-                      v-if="hit?.metadata?.metadata?.['xmpDM:album']"
-                      v-sane-html="hit.metadata?.metadata?.['xmpDM:album']"
-                      class="font-italic"
-                    />
-                  </div>
-                </v-card-text>
-              </div>
-            </v-img>
+                  <span v-if="fileAuthor(hit)" v-sane-html="fileAuthor(hit)" />
+                  <span v-if="fileAuthor(hit) && hit?.metadata?.metadata?.['xmpDM:album']">
+                    -
+                  </span>
+                  <span
+                    v-if="hit?.metadata?.metadata?.['xmpDM:album']"
+                    v-sane-html="hit.metadata?.metadata?.['xmpDM:album']"
+                    class="font-italic"
+                  />
+                </div>
+              </v-card-text>
+            </div>
+          </v-img>
 
-            <v-card-text class="text-caption text-truncate">
-              <div class="my-n2 d-block-inline text-truncate">
-                <span :class="durationToColor(hit['last-seen'])"> &#9679; </span>
-                <span v-if="hit['last-seen']">
-                  Last seen <timeago :datetime="hit['last-seen']" />
-                </span>
-                <br />
-                <span v-if="hit.size">Size {{ prettyBytes(hit.size) }}</span>
-                <span v-if="hit.mimetype"> | {{ mime.getExtension(hit.mimetype) }}</span>
-              </div>
-            </v-card-text>
-          </hover-card>
-        </v-col>
-      </v-row>
-    </v-col>
+          <v-card-text class="text-caption text-truncate">
+            <div class="my-n2 d-block-inline text-truncate">
+              <span :class="durationToColor(hit['last-seen'])"> &#9679; </span>
+              <span v-if="hit['last-seen']">
+                Last seen <timeago :datetime="hit['last-seen']" />
+              </span>
+              <br />
+              <span v-if="hit.size">Size {{ prettyBytes(hit.size) }}</span>
+              <span v-if="hit.mimetype"> | {{ mime.getExtension(hit.mimetype) }}</span>
+            </div>
+          </v-card-text>
+        </hover-card>
+      </v-col>
+    </v-row>
   </ListBase>
 </template>
diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index 0cac7189..2980a7a3 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -130,52 +130,46 @@ const queryPage = computed({
 
 <template>
   <v-container v-scroll="infiniteScroll" class="overflow-y-hidden">
-    <v-row dense>
-      <v-col cols="12" xl="8" offset-xl="2">
-        <v-card flat>
-          <div class="justify-space-between d-flex flex-row">
-            <hyperlink
-              v-if="anyFileType"
-              :to="{ ...route, query: { ...route.query, type: fileType } }"
-            >
-              <v-btn color="ipfsPrimary-lighten-1">
-                <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
-                <template #prepend>
-                  <v-icon size="28" :icon="TypeIcons[fileType]" color="white" />
-                </template>
-              </v-btn>
-            </hyperlink>
-            <v-btn v-else variant="outlined" disabled color="ipfsPrimary-lighten-1">
-              <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
-            </v-btn>
-            <div
-              v-if="fileType === Types.audio && smAndUp"
-              class="flex-row d-flex justify-end"
-              style="column-gap: 5px"
-            >
-              <v-btn
-                color="ipfsPrimary-lighten-1"
-                @click="
-                  setPlaylist(pageHits);
-                  togglePlaylist();
-                "
-              >
-                Play all
-                <template #prepend>
-                  <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />
-                </template>
-              </v-btn>
-              <v-btn color="ipfsPrimary-lighten-1" @click="enqueue(pageHits)">
-                Enqueue all
-                <template #prepend>
-                  <v-icon size="28" :icon="mdiPlaylistMusicOutline" color="white" />
-                </template>
-              </v-btn>
-            </div>
-          </div>
-        </v-card>
-      </v-col>
-    </v-row>
+    <div class="justify-space-between d-flex flex-row mb-3" style="column-gap: 5px">
+      <hyperlink v-if="anyFileType" :to="{ ...route, query: { ...route.query, type: fileType } }">
+        <v-btn color="ipfsPrimary-lighten-1">
+          <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
+          <template #prepend>
+            <v-icon size="28" :icon="TypeIcons[fileType]" color="white" />
+          </template>
+        </v-btn>
+      </hyperlink>
+      <v-btn v-else variant="outlined" disabled color="ipfsPrimary-lighten-1" class="banner">
+        <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
+        <template #prepend>
+          <v-icon size="28" :icon="TypeIcons[fileType]" color="ipfsPrimary-lighten-1" />
+        </template>
+      </v-btn>
+      <div
+        v-if="fileType === Types.audio && smAndUp"
+        class="flex-row d-flex justify-end"
+        style="column-gap: 5px"
+      >
+        <v-btn
+          color="ipfsPrimary-lighten-1"
+          @click="
+            setPlaylist(pageHits);
+            togglePlaylist();
+          "
+        >
+          Play all
+          <template #prepend>
+            <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />
+          </template>
+        </v-btn>
+        <v-btn color="ipfsPrimary-lighten-1" @click="enqueue(pageHits)">
+          Enqueue all
+          <template #prepend>
+            <v-icon size="28" :icon="mdiPlaylistMusicOutline" color="white" />
+          </template>
+        </v-btn>
+      </div>
+    </div>
 
     <v-row v-if="error">
       <v-col cols="12" xl="8" offset-xl="2">
@@ -184,6 +178,7 @@ const queryPage = computed({
         </v-alert>
       </v-col>
     </v-row>
+
     <v-row v-if="resultsTotal !== 0" dense>
       <slot>
         <v-col v-for="(hit, index) in slicedHits(3)" :key="index" cols="12" xl="8" offset-xl="2">
@@ -193,6 +188,7 @@ const queryPage = computed({
         </v-col>
       </slot>
     </v-row>
+
     <v-row v-if="loading" dense justify="center">
       <v-progress-circular color="ipfsPrimary" indeterminate />
     </v-row>
@@ -203,3 +199,10 @@ const queryPage = computed({
     </div>
   </v-container>
 </template>
+
+<style scoped>
+.banner {
+  flex-grow: 2;
+  justify-content: flex-start;
+}
+</style>
diff --git a/src/components/searchViewComponents/ImageList.vue b/src/components/searchViewComponents/ImageList.vue
index b4b05f58..995dcbe8 100644
--- a/src/components/searchViewComponents/ImageList.vue
+++ b/src/components/searchViewComponents/ImageList.vue
@@ -19,35 +19,33 @@ const { blurExplicit } = useBlurExplicit();
 
 <template>
   <ListBase :file-type="fileType">
-    <v-col id="resultsList" cols="12" xl="8" offset-xl="2">
-      <v-row dense>
-        <v-col
-          v-for="(hit, index) in slicedHits(xs ? 2 : smAndDown ? 6 : mdAndDown ? 8 : 12)"
-          :key="index"
-          cols="6"
-          sm="4"
-          md="3"
-          lg="2"
-        >
-          <hover-card :hit="hit" :index="index" :file-type="fileType">
-            <v-img
-              :src="getResourceURL(hit.hash)"
-              aspect-ratio="1"
-              :class="{ blurExplicit: blurExplicit(hit) }"
-              :data-nsfw-classification="JSON.stringify(hit.nsfwClassification)"
-              :data-nsfw="hit.nsfw"
-              class="rounded grey lighten-2"
-            >
-              <template #placeholder>
-                <v-row class="fill-height ma-0" align="center" justify="center">
-                  <v-progress-circular indeterminate color="ipfsPrimary" />
-                </v-row>
-              </template>
-              <NsfwTooltip :file="hit" />
-            </v-img>
-          </hover-card>
-        </v-col>
-      </v-row>
-    </v-col>
+    <v-row dense>
+      <v-col
+        v-for="(hit, index) in slicedHits(xs ? 2 : smAndDown ? 6 : mdAndDown ? 8 : 12)"
+        :key="index"
+        cols="6"
+        sm="4"
+        md="3"
+        lg="2"
+      >
+        <hover-card :hit="hit" :index="index" :file-type="fileType">
+          <v-img
+            :src="getResourceURL(hit.hash)"
+            aspect-ratio="1"
+            :class="{ blurExplicit: blurExplicit(hit) }"
+            :data-nsfw-classification="JSON.stringify(hit.nsfwClassification)"
+            :data-nsfw="hit.nsfw"
+            class="rounded grey lighten-2"
+          >
+            <template #placeholder>
+              <v-row class="fill-height ma-0" align="center" justify="center">
+                <v-progress-circular indeterminate color="ipfsPrimary" />
+              </v-row>
+            </template>
+            <NsfwTooltip :file="hit" />
+          </v-img>
+        </hover-card>
+      </v-col>
+    </v-row>
   </ListBase>
 </template>

From 9860c23985cd0c2d5a6af58b717399942fbdca2d Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sat, 17 Sep 2022 22:51:40 +0200
Subject: [PATCH 20/56] responsive alignment of searchview

---
 .../searchViewComponents/AudioList.vue        | 130 ++++++++----------
 .../searchViewComponents/BaseList.vue         |  14 +-
 .../searchViewComponents/ImageList.vue        |  54 +++-----
 .../searchViewComponents/TileList.vue         |  39 ++++++
 .../searchViewComponents/VideoList.vue        |  42 +++---
 .../subcomponents/SearchFilters.vue           |   2 +-
 6 files changed, 148 insertions(+), 133 deletions(-)
 create mode 100644 src/components/searchViewComponents/TileList.vue

diff --git a/src/components/searchViewComponents/AudioList.vue b/src/components/searchViewComponents/AudioList.vue
index 840c083b..8596e3a2 100644
--- a/src/components/searchViewComponents/AudioList.vue
+++ b/src/components/searchViewComponents/AudioList.vue
@@ -1,98 +1,84 @@
 <script setup>
 import { mdiMusic } from "@mdi/js";
-import { useDisplay } from "vuetify";
 import ListBase from "./BaseList.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
-import { useFileListComposable, imports } from "@/composables/useFileListComposable";
 import MediaCenterIcon from "@/components/searchViewComponents/subcomponents/MediaCenterIcon.vue";
+import TileList from "@/components/searchViewComponents/TileList.vue";
+
 import { Types } from "@/helpers/typeHelper";
 import { picsum } from "@/helpers/picsum";
 import { fileTitle, fileAuthor } from "@/helpers/fileHelper.ts";
+import { imports } from "@/composables/useFileListComposable.js";
 
-const { xs, smAndDown, mdAndDown } = useDisplay();
 const { durationToColor, mime, prettyBytes } = imports;
 const fileType = Types.audio;
-
-const { slicedHits } = useFileListComposable({ fileType });
 </script>
 
 pageHits.value.slice(0,
 <template>
   <ListBase :file-type="fileType">
-    <v-row dense>
-      <v-col
-        v-for="(hit, index) in slicedHits(xs ? 2 : smAndDown ? 6 : mdAndDown ? 8 : 12)"
-        :key="index"
-        offset-xl="2"
-        cols="6"
-        sm="4"
-        md="3"
-        lg="2"
-      >
-        <hover-card :hit="hit" :index="index" :file-type="fileType">
-          <v-img
-            :src="hit.src || picsum({ seed: hit.hash })"
-            class="text-white"
-            :aspect-ratio="1"
-            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
-          >
-            <media-center-icon :icon="mdiMusic" />
-            <div class="h-100 d-flex justify-space-between flex-column position-absolute">
-              <v-card-title
-                class="flex-shrink-1"
+    <tile-list v-slot="{ hit, index }" :file-type="fileType">
+      <hover-card :hit="hit" :index="index" :file-type="fileType">
+        <v-img
+          :src="hit.src || picsum({ seed: hit.hash })"
+          class="text-white"
+          :aspect-ratio="1"
+          gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+        >
+          <media-center-icon :icon="mdiMusic" />
+          <div class="h-100 d-flex justify-space-between flex-column position-absolute">
+            <v-card-title
+              class="flex-shrink-1"
+              style="
+                white-space: break-spaces;
+                font-size: medium;
+                line-height: 1.4rem;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 4;
+                line-clamp: 4;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                padding-bottom: 0px;
+              "
+            >
+              <span v-sane-html="fileTitle(hit)" />
+            </v-card-title>
+            <v-card-text class="d-flex align-end mt-2" style="max-height: 50%">
+              <div
                 style="
-                  white-space: break-spaces;
-                  font-size: medium;
-                  line-height: 1.4rem;
                   display: -webkit-box;
                   -webkit-box-orient: vertical;
-                  -webkit-line-clamp: 4;
-                  line-clamp: 4;
+                  -webkit-line-clamp: 2;
+                  line-clamp: 2;
                   overflow: hidden;
                   text-overflow: ellipsis;
-                  padding-bottom: 0px;
                 "
               >
-                <span v-sane-html="fileTitle(hit)" />
-              </v-card-title>
-              <v-card-text class="d-flex align-end mt-2" style="max-height: 50%">
-                <div
-                  style="
-                    display: -webkit-box;
-                    -webkit-box-orient: vertical;
-                    -webkit-line-clamp: 2;
-                    line-clamp: 2;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                  "
-                >
-                  <span v-if="fileAuthor(hit)" v-sane-html="fileAuthor(hit)" />
-                  <span v-if="fileAuthor(hit) && hit?.metadata?.metadata?.['xmpDM:album']">
-                    -
-                  </span>
-                  <span
-                    v-if="hit?.metadata?.metadata?.['xmpDM:album']"
-                    v-sane-html="hit.metadata?.metadata?.['xmpDM:album']"
-                    class="font-italic"
-                  />
-                </div>
-              </v-card-text>
-            </div>
-          </v-img>
+                <span v-if="fileAuthor(hit)" v-sane-html="fileAuthor(hit)" />
+                <span v-if="fileAuthor(hit) && hit?.metadata?.metadata?.['xmpDM:album']"> - </span>
+                <span
+                  v-if="hit?.metadata?.metadata?.['xmpDM:album']"
+                  v-sane-html="hit.metadata?.metadata?.['xmpDM:album']"
+                  class="font-italic"
+                />
+              </div>
+            </v-card-text>
+          </div>
+        </v-img>
 
-          <v-card-text class="text-caption text-truncate">
-            <div class="my-n2 d-block-inline text-truncate">
-              <span :class="durationToColor(hit['last-seen'])"> &#9679; </span>
-              <span v-if="hit['last-seen']">
-                Last seen <timeago :datetime="hit['last-seen']" />
-              </span>
-              <br />
-              <span v-if="hit.size">Size {{ prettyBytes(hit.size) }}</span>
-              <span v-if="hit.mimetype"> | {{ mime.getExtension(hit.mimetype) }}</span>
-            </div>
-          </v-card-text>
-        </hover-card>
-      </v-col>
-    </v-row>
+        <v-card-text class="text-caption text-truncate">
+          <div class="my-n2 d-block-inline text-truncate">
+            <span :class="durationToColor(hit['last-seen'])"> &#9679; </span>
+            <span v-if="hit['last-seen']">
+              Last seen <timeago :datetime="hit['last-seen']" />
+            </span>
+            <br />
+            <span v-if="hit.size">Size {{ prettyBytes(hit.size) }}</span>
+            <span v-if="hit.mimetype"> | {{ mime.getExtension(hit.mimetype) }}</span>
+          </div>
+        </v-card-text>
+      </hover-card>
+    </tile-list>
   </ListBase>
 </template>
diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index 2980a7a3..0f60618b 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { mdiPlaylistMusic, mdiPlaylistMusicOutline, mdiMagnifyExpand } from "@mdi/js";
+import { mdiPlaylistMusic, mdiPlaylistMusicOutline } from "@mdi/js";
 import CardContent from "@/components/searchViewComponents/subcomponents/genericCardContent.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
 import { Types, TypeListNames, TypeIcons } from "@/helpers/typeHelper";
@@ -129,7 +129,7 @@ const queryPage = computed({
 </script>
 
 <template>
-  <v-container v-scroll="infiniteScroll" class="overflow-y-hidden">
+  <v-container v-scroll="infiniteScroll" class="overflow-y-hidden" style="max-width: 1200px">
     <div class="justify-space-between d-flex flex-row mb-3" style="column-gap: 5px">
       <hyperlink v-if="anyFileType" :to="{ ...route, query: { ...route.query, type: fileType } }">
         <v-btn color="ipfsPrimary-lighten-1">
@@ -179,15 +179,15 @@ const queryPage = computed({
       </v-col>
     </v-row>
 
-    <v-row v-if="resultsTotal !== 0" dense>
-      <slot>
-        <v-col v-for="(hit, index) in slicedHits(3)" :key="index" cols="12" xl="8" offset-xl="2">
+    <slot v-if="resultsTotal !== 0">
+      <v-row dense>
+        <v-col v-for="(hit, index) in slicedHits(3)" :key="index" cols="12">
           <hover-card :hit="hit" :index="index" :file-type="fileType">
             <CardContent :hit="hit" />
           </hover-card>
         </v-col>
-      </slot>
-    </v-row>
+      </v-row>
+    </slot>
 
     <v-row v-if="loading" dense justify="center">
       <v-progress-circular color="ipfsPrimary" indeterminate />
diff --git a/src/components/searchViewComponents/ImageList.vue b/src/components/searchViewComponents/ImageList.vue
index 995dcbe8..464b6135 100644
--- a/src/components/searchViewComponents/ImageList.vue
+++ b/src/components/searchViewComponents/ImageList.vue
@@ -2,15 +2,12 @@
 import NsfwTooltip from "@/components/shared/nsfwTooltip.vue";
 import ListBase from "./BaseList.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
-import { useFileListComposable, imports } from "@/composables/useFileListComposable";
+import TileList from "@/components/searchViewComponents/TileList.vue";
+import { imports } from "@/composables/useFileListComposable";
 import { useBlurExplicit } from "@/composables/BlurExplicitImagesComposable";
 import { Types } from "@/helpers/typeHelper";
-import { useDisplay } from "vuetify";
 
 const fileType = Types.images;
-const { xs, smAndDown, mdAndDown } = useDisplay();
-
-const { slicedHits } = useFileListComposable({ fileType });
 
 const { getResourceURL } = imports;
 
@@ -19,33 +16,24 @@ const { blurExplicit } = useBlurExplicit();
 
 <template>
   <ListBase :file-type="fileType">
-    <v-row dense>
-      <v-col
-        v-for="(hit, index) in slicedHits(xs ? 2 : smAndDown ? 6 : mdAndDown ? 8 : 12)"
-        :key="index"
-        cols="6"
-        sm="4"
-        md="3"
-        lg="2"
-      >
-        <hover-card :hit="hit" :index="index" :file-type="fileType">
-          <v-img
-            :src="getResourceURL(hit.hash)"
-            aspect-ratio="1"
-            :class="{ blurExplicit: blurExplicit(hit) }"
-            :data-nsfw-classification="JSON.stringify(hit.nsfwClassification)"
-            :data-nsfw="hit.nsfw"
-            class="rounded grey lighten-2"
-          >
-            <template #placeholder>
-              <v-row class="fill-height ma-0" align="center" justify="center">
-                <v-progress-circular indeterminate color="ipfsPrimary" />
-              </v-row>
-            </template>
-            <NsfwTooltip :file="hit" />
-          </v-img>
-        </hover-card>
-      </v-col>
-    </v-row>
+    <tile-list v-slot="{ hit, index }" :file-type="fileType">
+      <hover-card :hit="hit" :index="index" :file-type="fileType">
+        <v-img
+          :src="getResourceURL(hit.hash)"
+          aspect-ratio="1"
+          :class="{ blurExplicit: blurExplicit(hit) }"
+          :data-nsfw-classification="JSON.stringify(hit.nsfwClassification)"
+          :data-nsfw="hit.nsfw"
+          class="rounded grey lighten-2"
+        >
+          <template #placeholder>
+            <v-row class="fill-height ma-0" align="center" justify="center">
+              <v-progress-circular indeterminate color="ipfsPrimary" />
+            </v-row>
+          </template>
+          <NsfwTooltip :file="hit" />
+        </v-img>
+      </hover-card>
+    </tile-list>
   </ListBase>
 </template>
diff --git a/src/components/searchViewComponents/TileList.vue b/src/components/searchViewComponents/TileList.vue
new file mode 100644
index 00000000..f333dcc1
--- /dev/null
+++ b/src/components/searchViewComponents/TileList.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { useDisplay } from "vuetify";
+
+const { xs, smAndDown, mdAndDown, lgAndUp } = useDisplay();
+const props = defineProps({
+  fileType: {
+    type: String,
+    required: true,
+  },
+});
+import { useFileListComposable } from "@/composables/useFileListComposable";
+const { slicedHits } = useFileListComposable({ fileType: props.fileType });
+</script>
+<template>
+  <v-row dense>
+    <v-col>
+      <v-row dense>
+        <v-col
+          v-for="(hit, index) in slicedHits(xs ? 2 : smAndDown ? 6 : mdAndDown ? 8 : 12)"
+          :key="index"
+          cols="6"
+          sm="4"
+          md="3"
+          :class="{ five_columns: lgAndUp }"
+        >
+          <slot :hit="hit" :index="index" />
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<style scoped>
+.five_columns {
+  width: 20%;
+  max-width: 20%;
+  flex-basis: 20%;
+}
+</style>
diff --git a/src/components/searchViewComponents/VideoList.vue b/src/components/searchViewComponents/VideoList.vue
index 8b76a234..12c6f698 100644
--- a/src/components/searchViewComponents/VideoList.vue
+++ b/src/components/searchViewComponents/VideoList.vue
@@ -15,25 +15,27 @@ const { slicedHits } = useFileListComposable({ fileType });
 
 <template>
   <ListBase :file-type="fileType">
-    <v-col v-for="(hit, index) in slicedHits(3)" :key="index" cols="12" xl="8" offset-xl="2">
-      <hover-card :hit="hit" :index="index" :file-type="fileType">
-        <v-row>
-          <v-col cols="12" sm="4" md="3" lg="2">
-            <v-img
-              class="ma-3 mr-sm-0"
-              cover
-              aspect-ratio="1.778"
-              :src="hit.src || picsum({ seed: hit.hash })"
-              gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
-            >
-              <media-center-icon :icon="mdiVideo" />
-            </v-img>
-          </v-col>
-          <v-col cols="12" sm="8" md="9" lg="10" class="py-sm-0 ml-sm-n6">
-            <CardContent :hit="hit" />
-          </v-col>
-        </v-row>
-      </hover-card>
-    </v-col>
+    <v-row dense>
+      <v-col v-for="(hit, index) in slicedHits(3)" :key="index" cols="12" xl="8" offset-xl="2">
+        <hover-card :hit="hit" :index="index" :file-type="fileType">
+          <v-row>
+            <v-col cols="12" sm="4" md="3" lg="2">
+              <v-img
+                class="ma-3 mr-sm-0"
+                cover
+                aspect-ratio="1.778"
+                :src="hit.src || picsum({ seed: hit.hash })"
+                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+              >
+                <media-center-icon :icon="mdiVideo" />
+              </v-img>
+            </v-col>
+            <v-col cols="12" sm="8" md="9" lg="10" class="py-sm-0 ml-sm-n6">
+              <CardContent :hit="hit" />
+            </v-col>
+          </v-row>
+        </hover-card>
+      </v-col>
+    </v-row>
   </ListBase>
 </template>
diff --git a/src/components/searchViewComponents/subcomponents/SearchFilters.vue b/src/components/searchViewComponents/subcomponents/SearchFilters.vue
index 3d7e6e82..95cb3dbd 100644
--- a/src/components/searchViewComponents/subcomponents/SearchFilters.vue
+++ b/src/components/searchViewComponents/subcomponents/SearchFilters.vue
@@ -6,7 +6,7 @@ import HyperLink from "@/components/shared/HyperLink.vue";
 const route = useRoute();
 </script>
 <template>
-  <v-container>
+  <v-container style="max-width: 1200px">
     <v-row>
       <v-col cols="12" offset-xl="2" xl="8" class="bg-white px-8 d-flex justify-center">
         <v-container class="mx-0 px-0">

From de4980468230eee7ad2e1e17610f1f70ad9d1ebf Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sat, 17 Sep 2022 23:05:27 +0200
Subject: [PATCH 21/56] responsive alignment of searchview video fix

---
 src/components/searchViewComponents/VideoList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/searchViewComponents/VideoList.vue b/src/components/searchViewComponents/VideoList.vue
index 12c6f698..70ab86f8 100644
--- a/src/components/searchViewComponents/VideoList.vue
+++ b/src/components/searchViewComponents/VideoList.vue
@@ -16,7 +16,7 @@ const { slicedHits } = useFileListComposable({ fileType });
 <template>
   <ListBase :file-type="fileType">
     <v-row dense>
-      <v-col v-for="(hit, index) in slicedHits(3)" :key="index" cols="12" xl="8" offset-xl="2">
+      <v-col v-for="(hit, index) in slicedHits(3)" :key="index" cols="12">
         <hover-card :hit="hit" :index="index" :file-type="fileType">
           <v-row>
             <v-col cols="12" sm="4" md="3" lg="2">

From 57367a80a4a11c8055c5c7c64a308e7f71a48938 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sat, 17 Sep 2022 23:30:30 +0200
Subject: [PATCH 22/56] responsive alignment of searchview video fix; fix audio
 play/enqueue buttons on small screens

---
 src/components/searchViewComponents/BaseList.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index 0f60618b..41a40c64 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -130,7 +130,11 @@ const queryPage = computed({
 
 <template>
   <v-container v-scroll="infiniteScroll" class="overflow-y-hidden" style="max-width: 1200px">
-    <div class="justify-space-between d-flex flex-row mb-3" style="column-gap: 5px">
+    <div
+      :class="smAndUp ? 'flex-row' : 'flex-column'"
+      class="justify-space-between d-flex mb-3"
+      style="gap: 5px"
+    >
       <hyperlink v-if="anyFileType" :to="{ ...route, query: { ...route.query, type: fileType } }">
         <v-btn color="ipfsPrimary-lighten-1">
           <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
@@ -146,7 +150,7 @@ const queryPage = computed({
         </template>
       </v-btn>
       <div
-        v-if="fileType === Types.audio && smAndUp"
+        v-if="fileType === Types.audio"
         class="flex-row d-flex justify-end"
         style="column-gap: 5px"
       >

From f411548fd0f150cf59b8f8606a43a988821338bc Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sun, 18 Sep 2022 00:16:36 +0200
Subject: [PATCH 23/56] make search field small in playlist mode

---
 src/components/pageLayout/AppHeader.vue       |  4 +--
 src/components/pageLayout/SearchBar.vue       | 26 +++++++++++++++----
 .../searchViewComponents/BaseList.vue         |  6 ++---
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 8262400e..404ace29 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -7,7 +7,7 @@ const route = useRoute();
 import { useStore } from "vuex";
 const store = useStore();
 
-import { mdiClose, mdiMusic } from "@mdi/js";
+import { mdiClose, mdiPlaylistMusic } from "@mdi/js";
 
 import { useDisplay } from "vuetify";
 const { mdAndUp } = useDisplay();
@@ -60,7 +60,7 @@ import { togglePlaylist } from "@/composables/audioControls.ts";
           <v-spacer v-else />
 
           <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylist">
-            <v-icon :icon="mdiMusic" />
+            <v-icon :icon="mdiPlaylistMusic" />
           </v-btn>
 
           <settings-menu />
diff --git a/src/components/pageLayout/SearchBar.vue b/src/components/pageLayout/SearchBar.vue
index 2c69ea3b..db31c0d5 100644
--- a/src/components/pageLayout/SearchBar.vue
+++ b/src/components/pageLayout/SearchBar.vue
@@ -3,7 +3,7 @@ import { computed } from "vue";
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
 import { enterSearchQuery } from "@/router";
-import { mdiMenuDown, mdiMagnify, mdiFilter, mdiFormatListBulletedType } from "@mdi/js";
+import { mdiMenuDown, mdiMagnify, mdiFilter } from "@mdi/js";
 import { useDisplay } from "vuetify";
 import { useMobileDevices } from "@/composables/useMobileDevices";
 import { searchTypes, listName, Types, TypeListNames, TypeIcons } from "@/helpers/typeHelper";
@@ -41,15 +41,19 @@ const fileType = computed({
     }
   },
 });
+
+import { playlistVisible } from "@/composables/audioControls";
 </script>
 
 <template>
-  <v-container class="d-flex justify-center align-center">
+  <v-container class="d-flex justify-start align-center">
     <div id="search" class="flex-grow-1">
       <v-text-field
+        id="searchfield"
         ref="input"
         v-model="searchPhrase"
         v-closable="{ handler: 'onIphoneClick' }"
+        :style="{ width: playlistVisible ? '50%' : '100%' }"
         variant="plain"
         class="bg-white rounded-pill pl-5"
         placeholder="Search"
@@ -61,9 +65,10 @@ const fileType = computed({
         hide-details
         style="height: 42px"
         @keyup.enter="enterSearchPhrase"
+        @focus="playlistVisible = false"
       >
         <template #append>
-          <v-menu offset-y location="left">
+          <v-menu v-if="!playlistVisible" offset-y location="left">
             <!-- FixMe: console warning about activator not being a reactive object-->
             <template #activator="{ props }">
               <div v-if="smAndUp" class="mr-3 text-grey d-flex align-start" v-bind="props">
@@ -92,17 +97,23 @@ const fileType = computed({
             </v-list>
           </v-menu>
           <v-icon
-            v-if="smAndDown && route.name !== 'Home'"
+            v-if="!playlistVisible && smAndDown && route.name !== 'Home'"
             :class="anyFiltersApplied && `text-ipfsSecondary`"
             class="mr-3"
             :icon="mdiFilter"
             data-id="filter-menu-activator"
           />
+          <v-icon
+            v-if="playlistVisible"
+            class="mr-3"
+            :icon="mdiMagnify"
+            @click="playlistVisible = false"
+          />
         </template>
       </v-text-field>
     </div>
     <v-icon
-      v-if="!smAndDown"
+      v-if="!smAndDown && !playlistVisible"
       class="ml-2"
       size="34"
       color="white"
@@ -118,3 +129,8 @@ const fileType = computed({
   z-index: 10000;
 }
 </style>
+<style>
+#search input {
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index 41a40c64..d896c82f 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { mdiPlaylistMusic, mdiPlaylistMusicOutline } from "@mdi/js";
+import { mdiPlaylistPlay, mdiPlaylistPlus } from "@mdi/js";
 import CardContent from "@/components/searchViewComponents/subcomponents/genericCardContent.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
 import { Types, TypeListNames, TypeIcons } from "@/helpers/typeHelper";
@@ -163,13 +163,13 @@ const queryPage = computed({
         >
           Play all
           <template #prepend>
-            <v-icon size="28" :icon="mdiPlaylistMusic" color="white" />
+            <v-icon size="28" :icon="mdiPlaylistPlay" color="white" />
           </template>
         </v-btn>
         <v-btn color="ipfsPrimary-lighten-1" @click="enqueue(pageHits)">
           Enqueue all
           <template #prepend>
-            <v-icon size="28" :icon="mdiPlaylistMusicOutline" color="white" />
+            <v-icon size="28" :icon="mdiPlaylistPlus" color="white" />
           </template>
         </v-btn>
       </div>

From 80c18a09e951cc3e327b5781068f582f99f51345 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sun, 18 Sep 2022 01:00:26 +0200
Subject: [PATCH 24/56] loop function

---
 src/components/pageLayout/AppHeader.vue | 20 +++++++++++++++-----
 src/components/pageLayout/PlayList.vue  |  1 -
 src/components/pageLayout/SearchBar.vue |  2 +-
 src/composables/audioControls.ts        |  2 +-
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 404ace29..65dfcbfe 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -7,10 +7,10 @@ const route = useRoute();
 import { useStore } from "vuex";
 const store = useStore();
 
-import { mdiClose, mdiPlaylistMusic } from "@mdi/js";
+import { mdiClose, mdiPlaylistMusic, mdiRepeatOff, mdiRepeatVariant } from "@mdi/js";
 
 import { useDisplay } from "vuetify";
-const { mdAndUp } = useDisplay();
+const { mdAndUp, smAndUp } = useDisplay();
 
 import { useTheme } from "vuetify";
 import Hyperlink from "@/components/shared/HyperLink.vue";
@@ -18,7 +18,7 @@ const theme = useTheme();
 
 const whiteLogo = computed(() => theme.current.value.dark || route.name === "Search");
 
-import { togglePlaylist } from "@/composables/audioControls.ts";
+import { togglePlaylist, playlistVisible, toggleLoop, loop } from "@/composables/audioControls.ts";
 </script>
 
 <template>
@@ -56,9 +56,19 @@ import { togglePlaylist } from "@/composables/audioControls.ts";
           <div v-if="route.name === 'Search'" class="flex-grow-1">
             <SearchBar />
           </div>
-          <div v-if="route.name === 'Search'" class="d-none d-lg-block" style="min-width: 200px" />
-          <v-spacer v-else />
+          <!--          <div v-if="route.name === 'Search'" class="d-none d-lg-block" style="min-width: 200px" />-->
+          <!--          <v-spacer v-else />-->
 
+          <div
+            v-if="playlistVisible"
+            class="d-flex flex-row justify-space-between align-center flex-grow-1 mr-auto ml-0"
+          >
+            <v-app-bar-title v-if="smAndUp" color="white"> Planetarify Playlist </v-app-bar-title>
+            <v-btn :prepend-icon="loop ? mdiRepeatVariant : mdiRepeatOff" @click="toggleLoop">
+              {{ loop ? "loop" : "no loop" }}
+            </v-btn>
+            <v-spacer />
+          </div>
           <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylist">
             <v-icon :icon="mdiPlaylistMusic" />
           </v-btn>
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index 7245dcf3..ecbffda6 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -26,7 +26,6 @@ import VMarquee from "@/components/shared/VMarquee.vue";
       rounded="0"
       flat
     >
-      <v-card-title class="font-italic d-flex justify-center">Planetarify</v-card-title>
       <v-list bg-color="black" class="">
         <v-hover
           v-for="(entry, index) in playlistEntries"
diff --git a/src/components/pageLayout/SearchBar.vue b/src/components/pageLayout/SearchBar.vue
index db31c0d5..4c88daa9 100644
--- a/src/components/pageLayout/SearchBar.vue
+++ b/src/components/pageLayout/SearchBar.vue
@@ -53,7 +53,7 @@ import { playlistVisible } from "@/composables/audioControls";
         ref="input"
         v-model="searchPhrase"
         v-closable="{ handler: 'onIphoneClick' }"
-        :style="{ width: playlistVisible ? '50%' : '100%' }"
+        :style="{ width: playlistVisible ? '180px' : '100%' }"
         variant="plain"
         class="bg-white rounded-pill pl-5"
         placeholder="Search"
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index 5ed1c28a..8a5c1d3e 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -180,7 +180,7 @@ export const clearPlaylist = () => {
 };
 
 let playlistIndex = 0;
-const loop = ref(false);
+export const loop = ref(false);
 export const toggleLoop = () => {
   loop.value = !loop.value;
 };

From 5b78030e5912efd1136c658220392ce42c14f222 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sun, 18 Sep 2022 13:41:39 +0200
Subject: [PATCH 25/56] fast link to audio detail

---
 src/App.vue                                   |  5 ++-
 .../detailViewComponents/AudioDetail.vue      |  1 +
 src/components/pageLayout/AppHeader.vue       | 41 +++++++++++--------
 src/components/pageLayout/PlayList.vue        | 20 ++++++---
 src/composables/audioControls.ts              |  6 +++
 5 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1aa8a4c8..d1053c1f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,8 +3,10 @@
 import AppHeader from "@/components/pageLayout/AppHeader.vue";
 import { useRoute } from "vue-router";
 import PlayList from "./components/pageLayout/PlayList.vue";
+import AudioDetail from "@/components/detailViewComponents/AudioDetail.vue";
 
 const route = useRoute();
+import { audioDetailPopup } from "@/composables/audioControls";
 </script>
 
 <template>
@@ -13,7 +15,8 @@ const route = useRoute();
 
     <v-main>
       <play-list />
-      <router-view />
+      <audio-detail v-if="audioDetailPopup" :file="audioDetailPopup" />
+      <router-view v-else />
     </v-main>
 
     <AudioPlayer />
diff --git a/src/components/detailViewComponents/AudioDetail.vue b/src/components/detailViewComponents/AudioDetail.vue
index 4b69de1d..515939d0 100644
--- a/src/components/detailViewComponents/AudioDetail.vue
+++ b/src/components/detailViewComponents/AudioDetail.vue
@@ -8,6 +8,7 @@ import { picsum } from "@/helpers/picsum";
 
 import { detailProps } from "@/composables/useDetail";
 const props = defineProps(detailProps);
+console.log(props);
 
 import { audioPlayer, playAudioFile, pauseAudio } from "@/composables/audioControls";
 
diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 65dfcbfe..920d3484 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -18,7 +18,13 @@ const theme = useTheme();
 
 const whiteLogo = computed(() => theme.current.value.dark || route.name === "Search");
 
-import { togglePlaylist, playlistVisible, toggleLoop, loop } from "@/composables/audioControls.ts";
+import {
+  togglePlaylist,
+  playlistVisible,
+  audioDetailPopup,
+  toggleLoop,
+  loop,
+} from "@/composables/audioControls.ts";
 </script>
 
 <template>
@@ -34,7 +40,7 @@ import { togglePlaylist, playlistVisible, toggleLoop, loop } from "@/composables
           <div class="ml-2">
             <hyperlink to="/" class="d-flex align-center">
               <v-img
-                v-if="mdAndUp || route.name === 'Detail'"
+                v-if="mdAndUp || route.name === 'Detail' || audioDetailPopup"
                 alt="ipfs-search.com logo"
                 contain
                 :src="`/assets/logo-${whiteLogo ? 'white' : 'black'}.svg`"
@@ -53,7 +59,7 @@ import { togglePlaylist, playlistVisible, toggleLoop, loop } from "@/composables
             </hyperlink>
           </div>
 
-          <div v-if="route.name === 'Search'" class="flex-grow-1">
+          <div v-if="route.name === 'Search' && !audioDetailPopup" class="flex-grow-1">
             <SearchBar />
           </div>
           <!--          <div v-if="route.name === 'Search'" class="d-none d-lg-block" style="min-width: 200px" />-->
@@ -69,21 +75,24 @@ import { togglePlaylist, playlistVisible, toggleLoop, loop } from "@/composables
             </v-btn>
             <v-spacer />
           </div>
-          <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylist">
-            <v-icon :icon="mdiPlaylistMusic" />
-          </v-btn>
+          <div id="end-buttons" class="d-flex flex-row justify-end">
+            <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylist">
+              <v-icon :icon="mdiPlaylistMusic" />
+            </v-btn>
 
-          <settings-menu />
+            <settings-menu />
 
-          <hyperlink
-            v-if="route.name === 'Detail'"
-            :to="{ name: 'Search', query: route.query }"
-            replace
-          >
-            <v-btn icon>
-              <v-icon :icon="mdiClose" />
-            </v-btn>
-          </hyperlink>
+            <hyperlink
+              v-if="route.name === 'Detail' || audioDetailPopup"
+              :to="{ name: 'Search', query: route.query }"
+              replace
+              @click="audioDetailPopup = false"
+            >
+              <v-btn icon>
+                <v-icon :icon="mdiClose" />
+              </v-btn>
+            </hyperlink>
+          </div>
         </v-col>
       </v-row>
     </v-container>
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index ecbffda6..d599b4c5 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import store from "@/store";
-import { audioPlayer, playlistVisible, startPlaylist } from "@/composables/audioControls";
-import { mdiCircleSmall, mdiPlay, mdiDotsVertical } from "@mdi/js";
+import {
+  audioPlayer,
+  playlistVisible,
+  startPlaylist,
+  audioDetailPopup,
+} from "@/composables/audioControls";
+import { mdiCircleSmall, mdiPlay, mdiDisc } from "@mdi/js";
 import { useDisplay } from "vuetify";
 const { smAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
@@ -12,6 +17,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
 const playlistEntries = computed(() => store.getters["playlist/getPlaylist"].entries);
 import BlinkBlink from "../shared/BlinkBlink.vue";
 import VMarquee from "@/components/shared/VMarquee.vue";
+import HyperLink from "@/components/shared/HyperLink.vue";
 </script>
 
 <template>
@@ -97,11 +103,13 @@ import VMarquee from "@/components/shared/VMarquee.vue";
               <v-col :class="entry.audio?.error ? 'text-grey-darken-1' : ''">
                 <v-marquee :active="isHovering" speed="6">
                   <v-list-item-title class="d-flex">
-                    <span
-                      v-sane-html="
-                        `${[fileTitle(entry), fileAuthor(entry)].filter((e) => !!e).join(' - ')}`
+                    <span v-sane-html="fileTitle(entry)" class="mx-1" />
+                    <v-icon
+                      :icon="mdiDisc"
+                      @click="
+                        audioDetailPopup = entry;
+                        playlistVisible = false;
                       "
-                      class="mx-1"
                     />
                   </v-list-item-title>
                 </v-marquee>
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index 8a5c1d3e..16146a4c 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -164,8 +164,14 @@ export const audioPlayer = ref<IAudio>({
 
 export const playlistVisible = ref(false);
 export const togglePlaylist = () => {
+  audioDetailPopup.value = undefined;
   playlistVisible.value = !playlistVisible.value;
 };
+export const audioDetailPopup = ref<IFile | undefined>(undefined);
+export const showAudioDetail = (file: IFile) => {
+  audioDetailPopup.value = file;
+  playlistVisible.value = false;
+};
 
 export const setPlaylist = (entries: IFile[], autoPlay = true) => {
   store.commit("playlist/setPlaylist", { entries });

From 22bcbda6ae090c829099b53b51fb954c3ffbf5d0 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Mon, 19 Sep 2022 13:33:32 +0200
Subject: [PATCH 26/56] major improvement to Home view: remove text panels;
 several responsiveness fixes; refactoring of some components

---
 src/App.vue                                   |   8 +-
 src/components/HomeView.vue                   | 195 +-----------------
 .../detailViewComponents/AudioDetail.vue      |   1 -
 src/components/pageLayout/AppFooter.vue       |   9 +-
 src/components/pageLayout/AppHeader.vue       |  94 ++++++++-
 src/components/pageLayout/PlayList.vue        |  12 +-
 src/components/pageLayout/SearchBar.vue       |   9 +-
 src/composables/audioControls.ts              |   1 +
 src/plugins/vuetify/index.js                  |   3 +
 9 files changed, 122 insertions(+), 210 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d1053c1f..494643a3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,12 +11,12 @@ import { audioDetailPopup } from "@/composables/audioControls";
 
 <template>
   <v-app dark hidden>
-    <app-header v-if="route.name !== 'Home'" />
+    <app-header />
 
-    <v-main>
+    <v-main scrollable>
       <play-list />
-      <audio-detail v-if="audioDetailPopup" :file="audioDetailPopup" />
-      <router-view v-else />
+      <!--      <audio-detail v-if="audioDetailPopup" :file="audioDetailPopup" />-->
+      <router-view />
     </v-main>
 
     <AudioPlayer />
diff --git a/src/components/HomeView.vue b/src/components/HomeView.vue
index 575daaac..a3b2eb65 100644
--- a/src/components/HomeView.vue
+++ b/src/components/HomeView.vue
@@ -1,201 +1,26 @@
 <script setup>
-import { useDisplay } from "vuetify";
-import HomeViewCard from "@/components/homeViewComponents/HomeViewCard.vue";
 import SearchBar from "@/components/pageLayout/SearchBar.vue";
-import SettingsMenu from "@/components/pageLayout/SettingsMenu.vue";
-import {
-  mdiDotsVertical,
-  mdiWrench,
-  mdiShareVariant,
-  mdiEarth,
-  mdiOpenSourceInitiative,
-  mdiAccountMultiple,
-  mdiFlash,
-} from "@mdi/js";
-const { mdAndUp } = useDisplay();
 </script>
 
 <template>
-  <div class="home">
-    <v-app-bar app height="56" class="px-4 bg-appBar" elevate-on-scroll theme="light">
-      <v-container class="px-0">
-        <v-row>
-          <v-col cols="12" xl="8" offset-xl="2" class="d-flex justify-space-between align-center">
-            <div class="d-flex align-center" :class="mdAndUp ? 'ml-6' : ''">
-              <v-img
-                alt="ipfs-search.com logo"
-                contain
-                src="/assets/logo-black.svg"
-                width="168"
-                :aspect-ratio="6.00840336"
-              />
-            </div>
-            <v-spacer />
-            <v-btn
-              v-for="(link, i) in links"
-              :key="i"
-              :href="link.href"
-              :text="link.title"
-              size="small"
-              class="my-2 mx-1 hidden-sm-and-down"
-            />
-
-            <v-menu bottom left class="">
-              <template #activator="{ props }">
-                <v-btn
-                  v-bind="props"
-                  class="my-2 mx-0 mr-n2 hidden-md-and-up"
-                  :icon="mdiDotsVertical"
-                />
-              </template>
-
-              <v-list>
-                <v-list-item v-for="(link, i) in links" :key="i" :href="link.href">
-                  <v-list-item-title>
-                    {{ link.title }}
-                  </v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-
-            <settings-menu />
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-app-bar>
-
-    <v-img src="/assets/background-02.png" aspect-ratio="1.83" cover class="hero">
-      <v-container class="pa-0 fill-height d-flex">
-        <v-row class="align-content-end">
-          <v-col class="pa-2">
-            <h3 class="mb-2 text-center hidden-sm-and-down text-white">
-              Search the Distributed&#160;Web
-            </h3>
-            <SearchBar />
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-img>
-
-    <v-container class="mx-auto pt-4">
-      <v-row>
-        <v-col cols="12" xl="8" offset-xl="2" :class="mdAndUp ? 'mb-16' : ''">
-          <v-container class="pa-0">
-            <v-row align-center>
-              <home-view-card
-                :icon="mdiWrench"
-                title="Publicly available search"
-                text="We wish to provide publicly available search and discovery services in the
-            interest of our users, funded through donations and/or subscriptions and/or
-            opt-in advertisements. This would allow us to sustain ourselves while being able
-            to provide public search functionality for free."
-              />
-              <home-view-card
-                :icon="mdiShareVariant"
-                title="For external organisations"
-                text="We recognise that the expertise and team spirit attained during the
-                development of the public service can be harnessed to implement similar services for
-                external organisations, specifically by providing private search through private
-                clouds and/or ipfs clusters."
-              />
-              <home-view-card
-                :icon="mdiEarth"
-                title="Next generation internet"
-                text="In the long run, we aspire to scale out and implement truly
-                      decentralised/distributed search for the next generation internet, providing
-                      strong guarantees for the integrity of the service, meeting the interests of
-                      the users as well as the openness of our architecture and data."
-              />
-              <home-view-card
-                :icon="mdiOpenSourceInitiative"
-                title="World class documentation"
-                text="It is our personal experience that many FOSS projects become overly
-                    dependent on a very select group of developers, effectively creating a closed
-                    community. Besides being approachable and actively engaging in conversations,
-                    documentation is a key component to enable others to contribute to a project,
-                    improving upon it, using it pinpointing essential mistakes."
-              />
-              <home-view-card
-                :icon="mdiAccountMultiple"
-                title="Pragmatic solution"
-                text="
-                    Since its very inception, we wanted to create
-                    a search engine that was explicitly open with regards to its
-                    intellectual property. As a part of this, we have repeatedly
-                    attempted to automatically publish snapshots of our index to
-                    the IPFS. We have yet to find a pragmatic solution. We are
-                    confident that during the scope of this project, we will be
-                    able to publish our full index to IPFS such that others may
-                    fork our project."
-              />
-              <home-view-card
-                :icon="mdiFlash"
-                title="Darker visions"
-                text="
-                    Like many who recognise themselves as part of
-                    a freedom-loving community, we have harboured the dream of
-                    the internet as a truly liberating architecture. Like many,
-                    we also have darker visions wherein current tendencies
-                    commodify our most intimate identity and our behaviour. We
-                    feel that the only true solution to this is to fully
-                    distribute the internet’s architecture. We feel that this is
-                    possible theoretically, as well as practically."
-              />
-            </v-row>
-          </v-container>
+  <v-img src="/assets/background-02.png" cover class="h-100 hero bg-ipfsPrimary">
+    <v-container class="pa-0 fill-height d-flex mt-12">
+      <v-row class="align-content-center">
+        <v-col class="pa-2">
+          <!--          TODO: put a better title or remove this tag-->
+          <h3 class="mb-2 text-center hidden-sm-and-down text-white"></h3>
+          <SearchBar />
         </v-col>
       </v-row>
     </v-container>
-
-    <v-container>
-      <v-row>
-        <v-col />
-      </v-row>
-    </v-container>
-  </div>
+  </v-img>
 </template>
 
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  data: () => ({
-    links: [
-      {
-        title: "Donate",
-        href: "https://opencollective.com/ipfs-search#category-CONTRIBUTE",
-      },
-      {
-        title: "Blog",
-        href: "https://blog.ipfs-search.com/",
-      },
-      {
-        title: "API",
-        href: "https://api.ipfs-search.com/",
-      },
-      {
-        title: "Docs",
-        href: "https://ipfs-search.readthedocs.io/en/latest/",
-      },
-      {
-        title: "Code",
-        href: "https://github.com/ipfs-search/",
-      },
-      {
-        title: "Contact",
-        href: "mailto:info@ipfs-search.com",
-      },
-    ],
-  }),
-});
-</script>
-
 <style lang="scss" scoped>
 .hero {
-  max-height: 45vh;
-  min-height: 45vh;
-  background-color: lighten(#0e3344, 10%);
+  margin-top: -100px;
 }
+
 h2 {
   font-size: 120%;
   letter-spacing: 0.09em;
diff --git a/src/components/detailViewComponents/AudioDetail.vue b/src/components/detailViewComponents/AudioDetail.vue
index 515939d0..4b69de1d 100644
--- a/src/components/detailViewComponents/AudioDetail.vue
+++ b/src/components/detailViewComponents/AudioDetail.vue
@@ -8,7 +8,6 @@ import { picsum } from "@/helpers/picsum";
 
 import { detailProps } from "@/composables/useDetail";
 const props = defineProps(detailProps);
-console.log(props);
 
 import { audioPlayer, playAudioFile, pauseAudio } from "@/composables/audioControls";
 
diff --git a/src/components/pageLayout/AppFooter.vue b/src/components/pageLayout/AppFooter.vue
index 9de8c26c..bf73fcad 100644
--- a/src/components/pageLayout/AppFooter.vue
+++ b/src/components/pageLayout/AppFooter.vue
@@ -20,7 +20,7 @@ const footer_links = [
   },
   {
     icon: mdiGithub,
-    href: "https://github.com/ipfs-search/ipfs-search",
+    href: "https://github.com/ipfs-search",
   },
   {
     icon: mdiHandCoin,
@@ -35,8 +35,11 @@ const footer_links = [
 
 <template>
   <v-card
-    v-if="route.name === 'Home' || (route.name === 'Search' && mdAndUp)"
-    :class="{ 'footer--hidden': !footerVisible || audioPlayer || playlistVisible }"
+    :class="{
+      'footer--hidden':
+        !(route.name === 'Home' || (route.name === 'Search' && mdAndUp)) &&
+        (!footerVisible || audioPlayer || playlistVisible),
+    }"
     position="fixed"
     variant="flat"
     tile
diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 920d3484..93c0865a 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -7,7 +7,13 @@ const route = useRoute();
 import { useStore } from "vuex";
 const store = useStore();
 
-import { mdiClose, mdiPlaylistMusic, mdiRepeatOff, mdiRepeatVariant } from "@mdi/js";
+import {
+  mdiClose,
+  mdiPlaylistMusic,
+  mdiRepeatOff,
+  mdiRepeatVariant,
+  mdiDotsVertical,
+} from "@mdi/js";
 
 import { useDisplay } from "vuetify";
 const { mdAndUp, smAndUp } = useDisplay();
@@ -22,13 +28,42 @@ import {
   togglePlaylist,
   playlistVisible,
   audioDetailPopup,
+  showAudioDetail,
   toggleLoop,
   loop,
 } from "@/composables/audioControls.ts";
+
+const links = [
+  {
+    title: "Donate",
+    href: "https://opencollective.com/ipfs-search#category-CONTRIBUTE",
+  },
+  {
+    title: "Blog",
+    href: "https://blog.ipfs-search.com/",
+  },
+  {
+    title: "API",
+    href: "https://api.ipfs-search.com/",
+  },
+  {
+    title: "Docs",
+    href: "https://ipfs-search.readthedocs.io/en/latest/",
+  },
+  {
+    title: "Code",
+    href: "https://github.com/ipfs-search/",
+  },
+  {
+    title: "Contact",
+    href: "mailto:info@ipfs-search.com",
+  },
+];
 </script>
 
 <template>
   <v-app-bar
+    v-if="route.name !== 'Home'"
     class="px-4"
     height="56"
     theme="route.name === Search ? 'dark' : 'light'"
@@ -69,7 +104,7 @@ import {
             v-if="playlistVisible"
             class="d-flex flex-row justify-space-between align-center flex-grow-1 mr-auto ml-0"
           >
-            <v-app-bar-title v-if="smAndUp" color="white"> Planetarify Playlist </v-app-bar-title>
+            <v-app-bar-title v-if="smAndUp" color="white"> Planetify Premium </v-app-bar-title>
             <v-btn :prepend-icon="loop ? mdiRepeatVariant : mdiRepeatOff" @click="toggleLoop">
               {{ loop ? "loop" : "no loop" }}
             </v-btn>
@@ -86,9 +121,8 @@ import {
               v-if="route.name === 'Detail' || audioDetailPopup"
               :to="{ name: 'Search', query: route.query }"
               replace
-              @click="audioDetailPopup = false"
             >
-              <v-btn icon>
+              <v-btn icon @click="showAudioDetail(undefined)">
                 <v-icon :icon="mdiClose" />
               </v-btn>
             </hyperlink>
@@ -97,4 +131,56 @@ import {
       </v-row>
     </v-container>
   </v-app-bar>
+  <!--  home page app bar-->
+  <!--  Todo: combine the two versions into 1 generic appbar-->
+  <v-app-bar v-else app height="56" class="px-4 bg-ipfsPrimary" elevate-on-scroll theme="dark">
+    <v-container class="px-0">
+      <v-row>
+        <v-col cols="12" xl="8" offset-xl="2" class="d-flex justify-space-between align-center">
+          <div class="d-flex align-center" :class="mdAndUp ? 'ml-6' : ''">
+            <v-img
+              alt="ipfs-search.com logo"
+              contain
+              src="/assets/logo-white.svg"
+              width="168"
+              :aspect-ratio="6.00840336"
+            />
+          </div>
+          <v-spacer />
+          <v-btn
+            v-for="(link, i) in links"
+            :key="i"
+            :href="link.href"
+            :text="link.title"
+            size="small"
+            class="my-2 mx-1 hidden-sm-and-down"
+          />
+
+          <v-menu bottom left class="">
+            <template #activator="{ props }">
+              <v-btn
+                v-bind="props"
+                class="my-2 mx-0 mr-n2 hidden-md-and-up"
+                :icon="mdiDotsVertical"
+              />
+            </template>
+
+            <v-list>
+              <v-list-item v-for="(link, i) in links" :key="i" :href="link.href">
+                <v-list-item-title>
+                  {{ link.title }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+
+          <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylist">
+            <v-icon :icon="mdiPlaylistMusic" />
+          </v-btn>
+
+          <settings-menu />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-app-bar>
 </template>
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index d599b4c5..1aed8ed9 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -5,6 +5,7 @@ import {
   audioPlayer,
   playlistVisible,
   startPlaylist,
+  showAudioDetail,
   audioDetailPopup,
 } from "@/composables/audioControls";
 import { mdiCircleSmall, mdiPlay, mdiDisc } from "@mdi/js";
@@ -17,7 +18,6 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
 const playlistEntries = computed(() => store.getters["playlist/getPlaylist"].entries);
 import BlinkBlink from "../shared/BlinkBlink.vue";
 import VMarquee from "@/components/shared/VMarquee.vue";
-import HyperLink from "@/components/shared/HyperLink.vue";
 </script>
 
 <template>
@@ -27,7 +27,7 @@ import HyperLink from "@/components/shared/HyperLink.vue";
       position="fixed"
       width="100%"
       class="overflow-y-auto"
-      style="z-index: 1000"
+      style="z-index: 100000"
       color="black"
       rounded="0"
       flat
@@ -104,13 +104,7 @@ import HyperLink from "@/components/shared/HyperLink.vue";
                 <v-marquee :active="isHovering" speed="6">
                   <v-list-item-title class="d-flex">
                     <span v-sane-html="fileTitle(entry)" class="mx-1" />
-                    <v-icon
-                      :icon="mdiDisc"
-                      @click="
-                        audioDetailPopup = entry;
-                        playlistVisible = false;
-                      "
-                    />
+                    <v-icon :icon="mdiDisc" @click="showAudioDetail(entry)" />
                   </v-list-item-title>
                 </v-marquee>
               </v-col>
diff --git a/src/components/pageLayout/SearchBar.vue b/src/components/pageLayout/SearchBar.vue
index 4c88daa9..d81b29de 100644
--- a/src/components/pageLayout/SearchBar.vue
+++ b/src/components/pageLayout/SearchBar.vue
@@ -11,7 +11,7 @@ import { searchTypes, listName, Types, TypeListNames, TypeIcons } from "@/helper
 const store = useStore();
 const route = useRoute();
 
-const { smAndDown, smAndUp } = useDisplay();
+const { smAndDown, smAndUp, mobile } = useDisplay();
 const { hideKeyBoardOnAndroid } = useMobileDevices();
 
 const anyFiltersApplied = computed(() => store.getters["query/filters/anyFiltersApplied"]);
@@ -46,14 +46,14 @@ import { playlistVisible } from "@/composables/audioControls";
 </script>
 
 <template>
-  <v-container class="d-flex justify-start align-center">
+  <v-container class="d-flex justify-center">
     <div id="search" class="flex-grow-1">
       <v-text-field
         id="searchfield"
         ref="input"
         v-model="searchPhrase"
         v-closable="{ handler: 'onIphoneClick' }"
-        :style="{ width: playlistVisible ? '180px' : '100%' }"
+        :style="{ width: playlistVisible ? (mobile ? '70px' : '180px') : '100%' }"
         variant="plain"
         class="bg-white rounded-pill pl-5"
         placeholder="Search"
@@ -67,7 +67,8 @@ import { playlistVisible } from "@/composables/audioControls";
         @keyup.enter="enterSearchPhrase"
         @focus="playlistVisible = false"
       >
-        <template #append>
+        <template v-if="route.name !== 'Home'" #append>
+          <!--          type menu -->
           <v-menu v-if="!playlistVisible" offset-y location="left">
             <!-- FixMe: console warning about activator not being a reactive object-->
             <template #activator="{ props }">
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index 16146a4c..3cfaba86 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -166,6 +166,7 @@ export const playlistVisible = ref(false);
 export const togglePlaylist = () => {
   audioDetailPopup.value = undefined;
   playlistVisible.value = !playlistVisible.value;
+  console.log(playlistVisible.value);
 };
 export const audioDetailPopup = ref<IFile | undefined>(undefined);
 export const showAudioDetail = (file: IFile) => {
diff --git a/src/plugins/vuetify/index.js b/src/plugins/vuetify/index.js
index 8ca323ed..63fd11ab 100644
--- a/src/plugins/vuetify/index.js
+++ b/src/plugins/vuetify/index.js
@@ -20,4 +20,7 @@ export default createVuetify({
       mdi,
     },
   },
+  display: {
+    mobileBreakpoint: 450,
+  },
 });

From 79f301ad282b0429395aac9672f5864c0d7e7301 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Mon, 19 Sep 2022 16:23:31 +0200
Subject: [PATCH 27/56] adjust scrollbar of search page for footer

---
 src/App.vue                               | 23 ++++++++++++++-----
 src/components/SearchView.vue             | 28 ++++++++---------------
 src/components/pageLayout/AppFooter.vue   |  4 ++--
 src/components/pageLayout/AudioPlayer.vue |  2 +-
 4 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 494643a3..71f9a655 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,17 +6,28 @@ import PlayList from "./components/pageLayout/PlayList.vue";
 import AudioDetail from "@/components/detailViewComponents/AudioDetail.vue";
 
 const route = useRoute();
-import { audioDetailPopup } from "@/composables/audioControls";
+import { audioDetailPopup, audioPlayer } from "@/composables/audioControls";
+import { footerVisible } from "@/composables/footer.js";
+import { computed } from "vue";
+
+const onScroll = () => (footerVisible.value = false);
+const adjustFooterPadding = computed(() => {
+  if (footerVisible.value) return "120px";
+  if (audioPlayer.value.file) return "100px";
+  return "0px";
+});
 </script>
 
 <template>
-  <v-app dark hidden>
+  <v-app id="v-app" dark hidden style="height: 100vh">
     <app-header />
 
-    <v-main scrollable>
-      <play-list />
-      <!--      <audio-detail v-if="audioDetailPopup" :file="audioDetailPopup" />-->
-      <router-view />
+    <v-main class="h-100" :style="{ 'padding-bottom': adjustFooterPadding }">
+      <div class="h-100" style="overflow-y: scroll" @scroll="onScroll">
+        <play-list />
+        <!--      <audio-detail v-if="audioDetailPopup" :file="audioDetailPopup" />-->
+        <router-view />
+      </div>
     </v-main>
 
     <AudioPlayer />
diff --git a/src/components/SearchView.vue b/src/components/SearchView.vue
index 0b658a08..722b0733 100644
--- a/src/components/SearchView.vue
+++ b/src/components/SearchView.vue
@@ -16,31 +16,23 @@ const route = useRoute();
 function listType(t) {
   return [t, Types.all, undefined].includes(route.query.type);
 }
-
-import { footerVisible } from "@/composables/footer.js";
-const onScroll = () => (footerVisible.value = false);
 </script>
 
 <template>
-  <div data-id="search-view" class="overflow-y-scroll vh-100" @scroll="onScroll">
-    <div class="bottom-space">
-      <search-filter-menu v-if="smAndDown" />
-      <SearchFilters v-else />
-      <GenericList v-if="listType(Types.text)" :file-type="Types.text" />
-      <AudioList v-if="listType(Types.audio)" />
-      <ImageList v-if="listType(Types.images)" />
-      <VideoList v-if="listType(Types.video)" />
-      <GenericList v-if="listType(Types.directories)" :file-type="Types.directories" />
-      <GenericList v-if="listType(Types.other)" :file-type="Types.other" />
-      <GenericList v-if="route.query.type == Types.unfiltered" :file-type="Types.unfiltered" />
-    </div>
+  <div data-id="search-view">
+    <search-filter-menu v-if="smAndDown" />
+    <SearchFilters v-else />
+    <GenericList v-if="listType(Types.text)" :file-type="Types.text" />
+    <AudioList v-if="listType(Types.audio)" />
+    <ImageList v-if="listType(Types.images)" />
+    <VideoList v-if="listType(Types.video)" />
+    <GenericList v-if="listType(Types.directories)" :file-type="Types.directories" />
+    <GenericList v-if="listType(Types.other)" :file-type="Types.other" />
+    <GenericList v-if="route.query.type == Types.unfiltered" :file-type="Types.unfiltered" />
   </div>
 </template>
 
 <style scoped>
-.bottom-space {
-  padding-bottom: 118px;
-}
 .vh-100 {
   height: 100vh;
 }
diff --git a/src/components/pageLayout/AppFooter.vue b/src/components/pageLayout/AppFooter.vue
index bf73fcad..d6f32c11 100644
--- a/src/components/pageLayout/AppFooter.vue
+++ b/src/components/pageLayout/AppFooter.vue
@@ -37,8 +37,7 @@ const footer_links = [
   <v-card
     :class="{
       'footer--hidden':
-        !(route.name === 'Home' || (route.name === 'Search' && mdAndUp)) &&
-        (!footerVisible || audioPlayer || playlistVisible),
+        route.name !== 'Home' && (!footerVisible || audioPlayer.file || playlistVisible),
     }"
     position="fixed"
     variant="flat"
@@ -46,6 +45,7 @@ const footer_links = [
     class="footer bg-ipfsPrimary-lighten-1 text-center"
     rounded="0"
     width="101%"
+    height="120px"
   >
     <v-card-text class="ipfsPrimary-lighten-1 justify-center d-flex flex-row text-caption py-1">
       <v-btn
diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index fb4645bf..519faa8c 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -64,7 +64,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
         style="position: absolute"
         color="ipfsPrimary-lighten-4"
         class="bg-ipfsPrimary progress-bar"
-        height="3"
+        height="5"
         clickable
       />
       <div class="d-flex w-100">

From c1d45847c0f501b9da6d38f66a79f90a3319cad7 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Mon, 19 Sep 2022 21:28:38 +0200
Subject: [PATCH 28/56] scrollbars finally working properly!

---
 src/App.vue                            | 14 ++++++--------
 src/components/SearchView.vue          | 18 ++++++------------
 src/components/pageLayout/PlayList.vue |  5 ++---
 3 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 71f9a655..ed0f50e0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,13 +6,13 @@ import PlayList from "./components/pageLayout/PlayList.vue";
 import AudioDetail from "@/components/detailViewComponents/AudioDetail.vue";
 
 const route = useRoute();
-import { audioDetailPopup, audioPlayer } from "@/composables/audioControls";
+import { audioDetailPopup, playlistVisible, audioPlayer } from "@/composables/audioControls";
 import { footerVisible } from "@/composables/footer.js";
 import { computed } from "vue";
 
-const onScroll = () => (footerVisible.value = false);
 const adjustFooterPadding = computed(() => {
-  if (footerVisible.value) return "120px";
+  if (route.name === "Home") return "0px";
+  if (footerVisible.value && !audioPlayer.value.file && !playlistVisible.value) return "120px";
   if (audioPlayer.value.file) return "100px";
   return "0px";
 });
@@ -23,11 +23,9 @@ const adjustFooterPadding = computed(() => {
     <app-header />
 
     <v-main class="h-100" :style="{ 'padding-bottom': adjustFooterPadding }">
-      <div class="h-100" style="overflow-y: scroll" @scroll="onScroll">
-        <play-list />
-        <!--      <audio-detail v-if="audioDetailPopup" :file="audioDetailPopup" />-->
-        <router-view />
-      </div>
+      <play-list />
+      <!--      <audio-detail v-if="audioDetailPopup" :file="audioDetailPopup" />-->
+      <router-view />
     </v-main>
 
     <AudioPlayer />
diff --git a/src/components/SearchView.vue b/src/components/SearchView.vue
index 722b0733..780f1a9f 100644
--- a/src/components/SearchView.vue
+++ b/src/components/SearchView.vue
@@ -4,22 +4,26 @@ import GenericList from "@/components/searchViewComponents/BaseList.vue";
 import ImageList from "@/components/searchViewComponents/ImageList.vue";
 import AudioList from "@/components/searchViewComponents/AudioList.vue";
 import VideoList from "@/components/searchViewComponents/VideoList.vue";
+import SearchFilterMenu from "@/components/searchViewComponents/subcomponents/SearchFilterMenu.vue";
 
 import { useRoute } from "vue-router";
 import { Types } from "@/helpers/typeHelper";
 import { useDisplay } from "vuetify";
-import SearchFilterMenu from "@/components/searchViewComponents/subcomponents/SearchFilterMenu.vue";
 const { smAndDown } = useDisplay();
 
+import { footerVisible } from "@/composables/footer.js";
+import { playlistVisible } from "@/composables/audioControls";
+
 const route = useRoute();
 
 function listType(t) {
   return [t, Types.all, undefined].includes(route.query.type);
 }
+const onScroll = () => (footerVisible.value = false);
 </script>
 
 <template>
-  <div data-id="search-view">
+  <div v-if="!playlistVisible" data-id="search-view" class="h-100" style="overflow-y: scroll">
     <search-filter-menu v-if="smAndDown" />
     <SearchFilters v-else />
     <GenericList v-if="listType(Types.text)" :file-type="Types.text" />
@@ -31,13 +35,3 @@ function listType(t) {
     <GenericList v-if="route.query.type == Types.unfiltered" :file-type="Types.unfiltered" />
   </div>
 </template>
-
-<style scoped>
-.vh-100 {
-  height: 100vh;
-}
-
-.overflow-y-scroll {
-  overflow-y: scroll;
-}
-</style>
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index 1aed8ed9..ca82ef6d 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -21,12 +21,11 @@ import VMarquee from "@/components/shared/VMarquee.vue";
 </script>
 
 <template>
-  <v-fade-transition class="overflow-y-scroll vh-100">
+  <v-fade-transition>
     <v-card
       v-if="playlistVisible"
-      position="fixed"
       width="100%"
-      class="overflow-y-auto"
+      class="overflow-y-scroll h-100"
       style="z-index: 100000"
       color="black"
       rounded="0"

From cab15469f7b6c27db64433cc86089a3c21037604 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Mon, 19 Sep 2022 22:05:17 +0200
Subject: [PATCH 29/56] some more responsiveness fixes; introducing the color
 "planetifyDark"

---
 src/App.vue                                   |  4 +-
 src/components/pageLayout/AppFooter.vue       | 10 +----
 src/components/pageLayout/AppHeader.vue       | 41 +++++++++++--------
 src/components/pageLayout/AudioPlayer.vue     |  2 +-
 .../pageLayout/PlanetifyToolBar.vue           | 22 ++++++++++
 src/components/pageLayout/PlayList.vue        |  4 +-
 src/components/pageLayout/SearchBar.vue       | 10 ++---
 .../searchViewComponents/BaseList.vue         |  2 +-
 src/composables/audioControls.ts              |  2 +-
 src/plugins/vuetify/theme.js                  |  1 +
 10 files changed, 60 insertions(+), 38 deletions(-)
 create mode 100644 src/components/pageLayout/PlanetifyToolBar.vue

diff --git a/src/App.vue b/src/App.vue
index ed0f50e0..5650ffd7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,9 +11,9 @@ import { footerVisible } from "@/composables/footer.js";
 import { computed } from "vue";
 
 const adjustFooterPadding = computed(() => {
-  if (route.name === "Home") return "0px";
-  if (footerVisible.value && !audioPlayer.value.file && !playlistVisible.value) return "120px";
+  if (route.name === "Home" && !playlistVisible.value) return "0px";
   if (audioPlayer.value.file) return "100px";
+  if (footerVisible.value && !playlistVisible.value) return "120px";
   return "0px";
 });
 </script>
diff --git a/src/components/pageLayout/AppFooter.vue b/src/components/pageLayout/AppFooter.vue
index d6f32c11..8dbb7c0d 100644
--- a/src/components/pageLayout/AppFooter.vue
+++ b/src/components/pageLayout/AppFooter.vue
@@ -37,7 +37,7 @@ const footer_links = [
   <v-card
     :class="{
       'footer--hidden':
-        route.name !== 'Home' && (!footerVisible || audioPlayer.file || playlistVisible),
+        (route.name !== 'Home' && !footerVisible) || audioPlayer.file || playlistVisible,
     }"
     position="fixed"
     variant="flat"
@@ -76,14 +76,6 @@ const footer_links = [
   </v-card>
 </template>
 
-<script>
-export default {
-  data: () => ({
-    lastScrollPosition: 0,
-  }),
-};
-</script>
-
 <style lang="scss" scoped>
 .footer {
   transition: 200ms all ease-in-out;
diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 93c0865a..1cd5e29e 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -32,6 +32,7 @@ import {
   toggleLoop,
   loop,
 } from "@/composables/audioControls.ts";
+import PlanetifyBar from "@/components/pageLayout/PlanetifyToolBar.vue";
 
 const links = [
   {
@@ -66,14 +67,13 @@ const links = [
     v-if="route.name !== 'Home'"
     class="px-4"
     height="56"
-    theme="route.name === Search ? 'dark' : 'light'"
-    :color="route.name === 'Search' ? 'ipfsPrimary-lighten-1' : 'toolbar-light'"
+    :color="route.name !== 'Detail' ? 'ipfsPrimary-lighten-1' : 'toolbar-light'"
   >
     <v-container fluid class="px-0 align-start">
       <v-row>
         <v-col cols="12" class="px-0 d-flex justify-space-between align-center">
           <div class="ml-2">
-            <hyperlink to="/" class="d-flex align-center">
+            <hyperlink to="/" class="d-flex align-center" @click="playlistVisible = false">
               <v-img
                 v-if="mdAndUp || route.name === 'Detail' || audioDetailPopup"
                 alt="ipfs-search.com logo"
@@ -94,22 +94,17 @@ const links = [
             </hyperlink>
           </div>
 
-          <div v-if="route.name === 'Search' && !audioDetailPopup" class="flex-grow-1">
+          <div
+            v-if="route.name === 'Search' && !audioDetailPopup"
+            :class="{ 'flex-grow-1': !playlistVisible }"
+          >
             <SearchBar />
           </div>
           <!--          <div v-if="route.name === 'Search'" class="d-none d-lg-block" style="min-width: 200px" />-->
           <!--          <v-spacer v-else />-->
 
-          <div
-            v-if="playlistVisible"
-            class="d-flex flex-row justify-space-between align-center flex-grow-1 mr-auto ml-0"
-          >
-            <v-app-bar-title v-if="smAndUp" color="white"> Planetify Premium </v-app-bar-title>
-            <v-btn :prepend-icon="loop ? mdiRepeatVariant : mdiRepeatOff" @click="toggleLoop">
-              {{ loop ? "loop" : "no loop" }}
-            </v-btn>
-            <v-spacer />
-          </div>
+          <planetify-bar v-if="playlistVisible" />
+
           <div id="end-buttons" class="d-flex flex-row justify-end">
             <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylist">
               <v-icon :icon="mdiPlaylistMusic" />
@@ -137,18 +132,30 @@ const links = [
     <v-container class="px-0">
       <v-row>
         <v-col cols="12" xl="8" offset-xl="2" class="d-flex justify-space-between align-center">
-          <div class="d-flex align-center" :class="mdAndUp ? 'ml-6' : ''">
+          <div class="d-flex align-center" @click="playlistVisible = false">
             <v-img
+              v-if="mdAndUp || !playlistVisible"
               alt="ipfs-search.com logo"
               contain
               src="/assets/logo-white.svg"
               width="168"
               :aspect-ratio="6.00840336"
             />
+            <v-img
+              v-else
+              alt="ipfs-search.com logo"
+              contain
+              src="/assets/logo-hexagon-white.svg"
+              width="28"
+              height="28"
+            />
           </div>
-          <v-spacer />
+          <v-spacer v-if="!playlistVisible" />
+
+          <planetify-bar v-if="playlistVisible" class="ml-3" />
           <v-btn
             v-for="(link, i) in links"
+            v-else
             :key="i"
             :href="link.href"
             :text="link.title"
@@ -156,7 +163,7 @@ const links = [
             class="my-2 mx-1 hidden-sm-and-down"
           />
 
-          <v-menu bottom left class="">
+          <v-menu bottom left>
             <template #activator="{ props }">
               <v-btn
                 v-bind="props"
diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index 519faa8c..0d52cc3a 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -51,7 +51,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
       style="z-index: 10000"
       position="fixed"
       location="bottom"
-      color="black"
+      color="planetifyDark"
       class="d-flex"
       flat
       rounded="0"
diff --git a/src/components/pageLayout/PlanetifyToolBar.vue b/src/components/pageLayout/PlanetifyToolBar.vue
new file mode 100644
index 00000000..08aab88c
--- /dev/null
+++ b/src/components/pageLayout/PlanetifyToolBar.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { mdiRepeatVariant, mdiRepeatOff } from "@mdi/js";
+import { toggleLoop, loop } from "@/composables/audioControls";
+import { useDisplay } from "vuetify";
+const { smAndUp } = useDisplay();
+</script>
+
+<template>
+  <div class="d-flex flex-row justify-space-between align-center flex-grow-1 mr-auto ml-0">
+    <v-card
+      rounded="rounded"
+      color="planetifyDark"
+      :class="{ 'flex-grow-1': true }"
+      class="d-flex justify-start align-center pl-3"
+    >
+      <v-app-bar-title v-if="true" color="white"> Planetify Pro </v-app-bar-title>
+      <v-btn :prepend-icon="loop ? mdiRepeatVariant : mdiRepeatOff" @click="toggleLoop">
+        {{ smAndUp ? (loop ? "loop" : "no loop") : "" }}
+      </v-btn>
+    </v-card>
+  </div>
+</template>
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index ca82ef6d..1e852412 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -27,11 +27,11 @@ import VMarquee from "@/components/shared/VMarquee.vue";
       width="100%"
       class="overflow-y-scroll h-100"
       style="z-index: 100000"
-      color="black"
+      color="planetifyDark"
       rounded="0"
       flat
     >
-      <v-list bg-color="black" class="">
+      <v-list bg-color="planetifyDark" class="">
         <v-hover
           v-for="(entry, index) in playlistEntries"
           :key="index"
diff --git a/src/components/pageLayout/SearchBar.vue b/src/components/pageLayout/SearchBar.vue
index d81b29de..bd070ea6 100644
--- a/src/components/pageLayout/SearchBar.vue
+++ b/src/components/pageLayout/SearchBar.vue
@@ -11,7 +11,7 @@ import { searchTypes, listName, Types, TypeListNames, TypeIcons } from "@/helper
 const store = useStore();
 const route = useRoute();
 
-const { smAndDown, smAndUp, mobile } = useDisplay();
+const { smAndDown, smAndUp, xs } = useDisplay();
 const { hideKeyBoardOnAndroid } = useMobileDevices();
 
 const anyFiltersApplied = computed(() => store.getters["query/filters/anyFiltersApplied"]);
@@ -46,14 +46,14 @@ import { playlistVisible } from "@/composables/audioControls";
 </script>
 
 <template>
-  <v-container class="d-flex justify-center">
+  <v-container class="d-flex justify-center align-center">
     <div id="search" class="flex-grow-1">
       <v-text-field
         id="searchfield"
         ref="input"
         v-model="searchPhrase"
         v-closable="{ handler: 'onIphoneClick' }"
-        :style="{ width: playlistVisible ? (mobile ? '70px' : '180px') : '100%' }"
+        :style="{ width: playlistVisible ? (xs ? '70px' : '180px') : '100%' }"
         variant="plain"
         class="bg-white rounded-pill pl-5"
         placeholder="Search"
@@ -67,7 +67,7 @@ import { playlistVisible } from "@/composables/audioControls";
         @keyup.enter="enterSearchPhrase"
         @focus="playlistVisible = false"
       >
-        <template v-if="route.name !== 'Home'" #append>
+        <template #append>
           <!--          type menu -->
           <v-menu v-if="!playlistVisible" offset-y location="left">
             <!-- FixMe: console warning about activator not being a reactive object-->
@@ -78,7 +78,7 @@ import { playlistVisible } from "@/composables/audioControls";
                 </span>
                 <v-icon class="d-inline-block" :icon="mdiMenuDown" />
               </div>
-              <div v-else v-bind="props">
+              <div v-else v-bind="props" class="mr-3">
                 <v-icon class="d-inline-block" :icon="TypeIcons[fileType]" />
               </div>
             </template>
diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index d896c82f..3dae684a 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -150,7 +150,7 @@ const queryPage = computed({
         </template>
       </v-btn>
       <div
-        v-if="fileType === Types.audio"
+        v-if="fileType === Types.audio && pageHits.length"
         class="flex-row d-flex justify-end"
         style="column-gap: 5px"
       >
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index 3cfaba86..71f99449 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -77,6 +77,7 @@ export const audioPlayer = ref<IAudio>({
    * returns promise which resolves once the audiofile reaches the end
    */
   play(file?: IFile, options = {}): Promise<IAudio> {
+    this.error = "";
     return new Promise((resolve, reject) => {
       abortController.signal.addEventListener("abort", () => {
         reject();
@@ -166,7 +167,6 @@ export const playlistVisible = ref(false);
 export const togglePlaylist = () => {
   audioDetailPopup.value = undefined;
   playlistVisible.value = !playlistVisible.value;
-  console.log(playlistVisible.value);
 };
 export const audioDetailPopup = ref<IFile | undefined>(undefined);
 export const showAudioDetail = (file: IFile) => {
diff --git a/src/plugins/vuetify/theme.js b/src/plugins/vuetify/theme.js
index e48fd458..dcb90a62 100644
--- a/src/plugins/vuetify/theme.js
+++ b/src/plugins/vuetify/theme.js
@@ -14,6 +14,7 @@ const ipfsTheme = {
     success: "#4CAF50",
     warning: "#FFC107",
     appBar: "#f5f5f5",
+    planetifyDark: "#0d0041",
   },
 };
 

From 7cbbcb88cef8fb9842c561124d85955515ef5bb2 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Tue, 20 Sep 2022 00:11:58 +0200
Subject: [PATCH 30/56] add delete entry function. add more styling to playlist
 entries

---
 src/App.vue                             | 10 +-----
 src/components/pageLayout/AppHeader.vue | 11 +++++--
 src/components/pageLayout/PlayList.vue  | 43 ++++++++++++++++---------
 src/components/shared/HyperLink.vue     |  9 +++++-
 src/composables/audioControls.ts        | 16 ++++++---
 src/helpers/fileHelper.ts               |  3 ++
 6 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5650ffd7..34ed67da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,7 @@ const adjustFooterPadding = computed(() => {
 
     <v-main class="h-100" :style="{ 'padding-bottom': adjustFooterPadding }">
       <play-list />
-      <!--      <audio-detail v-if="audioDetailPopup" :file="audioDetailPopup" />-->
+      <audio-detail v-if="audioDetailPopup" :file="audioDetailPopup" />
       <router-view />
     </v-main>
 
@@ -63,12 +63,4 @@ export default {
     min-height: calc(100vh - 56px) !important;
   }
 }
-
-//#main {
-//  position: absolute;
-//  top: 0;
-//  left: 0;
-//  bottom: 0;
-//  right: 0;
-//}
 </style>
diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 1cd5e29e..44a3606a 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -64,7 +64,7 @@ const links = [
 
 <template>
   <v-app-bar
-    v-if="route.name !== 'Home'"
+    v-if="route.name !== 'Home' || audioDetailPopup"
     class="px-4"
     height="56"
     :color="route.name !== 'Detail' ? 'ipfsPrimary-lighten-1' : 'toolbar-light'"
@@ -116,6 +116,7 @@ const links = [
               v-if="route.name === 'Detail' || audioDetailPopup"
               :to="{ name: 'Search', query: route.query }"
               replace
+              :disabled="audioDetailPopup"
             >
               <v-btn icon @click="showAudioDetail(undefined)">
                 <v-icon :icon="mdiClose" />
@@ -132,7 +133,13 @@ const links = [
     <v-container class="px-0">
       <v-row>
         <v-col cols="12" xl="8" offset-xl="2" class="d-flex justify-space-between align-center">
-          <div class="d-flex align-center" @click="playlistVisible = false">
+          <div
+            class="d-flex align-center"
+            @click="
+              playlistVisible = false;
+              audioDetailPopup = undefined;
+            "
+          >
             <v-img
               v-if="mdAndUp || !playlistVisible"
               alt="ipfs-search.com logo"
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index 1e852412..8438b3f7 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -6,14 +6,15 @@ import {
   playlistVisible,
   startPlaylist,
   showAudioDetail,
-  audioDetailPopup,
+  removePlaylistEntry,
+  formatTime,
 } from "@/composables/audioControls";
-import { mdiCircleSmall, mdiPlay, mdiDisc } from "@mdi/js";
+import { mdiCircleSmall, mdiPlay, mdiDisc, mdiTrashCanOutline } from "@mdi/js";
 import { useDisplay } from "vuetify";
 const { smAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
 
-import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
+import { fileTitle, fileAuthor, fileAlbum } from "@/helpers/fileHelper";
 
 const playlistEntries = computed(() => store.getters["playlist/getPlaylist"].entries);
 import BlinkBlink from "../shared/BlinkBlink.vue";
@@ -31,7 +32,7 @@ import VMarquee from "@/components/shared/VMarquee.vue";
       rounded="0"
       flat
     >
-      <v-list bg-color="planetifyDark" class="">
+      <v-list bg-color="planetifyDark" lines="2">
         <v-hover
           v-for="(entry, index) in playlistEntries"
           :key="index"
@@ -55,8 +56,8 @@ import VMarquee from "@/components/shared/VMarquee.vue";
                   bac
                   :src="
                     picsum({
-                      width: 75,
-                      height: 75,
+                      width: 85,
+                      height: 85,
                       seed: entry.hash,
                       grayscale: !!entry.audio?.error,
                     })
@@ -98,16 +99,26 @@ import VMarquee from "@/components/shared/VMarquee.vue";
                 </v-img>
               </v-list-item-avatar>
             </template>
-            <v-row>
-              <v-col :class="entry.audio?.error ? 'text-grey-darken-1' : ''">
-                <v-marquee :active="isHovering" speed="6">
-                  <v-list-item-title class="d-flex">
-                    <span v-sane-html="fileTitle(entry)" class="mx-1" />
-                    <v-icon :icon="mdiDisc" @click="showAudioDetail(entry)" />
-                  </v-list-item-title>
-                </v-marquee>
-              </v-col>
-            </v-row>
+            <template #append>
+              <div class="d-flex flex-row">
+                <v-icon :icon="mdiDisc" @click="showAudioDetail(entry)" />
+                <v-icon :icon="mdiTrashCanOutline" @click="removePlaylistEntry(index)" />
+              </div>
+            </template>
+            <div
+              :class="{ 'text-grey-darken-1': entry.audio?.error }"
+              class="mr-auto v-list-item-title"
+            >
+              <v-list-item-title>
+                <span v-sane-html="fileTitle(entry)" class="mx-1" />
+              </v-list-item-title>
+              <v-list-item-subtitle>
+                <span
+                  v-sane-html="[fileAuthor(entry), fileAlbum(entry)].filter((e) => !!e).join(' - ')"
+                  class="mx-1"
+                />
+              </v-list-item-subtitle>
+            </div>
           </v-list-item>
         </v-hover>
       </v-list>
diff --git a/src/components/shared/HyperLink.vue b/src/components/shared/HyperLink.vue
index 019bbc1a..2d40c444 100644
--- a/src/components/shared/HyperLink.vue
+++ b/src/components/shared/HyperLink.vue
@@ -9,11 +9,18 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
 <template>
-  <router-link :to="to" :replace="replace" style="text-decoration: none; color: inherit">
+  <div v-if="disabled">
+    <slot />
+  </div>
+  <router-link v-else :to="to" :replace="replace" style="text-decoration: none; color: inherit">
     <slot />
   </router-link>
 </template>
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index 71f99449..800007ee 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -182,15 +182,12 @@ export const setPlaylist = (entries: IFile[], autoPlay = true) => {
 export const enqueue = (entries: IFile[]) =>
   setPlaylist(store.getters["playlist/getPlaylist"].entries.concat(entries), false);
 
-export const clearPlaylist = () => {
-  store.commit("playlist/setPlaylist", { entries: [] });
-};
-
 let playlistIndex = 0;
 export const loop = ref(false);
 export const toggleLoop = () => {
   loop.value = !loop.value;
 };
+
 export const startPlaylist = async (index?: number) => {
   if (index !== undefined) playlistIndex = index;
   while (playlistIndex < store.getters["playlist/getPlaylist"].entries.length) {
@@ -200,6 +197,7 @@ export const startPlaylist = async (index?: number) => {
     playlistIndex++;
   }
 };
+
 export const previousPlaylistEntry = () => {
   if (playlistIndex === 0) {
     if (loop.value) return store.getters["playlist/getPlaylist"].entries.length - 1;
@@ -207,9 +205,11 @@ export const previousPlaylistEntry = () => {
   }
   return playlistIndex - 1;
 };
+
 export const playlistSkipPrevious = () => {
   startPlaylist(previousPlaylistEntry());
 };
+
 export const nextPlaylistEntry = () => {
   if (playlistIndex === store.getters["playlist/getPlaylist"].entries.length - 1) {
     if (loop.value) return 0;
@@ -217,6 +217,14 @@ export const nextPlaylistEntry = () => {
   }
   return playlistIndex + 1;
 };
+
+export const removePlaylistEntry = (index) => {
+  const list = store.getters["playlist/getPlaylist"].entries;
+  store.commit("playlist/setPlaylist", {
+    entries: [...list.slice(0, index), ...list.slice(index + 1)],
+  });
+};
+
 export const playlistSkipNext = () => {
   startPlaylist(nextPlaylistEntry());
 };
diff --git a/src/helpers/fileHelper.ts b/src/helpers/fileHelper.ts
index c787a7e5..b7613181 100644
--- a/src/helpers/fileHelper.ts
+++ b/src/helpers/fileHelper.ts
@@ -62,3 +62,6 @@ export const fileTitle = (file: IFile): string => {
 export const fileAuthor = (file: IFile): string | undefined => {
   return file.metadata?.metadata?.["dc:creator"]?.[0] || file.author || undefined;
 };
+export const fileAlbum = (file: IFile): string | undefined => {
+  return file.metadata?.metadata?.["xmpDM:album"]?.[0];
+};

From f3abf15cfa17df0eca0007d8447675b0e6909883 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Tue, 20 Sep 2022 09:53:43 +0200
Subject: [PATCH 31/56] added slogan "Searching the Universe since 2017", fixes
 #221

---
 src/components/HomeView.vue            | 5 +++--
 src/components/pageLayout/PlayList.vue | 4 ++--
 src/composables/audioControls.ts       | 2 +-
 src/plugins/vuetify/theme.js           | 1 +
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/HomeView.vue b/src/components/HomeView.vue
index a3b2eb65..9fb12679 100644
--- a/src/components/HomeView.vue
+++ b/src/components/HomeView.vue
@@ -7,8 +7,9 @@ import SearchBar from "@/components/pageLayout/SearchBar.vue";
     <v-container class="pa-0 fill-height d-flex mt-12">
       <v-row class="align-content-center">
         <v-col class="pa-2">
-          <!--          TODO: put a better title or remove this tag-->
-          <h3 class="mb-2 text-center hidden-sm-and-down text-white"></h3>
+          <h3 class="mb-2 text-center hidden-sm-and-down text-white">
+            Searching the Universe since 2017
+          </h3>
           <SearchBar />
         </v-col>
       </v-row>
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index 8438b3f7..3bddf235 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -74,7 +74,7 @@ import VMarquee from "@/components/shared/VMarquee.vue";
                         left: 50%;
                         transform: translate(-50%, -50%);
                       "
-                      color="white"
+                      color="planetifyLight"
                       :icon="mdiCircleSmall"
                     />
                   </blink-blink>
@@ -85,7 +85,7 @@ import VMarquee from "@/components/shared/VMarquee.vue";
                     <v-icon
                       v-if="!entry.audio?.error"
                       size="42"
-                      color="white"
+                      color="planetifyLight"
                       style="
                         opacity: 0.9;
                         position: absolute;
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index 800007ee..9f2d8e74 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -218,7 +218,7 @@ export const nextPlaylistEntry = () => {
   return playlistIndex + 1;
 };
 
-export const removePlaylistEntry = (index) => {
+export const removePlaylistEntry = (index: number) => {
   const list = store.getters["playlist/getPlaylist"].entries;
   store.commit("playlist/setPlaylist", {
     entries: [...list.slice(0, index), ...list.slice(index + 1)],
diff --git a/src/plugins/vuetify/theme.js b/src/plugins/vuetify/theme.js
index dcb90a62..33123299 100644
--- a/src/plugins/vuetify/theme.js
+++ b/src/plugins/vuetify/theme.js
@@ -15,6 +15,7 @@ const ipfsTheme = {
     warning: "#FFC107",
     appBar: "#f5f5f5",
     planetifyDark: "#0d0041",
+    planetifyLight: "#e3dbff",
   },
 };
 

From a7b1b6c6ca9088f84ae9ffbb3664bc34f4298298 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Tue, 20 Sep 2022 10:06:27 +0200
Subject: [PATCH 32/56] z-index of settings menu fixed

---
 src/components/pageLayout/PlayList.vue     | 2 +-
 src/components/pageLayout/SettingsMenu.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index 3bddf235..b1582945 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -27,7 +27,7 @@ import VMarquee from "@/components/shared/VMarquee.vue";
       v-if="playlistVisible"
       width="100%"
       class="overflow-y-scroll h-100"
-      style="z-index: 100000"
+      style="z-index: 10000"
       color="planetifyDark"
       rounded="0"
       flat
diff --git a/src/components/pageLayout/SettingsMenu.vue b/src/components/pageLayout/SettingsMenu.vue
index e5f838a3..7122110b 100644
--- a/src/components/pageLayout/SettingsMenu.vue
+++ b/src/components/pageLayout/SettingsMenu.vue
@@ -19,7 +19,7 @@ const cogwheelColor = computed(() => {
 </script>
 
 <template>
-  <v-menu location="start" :close-on-content-click="false">
+  <v-menu location="start" :close-on-content-click="false" style="z-index: 100000">
     <template #activator="{ props }">
       <v-btn icon v-bind="props">
         <v-icon :color="cogwheelColor" :icon="mdiCog" />

From c159cb015ea0ccf30a0ebb2f1d965ace1580044a Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Tue, 20 Sep 2022 11:05:50 +0200
Subject: [PATCH 33/56] less obtruse buttons for search list headers

---
 src/components/pageLayout/AppHeader.vue       | 12 ++-----
 src/components/pageLayout/AudioPlayer.vue     |  4 +--
 src/components/pageLayout/PlayList.vue        |  8 -----
 src/components/pageLayout/PlaylistPanel.vue   | 28 ---------------
 .../searchViewComponents/BaseList.vue         | 35 +++++++++++--------
 5 files changed, 26 insertions(+), 61 deletions(-)
 delete mode 100644 src/components/pageLayout/PlaylistPanel.vue

diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 44a3606a..fedf5435 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -7,16 +7,10 @@ const route = useRoute();
 import { useStore } from "vuex";
 const store = useStore();
 
-import {
-  mdiClose,
-  mdiPlaylistMusic,
-  mdiRepeatOff,
-  mdiRepeatVariant,
-  mdiDotsVertical,
-} from "@mdi/js";
+import { mdiClose, mdiPlaylistMusic, mdiDotsVertical } from "@mdi/js";
 
 import { useDisplay } from "vuetify";
-const { mdAndUp, smAndUp } = useDisplay();
+const { mdAndUp } = useDisplay();
 
 import { useTheme } from "vuetify";
 import Hyperlink from "@/components/shared/HyperLink.vue";
@@ -189,7 +183,7 @@ const links = [
           </v-menu>
 
           <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylist">
-            <v-icon :icon="mdiPlaylistMusic" />
+            <v-icon :icon="playlistVisible ? mdiClose : mdiPlaylistMusic" />
           </v-btn>
 
           <settings-menu />
diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index 0d52cc3a..2fb27b22 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -6,7 +6,7 @@ import {
   mdiPlay,
   mdiPause,
   mdiAlert,
-  mdiClose,
+  mdiStop,
   mdiSkipNext,
   mdiSkipPrevious,
 } from "@mdi/js";
@@ -161,7 +161,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
               class="bg-ipfsPrimary-lighten-1 ml-2"
               :class="{ 'mr-3': mdAndUp }"
               :size="mdAndUp ? 'large' : 'default'"
-              :icon="mdiClose"
+              :icon="mdiStop"
               title="Close"
               @click="cleanUpAudioPlayer"
             />
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index b1582945..c773630f 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -7,18 +7,14 @@ import {
   startPlaylist,
   showAudioDetail,
   removePlaylistEntry,
-  formatTime,
 } from "@/composables/audioControls";
 import { mdiCircleSmall, mdiPlay, mdiDisc, mdiTrashCanOutline } from "@mdi/js";
-import { useDisplay } from "vuetify";
-const { smAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
 
 import { fileTitle, fileAuthor, fileAlbum } from "@/helpers/fileHelper";
 
 const playlistEntries = computed(() => store.getters["playlist/getPlaylist"].entries);
 import BlinkBlink from "../shared/BlinkBlink.vue";
-import VMarquee from "@/components/shared/VMarquee.vue";
 </script>
 
 <template>
@@ -127,10 +123,6 @@ import VMarquee from "@/components/shared/VMarquee.vue";
 </template>
 
 <style scoped>
-.vh-100 {
-  height: 100vh;
-}
-
 .overflow-y-scroll {
   overflow-y: scroll;
 }
diff --git a/src/components/pageLayout/PlaylistPanel.vue b/src/components/pageLayout/PlaylistPanel.vue
deleted file mode 100644
index e547c661..00000000
--- a/src/components/pageLayout/PlaylistPanel.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup>
-import { useStore } from "vuex";
-const store = useStore();
-
-import { playlistVisible } from "@/composables/audioControls.ts";
-</script>
-
-<template>
-  <v-fade-transition class="audio-player-card">
-    <v-card
-      v-if="playlistVisible"
-      position="fixed"
-      location="center"
-      width="100%"
-      height="100%"
-      color="black"
-    >
-      <v-list>
-        <v-list-item
-          v-for="entry in store.getters('playlist/getPlaylist')?.entries"
-          :key="entry.hash"
-        >
-          <v-list-item-title>{{ entry.title }}</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-card>
-  </v-fade-transition>
-</template>
diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index 3dae684a..7f28d37d 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { mdiPlaylistPlay, mdiPlaylistPlus } from "@mdi/js";
+import { mdiMagnifyExpand, mdiPlaylistPlay, mdiPlaylistPlus } from "@mdi/js";
 import CardContent from "@/components/searchViewComponents/subcomponents/genericCardContent.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
 import { Types, TypeListNames, TypeIcons } from "@/helpers/typeHelper";
@@ -135,20 +135,27 @@ const queryPage = computed({
       class="justify-space-between d-flex mb-3"
       style="gap: 5px"
     >
-      <hyperlink v-if="anyFileType" :to="{ ...route, query: { ...route.query, type: fileType } }">
-        <v-btn color="ipfsPrimary-lighten-1">
-          <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
-          <template #prepend>
-            <v-icon size="28" :icon="TypeIcons[fileType]" color="white" />
-          </template>
-        </v-btn>
+      <hyperlink
+        :disabled="!anyFileType"
+        :to="{ ...route, query: { ...route.query, type: fileType } }"
+        class="flex-grow-1"
+      >
+        <div
+          class="w-100 d-flex justify-start align-center text-ipfsPrimary-lighten-1 v-btn v-btn--density-default v-btn--size-default v-btn--variant-outlined"
+          :class="{ 'v-btn--disabled': !anyFileType }"
+        >
+          <div class="mr-auto">
+            <v-icon size="28" :icon="TypeIcons[fileType]" color="ipfsPrimary-lighten-1" />
+            <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
+          </div>
+          <div v-if="anyFileType" class="d-flex flex-row align-center justify-end">
+            <div class="">
+              <span>View all</span>
+              <v-icon size="28" :icon="mdiMagnifyExpand" color="ipfsPrimary-lighten-1" />
+            </div>
+          </div>
+        </div>
       </hyperlink>
-      <v-btn v-else variant="outlined" disabled color="ipfsPrimary-lighten-1" class="banner">
-        <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
-        <template #prepend>
-          <v-icon size="28" :icon="TypeIcons[fileType]" color="ipfsPrimary-lighten-1" />
-        </template>
-      </v-btn>
       <div
         v-if="fileType === Types.audio && pageHits.length"
         class="flex-row d-flex justify-end"

From 64c51f31ecf4e02aba100ef8716bc29e93e53cd6 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Tue, 20 Sep 2022 11:11:30 +0200
Subject: [PATCH 34/56] some better icons for buttons

---
 src/components/pageLayout/AppHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index fedf5435..7afd346a 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -101,7 +101,7 @@ const links = [
 
           <div id="end-buttons" class="d-flex flex-row justify-end">
             <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylist">
-              <v-icon :icon="mdiPlaylistMusic" />
+              <v-icon :icon="playlistVisible ? mdiClose : mdiPlaylistMusic" />
             </v-btn>
 
             <settings-menu />

From 5621a02c65e78885bd7be85fd7539ddd0663e0dd Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Tue, 20 Sep 2022 12:26:00 +0200
Subject: [PATCH 35/56] fix codeclimate issues

---
 src/components/SearchView.vue                 |  2 -
 .../subcomponents/MetaDataPanel.vue           |  4 +-
 src/components/pageLayout/AppFooter.vue       |  2 +-
 src/components/pageLayout/AppHeader.vue       |  2 -
 src/composables/audioControls.ts              | 71 ++++++++++---------
 src/helpers/constants/nsfwThresholds.ts       |  2 +-
 src/helpers/fileHelper.ts                     | 13 ++--
 src/store/modules/playlistStore.ts            | 38 +++-------
 8 files changed, 57 insertions(+), 77 deletions(-)

diff --git a/src/components/SearchView.vue b/src/components/SearchView.vue
index 780f1a9f..03ef7031 100644
--- a/src/components/SearchView.vue
+++ b/src/components/SearchView.vue
@@ -11,7 +11,6 @@ import { Types } from "@/helpers/typeHelper";
 import { useDisplay } from "vuetify";
 const { smAndDown } = useDisplay();
 
-import { footerVisible } from "@/composables/footer.js";
 import { playlistVisible } from "@/composables/audioControls";
 
 const route = useRoute();
@@ -19,7 +18,6 @@ const route = useRoute();
 function listType(t) {
   return [t, Types.all, undefined].includes(route.query.type);
 }
-const onScroll = () => (footerVisible.value = false);
 </script>
 
 <template>
diff --git a/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue b/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
index bb2eb5f0..b8cf8227 100644
--- a/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
+++ b/src/components/detailViewComponents/subcomponents/MetaDataPanel.vue
@@ -246,7 +246,7 @@ const fileHeight = (file) =>
                         <i>No references</i>
                       </td>
                     </tr>
-                    <tr v-for="(item, index) in references" :key="index">
+                    <tr v-for="(item, i) in references" :key="i">
                       <td />
                       <td>
                         <a v-sane-html="item.name" :href="item.url" target="_blank" />
@@ -262,7 +262,7 @@ const fileHeight = (file) =>
                     <v-expansion-panel-text>
                       <v-table>
                         <tbody>
-                          <tr v-for="(item, index) in extraData" :key="index">
+                          <tr v-for="(item, i) in extraData" :key="i">
                             <th>{{ item.label }}:</th>
                             <td v-if="indexedMetadata(item)">
                               <span v-for="(value, valueIndex) in item.value" :key="valueIndex">
diff --git a/src/components/pageLayout/AppFooter.vue b/src/components/pageLayout/AppFooter.vue
index 8dbb7c0d..8414e8cb 100644
--- a/src/components/pageLayout/AppFooter.vue
+++ b/src/components/pageLayout/AppFooter.vue
@@ -4,7 +4,7 @@ const route = useRoute();
 import { audioPlayer, playlistVisible } from "@/composables/audioControls";
 
 import { useDisplay } from "vuetify";
-const { mdAndUp, smAndUp } = useDisplay();
+const { smAndUp } = useDisplay();
 import { mdiMastodon, mdiTwitter, mdiGithub, mdiHandCoin, mdiEmail } from "@mdi/js";
 
 import { footerVisible } from "@/composables/footer";
diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 7afd346a..93f4d478 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -23,8 +23,6 @@ import {
   playlistVisible,
   audioDetailPopup,
   showAudioDetail,
-  toggleLoop,
-  loop,
 } from "@/composables/audioControls.ts";
 import PlanetifyBar from "@/components/pageLayout/PlanetifyToolBar.vue";
 
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index 9f2d8e74..2be518b8 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -2,7 +2,7 @@ import { ref } from "vue";
 import { IFile } from "../interfaces/IFile";
 
 import store from "@/store";
-import { Howl, Howler } from "howler";
+import { Howl, Howler, HowlOptions } from "howler";
 import { getFileExtension } from "@/helpers/fileHelper";
 import getResourceURL from "@/helpers/resourceURL";
 
@@ -34,6 +34,42 @@ export interface IAudio {
 
 let interval: number;
 
+const howlOptions = (
+  audio: IAudio,
+  file: IFile,
+  fileExtension: string,
+  options: object
+): HowlOptions => ({
+  html5: true,
+  preload: "metadata",
+  autoplay: false,
+  src: [getResourceURL(file.hash)],
+  format: [fileExtension],
+  onloaderror: (source: unknown, message: unknown) => {
+    audio.reportError(file.hash, `Load Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
+  },
+  onload: () => {
+    audio.loading = false;
+    audio.loaded = true;
+    audio.duration = audio.player?.duration() || 0;
+  },
+  onplay: () => {
+    audio.playing = true;
+    interval = setInterval(() => {
+      audio.time = audio.player?.seek();
+    }, 100);
+  },
+  onpause: () => {
+    audio.playing = false;
+    clearInterval(interval);
+  },
+  onend: () => {
+    audio.playing = false;
+    clearInterval(interval);
+  },
+  ...options,
+});
+
 export const audioPlayer = ref<IAudio>({
   error: "",
   loaded: false,
@@ -96,7 +132,7 @@ export const audioPlayer = ref<IAudio>({
           });
           audio.player?.play();
         })
-        .catch((message) => {
+        .catch(() => {
           // no need for reporting, because this is handled in a hook set in initialize
           resolve(this);
         });
@@ -117,36 +153,7 @@ export const audioPlayer = ref<IAudio>({
     this.cleanUp();
     this.file = file;
     this.loading = true;
-    this.player = new Howl({
-      html5: true,
-      preload: "metadata",
-      autoplay: false,
-      src: [getResourceURL(file.hash)],
-      format: [fileExtension],
-      onloaderror: (source, message) => {
-        this.reportError(file.hash, `Load Error: ${errorCode[message as 1 | 2 | 3 | 4]}`);
-      },
-      onload: () => {
-        this.loading = false;
-        this.loaded = true;
-        this.duration = this.player?.duration() || 0;
-      },
-      onplay: () => {
-        this.playing = true;
-        interval = setInterval(() => {
-          this.time = this.player?.seek();
-        }, 100);
-      },
-      onpause: () => {
-        this.playing = false;
-        clearInterval(interval);
-      },
-      onend: () => {
-        this.playing = false;
-        clearInterval(interval);
-      },
-      ...options,
-    });
+    this.player = new Howl(howlOptions(this, file, fileExtension, options));
   },
 
   cleanUp() {
diff --git a/src/helpers/constants/nsfwThresholds.ts b/src/helpers/constants/nsfwThresholds.ts
index 6fbb78d1..2e83286f 100644
--- a/src/helpers/constants/nsfwThresholds.ts
+++ b/src/helpers/constants/nsfwThresholds.ts
@@ -1,4 +1,4 @@
-export const nsfwThresholds: any = {
+export const nsfwThresholds = {
   hentai: 0.15,
   porn: 0.15,
   sexy: 0.3,
diff --git a/src/helpers/fileHelper.ts b/src/helpers/fileHelper.ts
index b7613181..7691d7c8 100644
--- a/src/helpers/fileHelper.ts
+++ b/src/helpers/fileHelper.ts
@@ -39,14 +39,10 @@ mime.define(
  */
 export function getFileExtension(file: IFile): string {
   // Mimetype is leading
-  if (file.mimetype) {
-    const ext = mime.getExtension(file.mimetype);
-    if (ext) return ext;
-  }
-  if (file.metadata?.metadata?.["Content-Type"][0]) {
-    const ext = mime.getExtension(file.metadata.metadata["Content-Type"][0].split(" ")[0]);
-    if (ext) return ext;
-  }
+  let ext = mime.getExtension(file?.mimetype || "");
+  if (ext) return ext;
+  ext = mime.getExtension(file.metadata?.metadata?.["Content-Type"][0].split(" ")[0] || "");
+  if (ext) return ext;
   const filename = file.references?.[0]?.name;
   if (filename) {
     // Get filename extension, dealing with edge cases
@@ -56,6 +52,7 @@ export function getFileExtension(file: IFile): string {
   }
   return "";
 }
+
 export const fileTitle = (file: IFile): string => {
   return file.metadata?.metadata?.["title"]?.[0] || file.title || file.hash;
 };
diff --git a/src/store/modules/playlistStore.ts b/src/store/modules/playlistStore.ts
index 06469c82..3ab1cdc0 100644
--- a/src/store/modules/playlistStore.ts
+++ b/src/store/modules/playlistStore.ts
@@ -1,6 +1,5 @@
 import { Module } from "vuex";
 import { IPlaylist } from "@/interfaces/IPlaylist";
-import { IFile } from "../../interfaces/IFile";
 
 export interface IPlaylistStoreState {
   activePlaylist?: number | undefined;
@@ -9,7 +8,7 @@ export interface IPlaylistStoreState {
 
 const defaultPlaylist: IPlaylist = { entries: [] };
 
-export default <Module<any, unknown>>{
+export default <Module<IPlaylistStoreState, unknown>>{
   namespaced: true,
   state: (): IPlaylistStoreState => {
     try {
@@ -25,6 +24,8 @@ export default <Module<any, unknown>>{
   mutations: {
     setPlaylist(state, playlist: IPlaylist) {
       state.playlists[state.activePlaylist || 0] = playlist;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       this.commit("localStorage/setPlaylist", state.playlists[state.activePlaylist || 0]);
     },
     setActivePlaylist(state, playlist: number) {
@@ -37,37 +38,16 @@ export default <Module<any, unknown>>{
         : state.playlists[state.activePlaylist || 0].entries[index];
     },
     setAudioError(state, { hash, error }) {
-      for (const playlist of state.playlists) {
-        for (const entry of playlist.entries) {
-          if (entry.hash === hash) {
-            entry.audio = {
-              error,
-            };
-          }
-        }
-      }
+      state.playlists.forEach((playlist) => {
+        playlist.entries
+          .filter((entry) => entry.hash === hash)
+          .forEach((entry) => (entry.audio = { error }));
+      });
     },
   },
   getters: {
     getPlaylist(state): IPlaylist {
-      const playlist = state.playlists?.[state.activePlaylist || 0];
-      return playlist;
+      return state.playlists?.[state.activePlaylist || 0];
     },
   },
 };
-
-// audioBank is used to make single Howl instances for audio files,
-// even when there are duplicates in the list
-// const fillAudioBank = (entries: IFile[], purge = true) => {
-//   const audioBank: Record<string, IAudio> = {};
-//   for (const entry of entries) {
-//     if (!audioBank[entry.hash]) audioBank[entry.hash] = new Audio(entry);
-//   }
-//   if (purge) {
-//     const keys = new Set(entries.map((entry) => entry.hash));
-//     for (const hash in audioBank.value) {
-//       if (!keys.has(hash)) delete audioBank[hash];
-//     }
-//   }
-//   return audioBank;
-// };

From 76fc1b739c4835fefef99df064875a9681ba334d Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Tue, 20 Sep 2022 13:28:07 +0200
Subject: [PATCH 36/56] improvements to big screen responsiveness

---
 src/components/pageLayout/AppHeader.vue       |  20 +-
 src/components/pageLayout/AudioPlayer.vue     | 203 +++++++++---------
 ...tifyToolBar.vue => PlanetarifyToolbar.vue} |  13 +-
 src/components/pageLayout/PlayList.vue        | 180 ++++++++--------
 src/plugins/vuetify/theme.js                  |   4 +-
 5 files changed, 220 insertions(+), 200 deletions(-)
 rename src/components/pageLayout/{PlanetifyToolBar.vue => PlanetarifyToolbar.vue} (58%)

diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 93f4d478..14faa01e 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -24,7 +24,7 @@ import {
   audioDetailPopup,
   showAudioDetail,
 } from "@/composables/audioControls.ts";
-import PlanetifyBar from "@/components/pageLayout/PlanetifyToolBar.vue";
+import PlanetarifyToolbar from "@/components/pageLayout/PlanetarifyToolbar.vue";
 
 const links = [
   {
@@ -63,7 +63,7 @@ const links = [
   >
     <v-container fluid class="px-0 align-start">
       <v-row>
-        <v-col cols="12" class="px-0 d-flex justify-space-between align-center">
+        <v-col cols="12" xl="8" offset-xl="2" class="d-flex justify-space-between align-center">
           <div class="ml-2">
             <hyperlink to="/" class="d-flex align-center" @click="playlistVisible = false">
               <v-img
@@ -95,9 +95,9 @@ const links = [
           <!--          <div v-if="route.name === 'Search'" class="d-none d-lg-block" style="min-width: 200px" />-->
           <!--          <v-spacer v-else />-->
 
-          <planetify-bar v-if="playlistVisible" />
+          <planetarify-toolbar v-if="playlistVisible" />
 
-          <div id="end-buttons" class="d-flex flex-row justify-end">
+          <div v-else id="end-buttons" class="d-flex flex-row justify-end">
             <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylist">
               <v-icon :icon="playlistVisible ? mdiClose : mdiPlaylistMusic" />
             </v-btn>
@@ -151,7 +151,7 @@ const links = [
           </div>
           <v-spacer v-if="!playlistVisible" />
 
-          <planetify-bar v-if="playlistVisible" class="ml-3" />
+          <planetarify-toolbar v-if="playlistVisible" class="ml-3" />
           <v-btn
             v-for="(link, i) in links"
             v-else
@@ -162,7 +162,7 @@ const links = [
             class="my-2 mx-1 hidden-sm-and-down"
           />
 
-          <v-menu bottom left>
+          <v-menu v-if="!playlistVisible" bottom left>
             <template #activator="{ props }">
               <v-btn
                 v-bind="props"
@@ -180,11 +180,15 @@ const links = [
             </v-list>
           </v-menu>
 
-          <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylist">
+          <v-btn
+            v-if="store.getters['playlist/getPlaylist'] && !playlistVisible"
+            icon
+            @click="togglePlaylist"
+          >
             <v-icon :icon="playlistVisible ? mdiClose : mdiPlaylistMusic" />
           </v-btn>
 
-          <settings-menu />
+          <settings-menu v-if="!playlistVisible" />
         </v-col>
       </v-row>
     </v-container>
diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index 2fb27b22..edd7b022 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -11,7 +11,7 @@ import {
   mdiSkipPrevious,
 } from "@mdi/js";
 import { useDisplay } from "vuetify";
-const { mdAndUp } = useDisplay();
+const { smAndUp, mdAndUp } = useDisplay();
 import { picsum } from "@/helpers/picsum";
 
 import {
@@ -51,7 +51,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
       style="z-index: 10000"
       position="fixed"
       location="bottom"
-      color="planetifyDark"
+      color="planetarifyDark"
       class="d-flex"
       flat
       rounded="0"
@@ -67,107 +67,108 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
         height="5"
         clickable
       />
-      <div class="d-flex w-100">
-        <v-avatar v-if="mdAndUp" class="my-auto ml-4" rounded="0" size="75">
-          <v-img
-            aspect-ratio="1"
-            bac
-            gradient="to bottom, rgba(255,255,255,.1), rgba(255,255,255,.5)"
-            :src="picsum({ width: 75, height: 75, seed: audioPlayer.file?.hash })"
-          >
-          </v-img>
-          <v-icon
-            size="42"
-            color="white"
-            style="
-              opacity: 0.6;
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-            "
-            :icon="mdiMusic"
-          />
-        </v-avatar>
-        <div class="flex-column my-auto mx-4 align-center w-100" style="min-width: 0">
-          <v-marquee>
-            <v-card-title class="font-weight-default d-flex px-0">
-              <span v-sane-html="fileTitle(audioPlayer.file)" />
-            </v-card-title>
-          </v-marquee>
-          <v-marquee>
-            <v-card-subtitle class="d-flex py-2 px-0">
-              <span v-sane-html="fileAuthor(audioPlayer.file)" />
-            </v-card-subtitle>
-          </v-marquee>
-        </div>
-        <div
-          class="h-100 d-flex align-center my-auto"
-          :class="mdAndUp ? 'flex-row ml-auto' : 'flex-column'"
-        >
-          <v-card-title :style="{ fontSize: mdAndUp ? '20px' : '16px' }"
-            >{{ formatTime(audioPlayer.time).join(" : ") }} /
-            {{ formatTime(audioPlayer.duration).join(" : ") }}</v-card-title
-          >
-          <div class="d-inline-flex flex-row">
-            <v-btn
-              class="bg-ipfsPrimary-lighten-1 ml-2"
-              :size="mdAndUp ? 'large' : 'default'"
-              :icon="mdiSkipPrevious"
-              :disabled="previousPlaylistEntry() === undefined"
-              title="Pause"
-              @click="playlistSkipPrevious"
-            />
-            <v-btn
-              v-if="audioPlayer.error"
-              class="bg-ipfsPrimary-lighten-1 ml-2"
-              :size="mdAndUp ? 'large' : 'default'"
-              :title="audioPlayer.error"
-              :icon="mdiAlert"
-            />
-            <v-btn
-              v-else-if="audioPlayer.loading"
-              class="bg-ipfsPrimary-lighten-1 ml-2"
-              :size="mdAndUp ? 'large' : 'default'"
-              icon
-              title="Loading"
-              loading
-            />
-            <v-btn
-              v-else-if="audioPlayer.playing"
-              class="bg-ipfsPrimary-lighten-1 ml-2"
-              :size="mdAndUp ? 'large' : 'default'"
-              :icon="mdiPause"
-              title="Pause"
-              @click="pauseAudio"
-            />
-            <v-btn
-              v-else
-              class="bg-ipfsPrimary-lighten-1 ml-2"
-              :size="mdAndUp ? 'large' : 'default'"
-              :icon="mdiPlay"
-              title="Play"
-              @click="playAudioFile"
-            />
-            <v-btn
-              class="bg-ipfsPrimary-lighten-1 ml-2"
-              :size="mdAndUp ? 'large' : 'default'"
-              :icon="mdiSkipNext"
-              :disabled="nextPlaylistEntry() === undefined"
-              title="Pause"
-              @click="playlistSkipNext"
-            />
-            <v-btn
-              class="bg-ipfsPrimary-lighten-1 ml-2"
-              :class="{ 'mr-3': mdAndUp }"
-              :size="mdAndUp ? 'large' : 'default'"
-              :icon="mdiStop"
-              title="Close"
-              @click="cleanUpAudioPlayer"
+      <v-row class="w-100">
+        <v-col cols="12" xl="8" offset-xl="2" class="d-flex w-100">
+          <v-avatar v-if="mdAndUp" class="my-auto ml-4" rounded="0" size="75">
+            <v-img
+              aspect-ratio="1"
+              bac
+              gradient="to bottom, rgba(255,255,255,.1), rgba(255,255,255,.5)"
+              :src="picsum({ width: 75, height: 75, seed: audioPlayer.file?.hash })"
+            >
+            </v-img>
+            <v-icon
+              size="42"
+              color="white"
+              style="
+                opacity: 0.6;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+              "
+              :icon="mdiMusic"
             />
+          </v-avatar>
+          <div class="flex-column my-auto mx-4 align-center w-100" style="min-width: 0">
+            <v-marquee>
+              <v-card-title class="font-weight-default d-flex px-0">
+                <span v-sane-html="fileTitle(audioPlayer.file)" />
+              </v-card-title>
+            </v-marquee>
+            <v-marquee>
+              <v-card-subtitle class="d-flex py-2 px-0">
+                <span v-sane-html="fileAuthor(audioPlayer.file)" />
+              </v-card-subtitle>
+            </v-marquee>
+          </div>
+          <div
+            class="h-100 d-flex align-center my-auto"
+            :class="smAndUp ? 'flex-row ml-auto' : 'flex-column'"
+          >
+            <v-card-title :style="{ fontSize: mdAndUp ? '20px' : '16px' }"
+              >{{ formatTime(audioPlayer.time).join(" : ") }} /
+              {{ formatTime(audioPlayer.duration).join(" : ") }}</v-card-title
+            >
+            <div class="d-inline-flex flex-row">
+              <v-btn
+                class="bg-ipfsPrimary-lighten-1 ml-2"
+                :size="mdAndUp ? 'large' : 'default'"
+                :icon="mdiSkipPrevious"
+                :disabled="previousPlaylistEntry() === undefined"
+                title="Pause"
+                @click="playlistSkipPrevious"
+              />
+              <v-btn
+                v-if="audioPlayer.error"
+                class="bg-ipfsPrimary-lighten-1 ml-2"
+                :size="mdAndUp ? 'large' : 'default'"
+                :title="audioPlayer.error"
+                :icon="mdiAlert"
+              />
+              <v-btn
+                v-else-if="audioPlayer.loading"
+                class="bg-ipfsPrimary-lighten-1 ml-2"
+                :size="mdAndUp ? 'large' : 'default'"
+                icon
+                title="Loading"
+                loading
+              />
+              <v-btn
+                v-else-if="audioPlayer.playing"
+                class="bg-ipfsPrimary-lighten-1 ml-2"
+                :size="mdAndUp ? 'large' : 'default'"
+                :icon="mdiPause"
+                title="Pause"
+                @click="pauseAudio"
+              />
+              <v-btn
+                v-else
+                class="bg-ipfsPrimary-lighten-1 ml-2"
+                :size="mdAndUp ? 'large' : 'default'"
+                :icon="mdiPlay"
+                title="Play"
+                @click="playAudioFile"
+              />
+              <v-btn
+                class="bg-ipfsPrimary-lighten-1 ml-2"
+                :size="mdAndUp ? 'large' : 'default'"
+                :icon="mdiSkipNext"
+                :disabled="nextPlaylistEntry() === undefined"
+                title="Pause"
+                @click="playlistSkipNext"
+              />
+              <v-btn
+                class="bg-ipfsPrimary-lighten-1 ml-2 mr-2"
+                :size="mdAndUp ? 'large' : 'default'"
+                :icon="mdiStop"
+                title="Close"
+                @click="cleanUpAudioPlayer"
+              />
+            </div>
           </div>
-        </div>
-      </div>
+        </v-col>
+      </v-row>
     </v-card>
   </v-fade-transition>
 </template>
diff --git a/src/components/pageLayout/PlanetifyToolBar.vue b/src/components/pageLayout/PlanetarifyToolbar.vue
similarity index 58%
rename from src/components/pageLayout/PlanetifyToolBar.vue
rename to src/components/pageLayout/PlanetarifyToolbar.vue
index 08aab88c..a3acda52 100644
--- a/src/components/pageLayout/PlanetifyToolBar.vue
+++ b/src/components/pageLayout/PlanetarifyToolbar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { mdiRepeatVariant, mdiRepeatOff } from "@mdi/js";
-import { toggleLoop, loop } from "@/composables/audioControls";
+import { mdiRepeatVariant, mdiRepeatOff, mdiClose } from "@mdi/js";
+import { toggleLoop, loop, togglePlaylist } from "@/composables/audioControls";
 import { useDisplay } from "vuetify";
 const { smAndUp } = useDisplay();
 </script>
@@ -9,14 +9,19 @@ const { smAndUp } = useDisplay();
   <div class="d-flex flex-row justify-space-between align-center flex-grow-1 mr-auto ml-0">
     <v-card
       rounded="rounded"
-      color="planetifyDark"
+      color="planetarifyDark"
       :class="{ 'flex-grow-1': true }"
       class="d-flex justify-start align-center pl-3"
     >
-      <v-app-bar-title v-if="true" color="white"> Planetify Pro </v-app-bar-title>
+      <v-app-bar-title v-if="true" color="white" class="flex-grow-1">
+        Planetarify Pro
+      </v-app-bar-title>
       <v-btn :prepend-icon="loop ? mdiRepeatVariant : mdiRepeatOff" @click="toggleLoop">
         {{ smAndUp ? (loop ? "loop" : "no loop") : "" }}
       </v-btn>
+      <v-btn icon @click="togglePlaylist">
+        <v-icon :icon="mdiClose" />
+      </v-btn>
     </v-card>
   </div>
 </template>
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index c773630f..752f44f1 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -24,100 +24,110 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
       width="100%"
       class="overflow-y-scroll h-100"
       style="z-index: 10000"
-      color="planetifyDark"
+      color="planetarifyDark"
       rounded="0"
       flat
     >
-      <v-list bg-color="planetifyDark" lines="2">
-        <v-hover
-          v-for="(entry, index) in playlistEntries"
-          :key="index"
-          v-slot="{ isHovering, props }"
-        >
-          <v-list-item
-            color="black"
-            :active="isHovering"
-            active-color="white"
-            v-bind="props"
-            @dblclick="startPlaylist(index)"
+      <v-row class="w-100">
+        <v-col cols="12" xl="8" offset-xl="2">
+          <v-list
+            bg-color="planetarifyDark"
+            lines="2"
+            style="margin-left: 8px; margin-right: -24px"
           >
-            <template #prepend>
-              <v-list-item-avatar
-                rounded="0"
-                :style="{ cursor: entry.audio?.error ? 'default' : 'pointer' }"
-                @click="startPlaylist(index)"
+            <v-hover
+              v-for="(entry, index) in playlistEntries"
+              :key="index"
+              v-slot="{ isHovering, props }"
+            >
+              <v-list-item
+                color="black"
+                :active="isHovering"
+                active-color="white"
+                v-bind="props"
+                @dblclick="startPlaylist(index)"
               >
-                <v-img
-                  aspect-ratio="1"
-                  bac
-                  :src="
-                    picsum({
-                      width: 85,
-                      height: 85,
-                      seed: entry.hash,
-                      grayscale: !!entry.audio?.error,
-                    })
-                  "
-                >
-                  <blink-blink
-                    v-if="entry.hash === audioPlayer?.file?.hash && audioPlayer?.loading"
+                <template #prepend>
+                  <v-list-item-avatar
+                    rounded="0"
+                    :style="{ cursor: entry.audio?.error ? 'default' : 'pointer' }"
+                    @click="startPlaylist(index)"
                   >
-                    <v-icon
-                      style="
-                        opacity: 0.9;
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
+                    <v-img
+                      aspect-ratio="1"
+                      bac
+                      :src="
+                        picsum({
+                          width: 85,
+                          height: 85,
+                          seed: entry.hash,
+                          grayscale: !!entry.audio?.error,
+                        })
                       "
-                      color="planetifyLight"
-                      :icon="mdiCircleSmall"
-                    />
-                  </blink-blink>
-                  <blink-blink
-                    v-else
-                    :blink="entry.hash === audioPlayer?.file?.hash && audioPlayer?.playing"
-                  >
-                    <v-icon
-                      v-if="!entry.audio?.error"
-                      size="42"
-                      color="planetifyLight"
-                      style="
-                        opacity: 0.9;
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
+                    >
+                      <blink-blink
+                        v-if="entry.hash === audioPlayer?.file?.hash && audioPlayer?.loading"
+                      >
+                        <v-icon
+                          style="
+                            opacity: 0.9;
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                          "
+                          color="planetarifyLight"
+                          :icon="mdiCircleSmall"
+                        />
+                      </blink-blink>
+                      <blink-blink
+                        v-else
+                        :blink="entry.hash === audioPlayer?.file?.hash && audioPlayer?.playing"
+                      >
+                        <v-icon
+                          v-if="!entry.audio?.error"
+                          size="42"
+                          color="planetarifyLight"
+                          style="
+                            opacity: 0.9;
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                          "
+                          :icon="mdiPlay"
+                        />
+                      </blink-blink>
+                    </v-img>
+                  </v-list-item-avatar>
+                </template>
+                <template #append>
+                  <div class="d-flex flex-row">
+                    <v-icon :icon="mdiDisc" @click="showAudioDetail(entry)" />
+                    <v-icon :icon="mdiTrashCanOutline" @click="removePlaylistEntry(index)" />
+                  </div>
+                </template>
+                <div
+                  :class="{ 'text-grey-darken-1': entry.audio?.error }"
+                  class="mr-auto v-list-item-title"
+                >
+                  <v-list-item-title>
+                    <span v-sane-html="fileTitle(entry)" class="mx-1" />
+                  </v-list-item-title>
+                  <v-list-item-subtitle>
+                    <span
+                      v-sane-html="
+                        [fileAuthor(entry), fileAlbum(entry)].filter((e) => !!e).join(' - ')
                       "
-                      :icon="mdiPlay"
+                      class="mx-1"
                     />
-                  </blink-blink>
-                </v-img>
-              </v-list-item-avatar>
-            </template>
-            <template #append>
-              <div class="d-flex flex-row">
-                <v-icon :icon="mdiDisc" @click="showAudioDetail(entry)" />
-                <v-icon :icon="mdiTrashCanOutline" @click="removePlaylistEntry(index)" />
-              </div>
-            </template>
-            <div
-              :class="{ 'text-grey-darken-1': entry.audio?.error }"
-              class="mr-auto v-list-item-title"
-            >
-              <v-list-item-title>
-                <span v-sane-html="fileTitle(entry)" class="mx-1" />
-              </v-list-item-title>
-              <v-list-item-subtitle>
-                <span
-                  v-sane-html="[fileAuthor(entry), fileAlbum(entry)].filter((e) => !!e).join(' - ')"
-                  class="mx-1"
-                />
-              </v-list-item-subtitle>
-            </div>
-          </v-list-item>
-        </v-hover>
-      </v-list>
+                  </v-list-item-subtitle>
+                </div>
+              </v-list-item>
+            </v-hover>
+          </v-list>
+        </v-col>
+      </v-row>
     </v-card>
   </v-fade-transition>
 </template>
diff --git a/src/plugins/vuetify/theme.js b/src/plugins/vuetify/theme.js
index 33123299..7d2cad8a 100644
--- a/src/plugins/vuetify/theme.js
+++ b/src/plugins/vuetify/theme.js
@@ -14,8 +14,8 @@ const ipfsTheme = {
     success: "#4CAF50",
     warning: "#FFC107",
     appBar: "#f5f5f5",
-    planetifyDark: "#0d0041",
-    planetifyLight: "#e3dbff",
+    planetarifyDark: "#0d0041",
+    planetarifyLight: "#e3dbff",
   },
 };
 

From 37d68e37dcb96d09e9fe236a1eb94cd16fa04305 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Tue, 20 Sep 2022 14:15:23 +0200
Subject: [PATCH 37/56] empty playlist note

---
 src/components/pageLayout/AppHeader.vue | 4 ++--
 src/components/pageLayout/PlayList.vue  | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/pageLayout/AppHeader.vue b/src/components/pageLayout/AppHeader.vue
index 14faa01e..37206334 100644
--- a/src/components/pageLayout/AppHeader.vue
+++ b/src/components/pageLayout/AppHeader.vue
@@ -98,8 +98,8 @@ const links = [
           <planetarify-toolbar v-if="playlistVisible" />
 
           <div v-else id="end-buttons" class="d-flex flex-row justify-end">
-            <v-btn v-if="store.getters['playlist/getPlaylist']" icon @click="togglePlaylist">
-              <v-icon :icon="playlistVisible ? mdiClose : mdiPlaylistMusic" />
+            <v-btn icon @click="togglePlaylist">
+              <v-icon :icon="mdiPlaylistMusic" />
             </v-btn>
 
             <settings-menu />
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index 752f44f1..2392d0a8 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -31,6 +31,7 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
       <v-row class="w-100">
         <v-col cols="12" xl="8" offset-xl="2">
           <v-list
+            v-if="playlistEntries.length"
             bg-color="planetarifyDark"
             lines="2"
             style="margin-left: 8px; margin-right: -24px"
@@ -126,6 +127,9 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
               </v-list-item>
             </v-hover>
           </v-list>
+          <v-card-title v-else class="d-flex justify-center align-center mt-10">
+            <span>Search for some audio files to add to your personal playlist</span>
+          </v-card-title>
         </v-col>
       </v-row>
     </v-card>

From f5869a0c7f1429689243f5a8be82548b53d7f29c Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Tue, 20 Sep 2022 14:24:47 +0200
Subject: [PATCH 38/56] empty playlist note - fix for small screen

---
 src/components/pageLayout/PlayList.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index 2392d0a8..f0d8a2ef 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -127,7 +127,11 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
               </v-list-item>
             </v-hover>
           </v-list>
-          <v-card-title v-else class="d-flex justify-center align-center mt-10">
+          <v-card-title
+            v-else
+            class="d-flex justify-center align-center mt-10"
+            style="white-space: break-spaces !important"
+          >
             <span>Search for some audio files to add to your personal playlist</span>
           </v-card-title>
         </v-col>

From 93dd2a49606306c8232e45f791d1aa1d2bee73bd Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Tue, 20 Sep 2022 15:03:25 +0200
Subject: [PATCH 39/56] remove z-index from audio player

---
 src/components/pageLayout/AudioPlayer.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/pageLayout/AudioPlayer.vue b/src/components/pageLayout/AudioPlayer.vue
index edd7b022..45e642f9 100644
--- a/src/components/pageLayout/AudioPlayer.vue
+++ b/src/components/pageLayout/AudioPlayer.vue
@@ -48,7 +48,6 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
   <v-fade-transition class="audio-player-card">
     <v-card
       v-if="audioPlayer.file"
-      style="z-index: 10000"
       position="fixed"
       location="bottom"
       color="planetarifyDark"

From de93e68edb326cfb74f713137ca7809ad86f34ad Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Wed, 21 Sep 2022 13:47:53 +0200
Subject: [PATCH 40/56] fix scrolling issues

---
 src/App.vue                                   | 11 ++----
 src/components/HomeView.vue                   |  5 +++
 src/components/SearchView.vue                 | 18 ++++++++--
 src/components/pageLayout/AppFooter.vue       |  6 ++--
 src/components/pageLayout/PlayList.vue        |  8 +----
 .../searchViewComponents/BaseList.vue         | 34 ++-----------------
 .../searchViewComponents/ImageList.vue        |  4 +--
 .../searchViewComponents/TileList.vue         |  2 +-
 src/composables/footer.js                     |  3 --
 src/composables/footer.ts                     | 28 +++++++++++++++
 src/composables/useFileListComposable.js      | 24 +++++++++++++
 11 files changed, 83 insertions(+), 60 deletions(-)
 delete mode 100644 src/composables/footer.js
 create mode 100644 src/composables/footer.ts

diff --git a/src/App.vue b/src/App.vue
index 34ed67da..ec51b120 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,15 +7,8 @@ import AudioDetail from "@/components/detailViewComponents/AudioDetail.vue";
 
 const route = useRoute();
 import { audioDetailPopup, playlistVisible, audioPlayer } from "@/composables/audioControls";
-import { footerVisible } from "@/composables/footer.js";
-import { computed } from "vue";
-
-const adjustFooterPadding = computed(() => {
-  if (route.name === "Home" && !playlistVisible.value) return "0px";
-  if (audioPlayer.value.file) return "100px";
-  if (footerVisible.value && !playlistVisible.value) return "120px";
-  return "0px";
-});
+import { useFooter } from "@/composables/footer.ts";
+const { adjustFooterPadding } = useFooter();
 </script>
 
 <template>
diff --git a/src/components/HomeView.vue b/src/components/HomeView.vue
index 9fb12679..d9c143e8 100644
--- a/src/components/HomeView.vue
+++ b/src/components/HomeView.vue
@@ -1,5 +1,10 @@
 <script setup>
 import SearchBar from "@/components/pageLayout/SearchBar.vue";
+import { onMounted } from "vue";
+import { _footerVisible } from "@/composables/footer";
+onMounted(() => {
+  _footerVisible.value = true;
+});
 </script>
 
 <template>
diff --git a/src/components/SearchView.vue b/src/components/SearchView.vue
index 03ef7031..8272b441 100644
--- a/src/components/SearchView.vue
+++ b/src/components/SearchView.vue
@@ -7,21 +7,33 @@ import VideoList from "@/components/searchViewComponents/VideoList.vue";
 import SearchFilterMenu from "@/components/searchViewComponents/subcomponents/SearchFilterMenu.vue";
 
 import { useRoute } from "vue-router";
+const route = useRoute();
+
 import { Types } from "@/helpers/typeHelper";
 import { useDisplay } from "vuetify";
 const { smAndDown } = useDisplay();
 
 import { playlistVisible } from "@/composables/audioControls";
 
-const route = useRoute();
+import { useFileListComposable } from "@/composables/useFileListComposable";
+const { infinite, infiniteScroll } = useFileListComposable({ fileType: route.query.type });
 
 function listType(t) {
   return [t, Types.all, undefined].includes(route.query.type);
 }
+import { useFooter } from "@/composables/footer";
+const { hideFooter } = useFooter();
 </script>
 
 <template>
-  <div v-if="!playlistVisible" data-id="search-view" class="h-100" style="overflow-y: scroll">
+  <div
+    v-if="!playlistVisible"
+    id="search-view"
+    v-scroll.self="infinite && infiniteScroll"
+    data-id="search-view"
+    class="h-100 overflow-y-auto"
+    @scroll="hideFooter"
+  >
     <search-filter-menu v-if="smAndDown" />
     <SearchFilters v-else />
     <GenericList v-if="listType(Types.text)" :file-type="Types.text" />
@@ -30,6 +42,6 @@ function listType(t) {
     <VideoList v-if="listType(Types.video)" />
     <GenericList v-if="listType(Types.directories)" :file-type="Types.directories" />
     <GenericList v-if="listType(Types.other)" :file-type="Types.other" />
-    <GenericList v-if="route.query.type == Types.unfiltered" :file-type="Types.unfiltered" />
+    <GenericList v-if="route.query.type === Types.unfiltered" :file-type="Types.unfiltered" />
   </div>
 </template>
diff --git a/src/components/pageLayout/AppFooter.vue b/src/components/pageLayout/AppFooter.vue
index 8414e8cb..68fada2b 100644
--- a/src/components/pageLayout/AppFooter.vue
+++ b/src/components/pageLayout/AppFooter.vue
@@ -7,7 +7,8 @@ import { useDisplay } from "vuetify";
 const { smAndUp } = useDisplay();
 import { mdiMastodon, mdiTwitter, mdiGithub, mdiHandCoin, mdiEmail } from "@mdi/js";
 
-import { footerVisible } from "@/composables/footer";
+import { useFooter } from "@/composables/footer";
+const { footerVisible } = useFooter();
 
 const footer_links = [
   {
@@ -36,8 +37,7 @@ const footer_links = [
 <template>
   <v-card
     :class="{
-      'footer--hidden':
-        (route.name !== 'Home' && !footerVisible) || audioPlayer.file || playlistVisible,
+      'footer--hidden': !footerVisible,
     }"
     position="fixed"
     variant="flat"
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index f0d8a2ef..f62438fb 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -22,7 +22,7 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
     <v-card
       v-if="playlistVisible"
       width="100%"
-      class="overflow-y-scroll h-100"
+      class="overflow-y-auto h-100"
       style="z-index: 10000"
       color="planetarifyDark"
       rounded="0"
@@ -139,9 +139,3 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
     </v-card>
   </v-fade-transition>
 </template>
-
-<style scoped>
-.overflow-y-scroll {
-  overflow-y: scroll;
-}
-</style>
diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index 7f28d37d..81e92053 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -13,7 +13,6 @@ import { useDisplay } from "vuetify";
 import { useStore } from "vuex";
 const store = useStore();
 
-const infiniteScrollMargin = 200;
 const route = useRoute();
 const { smAndDown, smAndUp } = useDisplay();
 
@@ -24,7 +23,7 @@ const props = defineProps({
   },
 });
 
-const { anyFileType, loading, loadedPages, infinite, slicedHits, pageHits } =
+const { anyFileType, loading, loadedPages, infinite, slicedHits, pageHits, infiniteScroll } =
   useFileListComposable(props);
 
 import { togglePlaylist, setPlaylist, enqueue } from "@/composables/audioControls.ts";
@@ -49,26 +48,6 @@ const pageCount = computed(
   maxPages
 );
 
-/**
- * See if the the page scrolled so far down that empty space opens up at the bottom.
- * Also update the url
- * used by ImageList
- */
-const infiniteScroll = () => {
-  if (!infinite.value) return;
-  const { scrollTop, scrollHeight } = document.documentElement;
-  // calculate, which page is currently in view
-  const scrollPage = Math.floor(loadedPages.value * (scrollTop / scrollHeight)) + 1;
-  // if needed, change the page in the URL
-  if (store.state.query.page !== scrollPage) {
-    enterSearchQuery(route.query, scrollPage, "replace");
-  }
-  const nearBottom = window.innerHeight + infiniteScrollMargin > scrollHeight - scrollTop;
-  if (nearBottom && !loading.value) {
-    return store.dispatch(`results/${props.fileType}/fetchPage`, { page: loadedPages.value + 1 });
-  }
-};
-
 /**
  * scroll down to the page from the query
  */
@@ -129,7 +108,7 @@ const queryPage = computed({
 </script>
 
 <template>
-  <v-container v-scroll="infiniteScroll" class="overflow-y-hidden" style="max-width: 1200px">
+  <v-container class="overflow-y-hidden" style="max-width: 1200px">
     <div
       :class="smAndUp ? 'flex-row' : 'flex-column'"
       class="justify-space-between d-flex mb-3"
@@ -144,7 +123,7 @@ const queryPage = computed({
           class="w-100 d-flex justify-start align-center text-ipfsPrimary-lighten-1 v-btn v-btn--density-default v-btn--size-default v-btn--variant-outlined"
           :class="{ 'v-btn--disabled': !anyFileType }"
         >
-          <div class="mr-auto">
+          <div class="mr-auto d-flex flex-row align-center">
             <v-icon size="28" :icon="TypeIcons[fileType]" color="ipfsPrimary-lighten-1" />
             <span> {{ TypeListNames[fileType] }} ({{ resultsTotal }}) </span>
           </div>
@@ -210,10 +189,3 @@ const queryPage = computed({
     </div>
   </v-container>
 </template>
-
-<style scoped>
-.banner {
-  flex-grow: 2;
-  justify-content: flex-start;
-}
-</style>
diff --git a/src/components/searchViewComponents/ImageList.vue b/src/components/searchViewComponents/ImageList.vue
index 464b6135..c0856c85 100644
--- a/src/components/searchViewComponents/ImageList.vue
+++ b/src/components/searchViewComponents/ImageList.vue
@@ -27,9 +27,7 @@ const { blurExplicit } = useBlurExplicit();
           class="rounded grey lighten-2"
         >
           <template #placeholder>
-            <v-row class="fill-height ma-0" align="center" justify="center">
-              <v-progress-circular indeterminate color="ipfsPrimary" />
-            </v-row>
+            <v-row class="fill-height ma-0" align="center" justify="center"> </v-row>
           </template>
           <NsfwTooltip :file="hit" />
         </v-img>
diff --git a/src/components/searchViewComponents/TileList.vue b/src/components/searchViewComponents/TileList.vue
index f333dcc1..2a506352 100644
--- a/src/components/searchViewComponents/TileList.vue
+++ b/src/components/searchViewComponents/TileList.vue
@@ -16,7 +16,7 @@ const { slicedHits } = useFileListComposable({ fileType: props.fileType });
     <v-col>
       <v-row dense>
         <v-col
-          v-for="(hit, index) in slicedHits(xs ? 2 : smAndDown ? 6 : mdAndDown ? 8 : 12)"
+          v-for="(hit, index) in slicedHits(xs ? 2 : smAndDown ? 6 : mdAndDown ? 8 : 10)"
           :key="index"
           cols="6"
           sm="4"
diff --git a/src/composables/footer.js b/src/composables/footer.js
deleted file mode 100644
index 416b72c5..00000000
--- a/src/composables/footer.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ref } from "vue";
-
-export const footerVisible = ref(true);
diff --git a/src/composables/footer.ts b/src/composables/footer.ts
new file mode 100644
index 00000000..4c8ee4ce
--- /dev/null
+++ b/src/composables/footer.ts
@@ -0,0 +1,28 @@
+import { ref, computed } from "vue";
+import { useRoute } from "vue-router";
+
+import { playlistVisible, audioPlayer } from "@/composables/audioControls";
+export const _footerVisible = ref(true);
+
+export const useFooter = () => {
+  const route = useRoute();
+  const footerVisible = computed(() => {
+    if (audioPlayer.value.file || playlistVisible.value) return false;
+    if (route.name === "Home") return true;
+    return _footerVisible.value && route.name === "Search";
+  });
+  const hideFooter = () => {
+    _footerVisible.value = false;
+  };
+  const adjustFooterPadding = computed(() => {
+    if (route.name === "Home" && !playlistVisible.value) return "0px";
+    if (audioPlayer.value.file) return "100px";
+    if (footerVisible.value) return "120px";
+    return "0px";
+  });
+  return {
+    footerVisible,
+    hideFooter,
+    adjustFooterPadding,
+  };
+};
diff --git a/src/composables/useFileListComposable.js b/src/composables/useFileListComposable.js
index df9fe007..3c3238b7 100644
--- a/src/composables/useFileListComposable.js
+++ b/src/composables/useFileListComposable.js
@@ -8,6 +8,9 @@ import durationToColor from "@/helpers/durationToColor";
 import mime from "mime";
 import { Types } from "@/helpers/typeHelper";
 import getResourceURL from "@/helpers/resourceURL";
+import { enterSearchQuery } from "@/router";
+
+const infiniteScrollMargin = 200;
 
 export const useFileListComposable = ({ fileType }) => {
   const route = useRoute();
@@ -45,6 +48,26 @@ export const useFileListComposable = ({ fileType }) => {
     return pageHits.value;
   }
 
+  /**
+   * See if the the page scrolled so far down that empty space opens up at the bottom.
+   * Also update the url
+   * used by ImageList
+   */
+  const infiniteScroll = () => {
+    console.log("infinite scroll called");
+    const { scrollTop, scrollHeight } = document.getElementById("search-view");
+    // calculate, which page is currently in view
+    const scrollPage = Math.floor(loadedPages.value * (scrollTop / scrollHeight)) + 1;
+    // if needed, change the page in the URL
+    if (store.state.query.page !== scrollPage) {
+      enterSearchQuery(route.query, scrollPage, "replace");
+    }
+    const nearBottom = window.innerHeight + infiniteScrollMargin > scrollHeight - scrollTop;
+    if (nearBottom && !loading.value) {
+      return store.dispatch(`results/${fileType}/fetchPage`, { page: loadedPages.value + 1 });
+    }
+  };
+
   return {
     pageHits,
     loading,
@@ -52,6 +75,7 @@ export const useFileListComposable = ({ fileType }) => {
     infinite,
     loadedPages,
     slicedHits,
+    infiniteScroll,
   };
 };
 

From a2a7c1e820a9804f4b962bfa93f7a6f69bc87070 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Thu, 22 Sep 2022 14:55:36 +0200
Subject: [PATCH 41/56] fix for vuetify bug with v-scroll directive; upgrade of
 vuetify

---
 package-lock.json                      | 18 +++++++++---------
 package.json                           |  2 +-
 src/components/SearchView.vue          |  6 ++++--
 src/components/pageLayout/PlayList.vue |  4 ++--
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 27e5f42e..10508249 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "vue-masonry": "^0.11.8",
         "vue-router": "^4.0.15",
         "vue-timeago3": "^2.2.1",
-        "vuetify": "3.0.0-beta.5",
+        "vuetify": "3.0.0-beta.11",
         "vuex": "^4.0.2"
       },
       "devDependencies": {
@@ -4685,9 +4685,9 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.5.tgz",
-      "integrity": "sha512-mU+pO5ZAZOR2Z7eVBoPwZw6nePxT5Sdqpsa4++Q99TwVxXQ7jl76Cy97v72MkDYWfxjDjj8XvW6IqNPGrJpU8w==",
+      "version": "3.0.0-beta.11",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.11.tgz",
+      "integrity": "sha512-WHwHNRpnDZ2ZUaOlL3oSnIvVSz0kVLmF/OVQUupIYvgV8pERgFN2NtXN5E3bq/DQkMyYcEUcnSQIrzQs2aZ36A==",
       "engines": {
         "node": "^12.20 || >=14.13"
       },
@@ -4697,10 +4697,10 @@
       },
       "peerDependencies": {
         "@formatjs/intl": "^1.0.0 || ^2.0.0",
-        "vite-plugin-vuetify": "1.0.0-alpha.12",
+        "vite-plugin-vuetify": "^1.0.0-alpha.12",
         "vue": "^3.2.0",
         "vue-i18n": "^9.0.0",
-        "webpack-plugin-vuetify": "2.0.0-alpha.11"
+        "webpack-plugin-vuetify": "^2.0.0-alpha.11"
       },
       "peerDependenciesMeta": {
         "@formatjs/intl": {
@@ -8246,9 +8246,9 @@
       }
     },
     "vuetify": {
-      "version": "3.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.5.tgz",
-      "integrity": "sha512-mU+pO5ZAZOR2Z7eVBoPwZw6nePxT5Sdqpsa4++Q99TwVxXQ7jl76Cy97v72MkDYWfxjDjj8XvW6IqNPGrJpU8w=="
+      "version": "3.0.0-beta.11",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.11.tgz",
+      "integrity": "sha512-WHwHNRpnDZ2ZUaOlL3oSnIvVSz0kVLmF/OVQUupIYvgV8pERgFN2NtXN5E3bq/DQkMyYcEUcnSQIrzQs2aZ36A=="
     },
     "vuex": {
       "version": "4.0.2",
diff --git a/package.json b/package.json
index 9c69420d..c540f87f 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "vue-masonry": "^0.11.8",
     "vue-router": "^4.0.15",
     "vue-timeago3": "^2.2.1",
-    "vuetify": "3.0.0-beta.5",
+    "vuetify": "3.0.0-beta.11",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
diff --git a/src/components/SearchView.vue b/src/components/SearchView.vue
index 8272b441..ec331c04 100644
--- a/src/components/SearchView.vue
+++ b/src/components/SearchView.vue
@@ -29,10 +29,12 @@ const { hideFooter } = useFooter();
   <div
     v-if="!playlistVisible"
     id="search-view"
-    v-scroll.self="infinite && infiniteScroll"
     data-id="search-view"
     class="h-100 overflow-y-auto"
-    @scroll="hideFooter"
+    @scroll="
+      hideFooter;
+      infinite && infiniteScroll;
+    "
   >
     <search-filter-menu v-if="smAndDown" />
     <SearchFilters v-else />
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index f62438fb..69401285 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -49,7 +49,7 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
                 @dblclick="startPlaylist(index)"
               >
                 <template #prepend>
-                  <v-list-item-avatar
+                  <v-avatar
                     rounded="0"
                     :style="{ cursor: entry.audio?.error ? 'default' : 'pointer' }"
                     @click="startPlaylist(index)"
@@ -100,7 +100,7 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
                         />
                       </blink-blink>
                     </v-img>
-                  </v-list-item-avatar>
+                  </v-avatar>
                 </template>
                 <template #append>
                   <div class="d-flex flex-row">

From 0f613332d5005fded33020f18a2ee471331e93e5 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Thu, 22 Sep 2022 15:53:54 +0200
Subject: [PATCH 42/56] fix bug #241

---
 src/App.vue                            |  2 +-
 src/components/pageLayout/PlayList.vue | 16 ++++++++++++++--
 src/composables/audioControls.ts       | 14 +++++++++-----
 src/composables/footer.ts              |  6 +++---
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ec51b120..c9610652 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@ import PlayList from "./components/pageLayout/PlayList.vue";
 import AudioDetail from "@/components/detailViewComponents/AudioDetail.vue";
 
 const route = useRoute();
-import { audioDetailPopup, playlistVisible, audioPlayer } from "@/composables/audioControls";
+import { audioDetailPopup } from "@/composables/audioControls";
 import { useFooter } from "@/composables/footer.ts";
 const { adjustFooterPadding } = useFooter();
 </script>
diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index 69401285..bf00ff80 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -8,7 +8,7 @@ import {
   showAudioDetail,
   removePlaylistEntry,
 } from "@/composables/audioControls";
-import { mdiCircleSmall, mdiPlay, mdiDisc, mdiTrashCanOutline } from "@mdi/js";
+import { mdiAlert, mdiCircleSmall, mdiPlay, mdiDisc, mdiTrashCanOutline } from "@mdi/js";
 import { picsum } from "@/helpers/picsum";
 
 import { fileTitle, fileAuthor, fileAlbum } from "@/helpers/fileHelper";
@@ -66,8 +66,20 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
                         })
                       "
                     >
+                      <v-icon
+                        v-if="entry.audio && entry.audio.error"
+                        style="
+                          opacity: 0.9;
+                          position: absolute;
+                          top: 50%;
+                          left: 50%;
+                          transform: translate(-50%, -50%);
+                        "
+                        :icon="mdiAlert"
+                        color="planetarifyLight"
+                      />
                       <blink-blink
-                        v-if="entry.hash === audioPlayer?.file?.hash && audioPlayer?.loading"
+                        v-else-if="entry.hash === audioPlayer?.file?.hash && audioPlayer?.loading"
                       >
                         <v-icon
                           style="
diff --git a/src/composables/audioControls.ts b/src/composables/audioControls.ts
index 2be518b8..3820c6dd 100644
--- a/src/composables/audioControls.ts
+++ b/src/composables/audioControls.ts
@@ -80,7 +80,7 @@ export const audioPlayer = ref<IAudio>({
   reportError(hash, message) {
     this.error = message;
     this.loading = false;
-    console.error("Audio Error:", message, this, hash);
+    console.warn("Audio Error:", message, this, hash);
     store.commit("playlist/setAudioError", {
       hash,
       error: message,
@@ -94,8 +94,13 @@ export const audioPlayer = ref<IAudio>({
       abortController.signal.addEventListener("abort", () => {
         reject();
       });
-      if (file) {
-        this.initialize(file, options);
+      try {
+        if (file) {
+          this.initialize(file, options);
+        }
+      } catch (e) {
+        this.reportError(file?.hash, (<Error>e)?.message);
+        reject(e);
       }
       if (this.loaded) return resolve(this);
       this.player?.once("loaderror", () => {
@@ -147,8 +152,7 @@ export const audioPlayer = ref<IAudio>({
   initialize(file: IFile, options = {}) {
     const fileExtension = getFileExtension(file);
     if (!Howler.codecs(fileExtension)) {
-      this.reportError(file.hash, `Unsupported/undetected file type: '${fileExtension}'`);
-      return;
+      throw new Error(`Unsupported/undetected file type: '${fileExtension}'`);
     }
     this.cleanUp();
     this.file = file;
diff --git a/src/composables/footer.ts b/src/composables/footer.ts
index 4c8ee4ce..b6869552 100644
--- a/src/composables/footer.ts
+++ b/src/composables/footer.ts
@@ -1,13 +1,13 @@
 import { ref, computed } from "vue";
 import { useRoute } from "vue-router";
 
-import { playlistVisible, audioPlayer } from "@/composables/audioControls";
+import { playlistVisible, audioPlayer, audioDetailPopup } from "@/composables/audioControls";
 export const _footerVisible = ref(true);
 
 export const useFooter = () => {
   const route = useRoute();
   const footerVisible = computed(() => {
-    if (audioPlayer.value.file || playlistVisible.value) return false;
+    if (audioPlayer.value.file || playlistVisible.value || audioDetailPopup.value) return false;
     if (route.name === "Home") return true;
     return _footerVisible.value && route.name === "Search";
   });
@@ -15,7 +15,7 @@ export const useFooter = () => {
     _footerVisible.value = false;
   };
   const adjustFooterPadding = computed(() => {
-    if (route.name === "Home" && !playlistVisible.value) return "0px";
+    if (route.name === "Home" && !playlistVisible.value && !audioDetailPopup.value) return "0px";
     if (audioPlayer.value.file) return "100px";
     if (footerVisible.value) return "120px";
     return "0px";

From c0bfb8170ef690dc37a65311a8411fd17cfdadf1 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Thu, 22 Sep 2022 19:37:06 +0200
Subject: [PATCH 43/56] fix the scrolling bug again

---
 src/components/SearchView.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/SearchView.vue b/src/components/SearchView.vue
index ec331c04..2c22bd59 100644
--- a/src/components/SearchView.vue
+++ b/src/components/SearchView.vue
@@ -23,6 +23,12 @@ function listType(t) {
 }
 import { useFooter } from "@/composables/footer";
 const { hideFooter } = useFooter();
+const onScroll = () => {
+  hideFooter();
+  if (infinite.value) {
+    infiniteScroll();
+  }
+};
 </script>
 
 <template>
@@ -31,10 +37,7 @@ const { hideFooter } = useFooter();
     id="search-view"
     data-id="search-view"
     class="h-100 overflow-y-auto"
-    @scroll="
-      hideFooter;
-      infinite && infiniteScroll;
-    "
+    @scroll="onScroll"
   >
     <search-filter-menu v-if="smAndDown" />
     <SearchFilters v-else />

From f77ac60783e49981e3c3765b8488283e3668aa52 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Thu, 22 Sep 2022 21:47:57 +0200
Subject: [PATCH 44/56] small fix in videolist component

---
 src/components/searchViewComponents/VideoList.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/searchViewComponents/VideoList.vue b/src/components/searchViewComponents/VideoList.vue
index 70ab86f8..3e1ed987 100644
--- a/src/components/searchViewComponents/VideoList.vue
+++ b/src/components/searchViewComponents/VideoList.vue
@@ -16,15 +16,21 @@ const { slicedHits } = useFileListComposable({ fileType });
 <template>
   <ListBase :file-type="fileType">
     <v-row dense>
-      <v-col v-for="(hit, index) in slicedHits(3)" :key="index" cols="12">
-        <hover-card :hit="hit" :index="index" :file-type="fileType">
+      <v-col cols="12">
+        <hover-card
+          v-for="(hit, index) in slicedHits(3)"
+          :key="index"
+          :hit="hit"
+          :index="index"
+          :file-type="fileType"
+        >
           <v-row>
             <v-col cols="12" sm="4" md="3" lg="2">
               <v-img
                 class="ma-3 mr-sm-0"
                 cover
                 aspect-ratio="1.778"
-                :src="hit.src || picsum({ seed: hit.hash })"
+                :src="picsum({ seed: hit.hash })"
                 gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
               >
                 <media-center-icon :icon="mdiVideo" />

From 7e9921125e3e27a24270464ff1dadbebb75bef77 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 23 Sep 2022 12:29:25 +0200
Subject: [PATCH 45/56] remove disabled button styles for banner

---
 src/components/searchViewComponents/BaseList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
index 81e92053..2c038221 100644
--- a/src/components/searchViewComponents/BaseList.vue
+++ b/src/components/searchViewComponents/BaseList.vue
@@ -121,7 +121,7 @@ const queryPage = computed({
       >
         <div
           class="w-100 d-flex justify-start align-center text-ipfsPrimary-lighten-1 v-btn v-btn--density-default v-btn--size-default v-btn--variant-outlined"
-          :class="{ 'v-btn--disabled': !anyFileType }"
+          color="ipfsPrimary"
         >
           <div class="mr-auto d-flex flex-row align-center">
             <v-icon size="28" :icon="TypeIcons[fileType]" color="ipfsPrimary-lighten-1" />

From 37d57e1894129672d8e68cbf3d862f922e493765 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 23 Sep 2022 13:18:38 +0200
Subject: [PATCH 46/56] alignment of searchbar

---
 src/components/pageLayout/SearchBar.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/pageLayout/SearchBar.vue b/src/components/pageLayout/SearchBar.vue
index bd070ea6..7ee09d1b 100644
--- a/src/components/pageLayout/SearchBar.vue
+++ b/src/components/pageLayout/SearchBar.vue
@@ -73,7 +73,11 @@ import { playlistVisible } from "@/composables/audioControls";
             <!-- FixMe: console warning about activator not being a reactive object-->
             <template #activator="{ props }">
               <div v-if="smAndUp" class="mr-3 text-grey d-flex align-start" v-bind="props">
-                <span class="text-capitalize" data-testid="type-filter-selector-value">
+                <span
+                  class="text-capitalize"
+                  style="margin-top: 1px"
+                  data-testid="type-filter-selector-value"
+                >
                   {{ listName(fileType) }}
                 </span>
                 <v-icon class="d-inline-block" :icon="mdiMenuDown" />
@@ -133,5 +137,6 @@ import { playlistVisible } from "@/composables/audioControls";
 <style>
 #search input {
   text-overflow: ellipsis;
+  padding-top: 10px;
 }
 </style>

From 256a78d0134d866b1a03933e483bf837dc7fe1ef Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 23 Sep 2022 13:56:27 +0200
Subject: [PATCH 47/56] change file details icon

---
 src/components/pageLayout/PlayList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pageLayout/PlayList.vue b/src/components/pageLayout/PlayList.vue
index bf00ff80..04a632be 100644
--- a/src/components/pageLayout/PlayList.vue
+++ b/src/components/pageLayout/PlayList.vue
@@ -8,7 +8,7 @@ import {
   showAudioDetail,
   removePlaylistEntry,
 } from "@/composables/audioControls";
-import { mdiAlert, mdiCircleSmall, mdiPlay, mdiDisc, mdiTrashCanOutline } from "@mdi/js";
+import { mdiAlert, mdiCircleSmall, mdiPlay, mdiFileFind, mdiTrashCanOutline } from "@mdi/js";
 import { picsum } from "@/helpers/picsum";
 
 import { fileTitle, fileAuthor, fileAlbum } from "@/helpers/fileHelper";
@@ -116,7 +116,7 @@ import BlinkBlink from "../shared/BlinkBlink.vue";
                 </template>
                 <template #append>
                   <div class="d-flex flex-row">
-                    <v-icon :icon="mdiDisc" @click="showAudioDetail(entry)" />
+                    <v-icon :icon="mdiFileFind" @click="showAudioDetail(entry)" />
                     <v-icon :icon="mdiTrashCanOutline" @click="removePlaylistEntry(index)" />
                   </div>
                 </template>

From 2728713d1d4d30d2f68c5ac61a4dddf1d6451dda Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 23 Sep 2022 14:18:42 +0200
Subject: [PATCH 48/56] remove accidental styling causing weird behavior

---
 src/components/detailViewComponents/GenericDetail.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/detailViewComponents/GenericDetail.vue b/src/components/detailViewComponents/GenericDetail.vue
index 46562206..0c7c3fc1 100644
--- a/src/components/detailViewComponents/GenericDetail.vue
+++ b/src/components/detailViewComponents/GenericDetail.vue
@@ -26,12 +26,9 @@ defineProps({
 </script>
 
 <template>
-  <v-sheet :light="!$vuetify.theme.dark" class="h-100" tile>
+  <v-sheet :light="!$vuetify.theme.dark" class="overflow-y-auto h-100" tile>
     <v-row class="fill-height ma-0 pa-0">
-      <v-col
-        style="position: absolute; top: 0; left: 0; bottom: 0; right: 0"
-        class="inline-block h-100 overflow-y-auto"
-      >
+      <v-col class="inline-block h-100 overflow-y-auto">
         <v-container>
           <v-row>
             <v-col

From e06bc6520500982953f3562d3e9b4a6d1fcd87b9 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 23 Sep 2022 15:09:58 +0200
Subject: [PATCH 49/56] make planetifyDark color even darker

---
 src/plugins/vuetify/theme.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/vuetify/theme.js b/src/plugins/vuetify/theme.js
index 7d2cad8a..e146699c 100644
--- a/src/plugins/vuetify/theme.js
+++ b/src/plugins/vuetify/theme.js
@@ -14,7 +14,7 @@ const ipfsTheme = {
     success: "#4CAF50",
     warning: "#FFC107",
     appBar: "#f5f5f5",
-    planetarifyDark: "#0d0041",
+    planetarifyDark: "#0d002f",
     planetarifyLight: "#e3dbff",
   },
 };

From a1ff37ba27103732d17ddf280a4dd2fc5f1c5e00 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 23 Sep 2022 15:30:23 +0200
Subject: [PATCH 50/56] simplify some code

---
 src/components/HomeView.vue | 17 +----------------
 src/composables/footer.ts   |  5 ++++-
 2 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/components/HomeView.vue b/src/components/HomeView.vue
index d9c143e8..e5e6f11b 100644
--- a/src/components/HomeView.vue
+++ b/src/components/HomeView.vue
@@ -8,7 +8,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-img src="/assets/background-02.png" cover class="h-100 hero bg-ipfsPrimary">
+  <v-img src="/assets/background-02.png" cover class="h-100 bg-ipfsPrimary">
     <v-container class="pa-0 fill-height d-flex mt-12">
       <v-row class="align-content-center">
         <v-col class="pa-2">
@@ -23,25 +23,10 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.hero {
-  margin-top: -100px;
-}
-
-h2 {
-  font-size: 120%;
-  letter-spacing: 0.09em;
-  font-weight: 500;
-  span {
-    font-weight: 500;
-  }
-}
 h3 {
   font-family: "Heebo", sans-serif;
   letter-spacing: -0.02em;
   font-size: 150%;
   font-weight: 700;
 }
-.v-card__title {
-  word-break: keep-all;
-}
 </style>
diff --git a/src/composables/footer.ts b/src/composables/footer.ts
index b6869552..770097d3 100644
--- a/src/composables/footer.ts
+++ b/src/composables/footer.ts
@@ -6,20 +6,23 @@ export const _footerVisible = ref(true);
 
 export const useFooter = () => {
   const route = useRoute();
+
   const footerVisible = computed(() => {
     if (audioPlayer.value.file || playlistVisible.value || audioDetailPopup.value) return false;
     if (route.name === "Home") return true;
     return _footerVisible.value && route.name === "Search";
   });
+
   const hideFooter = () => {
     _footerVisible.value = false;
   };
+
   const adjustFooterPadding = computed(() => {
-    if (route.name === "Home" && !playlistVisible.value && !audioDetailPopup.value) return "0px";
     if (audioPlayer.value.file) return "100px";
     if (footerVisible.value) return "120px";
     return "0px";
   });
+
   return {
     footerVisible,
     hideFooter,

From b112ca7672506233a4e9b72aaf6fc391b7f1037f Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 23 Sep 2022 15:39:37 +0200
Subject: [PATCH 51/56] remove some if statements

---
 src/composables/footer.ts                | 7 ++++---
 src/composables/useFileListComposable.js | 8 --------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/composables/footer.ts b/src/composables/footer.ts
index 770097d3..016e6584 100644
--- a/src/composables/footer.ts
+++ b/src/composables/footer.ts
@@ -8,9 +8,10 @@ export const useFooter = () => {
   const route = useRoute();
 
   const footerVisible = computed(() => {
-    if (audioPlayer.value.file || playlistVisible.value || audioDetailPopup.value) return false;
-    if (route.name === "Home") return true;
-    return _footerVisible.value && route.name === "Search";
+    return (
+      !(audioPlayer.value.file || playlistVisible.value || audioDetailPopup.value) &&
+      (route.name === "Home" || (_footerVisible.value && route.name === "Search"))
+    );
   });
 
   const hideFooter = () => {
diff --git a/src/composables/useFileListComposable.js b/src/composables/useFileListComposable.js
index 3c3238b7..b86d6e28 100644
--- a/src/composables/useFileListComposable.js
+++ b/src/composables/useFileListComposable.js
@@ -54,7 +54,6 @@ export const useFileListComposable = ({ fileType }) => {
    * used by ImageList
    */
   const infiniteScroll = () => {
-    console.log("infinite scroll called");
     const { scrollTop, scrollHeight } = document.getElementById("search-view");
     // calculate, which page is currently in view
     const scrollPage = Math.floor(loadedPages.value * (scrollTop / scrollHeight)) + 1;
@@ -78,10 +77,3 @@ export const useFileListComposable = ({ fileType }) => {
     infiniteScroll,
   };
 };
-
-export const imports = {
-  mime,
-  durationToColor,
-  prettyBytes,
-  getResourceURL,
-};

From 117534145e4e4e6998a0fcc6405ff25b8f8cedf9 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 23 Sep 2022 15:46:14 +0200
Subject: [PATCH 52/56] undo removeal of if statements

---
 src/composables/footer.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/composables/footer.ts b/src/composables/footer.ts
index 016e6584..770097d3 100644
--- a/src/composables/footer.ts
+++ b/src/composables/footer.ts
@@ -8,10 +8,9 @@ export const useFooter = () => {
   const route = useRoute();
 
   const footerVisible = computed(() => {
-    return (
-      !(audioPlayer.value.file || playlistVisible.value || audioDetailPopup.value) &&
-      (route.name === "Home" || (_footerVisible.value && route.name === "Search"))
-    );
+    if (audioPlayer.value.file || playlistVisible.value || audioDetailPopup.value) return false;
+    if (route.name === "Home") return true;
+    return _footerVisible.value && route.name === "Search";
   });
 
   const hideFooter = () => {

From bcc72f342c96855b99daa8728ea958409067f2b9 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 23 Sep 2022 15:58:50 +0200
Subject: [PATCH 53/56] attempt to reduce cognitive complexity

---
 src/composables/footer.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/composables/footer.ts b/src/composables/footer.ts
index 770097d3..c2c1220f 100644
--- a/src/composables/footer.ts
+++ b/src/composables/footer.ts
@@ -7,8 +7,11 @@ export const _footerVisible = ref(true);
 export const useFooter = () => {
   const route = useRoute();
 
+  const coveringPanel = computed(
+    () => audioPlayer.value.file || playlistVisible.value || audioDetailPopup.value
+  );
   const footerVisible = computed(() => {
-    if (audioPlayer.value.file || playlistVisible.value || audioDetailPopup.value) return false;
+    if (coveringPanel.value) return false;
     if (route.name === "Home") return true;
     return _footerVisible.value && route.name === "Search";
   });

From e6ffd69f2b6437fffcdb4afd92d951f9530c6b07 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 23 Sep 2022 16:00:58 +0200
Subject: [PATCH 54/56] another attempt to reduce cognitive complexity

---
 src/composables/footer.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/composables/footer.ts b/src/composables/footer.ts
index c2c1220f..312e38de 100644
--- a/src/composables/footer.ts
+++ b/src/composables/footer.ts
@@ -4,22 +4,23 @@ import { useRoute } from "vue-router";
 import { playlistVisible, audioPlayer, audioDetailPopup } from "@/composables/audioControls";
 export const _footerVisible = ref(true);
 
+const coveringPanel = computed(
+  () => audioPlayer.value.file || playlistVisible.value || audioDetailPopup.value
+);
+
+const hideFooter = () => {
+  _footerVisible.value = false;
+};
+
 export const useFooter = () => {
   const route = useRoute();
 
-  const coveringPanel = computed(
-    () => audioPlayer.value.file || playlistVisible.value || audioDetailPopup.value
-  );
   const footerVisible = computed(() => {
     if (coveringPanel.value) return false;
     if (route.name === "Home") return true;
     return _footerVisible.value && route.name === "Search";
   });
 
-  const hideFooter = () => {
-    _footerVisible.value = false;
-  };
-
   const adjustFooterPadding = computed(() => {
     if (audioPlayer.value.file) return "100px";
     if (footerVisible.value) return "120px";

From 671a10073d4f8f0aa4d07c1c28102ac11fbe1ae0 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 23 Sep 2022 16:17:52 +0200
Subject: [PATCH 55/56] Revert "attempt to reduce cognitive complexity"

This reverts commit bcc72f342c96855b99daa8728ea958409067f2b9.
---
 src/composables/footer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/footer.ts b/src/composables/footer.ts
index 312e38de..9c24cd8b 100644
--- a/src/composables/footer.ts
+++ b/src/composables/footer.ts
@@ -16,7 +16,7 @@ export const useFooter = () => {
   const route = useRoute();
 
   const footerVisible = computed(() => {
-    if (coveringPanel.value) return false;
+    if (audioPlayer.value.file || playlistVisible.value || audioDetailPopup.value) return false;
     if (route.name === "Home") return true;
     return _footerVisible.value && route.name === "Search";
   });

From 1a5d7a86a561e00fe2c287144512e6eae3b841be Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Fri, 23 Sep 2022 16:21:22 +0200
Subject: [PATCH 56/56] revert

---
 src/composables/footer.ts                | 12 ++++------
 src/composables/useFileListComposable.js | 30 ++++++------------------
 2 files changed, 11 insertions(+), 31 deletions(-)

diff --git a/src/composables/footer.ts b/src/composables/footer.ts
index 9c24cd8b..770097d3 100644
--- a/src/composables/footer.ts
+++ b/src/composables/footer.ts
@@ -4,14 +4,6 @@ import { useRoute } from "vue-router";
 import { playlistVisible, audioPlayer, audioDetailPopup } from "@/composables/audioControls";
 export const _footerVisible = ref(true);
 
-const coveringPanel = computed(
-  () => audioPlayer.value.file || playlistVisible.value || audioDetailPopup.value
-);
-
-const hideFooter = () => {
-  _footerVisible.value = false;
-};
-
 export const useFooter = () => {
   const route = useRoute();
 
@@ -21,6 +13,10 @@ export const useFooter = () => {
     return _footerVisible.value && route.name === "Search";
   });
 
+  const hideFooter = () => {
+    _footerVisible.value = false;
+  };
+
   const adjustFooterPadding = computed(() => {
     if (audioPlayer.value.file) return "100px";
     if (footerVisible.value) return "120px";
diff --git a/src/composables/useFileListComposable.js b/src/composables/useFileListComposable.js
index b86d6e28..df9fe007 100644
--- a/src/composables/useFileListComposable.js
+++ b/src/composables/useFileListComposable.js
@@ -8,9 +8,6 @@ import durationToColor from "@/helpers/durationToColor";
 import mime from "mime";
 import { Types } from "@/helpers/typeHelper";
 import getResourceURL from "@/helpers/resourceURL";
-import { enterSearchQuery } from "@/router";
-
-const infiniteScrollMargin = 200;
 
 export const useFileListComposable = ({ fileType }) => {
   const route = useRoute();
@@ -48,25 +45,6 @@ export const useFileListComposable = ({ fileType }) => {
     return pageHits.value;
   }
 
-  /**
-   * See if the the page scrolled so far down that empty space opens up at the bottom.
-   * Also update the url
-   * used by ImageList
-   */
-  const infiniteScroll = () => {
-    const { scrollTop, scrollHeight } = document.getElementById("search-view");
-    // calculate, which page is currently in view
-    const scrollPage = Math.floor(loadedPages.value * (scrollTop / scrollHeight)) + 1;
-    // if needed, change the page in the URL
-    if (store.state.query.page !== scrollPage) {
-      enterSearchQuery(route.query, scrollPage, "replace");
-    }
-    const nearBottom = window.innerHeight + infiniteScrollMargin > scrollHeight - scrollTop;
-    if (nearBottom && !loading.value) {
-      return store.dispatch(`results/${fileType}/fetchPage`, { page: loadedPages.value + 1 });
-    }
-  };
-
   return {
     pageHits,
     loading,
@@ -74,6 +52,12 @@ export const useFileListComposable = ({ fileType }) => {
     infinite,
     loadedPages,
     slicedHits,
-    infiniteScroll,
   };
 };
+
+export const imports = {
+  mime,
+  durationToColor,
+  prettyBytes,
+  getResourceURL,
+};