justin
/
hamradio.ki5bhv.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added video playback feature

This commit is contained in:
VA3HDL 2024-06-08 16:52:03 -04:00
parent 3f77f3cf57
commit 0519e226b4
2 changed files with 97 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -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

133
hamdash.html
View File

@ -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(
aIMG[i][aIdx[i]]
);
if (isVideo(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);
img.src = imgURL(aIMG[i][aIdx[i]]);
// img.style.opacity = 0;
// img.style.transform = "translateX(-100%)";
if (isVideo(aIMG[i][aIdx[i]])) {
// Is video
vid = document.getElementById("Video" + i);
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.oncontextmenu = rotate;
newImg.ondblclick = larger;
parentDiv.appendChild(newDiv);
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">
newImg.classList.add("hidden");
if (isVideo(innerArray[1])) {
// Is a video
video.classList.remove("hidden");
source.src = innerArray[1];
source.type = getVideoType(innerArray[1]);
video.appendChild(source);
} else {
// Is an image
newImg.classList.remove("hidden");
newImg.src = imgURL(innerArray[1]);
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>
</g>
</svg>`;
newImg.src = "data:image/svg+xml;base64," + window.btoa(el);
}
};
</text>
</g>
</svg>`;
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";