nihk / videopager

An app showing how to make an Instagram/YouTube Shorts/TikTok style video pager
MIT License
109 stars 17 forks source link

create progress bar for every video #10

Closed melbehiry closed 1 year ago

melbehiry commented 1 year ago

this is a perfect example, could you please give a hint or instruction on the best way if I want to add a linear progress bar within every screen, with the MVI? thanks :)

nihk commented 1 year ago

hey @Elbehiry. for the UI itself, ExoPlayer's PlayerControlView implementation provides some insight into this. it listens to Player events and also polls around once per second to get nearly real-time player timeline data, which gets set on a TimeBar (effectively a SeekBar). you could do the same thing and read the player's content data on each callback, such as content duration and position, and feed it into your own SeekBar to set its progress. (this repo deliberately avoids references to ExoPlayer APIs outside the :exo and :app modules, which is why there is a need (and preference) to use SeekBar and not TimeBar in the :videopager module.)

similarly, a user's interaction with SeekBar fires callbacks; in those you could set the AppPlayer instance's content position, based on what percentage of the SeekBar's total progress it was scrubbed to.

regarding MVI, your AppPlayer instance could expose a Flow which emits a data class that owns things like content position/duration. those data class instances would be created within and emitted from the timeline data callbacks on ExoPlayer described at the start of this comment. the same place where other AppPlayer streams are listened to would be a good place to add this new stream of content position/duration data, i.e. here. those emissions can ultimately be written to the ViewState in the MVI reducer.