117 lines
4.0 KiB
JavaScript
117 lines
4.0 KiB
JavaScript
// ==UserScript==
|
|
// @name Inline Reddit images and Comment Redirect
|
|
// @namespace https://www.reddit.com
|
|
// @version 2026-08-28
|
|
// @description Embed images and videos posted as comments and redirect post links to comments
|
|
// @author luxick
|
|
// @updateURL https://git.luxick.de/luxick/scripts/js/raw/branch/master/reddit-image-inline.user.js
|
|
// @downloadURL https://git.luxick.de/luxick/scripts/js/raw/branch/master/reddit-image-inline.user.js
|
|
// @match https://old.reddit.com/r/*
|
|
// @match https://www.reddit.com/r/*
|
|
// @icon https://www.google.com/s2/favicons?sz=64&domain=reddit.com
|
|
// @grant none
|
|
// ==/UserScript==
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Collect the placeholder links Reddit renders for media comments,
|
|
// e.g. "<image>" or "<video>" as the link text.
|
|
function collectLinks(placeholder) {
|
|
let xpath = "//a[text()='" + placeholder + "']";
|
|
var element;
|
|
var result = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
|
|
let links = [];
|
|
while(element = result.iterateNext()){
|
|
if (element.href) {
|
|
links.push(element);
|
|
}
|
|
}
|
|
return links;
|
|
}
|
|
|
|
// Reddit's video comments link to an embedded player page rather than to a
|
|
// playable file, e.g. ".../video/<id>/player".
|
|
function isPlayerUrl(href) {
|
|
return /\/player\/?(\?|$)/i.test(href);
|
|
}
|
|
|
|
function buildPlayerFrame(href) {
|
|
let frame = document.createElement('iframe');
|
|
frame.src = href;
|
|
frame.width = 300;
|
|
frame.height = 300;
|
|
frame.allowFullscreen = true;
|
|
frame.style = "max-width: 300px; border: none";
|
|
return frame;
|
|
}
|
|
|
|
// Handle image inlining
|
|
for (var elem of collectLinks('<image>')) {
|
|
console.log("inlining image " + elem.href);
|
|
let image = new Image();
|
|
image.src = elem.href;
|
|
image.style = "max-width: 300px";
|
|
|
|
// Create a new anchor element
|
|
let anchor = document.createElement('a');
|
|
anchor.href = elem.href;
|
|
anchor.target = '_blank'; // Opens in new tab
|
|
|
|
// Append the image to the anchor
|
|
anchor.appendChild(image);
|
|
|
|
// Add the anchor (containing the image) to the parent
|
|
elem.parentElement.appendChild(anchor);
|
|
elem.remove();
|
|
}
|
|
|
|
// Handle video inlining
|
|
for (var videoElem of collectLinks('<video>')) {
|
|
console.log("inlining video " + videoElem.href);
|
|
let href = videoElem.href;
|
|
let embed;
|
|
|
|
if (isPlayerUrl(href)) {
|
|
embed = buildPlayerFrame(href);
|
|
} else {
|
|
let video = document.createElement('video');
|
|
video.src = href;
|
|
video.controls = true;
|
|
video.preload = 'metadata';
|
|
video.style = "max-width: 300px";
|
|
|
|
// Some links (v.redd.it DASH streams) a bare <video> cannot play;
|
|
// put the original link back so the video stays reachable.
|
|
video.addEventListener('error', function() {
|
|
let anchor = document.createElement('a');
|
|
anchor.href = href;
|
|
anchor.target = '_blank';
|
|
anchor.textContent = '<video>';
|
|
video.replaceWith(anchor);
|
|
});
|
|
|
|
embed = video;
|
|
}
|
|
|
|
videoElem.parentElement.appendChild(embed);
|
|
videoElem.remove();
|
|
}
|
|
|
|
// Only proceed with link rewriting if we're not already in a comments section
|
|
if (!window.location.pathname.includes('/comments/')) {
|
|
// Handle post link redirection
|
|
const postLinks = document.querySelectorAll('a.title');
|
|
postLinks.forEach(link => {
|
|
// Find the comments link for this post
|
|
const thing = link.closest('.thing');
|
|
if (thing) {
|
|
const commentsLink = thing.querySelector('a.comments');
|
|
if (commentsLink) {
|
|
link.href = commentsLink.href;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
})();
|