drag and drop into entire player

wysiwys · Aug 28, 2024 · b1df20a · b1df20a
1 parent 5e844e3
commit b1df20a
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 17 deletions.
diff --git a/frontend/components/AppContainer.vue b/frontend/components/AppContainer.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSharedPlayer } from '../typescript_src/player.ts';
+import { useVirtualList, useDropZone } from '@vueuse/core';
+
+let player = useSharedPlayer();
+
+const dropZoneRef = ref<HTMLElement>();
+
+async function onDrop(files: File[] | null) {
+    files.forEach(async (file) => {
+        console.log(file);
+        await player.addSong(file);
+    });
+}
+const { isOverDropZone } = useDropZone(dropZoneRef, {
+    onDrop,
+    dataTypes: ['audio/x-xm', 'audio/x-mod'],
+});
+</script>
+<template>
+    <App ref="dropZoneRef" id="app"></App>
+</template>
diff --git a/frontend/components/MusicLibrary.vue b/frontend/components/MusicLibrary.vue
@@ -16,7 +16,7 @@
 import SongInfo from '../typescript_src/songInfo.ts';
 import MusicRow from './MusicRow.vue';
 import { useSharedPlayer } from '../typescript_src/player.ts';
-import { useVirtualList, useDropZone } from '@vueuse/core';
+import { useVirtualList } from '@vueuse/core';
 import { h, ref, computed, defineProps } from 'vue';
 
 interface SongEntry {
@@ -33,18 +33,6 @@ const props = defineProps({
     },
 });
 
-const dropZoneRef = ref<HTMLElement>();
-async function onDrop(files: File[] | null) {
-    files.forEach(async (file) => {
-        await player.addSong(file);
-    });
-}
-
-const { isOverDropZone } = useDropZone(dropZoneRef, {
-    onDrop,
-    dataTypes: ['audio/x-xm', 'audio/x-mod'],
-});
-
 // XXX: hacky way to get the max-height of `music-row-div`
 // Creates a temporary element, gets the style, then deletes it
 var tempElement = document.createElement('div');
@@ -67,7 +55,7 @@ const { list, containerProps, wrapperProps } = useVirtualList(
 
 <template>
     <div id="music-row-container" v-bind="containerProps">
-        <div ref="dropZoneRef" id="wrapper-props" v-bind="wrapperProps">
+        <div id="wrapper-props" v-bind="wrapperProps">
             <MusicRow
                 v-for="item in list"
                 :key="item.index"

diff --git a/frontend/index.html b/frontend/index.html
@@ -22,6 +22,6 @@
         <script type="module" src="index.ts"></script>
     </head>
     <body>
-        <div id="app"></div>
+        <div id="app-container"></div>
     </body>
 </html>
diff --git a/frontend/index.ts b/frontend/index.ts
@@ -18,6 +18,7 @@ import { createPinia } from 'pinia';
 import { useSharedPlayer } from './typescript_src/player.js';
 
 import App from './components/App.vue';
+import AppContainer from './components/AppContainer.vue';
 import MusicRow from './components/MusicRow.vue';
 import MusicLibrary from './components/MusicLibrary.vue';
 
@@ -27,17 +28,18 @@ async function run() {
     await initWasm({ module_or_path: './assets/cordial_wasm_bg.wasm' });
 
     const pinia = createPinia();
-    const app = createApp(App);
+    const app = createApp(AppContainer);
 
     app.use(pinia);
 
     let sharedPlayer = useSharedPlayer();
     sharedPlayer.hasBackend = __HAS_BACKEND__;
 
+    app.component('App', App);
     app.component('MusicRow', MusicRow);
     app.component('MusicLibrary', MusicLibrary);
 
-    app.mount('#app');
+    app.mount('#app-container');
 
     await sharedPlayer.init();
 

diff --git a/frontend/style.css b/frontend/style.css
@@ -107,6 +107,10 @@ body {
     font-family: KodeMono, monospace;
     background-color: #656257;
 }
+#app-container {
+    height: 100vh;
+    width: 100vw;
+}
 
 #app {
     position: relative;