From 9eb14f06687900949230eac6aefc470523927e2c Mon Sep 17 00:00:00 2001
From: goynov <goynov@gmail.com>
Date: Mon, 17 Mar 2025 19:49:41 +0200
Subject: [PATCH] presentation

---
 backend/app/bl/GameObjectsManager.js          | 16 +++-
 src/components/AssetPreview.vue               | 82 +++++++++++++++++++
 src/components/SceneDesigner/GameObject.vue   |  6 +-
 src/components/SceneDesigner/Scene.vue        | 11 +--
 .../SceneDesigner/SceneDesigner.vue           | 43 ++++++----
 src/components/SceneDesigner/Task.vue         | 20 +++--
 src/pages/game-objects/[[id]].vue             | 68 ++-------------
 src/pages/game-objects/list.vue               | 19 ++++-
 src/pages/scenarios/[[id]].vue                | 35 ++++----
 src/plugins/lang.js                           |  4 +
 src/plugins/params.js                         | 24 ++++--
 src/plugins/vuetify.js                        |  3 +
 src/styles/style.scss                         |  4 +
 13 files changed, 218 insertions(+), 117 deletions(-)
 create mode 100644 src/components/AssetPreview.vue

diff --git a/backend/app/bl/GameObjectsManager.js b/backend/app/bl/GameObjectsManager.js
index 2111bab..e1b3406 100644
--- a/backend/app/bl/GameObjectsManager.js
+++ b/backend/app/bl/GameObjectsManager.js
@@ -2,6 +2,10 @@ import decompress from "decompress";
 import sharp from 'sharp';
 sharp.cache({ files : 0 });
 
+import util from 'node:util';
+import { execFile as npExecFile } from 'child_process'; 
+const execFile = util.promisify(npExecFile);
+
 import fs from 'fs';
 import path from 'path';
 
