implement some feautres in transcript search

layouts/transcript.hbs

@@ -2,10 +2,60 @@
 layout: base
 ---
 <script>
-  const transcript = {{{content}}}
+  
 </script>
-{{#each transcript}}
-<div>
-{{formatDuration this.data.start "hh:mm:ss"}}: {{this.data.text}}
+<script>
+  function findPos(obj) { 
+        var curtop = 0; 
+        if (obj.offsetParent) { 
+            do { 
+                curtop += obj.offsetTop; 
+            } while (obj = obj.offsetParent); 
+            return [curtop]; 
+        } 
+    }
+  var vid
+  document.addEventListener('DOMContentLoaded', ()=>{
+    vid = document.getElementById('audio-player')
+    var startingOffset = window.location.hash.substring(1);
+    if(startingOffset) {
+      const el = document.getElementById(`segment${startingOffset}`)
+        window.scroll(0,findPos(el));
+        el.classList.add('fw-bolder', 'active')
+        vid.currentTime=el.dataset.timestart
+    }
+    var segmentsTimeList = Array.from(document.querySelectorAll('.segment')).map((s)=>({...s.dataset, id: s.id, element: s}))
+    vid.addEventListener('timeupdate', (event)=>{
+      const currentSegment = segmentsTimeList.find(s=>s.timestart<vid.currentTime && s.timeend>vid.currentTime)?.element
+      document.querySelectorAll('.segment').forEach(s=>s.classList.remove('fw-bolder', 'active'))
+      if (currentSegment){currentSegment.classList.add('fw-bolder','active')}
+      console.log(event)
+    })
+  })
+</script>
+{{#with (getEpisodeData collections.episode season episode) as |episode_data|}}
+<h1>{{#if episode_data.title}}{{{episode_data.title}}}{{else}}Episode {{episode_data.episode}}{{/if}}</h1>
+      Season {{episode_data.season}}, Episode {{episode_data.episode}} <br>
+      <date>{{formatDate episode_data.date "MMMM d, yyyy"}}</date><br>
+<hr>
+{{#if episode_data.podcast}}
+  {{#if episode_data.podcast.enclosureUrl}}
+    <audio controls id="audio-player" >
+      <source src="{{{episode_data.podcast.enclosureUrl}}}" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+  {{/if}}
+{{/if}}
+{{/with}}
+{{#each segments as |segment|}}
+<div class="segment", id="segment{{segment.id}}" data-segment-id="{{segment.id}}" data-timestart="{{divide segment.start 1000}}" data-timeend="{{divide segment.end 1000}}" >
+  <p id="{{segment.id}}">
+    <div class="btn-group">
+      <span class="time btn btn-sm btn-outline-dark p-0 px-1 disabled">{{formatDuration segment.start "hh:mm:ss"}}</span>
+      <a class="btn btn-sm btn-outline-dark p-0" onclick="vid.pause()"><i class="bi bi-pause-fill"></i></a>
+      <a class="btn btn-sm btn-outline-dark p-0 " onclick="vid.currentTime={{divide segment.start 1000}};vid.play()"><i class="bi bi-play-fill"></i></a>
+    </div>
+    <span>{{segment.text}}</span>
+  </p>
 </div>
 {{/each}}