Twitter Inline Expansion

Inline-expansion of :orig (full-resolution) twitter images
换行
// ==UserScript==
// @name        Twitter Inline Expansion
// @namespace   https://github.com/an-electric-sheep/
// @description Inline-expansion of :orig (full-resolution) twitter images
// @include     https://twitter.com/*
// @include     https://mobile.twitter.com/*
// @include     https://tweetdeck.twitter.com/*
// @version     0.4.0
// @run-at			document-start
// @noframes
// @grant       unsafeWindow
// @grant				GM_xmlhttpRequest
// ==/UserScript==

'use strict';

const cssPrefix = "mediatweaksuserscript";

// normal + mobile page + tweetdeck
const TweetImageSelector = `
	.tweet .js-adaptive-photo img ,
	.Tweet .CroppedPhoto img ,
  .js-stream-item-content a.js-media-image-link
`;
	
const TweetVideoSelector = ".AdaptiveMedia-video iframe";

let alreadyVisited = new WeakSet();

	
function prefixed(str) {
	return cssPrefix + str;	
}


function mutationObserverCallback(mutations) {
		try {
			for(let mutation of mutations) {
				if(mutation.type != "childList")
					continue;
				for(let node of [mutation.target, ...mutation.addedNodes]) {
					if(node.nodeType != Node.ELEMENT_NODE)
						continue;

					onAddedNode(node)
					for(let subNode of node.querySelectorAll(TweetVideoSelector))
						onAddedNode(subNode);
					for(let subNode of node.querySelectorAll(TweetImageSelector))
						onAddedNode(subNode);
				}
			}
		} catch(e) {
			console.log(e)
		}

}

function visitOnce(element, func) {
	if(alreadyVisited.has(element))
		return;
	alreadyVisited.add(element);
	func()
}

function onAddedNode(node) {
	if(node.matches(TweetImageSelector)) {
		visitOnce(node, () => {
			addImageControls(node.closest(".tweet, .Tweet, .js-stream-item-content"),node);
		})
	}
	
	if(node.matches(TweetVideoSelector)) {
		// we match an iframe here. once on the parent because iframes get reloaded when scrolling
		visitOnce(node.parentElement, () => {
			addVideoControls(node.closest(".tweet"), node)
		})
	}
}

function controlContainer(target) {
	let div = target.querySelector(`.${cssPrefix}-thumbs-container`);
	if(!div) {
		div = document.createElement("div")
		target.appendChild(div)
		div.className = prefixed("-thumbs-container")
	}		
	
	return div;
}

function addImageControls(tweetContainer, image) {
	let src;
	if(image.localName == "a") {
		src = image.style.backgroundImage.match(/^url\("(.*)"\)$/)[1];
	} else {
		src = image.src;		
	}
	
	let origSrc = src + ":orig"
	
	let div = controlContainer(tweetContainer);
	
	div.insertAdjacentHTML("beforeend", `
			<a class="${cssPrefix}-orig-link ${cssPrefix}-thumb" data-${cssPrefix}-small="${src}" href="${origSrc}"><img src="${src}"></a>
	`)
}

const supportedContentTypes = [
		{
			// https://twitter.com/age_jaco/status/623712731456122881/photo/1
			matcher: (config) => config.content_type == "video/mp4",
			ext: "mp4",
			loader:	fetchMP4
		},
		{
			// https://twitter.com/MrNobre/status/754144048529625088
			matcher: (config) => config.content_type == "application/x-mpegURL",
			ext: "ts",
			loader: fetchMpegTs
		},{
			// https://twitter.com/mkraju/status/755368535619145728
			matcher: (config) => "vmap_url" in config,
			ext: "mp4",
			loader: fetchVmap
		}
]

// can't use fetch() API here since it's blocked by CSP
function fetchVmap(configPromise) {
	return configPromise.then(config => {
		return new Promise((resolve, reject) => {
			GM_xmlhttpRequest({
				method: "GET",
				url: config.vmap_url,
				responseType: "xml",
				anonymous: true,
				onload: (rsp) => { resolve(rsp.responseXML) },
				onerror: (e) => {	reject(e)	}
			})
		})
	}).then(xmlDoc => {
		let url = xmlDoc.querySelector("*|MediaFile").textContent;
		return new Promise((resolve, reject) => {
			GM_xmlhttpRequest({
				method: "GET",
				url: url,
				responseType: "blob",
				anonymous: true,
				onload: (rsp) => { resolve(rsp.response) },
				onerror: (e) => {	reject(e)	}
			})
		})
	})
}

