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 settings tab

Browse source
This commit is contained in:
GnoxNahte 2024-03-06 15:36:06 +08:00
parent ca27fbf44d
commit a105ff0c80
7 changed files with 97 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
embeds/codepen.ts
View file

@ -1,11 +1,10 @@
import { PluginSettings } from "main";
import { EmbedBase } from "./embedBase";
export class CodepenEmbed extends EmbedBase {
name = "CodePen";
regex = new RegExp(/https:\/\/codepen\.io\/(\w+)\/pen\/(\w+)(\?.*)?/);
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)
@ -15,8 +14,11 @@ export class CodepenEmbed extends EmbedBase {
const iframe = createEl("iframe");
iframe.src = `https://codepen.io/${regexMatch[1]}/embed/${regexMatch[2]}?default-tab=result&editable=true`;
iframe.setAttribute("loading", "lazy");
iframe.setAttribute("allowfullscreen", "true");
iframe.setAttribute("allowtransparency", "true");
iframe.classList.add("auto-embed", "codepen-embed");
iframe.classList.add(this.autoEmbedCssClass, "codepen-embed");
return iframe;
}

8
embeds/embedBase.ts
View file

@ -1,14 +1,18 @@
import { PluginSettings } from "main";
import AutoEmbedPlugin from "main";
export abstract class EmbedBase {
readonly autoEmbedCssClass: string = "auto-embed";
readonly name: string;
// To identify if the anchor link matches the embed type
readonly regex: RegExp;
readonly plugin: AutoEmbedPlugin;
constructor(plugin: AutoEmbedPlugin) {
this.plugin = plugin;
}
abstract createEmbed(
link: string,
settings: Readonly<PluginSettings>,
): HTMLElement;
onload?(): void;

5
embeds/steam.ts
View file

@ -1,11 +1,10 @@
import { PluginSettings } from "main";
import { EmbedBase } from "./embedBase";
export class SteamEmbed extends EmbedBase {
name = "Steam";
regex = new RegExp(/https:\/\/store\.steampowered\.com\/app\/(\d+)/);
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)
@ -16,8 +15,6 @@ export class SteamEmbed extends EmbedBase {
iframe.src = `https://store.steampowered.com/widget/${regexMatch[1]}/`;
console.log("Class: " + this.autoEmbedCssClass);
iframe.classList.add(this.autoEmbedCssClass, "steam-embed");
return iframe;

7
embeds/twitter.ts
View file

@ -1,4 +1,3 @@
import { PluginSettings } from "main";
import { EmbedBase } from "./embedBase";
export class TwitterEmbed extends EmbedBase {
@ -9,7 +8,7 @@ export class TwitterEmbed extends EmbedBase {
window.addEventListener("message", this.listenForTwitterResize);
}
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,11 +18,11 @@ export class TwitterEmbed extends EmbedBase {
const iframe = createEl("iframe");
const postId = regexMatch[1];
url = "https://platform.twitter.com/embed/Tweet.html?dnt=true&theme=dark&id=" + postId;
url = `https://platform.twitter.com/embed/Tweet.html?dnt=true&theme=${this.plugin.settings.darkMode ? "dark" : "light"}&id=${postId}`;
iframe.src = url;
iframe.id += "twitter-" + postId;
iframe.classList.add("auto-embed", "twitter-embed");
iframe.classList.add(this.autoEmbedCssClass, "twitter-embed");
iframe.sandbox.add("allow-forms", "allow-presentation", "allow-same-origin", "allow-scripts", "allow-modals", "allow-popups");
iframe.setAttribute("scrolling", "no");

5
embeds/youtube.ts
View file

@ -1,4 +1,3 @@
import { PluginSettings } from "main";
import { EmbedBase } from "./embedBase";
export class YouTubeEmbed extends EmbedBase {
@ -10,7 +9,7 @@ export class YouTubeEmbed extends EmbedBase {
// TODO:
// - Add support for ignoring si=___id____. Think its for session id, is shown when user clicks the share button and copy the link.
regex = new RegExp(/(?:https?:\/\/)?(?:www\.)?youtu(?:\.be\/|be.com\/\S*\b(watch|embed|shorts|v|e|live)\b(?:(?:(?=\/[-a-zA-Z0-9_]{11,}(?!\S))\/)|(?:\S*v=|v\/)))([-a-zA-Z0-9_]{11,})(?:(?:\?|&)t=(\d+)s?)?/);
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)
@ -21,7 +20,7 @@ export class YouTubeEmbed extends EmbedBase {
const videoType = regexMatch[1]; // check if its a shorts
const videoId = regexMatch[2];
console.log(regexMatch);
// console.log(regexMatch);
if (videoId === undefined)
{
return this.onErrorCreatingEmbed();

27
main.ts
View file

@ -5,27 +5,18 @@ import { Plugin } from 'obsidian';
import { YouTubeEmbed } from 'embeds/youtube';
import { SteamEmbed } from 'embeds/steam';
import { RedditEmbed } from 'embeds/reddit';
import { AutoEmbedSettingTab, DEFAULT_SETTINGS, PluginSettings } from 'settings-tab';
// Remember to rename these classes and interfaces!
export interface PluginSettings {
mySetting: string;
darkMode: boolean;
}
const DEFAULT_SETTINGS: PluginSettings = {
mySetting: 'default',
darkMode: true,
}
export default class MyPlugin extends Plugin {
export default class AutoEmbedPlugin extends Plugin {
settings: PluginSettings;
embedSources: EmbedBase[] = [
new TwitterEmbed(),
new YouTubeEmbed(),
new RedditEmbed(),
new SteamEmbed(),
new CodepenEmbed(),
new TwitterEmbed(this),
new RedditEmbed(this),
new YouTubeEmbed(this),
new SteamEmbed(this),
new CodepenEmbed(this),
]
async onload() {
@ -35,6 +26,8 @@ export default class MyPlugin extends Plugin {
this.embedSources.forEach(source => {
source.onload?.();
});
this.addSettingTab(new AutoEmbedSettingTab(this.app, this));
this.registerMarkdownPostProcessor((el, ctx) => {
console.log("Registering markdown")
@ -86,7 +79,7 @@ export default class MyPlugin extends Plugin {
}
private createEmbed(embedSource: EmbedBase, link: string) {
const embed = embedSource.createEmbed(link, this.settings);
const embed = embedSource.createEmbed(link);
return embed;
}

70
settings-tab.ts Normal file
View file

@ -0,0 +1,70 @@
import AutoEmbedPlugin from "main";
import { App, PluginSettingTab, Setting } from "obsidian";
export interface PluginSettings {
// General
mySetting: string;
darkMode: boolean;
// Twitter
// Reddit
redditAutoSize: boolean; // Has some problems resizing when there are multiple reddit embeds
// YouTube
// Steam
// Codepen
}
export const DEFAULT_SETTINGS: PluginSettings = {
mySetting: 'default',
darkMode: true,
redditAutoSize: true,
}
export class AutoEmbedSettingTab extends PluginSettingTab {
plugin: AutoEmbedPlugin;
constructor(app: App, plugin: AutoEmbedPlugin) {
super(app, plugin);
this.plugin = plugin;
}
display(): void {
const {containerEl} = this;
containerEl.empty();
new Setting(containerEl)
.setName("Dark Mode")
.setDesc("Sets theme for embeds if the website allows")
.addToggle(toggle => toggle
.setValue(this.plugin.settings.darkMode)
.onChange(async (value) => {
this.plugin.settings.darkMode = value;
await this.plugin.saveSettings();
}))
new Setting(containerEl)
.setName("Reddit Auto Size")
.setDesc("There's a bug where it incorreclty assigns the wrong height if there's multiple reddit embeds. This toggles if it should auto resize or set a fixed size instead.")
.setTooltip("If anyone know how to fix it, please help. \nSee GitHub for the source code.")
.addToggle(toggle => toggle
.setValue(this.plugin.settings.darkMode)
.onChange(async (value) => {
this.plugin.settings.darkMode = value;
await this.plugin.saveSettings();
}))
}
// TODO: Reload markdown after closing settings
// hide() {
// console.log("Hiding settings");
// this.plugin.app.workspace.updateOptions();
// }
}