@@ -99,7 +103,7 @@ class GameObjectsManager{
             }else{
                 object.asset.type = 'single';
                 await fs.promises.copyFile(src, def + ext);
-                if (['.jpg', '.png', '.webp'].includes(ext)){
+                if (['.jpg', '.png', '.webp', '.mp4', '.avi', '.webv'].includes(ext)){
                     await this.addThumb(object, src);
                 }
             }
@@ -111,8 +115,16 @@ class GameObjectsManager{
          * @param {File} thumbSrc A thumbnail, представително изображение
          */
         this.addThumb = async function(object, thumbSrc){
+            let ext = path.extname(object.asset.ofn).toLowerCase();
             let dest = `${config.fs.repo}/thumb/${object.id}.webp`;
-            await sharp(thumbSrc).resize({height: 250}).toFile(dest);
+            if (['.jpg', '.png', '.webp'].includes(ext)){
+                await sharp(thumbSrc).resize({height: 250}).toFile(dest);
+            }else if (['.mp4', '.avi', '.webv'].includes(ext)){
+                let frame = 1;
+                await execFile('ffmpeg', [
+                    '-i', thumbSrc, '-vf', `select=eq(n\\,${frame}),scale=-2:300`,
+                     '-vframes', 1, '-f', 'image2', '-y', dest]);
+            }
             object.asset.thumb = `${object.id}.webp`;
         }
 
diff --git a/src/components/AssetPreview.vue b/src/components/AssetPreview.vue
new file mode 100644
index 0000000..14e6b67
--- /dev/null
+++ b/src/components/AssetPreview.vue
@@ -0,0 +1,82 @@
+<template>
+    <div v-show="forRendering">
+        <div ref="target"></div>
+        <v-slide-group show-arrows>
+            <v-slide-group-item v-for="(a, i) in animations" :key="i" v-slot="{ isSelected }">
+                <v-btn :color="isSelected ? 'primary' : undefined" class="ma-2"
+                    :prepend-icon="'mdi-' + (a.playing ? 'stop' : 'play')" rounded @click="toggleAnimation(a)">
+                    {{ a.name }}
+                </v-btn>
+            </v-slide-group-item>
+        </v-slide-group>
+    </div>
+    <v-img v-if="!forRendering && object.type == 'object2d'" :src="`/asset/default/${object.asset?.name}`"></v-img>
+    <video controls :autoplay="autoplay ? 'autoplay' : ''" v-if="!forRendering && object.type == 'video'" :src="`/asset/default/${object.asset?.name}`"></video>
+</template>
+
+<script>
+import { GameEngine } from '@/lib/gameEngine.js';
+let gameEngine = null;
+
+export default{
+    props:['object', 'autoplay'],
+    data(){
+        return {
+            animations: []
+        }
+    },
+    async mounted(){
+        gameEngine = new GameEngine();
+        this.gameEngine = gameEngine;
+        await gameEngine.init(this.$refs.target);
+        await this.loadAsset();
+    },
+    beforeUnmount() {
+        gameEngine?.stop();
+    },
+    computed:{
+        forRendering() {
+            return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render
+        },
+    },
+    methods:{
+        async loadAsset() {
+            if (this.forRendering) {
+                gameEngine.scene.clear();
+                if (this.object.type == 'panorama2d') {
+                    let t = await gameEngine.loadTexture(`/asset/default/${this.object.asset.name}`);
+                    t.mapping = gameEngine.$.EquirectangularReflectionMapping;
+                    gameEngine.scene.background = t;
+                    gameEngine.scene.environment = t;
+                    gameEngine.scene.add(gameEngine.camera);
+                } else {
+                    let gltf = await gameEngine.load(`/asset/default/${this.object.asset.name}`);
+                    console.debug('GLTF', gltf);
+                    this.loadedAsset = gltf;
+                    this.animations = gltf.animations.map(a => ({
+                        name: a.name, id: a.uuid
+                    }));
+                    let bb = new gameEngine.$.Box3().setFromObject(gltf.scene);
+                    gltf.scene.traverse(function (object) {
+                        object.frustumCulled = false;
+                    });
+                    gameEngine.camera.position.set(bb.max.x, bb.max.y, bb.max.z);
+                    gameEngine.controls.target.set((bb.max.x + bb.min.x) / 2, (bb.max.y + bb.min.y) / 2, (bb.max.z + bb.min.z) / 2)
+                    gameEngine.controls.update();
+                    gameEngine.scene.add(gltf.scene);
+                    //gameEngine.scene.add(gameEngine.light);
+                }
+            }
+        },
+
+        async toggleAnimation(animation){
+            animation.playing = !animation.playing;
+            gameEngine.playAnimation(
+                gameEngine.scene, 
+                this.loadedAsset.animations.find(a=>a.uuid == animation.id),
+                animation.playing
+            );
+        },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/SceneDesigner/GameObject.vue b/src/components/SceneDesigner/GameObject.vue
index de78298..c0fd22c 100644
--- a/src/components/SceneDesigner/GameObject.vue
+++ b/src/components/SceneDesigner/GameObject.vue
@@ -3,9 +3,10 @@
         <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{gameObject: true, selected}" v-show="visible && parent.visible">
             <line :x1="vd.x1" :y1="vd.y1" :x2="parent.vd.x1" :y2="parent.vd.y1"></line>
             <svg-icon :src="`/asset/thumb/${modelValue.go||0}.webp`" :x="vd.x1" :y="vd.y1" :size="37"></svg-icon>
+            <text :x="vd.x1" :y="vd.y1" dy="58">{{ modelValue.title }}</text>
         </g>
     </teleport>
-    <v-card v-if="selected" class="py-4">
+    <v-card v-if="selected" :title="modelValue.title">
         <asset-selector @select="assignGameObject" type="GameObject">
             <template v-slot:activator="props">
                 <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose game object</v-btn>
@@ -13,6 +14,7 @@
         </asset-selector>
         <v-form class="py-4">
             <v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
+            <v-textarea :label="$l.description" v-model="modelValue.description"></v-textarea>
         </v-form>
     </v-card>
 </template>
@@ -46,7 +48,7 @@ export default {
     modifiers: ['x1', 'y1'],
     methods:{
         intersect(v){
-            return Utils.intersectLineRect(this.vd, v);
+            return Utils.intersectPointRect([this.vd.x1, this.vd.y1], v);
         },
         assignGameObject(e){
             this.modelValue.go = e.id;
diff --git a/src/components/SceneDesigner/Scene.vue b/src/components/SceneDesigner/Scene.vue
index 88d3643..af5f1de 100644
--- a/src/components/SceneDesigner/Scene.vue
+++ b/src/components/SceneDesigner/Scene.vue
@@ -2,10 +2,11 @@
     <teleport to=".scene-designer .scenes" v-if="active">
         <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{scene: true, selected}" v-show="visible">
             <svg-icon :src="`/asset/thumb/${modelValue.environment||0}.webp`" :x="vd.x1" :y="vd.y1" :size="65"></svg-icon>
+            <text :x="vd.x1" :y="vd.y1" dy="86">{{ modelValue.title }}</text>
         </g>
     </teleport>
-    <v-card title="Scene" v-if="selected">
-        <asset-selector @select="assignGameObject" type="Scene">
+    <v-card :title="modelValue.title" v-if="selected">
+        <asset-selector @select="assignEnvironment" type="Scene">
             <template v-slot:activator="props">
                 <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" block color="success" class="py-4">Choose environment</v-btn>
             </template>
@@ -13,8 +14,8 @@
 
         <v-form class="py-4">
             <v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
+            <v-textarea :label="$l.description" v-model="modelValue.description"></v-textarea>
         </v-form>
-
     </v-card>
 </template>
 
@@ -48,9 +49,9 @@ export default {
     modifiers: ['x1', 'y1'],
     methods:{
         intersect(v){
-            return Utils.intersectLineRect(this.vd, v);
+            return Utils.intersectPointRect([this.vd.x1, this.vd.y1], v);
         },
-        assignGameObject(e){
+        assignEnvironment(e){
             this.modelValue.environment = e.id;
             if (this.modelValue.id == this.modelValue.title){
                 this.modelValue.title = e.name
diff --git a/src/components/SceneDesigner/SceneDesigner.vue b/src/components/SceneDesigner/SceneDesigner.vue
index 8803923..4dd06e6 100644
--- a/src/components/SceneDesigner/SceneDesigner.vue
+++ b/src/components/SceneDesigner/SceneDesigner.vue
@@ -26,11 +26,22 @@
                 <g class="scenes"></g>
             </svg>
         </div>
-        <v-navigation-drawer location="right" width="400">
+        <v-navigation-drawer location="right" :width="!selectedItem.length ? 400 : expandDrawer ? 800 : 400">
+            <v-btn :icon="expandDrawer ? 'mdi-arrow-expand-right' : 'mdi-arrow-expand-left'" variant="plain" size="small" 
+                @click="expandDrawer = !expandDrawer" v-if="selectedItem.length"></v-btn>
+            <template v-for="(item, i) in flatItems" :key="i">
+                <component :is="components[item.__type]" :ref="'sc-' + item.__path" :vd="item.vd" v-model="item.data"
+                    @target="setTarget($event, item)" :visible="item.visible" :cid="item.id" :parent="item.__parent"
+                    :selected="selectedItem.includes(item)">
+                </component>
+            </template>
+        </v-navigation-drawer>
+        <v-navigation-drawer>
             <v-list density="compact" nav v-model:selected="selectedItem"
             :select-strategy="mode == 'select' ? 'leaf' : 'single-leaf'">
                 <v-list-item v-for="(item, i) in flatItems.toSorted((a,b)=>a.__path.localeCompare(b.__path))" 
-                    :key="i" :title="item.data.title" :value="item" :style="`padding-left:${item.__level}rem`" v-show="!item.__parent || item.__parent.vd.expanded">
+                    :key="i" :title="item.data.title" :value="item" :style="`padding-left:${item.__level}rem`" 
+                    v-show="!item.__parent || item.__parent.vd.expanded" :color="[0,'secondary', 'primary', 'success'][item.__level]">
                     <template v-slot:prepend>
                     <v-btn variant="plain" density="comfortable" size="small"
                             :icon="`mdi-eye${item.visible ? '' : '-off'}`"
@@ -45,13 +56,6 @@
                     </template>
                 </v-list-item>
             </v-list>
-            
-            <template v-for="(item, i) in flatItems" :key="i">
-                <component :is="components[item.__type]" :ref="'svg-'+item.id" :vd="item.vd" v-model="item.data"
-                    @target="setTarget($event, item)" :visible="item.visible" :cid="item.id" :parent="item.__parent"
-                    :selected="selectedItem.includes(item)">
-                </component>
-            </template>
         </v-navigation-drawer>
     </div>
 </template>
@@ -98,7 +102,9 @@ export default {
             assetSelector: {
                 active: false,
                 type: 'Scene'
-            }
+            },
+            dialog: false,
+            expandDrawer: false
         }
     },
     mounted(){
@@ -277,12 +283,11 @@ export default {
                             id = `${this.components[this.mode].name}-${nid++}`
                         }while (this.flatItems.find(i=>i.data.id == id));
 
-                        let targetContainer = this.selectedItem[0]?.data; //this.items;
-                        if (targetContainer){
+                        let targetContainer = this.items;
+                        if (this.mode != 'Scene'){
+                            targetContainer = this.selectedItem[0]?.data; //this.items;
                             targetContainer.items = targetContainer.items || [];
                             targetContainer = targetContainer.items;
-                        }else{
-                            targetContainer = this.items
                         }
                         targetContainer.push({
                             //__type: this.mode,
@@ -337,7 +342,7 @@ export default {
         },
         select(){
             let r = Utils.adjustMinMax(this.selector);
-            this.selectedItem = this.flatItems.filter(i=>this.$refs['svg-'+i.id][0].intersect(r));
+            this.selectedItem = this.flatItems.filter(i=>this.$refs['sc-'+i.__path][0].intersect(r));
         },
         resize(){
             let r = this.$refs.svgContainer;
@@ -384,11 +389,17 @@ export default {
             stroke-dasharray: 0 calc(8 * var(--svg-scale)) 0;
             }
         }
+        text {
+            text-anchor: middle;
+            fill:rgb(var(--v-theme-on-surface));
+            stroke-width: 0;//calc( .1px * var(--svg-scale) );;
+        }
+        background-color: rgba(128,128,128,.05);
     }
     overflow: hidden;
     width: 100%;
     max-width: 100vw;
-    height: 95vh;
+    height: calc(100vh - 244px);
     &.pan {
         cursor: grab;
     }
diff --git a/src/components/SceneDesigner/Task.vue b/src/components/SceneDesigner/Task.vue
index 4b3b757..f622d30 100644
--- a/src/components/SceneDesigner/Task.vue
+++ b/src/components/SceneDesigner/Task.vue
@@ -3,18 +3,20 @@
         <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{task: true, selected}" 
             v-show="visible && parent.visible && parent.__parent.visible">
             <line :x1="vd.x1" :y1="vd.y1" :x2="parent.vd.x1" :y2="parent.vd.y1"></line>
-            <svg-icon :src="`/asset/thumb/0.webp`" :x="vd.x1" :y="vd.y1" :size="22"></svg-icon>
+            <svg-icon :src="`/asset/thumb/${modelValue.intro || 0}.webp`" :x="vd.x1" :y="vd.y1" :size="22"></svg-icon>
+            <text :x="vd.x1" :y="vd.y1" dy="44">{{ modelValue.title }}</text>
         </g>
     </teleport>
-    <v-card v-if="selected">
+    <v-card v-if="selected" :title="modelValue.title">
         <v-form class="py-4">
             <v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
+            <v-textarea :label="$l.description" v-model="modelValue.description"></v-textarea>
         </v-form>
-        <!-- <asset-selector @select="modelValue.id = $event" type="Task">
+        <asset-selector @select="assignTaskIntro" type="Descriptive">
             <template v-slot:activator="props">
-                <v-btn v-bind="props" prepend-icon="mdi-panorama-outline">Choose game object</v-btn>
+                <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose task description</v-btn>
             </template>
-        </asset-selector> -->
+        </asset-selector>
     </v-card>
 </template>
 
@@ -47,7 +49,13 @@ export default {
     modifiers: ['x1', 'y1'],
     methods:{
         intersect(v){
-            return Utils.intersectLineRect(this.vd, v);
+            return Utils.intersectPointRect([this.vd.x1, this.vd.y1], v);
+        },
+        assignTaskIntro(e){
+            this.modelValue.intro = e.id;
+            if (this.modelValue.id == this.modelValue.title){
+                this.modelValue.title = e.name
+            }
         }
     }
 }
diff --git a/src/pages/game-objects/[[id]].vue b/src/pages/game-objects/[[id]].vue
index a5e8658..649a825 100644
--- a/src/pages/game-objects/[[id]].vue
+++ b/src/pages/game-objects/[[id]].vue
@@ -2,6 +2,7 @@
     <v-card :title="id == 'add' ? $l.createGameObject : $l.editGameObject" class="container my-3">
         <v-form class="pa-4" v-model="valid">
             <v-text-field :label="$l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
+            <v-textarea :label="$l.description" v-model="object.description"></v-textarea>
             <v-select :label="$l.objectType" v-model="object.type" :items="$p.objectTypes" :rules="[rules.required]">
             </v-select>
             <v-file-input :label="$l.objectFile" v-model="object.file" :rules="[rules.requiredFile]"></v-file-input>
@@ -18,17 +19,7 @@
     </v-card>
 
     <v-card :title="$l.preview" class="container my-3" v-show="object.asset">
-        <div v-show="forRendering">
-            <div ref="target"></div>
-            <v-slide-group show-arrows>
-                <v-slide-group-item v-for="(a, i) in animations" :key="i" v-slot="{ isSelected }">
-                    <v-btn :color="isSelected ? 'primary' : undefined" class="ma-2" :prepend-icon="'mdi-' + (a.playing ? 'stop' : 'play')" rounded @click="toggleAnimation(a)">
-                        {{ a.name }}
-                    </v-btn>
-                </v-slide-group-item>
-            </v-slide-group>
-        </div>
-        <v-img v-show="!forRendering" :src="`/asset/default/${object.asset?.name}`"></v-img>
+        <AssetPreview :object="object" ref="assetPreview" autoplay></AssetPreview>
         <v-card-actions>
             <v-btn @click="captureThumbnail" v-if="forRendering" prepend-icon="mdi-camera" color="secondary">
                 {{ $l.captureThumbnail }}
@@ -38,8 +29,6 @@
 </template>
 
 <script>
-import { GameEngine } from '@/lib/gameEngine.js';
-let gameEngine = null;
 
 export default {
     data() {
@@ -50,20 +39,13 @@ export default {
                 required: v => v ? true : this.$l.fieldRequired,
                 requiredFile: v => (v?.size || this.id != 'add') ? true : this.$l.fieldRequired
             },
-            loading: false,
-            animations: []
+            loading: false
         }
     },
     async mounted() {
         if (this.id && this.id != 'add') {
             this.object = (await this.$api.gameObject.load(this.id)).data;
         }
-        gameEngine = new GameEngine();
-        await gameEngine.init(this.$refs.target);
-        await this.loadAsset();
-    },
-    beforeUnmount() {
-        gameEngine?.stop();
     },
     computed: {
         fileToUpload() {
@@ -74,7 +56,7 @@ export default {
         },
         forRendering() {
             return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render
-        }
+        },
     },
     methods: {
         async saveAndPreview(params) {
@@ -92,54 +74,18 @@ export default {
                 if (this.id == 'add') {
                     this.$router.replace({ params: { id: this.object.id } });
                 }
-                if (!params?.thumbOnly) await this.loadAsset();
+                if (!params?.thumbOnly) await this.$refs.assetPreview.loadAsset();
             } catch (err) {
                 console.error(err);
             }
             this.loading = false
         },
-        async loadAsset() {
-            if (this.forRendering) {
-                gameEngine.scene.clear();
-                if (this.object.type == 'panorama2d') {
-                    let t = await gameEngine.loadTexture(`/asset/default/${this.object.asset.name}`);
-                    t.mapping = gameEngine.$.EquirectangularReflectionMapping;
-                    gameEngine.scene.background = t;
-                    gameEngine.scene.environment = t;
-                    gameEngine.scene.add(gameEngine.camera);
-                } else {
-                    let gltf = await gameEngine.load(`/asset/default/${this.object.asset.name}`);
-                    console.debug('GLTF', gltf);
-                    this.loadedAsset = gltf;
-                    this.animations = gltf.animations.map(a => ({
-                        name: a.name, id: a.uuid
-                    }));
-                    let bb = new gameEngine.$.Box3().setFromObject(gltf.scene);
-                    gltf.scene.traverse(function (object) {
-                        object.frustumCulled = false;
-                    });
-                    gameEngine.camera.position.set(bb.max.x, bb.max.y, bb.max.z);
-                    gameEngine.controls.target.set((bb.max.x + bb.min.x) / 2, (bb.max.y + bb.min.y) / 2, (bb.max.z + bb.min.z) / 2)
-                    gameEngine.controls.update();
-                    gameEngine.scene.add(gltf.scene);
-                    //gameEngine.scene.add(gameEngine.light);
-                }
-            }
-        },
+        
         async captureThumbnail() {
-            this.object.thumb = await gameEngine.captureScreenshot();
+            this.object.thumb = await this.$refs.assetPreview.gameEngine.captureScreenshot();
             await this.saveAndPreview({ thumbOnly: true });
         },
 
-        async toggleAnimation(animation){
-            animation.playing = !animation.playing;
-            gameEngine.playAnimation(
-                gameEngine.scene, 
-                this.loadedAsset.animations.find(a=>a.uuid == animation.id),
-                animation.playing
-            );
-        },
-
         async publish() {
 
         }
diff --git a/src/pages/game-objects/list.vue b/src/pages/game-objects/list.vue
index 284a277..0cfdf31 100644
--- a/src/pages/game-objects/list.vue
+++ b/src/pages/game-objects/list.vue
@@ -7,7 +7,11 @@
                 </router-link>
                 <div class="d-flex">
                     <span class="flex-grow-1">{{ v.name }}</span>
-                    <v-icon color="primary" size="x-large" class="position-absolute top-0 left-0 ma-6">mdi-{{ $p.objectTypes.find(t=>t.value == v.type).icon }}</v-icon>
+                    <v-btn density="comfortable" size="small" :icon="`mdi-${ $p.objectTypes.find(t=>t.value == v.type).icon }`" 
+                        :color="$p.objectTypes.find(t=>t.value == v.type).color" class="position-absolute top-0 left-0 ma-6"></v-btn>
+                    <v-btn density="comfortable" size="small" icon="mdi-play-circle" @click="preview(v)" 
+                        color="light-blue-darken-4" class="position-absolute top-0 right-0 ma-6"></v-btn>
+                    
                     <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/game-objects/${v.id}`" color="primary"></v-btn>
                     <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
                 </div>
@@ -15,13 +19,16 @@
         </v-row>
     </v-container>
     <v-dialog v-model="confirmDialog" width="auto">
-        <v-card  :title="`${$l.confirmDeletionOf} ${ confirmTarget.name }?`">
+        <v-card :title="`${$l.confirmDeletionOf} ${ confirmTarget.name }?`">
             <template v-slot:actions>
                 <v-btn @click="confirmDialog = false">{{ $l.no }}</v-btn>
                 <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ $l.yes }}</v-btn>
             </template>
         </v-card>
     </v-dialog>
+    <v-dialog v-model="previewDialog" width="auto" max-width="1200">
+        <AssetPreview :object="previewObject"></AssetPreview>
+    </v-dialog>
 </template>
 
 <script>
@@ -31,7 +38,9 @@ export default {
         return {
             items: [],
             confirmDialog: false,
-            confirmTarget: null
+            confirmTarget: null,
+            previewObject: null,
+            previewDialog: false
         }
     },
     
@@ -44,6 +53,10 @@ export default {
             await this.$api.gameObject.remove(item.id);
             this.confirmDialog = false;
             this.items.splice(this.items.indexOf(item), 1);
+        },
+        preview(v){
+            this.previewObject = v;
+            this.previewDialog = true;
         }
     }
 }
diff --git a/src/pages/scenarios/[[id]].vue b/src/pages/scenarios/[[id]].vue
index a6735ab..473ed37 100644
--- a/src/pages/scenarios/[[id]].vue
+++ b/src/pages/scenarios/[[id]].vue
@@ -1,21 +1,24 @@
 <template>
     <v-container max-width="1400">
-        <v-expansion-panels v-model="panel">
-            <v-expansion-panel static :title="id == 'add' ? $l.createScenario : $l.editScenario" value="scenario">
-                <v-expansion-panel-text>
-                    <v-form class="pa-4" v-model="valid">
-                        <v-text-field :label="$l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
-                    </v-form>
-                </v-expansion-panel-text>
-            </v-expansion-panel>
-            <v-expansion-panel static title="Edit scenes" value="scenes">
-                <v-expansion-panel-text>
-                    <div>
-                        <SceneDesigner v-model="object" ref="sceneDesigner"></SceneDesigner>
-                    </div>
-                </v-expansion-panel-text>
-            </v-expansion-panel>
-        </v-expansion-panels>
+        <v-tabs v-model="panel">
+            <v-tab value="scenario">
+                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? $l.createScenario : $l.editScenario }}
+            </v-tab>
+            <v-tab value="scenes">
+                <v-icon icon="mdi-panorama-outline"></v-icon> Edit scenes
+            </v-tab>
+        </v-tabs>
+        <v-tabs-window v-model="panel">
+            <v-tabs-window-item value="scenario">
+                <v-form class="pa-4" v-model="valid">
+                    <v-text-field :label="$l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
+                    <v-textarea :label="$l.description" v-model="object.description"></v-textarea>
+                </v-form>
+            </v-tabs-window-item>
+            <v-tabs-window-item value="scenes">
+                <SceneDesigner v-model="object" ref="sceneDesigner" ></SceneDesigner>
+            </v-tabs-window-item>
+        </v-tabs-window>
         <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">Save</v-btn>
     </v-container>
 </template>
diff --git a/src/plugins/lang.js b/src/plugins/lang.js
index f8d5464..5256a76 100644
--- a/src/plugins/lang.js
+++ b/src/plugins/lang.js
@@ -3,6 +3,7 @@ const lang = {
         createGameObject: 'Добавяне на игрови обект',
         editGameObject: 'Редактиране на игрови обект',
         name: 'Име',
+        description: 'Описание',
         fieldRequired: 'Полето е задължително',
         objectType: 'Тип обект',
         objectFile: 'Файл',
@@ -11,6 +12,7 @@ const lang = {
         object3d: 'Триизмерен обект',
         object2d: 'Двумерен обект (изображение)',
         audio: 'Аудио',
+        video: 'Видео',
         player3d: 'Играч',
         saveAndPreview: 'Запис и преглед',
         preview: 'Преглед',
@@ -32,6 +34,7 @@ const lang = {
         createGameObject: 'Add game object',
         editGameObject: 'Edit game object',
         name: 'Name',
+        description: 'Description',
         fieldRequired: 'Field is required',
         objectType: 'Object type',
         objectFile: 'File',
@@ -40,6 +43,7 @@ const lang = {
         object3d: '3D object',
         object2d: '2D object (picture)',
         audio: 'Audio',
+        video: 'Video',
         player3d: 'Player',
         saveAndPreview: 'Save and preview',
         preview: 'Preview',
diff --git a/src/plugins/params.js b/src/plugins/params.js
index d19a7ab..e2091aa 100644
--- a/src/plugins/params.js
+++ b/src/plugins/params.js
@@ -8,33 +8,45 @@ export default {
                 icon: 'panorama-variant-outline',
                 title: l.panorama2d,
                 render: true,
-                type: 'Scene'
+                type: 'Scene',
+                color: 'light-blue-darken-4'
             }, {
                 value: 'environment3d',
                 icon: 'panorama-sphere-outline',
                 title: l.environment3d,
                 render: true,
-                type: 'Scene'
+                type: 'Scene',
+                color: 'teal-darken-3'
             }, {
                 value: 'object3d',
                 icon: 'video-3d',
                 title: l.object3d,
                 render: true,
-                type: 'GameObject'
+                type: 'GameObject',
+                color: 'deep-orange-darken-4'
             }, {
                 value: 'object2d',
                 icon: 'file-image-outline',
                 title: l.object2d,
-                type: 'GameObject'
+                type: 'Descriptive',
+                color: 'light-green-accent-4'
             }, {
                 value: 'player3d',
                 icon: 'human-greeting',
                 title: l.player3d,
-                render: true
+                render: true,
+                color: 'yellow-accent-4'
             }, {
                 value: 'audio',
                 icon: 'volume-medium',
-                title: l.audio
+                title: l.audio,
+                color: 'deep-purple-accent-4'
+            }, {
+                value: 'video',
+                icon: 'filmstrip',
+                title: l.video,
+                type: 'Descriptive',
+                color: 'purple-darken-3'
             }]
         }
     }
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 1ca1c60..0e16722 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -29,6 +29,9 @@ export default createVuetify({
     },
     VFileInput: {
       variant: 'outlined'
+    },
+    VTextarea: {
+      variant: 'outlined'
     }
   },
   theme: {
diff --git a/src/styles/style.scss b/src/styles/style.scss
index ca9f1cb..092db06 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -5,4 +5,8 @@
 
 .v-btn {
     text-transform: unset !important;
+}
+
+video{
+    max-width: 100%;
 }
\ No newline at end of file