Last active
July 1, 2024 20:06
-
-
Save TheAMM/147be5001e43b7d8c60151716bbef703 to your computer and use it in GitHub Desktop.
It is 2024 and discord still displays embeds in a column, the fuck
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name Discord Embed grid | |
// @namespace https://gist.github.com/TheAMM/147be5001e43b7d8c60151716bbef703 | |
// @version 0.5.4 | |
// @description Adjust message embed CSS to display them as packed rows | |
// @author AMM | |
// @match https://discord.com/* | |
// @downloadURL https://gist.github.com/TheAMM/147be5001e43b7d8c60151716bbef703/raw/discord_embed_grid.user.js | |
// @grant none | |
// @run-at document-end | |
// ==/UserScript== | |
(function() { | |
'use strict'; | |
// Script to try and find the class names. Requires a channel with examples set up. | |
// Not trusting this for automatically deriving the classes; intended to be used as a snippet and then copying | |
function find_class_names() { | |
const get_class = (selector, prefix) => { | |
let elems = Array.from(document.querySelectorAll(selector)); | |
let classes = Array.from(new Set(elems.map(e => Array.from(e.classList).find(c => c.startsWith(prefix))))); | |
if (classes.length != 1) { throw new Error(`No single class for ${prefix}: ${classes}`); } | |
return classes[0]; | |
} | |
let container_class = get_class('div[id^="message-accessories-"][class^="container_"]', 'container_'); | |
let inline_class = get_class(`div.${container_class} > [class*="inlineMediaEmbed_"]`, 'inlineMediaEmbed_'); | |
let wrapper_class = get_class(`div[class*="clickableWrapper_"]`, 'clickableWrapper_'); | |
let full_class = get_class(`[class*="embedFull_"]`, 'embedFull_'); | |
let reactions_class = get_class(`[class*="reactions_"]`, 'reactions_'); | |
let today = new Date().toJSON().split('T')[0]; | |
let lines = []; | |
lines.push('/* Main embed container */'); | |
lines.push(`.${container_class} /*${today}*/`); | |
lines.push('/* Embed items */'); | |
lines.push(`.${container_class} > .${inline_class} /*${today}*/`); | |
lines.push('/* Workaround for loading images (gets overridden when image is loaded), and YT embeds and such */'); | |
lines.push(`.${container_class} > .${inline_class} .${wrapper_class} > *, .${container_class} > .${inline_class} .${full_class} /*${today}*/`); | |
lines.push('/* Fix playing youtube embeds */'); | |
lines.push(`.${container_class} > .${full_class} /*${today}*/`); | |
lines.push('/* Fix reactions */'); | |
lines.push(`.${reactions_class} /*${today}*/`); | |
console.log(lines.join('\n')); | |
}; | |
function addStyle(style) { | |
let elem = document.createElement('style'); | |
elem.innerHTML = style; | |
document.body.appendChild(elem); | |
} | |
addStyle(` | |
/* | |
Revision 2024-07-01 | |
Refresh classes | |
Revision 2024-04-06 | |
Look up new classes once more | |
Revision 2023-12-24 | |
Fix playing Youtube embeds | |
Revision 2023-11-09 | |
Added new container_dbadf5-style classes, dash-separated are likely obsolete. | |
*/ | |
/* Main embed container */ | |
.container_dbadf5, | |
.container__62863, /*2024-04-06*/ | |
.container_b558d0 /*2024-07-01*/ | |
{ | |
display: flex; | |
flex-wrap: wrap; | |
} | |
/* Embed items */ | |
.container_dbadf5 > .inlineMediaEmbed__4270e, | |
.container__62863 > .inlineMediaEmbed_b25e49, /*2024-04-06*/ | |
.container_b558d0 > .inlineMediaEmbed_ad0b71 /*2024-07-01*/ | |
{ | |
margin: 0.25em; | |
vertical-align: top; | |
} | |
/* Workaround for loading images (gets overridden when image is loaded), and YT embeds and such */ | |
.container_dbadf5 .inlineMediaEmbed__4270e .clickableWrapper__64072 > *, .container_dbadf5 .inlineMediaEmbed__4270e .embedFull__8dc21, | |
.container__62863 > .inlineMediaEmbed_b25e49 .clickableWrapper__2d2ea> *, .container__62863 > .inlineMediaEmbed_b25e49 .embedFull__14919, /*2024-04-06*/ | |
.container_b558d0 > .inlineMediaEmbed_ad0b71 .clickableWrapper_d4597d > *, .container_b558d0 > .inlineMediaEmbed_ad0b71 .embedFull_ad0b71 /*2024-07-01*/ | |
{ | |
width: 520px; | |
} | |
/* Fix playing youtube embeds */ | |
.container_dbadf5 > .embedFull__8dc21, | |
.container__62863 > embedFull__14919, /*2024-04-06*/ | |
.container_b558d0 > .embedFull_ad0b71 /*2024-07-01*/ | |
{ flex: 1; } | |
/* Fix reactions */ | |
.reactions_b8dc93, | |
.reactions_da5b2a, /*2024-04-06*/ | |
.reactions_ec6b19 /*2024-07-01*/ | |
{ flex-basis: 100%; } | |
/* Send Nitro gift button */ | |
button[aria-label='Send a gift'] { display: none; } | |
/* Discord Nitro Store */ | |
a[href="/store"] { display: none; } | |
/* Nitro boost icon on members - 2023-11-09: where is this? */ | |
/* .premiumIcon-1rDbWQ { display: none; } */ | |
/* Stage Discovery */ | |
a[href="/discovery"] { display: none; } | |
/* Sticker suggestion */ | |
.container-JHR0NT { display: none; } | |
/* Hide sticker tab in emoji picker*/ | |
#sticker-picker-tab { display: none; } | |
/* Hide sticker button on input field */ | |
button[aria-label="Open sticker picker"] { display: none; } | |
button[aria-label="Open GIF picker"] { display: none; } | |
`); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment