feat(getsetuptool()): add inline mute support

- add setHashOpt() to setup mute and loop for player - setPlayerTF() is always a function now, no need for null checks (check `timeSpan` to see timeSpan parse result)
PKM-er · May 15, 2021 · 86a5a2a · 86a5a2a
1 parent 63dd286
commit 86a5a2a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git a/src/modules/handlers.ts b/src/modules/handlers.ts
@@ -59,11 +59,12 @@ export class ExternalEmbedHandler {
     }
 
     if (fileType) {
-      const { setPlayerTF } = getSetupTool(this.src);
+      const { setPlayerTF, setHashOpt } = getSetupTool(this.src);
       let newEl = createEl(fileType);
       newEl.src = this.src;
       newEl.controls = true;
-      if (setPlayerTF) setPlayerTF(newEl);
+      setHashOpt(newEl);
+      setPlayerTF(newEl);
       this.replaceWith(newEl);
       return null;
     } else return this;
@@ -95,10 +96,11 @@ export function handleLink(
     throw new Error("no href found in a.internal-link");
   }
 
-  const { linktext, setPlayerTF } = getSetupTool(srcLinktext);
+  const { linktext, timeSpan, setPlayerTF, setHashOpt } =
+    getSetupTool(srcLinktext);
 
   // skip if timeSpan is missing or invalid
-  if (!setPlayerTF) return;
+  if (!timeSpan) return;
 
   const newLink = createEl("a", {
     cls: "internal-link",
@@ -120,24 +122,25 @@ export function handleLink(
         openedMedia.push(leaf.view.contentEl);
     });
 
-    const setPlayerTF = (e: HTMLElement): void => {
+    const setupPlayer = (e: HTMLElement): void => {
       // prettier-ignore
       const player = e.querySelector(
           "div.video-container > video, " +
           "div.audio-container > audio, " +
           "div.video-container > audio" // for webm audio
         ) as HTMLMediaElement;
       if (!player) throw new Error("no player found in FileView");
+      setHashOpt(player);
       setPlayerTF(player);
       player.play();
     };
 
-    if (openedMedia.length) openedMedia.forEach((e) => setPlayerTF(e));
+    if (openedMedia.length) openedMedia.forEach((e) => setupPlayer(e));
     else {
       const fileLeaf = workspace.createLeafBySplit(workspace.activeLeaf);
       fileLeaf.openFile(matchedFile).then(() => {
         if (fileLeaf.view instanceof FileView)
-          setPlayerTF(fileLeaf.view.contentEl);
+          setupPlayer(fileLeaf.view.contentEl);
       });
     }
   };
@@ -163,7 +166,7 @@ export async function handleMedia(
     throw new TypeError("src not found on container <span>");
   }
 
-  const { setPlayerTF } = getSetupTool(srcLinktext);
+  const { setPlayerTF, setHashOpt } = getSetupTool(srcLinktext);
 
   if (!(span.firstElementChild instanceof HTMLMediaElement)) {
     console.error("first element not player: %o", span.firstElementChild);
@@ -193,7 +196,8 @@ export async function handleMedia(
     if (info) info.tracks.forEach((t) => target.appendChild(t));
     const player = new Plyr(target, defaultPlyrOption);
     setRatio(container, player);
-    if (setPlayerTF) setPlayerTF(player);
+    setHashOpt(player);
+    setPlayerTF(player);
     return container;
   }
 

diff --git a/src/modules/playerSetup.ts b/src/modules/playerSetup.ts
@@ -43,13 +43,14 @@ export const defaultPlyrOption = {
 type setupTool = {
   linktext: string;
   timeSpan: TimeSpan | null;
-  isLoop: boolean;
-  setPlayerTF: ((player: Player) => void) | null;
+  loop: boolean;
+  muted: boolean;
+  setHashOpt: (player: Player) => void;
+  setPlayerTF: (player: Player) => void;
 };
 
 /**
  * @param src raw linktext (may contain #hash)
- * @returns setPlayerTF return null when timeSpan&loop not parsed from srcLinktext
  */
 export function getSetupTool(src: string | URL): setupTool {
   if (!src) throw new TypeError("srcLinktext empty");
@@ -65,19 +66,23 @@ export function getSetupTool(src: string | URL): setupTool {
   }
 
   const timeSpan = parseTF(hash);
+  // null: exist, with no value (#loop)
   const isLoop = parse(hash).loop === null;
-
-  let setPlayerTF: ((player: Player) => void) | null;
-  if (!timeSpan && !isLoop) setPlayerTF = null;
-  else
-    setPlayerTF = (player: Player): void => {
-      // null: exist, with no value (#loop)
-      if (isLoop) player.loop = true;
-      // import timestamps to player
+  const isMute = parse(hash).mute === null;
+
+  return {
+    linktext,
+    timeSpan,
+    loop: isLoop,
+    muted: isMute,
+    setPlayerTF: (player) => {
       if (timeSpan) injectTimestamp(player, timeSpan);
-    };
-
-  return { linktext, timeSpan, isLoop, setPlayerTF };
+    },
+    setHashOpt: (player) => {
+      if (isLoop) player.loop = isLoop;
+      if (isMute) player.muted = isMute;
+    },
+  };
 }
 
 /**
@@ -167,7 +172,6 @@ export function setRatio(containerEl: HTMLDivElement, player: Plyr) {
 
     const id = setInterval(() => {
       if (player.ratio) {
-        console.log("got it: ", player.ratio);
         // @ts-ignore
         containerEl.style.aspectRatio = player.ratio.replace(/:/, "/");
         clearInterval(id);

diff --git a/src/modules/videohost/tools.ts b/src/modules/videohost/tools.ts
@@ -128,24 +128,25 @@ export function setupPlyr(container: HTMLDivElement, info: videoInfo): Plyr_TF {
   );
   plyrDiv.appendChild(iframe);
 
-  const { isLoop, timeSpan, setPlayerTF } = getSetupTool(info.src);
+  const { loop, timeSpan, setHashOpt, setPlayerTF } = getSetupTool(info.src);
   let youtube: any;
   if (info.host === Host.YouTube) {
     youtube = {
       // set start time
       start: timeSpan && timeSpan.start !== 0 ? timeSpan.start : undefined,
-      loop: +isLoop,
+      loop: +loop,
     };
   }
   // @ts-ignore
   Plyr.timeSpan = null;
   const player = new Plyr(plyrDiv, {
     ...defaultPlyrOption,
-    loop: { active: isLoop },
+    loop: { active: loop },
     youtube,
   }) as Plyr_TF;
   setRatio(container, player);
-  if (setPlayerTF) setPlayerTF(player);
+  setHashOpt(player);
+  setPlayerTF(player);
   return player;
 }