add video and audio creation

src/pages/Gallery.vue

@@ -44,18 +44,26 @@
 
 
     <b-modal
-      v-if="creation && creation.iframeUrl"
+      v-if="creation && (creation.iframeUrl || creation.mediaItem)"
       :id="'modal-creation' + creation.id"
       class="modal-creation"
       static hide-footer hide-header
     >
       <template #default="{ hide, visible }">
         <button-expand expanded @click="hide()" />
-        <iframe
+        <template v-if="visible">
-          v-if="visible"
+          <iframe
-          :src="creation.iframeUrl"
+            v-if="creation.iframeUrl"
-          width="100%" height="100%"
+            :src="creation.iframeUrl"
-        />
+            width="100%" height="100%"
+          />
+          <component
+            v-else-if="creation.mediaItem"
+            :is="creation.mediaItem.is"
+            :src="creation.mediaItem.url"
+            controls
+          />
+        </template>
       </template>
     </b-modal>
 
@@ -226,6 +234,7 @@ export default {
 
     &-body {
       padding: 0;
+      display: flex;
     }
 
     &-backdrop {
@@ -241,6 +250,16 @@ export default {
       top: 0;
       right: 0;
     }
+
+    audio {
+      width: 80%;
+      margin: auto;
+    }
+
+    video {
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 </style>

src/store/nodes.js

@@ -46,6 +46,11 @@ export default {
               node.iframeUrl = node.files[0].url + '#toolbar=0&navpanes=0&statusbar=0'
             } else if (mime === 'text/html') {
               node.iframeUrl = node.files[0].url
+            } else if (['audio', 'video'].some(type => mime.includes(type))) {
+              node.mediaItem = {
+                is: mime.includes('audio') ? 'audio' : 'video',
+                src: node.files[0].url
+              }
             } else if (node.piece && node.piece.url) {
               node.iframeUrl = node.piece.url
             }