feat: add setting for thumbnailPlaceholder

src/main.ts

@@ -13,7 +13,7 @@ export default class MediaExtended extends Plugin {
 
   processInternalEmbeds = processInternalEmbeds;
   processInternalLinks = processInternalLinks.bind(this);
-  processExternalEmbeds = processExternalEmbeds;
+  processExternalEmbeds = processExternalEmbeds.bind(this);
 
   async loadSettings() {
     Object.assign(this.settings, await this.loadData());

src/modules/handlers.ts

@@ -67,11 +67,11 @@ export class ExternalEmbedHandler {
     } else return this;
   }
 
-  doVideoHost(): this | null {
+  doVideoHost(thumbnail: boolean): this | null {
     const url = this.srcUrl;
     if (!url) return this;
 
-    const newEl = getPlayer(url);
+    const newEl = getPlayer(url, thumbnail);
     if (newEl) {
       this.replaceWith(newEl);
       return null;

src/modules/videoHostTools.ts

@@ -101,26 +101,24 @@ export function getVideoInfo(src: URL): videoInfo | null {
   }
 }
 
-export function getPlayer(url: URL): HTMLDivElement | null {
+export function getPlayer(url: URL, thumbnail = false): HTMLDivElement | null {
   let info = getVideoInfo(url);
   if (!info) return null;
   const container = createDiv({ cls: "external-video" });
   switch (info.host) {
-    case Host.YouTube: {
-      setupThumbnail(container, info);
-      return container;
-    }
-    case Host.Vimeo: {
-      setupThumbnail(container, info);
-      return container;
-    }
-    case Host.Bilibili: {
-      setupThumbnail(container, info);
-      return container;
-    }
+    case Host.YouTube:
+    case Host.Vimeo:
+      if (thumbnail) setupThumbnail(container, info);
+      else setupPlyr(container, info);
+      break;
+    case Host.Bilibili:
+      if (thumbnail) setupThumbnail(container, info);
+      else setupIFrame(container, info);
+      break;
     default:
       assertNever(info.host);
   }
+  return container;
 }
 
 function getIFrame(info: videoInfo) {

src/processor.ts

@@ -56,11 +56,14 @@ export function processInternalEmbeds(el: HTMLElement) {
   }
 }
 
-export function processExternalEmbeds(docEl: HTMLElement) {
+export function processExternalEmbeds(this: MediaExtended, docEl: HTMLElement) {
   const handler = new ExternalEmbedHandler();
   for (const el of docEl.querySelectorAll("img[referrerpolicy]")) {
     // <img src="" referrerpolicy="no-referrer">
     const img = el as HTMLImageElement;
-    handler.setTarget(img).doDirectLink()?.doVideoHost();
+    handler
+      .setTarget(img)
+      .doDirectLink()
+      ?.doVideoHost(this.settings.thumbnailPlaceholder);
   }
 }

src/settings.ts

@@ -5,12 +5,14 @@ export interface MxSettings {
   mediaFragmentsEmbed: boolean;
   timestampLink: boolean;
   extendedImageEmbedSyntax: boolean;
+  thumbnailPlaceholder: boolean;
 }
 
 export const DEFAULT_SETTINGS: MxSettings = {
   mediaFragmentsEmbed: true,
   timestampLink: false,
   extendedImageEmbedSyntax: false,
+  thumbnailPlaceholder: false,
 };
 
 export class MESettingTab extends PluginSettingTab {
@@ -72,6 +74,23 @@ export class MESettingTab extends PluginSettingTab {
           descEl.appendText("Restart the app to take effects");
         }),
       },
+      {
+        k: "thumbnailPlaceholder",
+        name: "Placeholder in favor of full player",
+        desc: createFragment((descEl) => {
+          descEl.appendText(
+            "If enabled, thumbnail placeholder will be used in favor of full player when page loads",
+          );
+          descEl.createEl("br");
+          descEl.appendText("Works with for Youtube/Vimeo/Bilibili embeds");
+          descEl.createEl("br");
+          descEl.appendText(
+            "Helpful when numerous video from Youtube/Vimeo/... is embeded in one single file",
+          );
+          descEl.createEl("br");
+          descEl.appendText("Restart the app to take effects");
+        }),
+      },
     ];
 
     for (const o of options) {