更新有声书界面

app/src/main/java/io/legato/kazusa/service/AudioPlayService.kt

@@ -306,11 +306,10 @@ class AudioPlayService : BaseService(),
      * 调节速度
      */
     @SuppressLint(value = ["ObsoleteSdkInt"])
-    private fun upSpeed(adjust: Float) {
+    private fun upSpeed(speed: Float) {
         kotlin.runCatching {
-
             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-                playSpeed += adjust
+                playSpeed = speed
                 exoPlayer.setPlaybackSpeed(playSpeed)
                 postEvent(EventBus.AUDIO_SPEED, playSpeed)
             }
@@ -580,13 +579,13 @@ class AudioPlayService : BaseService(),
         builder.setLargeIcon(cover)
         if (pause) {
             builder.addAction(
-                R.drawable.ic_play_24dp,
+                R.drawable.ic_play,
                 getString(R.string.resume),
                 servicePendingIntent<AudioPlayService>(IntentAction.resume)
             )
         } else {
             builder.addAction(
-                R.drawable.ic_pause_24dp,
+                R.drawable.ic_pause,
                 getString(R.string.pause),
                 servicePendingIntent<AudioPlayService>(IntentAction.pause)
             )

app/src/main/java/io/legato/kazusa/ui/book/audio/AudioPlayActivity.kt

@@ -1,14 +1,19 @@
 package io.legato.kazusa.ui.book.audio
 
 import android.annotation.SuppressLint
+import android.graphics.RenderEffect
+import android.graphics.Shader
 import android.icu.text.SimpleDateFormat
 import android.os.Build
 import android.os.Bundle
-import android.view.Gravity
+import android.view.HapticFeedbackConstants
 import android.view.Menu
 import android.view.MenuItem
 import androidx.activity.viewModels
+import androidx.appcompat.content.res.AppCompatResources
+import androidx.core.view.isVisible
 import androidx.lifecycle.lifecycleScope
+import androidx.transition.TransitionManager
 import com.google.android.material.slider.Slider
 import io.legato.kazusa.R
 import io.legato.kazusa.base.VMBaseActivity
@@ -35,14 +40,14 @@ import io.legato.kazusa.ui.book.toc.TocActivityResult
 import io.legato.kazusa.ui.login.SourceLoginActivity
 import io.legato.kazusa.utils.StartActivityContract
 import io.legato.kazusa.utils.applyNavigationBarPadding
-import io.legato.kazusa.utils.dpToPx
-import io.legato.kazusa.utils.invisible
+import io.legato.kazusa.utils.gone
 import io.legato.kazusa.utils.observeEvent
 import io.legato.kazusa.utils.observeEventSticky
 import io.legato.kazusa.utils.sendToClip
 import io.legato.kazusa.utils.showDialogFragment
 import io.legato.kazusa.utils.startActivity
 import io.legato.kazusa.utils.startActivityForBook
+import io.legato.kazusa.utils.startAnimation
 import io.legato.kazusa.utils.viewbindingdelegate.viewBinding
 import io.legato.kazusa.utils.visible
 import kotlinx.coroutines.Dispatchers.IO
@@ -62,9 +67,9 @@ class AudioPlayActivity :
 
     override val binding by viewBinding(ActivityAudioPlayBinding::inflate)
     override val viewModel by viewModels<AudioPlayViewModel>()
-    private val timerSliderPopup by lazy { TimerSliderPopup(this) }
     private var adjustProgress = false
     private var playMode = AudioPlay.PlayMode.LIST_END_STOP
+    private var playSpeed = 1f
 
     private val progressTimeFormat by lazy {
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
@@ -92,9 +97,10 @@ class AudioPlayActivity :
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         binding.titleBar.setBackgroundResource(R.color.transparent)
+        binding.titleBar.title = ""
         AudioPlay.register(this)
         viewModel.titleData.observe(this) {
-            binding.titleBar.title = it
+            binding.tvTitle.text = it
         }
         viewModel.coverData.observe(this) {
             upCover(it)
@@ -141,6 +147,9 @@ class AudioPlayActivity :
     }
 
     private fun initView() {
+        binding.ivTimer.isEnabled = false
+        binding.ivFastForward.isEnabled = false
+
         binding.ivPlayMode.setOnClickListener {
             AudioPlay.changePlayMode()
         }
@@ -195,35 +204,138 @@ class AudioPlayActivity :
             }
         })
 
+        binding.playerProgress.setLabelFormatter { value ->
+            progressTimeFormat.format(value.toLong())
+        }
+
         binding.ivChapter.setOnClickListener {
             AudioPlay.book?.let {
                 tocActivityResult.launch(it.bookUrl)
             }
         }
-        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) {
-            binding.ivFastRewind.invisible()
-            binding.ivFastForward.invisible()
-        }
-        binding.ivFastForward.setOnClickListener {
-            AudioPlay.adjustSpeed(0.1f)
+
+        binding.ivFastForward.setOnClickListener { toggleFastForward() }
+        binding.ivTimer.setOnClickListener { toggleTimer() }
+
+        binding.llSubMenu.applyNavigationBarPadding()
+    }
+
+
+    private fun toggleFastForward() {
+        TransitionManager.beginDelayedTransition(binding.root)
+        if (binding.llSet.isVisible) {
+            if (binding.ivTimer.isChecked) {
+                initSlider(true)
+            } else {
+                binding.llSet.gone()
+            }
+            binding.ivTimer.isChecked = false
+        } else {
+            initSlider(true)
+            binding.llSet.visible()
         }
-        binding.ivFastRewind.setOnClickListener {
-            AudioPlay.adjustSpeed(-0.1f)
+    }
+
+    private fun toggleTimer() {
+        TransitionManager.beginDelayedTransition(binding.root)
+        if (binding.llSet.isVisible) {
+            if (binding.ivFastForward.isChecked) {
+                initSlider(false)
+            } else {
+                binding.llSet.gone()
+            }
+            binding.ivFastForward.isChecked = false
+        } else {
+            initSlider(false)
+            binding.llSet.visible()
         }
-        binding.ivTimer.setOnClickListener {
-            timerSliderPopup.showAsDropDown(it, 0, (-100).dpToPx(), Gravity.TOP)
+    }
+
+    private fun initSlider(isAudioPlay: Boolean) {
+        binding.settingSlider.clearOnChangeListeners()
+        binding.settingSlider.clearOnSliderTouchListeners()
+        binding.btnReset.clearOnCheckedChangeListeners()
+
+        if (isAudioPlay) {
+            binding.settingSlider.isEnabled = AudioPlay.status != Status.STOP
+            binding.btnReset.setOnClickListener {
+                binding.settingSlider.value = 1f
+                AudioPlay.adjustSpeed(1f)
+            }
+            binding.settingSlider.apply {
+                valueFrom = 0.5f
+                valueTo = 5.0f
+                stepSize = 0.1f
+                value = playSpeed
+
+                addOnChangeListener { _, newValue, fromUser ->
+                    if (fromUser) {
+                        AudioPlay.adjustSpeed(newValue)
+                    }
+                }
+
+                addOnSliderTouchListener(object : Slider.OnSliderTouchListener {
+                    override fun onStartTrackingTouch(slider: Slider) {
+                        slider.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY)
+                    }
+
+                    override fun onStopTrackingTouch(slider: Slider) {}
+                })
+
+                setLabelFormatter { value -> String.format(Locale.ROOT, "%.1fX", value) }
+            }
+        } else {
+            binding.settingSlider.isEnabled = true
+            binding.btnReset.setOnClickListener {
+                binding.settingSlider.value = 0f
+                AudioPlay.setTimer(0)
+            }
+            binding.settingSlider.apply {
+                valueFrom = 0f
+                valueTo = 180f
+                stepSize = 1f
+                value = AudioPlayService.timeMinute.toFloat()
+
+                addOnChangeListener { _, newValue, fromUser ->
+                    if (fromUser) AudioPlay.setTimer(newValue.toInt())
+                }
+
+                addOnSliderTouchListener(object : Slider.OnSliderTouchListener {
+                    override fun onStartTrackingTouch(slider: Slider) {
+                        slider.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY)
+                    }
+
+                    override fun onStopTrackingTouch(slider: Slider) {}
+                })
+
+                setLabelFormatter { v -> "${v.toInt()}m" }
+            }
         }
-        binding.llPlayMenu.applyNavigationBarPadding()
     }
 
     private fun updatePlayModeIcon() {
-        binding.ivPlayMode.setImageResource(playMode.iconRes)
+        binding.ivPlayMode.setIconResource(playMode.iconRes)
     }
 
     private fun upCover(path: String?) {
         BookCover.load(this, path, sourceOrigin = AudioPlay.bookSource?.bookSourceUrl) {
-            BookCover.loadBlur(this, path, sourceOrigin = AudioPlay.bookSource?.bookSourceUrl)
-                .into(binding.ivBg)
+            if (!AppConfig.isEInkMode) {
+                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+                    BookCover.load(this, path, sourceOrigin = AudioPlay.bookSource?.bookSourceUrl)
+                        .into(binding.ivBg)
+                    val blurEffect =
+                        RenderEffect.createBlurEffect(120f, 120f, Shader.TileMode.CLAMP)
+                    binding.ivBg.setRenderEffect(blurEffect)
+                } else {
+                    // 低版本直接加载模糊图
+                    BookCover.loadBlur(
+                        this,
+                        path,
+                        sourceOrigin = AudioPlay.bookSource?.bookSourceUrl
+                    )
+                        .into(binding.ivBg)
+                }
+            }
         }.into(binding.ivCover)
     }
 
