search

X-Ryl669 / kutr

A personal music streaming server that works.
MIT License
16 stars 3 forks source link

plyr (fast-forward / rewind) #5

Closed Fahad-pnw closed 7 years ago

Fahad-pnw commented 7 years ago

Hi, :) can you please guide me how would i go on about adding fast-forward and rewind buttons to the component? i have been trying for a few hours and of no luck, i cant seem to be able to access plyr's base functions through component.

X-Ryl669 commented 7 years ago

Plyr is there: kutr/resources/assets/js/services/playback.js Adding buttons is straightforward, you'll need to react on click by triggering the action on the plyr instance. The playback service will catch the action and deal with it to the action you want to do. So basically, you'll do:

  1. Add fastForward() method to playback that's calling the fast forward method of the plyr instance (via document.querySelector('.plyr').fastForward() ?? I don't know, you'll need to look into plyr's documentation)
  2. In the kutr/resources/assets/js/component/site-footer/index.vue, you'll add your button in the HTML part
  3. In the javascript code below, you'll add a method fastForward() { return playback.fastForward() }

This suppose you had a button that, when clicked, advance the playing time by a fixed amount. I'm pretty sure such behavior is useless, and likely, a seek function would be better. But that's another question, I guess.

Fahad-pnw commented 7 years ago

:) got it working, thanks!