From 6d340bd7ab54a972dd6f2058f89a880a56704027 Mon Sep 17 00:00:00 2001
From: jarnedemeulemeester <jarne.demeulemeester@student.howest.be>
Date: Wed, 15 Sep 2021 13:42:17 +0200
Subject: [PATCH] Add new player controls

---
 .../dev/jdtech/jellyfin/PlayerActivity.kt     |  11 +
 .../dev/jdtech/jellyfin/models/PlayerItem.kt  |   1 +
 .../viewmodels/EpisodeBottomSheetViewModel.kt |   3 +-
 .../jellyfin/viewmodels/MediaInfoViewModel.kt |   5 +-
 .../viewmodels/PlayerActivityViewModel.kt     |  11 +
 app/src/main/res/drawable/ic_arrow_left.xml   |  20 ++
 .../main/res/drawable/ic_closed_caption.xml   |   9 +
 app/src/main/res/drawable/ic_fast_forward.xml |  20 ++
 app/src/main/res/drawable/ic_pause.xml        |  20 ++
 app/src/main/res/drawable/ic_rewind.xml       |  20 ++
 app/src/main/res/drawable/ic_skip_back.xml    |  20 ++
 app/src/main/res/drawable/ic_skip_forward.xml |  20 ++
 app/src/main/res/drawable/ic_speaker.xml      |  27 +++
 .../transparent_circle_background.xml         |  14 ++
 app/src/main/res/layout/activity_player.xml   |   4 +-
 .../layout/exo_player_styled_control_view.xml | 201 ++++++++++++++++++
 app/src/main/res/values/colors.xml            |   1 +
 app/src/main/res/values/drawables.xml         |   5 +
 18 files changed, 409 insertions(+), 3 deletions(-)
 create mode 100644 app/src/main/res/drawable/ic_arrow_left.xml
 create mode 100644 app/src/main/res/drawable/ic_closed_caption.xml
 create mode 100644 app/src/main/res/drawable/ic_fast_forward.xml
 create mode 100644 app/src/main/res/drawable/ic_pause.xml
 create mode 100644 app/src/main/res/drawable/ic_rewind.xml
 create mode 100644 app/src/main/res/drawable/ic_skip_back.xml
 create mode 100644 app/src/main/res/drawable/ic_skip_forward.xml
 create mode 100644 app/src/main/res/drawable/ic_speaker.xml
 create mode 100644 app/src/main/res/drawable/transparent_circle_background.xml
 create mode 100644 app/src/main/res/layout/exo_player_styled_control_view.xml
 create mode 100644 app/src/main/res/values/drawables.xml

diff --git a/app/src/main/java/dev/jdtech/jellyfin/PlayerActivity.kt b/app/src/main/java/dev/jdtech/jellyfin/PlayerActivity.kt
index a145a26a..e8fdce78 100644
--- a/app/src/main/java/dev/jdtech/jellyfin/PlayerActivity.kt
+++ b/app/src/main/java/dev/jdtech/jellyfin/PlayerActivity.kt
@@ -4,6 +4,7 @@ import androidx.appcompat.app.AppCompatActivity
 import android.os.Bundle
 import android.view.View
 import android.view.WindowManager
+import android.widget.TextView
 import androidx.activity.viewModels
 import androidx.navigation.navArgs
 import dagger.hilt.android.AndroidEntryPoint
