61 lines
2.5 KiB
Handlebars
61 lines
2.5 KiB
Handlebars
---
|
|
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}} |