☰

8chan gallery script

Gallery viewer for 8chan threads

  1. // ==UserScript==
  2. // @name        8chan gallery script
  3. // @namespace   https://greatest.deepsurf.us/en/users/1461449
  4. // @match       https://8chan.moe/*/res/*
  5. // @match       https://8chan.se/*/res/*
  6. // @grant       GM_setValue
  7. // @grant       GM_getValue
  8. // @version     1.7
  9. // @description Gallery viewer for 8chan threads
  10. // @license     MIT
  11. // ==/UserScript==
  12.  
  13. function addCSS(css) {
  14.     const style = document.createElement('style');
  15.     document.head.append(style);
  16.     style.textContent = css;
  17.     return style;
  18. }
  19.  
  20. const options = new Proxy({}, {
  21.     get: (_, prop) => {
  22.         if (prop == "volume") {
  23.             let e = parseFloat(localStorage.getItem('8chan-volume'));
  24.             return isNaN(e) ? 0 : e
  25.         } else {
  26.             return GM_getValue(prop);
  27.         }
  28.     },
  29.     set: (_, prop, value) => {
  30.         prop == "volume" ? localStorage.setItem('8chan-volume', value) : GM_setValue(prop, value);
  31.         return true;
  32.     }
  33. });
  34.  
  35. if (!options.exists) {
  36.     options.exists = true;
  37.     options.muteVideo = false;
  38.     options.volume = 0.3
  39. }
  40.  
  41. if (options.muteVideo) {
  42.     options.volume = 0;
  43. }
  44.  
  45. class Post {
  46.     constructor(element, thread) {
  47.         this.element = element;
  48.         this.id = element.id;
  49.         this.replies = [];
  50.  
  51.         if (thread) {
  52.             thread.posts.push(this);
  53.             element.querySelectorAll('.postInfo > .panelBacklinks > a').forEach(link => {
  54.                 const reply = link.textContent.replace(/\D/g, '');
  55.                 this.replies.push(reply);
  56.             });
  57.         }
  58.  
  59.         const details = element.querySelectorAll('details');
  60.         this.files = Array.from(details).map(d => {
  61.             const imgLink = d.querySelector('a.imgLink');
  62.             if (imgLink) {
  63.                 return {
  64.                     url: imgLink.href,
  65.                     thumbnail: imgLink.querySelector('img')?.src,
  66.                     name: d.querySelector('.originalNameLink')?.download || '',
  67.                     video: d.querySelector('video') !== null,
  68.                     parentPost: this
  69.                 };
  70.             }
  71.         }).filter(Boolean);
  72.     }
  73.     hidden() {
  74.         return this.element.querySelector(".unhideButton") !== null;
  75.     }
  76. }
  77.  
  78. class Thread extends Post {
  79.     static all = [];
  80.     constructor(opEl) {
  81.         super(opEl, null);
  82.         this.posts = [this];
  83.         Thread.all.push(this);
  84.     }
  85. }
  86.  
  87. class Gallery {
  88.     constructor() {
  89.         this.visible = false;
  90.         this.showImages = true;
  91.         this.showVideos = true;
  92.         this.currentIndex = 0;
  93.         this.rotation = 0;
  94.         this.container = null;
  95.         this.viewer = null;
  96.         this.mediaEl = null;
  97.         this.sidebar = null;
  98.         this.previewContainer = null;
  99.         this.previews = [];
  100.  
  101.         document.addEventListener('keyup', e => {
  102.             if (e.key === 'g') {
  103.                 this.visible ? this.remove() : this.show();
  104.             } else if (e.key === 'Escape' && this.visible) {
  105.                 this.remove();
  106.             }
  107.         });
  108.  
  109.         document.addEventListener('keydown', e => {
  110.             if (!this.visible) return;
  111.             switch (e.key) {
  112.                 case 'ArrowLeft':
  113.                     this.showIndex((this.currentIndex - 1 + this.filteredMedia.length) % this.filteredMedia.length);
  114.                     break;
  115.                 case 'ArrowRight':
  116.                     this.showIndex((this.currentIndex + 1) % this.filteredMedia.length);
  117.                     break;
  118.                 case 'r':
  119.                     if (!e.ctrlKey) this.rotate();
  120.                     break;
  121.             }
  122.         });
  123.     }
  124.  
  125.     mediaItems() {
  126.         return this.thread.posts.flatMap(p => (p.files || []).filter(f => !p.hidden() && (f.video ? this.showVideos : this.showImages)));
  127.     }
  128.  
  129.     show() {
  130.         if (!this.container) this.buildUI();
  131.  
  132.         const op = document.querySelector('div.opCell .innerOP');
  133.         if (!op) return;
  134.         this.thread = new Thread(op);
  135.         document.querySelectorAll('div.opCell .divPosts > div').forEach(el => new Post(el, this.thread));
  136.  
  137.         document.body.append(this.container);
  138.         this.visible = true;
  139.         this.updatePreviews();
  140.         this.currentIndex = this.getClosestPost();
  141.         this.showIndex(this.currentIndex);
  142.     }
  143.  
  144.     getClosestPost() {
  145.         const centerY = window.innerHeight / 2;
  146.         let best = { idx: 0, dist: Infinity };
  147.     
  148.         this.mediaItems().forEach((media, i) => {
  149.             const rect = media.parentPost?.element.getBoundingClientRect();
  150.             if (rect) {
  151.                 const postCenter = rect.top + rect.height / 2;
  152.                 const dist = Math.abs(postCenter - centerY);
  153.                 if (dist < best.dist) best = { idx: i, dist };
  154.             }
  155.         });
  156.     
  157.         return best.idx;
  158.     }
  159.     
  160.  
  161.     remove() {
  162.         if (this.container) this.container.remove();
  163.         this.visible = false;
  164.         this.mediaEl.onmouseout();
  165.     }
  166.  
  167.     addMediaScroll(mediaEl) {
  168.         let supportsPassive = false;
  169.         try {
  170.             window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
  171.                 get: function () { supportsPassive = true; }
  172.             }));
  173.         } catch (e) { }
  174.  
  175.         let wheelOpt = supportsPassive ? { passive: false } : false;
  176.         let wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
  177.  
  178.         function handleScroll(e) {
  179.             e.preventDefault();
  180.             mediaEl.volume += (e.deltaY < 0 ? 0.02 : -0.02);
  181.             mediaEl.volume = Math.min(Math.max(mediaEl.volume, 0), 1);
  182.         }
  183.  
  184.         mediaEl.onmouseover = () => {
  185.             window.addEventListener(wheelEvent, handleScroll, wheelOpt);
  186.         };
  187.  
  188.         mediaEl.onmouseout = () => {
  189.             window.removeEventListener(wheelEvent, handleScroll, wheelOpt);
  190.         };
  191.     }
  192.  
  193.     buildUI() {
  194.         this.container = document.createElement('div');
  195.         Object.assign(this.container.style, {
  196.             position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
  197.             background: 'rgba(0,0,0,0.7)', display: 'flex', zIndex: 9999
  198.         });
  199.  
  200.         this.viewer = document.createElement('div');
  201.         Object.assign(this.viewer.style, {
  202.             flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative'
  203.         });
  204.         this.viewer.addEventListener('click', (e) => {
  205.             if (e.target === this.viewer) this.remove();
  206.         });
  207.  
  208.         this.labelsDiv = document.createElement("div");
  209.         this.labelsDiv.id = "gallery-labels";
  210.  
  211.         let infoLabels = document.createElement("div");
  212.         infoLabels.setAttribute("id", "gallery-labels-info");
  213.         Object.assign(infoLabels.style, {
  214.             position: "absolute", display: "flex", flexDirection: "column",
  215.             alignItems: "flex-end", bottom: "5px", right: "5px", borderRadius: "3px", zIndex: "59"
  216.         });
  217.  
  218.         this.filenameLabel = document.createElement("a");
  219.         this.filenameLabel.classList.add("gallery-label");
  220.         this.filenameLabel.id = "gallery-label-filename"
  221.         this.filenameLabel.style.color = "white";
  222.  
  223.         this.indexLabel = document.createElement("a");
  224.         this.indexLabel.classList.add("gallery-label");
  225.         this.indexLabel.id = "gallery-label-index"
  226.         this.indexLabel.style.color = "white";
  227.  
  228.         infoLabels.append(this.indexLabel, this.filenameLabel);
  229.  
  230.         this.filterLabels = document.createElement("div");
  231.         Object.assign(this.filterLabels.style, {
  232.             position: "absolute", display: "flex", flexDirection: "column",
  233.             alignItems: "flex-end", top: "5px", right: "5px", borderRadius: "3px", zIndex: "59"
  234.         });
  235.  
  236.         const createFilterLabel = (id, text, toggleFn) => {
  237.             const label = document.createElement("a");
  238.             label.id = id;
  239.             label.textContent = text;
  240.             label.classList.add("gallery-label");
  241.             label.style.color = "white";
  242.             label.style.cursor = 'pointer';
  243.             label.addEventListener('click', toggleFn);
  244.             return label;
  245.         };
  246.  
  247.         const imageLabel = createFilterLabel("gallery-label-image", "Images", () => {
  248.             this.showImages = !this.showImages;
  249.             imageLabel.style.color = this.showImages ? "white" : "red";
  250.             const currentMedia = this.filteredMedia[this.currentIndex];
  251.             this.updatePreviews();
  252.             if (this.filteredMedia) {
  253.                 let newIndex = this.filteredMedia.indexOf(this.filteredMedia.find(el => el == currentMedia));
  254.                 if (newIndex == -1) {
  255.                     newIndex = this.getClosestPost();
  256.                     this.showIndex(newIndex)
  257.                 } else {
  258.                     this.showIndex(newIndex, false);
  259.                 }
  260.             }
  261.         });
  262.  
  263.         const videoLabel = createFilterLabel("gallery-label-video", "Videos", () => {
  264.             this.showVideos = !this.showVideos;
  265.             videoLabel.style.color = this.showVideos ? "white" : "red";
  266.             const currentMedia = this.filteredMedia[this.currentIndex];
  267.             this.updatePreviews();
  268.             if (this.filteredMedia) {
  269.                 let newIndex = this.filteredMedia.indexOf(this.filteredMedia.find(el => el == currentMedia));
  270.                 if (newIndex == -1) {
  271.                     newIndex = this.getClosestPost();
  272.                 }
  273.                 this.showIndex(newIndex)
  274.             }
  275.         });
  276.  
  277.         this.filterLabels.append(imageLabel, videoLabel);
  278.         this.labelsDiv.append(this.filterLabels, infoLabels);
  279.         this.viewer.append(this.labelsDiv);
  280.  
  281.         this.mediaEl = document.createElement('video');
  282.         this.mediaEl.controls = true;
  283.         this.mediaEl.loop = true;
  284.         this.mediaEl.style.maxWidth = '90vw';
  285.         this.mediaEl.style.height = '94vh';
  286.         this.mediaEl.style.objectFit = 'contain';
  287.         this.mediaEl.addEventListener('volumechange', () => { options.volume = this.mediaEl.volume; });
  288.         this.addMediaScroll(this.mediaEl);
  289.  
  290.         this.mediaContainer = document.createElement('div');
  291.         this.mediaContainer.append(this.mediaEl);
  292.         this.viewer.append(this.mediaContainer);
  293.  
  294.         this.sidebar = document.createElement('div');
  295.         this.sidebar.id = 'gallery-sidebar';
  296.         this.sidebar.tabIndex = 0;
  297.         this.sidebar.addEventListener('wheel', (e) => {
  298.             const delta = e.deltaY;
  299.             const atTop = this.sidebar.scrollTop === 0;
  300.             const atBottom = this.sidebar.scrollHeight - this.sidebar.clientHeight === this.sidebar.scrollTop;
  301.         
  302.             if ((delta < 0 && atTop) || (delta > 0 && atBottom)) {
  303.                 e.preventDefault();
  304.             }
  305.         }, { passive: false });        
  306.         Object.assign(this.sidebar.style, {
  307.             width: '150px', background: 'rgba(0,0,0,0.6)', padding: '5px', overflowY: 'auto'
  308.         });
  309.  
  310.         this.previewContainer = document.createElement('div');
  311.         this.sidebar.append(this.previewContainer);
  312.         this.container.append(this.viewer, this.sidebar);
  313.  
  314.         addCSS(`
  315.         /* Explicit color for filter labels to ensure visibility */
  316.         #gallery-label-image, #gallery-label-video, #gallery-label-mute { color: white; }
  317.         #gallery-label-image:hover, #gallery-label-video:hover, #gallery-label-mute:hover, #gallery-label-filename:hover { background: rgba(50, 50, 50, 0.8) !important; }
  318.  
  319.         /* Ensure labels are above media elements */
  320.         #gallery-labels { z-index: 10; }
  321.  
  322.         #gallery-sidebar { scrollbar-width: thin; scrollbar-color: #555 #222; }
  323.         #gallery-sidebar::-webkit-scrollbar { width: 8px; }
  324.         #gallery-sidebar::-webkit-scrollbar-track { background: #222; }
  325.         #gallery-sidebar::-webkit-scrollbar-thumb { background-color: #555; border-radius: 4px; border: 2px solid #222; }
  326.  
  327.         .gallery-thumb { display: block; width: calc(100% - 10px); margin: 0 auto 8px auto; cursor: pointer; opacity: 0.6; transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out; border: 2px solid transparent; border-radius: 3px; box-sizing: border-box; background-color: #111; /* Add background for missing thumbs */ min-height: 50px; /* Min height for missing thumbs */ }
  328.         .gallery-thumb:hover { opacity: 0.85; }
  329.         .gallery-thumb.selected { opacity: 1; border: 2px solid #00baff; }
  330.  
  331.         #gallery-labels { pointer-events: none; }
  332.         #gallery-labels > div { position: absolute; right: 10px; display: flex; flex-direction: column; align-items: flex-end; pointer-events: auto; }
  333.         #gallery-labels-info { bottom: 10px; }
  334.         #gallery-labels-filters { top: 10px; }
  335.  
  336.         .gallery-label { display: block; padding: 3px 6px; background: rgba(0, 0, 0, 0.7) !important; margin-bottom: 4px; font-size: 0.9em; text-decoration: none; border-radius: 3px; transition: background-color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
  337.         .gallery-filter-label.gallery-label { cursor: pointer; }
  338.         #gallery-label-index.gallery-label { user-select: none; cursor: pointer; /* Make index clickable to scroll */ }
  339.         #gallery-label-index.gallery-label:hover {cursor: unset !important}
  340.         `);
  341.     }
  342.  
  343.     updatePreviews() {
  344.         this.previewContainer.innerHTML = '';
  345.         this.filteredMedia = this.mediaItems();
  346.         this.previews = [];
  347.         this.filteredMedia.forEach((media, idx) => {
  348.             const thumb = document.createElement('img');
  349.             thumb.src = media.thumbnail;
  350.             thumb.title = media.name;
  351.             thumb.className = 'gallery-thumb';
  352.  
  353.             thumb.addEventListener('click', () => this.showIndex(idx));
  354.  
  355.             const wrapper = document.createElement('div');
  356.             wrapper.style.position = 'relative';
  357.             wrapper.appendChild(thumb);
  358.             
  359.             const replyLen = media.parentPost?.replies?.length || 0;
  360.             if (replyLen > 0) {
  361.                 const replyCount = document.createElement('div');
  362.                 replyCount.textContent = replyLen;
  363.                 Object.assign(replyCount.style, {
  364.                     position: 'absolute',
  365.                     top: '3px',
  366.                     right: '3px',
  367.                     background: 'rgba(0,0,0,0.6)',
  368.                     color: '#fff',
  369.                     padding: '2px 5px',
  370.                     fontSize: '13px',
  371.                     borderRadius: '3px',
  372.                     pointerEvents: 'none'
  373.                 });
  374.                 wrapper.appendChild(replyCount);
  375.             }
  376.             
  377.             this.previewContainer.append(wrapper);
  378.             this.previews.push(thumb);
  379.         });
  380.     }
  381.  
  382.     updateLabels(media) {
  383.         this.filenameLabel.textContent = media.name;
  384.         this.filenameLabel.setAttribute("href", media.url);
  385.         this.indexLabel.textContent = (this.currentIndex + 1) + " / " + this.filteredMedia.length;
  386.     }
  387.  
  388.     showIndex(idx, updateMedia = true) {
  389.         this.currentIndex = idx;
  390.         this.previews.forEach((t, i) => t.classList.toggle('selected', i === idx));
  391.         this.previews[idx].scrollIntoView({ behavior: 'auto', block: 'center' });
  392.  
  393.         const media = this.filteredMedia[idx];
  394.         Array.from(this.mediaContainer.querySelectorAll('img')).forEach(img => img.remove());
  395.  
  396.         this.updateLabels(media);
  397.  
  398.         if (updateMedia) {
  399.             if (media.video) {
  400.                 this.mediaEl.style.display = '';
  401.                 this.mediaEl.src = media.url;
  402.                 this.mediaEl.volume = options.volume;
  403.                 this.mediaEl.play().catch(() => {});
  404.             } else {
  405.                 this.mediaEl.pause();
  406.                 this.mediaEl.style.display = 'none';
  407.                 const img = document.createElement('img');
  408.                 img.src = media.url;
  409.                 img.style.maxWidth = '90vw';
  410.                 img.style.height = '98vh';
  411.                 img.style.objectFit = 'contain';
  412.                 this.mediaContainer.append(img);
  413.             }
  414.     
  415.             this.rotation = 0;
  416.             this.mediaContainer.style.transform = 'rotate(0deg)';
  417.     
  418.             media.parentPost?.element.scrollIntoView({ behavior: 'auto', block: 'center' });
  419.         }
  420.     }
  421.  
  422.     rotate() {
  423.         this.rotation = (this.rotation + 90) % 360;
  424.         this.mediaContainer.style.transform = `rotate(${this.rotation}deg)`;
  425.     }
  426. }
  427.  
  428. (() => {
  429.     const op = document.querySelector('div.opCell .innerOP');
  430.     if (!op) return;
  431.     new Gallery();
  432. })();