public/assets/css/componentStyle.css

@@ -14,7 +14,7 @@
 
 /* show routes */
 
-.show-image {
+.show-image, .show-video {
 	width: 100%;
 	padding-top: 1em;
 }

routes/sockets-routes.js

@@ -67,21 +67,22 @@ module.exports = (app, siofu, hostedContentPath) => {
         };
         // set the data
         const fileExtension = filePath.substring(filePath.lastIndexOf('.'));
+        console.log(fileExtension);
         let data = {
           type  : null,
           buffer: assetBuffer.toString('base64'),
         };
         switch (fileExtension) {
-          case 'jpeg' || 'jpg':
+          case '.jpeg' || '.jpg':
             data['type'] = 'image/jpeg';
             break;
-          case 'gif':
+          case '.gif':
             data['type'] = 'image/gif';
             break;
-          case 'png':
+          case '.png':
             data['type'] = 'image/png';
             break;
-          case 'mp4':
+          case '.mp4':
             data['type'] = 'video/mp4';
             break;
           default:

views/partials/asset.handlebars

@@ -1,5 +1,6 @@
 <div class="panel">
 	<div id="asset-placeholder" data-filepath="{{{filePath}}}">
+		<p> video loading... </p>
 	</div>
 </div>
 
@@ -23,7 +24,7 @@
 				break;
 			case 'video/mp4':
 				const base64video = 'data:' + data.type + ';base64,' + data.buffer;
-				document.getElementById("asset-placeholder").innerHTML = '<video class="show-video" src="' + base64video + '"/>';
+				document.getElementById("asset-placeholder").innerHTML = '<video controls class="show-video"> <source src="' + base64video + '"></video>';
 				break;
 			default: break;
 		}