mirror of https://github.com/TeamNewPipe/NewPipe
SeekOverlay: Add Views
This commit is contained in:
vkay94
litetex
parent
6f44ced7b6
commit
3a40759cd2
|
|
@ -0,0 +1,106 @@
|
|||
package org.schabi.newpipe.views.player
|
||||
|
||||
import android.content.Context
|
||||
import android.graphics.Canvas
|
||||
import android.graphics.Paint
|
||||
import android.graphics.Path
|
||||
import android.util.AttributeSet
|
||||
import android.view.View
|
||||
import org.schabi.newpipe.player.event.DisplayPortion
|
||||
|
||||
class CircleClipTapView(context: Context?, attrs: AttributeSet) : View(context, attrs) {
|
||||
|
||||
companion object {
|
||||
const val COLOR_DARK = 0x40000000
|
||||
const val COLOR_DARK_TRANSPARENT = 0x30000000
|
||||
const val COLOR_LIGHT_TRANSPARENT = 0x25EEEEEE
|
||||
|
||||
fun calculateArcSize(view: View): Float = view.height / 11.4f
|
||||
}
|
||||
|
||||
private var backgroundPaint = Paint()
|
||||
|
||||
private var widthPx = 0
|
||||
private var heightPx = 0
|
||||
|
||||
// Background
|
||||
|
||||
private var shapePath = Path()
|
||||
private var isLeft = true
|
||||
|
||||
init {
|
||||
requireNotNull(context) { "Context is null." }
|
||||
|
||||
backgroundPaint.apply {
|
||||
style = Paint.Style.FILL
|
||||
isAntiAlias = true
|
||||
color = COLOR_LIGHT_TRANSPARENT
|
||||
}
|
||||
|
||||
val dm = context.resources.displayMetrics
|
||||
widthPx = dm.widthPixels
|
||||
heightPx = dm.heightPixels
|
||||
|
||||
updatePathShape()
|
||||
}
|
||||
|
||||
var arcSize: Float = 80f
|
||||
set(value) {
|
||||
field = value
|
||||
updatePathShape()
|
||||
}
|
||||
|
||||
var circleBackgroundColor: Int
|
||||
get() = backgroundPaint.color
|
||||
set(value) {
|
||||
backgroundPaint.color = value
|
||||
}
|
||||
|
||||
/*
|
||||
Background
|
||||
*/
|
||||
|
||||
fun updatePosition(portion: DisplayPortion) {
|
||||
val newIsLeft = portion == DisplayPortion.LEFT
|
||||
if (isLeft != newIsLeft) {
|
||||
isLeft = newIsLeft
|
||||
updatePathShape()
|
||||
}
|
||||
}
|
||||
|
||||
private fun updatePathShape() {
|
||||
val halfWidth = widthPx * 0.5f
|
||||
|
||||
shapePath.reset()
|
||||
|
||||
val w = if (isLeft) 0f else widthPx.toFloat()
|
||||
val f = if (isLeft) 1 else -1
|
||||
|
||||
shapePath.moveTo(w, 0f)
|
||||
shapePath.lineTo(f * (halfWidth - arcSize) + w, 0f)
|
||||
shapePath.quadTo(
|
||||
f * (halfWidth + arcSize) + w,
|
||||
heightPx.toFloat() / 2,
|
||||
f * (halfWidth - arcSize) + w,
|
||||
heightPx.toFloat()
|
||||
)
|
||||
shapePath.lineTo(w, heightPx.toFloat())
|
||||
|
||||
shapePath.close()
|
||||
invalidate()
|
||||
}
|
||||
|
||||
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
|
||||
super.onSizeChanged(w, h, oldw, oldh)
|
||||
widthPx = w
|
||||
heightPx = h
|
||||
updatePathShape()
|
||||
}
|
||||
|
||||
override fun onDraw(canvas: Canvas?) {
|
||||
super.onDraw(canvas)
|
||||
|
||||
canvas?.clipPath(shapePath)
|
||||
canvas?.drawPath(shapePath, backgroundPaint)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
package org.schabi.newpipe.views.player
|
||||
|
||||
import android.content.Context
|
||||
import android.util.AttributeSet
|
||||
import android.util.Log
|
||||
import android.view.LayoutInflater
|
||||
import android.view.View
|
||||
import androidx.annotation.*
|
||||
import androidx.constraintlayout.widget.ConstraintLayout
|
||||
import androidx.constraintlayout.widget.ConstraintSet
|
||||
import androidx.constraintlayout.widget.ConstraintSet.*
|
||||
import androidx.core.content.ContextCompat
|
||||
import androidx.core.widget.TextViewCompat
|
||||
import androidx.preference.PreferenceManager
|
||||
import kotlinx.android.synthetic.main.player_seek_overlay.view.*
|
||||
import org.schabi.newpipe.MainActivity
|
||||
import org.schabi.newpipe.R
|
||||
import org.schabi.newpipe.player.event.DisplayPortion
|
||||
import org.schabi.newpipe.player.event.DoubleTapListener
|
||||
|
||||
class PlayerSeekOverlay(context: Context?, private val attrs: AttributeSet?) :
|
||||
ConstraintLayout(context, attrs), DoubleTapListener {
|
||||
|
||||
private var secondsView: SecondsView
|
||||
private var circleClipTapView: CircleClipTapView
|
||||
|
||||
private var isForwarding: Boolean? = null
|
||||
|
||||
init {
|
||||
LayoutInflater.from(context).inflate(R.layout.player_seek_overlay, this, true)
|
||||
|
||||
secondsView = findViewById(R.id.seconds_view)
|
||||
circleClipTapView = findViewById(R.id.circle_clip_tap_view)
|
||||
|
||||
initializeAttributes()
|
||||
secondsView.isForward = true
|
||||
isForwarding = null
|
||||
changeConstraints(true)
|
||||
}
|
||||
|
||||
private fun initializeAttributes() {
|
||||
circleBackgroundColorInt(CircleClipTapView.COLOR_LIGHT_TRANSPARENT)
|
||||
iconAnimationDuration(SecondsView.ICON_ANIMATION_DURATION)
|
||||
icon(R.drawable.ic_play_seek_triangle)
|
||||
|
||||
val prefs = PreferenceManager.getDefaultSharedPreferences(context)
|
||||
val durationKey = context.getString(R.string.seek_duration_key)
|
||||
val seekValue = prefs.getString(
|
||||
durationKey, context.getString(R.string.seek_duration_default_value)
|
||||
)
|
||||
seekSeconds(seekValue?.toInt()?.div(1000) ?: 10)
|
||||
}
|
||||
|
||||
private var performListener: PerformListener? = null
|
||||
|
||||
fun performListener(listener: PerformListener) = apply {
|
||||
performListener = listener
|
||||
}
|
||||
|
||||
var seekSeconds: Int = 0
|
||||
private set
|
||||
|
||||
fun seekSeconds(seconds: Int) = apply {
|
||||
seekSeconds = seconds
|
||||
}
|
||||
|
||||
var circleBackgroundColor: Int
|
||||
get() = circleClipTapView.circleBackgroundColor
|
||||
private set(value) {
|
||||
circleClipTapView.circleBackgroundColor = value
|
||||
}
|
||||
|
||||
fun circleBackgroundColorRes(@ColorRes resId: Int) = apply {
|
||||
circleBackgroundColor = ContextCompat.getColor(context, resId)
|
||||
}
|
||||
|
||||
fun circleBackgroundColorInt(@ColorInt color: Int) = apply {
|
||||
circleBackgroundColor = color
|
||||
}
|
||||
|
||||
var arcSize: Float
|
||||
get() = circleClipTapView.arcSize
|
||||
internal set(value) {
|
||||
circleClipTapView.arcSize = value
|
||||
}
|
||||
|
||||
fun arcSize(@DimenRes resId: Int) = apply {
|
||||
arcSize = context.resources.getDimension(resId)
|
||||
}
|
||||
|
||||
fun arcSize(px: Float) = apply {
|
||||
arcSize = px
|
||||
}
|
||||
|
||||
var showCircle: Boolean = true
|
||||
private set(value) {
|
||||
circleClipTapView.visibility = if (value) View.VISIBLE else View.GONE
|
||||
field = value
|
||||
}
|
||||
|
||||
fun showCircle(show: Boolean) = apply {
|
||||
showCircle = show
|
||||
}
|
||||
|
||||
var iconAnimationDuration: Long = SecondsView.ICON_ANIMATION_DURATION
|
||||
get() = secondsView.cycleDuration
|
||||
private set(value) {
|
||||
secondsView.cycleDuration = value
|
||||
field = value
|
||||
}
|
||||
|
||||
fun iconAnimationDuration(duration: Long) = apply {
|
||||
iconAnimationDuration = duration
|
||||
}
|
||||
|
||||
@DrawableRes
|
||||
var icon: Int = 0
|
||||
get() = secondsView.icon
|
||||
private set(value) {
|
||||
secondsView.stop()
|
||||
secondsView.icon = value
|
||||
field = value
|
||||
}
|
||||
|
||||
fun icon(@DrawableRes resId: Int) = apply {
|
||||
icon = resId
|
||||
}
|
||||
|
||||
@StyleRes
|
||||
var textAppearance: Int = 0
|
||||
private set(value) {
|
||||
TextViewCompat.setTextAppearance(secondsView.textView, value)
|
||||
field = value
|
||||
}
|
||||
|
||||
fun textAppearance(@StyleRes resId: Int) = apply {
|
||||
textAppearance = resId
|
||||
}
|
||||
|
||||
// Indicates whether this (double) tap is the first of a series
|
||||
// Decides whether to call performListener.onAnimationStart or not
|
||||
private var initTap: Boolean = false
|
||||
|
||||
override fun onDoubleTapStarted(portion: DisplayPortion) {
|
||||
if (DEBUG)
|
||||
Log.d(TAG, "onDoubleTapStarted called with portion = [$portion]")
|
||||
|
||||
initTap = false
|
||||
performListener?.onPrepare()
|
||||
|
||||
changeConstraints(secondsView.isForward)
|
||||
if (showCircle) circleClipTapView.updatePosition(portion)
|
||||
|
||||
isForwarding = null
|
||||
|
||||
if (this.alpha == 0f)
|
||||
secondsView.stop()
|
||||
}
|
||||
|
||||
override fun onDoubleTapProgressDown(portion: DisplayPortion) {
|
||||
val shouldForward: Boolean = performListener?.shouldFastForward(portion) ?: return
|
||||
|
||||
if (DEBUG)
|
||||
Log.d(TAG,"onDoubleTapProgressDown called with " +
|
||||
"shouldForward = [$shouldForward], " +
|
||||
"isForwarding = [$isForwarding], " +
|
||||
"secondsView#isForward = [${secondsView.isForward}], " +
|
||||
"initTap = [$initTap], ")
|
||||
|
||||
// Using this check prevents from fast switching (one touches)
|
||||
if (isForwarding != null && isForwarding != shouldForward) {
|
||||
isForwarding = shouldForward
|
||||
return
|
||||
}
|
||||
isForwarding = shouldForward
|
||||
|
||||
if (this.visibility != View.VISIBLE || !initTap) {
|
||||
if (!initTap) {
|
||||
secondsView.seconds = 0
|
||||
performListener?.onAnimationStart()
|
||||
secondsView.start()
|
||||
initTap = true
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldForward)
|
||||
forwarding()
|
||||
else
|
||||
rewinding()
|
||||
}
|
||||
|
||||
override fun onDoubleTapFinished() {
|
||||
if (DEBUG)
|
||||
Log.d(TAG, "onDoubleTapFinished called with initTap = [$initTap]")
|
||||
|
||||
if (initTap) performListener?.onAnimationEnd()
|
||||
initTap = false
|
||||
}
|
||||
|
||||
private fun forwarding() {
|
||||
if (DEBUG)
|
||||
Log.d(TAG, "forwarding called")
|
||||
|
||||
// First time tap or switched
|
||||
if (!secondsView.isForward) {
|
||||
changeConstraints(true)
|
||||
if (showCircle) circleClipTapView.updatePosition(DisplayPortion.RIGHT)
|
||||
secondsView.apply {
|
||||
isForward = true
|
||||
seconds = 0
|
||||
}
|
||||
}
|
||||
secondsView.seconds += seekSeconds
|
||||
performListener?.seek(forward = true)
|
||||
}
|
||||
|
||||
private fun rewinding() {
|
||||
if (DEBUG)
|
||||
Log.d(TAG, "rewinding called")
|
||||
|
||||
// First time tap or switched
|
||||
if (secondsView.isForward) {
|
||||
changeConstraints(false)
|
||||
if (showCircle) circleClipTapView.updatePosition(DisplayPortion.LEFT)
|
||||
secondsView.apply {
|
||||
isForward = false
|
||||
seconds = 0
|
||||
}
|
||||
}
|
||||
secondsView.seconds += seekSeconds
|
||||
performListener?.seek(forward = false)
|
||||
}
|
||||
|
||||
private fun changeConstraints(forward: Boolean) {
|
||||
val constraintSet = ConstraintSet()
|
||||
with(constraintSet) {
|
||||
clone(root_constraint_layout)
|
||||
if (forward) {
|
||||
clear(seconds_view.id, START)
|
||||
connect(seconds_view.id, END,
|
||||
PARENT_ID, END)
|
||||
} else {
|
||||
clear(seconds_view.id, END)
|
||||
connect(seconds_view.id, START,
|
||||
PARENT_ID, START)
|
||||
}
|
||||
secondsView.start()
|
||||
applyTo(root_constraint_layout)
|
||||
}
|
||||
}
|
||||
|
||||
interface PerformListener {
|
||||
fun onPrepare() {}
|
||||
fun onAnimationStart()
|
||||
fun onAnimationEnd()
|
||||
fun shouldFastForward(portion: DisplayPortion): Boolean?
|
||||
fun seek(forward: Boolean)
|
||||
}
|
||||
|
||||
companion object {
|
||||
private const val TAG = "PlayerSeekOverlay"
|
||||
private val DEBUG = MainActivity.DEBUG
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
package org.schabi.newpipe.views.player
|
||||
|
||||
import android.animation.Animator
|
||||
import android.animation.ValueAnimator
|
||||
import android.content.Context
|
||||
import android.util.AttributeSet
|
||||
import android.view.LayoutInflater
|
||||
import android.widget.TextView
|
||||
import androidx.annotation.DrawableRes
|
||||
import androidx.constraintlayout.widget.ConstraintLayout
|
||||
import kotlinx.android.synthetic.main.player_seek_seconds_view.view.*
|
||||
import org.schabi.newpipe.R
|
||||
|
||||
class SecondsView(context: Context?, attrs: AttributeSet?) :
|
||||
ConstraintLayout(context, attrs) {
|
||||
|
||||
companion object {
|
||||
const val ICON_ANIMATION_DURATION = 750L
|
||||
}
|
||||
|
||||
var cycleDuration: Long = ICON_ANIMATION_DURATION
|
||||
set(value) {
|
||||
firstAnimator.duration = value / 5
|
||||
secondAnimator.duration = value / 5
|
||||
thirdAnimator.duration = value / 5
|
||||
fourthAnimator.duration = value / 5
|
||||
fifthAnimator.duration = value / 5
|
||||
field = value
|
||||
}
|
||||
|
||||
var seconds: Int = 0
|
||||
set(value) {
|
||||
tv_seconds.text = context.resources.getQuantityString(
|
||||
R.plurals.seconds, value, value
|
||||
)
|
||||
field = value
|
||||
}
|
||||
|
||||
var isForward: Boolean = true
|
||||
set(value) {
|
||||
triangle_container.rotation = if (value) 0f else 180f
|
||||
field = value
|
||||
}
|
||||
|
||||
val textView: TextView
|
||||
get() = tv_seconds
|
||||
|
||||
|
||||
@DrawableRes
|
||||
var icon: Int = R.drawable.ic_play_seek_triangle
|
||||
set(value) {
|
||||
if (value > 0) {
|
||||
icon_1.setImageResource(value)
|
||||
icon_2.setImageResource(value)
|
||||
icon_3.setImageResource(value)
|
||||
}
|
||||
field = value
|
||||
}
|
||||
|
||||
init {
|
||||
LayoutInflater.from(context).inflate(R.layout.player_seek_seconds_view, this, true)
|
||||
}
|
||||
|
||||
fun start() {
|
||||
stop()
|
||||
firstAnimator.start()
|
||||
}
|
||||
|
||||
fun stop() {
|
||||
firstAnimator.cancel()
|
||||
secondAnimator.cancel()
|
||||
thirdAnimator.cancel()
|
||||
fourthAnimator.cancel()
|
||||
fifthAnimator.cancel()
|
||||
|
||||
reset()
|
||||
}
|
||||
|
||||
private fun reset() {
|
||||
icon_1.alpha = 0f
|
||||
icon_2.alpha = 0f
|
||||
icon_3.alpha = 0f
|
||||
}
|
||||
|
||||
private val firstAnimator: ValueAnimator = CustomValueAnimator(
|
||||
{
|
||||
icon_1.alpha = 0f
|
||||
icon_2.alpha = 0f
|
||||
icon_3.alpha = 0f
|
||||
}, {
|
||||
icon_1.alpha = it
|
||||
}, {
|
||||
secondAnimator.start()
|
||||
}
|
||||
)
|
||||
|
||||
private val secondAnimator: ValueAnimator = CustomValueAnimator(
|
||||
{
|
||||
icon_1.alpha = 1f
|
||||
icon_2.alpha = 0f
|
||||
icon_3.alpha = 0f
|
||||
}, {
|
||||
icon_2.alpha = it
|
||||
}, {
|
||||
thirdAnimator.start()
|
||||
}
|
||||
)
|
||||
|
||||
private val thirdAnimator: ValueAnimator = CustomValueAnimator(
|
||||
{
|
||||
icon_1.alpha = 1f
|
||||
icon_2.alpha = 1f
|
||||
icon_3.alpha = 0f
|
||||
}, {
|
||||
icon_1.alpha = 1f - icon_3.alpha
|
||||
icon_3.alpha = it
|
||||
}, {
|
||||
fourthAnimator.start()
|
||||
}
|
||||
)
|
||||
|
||||
private val fourthAnimator: ValueAnimator = CustomValueAnimator(
|
||||
{
|
||||
icon_1.alpha = 0f
|
||||
icon_2.alpha = 1f
|
||||
icon_3.alpha = 1f
|
||||
}, {
|
||||
icon_2.alpha = 1f - it
|
||||
}, {
|
||||
fifthAnimator.start()
|
||||
}
|
||||
)
|
||||
|
||||
private val fifthAnimator: ValueAnimator = CustomValueAnimator(
|
||||
{
|
||||
icon_1.alpha = 0f
|
||||
icon_2.alpha = 0f
|
||||
icon_3.alpha = 1f
|
||||
}, {
|
||||
icon_3.alpha = 1f - it
|
||||
}, {
|
||||
firstAnimator.start()
|
||||
}
|
||||
)
|
||||
|
||||
private inner class CustomValueAnimator(
|
||||
start: () -> Unit, update: (value: Float) -> Unit, end: () -> Unit
|
||||
): ValueAnimator() {
|
||||
|
||||
init {
|
||||
duration = cycleDuration / 5
|
||||
setFloatValues(0f, 1f)
|
||||
|
||||
addUpdateListener { update(it.animatedValue as Float) }
|
||||
addListener(object : AnimatorListener {
|
||||
override fun onAnimationStart(animation: Animator?) {
|
||||
start()
|
||||
}
|
||||
|
||||
override fun onAnimationEnd(animation: Animator?) {
|
||||
end()
|
||||
}
|
||||
|
||||
override fun onAnimationCancel(animation: Animator?) = Unit
|
||||
|
||||
override fun onAnimationRepeat(animation: Animator?) = Unit
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="16dp"
|
||||
android:height="20dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24">
|
||||
|
||||
<path
|
||||
android:fillColor="#FFFFFF"
|
||||
android:pathData="M3,2 L22,12 L3,22 Z" />
|
||||
|
||||
</vector>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||
android:id="@+id/root_constraint_layout"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent">
|
||||
|
||||
<org.schabi.newpipe.views.player.CircleClipTapView
|
||||
android:id="@+id/circle_clip_tap_view"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:clickable="false"
|
||||
android:focusable="false"
|
||||
android:visibility="invisible" />
|
||||
|
||||
<org.schabi.newpipe.views.player.SecondsView
|
||||
android:id="@+id/seconds_view"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:clickable="false"
|
||||
android:focusable="false"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
app:layout_constraintWidth_default="percent"
|
||||
app:layout_constraintWidth_percent="0.5" />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||
xmlns:tools="http://schemas.android.com/tools"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:orientation="vertical"
|
||||
tools:ignore="ContentDescription">
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/triangle_container"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:gravity="center_horizontal"
|
||||
android:orientation="horizontal">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/icon_1"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
app:srcCompat="@drawable/ic_play_seek_triangle"
|
||||
tools:alpha="0.18" />
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/icon_2"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
app:srcCompat="@drawable/ic_play_seek_triangle"
|
||||
tools:alpha="0.5" />
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/icon_3"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
app:srcCompat="@drawable/ic_play_seek_triangle"
|
||||
tools:alpha="1" />
|
||||
|
||||
</LinearLayout>
|
||||
|
||||
<TextView
|
||||
android:id="@+id/tv_seconds"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:gravity="center"
|
||||
android:padding="4dp"
|
||||
android:textColor="@android:color/white"
|
||||
android:textSize="14sp"
|
||||
tools:text="20 seconds" />
|
||||
|
||||
</LinearLayout>
|
||||
Loading…
Reference in New Issue