Greasy Fork

Great and useful script, I made small adjustments to it to :
- reload vid on error
- min width to videos to always get a timeline
- only add video source on hover because somehow my browser was spamming requests and getting blocked



//FIXME do not put src before hover to avoid spamming requests
const video = document.createElement("video");
//video.src = mediaLink;
video.controls = true;
video.title = comment.innerText;
video.videothumbnailDisplayed = "true";
video.setAttribute("fileName", fileName);
video.setAttribute("board", board);
video.setAttribute("threadID", threadID);
video.setAttribute("postID", postID);
setStyles(video, {
maxWidth: "100%",
maxHeight: `${settings.Grid_Cell_Max_Height.value}px`,
objectFit: "contain",
cursor: "pointer",
display: "none",
minWidth: "250px", //added to get timeline on small vids
});

// videoJS stuff (not working for some reason)
// video.className = "video-js";
// video.setAttribute("data-setup", "{}");
// const source = document.createElement("source");
// source.src = mediaLink;
// source.type = "video/webm";
// video.appendChild(source);

videoThumbnail.addEventListener("click", () => {
videoThumbnail.style.display = "none";
video.style.display = "block";
if (!video.src) { video.src = mediaLink;}
video.videothumbnailDisplayed = "false";
});

// hide the video thumbnail and show the video when hovered
videoThumbnail.addEventListener("mouseenter", () => {
videoThumbnail.style.display = "none";
video.style.display = "block";
video.videothumbnailDisplayed = "false";
if (!video.src) { video.src = mediaLink;}

// Play webms without sound automatically on hover or if autoPlayWebms is true
if (!soundLink) {
if (autoPlayWebms) {
video.addEventListener("canplaythrough", () => {
video.play();
video.loop = true; // Loop webms when autoPlayWebms is true
});
} else {
if (settings.Play_Webms_On_Hover.value) {
video.addEventListener("mouseenter", () => {
if (video.error) {
video.src = mediaLink;
video.load();
//video.readyState
}
//video.load();
video.play();
});
video.addEventListener("mouseleave", () => {
video.pause();
});
}
}
}

videoContainer.appendChild(videoThumbnail);
videoContainer.appendChild(video);
});


and also added a button to quickly download a vid with its original filename


buttonDiv.appendChild(viewPostButton);
//add DL button with original filename
const dlVidButton = document.createElement("button");
dlVidButton.textContent = "Download Vid";
dlVidButton.download = fileName;
setStyles(dlVidButton, {
backgroundColor: "#1c1c1c",
color: "#d9d9d9",
padding: "5px 10px",
borderRadius: "3px",
border: "none",
cursor: "pointer",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
});
dlVidButton.addEventListener("click", () => {
console.error("clicked DL");
//dlVidLink.click();
var dl = GM_download({
url: mediaLink,
name: fileName,
onerror: (e) => { console.log(e); },
ontimeout: (e) => { console.log(e); },
saveAs: true
});
// For some reason GM_download is failing for some downloads on Chrome, but directly putting them in the URL bar is fine... So timeout for now.
window.setTimeout(() => {
dl.abort();
}, 240000);
});
buttonDiv.appendChild(dlVidButton);


Wow good ideas, I will look into them, I did notice the request thing too.

Thank you for the simple fix for the mass loading problem. Added most of these with Ver 3.85, would also appreciate if you could give a good rating!

of course no problem, thanks for the work!