<?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="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/thumbnail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginHorizontal="20dp"
            android:layout_marginVertical="10dp"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Small"
            tools:src="@tools:sample/backgrounds/scenic" />

        <ProgressBar
            android:id="@+id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />

    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/title"
            style="@style/TextViewMarquee"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="24sp" />

        <TextView
            android:id="@+id/uploader"
            style="@style/TextViewMarquee"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:textSize="18sp" />

    </LinearLayout>

    <com.google.android.material.slider.Slider
        android:id="@+id/time_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="20dp"
        app:labelBehavior="gone" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingHorizontal="20dp">

        <TextView
            android:id="@+id/current_position"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start|center"
            tools:text="00:00" />

        <TextView
            android:id="@+id/duration"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|center"
            tools:text="10:15" />

    </FrameLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="36dp">

        <ImageView
            android:id="@+id/prev"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center"
            android:layout_marginHorizontal="20dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_prev" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/play_pause"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:icon="@drawable/ic_pause"
            app:iconSize="24dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Full" />

        <ImageView
            android:id="@+id/next"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center"
            android:layout_marginHorizontal="20dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_next" />

    </LinearLayout>

    <com.google.android.material.card.MaterialCardView
        style="@style/Widget.Material3.CardView.Elevated"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="30dp"
        app:cardCornerRadius="18dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="15dp">

            <ImageView
                android:id="@+id/open_queue"
                style="@style/AudioPlayerButton"
                android:src="@drawable/ic_queue" />

            <ImageView
                android:id="@+id/playback_options"
                style="@style/AudioPlayerButton"
                android:layout_width="27dp"
                android:layout_height="27dp"
                android:src="@drawable/ic_speed" />

            <ImageView
                android:id="@+id/open_video"
                style="@style/AudioPlayerButton"
                android:src="@drawable/ic_video" />

            <ImageView
                android:id="@+id/share"
                style="@style/AudioPlayerButton"
                android:src="@drawable/ic_share" />

        </LinearLayout>

    </com.google.android.material.card.MaterialCardView>

</LinearLayout>