From 411b1deda424199afc7720db5c7e4c4ee10648f3 Mon Sep 17 00:00:00 2001
From: AidenLx <aiden.lx@outlook.com>
Date: Thu, 13 May 2021 17:54:42 +0800
Subject: [PATCH] feat: add setting for thumbnailPlaceholder

---
 src/main.ts                   |  2 +-
 src/modules/handlers.ts       |  4 ++--
 src/modules/videoHostTools.ts | 24 +++++++++++-------------
 src/processor.ts              |  7 +++++--
 src/settings.ts               | 19 +++++++++++++++++++
 5 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 50c28f77..959866eb 100644
--- a/src/main.ts
+++ b/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());
diff --git a/src/modules/handlers.ts b/src/modules/handlers.ts
index 6180d91f..e3feb6b0 100644
--- a/src/modules/handlers.ts
+++ b/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;
diff --git a/src/modules/videoHostTools.ts b/src/modules/videoHostTools.ts
index e79ed859..22227d0a 100644
--- a/src/modules/videoHostTools.ts
+++ b/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) {
diff --git a/src/processor.ts b/src/processor.ts
index a82079b2..6a575b1a 100644
--- a/src/processor.ts
+++ b/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);
   }
 }
diff --git a/src/settings.ts b/src/settings.ts
index ca26c333..51f2a956 100644
--- a/src/settings.ts
+++ b/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) {