☰

4chan Gallery

4chan grid-based image gallery with zoom mode support for threads that allows you to browse images, and soundposts (images with sounds, webms with sounds) along with other utility features.

目前为 2024-07-26 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         4chan Gallery
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2024-07-26 (2.6)
  5. // @description  4chan grid-based image gallery with zoom mode support for threads that allows you to browse images, and soundposts (images with sounds, webms with sounds) along with other utility features.
  6. // @author       TheDarkEnjoyer
  7. // @match        https://boards.4chan.org/*/thread/*
  8. // @match        https://boards.4chan.org/*/archive
  9. // @match        https://boards.4channel.org/*/thread/*
  10. // @match        https://boards.4channel.org/*/archive
  11. // @match        https://warosu.org/*/thread/*
  12. // @match        https://warosu.org/*/
  13. // @match        https://archived.moe/*/thread/*
  14. // @match        https://archived.moe/*/
  15. // @match        https://archive.palanq.win/*/
  16. // @match        https://archive.palanq.win/*/thread/*
  17. // @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  18. // @grant        none
  19. // @license      GNU GPLv3
  20. // ==/UserScript==
  21.  
  22. (function () {
  23.     "use strict";
  24.     // injectVideoJS();
  25.     const defaultSettings = {
  26.         Load_High_Res_Images_By_Default: {
  27.             value: false,
  28.             info: "When opening the gallery, load high quality images by default (no thumbnails)",
  29.         },
  30.     };
  31.  
  32.     let threadURL = window.location.href;
  33.     let lastScrollPosition = 0;
  34.     let gallerySize = { width: 0, height: 0 };
  35.  
  36.     // store settings in local storage
  37.     if (!localStorage.getItem("gallerySettings")) {
  38.         localStorage.setItem("gallerySettings", JSON.stringify(defaultSettings));
  39.     }
  40.     let settings = JSON.parse(localStorage.getItem("gallerySettings"));
  41.  
  42.     function setStyles(element, styles) {
  43.         for (const property in styles) {
  44.             element.style[property] = styles[property];
  45.         }
  46.     }
  47.  
  48.     function getPosts(websiteUrl, doc) {
  49.         switch (websiteUrl) {
  50.             case "warosu.org":
  51.                 return doc.querySelectorAll(".comment");
  52.             case "archived.moe":
  53.             case "archive.palanq.win":
  54.                 return doc.querySelectorAll(".has_image");
  55.             case "boards.4chan.org":
  56.             case "boards.4channel.org":
  57.             default:
  58.                 return doc.querySelectorAll(".postContainer");
  59.         }
  60.     }
  61.  
  62.     function getDocument(thread, threadURL) {
  63.         return new Promise((resolve, reject) => {
  64.             if (thread === threadURL) {
  65.                 resolve(document);
  66.             } else {
  67.                 fetch(thread)
  68.                     .then((response) => response.text())
  69.                     .then((html) => {
  70.                         const parser = new DOMParser();
  71.                         const doc = parser.parseFromString(html, "text/html");
  72.                         resolve(doc);
  73.                     })
  74.                     .catch((error) => {
  75.                         reject(error);
  76.                     });
  77.             }
  78.         });
  79.     }
  80.  
  81.     function injectVideoJS() {
  82.         const link = document.createElement("link");
  83.         link.href = "https://vjs.zencdn.net/8.10.0/video-js.css";
  84.         link.rel = "stylesheet";
  85.         document.head.appendChild(link);
  86.  
  87.         // theme
  88.         const theme = document.createElement("link");
  89.         theme.href = "https://unpkg.com/@videojs/themes@1/dist/city/index.css";
  90.         theme.rel = "stylesheet";
  91.         document.head.appendChild(theme);
  92.  
  93.         const script = document.createElement("script");
  94.         script.src = "https://vjs.zencdn.net/8.10.0/video.min.js";
  95.         document.body.appendChild(script);
  96.         ("VideoJS injected successfully!");
  97.     }
  98.  
  99.     const loadButton = () => {
  100.         const isArchivePage = window.location.pathname.includes("/archive");
  101.  
  102.         const button = document.createElement("button");
  103.         button.textContent = "Open Image Gallery";
  104.         button.id = "openImageGallery";
  105.         setStyles(button, {
  106.             position: "fixed",
  107.             bottom: "20px",
  108.             right: "20px",
  109.             zIndex: "1000",
  110.             backgroundColor: "#1c1c1c",
  111.             color: "#d9d9d9",
  112.             padding: "10px 20px",
  113.             borderRadius: "5px",
  114.             border: "none",
  115.             cursor: "pointer",
  116.             boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  117.         });
  118.  
  119.         const openImageGallery = () => {
  120.             const gallery = document.createElement("div");
  121.             gallery.id = "imageGallery";
  122.             setStyles(gallery, {
  123.                 position: "fixed",
  124.                 top: "0",
  125.                 left: "0",
  126.                 width: "100%",
  127.                 height: "100%",
  128.                 backgroundColor: "rgba(0, 0, 0, 0.8)",
  129.                 display: "flex",
  130.                 justifyContent: "center",
  131.                 alignItems: "center",
  132.                 zIndex: "9999",
  133.             });
  134.  
  135.             const gridContainer = document.createElement("div");
  136.             setStyles(gridContainer, {
  137.                 display: "grid",
  138.                 gridTemplateColumns: `repeat(3, 1fr)`,
  139.                 gridTemplateRows: `repeat(2, 1fr)`,
  140.                 gap: "10px",
  141.                 padding: "20px",
  142.                 backgroundColor: "#1c1c1c",
  143.                 color: "#d9d9d9",
  144.                 maxWidth: "80%",
  145.                 maxHeight: "80%",
  146.                 overflowY: "auto",
  147.                 resize: "both",
  148.                 overflow: "auto",
  149.                 border: "1px solid #d9d9d9",
  150.             });
  151.  
  152.             // Restore the previous grid container size
  153.             if (gallerySize.width > 0 && gallerySize.height > 0) {
  154.                 gridContainer.style.width = `${gallerySize.width}px`;
  155.                 gridContainer.style.height = `${gallerySize.height}px`;
  156.             }
  157.  
  158.             let mode = "all"; // Default mode is "all"
  159.             let autoPlayWebms = false; // Default auto play webms without sound is false
  160.  
  161.             // top left corner of the screen
  162.             const mediaTypeButtonContainer = document.createElement("div");
  163.             setStyles(mediaTypeButtonContainer, {
  164.                 position: "absolute",
  165.                 top: "10px",
  166.                 left: "10px",
  167.                 display: "flex",
  168.                 gap: "10px",
  169.             });
  170.  
  171.             // Toggle mode button
  172.             const toggleModeButton = document.createElement("button");
  173.             toggleModeButton.textContent = "Toggle Mode (All)";
  174.             setStyles(toggleModeButton, {
  175.                 backgroundColor: "#1c1c1c",
  176.                 color: "#d9d9d9",
  177.                 padding: "10px 20px",
  178.                 borderRadius: "5px",
  179.                 border: "none",
  180.                 cursor: "pointer",
  181.                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  182.             });
  183.             toggleModeButton.addEventListener("click", () => {
  184.                 mode = mode === "all" ? "webm" : "all";
  185.                 toggleModeButton.textContent = `Toggle Mode (${mode === "all" ? "All" : "Webm & Images with Sound"
  186.                     })`;
  187.                 gridContainer.innerHTML = ""; // Clear the grid
  188.                 loadPosts(mode); // Reload posts based on the new mode
  189.             });
  190.  
  191.             // Toggle auto play webms button
  192.             const toggleAutoPlayButton = document.createElement("button");
  193.             toggleAutoPlayButton.textContent = "Auto Play Webms without Sound";
  194.             setStyles(toggleAutoPlayButton, {
  195.                 backgroundColor: "#1c1c1c",
  196.                 color: "#d9d9d9",
  197.                 padding: "10px 20px",
  198.                 borderRadius: "5px",
  199.                 border: "none",
  200.                 cursor: "pointer",
  201.                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  202.             });
  203.             toggleAutoPlayButton.addEventListener("click", () => {
  204.                 autoPlayWebms = !autoPlayWebms;
  205.                 toggleAutoPlayButton.textContent = autoPlayWebms
  206.                     ? "Stop Auto Play Webms"
  207.                     : "Auto Play Webms without Sound";
  208.                 gridContainer.innerHTML = ""; // Clear the grid
  209.                 loadPosts(mode); // Reload posts based on the new mode and auto play setting
  210.             });
  211.             mediaTypeButtonContainer.appendChild(toggleModeButton);
  212.             mediaTypeButtonContainer.appendChild(toggleAutoPlayButton);
  213.             gallery.appendChild(mediaTypeButtonContainer);
  214.  
  215.             // settings button on the top right corner of the screen
  216.             const settingsButton = document.createElement("button");
  217.             settingsButton.id = "settingsButton";
  218.             settingsButton.textContent = "Settings";
  219.             setStyles(settingsButton, {
  220.                 position: "absolute",
  221.                 top: "20px",
  222.                 right: "20px",
  223.                 backgroundColor: "#007bff", // Primary color
  224.                 color: "#fff",
  225.                 padding: "10px 20px",
  226.                 borderRadius: "5px",
  227.                 border: "none",
  228.                 cursor: "pointer",
  229.                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  230.                 transition: "background-color 0.3s ease",
  231.             });
  232.             settingsButton.addEventListener("click", () => {
  233.                 const settingsContainer = document.createElement("div");
  234.                 settingsContainer.id = "settingsContainer";
  235.                 setStyles(settingsContainer, {
  236.                     position: "fixed",
  237.                     top: "0",
  238.                     left: "0",
  239.                     width: "100%",
  240.                     height: "100%",
  241.                     backgroundColor: "rgba(0, 0, 0, 0.8)",
  242.                     display: "flex",
  243.                     justifyContent: "center",
  244.                     alignItems: "center",
  245.                     zIndex: "9999",
  246.                     animation: "fadeIn 0.3s ease",
  247.                 });
  248.  
  249.                 const settingsBox = document.createElement("div");
  250.                 setStyles(settingsBox, {
  251.                     backgroundColor: "#000000", // Background color
  252.                     color: "#ffffff", // Text color
  253.                     padding: "30px",
  254.                     borderRadius: "10px",
  255.                     border: "1px solid #6c757d", // Secondary color
  256.                     maxWidth: "80%",
  257.                     maxHeight: "80%",
  258.                     overflowY: "auto",
  259.                     boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
  260.                 });
  261.  
  262.                 const settingsTitle = document.createElement("h2");
  263.                 settingsTitle.id = "settingsTitle";
  264.                 settingsTitle.textContent = "Settings";
  265.                 setStyles(settingsTitle, {
  266.                     textAlign: "center",
  267.                     marginBottom: "20px",
  268.                 });
  269.  
  270.                 const settingsList = document.createElement("ul");
  271.                 settingsList.id = "settingsList";
  272.                 setStyles(settingsList, {
  273.                     listStyleType: "none",
  274.                     padding: "0",
  275.                     margin: "0",
  276.                 });
  277.  
  278.                 // include default settings as existing settings inside the input fields
  279.                 // have an icon next to the setting that explains what the setting does
  280.                 for (const setting in settings) {
  281.                     const settingItem = document.createElement("li");
  282.                     setStyles(settingItem, {
  283.                         display: "flex",
  284.                         alignItems: "center",
  285.                         marginBottom: "15px",
  286.                     });
  287.  
  288.                     const settingLabel = document.createElement("label");
  289.                     settingLabel.textContent = setting.replace(/_/g, " ");
  290.                     settingLabel.title = settings[setting].info;
  291.                     setStyles(settingLabel, {
  292.                         flex: "1",
  293.                         display: "flex",
  294.                         alignItems: "center",
  295.                     });
  296.  
  297.                     const settingIcon = document.createElement("span");
  298.                     settingIcon.className = "material-icons-outlined";
  299.                     settingIcon.textContent = settings[setting].icon;
  300.                     settingIcon.style.marginRight = "10px";
  301.                     settingLabel.prepend(settingIcon);
  302.  
  303.                     settingItem.appendChild(settingLabel);
  304.  
  305.                     const settingInput = document.createElement("input");
  306.                     const settingValueType = typeof defaultSettings[setting].value;
  307.                     if (settingValueType === "boolean") {
  308.                         settingInput.type = "checkbox";
  309.                         settingInput.checked = settings[setting].value;
  310.                     } else if (settingValueType === "number") {
  311.                         settingInput.type = "number";
  312.                         settingInput.value = settings[setting].value;
  313.                     } else {
  314.                         settingInput.type = "text";
  315.                         settingInput.value = settings[setting].value;
  316.                     }
  317.                     setStyles(settingInput, {
  318.                         padding: "8px 12px",
  319.                         borderRadius: "5px",
  320.                         border: "1px solid #6c757d", // Secondary color
  321.                         flex: "2",
  322.                     });
  323.                     settingInput.addEventListener("focus", () => {
  324.                         setStyles(settingInput, {
  325.                             borderColor: "#007bff", // Primary color
  326.                             boxShadow: "0 0 0 2px rgba(0, 123, 255, 0.25)",
  327.                             outline: "none",
  328.                         });
  329.                     });
  330.                     settingInput.addEventListener("blur", () => {
  331.                         setStyles(settingInput, {
  332.                             borderColor: "#6c757d", // Secondary color
  333.                             boxShadow: "none",
  334.                         });
  335.                     });
  336.  
  337.                     if (settingValueType === "boolean") {
  338.                         settingInput.style.marginRight = "10px";
  339.                     }
  340.  
  341.                     settingItem.appendChild(settingInput);
  342.                     settingsList.appendChild(settingItem);
  343.                 }
  344.  
  345.                 const saveButton = document.createElement("button");
  346.                 saveButton.id = "saveButton";
  347.                 saveButton.textContent = "Save";
  348.                 setStyles(saveButton, {
  349.                     backgroundColor: "#007bff", // Primary color
  350.                     color: "#fff",
  351.                     padding: "10px 20px",
  352.                     borderRadius: "5px",
  353.                     border: "none",
  354.                     cursor: "pointer",
  355.                     boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  356.                     transition: "background-color 0.3s ease",
  357.                     marginRight: "10px",
  358.                 });
  359.                 saveButton.addEventListener("click", () => {
  360.                     const newSettings = defaultSettings;
  361.                     const inputs = document.querySelectorAll("#settingsList input");
  362.                     inputs.forEach((input) => {
  363.                         const settingName = input.previousSibling.textContent.replace(
  364.                             / /g,
  365.                             "_"
  366.                         );
  367.                         const settingValue =
  368.                             typeof defaultSettings[settingName].value === "boolean"
  369.                                 ? input.checked
  370.                                 : input.value;
  371.                         newSettings[settingName].value = settingValue;
  372.                     });
  373.                     localStorage.setItem("gallerySettings", JSON.stringify(newSettings));
  374.                     settings = newSettings;
  375.                     settingsContainer.remove();
  376.                     gridContainer.innerHTML = ""; // Clear the grid
  377.                     loadPosts(mode); // Reload posts based on the new settings
  378.                 });
  379.  
  380.                 // Close button
  381.                 const closeButton = document.createElement("button");
  382.                 closeButton.id = "closeButton";
  383.                 closeButton.textContent = "Close";
  384.                 setStyles(closeButton, {
  385.                     backgroundColor: "#007bff", // Primary color
  386.                     color: "#fff",
  387.                     padding: "10px 20px",
  388.                     borderRadius: "5px",
  389.                     border: "none",
  390.                     cursor: "pointer",
  391.                     boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  392.                     transition: "background-color 0.3s ease",
  393.                 });
  394.                 closeButton.addEventListener("click", () => {
  395.                     settingsContainer.remove();
  396.                 });
  397.  
  398.                 settingsBox.appendChild(settingsTitle);
  399.                 settingsBox.appendChild(settingsList);
  400.                 settingsBox.appendChild(saveButton);
  401.                 settingsBox.appendChild(closeButton);
  402.                 settingsContainer.appendChild(settingsBox);
  403.                 gallery.appendChild(settingsContainer);
  404.             });
  405.  
  406.             // Hover effect for settings button
  407.             settingsButton.addEventListener("mouseenter", () => {
  408.                 settingsButton.style.backgroundColor = "#0056b3";
  409.             });
  410.             settingsButton.addEventListener("mouseleave", () => {
  411.                 settingsButton.style.backgroundColor = "#007bff";
  412.             });
  413.  
  414.             gallery.appendChild(settingsButton);
  415.  
  416.             const loadPosts = (mode) => {
  417.                 const checkedThreads = isArchivePage
  418.                     ? // Get all checked threads in the archive page or the current link if it's not an archive page
  419.                     Array.from(
  420.                         document.querySelectorAll(
  421.                             ".flashListing input[type='checkbox']:checked"
  422.                         )
  423.                     ).map((checkbox) => {
  424.                         let archiveSite =
  425.                             checkbox.parentNode.parentNode.querySelector("a").href;
  426.                         return archiveSite;
  427.                     })
  428.                     : [threadURL];
  429.  
  430.                 const loadPostsFromThread = (thread) => {
  431.                     // get the website url without the protocol and next slash
  432.                     const websiteUrl = thread.replace(/(^\w+:|^)\/\//, "").split("/")[0];
  433.  
  434.                     // const board = thread.split("/thread/")[0].split("/").pop();
  435.                     // const threadNo = `${parseInt(thread.split("thread/").pop())}`
  436.                     getDocument(thread, threadURL).then((doc) => {
  437.                         let posts;
  438.  
  439.                         // use a case statement to deal with different websites
  440.                         posts = getPosts(websiteUrl, doc);
  441.  
  442.                         posts.forEach((post) => {
  443.                             let mediaLinkFlag = false;
  444.                             let board;
  445.                             let threadID;
  446.                             let postID;
  447.                             let postURL;
  448.                             let thumbnailUrl;
  449.                             let mediaLink;
  450.                             let fileName;
  451.                             let comment;
  452.  
  453.                             let isVideo;
  454.                             let isImage;
  455.                             let soundLink;
  456.                             let encodedSoundPostLink;
  457.                             let temp;
  458.  
  459.                             // case statement for different websites
  460.                             switch (websiteUrl) {
  461.                                 case "warosu.org":
  462.                                     let thumbnailElement = post.querySelector("img");
  463.  
  464.                                     fileName = post
  465.                                         .querySelector(".fileinfo")
  466.                                         ?.innerText.split(", ")[2];
  467.                                     thumbnailUrl = thumbnailElement?.src;
  468.                                     mediaLink = thumbnailElement?.parentNode.href;
  469.                                     comment = post.querySelector("blockquote");
  470.  
  471.                                     threadID = post.querySelector(".js").href.match(/thread\/(\d+)/)[1];
  472.                                     postID = post.id.replace("pc", "").replace("p", "");
  473.                                     break;
  474.                                 case "archived.moe":
  475.                                 case "archive.palanq.win":
  476.                                     thumbnailUrl = post.querySelector(".post_image").src;
  477.                                     mediaLink = post.querySelector(".thread_image_link").href;
  478.                                     fileName = post.querySelector(
  479.                                         ".post_file_filename"
  480.                                     ).title;
  481.                                     comment = post.querySelector(".text");
  482.                                     threadID = post.querySelector(".post_data > a").href.match(
  483.                                         /thread\/(\d+)/
  484.                                     )[1];
  485.                                     postID = post.id
  486.                                     break;
  487.                                 case "boards.4chan.org":
  488.                                 case "boards.4channel.org":
  489.                                 default:
  490.                                     if (!post.querySelector(".fileText")) {
  491.                                         return; // Skip posts without media links
  492.                                     }
  493.                                     // if they have 4chanX installed, there will be a fileText-orignal class
  494.                                     if (post.querySelector(".download-button")) {
  495.                                         temp = post.querySelector(".download-button");
  496.                                         mediaLink = temp.href;
  497.                                         fileName = temp.download;
  498.                                     } else {
  499.                                         if (post.classList.contains("opContainer")) {
  500.                                             mediaLink = post.querySelector(".fileText a");
  501.                                             temp = mediaLink;
  502.                                         } else {
  503.                                             mediaLink = post.querySelector(".fileText");
  504.                                             temp = mediaLink.querySelector("a");
  505.                                         }
  506.                                         if (mediaLink.title === "") {
  507.                                             if (temp.title === "") {
  508.                                                 fileName = temp.innerText;
  509.                                             } else {
  510.                                                 fileName = temp.title;
  511.                                             }
  512.                                         } else {
  513.                                             fileName = mediaLink.title;
  514.                                         }
  515.                                         mediaLink = temp.href;
  516.                                     }
  517.  
  518.                                     thumbnailUrl = post.querySelector(".fileThumb img")?.src;
  519.                                     comment = post.querySelector(".postMessage");
  520.  
  521.                                     threadID = thread.match(/thread\/(\d+)/)[1];
  522.                                     postID = post.id.replace("pc", "").replace("p", "");
  523.                             }
  524.  
  525.                             if (mediaLink) {
  526.                                 isVideo = mediaLink.includes(".webm");
  527.                                 isImage =
  528.                                     mediaLink.includes(".jpg") ||
  529.                                     mediaLink.includes(".png") ||
  530.                                     mediaLink.includes(".gif");
  531.                                 soundLink = fileName.match(/\[sound=(.+?)\]/);
  532.                                 mediaLinkFlag = true;
  533.                             } else {
  534.                                 return; // Skip posts without media links
  535.                             }
  536.  
  537.                             // replace the "#pcXXXXXXX" or "#pXXXXXXX" with an empty string to get the actual thread url
  538.                             if (thread.includes("#")) {
  539.                                 postURL = thread.replace(/#p\d+/, "");
  540.                                 postURL = postURL.replace(/#pc\d+/, "");
  541.                             } else {
  542.                                 postURL = thread;
  543.                             }
  544.  
  545.                             // post info (constant)
  546.                             board = thread.match(/\/\/[^\/]+\/([^\/]+)/)[1];
  547.                             if (soundLink) {
  548.                                 encodedSoundPostLink = `https://4chan.mahdeensky.top/${board}/thread/${threadID}/${postID}`;
  549.                             }
  550.  
  551.                             if (mediaLinkFlag) {
  552.                                 // Check if the post should be loaded based on the mode
  553.                                 if (
  554.                                     mode === "all" ||
  555.                                     (mode === "webm" && (isVideo || (isImage && soundLink)))
  556.                                 ) {
  557.                                     const cell = document.createElement("div");
  558.                                     setStyles(cell, {
  559.                                         border: "1px solid #d9d9d9",
  560.                                         position: "relative",
  561.                                     });
  562.  
  563.                                     const buttonDiv = document.createElement("div");
  564.                                     setStyles(buttonDiv, {
  565.                                         display: "flex",
  566.                                         justifyContent: "space-between",
  567.                                         alignItems: "center",
  568.                                         padding: "5px",
  569.                                     });
  570.  
  571.                                     if (isVideo) {
  572.                                         const videoContainer = document.createElement("div");
  573.                                         setStyles(videoContainer, {
  574.                                             position: "relative",
  575.                                             display: "flex",
  576.                                             justifyContent: "center",
  577.                                         });
  578.  
  579.                                         const videoThumbnail = document.createElement("img");
  580.                                         videoThumbnail.src = thumbnailUrl;
  581.                                         videoThumbnail.alt = "Video Thumbnail";
  582.                                         setStyles(videoThumbnail, {
  583.                                             width: "100%",
  584.                                             maxHeight: "200px",
  585.                                             objectFit: "contain",
  586.                                             cursor: "pointer",
  587.                                         });
  588.                                         videoThumbnail.loading = "lazy";
  589.  
  590.                                         const video = document.createElement("video");
  591.                                         video.src = mediaLink;
  592.                                         video.muted = true;
  593.                                         video.controls = true;
  594.                                         video.title = comment.innerText;
  595.                                         video.videothumbnailDisplayed = "true";
  596.                                         video.setAttribute("fileName", fileName);
  597.                                         video.setAttribute("board", board);
  598.                                         video.setAttribute("threadID", threadID);
  599.                                         video.setAttribute("postID", postID);
  600.                                         setStyles(video, {
  601.                                             maxWidth: "100%",
  602.                                             maxHeight: "200px",
  603.                                             objectFit: "contain",
  604.                                             cursor: "pointer",
  605.                                             display: "none",
  606.                                         });
  607.  
  608.                                         // videoJS stuff (not working for some reason)
  609.                                         // video.className = "video-js";
  610.                                         // video.setAttribute("data-setup", "{}");
  611.                                         // const source = document.createElement("source");
  612.                                         // source.src = mediaLink;
  613.                                         // source.type = "video/webm";
  614.                                         // video.appendChild(source);
  615.  
  616.                                         videoThumbnail.addEventListener("click", () => {
  617.                                             videoThumbnail.style.display = "none";
  618.                                             video.style.display = "block";
  619.                                             video.videothumbnailDisplayed = "false";
  620.                                             video.load();
  621.                                         });
  622.  
  623.                                         // hide the video thumbnail and show the video when hovered
  624.                                         videoThumbnail.addEventListener("mouseenter", () => {
  625.                                             videoThumbnail.style.display = "none";
  626.                                             video.style.display = "block";
  627.                                             video.videothumbnailDisplayed = "false";
  628.                                             video.load();
  629.                                         });
  630.  
  631.                                         // Play webms without sound automatically on hover or if autoPlayWebms is true
  632.                                         if (!soundLink) {
  633.                                             if (autoPlayWebms) {
  634.                                                 video.addEventListener("canplaythrough", () => {
  635.                                                     video.play();
  636.                                                     video.loop = true; // Loop webms when autoPlayWebms is true
  637.                                                 });
  638.                                             } else {
  639.                                                 video.addEventListener("mouseenter", () => {
  640.                                                     video.play();
  641.                                                 });
  642.                                                 video.addEventListener("mouseleave", () => {
  643.                                                     video.pause();
  644.                                                 });
  645.                                             }
  646.                                         }
  647.  
  648.                                         videoContainer.appendChild(videoThumbnail);
  649.                                         videoContainer.appendChild(video);
  650.  
  651.                                         if (soundLink) {
  652.                                             // video.preload = "none"; // Disable video preload for better performance
  653.  
  654.                                             const audio = document.createElement("audio");
  655.                                             audio.src = decodeURIComponent(
  656.                                                 soundLink[1].startsWith("http")
  657.                                                     ? soundLink[1]
  658.                                                     : `https://${soundLink[1]}`
  659.                                             );
  660.                                             // add attribute to the audio element with the encoded soundpost link
  661.                                             audio.setAttribute(
  662.                                                 "encodedSoundPostLink",
  663.                                                 encodedSoundPostLink
  664.                                             );
  665.                                             videoContainer.appendChild(audio);
  666.  
  667.                                             const resetButton = document.createElement("button");
  668.                                             resetButton.textContent = "Reset";
  669.                                             setStyles(resetButton, {
  670.                                                 backgroundColor: "#1c1c1c",
  671.                                                 color: "#d9d9d9",
  672.                                                 padding: "5px 10px",
  673.                                                 borderRadius: "3px",
  674.                                                 border: "none",
  675.                                                 cursor: "pointer",
  676.                                                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  677.                                             });
  678.                                             resetButton.addEventListener("click", () => {
  679.                                                 video.currentTime = 0;
  680.                                                 audio.currentTime = 0;
  681.                                             });
  682.                                             buttonDiv.appendChild(resetButton);
  683.  
  684.                                             // html5 video play
  685.                                             video.onplay = (event) => {
  686.                                                 audio.play();
  687.                                             };
  688.  
  689.                                             video.onpause = (event) => {
  690.                                                 audio.pause();
  691.                                             };
  692.  
  693.                                             let lastVideoTime = 0;
  694.                                             // Sync audio with video on timeupdate event only if the difference is 2 seconds or more
  695.                                             video.addEventListener("timeupdate", () => {
  696.                                                 if (Math.abs(video.currentTime - lastVideoTime) >= 2) {
  697.                                                     audio.currentTime = video.currentTime;
  698.                                                     lastVideoTime = video.currentTime;
  699.                                                 }
  700.                                                 lastVideoTime = video.currentTime;
  701.                                             });
  702.                                         }
  703.  
  704.                                         cell.appendChild(videoContainer);
  705.                                     } else if (isImage) {
  706.                                         const imageContainer = document.createElement("div");
  707.                                         setStyles(imageContainer, {
  708.                                             position: "relative",
  709.                                             display: "flex",
  710.                                             justifyContent: "center",
  711.                                             alignItems: "center",
  712.                                         });
  713.  
  714.                                         const image = document.createElement("img");
  715.                                         image.src = thumbnailUrl;
  716.                                         if (settings.Load_High_Res_Images_By_Default.value) {
  717.                                             image.src = mediaLink;
  718.                                         }
  719.                                         if (mediaLink.includes(".gif")) {
  720.                                             image.src = mediaLink;
  721.                                         }
  722.                                         image.setAttribute("fileName", fileName);
  723.                                         image.setAttribute("actualSrc", mediaLink);
  724.                                         image.setAttribute("thumbnailUrl", thumbnailUrl);
  725.                                         image.setAttribute("board", board);
  726.                                         image.setAttribute("threadID", threadID);
  727.                                         image.setAttribute("postID", postID);
  728.                                         setStyles(image, {
  729.                                             maxWidth: "100%",
  730.                                             maxHeight: "200px",
  731.                                             objectFit: "contain",
  732.                                             cursor: "pointer",
  733.                                         });
  734.  
  735.                                         let createDarkenBackground = () => {
  736.                                             const background = document.createElement("div");
  737.                                             background.id = "darkenBackground";
  738.                                             setStyles(background, {
  739.                                                 position: "fixed",
  740.                                                 top: "0",
  741.                                                 left: "0",
  742.                                                 width: "100%",
  743.                                                 height: "100%",
  744.                                                 backgroundColor: "rgba(0, 0, 0, 0.3)",
  745.                                                 backdropFilter: "blur(5px)",
  746.                                                 zIndex: "9999",
  747.                                             });
  748.                                             return background;
  749.                                         };
  750.  
  751.                                         let zoomImage = () => {
  752.                                             // have the image pop up centered in front of the screen so that it fills about 80% of the screen
  753.                                             image.style = "";
  754.                                             image.src = mediaLink;
  755.                                             setStyles(image, {
  756.                                                 position: "fixed",
  757.                                                 top: "50%",
  758.                                                 left: "50%",
  759.                                                 transform: "translate(-50%, -50%)",
  760.                                                 zIndex: "10000",
  761.                                                 height: "80%",
  762.                                                 width: "80%",
  763.                                                 objectFit: "contain",
  764.                                                 cursor: "pointer",
  765.                                             });
  766.  
  767.                                             // darken and blur the background behind the image without affecting the image
  768.                                             const background = createDarkenBackground();
  769.                                             gallery.appendChild(background);
  770.  
  771.                                             // create a container for the buttons, number, and download buttons (even space between them)
  772.                                             // position: fixed; bottom: 10px; display: flex; flex-direction: row; justify-content: space-around; z-index: 10000; width: 100%; margin:auto;
  773.                                             const bottomContainer = document.createElement("div");
  774.                                             setStyles(bottomContainer, {
  775.                                                 position: "fixed",
  776.                                                 bottom: "10px",
  777.                                                 display: "flex",
  778.                                                 flexDirection: "row",
  779.                                                 justifyContent: "space-around",
  780.                                                 zIndex: "10000",
  781.                                                 width: "100%",
  782.                                                 margin: "auto",
  783.                                             });
  784.                                             background.appendChild(bottomContainer);
  785.  
  786.                                             // buttons on the bottom left of the screen for reverse image search (SauceNAO, Google Lens, Yandex)
  787.                                             const buttonContainer = document.createElement("div");
  788.                                             setStyles(buttonContainer, {
  789.                                                 display: "flex",
  790.                                                 gap: "10px",
  791.                                             });
  792.                                             buttonContainer.setAttribute("mediaLink", mediaLink);
  793.  
  794.                                             const sauceNAOButton = document.createElement("button");
  795.                                             sauceNAOButton.textContent = "SauceNAO";
  796.                                             setStyles(sauceNAOButton, {
  797.                                                 backgroundColor: "#1c1c1c",
  798.                                                 color: "#d9d9d9",
  799.                                                 padding: "5px 10px",
  800.                                                 borderRadius: "3px",
  801.                                                 border: "none",
  802.                                                 cursor: "pointer",
  803.                                             });
  804.                                             sauceNAOButton.addEventListener("click", () => {
  805.                                                 window.open(
  806.                                                     `https://saucenao.com/search.php?url=${encodeURIComponent(
  807.                                                         buttonContainer.getAttribute("mediaLink")
  808.                                                     )}`
  809.                                                 );
  810.                                             });
  811.                                             buttonContainer.appendChild(sauceNAOButton);
  812.  
  813.                                             const googleLensButton = document.createElement("button");
  814.                                             googleLensButton.textContent = "Google Lens";
  815.                                             setStyles(googleLensButton, {
  816.                                                 backgroundColor: "#1c1c1c",
  817.                                                 color: "#d9d9d9",
  818.                                                 padding: "5px 10px",
  819.                                                 borderRadius: "3px",
  820.                                                 border: "none",
  821.                                                 cursor: "pointer",
  822.                                                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  823.                                             });
  824.                                             googleLensButton.addEventListener("click", () => {
  825.                                                 window.open(
  826.                                                     `https://lens.google.com/uploadbyurl?url=${encodeURIComponent(
  827.                                                         buttonContainer.getAttribute("mediaLink")
  828.                                                     )}`
  829.                                                 );
  830.                                             });
  831.                                             buttonContainer.appendChild(googleLensButton);
  832.  
  833.                                             const yandexButton = document.createElement("button");
  834.                                             yandexButton.textContent = "Yandex";
  835.                                             setStyles(yandexButton, {
  836.                                                 backgroundColor: "#1c1c1c",
  837.                                                 color: "#d9d9d9",
  838.                                                 padding: "5px 10px",
  839.                                                 borderRadius: "3px",
  840.                                                 border: "none",
  841.                                                 cursor: "pointer",
  842.                                                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  843.                                             });
  844.                                             yandexButton.addEventListener("click", () => {
  845.                                                 window.open(
  846.                                                     `https://yandex.com/images/search?rpt=imageview&url=${encodeURIComponent(
  847.                                                         buttonContainer.getAttribute("mediaLink")
  848.                                                     )}`
  849.                                                 );
  850.                                             });
  851.                                             buttonContainer.appendChild(yandexButton);
  852.  
  853.                                             bottomContainer.appendChild(buttonContainer);
  854.  
  855.                                             // download container for video/img and audio
  856.                                             const downloadButtonContainer =
  857.                                                 document.createElement("div");
  858.                                             setStyles(downloadButtonContainer, {
  859.                                                 display: "flex",
  860.                                                 gap: "10px",
  861.                                             });
  862.                                             bottomContainer.appendChild(downloadButtonContainer);
  863.  
  864.                                             const viewPostButton = document.createElement("a");
  865.                                             viewPostButton.textContent = "View Post";
  866.                                             viewPostButton.href = `https://boards.4chan.org/${board}/thread/${threadID}#p${postID}`;
  867.                                             setStyles(viewPostButton, {
  868.                                                 backgroundColor: "#1c1c1c",
  869.                                                 color: "#d9d9d9",
  870.                                                 padding: "5px 10px",
  871.                                                 borderRadius: "3px",
  872.                                                 border: "none",
  873.                                                 cursor: "pointer",
  874.                                                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  875.                                             });
  876.                                             downloadButtonContainer.appendChild(viewPostButton);
  877.  
  878.                                             const downloadButton = document.createElement("a");
  879.                                             downloadButton.textContent = "Download Video/Image";
  880.                                             downloadButton.href = mediaLink;
  881.                                             downloadButton.download = fileName;
  882.                                             downloadButton.target = "_blank";
  883.                                             setStyles(downloadButton, {
  884.                                                 backgroundColor: "#1c1c1c",
  885.                                                 color: "#d9d9d9",
  886.                                                 padding: "5px 10px",
  887.                                                 borderRadius: "3px",
  888.                                                 border: "none",
  889.                                                 cursor: "pointer",
  890.                                                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  891.                                             });
  892.                                             downloadButtonContainer.appendChild(downloadButton);
  893.  
  894.                                             const audioDownloadButton = document.createElement("a");
  895.                                             audioDownloadButton.textContent = "Download Audio";
  896.                                             audioDownloadButton.target = "_blank";
  897.                                             setStyles(audioDownloadButton, {
  898.                                                 backgroundColor: "#1c1c1c",
  899.                                                 color: "#d9d9d9",
  900.                                                 padding: "5px 10px",
  901.                                                 borderRadius: "3px",
  902.                                                 border: "none",
  903.                                                 cursor: "pointer",
  904.                                                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  905.                                             });
  906.                                             if (soundLink) {
  907.                                                 audioDownloadButton.href = decodeURIComponent(
  908.                                                     soundLink[1].startsWith("http")
  909.                                                         ? soundLink[1]
  910.                                                         : `https://${soundLink[1]}`
  911.                                                 );
  912.                                                 audioDownloadButton.download = soundLink[1]
  913.                                                     .split("/")
  914.                                                     .pop();
  915.                                             } else {
  916.                                                 audioDownloadButton.style.display = "none";
  917.                                             }
  918.                                             downloadButtonContainer.appendChild(audioDownloadButton);
  919.  
  920.                                             // a button beside the download video and download audio button that says download encoded soundpost which links to the following url in a new tab "https://4chan.mahdeensky.top/<board>/thread/<thread>/<post>" where things between the <>, are variables to be replaced
  921.                                             const encodedSoundPostButton =
  922.                                                 document.createElement("a");
  923.                                             encodedSoundPostButton.textContent =
  924.                                                 "Download Encoded Soundpost";
  925.                                             encodedSoundPostButton.target = "_blank";
  926.                                             setStyles(encodedSoundPostButton, {
  927.                                                 backgroundColor: "#1c1c1c",
  928.                                                 color: "#d9d9d9",
  929.                                                 padding: "5px 10px",
  930.                                                 borderRadius: "3px",
  931.                                                 border: "none",
  932.                                                 cursor: "pointer",
  933.                                                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  934.                                             });
  935.                                             if (soundLink) {
  936.                                                 encodedSoundPostButton.href = `https://4chan.mahdeensky.top/${board}/thread/${threadID}/${postID}`;
  937.                                             } else {
  938.                                                 encodedSoundPostButton.style.display = "none";
  939.                                             }
  940.                                             downloadButtonContainer.appendChild(
  941.                                                 encodedSoundPostButton
  942.                                             );
  943.  
  944.                                             // number on the bottom right of the screen to show which image is currently being viewed
  945.                                             const imageNumber = document.createElement("div");
  946.                                             let currentImageNumber =
  947.                                                 Array.from(cell.parentNode.children).indexOf(cell) + 1;
  948.                                             let imageTotal = cell.parentNode.children.length;
  949.                                             imageNumber.textContent = `${currentImageNumber}/${imageTotal}`;
  950.                                             setStyles(imageNumber, {
  951.                                                 backgroundColor: "#1c1c1c",
  952.                                                 color: "#d9d9d9",
  953.                                                 padding: "5px 10px",
  954.                                                 borderRadius: "3px",
  955.                                                 border: "none",
  956.                                                 cursor: "pointer",
  957.                                                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  958.                                                 zIndex: "10000",
  959.                                             });
  960.                                             bottomContainer.appendChild(imageNumber);
  961.  
  962.                                             // title of the image/video on the top left of the screen
  963.                                             const imageTitle = document.createElement("div");
  964.                                             imageTitle.textContent = fileName;
  965.                                             setStyles(imageTitle, {
  966.                                                 position: "fixed",
  967.                                                 top: "10px",
  968.                                                 left: "10px",
  969.                                                 backgroundColor: "#1c1c1c",
  970.                                                 color: "#d9d9d9",
  971.                                                 padding: "5px 10px",
  972.                                                 borderRadius: "3px",
  973.                                                 border: "none",
  974.                                                 cursor: "pointer",
  975.                                                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  976.                                                 zIndex: "10000",
  977.                                             });
  978.                                             background.appendChild(imageTitle);
  979.  
  980.                                             let currentCell = cell;
  981.                                             // use left and right arrow keys to navigate between images/videos
  982.                                             let keybindHandler = (event) => {
  983.                                                 if (event.key === "ArrowLeft") {
  984.                                                     // get the previous cell in the grid
  985.                                                     const previousCell =
  986.                                                         currentCell.previousElementSibling;
  987.                                                     if (previousCell) {
  988.                                                         if (gallery.querySelector("#zoomedVideo")) {
  989.                                                             if (
  990.                                                                 gallery
  991.                                                                     .querySelector("#zoomedVideo")
  992.                                                                     .querySelector("audio")
  993.                                                             ) {
  994.                                                                 gallery
  995.                                                                     .querySelector("#zoomedVideo")
  996.                                                                     .querySelector("audio")
  997.                                                                     .pause();
  998.                                                             }
  999.                                                             gallery.removeChild(
  1000.                                                                 gallery.querySelector("#zoomedVideo")
  1001.                                                             );
  1002.                                                         } else if (gallery.querySelector("#zoomedImage")) {
  1003.                                                             gallery.removeChild(
  1004.                                                                 gallery.querySelector("#zoomedImage")
  1005.                                                             );
  1006.                                                         } else {
  1007.                                                             image.style = "";
  1008.                                                             // image.src = thumbnailUrl;
  1009.                                                             setStyles(image, {
  1010.                                                                 maxWidth: "100%",
  1011.                                                                 maxHeight: "200px",
  1012.                                                                 objectFit: "contain",
  1013.                                                             });
  1014.                                                         }
  1015.  
  1016.                                                         // check if it has a video
  1017.                                                         const video = previousCell?.querySelector("video");
  1018.                                                         if (video) {
  1019.                                                             const video = previousCell
  1020.                                                                 .querySelector("video")
  1021.                                                                 .cloneNode(true);
  1022.                                                             video.id = "zoomedVideo";
  1023.                                                             video.style = "";
  1024.                                                             setStyles(video, {
  1025.                                                                 position: "fixed",
  1026.                                                                 top: "50%",
  1027.                                                                 left: "50%",
  1028.                                                                 transform: "translate(-50%, -50%)",
  1029.                                                                 zIndex: "10000",
  1030.                                                                 height: "80%",
  1031.                                                                 width: "80%",
  1032.                                                                 objectFit: "contain",
  1033.                                                                 cursor: "pointer",
  1034.                                                                 preload: "auto",
  1035.                                                             });
  1036.                                                             gallery.appendChild(video);
  1037.  
  1038.                                                             // check if there is an audio element
  1039.                                                             let audio = previousCell.querySelector("audio");
  1040.                                                             if (audio) {
  1041.                                                                 audio = audio.cloneNode(true);
  1042.  
  1043.                                                                 // same event listeners as the video
  1044.                                                                 video.onplay = (event) => {
  1045.                                                                     audio.play();
  1046.                                                                 };
  1047.  
  1048.                                                                 video.onpause = (event) => {
  1049.                                                                     audio.pause();
  1050.                                                                 };
  1051.  
  1052.                                                                 let lastVideoTime = 0;
  1053.                                                                 video.addEventListener("timeupdate", () => {
  1054.                                                                     if (
  1055.                                                                         Math.abs(
  1056.                                                                             video.currentTime - lastVideoTime
  1057.                                                                         ) >= 2
  1058.                                                                     ) {
  1059.                                                                         audio.currentTime = video.currentTime;
  1060.                                                                         lastVideoTime = video.currentTime;
  1061.                                                                     }
  1062.                                                                     lastVideoTime = video.currentTime;
  1063.                                                                 });
  1064.                                                                 video.appendChild(audio);
  1065.                                                             }
  1066.                                                         } else {
  1067.                                                             // if it doesn't have a video, it must have an image
  1068.                                                             const originalImage =
  1069.                                                                 previousCell.querySelector("img");
  1070.                                                             const currentImage =
  1071.                                                                 originalImage.cloneNode(true);
  1072.                                                             currentImage.id = "zoomedImage";
  1073.                                                             currentImage.style = "";
  1074.                                                             currentImage.src =
  1075.                                                                 currentImage.getAttribute("actualSrc");
  1076.                                                             originalImage.src =
  1077.                                                                 originalImage.getAttribute("actualSrc");
  1078.                                                             setStyles(currentImage, {
  1079.                                                                 position: "fixed",
  1080.                                                                 top: "50%",
  1081.                                                                 left: "50%",
  1082.                                                                 transform: "translate(-50%, -50%)",
  1083.                                                                 zIndex: "10000",
  1084.                                                                 height: "80%",
  1085.                                                                 width: "80%",
  1086.                                                                 objectFit: "contain",
  1087.                                                                 cursor: "pointer",
  1088.                                                             });
  1089.                                                             gallery.appendChild(currentImage);
  1090.                                                             currentImage.addEventListener("click", () => {
  1091.                                                                 gallery.removeChild(currentImage);
  1092.                                                                 gallery.removeChild(background);
  1093.                                                                 document.removeEventListener(
  1094.                                                                     "keydown",
  1095.                                                                     keybindHandler
  1096.                                                                 );
  1097.                                                             });
  1098.  
  1099.                                                             let audio = previousCell.querySelector("audio");
  1100.                                                             if (audio) {
  1101.                                                                 audio = audio.cloneNode(true);
  1102.                                                                 currentImage.appendChild(audio);
  1103.  
  1104.                                                                 // event listeners when hovering over the image
  1105.                                                                 currentImage.addEventListener(
  1106.                                                                     "mouseenter",
  1107.                                                                     () => {
  1108.                                                                         audio.play();
  1109.                                                                     }
  1110.                                                                 );
  1111.                                                                 currentImage.addEventListener(
  1112.                                                                     "mouseleave",
  1113.                                                                     () => {
  1114.                                                                         audio.pause();
  1115.                                                                     }
  1116.                                                                 );
  1117.                                                             }
  1118.                                                         }
  1119.  
  1120.                                                         if (previousCell) {
  1121.                                                             currentCell = previousCell;
  1122.                                                             buttonContainer.setAttribute(
  1123.                                                                 "mediaLink",
  1124.                                                                 previousCell.querySelector("img").src
  1125.                                                             );
  1126.  
  1127.                                                             currentImageNumber -= 1;
  1128.                                                             imageNumber.textContent = `${currentImageNumber}/${imageTotal}`;
  1129.  
  1130.                                                             // filename of the video if it has one, otherwise the filename of the image
  1131.                                                             imageTitle.textContent = video
  1132.                                                                 ? video.getAttribute("fileName")
  1133.                                                                 : previousCell
  1134.                                                                     .querySelector("img")
  1135.                                                                     .getAttribute("fileName");
  1136.  
  1137.                                                             // update view post button link
  1138.                                                             let previousMedia = video || previousCell.querySelector("img");
  1139.                                                             let previousBoard = previousMedia.getAttribute("board");
  1140.                                                             let previousThreadID = previousMedia.getAttribute("threadID");
  1141.                                                             let previousPostID = previousMedia.getAttribute("postID");
  1142.                                                             viewPostButton.href = `https://boards.4chan.org/${previousBoard}/thread/${previousThreadID}#p${previousPostID}`;
  1143.  
  1144.                                                             // update the download button links
  1145.                                                             downloadButton.href = previousMedia.src;
  1146.                                                             if (previousCell.querySelector("audio")) {
  1147.                                                                 // updating audio button download link
  1148.                                                                 audioDownloadButton.href =
  1149.                                                                     previousCell.querySelector("audio").src;
  1150.                                                                 audioDownloadButton.download = previousCell
  1151.                                                                     .querySelector("audio")
  1152.                                                                     .src.split("/")
  1153.                                                                     .pop();
  1154.                                                                 audioDownloadButton.style.display = "block";
  1155.  
  1156.                                                                 // updating encoded soundpost button link
  1157.                                                                 encodedSoundPostButton.href = previousCell.querySelector("audio")
  1158.                                                                     .getAttribute("encodedSoundPostLink");
  1159.                                                                 encodedSoundPostButton.style.display = "block";
  1160.  
  1161.                                                             } else {
  1162.                                                                 audioDownloadButton.style.display = "none";
  1163.                                                                 encodedSoundPostButton.style.display = "none";
  1164.                                                             }
  1165.                                                         }
  1166.                                                     }
  1167.                                                 } else if (event.key === "ArrowRight") {
  1168.                                                     // get the next cell in the grid
  1169.                                                     const nextCell = currentCell.nextElementSibling;
  1170.                                                     if (nextCell) {
  1171.                                                         if (gallery.querySelector("#zoomedVideo")) {
  1172.                                                             if (
  1173.                                                                 gallery
  1174.                                                                     .querySelector("#zoomedVideo")
  1175.                                                                     .querySelector("audio")
  1176.                                                             ) {
  1177.                                                                 gallery
  1178.                                                                     .querySelector("#zoomedVideo")
  1179.                                                                     .querySelector("audio")
  1180.                                                                     .pause();
  1181.                                                             }
  1182.                                                             gallery.removeChild(
  1183.                                                                 gallery.querySelector("#zoomedVideo")
  1184.                                                             );
  1185.                                                             // ("removed video");
  1186.                                                         } else if (gallery.querySelector("#zoomedImage")) {
  1187.                                                             gallery.removeChild(
  1188.                                                                 gallery.querySelector("#zoomedImage")
  1189.                                                             );
  1190.                                                             // ("removed image");
  1191.                                                         } else {
  1192.                                                             image.style = "";
  1193.                                                             setStyles(image, {
  1194.                                                                 maxWidth: "100%",
  1195.                                                                 maxHeight: "200px",
  1196.                                                                 objectFit: "contain",
  1197.                                                             });
  1198.                                                         }
  1199.  
  1200.                                                         // check if it has a video
  1201.                                                         const video = nextCell?.querySelector("video");
  1202.                                                         if (video) {
  1203.                                                             const video = nextCell
  1204.                                                                 .querySelector("video")
  1205.                                                                 .cloneNode(true);
  1206.                                                             video.id = "zoomedVideo";
  1207.                                                             video.style = "";
  1208.                                                             setStyles(video, {
  1209.                                                                 position: "fixed",
  1210.                                                                 top: "50%",
  1211.                                                                 left: "50%",
  1212.                                                                 transform: "translate(-50%, -50%)",
  1213.                                                                 zIndex: "10000",
  1214.                                                                 height: "80%",
  1215.                                                                 width: "80%",
  1216.                                                                 objectFit: "contain",
  1217.                                                                 cursor: "pointer",
  1218.                                                                 preload: "auto",
  1219.                                                             });
  1220.  
  1221.                                                             // check if there is an audio element
  1222.                                                             let audio = nextCell.querySelector("audio");
  1223.                                                             if (audio) {
  1224.                                                                 audio = audio.cloneNode(true);
  1225.  
  1226.                                                                 // same event listeners as the video
  1227.                                                                 video.onplay = (event) => {
  1228.                                                                     audio.play();
  1229.                                                                 };
  1230.  
  1231.                                                                 video.onpause = (event) => {
  1232.                                                                     audio.pause();
  1233.                                                                 };
  1234.  
  1235.                                                                 let lastVideoTime = 0;
  1236.                                                                 video.addEventListener("timeupdate", () => {
  1237.                                                                     if (
  1238.                                                                         Math.abs(
  1239.                                                                             video.currentTime - lastVideoTime
  1240.                                                                         ) >= 2
  1241.                                                                     ) {
  1242.                                                                         audio.currentTime = video.currentTime;
  1243.                                                                         lastVideoTime = video.currentTime;
  1244.                                                                     }
  1245.                                                                     lastVideoTime = video.currentTime;
  1246.                                                                 });
  1247.                                                                 video.appendChild(audio);
  1248.                                                             }
  1249.                                                             gallery.appendChild(video);
  1250.                                                         } else {
  1251.                                                             const originalImage =
  1252.                                                                 nextCell.querySelector("img");
  1253.                                                             const currentImage =
  1254.                                                                 originalImage.cloneNode(true);
  1255.                                                             currentImage.id = "zoomedImage";
  1256.                                                             currentImage.style = "";
  1257.                                                             currentImage.src =
  1258.                                                                 currentImage.getAttribute("actualSrc");
  1259.                                                             originalImage.src =
  1260.                                                                 originalImage.getAttribute("actualSrc");
  1261.                                                             setStyles(currentImage, {
  1262.                                                                 position: "fixed",
  1263.                                                                 top: "50%",
  1264.                                                                 left: "50%",
  1265.                                                                 transform: "translate(-50%, -50%)",
  1266.                                                                 zIndex: "10000",
  1267.                                                                 height: "80%",
  1268.                                                                 width: "80%",
  1269.                                                                 objectFit: "contain",
  1270.                                                                 cursor: "pointer",
  1271.                                                             });
  1272.                                                             gallery.appendChild(currentImage);
  1273.                                                             currentImage.addEventListener("click", () => {
  1274.                                                                 gallery.removeChild(currentImage);
  1275.                                                                 gallery.removeChild(background);
  1276.                                                                 document.removeEventListener(
  1277.                                                                     "keydown",
  1278.                                                                     keybindHandler
  1279.                                                                 );
  1280.                                                             });
  1281.  
  1282.                                                             let audio = nextCell.querySelector("audio");
  1283.                                                             if (audio) {
  1284.                                                                 audio = nextCell
  1285.                                                                     .querySelector("audio")
  1286.                                                                     .cloneNode(true);
  1287.                                                                 currentImage.appendChild(audio);
  1288.  
  1289.                                                                 currentImage.addEventListener(
  1290.                                                                     "mouseenter",
  1291.                                                                     () => {
  1292.                                                                         audio.play();
  1293.                                                                     }
  1294.                                                                 );
  1295.                                                                 currentImage.addEventListener(
  1296.                                                                     "mouseleave",
  1297.                                                                     () => {
  1298.                                                                         audio.pause();
  1299.                                                                     }
  1300.                                                                 );
  1301.                                                             }
  1302.                                                         }
  1303.                                                         if (nextCell) {
  1304.                                                             currentCell = nextCell;
  1305.                                                             buttonContainer.setAttribute(
  1306.                                                                 "mediaLink",
  1307.                                                                 nextCell.querySelector("img").src
  1308.                                                             );
  1309.  
  1310.                                                             currentImageNumber += 1;
  1311.                                                             imageNumber.textContent = `${currentImageNumber}/${imageTotal}`;
  1312.  
  1313.                                                             // filename of the video if it has one, otherwise the filename of the image
  1314.                                                             imageTitle.textContent = video
  1315.                                                                 ? video.getAttribute("fileName")
  1316.                                                                 : nextCell
  1317.                                                                     .querySelector("img")
  1318.                                                                     .getAttribute("fileName");
  1319.  
  1320.                                                             // update view post button link
  1321.                                                             let nextMedia = video || nextCell.querySelector("img");
  1322.                                                             let nextBoard = nextMedia.getAttribute("board");
  1323.                                                             let nextThreadID = nextMedia.getAttribute("threadID");
  1324.                                                             let nextPostID = nextMedia.getAttribute("postID");
  1325.                                                             viewPostButton.href = `https://boards.4chan.org/${nextBoard}/thread/${nextThreadID}#p${nextPostID}`;
  1326.  
  1327.                                                             // update the download button links
  1328.                                                             downloadButton.href = nextMedia.src;
  1329.                                                             if (nextCell.querySelector("audio")) {
  1330.                                                                 audioDownloadButton.href =
  1331.                                                                     nextCell.querySelector("audio").src;
  1332.                                                                 audioDownloadButton.download = nextCell
  1333.                                                                     .querySelector("audio")
  1334.                                                                     .src.split("/")
  1335.                                                                     .pop();
  1336.                                                                 audioDownloadButton.style.display = "block";
  1337.  
  1338.                                                                 encodedSoundPostButton.href = nextCell.querySelector("audio")
  1339.                                                                     .getAttribute("encodedSoundPostLink");
  1340.                                                                 encodedSoundPostButton.style.display = "block";
  1341.                                                             } else {
  1342.                                                                 audioDownloadButton.style.display = "none";
  1343.                                                                 encodedSoundPostButton.style.display = "none";
  1344.                                                             }
  1345.                                                         }
  1346.                                                     }
  1347.                                                 }
  1348.                                             };
  1349.                                             document.addEventListener("keydown", keybindHandler);
  1350.  
  1351.                                             image.addEventListener(
  1352.                                                 "click",
  1353.                                                 () => {
  1354.                                                     image.style = "";
  1355.                                                     // image.src = thumbnailUrl;
  1356.                                                     setStyles(image, {
  1357.                                                         maxWidth: "99%",
  1358.                                                         maxHeight: "199px",
  1359.                                                         objectFit: "contain",
  1360.                                                     });
  1361.  
  1362.                                                     if (gallery.querySelector("#darkenBackground")) {
  1363.                                                         gallery.removeChild(background);
  1364.                                                     }
  1365.                                                     document.removeEventListener(
  1366.                                                         "keydown",
  1367.                                                         keybindHandler
  1368.                                                     );
  1369.  
  1370.                                                     image.addEventListener("click", zoomImage, {
  1371.                                                         once: true,
  1372.                                                     });
  1373.                                                 },
  1374.                                                 { once: true }
  1375.                                             );
  1376.                                         };
  1377.  
  1378.                                         image.addEventListener("click", zoomImage, { once: true });
  1379.                                         image.title = comment.innerText;
  1380.                                         image.loading = "lazy";
  1381.  
  1382.                                         if (soundLink) {
  1383.                                             const audio = document.createElement("audio");
  1384.                                             audio.src = decodeURIComponent(
  1385.                                                 soundLink[1].startsWith("http")
  1386.                                                     ? soundLink[1]
  1387.                                                     : `https://${soundLink[1]}`
  1388.                                             );
  1389.                                             audio.loop = true;
  1390.                                             // set the attribute to the audio element with the encoded soundpost link
  1391.                                             audio.setAttribute(
  1392.                                                 "encodedSoundPostLink",
  1393.                                                 encodedSoundPostLink
  1394.                                             );
  1395.                                             imageContainer.appendChild(audio);
  1396.  
  1397.                                             image.addEventListener("mouseenter", () => {
  1398.                                                 audio.play();
  1399.                                             });
  1400.                                             image.addEventListener("mouseleave", () => {
  1401.                                                 audio.pause();
  1402.                                             });
  1403.  
  1404.                                             const playPauseButton = document.createElement("button");
  1405.                                             playPauseButton.textContent = "Play/Pause";
  1406.                                             setStyles(playPauseButton, {
  1407.                                                 backgroundColor: "#1c1c1c",
  1408.                                                 color: "#d9d9d9",
  1409.                                                 padding: "5px 10px",
  1410.                                                 borderRadius: "3px",
  1411.                                                 border: "none",
  1412.                                                 cursor: "pointer",
  1413.                                                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  1414.                                             });
  1415.                                             playPauseButton.addEventListener("click", () => {
  1416.                                                 if (audio.paused) {
  1417.                                                     audio.play();
  1418.                                                 } else {
  1419.                                                     audio.pause();
  1420.                                                 }
  1421.                                             });
  1422.                                             buttonDiv.appendChild(playPauseButton);
  1423.                                         }
  1424.                                         imageContainer.appendChild(image);
  1425.                                         cell.appendChild(imageContainer);
  1426.                                     } else {
  1427.                                         return; // Skip non-video and non-image posts
  1428.                                     }
  1429.  
  1430.                                     // Add button that scrolls to the post in the thread
  1431.                                     const viewPostButton = document.createElement("button");
  1432.                                     viewPostButton.textContent = "View Post";
  1433.                                     setStyles(viewPostButton, {
  1434.                                         backgroundColor: "#1c1c1c",
  1435.                                         color: "#d9d9d9",
  1436.                                         padding: "5px 10px",
  1437.                                         borderRadius: "3px",
  1438.                                         border: "none",
  1439.                                         cursor: "pointer",
  1440.                                         boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  1441.                                     });
  1442.  
  1443.                                     viewPostButton.addEventListener("click", () => {
  1444.                                         // post id example: "pc77515440"
  1445.                                         window.location.href = postURL + "#" + post.id;
  1446.                                         document.body.removeChild(gallery);
  1447.                                     });
  1448.                                     buttonDiv.appendChild(viewPostButton);
  1449.  
  1450.                                     cell.appendChild(buttonDiv);
  1451.                                     gridContainer.appendChild(cell);
  1452.                                 }
  1453.                             }
  1454.                         });
  1455.                     });
  1456.                 };
  1457.                 checkedThreads.forEach(loadPostsFromThread);
  1458.             };
  1459.  
  1460.             loadPosts(mode);
  1461.  
  1462.             gallery.appendChild(gridContainer);
  1463.  
  1464.             const closeButton = document.createElement("button");
  1465.             closeButton.textContent = "Close";
  1466.             closeButton.id = "closeGallery";
  1467.             setStyles(closeButton, {
  1468.                 position: "absolute",
  1469.                 bottom: "10px",
  1470.                 right: "10px",
  1471.                 zIndex: "10000",
  1472.                 backgroundColor: "#1c1c1c",
  1473.                 color: "#d9d9d9",
  1474.                 padding: "10px 20px",
  1475.                 borderRadius: "5px",
  1476.                 border: "none",
  1477.                 cursor: "pointer",
  1478.                 boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
  1479.             });
  1480.             closeButton.addEventListener("click", () => {
  1481.                 gallerySize = {
  1482.                     width: gridContainer.offsetWidth,
  1483.                     height: gridContainer.offsetHeight,
  1484.                 };
  1485.                 document.body.removeChild(gallery);
  1486.             });
  1487.             gallery.appendChild(closeButton);
  1488.  
  1489.             document.body.appendChild(gallery);
  1490.  
  1491.             // Store the current scroll position and grid container size when closing the gallery
  1492.             // (`Last scroll position: ${lastScrollPosition} px`);
  1493.             gridContainer.addEventListener("scroll", () => {
  1494.                 lastScrollPosition = gridContainer.scrollTop;
  1495.                 // (`Current scroll position: ${lastScrollPosition} px`);
  1496.             });
  1497.  
  1498.             // Restore the last scroll position and grid container size when opening the gallery after a timeout if the url is the same
  1499.             if (window.location.href === threadURL) {
  1500.                 setTimeout(() => {
  1501.                     if (gallerySize.width > 0 && gallerySize.height > 0) {
  1502.                         gridContainer.style.width = `${gallerySize.width}px`;
  1503.                         gridContainer.style.height = `${gallerySize.height}px`;
  1504.                     }
  1505.                     // (`Restored scroll position: ${lastScrollPosition} px`);
  1506.                     gridContainer.scrollTop = lastScrollPosition;
  1507.                 }, 200);
  1508.             } else {
  1509.                 // Reset the last scroll position and grid container size if the url is different
  1510.                 threadURL = window.location.href;
  1511.                 lastScrollPosition = 0;
  1512.                 gallerySize = { width: 0, height: 0 };
  1513.             }
  1514.         };
  1515.  
  1516.         button.addEventListener("click", openImageGallery);
  1517.  
  1518.         // Append the button to the body
  1519.         document.body.appendChild(button);
  1520.  
  1521.         if (isArchivePage) {
  1522.             // adds the category to thead
  1523.             const thead = document.querySelector(".flashListing thead tr");
  1524.             const checkboxCell = document.createElement("td");
  1525.             checkboxCell.className = "postblock";
  1526.             checkboxCell.textContent = "Selected";
  1527.             thead.insertBefore(checkboxCell, thead.firstChild);
  1528.  
  1529.             // Add checkboxes to each thread row
  1530.             const threadRows = document.querySelectorAll(".flashListing tbody tr");
  1531.             threadRows.forEach((row) => {
  1532.                 const checkbox = document.createElement("input");
  1533.                 checkbox.type = "checkbox";
  1534.                 const checkboxCell = document.createElement("td");
  1535.                 checkboxCell.appendChild(checkbox);
  1536.                 row.insertBefore(checkboxCell, row.firstChild);
  1537.             });
  1538.         }
  1539.     };
  1540.  
  1541.     // Use the "i" key to open and close the gallery/grid
  1542.     document.addEventListener("keydown", (event) => {
  1543.         if (event.key === "i") {
  1544.             // Prevent the gallery from opening when typing in an input or textarea
  1545.             if (
  1546.                 event.target.tagName == "INPUT" ||
  1547.                 event.target.tagName == "TEXTAREA"
  1548.             ) {
  1549.                 return;
  1550.             }
  1551.  
  1552.             if (document.querySelector("#imageGallery")) {
  1553.                 document.body.removeChild(document.querySelector("#imageGallery"));
  1554.             } else {
  1555.                 if (document.querySelector("#openImageGallery")) {
  1556.                     document.querySelector("#openImageGallery").click();
  1557.                 }
  1558.             }
  1559.         }
  1560.     });
  1561.  
  1562.     loadButton();
  1563.     ("4chan Gallery loaded successfully!");
  1564. })();