ipfs-search · femans · Sep 23, 2022 · Sep 9, 2022 · Sep 9, 2022 · Sep 12, 2022
diff --git a/allowJavaScriptModules.ts 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/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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,11 +34,13 @@
     "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": {
     "@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/App.vue b/src/App.vue
@@ -1,24 +1,28 @@
 <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";
+import AudioDetail from "@/components/detailViewComponents/AudioDetail.vue";
 
-const { mdAndUp } = useDisplay();
 const route = useRoute();
-
-import { playerActive } from "@/composables/audioControls";
+import { audioDetailPopup } from "@/composables/audioControls";
+import { useFooter } from "@/composables/footer.ts";
+const { adjustFooterPadding } = useFooter();
 </script>
+
 <template>
-  <v-app dark hidden class="overflow-hidden">
-    <app-header v-if="route.name !== 'Home'" />
+  <v-app id="v-app" dark hidden style="height: 100vh">
+    <app-header />
 
-    <v-main id="main">
+    <v-main class="h-100" :style="{ 'padding-bottom': adjustFooterPadding }">
+      <play-list />
+      <audio-detail v-if="audioDetailPopup" :file="audioDetailPopup" />
       <router-view />
     </v-main>
 
-    <AudioPlayer v-if="playerActive" />
-    <AppFooter v-else-if="route.name === 'Home' || (route.name === 'Search' && mdAndUp)" />
+    <AudioPlayer />
+    <AppFooter />
   </v-app>
 </template>
 
@@ -42,15 +46,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
@@ -61,12 +56,4 @@ h2 {
     min-height: calc(100vh - 56px) !important;
   }
 }
-
-#main {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
 </style>
diff --git 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>