Add player controls - temporal fragment bindings

src/processor.ts

@@ -1,12 +1,74 @@
 import { MarkdownPostProcessor, MarkdownPostProcessorContext } from "obsidian";
 
+const tFragRegex = /(?<=#)t=(?<start>[\w:\.]*?)(?:,(?<end>[\w:\.]+?))?$/;
+
+/**
+ * HTMLMediaElement with temporal fragments
+ */
+interface HME_TF extends HTMLMediaElement{
+  startTime:number;
+  endTime:number;
+}
+
+function onplaying(event: Event) {
+  const player = event.target as HME_TF;
+  const { startTime,endTime, currentTime } = player;
+  // check if is HME_TF object
+  if (startTime||endTime){
+    if (currentTime>endTime||currentTime<startTime){
+      player.currentTime=startTime;
+    }
+  }
+}
+
+function ontimeupdate(event: Event) {
+  const player = event.target as HME_TF;
+  const { startTime,endTime, currentTime } = player;
+  // check if is HME_TF object
+  if ((startTime || endTime) && currentTime > endTime) {
+    if (!player.loop){
+      player.pause();
+    } else {
+      player.currentTime = startTime;
+    }
+
+  }
+}
+
+
+
+function getTimeSpan(start:string|undefined,end:string|undefined){
+  // start may be an empty string
+  const startRaw = start ? start : null;
+  const endRaw = end ?? null;
+
+  let startTime, endTime
+  if (startRaw && endRaw){
+    startTime=convertTime(startRaw);
+    endTime=convertTime(endRaw);
+  }
+  else if (startRaw){
+    startTime=convertTime(startRaw);
+    endTime=Infinity;
+  }
+  else if (endRaw){
+    startTime=0;
+    endTime=convertTime(endRaw);
+  } else {throw new Error("Missing startTime and endTime");}
+
+  return {startTime,endTime};
+}
+
+function convertTime(input: string) {
+  return +input;
+}
+
 export function processInternalEmbeds(el:HTMLElement, ctx:MarkdownPostProcessorContext) {
 
   const internalEmbedObs = new MutationObserver(
     // Update embed's src to include temporal fragment when it is loaded
     (mutationsList, observer) => {
       // See also: https://www.w3.org/TR/media-frags/#valid-uri
-      const tFragRegex = /(?<=#)t=([\w:\.]*?)(?:,([\w:\.]+?))?$/;
       for (const m of mutationsList) {
         if (m.addedNodes.length) {
           switch (m.addedNodes[0].nodeName) {
@@ -16,11 +78,19 @@ export function processInternalEmbeds(el:HTMLElement, ctx:MarkdownPostProcessorC
                 .getAttr("src")
                 .match(tFragRegex);
               if (matchArray) {
-                const embed = m.addedNodes[0] as HTMLMediaElement;
+                const player = m.addedNodes[0] as HME_TF;
+                const timeSpan = getTimeSpan(
+                  matchArray.groups.start,
+                  matchArray.groups.end
+                );
+                // import timestamps to 
+                Object.assign(player,timeSpan);
                 const tFrag = matchArray[0];
-                const url = new URL(embed.src);
+                const url = new URL(player.src);
                 url.hash = tFrag;
-                embed.src = url.toString();
+                player.src = url.toString();
+                player.onplaying = onplaying;
+                player.ontimeupdate = ontimeupdate;
               }
               break;
             case "IMG":