- Notifications
You must be signed in to change notification settings - Fork35
YouTube's Fast-Forward-Rewind double tapping feature built on top of ExoPlayer
License
vkay94/DoubleTapPlayerView
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A simple library to include double tap behavior to ExoPlayer's PlayerView.Created to handle fast forward/rewind behavior like YouTube.
If you would like to test the YouTube overlay, then you can either download the demo app,which can be found under Assets of the release or build it yourself from code.It provides all main modifications available.
The sample videos own byBlender Foundation and a full list can be foundhere.
The Gradle dependency is available viajitpack.io.To be able to load this library, you have to add the repository to your project's gradle file:
allprojects { repositories {... maven { url'https://jitpack.io' } }}
Then, in your app's directory, you can include it the same way like other libraries:
android {...// If you face problems during building you should try including the below lines if you// haven't already// compileOptions {// sourceCompatibility JavaVersion.VERSION_1_8// targetCompatibility JavaVersion.VERSION_1_8// }}dependencies { implementation'com.github.vkay94:DoubleTapPlayerView:1.0.4'}
The minimum API level supported by this library is API 16 as ExoPlayer does, but I can'tverify versions below API level 21 (Lollipop) myself. So feedback is welcomed.
In order to start using the YouTube overlay, the easiest way is to include it directlyinto your XML layout, e.g. on top ofDoubleTapPlayerView or inside ExoPlayer's controller:
<FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent" > <com.github.vkay94.dtpv.DoubleTapPlayerViewandroid:id="@+id/playerView"android:layout_width="match_parent"android:layout_height="match_parent"app:dtpv_controller="@+id/youtube_overlay" /> <com.github.vkay94.dtpv.youtube.YouTubeOverlayandroid:id="@+id/youtube_overlay"android:layout_width="match_parent"android:layout_height="match_parent"android:visibility="invisible"app:yt_playerView="@+id/playerView" /></FrameLayout>
Then, inside yourActivity orFragment, you can specify which preparations should be donebefore and after the animation, but at least, you have got to toggle the visibility of theoverlay and reference the (Simple)ExoPlayer to it:
youtube_overlay .performListener(object:YouTubeOverlay.PerformListener {overridefunonAnimationStart() {// Do UI changes when circle scaling animation starts (e.g. hide controller views) youtube_overlay.visibility=View.VISIBLE }overridefunonAnimationEnd() {// Do UI changes when circle scaling animation starts (e.g. show controller views) youtube_overlay.visibility=View.GONE } })// Uncomment this line if you haven't set yt_playerView in XML// .playerView(playerView)// Uncomment this line if you haven't set dtpv_controller in XML// playerView.controller(youtube_overlay)// Call this method whenever the player is released and recreatedyoutube_overlay.player(simpleExoPlayer)
This way, you have more control about the appearance, for example you could apply a fadinganimation to it. For a full initialization you can refer to the demo application's MainActivityand layout files.
The following sections provide detailed documentation for the components of the library.
DoubleTapPlayerView is the core of this library. It recognizes specific gestureswhich provides more control for the double tapping gesture.An overview about the added methods can be found in thePlayerDoubleTapListenerinterface.
You can adjust how long the double tap mode remains after the last action,the default value is 650 milliseconds.
YouTubeOverlay is the reason for this library. It provides nearly thesame experience like the fast forward/rewind feature which is used by YouTube'sAndroid app. It is highly modifiable.
If you add the view to your XML layout you can set some custom attributesto customize the view's look and behavior.Every attributes value can also be get and set programmatically.
| Attribute name | Description | Type |
|---|---|---|
yt_seekSeconds | Fast forward/rewind seconds skip per tap. The textxx seconds will be changed where xx isvalue. | int |
yt_animationDuration | Speed of the circle scaling / time in millis to expand completely. When this time has passed, YouTubeOverlay'sPerformListener.onAnimationEnd() will be called. | int |
yt_arcSize | Arc of the background circle. The higher the value the more roundish the shape becomes. This attribute should be set dynamically depending on screen size and orientation. | dimen |
yt_tapCircleColor | Color of the scaling circle after tap. | color |
yt_backgroundCircleColor | Color of the background shape. | color |
yt_iconAnimationDuration | Time in millis to run through an full fade cycle. | int |
yt_icon | One of the three forward icons. Will be multiplied by three and mirrored for rewind. | drawable |
yt_textAppearance | Text appearance for thexx seconds text. | style |
I'd recommend the sample app to try out the different values for them.
This interface listens to thelifecycle of the overlay.
// Obligatory: Called when the overlay is not visible and the first valid double tap event occurred.// Visibility of the overlay should be set to VISIBLE within this interface method.funonAnimationStart()// Obligatory: Called when the circle animation is finished.// Visibility of the overlay should be set to GONE or INVISIBLE within this interface method.funonAnimationEnd()// Optional: Determines whether the player should forward (true), rewind (false) or ignore (null) taps.funshouldForward(player:Player,playerView:DoubleTapPlayerView,posX:Float):Boolean?
This interface reacts to the events during rewinding/forwarding.
// Called when the start of the video is reachedfunonVideoStartReached()// Called when the end of the video is reachedfunonVideoEndReached()
About
YouTube's Fast-Forward-Rewind double tapping feature built on top of ExoPlayer