feat: add inline autoplay support

add #play to enable video autoplay, similar to #loop and #loop
- add is() in setupTool to get
player property from hash

src/modules/handlers.ts

@@ -166,7 +166,7 @@ export async function handleMedia(
     throw new TypeError("src not found on container <span>");
   }
 
-  const { linktext, setPlayerTF, setHashOpt } = getSetupTool(srcLinktext);
+  const { is, linktext, setPlayerTF, setHashOpt } = getSetupTool(srcLinktext);
 
   if (!(span.firstElementChild instanceof HTMLMediaElement)) {
     console.error("first element not player: %o", span.firstElementChild);
@@ -194,7 +194,10 @@ export async function handleMedia(
     ctx.addChild(new SubtitleResource(container, info?.objUrls ?? []));
 
     if (info) info.tracks.forEach((t) => target.appendChild(t));
-    const player = new Plyr(target, defaultPlyrOption);
+    const player = new Plyr(target, {
+      ...defaultPlyrOption,
+      autoplay: is("autoplay"),
+    });
     setRatio(container, player);
     setHashOpt(player);
     setPlayerTF(player);

src/modules/playerSetup.ts

@@ -40,11 +40,13 @@ export const defaultPlyrOption = {
   controls: defaultPlyrControls,
 };
 
+/** Player Properties that can be controlled by hash */
+type PlayerProperties = "loop" | "muted" | "autoplay";
+
 type setupTool = {
   linktext: string;
   timeSpan: TimeSpan | null;
-  loop: boolean;
-  muted: boolean;
+  is: (prop: PlayerProperties) => boolean;
   setHashOpt: (player: Player) => void;
   setPlayerTF: (player: Player) => void;
 };
@@ -66,22 +68,31 @@ export function getSetupTool(src: string | URL): setupTool {
   }
 
   const timeSpan = parseTF(hash);
+  const hashQuery = parse(hash);
   // null: exist, with no value (#loop)
-  const isLoop = parse(hash).loop === null;
-  const isMute = parse(hash).mute === null;
+
+  const hashOpts = new Map<string, PlayerProperties>([
+    ["loop", "loop"],
+    ["mute", "muted"],
+    ["play", "autoplay"],
+  ]);
 
   return {
     linktext,
     timeSpan,
-    loop: isLoop,
-    muted: isMute,
+    is: (prop) => {
+      for (const [hash, key] of hashOpts) {
+        if (prop === key && hashQuery[hash] === null) return true;
+      }
+      return false;
+    },
     setPlayerTF: (player) => {
       if (timeSpan) injectTimestamp(player, timeSpan);
     },
-    setHashOpt: (player) => {
-      if (isLoop) player.loop = isLoop;
-      if (isMute) player.muted = isMute;
-    },
+    setHashOpt: (player) =>
+      hashOpts.forEach((key, hash) => {
+        if (hashQuery[hash] === null) player[key] = true;
+      }),
   };
 }
 

src/modules/videohost/tools.ts

@@ -128,20 +128,19 @@ export function setupPlyr(container: HTMLDivElement, info: videoInfo): Plyr_TF {
   );
   plyrDiv.appendChild(iframe);
 
-  const { loop, timeSpan, setHashOpt, setPlayerTF } = getSetupTool(info.src);
+  const { is, 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: +loop,
     };
   }
   // @ts-ignore
   Plyr.timeSpan = null;
   const player = new Plyr(plyrDiv, {
     ...defaultPlyrOption,
-    loop: { active: loop },
+    autoplay: is("autoplay"),
     youtube,
   }) as Plyr_TF;
   setRatio(container, player);