|
| 1 | +# DoubleTapPlayerView |
| 2 | + |
| 3 | +A simple library to include double tap behavior to ExoPlayer's PlayerView. |
| 4 | +Created to handle fast forward/rewind behavior like YouTube. |
| 5 | + |
| 6 | + |
| 7 | + |
| 8 | +# Sample app |
| 9 | + |
| 10 | +If you would like to test the YouTube overlay, then you can either download the demo app, |
| 11 | +which can be found under Assets of the release or build it yourself from code. |
| 12 | +It provides all main modifications available. |
| 13 | + |
| 14 | +The sample videos own by *Blender Foundation* and a full list can be found [here][videolist]. |
| 15 | + |
| 16 | +# Download |
| 17 | + |
| 18 | +The Gradle dependency is available via [jitpack.io][jitpack]. |
| 19 | +To be able to load this library, you have to add the repository to your project's gradle file: |
| 20 | + |
| 21 | +```gradle |
| 22 | +allprojects { |
| 23 | + repositories { |
| 24 | + ... |
| 25 | + maven { url 'https://jitpack.io' } |
| 26 | + } |
| 27 | +} |
| 28 | +``` |
| 29 | + |
| 30 | +Then, in your app's directory, you can include it the same way like other libraries: |
| 31 | + |
| 32 | +```gradle |
| 33 | +android { |
| 34 | + ... |
| 35 | + // If you face problems during building you should try including the below lines if you |
| 36 | + // haven't already |
| 37 | + |
| 38 | + // compileOptions { |
| 39 | + // sourceCompatibility JavaVersion.VERSION_1_8 |
| 40 | + // targetCompatibility JavaVersion.VERSION_1_8 |
| 41 | + // } |
| 42 | +} |
| 43 | +
|
| 44 | +dependencies { |
| 45 | + implementation 'com.github.vkay94:DoubleTapPlayerView:1.0.4' |
| 46 | +} |
| 47 | +``` |
| 48 | + |
| 49 | +The minimum API level supported by this library is API 16 as ExoPlayer does, but I can't |
| 50 | +verify versions below API level 21 (Lollipop) myself. So feedback is welcomed. |
| 51 | + |
| 52 | +# Getting started |
| 53 | + |
| 54 | +In order to start using the YouTube overlay, the easiest way is to include it directly |
| 55 | +into your XML layout, e.g. on top of `DoubleTapPlayerView` or inside ExoPlayer's controller: |
| 56 | + |
| 57 | +```xml |
| 58 | +<FrameLayout |
| 59 | + android:layout_width="match_parent" |
| 60 | + android:layout_height="match_parent" > |
| 61 | + |
| 62 | + <com.github.vkay94.dtpv.DoubleTapPlayerView |
| 63 | + android:id="@+id/playerView" |
| 64 | + android:layout_width="match_parent" |
| 65 | + android:layout_height="match_parent" |
| 66 | + |
| 67 | + app:dtpv_controller="@+id/youtube_overlay" /> |
| 68 | + |
| 69 | + <com.github.vkay94.dtpv.youtube.YouTubeOverlay |
| 70 | + android:id="@+id/youtube_overlay" |
| 71 | + android:layout_width="match_parent" |
| 72 | + android:layout_height="match_parent" |
| 73 | + android:visibility="invisible" |
| 74 | + |
| 75 | + app:yt_playerView="@+id/playerView" /> |
| 76 | +</FrameLayout> |
| 77 | +``` |
| 78 | + |
| 79 | +Then, inside your `Activity` or `Fragment`, you can specify which preparations should be done |
| 80 | +before and after the animation, but at least, you have got to toggle the visibility of the |
| 81 | +overlay and reference the (Simple)ExoPlayer to it: |
| 82 | + |
| 83 | +```kotlin |
| 84 | +youtube_overlay |
| 85 | + .performListener(object : YouTubeOverlay.PerformListener { |
| 86 | + override fun onAnimationStart() { |
| 87 | + // Do UI changes when circle scaling animation starts (e.g. hide controller views) |
| 88 | + youtube_overlay.visibility = View.VISIBLE |
| 89 | + } |
| 90 | + |
| 91 | + override fun onAnimationEnd() { |
| 92 | + // Do UI changes when circle scaling animation starts (e.g. show controller views) |
| 93 | + youtube_overlay.visibility = View.GONE |
| 94 | + } |
| 95 | + }) |
| 96 | + // Uncomment this line if you haven't set yt_playerView in XML |
| 97 | + // .playerView(playerView) |
| 98 | + |
| 99 | +// Uncomment this line if you haven't set dtpv_controller in XML |
| 100 | +// playerView.controller(youtube_overlay) |
| 101 | + |
| 102 | +// Call this method whenever the player is released and recreated |
| 103 | +youtube_overlay.player(simpleExoPlayer) |
| 104 | +``` |
| 105 | + |
| 106 | +This way, you have more control about the appearance, for example you could apply a fading |
| 107 | +animation to it. For a full initialization you can refer to the demo application's MainActivity |
| 108 | +and layout files. |
| 109 | + |
| 110 | +--- |
| 111 | + |
| 112 | +# API documentation |
| 113 | + |
| 114 | +The following sections provide detailed documentation for the components of the library. |
| 115 | + |
| 116 | +## DoubleTapPlayerView |
| 117 | + |
| 118 | +`DoubleTapPlayerView` is the core of this library. It recognizes specific gestures |
| 119 | +which provides more control for the double tapping gesture. |
| 120 | +An overview about the added methods can be found in the [PlayerDoubleTapListener][PlayerDoubleTapListener] |
| 121 | +interface. |
| 122 | + |
| 123 | +You can adjust how long the double tap mode remains after the last action, |
| 124 | +the default value is 650 milliseconds. |
| 125 | + |
| 126 | +## YouTubeOverlay |
| 127 | + |
| 128 | +`YouTubeOverlay` is the reason for this library. It provides nearly the |
| 129 | +same experience like the fast forward/rewind feature which is used by YouTube's |
| 130 | +Android app. It is highly modifiable. |
| 131 | + |
| 132 | +### XML attributes |
| 133 | + |
| 134 | +If you add the view to your XML layout you can set some custom attributes |
| 135 | +to customize the view's look and behavior. |
| 136 | +Every attributes value can also be get and set programmatically. |
| 137 | + |
| 138 | +| Attribute name | Description | Type | |
| 139 | +| ------------- | ------------| ------| |
| 140 | +| `yt_seekSeconds` | Fast forward/rewind seconds skip per tap. The text *xx seconds* will be changed where xx is `value`. | `int` | |
| 141 | +| `yt_animationDuration` | Speed of the circle scaling / time in millis to expand completely. When this time has passed, YouTubeOverlay's `PerformListener.onAnimationEnd()` will be called. | `int` | |
| 142 | +| `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` | |
| 143 | +| `yt_tapCircleColor` | Color of the scaling circle after tap. | `color` | |
| 144 | +| `yt_backgroundCircleColor` | Color of the background shape. | `color` | |
| 145 | +| `yt_iconAnimationDuration` | Time in millis to run through an full fade cycle. | `int` | |
| 146 | +| `yt_icon` | One of the three forward icons. Will be multiplied by three and mirrored for rewind. | `drawable` | |
| 147 | +| `yt_textAppearance` | Text appearance for the *xx seconds* text. | `style` | |
| 148 | + |
| 149 | +I'd recommend the sample app to try out the different values for them. |
| 150 | + |
| 151 | +### YouTubeOverlay.PerformListener |
| 152 | + |
| 153 | +This interface listens to the *lifecycle* of the overlay. |
| 154 | + |
| 155 | +```kotlin |
| 156 | +// Obligatory: Called when the overlay is not visible and the first valid double tap event occurred. |
| 157 | +// Visibility of the overlay should be set to VISIBLE within this interface method. |
| 158 | +fun onAnimationStart() |
| 159 | + |
| 160 | +// Obligatory: Called when the circle animation is finished. |
| 161 | +// Visibility of the overlay should be set to GONE or INVISIBLE within this interface method. |
| 162 | +fun onAnimationEnd() |
| 163 | + |
| 164 | +// Optional: Determines whether the player should forward (true), rewind (false) or ignore (null) taps. |
| 165 | +fun shouldForward(player: Player, playerView: DoubleTapPlayerView, posX: Float): Boolean? |
| 166 | +``` |
| 167 | + |
| 168 | +### SeekListener |
| 169 | + |
| 170 | +This interface reacts to the events during rewinding/forwarding. |
| 171 | + |
| 172 | +```kotlin |
| 173 | +// Called when the start of the video is reached |
| 174 | +fun onVideoStartReached() |
| 175 | + |
| 176 | +// Called when the end of the video is reached |
| 177 | +fun onVideoEndReached() |
| 178 | +``` |
| 179 | + |
| 180 | +[videolist]: https://gist.github.com/jsturgis/3b19447b304616f18657 |
| 181 | +[jitpack]: https://jitpack.io/#vkay94/DoubleTapPlayerView |
| 182 | +[PlayerDoubleTapListener]: https://github.com/vkay94/DoubleTapPlayerView/blob/master/doubletapplayerview/src/main/java/com/github/vkay94/dtpv/PlayerDoubleTapListener.java |
0 commit comments