From 62566ff527634348ca76305e682af010d38c3bf4 Mon Sep 17 00:00:00 2001 From: Bnyro Date: Thu, 12 Jan 2023 18:00:50 +0100 Subject: [PATCH 1/3] Better forward and rewind icon --- app/src/main/res/drawable/ic_forward.xml | 29 ++++++++++++++----- app/src/main/res/drawable/ic_rewind.xml | 29 ++++++++++++++----- .../main/res/layout/double_tap_overlay.xml | 8 ++--- .../layout/exo_styled_player_control_view.xml | 8 ++--- 4 files changed, 46 insertions(+), 28 deletions(-) diff --git a/app/src/main/res/drawable/ic_forward.xml b/app/src/main/res/drawable/ic_forward.xml index 580ecf823..423f5458a 100644 --- a/app/src/main/res/drawable/ic_forward.xml +++ b/app/src/main/res/drawable/ic_forward.xml @@ -1,10 +1,23 @@ + android:width="42dp" + android:height="42dp" + android:viewportWidth="850.39" + android:viewportHeight="850.39"> - + android:fillColor="#00000000" + android:pathData="M707.35,279.28A317.52,317.52 0,0 1,744.09 428c0,176.13 -142.77,318.9 -318.89,318.9S106.3,604.16 106.3,428 249.07,109.14 425.2,109.14q14.13,0 28,1.2" + android:strokeWidth="45" + android:strokeColor="#fff" /> + + + + + \ No newline at end of file diff --git a/app/src/main/res/drawable/ic_rewind.xml b/app/src/main/res/drawable/ic_rewind.xml index abb2576c5..31ef69337 100644 --- a/app/src/main/res/drawable/ic_rewind.xml +++ b/app/src/main/res/drawable/ic_rewind.xml @@ -1,10 +1,23 @@ + android:width="42dp" + android:height="42dp" + android:viewportWidth="850.39" + android:viewportHeight="850.39"> - + android:fillColor="#00000000" + android:pathData="M143.05,279.28A317.41,317.41 0,0 0,106.3 428c0,176.13 142.77,318.9 318.9,318.9S744.09,604.16 744.09,428 601.32,109.14 425.2,109.14q-14.15,0 -28,1.2" + android:strokeWidth="45" + android:strokeColor="#fff" /> + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/double_tap_overlay.xml b/app/src/main/res/layout/double_tap_overlay.xml index 3f9cab4d3..5e4489b5a 100644 --- a/app/src/main/res/layout/double_tap_overlay.xml +++ b/app/src/main/res/layout/double_tap_overlay.xml @@ -32,9 +32,7 @@ android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" - android:layout_marginTop="2dp" - android:textColor="@android:color/white" - android:textSize="12sp" /> + android:textColor="@android:color/white" /> @@ -73,9 +71,7 @@ android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" - android:layout_marginTop="2dp" - android:textColor="@android:color/white" - android:textSize="12sp" /> + android:textColor="@android:color/white" /> diff --git a/app/src/main/res/layout/exo_styled_player_control_view.xml b/app/src/main/res/layout/exo_styled_player_control_view.xml index 67a19a84b..97d6bffed 100644 --- a/app/src/main/res/layout/exo_styled_player_control_view.xml +++ b/app/src/main/res/layout/exo_styled_player_control_view.xml @@ -142,9 +142,7 @@ android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" - android:layout_marginTop="2dp" - android:textColor="@android:color/white" - android:textSize="12sp" /> + android:textColor="@android:color/white" /> @@ -177,9 +175,7 @@ android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" - android:layout_marginTop="2dp" - android:textColor="@android:color/white" - android:textSize="12sp" /> + android:textColor="@android:color/white" /> From 48776977ea2dd1ef194f59c1b250410680b725b1 Mon Sep 17 00:00:00 2001 From: Bnyro Date: Thu, 12 Jan 2023 18:42:51 +0100 Subject: [PATCH 2/3] Cleanup the rewind and forward animation --- .../libretube/ui/views/CustomExoPlayerView.kt | 62 ++++++++++--------- .../main/res/layout/double_tap_overlay.xml | 2 + 2 files changed, 35 insertions(+), 29 deletions(-) diff --git a/app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt b/app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt index 90f35d2f2..4a64cc052 100644 --- a/app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt +++ b/app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt @@ -10,6 +10,9 @@ import android.os.Looper import android.util.AttributeSet import android.view.MotionEvent import android.view.View +import android.widget.FrameLayout +import android.widget.ImageView +import android.widget.TextView import androidx.core.content.ContextCompat import com.github.libretube.R import com.github.libretube.databinding.DoubleTapOverlayBinding @@ -256,9 +259,9 @@ internal class CustomExoPlayerView( R.drawable.ic_speed, { "${ - player?.playbackParameters?.speed - .toString() - .replace(".0", "") + player?.playbackParameters?.speed + .toString() + .replace(".0", "") }x" } ) { @@ -341,19 +344,8 @@ internal class CustomExoPlayerView( player?.seekTo((player?.currentPosition ?: 0L) - PlayerHelper.seekIncrement) // show the rewind button - doubleTapOverlayBinding?.rewindBTN.apply { - this!!.visibility = View.VISIBLE - // clear previous animation - this.animate().rotation(0F).setDuration(0).start() - // start new animation - this.animate() - .rotation(-30F) - .setDuration(100) - .withEndAction { - // reset the animation when finished - animate().rotation(0F).setDuration(100).start() - } - .start() + doubleTapOverlayBinding?.apply { + animateSeeking(rewindBTN, rewindIV, rewindTV, true) runnableHandler.removeCallbacks(hideRewindButtonRunnable) // start callback to hide the button @@ -365,19 +357,8 @@ internal class CustomExoPlayerView( player?.seekTo(player!!.currentPosition + PlayerHelper.seekIncrement) // show the forward button - doubleTapOverlayBinding?.forwardBTN.apply { - this!!.visibility = View.VISIBLE - // clear previous animation - this.animate().rotation(0F).setDuration(0).start() - // start new animation - this.animate() - .rotation(30F) - .setDuration(100) - .withEndAction { - // reset the animation when finished - animate().rotation(0F).setDuration(100).start() - } - .start() + doubleTapOverlayBinding?.apply { + animateSeeking(forwardBTN, forwardIV, forwardTV, false) // start callback to hide the button runnableHandler.removeCallbacks(hideForwardButtonRunnable) @@ -385,6 +366,28 @@ internal class CustomExoPlayerView( } } + private fun animateSeeking(container: FrameLayout, imageView: ImageView, textView: TextView, isRewind: Boolean) { + container.visibility = View.VISIBLE + // clear previous animation + imageView.animate() + .rotation(0F) + .setDuration(0) + .start() + + // start the rotate animation of the drawable + imageView.animate() + .rotation(if (isRewind) -30F else 30F) + .setDuration(ANIMATION_DURATION) + .withEndAction { + // reset the animation when finished + imageView.animate() + .rotation(0F) + .setDuration(ANIMATION_DURATION) + .start() + } + .start() + } + private val hideForwardButtonRunnable = Runnable { doubleTapOverlayBinding?.forwardBTN.apply { this!!.visibility = View.GONE @@ -607,6 +610,7 @@ internal class CustomExoPlayerView( companion object { private const val SUBTITLE_BOTTOM_PADDING_FRACTION = 0.158f + private const val ANIMATION_DURATION = 100L private val LANDSCAPE_MARGIN_HORIZONTAL = (30).toPixel().toInt() } } diff --git a/app/src/main/res/layout/double_tap_overlay.xml b/app/src/main/res/layout/double_tap_overlay.xml index 5e4489b5a..c839aaf84 100644 --- a/app/src/main/res/layout/double_tap_overlay.xml +++ b/app/src/main/res/layout/double_tap_overlay.xml @@ -22,6 +22,7 @@ android:visibility="invisible"> Date: Thu, 12 Jan 2023 18:59:28 +0100 Subject: [PATCH 3/3] Add Netflix-like seek animation --- .../libretube/ui/views/CustomExoPlayerView.kt | 45 +++++++++++++++---- .../main/res/layout/double_tap_overlay.xml | 10 ++++- 2 files changed, 44 insertions(+), 11 deletions(-) diff --git a/app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt b/app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt index 4a64cc052..9b33f4354 100644 --- a/app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt +++ b/app/src/main/java/com/github/libretube/ui/views/CustomExoPlayerView.kt @@ -259,9 +259,9 @@ internal class CustomExoPlayerView( R.drawable.ic_speed, { "${ - player?.playbackParameters?.speed - .toString() - .replace(".0", "") + player?.playbackParameters?.speed + .toString() + .replace(".0", "") }x" } ) { @@ -366,17 +366,30 @@ internal class CustomExoPlayerView( } } - private fun animateSeeking(container: FrameLayout, imageView: ImageView, textView: TextView, isRewind: Boolean) { + private fun animateSeeking( + container: FrameLayout, + imageView: ImageView, + textView: TextView, + isRewind: Boolean + ) { container.visibility = View.VISIBLE + // the direction of the action + val direction = if (isRewind) -1 else 1 + // clear previous animation imageView.animate() .rotation(0F) .setDuration(0) .start() + textView.animate() + .translationX(0f) + .setDuration(0) + .start() + // start the rotate animation of the drawable imageView.animate() - .rotation(if (isRewind) -30F else 30F) + .rotation(direction * 30F) .setDuration(ANIMATION_DURATION) .withEndAction { // reset the animation when finished @@ -386,16 +399,30 @@ internal class CustomExoPlayerView( .start() } .start() + + // animate the text view to move outside the image view + textView.animate() + .translationX(direction * 100f) + .setDuration((ANIMATION_DURATION * 1.5).toLong()) + .withEndAction { + // move the text back into the button + handler.postDelayed({ + textView.animate() + .setDuration(ANIMATION_DURATION / 2) + .translationX(0f) + .start() + }, 100) + } } private val hideForwardButtonRunnable = Runnable { - doubleTapOverlayBinding?.forwardBTN.apply { - this!!.visibility = View.GONE + doubleTapOverlayBinding?.forwardBTN?.apply { + this.visibility = View.GONE } } private val hideRewindButtonRunnable = Runnable { - doubleTapOverlayBinding?.rewindBTN.apply { - this!!.visibility = View.GONE + doubleTapOverlayBinding?.rewindBTN?.apply { + this.visibility = View.GONE } } diff --git a/app/src/main/res/layout/double_tap_overlay.xml b/app/src/main/res/layout/double_tap_overlay.xml index c839aaf84..73992d0eb 100644 --- a/app/src/main/res/layout/double_tap_overlay.xml +++ b/app/src/main/res/layout/double_tap_overlay.xml @@ -12,6 +12,8 @@ android:layout_height="match_parent" android:layout_weight=".40" android:clickable="false" + android:clipChildren="false" + android:clipToPadding="false" android:focusable="false"> + android:textColor="@android:color/white" + android:translationZ="1dp" /> @@ -52,6 +55,8 @@ android:layout_height="match_parent" android:layout_weight=".40" android:clickable="false" + android:clipChildren="false" + android:clipToPadding="false" android:focusable="false"> + android:textColor="@android:color/white" + android:translationZ="1dp" />