WIP

app/static/css/widgets.css

@@ -191,6 +191,10 @@ hr.signature {
 .gallery-js video.selected {
   box-shadow: 0 0 7.5px var(--selected);
 }
+.gallery-js video::-webkit-media-controls-panel {
+  display: flex !important;
+  opacity: 1 !important;
+}
 @media screen and (max-width:1199px) {
   .gallery-js {
     height: 150px;

app/static/less/widgets.less

@@ -229,6 +229,10 @@ hr.signature {
             box-shadow: 0 0 @padding/2 var(--selected);
         }
     }
+    video::-webkit-media-controls-panel {
+        display: flex !important;
+        opacity: 1 !important;
+    }
 }
 
 .gallery-spot {

app/static/scripts/gallery.js

@@ -24,9 +24,42 @@ document.querySelectorAll(".gallery").forEach(item => {
     // });
 });
 
+document.querySelectorAll(".gallery-js > video").forEach(item => {
+    // Remove the video controls
+    item.removeAttribute('controls');
+    // Generate a thumbnail
+    item.addEventListener('loadedmetadata', e => {
+        const item = e.target;
+        item.currentTime = item.duration * 0.5;  // 10% of the video
+        item.addEventListener('loadeddata', e => {
+            const v = e.target;
+            const canvas = document.createElement("canvas");
+            canvas.width = v.videoWidth;
+            canvas.height = v.videoHeight;
+            // draw the video frame to canvas
+            const ctx = canvas.getContext("2d");
+            // ctx.drawImage(v, 0, 0, canvas.width, canvas.height);
+            // draw the play button
+            // icon = new Path2D("M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z");
+            icon = new Path2D("M10 10 h 80 v 80 h -80 Z");
+            console.log(icon);
+            ctx.fill(icon);
+            // return the canvas image as a blob
+            ctx.canvas.toBlob(
+                blob => {
+                    console.log(blob);
+                    v.setAttribute('poster', URL.createObjectURL(blob));
+                },
+                "image/png",
+                0.75 /* quality */
+            );
+        });
+    });
+});
+
 document.querySelectorAll(".gallery-js > *").forEach(item => {
+    // Add some dynamic behavior
     item.addEventListener("click", function(e) {
-        console.log(e.target);
         // Manage selected media
         if(e.target.classList.contains('selected')) {
             e.target.classList.remove('selected');
@@ -40,6 +73,8 @@ document.querySelectorAll(".gallery-js > *").forEach(item => {
         // Change content of spotlight
         let spot = e.target.parentElement.nextElementSibling;
         spot.replaceChild(e.target.cloneNode(true), spot.firstElementChild);
+        spot.firstElementChild.setAttribute('controls', "");
+
         // Open spotlight media in a new tab
         spot.firstElementChild.addEventListener("click", function(e) {
             window.open(spot.firstElementChild.src, "_blank");