Brings back filenames to the Finnish imageboard, ylilauta.org
// ==UserScript==
// @name Tiedostonimet takas
// @name:en Filenames back
// @description Lisää tiedostonimet takaisin laudalle
// @description:en Brings back filenames to the Finnish imageboard, ylilauta.org
// @version 2.1.0
// @match *://ylilauta.org/*
// @grant GM_addStyle
// @icon https://static.ylilauta.org/img/seal_of_ylilauta-icon.svg
// @license MIT
// @namespace https://greasyfork.org/users/1285509
// ==/UserScript==
(function () {
'use strict';
// --------------------
// ASETUKSET | SETTINGS
// true = lisää tiedostonimen perään sen tyypin ja korvaa välilyönnit alaviivoilla
// false = näyttää pelkän tiedostonimen
const showFiletype = true;
// Näyttää tiedostonimen perässä tiedostokoon kun tiedosto on laajennettuna
const showFileSize = true;
// Näyttää tiedostonimen perässä sen leveyden ja korkeuden kun tiedosto on laajennettuna
const showFileDimensions = true;
// Lisää etuliitteen tiedostonimeen
const filePrefix = '';
// Muuttaa tiedostonimen sijaintia
// true = tiedostonimi postauksen yläpalkissa timestampin vieressä
// false = tiedostonimi tiedoston yläpuolella
const placeInMeta = true;
// Mahdollistaa tiedoston lataamisen sen alkuperäisellä nimellä
// true = alt-click tiedostonimen linkin kohdalla lataa tiedoston sen haetulla nimellä
// right-click -> save link as tallentaa tiedoston sen todellisella nimellä
// false = alt-click ei lataa tiedostoa
// right-click -> save link as tallentaa tiedoston sen todellisella nimellä
const altClickToDownload = true;
// Viestin toiminnot -> 'Tallenna tiedosto' lataa tiedoston sen haetulla nimellä
const overwriteSaveFile = true;
// Korvaa avif tiedostopäätteet näytetyssä tiedostonimessä ja muuttaa ladatun
// tiedoston kyseiseen formaattiin toiminnoissa altClickToDownload ja overwriteSaveFile.
// Tiedoston lataaminen muilla kuin kyseisillä tavoilla käyttää yhä avif formaattia.
// '' = tyyppiä ei korvata
// 'png', 'jpg', 'webp', 'bmp' = tiedosto muutetaan kyseiseen muotoon
const convertAvif = '';
// Laatu häviöllistä pakkausta tukeville formaateille väliltä [0.0, 1.0]
// '' = Käytetään selaimen oletusarvoa (yleensä 0.92 jpeg, 0.8 webp)
// Toimii vain jos convertAvif = true ja joko altClickToDownload tai overwriteSaveFile
const convertQuality = '';
// Tallentaa haetut tiedostonimet selaimen sivustokohtaiseen sessionStorageen
// true = Nopeuttaa aiemmin haettujen tiedostonimien lisäystä esim. sivun
// uudelleenlatauksen jälkeen kunhan pysyt samalla välilehdellä.
// false = tiedostonimiä ei tallenneta selaimeen
//
// sessionStorage tyhjenee joka tapauksessa kun välilehden sulkee
// https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
const useSessionStorage = true;
// Väliaikainen teksti tiedostoa ladatessa tai sen epäonnistuessa
const titleLoading = "Ladataan tiedostonimeä...";
const titleError = "Tiedostonimeä ei löytynyt";
// Säätää maksimiyritysten määrää ja alkuperäistä viivästystä epäonnistuneen
// tiedostonimen hakuyrityksen jälkeen. Viivästys kaksinkertaistuu jokaisen
// epäonnistuneen yrityksen jälkeen. Tällä yritetään kiertää rate limittiä
// (jokainen tiedostonimi on saatavilla vain omalla sivullaan).
const retryInitialDelay = 2000; //ms
const retryMaxAttempts = 5;
// --------------------
// Add custom styling
GM_addStyle(`
.file-data {
max-width: fit-content;
display: grid;
grid-auto-flow: column;
grid-gap: 5px;
align-items: center;
a {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.post > .file-data {
margin: 0 10px 5px;
}
.post-meta .file-data {
flex: 1 40%;
* {
color: inherit;
}
}
.file-data-unknown .file-data-link {
font-style: italic;
}
.file-download-container {
display: grid;
font-size: 20px;
color: inherit !important;
transition: opacity 0.75s;
* {
display: grid;
grid-column: 1;
grid-row: 1;
color: var(--button-hover-text-color) !important;
pointer-events: none;
}
.file-download-background {
border-radius: 3px;
}
.file-download-progress {
color: var(--c-sec) !important;
z-index: 1;
height: 0;
}
.file-download-abort {
font-size: 14px !important;
padding: 3px;
-webkit-text-stroke: 1px;
z-index: 2;
opacity: 0;
}
&.file-download-error .file-download-background {
color: var(--ch-red) !important;
}
&:not(.file-download-error):hover {
.file-download-background,
.file-download-progress {
opacity: 0.5;
}
.file-download-abort {
opacity: 1;
}
}
}
`);
// Load previously fetched data if enabled and available
const cachedFileData = (useSessionStorage ? JSON.parse(sessionStorage.getItem('file-data') ?? '{}') : {});
if (Object.keys(cachedFileData).length > 0) {
console.info('Loaded file data from sessionStorage for %i files', Object.keys(cachedFileData).length);
}
// Saves fetched data in sessionStorage to persist after page reload
function saveFileDataToSessionStorage() {
if (useSessionStorage) {
const fileIds = Object.keys(cachedFileData);
// Ignore dimensions, no need to save them
const whitelist = ['title', 'fileType', 'fileSize'].concat(fileIds);
sessionStorage.setItem('file-data', JSON.stringify(cachedFileData, whitelist));
}
}
class HTTPError extends Error {
constructor(url, statusCode) {
super(`${statusCode} while requesting ${url}`);
this.name = this.constructor.name;
this.statusCode = statusCode;
this.url = url;
}
}
function convertAvifToType(imageSrc, toType) {
return new Promise((resolve, reject) => {
const supportedTypes = ['png', 'jpg', 'jpeg', 'webp', 'bmp'];
if (!supportedTypes.includes(toType)) {
return reject(new Error(
`convertAvif has an invalid filetype: ${toType}. Has to be one of ${supportedTypes.join(', ')}`
));
}
const img = new Image();
img.onload = convert;
img.onerror = () => reject(new Error(`Loading image ${img.src}`));
img.src = imageSrc;
function convert() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
// Convert fileType to the correct media type
let imageFormat = 'image/';
switch (toType) {
case 'jpg':
imageFormat += 'jpeg';
break;
default:
imageFormat += toType;
}
// Get quality for lossy compression
let quality = parseFloat(convertQuality.toString().replace(',', '.'));
if (quality < 0 || quality > 1) {
return reject(new Error(`Invalid convertQuality: ${quality}. Must be in the range 0-1`));
}
canvas.toBlob(resolve, imageFormat, quality);
canvas.remove();
}
});
}
let saveAsRequest;
async function saveAs(fileId, fileData, onprogress = () => { }) {
const fileType = (convertAvif ? fileData.fileType.replace('avif', convertAvif) : fileData.fileType);
const filename = `${fileData.title}.${fileType}`;
const downloadUrl = `https://ylilauta.org/file/download/${fileId}`;
try {
const fileBlob = await new Promise((resolve, reject) => {
if (fileType !== fileData.fileType) {
// Convert the image's file format
resolve(convertAvifToType(downloadUrl, fileType));
} else {
const req = new XMLHttpRequest();
req.responseType = 'blob';
req.onprogress = (e) => onprogress(e.loaded / e.total);
req.onerror = () => reject(new Error(`requesting ${downloadUrl}`));
req.onabort = () => resolve();
req.onload = () => {
if (req.status >= 200 && req.status < 300) resolve(req.response);
else reject(new HTTPError(downloadUrl, req.status));
};
req.open('GET', downloadUrl);
req.send();
saveAsRequest = req;
}
});
// Check if the request was aborted
if (saveAsRequest?.readyState === XMLHttpRequest.UNSENT) return;
// Download the blob with the original filename
const objectUrl = window.URL.createObjectURL(fileBlob);
const dummyLink = document.createElement('a');
dummyLink.href = objectUrl;
dummyLink.download = filename;
dummyLink.click();
window.URL.revokeObjectURL(objectUrl);
dummyLink.remove();
onprogress(1);
} finally {
saveAsRequest = undefined;
}
}
async function fetchFileData(fileId) {
const data = cachedFileData[fileId] = (cachedFileData[fileId] ?? {});
if (data.title !== undefined) return data;
const fileSrc = `https://ylilauta.org/file/download/${fileId}`;
const response = await fetch(fileSrc, { method: 'HEAD' });
if (!response.ok) throw new HTTPError(fileSrc, response.status);
const contentDisposition = response.headers.get('Content-Disposition');
const filename = contentDisposition.match(/filename=\"([^"]*)\"/)[1];
const [title, fileType] = filename.split('.');
const fileSize = +response.headers.get('Content-Length');
[data.title, data.fileType, data.fileSize] = [title, fileType, fileSize];
return data;
}
// Fetches a file's data with retries in case of failure due to rate limiting
async function fetchFileDataWithRetry(fileId, maxAttempts = retryMaxAttempts, delay = retryInitialDelay) {
try {
const data = await fetchFileData(fileId);
return data;
} catch (error) {
if (error instanceof HTTPError && error.statusCode >= 500) {
if (maxAttempts === 0) {
throw new Error(`Max attempts to fetch file data reached. Last attempt resulted in ${error}`);
}
console.log(`Attempt to fetch file data failed with ${error}. Retrying in ${delay}ms...`);
await new Promise(resolve => setTimeout(resolve, delay));
return fetchFileDataWithRetry(fileId, maxAttempts - 1, delay * 2);
} else {
throw error;
}
}
}
// https://stackoverflow.com/a/18650828
function formatBytes(bytes) {
if (!+bytes) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toPrecision(3)).toLocaleString()} ${sizes[i]}`;
}
// Displays cachedFileData for the given post
// Returns true if successful
function displayFileData(post) {
// Check that the post has a file, and we have at least the filename
const file = post?.querySelector(`.file[data-file-id]`);
const data = cachedFileData[file?.dataset.fileId];
if (data?.title === undefined) return false;
// Load the previously created elements
const fileDataElement = post.querySelector('.file-data');
const fileLinkElement = fileDataElement.querySelector('.file-data-link');
const fileExtraElement = fileDataElement.querySelector('.file-data-extra');
fileExtraElement.textContent = '';
// Add filename
const fileType = convertAvif ? data.fileType.replace('avif', convertAvif) : data.fileType;
const fullTitle = `${filePrefix}${data.title.replace(/\s/g, '_')}.${fileType}`;
fileLinkElement.textContent = fileLinkElement.title = (showFiletype ? fullTitle : data.title);
// Remove the placeholder class
fileDataElement.classList.remove('file-data-unknown');
// Add filesize and dimensions if enabled. These are only shown when file is expanded, to
// hide the fact that dimensions are only loaded after a file has been expanded at least once.
if (!file.classList.contains('preview')) {
const extraData = [];
if (showFileSize && data.fileSize) extraData.push(`${formatBytes(data.fileSize)}`);
if (showFileDimensions && data.dimensions) extraData.push(`${data.dimensions[0]}×${data.dimensions[1]}`);
if (extraData.length) {
fileExtraElement.textContent = ` (${extraData.join(', ')})`;
}
}
return true;
}
// An array of { post, fileId } to request data for
// Elements from the end of the queue are processed first
const queue = [];
// Processes data requests in queue one at a time
// Should only be called if queue is not empty
let queueRunning = false;
async function processQueue() {
if (queueRunning) return;
if (queue.length === 0) {
// Queue cleared!
saveFileDataToSessionStorage();
return;
}
queueRunning = true;
const { post, fileId } = queue.pop();
const postId = post.dataset.postId;
try {
await fetchFileDataWithRetry(fileId);
displayFileData(post);
} catch (error) {
console.error(`Error fetching or displaying data for file ${fileId} in post ${postId}: ${error}`);
// Show the error in the link's title
const link = post.querySelector('.file-data .file-data-link');
if (link) {
link.textContent = titleError;
link.title = error;
}
} finally {
queueRunning = false;
processQueue();
}
}
// Moves the post to top of queue, if it is currently in queue
function prioritizePost(post) {
const postIndex = queue.findIndex((item) => item.post === post);
if (postIndex < 0) return;
queue.push(queue.splice(postIndex, 1)[0]);
console.log('Pushed post to the top of the queue, should be processed next:\n', post);
}
// Adds a timeout to other promises when used with Promise.race
function promiseTimeout(duration = 5000) {
return new Promise((_, reject) => {
setTimeout(() => reject(new Error(`Timed out after ${duration}ms`)), duration);
});
}
// Promise wrapper for MutationObserver with timeout
function promiseObserve(element, options, check) {
let observer;
return Promise.race([
new Promise((resolve) => {
observer = new MutationObserver(mutations => {
for (const mutation of mutations) {
check(mutation, resolve);
}
});
observer.observe(element, options);
}),
promiseTimeout()
])
.finally(() => observer.disconnect());
}
// Detects and calls processPosts on posts added when clicking the Expand replies button
async function onExpandRepliesClick(e) {
const post = e.currentTarget.closest('.post');
if (post.dataset.replyExpandLoading === 'true') return;
try {
const posts = await promiseObserve(post, { childList: true }, (mutation, resolve) => {
for (const addedNode of mutation.addedNodes) {
if (addedNode.classList.contains('replies')) {
resolve([...addedNode.querySelectorAll('.post[data-post-id]')]);
}
}
for (const removedNode of mutation.removedNodes) {
if (removedNode.classList.contains('replies')) {
resolve([]);
}
}
});
processPosts(posts);
} catch (error) {
console.error('Failed to detect any changes after expandReplies was clicked:', error);
}
}
// Gets the dimensions of an image or video after it is loaded
async function loadFileDimensions(media, fileId) {
if (cachedFileData[fileId]?.dimensions) return cachedFileData[fileId].dimensions;
function tryLoadDimensions(el) {
return ((el.videoWidth || el.videoHeight) && [el.videoWidth, el.videoHeight])
|| ((el.naturalWidth || el.naturalHeight) && [el.naturalWidth, el.naturalHeight]);
}
try {
if (!fileId) throw new Error('fileId missing on file');
const data = cachedFileData[fileId] = (cachedFileData[fileId] ?? {});
await Promise.race([
tryLoadDimensions(media) ? data : new Promise((resolve, reject) => {
media.addEventListener(media.tagName === 'VIDEO' ? 'loadedmetadata' : 'load', () => resolve(data));
media.addEventListener('error', () => reject(new Error(`Loading image or video ${media.src}`)));
}),
promiseTimeout()
]);
return data.dimensions = (tryLoadDimensions(media) || data.dimensions);
} catch (error) {
console.error(`Loading file ${fileId} dimensions failed:`, error);
}
}
// Detect expanding file
async function onFileClick(e) {
if (e.ctrlKey || e.metaKey) return;
const file = e.currentTarget;
const post = file.closest('.post');
// Prioritize loading data for the file if waiting in queue
prioritizePost(post);
try {
const opt = file.classList.contains('preview')
? { childList: true, subtree: true }
: { attributeFilter: ['class'] };
const media = await promiseObserve(file, opt, (mutation, resolve) => {
if (mutation.type === 'childList') {
for (const addedNode of mutation.addedNodes) {
if (addedNode.matches('.full-img, video')) {
resolve(addedNode);
}
}
} else if (file.classList.contains('preview')) {
resolve();
}
});
if (media) await loadFileDimensions(media, file.dataset.fileId);
} catch (error) {
console.error('Failed to detect changes to class .preview on file after it was clicked:', error);
} finally {
displayFileData(post);
}
}
// Save a file with its original filename. Fetches the file's title if it isn't in cache
let downloadActive = false;
async function saveFileWithOriginalName(post, fileId) {
if (downloadActive) {
console.log('Already downloading a file, skipping download for file', fileId);
return;
}
downloadActive = true;
// Add a progress indicator
const downloadContainerElement = document.createElement('a');
downloadContainerElement.className = 'file-download-container';
const downloadBackgroundElement = document.createElement('a');
downloadBackgroundElement.className = 'icon-download2 file-download-background';
const downloadProgressElement = document.createElement('a');
downloadProgressElement.className = 'icon-download2 file-download-progress';
const downloadCancelElement = document.createElement('a');
downloadCancelElement.className = 'icon-cross file-download-abort';
// Allow aborting the download by clicking the indicator
downloadContainerElement.addEventListener('click', () => saveAsRequest?.abort());
downloadContainerElement.append(downloadBackgroundElement, downloadProgressElement, downloadCancelElement);
post.querySelector('.file-data').append(downloadContainerElement);
try {
// Load or fetch the file's data
const data = cachedFileData[fileId]?.title
? cachedFileData[fileId]
: await fetchFileDataWithRetry(fileId);
// Display data if it wasn't in cache
displayFileData(post);
let progressHeight = 0;
await saveAs(fileId, data, (progress) => {
const pPercentage = Math.floor(progress * 100) + '%';
// Animate the indicator
downloadBackgroundElement.style.background
= `linear-gradient(var(--button-hover-bg-color) ${pPercentage}, transparent ${pPercentage})`;
if (progressHeight >= 100) progressHeight = 0;
else progressHeight += 5;
downloadProgressElement.style.height = progressHeight + '%';
});
// Disable cancel animation on hover
downloadContainerElement.style.pointerEvents = 'none';
} catch (error) {
console.error('Error saving file:', error);
// Show the error in the indicator's title
downloadContainerElement.title = error;
downloadContainerElement.classList.add('file-download-error');
} finally {
downloadActive = false;
downloadProgressElement.style.height = 0;
// Fade out the indicator
setTimeout(() => downloadContainerElement.style.opacity = 0, 4000);
setTimeout(() => downloadContainerElement.remove(), 4750);
}
}
// Detect alt-clicking a file link
function onFileLinkClick(e) {
const fileLink = e.currentTarget;
const post = fileLink.closest('.post');
if (!e.altKey) {
// Opening the file page, pause video unless opening in a background tab
if (!e.ctrlKey) post.querySelector('.file video')?.pause();
return;
}
saveFileWithOriginalName(post, fileLink.dataset.fileId);
e.preventDefault();
}
// Detect opening the post menu to overwrite 'Save file' button's behaviour
async function onPostMenuButtonClick(e) {
const postMenuButton = e.currentTarget;
if (postMenuButton.classList.contains('active')) return;
try {
const dropdown = await promiseObserve(document.body, { childList: true }, (mutation, resolve) => {
for (const addedNode of mutation.addedNodes) {
if (addedNode.classList.contains('dropdown')) resolve(addedNode);
}
});
const downloadLink = await promiseObserve(dropdown, { childList: true }, (_, resolve) => {
const downloadLink = dropdown.querySelector('a[download][href]');
if (downloadLink) resolve(downloadLink);
});
const post = postMenuButton.closest('.post');
const fileLink = post.querySelector('.file-data-link');
const fileId = fileLink.dataset.fileId;
// Overwrite the behaviour
downloadLink.removeAttribute('href');
downloadLink.addEventListener('click', () => saveFileWithOriginalName(post, fileId));
} catch (error) {
console.error('Failed to detect Save file button in post menu after it was opened:', error);
}
}
// Main function to add posts with files to queue for requesting data,
// and observing elements when necessary to react to the following actions:
// - The 'Expand replies' button is clicked -> Load data for the replies added under the post
// - A file is expanded -> Prioritize loading data for the file
// -> The file's dimensions can be checked and added to data
// -> Update the file-data elements by calling displayFileData
// - altClickToDownload: File link is clicked -> Download if holding alt
// - overwriteSaveFile: Post menu is clicked -> Overwrite behaviour for the save file button
function processPosts(posts) {
for (const post of posts.reverse()) {
try {
const repliesButton = post.querySelector('button[data-action="Post.expandReplies"]');
repliesButton?.addEventListener('click', onExpandRepliesClick);
// No further actions needed for posts without a valid file
const file = post.querySelector('.file[data-file-id][data-file-src]');
if (!file) continue;
file.addEventListener('click', onFileClick);
// Add elements to the post for holding the file's data
const fileId = file.dataset.fileId;
const fileSrc = file.dataset.fileSrc;
const fileDataElement = document.createElement('span');
fileDataElement.className = 'file-data file-data-unknown';
if (!placeInMeta) file.before(fileDataElement);
else post.querySelector('.post-meta .time').after('•', fileDataElement);
const fileLinkElement = document.createElement('a');
fileLinkElement.className = 'file-data-link';
fileLinkElement.target = '_blank';
fileLinkElement.href = fileSrc;
fileLinkElement.textContent = titleLoading;
fileLinkElement.dataset.fileId = fileId;
if (altClickToDownload) fileLinkElement.addEventListener('click', onFileLinkClick);
if (overwriteSaveFile) {
const menuButton = post.querySelector('button[data-action="Post.menu"');
menuButton?.addEventListener('click', onPostMenuButtonClick);
}
const fileExtraElement = document.createElement('span');
fileExtraElement.className = 'file-data-extra';
fileDataElement.append(fileLinkElement, fileExtraElement);
// Test if the file already has data in our cache to avoid being stuck in queue
if (displayFileData(post)) continue;
// This is a new file, add to queue for fetching the data
queue.push({ post, fileId });
} catch (error) {
console.error(`Error processing post ${post.dataset.postId}:`, error);
}
}
// If a new file was encountered, start processing the queue
if (!queueRunning && queue.length > 0) processQueue();
}
{
// Apply to posts on initial page load
let posts = [...document.querySelectorAll('.post[data-post-id]')];
// Process posts from current position first
const anchorId = window.location.hash.substring(1);
const anchorIndex = posts.indexOf(anchorId && document.getElementById(anchorId));
// Move posts from anchorIndex onward to the beginning of the array
posts = (anchorIndex > 0) ? posts.splice(anchorIndex).concat(posts) : posts;
processPosts(posts);
// Apply to new posts after initial page load
window.addEventListener('new-posts-loaded', (e) => {
for (const threadId in e.detail) {
const thread = document.querySelector(`.thread[data-thread-id="${threadId}"]`);
if (!thread) continue;
// Filter to posts with a valid postId. This prevents loading
// filenames on the frontpage with display types other than 'New replies'.
const validPosts = e.detail[threadId].filter(post => post.hasAttribute('data-post-id'));
processPosts(validPosts);
}
});
}
})();