audio files management

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`;
         }
 
         /**

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();

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>

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) {

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'
             }]
         }
     }

src/styles/style.scss

@@ -111,3 +111,7 @@ video{
     max-width: 100vw;
     height: calc(100vh - 288px);
 }
+
+audio {
+    min-width:400px;
+}