From 006d159a0fe946f46bb315ef4a5e4d350abc9b1b Mon Sep 17 00:00:00 2001
From: goynov <goynov@gmail.com>
Date: Fri, 14 Nov 2025 09:20:56 +0200
Subject: [PATCH] audio files management

---
 backend/app/bl/GameObjectsManager.js             | 6 ++++--
 backend/controllers/AssetController.js           | 2 +-
 src/components/AssetsManagement/AssetPreview.vue | 2 ++
 src/pages/game-objects/[[id]].vue                | 5 +++--
 src/plugins/params.js                            | 2 +-
 src/styles/style.scss                            | 4 ++++
 6 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/backend/app/bl/GameObjectsManager.js b/backend/app/bl/GameObjectsManager.js
index f2d9601..454ce87 100644
--- a/backend/app/bl/GameObjectsManager.js
+++ b/backend/app/bl/GameObjectsManager.js
@@ -103,7 +103,7 @@ class GameObjectsManager{
             }else{
                 object.asset.type = 'single';
                 await fs.promises.copyFile(src, def + ext);
-                if (['.jpg', '.png', '.webp', '.mp4', '.avi', '.webv'].includes(ext)){
+                if (['.jpg', '.png', '.webp', '.mp4', '.avi', '.webv', '.mp3'].includes(ext)){
                     await this.addThumb(object, src);
                 }
             }
@@ -118,6 +118,7 @@ class GameObjectsManager{
             let ext = path.extname(thumbSrc).toLowerCase();
             //console.log(object, thumbSrc, ext);
             let dest = `${config.fs.repo}/thumb/${object.id}.webp`;
+            object.asset.thumb = `${object.id}.webp`;
             if (['.jpg', '.png', '.webp'].includes(ext) || !ext){
                 await sharp(thumbSrc).resize({height: 250}).toFile(dest);
             }else if (['.mp4', '.avi', '.webv'].includes(ext)){
@@ -125,8 +126,9 @@ class GameObjectsManager{
                 await execFile('ffmpeg', [
                     '-i', thumbSrc, '-vf', `select=eq(n\\,${frame}),scale=-2:300`,
                      '-vframes', 1, '-f', 'image2', '-y', dest]);
+            }else if (['.mp3'].includes(ext)){
+                object.asset.thumb = `audio.webp`;
             }
-            object.asset.thumb = `${object.id}.webp`;
         }
 
         /**
diff --git a/backend/controllers/AssetController.js b/backend/controllers/AssetController.js
index 6b57755..45f94df 100644
--- a/backend/controllers/AssetController.js
+++ b/backend/controllers/AssetController.js
@@ -27,7 +27,7 @@ class AssetController{
         router.get('/:where/:id(*)', async (req, res)=>{
             res.sendFile(config.fs.repo + req.params.where + '/' + req.params.id, (err)=>{
                 if (err){
-                    console.error('Error retreiving file', req.params, err.code, err.message);
+                    //console.error('Error retreiving file', req.params, err.code, err.message);
                     if (req.params.where == 'thumb'){
                         res.redirect(302, '/empty.png');
                     }else res.status(404).end();
diff --git a/src/components/AssetsManagement/AssetPreview.vue b/src/components/AssetsManagement/AssetPreview.vue
index 75b63af..2258a34 100644
--- a/src/components/AssetsManagement/AssetPreview.vue
+++ b/src/components/AssetsManagement/AssetPreview.vue
@@ -16,6 +16,8 @@
     <img v-if="obj && !forRendering && obj.type == 'object2d'" :src="`/asset/default/${obj.asset?.name}`" />
     <video v-if="obj && !forRendering && obj.type == 'video'" controls :autoplay="autoplay ? 'autoplay' : ''" 
         :src="`/asset/default/${obj.asset?.name}`"></video>
+    <audio v-if="obj && !forRendering && obj.type == 'audio'" controls :autoplay="autoplay ? 'autoplay' : ''" 
+        :src="`/asset/default/${obj.asset?.name}`" class="d-block w-100"></audio>
 </template>
 
 <script>
diff --git a/src/pages/game-objects/[[id]].vue b/src/pages/game-objects/[[id]].vue
index 49b470b..7d2301f 100644
--- a/src/pages/game-objects/[[id]].vue
+++ b/src/pages/game-objects/[[id]].vue
@@ -17,7 +17,7 @@
                         <v-select :label="l.objectType" v-model="object.type" :items="$p.objectTypes.map(ot=>({title:l[ot.value], value:ot.value}))" tit :rules="[rules.required]">
                         </v-select>
                         <v-file-input :label="l.objectFile" v-model="object.file" :rules="[rules.requiredFile]"></v-file-input>
-                        <div v-if="object.asset?.name">{{ object.asset.name }}</div>
+                        <div v-if="object.asset">{{ object.asset.name }} | {{ object.asset.ofn }}</div>
                     </v-form>
                     <v-card-actions>
                         <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="success"
@@ -34,7 +34,7 @@
                 </v-card>
             </v-tabs-window-item>
             <v-tabs-window-item value="preview">
-                <v-card :title="l.preview" class="container my-3" v-if="object.asset">
+                <v-card :title="l.preview" class="container my-3" v-show="object.asset">
                     <AssetPreview :object="object" ref="assetPreview" ></AssetPreview>
                     <v-card-actions>
                         <v-btn @click="captureThumbnail" v-if="forRendering" prepend-icon="mdi-camera" color="secondary">
@@ -94,6 +94,7 @@ export default {
                 if (this.id == 'add') {
                     this.$router.replace({ params: { id: this.object.id } });
                 }
+                this.panel = 'preview';
                 await this.$nextTick();
                 if (!params?.thumbOnly) await this.$refs.assetPreview.loadAsset();
             } catch (err) {
diff --git a/src/plugins/params.js b/src/plugins/params.js
index ebea9e4..d9f597d 100644
--- a/src/plugins/params.js
+++ b/src/plugins/params.js
@@ -38,7 +38,7 @@ export default {
             }, {
                 value: 'audio',
                 icon: 'volume-medium',
-                color: 'deep-purple-accent-4'
+                color: 'deep-purple-accent-2'
             }]
         }
     }
diff --git a/src/styles/style.scss b/src/styles/style.scss
index cc343e6..374ef1a 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -110,4 +110,8 @@ video{
     width: 100%;
     max-width: 100vw;
     height: calc(100vh - 288px);
+}
+
+audio {
+    min-width:400px;
 }
\ No newline at end of file