removin’ spurrious console logs 🐦‍🔥

Slideshow.js

@@ -143,6 +143,7 @@ export class EventsArray extends Array {
 
 export class Slideshow {
   constructor() {
+    this.listeners = {} // event listeners
     this.configured = false // if the slideshow is ready to start
     this.loaded = false     // if the data files have been loaded
     this.events = new EventsArray() // Needs prototype to work
@@ -169,12 +170,12 @@ export class Slideshow {
     }
 
     const range = this.events.covering(time)
-    console.debug({ range, time })
     for(const event of range) {
       event.active = event.endTime > time
-      console.debug({ time, event, active: event.active })
     }
 
+    this.dispatchEvent(new Event('timeupdate'))
+
     this.lastSeekTime = time
   }
 
@@ -183,6 +184,10 @@ export class Slideshow {
     this.currentTime = 0
   }
 
+  togglePlaying() {
+    this.playing = !this.playing
+  }
+
   stop() {
     this.playing = false
   }
@@ -193,6 +198,7 @@ export class Slideshow {
     this.activeEvents.forEach((evt) => (
       evt.active = false
     ))
+    this.dispatchEvent(new Event('reset'))
   }
 
   async load(
@@ -469,18 +475,18 @@ export class Slideshow {
   }
 
   addEventListener(type, listener, bubble) {
-    if(type !== 'configure') {
+    if(!['configure', 'timeupdate'].includes(type)) {
       throw new Error(`Unknown Event Type: "${type}".`)
     }
-    this.configureListeners ??= []
-    this.configureListeners.push(listener)
+    this.listeners[type] ??= []
+    this.listeners[type].push(listener)
   }
 
   dispatchEvent(event) {
-    if(event.type !== 'configure') {
+    if(!['configure', 'timeupdate'].includes(event.type)) {
       throw new Error(`Unknown Event Type: "${event.type}".`)
     }
-    for(const listener of this.configureListeners ?? []) {
+    for(const listener of this.listeners[event.type] ?? []) {
       listener.call(listener, event)
     }
   }

UIInterface.js

@@ -15,6 +15,14 @@ import { DocumentInfo } from './Slideshow.js'
 export class UIInterface {
   constructor(container) {
     this.container = container
+
+    this.startLink = document.createElement('aside')
+    this.startLink.id = 'start'
+    const link = document.createElement('button')
+    link.setAttribute('onclick', show.start)
+    link.appendChild(document.createTextNode('Start Slideshow'))
+    this.startLink.appendChild(link)
+
     container.classList.add('loading')
 
     this.removeElements = false; // either removeChild or set display='none' on hide

control.js

@@ -49,19 +49,19 @@ function songLoadedCallback(filename) {
 }
 
 function resetShow() {
-  ui.container.appendChild(ui.container.startLink)
+  ui.container.appendChild(ui.startLink)
   audioPlayer?.pause()
   slideshow.reset()
 }
 
 function startShow() {
-  const { startLink } = ui.container
+  const { startLink } = ui
   if(nodeIsInDocument(startLink)) {
     startLink.parentNode.removeChild(startLink)
   }
-  slideshow.start()
-  audioPlayer?.play()
+  slideshow.paused = false
   if(audioPlayer) {
+    audioPlayer.play()
     if(
       typeof(slideshow.currentTime) !== 'number'
       || isNaN(slideshow.currentTime)
@@ -70,7 +70,7 @@ function startShow() {
         'Slideshow Time': slideshow.currentTime,
       })
     } else {
-      audioPlayer.currentTime = slideshow.currentTime
+      audioPlayer.currentTime = slideshow.currentTime / 1000
     }
   }
   step()
@@ -118,12 +118,6 @@ function step() {
 function setupContainer(containerName) {
   const container = document.getElementById(containerName)
   if(!container) throw new Error('Container not found.')
-  container.startLink = document.createElement('aside')
-  container.startLink.id = 'start'
-  const link = document.createElement('button')
-  link.setAttribute('onclick', 'startShow()')
-  link.appendChild(document.createTextNode('Start Slideshow'))
-  container.startLink.appendChild(link)
   return container
 }
 
@@ -132,33 +126,37 @@ function setupSlider(sliderName) {
   if(!slider) {
     throw new Error(`Slider "${sliderName}" not found.`)
   }
+  addListener(slider.parentNode, 'click', slideClicked, true)
   addListener(slider, 'mousedown', sliderSelected, true)
   addListener(slider, 'click', sliderClicked, true)
   return slider
 }
 
-function sliderClicked(event) {
-  if(!slideshow.playing) {
-    startShow()
-  } else {
-    stopShow()
-  }
+function slideClicked(event) {
+  sliderMouseAt(event.clientY)
+}
+
+function sliderClicked() {
+  slideshow.togglePlaying()
 }
 
 function sliderSelected(event) {
   slider.classList.add('active')
   addListener(document, 'mousemove', sliderDrag, true)
   addListener(document, 'mouseup', sliderRelease, true)
 
-  startSelectedTime = slideshow.currentTime
-  const link = ui.container.startLink
-  if(nodeIsInDocument(link.parentNode)) {
-    ui.container.removeChild(link)
+  const { startLink } = ui
+  if(nodeIsInDocument(startLink)) {
+    ui.container.removeChild(startLink)
   }
   stopShow()
 }
 
 function sliderDrag(event) {
+  sliderMouseAt(event.clientY)
+}
+
+function sliderMouseAt(yPosition) {
   const barStart = 0
   const barLength = slider.parentElement.clientHeight
   const { presentationTime: total } = slideshow
@@ -167,7 +165,7 @@ function sliderDrag(event) {
   }
   const sliderSize = slider.offsetHeight
   const center = Math.round(sliderSize / 2)
-  const position = event.clientY - center
+  const position = yPosition - center
   if(
     position >= barStart // after the start
     && position <= barLength - sliderSize // before the end
@@ -178,7 +176,7 @@ function sliderDrag(event) {
     if(debug && verbose) {
       console.debug({
         'Seeking': {
-          time, total,
+          yPosition, time, total,
           slider: {
             click: event.clientY, size: sliderSize,
             center, position,
@@ -191,7 +189,7 @@ function sliderDrag(event) {
     }
     slideshow.currentTime = time
     if(audioPlayer) {
-      audioPlayer.currentTime = time
+      audioPlayer.currentTime = time / 1000
     }
   }
 }