Create post viewer

src/lib/structures/TimelineImage.js

@@ -1,27 +1,103 @@
 const config = require("../../../config")
 const {proxyImage} = require("../utils/proxyurl")
 const {compile} = require("pug")
+const collectors = require("../collectors")
+const TimelineChild = require("./TimelineChild")
+require("../testimports")(collectors, TimelineChild)
 
 const rssDescriptionTemplate = compile(`
 p(style='white-space: pre-line')= caption
 img(alt=alt src=src)
 `)
 
-class GraphImage {
+class TimelineImage {
 	/**
 	 * @param {import("../types").GraphImage} data
+	 * @param {boolean} isDirect
 	 */
-	constructor(data) {
+	constructor(data, isDirect) {
 		this.data = data
-		this.data.edge_media_to_caption.edges.forEach(edge => edge.node.text = edge.node.text.replace(/\u2063/g, "")) // I don't know why U+2063 INVISIBLE SEPARATOR is in here, but it is, and it causes rendering issues with certain fonts.
+		this.isDirect = isDirect
+		this.proxyDisplayURL = proxyImage(this.data.display_url)
+		/** @type {import("../types").BasicOwner} */
+		this.basicOwner = null
+		/** @type {import("../types").ExtendedOwner} */
+		this.extendedOwner = null
+		/** @type {string} */
+		this.proxyOwnerProfilePicture = null
+		this.fixData()
 	}
 
-	getProxy(url) {
-		return proxyImage(url)
+	/**
+	 * This must not cause issues if called multiple times on the same data.
+	 */
+	fixData() {
+		this.data.edge_media_to_caption.edges.forEach(edge => edge.node.text = edge.node.text.replace(/\u2063/g, "")) // I don't know why U+2063 INVISIBLE SEPARATOR is in here, but it is, and it causes rendering issues with certain fonts.
+		this.basicOwner = {
+			id: this.data.owner.id,
+			username: this.data.owner.username
+		}
+		// @ts-ignore
+		if (this.data.owner.full_name !== undefined) this.extendedOwner = this.data.owner
+		if (this.extendedOwner) this.proxyOwnerProfilePicture = proxyImage(this.extendedOwner.profile_pic_url)
+	}
+
+	/**
+	 * @param {import("../types").GraphImage} data
+	 * @param {boolean} isDirect
+	 */
+	updateData(data, isDirect) {
+		this.data = data
+		this.isDirect = isDirect
+		this.fixData()
+	}
+
+	fetchDirect() {
+		return collectors.fetchShortcode(this.data.shortcode, true) // automatically calls updateData
+	}
+
+	/**
+	 * @returns {Promise<import("../types").ExtendedOwner>}
+	 */
+	fetchExtendedOwner() {
+		// Do we just already have the extended owner?
+		if (this.extendedOwner) {
+			return Promise.resolve(this.extendedOwner)
+		}
+		// The owner happens to be in the user cache, so update from that.
+		// This should maybe be moved to collectors.
+		else if (collectors.requestCache.has("user/"+this.basicOwner.username)) {
+			/** @type {import("./User")} */
+			const user = collectors.requestCache.get("user/"+this.basicOwner.username)
+			this.extendedOwner = {
+				id: user.data.id,
+				username: user.data.username,
+				full_name: user.data.full_name,
+				profile_pic_url: user.data.profile_pic_url
+			}
+			this.fixData()
+			return Promise.resolve(this.extendedOwner)
+		}
+		// All else failed, we'll re-request ourselves.
+		else {
+			return this.fetchDirect().then(() => this.extendedOwner) // collectors will manage the updating.
+		}
+	}
+
+	/**
+	 * @returns {TimelineImage[]|import("./TimelineChild")[]}
+	 */
+	getChildren() {
+		if (this.data.__typename === "GraphSidecar" && this.data.edge_sidecar_to_children && this.data.edge_sidecar_to_children.edges.length) {
+			return this.data.edge_sidecar_to_children.edges.map(edge => new TimelineChild(edge.node))
+		} else {
+			return [this]
+		}
 	}
 
 	/**
 	 * @param {number} size
+	 * @return {import("../types").Thumbnail}
 	 */
 	getSuggestedThumbnail(size) {
 		let found = null
@@ -29,18 +105,23 @@ class GraphImage {
 			found = tr
 			if (tr.config_width >= size) break
 		}
-		return found
+		return {
+			config_width: found.config_width,
+			config_height: found.config_height,
+			src: proxyImage(found.src, found.config_width) // do not resize to requested size because of hidpi
+		}
 	}
 
 	getSrcset() {
 		return this.data.thumbnail_resources.map(tr => {
-			const p = new URLSearchParams()
-			p.set("width", String(tr.config_width))
-			p.set("url", tr.src)
-			return `/imageproxy?${p.toString()} ${tr.config_width}w`
+			return `${proxyImage(tr.src, tr.config_width)} ${tr.config_width}w`
 		}).join(", ")
 	}
 
+	getSizes() {
+		return `(max-width: 820px) 120px, 260px` // from css :(
+	}
+
 	getCaption() {
 		if (this.data.edge_media_to_caption.edges[0]) return this.data.edge_media_to_caption.edges[0].node.text
 		else return null
@@ -76,4 +157,4 @@ class GraphImage {
 	}
 }
 
-module.exports = GraphImage
+module.exports = TimelineImage