@@ -294,14 +406,30 @@ class AudioPlayActivity :
                 playButton()
             }
         }
-        observeEventSticky<Int>(EventBus.AUDIO_STATE) {
-            AudioPlay.status = it
-            if (it == Status.PLAY) {
-                binding.fabPlayStop.setImageResource(R.drawable.ic_pause_24dp)
+        observeEventSticky<Int>(EventBus.AUDIO_STATE) { state ->
+            AudioPlay.status = state
+
+            val iconDrawable = if (state == Status.PLAY) {
+                binding.ivTimer.isEnabled = true
+                binding.ivFastForward.isEnabled = true
+                AppCompatResources.getDrawable(this, R.drawable.play_anim)
+            } else {
+                AppCompatResources.getDrawable(this, R.drawable.pause_anim)
+            }
+
+            val bgDrawable = if (state == Status.PLAY) {
+                AppCompatResources.getDrawable(this, R.drawable.bg_play_anim)
             } else {
-                binding.fabPlayStop.setImageResource(R.drawable.ic_play_24dp)
+                AppCompatResources.getDrawable(this, R.drawable.bg_pause_anim)
             }
+
+            binding.fabPlayStop.icon = iconDrawable
+            binding.fabPlayStop.background = bgDrawable
+
+            iconDrawable?.startAnimation()
+            bgDrawable?.startAnimation()
         }
+
         observeEventSticky<String>(EventBus.AUDIO_SUB_TITLE) {
             binding.tvSubTitle.text = it
             binding.ivSkipPrevious.isEnabled = AudioPlay.durChapterIndex > 0
@@ -321,7 +449,7 @@ class AudioPlayActivity :
 //
 //        }
         observeEventSticky<Int>(EventBus.AUDIO_SIZE) {
-            binding.playerProgress.valueTo = it.toFloat()
+            binding.playerProgress.valueTo = maxOf(1f, it.toFloat())
             binding.tvAllTime.text = progressTimeFormat.format(it.toLong())
         }
 
@@ -335,12 +463,21 @@ class AudioPlayActivity :
         }
 
         observeEventSticky<Float>(EventBus.AUDIO_SPEED) {
+            TransitionManager.beginDelayedTransition(binding.root)
+            playSpeed = it
             binding.tvSpeed.text = String.format(Locale.ROOT, "%.1fX", it)
-            binding.tvSpeed.visible()
+            if (it != 1f) {
+                binding.cdSpeed.visible()
+            } else
+                binding.cdSpeed.gone()
         }
         observeEventSticky<Int>(EventBus.AUDIO_DS) {
+            TransitionManager.beginDelayedTransition(binding.root)
             binding.tvTimer.text = "${it}m"
-            binding.tvTimer.visible(it > 0)
+            if (it > 0) {
+                binding.cdTimer.visible()
+            } else
+                binding.cdTimer.gone()
         }
     }
 

app/src/main/java/io/legato/kazusa/ui/book/audio/TimerSliderPopup.kt

@@ -1,53 +0,0 @@
-package io.legato.kazusa.ui.book.audio
-
-import android.content.Context
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import android.widget.PopupWindow
-import io.legato.kazusa.R
-import io.legato.kazusa.databinding.PopupSeekBarBinding
-import io.legato.kazusa.model.AudioPlay
-import io.legato.kazusa.service.AudioPlayService
-
-class TimerSliderPopup(private val context: Context) :
-    PopupWindow(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT) {
-
-    private val binding = PopupSeekBarBinding.inflate(LayoutInflater.from(context))
-
-    init {
-        contentView = binding.root
-
-        isTouchable = true
-        isOutsideTouchable = false
-        isFocusable = true
-
-        // 初始化 slider 值
-        binding.slider.valueFrom = 1f
-        binding.slider.valueTo = 180f
-        binding.slider.stepSize = 1f
-        binding.slider.value = AudioPlayService.timeMinute.toFloat()
-        setSliderTextValue(AudioPlayService.timeMinute)
-
-        binding.slider.addOnChangeListener { _, value, fromUser ->
-            setSliderTextValue(value.toInt())
-            if (fromUser) {
-                AudioPlay.setTimer(value.toInt())
-            }
-        }
-    }
-
-    override fun showAsDropDown(anchor: View?, xoff: Int, yoff: Int, gravity: Int) {
-        super.showAsDropDown(anchor, xoff, yoff, gravity)
-        binding.slider.value = AudioPlayService.timeMinute.toFloat()
-    }
-
-    override fun showAtLocation(parent: View?, gravity: Int, x: Int, y: Int) {
-        super.showAtLocation(parent, gravity, x, y)
-        binding.slider.value = AudioPlayService.timeMinute.toFloat()
-    }
-
-    private fun setSliderTextValue(value: Int) {
-        binding.tvSeekValue.text = context.getString(R.string.timer_m, value)
-    }
-}

app/src/main/java/io/legato/kazusa/utils/DrawableUtils.kt

@@ -4,11 +4,14 @@ package io.legato.kazusa.utils
 
 import android.content.res.ColorStateList
 import android.graphics.PorterDuff
+import android.graphics.drawable.Animatable
+import android.graphics.drawable.AnimatedVectorDrawable
 import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.Drawable
 import android.graphics.drawable.TransitionDrawable
 import androidx.annotation.ColorInt
 import androidx.core.graphics.drawable.DrawableCompat
+import androidx.vectordrawable.graphics.drawable.AnimatedVectorDrawableCompat
 
 /**
  * @author Karim Abou Zeid (kabouzeid)
@@ -52,4 +55,13 @@ fun Drawable.setTintMutate(
     wrappedDrawable.mutate()
     DrawableCompat.setTintMode(wrappedDrawable, tintMode)
     DrawableCompat.setTint(wrappedDrawable, tint)
-}
+}
+
+fun Drawable.startAnimation() {
+    when (this) {
+        is AnimatedVectorDrawable -> start()
+        is AnimatedVectorDrawableCompat -> start()
+        is Animatable -> start()
+        else -> {}
+    }
+}

app/src/main/res/drawable/bg_pause_anim.xml

@@ -0,0 +1,43 @@
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <aapt:attr name="android:drawable">
+        <vector
+            android:name="vector"
+            android:width="94dp"
+            android:height="94dp"
+            android:viewportWidth="94"
+            android:viewportHeight="94">
+            <group
+                android:name="group"
+                android:pivotX="47"
+                android:pivotY="47">
+                <path
+                    android:name="flower"
+                    android:fillColor="#000000"
+                    android:pathData="M 47 0.849 C 42.922 0.849 38.898 1.39 35.024 2.431 C 31.151 3.472 27.428 5.014 23.953 7.017 C 20.478 9.02 17.251 11.483 14.367 14.367 C 11.483 17.251 9.02 20.478 7.017 23.953 C 5.014 27.428 3.472 31.151 2.431 35.024 C 1.39 38.898 0.849 42.922 0.849 47 C 0.849 53.117 2.066 59.113 4.364 64.66 C 6.662 70.208 10.041 75.308 14.367 79.633 C 16.53 81.796 18.886 83.722 21.395 85.395 C 23.904 87.068 26.566 88.487 29.34 89.636 C 32.113 90.785 34.999 91.664 37.956 92.255 C 40.913 92.847 43.941 93.151 47 93.151 C 51.078 93.151 55.102 92.61 58.976 91.569 C 62.849 90.528 66.572 88.986 70.047 86.983 C 73.522 84.98 76.749 82.517 79.633 79.633 C 82.517 76.749 84.98 73.522 86.983 70.047 C 88.986 66.572 90.528 62.849 91.569 58.976 C 92.61 55.102 93.151 51.078 93.151 47 C 93.151 42.922 92.61 38.898 91.569 35.024 C 90.528 31.151 88.986 27.428 86.983 23.953 C 84.98 20.478 82.517 17.251 79.633 14.367 C 76.749 11.483 73.522 9.02 70.047 7.017 C 66.572 5.014 62.849 3.472 58.976 2.431 C 55.102 1.39 51.078 0.849 47 0.849 L 47 0.849" />
+            </group>
+        </vector>
+    </aapt:attr>
+    <target android:name="group">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:duration="300"
+                android:interpolator="@android:interpolator/fast_out_slow_in"
+                android:propertyName="rotation"
+                android:valueFrom="30"
+                android:valueTo="0"
+                android:valueType="floatType" />
+        </aapt:attr>
+    </target>
+    <target android:name="flower">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:duration="300"
+                android:interpolator="@android:interpolator/fast_out_slow_in"
+                android:propertyName="pathData"
+                android:valueFrom="M 40.264 3.599 C 37.858 5.957 34.395 6.885 31.133 6.046 C 26.059 4.742 20.874 7.736 19.466 12.782 C 18.562 16.026 16.026 18.562 12.782 19.466 C 7.736 20.874 4.742 26.059 6.046 31.133 C 6.885 34.395 5.957 37.858 3.599 40.264 C -0.067 44.006 -0.067 49.994 3.599 53.736 C 5.957 56.142 6.885 59.605 6.046 62.867 C 4.742 67.941 7.736 73.126 12.782 74.534 C 16.026 75.439 18.562 77.974 19.466 81.218 C 20.874 86.264 26.059 89.258 31.133 87.954 C 34.395 87.115 37.858 88.043 40.264 90.401 C 44.006 94.067 49.994 94.067 53.736 90.401 C 56.142 88.043 59.605 87.115 62.867 87.954 C 67.941 89.258 73.126 86.264 74.534 81.218 C 75.439 77.974 77.974 75.439 81.218 74.534 C 86.264 73.126 89.258 67.941 87.954 62.867 C 87.115 59.605 88.043 56.142 90.401 53.736 C 94.067 49.994 94.067 44.006 90.401 40.264 C 88.043 37.858 87.115 34.395 87.954 31.133 C 89.258 26.059 86.264 20.874 81.218 19.466 C 77.974 18.562 75.439 16.026 74.534 12.782 C 73.126 7.736 67.941 4.742 62.867 6.046 C 59.605 6.885 56.142 5.957 53.736 3.599 C 49.994 -0.067 44.006 -0.067 40.264 3.599 L 40.264 3.599"
+                android:valueTo="M 47 0.849 C 42.922 0.849 38.898 1.39 35.024 2.431 C 31.151 3.472 27.428 5.014 23.953 7.017 C 20.478 9.02 17.251 11.483 14.367 14.367 C 11.483 17.251 9.02 20.478 7.017 23.953 C 5.014 27.428 3.472 31.151 2.431 35.024 C 1.39 38.898 0.849 42.922 0.849 47 C 0.849 53.117 2.066 59.113 4.364 64.66 C 6.662 70.208 10.041 75.308 14.367 79.633 C 16.53 81.796 18.886 83.722 21.395 85.395 C 23.904 87.068 26.566 88.487 29.34 89.636 C 32.113 90.785 34.999 91.664 37.956 92.255 C 40.913 92.847 43.941 93.151 47 93.151 C 51.078 93.151 55.102 92.61 58.976 91.569 C 62.849 90.528 66.572 88.986 70.047 86.983 C 73.522 84.98 76.749 82.517 79.633 79.633 C 82.517 76.749 84.98 73.522 86.983 70.047 C 88.986 66.572 90.528 62.849 91.569 58.976 C 92.61 55.102 93.151 51.078 93.151 47 C 93.151 42.922 92.61 38.898 91.569 35.024 C 90.528 31.151 88.986 27.428 86.983 23.953 C 84.98 20.478 82.517 17.251 79.633 14.367 C 76.749 11.483 73.522 9.02 70.047 7.017 C 66.572 5.014 62.849 3.472 58.976 2.431 C 55.102 1.39 51.078 0.849 47 0.849 L 47 0.849"
+                android:valueType="pathType" />
+        </aapt:attr>
+    </target>
+</animated-vector>

app/src/main/res/drawable/bg_play_anim.xml

@@ -0,0 +1,43 @@
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <aapt:attr name="android:drawable">
+        <vector
+            android:name="vector"
+            android:width="94dp"
+            android:height="94dp"
+            android:viewportWidth="94"
+            android:viewportHeight="94">
+            <group
+                android:name="group"
+                android:pivotX="47"
+                android:pivotY="47">
+                <path
+                    android:name="flower"
+                    android:fillColor="#000000"
+                    android:pathData="M 47 0.849 C 34.765 0.849 23.018 5.715 14.367 14.367 C 5.715 23.018 0.849 34.765 0.849 47 C 0.849 59.235 5.715 70.982 14.367 79.633 C 23.018 88.285 34.765 93.151 47 93.151 C 59.235 93.151 70.982 88.285 79.633 79.633 C 88.285 70.982 93.151 59.235 93.151 47 C 93.151 34.765 88.285 23.018 79.633 14.367 C 70.982 5.715 59.235 0.849 47 0.849 Z" />
+            </group>
+        </vector>
+    </aapt:attr>
+    <target android:name="group">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:duration="300"
+                android:interpolator="@android:interpolator/fast_out_slow_in"
+                android:propertyName="rotation"
+                android:valueFrom="0"
+                android:valueTo="30"
+                android:valueType="floatType" />
+        </aapt:attr>
+    </target>
+    <target android:name="flower">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:duration="300"
+                android:interpolator="@android:interpolator/fast_out_slow_in"
+                android:propertyName="pathData"
+                android:valueFrom="M 47 0.849 C 42.922 0.849 38.898 1.39 35.024 2.431 C 31.151 3.472 27.428 5.014 23.953 7.017 C 20.478 9.02 17.251 11.483 14.367 14.367 C 11.483 17.251 9.02 20.478 7.017 23.953 C 5.014 27.428 3.472 31.151 2.431 35.024 C 1.39 38.898 0.849 42.922 0.849 47 C 0.849 53.117 2.066 59.113 4.364 64.66 C 6.662 70.208 10.041 75.308 14.367 79.633 C 16.53 81.796 18.886 83.722 21.395 85.395 C 23.904 87.068 26.566 88.487 29.34 89.636 C 32.113 90.785 34.999 91.664 37.956 92.255 C 40.913 92.847 43.941 93.151 47 93.151 C 51.078 93.151 55.102 92.61 58.976 91.569 C 62.849 90.528 66.572 88.986 70.047 86.983 C 73.522 84.98 76.749 82.517 79.633 79.633 C 82.517 76.749 84.98 73.522 86.983 70.047 C 88.986 66.572 90.528 62.849 91.569 58.976 C 92.61 55.102 93.151 51.078 93.151 47 C 93.151 42.922 92.61 38.898 91.569 35.024 C 90.528 31.151 88.986 27.428 86.983 23.953 C 84.98 20.478 82.517 17.251 79.633 14.367 C 76.749 11.483 73.522 9.02 70.047 7.017 C 66.572 5.014 62.849 3.472 58.976 2.431 C 55.102 1.39 51.078 0.849 47 0.849 L 47 0.849"
+                android:valueTo="M 40.264 3.599 C 37.858 5.957 34.395 6.885 31.133 6.046 C 26.059 4.742 20.874 7.736 19.466 12.782 C 18.562 16.026 16.026 18.562 12.782 19.466 C 7.736 20.874 4.742 26.059 6.046 31.133 C 6.885 34.395 5.957 37.858 3.599 40.264 C -0.067 44.006 -0.067 49.994 3.599 53.736 C 5.957 56.142 6.885 59.605 6.046 62.867 C 4.742 67.941 7.736 73.126 12.782 74.534 C 16.026 75.439 18.562 77.974 19.466 81.218 C 20.874 86.264 26.059 89.258 31.133 87.954 C 34.395 87.115 37.858 88.043 40.264 90.401 C 44.006 94.067 49.994 94.067 53.736 90.401 C 56.142 88.043 59.605 87.115 62.867 87.954 C 67.941 89.258 73.126 86.264 74.534 81.218 C 75.439 77.974 77.974 75.439 81.218 74.534 C 86.264 73.126 89.258 67.941 87.954 62.867 C 87.115 59.605 88.043 56.142 90.401 53.736 C 94.067 49.994 94.067 44.006 90.401 40.264 C 88.043 37.858 87.115 34.395 87.954 31.133 C 89.258 26.059 86.264 20.874 81.218 19.466 C 77.974 18.562 75.439 16.026 74.534 12.782 C 73.126 7.736 67.941 4.742 62.867 6.046 C 59.605 6.885 56.142 5.957 53.736 3.599 C 49.994 -0.067 44.006 -0.067 40.264 3.599 L 40.264 3.599"
+                android:valueType="pathType" />
+        </aapt:attr>
+    </target>
+</animated-vector>

app/src/main/res/drawable/ic_media_pause_anim.xml

@@ -0,0 +1,44 @@
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <aapt:attr name="android:drawable">
+        <vector
+            android:name="playtopause"
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <group
+                android:name="group"
+                android:pivotX="12"
+                android:pivotY="12">
+                <path
+                    android:name="path"
+                    android:fillColor="#000000"
+                    android:pathData="M 5 6 L 5 10 L 19 10 L 19 6 L 5 6 M 5 14 L 5 18 L 19 18 L 19 14 L 5 14"
+                    android:strokeWidth="1" />
+            </group>
+        </vector>
+    </aapt:attr>
+    <target android:name="path">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:duration="300"
+                android:interpolator="@android:interpolator/fast_out_slow_in"
+                android:propertyName="pathData"
+                android:valueFrom="M 5 6 L 5 10 L 19 10 L 19 6 L 5 6 M 5 14 L 5 18 L 19 18 L 19 14 L 5 14"
+                android:valueTo="M 8 5 L 8 12.075 L 19 12 L 13.259 8.346 L 8 5 M 8 12.075 L 8 19 L 13.245 15.662 L 19 12 L 8 12.075"
+                android:valueType="pathType" />
+        </aapt:attr>
+    </target>
+    <target android:name="group">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:duration="300"
+                android:interpolator="@android:interpolator/fast_out_slow_in"
+                android:propertyName="rotation"
+                android:valueFrom="90"
+                android:valueTo="0"
+                android:valueType="floatType" />
+        </aapt:attr>
+    </target>
+</animated-vector>

app/src/main/res/drawable/ic_media_play_anim.xml

@@ -0,0 +1,44 @@
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <aapt:attr name="android:drawable">
+        <vector
+            android:name="playtopause"
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <group
+                android:name="group"
+                android:pivotX="12"
+                android:pivotY="12">
+                <path
+                    android:name="path"
+                    android:fillColor="#000000"
+                    android:pathData="M 8 5 L 8 19 L 19 12 Z"
+                    android:strokeWidth="1" />
+            </group>
+        </vector>
+    </aapt:attr>
+    <target android:name="path">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:duration="300"
+                android:interpolator="@android:interpolator/fast_out_slow_in"
+                android:propertyName="pathData"
+                android:valueFrom="M 8 5 L 8 12 L 19 12 L 19 12 L 8 5 M 8 12 L 8 19 L 19 12 L 19 12 L 8 12"
+                android:valueTo="M 5 6 L 5 10 L 19 10 L 19 6 L 5 6 M 5 14 L 5 18 L 19 18 L 19 14 L 5 14"
+                android:valueType="pathType" />
+        </aapt:attr>
+    </target>
+    <target android:name="group">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:duration="300"
+                android:interpolator="@android:interpolator/fast_out_slow_in"
+                android:propertyName="rotation"
+                android:valueFrom="0"
+                android:valueTo="90"
+                android:valueType="floatType" />
+        </aapt:attr>
+    </target>
+</animated-vector>

app/src/main/res/drawable/ic_pause.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:tint="?attr/colorControlNormal"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M520,760L520,200L760,200L760,760L520,760ZM200,760L200,200L440,200L440,760L200,760ZM600,680L680,680L680,280L600,280L600,680ZM280,680L360,680L360,280L280,280L280,680ZM280,280L280,280L280,680L280,680L280,280ZM600,280L600,280L600,680L600,680L600,280Z" />
+</vector>

app/src/main/res/drawable/ic_pause_filled.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:tint="?attr/colorOnSurface"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M560,760L560,200L720,200L720,760L560,760ZM240,760L240,200L400,200L400,760L240,760Z" />
+</vector>

app/src/main/res/drawable/ic_play_filled.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:autoMirrored="true"
+    android:tint="?attr/colorOnSurface"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M320,760L320,200L760,480L320,760Z" />
+</vector>

app/src/main/res/drawable/ic_speed.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:tint="?attr/colorControlNormal"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M418,620Q442,644 480,643.5Q518,643 536,616L760,280L424,504Q397,522 395.5,559Q394,596 418,620ZM480,160Q539,160 593.5,176.5Q648,193 696,226L620,274Q587,257 551.5,248.5Q516,240 480,240Q347,240 253.5,333.5Q160,427 160,560Q160,602 171.5,643Q183,684 204,720L756,720Q779,682 789.5,641Q800,600 800,556Q800,520 791.5,486Q783,452 766,420L814,344Q844,391 861.5,444Q879,497 880,554Q881,611 867,663Q853,715 826,762Q815,780 796,790Q777,800 756,800L204,800Q183,800 164,790Q145,780 134,762Q108,717 94,666.5Q80,616 80,560Q80,477 111.5,404.5Q143,332 197.5,277.5Q252,223 325,191.5Q398,160 480,160ZM487,473L487,473Q487,473 487,473Q487,473 487,473Q487,473 487,473Q487,473 487,473Q487,473 487,473Q487,473 487,473L487,473L487,473L487,473Q487,473 487,473Q487,473 487,473Q487,473 487,473Q487,473 487,473Z" />
+</vector>

app/src/main/res/drawable/selector_btn_accent_bg.xml

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:state_pressed="false" android:drawable="@color/md_theme_primary" />
-    <item android:state_pressed="true" android:drawable="@color/btn_bg_press" />
-</selector>

app/src/main/res/drawable/selector_circle_btn_bg.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:state_pressed="true" android:drawable="@drawable/shape_circle" />
-</selector>

app/src/main/res/layout/activity_audio_play.xml

@@ -17,8 +17,14 @@
     <View
         android:id="@+id/vw_bg"
         android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+
+    <View
+        android:id="@+id/vw_bg2"
+        android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="#50000000" />
+        android:alpha="0.80"
+        android:background="?attr/colorSurfaceContainer" />
 
     <io.legato.kazusa.ui.widget.TitleBar
         android:id="@+id/title_bar"
@@ -27,143 +33,184 @@
         app:layout_constraintTop_toTopOf="parent"
         app:themeMode="dark" />
 
-    <TextView
-        android:id="@+id/tv_timer"
+    <com.google.android.material.card.MaterialCardView
+        android:id="@+id/cd_cover"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_margin="16dp"
-        android:background="@drawable/shape_fillet_btn_press"
-        android:paddingLeft="6dp"
-        android:paddingRight="6dp"
-        android:textColor="@color/md_white_1000"
-        android:visibility="invisible"
-        app:drawableLeftCompat="@drawable/ic_timer_black_24dp"
-        app:drawableTint="@color/md_white_1000"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/title_bar" />
+        app:cardElevation="16dp"
+        app:layout_constraintBottom_toTopOf="@+id/tv_title"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/title_bar"
+        app:strokeWidth="0dp">
 
-    <TextView
-        android:id="@+id/tv_speed"
+        <ImageView
+            android:id="@+id/iv_cover"
+            android:layout_width="260dp"
+            android:layout_height="260dp"
+            android:contentDescription="@string/img_cover"
+            android:scaleType="centerCrop" />
+    </com.google.android.material.card.MaterialCardView>
+
+    <com.google.android.material.card.MaterialCardView
+        android:id="@+id/cd_timer"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_margin="16dp"
-        android:background="@drawable/shape_fillet_btn_press"
-        android:paddingLeft="6dp"
-        android:paddingRight="6dp"
-        android:textColor="@color/md_white_1000"
-        android:visibility="invisible"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/title_bar" />
+        android:layout_margin="8dp"
+        android:visibility="gone"
+        app:cardBackgroundColor="?attr/colorSurfaceContainer"
+        app:cardCornerRadius="4dp"
+        app:cardElevation="16dp"
+        app:layout_constraintStart_toStartOf="@id/cd_cover"
+        app:layout_constraintTop_toTopOf="@id/cd_cover"
+        app:strokeWidth="0dp">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:gravity="center_vertical"
+            android:paddingHorizontal="4dp"
+            android:paddingVertical="2dp"
+            tools:ignore="UseCompoundDrawables">
+
+            <ImageView
+                android:layout_width="12dp"
+                android:layout_height="12dp"
+                android:layout_marginEnd="4dp"
+                android:src="@drawable/ic_timer_black_24dp" />
+
+            <TextView
+                android:id="@+id/tv_timer"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text"
+                android:textSize="10sp"
+                android:textStyle="bold"
+                tools:ignore="SmallSp" />
+        </LinearLayout>
+
+    </com.google.android.material.card.MaterialCardView>
+
+    <com.google.android.material.card.MaterialCardView
+        android:id="@+id/cd_speed"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_margin="8dp"
+        android:visibility="gone"
+        app:cardBackgroundColor="?attr/colorSurfaceContainer"
+        app:cardCornerRadius="4dp"
+        app:cardElevation="16dp"
+        app:layout_constraintStart_toEndOf="@id/cd_timer"
+        app:layout_constraintTop_toTopOf="@id/cd_cover"
+        app:strokeWidth="0dp">
+
+        <TextView
+            android:id="@+id/tv_speed"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:gravity="center_vertical"
+            android:paddingHorizontal="4dp"
+            android:paddingVertical="2dp"
+            android:text="@string/text"
+            android:textSize="10sp"
+            android:textStyle="bold"
+            tools:ignore="SmallSp" />
+    </com.google.android.material.card.MaterialCardView>
 
-    <ImageView
-        android:id="@+id/iv_cover"
-        android:layout_width="260dp"
-        android:layout_height="260dp"
-        android:contentDescription="@string/img_cover"
-        android:scaleType="centerCrop"
-        app:civ_border_color="@color/md_theme_primary"
-        app:civ_border_width="2dp"
-        app:layout_constraintBottom_toTopOf="@+id/ll_player_progress"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/title_bar" />
 
     <TextView
-        android:id="@+id/tv_sub_title"
+        android:id="@+id/tv_title"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:gravity="center"
-        android:paddingStart="16dp"
-        android:paddingTop="6dp"
-        android:paddingEnd="16dp"
-        android:paddingBottom="6dp"
-        android:textColor="@color/md_white_1000"
-        app:layout_constraintBottom_toTopOf="@+id/ll_player_progress" />
+        android:scrollbars="none"
+        android:textColor="?attr/colorOnSurface"
+        android:textSize="22sp"
+        android:textStyle="bold"
+        app:layout_constraintBottom_toTopOf="@+id/tv_sub_title"
+        tools:text="@string/text" />
 
-    <LinearLayout
-        android:id="@+id/ll_player_progress"
+    <TextView
+        android:id="@+id/tv_sub_title"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:gravity="center_vertical"
-        android:orientation="horizontal"
-        android:paddingStart="16dp"
-        android:paddingEnd="16dp"
-        app:layout_constraintBottom_toTopOf="@+id/ll_play_menu">
+        android:layout_marginTop="4dp"
+        android:layout_marginBottom="16dp"
+        android:gravity="center"
+        android:scrollbars="none"
+        android:textColor="?attr/colorOnSurfaceVariant"
+        android:textSize="17sp"
+        android:textStyle="bold"
+        app:layout_constraintBottom_toTopOf="@+id/player_progress"
+        tools:text="@string/text" />
 
-        <TextView
-            android:id="@+id/tv_dur_time"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="00:00"
-            android:textColor="@color/md_white_1000"
-            tools:ignore="HardcodedText,RtlSymmetry,TextContrastCheck" />
 
-        <io.legato.kazusa.lib.theme.view.ThemeSlider
-            android:id="@+id/player_progress"
-            android:layout_width="0dp"
-            android:layout_height="25dp"
-            android:layout_gravity="center_vertical"
-            android:layout_weight="1"
-            android:progressBackgroundTint="@color/md_dark_secondary" />
+    <TextView
+        android:id="@+id/tv_dur_time"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="28dp"
+        android:layout_marginBottom="8dp"
+        android:text="@string/text"
+        android:textStyle="bold"
+        app:layout_constraintBottom_toTopOf="@id/ll_play_menu"
+        app:layout_constraintStart_toStartOf="parent"
+        tools:ignore="HardcodedText,RtlSymmetry,TextContrastCheck" />
 
-        <TextView
-            android:id="@+id/tv_all_time"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="00:00"
-            android:textColor="@color/md_white_1000"
-            tools:ignore="HardcodedText,TextContrastCheck" />
+    <com.google.android.material.slider.Slider
+        android:id="@+id/player_progress"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_vertical"
+        android:layout_marginHorizontal="14dp"
+        android:value="0"
+        android:valueFrom="0"
+        android:valueTo="1"
+        app:layout_constraintBottom_toTopOf="@id/tv_all_time"
+        app:thumbElevation="0dp"
+        app:thumbHeight="20dp"
+        app:thumbWidth="4dp"
+        app:trackHeight="5dp" />
 
-    </LinearLayout>
+    <TextView
+        android:id="@+id/tv_all_time"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginEnd="28dp"
+        android:layout_marginBottom="8dp"
+        android:text="@string/text"
+        android:textStyle="bold"
+        app:layout_constraintBottom_toTopOf="@id/ll_play_menu"
+        app:layout_constraintEnd_toEndOf="parent"
+        tools:ignore="HardcodedText,TextContrastCheck" />
 
     <LinearLayout
         android:id="@+id/ll_play_menu"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:layout_marginBottom="16dp"
         android:gravity="center_vertical"
         android:orientation="horizontal"
         android:paddingHorizontal="6dp"
-        app:layout_constraintBottom_toBottomOf="parent">
+        app:layout_constraintBottom_toTopOf="@id/ll_sub_menu">
 
-        <io.legato.kazusa.ui.widget.image.ImageButton
-            android:id="@+id/iv_play_mode"
-            android:layout_width="46dp"
-            android:layout_height="46dp"
-            android:layout_marginStart="16dp"
-            android:background="@drawable/selector_circle_btn_bg"
-            android:contentDescription="@string/play_mode"
-            android:padding="5dp"
-            android:src="@drawable/ic_play_mode_list_end_stop"
-            app:layout_constraintBottom_toTopOf="@+id/tv_sub_title"
-            app:layout_constraintStart_toStartOf="parent"
-            app:tint="@color/md_white_1000"
-            tools:ignore="ImageContrastCheck" />
 
-        <io.legato.kazusa.ui.widget.image.ImageButton
-            android:id="@+id/iv_timer"
-            android:layout_width="46dp"
-            android:layout_height="46dp"
-            android:background="@drawable/selector_circle_btn_bg"
-            android:contentDescription="@string/set_timer"
-            android:padding="5dp"
-            android:src="@drawable/ic_timer_black_24dp"
-            app:tint="@color/md_white_1000"
-            tools:ignore="ImageContrastCheck" />
 
         <View
             android:layout_width="0dp"
             android:layout_height="1dp"
             android:layout_weight="1" />
 
-        <io.legato.kazusa.ui.widget.image.ImageButton
-            android:id="@+id/iv_fast_rewind"
-            android:layout_width="46dp"
-            android:layout_height="46dp"
-            android:background="@drawable/selector_circle_btn_bg"
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/iv_skip_previous"
+            style="@style/Widget.Material3Expressive.Button.IconButton.Outlined"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
             android:contentDescription="@string/skip_previous"
-            android:padding="5dp"
-            android:src="@drawable/ic_fast_rewind"
-            app:tint="@color/md_white_1000"
+            app:icon="@drawable/ic_skip_previous"
+            app:iconGravity="textStart"
+            app:iconSize="32dp"
+            app:strokeWidth="0dp"
             tools:ignore="ImageContrastCheck" />
 
         <View
@@ -171,40 +218,28 @@
             android:layout_height="1dp"
             android:layout_weight="1" />
 
-        <io.legato.kazusa.ui.widget.image.ImageButton
-            android:id="@+id/iv_skip_previous"
-            android:layout_width="46dp"
-            android:layout_height="46dp"
-            android:background="@drawable/selector_circle_btn_bg"
-            android:contentDescription="@string/skip_previous"
-            android:padding="5dp"
-            android:src="@drawable/ic_skip_previous"
-            app:tint="@color/md_white_1000"
-            tools:ignore="ImageContrastCheck" />
-
         <androidx.constraintlayout.widget.ConstraintLayout
             android:layout_width="wrap_content"
             android:layout_height="wrap_content">
 
-            <com.google.android.material.floatingactionbutton.FloatingActionButton
+            <com.google.android.material.button.MaterialButton
                 android:id="@+id/fab_play_stop"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_margin="10dp"
+                style="@style/Widget.Material3Expressive.Button.IconButton"
+                android:layout_width="90dp"
                 android:contentDescription="@string/audio_play"
-                android:src="@drawable/ic_play_24dp"
-                android:tint="@color/md_black_1000"
-                app:backgroundTint="@color/md_white_1000"
-                app:elevation="2dp"
-                app:fabSize="normal"
+                android:layout_height="90dp"
+                app:backgroundTint="?attr/colorSecondaryContainer"
+                app:icon="@drawable/play_anim"
+                app:iconGravity="textStart"
+                app:iconPadding="0dp"
+                app:iconSize="42dp"
+                app:iconTint="?attr/colorOnSecondaryContainer"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintBottom_toBottomOf="parent"
-                app:layout_constraintTop_toTopOf="parent"
-                app:pressedTranslationZ="2dp"
-                tools:ignore="ImageContrastCheck" />
+                app:layout_constraintTop_toTopOf="parent" />
 
-            <io.legato.kazusa.lib.theme.view.ThemeProgressBar
+            <com.google.android.material.loadingindicator.LoadingIndicator
                 android:id="@+id/progress_loading"
                 android:layout_width="0dp"
                 android:layout_height="0dp"
@@ -218,31 +253,21 @@
 
         </androidx.constraintlayout.widget.ConstraintLayout>
 
-        <io.legato.kazusa.ui.widget.image.ImageButton
-            android:id="@+id/iv_skip_next"
-            android:layout_width="46dp"
-            android:layout_height="46dp"
-            android:background="@drawable/selector_circle_btn_bg"
-            android:contentDescription="@string/skip_next"
-            android:padding="5dp"
-            android:src="@drawable/ic_skip_next"
-            app:tint="@color/md_white_1000"
-            tools:ignore="ImageContrastCheck" />
-
         <View
             android:layout_width="0dp"
             android:layout_height="1dp"
             android:layout_weight="1" />
 
-        <io.legato.kazusa.ui.widget.image.ImageButton
-            android:id="@+id/iv_fast_forward"
-            android:layout_width="46dp"
-            android:layout_height="46dp"
-            android:background="@drawable/selector_circle_btn_bg"
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/iv_skip_next"
+            style="@style/Widget.Material3Expressive.Button.IconButton.Outlined"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
             android:contentDescription="@string/skip_next"
-            android:padding="5dp"
-            android:src="@drawable/ic_fast_forward"
-            app:tint="@color/md_white_1000"
+            app:icon="@drawable/ic_skip_next"
+            app:iconGravity="textStart"
+            app:iconSize="32dp"
+            app:strokeWidth="0dp"
             tools:ignore="ImageContrastCheck" />
 
         <View
@@ -250,16 +275,122 @@
             android:layout_height="1dp"
             android:layout_weight="1" />
 
-        <io.legato.kazusa.ui.widget.image.ImageButton
-            android:id="@+id/iv_chapter"
-            android:layout_width="46dp"
-            android:layout_height="46dp"
-            android:background="@drawable/selector_circle_btn_bg"
-            android:contentDescription="@string/chapter_list"
-            android:padding="5dp"
-            android:src="@drawable/ic_chapter_list"
-            app:tint="@color/md_white_1000"
-            tools:ignore="ImageContrastCheck" />
+    </LinearLayout>
+
+    <LinearLayout
+        android:id="@+id/ll_sub_menu"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginBottom="16dp"
+        android:orientation="vertical"
+        app:layout_constraintBottom_toBottomOf="parent">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal">
+
+            <View
+                android:layout_width="0dp"
+                android:layout_height="1dp"
+                android:layout_weight="3" />
+
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/iv_play_mode"
+                style="@style/Widget.Material3Expressive.Button.IconButton.Outlined"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:contentDescription="@string/play_mode"
+                app:icon="@drawable/ic_play_mode_list_end_stop"
+                app:iconGravity="textStart"
+                app:iconSize="20dp"
+                app:strokeWidth="0dp" />
+
+            <View
+                android:layout_width="0dp"
+                android:layout_height="1dp"
+                android:layout_weight="1" />
+
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/iv_timer"
+                style="@style/Widget.Material3Expressive.Button.IconButton.Outlined"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:checkable="true"
+                android:contentDescription="@string/set_timer"
+                app:icon="@drawable/ic_timer_black_24dp"
+                app:iconGravity="textStart"
+                app:iconSize="20dp"
+                app:strokeWidth="0dp" />
+
+            <View
+                android:layout_width="0dp"
+                android:layout_height="1dp"
+                android:layout_weight="1" />
+
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/iv_chapter"
+                style="@style/Widget.Material3Expressive.Button.IconButton.Outlined"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:contentDescription="@string/chapter_list"
+                app:icon="@drawable/ic_chapter_list"
+                app:iconGravity="textStart"
+                app:iconSize="20dp"
+                app:strokeWidth="0dp" />
+
+            <View
+                android:layout_width="0dp"
+                android:layout_height="1dp"
+                android:layout_weight="1" />
+
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/iv_fast_forward"
+                style="@style/Widget.Material3Expressive.Button.IconButton.Outlined"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:checkable="true"
+                android:contentDescription="@string/skip_next"
+                app:icon="@drawable/ic_speed"
+                app:iconGravity="textStart"
+                app:strokeWidth="0dp"
+                tools:ignore="ImageContrastCheck" />
+
+            <View
+                android:layout_width="0dp"
+                android:layout_height="1dp"
+                android:layout_weight="3" />
+        </LinearLayout>
+
+        <LinearLayout
+            android:id="@+id/ll_set"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="16dp"
+            android:visibility="gone"
+            app:layout_constraintBottom_toBottomOf="parent">
+
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/btn_reset"
+                style="@style/Widget.Material3Expressive.Button.IconButton.Tonal"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:alpha="0.8"
+                android:contentDescription="@string/restore"
+                app:icon="@drawable/ic_restore"
+                app:iconGravity="textStart"
+                tools:ignore="ImageContrastCheck" />
+
+            <com.google.android.material.slider.Slider
+                android:id="@+id/setting_slider"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical"
+                android:value="0"
+                android:valueFrom="0"
+                android:valueTo="1" />
+        </LinearLayout>
+
 
     </LinearLayout>
 

app/src/main/res/layout/popup_seek_bar.xml

@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:background="@drawable/shape_card_view"
-    android:padding="8dp"
-    android:orientation="vertical"
-    android:gravity="center_horizontal">
-
-    <TextView
-        android:id="@+id/tv_seek_value"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:textColor="@color/secondaryText" />
-
-    <io.legato.kazusa.lib.theme.view.ThemeSlider
-        android:id="@+id/slider"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content" />
-
-</LinearLayout>

app/src/main/res/values/drawables.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:tools="http://schemas.android.com/tools">
+    <!-- Dynamic pointers -->
+    <drawable name="artist_art">@drawable/ic_groups</drawable>
+    <drawable name="pause_anim">@drawable/ic_media_pause_anim</drawable>
+    <drawable name="play_anim">@drawable/ic_media_play_anim</drawable>
+
+    <!-- Media3 -->
+    <drawable name="media3_notification_play" tools:keep="@drawable/media3_notification_play">
+        @drawable/ic_play_filled
+    </drawable>
+    <drawable name="media3_notification_pause" tools:keep="@drawable/media3_notification_pause">
+        @drawable/ic_pause_filled
+    </drawable>
+</resources>