Added video playback feature

README.md

@@ -45,6 +45,10 @@ As a workaround for these issues, I've tested running a local proxy on my comput
 
 If you want to upgrade to the latest version, the only file you need to update is hamdash.html (do not overwrite your config.js file.)
 
+### 2024.06.08 Changelog:
+
+- Added support to play videos (along with the images.) Some modernized sites provide .mp4 videos instead of animated GIFS. Check updated demo!
+
 ### 2024.06.05 Changelog:
 
 - Added image loading error handling

hamdash.html

@@ -15,7 +15,7 @@
       rel="stylesheet"
     />
     <title>VA3HDL Ham Radio Dashboard</title>
-<!--
+    <!--
 	Hamdash
 	License: MIT
   Copyright (c) 2024 Pablo Sabbag, VA3HDL
@@ -180,6 +180,16 @@ db   8D    88       88    88booo. 88.     db   8D
         height: 100%;
       }
 
+      .media {
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+      }
+
+      .hidden {
+        display: none;
+      }
+
       /* Style for the left menu options */
       .menu {
         display: grid;
@@ -190,7 +200,6 @@ db   8D    88       88    88booo. 88.     db   8D
         margin-top: 10vh;
         left: calc(-5.2vw - 0px);
         z-index: 2;
-        overflow: hidden;
         transition: 0.3s;
       }
 
@@ -292,6 +301,19 @@ db   8D Y8b  d8 88 `88.   .88.   88         88    db   8D
     help += "The content refreshes automatically every 5 minutes.\n";
     help += "Images rotates every 30 seconds.\n";
 
+    const videoExtensions = [".mp4", ".webm", ".ogg", ".ogv"];
+
+    function isVideo(src) {
+      return videoExtensions.some((ext) => src.includes(ext));
+    }
+
+    function getVideoType(src) {
+      if (src.includes(".mp4")) return "video/mp4";
+      if (src.includes(".webm")) return "video/webm";
+      if (src.includes(".ogg") || src.includes(".ogv")) return "video/ogg";
+      return "";
+    }
+
     // This function shows the embedded websites
     function MenuOpt(num) {
       // Stop refreshes
@@ -364,9 +386,14 @@ db   8D Y8b  d8 88 `88.   .88.   88         88    db   8D
         if (aIdx[i] > aIMG[i].length - 1) {
           aIdx[i] = 1;
         }
-        document.getElementById(targetElement.id).src = imgURL(
+        if (isVideo(aIMG[i][aIdx[i]])) {
-          aIMG[i][aIdx[i]]
+          // Is video, event is not attached to videos for now, do nothing
-        );
+        } else {
+          // Is image
+          document.getElementById(targetElement.id).src = imgURL(
+            aIMG[i][aIdx[i]]
+          );
+        }
       }
     }
 
@@ -380,23 +407,25 @@ db   8D Y8b  d8 88 `88.   .88.   88         88    db   8D
             aIdx[i] = 1;
           }
           // console.log("Image" + i, " ", aIMG[i][aIdx[i]]);
-          img = document.getElementById("Image" + i);
+          if (isVideo(aIMG[i][aIdx[i]])) {
-          img.src = imgURL(aIMG[i][aIdx[i]]);
+            // Is video
-          // img.style.opacity = 0;
+            vid = document.getElementById("Video" + i);
-          // img.style.transform = "translateX(-100%)";
+            vid.src = imgURL(aIMG[i][aIdx[i]]);
+            vid.classList.remove("hidden");
+            // Hide image
+            img = document.getElementById("Image" + i);
+            img.classList.add("hidden");
+          } else {
+            // Is image
+            img = document.getElementById("Image" + i);
+            img.src = imgURL(aIMG[i][aIdx[i]]);
+            img.classList.remove("hidden");
+            // Hide video
+            vid = document.getElementById("Video" + i);
+            vid.classList.add("hidden");
+          }
         }
       });
-      // setTimeout(() => {
-      //   aIMG.forEach(function (innerArray, i) {
-      //     if (aIMG[i].length > 2) {
-      //       console.log("Image" + i);
-      //       img = document.getElementById("Image" + i);
-      //       // img.style.opacity = 1;
-      //       // img.style.transform = "translateX(0)";
-      //       img.src = imgURL(aIMG[i][aIdx[i]]);
-      //     }
-      //   });
-      // }, 1000);
     }
 
     function start() {
@@ -427,34 +456,58 @@ db   8D Y8b  d8 88 `88.   .88.   88         88    db   8D
       aIMG.forEach(function (innerArray, index) {
         // Create a new div element
         var newDiv = document.createElement("div");
-        // Set some properties for the new div
         newDiv.className = "image-container";
+        newDiv.id = `box${index}`;
+
+        // Add video placeholder containers
+        const video = document.createElement("video");
+        video.id = `Video${index}`;
+        video.classList.add("media", "hidden");
+        video.controls = true;
+        video.autoplay = true;
+        video.loop = true;
+        const source = document.createElement("source");
+
         // Create a new img element
         var newImg = document.createElement("img");
         newImg.id = `Image${index}`;
-        newImg.src = imgURL(innerArray[1]);
+        newImg.classList.add("hidden");
-        newImg.oncontextmenu = rotate;
+
-        newImg.ondblclick = larger;
+        if (isVideo(innerArray[1])) {
-        parentDiv.appendChild(newDiv);
+          // Is a video
-        newImg.onerror = function () {
+          video.classList.remove("hidden");
-          text = "Failed to load image";
+          source.src = innerArray[1];
-          console.log(text, this.src);
+          source.type = getVideoType(innerArray[1]);
-          if (this.src.includes("?")){
+          video.appendChild(source);
-            // Retry without passing variables first to see if fixes the error
+        } else {
-            console.log("Trying without caching prevention");
+          // Is an image
-            newImg.src = this.src.split("?")[0];
+          newImg.classList.remove("hidden");
-          } else {
+          newImg.src = imgURL(innerArray[1]);
-            el = `<svg xmlns="http://www.w3.org/2000/svg" width="480" height="330">
+          newImg.oncontextmenu = rotate;
+          newImg.ondblclick = larger;
+          newImg.onerror = function () {
+            text = "Failed to load image";
+            console.log(text, this.src);
+            if (this.src.includes("?")) {
+              // Retry without passing variables first to see if fixes the error
+              console.log("Trying without caching prevention");
+              newImg.src = this.src.split("?")[0];
+            } else {
+              el = `<svg xmlns="http://www.w3.org/2000/svg" width="480" height="330">
                   <g>
                     <text style="font-size:34px; line-height:1.25; white-space:pre; fill:#ffaa00; fill-opacity:1; stroke:#ffaa00; stroke-opacity:1;">
                       <tspan x="100" y="150">${text}</tspan>
-          		      </text>
+                      </text>
-                  </g>
+                      </g>
-                </svg>`;
+                      </svg>`;
-            newImg.src = "data:image/svg+xml;base64," + window.btoa(el);
+              newImg.src = "data:image/svg+xml;base64," + window.btoa(el);
-          }
+            }
-        };
+          };
+        }
+        // append newDivs boxNN
+        newDiv.appendChild(video);
         newDiv.appendChild(newImg);
+        parentDiv.appendChild(newDiv);
         // Create a new div element for img title
         var newTtl = document.createElement("div");
         newTtl.className = "image-title";