@@ -26,6 +27,16 @@ class PlayerActivity : AppCompatActivity() {
 
         binding.playerView.player = viewModel.player
 
+        binding.playerView.findViewById<View>(R.id.back_button).setOnClickListener {
+            onBackPressed()
+        }
+
+        val videoNameTextView = binding.playerView.findViewById<TextView>(R.id.video_name)
+
+        viewModel.currentItemTitle.observe(this, { title ->
+            videoNameTextView.text = title
+        })
+
         viewModel.navigateBack.observe(this, {
             if (it) {
                 onBackPressed()
diff --git a/app/src/main/java/dev/jdtech/jellyfin/models/PlayerItem.kt b/app/src/main/java/dev/jdtech/jellyfin/models/PlayerItem.kt
index 726d62a3..0df53cf7 100644
--- a/app/src/main/java/dev/jdtech/jellyfin/models/PlayerItem.kt
+++ b/app/src/main/java/dev/jdtech/jellyfin/models/PlayerItem.kt
@@ -6,6 +6,7 @@ import java.util.*
 
 @Parcelize
 data class PlayerItem(
+    val name: String?,
     val itemId: UUID,
     val mediaSourceId: String,
     val playbackPosition: Long
diff --git a/app/src/main/java/dev/jdtech/jellyfin/viewmodels/EpisodeBottomSheetViewModel.kt b/app/src/main/java/dev/jdtech/jellyfin/viewmodels/EpisodeBottomSheetViewModel.kt
index e09b18a8..33ff30b5 100644
--- a/app/src/main/java/dev/jdtech/jellyfin/viewmodels/EpisodeBottomSheetViewModel.kt
+++ b/app/src/main/java/dev/jdtech/jellyfin/viewmodels/EpisodeBottomSheetViewModel.kt
@@ -86,7 +86,7 @@ constructor(
             val intros = jellyfinRepository.getIntros(startEpisode.id)
             for (intro in intros) {
                 if (intro.mediaSources.isNullOrEmpty()) continue
-                playerItems.add(PlayerItem(intro.id, intro.mediaSources?.get(0)?.id!!, 0))
+                playerItems.add(PlayerItem(intro.name, intro.id, intro.mediaSources?.get(0)?.id!!, 0))
                 introsCount += 1
             }
         }
@@ -102,6 +102,7 @@ constructor(
             if (episode.locationType == LocationType.VIRTUAL) continue
             playerItems.add(
                 PlayerItem(
+                    episode.name,
                     episode.id,
                     episode.mediaSources?.get(0)?.id!!,
                     playbackPosition
diff --git a/app/src/main/java/dev/jdtech/jellyfin/viewmodels/MediaInfoViewModel.kt b/app/src/main/java/dev/jdtech/jellyfin/viewmodels/MediaInfoViewModel.kt
index 4b0a5485..ff032f3b 100644
--- a/app/src/main/java/dev/jdtech/jellyfin/viewmodels/MediaInfoViewModel.kt
+++ b/app/src/main/java/dev/jdtech/jellyfin/viewmodels/MediaInfoViewModel.kt
@@ -202,7 +202,7 @@ constructor(private val jellyfinRepository: JellyfinRepository) : ViewModel() {
             val intros = jellyfinRepository.getIntros(series.id)
             for (intro in intros) {
                 if (intro.mediaSources.isNullOrEmpty()) continue
-                playerItems.add(PlayerItem(intro.id, intro.mediaSources?.get(0)?.id!!, 0))
+                playerItems.add(PlayerItem(intro.name, intro.id, intro.mediaSources?.get(0)?.id!!, 0))
                 introsCount += 1
             }
         }
@@ -211,6 +211,7 @@ constructor(private val jellyfinRepository: JellyfinRepository) : ViewModel() {
             "Movie" -> {
                 playerItems.add(
                     PlayerItem(
+                        series.name,
                         series.id,
                         series.mediaSources?.get(mediaSourceIndex ?: 0)?.id!!,
                         playbackPosition
@@ -231,6 +232,7 @@ constructor(private val jellyfinRepository: JellyfinRepository) : ViewModel() {
                         if (episode.locationType == LocationType.VIRTUAL) continue
                         playerItems.add(
                             PlayerItem(
+                                episode.name,
                                 episode.id,
                                 episode.mediaSources?.get(0)?.id!!,
                                 0
@@ -250,6 +252,7 @@ constructor(private val jellyfinRepository: JellyfinRepository) : ViewModel() {
                             if (episode.locationType == LocationType.VIRTUAL) continue
                             playerItems.add(
                                 PlayerItem(
+                                    episode.name,
                                     episode.id,
                                     episode.mediaSources?.get(0)?.id!!,
                                     0
diff --git a/app/src/main/java/dev/jdtech/jellyfin/viewmodels/PlayerActivityViewModel.kt b/app/src/main/java/dev/jdtech/jellyfin/viewmodels/PlayerActivityViewModel.kt
index c63a9fab..8ad468b6 100644
--- a/app/src/main/java/dev/jdtech/jellyfin/viewmodels/PlayerActivityViewModel.kt
+++ b/app/src/main/java/dev/jdtech/jellyfin/viewmodels/PlayerActivityViewModel.kt
@@ -32,6 +32,11 @@ constructor(
     private val _navigateBack = MutableLiveData<Boolean>()
     val navigateBack: LiveData<Boolean> = _navigateBack
 
+    private val _currentItemTitle = MutableLiveData<String>()
+    val currentItemTitle: LiveData<String> = _currentItemTitle
+
+    private var items: Array<PlayerItem> = arrayOf()
+
     var playWhenReady = true
     private var currentWindow = 0
     private var playbackPosition: Long = 0
@@ -62,6 +67,7 @@ constructor(
     fun initializePlayer(
         items: Array<PlayerItem>
     ) {
+        this.items = items
         player.addListener(this)
 
         viewModelScope.launch {
@@ -146,6 +152,11 @@ constructor(
         Timber.d("Playing MediaItem: ${mediaItem?.mediaId}")
         viewModelScope.launch {
             try {
+                for (item in items) {
+                    if (item.itemId.toString() == player.currentMediaItem?.mediaId ?: "") {
+                        _currentItemTitle.value = item.name
+                    }
+                }
                 jellyfinRepository.postPlaybackStart(UUID.fromString(mediaItem?.mediaId))
             } catch (e: Exception) {
                 Timber.e(e)
diff --git a/app/src/main/res/drawable/ic_arrow_left.xml b/app/src/main/res/drawable/ic_arrow_left.xml
new file mode 100644
index 00000000..adccd74d
--- /dev/null
+++ b/app/src/main/res/drawable/ic_arrow_left.xml
@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M19,12L5,12"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M12,19l-7,-7l7,-7"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_closed_caption.xml b/app/src/main/res/drawable/ic_closed_caption.xml
new file mode 100644
index 00000000..cd15b88a
--- /dev/null
+++ b/app/src/main/res/drawable/ic_closed_caption.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M19,4L5,4c-1.11,0 -2,0.9 -2,2v12c0,1.1 0.89,2 2,2h14c1.1,0 2,-0.9 2,-2L21,6c0,-1.1 -0.9,-2 -2,-2zM19,18L5,18L5,6h14v12zM7,15h3c0.55,0 1,-0.45 1,-1v-1L9.5,13v0.5h-2v-3h2v0.5L11,11v-1c0,-0.55 -0.45,-1 -1,-1L7,9c-0.55,0 -1,0.45 -1,1v4c0,0.55 0.45,1 1,1zM14,15h3c0.55,0 1,-0.45 1,-1v-1h-1.5v0.5h-2v-3h2v0.5L18,11v-1c0,-0.55 -0.45,-1 -1,-1h-3c-0.55,0 -1,0.45 -1,1v4c0,0.55 0.45,1 1,1z"
+      android:fillColor="@color/white"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_fast_forward.xml b/app/src/main/res/drawable/ic_fast_forward.xml
new file mode 100644
index 00000000..f241b31a
--- /dev/null
+++ b/app/src/main/res/drawable/ic_fast_forward.xml
@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M13,19l9,-7l-9,-7l0,14z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M2,19l9,-7l-9,-7l0,14z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_pause.xml b/app/src/main/res/drawable/ic_pause.xml
new file mode 100644
index 00000000..c7c41e07
--- /dev/null
+++ b/app/src/main/res/drawable/ic_pause.xml
@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M6,4h4v16h-4z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@android:color/white"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M14,4h4v16h-4z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@android:color/white"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_rewind.xml b/app/src/main/res/drawable/ic_rewind.xml
new file mode 100644
index 00000000..ff2df095
--- /dev/null
+++ b/app/src/main/res/drawable/ic_rewind.xml
@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M11,19l-9,-7l9,-7l0,14z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M22,19l-9,-7l9,-7l0,14z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_skip_back.xml b/app/src/main/res/drawable/ic_skip_back.xml
new file mode 100644
index 00000000..f12a32aa
--- /dev/null
+++ b/app/src/main/res/drawable/ic_skip_back.xml
@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M19,20l-10,-8l10,-8l0,16z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M5,19L5,5"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_skip_forward.xml b/app/src/main/res/drawable/ic_skip_forward.xml
new file mode 100644
index 00000000..177c4488
--- /dev/null
+++ b/app/src/main/res/drawable/ic_skip_forward.xml
@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M5,4l10,8l-10,8l0,-16z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M19,5L19,19"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_speaker.xml b/app/src/main/res/drawable/ic_speaker.xml
new file mode 100644
index 00000000..e1f49ba4
--- /dev/null
+++ b/app/src/main/res/drawable/ic_speaker.xml
@@ -0,0 +1,27 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M6,2L18,2A2,2 0,0 1,20 4L20,20A2,2 0,0 1,18 22L6,22A2,2 0,0 1,4 20L4,4A2,2 0,0 1,6 2z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M12,14m-4,0a4,4 0,1 1,8 0a4,4 0,1 1,-8 0"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M12,6L12.01,6"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/white"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/transparent_circle_background.xml b/app/src/main/res/drawable/transparent_circle_background.xml
new file mode 100644
index 00000000..6d78ee5e
--- /dev/null
+++ b/app/src/main/res/drawable/transparent_circle_background.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="@color/white">
+    <item android:id="@android:id/mask">
+        <shape android:shape="oval">
+            <solid android:color="@color/white"/>
+        </shape>
+    </item>
+    <item>
+        <shape>
+            <solid android:color="@android:color/transparent"/>
+        </shape>
+    </item>
+</ripple>
\ No newline at end of file
diff --git a/app/src/main/res/layout/activity_player.xml b/app/src/main/res/layout/activity_player.xml
index fa68ff56..428cc72d 100644
--- a/app/src/main/res/layout/activity_player.xml
+++ b/app/src/main/res/layout/activity_player.xml
@@ -12,6 +12,8 @@
         android:layout_height="match_parent"
         android:background="@color/black"
         app:show_subtitle_button="true"
-        app:show_buffering="always"/>
+        app:show_buffering="always"
+        app:controller_layout_id="@layout/exo_player_styled_control_view"
+        app:animation_enabled="false"/>
 
 </FrameLayout>
diff --git a/app/src/main/res/layout/exo_player_styled_control_view.xml b/app/src/main/res/layout/exo_player_styled_control_view.xml
new file mode 100644
index 00000000..89eedf8e
--- /dev/null
+++ b/app/src/main/res/layout/exo_player_styled_control_view.xml
@@ -0,0 +1,201 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout 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:background="@color/player_background">
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="8dp"
+        android:orientation="horizontal">
+
+        <LinearLayout
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            app:layout_constraintEnd_toStartOf="@id/extra_buttons"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <ImageButton
+                android:id="@+id/back_button"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:background="@drawable/transparent_circle_background"
+                android:padding="16dp"
+                android:src="@drawable/ic_arrow_left" />
+
+            <Space
+                android:layout_width="16dp"
+                android:layout_height="0dp" />
+
+            <TextView
+                android:id="@+id/video_name"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical"
+                android:layout_marginEnd="16dp"
+                android:ellipsize="end"
+                android:maxLines="1"
+                android:textAppearance="@style/TextAppearance.AppCompat.Title"
+                android:textColor="@color/white"
+                tools:text="The Dawn of Despair" />
+
+        </LinearLayout>
+
+        <LinearLayout
+            android:id="@+id/extra_buttons"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <ImageButton
+                android:id="@+id/exo_audio_track"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="end"
+                android:background="@drawable/transparent_circle_background"
+                android:padding="16dp"
+                android:src="@drawable/ic_speaker" />
+
+            <Space
+                android:layout_width="16dp"
+                android:layout_height="0dp" />
+
+            <ImageButton
+                android:id="@+id/exo_subtitle"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="end"
+                android:background="@drawable/transparent_circle_background"
+                android:padding="16dp"
+                android:src="@drawable/ic_closed_caption" />
+
+        </LinearLayout>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+    <LinearLayout
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center"
+        android:gravity="center_vertical"
+        android:orientation="horizontal">
+
+        <ImageButton
+            android:id="@+id/exo_prev"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="32dp"
+            android:background="@drawable/transparent_circle_background"
+            android:padding="16dp"
+            android:src="@drawable/ic_skip_back" />
+
+        <ImageButton
+            android:id="@+id/exo_rew"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="32dp"
+            android:background="@drawable/transparent_circle_background"
+            android:padding="16dp"
+            android:src="@drawable/ic_rewind" />
+
+        <ImageButton
+            android:id="@+id/exo_play_pause"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:background="@drawable/circle_background"
+            android:backgroundTint="@color/white"
+            android:padding="16dp"
+            android:src="@drawable/ic_play"
+            app:tint="@color/black" />
+
+        <ImageButton
+            android:id="@+id/exo_pause"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:background="@drawable/circle_background"
+            android:backgroundTint="@color/white"
+            android:padding="16dp"
+            android:src="@drawable/ic_pause"
+            android:visibility="gone"
+            app:tint="@color/black" />
+
+        <ImageButton
+            android:id="@+id/exo_ffwd"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="32dp"
+            android:background="@drawable/transparent_circle_background"
+            android:padding="16dp"
+            android:src="@drawable/ic_fast_forward" />
+
+        <ImageButton
+            android:id="@+id/exo_next"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="32dp"
+            android:background="@drawable/transparent_circle_background"
+            android:padding="16dp"
+            android:src="@drawable/ic_skip_forward" />
+    </LinearLayout>
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_gravity="bottom"
+        android:orientation="vertical"
+        android:padding="16dp">
+
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:gravity="center_vertical"
+            android:orientation="horizontal"
+            android:paddingStart="8dp">
+
+            <TextView
+                android:id="@+id/exo_position"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:textColor="@color/white"
+                android:textSize="14sp"
+                tools:text="00:00" />
+
+            <Space
+                android:layout_width="8dp"
+                android:layout_height="0dp" />
+
+            <View
+                android:layout_width="4dp"
+                android:layout_height="1dp"
+                android:background="@color/white" />
+
+            <Space
+                android:layout_width="8dp"
+                android:layout_height="0dp" />
+
+            <TextView
+                android:id="@+id/exo_duration"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:textColor="@color/white"
+                android:textSize="14sp"
+                tools:text="24:21" />
+        </LinearLayout>
+
+
+        <com.google.android.exoplayer2.ui.DefaultTimeBar
+            android:id="@+id/exo_progress"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:played_color="@color/primary" />
+
+    </LinearLayout>
+
+</FrameLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index f230cfa6..4e95ff86 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -15,4 +15,5 @@
     <color name="white">#FFFFFFFF</color>
     <color name="red">#EB5757</color>
     <color name="yellow">#F2C94C</color>
+    <color name="player_background">#AA000000</color>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/drawables.xml b/app/src/main/res/values/drawables.xml
new file mode 100644
index 00000000..131b14cb
--- /dev/null
+++ b/app/src/main/res/values/drawables.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <drawable name="exo_styled_controls_play">@drawable/ic_play</drawable>
+    <drawable name="exo_styled_controls_pause">@drawable/ic_pause</drawable>
+</resources>
\ No newline at end of file