Feature/midi player

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
+title: ""
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
+title: ""
 labels: enhancement
-assignees: ''
-
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**

index.html

@@ -47,7 +47,7 @@
         enabled. Please enable it to continue.</strong
       >
     </noscript>
-    <div id="app"/>
+    <div id="app" />
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>

package.json

@@ -23,10 +23,12 @@
     "howler": "^2.2.1",
     "ipfs-search-client": "^1.0.1",
     "masonry-layout": "^4.2.2",
+    "midi-player-js": "^2.0.16",
     "mime": "^3.0.0",
     "moment": "^2.29.4",
     "pretty-bytes": "^6.0.0",
     "regenerator-runtime": "^0.13.9",
+    "soundfont-player": "^0.12.0",
     "ts-node": "^10.8.0",
     "url": "^0.11.0",
     "vue": "^3.2.13",

src/App.vue

@@ -1,11 +1,9 @@
 <script setup>
 //TODO: make AppHeader generic also for homeview
 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";
 import { useFooter } from "@/composables/footer.ts";
 const { adjustFooterPadding } = useFooter();

src/components/detailViewComponents/VideoDetail.vue

@@ -19,7 +19,7 @@ const videoPlayer = ref();
 const loading = ref(true);
 const error = ref(false);
 
-const setError = (e) => {
+const setError = () => {
   error.value = true;
   loading.value = false;
 };

src/components/detailViewComponents/subcomponents/DocumentViewer.vue

@@ -1,6 +1,5 @@
 <script setup>
 import VIframe from "@/components/shared/VIframe.vue";
-import mime from "mime";
 import getResourceURL from "@/helpers/resourceURL";
 import Retriever from "@/helpers/FetchDoggy";
 import { reactive, ref, computed } from "vue";

src/components/pageLayout/AppFooter.vue

@@ -1,8 +1,4 @@
 <script setup>
-import { useRoute } from "vue-router";
-const route = useRoute();
-import { audioPlayer, playlistVisible } from "@/composables/audioControls";
-
 import { useDisplay } from "vuetify";
 const { smAndUp } = useDisplay();
 import { mdiMastodon, mdiTwitter, mdiGithub, mdiHandCoin, mdiEmail } from "@mdi/js";

src/components/pageLayout/AppHeader.vue

@@ -16,7 +16,9 @@ import { useTheme } from "vuetify";
 import Hyperlink from "@/components/shared/HyperLink.vue";
 const theme = useTheme();
 
-const whiteLogo = computed(() => theme.current.value.dark || route.name === "Search");
+const whiteLogo = computed(
+  () => theme.current.value.dark || route.name === "Search" || playlistVisible.value
+);
 
 import {
   togglePlaylist,
@@ -59,15 +61,15 @@ const links = [
     v-if="route.name !== 'Home' || audioDetailPopup"
     class="px-4"
     height="56"
-    :color="route.name !== 'Detail' ? 'ipfsPrimary-lighten-1' : 'toolbar-light'"
+    :color="route.name !== 'Detail' || playlistVisible ? 'ipfsPrimary-lighten-1' : 'toolbar-light'"
   >
     <v-container fluid class="px-0 align-start">
       <v-row>
         <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
-                v-if="mdAndUp || route.name === 'Detail' || audioDetailPopup"
+                v-if="mdAndUp || (route.name === 'Detail' && !playlistVisible) || audioDetailPopup"
                 alt="ipfs-search.com logo"
                 contain
                 :src="`/assets/logo-${whiteLogo ? 'white' : 'black'}.svg`"

src/components/pageLayout/AudioPlayer.vue

@@ -17,8 +17,8 @@ import { picsum } from "@/helpers/picsum";
 import {
   audioPlayer,
   formatTime,
-  playAudioFile,
   pauseAudio,
+  resumeAudio,
   cleanUpAudioPlayer,
   previousPlaylistEntry,
   playlistSkipPrevious,
@@ -72,7 +72,6 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
             <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>
@@ -81,6 +80,8 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
               color="white"
               style="
                 opacity: 0.6;
+                stroke: black;
+                stroke-width: 0.3px;
                 position: absolute;
                 top: 50%;
                 left: 50%;
@@ -106,8 +107,8 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
             :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
+              >{{ formatTime(audioPlayer.time)?.join(" : ") }} /
+              {{ formatTime(audioPlayer.duration)?.join(" : ") }}</v-card-title
             >
             <div class="d-inline-flex flex-row">
               <v-btn
@@ -147,7 +148,7 @@ import { fileTitle, fileAuthor } from "@/helpers/fileHelper";
                 :size="mdAndUp ? 'large' : 'default'"
                 :icon="mdiPlay"
                 title="Play"
-                @click="playAudioFile"
+                @click="resumeAudio"
               />
               <v-btn
                 class="bg-ipfsPrimary-lighten-1 ml-2"