☰

Expandify Twitter Media

Uncrops and expands Twitter image previews to their original ratios while browsing. View media pages in full-width and uncover rounded edges for a better viewing experience. Written in SCSS.

// ==UserScript==

// @name 			Expandify Twitter Media
// @version			4.9.1a

// @description 	Uncrops and expands Twitter image previews to their original ratios while browsing. View media pages in full-width and uncover rounded edges for a better viewing experience. Written in SCSS.
// @author			Neuvalence, JayeVisual.com


// @match 			https://*.twitter.com/*
// @match 			https://*.x.com/*
// @grant  			GM_addStyle
// @license         MIT
// @require			http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @require	 		https://code.jquery.com/ui/1.13.3/jquery-ui.js
// @icon         	https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Logo_of_Twitter.svg/292px-Logo_of_Twitter.svg.png

// @namespace https://greasyfork.org/users/1275871
// ==/UserScript==


(function () {
	'use strict';
	function onElementAvailable(selector, callback) {
		const observer = new MutationObserver(mutations =>  {
			if (document.querySelector(selector)) {
				observer.disconnect();
				callback();
			}
		});
		observer.observe(document.body, {
			childList: true,
			subtree: true
		});
	}

	const rafraichir = 2000;
	setInterval(() => {
		const ogTwt__Header = document.querySelector("header");
		let ogTwt__HeaderSubArea = document.querySelector("header > div:nth-child(1) > div:nth-child(1)");
		ogTwt__Header.id = "ogTwt__Header";
		ogTwt__HeaderSubArea.id = "ogTwt__HeaderSubArea";
		$(ogTwt__Header).append(ogTwt__HeaderSubArea);
	}, rafraichir);

	(function () {
		let css = `
	header {
		overflow: hidden !important;
		height: 100vh !important;
		max-height: 100vh !important;
		display: block !important;
			.r-pt392 {
				margin-left: unset !important;
			}
			#ogTwt__HeaderSubArea {
				width: unset !important;
				transform: scale(0.9) !important;
				max-width: unset !important;
				min-width: unset !important;
			}
	}
	header *, header,
	header::-webkit-scrollbar,
	header *::-webkit-scrollbar {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	main {
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
		position: relative !important;

		& > div:nth-child(1),
		& > div > div:nth-child(1),
		& > div > div > div:nth-child(1) {
			width: 100% !important;
			max-width: 100% !important;
			display: block !important;
			position: relative !important;
		}
	}

	article *,
	article [aria-label] img,
	article [aria-label] div *,
	article [aria-label] *,
	[data-testid='tweet'] * {
		border: unset !important;
		border-radius: unset !important;
		clip-path: unset !important;
		border-style: none !important;
	}
		[data-testid="cellInnerDiv"] * {
			border: none;
		}
		article {
			border: #ffffff11 0.3px solid !important;
			border-radius: 3px !important;
		}
		article [aria-label] img {
			border-radius: 2px !important;
		}
		[data-testid='Tweet-User-Avatar'] a * {
			border-radius: 10rem !important;
		}



	main > div:nth-child(1),
	main > div:nth-child(1) > div:nth-child(1),
	main > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)
	{
		width: 100% !important;
		max-width: 100% !important;

	}

		main div[data-testid*='primary'] > div > div:nth-child(3) > div > div > div:nth-child(1),
		main div[data-testid*='primary'] > div > div:nth-child(3) > div > div > nav,
		main div[data-testid*='primary'] section
		{
			width: 100% !important;
			max-width: 875px !important;
			margin: 0 auto !important;
			margin-left: 10vw !important;

		}
		main div[data-testid*='primary'] > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1),
		main div[data-testid*='primary'] > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) nav {
			max-width: calc(100% - 350px) !important;
		}

			main div[data-testid*='primary'],
			main div[data-testid*='primary'] > div,
			main div[data-testid*='primary'] > div > div, /* all 3 */

				main div[data-testid*='primary'] .r-1ye8kvj,
				main div[data-testid*='primary'] > div > div,
				main div[data-testid*='primary'] > div > div > div,
				main div[data-testid*='primary'] > div > div > div > div,
				main div[data-testid*='primary'] > div > div > div > .r-1ye8kvj,  /* troisième */
				main div[data-testid*='primary'] > div > div > div > div > .r-1ye8kvj,  /* troisième avc sous-mâitre */
				main:has(a[href*="/media"]) div[data-testid*='primary']:has(div[data-testid*="ScrollSnap-List"] > div:last-child > a[aria-selected*="true"]) section
					{
						width: 100% !important;
						max-width: 100% !important;
			}
				main div[data-testid*='primary'] section:has([id*='verticalGridItem']),
				main div[data-testid*='primary']:has([id*='verticalGridItem'])
					{
						width: 100% !important;
						min-width: 100% !important;
						max-width: 100% !important;
						margin: 0 auto !important;
						margin-right: 0% !important;
				}


	main div[data-testid*='primary'] li img {
		inset: unset !important;
		opacity: 1 !important;
		border-radius: 2px !important;
		position: relative !important;
		left: unset !important;
		top: unset !important;
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
		min-height: auto !important;
		max-height: 100% !important;
		max-width: 100% !important;
	}

		div[data-testid*='primary'] [data-testid="tweetPhoto"] > img,
		div[data-testid*='primary'] [aria-label] > img {
			width: auto !important;
			height: 100% !important;
			background: none !important;
			position: relative !important;
			z-index: 1 !important;
			inset: unset !important;
			opacity: 1 !important;
			object-fit: contain !important;
		}
			div[data-testid*='primary'] li a > div > div:nth-child(2) > div > div:nth-child(1),
			div[data-testid*='primary'] [aria-label]:has(> img) > div:nth-child(1),
			div[data-testid*='primary'] [data-testid="tweetPhoto"]:has(> img) > div:nth-child(1) {
				background: none !important;
				display: none !important;
				visibility: hidden !important;
			}
			[data-testid="tweetText"] span {
				font-size: 1.2rem !important;
				line-height: 1.1 !important;
			}


	div[data-testid*='sidebar'] {
		position: absolute !important;
		right: 2rem !important;
		top: 0 !important;
		height: 80px !important;
		z-index: 9000;
		margin: 0 !important;

		padding: 5px !important;
		background-color: unset !important;

			div[aria-label] > div:nth-child(1) > div:nth-child(1) {
				margin-top: 5px !important;
			}
			& > div > div:nth-child(2) {
				padding: 10px;
			}
			& > div > div:nth-child(2) > div > div > div > div {
				display: none;
			}
			& > div > div:nth-child(2) > div > div > div > div:nth-child(1) {
				display: block !important;
			}
			& > div > div:nth-child(2) > div > div > div > div:nth-child(1) {
				background: none !important;
			}
			&:hover {
				height: 100% !important;

				div[aria-label],
				div:nth-child(1) > div,
				div:nth-child(1) > div > div,
				div > div:nth-child(2) > div > div > div > div:nth-child(1) {
					background-color: #000000 !important;
					border-radius: 20px;
				}
				& > div > div:nth-child(2) > div > div > div > div {
					display: block !important;
				}
			}

		}


`;
		if (typeof GM_addStyle !== "undefined") {
			GM_addStyle(css);
			} else {
				let styleNode = document.createElement("style");
				styleNode.appendChild(document.createTextNode(css));
				(document.querySelector("head") || document.documentElement).appendChild(styleNode);
		}
	})(); /* End CSS*/



})(); /* End ALL */