obsidian-plugin/gnoxnahte_obsidian-auto-embed
1
0
Fork 0
mirror of https://github.com/gnoxnahte/obsidian-auto-embed.git synced 2026-07-22 09:50:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add back reddit auto resize but with conditions

Browse source 
Only resize if there's only 1 reddit embed. Or the user can opt to resize automatically in the settings.
This commit is contained in:
GnoxNahte 2024-03-06 15:35:40 +08:00
parent 40ae8a410a
commit ca27fbf44d
2 changed files with 63 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
embeds/reddit.ts
View file

@ -1,15 +1,14 @@
import { PluginSettings } from "main";
import { EmbedBase } from "./embedBase";
export class RedditEmbed extends EmbedBase {
name = "Reddit";
regex = new RegExp(/reddit.com/);
// onload(): void {
// window.addEventListener("message", this.listenForRedditResize);
// }
onload(): void {
window.addEventListener("message", this.listenForRedditResize);
}
createEmbed(url: string, settings: Readonly<PluginSettings>): HTMLElement {
createEmbed(url: string): HTMLElement {
const regexMatch = url.match(this.regex);
// Shouldn't happen since got test before. But in case
if (regexMatch === null)
@ -19,49 +18,67 @@ export class RedditEmbed extends EmbedBase {
// Creating the iframe
const iframe = createEl("iframe");
iframe.classList.add(this.autoEmbedCssClass, "reddit-embed");
iframe.id += "reddit-" + postId[1];
url = url.replace("www.reddit.com", "reddit.com"); // Remove "www"
url = url.replace("reddit.com", "embed.reddit.com"); // Add embed subdomain
iframe.src = url;
if (this.plugin.settings.darkMode)
{
url += (url.contains('?') ? "&" : "?") + "theme=dark";
}
iframe.classList.add(this.autoEmbedCssClass, "reddit-embed");
iframe.id += "reddit-" + postId[1];
iframe.src = url;
// TODO: Dynamically set iframe height:
// Methods:
// - Listen to reddit's postmessage, reddit sends out a postmessage containing:
// {
// type: "resize.embed"
// data: [height value]
// }
// But it doesn't send the post id, so I'm not sure which iframe to set it to.
// - Get height from reddit api? Not sure how to do
// - Get content type from reddit api? Main heights are:
// - short text: 240px
// - long text (has a show more dropdown): 316px
// - picture / video: 739px
// iframe.style.height="unset";
return iframe;
}
// onunload() : void {
// window.removeEventListener("message", this.listenForRedditResize);
// }
onunload() : void {
window.removeEventListener("message", this.listenForRedditResize);
}
// listenForRedditResize(e: MessageEvent) {
// if (e.origin !== "https://embed.reddit.com")
// return;
// console.log("Path: " + e.composedPath());
// const data = JSON.parse(e.data);
listenForRedditResize(e: MessageEvent) {
if (e.origin !== "https://embed.reddit.com")
return;
// // Only continue if the method is for resizing
// if (data.type !== "resize.embed")
// return;
// const iframes = document.getElementsByClassName("reddit-embed") as HTMLCollectionOf<HTMLIFrameElement>;
// for (let i = 0; i < iframes.length; i++) {
// const iframe = iframes[i];
// // console.log("height:" + iframe.style.height);
// if (iframe.style.height === "unset")
// {
// console.log("Set: " + iframe.id + " to " + data.data);
// iframe.style.height = data.data + "px";
// break;
// }
// }
// // const iframe = document.getElementById("twitter-" + params["data"]["tweet_id"]) as HTMLIFrameElement;
// // console.log("Tweet-id: " + params["data"]["tweet_id"]);
// // if (iframe === null)
// // return;
const data = JSON.parse(e.data);
// // iframe.style.height = params["height"] + "px";
// // iframe.style.width = params["width"] + "px";
// }
// Only continue if the method is for resizing
if (data.type !== "resize.embed")
return;
const iframes = document.getElementsByClassName("reddit-embed") as HTMLCollectionOf<HTMLIFrameElement>;
if (iframes.length <= 1 || this.plugin.settings.redditAutoSize)
{
for (let i = 0; i < iframes.length; i++) {
const iframe = iframes[i];
// console.log("height:" + iframe.style.height);
// console.log("Set: " + iframe.id + " to " + data.data);
if (iframe.style.height === "")
{
iframe.style.height = data.data + "px";
break;
}
// console.log("Height: " + iframe.style.height);
}
}
}
}

8
styles.css
View file

@ -60,6 +60,12 @@ iframe.largest.auto-embed {
}
.auto-embed.reddit-embed {
min-height: 240px;
width: 100%;
height: 500px;
/* height: 500px; */
}
.auto-embed.codepen-embed {
width: 100%;
min-height: 300px;
}