function fetchMpegTs(configPromise) {
	let baseURL = null;
	
	return configPromise.then(config => {
		baseURL = config.video_url
		
		return fetch(config.video_url, {redirect: "follow", mode: "cors"}).then((response) => {
			return response.text()
		})
	}).then((playlist) => {
		let highestResolution = playlist.split(/\n/).filter(str => !str.startsWith("#")).filter(str => str.length > 0).pop()
		let fetchUrl = new URL(baseURL)
		fetchUrl.pathname = highestResolution
		return fetch(fetchUrl, {mode: "cors", redirects: "follow"});
	}).then((response) => {
		return response.text()
	}).then((chunkList) => {
		return chunkList.split(/\n/).filter(s => !s.startsWith("#")).filter(s => s.length > 0).map(chunk => {
			let u = new URL(baseURL);
			u.pathname = chunk;
			return u;
		})
	}).then((urls) => {
		return Promise.all(urls.map(u => {
			return fetch(u.toString(), {mode: "cors", redirects: "follow"}).then(response => response.blob())
		}));
	}).then(blobs => {
			return new Blob(blobs);
	})
}

function fetchMP4(configPromise) {
	return configPromise.then(config => {
		return fetch(config.video_url, {redirect: "follow", mode: "cors"}).then(response => response.blob())
	})
}


function addVideoControls(tweetContainer, iframe) {
	
	let mediaConfig = null;
	
	let configPromise = new Promise((resolve, reject) => {
		if(iframe.contentDocument.readyState == "interactive" || iframe.contentDocument.readyState == "complete") {
			resolve(iframe.contentDocument)
			return;
		}
		
		iframe.addEventListener("load", () => resolve(iframe.contentDocument))
	}).then((contentDoc) => {
		let config = JSON.parse(contentDoc.querySelector(".player-container").dataset.config)
		
		mediaConfig = config;
		
		console.log(config)
		
		
		
		if(!supportedContentTypes.find(t => t.matcher(config)))
			throw new Error(`unknown video configuration, unable to fetch data`);
		
		return config
	})
	
	const controls = controlContainer(tweetContainer)
	
	controls.insertAdjacentHTML("beforeend", `
		<a download="${Date.now()}.ts" href="#">download</a><span class="${cssPrefix}-progress"></span>
	`)
	
	let finalBlob = null;	
	const link = controls.querySelector("a[download]");
	
	let exceptionHandler = (message) => {
		return (exception) => {
			controls.insertAdjacentHTML("beforeend", `
					<span class="${cssPrefix}-error">
						${message}:
						${exception.toString()}
					</span>
				`)
		}
	}
	
	configPromise.catch(exceptionHandler("An error occured while reading the video metadata"))
	
	configPromise.then(config => {
		const type = supportedContentTypes.find(t => t.matcher(config))
		
		let filename = `@${config.user.screen_name} ${config.tweet_id}.${type.ext}`
		link.download = filename;
		link.appendChild(document.createTextNode(": " + filename))
	})
	
	
	link.addEventListener("click", (e) => {
		if(finalBlob != null)
			return;
		
		e.preventDefault();
		
		configPromise.then(config => {
			const type = supportedContentTypes.find(t => t.matcher(config))
			return type.loader(configPromise)
			
		}).then(blob => {
			finalBlob = blob;
			
			link.href = URL.createObjectURL(finalBlob);

			// fire new click event since we prevent-defaulted it earlier
			link.click();
		}).catch(exceptionHandler("An error occurred while downloading the video"))
				
	})
}

let observer = null 

function init() {
	const config = { subtree: true, childList: true };
	
	observer = new MutationObserver(mutationObserverCallback);
	observer.observe(document.documentElement, config);
	
	document.addEventListener("DOMContentLoaded", ready)
	document.addEventListener("click", thumbToggleHandler, true)
	document.addEventListener("keypress", keyboardNav)
	
} 

function thumbToggleHandler(event) {
	if(event.button != 0)
		return;
	let link = event.target.closest(`.${cssPrefix}-orig-link`); 
	if(!link)
		return;

	event.stopImmediatePropagation();
	event.preventDefault();
	
	thumbToggle(link)
}


function thumbToggle(link) {
	let img = link.querySelector("img");

	return new Promise((res, rej) => {
  	if(link.classList.contains(prefixed("-expanded"))) {
			img.src = link.dataset[cssPrefix + "Small"];
			link.classList.add(prefixed("-thumb"))
			link.classList.remove(prefixed("-expanded"))
			res(link)
		} else {
			let f = () => {
				link.classList.add(prefixed("-expanded"))
				link.classList.remove(prefixed("-thumb"))
				img.removeEventListener("load", f)
				res(link)
			}
			
			img.addEventListener("load", f)
			img.src = link.href;
		}
		
	})
}

