diff --git a/android/sample-app/src/main/java/cn/learningpad/oraltrainer/sample/ui/PlayerChrome.kt b/android/sample-app/src/main/java/cn/learningpad/oraltrainer/sample/ui/PlayerChrome.kt
index 7a798e0..2266cea 100644
--- a/android/sample-app/src/main/java/cn/learningpad/oraltrainer/sample/ui/PlayerChrome.kt
+++ b/android/sample-app/src/main/java/cn/learningpad/oraltrainer/sample/ui/PlayerChrome.kt
@@ -21,6 +21,8 @@ import android.widget.ScrollView
 import android.widget.SeekBar
 import android.widget.Switch
 import android.widget.TextView
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import cn.learningpad.oraltrainer.sample.Module
 import cn.learningpad.oraltrainer.sample.PROGRESS_MAX
 import cn.learningpad.oraltrainer.sample.R
@@ -104,37 +106,87 @@ internal class PlayerChrome(
         }
 
     fun createLandscapeContentView(): View =
-        FrameLayout(activity).apply {
+        LinearLayout(activity).apply {
+            orientation = LinearLayout.VERTICAL
             setBackgroundColor(Color.BLACK)
-            addView(createPlayerView())
+            ViewCompat.setOnApplyWindowInsetsListener(this) { view, insets ->
+                val bars = insets.getInsets(
+                    WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout(),
+                )
+                val gestures = insets.getInsets(WindowInsetsCompat.Type.mandatorySystemGestures())
+                view.setPadding(
+                    bars.left,
+                    bars.top,
+                    bars.right,
+                    maxOf(bars.bottom, gestures.bottom, 24.dp),
+                )
+                WindowInsetsCompat.CONSUMED
+            }
             addView(
-                createPlayerOverlay().apply {
-                    layoutParams = FrameLayout.LayoutParams(
+                createPlayerOverlay(compact = true).apply {
+                    layoutParams = LinearLayout.LayoutParams(
                         ViewGroup.LayoutParams.MATCH_PARENT,
                         ViewGroup.LayoutParams.WRAP_CONTENT,
-                        Gravity.TOP,
                     )
                 },
             )
-            val subtitleContainer = LinearLayout(activity).apply {
-                orientation = LinearLayout.VERTICAL
-                layoutParams = FrameLayout.LayoutParams(
-                    ViewGroup.LayoutParams.MATCH_PARENT,
-                    ViewGroup.LayoutParams.WRAP_CONTENT,
-                    Gravity.BOTTOM,
-                )
-                addView(
-                    createLandscapeSentencePanel().apply {
-                        layoutParams = LinearLayout.LayoutParams(
+            addView(
+                FrameLayout(activity).apply {
+                    layoutParams = LinearLayout.LayoutParams(
+                        ViewGroup.LayoutParams.MATCH_PARENT,
+                        0,
+                        1f,
+                    )
+                    addView(
+                        object : FrameLayout(activity) {
+                            override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+                                val maxWidth = MeasureSpec.getSize(widthMeasureSpec)
+                                val maxHeight = MeasureSpec.getSize(heightMeasureSpec)
+                                val heightFromWidth = if (maxWidth > 0) (maxWidth * 9) / 16 else 0
+                                val width: Int
+                                val height: Int
+                                if (heightFromWidth <= maxHeight) {
+                                    width = maxWidth
+                                    height = heightFromWidth
+                                } else {
+                                    height = maxHeight
+                                    width = (maxHeight * 16) / 9
+                                }
+                                super.onMeasure(
+                                    MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+                                    MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+                                )
+                            }
+                        }.apply {
+                            layoutParams = FrameLayout.LayoutParams(
+                                ViewGroup.LayoutParams.WRAP_CONTENT,
+                                ViewGroup.LayoutParams.WRAP_CONTENT,
+                                Gravity.TOP or Gravity.CENTER_HORIZONTAL,
+                            )
+                            addView(createPlayerView())
+                        },
+                    )
+                    val subtitleContainer = LinearLayout(activity).apply {
+                        orientation = LinearLayout.VERTICAL
+                        layoutParams = FrameLayout.LayoutParams(
                             ViewGroup.LayoutParams.MATCH_PARENT,
                             ViewGroup.LayoutParams.WRAP_CONTENT,
+                            Gravity.BOTTOM,
                         )
-                    },
-                )
-            }
-            addView(subtitleContainer)
-            applyLandscapeSubtitleState(subtitleContainer, animate = false)
-            installLandscapeSwipeGesture(subtitleContainer)
+                        addView(
+                            createLandscapeSentencePanel().apply {
+                                layoutParams = LinearLayout.LayoutParams(
+                                    ViewGroup.LayoutParams.MATCH_PARENT,
+                                    ViewGroup.LayoutParams.WRAP_CONTENT,
+                                )
+                            },
+                        )
+                    }
+                    addView(subtitleContainer)
+                    applyLandscapeSubtitleState(subtitleContainer, animate = false)
+                    installLandscapeSwipeGesture(subtitleContainer)
+                },
+            )
         }
 
     fun createSentenceContent(translucent: Boolean): LinearLayout {
@@ -279,11 +331,15 @@ internal class PlayerChrome(
             )
         }.also { bindings.playerView = it }
 
-    private fun createPlayerOverlay(): View {
+    private fun createPlayerOverlay(compact: Boolean = false): View {
         val overlay = LinearLayout(activity).apply {
             orientation = LinearLayout.HORIZONTAL
             gravity = Gravity.CENTER_VERTICAL
-            setPadding(12.dp, 10.dp, 12.dp, 8.dp)
+            if (compact) {
+                setPadding(12.dp, 4.dp, 12.dp, 0)
+            } else {
+                setPadding(12.dp, 10.dp, 12.dp, 8.dp)
+            }
         }
         bindings.timeText = widgets.overlayPill("--:-- / --:--").apply {
             layoutParams = LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f)