Add a slider for time seek about zen-audio-player.github.io HOT 8 CLOSED

See #35 (index.html and everything.js) for inspiration

from zen-audio-player.github.io.

How's this going @eirism? Just checking in, no need to panic 😼

from zen-audio-player.github.io.

The dev/timeseek branch has a working implementatipn of it. The excact behaviour and placement/looks of it may need to be tweaked.

from zen-audio-player.github.io.

Just tested this out, it works pretty well!

Leaving some notes here so I don't forget:

• Change the setInterval() interval to a lower value, maybe 50ms instead of the current 100ms
• The seek slider should be above the time display
• We should try to visually distinguish the 2 sliders. Maybe make the volume one smaller? Maybe make the seek slider 400px wide? Maybe move the video times to either side of the slider, something like quicktime

from zen-audio-player.github.io.

More thoughts:

• Maybe the volume slider should be more vertical, like YouTube
  
• Maybe the time seek slider should have a tooltip instead of having current time & duration on either side (leaving 00:00 / 00:01 where it is below the slider), see example 8
  

from zen-audio-player.github.io.

We will need to install Bootstrap to use tooltips. For the volume slider, are you thinking of changing the circle for another icon? Sliders support unicode characters as handles, so if you find a suiting symbol we can use it.
Should the time tooltip be above or below the slider, and should it always be visible or only visible when hovering over/using it? Either way we will need to make space for the tooltip, so that it doesn't collide with the text around it.

from zen-audio-player.github.io.

Oh right, let's not pull in another UI dependency 😄

For the volume slider, are you thinking of changing the circle for another icon?

I played with the CSS a bit for the volume slider.

Obviously the selector will need to be more specific, but I think this visually looks close enough to a vertical line

.slider-handle {
    max-width: 3px;
}

Should the time tooltip be above or below the slider, and should it always be visible or only visible when hovering over/using it?

Let's try above, you can add a <br> or two for spacing

from zen-audio-player.github.io.

Done with #130

from zen-audio-player.github.io.