const style = `
.${cssPrefix}-thumbs-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

a.${cssPrefix}-orig-link {
	padding: 5px;
} 

.${cssPrefix}-orig-link.${cssPrefix}-thumb img {
	max-width: 60px;
	max-height: 60px;
	vertical-align: middle;
}

a.${cssPrefix}-expanded {
	width: -moz-fit-content;
	width: fit-content;
}

a.${cssPrefix}-expanded img {
	width: -moz-fit-content;
	width: fit-content;
	max-width: 95vw;
}

.${cssPrefix}-focused {
	outline: 3px solid green !important;
}

.${cssPrefix}-shortcuts {
  list-style:initial;
  padding-left: 1em;
}


/* mobile */
section.Timeline {
	overflow: visible;
} 
`;

const info = `
Userscript Keyboard Shortcuts:
<ul class="${prefixed("-shortcuts")}">
<li>Navigate between posts with images with WD or Up/Down arrows
<li>Expand with Q or Spacebar
<li>Download with E
</ul>
`;

function ready() {
	let styleEl = document.createElement("style");
	styleEl.textContent = style;
	document.head.append(styleEl);
	document.querySelector(".ProfileSidebar").insertAdjacentHTML("beforeend", info)
}

function keyboardNav(e) {
	// skip keyboard events when in inputs
	if (e.target.isContentEditable || ("selectionStart" in document.activeElement))
		return;


	let focus = null;
	let prevent = false;
	if (e.key == "w" || e.key == "ArrowUp" ) {
		focus = moveFocus(-1);
		prevent = true;
	}

	if (e.key == "s" || e.key == "ArrowDown" ) {
		focus = moveFocus(1);
		prevent = true;
	}
	
	if(e.key == "q" || e.key == " ") {
		let cf = currentFocus();
		let expandable = cf && Array.from(cf.querySelectorAll("." + prefixed("-thumb"))) || []
		let first = expandable.map((ex) => thumbToggle(ex)).shift()
		if(first)
			first.then((f) => {
				setFocus(f, cf)
			});
		prevent = true;
	}

	if(focus) {
		setFocus(focus)
	}
	
	if (e.key == "e") {
		let cf = currentFocus();
		if(!cf)
			return;
		let config = cf.closest(".tweet").dataset
		let todownload = [];
		if(cf.matches("." + prefixed("-expanded")))
			 todownload.push(cf.href);
		todownload.push(...Array.from(cf.querySelectorAll("a." + prefixed("-orig-link"))).map((el) => el.href))
		
		for(let link of todownload) {
			downloadOrig(link, config)
		}
		prevent = true;
	}
	
	if(prevent)
		e.preventDefault();
}

function downloadOrig(url, meta) {
		fetch(url, {redirect: "follow", mode: "cors"}).then(response => response.blob()).then((blob) => {
				const a = document.createElement("a")
				const blobUri = URL.createObjectURL(blob);
  			a.href = blobUri
  	 		
  			let name = url.match(/^.*\/(.*?):orig$/)[1]
  			a.download = `@${meta.screenName} ${meta.tweetId} orig ${name}`
  			const event = document.createEvent("MouseEvents")
  			event.initMouseEvent(
  				"click", true, false, window, 0, 0, 0, 0, 0,
  				false, false, false, false, 0, null
  			)
  			a.dispatchEvent(event)
		})
}

function setFocus(focus, expect) {
		let cf = currentFocus()
		if(expect && cf != expect)
			return;
		if(cf)
			cf.classList.remove(prefixed("-focused"));
		focus.classList.add(prefixed("-focused"))
		focus.scrollIntoView()
		let offset = document.querySelector(".ProfileCanopy-inner");
		offset = offset && offset.scrollHeight
		if(offset) {
			offset = offset + 5;
			window.scrollBy(0, -offset);
		} 
			
}

function currentFocus() {
	return document.querySelector(`.${prefixed("-focused")}`)
}

function mod(n, m) {
	return ((n % m) + m) % m;
}

function moveFocus(direction) {
	// TODO: mobile, tweetdeck
	
	let focusable = Array.from(document.querySelectorAll(`.tweet.has-content, .${prefixed("-expanded")}`))
	let idx = -1
	let cf = currentFocus()
	if(cf)
		idx = focusable.indexOf(cf);
	idx += direction;
	idx = mod(idx, focusable.length)
	let newFocus = focusable[idx]
	
	return newFocus
}


init();
欢迎访问Greasy Fork镜像
