---
layout: base
---
<script>
  
</script>
<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}}