audio files management

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

@@ -110,4 +110,8 @@ video{
     width: 100%;
     max-width: 100vw;
     height: calc(100vh - 288px);
+}
+
+audio {
+    min-width:400px;
 }