{{template "header" .}}
<div class="player-page">
  <div>
    <div class="player-wrap show-stage">
      <img id="slide" class="slide-img" alt="">
    </div>
    <div class="video-info">
      <h1>{{.Show.Title}}</h1>
      <div class="meta">{{len .Show.Slides}} photos · {{.Show.Seconds}}s each · {{.Show.Owner}}</div>
      {{if .Show.Music}}<audio id="bed" src="{{.Show.Music}}" loop></audio>{{end}}
      <button class="btn btn-outline" type="button" id="prev">Prev</button>
      <button class="btn btn-green" type="button" id="toggle">Pause</button>
      <button class="btn btn-outline" type="button" id="next">Next</button>
      {{if .Show.Music}}<button class="btn btn-outline" type="button" id="mute">Mute</button>{{end}}
    </div>
  </div>
</div>
<script>
(function () {
  var slides = [
    {{range $i, $s := .Show.Slides}}{{if $i}},{{end}}{{$s}}{{end}}
  ];
  var n = slides.length || 1;
  var i = 0, playing = true, lastSrc = '';
  var img = document.getElementById('slide');
  var bed = document.getElementById('bed');
  var sec = {{.Show.Seconds}} || 4;
  var cycle = n * sec;
  var t0 = performance.now();
  var pausedAt = 0;

  function slideAt(t) {
    var idx = Math.floor(t / sec) % n;
    if (idx < 0) idx = 0;
    return idx;
  }
  function show(idx) {
    i = ((idx % n) + n) % n;
    var src = slides[i];
    if (src && src !== lastSrc) { lastSrc = src; img.src = src; }
  }
  function nowT() {
    if (bed && !isNaN(bed.currentTime) && bed.readyState >= 1) return bed.currentTime;
    if (!playing) return pausedAt;
    return (performance.now() - t0) / 1000;
  }
  function seekTo(idx) {
    i = ((idx % n) + n) % n;
    var t = i * sec;
    if (bed && bed.duration) {
      var loops = Math.floor((bed.currentTime || 0) / cycle);
      bed.currentTime = loops * cycle + t;
    } else {
      t0 = performance.now() - t * 1000;
      pausedAt = t;
    }
    show(i);
  }
  function tick() {
    if (playing) show(slideAt(nowT()));
    requestAnimationFrame(tick);
  }

  document.getElementById('next').onclick = function () { seekTo(i + 1); };
  document.getElementById('prev').onclick = function () { seekTo(i - 1); };
  document.getElementById('toggle').onclick = function () {
    playing = !playing;
    this.textContent = playing ? 'Pause' : 'Play';
    if (!bed) {
      if (playing) t0 = performance.now() - pausedAt * 1000;
      else pausedAt = nowT();
      return;
    }
    if (playing) bed.play().catch(function () {});
    else bed.pause();
  };
  var muteBtn = document.getElementById('mute');
  if (muteBtn && bed) muteBtn.onclick = function () {
    bed.muted = !bed.muted;
    muteBtn.textContent = bed.muted ? 'Unmute' : 'Mute';
  };
  if (bed) {
    bed.addEventListener('play', function () { playing = true; });
    bed.addEventListener('pause', function () { if (!bed.ended) playing = false; });
    bed.addEventListener('seeked', function () { show(slideAt(bed.currentTime)); });
    bed.play().catch(function () { playing = false; document.getElementById('toggle').textContent = 'Play'; });
  }
  show(0);
  requestAnimationFrame(tick);
})();
</script>
{{template "footer" .}}