From a388906f1b9d4d5a353a98602c39c42ec864bd6a Mon Sep 17 00:00:00 2001
From: Nguyen Duc Tuan Minh <minhnguyen.31211027595@st.ueh.edu.vn>
Date: Wed, 6 Nov 2024 00:16:51 +0700
Subject: [PATCH] 90% Local Playlist Compose

---
 .idea/inspectionProfiles/Project_Default.xml  |    4 +
 .idea/ktlint-plugin.xml                       |    1 +
 ...kotlin-compiler-9740287438046207964.salive |    0
 app/build.gradle.kts                          |    8 +-
 app/release/output-metadata.json              |   38 +-
 .../maxrave/simpmusic/SimpMusicApplication.kt |    2 +
 .../com/maxrave/simpmusic/common/Config.kt    |    1 +
 .../maxrave/simpmusic/data/db/DatabaseDao.kt  |    3 +
 .../simpmusic/data/db/LocalDataSource.kt      |    2 +
 .../simpmusic/data/manager/LoadMoreManager.kt |   11 +
 .../data/manager/LocalPlaylistManager.kt      |  143 +-
 .../simpmusic/data/parser/HomeParser.kt       |  754 ++++++----
 .../simpmusic/data/parser/PlaylistParser.kt   |   11 +-
 .../simpmusic/di/MediaServiceModule.kt        |  261 +++-
 .../maxrave/simpmusic/di/ViewModelModule.kt   |   16 +
 .../simpmusic/service/SimpleMediaService.kt   |  272 +---
 .../service/SimpleMediaServiceHandler.kt      |  923 +++++++-----
 .../com/maxrave/simpmusic/ui/MainActivity.kt  |   30 +-
 .../simpmusic/ui/component/AdapterItems.kt    |  129 +-
 .../simpmusic/ui/component/DynamicHeaders.kt  |  320 ----
 .../simpmusic/ui/component/LoadingDialog.kt   |   77 +
 .../simpmusic/ui/component/LyricsView.kt      |  529 ++++---
 .../ui/component/ModalBottomSheet.kt          |  214 ++-
 .../simpmusic/ui/component/PlaylistItems.kt   |   26 +-
 .../simpmusic/ui/fragment/SearchFragment.kt   |   16 +-
 .../ui/fragment/home/RecentlySongsFragment.kt |    4 +-
 .../ui/fragment/home/SettingsFragment.kt      |    2 +-
 .../ui/fragment/library/DownloadedFragment.kt |    4 +-
 .../ui/fragment/library/FavoriteFragment.kt   |    4 +-
 .../ui/fragment/library/LibraryFragment.kt    |    4 +-
 .../ui/fragment/library/MostPlayedFragment.kt |    4 +-
 .../ui/fragment/login/LogInFragment.kt        |    4 +-
 .../ui/fragment/login/MusixmatchFragment.kt   |    3 +-
 .../ui/fragment/login/SpotifyLogInFragment.kt |    3 +-
 .../ui/fragment/other/AlbumFragment.kt        |   24 +-
 .../ui/fragment/other/ArtistFragment.kt       |    8 +-
 .../fragment/other/LocalPlaylistFragment.kt   |  154 +-
 .../ui/fragment/other/PlaylistFragment.kt     |   40 +-
 .../ui/fragment/other/PodcastFragment.kt      |   12 +-
 .../ui/fragment/player/FullscreenFragment.kt  |    6 +-
 .../ui/fragment/player/InfoFragment.kt        |   28 +-
 .../ui/fragment/player/QueueFragment.kt       |  132 +-
 .../maxrave/simpmusic/ui/screen/MiniPlayer.kt |    1 +
 .../simpmusic/ui/screen/home/HomeScreen.kt    |  121 +-
 .../ui/screen/library/PlaylistScreen.kt       |  418 ++----
 .../ui/screen/player/NowPlayingScreen.kt      | 1318 +++++++++--------
 .../viewModel/LocalPlaylistViewModel.kt       | 1069 +++++++------
 .../NowPlayingBottomSheetViewModel.kt         |  238 +++
 .../simpmusic/viewModel/SettingsViewModel.kt  |    2 +
 .../simpmusic/viewModel/SharedViewModel.kt    |  115 +-
 .../simpmusic/viewModel/base/BaseViewModel.kt |   92 ++
 .../viewModel/uiState/LocalPlaylistState.kt   |   66 +
 app/src/main/res/values/strings.xml           |    2 +
 gradle/libs.versions.toml                     |   33 +-
 kotlinYtmusicScraper/build.gradle.kts         |    2 +-
 .../maxrave/kotlinytmusicscraper/YouTube.kt   | 1033 +++++++++----
 .../maxrave/kotlinytmusicscraper/Ytmusic.kt   |   17 +
 .../kotlinytmusicscraper/models/Badges.kt     |    2 +-
 .../kotlinytmusicscraper/models/Menu.kt       |   21 +-
 .../models/MusicResponsiveListItemRenderer.kt |   64 +-
 .../kotlinytmusicscraper/models/YTItem.kt     |   19 +-
 .../parser/PlaylistParser.kt                  |  244 +++
 .../parser/YtItemParser.kt                    |   24 +
 .../maxrave/kotlinytmusicscraper/test/main.kt |   24 +-
 64 files changed, 5223 insertions(+), 3929 deletions(-)
 delete mode 100644 .kotlin/sessions/kotlin-compiler-9740287438046207964.salive
 create mode 100644 app/src/main/java/com/maxrave/simpmusic/data/manager/LoadMoreManager.kt
 create mode 100644 app/src/main/java/com/maxrave/simpmusic/di/ViewModelModule.kt
 delete mode 100644 app/src/main/java/com/maxrave/simpmusic/ui/component/DynamicHeaders.kt
 create mode 100644 app/src/main/java/com/maxrave/simpmusic/ui/component/LoadingDialog.kt
 create mode 100644 app/src/main/java/com/maxrave/simpmusic/viewModel/NowPlayingBottomSheetViewModel.kt
 create mode 100644 app/src/main/java/com/maxrave/simpmusic/viewModel/uiState/LocalPlaylistState.kt
 create mode 100644 kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/parser/PlaylistParser.kt
 create mode 100644 kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/parser/YtItemParser.kt

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index b67486ec..fb93d254 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -3,15 +3,19 @@
     <option name="myName" value="Project Default" />
     <inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
diff --git a/.idea/ktlint-plugin.xml b/.idea/ktlint-plugin.xml
index bee5678e..52c6220f 100644
--- a/.idea/ktlint-plugin.xml
+++ b/.idea/ktlint-plugin.xml
@@ -2,5 +2,6 @@
 <project version="4">
   <component name="KtLint plugin">
     <ktlintMode>DISTRACT_FREE</ktlintMode>
+    <formatOnSave>false</formatOnSave>
   </component>
 </project>
\ No newline at end of file
diff --git a/.kotlin/sessions/kotlin-compiler-9740287438046207964.salive b/.kotlin/sessions/kotlin-compiler-9740287438046207964.salive
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index d229892d..71437aa7 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -11,19 +11,20 @@ plugins {
 
 android {
     namespace = "com.maxrave.simpmusic"
-    compileSdk = 34
+    compileSdk = 35
 
     defaultConfig {
         applicationId = "com.maxrave.simpmusic"
         minSdk = 26
         targetSdk = 35
-        versionCode = 20
-        versionName = "0.2.3-hf2"
+        versionCode = 21
+        versionName = "0.2.4"
         vectorDrawables.useSupportLibrary = true
 
         ksp {
             arg("room.schemaLocation", "$projectDir/schemas")
             arg("KOIN_CONFIG_CHECK", "true")
+            arg("KOIN_USE_COMPOSE_VIEWMODEL","true")
         }
 
         resourceConfigurations +=
@@ -180,6 +181,7 @@ dependencies {
     implementation(composeBom)
     androidTestImplementation(composeBom)
     implementation(libs.compose.material3.lib)
+    implementation(libs.compose.material3.sizeclass)
     implementation(libs.compose.ui)
     implementation(libs.compose.material.ripple)
     implementation(libs.compose.material.icons.core)
diff --git a/app/release/output-metadata.json b/app/release/output-metadata.json
index 84e55e8c..f03d666e 100644
--- a/app/release/output-metadata.json
+++ b/app/release/output-metadata.json
@@ -1,21 +1,21 @@
 {
-    "version": 3,
-    "artifactType": {
-        "type": "APK",
-        "kind": "Directory"
-    },
-    "applicationId": "com.maxrave.simpmusic",
-    "variantName": "release",
-    "elements": [
-        {
-            "type": "SINGLE",
-            "filters": [],
-            "attributes": [],
-            "versionCode": 20,
-            "versionName": "0.2.3-hf2",
-            "outputFile": "app-release.apk"
-        }
-    ],
-    "elementType": "File",
-    "minSdkVersionForDexing": 26
+  "version": 3,
+  "artifactType": {
+    "type": "APK",
+    "kind": "Directory"
+  },
+  "applicationId": "com.maxrave.simpmusic",
+  "variantName": "release",
+  "elements": [
+    {
+      "type": "SINGLE",
+      "filters": [],
+      "attributes": [],
+      "versionCode": 21,
+      "versionName": "0.2.4",
+      "outputFile": "app-release.apk"
+    }
+  ],
+  "elementType": "File",
+  "minSdkVersionForDexing": 26
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/maxrave/simpmusic/SimpMusicApplication.kt b/app/src/main/java/com/maxrave/simpmusic/SimpMusicApplication.kt
index 40a952f8..e14f9f58 100644
--- a/app/src/main/java/com/maxrave/simpmusic/SimpMusicApplication.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/SimpMusicApplication.kt
@@ -8,6 +8,7 @@ import androidx.media3.common.util.UnstableApi
 import cat.ereza.customactivityoncrash.config.CaocConfig
 import com.maxrave.simpmusic.di.databaseModule
 import com.maxrave.simpmusic.di.mediaServiceModule
+import com.maxrave.simpmusic.di.viewModelModule
 import com.maxrave.simpmusic.ui.MainActivity
 import org.koin.android.ext.koin.androidContext
 import org.koin.android.ext.koin.androidLogger
@@ -29,6 +30,7 @@ class SimpMusicApplication :
             modules(
                 databaseModule,
                 mediaServiceModule,
+                viewModelModule
             )
             workManagerFactory()
         }
diff --git a/app/src/main/java/com/maxrave/simpmusic/common/Config.kt b/app/src/main/java/com/maxrave/simpmusic/common/Config.kt
index 11b6b800..4043cebd 100644
--- a/app/src/main/java/com/maxrave/simpmusic/common/Config.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/common/Config.kt
@@ -23,6 +23,7 @@ object Config {
     const val PLAYER_CACHE = "playerCache"
     const val DOWNLOAD_CACHE = "downloadCache"
     const val CANVAS_CACHE = "canvasCache"
+    const val SERVICE_SCOPE = "serviceScope"
 
     val REMOVED_SONG_DATE_TIME = LocalDateTime.of(2003, Month.AUGUST, 26, 3, 0)
 
diff --git a/app/src/main/java/com/maxrave/simpmusic/data/db/DatabaseDao.kt b/app/src/main/java/com/maxrave/simpmusic/data/db/DatabaseDao.kt
index c5fdc2ce..4475c162 100644
--- a/app/src/main/java/com/maxrave/simpmusic/data/db/DatabaseDao.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/data/db/DatabaseDao.kt
@@ -352,6 +352,9 @@ interface DatabaseDao {
         state: Int,
     )
 
+    @Query("UPDATE local_playlist SET synced_with_youtube_playlist = 0, youtube_sync_state = 0, youtubePlaylistId = NULL WHERE id = :id")
+    suspend fun unsyncLocalPlaylist(id: Long)
+
     @Query("SELECT downloadState FROM local_playlist WHERE id = :id")
     fun getDownloadStateFlowOfLocalPlaylist(id: Long): Flow<Int>
 
diff --git a/app/src/main/java/com/maxrave/simpmusic/data/db/LocalDataSource.kt b/app/src/main/java/com/maxrave/simpmusic/data/db/LocalDataSource.kt
index 98234295..364c56c3 100644
--- a/app/src/main/java/com/maxrave/simpmusic/data/db/LocalDataSource.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/data/db/LocalDataSource.kt
@@ -241,6 +241,8 @@ class LocalDataSource(
     suspend fun insertPairSongLocalPlaylist(pairSongLocalPlaylist: PairSongLocalPlaylist) =
         databaseDao.insertPairSongLocalPlaylist(pairSongLocalPlaylist)
 
+    suspend fun unsyncLocalPlaylist(id: Long) = databaseDao.unsyncLocalPlaylist(id)
+
     suspend fun getPlaylistPairSong(playlistId: Long) = databaseDao.getPlaylistPairSong(playlistId)
 
     suspend fun getPlaylistPairSongByOffset(
diff --git a/app/src/main/java/com/maxrave/simpmusic/data/manager/LoadMoreManager.kt b/app/src/main/java/com/maxrave/simpmusic/data/manager/LoadMoreManager.kt
new file mode 100644
index 00000000..71de5cec
--- /dev/null
+++ b/app/src/main/java/com/maxrave/simpmusic/data/manager/LoadMoreManager.kt
@@ -0,0 +1,11 @@
+package com.maxrave.simpmusic.data.manager
+
+import android.content.Context
+import com.maxrave.simpmusic.data.manager.base.BaseManager
+
+class LoadMoreManager(
+    private val context: Context,
+) : BaseManager(context) {
+    override val tag: String
+        get() = this.javaClass.simpleName
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/maxrave/simpmusic/data/manager/LocalPlaylistManager.kt b/app/src/main/java/com/maxrave/simpmusic/data/manager/LocalPlaylistManager.kt
index 72096508..452582ec 100644
--- a/app/src/main/java/com/maxrave/simpmusic/data/manager/LocalPlaylistManager.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/data/manager/LocalPlaylistManager.kt
@@ -9,6 +9,7 @@ import com.maxrave.kotlinytmusicscraper.YouTube
 import com.maxrave.kotlinytmusicscraper.models.MusicShelfRenderer
 import com.maxrave.simpmusic.R
 import com.maxrave.simpmusic.common.DownloadState
+import com.maxrave.simpmusic.data.db.Converters
 import com.maxrave.simpmusic.data.db.entities.LocalPlaylistEntity
 import com.maxrave.simpmusic.data.db.entities.LocalPlaylistEntity.YouTubeSyncState.Synced
 import com.maxrave.simpmusic.data.db.entities.LocalPlaylistEntity.YouTubeSyncState.Syncing
@@ -16,10 +17,13 @@ import com.maxrave.simpmusic.data.db.entities.PairSongLocalPlaylist
 import com.maxrave.simpmusic.data.db.entities.SetVideoIdEntity
 import com.maxrave.simpmusic.data.db.entities.SongEntity
 import com.maxrave.simpmusic.data.manager.base.BaseManager
+import com.maxrave.simpmusic.data.model.browse.album.Track
 import com.maxrave.simpmusic.data.model.browse.playlist.PlaylistBrowse
 import com.maxrave.simpmusic.data.parser.parseSetVideoId
+import com.maxrave.simpmusic.extension.toListTrack
 import com.maxrave.simpmusic.extension.toListVideoId
 import com.maxrave.simpmusic.extension.toSongEntity
+import com.maxrave.simpmusic.extension.toTrack
 import com.maxrave.simpmusic.pagination.localPlaylistPaging.LocalPlaylistPagingSource
 import com.maxrave.simpmusic.utils.LocalResource
 import com.maxrave.simpmusic.viewModel.FilterState
@@ -43,7 +47,8 @@ class LocalPlaylistManager(
 
     fun downloadStateFlow(id: Long): Flow<Int> = localDataSource.getDownloadStateFlowOfLocalPlaylist(id)
 
-    fun listTrackFlow(id: Long): Flow<List<String>> = localDataSource.getListTracksFlowOfLocalPlaylist(id).map { it ?: emptyList() }
+    fun listTrackFlow(id: Long): Flow<List<String>> = localDataSource.getListTracksFlowOfLocalPlaylist(id)
+        .map { Converters().fromString(it?.firstOrNull()) ?: emptyList() }
 
     fun getTracksPaging(
         id: Long,
@@ -64,6 +69,37 @@ class LocalPlaylistManager(
         ).flow
     }
 
+    suspend fun getFullPlaylistTracks(id: Long): List<SongEntity> {
+        val playlist = localDataSource.getLocalPlaylist(id)
+        val tracks = mutableListOf<SongEntity>()
+        var currentPage = 0
+        while (true) {
+            val pairs =
+                localDataSource.getPlaylistPairSongByOffset(
+                    playlistId = id,
+                    filterState = FilterState.OlderFirst,
+                    offset = currentPage,
+                    totalCount = playlist.tracks?.size ?: 0,
+                )
+            if (pairs.isNullOrEmpty()) {
+                break
+            }
+            val songs =
+                localDataSource
+                    .getSongByListVideoIdFull(
+                        pairs.map { it.songId },
+                    )
+            val idValue = songs.associateBy { it.videoId }
+            val sorted =
+                pairs.mapNotNull {
+                    idValue[it.songId]
+                }
+            tracks.addAll(sorted)
+            currentPage++
+        }
+        return tracks
+    }
+
     suspend fun insertLocalPlaylist(localPlaylist: LocalPlaylistEntity): Flow<LocalResource<String>> =
         wrapMessageResource(
             successMessage = getString(R.string.added_local_playlist),
@@ -112,6 +148,15 @@ class LocalPlaylistManager(
         localDataSource.updateLocalPlaylistThumbnail(id = id, thumbnail = newThumbnail)
     }
 
+    suspend fun updateDownloadState(
+        id: Long,
+        downloadState: Int,
+    ) = wrapMessageResource(
+        successMessage = getString(R.string.updated),
+    ) {
+        localDataSource.updateLocalPlaylistDownloadState(id = id, downloadState = downloadState)
+    }
+
     suspend fun syncYouTubePlaylistToLocalPlaylist(playlist: PlaylistBrowse): Flow<LocalResource<String>> =
         flow<LocalResource<String>> {
             emit(LocalResource.Loading())
@@ -221,11 +266,12 @@ class LocalPlaylistManager(
     /**
      * Sync local playlist to YouTube playlist
      * return youtubePlaylistId
-     * @param LocalPlaylistEntity
+     * @param playlistId
      * @return Flow<LocalResource<String>>
      */
-    suspend fun syncLocalPlaylistToYouTubePlaylist(playlist: LocalPlaylistEntity) =
+    suspend fun syncLocalPlaylistToYouTubePlaylist(playlistId: Long) =
         wrapResultResource {
+            val playlist = localDataSource.getLocalPlaylist(playlistId)
             YouTube
                 .createPlaylist(
                     playlist.title,
@@ -235,6 +281,73 @@ class LocalPlaylistManager(
                 }
         }
 
+    suspend fun unsyncLocalPlaylist(id: Long) =
+        wrapMessageResource(
+            successMessage = getString(R.string.unsynced),
+        ) {
+            localDataSource.unsyncLocalPlaylist(id)
+        }
+
+    suspend fun updateSyncState(
+        id: Long,
+        syncState: Int,
+    ) = wrapMessageResource(
+        successMessage = getString(R.string.synced),
+    ) {
+        localDataSource.updateLocalPlaylistYouTubePlaylistSyncState(id, syncState)
+    }
+
+    suspend fun updateYouTubePlaylistId(
+        id: Long,
+        youtubePlaylistId: String,
+    ) = wrapMessageResource(
+        successMessage = getString(R.string.updated),
+    ) {
+        localDataSource.updateLocalPlaylistYouTubePlaylistId(id, youtubePlaylistId)
+    }
+
+    suspend fun updateListTrackSynced(id: Long) =
+        flow<Boolean> {
+            val localPlaylist = localDataSource.getLocalPlaylist(id)
+            val tracks = localPlaylist.tracks ?: emptyList()
+            val currentTracks = tracks.toMutableList()
+            localPlaylist.youtubePlaylistId?.let { ytId ->
+                Log.d(tag, "updateListTrackSynced: $ytId")
+                YouTube.getYouTubePlaylistFullTracksWithSetVideoId(ytId).onSuccess { list ->
+                    Log.d(tag, "updateListTrackSynced: onSuccess ${list.map { it.first.title }}")
+                    val newTrack = list.map { it.first }.toListTrack().map { it.videoId }.toMutableSet().subtract(tracks.toMutableSet())
+                    val newTrackList = list.filter { newTrack.contains(it.first.id) }
+                    Log.w(tag, "updateListTrackSynced: newTrackList ${newTrackList.map { it.first.title }}")
+                    newTrackList.forEach { new ->
+                        localDataSource.insertSong(new.first.toTrack().toSongEntity())
+                        Log.i(tag, "insertSong: ${new.first.toTrack().toSongEntity()}")
+                        localDataSource.insertPairSongLocalPlaylist(
+                            PairSongLocalPlaylist(
+                                playlistId = id,
+                                songId = new.first.id,
+                                position = currentTracks.size,
+                                inPlaylist = LocalDateTime.now()
+                            )
+                        )
+                        localDataSource.insertSetVideoId(
+                            SetVideoIdEntity(
+                                videoId = new.first.id, setVideoId = new.second, youtubePlaylistId = ytId
+                            )
+                        )
+                        currentTracks.add(new.first.id)
+                    }
+                    localDataSource.updateLocalPlaylistTracks(currentTracks, id).let {
+                        emit(true)
+                    }
+                }.onFailure { e ->
+                    Log.e(tag, "updateListTrackSynced: onFailure ${e.message}")
+                    e.printStackTrace()
+                    emit(false)
+                }
+            }
+            emit(false)
+        }
+
     // Update
     suspend fun addTrackToLocalPlaylist(
         id: Long,
@@ -315,4 +428,28 @@ class LocalPlaylistManager(
                 }
             }
         }.flowOn(Dispatchers.IO)
+
+    suspend fun getSuggestionsTrackForPlaylist(
+        id: Long
+    ): Flow<LocalResource<Pair<String?, List<Track>>>> = flow {
+        val localPlaylist = localDataSource.getLocalPlaylist(id)
+        val ytPlaylistId = localPlaylist.youtubePlaylistId ?: return@flow
+
+        YouTube.getSuggestionsTrackForPlaylist(ytPlaylistId).onSuccess { data ->
+            val listSongItem = data?.second?.map { it.toTrack() }
+            if (data != null && !listSongItem.isNullOrEmpty()) {
+                emit(LocalResource.Success(
+                    Pair(
+                        data.first,
+                        listSongItem
+                    )
+                ))
+            } else {
+                emit(LocalResource.Error("List suggestions is null"))
+            }
+        }.onFailure { e ->
+            e.printStackTrace()
+            emit(LocalResource.Error(e.message ?: "Error"))
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/maxrave/simpmusic/data/parser/HomeParser.kt b/app/src/main/java/com/maxrave/simpmusic/data/parser/HomeParser.kt
index e41e2c8a..79be0565 100644
--- a/app/src/main/java/com/maxrave/simpmusic/data/parser/HomeParser.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/data/parser/HomeParser.kt
@@ -20,32 +20,44 @@ import com.maxrave.simpmusic.data.model.home.HomeItem
 import com.maxrave.simpmusic.data.model.searchResult.songs.Album
 import com.maxrave.simpmusic.data.model.searchResult.songs.Artist
 
-fun parseMixedContent(data: List<SectionListRenderer.Content>?, context: Context): List<HomeItem> {
+fun parseMixedContent(
+    data: List<SectionListRenderer.Content>?,
+    context: Context,
+): List<HomeItem> {
     val list = mutableListOf<HomeItem>()
     if (data != null) {
         for (row in data) {
             val results = row.musicDescriptionShelfRenderer
             if (results != null) {
-                val title = results.header?.runs?.get(0)?.text ?: ""
-                val content = results.description.runs?.get(0)?.text ?: ""
+                val title =
+                    results.header
+                        ?.runs
+                        ?.get(0)
+                        ?.text ?: ""
+                val content =
+                    results.description.runs
+                        ?.get(0)
+                        ?.text ?: ""
                 if (title.isNotEmpty()) {
                     list.add(
                         HomeItem(
-                            contents = listOf(
-                                Content(
-                                    album = null,
-                                    artists = listOf(),
-                                    description = content,
-                                    isExplicit = null,
-                                    playlistId = null,
-                                    browseId = null,
-                                    thumbnails = listOf(),
-                                    title = content,
-                                    videoId = null,
-                                    views = null
-                                )
-                            ), title = title
-                        )
+                            contents =
+                                listOf(
+                                    Content(
+                                        album = null,
+                                        artists = listOf(),
+                                        description = content,
+                                        isExplicit = null,
+                                        playlistId = null,
+                                        browseId = null,
+                                        thumbnails = listOf(),
+                                        title = content,
+                                        videoId = null,
+                                        views = null,
+                                    ),
+                                ),
+                            title = title,
+                        ),
                     )
                 }
             } else {
@@ -54,15 +66,42 @@ fun parseMixedContent(data: List<SectionListRenderer.Content>?, context: Context
                 val contentList = results1?.contents
                 Log.w("parse_mixed_content", results1?.contents?.size.toString())
                 val title =
-                    results1?.header?.musicCarouselShelfBasicHeaderRenderer?.title?.runs?.get(0)?.text
+                    results1
+                        ?.header
+                        ?.musicCarouselShelfBasicHeaderRenderer
+                        ?.title
+                        ?.runs
+                        ?.get(0)
+                        ?.text
                         ?: ""
                 Log.w("parse_mixed_content", title)
                 val subtitle =
-                    results1?.header?.musicCarouselShelfBasicHeaderRenderer?.strapline?.runs?.firstOrNull()?.text
+                    results1
+                        ?.header
+                        ?.musicCarouselShelfBasicHeaderRenderer
+                        ?.strapline
+                        ?.runs
+                        ?.firstOrNull()
+                        ?.text
                 val thumbnail =
-                    results1?.header?.musicCarouselShelfBasicHeaderRenderer?.thumbnail?.musicThumbnailRenderer?.thumbnail?.thumbnails?.toListThumbnail()
+                    results1
+                        ?.header
+                        ?.musicCarouselShelfBasicHeaderRenderer
+                        ?.thumbnail
+                        ?.musicThumbnailRenderer
+                        ?.thumbnail
+                        ?.thumbnails
+                        ?.toListThumbnail()
                 val artistChannelId =
-                    results1?.header?.musicCarouselShelfBasicHeaderRenderer?.title?.runs?.firstOrNull()?.navigationEndpoint?.browseEndpoint?.browseId
+                    results1
+                        ?.header
+                        ?.musicCarouselShelfBasicHeaderRenderer
+                        ?.title
+                        ?.runs
+                        ?.firstOrNull()
+                        ?.navigationEndpoint
+                        ?.browseEndpoint
+                        ?.browseId
                 val listContent = mutableListOf<Content?>()
                 if (!contentList.isNullOrEmpty()) {
                     for (result1 in contentList) {
@@ -129,21 +168,24 @@ fun parseMixedContent(data: List<SectionListRenderer.Content>?, context: Context
                             if (musicTwoRowItemRenderer.isSong) {
                                 val ytItem =
                                     RelatedPage.fromMusicTwoRowItemRenderer(musicTwoRowItemRenderer) as SongItem?
-                                val artists = ytItem?.artists?.map {
-                                    Artist(
-                                        name = it.name,
-                                        id = it.id
-                                    )
-                                }?.toMutableList()
-                                if (artists?.lastOrNull()?.id == null && artists?.lastOrNull()?.name?.contains(
-                                        Regex("\\d")
+                                val artists =
+                                    ytItem
+                                        ?.artists
+                                        ?.map {
+                                            Artist(
+                                                name = it.name,
+                                                id = it.id,
+                                            )
+                                        }?.toMutableList()
+                                if (artists?.lastOrNull()?.id == null &&
+                                    artists?.lastOrNull()?.name?.contains(
+                                        Regex("\\d"),
                                     ) == true
                                 ) {
-                                    runCatching{ artists.removeAt(artists.lastIndex) }
+                                    runCatching { artists.removeAt(artists.lastIndex) }
                                         .onSuccess {
                                             Log.i("parse_mixed_content", "Removed last artist")
-                                        }
-                                        .onFailure {
+                                        }.onFailure {
                                             Log.e("parse_mixed_content", "Failed to remove last artist")
                                             it.printStackTrace()
                                         }
@@ -152,46 +194,54 @@ fun parseMixedContent(data: List<SectionListRenderer.Content>?, context: Context
                                 if (ytItem != null) {
                                     listContent.add(
                                         Content(
-                                            album = ytItem.album?.let {
-                                                Album(
-                                                    name = it.name,
-                                                    id = it.id
-                                                )
-                                            },
+                                            album =
+                                                ytItem.album?.let {
+                                                    Album(
+                                                        name = it.name,
+                                                        id = it.id,
+                                                    )
+                                                },
                                             artists = artists,
                                             description = null,
                                             isExplicit = ytItem.explicit,
                                             playlistId = null,
                                             browseId = null,
-                                            thumbnails = musicTwoRowItemRenderer.thumbnailRenderer.musicThumbnailRenderer?.thumbnail?.thumbnails?.toListThumbnail()
-                                                ?: listOf(),
+                                            thumbnails =
+                                                musicTwoRowItemRenderer.thumbnailRenderer.musicThumbnailRenderer
+                                                    ?.thumbnail
+                                                    ?.thumbnails
+                                                    ?.toListThumbnail()
+                                                    ?: listOf(),
                                             title = ytItem.title,
                                             videoId = ytItem.id,
                                             views = null,
                                             durationSeconds = ytItem.duration,
-                                            radio = null
-                                        )
+                                            radio = null,
+                                        ),
                                     )
                                 }
                             } else if (musicTwoRowItemRenderer.isVideo) {
                                 val ytItem =
                                     ArtistPage.fromMusicTwoRowItemRenderer(musicTwoRowItemRenderer) as VideoItem?
                                 Log.w("Video", ytItem.toString())
-                                val artists = ytItem?.artists?.map {
-                                    Artist(
-                                        name = it.name,
-                                        id = it.id
-                                    )
-                                }?.toMutableList()
-                                if (artists?.lastOrNull()?.id == null && artists?.lastOrNull()?.name?.contains(
-                                        Regex("\\d")
+                                val artists =
+                                    ytItem
+                                        ?.artists
+                                        ?.map {
+                                            Artist(
+                                                name = it.name,
+                                                id = it.id,
+                                            )
+                                        }?.toMutableList()
+                                if (artists?.lastOrNull()?.id == null &&
+                                    artists?.lastOrNull()?.name?.contains(
+                                        Regex("\\d"),
                                     ) == true
                                 ) {
-                                    runCatching{ artists.removeAt(artists.lastIndex) }
+                                    runCatching { artists.removeAt(artists.lastIndex) }
                                         .onSuccess {
                                             Log.i("parse_mixed_content", "Removed last artist")
-                                        }
-                                        .onFailure {
+                                        }.onFailure {
                                             Log.e("parse_mixed_content", "Failed to remove last artist")
                                             it.printStackTrace()
                                         }
@@ -199,25 +249,30 @@ fun parseMixedContent(data: List<SectionListRenderer.Content>?, context: Context
                                 if (ytItem != null) {
                                     listContent.add(
                                         Content(
-                                            album = ytItem.album?.let {
-                                                Album(
-                                                    name = it.name,
-                                                    id = it.id
-                                                )
-                                            },
+                                            album =
+                                                ytItem.album?.let {
+                                                    Album(
+                                                        name = it.name,
+                                                        id = it.id,
+                                                    )
+                                                },
                                             artists = artists,
                                             description = null,
                                             isExplicit = ytItem.explicit,
                                             playlistId = null,
                                             browseId = null,
-                                            thumbnails = musicTwoRowItemRenderer.thumbnailRenderer.musicThumbnailRenderer?.thumbnail?.thumbnails?.toListThumbnail()
-                                                ?: listOf(),
+                                            thumbnails =
+                                                musicTwoRowItemRenderer.thumbnailRenderer.musicThumbnailRenderer
+                                                    ?.thumbnail
+                                                    ?.thumbnails
+                                                    ?.toListThumbnail()
+                                                    ?: listOf(),
                                             title = ytItem.title,
                                             videoId = ytItem.id,
                                             views = ytItem.view,
                                             durationSeconds = ytItem.duration,
-                                            radio = null
-                                        )
+                                            radio = null,
+                                        ),
                                     )
                                 }
                             } else if (musicTwoRowItemRenderer.isArtist) {
@@ -233,37 +288,50 @@ fun parseMixedContent(data: List<SectionListRenderer.Content>?, context: Context
                                             isExplicit = null,
                                             playlistId = null,
                                             browseId = ytItem.id,
-                                            thumbnails = musicTwoRowItemRenderer.thumbnailRenderer.musicThumbnailRenderer?.thumbnail?.thumbnails?.toListThumbnail()
-                                                ?: listOf(),
+                                            thumbnails =
+                                                musicTwoRowItemRenderer.thumbnailRenderer.musicThumbnailRenderer
+                                                    ?.thumbnail
+                                                    ?.thumbnails
+                                                    ?.toListThumbnail()
+                                                    ?: listOf(),
                                             title = ytItem.title,
                                             videoId = null,
                                             views = null,
-                                            radio = null
-                                        )
+                                            radio = null,
+                                        ),
                                     )
                                 }
                             } else if (musicTwoRowItemRenderer.isAlbum) {
                                 listContent.add(
                                     Content(
-                                        album = Album(
-                                            id = musicTwoRowItemRenderer.navigationEndpoint.browseEndpoint?.browseId
-                                                ?: "", name = title
-                                        ),
+                                        album =
+                                            Album(
+                                                id =
+                                                    musicTwoRowItemRenderer.navigationEndpoint.browseEndpoint?.browseId
+                                                        ?: "",
+                                                name = title,
+                                            ),
                                         artists = listOf(),
                                         description = null,
                                         isExplicit = false,
                                         playlistId = null,
                                         browseId = musicTwoRowItemRenderer.navigationEndpoint.browseEndpoint?.browseId,
-                                        thumbnails = musicTwoRowItemRenderer.thumbnailRenderer.musicThumbnailRenderer?.thumbnail?.thumbnails?.toListThumbnail()
-                                            ?: listOf(),
-                                        title = musicTwoRowItemRenderer.title.runs?.get(0)?.text
-                                            ?: "",
+                                        thumbnails =
+                                            musicTwoRowItemRenderer.thumbnailRenderer.musicThumbnailRenderer
+                                                ?.thumbnail
+                                                ?.thumbnails
+                                                ?.toListThumbnail()
+                                                ?: listOf(),
+                                        title =
+                                            musicTwoRowItemRenderer.title.runs
+                                                ?.get(0)
+                                                ?.text
+                                                ?: "",
                                         videoId = "",
-                                        views = ""
-                                    )
+                                        views = "",
+                                    ),
                                 )
                             } else if (musicTwoRowItemRenderer.isPlaylist) {
-
                                 val subtitle1 = musicTwoRowItemRenderer.subtitle
                                 var description = ""
                                 if (subtitle1 != null) {
@@ -274,55 +342,69 @@ fun parseMixedContent(data: List<SectionListRenderer.Content>?, context: Context
                                     }
                                 }
                                 if (musicTwoRowItemRenderer.navigationEndpoint.browseEndpoint?.browseId?.startsWith(
-                                        "MPRE"
+                                        "MPRE",
                                     ) == true
                                 ) {
                                     listContent.add(
                                         Content(
-                                            album = Album(
-                                                id = musicTwoRowItemRenderer.navigationEndpoint.browseEndpoint?.browseId
-                                                    ?: "", name = title
-                                            ),
+                                            album =
+                                                Album(
+                                                    id =
+                                                        musicTwoRowItemRenderer.navigationEndpoint.browseEndpoint?.browseId
+                                                            ?: "",
+                                                    name = title,
+                                                ),
                                             artists = listOf(),
                                             description = null,
                                             isExplicit = false,
                                             playlistId = null,
                                             browseId = musicTwoRowItemRenderer.navigationEndpoint.browseEndpoint?.browseId,
-                                            thumbnails = musicTwoRowItemRenderer.thumbnailRenderer.musicThumbnailRenderer?.thumbnail?.thumbnails?.toListThumbnail()
-                                                ?: listOf(),
-                                            title = musicTwoRowItemRenderer.title.runs?.get(
-                                                0
-                                            )?.text ?: "",
+                                            thumbnails =
+                                                musicTwoRowItemRenderer.thumbnailRenderer.musicThumbnailRenderer
+                                                    ?.thumbnail
+                                                    ?.thumbnails
+                                                    ?.toListThumbnail()
+                                                    ?: listOf(),
+                                            title =
+                                                musicTwoRowItemRenderer.title.runs
+                                                    ?.get(
+                                                        0,
+                                                    )?.text ?: "",
                                             videoId = "",
-                                            views = ""
-                                        )
+                                            views = "",
+                                        ),
                                     )
                                 } else {
                                     val ytItem1 =
                                         RelatedPage.fromMusicTwoRowItemRenderer(
-                                            musicTwoRowItemRenderer
+                                            musicTwoRowItemRenderer,
                                         ) as PlaylistItem?
                                     ytItem1?.let { ytItem ->
                                         listContent.add(
                                             Content(
                                                 album = null,
-                                                artists = listOf(
-                                                    Artist(
-                                                        id = ytItem.author?.id ?: "",
-                                                        name = ytItem.author?.name ?: ""
-                                                    )
-                                                ),
+                                                artists =
+                                                    listOf(
+                                                        Artist(
+                                                            id = ytItem.author?.id ?: "",
+                                                            name = ytItem.author?.name ?: "",
+                                                        ),
+                                                    ),
                                                 description = description,
                                                 isExplicit = ytItem.explicit,
                                                 playlistId = ytItem.id,
                                                 browseId = ytItem.id,
-                                                thumbnails = musicTwoRowItemRenderer.thumbnailRenderer.musicThumbnailRenderer?.thumbnail?.thumbnails?.toListThumbnail()
-                                                    ?: listOf(),
+                                                thumbnails =
+                                                    musicTwoRowItemRenderer.thumbnailRenderer.musicThumbnailRenderer
+                                                        ?.thumbnail
+                                                        ?.thumbnails
+                                                        ?.toListThumbnail()
+                                                        ?: listOf(),
                                                 title = ytItem.title,
                                                 videoId = null,
                                                 views = null,
-                                                radio = null
-                                            )
+                                                radio = null,
+                                            ),
                                         )
                                     }
                                 }
@@ -332,28 +414,37 @@ fun parseMixedContent(data: List<SectionListRenderer.Content>?, context: Context
                         } else if (result1.musicResponsiveListItemRenderer != null) {
                             Log.w(
                                 "parse Song flat",
-                                result1.musicResponsiveListItemRenderer.toString()
+                                result1.musicResponsiveListItemRenderer.toString(),
                             )
                             val ytItem =
                                 RelatedPage.fromMusicResponsiveListItemRenderer(result1.musicResponsiveListItemRenderer!!)
                             if (ytItem != null) {
-                                val content = Content(
-                                    album = ytItem.album?.let { Album(name = it.name, id = it.id) },
-                                    artists = parseSongArtists(
-                                        result1.musicResponsiveListItemRenderer!!,
-                                        1, context
-                                    ) ?: listOf(),
-                                    description = null,
-                                    isExplicit = false,
-                                    playlistId = null,
-                                    browseId = null,
-                                    thumbnails = result1.musicResponsiveListItemRenderer!!.thumbnail?.musicThumbnailRenderer?.thumbnail?.thumbnails?.toListThumbnail()
-                                        ?: listOf(),
-                                    title = ytItem.title,
-                                    videoId = ytItem.id,
-                                    views = "",
-                                    radio = null
-                                )
+                                val content =
+                                    Content(
+                                        album = ytItem.album?.let { Album(name = it.name, id = it.id) },
+                                        artists =
+                                            parseSongArtists(
+                                                result1.musicResponsiveListItemRenderer!!,
+                                                1,
+                                                context,
+                                            ) ?: listOf(),
+                                        description = null,
+                                        isExplicit = false,
+                                        playlistId = null,
+                                        browseId = null,
+                                        thumbnails =
+                                            result1.musicResponsiveListItemRenderer!!
+                                                .thumbnail
+                                                ?.musicThumbnailRenderer
+                                                ?.thumbnail
+                                                ?.thumbnails
+                                                ?.toListThumbnail()
+                                                ?: listOf(),
+                                        title = ytItem.title,
+                                        videoId = ytItem.id,
+                                        views = "",
+                                        radio = null,
+                                    )
                                 listContent.add(content)
                             }
                         } else {
@@ -368,8 +459,8 @@ fun parseMixedContent(data: List<SectionListRenderer.Content>?, context: Context
                             title = title,
                             subtitle = subtitle,
                             thumbnail = thumbnail,
-                            channelId = if (artistChannelId?.contains("UC") == true) artistChannelId else null
-                        )
+                            channelId = if (artistChannelId?.contains("UC") == true) artistChannelId else null,
+                        ),
                     )
                 }
                 Log.w("parse_mixed_content", list.toString())
@@ -379,7 +470,10 @@ fun parseMixedContent(data: List<SectionListRenderer.Content>?, context: Context
     return list
 }
 
-fun parseSongFlat(data: MusicResponsiveListItemRenderer?, context: Context): Content? {
+fun parseSongFlat(
+    data: MusicResponsiveListItemRenderer?,
+    context: Context,
+): Content? {
     if (data?.flexColumns != null) {
         val column =
             mutableListOf<MusicResponsiveListItemRenderer.FlexColumn.MusicResponsiveListItemFlexColumnRenderer?>()
@@ -387,29 +481,80 @@ fun parseSongFlat(data: MusicResponsiveListItemRenderer?, context: Context): Con
             column.add(getFlexColumnItem(data, i))
         }
         return Content(
-            album = if (column.size > 2 && column[2] != null && column[2]?.text?.runs?.get(0)?.text != null) {
-                Album(
-                    id = column[2]?.text?.runs?.get(0)?.navigationEndpoint?.browseEndpoint?.browseId!!,
-                    name = column[2]?.text?.runs?.get(0)?.text!!
-                )
-            } else {
-                null
-            },
+            album =
+                if (column.size > 2 &&
+                    column[2] != null &&
+                    column[2]
+                        ?.text
+                        ?.runs
+                        ?.get(0)
+                        ?.text != null
+                ) {
+                    Album(
+                        id =
+                            column[2]
+                                ?.text
+                                ?.runs
+                                ?.get(0)
+                                ?.navigationEndpoint
+                                ?.browseEndpoint
+                                ?.browseId!!,
+                        name =
+                            column[2]
+                                ?.text
+                                ?.runs
+                                ?.get(0)
+                                ?.text!!,
+                    )
+                } else {
+                    null
+                },
             artists = parseSongArtists(data, 1, context) ?: listOf(),
             description = null,
             isExplicit = null,
             playlistId = null,
             browseId = null,
-            thumbnails = data.thumbnail?.musicThumbnailRenderer?.thumbnail?.thumbnails?.toListThumbnail()
-                ?: listOf(),
-            title = column[0]?.text?.runs?.get(0)?.text ?: "",
-            videoId = column[0]?.text?.runs?.get(0)?.navigationEndpoint?.watchEndpoint?.videoId
-                ?: "",
-            views = if (column.size <= 2 || column[2] == null || column[2]?.text?.runs?.get(0)?.text == null) {
-                column[1]?.text?.runs?.last()?.text?.split(" ")?.get(0) ?: ""
-            } else {
-                null
-            }
+            thumbnails =
+                data.thumbnail
+                    ?.musicThumbnailRenderer
+                    ?.thumbnail
+                    ?.thumbnails
+                    ?.toListThumbnail()
+                    ?: listOf(),
+            title =
+                column[0]
+                    ?.text
+                    ?.runs
+                    ?.get(0)
+                    ?.text ?: "",
+            videoId =
+                column[0]
+                    ?.text
+                    ?.runs
+                    ?.get(0)
+                    ?.navigationEndpoint
+                    ?.watchEndpoint
+                    ?.videoId
+                    ?: "",
+            views =
+                if (column.size <= 2 ||
+                    column[2] == null ||
+                    column[2]
+                        ?.text
+                        ?.runs
+                        ?.get(0)
+                        ?.text == null
+                ) {
+                    column[1]
+                        ?.text
+                        ?.runs
+                        ?.last()
+                        ?.text
+                        ?.split(" ")
+                        ?.get(0) ?: ""
+                } else {
+                    null
+                },
         )
     } else {
         return null
@@ -419,7 +564,7 @@ fun parseSongFlat(data: MusicResponsiveListItemRenderer?, context: Context): Con
 fun parseSongArtists(
     data: MusicResponsiveListItemRenderer,
     index: Int,
-    context: Context
+    context: Context,
 ): List<Artist>? {
     val flexItem = getFlexColumnItem(data, index)
     return if (flexItem == null) {
@@ -432,29 +577,51 @@ fun parseSongArtists(
 
 fun getFlexColumnItem(
     data: MusicResponsiveListItemRenderer,
-    index: Int
-): MusicResponsiveListItemRenderer.FlexColumn.MusicResponsiveListItemFlexColumnRenderer? {
-    return if (data.flexColumns.size <= index || data.flexColumns[index].musicResponsiveListItemFlexColumnRenderer.text == null || data.flexColumns[index].musicResponsiveListItemFlexColumnRenderer.text?.runs == null) {
+    index: Int,
+): MusicResponsiveListItemRenderer.FlexColumn.MusicResponsiveListItemFlexColumnRenderer? =
+    if (data.flexColumns.size <= index ||
+        data.flexColumns[index].musicResponsiveListItemFlexColumnRenderer.text == null ||
+        data.flexColumns[index]
+            .musicResponsiveListItemFlexColumnRenderer.text
+            ?.runs == null
+    ) {
         null
     } else {
         data.flexColumns[index].musicResponsiveListItemFlexColumnRenderer
     }
-}
 
-fun parsePlaylist(data: MusicTwoRowItemRenderer, context: Context): Content {
+fun parsePlaylist(
+    data: MusicTwoRowItemRenderer,
+    context: Context,
+): Content {
     val subtitle = data.subtitle
     var description = ""
     var count = ""
     val author: MutableList<Artist> = mutableListOf()
-    val thumbnails = data.thumbnailRenderer.musicThumbnailRenderer?.thumbnail?.thumbnails
+    val thumbnails =
+        data.thumbnailRenderer.musicThumbnailRenderer
+            ?.thumbnail
+            ?.thumbnails
     if (subtitle != null) {
         if (subtitle.runs != null) {
             for (run in subtitle.runs!!) {
                 description += run.text
             }
             if (subtitle.runs!!.size == 3) {
-                if (data.subtitle!!.runs?.get(2)?.text?.split(" ")?.get(0) != null) {
-                    count += data.subtitle!!.runs?.get(2)?.text?.split(" ")?.get(0)
+                if (data.subtitle!!
+                        .runs
+                        ?.get(2)
+                        ?.text
+                        ?.split(" ")
+                        ?.get(0) != null
+                ) {
+                    count +=
+                        data.subtitle!!
+                            .runs
+                            ?.get(2)
+                            ?.text
+                            ?.split(" ")
+                            ?.get(0)
                 }
                 author.addAll(parseSongArtistsRuns(subtitle.runs!!.take(1), context))
             }
@@ -466,28 +633,39 @@ fun parsePlaylist(data: MusicTwoRowItemRenderer, context: Context): Content {
         artists = author,
         description = description,
         isExplicit = false,
-        playlistId = data.title.runs?.get(0)?.navigationEndpoint?.browseEndpoint?.browseId,
+        playlistId =
+            data.title.runs
+                ?.get(0)
+                ?.navigationEndpoint
+                ?.browseEndpoint
+                ?.browseId,
         browseId = null,
         thumbnails = thumbnails?.toListThumbnail() ?: listOf(),
-        title = data.title.runs?.get(0)?.text ?: "",
+        title =
+            data.title.runs
+                ?.get(0)
+                ?.text ?: "",
         videoId = null,
-        views = null
+        views = null,
     )
 }
 
-fun parseSongArtistsRuns(runs: List<Run>, context: Context): List<Artist> {
+fun parseSongArtistsRuns(
+    runs: List<Run>,
+    context: Context,
+): List<Artist> {
     val artists = mutableListOf<Artist>()
     for (i in 0..(runs.size / 2)) {
         if (runs[i * 2].navigationEndpoint?.browseEndpoint?.browseId != null) {
             artists.add(
                 Artist(
                     name = runs[i * 2].text,
-                    id = runs[i * 2].navigationEndpoint?.browseEndpoint?.browseId
-                )
+                    id = runs[i * 2].navigationEndpoint?.browseEndpoint?.browseId,
+                ),
             )
         } else {
             if (!runs[i * 2].text.contains(
-                    context.getString(R.string.view_count).removeRange(0..4)
+                    context.getString(R.string.view_count).removeRange(0..4),
                 )
             ) {
                 artists.add(Artist(name = runs[i * 2].text, id = null))
@@ -498,26 +676,49 @@ fun parseSongArtistsRuns(runs: List<Run>, context: Context): List<Artist> {
     return artists
 }
 
-fun parseRelatedArtists(data: MusicTwoRowItemRenderer): Content {
-    return Content(
+fun parseRelatedArtists(data: MusicTwoRowItemRenderer): Content =
+    Content(
         album = null,
         artists = listOf(),
-        description = data.subtitle?.runs?.get(0)?.text?.split(" ")?.get(0) ?: "",
+        description =
+            data.subtitle
+                ?.runs
+                ?.get(0)
+                ?.text
+                ?.split(" ")
+                ?.get(0) ?: "",
         isExplicit = false,
         playlistId = null,
-        browseId = data.title.runs?.get(0)?.navigationEndpoint?.browseEndpoint?.browseId,
-        thumbnails = data.thumbnailRenderer.musicThumbnailRenderer?.thumbnail?.thumbnails?.toListThumbnail()
-            ?: listOf(),
-        title = data.title.runs?.get(0)?.text ?: "",
+        browseId =
+            data.title.runs
+                ?.get(0)
+                ?.navigationEndpoint
+                ?.browseEndpoint
+                ?.browseId,
+        thumbnails =
+            data.thumbnailRenderer.musicThumbnailRenderer
+                ?.thumbnail
+                ?.thumbnails
+                ?.toListThumbnail()
+                ?: listOf(),
+        title =
+            data.title.runs
+                ?.get(0)
+                ?.text ?: "",
         videoId = null,
-        views = null
+        views = null,
     )
-}
 
 fun parseAlbum(data: MusicTwoRowItemRenderer): Content {
-    val title = data.title.runs?.get(0)?.text
+    val title =
+        data.title.runs
+            ?.get(0)
+            ?.text
     val browseId = data.navigationEndpoint.browseEndpoint?.browseId
-    val thumbnails = data.thumbnailRenderer.musicThumbnailRenderer?.thumbnail?.thumbnails
+    val thumbnails =
+        data.thumbnailRenderer.musicThumbnailRenderer
+            ?.thumbnail
+            ?.thumbnails
     return Content(
         album = Album(id = browseId ?: "", name = title ?: ""),
         artists = listOf(),
@@ -528,14 +729,23 @@ fun parseAlbum(data: MusicTwoRowItemRenderer): Content {
         thumbnails = thumbnails?.toListThumbnail() ?: listOf(),
         title = title ?: "",
         videoId = "",
-        views = ""
+        views = "",
     )
 }
 
-fun parseSong(data: MusicTwoRowItemRenderer, context: Context): Content {
-    val title = data.title.runs?.get(0)?.text
+fun parseSong(
+    data: MusicTwoRowItemRenderer,
+    context: Context,
+): Content {
+    val title =
+        data.title.runs
+            ?.get(0)
+            ?.text
     val videoId = data.navigationEndpoint.watchEndpoint?.videoId
-    val thumbnails = data.thumbnailRenderer.musicThumbnailRenderer?.thumbnail?.thumbnails
+    val thumbnails =
+        data.thumbnailRenderer.musicThumbnailRenderer
+            ?.thumbnail
+            ?.thumbnails
     val runs = data.subtitle?.runs
     var name = ""
     var id = ""
@@ -552,8 +762,8 @@ fun parseSong(data: MusicTwoRowItemRenderer, context: Context): Content {
                         listArtist.add(
                             Artist(
                                 name = runs[i].text,
-                                id = runs[i].navigationEndpoint?.browseEndpoint?.browseId
-                            )
+                                id = runs[i].navigationEndpoint?.browseEndpoint?.browseId,
+                            ),
                         )
                     } else if (i != 0) {
                         name += runs[i].text
@@ -594,7 +804,7 @@ fun parseSong(data: MusicTwoRowItemRenderer, context: Context): Content {
         views = view,
         browseId = "",
         playlistId = "",
-        description = ""
+        description = "",
     )
 }
 
@@ -613,28 +823,30 @@ fun parseSongRuns(runs: List<Run>?): Triple<Album?, List<Artist>, Map<String, St
                         listAlbum.add(
                             Album(
                                 name = item["name"] as String,
-                                id = item["id"] as String
-                            )
+                                id = item["id"] as String,
+                            ),
                         )
                     } else {
                         listArtist.add(
                             Artist(
                                 name = item["name"] as String,
-                                id = item["id"] as String
-                            )
+                                id = item["id"] as String,
+                            ),
                         )
                     }
                 }
             } else {
                 if (Regex("^\\d([^ ])* [^ ]*\$").matches(text)) {
                     list.plus(mapOf("views" to text.split(" ")[0]))
-
                 } else if (Regex("^(\\d+:)*\\d+:\\d+\$").matches(text)) {
                     list.plus(mapOf("duration" to text))
                     list.plus(
                         mapOf(
-                            "duration_seconds" to text.split(":")
-                                .let { it[0].toInt() * 60 + it[1].toInt() })
+                            "duration_seconds" to
+                                text
+                                    .split(":")
+                                    .let { it[0].toInt() * 60 + it[1].toInt() },
+                        ),
                     )
                 } else if (Regex("^\\d{4}\$").matches(text)) {
                     list.plus(mapOf("year" to text))
@@ -649,9 +861,15 @@ fun parseSongRuns(runs: List<Run>?): Triple<Album?, List<Artist>, Map<String, St
 }
 
 fun parseWatchPlaylist(data: MusicTwoRowItemRenderer): Content {
-    val title = data.title.runs?.get(0)?.text
+    val title =
+        data.title.runs
+            ?.get(0)
+            ?.text
     val playlistId = data.navigationEndpoint.watchPlaylistEndpoint?.playlistId
-    val thumbnails = data.thumbnailRenderer.musicThumbnailRenderer?.thumbnail?.thumbnails
+    val thumbnails =
+        data.thumbnailRenderer.musicThumbnailRenderer
+            ?.thumbnail
+            ?.thumbnails
     Log.w("parse_watch_playlist", title.toString())
     return Content(
         album = null,
@@ -663,17 +881,16 @@ fun parseWatchPlaylist(data: MusicTwoRowItemRenderer): Content {
         thumbnails = thumbnails?.toListThumbnail() ?: listOf(),
         title = title ?: "",
         videoId = null,
-        views = null
+        views = null,
     )
 }
 
-fun Thumbnail.toThumbnail(): com.maxrave.simpmusic.data.model.searchResult.songs.Thumbnail {
-    return com.maxrave.simpmusic.data.model.searchResult.songs.Thumbnail(
+fun Thumbnail.toThumbnail(): com.maxrave.simpmusic.data.model.searchResult.songs.Thumbnail =
+    com.maxrave.simpmusic.data.model.searchResult.songs.Thumbnail(
         height = this.height ?: 0,
         url = this.url,
-        width = this.width ?: 0
+        width = this.width ?: 0,
     )
-}
 
 fun List<Thumbnail>.toListThumbnail(): List<com.maxrave.simpmusic.data.model.searchResult.songs.Thumbnail> {
     val list = mutableListOf<com.maxrave.simpmusic.data.model.searchResult.songs.Thumbnail>()
@@ -683,89 +900,100 @@ fun List<Thumbnail>.toListThumbnail(): List<com.maxrave.simpmusic.data.model.sea
     return list
 }
 
-fun parseNewRelease(explore: ExplorePage, context: Context): ArrayList<HomeItem> {
+fun parseNewRelease(
+    explore: ExplorePage,
+    context: Context,
+): ArrayList<HomeItem> {
     val result = arrayListOf<HomeItem>()
     result.add(
         HomeItem(
             title = context.getString(R.string.new_release),
-            contents = explore.released.map {
-                Content(
-                    album = null,
-                    artists = listOf(
-                        Artist(
-                            id = it.author?.id ?: "",
-                            name = it.author?.name ?: ""
-                        )
-                    ),
-                    description = it.author?.name ?: "YouTube Music",
-                    isExplicit = it.explicit,
-                    playlistId = it.id,
-                    browseId = it.id,
-                    thumbnails = listOf(
-                        com.maxrave.simpmusic.data.model.searchResult.songs.Thumbnail(
-                            522,
-                            it.thumbnail,
-                            522
-                        )
-                    ),
-                    title = it.title,
-                    videoId = null,
-                    views = null,
-                    radio = null
-                )
-            },
-        )
+            contents =
+                explore.released.map {
+                    Content(
+                        album = null,
+                        artists =
+                            listOf(
+                                Artist(
+                                    id = it.author?.id ?: "",
+                                    name = it.author?.name ?: "",
+                                ),
+                            ),
+                        description = it.author?.name ?: "YouTube Music",
+                        isExplicit = it.explicit,
+                        playlistId = it.id,
+                        browseId = it.id,
+                        thumbnails =
+                            listOf(
+                                com.maxrave.simpmusic.data.model.searchResult.songs.Thumbnail(
+                                    522,
+                                    it.thumbnail,
+                                    522,
+                                ),
+                            ),
+                        title = it.title,
+                        videoId = null,
+                        views = null,
+                        radio = null,
+                    )
+                },
+        ),
     )
     result.add(
         HomeItem(
             title = context.getString(R.string.music_video),
-            contents = explore.musicVideo.map { videoItem ->
-                val artists = videoItem.artists.map {
-                    Artist(
-                        name = it.name,
-                        id = it.id
+            contents =
+                explore.musicVideo.map { videoItem ->
+                    val artists =
+                        videoItem.artists
+                            .map {
+                                Artist(
+                                    name = it.name,
+                                    id = it.id,
+                                )
+                            }.toMutableList()
+                    if (artists.lastOrNull()?.id == null &&
+                        artists.lastOrNull()?.name?.contains(
+                            Regex("\\d"),
+                        ) == true
+                    ) {
+                        runCatching { artists.removeAt(artists.lastIndex) }
+                            .onSuccess {
+                                Log.i("parse_mixed_content", "Removed last artist")
+                            }.onFailure {
+                                Log.e("parse_mixed_content", "Failed to remove last artist")
+                                it.printStackTrace()
+                            }
+                    }
+                    Content(
+                        album =
+                            videoItem.album?.let {
+                                Album(
+                                    name = it.name,
+                                    id = it.id,
+                                )
+                            },
+                        artists = artists,
+                        description = null,
+                        isExplicit = videoItem.explicit,
+                        playlistId = null,
+                        browseId = null,
+                        thumbnails =
+                            listOf(
+                                com.maxrave.simpmusic.data.model.searchResult.songs.Thumbnail(
+                                    522,
+                                    videoItem.thumbnail,
+                                    1080,
+                                ),
+                            ),
+                        title = videoItem.title,
+                        videoId = videoItem.id,
+                        views = videoItem.view,
+                        durationSeconds = videoItem.duration,
+                        radio = null,
                     )
-                }.toMutableList()
-                if (artists.lastOrNull()?.id == null && artists.lastOrNull()?.name?.contains(
-                        Regex("\\d")
-                    ) == true
-                ) {
-                    runCatching{ artists.removeAt(artists.lastIndex) }
-                        .onSuccess {
-                            Log.i("parse_mixed_content", "Removed last artist")
-                        }
-                        .onFailure {
-                            Log.e("parse_mixed_content", "Failed to remove last artist")
-                            it.printStackTrace()
-                        }
-                }
-                Content(
-                    album = videoItem.album?.let {
-                        Album(
-                            name = it.name,
-                            id = it.id
-                        )
-                    },
-                    artists = artists,
-                    description = null,
-                    isExplicit = videoItem.explicit,
-                    playlistId = null,
-                    browseId = null,
-                    thumbnails = listOf(
-                        com.maxrave.simpmusic.data.model.searchResult.songs.Thumbnail(
-                            522,
-                            videoItem.thumbnail,
-                            1080
-                        )
-                    ),
-                    title = videoItem.title,
-                    videoId = videoItem.id,
-                    views = videoItem.view,
-                    durationSeconds = videoItem.duration,
-                    radio = null
-                )
-            },
-        )
+                },
+        ),
     )
     return result
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/maxrave/simpmusic/data/parser/PlaylistParser.kt b/app/src/main/java/com/maxrave/simpmusic/data/parser/PlaylistParser.kt
index 45acd1db..d5abbb0b 100644
--- a/app/src/main/java/com/maxrave/simpmusic/data/parser/PlaylistParser.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/data/parser/PlaylistParser.kt
@@ -255,8 +255,15 @@ fun parsePlaylistData(
                             ?.get(
                                 0,
                             )?.text
-                            ?.split(":")
-                            ?.let { it[0].toInt() * 60 + it[1].toInt() } ?: 0,
+                            ?.let {
+                                if (it.contains(":")) {
+                                    it.split(":")
+                                } else if (it.contains(".")) {
+                                    it.split(".")
+                                } else {
+                                    listOf(it)
+                                }
+                            }?.let { it[0].toInt() * 60 + it[1].toInt() } ?: 0,
                     isAvailable = false,
                     isExplicit = false,
                     likeStatus = "INDIFFERENT",
diff --git a/app/src/main/java/com/maxrave/simpmusic/di/MediaServiceModule.kt b/app/src/main/java/com/maxrave/simpmusic/di/MediaServiceModule.kt
index 4361414e..d3cd715c 100644
--- a/app/src/main/java/com/maxrave/simpmusic/di/MediaServiceModule.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/di/MediaServiceModule.kt
@@ -1,19 +1,50 @@
 package com.maxrave.simpmusic.di
 
+import android.content.Context
+import android.util.Log
+import androidx.annotation.OptIn
+import androidx.core.net.toUri
+import androidx.media3.common.AudioAttributes
+import androidx.media3.common.C
+import androidx.media3.common.audio.SonicAudioProcessor
 import androidx.media3.common.util.UnstableApi
 import androidx.media3.database.DatabaseProvider
 import androidx.media3.database.StandaloneDatabaseProvider
+import androidx.media3.datasource.DataSource
+import androidx.media3.datasource.DataSpec
+import androidx.media3.datasource.DefaultHttpDataSource
+import androidx.media3.datasource.ResolvingDataSource
+import androidx.media3.datasource.cache.CacheDataSource
 import androidx.media3.datasource.cache.LeastRecentlyUsedCacheEvictor
 import androidx.media3.datasource.cache.NoOpCacheEvictor
 import androidx.media3.datasource.cache.SimpleCache
+import androidx.media3.exoplayer.DefaultRenderersFactory
+import androidx.media3.exoplayer.ExoPlayer
+import androidx.media3.exoplayer.audio.AudioSink
+import androidx.media3.exoplayer.audio.DefaultAudioSink
+import androidx.media3.exoplayer.audio.SilenceSkippingAudioProcessor
+import androidx.media3.exoplayer.source.DefaultMediaSourceFactory
+import androidx.media3.extractor.ExtractorsFactory
+import androidx.media3.extractor.mkv.MatroskaExtractor
+import androidx.media3.extractor.mp4.FragmentedMp4Extractor
+import androidx.media3.extractor.text.DefaultSubtitleParserFactory
 import com.maxrave.simpmusic.common.Config.CANVAS_CACHE
 import com.maxrave.simpmusic.common.Config.DOWNLOAD_CACHE
 import com.maxrave.simpmusic.common.Config.PLAYER_CACHE
+import com.maxrave.simpmusic.common.Config.SERVICE_SCOPE
 import com.maxrave.simpmusic.data.dataStore.DataStoreManager
 import com.maxrave.simpmusic.data.repository.MainRepository
+import com.maxrave.simpmusic.service.SimpleMediaServiceHandler
 import com.maxrave.simpmusic.service.SimpleMediaSessionCallback
+import com.maxrave.simpmusic.service.test.CoilBitmapLoader
 import com.maxrave.simpmusic.service.test.download.DownloadUtils
+import com.maxrave.simpmusic.service.test.source.MergingMediaSourceFactory
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
+import kotlinx.coroutines.flow.cancellable
 import kotlinx.coroutines.flow.first
+import kotlinx.coroutines.launch
 import kotlinx.coroutines.runBlocking
 import org.koin.android.ext.koin.androidContext
 import org.koin.core.qualifier.named
@@ -67,4 +98,232 @@ val mediaServiceModule =
                 databaseProvider = get(),
             )
         }
-    }
\ No newline at end of file
+
+        // Service
+        // CoroutineScope for service
+        single<CoroutineScope>(createdAtStart = true, qualifier = named(SERVICE_SCOPE)) {
+            CoroutineScope(Dispatchers.Main + SupervisorJob())
+        }
+
+        // AudioAttributes
+        single<AudioAttributes>(createdAtStart = true) {
+            AudioAttributes
+                .Builder()
+                .setContentType(C.AUDIO_CONTENT_TYPE_MUSIC)
+                .setUsage(C.USAGE_MEDIA)
+                .build()
+        }
+
+        // ExoPlayer
+        single<ExoPlayer>(createdAtStart = true) {
+            ExoPlayer
+                .Builder(androidContext())
+                .setAudioAttributes(get(), true)
+                .setWakeMode(C.WAKE_MODE_NETWORK)
+                .setHandleAudioBecomingNoisy(true)
+                .setSeekForwardIncrementMs(5000)
+                .setSeekBackIncrementMs(5000)
+                .setMediaSourceFactory(
+                    provideMergingMediaSource(
+                        get(named(DOWNLOAD_CACHE)),
+                        get(named(PLAYER_CACHE)),
+                        get(),
+                        get(named(SERVICE_SCOPE)),
+                        get(),
+                    ),
+                ).setRenderersFactory(provideRendererFactory(androidContext()))
+                .build()
+        }
+        // CoilBitmapLoader
+        single<CoilBitmapLoader>(createdAtStart = true) {
+            provideCoilBitmapLoader(androidContext(), get(named(SERVICE_SCOPE)))
+        }
+
+        // MediaSessionCallback
+        single<SimpleMediaSessionCallback>(createdAtStart = true) {
+            SimpleMediaSessionCallback(
+                androidContext(),
+                get(),
+            )
+        }
+        // MediaServiceHandler
+        single<SimpleMediaServiceHandler>(createdAtStart = true) {
+            SimpleMediaServiceHandler(
+                player = get(),
+                dataStoreManager = get(),
+                mainRepository = get(),
+                mediaSessionCallback = get(),
+                context = androidContext(),
+                coroutineScope = get(named(SERVICE_SCOPE)),
+            )
+        }
+    }
+
+@UnstableApi
+private fun provideResolvingDataSourceFactory(
+    cacheDataSourceFactory: CacheDataSource.Factory,
+    downloadCache: SimpleCache,
+    playerCache: SimpleCache,
+    mainRepository: MainRepository,
+    coroutineScope: CoroutineScope,
+): DataSource.Factory {
+    return ResolvingDataSource.Factory(cacheDataSourceFactory) { dataSpec ->
+        val mediaId = dataSpec.key ?: error("No media id")
+        Log.w("Stream", mediaId)
+        Log.w("Stream", mediaId.startsWith(MergingMediaSourceFactory.isVideo).toString())
+        val chunkLength = 512 * 1024L
+        if (downloadCache.isCached(
+                mediaId,
+                dataSpec.position,
+                if (dataSpec.length >= 0) dataSpec.length else 1,
+            ) ||
+            playerCache.isCached(mediaId, dataSpec.position, chunkLength)
+        ) {
+            coroutineScope.launch(Dispatchers.IO) {
+                mainRepository.updateFormat(
+                    if (mediaId.contains(MergingMediaSourceFactory.isVideo)) {
+                        mediaId.removePrefix(MergingMediaSourceFactory.isVideo)
+                    } else {
+                        mediaId
+                    },
+                )
+            }
+            return@Factory dataSpec
+        }
+        var dataSpecReturn: DataSpec = dataSpec
+        runBlocking(Dispatchers.IO) {
+            if (mediaId.contains(MergingMediaSourceFactory.isVideo)) {
+                val id = mediaId.removePrefix(MergingMediaSourceFactory.isVideo)
+                mainRepository
+                    .getStream(
+                        id,
+                        true,
+                    ).cancellable()
+                    .collect {
+                        if (it != null) {
+                            dataSpecReturn = dataSpec.withUri(it.toUri())
+                        }
+                    }
+            } else {
+                mainRepository
+                    .getStream(
+                        mediaId,
+                        isVideo = false,
+                    ).cancellable()
+                    .collect {
+                        if (it != null) {
+                            dataSpecReturn = dataSpec.withUri(it.toUri())
+                        }
+                    }
+            }
+        }
+        return@Factory dataSpecReturn
+    }
+}
+
+@UnstableApi
+private fun provideExtractorFactory(): ExtractorsFactory =
+    ExtractorsFactory {
+        arrayOf(
+            MatroskaExtractor(
+                DefaultSubtitleParserFactory(),
+            ),
+            FragmentedMp4Extractor(
+                DefaultSubtitleParserFactory(),
+            ),
+            androidx.media3.extractor.mp4.Mp4Extractor(
+                DefaultSubtitleParserFactory(),
+            ),
+        )
+    }
+
+@UnstableApi
+private fun provideMediaSourceFactory(
+    downloadCache: SimpleCache,
+    playerCache: SimpleCache,
+    mainRepository: MainRepository,
+    coroutineScope: CoroutineScope,
+): DefaultMediaSourceFactory =
+    DefaultMediaSourceFactory(
+        provideResolvingDataSourceFactory(
+            provideCacheDataSource(downloadCache, playerCache),
+            downloadCache,
+            playerCache,
+            mainRepository,
+            coroutineScope,
+        ),
+        provideExtractorFactory(),
+    )
+
+@OptIn(UnstableApi::class)
+private fun provideMergingMediaSource(
+    downloadCache: SimpleCache,
+    playerCache: SimpleCache,
+    mainRepository: MainRepository,
+    coroutineScope: CoroutineScope,
+    dataStoreManager: DataStoreManager,
+): MergingMediaSourceFactory =
+    MergingMediaSourceFactory(
+        provideMediaSourceFactory(
+            downloadCache,
+            playerCache,
+            mainRepository,
+            coroutineScope,
+        ),
+        dataStoreManager,
+    )
+
+@UnstableApi
+private fun provideRendererFactory(context: Context): DefaultRenderersFactory =
+    object : DefaultRenderersFactory(context) {
+        override fun buildAudioSink(
+            context: Context,
+            enableFloatOutput: Boolean,
+            enableAudioTrackPlaybackParams: Boolean,
+        ): AudioSink =
+            DefaultAudioSink
+                .Builder(context)
+                .setEnableFloatOutput(enableFloatOutput)
+                .setEnableAudioTrackPlaybackParams(enableAudioTrackPlaybackParams)
+                .setAudioProcessorChain(
+                    DefaultAudioSink.DefaultAudioProcessorChain(
+                        emptyArray(),
+                        SilenceSkippingAudioProcessor(
+                            2_000_000,
+                            (20_000 / 2_000_000).toFloat(),
+                            2_000_000,
+                            0,
+                            256,
+                        ),
+                        SonicAudioProcessor(),
+                    ),
+                ).build()
+    }
+
+@UnstableApi
+private fun provideCoilBitmapLoader(
+    context: Context,
+    coroutineScope: CoroutineScope,
+): CoilBitmapLoader = CoilBitmapLoader(context, coroutineScope)
+
+@UnstableApi
+private fun provideCacheDataSource(
+    downloadCache: SimpleCache,
+    playerCache: SimpleCache,
+): CacheDataSource.Factory =
+    CacheDataSource
+        .Factory()
+        .setCache(downloadCache)
+        .setUpstreamDataSourceFactory(
+            CacheDataSource
+                .Factory()
+                .setCache(playerCache)
+                .setUpstreamDataSourceFactory(
+                    DefaultHttpDataSource
+                        .Factory()
+                        .setAllowCrossProtocolRedirects(true)
+                        .setUserAgent("Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36")
+                        .setConnectTimeoutMs(5000),
+                ),
+        ).setCacheWriteDataSinkFactory(null)
+        .setFlags(CacheDataSource.FLAG_IGNORE_CACHE_ON_ERROR)
\ No newline at end of file
diff --git a/app/src/main/java/com/maxrave/simpmusic/di/ViewModelModule.kt b/app/src/main/java/com/maxrave/simpmusic/di/ViewModelModule.kt
new file mode 100644
index 00000000..1172e1c2
--- /dev/null
+++ b/app/src/main/java/com/maxrave/simpmusic/di/ViewModelModule.kt
@@ -0,0 +1,16 @@
+package com.maxrave.simpmusic.di
+
+import androidx.media3.common.util.UnstableApi
+import com.maxrave.simpmusic.viewModel.NowPlayingBottomSheetViewModel
+import org.koin.android.ext.koin.androidApplication
+import org.koin.core.module.dsl.viewModel
+import org.koin.dsl.module
+
+@UnstableApi
+val viewModelModule = module {
+    viewModel {
+        NowPlayingBottomSheetViewModel(
+            application = androidApplication()
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/maxrave/simpmusic/service/SimpleMediaService.kt b/app/src/main/java/com/maxrave/simpmusic/service/SimpleMediaService.kt
index 10c34e6b..d866e874 100644
--- a/app/src/main/java/com/maxrave/simpmusic/service/SimpleMediaService.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/service/SimpleMediaService.kt
@@ -7,28 +7,9 @@ import android.content.Intent
 import android.os.Binder
 import android.os.IBinder
 import android.util.Log
-import androidx.core.net.toUri
-import androidx.media3.common.AudioAttributes
-import androidx.media3.common.C
 import androidx.media3.common.Player
-import androidx.media3.common.audio.SonicAudioProcessor
 import androidx.media3.common.util.UnstableApi
-import androidx.media3.datasource.DataSource
-import androidx.media3.datasource.DataSpec
-import androidx.media3.datasource.DefaultHttpDataSource
-import androidx.media3.datasource.ResolvingDataSource
-import androidx.media3.datasource.cache.CacheDataSource
-import androidx.media3.datasource.cache.SimpleCache
-import androidx.media3.exoplayer.DefaultRenderersFactory
 import androidx.media3.exoplayer.ExoPlayer
-import androidx.media3.exoplayer.audio.AudioSink
-import androidx.media3.exoplayer.audio.DefaultAudioSink
-import androidx.media3.exoplayer.audio.SilenceSkippingAudioProcessor
-import androidx.media3.exoplayer.source.DefaultMediaSourceFactory
-import androidx.media3.extractor.ExtractorsFactory
-import androidx.media3.extractor.mkv.MatroskaExtractor
-import androidx.media3.extractor.mp4.FragmentedMp4Extractor
-import androidx.media3.extractor.text.DefaultSubtitleParserFactory
 import androidx.media3.session.DefaultMediaNotificationProvider
 import androidx.media3.session.MediaController
 import androidx.media3.session.MediaLibraryService
@@ -36,43 +17,29 @@ import androidx.media3.session.MediaSession
 import androidx.media3.session.SessionToken
 import com.google.common.util.concurrent.MoreExecutors
 import com.maxrave.simpmusic.R
-import com.maxrave.simpmusic.common.Config
+import com.maxrave.simpmusic.common.Config.SERVICE_SCOPE
 import com.maxrave.simpmusic.common.MEDIA_NOTIFICATION
-import com.maxrave.simpmusic.data.dataStore.DataStoreManager
-import com.maxrave.simpmusic.data.repository.MainRepository
 import com.maxrave.simpmusic.service.test.CoilBitmapLoader
-import com.maxrave.simpmusic.service.test.source.MergingMediaSourceFactory
 import com.maxrave.simpmusic.ui.MainActivity
 import com.maxrave.simpmusic.ui.widget.BasicWidget
 import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.cancel
-import kotlinx.coroutines.flow.cancellable
-import kotlinx.coroutines.launch
-import kotlinx.coroutines.runBlocking
-import org.koin.android.ext.android.inject
+import org.koin.core.component.KoinComponent
+import org.koin.core.component.inject
 import org.koin.core.qualifier.named
 
 @UnstableApi
-class SimpleMediaService : MediaLibraryService() {
-    lateinit var player: ExoPlayer
+class SimpleMediaService : MediaLibraryService(), KoinComponent {
 
-    lateinit var mediaSession: MediaLibrarySession
+    private val player: ExoPlayer by inject()
+    private val coilBitmapLoader: CoilBitmapLoader by inject()
+    private val serviceCoroutineScope: CoroutineScope by inject(named(SERVICE_SCOPE))
 
-    private val dataStoreManager: DataStoreManager by inject()
-
-    private val mainRepository: MainRepository by inject()
-
-    private val playerCache: SimpleCache by inject(named(Config.PLAYER_CACHE))
-
-    private val downloadCache: SimpleCache by inject(named(Config.DOWNLOAD_CACHE))
+    private lateinit var mediaSession: MediaLibrarySession
 
     private val simpleMediaSessionCallback: SimpleMediaSessionCallback by inject()
 
-    lateinit var simpleMediaServiceHandler: SimpleMediaServiceHandler
-
-    private val serviceCoroutineScope = CoroutineScope(Dispatchers.Main + SupervisorJob())
+    private val simpleMediaServiceHandler: SimpleMediaServiceHandler by inject()
 
     private val binder = MusicBinder()
 
@@ -90,46 +57,22 @@ class SimpleMediaService : MediaLibraryService() {
                 setSmallIcon(R.drawable.mono)
             },
         )
-        player =
-            ExoPlayer
-                .Builder(this)
-                .setAudioAttributes(provideAudioAttributes(), true)
-                .setWakeMode(C.WAKE_MODE_NETWORK)
-                .setHandleAudioBecomingNoisy(true)
-                .setSeekForwardIncrementMs(5000)
-                .setSeekBackIncrementMs(5000)
-                .setMediaSourceFactory(
-                    provideMergingMediaSource(
-                        downloadCache,
-                        playerCache,
-                        mainRepository,
-                        serviceCoroutineScope,
-                        dataStoreManager,
-                    ),
-                ).setRenderersFactory(provideRendererFactory(this))
-                .build()
 
         mediaSession =
             provideMediaLibrarySession(
                 this,
                 this,
                 player,
-                simpleMediaSessionCallback,
-                serviceCoroutineScope,
+                simpleMediaSessionCallback
             )
+
+        // Set late init set notification layout
+        simpleMediaServiceHandler.setNotificationLayout = { listCommand ->
+            mediaSession.setCustomLayout(listCommand)
+        }
         val sessionToken = SessionToken(this, ComponentName(this, SimpleMediaService::class.java))
         val controllerFuture = MediaController.Builder(this, sessionToken).buildAsync()
         controllerFuture.addListener({ controllerFuture.get() }, MoreExecutors.directExecutor())
-        simpleMediaServiceHandler =
-            SimpleMediaServiceHandler(
-                player = player,
-                mediaSession = mediaSession,
-                mediaSessionCallback = simpleMediaSessionCallback,
-                dataStoreManager = dataStoreManager,
-                mainRepository = mainRepository,
-                coroutineScope = serviceCoroutineScope,
-                context = application.applicationContext,
-            )
     }
 
     @UnstableApi
@@ -200,188 +143,13 @@ class SimpleMediaService : MediaLibraryService() {
 
     override fun onBind(intent: Intent?): IBinder = super.onBind(intent) ?: binder
 
-    private fun provideAudioAttributes(): AudioAttributes =
-        AudioAttributes
-            .Builder()
-            .setContentType(C.AUDIO_CONTENT_TYPE_MUSIC)
-            .setUsage(C.USAGE_MEDIA)
-            .build()
-
-    @UnstableApi
-    fun provideCacheDataSource(
-        downloadCache: SimpleCache,
-        playerCache: SimpleCache,
-    ): CacheDataSource.Factory =
-        CacheDataSource
-            .Factory()
-            .setCache(downloadCache)
-            .setUpstreamDataSourceFactory(
-                CacheDataSource
-                    .Factory()
-                    .setCache(playerCache)
-                    .setUpstreamDataSourceFactory(
-                        DefaultHttpDataSource
-                            .Factory()
-                            .setAllowCrossProtocolRedirects(true)
-                            .setUserAgent("Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36")
-                            .setConnectTimeoutMs(5000),
-                    ),
-            ).setCacheWriteDataSinkFactory(null)
-            .setFlags(CacheDataSource.FLAG_IGNORE_CACHE_ON_ERROR)
-
-    @UnstableApi
-    fun provideResolvingDataSourceFactory(
-        cacheDataSourceFactory: CacheDataSource.Factory,
-        downloadCache: SimpleCache,
-        playerCache: SimpleCache,
-        mainRepository: MainRepository,
-        coroutineScope: CoroutineScope,
-    ): DataSource.Factory {
-        return ResolvingDataSource.Factory(cacheDataSourceFactory) { dataSpec ->
-            val mediaId = dataSpec.key ?: error("No media id")
-            Log.w("Stream", mediaId)
-            Log.w("Stream", mediaId.startsWith(MergingMediaSourceFactory.isVideo).toString())
-            val chunkLength = 512 * 1024L
-            if (downloadCache.isCached(
-                    mediaId,
-                    dataSpec.position,
-                    if (dataSpec.length >= 0) dataSpec.length else 1,
-                ) ||
-                playerCache.isCached(mediaId, dataSpec.position, chunkLength)
-            ) {
-                coroutineScope.launch(Dispatchers.IO) {
-                    mainRepository.updateFormat(
-                        if (mediaId.contains(MergingMediaSourceFactory.isVideo)) {
-                            mediaId.removePrefix(MergingMediaSourceFactory.isVideo)
-                        } else {
-                            mediaId
-                        },
-                    )
-                }
-                return@Factory dataSpec
-            }
-            var dataSpecReturn: DataSpec = dataSpec
-            runBlocking(Dispatchers.IO) {
-                if (mediaId.contains(MergingMediaSourceFactory.isVideo)) {
-                    val id = mediaId.removePrefix(MergingMediaSourceFactory.isVideo)
-                    mainRepository
-                        .getStream(
-                            id,
-                            true,
-                        ).cancellable()
-                        .collect {
-                            if (it != null) {
-                                dataSpecReturn = dataSpec.withUri(it.toUri())
-                            }
-                        }
-                } else {
-                    mainRepository
-                        .getStream(
-                            mediaId,
-                            isVideo = false,
-                        ).cancellable()
-                        .collect {
-                            if (it != null) {
-                                dataSpecReturn = dataSpec.withUri(it.toUri())
-                            }
-                        }
-                }
-            }
-            return@Factory dataSpecReturn
-        }
-    }
-
-    @UnstableApi
-    fun provideExtractorFactory(): ExtractorsFactory =
-        ExtractorsFactory {
-            arrayOf(
-                MatroskaExtractor(
-                    DefaultSubtitleParserFactory(),
-                ),
-                FragmentedMp4Extractor(
-                    DefaultSubtitleParserFactory(),
-                ),
-                androidx.media3.extractor.mp4.Mp4Extractor(
-                    DefaultSubtitleParserFactory(),
-                ),
-            )
-        }
-
-    @UnstableApi
-    fun provideMediaSourceFactory(
-        downloadCache: SimpleCache,
-        playerCache: SimpleCache,
-        mainRepository: MainRepository,
-        coroutineScope: CoroutineScope,
-    ): DefaultMediaSourceFactory =
-        DefaultMediaSourceFactory(
-            provideResolvingDataSourceFactory(
-                provideCacheDataSource(downloadCache, playerCache),
-                downloadCache,
-                playerCache,
-                mainRepository,
-                coroutineScope,
-            ),
-            provideExtractorFactory(),
-        )
-
-    private fun provideMergingMediaSource(
-        downloadCache: SimpleCache,
-        playerCache: SimpleCache,
-        mainRepository: MainRepository,
-        coroutineScope: CoroutineScope,
-        dataStoreManager: DataStoreManager,
-    ): MergingMediaSourceFactory =
-        MergingMediaSourceFactory(
-            provideMediaSourceFactory(
-                downloadCache,
-                playerCache,
-                mainRepository,
-                coroutineScope,
-            ),
-            dataStoreManager,
-        )
-
-    @UnstableApi
-    fun provideRendererFactory(context: Context): DefaultRenderersFactory =
-        object : DefaultRenderersFactory(context) {
-            override fun buildAudioSink(
-                context: Context,
-                enableFloatOutput: Boolean,
-                enableAudioTrackPlaybackParams: Boolean,
-            ): AudioSink =
-                DefaultAudioSink
-                    .Builder(context)
-                    .setEnableFloatOutput(enableFloatOutput)
-                    .setEnableAudioTrackPlaybackParams(enableAudioTrackPlaybackParams)
-                    .setAudioProcessorChain(
-                        DefaultAudioSink.DefaultAudioProcessorChain(
-                            emptyArray(),
-                            SilenceSkippingAudioProcessor(
-                                2_000_000,
-                                (20_000 / 2_000_000).toFloat(),
-                                2_000_000,
-                                0,
-                                256,
-                            ),
-                            SonicAudioProcessor(),
-                        ),
-                    ).build()
-        }
-
-    @UnstableApi
-    fun provideCoilBitmapLoader(
-        context: Context,
-        coroutineScope: CoroutineScope,
-    ): CoilBitmapLoader = CoilBitmapLoader(context, coroutineScope)
-
+    // Can't inject by Koin because it depend on service
     @UnstableApi
-    fun provideMediaLibrarySession(
+    private fun provideMediaLibrarySession(
         context: Context,
         service: MediaLibraryService,
         player: ExoPlayer,
-        callback: SimpleMediaSessionCallback,
-        coroutineScope: CoroutineScope,
+        callback: SimpleMediaSessionCallback
     ): MediaLibrarySession =
         MediaLibrarySession
             .Builder(
@@ -395,6 +163,6 @@ class SimpleMediaService : MediaLibraryService() {
                     Intent(context, MainActivity::class.java),
                     PendingIntent.FLAG_IMMUTABLE,
                 ),
-            ).setBitmapLoader(provideCoilBitmapLoader(context, coroutineScope))
+            ).setBitmapLoader(coilBitmapLoader)
             .build()
-}
\ No newline at end of file
+}
diff --git a/app/src/main/java/com/maxrave/simpmusic/service/SimpleMediaServiceHandler.kt b/app/src/main/java/com/maxrave/simpmusic/service/SimpleMediaServiceHandler.kt
index fc0c2ecf..b17dc5c4 100644
--- a/app/src/main/java/com/maxrave/simpmusic/service/SimpleMediaServiceHandler.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/service/SimpleMediaServiceHandler.kt
@@ -23,7 +23,6 @@ import androidx.media3.common.Tracks
 import androidx.media3.common.util.UnstableApi
 import androidx.media3.exoplayer.ExoPlayer
 import androidx.media3.session.CommandButton
-import androidx.media3.session.MediaSession
 import androidx.media3.session.SessionCommand
 import coil.ImageLoader
 import coil.request.ImageRequest
@@ -82,13 +81,15 @@ import java.time.LocalDateTime
 @UnstableApi
 class SimpleMediaServiceHandler(
     val player: ExoPlayer,
-    private val mediaSession: MediaSession,
     mediaSessionCallback: SimpleMediaSessionCallback,
     private val dataStoreManager: DataStoreManager,
     private val mainRepository: MainRepository,
-    var coroutineScope: CoroutineScope,
+    private val coroutineScope: CoroutineScope,
     private val context: Context,
 ) : Player.Listener {
+    var setNotificationLayout: ((List<CommandButton>) -> Unit)? = null
+
+    @Suppress("ktlint:standard:property-naming")
     private val TAG = "SimpleMediaServiceHandler"
 
     private var loudnessEnhancer: LoudnessEnhancer? = null
@@ -110,22 +111,25 @@ class SimpleMediaServiceHandler(
     private var _queueData = MutableStateFlow<QueueData?>(null)
     val queueData = _queueData.asStateFlow()
 
-    private var _controlState = MutableStateFlow(ControlState(
-        isPlaying = player.isPlaying,
-        isShuffle = player.shuffleModeEnabled,
-        repeatState = when (player.repeatMode) {
-            Player.REPEAT_MODE_ONE -> RepeatState.One
-            Player.REPEAT_MODE_ALL -> RepeatState.All
-            Player.REPEAT_MODE_OFF -> RepeatState.None
-            else -> {
-                RepeatState.None
-            }
-        },
-        isLiked = false,
-        isNextAvailable = player.hasNextMediaItem(),
-        isPreviousAvailable = player.hasPreviousMediaItem(),
-
-    ))
+    private var _controlState =
+        MutableStateFlow(
+            ControlState(
+                isPlaying = player.isPlaying,
+                isShuffle = player.shuffleModeEnabled,
+                repeatState =
+                    when (player.repeatMode) {
+                        Player.REPEAT_MODE_ONE -> RepeatState.One
+                        Player.REPEAT_MODE_ALL -> RepeatState.All
+                        Player.REPEAT_MODE_OFF -> RepeatState.None
+                        else -> {
+                            RepeatState.None
+                        }
+                    },
+                isLiked = false,
+                isNextAvailable = player.hasNextMediaItem(),
+                isPreviousAvailable = player.hasPreviousMediaItem(),
+            ),
+        )
     val controlState = _controlState.asStateFlow()
 
     private var _stateFlow = MutableStateFlow<StateSource>(StateSource.STATE_CREATED)
@@ -141,14 +145,14 @@ class SimpleMediaServiceHandler(
 
     // SponsorBlock
     private var _skipSegments: MutableStateFlow<List<SkipSegments>?> = MutableStateFlow(null)
-    val skipSegments: StateFlow<List<SkipSegments>?> = _skipSegments
+    private val skipSegments: StateFlow<List<SkipSegments>?> = _skipSegments
 
-    private var getSkipSegmentsJob : Job? = null
+    private var getSkipSegmentsJob: Job? = null
 
     private var _format: MutableStateFlow<NewFormatEntity?> = MutableStateFlow(null)
     val format: StateFlow<NewFormatEntity?> = _format
 
-    private var getFormatJob : Job? = null
+    private var getFormatJob: Job? = null
 
     private var skipSilent = false
 
@@ -156,7 +160,7 @@ class SimpleMediaServiceHandler(
 
     private var progressJob: Job? = null
 
-    private var bufferedJob : Job? = null
+    private var bufferedJob: Job? = null
 
     private var updateNotificationJob: Job? = null
 
@@ -170,7 +174,6 @@ class SimpleMediaServiceHandler(
 
     private var jobWatchtime: Job? = null
 
-
     init {
         player.addListener(this)
         progressJob = Job()
@@ -211,48 +214,53 @@ class SimpleMediaServiceHandler(
         }
         mayBeRestoreQueue()
         coroutineScope.launch {
-            val skipSegmentsJob = launch {
-                simpleMediaState.filter { it is SimpleMediaState.Progress }.map {
-                    val current = (it as SimpleMediaState.Progress).progress
-                    val duration = player.duration
-                    if (duration > 0L) {
-                        (current.toFloat() / player.duration)*100
-                    }
-                    else {
-                        -1f
-                    }
-                }.filter { it >= 0f }
-                    .distinctUntilChanged()
-                    .collect { current ->
-                        if (dataStoreManager.sponsorBlockEnabled.first() == TRUE) {
-                            if (player.duration > 0L) {
-                                val skipSegments = skipSegments.value
-                                val listCategory = dataStoreManager.getSponsorBlockCategories()
-                                if (skipSegments != null) {
-                                    for (skip in skipSegments) {
-                                        if (listCategory.contains(skip.category)) {
-                                            val firstPart = ((skip.segment[0] / skip.videoDuration)*100).toFloat()
-                                            val secondPart =
-                                                ((skip.segment[1] / skip.videoDuration)*100).toFloat()
-                                            if (current in firstPart..secondPart) {
-                                                Log.w(
-                                                    "Seek to",
-                                                    secondPart.toString(),
-                                                )
-                                                Log.d("Seek to", "Cr: $current, First: $firstPart, Second: $secondPart")
-                                                skipSegment((secondPart * player.duration).toLong()/100)
-                                                Toast.makeText(
-                                                    context,
-                                                    context.getString(
-                                                        R.string.sponsorblock_skip_segment,
-                                                        context.getString(
-                                                            SPONSOR_BLOCK.listName.get(
-                                                                SPONSOR_BLOCK.list.indexOf(skip.category),
+            val skipSegmentsJob =
+                launch {
+                    simpleMediaState
+                        .filter { it is SimpleMediaState.Progress }
+                        .map {
+                            val current = (it as SimpleMediaState.Progress).progress
+                            val duration = player.duration
+                            if (duration > 0L) {
+                                (current.toFloat() / player.duration) * 100
+                            } else {
+                                -1f
+                            }
+                        }.filter { it >= 0f }
+                        .distinctUntilChanged()
+                        .collect { current ->
+                            if (dataStoreManager.sponsorBlockEnabled.first() == TRUE) {
+                                if (player.duration > 0L) {
+                                    val skipSegments = skipSegments.value
+                                    val listCategory = dataStoreManager.getSponsorBlockCategories()
+                                    if (skipSegments != null) {
+                                        for (skip in skipSegments) {
+                                            if (listCategory.contains(skip.category)) {
+                                                val firstPart = ((skip.segment[0] / skip.videoDuration) * 100).toFloat()
+                                                val secondPart =
+                                                    ((skip.segment[1] / skip.videoDuration) * 100).toFloat()
+                                                if (current in firstPart..secondPart) {
+                                                    Log.w(
+                                                        "Seek to",
+                                                        secondPart.toString(),
+                                                    )
+                                                    Log.d("Seek to", "Cr: $current, First: $firstPart, Second: $secondPart")
+                                                    skipSegment((secondPart * player.duration).toLong() / 100)
+                                                    Toast
+                                                        .makeText(
+                                                            context,
+                                                            context.getString(
+                                                                R.string.sponsorblock_skip_segment,
+                                                                context
+                                                                    .getString(
+                                                                        SPONSOR_BLOCK.listName.get(
+                                                                            SPONSOR_BLOCK.list.indexOf(skip.category),
+                                                                        ),
+                                                                    ).lowercase(),
                                                             ),
-                                                        ).lowercase(),
-                                                    ),
-                                                    Toast.LENGTH_SHORT,
-                                                ).show()
+                                                            Toast.LENGTH_SHORT,
+                                                        ).show()
+                                                }
                                             }
                                         }
                                     }
@@ -260,38 +268,39 @@ class SimpleMediaServiceHandler(
                             }
                         }
                 }
-            }
             val playbackJob =
-                    launch {
-                        format.collectLatest { formatTemp ->
-                            if (dataStoreManager.sendBackToGoogle.first() == TRUE) {
-                                if (formatTemp != null) {
-                                    println("format in viewModel: $formatTemp")
-                                    Log.d(TAG, "Collect format ${formatTemp.videoId}")
-                                    Log.w(TAG, "Format expire at ${formatTemp.expiredTime}")
-                                    Log.i(TAG, "AtrUrl ${formatTemp.playbackTrackingAtrUrl}")
-                                    initPlayback(
-                                        formatTemp.playbackTrackingVideostatsPlaybackUrl,
-                                        formatTemp.playbackTrackingAtrUrl,
-                                        formatTemp.playbackTrackingVideostatsWatchtimeUrl,
-                                        formatTemp.cpn,
-                                    )
-                                }
+                launch {
+                    format.collectLatest { formatTemp ->
+                        if (dataStoreManager.sendBackToGoogle.first() == TRUE) {
+                            if (formatTemp != null) {
+                                println("format in viewModel: $formatTemp")
+                                Log.d(TAG, "Collect format ${formatTemp.videoId}")
+                                Log.w(TAG, "Format expire at ${formatTemp.expiredTime}")
+                                Log.i(TAG, "AtrUrl ${formatTemp.playbackTrackingAtrUrl}")
+                                initPlayback(
+                                    formatTemp.playbackTrackingVideostatsPlaybackUrl,
+                                    formatTemp.playbackTrackingAtrUrl,
+                                    formatTemp.playbackTrackingVideostatsWatchtimeUrl,
+                                    formatTemp.cpn,
+                                )
                             }
                         }
-            }
+                    }
+                }
             skipSegmentsJob.join()
             playbackJob.join()
         }
     }
 
     private var getDataOfNowPlayingTrackStateJob: Job? = null
+
     private fun getDataOfNowPlayingState(mediaItem: MediaItem) {
-        val videoId = if (mediaItem.isVideo()) {
-            mediaItem.mediaId.removePrefix(MergingMediaSourceFactory.isVideo)
-        } else {
-            mediaItem.mediaId
-        }
+        val videoId =
+            if (mediaItem.isVideo()) {
+                mediaItem.mediaId.removePrefix(MergingMediaSourceFactory.isVideo)
+            } else {
+                mediaItem.mediaId
+            }
         val track = queueData.value?.listTracks?.find { it.videoId == videoId }
         _nowPlayingState.update {
             it.copy(
@@ -303,46 +312,52 @@ class SimpleMediaServiceHandler(
         _format.value = null
         _skipSegments.value = null
         getDataOfNowPlayingTrackStateJob?.cancel()
-        getDataOfNowPlayingTrackStateJob = coroutineScope.launch {
-            Log.w(TAG, "getDataOfNowPlayingState: $videoId")
-            mainRepository.getSongById(videoId).cancellable().singleOrNull().let { songEntity ->
-                if (songEntity != null) {
-                    _controlState.update { it.copy(isLiked = songEntity.liked) }
-                    mainRepository.updateSongInLibrary(LocalDateTime.now(), songEntity.videoId)
-                    mainRepository.updateListenCount(songEntity.videoId)
-                } else {
-                    _controlState.update { it.copy(isLiked = false) }
-                    mainRepository.insertSong(
-                        track?.toSongEntity() ?: mediaItem.toSongEntity()!!
-                    )
-                }
-                Log.w(TAG, "getDataOfNowPlayingState: $songEntity")
-                Log.w(TAG, "getDataOfNowPlayingState: $track")
-                _nowPlayingState.update {
-                    it.copy(
-                        songEntity = songEntity ?: track?.toSongEntity() ?: mediaItem.toSongEntity()
-                    )
-                }
-                Log.w(TAG, "getDataOfNowPlayingState: ${nowPlayingState.value}")
-            }
-            songEntityJob?.cancel()
-            songEntityJob = coroutineScope.launch {
-                mainRepository.getSongAsFlow(videoId).cancellable().filterNotNull().collectLatest { songEntity ->
-                    _nowPlayingState.update {
-                        it.copy(
-                            songEntity = songEntity
+        getDataOfNowPlayingTrackStateJob =
+            coroutineScope.launch {
+                Log.w(TAG, "getDataOfNowPlayingState: $videoId")
+                mainRepository.getSongById(videoId).cancellable().singleOrNull().let { songEntity ->
+                    if (songEntity != null) {
+                        _controlState.update { it.copy(isLiked = songEntity.liked) }
+                        mainRepository.updateSongInLibrary(LocalDateTime.now(), songEntity.videoId)
+                        mainRepository.updateListenCount(songEntity.videoId)
+                    } else {
+                        _controlState.update { it.copy(isLiked = false) }
+                        mainRepository.insertSong(
+                            track?.toSongEntity() ?: mediaItem.toSongEntity()!!,
                         )
                     }
-                    _controlState.update {
+                    Log.w(TAG, "getDataOfNowPlayingState: $songEntity")
+                    Log.w(TAG, "getDataOfNowPlayingState: $track")
+                    _nowPlayingState.update {
                         it.copy(
-                            isLiked = songEntity.liked
+                            songEntity = songEntity ?: track?.toSongEntity() ?: mediaItem.toSongEntity(),
                         )
                     }
+                    Log.w(TAG, "getDataOfNowPlayingState: ${nowPlayingState.value}")
+                }
+                songEntityJob?.cancel()
+                songEntityJob =
+                    coroutineScope.launch {
+                        mainRepository.getSongAsFlow(videoId).cancellable().filterNotNull().collectLatest { songEntity ->
+                            _nowPlayingState.update {
+                                it.copy(
+                                    songEntity = songEntity,
+                                )
+                            }
+                            _controlState.update {
+                                it.copy(
+                                    isLiked = songEntity.liked,
+                                )
+                            }
+                        }
+                    }
+                if (dataStoreManager.sponsorBlockEnabled.first() == TRUE) {
+                    getSkipSegments(videoId)
+                }
+                if (dataStoreManager.sendBackToGoogle.first() == TRUE) {
+                    getFormat(videoId)
                 }
             }
-            if (dataStoreManager.sponsorBlockEnabled.first() == TRUE){ getSkipSegments(videoId) }
-            if (dataStoreManager.sendBackToGoogle.first() == TRUE){ getFormat(videoId) }
-        }
     }
 
     private fun getSkipSegments(videoId: String) {
@@ -361,18 +376,19 @@ class SimpleMediaServiceHandler(
 
     private fun getFormat(mediaId: String?) {
         getFormatJob?.cancel()
-        getFormatJob = coroutineScope.launch {
-            if (mediaId != null) {
-                mainRepository.getFormatFlow(mediaId).cancellable().collectLatest { f ->
-                    Log.w(TAG, "Get format for "+ mediaId.toString() + ": " +f.toString())
-                    if (f != null) {
-                        _format.emit(f)
-                    } else {
-                        _format.emit(null)
+        getFormatJob =
+            coroutineScope.launch {
+                if (mediaId != null) {
+                    mainRepository.getFormatFlow(mediaId).cancellable().collectLatest { f ->
+                        Log.w(TAG, "Get format for " + mediaId.toString() + ": " + f.toString())
+                        if (f != null) {
+                            _format.emit(f)
+                        } else {
+                            _format.emit(null)
+                        }
                     }
                 }
             }
-        }
     }
 
     private fun initPlayback(
@@ -385,7 +401,8 @@ class SimpleMediaServiceHandler(
         coroutineScope.launch {
             if (playback != null && atr != null && watchTime != null && cpn != null) {
                 watchTimeList.clear()
-                mainRepository.initPlayback(playback, atr, watchTime, cpn, queueData.value?.playlistId)
+                mainRepository
+                    .initPlayback(playback, atr, watchTime, cpn, queueData.value?.playlistId)
                     .collect {
                         if (it.first == 204) {
                             Log.d("Check initPlayback", "Success")
@@ -404,46 +421,49 @@ class SimpleMediaServiceHandler(
             jobWatchtime =
                 launch {
                     simpleMediaState.collect { state ->
-                        if (state is SimpleMediaState.Progress){
-                            val value = state.progress
-                            if (value > 0 && watchTimeList.isNotEmpty()) {
-                                val second = (value / 1000).toFloat()
-                                if (second in watchTimeList.last()..watchTimeList.last() + 1.2f) {
-                                    val watchTimeUrl =
-                                        _format.value?.playbackTrackingVideostatsWatchtimeUrl
-                                    val cpn = _format.value?.cpn
-                                    if (second + 20.23f < (player.duration / 1000).toFloat()) {
-                                        watchTimeList.add(second + 20.23f)
-                                        if (watchTimeUrl != null && cpn != null) {
-                                            mainRepository.updateWatchTime(
-                                                watchTimeUrl,
-                                                watchTimeList,
-                                                cpn,
-                                                queueData.value?.playlistId
-                                            ).collect { response ->
-                                                if (response == 204) {
-                                                    Log.d("Check updateWatchTime", "Success")
-                                                }
+                        if (state is SimpleMediaState.Progress)
+                            {
+                                val value = state.progress
+                                if (value > 0 && watchTimeList.isNotEmpty()) {
+                                    val second = (value / 1000).toFloat()
+                                    if (second in watchTimeList.last()..watchTimeList.last() + 1.2f) {
+                                        val watchTimeUrl =
+                                            _format.value?.playbackTrackingVideostatsWatchtimeUrl
+                                        val cpn = _format.value?.cpn
+                                        if (second + 20.23f < (player.duration / 1000).toFloat()) {
+                                            watchTimeList.add(second + 20.23f)
+                                            if (watchTimeUrl != null && cpn != null) {
+                                                mainRepository
+                                                    .updateWatchTime(
+                                                        watchTimeUrl,
+                                                        watchTimeList,
+                                                        cpn,
+                                                        queueData.value?.playlistId,
+                                                    ).collect { response ->
+                                                        if (response == 204) {
+                                                            Log.d("Check updateWatchTime", "Success")
+                                                        }
+                                                    }
                                             }
-                                        }
-                                    } else {
-                                        watchTimeList.clear()
-                                        if (watchTimeUrl != null && cpn != null) {
-                                            mainRepository.updateWatchTimeFull(
-                                                watchTimeUrl,
-                                                cpn,
-                                                queueData.value?.playlistId
-                                            ).collect { response ->
-                                                if (response == 204) {
-                                                    Log.d("Check updateWatchTimeFull", "Success")
-                                                }
+                                        } else {
+                                            watchTimeList.clear()
+                                            if (watchTimeUrl != null && cpn != null) {
+                                                mainRepository
+                                                    .updateWatchTimeFull(
+                                                        watchTimeUrl,
+                                                        cpn,
+                                                        queueData.value?.playlistId,
+                                                    ).collect { response ->
+                                                        if (response == 204) {
+                                                            Log.d("Check updateWatchTimeFull", "Success")
+                                                        }
+                                                    }
                                             }
                                         }
+                                        Log.w("Check updateWatchTime", watchTimeList.toString())
                                     }
-                                    Log.w("Check updateWatchTime", watchTimeList.toString())
                                 }
                             }
-                        }
                     }
                 }
             jobWatchtime?.join()
@@ -455,7 +475,7 @@ class SimpleMediaServiceHandler(
         toggleLikeJob?.cancel()
         toggleLikeJob =
             coroutineScope.launch {
-                var id = (player.currentMediaItem?.mediaId ?: "" )
+                var id = (player.currentMediaItem?.mediaId ?: "")
                 if (id.contains("Video")) {
                     id = id.removePrefix("Video")
                 }
@@ -502,23 +522,23 @@ class SimpleMediaServiceHandler(
     }
 
     private fun updateNextPreviousTrackAvailability() {
-        _controlState.value = _controlState.value.copy(
-            isNextAvailable = player.hasNextMediaItem(),
-            isPreviousAvailable = player.hasPreviousMediaItem(),
-        )
+        _controlState.value =
+            _controlState.value.copy(
+                isNextAvailable = player.hasNextMediaItem(),
+                isPreviousAvailable = player.hasPreviousMediaItem(),
+            )
     }
 
-    private fun getMediaItemWithIndex(index: Int): MediaItem {
-        return player.getMediaItemAt(index)
-    }
+    private fun getMediaItemWithIndex(index: Int): MediaItem = player.getMediaItemAt(index)
 
     fun removeMediaItem(position: Int) {
         player.removeMediaItem(position)
         val temp = _queueData.value?.listTracks
         temp?.removeAt(position)
-        _queueData.value = _queueData.value?.copy(
-            listTracks = temp ?: arrayListOf(),
-        )
+        _queueData.value =
+            _queueData.value?.copy(
+                listTracks = temp ?: arrayListOf(),
+            )
         _currentSongIndex.value = player.currentMediaItemIndex
     }
 
@@ -699,21 +719,23 @@ class SimpleMediaServiceHandler(
         when (error.errorCode) {
             PlaybackException.ERROR_CODE_TIMEOUT -> {
                 Log.e("Player Error", "onPlayerError: ${error.message}")
-                Toast.makeText(
-                    context,
-                    context.getString(R.string.time_out_check_internet_connection_or_change_piped_instance_in_settings),
-                    Toast.LENGTH_LONG,
-                ).show()
+                Toast
+                    .makeText(
+                        context,
+                        context.getString(R.string.time_out_check_internet_connection_or_change_piped_instance_in_settings),
+                        Toast.LENGTH_LONG,
+                    ).show()
                 player.pause()
             }
 
             else -> {
                 Log.e("Player Error", "onPlayerError: ${error.message}")
-                Toast.makeText(
-                    context,
-                    context.getString(R.string.time_out_check_internet_connection_or_change_piped_instance_in_settings),
-                    Toast.LENGTH_LONG,
-                ).show()
+                Toast
+                    .makeText(
+                        context,
+                        context.getString(R.string.time_out_check_internet_connection_or_change_piped_instance_in_settings),
+                        Toast.LENGTH_LONG,
+                    ).show()
                 player.pause()
             }
         }
@@ -727,23 +749,23 @@ class SimpleMediaServiceHandler(
         mayBeNormalizeVolume()
         Log.w("REASON", "onMediaItemTransition: $reason")
         Log.d("Media Item Transition", "Media Item: ${mediaItem?.mediaMetadata?.title}")
-        if (mediaItem?.mediaId != _nowPlaying.value?.mediaId ) {
+        if (mediaItem?.mediaId != _nowPlaying.value?.mediaId) {
             _nowPlaying.value = mediaItem
         }
         if (mediaItem?.mediaId != nowPlayingState.value.mediaItem.mediaId) {
             Log.w(TAG, "onMediaItemTransition: ${mediaItem?.mediaId}")
             if (mediaItem != null) {
                 getDataOfNowPlayingState(mediaItem)
-            }
-            else {
+            } else {
                 _nowPlayingState.update { NowPlayingTrackState.initial() }
             }
         }
         _queueData.value?.listTracks?.let { list ->
-            if (list.size > 3 && list.size - player.currentMediaItemIndex < 3
-                && list.size - player.currentMediaItemIndex >= 0
-                && _stateFlow.value == StateSource.STATE_INITIALIZED
-                ) {
+            if (list.size > 3 &&
+                list.size - player.currentMediaItemIndex < 3 &&
+                list.size - player.currentMediaItemIndex >= 0 &&
+                _stateFlow.value == StateSource.STATE_INITIALIZED
+            ) {
                 Log.d("Check loadMore", "loadMore")
                 loadMore()
             }
@@ -770,7 +792,6 @@ class SimpleMediaServiceHandler(
             Player.STATE_READY -> {
                 Log.d(TAG, "onPlaybackStateChanged: Ready")
                 _simpleMediaState.value = SimpleMediaState.Ready(player.duration)
-
             }
             else -> {
                 Log.d(TAG, "onPlaybackStateChanged: $playbackState")
@@ -819,22 +840,24 @@ class SimpleMediaServiceHandler(
     }
 
     private fun startProgressUpdate() {
-        progressJob = coroutineScope.launch {
-            while (true) {
-                delay(100)
-                _simpleMediaState.value = SimpleMediaState.Progress(player.currentPosition)
+        progressJob =
+            coroutineScope.launch {
+                while (true) {
+                    delay(100)
+                    _simpleMediaState.value = SimpleMediaState.Progress(player.currentPosition)
+                }
             }
-        }
     }
 
     private fun startBufferedUpdate() {
-        bufferedJob = coroutineScope.launch {
-            while (true) {
-                delay(500)
-                _simpleMediaState.value =
-                    SimpleMediaState.Loading(player.bufferedPercentage, player.duration)
+        bufferedJob =
+            coroutineScope.launch {
+                while (true) {
+                    delay(500)
+                    _simpleMediaState.value =
+                        SimpleMediaState.Loading(player.bufferedPercentage, player.duration)
+                }
             }
-        }
     }
 
     fun loadMore() {
@@ -854,50 +877,69 @@ class SimpleMediaServiceHandler(
                     val filter = if (continuation.startsWith(ASC)) FilterState.OlderFirst else FilterState.NewerFirst
                     val offset =
                         if (filter == FilterState.OlderFirst) {
-                            continuation.removePrefix(
-                                ASC,
-                            ).toInt()
+                            continuation
+                                .removePrefix(
+                                    ASC,
+                                ).toInt()
                         } else {
                             continuation.removePrefix(DESC).toInt()
                         }
-                    val total = mainRepository.getLocalPlaylist(longId).firstOrNull()?.tracks?.size ?: 0
-                    mainRepository.getPlaylistPairSongByOffset(
-                        longId,
-                        offset,
-                        filter,
-                        total
-                    ).singleOrNull()?.let { pair ->
-                        Log.w("Check loadMore response", pair.size.toString())
-                        mainRepository.getSongsByListVideoId(pair.map { it.songId }).single().let { songs ->
-                            if (songs.isNotEmpty()) {
-                                delay(300)
-                                loadMoreCatalog(songs.toArrayListTrack())
+                    val total =
+                        mainRepository
+                            .getLocalPlaylist(longId)
+                            .firstOrNull()
+                            ?.tracks
+                            ?.size ?: 0
+                    mainRepository
+                        .getPlaylistPairSongByOffset(
+                            longId,
+                            offset,
+                            filter,
+                            total,
+                        ).singleOrNull()
+                        ?.let { pair ->
+                            Log.w("Check loadMore response", pair.size.toString())
+                            mainRepository.getSongsByListVideoId(pair.map { it.songId }).single().let { songs ->
+                                if (songs.isNotEmpty()) {
+                                    delay(300)
+                                    loadMoreCatalog(songs.toArrayListTrack())
 //                                Queue.setContinuation(
 //                                    playlistId,
 //                                    if (filter == FilterState.OlderFirst) ASC + (offset + 1) else DESC + (offset + 1).toString(),
 //                                )
-                                _queueData.value = _queueData.value?.copy(
-                                    continuation = if (filter == FilterState.OlderFirst) ASC + (offset + 1) else DESC + (offset + 1).toString(),
-                                )
-                            }
+                                    _queueData.value =
+                                        _queueData.value?.copy(
+                                            continuation =
+                                                if (filter ==
+                                                    FilterState.OlderFirst
+                                                ) {
+                                                    ASC + (offset + 1)
+                                                } else {
+                                                    DESC + (offset + 1).toString()
+                                                },
+                                        )
+                                }
 //                            loadingMore.value = false
+                            }
                         }
-                    }
                 }
             } else {
                 coroutineScope.launch {
                     _stateFlow.value = StateSource.STATE_INITIALIZING
                     Log.w("Check loadMore continuation", continuation.toString())
-                    mainRepository.getContinueTrack(playlistId, continuation)
-                        .singleOrNull().let { response ->
+                    mainRepository
+                        .getContinueTrack(playlistId, continuation)
+                        .singleOrNull()
+                        .let { response ->
                             val list = response?.first
                             if (list != null) {
                                 Log.w("Check loadMore response", response.toString())
                                 loadMoreCatalog(list)
                             }
-                            _queueData.value = _queueData.value?.copy(
-                                continuation = response?.second,
-                            )
+                            _queueData.value =
+                                _queueData.value?.copy(
+                                    continuation = response?.second,
+                                )
 //                            loadingMore.value = false
                         }
                 }
@@ -912,34 +954,30 @@ class SimpleMediaServiceHandler(
                 when (response) {
                     is Resource.Success -> {
                         loadMoreCatalog(response.data?.first ?: arrayListOf())
-                        _queueData.value = _queueData.value?.copy(
-                            continuation = response.data?.second,
-                        )
+                        _queueData.value =
+                            _queueData.value?.copy(
+                                continuation = response.data?.second,
+                            )
                     }
                     is Resource.Error -> {
                         Log.d("Check Related", "getRelated: ${response.message}")
-                        _queueData.value = _queueData.value?.copy(
-                            continuation = null,
-                        )
+                        _queueData.value =
+                            _queueData.value?.copy(
+                                continuation = null,
+                            )
                     }
                 }
             }
         }
     }
 
-    fun setQueueData(
-        queueData: QueueData
-    ) {
+    fun setQueueData(queueData: QueueData) {
         _queueData.value = queueData
     }
 
-    fun mediaListSize(): Int {
-        return player.mediaItemCount
-    }
+    fun mediaListSize(): Int = player.mediaItemCount
 
-    fun getCurrentMediaItem(): MediaItem? {
-        return player.currentMediaItem
-    }
+    fun getCurrentMediaItem(): MediaItem? = player.currentMediaItem
 
     private fun stopProgressUpdate() {
         progressJob?.cancel()
@@ -1022,12 +1060,13 @@ class SimpleMediaServiceHandler(
                             playlistId = LOCAL_PLAYLIST_ID_SAVED_QUEUE,
                             playlistName = dataStoreManager.playlistFromSaved.first(),
                             playlistType = PlaylistType.PLAYLIST,
-                            continuation = null
-                        )
-                    )
-                    var index = queue?.firstOrNull()?.listTrack?.map { it.videoId }?.indexOf(
-                        currentPlayingTrack.videoId
+                            continuation = null,
+                        ),
                     )
+                    var index =
+                        queue?.firstOrNull()?.listTrack?.map { it.videoId }?.indexOf(
+                            currentPlayingTrack.videoId,
+                        )
                     if (index == null || index == -1) index = 0
                     addMediaItem(currentPlayingTrack.toMediaItem(), playWhenReady = false)
                     seekTo(dataStoreManager.recentPosition.first())
@@ -1049,7 +1088,8 @@ class SimpleMediaServiceHandler(
                 val p = getScreenSize(context)
                 val widgetImageSize = p.x.coerceAtMost(p.y)
                 val imageRequest =
-                    ImageRequest.Builder(context)
+                    ImageRequest
+                        .Builder(context)
                         .data(nowPlaying.mediaMetadata.artworkUri)
                         .size(widgetImageSize)
                         .placeholder(R.drawable.holder_video)
@@ -1075,11 +1115,11 @@ class SimpleMediaServiceHandler(
                                 }
                             },
                             onError = {
-                                AppCompatResources.getDrawable(
-                                    context,
-                                    R.drawable.holder_video,
-                                )
-                                    ?.let { it1 ->
+                                AppCompatResources
+                                    .getDrawable(
+                                        context,
+                                        R.drawable.holder_video,
+                                    )?.let { it1 ->
                                         basicWidget.updateImage(
                                             context,
                                             it1.toBitmap(
@@ -1094,7 +1134,6 @@ class SimpleMediaServiceHandler(
             }
     }
 
-
     fun mayBeSaveRecentSong() {
         coroutineScope.launch {
             if (dataStoreManager.saveRecentSongAndQueue.first() == TRUE) {
@@ -1103,7 +1142,13 @@ class SimpleMediaServiceHandler(
                     player.contentPosition,
                 )
                 dataStoreManager.setPlaylistFromSaved(queueData.value?.playlistName ?: "")
-                Log.d("Check saved", player.currentMediaItem?.mediaMetadata?.title.toString())
+                Log.d(
+                    "Check saved",
+                    player.currentMediaItem
+                        ?.mediaMetadata
+                        ?.title
+                        .toString(),
+                )
                 val temp: ArrayList<Track> = ArrayList()
                 temp.clear()
                 temp.addAll(_queueData.value?.listTracks ?: arrayListOf())
@@ -1208,19 +1253,22 @@ class SimpleMediaServiceHandler(
         updateNotificationJob?.cancel()
         updateNotificationJob =
             coroutineScope.launch {
-                var id = (player.currentMediaItem?.mediaId ?: "" )
+                var id = (player.currentMediaItem?.mediaId ?: "")
                 if (id.contains("Video")) {
                     id = id.removePrefix("Video")
                 }
                 val liked =
-                    mainRepository.getSongById(id)
-                        .first()?.liked
+                    mainRepository
+                        .getSongById(id)
+                        .first()
+                        ?.liked
                 if (liked != null) {
                     _controlState.value = _controlState.value.copy(isLiked = liked)
                 }
-                mediaSession.setCustomLayout(
+                setNotificationLayout?.invoke(
                     listOf(
-                        CommandButton.Builder()
+                        CommandButton
+                            .Builder()
                             .setDisplayName(
                                 if (liked == true) {
                                     context.getString(R.string.liked)
@@ -1229,11 +1277,11 @@ class SimpleMediaServiceHandler(
                                         R.string.like,
                                     )
                                 },
-                            )
-                            .setIconResId(if (liked == true) R.drawable.baseline_favorite_24 else R.drawable.baseline_favorite_border_24)
+                            ).setIconResId(if (liked == true) R.drawable.baseline_favorite_24 else R.drawable.baseline_favorite_border_24)
                             .setSessionCommand(SessionCommand(MEDIA_CUSTOM_COMMAND.LIKE, Bundle()))
                             .build(),
-                        CommandButton.Builder()
+                        CommandButton
+                            .Builder()
                             .setDisplayName(
                                 when (player.repeatMode) {
                                     Player.REPEAT_MODE_ONE -> context.getString(R.string.repeat_one)
@@ -1241,34 +1289,27 @@ class SimpleMediaServiceHandler(
                                     Player.REPEAT_MODE_ALL -> context.getString(R.string.repeat_all)
 
                                     else -> context.getString(R.string.repeat_off)
-                                 },
-                            )
-                            .setSessionCommand(
+                                },
+                            ).setSessionCommand(
                                 SessionCommand(
                                     MEDIA_CUSTOM_COMMAND.REPEAT,
                                     Bundle(),
                                 ),
-                            )
-                            .setIconResId(
+                            ).setIconResId(
                                 when (player.repeatMode) {
                                     Player.REPEAT_MODE_ONE -> R.drawable.baseline_repeat_one_24
                                     Player.REPEAT_MODE_ALL -> R.drawable.repeat_on
                                     else -> R.drawable.baseline_repeat_24_enable
                                 },
-                            )
-                            .build(),
+                            ).build(),
                     ),
                 )
             }
     }
 
-    fun getPlayerDuration(): Long {
-        return player.duration
-    }
+    fun getPlayerDuration(): Long = player.duration
 
-    fun getProgress(): Long {
-        return player.currentPosition
-    }
+    fun getProgress(): Long = player.currentPosition
 
 //    fun changeAddedState() {
 //        added.value = false
@@ -1287,9 +1328,10 @@ class SimpleMediaServiceHandler(
             val temp = list[position]
             list[position] = list[position - 1]
             list[position - 1] = temp
-            _queueData.value = queueData.first()?.copy(
-                listTracks = list,
-            )
+            _queueData.value =
+                queueData.first()?.copy(
+                    listTracks = list,
+                )
         }
         _currentSongIndex.value = player.currentMediaItemIndex
     }
@@ -1301,9 +1343,10 @@ class SimpleMediaServiceHandler(
             val temp = list[position]
             list[position] = list[position + 1]
             list[position + 1] = temp
-            _queueData.value = queueData.first()?.copy(
-                listTracks = list,
-            )
+            _queueData.value =
+                queueData.first()?.copy(
+                    listTracks = list,
+                )
         }
         _currentSongIndex.value = player.currentMediaItemIndex
     }
@@ -1337,7 +1380,7 @@ class SimpleMediaServiceHandler(
         }
     }
 
-    suspend fun loadMoreCatalog(listTrack: ArrayList<Track>) {
+    suspend fun loadMoreCatalog(listTrack: ArrayList<Track>, isAddToQueue: Boolean = false) {
         Log.d("Queue", listTrack.map { it.title }.toString())
         _stateFlow.value = StateSource.STATE_INITIALIZING
         val catalogMetadata: ArrayList<Track> = arrayListOf()
@@ -1350,11 +1393,26 @@ class SimpleMediaServiceHandler(
                 thumbUrl = Regex("([wh])120").replace(thumbUrl, "$1544")
             }
             val artistName: String = track.artists.toListName().connectArtists()
-            val isSong = (track.thumbnails?.last()?.height != 0 && track.thumbnails?.last()?.height == track.thumbnails?.last()?.width
-                && track.thumbnails?.last()?.height != null) && (track.thumbnails.lastOrNull()?.url?.contains("hq720") == false
-                && track.thumbnails.lastOrNull()?.url?.contains("maxresdefault") == false)
+            val isSong =
+                (
+                    track.thumbnails?.last()?.height != 0 &&
+                        track.thumbnails?.last()?.height == track.thumbnails?.last()?.width &&
+                        track.thumbnails?.last()?.height != null
+                ) &&
+                    (
+                        track.thumbnails
+                            .lastOrNull()
+                            ?.url
+                            ?.contains("hq720") == false &&
+                            track.thumbnails
+                                .lastOrNull()
+                                ?.url
+                                ?.contains("maxresdefault") == false
+                    )
             if (track.artists.isNullOrEmpty()) {
-                mainRepository.getSongInfo(track.videoId).singleOrNull()
+                mainRepository
+                    .getSongInfo(track.videoId)
+                    .singleOrNull()
                     .let { songInfo ->
                         if (songInfo != null) {
                             catalogMetadata.add(
@@ -1369,36 +1427,39 @@ class SimpleMediaServiceHandler(
                                 ),
                             )
                             addMediaItemNotSet(
-                                MediaItem.Builder().setUri(track.videoId)
+                                MediaItem
+                                    .Builder()
+                                    .setUri(track.videoId)
                                     .setMediaId(track.videoId)
                                     .setCustomCacheKey(track.videoId)
                                     .setMediaMetadata(
-                                        MediaMetadata.Builder()
+                                        MediaMetadata
+                                            .Builder()
                                             .setTitle(track.title)
                                             .setArtist(songInfo.author)
                                             .setArtworkUri(thumbUrl.toUri())
                                             .setAlbumTitle(track.album?.name)
                                             .setDescription(if (isSong) "Song" else "Video")
                                             .build(),
-                                    )
-                                    .build(),
+                                    ).build(),
                             )
                         } else {
                             val mediaItem =
-                                MediaItem.Builder()
+                                MediaItem
+                                    .Builder()
                                     .setMediaId(track.videoId)
                                     .setUri(track.videoId)
                                     .setCustomCacheKey(track.videoId)
                                     .setMediaMetadata(
-                                        MediaMetadata.Builder()
+                                        MediaMetadata
+                                            .Builder()
                                             .setArtworkUri(thumbUrl.toUri())
                                             .setAlbumTitle(track.album?.name)
                                             .setTitle(track.title)
                                             .setArtist("Various Artists")
                                             .setDescription(if (isSong) "Song" else "Video")
                                             .build(),
-                                    )
-                                    .build()
+                                    ).build()
                             addMediaItemNotSet(mediaItem)
                             catalogMetadata.add(
                                 track.copy(
@@ -1409,19 +1470,21 @@ class SimpleMediaServiceHandler(
                     }
             } else {
                 addMediaItemNotSet(
-                    MediaItem.Builder().setUri(track.videoId)
+                    MediaItem
+                        .Builder()
+                        .setUri(track.videoId)
                         .setMediaId(track.videoId)
                         .setCustomCacheKey(track.videoId)
                         .setMediaMetadata(
-                            MediaMetadata.Builder()
+                            MediaMetadata
+                                .Builder()
                                 .setTitle(track.title)
                                 .setArtist(artistName)
                                 .setArtworkUri(thumbUrl.toUri())
                                 .setAlbumTitle(track.album?.name)
                                 .setDescription(if (isSong) "Song" else "Video")
                                 .build(),
-                        )
-                        .build(),
+                        ).build(),
                 )
                 catalogMetadata.add(track)
             }
@@ -1431,7 +1494,7 @@ class SimpleMediaServiceHandler(
             )
             Log.d("MusicSource", "updateCatalog: ${track.title}")
         }
-        if (!player.isPlaying) {
+        if (!player.isPlaying && isAddToQueue) {
             player.playWhenReady = false
         }
         _queueData.value = _queueData.value?.addTrackList(catalogMetadata)
@@ -1439,15 +1502,18 @@ class SimpleMediaServiceHandler(
     }
 
     @UnstableApi
-    suspend fun updateCatalog(downloaded: Int = 0, index: Int? = null): Boolean {
+    suspend fun updateCatalog(
+        downloaded: Int = 0,
+        index: Int? = null,
+    ): Boolean {
         _stateFlow.value = StateSource.STATE_INITIALIZING
         val tempQueue: ArrayList<Track> = arrayListOf()
         tempQueue.addAll(_queueData.value?.listTracks ?: arrayListOf())
         val chunkedList = tempQueue.chunked(100)
-        //Reset queue
+        // Reset queue
         _queueData.update {
             it?.copy(
-                listTracks = arrayListOf()
+                listTracks = arrayListOf(),
             )
         }
         val current = if (index != null) tempQueue[index] else null
@@ -1464,56 +1530,71 @@ class SimpleMediaServiceHandler(
                 if (thumbUrl.contains("w120")) {
                     thumbUrl = Regex("([wh])120").replace(thumbUrl, "$1544")
                 }
-                val isSong = (track.thumbnails?.last()?.height != 0 && track.thumbnails?.last()?.height == track.thumbnails?.last()?.width
-                    && track.thumbnails?.last()?.height != null) && (track.thumbnails.lastOrNull()?.url?.contains("hq720") == false
-                    && track.thumbnails.lastOrNull()?.url?.contains("maxresdefault") == false)
+                val isSong =
+                    (
+                        track.thumbnails?.last()?.height != 0 &&
+                            track.thumbnails?.last()?.height == track.thumbnails?.last()?.width &&
+                            track.thumbnails?.last()?.height != null
+                    ) &&
+                        (
+                            track.thumbnails
+                                .lastOrNull()
+                                ?.url
+                                ?.contains("hq720") == false &&
+                                track.thumbnails
+                                    .lastOrNull()
+                                    ?.url
+                                    ?.contains("maxresdefault") == false
+                        )
                 if (downloaded == 1) {
                     if (track.artists.isNullOrEmpty()) {
                         mainRepository.getSongInfo(track.videoId).singleOrNull().let { songInfo ->
                             if (songInfo != null) {
                                 val mediaItem =
-                                    MediaItem.Builder()
+                                    MediaItem
+                                        .Builder()
                                         .setMediaId(track.videoId)
                                         .setUri(track.videoId)
                                         .setCustomCacheKey(track.videoId)
                                         .setMediaMetadata(
-                                            MediaMetadata.Builder()
+                                            MediaMetadata
+                                                .Builder()
                                                 .setArtworkUri(thumbUrl.toUri())
                                                 .setAlbumTitle(track.album?.name)
                                                 .setTitle(track.title)
                                                 .setArtist(songInfo.author)
                                                 .setDescription(if (isSong) "Song" else "Video")
                                                 .build(),
-                                        )
-                                        .build()
+                                        ).build()
                                 addMediaItemNotSet(mediaItem)
                                 catalogMetadata.add(
                                     track.copy(
                                         artists =
-                                        listOf(
-                                            Artist(
-                                                songInfo.authorId,
-                                                songInfo.author ?: "",
+                                            listOf(
+                                                Artist(
+                                                    songInfo.authorId,
+                                                    songInfo.author ?: "",
+                                                ),
                                             ),
-                                        ),
                                     ),
                                 )
                             } else {
                                 val mediaItem =
-                                    MediaItem.Builder()
+                                    MediaItem
+                                        .Builder()
                                         .setMediaId(track.videoId)
                                         .setUri(track.videoId)
                                         .setCustomCacheKey(track.videoId)
                                         .setMediaMetadata(
-                                            MediaMetadata.Builder()
+                                            MediaMetadata
+                                                .Builder()
                                                 .setArtworkUri(thumbUrl.toUri())
                                                 .setAlbumTitle(track.album?.name)
                                                 .setTitle(track.title)
                                                 .setArtist("Various Artists")
                                                 .setDescription(if (isSong) "Song" else "Video")
                                                 .build(),
-                                        )
-                                        .build()
+                                        ).build()
                                 addMediaItemNotSet(mediaItem)
                                 catalogMetadata.add(
                                     track.copy(
@@ -1524,20 +1605,21 @@ class SimpleMediaServiceHandler(
                         }
                     } else {
                         val mediaItem =
-                            MediaItem.Builder()
+                            MediaItem
+                                .Builder()
                                 .setMediaId(track.videoId)
                                 .setUri(track.videoId)
                                 .setCustomCacheKey(track.videoId)
                                 .setMediaMetadata(
-                                    MediaMetadata.Builder()
+                                    MediaMetadata
+                                        .Builder()
                                         .setArtworkUri(thumbUrl.toUri())
                                         .setAlbumTitle(track.album?.name)
                                         .setTitle(track.title)
                                         .setArtist(track.artists.toListName().connectArtists())
                                         .setDescription(if (isSong) "Song" else "Video")
                                         .build(),
-                                )
-                                .build()
+                                ).build()
                         addMediaItemNotSet(mediaItem)
                         catalogMetadata.add(track)
                     }
@@ -1545,51 +1627,57 @@ class SimpleMediaServiceHandler(
                 } else {
                     val artistName: String = track.artists.toListName().connectArtists()
                     if (track.artists.isNullOrEmpty()) {
-                        mainRepository.getSongInfo(track.videoId).cancellable().first()
+                        mainRepository
+                            .getSongInfo(track.videoId)
+                            .cancellable()
+                            .first()
                             .let { songInfo ->
                                 if (songInfo != null) {
                                     catalogMetadata.add(
                                         track.copy(
                                             artists =
-                                            listOf(
-                                                Artist(
-                                                    songInfo.authorId,
-                                                    songInfo.author ?: "",
+                                                listOf(
+                                                    Artist(
+                                                        songInfo.authorId,
+                                                        songInfo.author ?: "",
+                                                    ),
                                                 ),
-                                            ),
                                         ),
                                     )
                                     addMediaItemNotSet(
-                                        MediaItem.Builder().setUri(track.videoId)
+                                        MediaItem
+                                            .Builder()
+                                            .setUri(track.videoId)
                                             .setMediaId(track.videoId)
                                             .setCustomCacheKey(track.videoId)
                                             .setMediaMetadata(
-                                                MediaMetadata.Builder()
+                                                MediaMetadata
+                                                    .Builder()
                                                     .setTitle(track.title)
                                                     .setArtist(songInfo.author)
                                                     .setArtworkUri(thumbUrl.toUri())
                                                     .setDescription(if (isSong) "Song" else "Video")
                                                     .setAlbumTitle(track.album?.name)
                                                     .build(),
-                                            )
-                                            .build(),
+                                            ).build(),
                                     )
                                 } else {
                                     val mediaItem =
-                                        MediaItem.Builder()
+                                        MediaItem
+                                            .Builder()
                                             .setMediaId(track.videoId)
                                             .setUri(track.videoId)
                                             .setCustomCacheKey(track.videoId)
                                             .setMediaMetadata(
-                                                MediaMetadata.Builder()
+                                                MediaMetadata
+                                                    .Builder()
                                                     .setArtworkUri(thumbUrl.toUri())
                                                     .setAlbumTitle(track.album?.name)
                                                     .setTitle(track.title)
                                                     .setDescription(if (isSong) "Song" else "Video")
                                                     .setArtist("Various Artists")
                                                     .build(),
-                                            )
-                                            .build()
+                                            ).build()
                                     addMediaItemNotSet(mediaItem)
                                     catalogMetadata.add(
                                         track.copy(
@@ -1600,19 +1688,21 @@ class SimpleMediaServiceHandler(
                             }
                     } else {
                         addMediaItemNotSet(
-                            MediaItem.Builder().setUri(track.videoId)
+                            MediaItem
+                                .Builder()
+                                .setUri(track.videoId)
                                 .setMediaId(track.videoId)
                                 .setCustomCacheKey(track.videoId)
                                 .setMediaMetadata(
-                                    MediaMetadata.Builder()
+                                    MediaMetadata
+                                        .Builder()
                                         .setTitle(track.title)
                                         .setArtist(artistName)
                                         .setArtworkUri(thumbUrl.toUri())
                                         .setAlbumTitle(track.album?.name)
                                         .setDescription(if (isSong) "Song" else "Video")
                                         .build(),
-                                )
-                                .build(),
+                                ).build(),
                         )
                         catalogMetadata.add(track)
                     }
@@ -1662,7 +1752,8 @@ class SimpleMediaServiceHandler(
         val mediaItem = player.currentMediaItem
         Log.w("Subtitle", "updateSubtitle: $url")
         val subtitle =
-            SubtitleConfiguration.Builder(url.plus("&fmt=ttml").toUri())
+            SubtitleConfiguration
+                .Builder(url.plus("&fmt=ttml").toUri())
                 .setId(mediaItem?.mediaId)
                 .setMimeType(MimeTypes.APPLICATION_TTML)
                 .setLanguage("en")
@@ -1674,7 +1765,15 @@ class SimpleMediaServiceHandler(
                 index,
                 new,
             )
-            println("update subtitle" + player.currentMediaItem?.localConfiguration?.subtitleConfigurations?.firstOrNull()?.uri.toString())
+            println(
+                "update subtitle" +
+                    player.currentMediaItem
+                        ?.localConfiguration
+                        ?.subtitleConfigurations
+                        ?.firstOrNull()
+                        ?.uri
+                        .toString(),
+            )
         }
     }
 
@@ -1688,9 +1787,22 @@ class SimpleMediaServiceHandler(
             thumbUrl = Regex("([wh])120").replace(thumbUrl, "$1544")
         }
         val artistName: String = track.artists.toListName().connectArtists()
-        val isSong = (track.thumbnails?.last()?.height != 0 && track.thumbnails?.last()?.height == track.thumbnails?.last()?.width
-            && track.thumbnails?.last()?.height != null) && (track.thumbnails.lastOrNull()?.url?.contains("hq720") == false
-            && track.thumbnails.lastOrNull()?.url?.contains("maxresdefault") == false)
+        val isSong =
+            (
+                track.thumbnails?.last()?.height != 0 &&
+                    track.thumbnails?.last()?.height == track.thumbnails?.last()?.width &&
+                    track.thumbnails?.last()?.height != null
+            ) &&
+                (
+                    track.thumbnails
+                        .lastOrNull()
+                        ?.url
+                        ?.contains("hq720") == false &&
+                        track.thumbnails
+                            .lastOrNull()
+                            ?.url
+                            ?.contains("maxresdefault") == false
+                )
         if ((player.currentMediaItemIndex + 1 in 0..(queueData.first()?.listTracks?.size ?: 0))) {
             if (track.artists.isNullOrEmpty()) {
                 mainRepository.getSongInfo(track.videoId).cancellable().first().let { songInfo ->
@@ -1708,37 +1820,40 @@ class SimpleMediaServiceHandler(
                             ),
                         )
                         addMediaItemNotSet(
-                            MediaItem.Builder().setUri(track.videoId)
+                            MediaItem
+                                .Builder()
+                                .setUri(track.videoId)
                                 .setMediaId(track.videoId)
                                 .setCustomCacheKey(track.videoId)
                                 .setMediaMetadata(
-                                    MediaMetadata.Builder()
+                                    MediaMetadata
+                                        .Builder()
                                         .setTitle(track.title)
                                         .setArtist(songInfo.author)
                                         .setArtworkUri(thumbUrl.toUri())
                                         .setAlbumTitle(track.album?.name)
                                         .setDescription(if (isSong) "Song" else "Video")
                                         .build(),
-                                )
-                                .build(),
+                                ).build(),
                             player.currentMediaItemIndex + 1,
                         )
                     } else {
                         val mediaItem =
-                            MediaItem.Builder()
+                            MediaItem
+                                .Builder()
                                 .setMediaId(track.videoId)
                                 .setUri(track.videoId)
                                 .setCustomCacheKey(track.videoId)
                                 .setMediaMetadata(
-                                    MediaMetadata.Builder()
+                                    MediaMetadata
+                                        .Builder()
                                         .setArtworkUri(thumbUrl.toUri())
                                         .setAlbumTitle(track.album?.name)
                                         .setTitle(track.title)
                                         .setArtist("Various Artists")
                                         .setDescription(if (isSong) "Song" else "Video")
                                         .build(),
-                                )
-                                .build()
+                                ).build()
                         addMediaItemNotSet(mediaItem, player.currentMediaItemIndex + 1)
                         catalogMetadata.add(
                             player.currentMediaItemIndex + 1,
@@ -1750,19 +1865,21 @@ class SimpleMediaServiceHandler(
                 }
             } else {
                 addMediaItemNotSet(
-                    MediaItem.Builder().setUri(track.videoId)
+                    MediaItem
+                        .Builder()
+                        .setUri(track.videoId)
                         .setMediaId(track.videoId)
                         .setCustomCacheKey(track.videoId)
                         .setMediaMetadata(
-                            MediaMetadata.Builder()
+                            MediaMetadata
+                                .Builder()
                                 .setTitle(track.title)
                                 .setArtist(artistName)
                                 .setArtworkUri(thumbUrl.toUri())
                                 .setAlbumTitle(track.album?.name)
                                 .setDescription(if (isSong) "Song" else "Video")
                                 .build(),
-                        )
-                        .build(),
+                        ).build(),
                     player.currentMediaItemIndex + 1,
                 )
                 catalogMetadata.add(player.currentMediaItemIndex + 1, track)
@@ -1772,9 +1889,10 @@ class SimpleMediaServiceHandler(
                 "updateCatalog: ${track.title}, ${catalogMetadata.size}",
             )
             Log.d("MusicSource", "updateCatalog: ${track.title}")
-            _queueData.value = queueData.first()?.copy(
-                listTracks = catalogMetadata,
-            )
+            _queueData.value =
+                queueData.first()?.copy(
+                    listTracks = catalogMetadata,
+                )
         }
         _stateFlow.value = StateSource.STATE_INITIALIZED
     }
@@ -1805,7 +1923,9 @@ sealed class PlayerEvent {
 
     data object Repeat : PlayerEvent()
 
-    data class UpdateProgress(val newProgress: Float) : PlayerEvent()
+    data class UpdateProgress(
+        val newProgress: Float,
+    ) : PlayerEvent()
 
     data object ToggleLike : PlayerEvent()
 }
@@ -1815,30 +1935,38 @@ sealed class SimpleMediaState {
 
     data object Ended : SimpleMediaState()
 
-    data class Ready(val duration: Long) : SimpleMediaState()
+    data class Ready(
+        val duration: Long,
+    ) : SimpleMediaState()
 
-    data class Loading(val bufferedPercentage: Int, val duration: Long) : SimpleMediaState()
+    data class Loading(
+        val bufferedPercentage: Int,
+        val duration: Long,
+    ) : SimpleMediaState()
 
-    data class Progress(val progress: Long) : SimpleMediaState()
+    data class Progress(
+        val progress: Long,
+    ) : SimpleMediaState()
 
-    data class Buffering(val position: Long) : SimpleMediaState()
+    data class Buffering(
+        val position: Long,
+    ) : SimpleMediaState()
 }
 
 data class NowPlayingTrackState(
     val mediaItem: MediaItem,
     val track: Track?,
-    val songEntity: SongEntity?
+    val songEntity: SongEntity?,
 ) {
-    fun isNotEmpty(): Boolean {
-        return this != initial()
-    }
+    fun isNotEmpty(): Boolean = this != initial()
 
     companion object {
-        fun initial(): NowPlayingTrackState {
-            return NowPlayingTrackState(
-                mediaItem = EMPTY, track = null, songEntity = null
+        fun initial(): NowPlayingTrackState =
+            NowPlayingTrackState(
+                mediaItem = EMPTY,
+                track = null,
+                songEntity = null,
             )
-        }
     }
 }
 
@@ -1855,7 +1983,7 @@ data class ControlState(
     val repeatState: RepeatState,
     val isLiked: Boolean,
     val isNextAvailable: Boolean,
-    val isPreviousAvailable: Boolean
+    val isPreviousAvailable: Boolean,
 )
 
 data class QueueData(
@@ -1864,21 +1992,24 @@ data class QueueData(
     val playlistId: String? = null,
     val playlistName: String? = null,
     val playlistType: PlaylistType? = null,
-    val continuation: String? = null
+    val continuation: String? = null,
 ) {
     fun addTrackList(tracks: Collection<Track>): QueueData {
         val temp = listTracks
         temp.addAll(tracks)
         return this.copy(
-            listTracks = temp
+            listTracks = temp,
         )
     }
 
-    fun addToIndex(track: Track, index: Int): QueueData {
+    fun addToIndex(
+        track: Track,
+        index: Int,
+    ): QueueData {
         val temp = listTracks
         temp.add(index, track)
         return this.copy(
-            listTracks = temp
+            listTracks = temp,
         )
     }
 
@@ -1886,30 +2017,28 @@ data class QueueData(
         val temp = listTracks
         temp.removeAt(0)
         return this.copy(
-            listTracks = temp
+            listTracks = temp,
         )
     }
+
     fun removeTrackWithIndex(index: Int): QueueData {
         val temp = listTracks
         temp.removeAt(index)
         return this.copy(
-            listTracks = temp
+            listTracks = temp,
         )
     }
-    fun setContinuation(continuation: String): QueueData {
-        return this.copy(
-            continuation = continuation
+
+    fun setContinuation(continuation: String): QueueData =
+        this.copy(
+            continuation = continuation,
         )
-    }
-    fun isLocalPlaylist(): Boolean {
-        return playlistType == PlaylistType.LOCAL_PLAYLIST
-    }
-    fun isRadio(): Boolean {
-        return playlistType == PlaylistType.RADIO
-    }
-    fun isPlaylist(): Boolean {
-        return playlistType == PlaylistType.PLAYLIST
-    }
+
+    fun isLocalPlaylist(): Boolean = playlistType == PlaylistType.LOCAL_PLAYLIST
+
+    fun isRadio(): Boolean = playlistType == PlaylistType.RADIO
+
+    fun isPlaylist(): Boolean = playlistType == PlaylistType.PLAYLIST
 }
 
 /**
@@ -1918,7 +2047,7 @@ data class QueueData(
  */
 
 data class SleepTimerState(
-    val isDone : Boolean,
+    val isDone: Boolean,
     val timeRemaining: Int,
 )
 
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/MainActivity.kt b/app/src/main/java/com/maxrave/simpmusic/ui/MainActivity.kt
index 4011e7fa..3f3c94de 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/MainActivity.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/MainActivity.kt
@@ -33,7 +33,6 @@ import androidx.lifecycle.lifecycleScope
 import androidx.lifecycle.repeatOnLifecycle
 import androidx.media3.common.MediaItem
 import androidx.media3.common.util.UnstableApi
-import androidx.media3.exoplayer.offline.DownloadService
 import androidx.navigation.fragment.findNavController
 import androidx.navigation.ui.setupWithNavController
 import com.google.android.material.dialog.MaterialAlertDialogBuilder
@@ -85,17 +84,11 @@ class MainActivity : AppCompatActivity() {
             ) {
                 if (service is SimpleMediaService.MusicBinder) {
                     Log.w("MainActivity", "onServiceConnected: ")
-
-                    viewModel.setHandler(service.service.simpleMediaServiceHandler)
-
-                    Log.w("MainActivity", "Now PLaying: ${viewModel.simpleMediaServiceHandler?.player?.currentMediaItem?.mediaMetadata?.title}")
-                    Log.w("TEST", viewModel.simpleMediaServiceHandler?.player.toString())
                 }
             }
 
             override fun onServiceDisconnected(name: ComponentName?) {
                 Log.w("MainActivity", "onServiceDisconnected: ")
-                viewModel.simpleMediaServiceHandler = null
             }
         }
 
@@ -365,7 +358,9 @@ class MainActivity : AppCompatActivity() {
                 R.id.playlistFragment, R.id.artistFragment, R.id.albumFragment -> {
                     val currentBackStack = nav.previousBackStackEntry?.destination?.id
                     when (currentBackStack) {
-                        R.id.bottom_navigation_item_library, R.id.downloadedFragment, R.id.mostPlayedFragment, R.id.followedFragment, R.id.favoriteFragment, R.id.localPlaylistFragment -> {
+                        R.id.bottom_navigation_item_library, R.id.downloadedFragment,
+                        R.id.mostPlayedFragment, R.id.followedFragment,
+                        R.id.favoriteFragment, R.id.localPlaylistFragment -> {
                             binding.bottomNavigationView.menu
                                 .findItem(
                                     R.id.bottom_navigation_item_library,
@@ -726,24 +721,7 @@ class MainActivity : AppCompatActivity() {
         }
     }
 
-    private fun stopService() {
-        if (viewModel.recreateActivity.value != true) {
-            viewModel.isServiceRunning.value = false
-            viewModel.simpleMediaServiceHandler?.mayBeSaveRecentSong()
-            viewModel.simpleMediaServiceHandler?.mayBeSavePlaybackState()
-            viewModel.simpleMediaServiceHandler?.release()
-            viewModel.simpleMediaServiceHandler = null
-            unbindService(serviceConnection)
-            Log.d("Service", "Service stopped")
-            if (this.isMyServiceRunning(DownloadService::class.java)) {
-                stopService(Intent(this, DownloadService::class.java))
-                viewModel.changeAllDownloadingToError()
-                Log.d("Service", "DownloadService stopped")
-            }
-        }
-    }
-
-//    override fun onNowPlayingSongChange() {
+    //    override fun onNowPlayingSongChange() {
 //        viewModel.metadata.observe(this) {
 //            when(it){
 //                is Resource.Success -> {
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/component/AdapterItems.kt b/app/src/main/java/com/maxrave/simpmusic/ui/component/AdapterItems.kt
index 6fd65f9e..867a774e 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/component/AdapterItems.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/component/AdapterItems.kt
@@ -40,14 +40,13 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
@@ -56,11 +55,10 @@ import androidx.compose.ui.unit.dp
 import androidx.media3.common.util.UnstableApi
 import androidx.navigation.NavController
 import coil.compose.AsyncImage
+import coil.request.CachePolicy
 import coil.request.ImageRequest
-import coil.request.SuccessResult
 import com.maxrave.simpmusic.R
 import com.maxrave.simpmusic.common.Config
-import com.maxrave.simpmusic.data.db.entities.PairSongLocalPlaylist
 import com.maxrave.simpmusic.data.model.browse.album.Track
 import com.maxrave.simpmusic.data.model.explore.mood.genre.ItemsPlaylist
 import com.maxrave.simpmusic.data.model.explore.mood.moodmoments.Item
@@ -71,7 +69,6 @@ import com.maxrave.simpmusic.data.model.home.chart.ItemVideo
 import com.maxrave.simpmusic.extension.connectArtists
 import com.maxrave.simpmusic.extension.generateRandomColor
 import com.maxrave.simpmusic.extension.navigateSafe
-import com.maxrave.simpmusic.extension.removeConflicts
 import com.maxrave.simpmusic.extension.toListName
 import com.maxrave.simpmusic.extension.toTrack
 import com.maxrave.simpmusic.service.PlaylistType
@@ -79,13 +76,11 @@ import com.maxrave.simpmusic.service.QueueData
 import com.maxrave.simpmusic.ui.theme.typo
 import com.maxrave.simpmusic.viewModel.HomeViewModel
 import com.maxrave.simpmusic.viewModel.SharedViewModel
-import com.maxrave.simpmusic.viewModel.UIEvent
 import com.skydoves.landscapist.ImageOptions
 import com.skydoves.landscapist.animation.crossfade.CrossfadePlugin
 import com.skydoves.landscapist.coil.CoilImage
 import com.skydoves.landscapist.components.rememberImageComponent
 import com.skydoves.landscapist.placeholder.placeholder.PlaceholderPlugin
-import java.time.LocalDateTime
 
 @OptIn(ExperimentalFoundationApi::class)
 @UnstableApi
@@ -96,71 +91,19 @@ fun HomeItem(
     navController: NavController,
     data: HomeItem
 ) {
-    val coroutineScope = rememberCoroutineScope()
     var bottomSheetShow by remember { mutableStateOf(false) }
 
     val lazyListState = rememberLazyListState()
     val snapperFlingBehavior = rememberSnapFlingBehavior(SnapLayoutInfoProvider(lazyListState = lazyListState))
 
+    val songEntity by homeViewModel.songEntity.collectAsState()
+
     if (bottomSheetShow) {
         NowPlayingBottomSheet(
             isBottomSheetVisible = bottomSheetShow,
             onDismiss = { bottomSheetShow = false },
-            sharedViewModel = sharedViewModel,
-            songEntity = homeViewModel.songEntity.collectAsState(),
+            songEntity = songEntity,
             navController = navController,
-            onToggleLike = { checked ->
-                val track = homeViewModel.songEntity.value
-                if (track != null && track.videoId != sharedViewModel.nowPlayingState.value?.mediaItem?.mediaId) {
-                    if (checked) {
-                        homeViewModel.updateLikeStatus(track.videoId, true)
-                    } else {
-                        homeViewModel.updateLikeStatus(track.videoId, false)
-                    }
-                }
-                else if (track != null && track.videoId == sharedViewModel.nowPlayingState.value?.mediaItem?.mediaId) {
-                    sharedViewModel.onUIEvent(UIEvent.ToggleLike)
-
-                }
-            },
-            getLocalPlaylist = {
-                homeViewModel.getAllLocalPlaylist()
-            },
-            onAddToLocalPlaylist = { playlist ->
-                val song = homeViewModel.songEntity.value ?: return@NowPlayingBottomSheet
-                val tempTrack = ArrayList<String>()
-                if (playlist.tracks != null) {
-                    tempTrack.addAll(playlist.tracks)
-                }
-                if (!tempTrack.contains(
-                        song.videoId,
-                    ) &&
-                    playlist.syncedWithYouTubePlaylist == 1 &&
-                    playlist.youtubePlaylistId != null
-                ) {
-                    sharedViewModel.addToYouTubePlaylist(
-                        playlist.id,
-                        playlist.youtubePlaylistId,
-                        song.videoId,
-                    )
-                }
-                if (!tempTrack.contains(song.videoId)) {
-                    sharedViewModel.insertPairSongLocalPlaylist(
-                        PairSongLocalPlaylist(
-                            playlistId = playlist.id,
-                            songId = song.videoId,
-                            position = playlist.tracks?.size ?: 0,
-                            inPlaylist = LocalDateTime.now(),
-                        ),
-                    )
-                    tempTrack.add(song.videoId)
-                }
-                sharedViewModel.updateLocalPlaylistTracks(
-                    tempTrack.removeConflicts(),
-                    playlist.id,
-                )
-            },
-            listLocalPlaylist = homeViewModel.localPlaylist.collectAsState(),
         )
     }
 
@@ -268,7 +211,7 @@ fun HomeItem(
                     } else if (temp.thumbnails.firstOrNull()?.width != temp.thumbnails.firstOrNull()?.height) {
                         HomeItemVideo(onClick = {
                             val firstQueue: Track = temp.toTrack()
-                            sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                            homeViewModel.setQueueData(
                                 QueueData(
                                     listTracks = arrayListOf(firstQueue),
                                     firstPlayedTrack = firstQueue,
@@ -278,12 +221,11 @@ fun HomeItem(
                                     continuation = null
                                 )
                             )
-                            sharedViewModel.loadMediaItemFromTrack(
+                            homeViewModel.loadMediaItem(
                                 firstQueue,
                                 Config.SONG_CLICK
                             )
                         }, onLongClick = {
-                            homeViewModel.getSongEntity(temp.toTrack())
                             bottomSheetShow = true
                         },
                             data = temp
@@ -292,7 +234,7 @@ fun HomeItem(
                         HomeItemSong(onClick = {
 
                             val firstQueue: Track = temp.toTrack()
-                            sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                            homeViewModel.setQueueData(
                                 QueueData(
                                     listTracks = arrayListOf(firstQueue),
                                     firstPlayedTrack = firstQueue,
@@ -302,12 +244,11 @@ fun HomeItem(
                                     continuation = null
                                 )
                             )
-                            sharedViewModel.loadMediaItemFromTrack(
+                            homeViewModel.loadMediaItem(
                                 firstQueue,
                                 Config.SONG_CLICK
                             )
                         }, onLongClick = {
-                            homeViewModel.getSongEntity(temp.toTrack())
                             bottomSheetShow = true
                         },
                             data = temp
@@ -399,7 +340,6 @@ fun HomeItemContentPlaylist(
     }
 }
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun QuickPicksItem(
     onClick: () -> Unit,
@@ -407,11 +347,10 @@ fun QuickPicksItem(
     data: Content
 ) {
     val tag = "QuickPicksItem"
-    val configuration = LocalConfiguration.current
     Box(
         modifier = Modifier
             .wrapContentHeight()
-            .width(widthDp)
+            .width(widthDp - 30.dp)
             .focusable(true)
             .clickable {
                 onClick()
@@ -419,43 +358,25 @@ fun QuickPicksItem(
     ) {
         Row(
             modifier = Modifier
-                .width(configuration.screenWidthDp.dp)
+                .fillMaxWidth()
                 .padding(10.dp)
         ) {
-            CoilImage(
-                imageModel = {
-                    data.thumbnails.lastOrNull()?.url
-                }, // loading a network image or local resource using an URL.
-                imageOptions = ImageOptions(
-                    contentScale = ContentScale.Crop,
-                    alignment = Alignment.Center,
-                ),
-                requestListener = {
-                    object : ImageRequest.Listener {
-                        override fun onSuccess(request: ImageRequest, result: SuccessResult) {
-                            super.onSuccess(request, result)
-                            Log.w(tag, "onSuccess: ${data.title}")
-                        }
-
-                        override fun onStart(request: ImageRequest) {
-                            super.onStart(request)
-                            Log.w(tag, "onStart: ${data.thumbnails.lastOrNull()?.url}")
-                        }
-                    }
-                },
-                component = rememberImageComponent {
-                    +CrossfadePlugin(
-                        duration = 550
-                    )
-                    +PlaceholderPlugin.Loading(painterResource(id = R.drawable.holder))
-                    +PlaceholderPlugin.Failure(painterResource(id = R.drawable.holder))
-                },
+            AsyncImage(
+                model = ImageRequest.Builder(LocalContext.current)
+                    .data(data.thumbnails.lastOrNull()?.url)
+                    .crossfade(550)
+                    .diskCacheKey(data.thumbnails.lastOrNull()?.url)
+                    .diskCachePolicy(CachePolicy.ENABLED)
+                    .build(),
+                placeholder = painterResource(R.drawable.holder),
+                contentDescription = stringResource(R.string.description),
+                contentScale = ContentScale.Crop,
                 modifier = Modifier
                     .align(Alignment.CenterVertically)
                     .size(50.dp)
                     .clip(
                         RoundedCornerShape(10)
-                    )
+                    ),
             )
             Column(
                 Modifier
@@ -1085,7 +1006,11 @@ fun MoodAndGenresContentItem(data: Any?, navController: NavController) {
                     navController.navigateSafe(R.id.action_global_playlistFragment, Bundle().apply {
                         putString(
                             "id",
-                            if (item is com.maxrave.simpmusic.data.model.explore.mood.genre.Content) item.playlistBrowseId else (item as com.maxrave.simpmusic.data.model.explore.mood.moodmoments.Content).playlistBrowseId
+                            if (item is com.maxrave.simpmusic.data.model.explore.mood.genre.Content) {
+                                item.playlistBrowseId
+                            } else {
+                                (item as com.maxrave.simpmusic.data.model.explore.mood.moodmoments.Content).playlistBrowseId
+                            }
                         )
                     })
                 }, data = item)
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/component/DynamicHeaders.kt b/app/src/main/java/com/maxrave/simpmusic/ui/component/DynamicHeaders.kt
deleted file mode 100644
index d48376c9..00000000
--- a/app/src/main/java/com/maxrave/simpmusic/ui/component/DynamicHeaders.kt
+++ /dev/null
@@ -1,320 +0,0 @@
-package com.maxrave.simpmusic.ui.component
-
-import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.foundation.layout.wrapContentWidth
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.collectAsState
-import androidx.compose.runtime.derivedStateOf
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
-import androidx.media3.common.util.UnstableApi
-import com.maxrave.simpmusic.R
-import com.maxrave.simpmusic.ui.theme.typo
-import com.maxrave.simpmusic.viewModel.LocalPlaylistViewModel
-import com.maxrave.simpmusic.viewModel.SharedViewModel
-import com.skydoves.landscapist.ImageOptions
-import com.skydoves.landscapist.animation.crossfade.CrossfadePlugin
-import com.skydoves.landscapist.coil.CoilImage
-import com.skydoves.landscapist.components.rememberImageComponent
-import java.time.format.DateTimeFormatter
-
-@androidx.annotation.OptIn(UnstableApi::class)
-@ExperimentalFoundationApi
-@Composable
-fun LocalPlaylistHeader(
-    id: Long,
-    sharedViewModel: SharedViewModel,
-    viewModel: LocalPlaylistViewModel,
-) {
-    val lazyState = rememberLazyListState()
-    val firstItemVisible by remember {
-        derivedStateOf {
-            lazyState.firstVisibleItemIndex == 0
-        }
-    }
-    var shouldHideTopBar by remember { mutableStateOf(false) }
-//    val hazeState = remember { HazeState() }
-    val localPlaylist by viewModel.localPlaylist.collectAsState(initial = null)
-    val listTrack by viewModel.listTrack.collectAsState(initial = null)
-    LaunchedEffect(key1 = id) {
-        viewModel.getLocalPlaylist(id)
-    }
-    LaunchedEffect(key1 = localPlaylist) {
-    }
-    LaunchedEffect(key1 = firstItemVisible) {
-        shouldHideTopBar = !firstItemVisible
-    }
-    Box {
-//        AnimatedVisibility(
-//            visible = shouldHideTopBar,
-//            enter = fadeIn() + slideInVertically(),
-//            exit = fadeOut() + slideOutVertically(),
-//            modifier = Modifier.wrapContentHeight().fillMaxWidth().align(Alignment.TopCenter),
-//        ) {
-//            TopAppBar(
-//                title = {
-//                    Text(
-//                        text = localPlaylist?.title ?: stringResource(id = R.string.playlist),
-//                    )
-//                },
-//                navigationIcon = {
-//                    RippleIconButton(
-//                        R.drawable.baseline_arrow_back_ios_new_24,
-//                        Modifier
-//                            .size(32.dp),
-//                    ) {
-//                    }
-//                },
-//            )
-//        }
-        LazyColumn(
-            modifier = Modifier.fillMaxWidth().align(Alignment.TopCenter),
-            state = lazyState,
-        ) {
-            item {
-                Box(
-                    modifier =
-                        Modifier
-                            .fillMaxWidth()
-                            .wrapContentHeight()
-                            .background(Color.Transparent),
-                ) {
-                    Box(
-                        modifier =
-                            Modifier
-                                .fillMaxWidth(),
-                    ) {
-                        CoilImage(
-                            imageModel = {
-                                localPlaylist?.thumbnail
-                            },
-                            imageOptions =
-                                ImageOptions(
-                                    contentScale = ContentScale.FillWidth,
-                                    alignment = Alignment.Center,
-                                ),
-                            previewPlaceholder = painterResource(id = R.drawable.holder),
-                            component =
-                                rememberImageComponent {
-                                    CrossfadePlugin(
-                                        duration = 550,
-                                    )
-                                },
-                            modifier =
-                                Modifier
-                                    .wrapContentHeight()
-                                    .fillMaxWidth()
-                                    .clip(
-                                        RoundedCornerShape(8.dp),
-                                    ),
-                        )
-                        Box(
-                            modifier =
-                                Modifier
-                                    .fillMaxWidth()
-                                    .height(180.dp)
-                                    .align(Alignment.BottomCenter)
-                                    .background(
-                                        brush =
-                                            Brush.verticalGradient(
-                                                listOf(
-                                                    Color.Transparent,
-                                                    Color(0x75000000),
-                                                    Color.Black,
-                                                ),
-                                            ),
-                                    ),
-                        )
-                    }
-                    Column(
-                        Modifier
-                            .background(Color.Transparent),
-//                            .hazeChild(hazeState, style = HazeMaterials.thin()),
-                    ) {
-                        Row(
-                            modifier =
-                                Modifier
-                                    .wrapContentWidth()
-                                    .padding(16.dp),
-                        ) {
-                            RippleIconButton(
-                                resId = R.drawable.baseline_arrow_back_ios_new_24,
-                            ) {
-                                TODO("Navigate back")
-                            }
-                        }
-                        Column(
-                            horizontalAlignment = Alignment.Start,
-                        ) {
-                            CoilImage(
-                                imageModel = {
-                                    localPlaylist?.thumbnail
-                                },
-                                imageOptions =
-                                    ImageOptions(
-                                        contentScale = ContentScale.FillHeight,
-                                        alignment = Alignment.Center,
-                                    ),
-                                previewPlaceholder = painterResource(id = R.drawable.holder),
-                                component =
-                                    rememberImageComponent {
-                                        CrossfadePlugin(
-                                            duration = 550,
-                                        )
-                                    },
-                                modifier =
-                                    Modifier
-                                        .height(250.dp)
-                                        .wrapContentWidth()
-                                        .align(Alignment.CenterHorizontally)
-                                        .clip(
-                                            RoundedCornerShape(8.dp),
-                                        ),
-                            )
-                            Box(
-                                modifier =
-                                    Modifier
-                                        .fillMaxWidth()
-                                        .wrapContentHeight(),
-                            ) {
-                                Column(Modifier.padding(horizontal = 32.dp)) {
-                                    Spacer(modifier = Modifier.size(25.dp))
-                                    Text(
-                                        text = localPlaylist?.title ?: "",
-                                        style = typo.titleLarge,
-                                        color = Color.White,
-                                    )
-                                    Column(
-                                        modifier = Modifier.padding(vertical = 8.dp),
-                                    ) {
-                                        Text(
-                                            text = stringResource(id = R.string.your_playlist),
-                                            style = typo.bodyLarge,
-                                            color = Color.White,
-                                        )
-                                        Spacer(modifier = Modifier.height(8.dp))
-                                        Text(
-                                            text =
-                                                stringResource(
-                                                    id = R.string.created_at,
-                                                    localPlaylist?.inLibrary?.format(
-                                                        DateTimeFormatter.ofPattern(
-                                                            "kk:mm - dd MMM uuuu",
-                                                        ),
-                                                    ) ?: "",
-                                                ),
-                                            style = typo.bodyLarge,
-                                            color = Color(0xC4FFFFFF),
-                                        )
-                                    }
-                                    Row(
-                                        modifier =
-                                            Modifier.fillMaxWidth(),
-                                        verticalAlignment = Alignment.CenterVertically,
-                                    ) {
-                                        RippleIconButton(
-                                            resId = R.drawable.baseline_play_circle_24,
-                                            fillMaxSize = true,
-                                            modifier = Modifier.size(36.dp),
-                                        ) {
-                                        }
-                                        Spacer(modifier = Modifier.size(5.dp))
-                                        HeartCheckBox(
-                                            checked = false,
-                                            onStateChange = { },
-                                            size = 36,
-                                        )
-                                        Spacer(modifier = Modifier.size(5.dp))
-                                        RippleIconButton(
-                                            fillMaxSize = true,
-                                            resId = R.drawable.download_button,
-                                            modifier = Modifier.size(36.dp),
-                                        ) {
-                                        }
-                                        Spacer(Modifier.weight(1f))
-                                        RippleIconButton(
-                                            modifier =
-                                                Modifier.size(36.dp),
-                                            resId = R.drawable.baseline_shuffle_24,
-                                            fillMaxSize = true,
-                                        ) {
-                                        }
-                                        Spacer(Modifier.size(5.dp))
-                                        RippleIconButton(
-                                            modifier =
-                                                Modifier.size(36.dp),
-                                            resId = R.drawable.baseline_more_vert_24,
-                                            fillMaxSize = true,
-                                        ) {
-                                        }
-                                    }
-                                    // Hide in local playlist
-                                    //                                ExpandableText(
-                                    //                                    modifier = Modifier.padding(vertical = 8.dp),
-                                    //                                    text = stringResource(id = R.string.demo_description),
-                                    //                                    fontSize = typo.bodyLarge.fontSize,
-                                    //                                    showMoreStyle = SpanStyle(Color.Gray),
-                                    //                                    showLessStyle = SpanStyle(Color.Gray),
-                                    //                                    style = TextStyle(
-                                    //                                        color = Color(0xC4FFFFFF)
-                                    //                                    )
-                                    //                                )
-                                    Text(
-                                        text =
-                                            stringResource(
-                                                id = R.string.album_length,
-                                                (localPlaylist?.tracks?.size ?: 0).toString(),
-                                                "",
-                                            ),
-                                        color = Color.White,
-                                        modifier = Modifier.padding(vertical = 8.dp),
-                                    )
-                                    //
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-            items(listTrack ?: listOf()) { item ->
-                Box(modifier = Modifier.padding(horizontal = 16.dp)) {
-                    PlaylistItems(
-                        isPlaying = false,
-                        songEntity = item,
-                        modifier = Modifier.animateItemPlacement()
-                    )
-                }
-            }
-            item {
-                EndOfPage()
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/component/LoadingDialog.kt b/app/src/main/java/com/maxrave/simpmusic/ui/component/LoadingDialog.kt
new file mode 100644
index 00000000..bd1c98e7
--- /dev/null
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/component/LoadingDialog.kt
@@ -0,0 +1,77 @@
+package com.maxrave.simpmusic.ui.component
+
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material3.AlertDialogDefaults
+import androidx.compose.material3.BasicAlertDialog
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.maxrave.simpmusic.R
+import com.maxrave.simpmusic.ui.theme.typo
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun LoadingDialog(
+    loading: Boolean,
+    message: String,
+) {
+    val context = LocalContext.current
+    if (loading) {
+        Box(modifier = Modifier.fillMaxSize()) {
+            BasicAlertDialog(
+                onDismissRequest = { },
+                modifier = Modifier.wrapContentSize(),
+            ) {
+                Surface(modifier = Modifier.fillMaxWidth(),
+                    shape = MaterialTheme.shapes.large,
+                    color = Color(0xFF242424),
+                    tonalElevation = AlertDialogDefaults.TonalElevation,
+                    shadowElevation = 1.dp,
+                ) {
+                    Column(
+                        Modifier.padding(
+                            horizontal = 20.dp,
+                            vertical = 20.dp
+                        )
+                    ) {
+                        Text(
+                            context.getString(R.string.loading),
+                            style = typo.headlineMedium
+                        )
+                        Row(Modifier.padding(top = 20.dp), verticalAlignment = Alignment.CenterVertically) {
+                            CircularProgressIndicator()
+                            Spacer(Modifier.size(15.dp))
+                            Text(text = message)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview(
+    showSystemUi = true, uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL,
+)
+@Composable
+fun LoadingDialogPreview() {
+    LoadingDialog(loading = true, message = "Loading")
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/component/LyricsView.kt b/app/src/main/java/com/maxrave/simpmusic/ui/component/LyricsView.kt
index 79aa95f4..e58f866c 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/component/LyricsView.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/component/LyricsView.kt
@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -44,7 +45,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.LinearProgressIndicator
-import androidx.compose.material3.LocalMinimumInteractiveComponentEnforcement
+import androidx.compose.material3.LocalMinimumInteractiveComponentSize
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
@@ -70,12 +71,14 @@ import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.rememberTextMeasurer
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import androidx.media3.common.util.UnstableApi
@@ -97,16 +100,16 @@ import com.moriatsushi.insetsx.systemBars
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.launch
 
-
 @Composable
 fun LyricsView(
     lyricsData: NowPlayingScreenData.LyricsData,
     timeLine: StateFlow<TimeLine>,
     onLineClick: (Float) -> Unit,
 ) {
+    @Suppress("ktlint:standard:property-naming")
     val TAG = "LyricsView"
 
-    val textMeasurer = rememberTextMeasurer()
+    rememberTextMeasurer()
     val localDensity = LocalDensity.current
 
     var columnHeightDp by remember {
@@ -142,19 +145,19 @@ fun LyricsView(
                     currentLineIndex = i
                 }
             }
-            if (!lines.isNullOrEmpty() && (
+            if (!lines.isNullOrEmpty() &&
+                (
                     current.current in (
                         0..(
                             lines.getOrNull(0)?.startTimeMs
                                 ?: "0"
-                            ).toLong()
-                        )
+                        ).toLong()
                     )
+                )
             ) {
                 currentLineIndex = -1
             }
-        }
-        else {
+        } else {
             currentLineIndex = -1
         }
     }
@@ -163,37 +166,43 @@ fun LyricsView(
             val boxEnd = listState.layoutInfo.viewportEndOffset
             val boxStart = listState.layoutInfo.viewportStartOffset
             val viewPort = boxEnd - boxStart
-            val offset = viewPort/2 - currentLineHeight/2
+            val offset = viewPort / 2 - currentLineHeight / 2
             Log.w(TAG, "Offset: $offset")
             listState.animateScrollAndCentralizeItem(
                 index = currentLineIndex,
-                this
+                this,
             )
         }
     }
 
     LazyColumn(
         state = listState,
-        modifier = Modifier
-            .onGloballyPositioned { coordinates ->
-                columnHeightDp = with(localDensity) { coordinates.size.height.toDp() }
-                columnWidthDp = with(localDensity) { coordinates.size.width.toDp() }
-            }
-            .fillMaxSize()
+        modifier =
+            Modifier
+                .onGloballyPositioned { coordinates ->
+                    columnHeightDp = with(localDensity) { coordinates.size.height.toDp() }
+                    columnWidthDp = with(localDensity) { coordinates.size.width.toDp() }
+                }.fillMaxSize(),
     ) {
         items(lyricsData.lyrics.lines?.size ?: 0) { index ->
             val line = lyricsData.lyrics.lines?.getOrNull(index)
-            val translatedWords = lyricsData.translatedLyrics?.lines?.getOrNull(index)?.words
+            val translatedWords =
+                lyricsData.translatedLyrics
+                    ?.lines
+                    ?.getOrNull(index)
+                    ?.words
             line?.words?.let {
                 LyricsLineItem(
-                    originalWords = it, translatedWords = translatedWords, isBold = index <= currentLineIndex,
-                    modifier = Modifier
-                        .clickable {
-                            onLineClick(line.startTimeMs.toFloat() * 100 / timeLine.value.total)
-                        }
-                        .onGloballyPositioned { c ->
-                            currentLineHeight = c.size.height
-                        }
+                    originalWords = it,
+                    translatedWords = translatedWords,
+                    isBold = index <= currentLineIndex,
+                    modifier =
+                        Modifier
+                            .clickable {
+                                onLineClick(line.startTimeMs.toFloat() * 100 / timeLine.value.total)
+                            }.onGloballyPositioned { c ->
+                                currentLineHeight = c.size.height
+                            },
                 )
             }
         }
@@ -205,12 +214,12 @@ fun LyricsLineItem(
     originalWords: String,
     translatedWords: String?,
     isBold: Boolean,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     Crossfade(targetState = isBold) {
         if (it) {
             Column(
-                modifier = modifier
+                modifier = modifier,
             ) {
                 Spacer(modifier = Modifier.height(4.dp))
                 Text(text = originalWords, style = typo.headlineMedium, color = Color.White)
@@ -223,7 +232,7 @@ fun LyricsLineItem(
     }
     if (!isBold) {
         Column(
-            modifier = modifier
+            modifier = modifier,
         ) {
             Spacer(modifier = Modifier.height(4.dp))
             Text(text = originalWords, style = typo.bodyLarge, color = Color.LightGray)
@@ -244,15 +253,16 @@ fun FullscreenLyricsSheet(
     sharedViewModel: SharedViewModel,
     navController: NavController,
     color: Color = Color(0xFF242424),
-    onDismiss: () -> Unit
+    onDismiss: () -> Unit,
 ) {
     val screenDataState by sharedViewModel.nowPlayingScreenData.collectAsState()
     val timelineState by sharedViewModel.timeline.collectAsState()
     val controllerState by sharedViewModel.controllerState.collectAsState()
 
-    val sheetState = rememberModalBottomSheetState(
-        skipPartiallyExpanded = true,
-    )
+    val sheetState =
+        rememberModalBottomSheetState(
+            skipPartiallyExpanded = true,
+        )
     val coroutineScope = rememberCoroutineScope()
     val localDensity = LocalDensity.current
     val windowInsets = WindowInsets.systemBars
@@ -261,11 +271,12 @@ fun FullscreenLyricsSheet(
         mutableFloatStateOf(0f)
     }
     LaunchedEffect(key1 = timelineState) {
-        sliderValue = if (timelineState.total > 0L) {
-            timelineState.current.toFloat() * 100 / timelineState.total.toFloat()
-        } else {
-            0f
-        }
+        sliderValue =
+            if (timelineState.total > 0L) {
+                timelineState.current.toFloat() * 100 / timelineState.total.toFloat()
+            } else {
+                0f
+            }
     }
 
     if (screenDataState.lyricsData != null) {
@@ -282,42 +293,46 @@ fun FullscreenLyricsSheet(
         scrimColor = Color.Black.copy(alpha = .5f),
         sheetState = sheetState,
         modifier = Modifier.fillMaxHeight(),
-        windowInsets = WindowInsets(0,0,0,0),
+        contentWindowInsets = { WindowInsets(0, 0, 0, 0) },
         shape = RectangleShape,
     ) {
         Card(
             modifier =
-            Modifier
-                .fillMaxWidth()
-                .fillMaxHeight(),
+                Modifier
+                    .fillMaxWidth()
+                    .fillMaxHeight(),
             shape = RectangleShape,
             colors = CardDefaults.cardColors().copy(containerColor = color),
         ) {
             Column(
-                modifier = Modifier.padding(
-                    bottom = with(localDensity) {
-                        windowInsets.getBottom(localDensity).toDp()
-                    },
-                    top = with(localDensity) {
-                        windowInsets.getTop(localDensity).toDp()
-                    }
-                )
-            ){
+                modifier =
+                    Modifier.padding(
+                        bottom =
+                            with(localDensity) {
+                                windowInsets.getBottom(localDensity).toDp()
+                            },
+                        top =
+                            with(localDensity) {
+                                windowInsets.getTop(localDensity).toDp()
+                            },
+                    ),
+            ) {
                 TopAppBar(
                     windowInsets = WindowInsets(0, 0, 0, 0),
-                    colors = TopAppBarDefaults.topAppBarColors().copy(
-                        containerColor = Color.Transparent
-                    ),
+                    colors =
+                        TopAppBarDefaults.topAppBarColors().copy(
+                            containerColor = Color.Transparent,
+                        ),
                     title = {
                         Column(
                             modifier = Modifier.fillMaxWidth(),
                             horizontalAlignment = Alignment.CenterHorizontally,
-                            verticalArrangement = Arrangement.Center
+                            verticalArrangement = Arrangement.Center,
                         ) {
                             Text(
                                 text = stringResource(id = R.string.now_playing_upper),
                                 style = typo.bodyMedium,
-                                color = Color.White
+                                color = Color.White,
                             )
                             Text(
                                 text = screenDataState.nowPlayingTitle,
@@ -325,11 +340,12 @@ fun FullscreenLyricsSheet(
                                 color = Color.White,
                                 textAlign = TextAlign.Center,
                                 maxLines = 1,
-                                modifier = Modifier
-                                    .fillMaxWidth()
-                                    .wrapContentHeight(align = Alignment.CenterVertically)
-                                    .basicMarquee(animationMode = MarqueeAnimationMode.Immediately)
-                                    .focusable()
+                                modifier =
+                                    Modifier
+                                        .fillMaxWidth()
+                                        .wrapContentHeight(align = Alignment.CenterVertically)
+                                        .basicMarquee(animationMode = MarqueeAnimationMode.Immediately)
+                                        .focusable(),
                             )
                         }
                     },
@@ -343,7 +359,7 @@ fun FullscreenLyricsSheet(
                             Icon(
                                 painter = painterResource(id = R.drawable.baseline_keyboard_arrow_down_24),
                                 contentDescription = "",
-                                tint = Color.White
+                                tint = Color.White,
                             )
                         }
                     },
@@ -352,7 +368,7 @@ fun FullscreenLyricsSheet(
                             Icon(
                                 painter = painterResource(id = R.drawable.baseline_more_vert_24),
                                 contentDescription = "",
-                                tint = Color.White
+                                tint = Color.White,
                             )
                         }
                     },
@@ -360,14 +376,14 @@ fun FullscreenLyricsSheet(
 
                 Spacer(modifier = Modifier.height(20.dp))
 
-
-
                 Crossfade(
-                    targetState = screenDataState.lyricsData != null, modifier = Modifier
-                        .weight(1f)
-                        .fillMaxHeight()
-                        .fillMaxWidth()
-                        .padding(horizontal = 50.dp)
+                    targetState = screenDataState.lyricsData != null,
+                    modifier =
+                        Modifier
+                            .weight(1f)
+                            .fillMaxHeight()
+                            .fillMaxWidth()
+                            .padding(horizontal = 50.dp),
                 ) {
                     if (it) {
                         screenDataState.lyricsData?.let { lyrics ->
@@ -381,176 +397,220 @@ fun FullscreenLyricsSheet(
                             style = typo.bodyMedium,
                             color = Color.White,
                             modifier = Modifier.fillMaxSize(),
-                            textAlign = TextAlign.Center
+                            textAlign = TextAlign.Center,
                         )
                     }
                 }
 
                 Spacer(modifier = Modifier.height(20.dp))
                 Box {
-                    Column()
-                    {
-                        //Real Slider
+                    Column {
+                        // Real Slider
                         Box(
                             Modifier
                                 .padding(
-                                    top = 15.dp
-                                )
-                                .padding(horizontal = 40.dp)
+                                    top = 15.dp,
+                                ).padding(horizontal = 40.dp),
                         ) {
                             Box(
-                                modifier = Modifier
-                                    .fillMaxWidth()
-                                    .height(24.dp),
-                                contentAlignment = Alignment.Center
+                                modifier =
+                                    Modifier
+                                        .fillMaxWidth()
+                                        .height(24.dp),
+                                contentAlignment = Alignment.Center,
                             ) {
                                 Crossfade(timelineState.loading) {
                                     if (it) {
-                                        LinearProgressIndicator(
-                                            modifier = Modifier
-                                                .fillMaxWidth()
-                                                .height(5.dp)
-                                                .padding(
-                                                    horizontal = 10.dp
-                                                )
-                                                .clip(
-                                                    RoundedCornerShape(8.dp)
-                                                ),
-                                            color = Color.Gray,
-                                            trackColor = Color.DarkGray,
-                                        )
+                                        CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides Dp.Unspecified) {
+                                            LinearProgressIndicator(
+                                                modifier =
+                                                    Modifier
+                                                        .fillMaxWidth()
+                                                        .height(4.dp)
+                                                        .padding(
+                                                            horizontal = 3.dp,
+                                                        ).clip(
+                                                            RoundedCornerShape(8.dp),
+                                                        ),
+                                                color = Color.Gray,
+                                                trackColor = Color.DarkGray,
+                                                strokeCap = StrokeCap.Round,
+                                            )
+                                        }
                                     } else {
-                                        LinearProgressIndicator(
-                                            progress = { timelineState.bufferedPercent.toFloat() / 100 },
-                                            modifier = Modifier
-                                                .fillMaxWidth()
-                                                .height(5.dp)
-                                                .padding(
-                                                    horizontal = 10.dp
-                                                )
-                                                .clip(
-                                                    RoundedCornerShape(8.dp)
-                                                ),
-                                            color = Color.Gray,
-                                            trackColor = Color.DarkGray,
-                                        )
+                                        CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides Dp.Unspecified) {
+                                            LinearProgressIndicator(
+                                                progress = { timelineState.bufferedPercent.toFloat() / 100 },
+                                                modifier =
+                                                    Modifier
+                                                        .fillMaxWidth()
+                                                        .height(4.dp)
+                                                        .padding(
+                                                            horizontal = 3.dp,
+                                                        ).clip(
+                                                            RoundedCornerShape(8.dp),
+                                                        ),
+                                                color = Color.Gray,
+                                                trackColor = Color.DarkGray,
+                                                strokeCap = StrokeCap.Round,
+                                                drawStopIndicator = {},
+                                            )
+                                        }
                                     }
                                 }
                             }
-                            CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
+                            CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides Dp.Unspecified) {
                                 Slider(
                                     value = sliderValue,
                                     onValueChange = {
                                         sharedViewModel.onUIEvent(
-                                            UIEvent.UpdateProgress(it)
+                                            UIEvent.UpdateProgress(it),
                                         )
                                     },
                                     valueRange = 0f..100f,
-                                    modifier = Modifier
-                                        .fillMaxWidth()
-                                        .align(
-                                            Alignment.TopCenter
-                                        ),
-                                    colors = SliderDefaults.colors().copy(
-                                        thumbColor = Color.White,
-                                        activeTrackColor = Color.White,
-                                        inactiveTrackColor = Color.Transparent
-                                    ),
+                                    modifier =
+                                        Modifier
+                                            .fillMaxWidth()
+                                            .padding(top = 3.dp)
+                                            .align(
+                                                Alignment.TopCenter,
+                                            ),
+                                    track = { sliderState ->
+                                        SliderDefaults.Track(
+                                            modifier =
+                                                Modifier
+                                                    .height(5.dp),
+                                            enabled = true,
+                                            sliderState = sliderState,
+                                            colors =
+                                                SliderDefaults.colors().copy(
+                                                    thumbColor = Color.White,
+                                                    activeTrackColor = Color.White,
+                                                    inactiveTrackColor = Color.Transparent,
+                                                ),
+                                            thumbTrackGapSize = 0.dp,
+                                            drawTick = { _, _ -> },
+                                            drawStopIndicator = null,
+                                        )
+                                    },
                                     thumb = {
                                         SliderDefaults.Thumb(
-                                            modifier = Modifier
-                                                .size(24.dp)
-                                                .padding(6.dp),
+                                            modifier =
+                                                Modifier
+                                                    .height(18.dp)
+                                                    .width(8.dp)
+                                                    .padding(
+                                                        vertical = 4.dp,
+                                                    ),
                                             thumbSize = DpSize(8.dp, 8.dp),
-                                            interactionSource = remember {
-                                                MutableInteractionSource()
-                                            },
-                                            colors = SliderDefaults.colors().copy(
-                                                thumbColor = Color.White,
-                                                activeTrackColor = Color.White,
-                                                inactiveTrackColor = Color.Transparent
-                                            ),
-                                            enabled = true
+                                            interactionSource =
+                                                remember {
+                                                    MutableInteractionSource()
+                                                },
+                                            colors =
+                                                SliderDefaults.colors().copy(
+                                                    thumbColor = Color.White,
+                                                    activeTrackColor = Color.White,
+                                                    inactiveTrackColor = Color.Transparent,
+                                                ),
+                                            enabled = true,
                                         )
                                     },
                                 )
                             }
                         }
-                        //Time Layout
+                        // Time Layout
                         Row(
                             Modifier
                                 .fillMaxWidth()
-                                .padding(horizontal = 40.dp)
+                                .padding(horizontal = 40.dp),
                         ) {
                             Text(
-                                text = if (timelineState.current >= 0L) formatDuration(timelineState.current) else stringResource(id = R.string.na_na),
+                                text =
+                                    if (timelineState.current >= 0L) {
+                                        formatDuration(timelineState.current)
+                                    } else {
+                                        stringResource(id = R.string.na_na)
+                                    },
                                 style = typo.bodyMedium,
                                 modifier = Modifier.weight(1f),
-                                textAlign = TextAlign.Left
+                                textAlign = TextAlign.Left,
                             )
                             Text(
                                 text = if (timelineState.total >= 0L) formatDuration(timelineState.total) else stringResource(id = R.string.na_na),
-                                style = typo.bodyMedium, modifier = Modifier.weight(1f), textAlign = TextAlign.Right
+                                style = typo.bodyMedium,
+                                modifier = Modifier.weight(1f),
+                                textAlign = TextAlign.Right,
                             )
                         }
 
                         Spacer(
-                            modifier = Modifier
-                                .fillMaxWidth()
-                                .height(5.dp)
+                            modifier =
+                                Modifier
+                                    .fillMaxWidth()
+                                    .height(5.dp),
                         )
-                        //Control Button Layout
+                        // Control Button Layout
                         Row(
                             verticalAlignment = Alignment.CenterVertically,
                             horizontalArrangement = Arrangement.SpaceBetween,
-                            modifier = Modifier
-                                .fillMaxWidth()
-                                .height(96.dp)
-                                .padding(horizontal = 40.dp)
+                            modifier =
+                                Modifier
+                                    .fillMaxWidth()
+                                    .height(96.dp)
+                                    .padding(horizontal = 40.dp),
                         ) {
                             FilledTonalIconButton(
-                                colors = IconButtonDefaults.iconButtonColors().copy(
-                                    containerColor = Color.Transparent
-                                ),
-                                modifier = Modifier
-                                    .size(48.dp)
-                                    .aspectRatio(1f)
-                                    .clip(
-                                        CircleShape
+                                colors =
+                                    IconButtonDefaults.iconButtonColors().copy(
+                                        containerColor = Color.Transparent,
                                     ),
+                                modifier =
+                                    Modifier
+                                        .size(48.dp)
+                                        .aspectRatio(1f)
+                                        .clip(
+                                            CircleShape,
+                                        ),
                                 onClick = {
                                     sharedViewModel.onUIEvent(UIEvent.Shuffle)
-                                }
+                                },
                             ) {
                                 Crossfade(targetState = controllerState.isShuffle, label = "Shuffle Button") { isShuffle ->
                                     if (isShuffle) {
                                         Icon(
-                                            imageVector = Icons.Filled.Shuffle, tint = Color.White, contentDescription = "",
-                                            modifier = Modifier.size(32.dp)
+                                            imageVector = Icons.Filled.Shuffle,
+                                            tint = Color.White,
+                                            contentDescription = "",
+                                            modifier = Modifier.size(32.dp),
                                         )
                                     } else {
                                         Icon(
-                                            imageVector = Icons.Filled.Shuffle, tint = seed, contentDescription = "",
-                                            modifier = Modifier.size(32.dp)
+                                            imageVector = Icons.Filled.Shuffle,
+                                            tint = seed,
+                                            contentDescription = "",
+                                            modifier = Modifier.size(32.dp),
                                         )
                                     }
                                 }
                             }
                             FilledTonalIconButton(
-                                colors = IconButtonDefaults.iconButtonColors().copy(
-                                    containerColor = Color.Transparent
-                                ),
-                                modifier = Modifier
-                                    .size(72.dp)
-                                    .aspectRatio(1f)
-                                    .clip(
-                                        CircleShape
+                                colors =
+                                    IconButtonDefaults.iconButtonColors().copy(
+                                        containerColor = Color.Transparent,
                                     ),
+                                modifier =
+                                    Modifier
+                                        .size(72.dp)
+                                        .aspectRatio(1f)
+                                        .clip(
+                                            CircleShape,
+                                        ),
                                 onClick = {
                                     if (controllerState.isPreviousAvailable) {
                                         sharedViewModel.onUIEvent(UIEvent.Previous)
                                     }
-                                }
+                                },
                             ) {
                                 Icon(
                                     imageVector = Icons.Filled.SkipPrevious,
@@ -560,18 +620,20 @@ fun FullscreenLyricsSheet(
                                 )
                             }
                             FilledTonalIconButton(
-                                colors = IconButtonDefaults.iconButtonColors().copy(
-                                    containerColor = Color.Transparent
-                                ),
-                                modifier = Modifier
-                                    .size(96.dp)
-                                    .aspectRatio(1f)
-                                    .clip(
-                                        CircleShape
+                                colors =
+                                    IconButtonDefaults.iconButtonColors().copy(
+                                        containerColor = Color.Transparent,
                                     ),
+                                modifier =
+                                    Modifier
+                                        .size(96.dp)
+                                        .aspectRatio(1f)
+                                        .clip(
+                                            CircleShape,
+                                        ),
                                 onClick = {
                                     sharedViewModel.onUIEvent(UIEvent.PlayPause)
-                                }
+                                },
                             ) {
                                 Crossfade(targetState = controllerState.isPlaying) { isPlaying ->
                                     if (!isPlaying) {
@@ -579,126 +641,139 @@ fun FullscreenLyricsSheet(
                                             imageVector = Icons.Filled.PlayCircle,
                                             tint = Color.White,
                                             contentDescription = "",
-                                            modifier = Modifier.size(72.dp)
+                                            modifier = Modifier.size(72.dp),
                                         )
                                     } else {
                                         Icon(
                                             imageVector = Icons.Filled.PauseCircle,
                                             tint = Color.White,
                                             contentDescription = "",
-                                            modifier = Modifier.size(72.dp)
+                                            modifier = Modifier.size(72.dp),
                                         )
                                     }
                                 }
                             }
                             FilledTonalIconButton(
-                                colors = IconButtonDefaults.iconButtonColors().copy(
-                                    containerColor = Color.Transparent
-                                ),
-                                modifier = Modifier
-                                    .size(72.dp)
-                                    .aspectRatio(1f)
-                                    .clip(
-                                        CircleShape
+                                colors =
+                                    IconButtonDefaults.iconButtonColors().copy(
+                                        containerColor = Color.Transparent,
                                     ),
+                                modifier =
+                                    Modifier
+                                        .size(72.dp)
+                                        .aspectRatio(1f)
+                                        .clip(
+                                            CircleShape,
+                                        ),
                                 onClick = {
                                     if (controllerState.isNextAvailable) {
                                         sharedViewModel.onUIEvent(UIEvent.Next)
                                     }
-                                }
+                                },
                             ) {
                                 Icon(
                                     imageVector = Icons.Filled.SkipNext,
                                     tint = if (controllerState.isNextAvailable) Color.White else Color.Gray,
                                     contentDescription = "",
-                                    modifier = Modifier.size(52.dp)
+                                    modifier = Modifier.size(52.dp),
                                 )
                             }
                             FilledTonalIconButton(
-                                colors = IconButtonDefaults.iconButtonColors().copy(
-                                    containerColor = Color.Transparent
-                                ),
-                                modifier = Modifier
-                                    .size(48.dp)
-                                    .aspectRatio(1f)
-                                    .clip(
-                                        CircleShape
+                                colors =
+                                    IconButtonDefaults.iconButtonColors().copy(
+                                        containerColor = Color.Transparent,
                                     ),
+                                modifier =
+                                    Modifier
+                                        .size(48.dp)
+                                        .aspectRatio(1f)
+                                        .clip(
+                                            CircleShape,
+                                        ),
                                 onClick = {
                                     sharedViewModel.onUIEvent(UIEvent.Repeat)
-                                }
+                                },
                             ) {
                                 Crossfade(targetState = controllerState.repeatState) { rs ->
                                     when (rs) {
                                         is RepeatState.None -> {
                                             Icon(
-                                                imageVector = Icons.Filled.Repeat, tint = Color.White, contentDescription = "",
-                                                modifier = Modifier.size(32.dp)
+                                                imageVector = Icons.Filled.Repeat,
+                                                tint = Color.White,
+                                                contentDescription = "",
+                                                modifier = Modifier.size(32.dp),
                                             )
                                         }
 
                                         RepeatState.All -> {
                                             Icon(
-                                                imageVector = Icons.Filled.Repeat, tint = seed, contentDescription = "",
-                                                modifier = Modifier.size(32.dp)
+                                                imageVector = Icons.Filled.Repeat,
+                                                tint = seed,
+                                                contentDescription = "",
+                                                modifier = Modifier.size(32.dp),
                                             )
                                         }
 
                                         RepeatState.One -> {
                                             Icon(
-                                                imageVector = Icons.Filled.RepeatOne, tint = seed, contentDescription = "",
-                                                modifier = Modifier.size(32.dp)
+                                                imageVector = Icons.Filled.RepeatOne,
+                                                tint = seed,
+                                                contentDescription = "",
+                                                modifier = Modifier.size(32.dp),
                                             )
                                         }
                                     }
                                 }
                             }
                         }
-                        //List Bottom Buttons
-                        //24.dp
+                        // List Bottom Buttons
+                        // 24.dp
                         Box(
-                            modifier = Modifier
-                                .height(32.dp)
-                                .fillMaxWidth()
-                                .padding(horizontal = 40.dp),
+                            modifier =
+                                Modifier
+                                    .height(32.dp)
+                                    .fillMaxWidth()
+                                    .padding(horizontal = 40.dp),
                         ) {
                             IconButton(
-                                modifier = Modifier
-                                    .size(24.dp)
-                                    .aspectRatio(1f)
-                                    .align(Alignment.CenterStart)
-                                    .clip(
-                                        CircleShape
-                                    ),
+                                modifier =
+                                    Modifier
+                                        .size(24.dp)
+                                        .aspectRatio(1f)
+                                        .align(Alignment.CenterStart)
+                                        .clip(
+                                            CircleShape,
+                                        ),
                                 onClick = {
                                     navController.navigateSafe(
-                                        R.id.action_global_infoFragment
+                                        R.id.action_global_infoFragment,
                                     )
-                                }
+                                },
                             ) {
                                 Icon(imageVector = Icons.Outlined.Info, tint = Color.White, contentDescription = "")
                             }
                             Row(
-                                Modifier.align(Alignment.CenterEnd)
+                                Modifier.align(Alignment.CenterEnd),
                             ) {
                                 Spacer(modifier = Modifier.size(8.dp))
                                 IconButton(
-                                    modifier = Modifier
-                                        .size(24.dp)
-                                        .aspectRatio(1f)
-                                        .clip(
-                                            CircleShape
-                                        ),
+                                    modifier =
+                                        Modifier
+                                            .size(24.dp)
+                                            .aspectRatio(1f)
+                                            .clip(
+                                                CircleShape,
+                                            ),
                                     onClick = {
                                         navController.navigateSafe(
-                                            R.id.action_global_queueFragment
+                                            R.id.action_global_queueFragment,
                                         )
-                                    }
+                                    },
                                 ) {
                                     Icon(
                                         imageVector = Icons.AutoMirrored.Outlined.QueueMusic,
                                         tint = Color.White,
-                                        contentDescription = ""
+                                        contentDescription = "",
                                     )
                                 }
                             }
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/component/ModalBottomSheet.kt b/app/src/main/java/com/maxrave/simpmusic/ui/component/ModalBottomSheet.kt
index dcf18508..38a9a439 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/component/ModalBottomSheet.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/component/ModalBottomSheet.kt
@@ -47,7 +47,7 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.State
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
@@ -82,15 +82,16 @@ import com.maxrave.simpmusic.data.model.searchResult.songs.Artist
 import com.maxrave.simpmusic.extension.connectArtists
 import com.maxrave.simpmusic.extension.greyScale
 import com.maxrave.simpmusic.extension.navigateSafe
-import com.maxrave.simpmusic.extension.toTrack
 import com.maxrave.simpmusic.ui.theme.seed
 import com.maxrave.simpmusic.ui.theme.typo
-import com.maxrave.simpmusic.viewModel.SharedViewModel
+import com.maxrave.simpmusic.viewModel.NowPlayingBottomSheetUIEvent
+import com.maxrave.simpmusic.viewModel.NowPlayingBottomSheetViewModel
 import com.skydoves.landscapist.ImageOptions
 import com.skydoves.landscapist.animation.crossfade.CrossfadePlugin
 import com.skydoves.landscapist.coil.CoilImage
 import com.skydoves.landscapist.components.rememberImageComponent
 import kotlinx.coroutines.launch
+import org.koin.androidx.compose.koinViewModel
 
 @UnstableApi
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@@ -99,19 +100,14 @@ fun NowPlayingBottomSheet(
     isBottomSheetVisible: Boolean,
     onDismiss: () -> Unit,
     navController: NavController,
-    sharedViewModel: SharedViewModel,
-    songEntity: State<SongEntity?>,
-    onToggleLike: (Boolean) -> Unit,
+    songEntity: SongEntity?,
+    viewModel: NowPlayingBottomSheetViewModel = koinViewModel(),
+    setSleepTimerEnable: Boolean = false,
+    changeMainLyricsProviderEnable: Boolean = false,
+    // Delete is specific to playlist
     onDelete: (() -> Unit)? = null,
-    onDownload: (() -> Unit)? = null,
-    onMainLyricsProvider: ((String) -> Unit)? = null,
-    onSleepTimer: ((Int) -> Unit)? = null,
-    getLocalPlaylist: () -> Unit,
-    listLocalPlaylist: State<List<LocalPlaylistEntity>?>,
-    onAddToLocalPlaylist: (LocalPlaylistEntity) -> Unit = { _ -> },
 ) {
-    val downloadState = songEntity.value?.downloadState
-    val context = LocalContext.current
+    val uiState by viewModel.uiState.collectAsState()
     val coroutineScope = rememberCoroutineScope()
     val modelBottomSheetState =
         rememberModalBottomSheetState(
@@ -137,23 +133,28 @@ fun NowPlayingBottomSheet(
         mutableStateOf(false)
     }
 
-    if (addToAPlaylist && listLocalPlaylist.value != null) {
-        getLocalPlaylist()
+    LaunchedEffect(key1 = songEntity) {
+        viewModel.setSongEntity(songEntity)
+    }
+
+    if (addToAPlaylist) {
         AddToPlaylistModalBottomSheet(
-            isBottomSheetVisible = addToAPlaylist,
-            listLocalPlaylist = listLocalPlaylist.value ?: arrayListOf(),
+            isBottomSheetVisible = true,
+            listLocalPlaylist = uiState.listLocalPlaylist,
             onDismiss = { addToAPlaylist = false },
-            onClick = { onAddToLocalPlaylist(it) },
-            videoId = songEntity.value?.videoId,
+            onClick = {
+                viewModel.onUIEvent(NowPlayingBottomSheetUIEvent.AddToPlaylist(it.id))
+            },
+            videoId = uiState.songEntity?.videoId ?: return
         )
     }
     if (artist) {
         ArtistModalBottomSheet(
             isBottomSheetVisible = artist,
             artists =
-                songEntity.value?.artistName?.mapIndexed { index, name ->
+                uiState.songEntity?.artistName?.mapIndexed { index, name ->
                     Artist(
-                        id = songEntity.value?.artistId?.get(index),
+                        id = uiState.songEntity?.artistId?.get(index),
                         name = name,
                     )
                 } ?: arrayListOf(),
@@ -164,8 +165,11 @@ fun NowPlayingBottomSheet(
 
     if (sleepTimer) {
         SleepTimerBottomSheet(onDismiss = { sleepTimer = false }) { minutes: Int ->
-            if (onSleepTimer != null) {
-                onSleepTimer(minutes)
+            if (setSleepTimerEnable) {
+                viewModel.onUIEvent(NowPlayingBottomSheetUIEvent.SetSleepTimer(
+                    cancel = false,
+                    minutes = minutes
+                ))
             }
         }
     }
@@ -177,8 +181,9 @@ fun NowPlayingBottomSheet(
             confirmButton = {
                 TextButton(onClick = {
                     sleepTimerWarning = false
-                    sharedViewModel.stopSleepTimer()
-                    Toast.makeText(context, context.getString(R.string.sleep_timer_off_done), Toast.LENGTH_SHORT).show()
+                    viewModel.onUIEvent(NowPlayingBottomSheetUIEvent.SetSleepTimer(
+                        cancel = true
+                    ))
                 }) {
                     Text(text = stringResource(id = R.string.yes), style = typo.labelSmall)
                 }
@@ -200,7 +205,7 @@ fun NowPlayingBottomSheet(
     if (mainLyricsProvider) {
         var selected by remember {
             mutableIntStateOf(
-                if (sharedViewModel.getLyricsProvider() == DataStoreManager.MUSIXMATCH) 0 else 1
+                if (uiState.mainLyricsProvider == DataStoreManager.MUSIXMATCH) 0 else 1
             )
         }
 
@@ -250,9 +255,9 @@ fun NowPlayingBottomSheet(
             confirmButton = {
                 TextButton(
                     onClick = {
-                        sharedViewModel.setLyricsProvider(
+                        viewModel.onUIEvent(NowPlayingBottomSheetUIEvent.ChangeLyricsProvider(
                             if (selected == 0) DataStoreManager.MUSIXMATCH else DataStoreManager.YOUTUBE
-                        )
+                        ))
                         mainLyricsProvider = false
                     },
                 ) {
@@ -269,7 +274,8 @@ fun NowPlayingBottomSheet(
         )
     }
 
-    if (isBottomSheetVisible && songEntity.value != null) {
+    if (isBottomSheetVisible) {
+        val songEntity = uiState.songEntity ?: return
         ModalBottomSheet(
             onDismissRequest = onDismiss,
             sheetState = modelBottomSheetState,
@@ -311,7 +317,7 @@ fun NowPlayingBottomSheet(
                         verticalAlignment = Alignment.CenterVertically,
                     ) {
                         CoilImage(
-                            imageModel = { songEntity.value?.thumbnails },
+                            imageModel = { songEntity.thumbnails },
                             imageOptions =
                                 ImageOptions(
                                     contentScale = ContentScale.Inside,
@@ -334,7 +340,7 @@ fun NowPlayingBottomSheet(
                             verticalArrangement = Arrangement.Center,
                         ) {
                             Text(
-                                text = songEntity.value?.title ?: "",
+                                text = songEntity.title,
                                 style = typo.labelMedium,
                                 maxLines = 1,
                                 modifier =
@@ -346,7 +352,7 @@ fun NowPlayingBottomSheet(
                                     .focusable(),
                             )
                             Text(
-                                text = songEntity.value?.artistName?.connectArtists() ?: "",
+                                text = songEntity.artistName?.connectArtists() ?: "",
                                 style = typo.bodyMedium,
                                 maxLines = 1,
                                 modifier =
@@ -374,59 +380,55 @@ fun NowPlayingBottomSheet(
                                 icon = painterResource(id = R.drawable.baseline_delete_24),
                                 text = R.string.delete_song_from_playlist,
                             ) {
-                                if (onDelete != null) {
-                                    onDelete()
-                                    hideModalBottomSheet()
-                                }
+                                onDelete?.invoke()
+                                hideModalBottomSheet()
                             }
                         }
                     }
                     CheckBoxActionButton(
-                        defaultChecked = songEntity.value?.liked ?: false,
-                        onChangeListener = onToggleLike,
+                        defaultChecked = songEntity.liked,
+                        onChangeListener = {
+                            viewModel.onUIEvent(NowPlayingBottomSheetUIEvent.ToggleLike)
+                        },
                     )
-                    Crossfade(targetState = onDownload != null) {
-                        if (it && onDownload != null) {
-                            ActionButton(
-                                icon =
-                                    when (downloadState) {
-                                        DownloadState.STATE_NOT_DOWNLOADED ->
-                                            painterResource(
-                                                R.drawable.outline_download_for_offline_24,
-                                            )
+                    ActionButton(
+                        icon =
+                        when (songEntity.downloadState) {
+                            DownloadState.STATE_NOT_DOWNLOADED ->
+                                painterResource(
+                                    R.drawable.outline_download_for_offline_24,
+                                )
 
-                                        DownloadState.STATE_DOWNLOADING ->
-                                            painterResource(
-                                                R.drawable.baseline_downloading_white,
-                                            )
+                            DownloadState.STATE_DOWNLOADING ->
+                                painterResource(
+                                    R.drawable.baseline_downloading_white,
+                                )
 
-                                        DownloadState.STATE_DOWNLOADED ->
-                                            painterResource(
-                                                R.drawable.baseline_downloaded,
-                                            )
+                            DownloadState.STATE_DOWNLOADED ->
+                                painterResource(
+                                    R.drawable.baseline_downloaded,
+                                )
 
-                                        DownloadState.STATE_PREPARING ->
-                                            painterResource(
-                                                R.drawable.baseline_downloading_white,
-                                            )
+                            DownloadState.STATE_PREPARING ->
+                                painterResource(
+                                    R.drawable.baseline_downloading_white,
+                                )
 
-                                        else ->
-                                            painterResource(
-                                                R.drawable.outline_download_for_offline_24,
-                                            )
-                                    },
-                                text =
-                                    when (downloadState) {
-                                        DownloadState.STATE_NOT_DOWNLOADED -> R.string.download
-                                        DownloadState.STATE_DOWNLOADING -> R.string.downloading
-                                        DownloadState.STATE_DOWNLOADED -> R.string.downloaded
-                                        DownloadState.STATE_PREPARING -> R.string.downloading
-                                        else -> R.string.download
-                                    },
-                            ) {
-                                onDownload()
-                            }
-                        }
+                            else ->
+                                painterResource(
+                                    R.drawable.outline_download_for_offline_24,
+                                )
+                        },
+                        text =
+                        when (songEntity.downloadState) {
+                            DownloadState.STATE_NOT_DOWNLOADED -> R.string.download
+                            DownloadState.STATE_DOWNLOADING -> R.string.downloading
+                            DownloadState.STATE_DOWNLOADED -> R.string.downloaded
+                            DownloadState.STATE_PREPARING -> R.string.downloading
+                            else -> R.string.download
+                        },
+                    ) {
+                        viewModel.onUIEvent(NowPlayingBottomSheetUIEvent.Download)
                     }
                     ActionButton(
                         icon = painterResource(id = R.drawable.baseline_playlist_add_24),
@@ -438,15 +440,13 @@ fun NowPlayingBottomSheet(
                         icon = painterResource(id = R.drawable.play_circle),
                         text = R.string.play_next,
                     ) {
-                        sharedViewModel.playNext(songEntity.value?.toTrack() ?: return@ActionButton)
+                        viewModel.onUIEvent(NowPlayingBottomSheetUIEvent.PlayNext)
                     }
                     ActionButton(
                         icon = painterResource(id = R.drawable.baseline_queue_music_24),
                         text = R.string.add_to_queue,
                     ) {
-                        sharedViewModel.addToQueue(
-                            songEntity.value?.toTrack() ?: return@ActionButton,
-                        )
+                        viewModel.onUIEvent(NowPlayingBottomSheetUIEvent.AddToQueue)
                     }
                     ActionButton(
                         icon = painterResource(id = R.drawable.baseline_people_alt_24),
@@ -456,14 +456,14 @@ fun NowPlayingBottomSheet(
                     }
                     ActionButton(
                         icon = painterResource(id = R.drawable.baseline_album_24),
-                        text = if (songEntity.value?.albumName.isNullOrBlank()) R.string.no_album else null,
-                        textString = songEntity.value?.albumName,
-                        enable = !songEntity.value?.albumName.isNullOrBlank(),
+                        text = if (songEntity.albumName.isNullOrBlank()) R.string.no_album else null,
+                        textString = songEntity.albumName,
+                        enable = !songEntity.albumName.isNullOrBlank(),
                     ) {
                         navController.navigateSafe(
                             R.id.action_global_albumFragment,
                             Bundle().apply {
-                                putString("browseId", songEntity.value?.albumId)
+                                putString("browseId", songEntity.albumId)
                             },
                         )
                     }
@@ -472,10 +472,10 @@ fun NowPlayingBottomSheet(
                         text = R.string.start_radio,
                     ) {
                         val args = Bundle()
-                        args.putString("radioId", "RDAMVM${songEntity.value?.videoId}")
+                        args.putString("radioId", "RDAMVM${songEntity.videoId}")
                         args.putString(
                             "videoId",
-                            songEntity.value?.videoId,
+                            songEntity.videoId,
                         )
                         hideModalBottomSheet()
                         navController.navigateSafe(
@@ -483,8 +483,8 @@ fun NowPlayingBottomSheet(
                             args,
                         )
                     }
-                    Crossfade(targetState = onMainLyricsProvider != null) {
-                        if (it && onMainLyricsProvider != null) {
+                    Crossfade(targetState = changeMainLyricsProviderEnable) {
+                        if (it) {
                             ActionButton(
                                 icon = painterResource(id = R.drawable.baseline_lyrics_24),
                                 text = R.string.main_lyrics_provider,
@@ -493,9 +493,9 @@ fun NowPlayingBottomSheet(
                             }
                         }
                     }
-                    Crossfade(targetState = onSleepTimer != null) {
-                        val sleepTimerState by sharedViewModel.sleepTimerState.collectAsState()
-                        if (it && onSleepTimer != null) {
+                    Crossfade(targetState = setSleepTimerEnable) {
+                        val sleepTimerState = uiState.sleepTimer
+                        if (it) {
                             Crossfade(targetState = sleepTimerState.timeRemaining > 0) { running ->
                                 if (running) {
                                     ActionButton(
@@ -523,13 +523,7 @@ fun NowPlayingBottomSheet(
                         icon = painterResource(id = R.drawable.baseline_share_24),
                         text = R.string.share,
                     ) {
-                        val shareIntent = Intent(Intent.ACTION_SEND)
-                        shareIntent.type = "text/plain"
-                        val url = "https://youtube.com/watch?v=${songEntity.value?.videoId}"
-                        shareIntent.putExtra(Intent.EXTRA_TEXT, url)
-                        val chooserIntent =
-                            Intent.createChooser(shareIntent, context.getString(R.string.share_url))
-                        context.startActivity(chooserIntent)
+                        viewModel.onUIEvent(NowPlayingBottomSheetUIEvent.Share)
                     }
                 }
             }
@@ -553,8 +547,7 @@ fun ActionButton(
             .fillMaxWidth()
             .wrapContentHeight(Alignment.CenterVertically)
             .clickable {
-                if (enable) onClick() else {
-                }
+                if (enable) onClick()
             }
             .apply {
                 if (!enable) greyScale()
@@ -973,7 +966,8 @@ fun ArtistModalBottomSheet(
 fun LocalPlaylistBottomSheet(
     isBottomSheetVisible: Boolean,
     onDismiss: () -> Unit,
-    localPlaylist: LocalPlaylistEntity,
+    title: String,
+    ytPlaylistId: String? = null,
     onEditTitle: (newTitle: String) -> Unit,
     onEditThumbnail: (newThumbnailUri: String) -> Unit,
     onAddToQueue: () -> Unit,
@@ -1020,7 +1014,7 @@ fun LocalPlaylistBottomSheet(
             }
         }
     if (showEditTitle) {
-        var newTitle by remember { mutableStateOf(localPlaylist.title) }
+        var newTitle by remember { mutableStateOf(title) }
         val showEditTitleSheetState =
             rememberModalBottomSheetState(
                 skipPartiallyExpanded = true,
@@ -1142,16 +1136,16 @@ fun LocalPlaylistBottomSheet(
                     }
                     ActionButton(
                         icon =
-                            if (localPlaylist.youtubePlaylistId == null) {
-                                painterResource(id = R.drawable.baseline_sync_24)
-                            } else {
+                            if (ytPlaylistId != null) {
                                 painterResource(id = R.drawable.baseline_sync_disabled_24)
+                            } else {
+                                painterResource(id = R.drawable.baseline_sync_24)
                             },
                         text =
-                            if (localPlaylist.youtubePlaylistId == null) {
-                                R.string.sync
-                            } else {
+                            if (ytPlaylistId != null) {
                                 R.string.synced
+                            } else {
+                                R.string.sync
                             },
                     ) {
                         onSync()
@@ -1159,7 +1153,7 @@ fun LocalPlaylistBottomSheet(
                     ActionButton(
                         icon = painterResource(id = R.drawable.baseline_update_24),
                         text = R.string.update_playlist,
-                        enable = (localPlaylist.youtubePlaylistId != null),
+                        enable = (ytPlaylistId != null),
                     ) {
                         onUpdatePlaylist()
                     }
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/component/PlaylistItems.kt b/app/src/main/java/com/maxrave/simpmusic/ui/component/PlaylistItems.kt
index f250741c..28f7277c 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/component/PlaylistItems.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/component/PlaylistItems.kt
@@ -2,7 +2,6 @@ package com.maxrave.simpmusic.ui.component
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.Crossfade
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.MarqueeAnimationMode
 import androidx.compose.foundation.basicMarquee
 import androidx.compose.foundation.clickable
@@ -20,6 +19,7 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -35,6 +35,7 @@ import com.maxrave.simpmusic.R
 import com.maxrave.simpmusic.common.DownloadState
 import com.maxrave.simpmusic.data.db.entities.SongEntity
 import com.maxrave.simpmusic.data.model.browse.album.Track
+import com.maxrave.simpmusic.data.repository.MainRepository
 import com.maxrave.simpmusic.extension.connectArtists
 import com.maxrave.simpmusic.extension.toListName
 import com.maxrave.simpmusic.ui.theme.typo
@@ -42,8 +43,10 @@ import com.skydoves.landscapist.ImageOptions
 import com.skydoves.landscapist.animation.crossfade.CrossfadePlugin
 import com.skydoves.landscapist.coil.CoilImage
 import com.skydoves.landscapist.components.rememberImageComponent
+import com.skydoves.landscapist.placeholder.placeholder.PlaceholderPlugin
+import kotlinx.coroutines.flow.mapNotNull
+import org.koin.compose.koinInject
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun PlaylistItems(
     track: Track? = null,
@@ -51,8 +54,12 @@ fun PlaylistItems(
     isPlaying: Boolean,
     onMoreClickListener: ((videoId: String) -> Unit)? = null,
     onClickListener: ((videoId: String) -> Unit)? = null,
-    modifier: Modifier
+    modifier: Modifier,
 ) {
+    val mainRepository: MainRepository = koinInject()
+    val downloadState by mainRepository.getSongAsFlow(songEntity?.videoId ?: track?.videoId ?: "")
+        .mapNotNull { it?.downloadState }
+        .collectAsState(initial = DownloadState.STATE_NOT_DOWNLOADED)
     val composition by rememberLottieComposition(
         LottieCompositionSpec.RawRes(R.raw.audio_playing_animation),
     )
@@ -85,9 +92,11 @@ fun PlaylistItems(
                             previewPlaceholder = painterResource(id = R.drawable.holder),
                             component =
                                 rememberImageComponent {
-                                    CrossfadePlugin(
+                                    +CrossfadePlugin(
                                         duration = 550,
                                     )
+                                    +PlaceholderPlugin.Loading(painterResource(R.drawable.holder))
+                                    +PlaceholderPlugin.Failure(painterResource(R.drawable.holder))
                                 },
                             modifier =
                                 Modifier
@@ -117,8 +126,8 @@ fun PlaylistItems(
                 Row {
                     AnimatedVisibility(
                         visible =
-                            if (songEntity != null) {
-                                songEntity.downloadState == DownloadState.STATE_DOWNLOADED
+                            if (songEntity != null || track != null) {
+                                downloadState == DownloadState.STATE_DOWNLOADED
                             } else {
                                 false
                             },
@@ -159,7 +168,6 @@ fun PlaylistItems(
     }
 }
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun SuggestItems(
     track: Track,
@@ -200,9 +208,11 @@ fun SuggestItems(
                             previewPlaceholder = painterResource(id = R.drawable.holder),
                             component =
                                 rememberImageComponent {
-                                    CrossfadePlugin(
+                                    +CrossfadePlugin(
                                         duration = 550,
                                     )
+                                    +PlaceholderPlugin.Loading(painterResource(R.drawable.holder))
+                                    +PlaceholderPlugin.Failure(painterResource(R.drawable.holder))
                                 },
                             modifier =
                                 Modifier
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/SearchFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/SearchFragment.kt
index d9d66755..5a4afac1 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/SearchFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/SearchFragment.kt
@@ -331,7 +331,7 @@ class SearchFragment : Fragment() {
                     val songClicked = suggestYTItemAdapter.getCurrentList()[position] as SongItem
                     val videoId = (suggestYTItemAdapter.getCurrentList()[position] as SongItem).id
                     val firstQueue: Track = songClicked.toTrack()
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = arrayListOf(firstQueue),
                             firstPlayedTrack = firstQueue,
@@ -341,7 +341,7 @@ class SearchFragment : Fragment() {
                             continuation = null
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstQueue,
                         type = Config.SONG_CLICK
                     )
@@ -350,7 +350,7 @@ class SearchFragment : Fragment() {
                     val videoClicked = suggestYTItemAdapter.getCurrentList()[position] as VideoItem
                     val videoId = videoClicked.id
                     val firstQueue = videoClicked.toTrack()
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = arrayListOf(firstQueue),
                             firstPlayedTrack = firstQueue,
@@ -360,7 +360,7 @@ class SearchFragment : Fragment() {
                             continuation = null
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstQueue,
                         type = Config.VIDEO_CLICK
                     )
@@ -398,7 +398,7 @@ class SearchFragment : Fragment() {
                 if (type == Config.SONG_CLICK){
                     val songClicked = resultAdapter.getCurrentList()[position] as SongsResult
                     val videoId = (resultAdapter.getCurrentList()[position] as SongsResult).videoId
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = arrayListOf(songClicked.toTrack()),
                             firstPlayedTrack = songClicked.toTrack(),
@@ -408,7 +408,7 @@ class SearchFragment : Fragment() {
                             continuation = null
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         songClicked.toTrack(),
                         type = Config.SONG_CLICK
                     )
@@ -417,7 +417,7 @@ class SearchFragment : Fragment() {
                     val videoClicked = resultAdapter.getCurrentList()[position] as VideosResult
                     val videoId = videoClicked.videoId
                     val firstQueue = videoClicked.toTrack()
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = arrayListOf(firstQueue),
                             firstPlayedTrack = firstQueue,
@@ -427,7 +427,7 @@ class SearchFragment : Fragment() {
                             continuation = null
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstQueue,
                         type = Config.VIDEO_CLICK
                     )
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/home/RecentlySongsFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/home/RecentlySongsFragment.kt
index 5be320c1..666b6434 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/home/RecentlySongsFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/home/RecentlySongsFragment.kt
@@ -102,7 +102,7 @@ class RecentlySongsFragment: Fragment() {
                     val songClicked = mainAdapter.getItemByIndex(position) as SongEntity
                     val videoId = songClicked.videoId
                     val firstQueue: Track = songClicked.toTrack()
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = arrayListOf(firstQueue),
                             firstPlayedTrack = firstQueue,
@@ -112,7 +112,7 @@ class RecentlySongsFragment: Fragment() {
                             continuation = null
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstQueue,
                         Config.SONG_CLICK,
                         0
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/home/SettingsFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/home/SettingsFragment.kt
index 03dc6ec0..0f5a2fc1 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/home/SettingsFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/home/SettingsFragment.kt
@@ -624,7 +624,7 @@ class SettingsFragment : Fragment() {
         binding.btEqualizer.setOnClickListener {
             val eqIntent = Intent(AudioEffect.ACTION_DISPLAY_AUDIO_EFFECT_CONTROL_PANEL)
             eqIntent.putExtra(AudioEffect.EXTRA_PACKAGE_NAME, requireContext().packageName)
-            eqIntent.putExtra(AudioEffect.EXTRA_AUDIO_SESSION, sharedViewModel.simpleMediaServiceHandler?.player?.audioSessionId)
+            eqIntent.putExtra(AudioEffect.EXTRA_AUDIO_SESSION, viewModel.getAudioSessionId())
             eqIntent.putExtra(AudioEffect.EXTRA_CONTENT_TYPE, AudioEffect.CONTENT_TYPE_MUSIC)
             val packageManager = requireContext().packageManager
             val resolveInfo: List<*> = packageManager.queryIntentActivities(eqIntent, 0)
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/DownloadedFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/DownloadedFragment.kt
index 81353079..7b98ee75 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/DownloadedFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/DownloadedFragment.kt
@@ -99,7 +99,7 @@ class DownloadedFragment : Fragment() {
             override fun onItemClick(position: Int, type: String) {
                 val song = downloadedAdapter.getCurrentList()[position] as SongEntity
                 val firstQueue = song.toTrack()
-                sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                viewModel.setQueueData(
                     QueueData(
                         listTracks = downloadedAdapter.getCurrentList().map { (it as SongEntity).toTrack()} as ArrayList<Track>,
                         firstPlayedTrack = firstQueue,
@@ -109,7 +109,7 @@ class DownloadedFragment : Fragment() {
                         continuation = null
                     )
                 )
-                sharedViewModel.loadMediaItemFromTrack(
+                viewModel.loadMediaItem(
                     firstQueue,
                     Config.PLAYLIST_CLICK,
                     position
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/FavoriteFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/FavoriteFragment.kt
index 8c8d8bde..cd59c42b 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/FavoriteFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/FavoriteFragment.kt
@@ -105,7 +105,7 @@ class FavoriteFragment : Fragment() {
             override fun onItemClick(position: Int, type: String) {
                 val song = listLiked[position] as SongEntity
                 val firstQueue = song.toTrack()
-                sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                viewModel.setQueueData(
                     QueueData(
                         listTracks = listLiked.map { (it as SongEntity).toTrack()} as ArrayList<Track>,
                         firstPlayedTrack = firstQueue,
@@ -115,7 +115,7 @@ class FavoriteFragment : Fragment() {
                         continuation = null
                     )
                 )
-                sharedViewModel.loadMediaItemFromTrack(
+                viewModel.loadMediaItem(
                     firstQueue,
                     Config.PLAYLIST_CLICK,
                     position
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/LibraryFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/LibraryFragment.kt
index 132d6385..2f7be9f1 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/LibraryFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/LibraryFragment.kt
@@ -252,7 +252,7 @@ class LibraryFragment : Fragment() {
                         val songClicked = adapterItem.getCurrentList()[position] as SongEntity
                         val videoId = songClicked.videoId
                         val firstQueue: Track = songClicked.toTrack()
-                        sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                        viewModel.setQueueData(
                             QueueData(
                                 listTracks = arrayListOf(firstQueue),
                                 firstPlayedTrack = firstQueue,
@@ -262,7 +262,7 @@ class LibraryFragment : Fragment() {
                                 continuation = null,
                             ),
                         )
-                        sharedViewModel.loadMediaItemFromTrack(
+                        viewModel.loadMediaItem(
                             firstQueue,
                             Config.SONG_CLICK,
                             position,
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/MostPlayedFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/MostPlayedFragment.kt
index c57e5b4a..6f713d31 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/MostPlayedFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/library/MostPlayedFragment.kt
@@ -101,7 +101,7 @@ class MostPlayedFragment: Fragment() {
                     val songClicked = mostPlayedAdapter.getCurrentList()[position] as SongEntity
                     val videoId = songClicked.videoId
                     val firstQueue: Track = songClicked.toTrack()
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = arrayListOf(firstQueue),
                             firstPlayedTrack = firstQueue,
@@ -111,7 +111,7 @@ class MostPlayedFragment: Fragment() {
                             continuation = null
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstQueue,
                         Config.SONG_CLICK,
                         0
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/login/LogInFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/login/LogInFragment.kt
index d30cb905..6c95b51f 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/login/LogInFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/login/LogInFragment.kt
@@ -27,7 +27,6 @@ import com.maxrave.simpmusic.viewModel.LogInViewModel
 import com.maxrave.simpmusic.viewModel.SettingsViewModel
 import com.maxrave.simpmusic.viewModel.SharedViewModel
 import dev.chrisbanes.insetter.applyInsetter
-import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.runBlocking
 
 class LogInFragment : Fragment() {
@@ -62,6 +61,7 @@ class LogInFragment : Fragment() {
         binding.webView.apply {
             webViewClient = object : WebViewClient() {
                 @SuppressLint("FragmentLiveDataObserve")
+                @UnstableApi
                 override fun onPageFinished(view: WebView?, url: String?) {
                     if (url == Config.YOUTUBE_MUSIC_MAIN_URL) {
                         CookieManager.getInstance().getCookie(url)?.let {
@@ -111,7 +111,7 @@ class LogInFragment : Fragment() {
         if (requireActivity().isMyServiceRunning(SimpleMediaService::class.java)) {
             miniplayer.animation =
                 AnimationUtils.loadAnimation(requireContext(), R.anim.bottom_to_top)
-            if (runBlocking { sharedViewModel.simpleMediaServiceHandler?.nowPlaying?.first() != null }) {
+            if (runBlocking { sharedViewModel.nowPlayingState.value?.mediaItem != null }) {
                 miniplayer.visibility = View.VISIBLE
             }
         }
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/login/MusixmatchFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/login/MusixmatchFragment.kt
index bdbebc9c..f5a1d4fb 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/login/MusixmatchFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/login/MusixmatchFragment.kt
@@ -25,7 +25,6 @@ import com.maxrave.simpmusic.viewModel.SharedViewModel
 import dev.chrisbanes.insetter.applyInsetter
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.collectLatest
-import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.runBlocking
 
@@ -118,7 +117,7 @@ class MusixmatchFragment : Fragment() {
         if (requireActivity().isMyServiceRunning(SimpleMediaService::class.java)) {
             miniplayer.animation =
                 AnimationUtils.loadAnimation(requireContext(), R.anim.bottom_to_top)
-            if (runBlocking { sharedViewModel.simpleMediaServiceHandler?.nowPlaying?.first() != null }) {
+            if (runBlocking { sharedViewModel.nowPlayingState.value?.mediaItem != null }) {
                 miniplayer.visibility = View.VISIBLE
             }
         }
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/login/SpotifyLogInFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/login/SpotifyLogInFragment.kt
index f73c14ec..fc48d340 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/login/SpotifyLogInFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/login/SpotifyLogInFragment.kt
@@ -27,7 +27,6 @@ import com.maxrave.simpmusic.viewModel.LogInViewModel
 import com.maxrave.simpmusic.viewModel.SettingsViewModel
 import com.maxrave.simpmusic.viewModel.SharedViewModel
 import dev.chrisbanes.insetter.applyInsetter
-import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.runBlocking
 
 class SpotifyLogInFragment : Fragment() {
@@ -112,7 +111,7 @@ class SpotifyLogInFragment : Fragment() {
         if (requireActivity().isMyServiceRunning(SimpleMediaService::class.java)) {
             miniplayer.animation =
                 AnimationUtils.loadAnimation(requireContext(), R.anim.bottom_to_top)
-            if (runBlocking { sharedViewModel.simpleMediaServiceHandler?.nowPlaying?.first() != null }) {
+            if (runBlocking { sharedViewModel.nowPlayingState.value?.mediaItem != null }) {
                 miniplayer.visibility = View.VISIBLE
             }
         }
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/AlbumFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/AlbumFragment.kt
index d076f8b6..4088243b 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/AlbumFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/AlbumFragment.kt
@@ -205,7 +205,7 @@ class AlbumFragment : Fragment() {
                 shuffleList.shuffle()
                 if (firstPlay != null) {
                     shuffleList.add(0, firstPlay)
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = shuffleList,
                             firstPlayedTrack = firstPlay,
@@ -218,7 +218,7 @@ class AlbumFragment : Fragment() {
                             continuation = null,
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstPlay,
                         Config.ALBUM_CLICK,
                         0,
@@ -240,7 +240,7 @@ class AlbumFragment : Fragment() {
                 )
                 shuffleList.shuffle()
                 if (firstPlay != null) {
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             shuffleList,
                             firstPlay.toTrack(),
@@ -252,7 +252,7 @@ class AlbumFragment : Fragment() {
                             null
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstPlay.toTrack(),
                         Config.ALBUM_CLICK,
                         0,
@@ -271,7 +271,7 @@ class AlbumFragment : Fragment() {
             ) {
                 val firstPlay = songsAdapter.getList().firstOrNull()
                 if (firstPlay != null) {
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             songsAdapter.getList(),
                             firstPlay,
@@ -284,7 +284,7 @@ class AlbumFragment : Fragment() {
                             null
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstPlay,
                         Config.ALBUM_CLICK,
                         0,
@@ -293,7 +293,7 @@ class AlbumFragment : Fragment() {
             } else if (viewModel.albumEntity.value != null && viewModel.albumEntity.value?.downloadState == DownloadState.STATE_DOWNLOADED) {
                 val firstPlay = songsAdapter.getList().firstOrNull()
                 if (firstPlay != null) {
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             songsAdapter.getList(),
                             firstPlay,
@@ -305,7 +305,7 @@ class AlbumFragment : Fragment() {
                             null
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstPlay,
                         Config.ALBUM_CLICK,
                         0,
@@ -321,7 +321,7 @@ class AlbumFragment : Fragment() {
                     if (viewModel.albumBrowse.value is Resource.Success && viewModel.albumBrowse.value?.data != null) {
                         val firstPlay = songsAdapter.getList().getOrNull(position)
                         if (firstPlay != null) {
-                            sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                            viewModel.setQueueData(
                                 QueueData(
                                     songsAdapter.getList(),
                                     firstPlay,
@@ -334,7 +334,7 @@ class AlbumFragment : Fragment() {
                                     null
                                 )
                             )
-                            sharedViewModel.loadMediaItemFromTrack(
+                            viewModel.loadMediaItem(
                                 firstPlay,
                                 Config.ALBUM_CLICK,
                                 position,
@@ -343,7 +343,7 @@ class AlbumFragment : Fragment() {
                     } else if (viewModel.albumEntity.value != null && viewModel.albumEntity.value?.downloadState == DownloadState.STATE_DOWNLOADED) {
                         val firstPlay = songsAdapter.getList().getOrNull(position)
                         if (firstPlay != null) {
-                            sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                            viewModel.setQueueData(
                                 QueueData(
                                     songsAdapter.getList(),
                                     firstPlay,
@@ -355,7 +355,7 @@ class AlbumFragment : Fragment() {
                                     null
                                 )
                             )
-                            sharedViewModel.loadMediaItemFromTrack(
+                            viewModel.loadMediaItem(
                                 firstPlay,
                                 Config.ALBUM_CLICK,
                                 position,
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/ArtistFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/ArtistFragment.kt
index de1e291d..3b9fb6d6 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/ArtistFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/ArtistFragment.kt
@@ -250,7 +250,7 @@ class ArtistFragment : Fragment() {
                     val songClicked = popularAdapter.getCurrentList()[position]
                     val videoId = songClicked.videoId
                     val firstQueue: Track = songClicked.toTrack()
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = arrayListOf(firstQueue),
                             firstPlayedTrack = firstQueue,
@@ -261,7 +261,7 @@ class ArtistFragment : Fragment() {
 
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstQueue,
                         Config.SONG_CLICK,
                         0,
@@ -291,7 +291,7 @@ class ArtistFragment : Fragment() {
                     val songClicked = videoAdapter.getCurrentList()[position]
                     val videoId = songClicked.videoId
                     val firstQueue: Track = songClicked.toTrack()
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = arrayListOf(firstQueue),
                             firstPlayedTrack = firstQueue,
@@ -301,7 +301,7 @@ class ArtistFragment : Fragment() {
                             continuation = null
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstQueue,
                         Config.VIDEO_CLICK,
                         0,
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/LocalPlaylistFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/LocalPlaylistFragment.kt
index 54aaf238..e0395db2 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/LocalPlaylistFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/LocalPlaylistFragment.kt
@@ -29,7 +29,6 @@ import coil.transform.Transformation
 import com.maxrave.simpmusic.R
 import com.maxrave.simpmusic.adapter.playlist.PlaylistItemAdapter
 import com.maxrave.simpmusic.adapter.playlist.SuggestItemAdapter
-import com.maxrave.simpmusic.common.DownloadState
 import com.maxrave.simpmusic.data.model.browse.album.Track
 import com.maxrave.simpmusic.databinding.FragmentLocalPlaylistBinding
 import com.maxrave.simpmusic.extension.setStatusBarsColor
@@ -37,7 +36,6 @@ import com.maxrave.simpmusic.ui.screen.library.PlaylistScreen
 import com.maxrave.simpmusic.ui.theme.AppTheme
 import com.maxrave.simpmusic.viewModel.LocalPlaylistViewModel
 import com.maxrave.simpmusic.viewModel.SharedViewModel
-import java.time.format.DateTimeFormatter
 
 @UnstableApi
 @ExperimentalFoundationApi
@@ -83,12 +81,17 @@ class LocalPlaylistFragment : Fragment() {
             setContent {
                 AppTheme {
                     Scaffold {
-                        PlaylistScreen(
-                            id = playlistId,
-                            sharedViewModel = sharedViewModel,
-                            viewModel = viewModel,
-                            findNavController(),
-                        )
+                        val id = playlistId
+                        if (id != null) {
+                            PlaylistScreen(
+                                id = id,
+                                sharedViewModel = sharedViewModel,
+                                viewModel = viewModel,
+                                findNavController(),
+                            )
+                        } else {
+                            findNavController().navigateUp()
+                        }
                     }
                 }
             }
@@ -1015,141 +1018,6 @@ class LocalPlaylistFragment : Fragment() {
         _binding = null
     }
 
-    @UnstableApi
-//    private fun fetchDataFromDatabase() {
-//        viewModel.clearLocalPlaylist()
-//        viewModel.id.postValue(id)
-//        viewModel.getLocalPlaylist(id!!)
-//        viewModel.localPlaylist.observe(viewLifecycleOwner) { localPlaylist ->
-//            Log.d("Check", "fetchData: ${viewModel.localPlaylist.value}")
-//            if (localPlaylist != null) {
-//                if (!localPlaylist.tracks.isNullOrEmpty()) {
-//                    viewModel.getListTrack(localPlaylist.tracks)
-//                    viewModel.getPairSongLocalPlaylist(localPlaylist.id)
-//                }
-//                binding.collapsingToolbarLayout.title = localPlaylist.title
-//                binding.tvTitle.text = localPlaylist.title
-//                binding.tvTitle.isSelected = true
-//                if (localPlaylist.syncedWithYouTubePlaylist == 1 && localPlaylist.youtubePlaylistId != null) {
-//                    if (!localPlaylist.tracks.isNullOrEmpty()) {
-//                        viewModel.getSetVideoId(localPlaylist.youtubePlaylistId)
-//                    }
-//                }
-//                if (localPlaylist.syncedWithYouTubePlaylist == 0) {
-//                    binding.btSuggest.visibility = View.GONE
-//                } else if (localPlaylist.syncedWithYouTubePlaylist == 1) {
-//                    binding.btSuggest.visibility = View.VISIBLE
-//                    if (sharedViewModel.isFirstSuggestions) {
-//                        val balloon =
-//                            Balloon.Builder(requireContext())
-//                                .setWidthRatio(0.5f)
-//                                .setHeight(BalloonSizeSpec.WRAP)
-//                                .setText(getString(R.string.guide_suggest_content))
-//                                .setTextColorResource(R.color.md_theme_dark_onSurface)
-//                                .setTextSize(11f)
-//                                .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
-//                                .setArrowSize(10)
-//                                .setArrowPosition(0.5f)
-//                                .setPadding(12)
-//                                .setAutoDismissDuration(5000L)
-//                                .setCornerRadius(8f)
-//                                .setBackgroundColorResource(R.color.md_theme_dark_onSecondary)
-//                                .setBalloonAnimation(BalloonAnimation.ELASTIC)
-//                                .setLifecycleOwner(viewLifecycleOwner)
-//                                .build()
-//                        balloon.showAlignTop(binding.btSuggest)
-//                        sharedViewModel.putString("suggest_guide", STATUS_DONE)
-//                        sharedViewModel.isFirstSuggestions = false
-//                    }
-//                }
-//            }
-//            binding.tvTrackCountAndTimeCreated.text =
-//                getString(
-//                    R.string.album_length,
-//                    localPlaylist?.tracks?.size?.toString() ?: "0",
-//                    localPlaylist?.inLibrary?.format(
-//                        DateTimeFormatter.ofPattern("HH:mm:ss dd/MM/yyyy"),
-//                    ),
-//                )
-//            loadImage(localPlaylist?.thumbnail)
-//            with(binding) {
-//                if (localPlaylist != null) {
-//                    when (localPlaylist.downloadState) {
-//                        DownloadState.STATE_DOWNLOADED -> {
-//                            btDownload.visibility = View.VISIBLE
-//                            animationDownloading.visibility = View.GONE
-//                            btDownload.setImageResource(R.drawable.baseline_downloaded)
-//                        }
-//
-//                        DownloadState.STATE_DOWNLOADING -> {
-//                            btDownload.visibility = View.GONE
-//                            animationDownloading.visibility = View.VISIBLE
-//                        }
-//
-//                        DownloadState.STATE_PREPARING -> {
-//                            btDownload.visibility = View.GONE
-//                            animationDownloading.visibility = View.VISIBLE
-//                        }
-//
-//                        DownloadState.STATE_NOT_DOWNLOADED -> {
-//                            btDownload.visibility = View.VISIBLE
-//                            animationDownloading.visibility = View.GONE
-//                            btDownload.setImageResource(R.drawable.download_button)
-//                        }
-//                    }
-//                }
-//            }
-//        }
-//    }
-
-    private fun fetchDataFromViewModel() {
-        Log.d("Check", "fetchDataFromViewModel: ${viewModel.localPlaylist.value}")
-        val localPlaylist = viewModel.localPlaylist.value!!
-        binding.collapsingToolbarLayout.title = localPlaylist.title
-        binding.tvTitle.text = localPlaylist.title
-        binding.tvTitle.isSelected = true
-        binding.tvTrackCountAndTimeCreated.text =
-            getString(
-                R.string.album_length,
-                localPlaylist.tracks?.size.toString(),
-                localPlaylist.inLibrary.format(
-                    DateTimeFormatter.ofPattern("HH:mm:ss dd/MM/yyyy"),
-                ),
-            )
-        if (!viewModel.listTrack.value.isNullOrEmpty()) {
-            listTrack.clear()
-            listTrack.addAll(viewModel.listTrack.value!!)
-            Log.d("Check", "fetchData: ${viewModel.listTrack.value}")
-            playlistAdapter.updateList(listTrack)
-        }
-        loadImage(localPlaylist.thumbnail)
-        with(binding) {
-            when (localPlaylist.downloadState) {
-                DownloadState.STATE_DOWNLOADED -> {
-                    btDownload.visibility = View.VISIBLE
-                    animationDownloading.visibility = View.GONE
-                    btDownload.setImageResource(R.drawable.baseline_downloaded)
-                }
-
-                DownloadState.STATE_DOWNLOADING -> {
-                    btDownload.visibility = View.GONE
-                    animationDownloading.visibility = View.VISIBLE
-                }
-
-                DownloadState.STATE_PREPARING -> {
-                    btDownload.visibility = View.GONE
-                    animationDownloading.visibility = View.VISIBLE
-                }
-
-                DownloadState.STATE_NOT_DOWNLOADED -> {
-                    btDownload.visibility = View.VISIBLE
-                    animationDownloading.visibility = View.GONE
-                    btDownload.setImageResource(R.drawable.download_button)
-                }
-            }
-        }
-    }
-
     private fun loadImage(url: String?) {
         Log.d("Check", "loadImage: $url")
         val request =
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/PlaylistFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/PlaylistFragment.kt
index 19e695b7..3fa71bc6 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/PlaylistFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/PlaylistFragment.kt
@@ -353,7 +353,7 @@ class PlaylistFragment : Fragment() {
         binding.btPlayPause.setOnClickListener {
             if (!viewModel.isRadio.value) {
                 if (viewModel.playlistBrowse.value != null) {
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = (viewModel.playlistBrowse.value?.tracks ?: arrayListOf()) as ArrayList<Track>,
                             firstPlayedTrack =
@@ -373,7 +373,7 @@ class PlaylistFragment : Fragment() {
                         ?.tracks
                         ?.get(0)
                         ?.let {
-                            sharedViewModel.loadMediaItemFromTrack(
+                            viewModel.loadMediaItem(
                                 it,
                                 type = Config.PLAYLIST_CLICK,
                                 index = 0,
@@ -382,7 +382,7 @@ class PlaylistFragment : Fragment() {
                 } else if (viewModel.playlistEntity.value != null &&
                     viewModel.playlistEntity.value?.downloadState == DownloadState.STATE_DOWNLOADED
                 ) {
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = viewModel.listTrack.value.toArrayListTrack(),
                             firstPlayedTrack =
@@ -399,7 +399,7 @@ class PlaylistFragment : Fragment() {
                         ),
                     )
                     viewModel.listTrack.value.firstOrNull()?.let {
-                        sharedViewModel.loadMediaItemFromTrack(
+                        viewModel.loadMediaItem(
                             it.toTrack(),
                             type = Config.PLAYLIST_CLICK,
                             index = 0,
@@ -415,7 +415,7 @@ class PlaylistFragment : Fragment() {
                 }
             } else {
                 if (viewModel.playlistBrowse.value != null) {
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = (viewModel.playlistBrowse.value?.tracks ?: arrayListOf()) as ArrayList<Track>,
                             firstPlayedTrack =
@@ -435,7 +435,7 @@ class PlaylistFragment : Fragment() {
                         ),
                     )
                     viewModel.playlistBrowse.value?.tracks?.firstOrNull()?.let {
-                        sharedViewModel.loadMediaItemFromTrack(
+                        viewModel.loadMediaItem(
                             it,
                             type = Config.PLAYLIST_CLICK,
                             index = 0,
@@ -444,7 +444,7 @@ class PlaylistFragment : Fragment() {
                 } else if (viewModel.playlistEntity.value != null &&
                     viewModel.playlistEntity.value?.downloadState == DownloadState.STATE_DOWNLOADED
                 ) {
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = viewModel.listTrack.value.toArrayListTrack(),
                             firstPlayedTrack =
@@ -464,7 +464,7 @@ class PlaylistFragment : Fragment() {
                         ),
                     )
                     viewModel.listTrack.value.firstOrNull()?.let {
-                        sharedViewModel.loadMediaItemFromTrack(
+                        viewModel.loadMediaItem(
                             it.toTrack(),
                             type = Config.PLAYLIST_CLICK,
                             index = 0,
@@ -486,7 +486,7 @@ class PlaylistFragment : Fragment() {
                 override fun onItemClick(position: Int) {
                     if (!viewModel.isRadio.value) {
                         if (viewModel.playlistBrowse.value != null) {
-                            sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                            viewModel.setQueueData(
                                 QueueData(
                                     listTracks = (viewModel.playlistBrowse.value?.tracks ?: arrayListOf()) as ArrayList<Track>,
                                     firstPlayedTrack =
@@ -504,7 +504,7 @@ class PlaylistFragment : Fragment() {
                             )
                             viewModel.playlistBrowse.value?.tracks?.get(position)?.let {
                                 Log.w(tag, "track: $it")
-                                sharedViewModel.loadMediaItemFromTrack(
+                                viewModel.loadMediaItem(
                                     it,
                                     type = Config.PLAYLIST_CLICK,
                                     index = position,
@@ -513,7 +513,7 @@ class PlaylistFragment : Fragment() {
                         } else if (viewModel.playlistEntity.value != null &&
                             viewModel.playlistEntity.value?.downloadState == DownloadState.STATE_DOWNLOADED
                         ) {
-                            sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                            viewModel.setQueueData(
                                 QueueData(
                                     listTracks = viewModel.listTrack.value.toArrayListTrack(),
                                     firstPlayedTrack =
@@ -531,7 +531,7 @@ class PlaylistFragment : Fragment() {
                             )
                             viewModel.listTrack.value.getOrNull(position)?.let {
                                 Log.w(tag, "track: $it")
-                                sharedViewModel.loadMediaItemFromTrack(
+                                viewModel.loadMediaItem(
                                     it.toTrack(),
                                     type = Config.PLAYLIST_CLICK,
                                     index = position,
@@ -547,7 +547,7 @@ class PlaylistFragment : Fragment() {
                         }
                     } else {
                         if (viewModel.playlistBrowse.value != null) {
-                            sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                            viewModel.setQueueData(
                                 QueueData(
                                     listTracks = (viewModel.playlistBrowse.value?.tracks ?: arrayListOf()) as ArrayList<Track>,
                                     firstPlayedTrack =
@@ -568,7 +568,7 @@ class PlaylistFragment : Fragment() {
                             )
                             viewModel.playlistBrowse.value?.tracks?.get(position)?.let {
                                 Log.w(tag, "track: $it")
-                                sharedViewModel.loadMediaItemFromTrack(
+                                viewModel.loadMediaItem(
                                     it,
                                     type = Config.PLAYLIST_CLICK,
                                     index = position,
@@ -577,7 +577,7 @@ class PlaylistFragment : Fragment() {
                         } else if (viewModel.playlistEntity.value != null &&
                             viewModel.playlistEntity.value?.downloadState == DownloadState.STATE_DOWNLOADED
                         ) {
-                            sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                            viewModel.setQueueData(
                                 QueueData(
                                     listTracks = viewModel.listTrack.value.toArrayListTrack(),
                                     firstPlayedTrack =
@@ -598,7 +598,7 @@ class PlaylistFragment : Fragment() {
                             )
                             viewModel.listTrack.value.getOrNull(position)?.let {
                                 Log.w(tag, "track: $it")
-                                sharedViewModel.loadMediaItemFromTrack(
+                                viewModel.loadMediaItem(
                                     it.toTrack(),
                                     type = Config.PLAYLIST_CLICK,
                                     index = position,
@@ -859,7 +859,7 @@ class PlaylistFragment : Fragment() {
                             ?.tracks
                             ?.get(index),
                     )
-                sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                viewModel.setQueueData(
                     QueueData(
                         listTracks = shuffleList,
                         firstPlayedTrack =
@@ -876,7 +876,7 @@ class PlaylistFragment : Fragment() {
                     ),
                 )
                 viewModel.playlistBrowse.value?.tracks?.get(index)?.let {
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         it,
                         type = Config.PLAYLIST_CLICK,
                         index = afterShuffleIndex,
@@ -905,7 +905,7 @@ class PlaylistFragment : Fragment() {
                             .getOrNull(index)
                             ?.toTrack(),
                     )
-                sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                viewModel.setQueueData(
                     QueueData(
                         listTracks = shuffleList,
                         firstPlayedTrack =
@@ -924,7 +924,7 @@ class PlaylistFragment : Fragment() {
                 viewModel.listTrack.value
                     .getOrNull(index)
                     ?.let {
-                        sharedViewModel.loadMediaItemFromTrack(
+                        viewModel.loadMediaItem(
                             it.toTrack(),
                             type = Config.PLAYLIST_CLICK,
                             index = afterShuffleIndex,
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/PodcastFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/PodcastFragment.kt
index 124837dc..bfc679a5 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/PodcastFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/other/PodcastFragment.kt
@@ -121,7 +121,7 @@ class PodcastFragment : Fragment() {
         binding.btPlayPause.setOnClickListener {
             if (viewModel.podcastBrowse.value is Resource.Success && viewModel.podcastBrowse.value?.data != null) {
                 val firstQueue = viewModel.podcastBrowse.value?.data?.listEpisode?.firstOrNull()?.toTrack()
-                sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                viewModel.setQueueData(
                     QueueData(
                         listTracks = viewModel.podcastBrowse.value?.data?.listEpisode?.toListTrack() ?: arrayListOf(),
                         firstPlayedTrack = firstQueue,
@@ -133,7 +133,7 @@ class PodcastFragment : Fragment() {
                     )
                 )
                 if (firstQueue != null) {
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstQueue,
                         Config.PLAYLIST_CLICK,
                         0
@@ -154,7 +154,7 @@ class PodcastFragment : Fragment() {
                 shuffleList.shuffle()
                 if (firstPlay != null) {
                     shuffleList.add(0, firstPlay)
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = shuffleList,
                             firstPlayedTrack = firstPlay,
@@ -164,7 +164,7 @@ class PodcastFragment : Fragment() {
                             continuation = null
                         )
                     )
-                    sharedViewModel.loadMediaItemFromTrack(
+                    viewModel.loadMediaItem(
                         firstPlay,
                         Config.PLAYLIST_CLICK,
                         0
@@ -197,7 +197,7 @@ class PodcastFragment : Fragment() {
             override fun onItemClick(position: Int) {
                 if (viewModel.podcastBrowse.value is Resource.Success && viewModel.podcastBrowse.value?.data != null) {
                     val firstQueue = viewModel.podcastBrowse.value?.data?.listEpisode?.getOrNull(position)?.toTrack()
-                    sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                    viewModel.setQueueData(
                         QueueData(
                             listTracks = viewModel.podcastBrowse.value?.data?.listEpisode?.toListTrack() ?: arrayListOf(),
                             firstPlayedTrack = firstQueue,
@@ -209,7 +209,7 @@ class PodcastFragment : Fragment() {
                         )
                     )
                     if (firstQueue != null) {
-                        sharedViewModel.loadMediaItemFromTrack(
+                        viewModel.loadMediaItem(
                             firstQueue,
                             Config.PLAYLIST_CLICK,
                             position
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/player/FullscreenFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/player/FullscreenFragment.kt
index 620d87f6..de33d345 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/player/FullscreenFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/player/FullscreenFragment.kt
@@ -88,7 +88,7 @@ class FullscreenFragment : Fragment() {
             viewModel.isFullScreen = true
         }
         if (binding.playerView.player == null) {
-            binding.playerView.player = viewModel.simpleMediaServiceHandler?.player
+            binding.playerView.player = viewModel.getPlayer()
         }
 
         with(binding) {
@@ -244,7 +244,7 @@ class FullscreenFragment : Fragment() {
                     }
                 val job11 =
                     launch {
-                        viewModel.simpleMediaServiceHandler?.controlState?.collect { controlState ->
+                        viewModel.controllerState.collect { controlState ->
                             setEnabledAll(binding.btPrevious, controlState.isPreviousAvailable)
                             setEnabledAll(binding.btNext, controlState.isNextAvailable)
                             when (controlState.isShuffle) {
@@ -284,7 +284,7 @@ class FullscreenFragment : Fragment() {
         binding.toolbar.setOnMenuItemClickListener { menuItem ->
             when (menuItem.itemId) {
                 R.id.now_playing_dialog_menu_item_more -> {
-                    val queue = runBlocking { viewModel.simpleMediaServiceHandler?.queueData?.first()?.listTracks }
+                    val queue = viewModel.getQueueData()?.listTracks
                     if (!queue.isNullOrEmpty()) {
                         val dialog = BottomSheetDialog(requireContext())
                         dialog.apply {
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/player/InfoFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/player/InfoFragment.kt
index 07ace48b..84a07773 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/player/InfoFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/player/InfoFragment.kt
@@ -113,21 +113,19 @@ class InfoFragment: BottomSheetDialogFragment(){
                     viewModel.nowPlayingState.collectLatest {
                         val nowPlaying = it?.track
                             if (nowPlaying != null) {
-                                if (viewModel.simpleMediaServiceHandler != null) {
-                                    with(binding){
-                                        toolbar.title = nowPlaying.title
-                                        artistsName.text = nowPlaying.artists.toListName().connectArtists()
-                                        "https://www.youtube.com/watch?v=${nowPlaying.videoId}".also { youtubeUrl.text = it }
-                                        title.text = nowPlaying.title
-                                        albumName.text = nowPlaying.album?.name
-                                        albumName.setOnClickListener {
-                                            if (!nowPlaying.album?.id.isNullOrEmpty()) {
-                                                findNavController().navigateSafe(
-                                                    R.id.action_global_albumFragment,
-                                                    Bundle().apply {
-                                                        putString("browseId", nowPlaying.album?.id)
-                                                    })
-                                            }
+                                with(binding){
+                                    toolbar.title = nowPlaying.title
+                                    artistsName.text = nowPlaying.artists.toListName().connectArtists()
+                                    "https://www.youtube.com/watch?v=${nowPlaying.videoId}".also { youtubeUrl.text = it }
+                                    title.text = nowPlaying.title
+                                    albumName.text = nowPlaying.album?.name
+                                    albumName.setOnClickListener {
+                                        if (!nowPlaying.album?.id.isNullOrEmpty()) {
+                                            findNavController().navigateSafe(
+                                                R.id.action_global_albumFragment,
+                                                Bundle().apply {
+                                                    putString("browseId", nowPlaying.album?.id)
+                                                })
                                         }
                                     }
                                 }
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/player/QueueFragment.kt b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/player/QueueFragment.kt
index 4f20e018..5ae44848 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/fragment/player/QueueFragment.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/fragment/player/QueueFragment.kt
@@ -100,9 +100,7 @@ class QueueFragment : BottomSheetDialogFragment() {
         touchHelper.attachToRecyclerView(binding.rvQueue)
         val queue =
             runBlocking {
-                viewModel.simpleMediaServiceHandler
-                    ?.queueData
-                    ?.first()
+                viewModel.getQueueData()
                     ?.listTracks
             }
         if (!queue.isNullOrEmpty()) {
@@ -112,7 +110,7 @@ class QueueFragment : BottomSheetDialogFragment() {
         lifecycleScope.launch {
             val job1 =
                 launch {
-                    viewModel.simpleMediaServiceHandler?.stateFlow?.collect { state ->
+                    viewModel.getHandlerStateFlow().collect { state ->
                         when (state) {
                             StateSource.STATE_INITIALIZING -> {
                                 binding.loadingQueue.visibility = View.VISIBLE
@@ -126,9 +124,7 @@ class QueueFragment : BottomSheetDialogFragment() {
                                 binding.loadingQueue.visibility = View.GONE
                                 binding.rvQueue.visibility = View.VISIBLE
                                 queueAdapter.updateList(
-                                    viewModel.simpleMediaServiceHandler
-                                        ?.queueData
-                                        ?.first()
+                                    viewModel.getQueueData()
                                         ?.listTracks ?: arrayListOf(),
                                 )
                             }
@@ -148,8 +144,8 @@ class QueueFragment : BottomSheetDialogFragment() {
                             binding.tvSongTitle.isSelected = true
                             binding.tvSongArtist.text = it.mediaItem.mediaMetadata.artist
                             binding.tvSongArtist.isSelected = true
-                            if (viewModel.simpleMediaServiceHandler?.stateFlow?.first() == StateSource.STATE_INITIALIZED ||
-                                viewModel.simpleMediaServiceHandler?.stateFlow?.first() == StateSource.STATE_INITIALIZING
+                            if (viewModel.getHandlerStateFlow().first() == StateSource.STATE_INITIALIZED ||
+                                viewModel.getHandlerStateFlow().first() == StateSource.STATE_INITIALIZING
                             ) {
                                 val index = it.songEntity?.videoId?.let { it1 -> queueAdapter.getIndexOf(it1) }
                                 if (index != null) {
@@ -162,7 +158,7 @@ class QueueFragment : BottomSheetDialogFragment() {
                 }
             val job3 =
                 launch {
-                    viewModel.simpleMediaServiceHandler?.currentSongIndex?.collect { index ->
+                    viewModel.getCurrentSongIndex().collect { index ->
                         Log.d("QueueFragment", "onViewCreated: $index")
                     }
                 }
@@ -203,11 +199,11 @@ class QueueFragment : BottomSheetDialogFragment() {
                     dy: Int,
                 ) {
                     val layoutManager = recyclerView.layoutManager as LinearLayoutManager?
-                    if (viewModel.simpleMediaServiceHandler?.stateFlow?.value != StateSource.STATE_INITIALIZING &&
+                    if (viewModel.getHandlerStateFlow().value != StateSource.STATE_INITIALIZING &&
                         layoutManager != null &&
                         layoutManager.findLastCompletelyVisibleItemPosition() == queueAdapter.itemCount - 1
                     ) {
-                        viewModel.simpleMediaServiceHandler?.loadMore()
+                        viewModel.startLoadMore()
                     }
                 }
             },
@@ -228,11 +224,9 @@ class QueueFragment : BottomSheetDialogFragment() {
                     to: Int,
                 ) {
                     lifecycleScope.launch {
-                        viewModel.simpleMediaServiceHandler?.swap(from, to)
+                        viewModel.swapQueue(from, to)
                         queueAdapter.updateList(
-                            viewModel.simpleMediaServiceHandler
-                                ?.queueData
-                                ?.first()
+                            viewModel.getQueueData()
                                 ?.listTracks ?: arrayListOf(),
                         )
                     }
@@ -244,73 +238,65 @@ class QueueFragment : BottomSheetDialogFragment() {
                 override fun onOptionClick(position: Int) {
                     val dialog = BottomSheetDialog(requireContext())
                     val dialogView = BottomSheetQueueTrackOptionBinding.inflate(layoutInflater)
-                    if (viewModel.simpleMediaServiceHandler != null) {
-                        lifecycleScope.launch {
-                            repeatOnLifecycle(Lifecycle.State.CREATED) {
-                                viewModel.simpleMediaServiceHandler?.queueData?.collect { queueData ->
-                                    val queueList = queueData?.listTracks ?: arrayListOf()
-                                    if (queueList.size > 1) {
-                                        when (position) {
-                                            0 -> {
-                                                setEnabledAll(dialogView.btMoveUp, false)
-                                                setEnabledAll(dialogView.btMoveDown, true)
-                                            }
+                    lifecycleScope.launch {
+                        repeatOnLifecycle(Lifecycle.State.CREATED) {
+                            viewModel.getQueueDataFlow().collect { queueData ->
+                                val queueList = queueData?.listTracks ?: arrayListOf()
+                                if (queueList.size > 1) {
+                                    when (position) {
+                                        0 -> {
+                                            setEnabledAll(dialogView.btMoveUp, false)
+                                            setEnabledAll(dialogView.btMoveDown, true)
+                                        }
 
-                                            queueList.size - 1 -> {
-                                                setEnabledAll(dialogView.btMoveUp, true)
-                                                setEnabledAll(dialogView.btMoveDown, false)
-                                            }
+                                        queueList.size - 1 -> {
+                                            setEnabledAll(dialogView.btMoveUp, true)
+                                            setEnabledAll(dialogView.btMoveDown, false)
+                                        }
 
-                                            else -> {
-                                                setEnabledAll(dialogView.btMoveUp, true)
-                                                setEnabledAll(dialogView.btMoveDown, true)
-                                            }
+                                        else -> {
+                                            setEnabledAll(dialogView.btMoveUp, true)
+                                            setEnabledAll(dialogView.btMoveDown, true)
                                         }
-                                    } else {
-                                        setEnabledAll(dialogView.btMoveUp, false)
-                                        setEnabledAll(dialogView.btMoveDown, false)
-                                        setEnabledAll(dialogView.btDelete, false)
                                     }
+                                } else {
+                                    setEnabledAll(dialogView.btMoveUp, false)
+                                    setEnabledAll(dialogView.btMoveDown, false)
+                                    setEnabledAll(dialogView.btDelete, false)
                                 }
                             }
                         }
-                        with(dialogView) {
-                            btMoveUp.setOnClickListener {
-                                lifecycleScope.launch {
-                                    viewModel.simpleMediaServiceHandler?.moveItemUp(position)
-                                    queueAdapter.updateList(
-                                        viewModel.simpleMediaServiceHandler
-                                            ?.queueData
-                                            ?.first()
-                                            ?.listTracks ?: arrayListOf(),
-                                    )
-                                }
-                                dialog.dismiss()
+                    }
+                    with(dialogView) {
+                        btMoveUp.setOnClickListener {
+                            lifecycleScope.launch {
+                                viewModel.moveItemUp(position)
+                                queueAdapter.updateList(
+                                    viewModel.getQueueData()
+                                        ?.listTracks ?: arrayListOf(),
+                                )
                             }
-                            btMoveDown.setOnClickListener {
-                                lifecycleScope.launch {
-                                    viewModel.simpleMediaServiceHandler?.moveItemDown(position)
-                                    queueAdapter.updateList(
-                                        viewModel.simpleMediaServiceHandler
-                                            ?.queueData
-                                            ?.first()
-                                            ?.listTracks ?: arrayListOf(),
-                                    )
-                                }
-                                dialog.dismiss()
+                            dialog.dismiss()
+                        }
+                        btMoveDown.setOnClickListener {
+                            lifecycleScope.launch {
+                                viewModel.moveItemDown(position)
+                                queueAdapter.updateList(
+                                    viewModel.getQueueData()
+                                        ?.listTracks ?: arrayListOf(),
+                                )
                             }
-                            btDelete.setOnClickListener {
-                                viewModel.simpleMediaServiceHandler?.removeMediaItem(position)
-                                lifecycleScope.launch {
-                                    queueAdapter.updateList(
-                                        viewModel.simpleMediaServiceHandler
-                                            ?.queueData
-                                            ?.first()
-                                            ?.listTracks ?: arrayListOf(),
-                                    )
-                                }
-                                dialog.dismiss()
+                            dialog.dismiss()
+                        }
+                        btDelete.setOnClickListener {
+                            viewModel.removeItem(position)
+                            lifecycleScope.launch {
+                                queueAdapter.updateList(
+                                    viewModel.getQueueData()
+                                        ?.listTracks ?: arrayListOf(),
+                                )
                             }
+                            dialog.dismiss()
                         }
                     }
                     dialog.setCancelable(true)
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/screen/MiniPlayer.kt b/app/src/main/java/com/maxrave/simpmusic/ui/screen/MiniPlayer.kt
index edadfa16..12ba49db 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/screen/MiniPlayer.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/screen/MiniPlayer.kt
@@ -415,6 +415,7 @@ fun MiniPlayer(
                     color = Color(0xB2FFFFFF),
                     trackColor = Color.Transparent,
                     strokeCap = StrokeCap.Round,
+                    drawStopIndicator = {}
                 )
             }
         }
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/screen/home/HomeScreen.kt b/app/src/main/java/com/maxrave/simpmusic/ui/screen/home/HomeScreen.kt
index 859ef404..75e4f533 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/screen/home/HomeScreen.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/screen/home/HomeScreen.kt
@@ -5,7 +5,6 @@ import android.os.Bundle
 import android.util.Log
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.Crossfade
-import androidx.compose.animation.core.LinearOutSlowInEasing
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.expandVertically
 import androidx.compose.animation.fadeIn
@@ -13,10 +12,10 @@ import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.gestures.snapping.SnapLayoutInfoProvider
+import androidx.compose.foundation.gestures.snapping.SnapPosition
 import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -41,7 +40,8 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.pulltorefresh.PullToRefreshContainer
+import androidx.compose.material3.pulltorefresh.PullToRefreshBox
+import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults
 import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -49,14 +49,13 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalContext
@@ -113,6 +112,7 @@ fun HomeScreen(
     navController: NavController,
 ) {
     val context = LocalContext.current
+    val coroutineScope = rememberCoroutineScope()
     val scrollState = rememberLazyListState()
     val accountInfo by viewModel.accountInfo.collectAsState()
     val homeData by viewModel.homeItemList.collectAsState()
@@ -126,52 +126,40 @@ fun HomeScreen(
     }
     val regionChart by viewModel.regionCodeChart.collectAsState()
     val homeRefresh by sharedViewModel.homeRefresh.collectAsState()
-    val pullToRefreshState =
-        rememberPullToRefreshState(
-            20.dp,
-        )
+    val pullToRefreshState = rememberPullToRefreshState()
+    var isRefreshing by remember { mutableStateOf(false) }
     val chipRowState = rememberScrollState()
     val params by viewModel.params.collectAsState()
-    val scaleFraction =
-        if (pullToRefreshState.isRefreshing) {
-            1f
-        } else {
-            LinearOutSlowInEasing.transform(pullToRefreshState.progress).coerceIn(0f, 1f)
-        }
-    if (pullToRefreshState.isRefreshing) {
-        viewModel.getHomeItemList()
+
+    val onRefresh: () -> Unit = {
+        isRefreshing = true
         viewModel.getHomeItemList()
-        if (!loading) {
-            pullToRefreshState.endRefresh()
-            sharedViewModel.homeRefreshDone()
-        }
-    }
-    LaunchedEffect(key1 = homeData) {
-        accountShow = homeData.find { it.subtitle == accountInfo?.first } == null
+        Log.w("HomeScreen", "onRefresh")
     }
     LaunchedEffect(key1 = homeRefresh) {
-        Log.w("HomeScreen", "homeRefresh: $homeRefresh")
         if (homeRefresh) {
-            Log.w(
-                "HomeScreen",
-                "scrollState.firstVisibleItemIndex: ${scrollState.firstVisibleItemIndex}",
-            )
-            if (scrollState.firstVisibleItemIndex == 1) {
-                Log.w(
-                    "HomeScreen",
-                    "scrollState.canScrollBackward: ${scrollState.canScrollBackward}",
-                )
-                pullToRefreshState.startRefresh()
-            } else {
-                Log.w(
-                    "HomeScreen",
-                    "scrollState.canScrollBackward: ${scrollState.canScrollBackward}",
-                )
-                launch { scrollState.scrollToItem(0, 0) }
+            if (scrollState.firstVisibleItemIndex > 1) {
+                Log.w("HomeScreen", "scrollState.firstVisibleItemIndex: ${scrollState.firstVisibleItemIndex}")
+                scrollState.animateScrollToItem(0)
                 sharedViewModel.homeRefreshDone()
+            } else {
+                Log.w("HomeScreen", "scrollState.firstVisibleItemIndex: ${scrollState.firstVisibleItemIndex}")
+                onRefresh.invoke()
             }
         }
     }
+    LaunchedEffect(key1 = loading) {
+        if (!loading) {
+            isRefreshing = false
+            sharedViewModel.homeRefreshDone()
+            coroutineScope.launch {
+                pullToRefreshState.animateToHidden()
+            }
+        }
+    }
+    LaunchedEffect(key1 = homeData) {
+        accountShow = homeData.find { it.subtitle == accountInfo?.first } == null
+    }
     Column {
         AnimatedVisibility(
             visible = scrollState.isScrollingUp(),
@@ -229,21 +217,24 @@ fun HomeScreen(
                 Spacer(modifier = Modifier.width(4.dp))
             }
         }
-        Box(
+        PullToRefreshBox(
             modifier =
             Modifier
-                .nestedScroll(pullToRefreshState.nestedScrollConnection)
                 .padding(vertical = 8.dp),
-            contentAlignment = Alignment.Center,
+            state = pullToRefreshState,
+            onRefresh = onRefresh,
+            isRefreshing = isRefreshing,
+            indicator = {
+                PullToRefreshDefaults.Indicator(
+                    state = pullToRefreshState,
+                    isRefreshing = isRefreshing,
+                    modifier = Modifier.align(Alignment.TopCenter),
+                    containerColor = PullToRefreshDefaults.containerColor,
+                    color = PullToRefreshDefaults.indicatorColor,
+                    threshold = PullToRefreshDefaults.PositionalThreshold
+                )
+            }
         ) {
-            PullToRefreshContainer(
-                modifier =
-                Modifier
-                    .align(Alignment.TopCenter)
-                    .padding(top = 15.dp)
-                    .graphicsLayer(scaleX = scaleFraction, scaleY = scaleFraction),
-                state = pullToRefreshState,
-            )
             Spacer(modifier = Modifier.height(8.dp))
             Crossfade(targetState = loading, label = "Home Shimmer") { loading ->
                 if (!loading) {
@@ -279,7 +270,7 @@ fun HomeScreen(
                                                     R.string.quick_picks,
                                                 )
                                         } ?: return@AnimatedVisibility,
-                                    sharedViewModel = sharedViewModel,
+                                    viewModel = viewModel,
                                 )
                             }
                         }
@@ -357,7 +348,7 @@ fun HomeScreen(
                                                 chart?.let {
                                                     ChartData(
                                                         chart = it,
-                                                        sharedViewModel = sharedViewModel,
+                                                        viewModel = viewModel,
                                                         navController = navController,
                                                         context = context,
                                                     )
@@ -500,10 +491,10 @@ fun AccountLayout(
 @Composable
 fun QuickPicks(
     homeItem: HomeItem,
-    sharedViewModel: SharedViewModel,
+    viewModel: HomeViewModel
 ) {
     val lazyListState = rememberLazyGridState()
-    val snapperFlingBehavior = rememberSnapFlingBehavior(SnapLayoutInfoProvider(lazyGridState = lazyListState))
+    val snapperFlingBehavior = rememberSnapFlingBehavior(SnapLayoutInfoProvider(lazyGridState = lazyListState, snapPosition = SnapPosition.Start))
     val density = LocalDensity.current
     var widthDp by remember {
         mutableStateOf(0.dp)
@@ -540,7 +531,7 @@ fun QuickPicks(
                 if (it != null) {
                     QuickPicksItem(onClick = {
                         val firstQueue: Track = it.toTrack()
-                        sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                        viewModel.setQueueData(
                             QueueData(
                                 listTracks = arrayListOf(firstQueue),
                                 firstPlayedTrack = firstQueue,
@@ -550,7 +541,7 @@ fun QuickPicks(
                                 continuation = null
                             )
                         )
-                        sharedViewModel.loadMediaItemFromTrack(
+                        viewModel.loadMediaItem(
                             firstQueue,
                             type = Config.SONG_CLICK,
                         )
@@ -663,7 +654,7 @@ fun ChartTitle() {
 @Composable
 fun ChartData(
     chart: Chart,
-    sharedViewModel: SharedViewModel,
+    viewModel: HomeViewModel,
     navController: NavController,
     context: Context,
 ) {
@@ -716,7 +707,7 @@ fun ChartData(
                         items(chart.songs.size) {
                             val data = chart.songs[it]
                             ItemTrackChart(onClick = {
-                                sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                                viewModel.setQueueData(
                                     QueueData(
                                         listTracks = arrayListOf(data),
                                         firstPlayedTrack = data,
@@ -726,7 +717,7 @@ fun ChartData(
                                         continuation = null
                                     )
                                 )
-                                sharedViewModel.loadMediaItemFromTrack(
+                                viewModel.loadMediaItem(
                                     data,
                                     type = Config.VIDEO_CLICK,
                                 )
@@ -754,7 +745,7 @@ fun ChartData(
                 ItemVideoChart(
                     onClick = {
                         val firstQueue: Track = data.toTrack()
-                        sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                        viewModel.setQueueData(
                             QueueData(
                                 listTracks = arrayListOf(firstQueue),
                                 firstPlayedTrack = firstQueue,
@@ -764,7 +755,7 @@ fun ChartData(
                                 continuation = null
                             )
                         )
-                        sharedViewModel.loadMediaItemFromTrack(
+                        viewModel.loadMediaItem(
                             firstQueue,
                             type = Config.VIDEO_CLICK,
                         )
@@ -818,7 +809,7 @@ fun ChartData(
                         items(chart.trending.size) {
                             val data = chart.trending[it]
                             ItemTrackChart(onClick = {
-                                sharedViewModel.simpleMediaServiceHandler?.setQueueData(
+                                viewModel.setQueueData(
                                     QueueData(
                                         listTracks = arrayListOf(data),
                                         firstPlayedTrack = data,
@@ -828,7 +819,7 @@ fun ChartData(
                                         continuation = null
                                     )
                                 )
-                                sharedViewModel.loadMediaItemFromTrack(
+                                viewModel.loadMediaItem(
                                     data,
                                     type = Config.VIDEO_CLICK,
                                 )
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/screen/library/PlaylistScreen.kt b/app/src/main/java/com/maxrave/simpmusic/ui/screen/library/PlaylistScreen.kt
index 386c4354..6e01d25e 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/screen/library/PlaylistScreen.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/screen/library/PlaylistScreen.kt
@@ -1,6 +1,5 @@
 package com.maxrave.simpmusic.ui.screen.library
 
-import android.os.Bundle
 import android.util.Log
 import android.widget.Toast
 import androidx.compose.animation.AnimatedVisibility
@@ -50,6 +49,7 @@ import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.derivedStateOf
@@ -58,6 +58,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -89,20 +90,14 @@ import com.airbnb.lottie.compose.LottieCompositionSpec
 import com.airbnb.lottie.compose.LottieConstants.IterateForever
 import com.airbnb.lottie.compose.rememberLottieComposition
 import com.maxrave.simpmusic.R
-import com.maxrave.simpmusic.common.ASC
-import com.maxrave.simpmusic.common.Config
-import com.maxrave.simpmusic.common.DESC
 import com.maxrave.simpmusic.common.DownloadState
-import com.maxrave.simpmusic.common.LOCAL_PLAYLIST_ID
+import com.maxrave.simpmusic.data.db.entities.LocalPlaylistEntity
 import com.maxrave.simpmusic.data.db.entities.SongEntity
-import com.maxrave.simpmusic.data.model.browse.album.Track
 import com.maxrave.simpmusic.extension.angledGradientBackground
 import com.maxrave.simpmusic.extension.getBrushListColorFromPalette
-import com.maxrave.simpmusic.extension.toTrack
-import com.maxrave.simpmusic.service.PlaylistType
-import com.maxrave.simpmusic.service.QueueData
 import com.maxrave.simpmusic.ui.component.CenterLoadingBox
 import com.maxrave.simpmusic.ui.component.EndOfPage
+import com.maxrave.simpmusic.ui.component.LoadingDialog
 import com.maxrave.simpmusic.ui.component.LocalPlaylistBottomSheet
 import com.maxrave.simpmusic.ui.component.NowPlayingBottomSheet
 import com.maxrave.simpmusic.ui.component.PlaylistItems
@@ -113,7 +108,6 @@ import com.maxrave.simpmusic.viewModel.FilterState
 import com.maxrave.simpmusic.viewModel.LocalPlaylistUIEvent
 import com.maxrave.simpmusic.viewModel.LocalPlaylistViewModel
 import com.maxrave.simpmusic.viewModel.SharedViewModel
-import com.maxrave.simpmusic.viewModel.UIEvent
 import com.skydoves.landscapist.ImageOptions
 import com.skydoves.landscapist.animation.crossfade.CrossfadePlugin
 import com.skydoves.landscapist.coil.CoilImage
@@ -123,6 +117,7 @@ import com.skydoves.landscapist.palette.rememberPaletteState
 import com.skydoves.landscapist.placeholder.placeholder.PlaceholderPlugin
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.mapLatest
 import java.time.format.DateTimeFormatter
@@ -135,7 +130,7 @@ import java.time.format.DateTimeFormatter
 )
 @Composable
 fun PlaylistScreen(
-    id: Long?,
+    id: Long,
     sharedViewModel: SharedViewModel,
     viewModel: LocalPlaylistViewModel,
     navController: NavController,
@@ -146,9 +141,9 @@ fun PlaylistScreen(
         LottieCompositionSpec.RawRes(R.raw.downloading_animation),
     )
 
+    val uiState by viewModel.uiState.collectAsState()
+
     val offset by viewModel.offset.collectAsState()
-    val isLoadingMore by viewModel.loadingMore.collectAsState(initial = false)
-    val filterState by viewModel.filter.collectAsState()
 
     val aiPainter = painterResource(id = R.drawable.baseline_tips_and_updates_24)
     val limit = 1.5f
@@ -188,29 +183,22 @@ fun PlaylistScreen(
                 ?.index == lazyState.layoutInfo.totalItemsCount - 1
         }
     }
-    val downloadState by viewModel.playlistDownloadState.collectAsState()
+    val downloadState by viewModel.uiState.map { it.downloadState }.collectAsState(
+        initial = DownloadState.STATE_NOT_DOWNLOADED
+    )
     var shouldHideTopBar by rememberSaveable { mutableStateOf(false) }
     var shouldShowSuggestions by rememberSaveable { mutableStateOf(false) }
     var shouldShowSuggestButton by rememberSaveable { mutableStateOf(false) }
     var palette by rememberPaletteState(null)
-    val bg by viewModel.brush.collectAsState()
-    val localPlaylist by viewModel.localPlaylist.collectAsState()
-    val listTrack by viewModel.listTrack.collectAsState()
     val playingTrack by sharedViewModel.nowPlayingState
         .mapLatest {
             it?.mediaItem
         }.collectAsState(initial = null)
     val isPlaying by sharedViewModel.controllerState.map { it.isPlaying }.collectAsState(initial = false)
-    val suggestedTracks by viewModel.listSuggestions.collectAsState()
+    val suggestedTracks by viewModel.uiState.map { it.suggestions?.songs ?: emptyList() }.collectAsState(initial = emptyList())
     val suggestionsLoading by viewModel.loading.collectAsState()
     var showSyncAlertDialog by rememberSaveable { mutableStateOf(false) }
     var showUnsyncAlertDialog by rememberSaveable { mutableStateOf(false) }
-    var shouldDownload by remember {
-        mutableStateOf(false)
-    }
-    var shouldAddAllToQueue by remember {
-        mutableStateOf(false)
-    }
     var firstTimeGetLocalPlaylist by rememberSaveable {
         mutableStateOf(false)
     }
@@ -226,42 +214,31 @@ fun PlaylistScreen(
         mutableStateOf(false)
     }
 
+    val trackPagingItems: LazyPagingItems<SongEntity> = viewModel.tracksPagingState.collectAsLazyPagingItems()
+    LaunchedEffect(Unit) {
+        snapshotFlow {
+            trackPagingItems.loadState
+        }.collectLatest {
+            Log.d("PlaylistScreen", "loadState: ${trackPagingItems.loadState}")
+            viewModel.setLazyTrackPagingItems(trackPagingItems)
+        }
+    }
+
+    DisposableEffect(Unit) {
+        onDispose {
+            firstTimeGetLocalPlaylist = true
+        }
+    }
+
     val onPlaylistItemClick: (videoId: String) -> Unit = { videoId ->
-        val list = listTrack
-        val track = listTrack?.find { it.videoId == videoId }
-        if (!list.isNullOrEmpty() && track != null) {
-            val tempList: ArrayList<Track> = arrayListOf()
-            for (i in list) {
-                tempList.add(i.toTrack())
-            }
-            sharedViewModel.simpleMediaServiceHandler?.setQueueData(
-                QueueData(
-                    listTracks = tempList,
-                    firstPlayedTrack = track.toTrack(),
-                    playlistId = LOCAL_PLAYLIST_ID + localPlaylist?.id,
-                    playlistName = "Playlist \"${localPlaylist?.title}\"",
-                    playlistType = PlaylistType.LOCAL_PLAYLIST,
-                    continuation =
-                        if (offset > 0) {
-                            if (filterState == FilterState.OlderFirst) {
-                                (ASC + offset.toString())
-                            } else {
-                                (DESC + offset)
-                            }
-                        } else {
-                            null
-                        },
-                ),
-            )
-            sharedViewModel.loadMediaItemFromTrack(
-                track = track.toTrack(),
-                type = Config.PLAYLIST_CLICK,
-                index = list.indexOf(track),
+        viewModel.onUIEvent(
+            LocalPlaylistUIEvent.ItemClick(
+                videoId = videoId
             )
-        }
+        )
     }
     val onItemMoreClick: (videoId: String) -> Unit = { videoId ->
-        currentItem = listTrack?.findLast { it.videoId == videoId }
+        currentItem = trackPagingItems.itemSnapshotList.findLast { it?.videoId == videoId }
         if (currentItem != null) {
             itemBottomSheetShow = true
         }
@@ -271,57 +248,28 @@ fun PlaylistScreen(
     }
 
     LaunchedEffect(key1 = shouldShowSuggestions) {
-        if (suggestedTracks.isNullOrEmpty()) {
-            localPlaylist?.youtubePlaylistId?.let { viewModel.getSuggestions(it) }
+        if (suggestedTracks.isEmpty() && uiState.syncState != LocalPlaylistEntity.YouTubeSyncState.NotSynced) {
+            viewModel.getSuggestions(uiState.id)
         }
     }
-    val trackPagingItems: LazyPagingItems<SongEntity> = viewModel.tracksPagingState.collectAsLazyPagingItems()
+
     LaunchedEffect(key1 = id) {
-        if (id != viewModel.id.value && id != null) {
+        if (id != uiState.id) {
             Log.w("PlaylistScreen", "new id: $id")
-            viewModel.id.postValue(id)
             viewModel.setOffset(0)
             viewModel.removeListSuggestion()
-            viewModel.removeData()
-            viewModel.getLocalPlaylist(id)
+            viewModel.updatePlaylistState(id, true)
             delay(100)
             firstTimeGetLocalPlaylist = true
         }
     }
-    LaunchedEffect(key1 = shouldDownload) {
-        val listJob = localPlaylist?.tracks
-        if (!listJob.isNullOrEmpty() && shouldDownload) {
-            viewModel.downloadTracks(listJob)
-            localPlaylist?.let { viewModel.downloadFullPlaylistState(it.id) }
-        }
-        shouldDownload = false
-    }
-    LaunchedEffect(key1 = shouldAddAllToQueue) {
-        val listTrackVideoId = localPlaylist?.tracks
-        if (!listTrackVideoId.isNullOrEmpty() && shouldAddAllToQueue) {
-            sharedViewModel.addListLocalToQueue(listTrackVideoId)
-            shouldAddAllToQueue = false
-        }
-    }
-    LaunchedEffect(key1 = localPlaylist, key2 = firstTimeGetLocalPlaylist) {
-        if (localPlaylist != null && firstTimeGetLocalPlaylist && localPlaylist?.id == viewModel.id.value) {
-            Log.w("PlaylistScreen", "new localPlaylist: $localPlaylist")
-            localPlaylist?.id?.let { viewModel.getListTrack(it, offset, filterState, localPlaylist?.tracks?.size ?: 0) }
-            localPlaylist?.downloadState?.let { viewModel.playlistDownloadState.emit(it) }
-            shouldShowSuggestButton =
-                localPlaylist?.youtubePlaylistId != null &&
-                localPlaylist?.youtubePlaylistId != ""
-            firstTimeGetLocalPlaylist = false
-        }
+    LaunchedEffect(key1 = uiState) {
+        shouldShowSuggestButton =
+            !uiState.ytPlaylistId.isNullOrEmpty() && uiState.syncState == LocalPlaylistEntity.YouTubeSyncState.Synced
     }
     LaunchedEffect(key1 = firstItemVisible) {
         shouldHideTopBar = !firstItemVisible
     }
-    LaunchedEffect(key1 = lastItemVisible) {
-        if (lastItemVisible && offset > 0 && !isLoadingMore) {
-            localPlaylist?.id?.let { viewModel.getListTrack(it, offset, filterState, localPlaylist?.tracks?.size ?: 0) }
-        }
-    }
     LaunchedEffect(key1 = palette) {
         val p = palette
         if (p != null) {
@@ -330,6 +278,14 @@ fun PlaylistScreen(
         }
     }
 
+    // Loading dialog
+    val showLoadingDialog by viewModel.showLoadingDialog.collectAsState()
+    if (showLoadingDialog.first) {
+        LoadingDialog(
+            true,
+            showLoadingDialog.second,
+        )
+    }
 //    Box {
     LazyColumn(
         modifier =
@@ -362,7 +318,7 @@ fun PlaylistScreen(
                                 .aspectRatio(1f)
                                 .clip(
                                     RoundedCornerShape(8.dp),
-                                ).angledGradientBackground(bg, 25f),
+                                ).angledGradientBackground(uiState.colors, 25f),
                     )
                     Box(
                         modifier =
@@ -405,7 +361,7 @@ fun PlaylistScreen(
                     ) {
                         CoilImage(
                             imageModel = {
-                                localPlaylist?.thumbnail
+                                uiState.thumbnail
                             },
                             imageOptions =
                                 ImageOptions(
@@ -449,7 +405,7 @@ fun PlaylistScreen(
                             Column(Modifier.padding(horizontal = 32.dp)) {
                                 Spacer(modifier = Modifier.size(25.dp))
                                 Text(
-                                    text = localPlaylist?.title ?: "",
+                                    text = uiState.title,
                                     style = typo.titleLarge,
                                     color = Color.White,
                                 )
@@ -466,7 +422,7 @@ fun PlaylistScreen(
                                         text =
                                             stringResource(
                                                 id = R.string.created_at,
-                                                localPlaylist?.inLibrary?.format(
+                                                uiState.inLibrary?.format(
                                                     DateTimeFormatter.ofPattern(
                                                         "kk:mm - dd MMM uuuu",
                                                     ),
@@ -486,39 +442,7 @@ fun PlaylistScreen(
                                         fillMaxSize = true,
                                         modifier = Modifier.size(36.dp),
                                     ) {
-                                        val temp = listTrack
-                                        if (!temp.isNullOrEmpty()) {
-                                            val tempList: ArrayList<Track> = arrayListOf()
-                                            for (i in temp) {
-                                                tempList.add(i.toTrack())
-                                            }
-                                            sharedViewModel.simpleMediaServiceHandler?.setQueueData(
-                                                QueueData(
-                                                    listTracks = tempList,
-                                                    firstPlayedTrack = temp.firstOrNull()?.toTrack(),
-                                                    playlistId = LOCAL_PLAYLIST_ID + localPlaylist?.id,
-                                                    playlistName = "Playlist \"${localPlaylist?.title}\"",
-                                                    playlistType = PlaylistType.LOCAL_PLAYLIST,
-                                                    continuation =
-                                                        if (offset > 0) {
-                                                            if (filterState == FilterState.OlderFirst) {
-                                                                (ASC + offset.toString())
-                                                            } else {
-                                                                (DESC + offset)
-                                                            }
-                                                        } else {
-                                                            null
-                                                        },
-                                                ),
-                                            )
-                                            sharedViewModel.loadMediaItemFromTrack(
-                                                track = temp.first().toTrack(),
-                                                type = Config.PLAYLIST_CLICK,
-                                                index = 0,
-                                            )
-                                        } else {
-                                            Toast.makeText(context, context.getString(R.string.playlist_is_empty), Toast.LENGTH_SHORT).show()
-                                        }
+                                        viewModel.onUIEvent(LocalPlaylistUIEvent.PlayClick)
                                     }
                                     Spacer(modifier = Modifier.size(5.dp))
                                     Crossfade(targetState = downloadState) {
@@ -582,7 +506,7 @@ fun PlaylistScreen(
                                                     modifier = Modifier.size(36.dp),
                                                 ) {
                                                     Log.w("PlaylistScreen", "downloadState: $downloadState")
-                                                    shouldDownload = true
+                                                    viewModel.downloadFullPlaylist()
                                                 }
                                             }
                                         }
@@ -644,49 +568,7 @@ fun PlaylistScreen(
                                         resId = R.drawable.baseline_shuffle_24,
                                         fillMaxSize = true,
                                     ) {
-                                        val temp = listTrack
-                                        if (!temp.isNullOrEmpty()) {
-                                            val random = temp.random()
-                                            val args = Bundle()
-                                            args.putString("type", Config.ALBUM_CLICK)
-                                            args.putString("videoId", random.videoId)
-                                            args.putString("from", "Playlist \"${(localPlaylist)?.title}\"")
-                                            args.putInt("index", temp.indexOf(random))
-                                            val index = temp.indexOf(random)
-                                            val tempList: ArrayList<Track> = arrayListOf()
-                                            for (i in temp) {
-                                                tempList.add(i.toTrack())
-                                            }
-                                            sharedViewModel.simpleMediaServiceHandler?.setQueueData(
-                                                QueueData(
-                                                    listTracks = tempList,
-                                                    firstPlayedTrack = random.toTrack(),
-                                                    playlistId = LOCAL_PLAYLIST_ID + localPlaylist?.id,
-                                                    playlistName = "Playlist \"${localPlaylist?.title}\"",
-                                                    playlistType = PlaylistType.LOCAL_PLAYLIST,
-                                                    continuation =
-                                                        if (offset > 0) {
-                                                            if (filterState == FilterState.OlderFirst) {
-                                                                (ASC + offset.toString())
-                                                            } else {
-                                                                (DESC + offset)
-                                                            }
-                                                        } else {
-                                                            null
-                                                        },
-                                                ),
-                                            )
-                                            sharedViewModel.loadMediaItemFromTrack(
-                                                track = random.toTrack(),
-                                                type = Config.PLAYLIST_CLICK,
-                                                index = index,
-                                            )
-                                            if (!sharedViewModel.controllerState.value.isShuffle) {
-                                                sharedViewModel.onUIEvent(UIEvent.Shuffle)
-                                            }
-                                        } else {
-                                            Toast.makeText(context, context.getString(R.string.playlist_is_empty), Toast.LENGTH_SHORT).show()
-                                        }
+                                        viewModel.onUIEvent(LocalPlaylistUIEvent.ShuffleClick)
                                     }
                                     Spacer(Modifier.size(5.dp))
                                     RippleIconButton(
@@ -713,7 +595,7 @@ fun PlaylistScreen(
                                     text =
                                         stringResource(
                                             id = R.string.album_length,
-                                            (localPlaylist?.tracks?.size ?: 0).toString(),
+                                            (uiState.trackCount).toString(),
                                             "",
                                         ),
                                     color = Color.White,
@@ -745,7 +627,7 @@ fun PlaylistScreen(
                                                 )
                                             } else {
                                                 Column {
-                                                    suggestedTracks?.forEachIndexed { index, track ->
+                                                    suggestedTracks.forEachIndexed { index, track ->
                                                         SuggestItems(
                                                             track = track,
                                                             isPlaying = playingTrack?.mediaId == track.videoId,
@@ -755,31 +637,7 @@ fun PlaylistScreen(
                                                                 )
                                                             },
                                                             onClickListener = {
-                                                                val tempList: ArrayList<Track> = arrayListOf()
-                                                                for (i in suggestedTracks!!) {
-                                                                    tempList.add(i)
-                                                                }
-                                                                sharedViewModel.simpleMediaServiceHandler?.setQueueData(
-                                                                    QueueData(
-                                                                        listTracks = tempList,
-                                                                        firstPlayedTrack = track,
-                                                                        playlistId = "RDAMVM${track.videoId}",
-                                                                        playlistName = "${
-                                                                            context.getString(
-                                                                                R.string.playlist,
-                                                                            )
-                                                                        } \"${localPlaylist?.title}\" ${
-                                                                            context.getString(R.string.suggest)
-                                                                        }",
-                                                                        playlistType = PlaylistType.RADIO,
-                                                                        continuation = null,
-                                                                    ),
-                                                                )
-                                                                sharedViewModel.loadMediaItemFromTrack(
-                                                                    track = track,
-                                                                    type = Config.SONG_CLICK,
-                                                                    index = 0,
-                                                                )
+                                                                viewModel.onUIEvent(LocalPlaylistUIEvent.SuggestionsItemClick(track.videoId))
                                                             },
                                                         )
                                                     }
@@ -866,7 +724,7 @@ fun PlaylistScreen(
                                     },
                                 ) {
                                     Row(verticalAlignment = Alignment.CenterVertically) {
-                                        if (filterState == FilterState.OlderFirst) {
+                                        if (uiState.filterState == FilterState.OlderFirst) {
                                             Icon(
                                                 painter = painterResource(id = R.drawable.baseline_arrow_drop_down_24),
                                                 contentDescription = "Older First",
@@ -881,6 +739,7 @@ fun PlaylistScreen(
                                         }
                                         Spacer(modifier = Modifier.size(3.dp))
                                         Text(text = stringResource(id = R.string.added_date), style = typo.bodySmall, color = Color.White)
+                                        Spacer(modifier = Modifier.size(8.dp))
                                     }
                                 }
                             }
@@ -898,17 +757,21 @@ fun PlaylistScreen(
                         songEntity = item,
                         onMoreClickListener = { onItemMoreClick(it) },
                         onClickListener = {
+                            Log.w("PlaylistScreen", "index: $index")
                             onPlaylistItemClick(it)
                         },
-                        modifier = Modifier.animateItemPlacement(),
+                        modifier = Modifier.animateItem(),
                     )
                 } else {
                     PlaylistItems(
                         isPlaying = false,
                         songEntity = item,
                         onMoreClickListener = { onItemMoreClick(it) },
-                        onClickListener = { onPlaylistItemClick(it) },
-                        modifier = Modifier.animateItemPlacement(),
+                        onClickListener = {
+                            Log.w("PlaylistScreen", "index: $index")
+                            onPlaylistItemClick(it)
+                        },
+                        modifier = Modifier.animateItem(),
                     )
                 }
             }
@@ -926,100 +789,53 @@ fun PlaylistScreen(
                 }
             }
         }
-        item {
-            AnimatedVisibility(visible = isLoadingMore) {
-                Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
-                    Spacer(modifier = Modifier.height(15.dp))
-                    CenterLoadingBox(modifier = Modifier.size(32.dp))
-                    Spacer(modifier = Modifier.height(15.dp))
-                }
-            }
-        }
         item {
             EndOfPage()
         }
     }
     if (itemBottomSheetShow) {
-        val track = currentItem
-        if (track != null) {
-            viewModel.getSongEntity(track)
-            NowPlayingBottomSheet(
-                isBottomSheetVisible = itemBottomSheetShow,
-                onDelete = {
-                    localPlaylist?.id?.let { id ->
-                        Log.w("PlaylistScreen", "Delete: $track")
-                        viewModel.deleteItem(id, track)
-                        itemBottomSheetShow = false
-                    }
-                },
-                onDismiss = { itemBottomSheetShow = false },
-                navController = navController,
-                sharedViewModel = sharedViewModel,
-                songEntity = viewModel.songEntity.collectAsState(),
-                onToggleLike = { checked ->
-                    if (checked) {
-                        viewModel.updateLikeStatus(track.videoId, 1)
-                    } else {
-                        viewModel.updateLikeStatus(track.videoId, 0)
-                    }
-                },
-                getLocalPlaylist = { sharedViewModel.getAllLocalPlaylist() },
-                listLocalPlaylist = sharedViewModel.localPlaylist.collectAsState(),
-            )
-        }
+        val track = currentItem ?: return
+        NowPlayingBottomSheet(
+            isBottomSheetVisible = itemBottomSheetShow,
+            onDelete = { viewModel.deleteItem(uiState.id, track) },
+            onDismiss = { itemBottomSheetShow = false },
+            navController = navController,
+            songEntity = track,
+        )
     }
     if (playlistBottomSheetShow) {
         Log.w("PlaylistScreen", "PlaylistBottomSheet")
-        localPlaylist?.let {
-            LocalPlaylistBottomSheet(
-                isBottomSheetVisible = playlistBottomSheetShow,
-                onDismiss = { playlistBottomSheetShow = false },
-                localPlaylist = it,
-                onEditTitle =
-                    { newTitle ->
-                        viewModel.updatePlaylistTitle(newTitle, it.id)
-                        if (it.syncedWithYouTubePlaylist == 1) {
-                            viewModel.updateYouTubePlaylistTitle(
-                                newTitle,
-                                it.youtubePlaylistId!!,
-                            )
-                        }
-                    },
-                onEditThumbnail =
-                    { thumbUri ->
-                        viewModel.updatePlaylistThumbnail(thumbUri, it.id)
-                    },
-                onAddToQueue = {
-                    /*
-                    Add to queue in LaunchedEffect
-                     */
-                    shouldAddAllToQueue = true
-                },
-                onSync = {
-                    if (it.syncedWithYouTubePlaylist == 1) {
-                        showUnsyncAlertDialog = true
-                    } else {
-                        showSyncAlertDialog = true
-                    }
+        LocalPlaylistBottomSheet(
+            isBottomSheetVisible = playlistBottomSheetShow,
+            onDismiss = { playlistBottomSheetShow = false },
+            title = uiState.title,
+            ytPlaylistId = uiState.ytPlaylistId,
+            onEditTitle =
+                { newTitle ->
+                    viewModel.updatePlaylistTitle(newTitle, uiState.id)
                 },
-                onUpdatePlaylist = {
-                    it.tracks?.let { tracks ->
-                        it.youtubePlaylistId?.let { it1 ->
-                            viewModel.updateListTrackSynced(
-                                it.id,
-                                tracks,
-                                it1,
-                            )
-                            viewModel.getSetVideoId(it1)
-                        }
-                    }
+            onEditThumbnail =
+                { thumbUri ->
+                    viewModel.updatePlaylistThumbnail(thumbUri, uiState.id)
                 },
-                onDelete = {
-                    viewModel.deletePlaylist(it.id)
-                    navController.popBackStack()
-                },
-            )
-        }
+            onAddToQueue = {
+                viewModel.addAllToQueue()
+            },
+            onSync = {
+                if (uiState.syncState == LocalPlaylistEntity.YouTubeSyncState.Synced) {
+                    showUnsyncAlertDialog = true
+                } else {
+                    showSyncAlertDialog = true
+                }
+            },
+            onUpdatePlaylist = {
+                viewModel.updateListTrackSynced(uiState.id)
+            },
+            onDelete = {
+                viewModel.deletePlaylist(uiState.id)
+                navController.popBackStack()
+            },
+        )
     }
     if (showSyncAlertDialog) {
         AlertDialog(
@@ -1028,16 +844,8 @@ fun PlaylistScreen(
             onDismissRequest = { showSyncAlertDialog = false },
             confirmButton = {
                 TextButton(onClick = {
-                    localPlaylist?.let {
-                        Toast
-                            .makeText(
-                                context,
-                                context.getString(R.string.syncing),
-                                Toast.LENGTH_SHORT,
-                            ).show()
-                        viewModel.syncPlaylistWithYouTubePlaylist(it)
+                        viewModel.syncPlaylistWithYouTubePlaylist(uiState.id)
                         showSyncAlertDialog = false
-                    }
                 }) {
                     Text(text = stringResource(id = R.string.yes))
                 }
@@ -1058,15 +866,7 @@ fun PlaylistScreen(
             onDismissRequest = { showUnsyncAlertDialog = false },
             confirmButton = {
                 TextButton(onClick = {
-                    localPlaylist?.let {
-                        Toast
-                            .makeText(
-                                context,
-                                context.getString(R.string.unsyncing),
-                                Toast.LENGTH_SHORT,
-                            ).show()
-                        viewModel.unsyncPlaylistWithYouTubePlaylist(it)
-                    }
+                    viewModel.unsyncPlaylistWithYouTubePlaylist(uiState.id)
                     showUnsyncAlertDialog = false
                 }) {
                     Text(text = stringResource(id = R.string.yes))
@@ -1089,7 +889,7 @@ fun PlaylistScreen(
         TopAppBar(
             title = {
                 Text(
-                    text = localPlaylist?.title ?: stringResource(id = R.string.playlist),
+                    text = uiState.title,
                     style = typo.titleMedium,
                 )
             },
@@ -1109,7 +909,7 @@ fun PlaylistScreen(
                 TopAppBarDefaults.topAppBarColors(
                     containerColor = Color.Transparent,
                 ),
-            modifier = Modifier.angledGradientBackground(bg, 90f),
+            modifier = Modifier.angledGradientBackground(uiState.colors, 90f),
         )
     }
 //    }
diff --git a/app/src/main/java/com/maxrave/simpmusic/ui/screen/player/NowPlayingScreen.kt b/app/src/main/java/com/maxrave/simpmusic/ui/screen/player/NowPlayingScreen.kt
index ac98b1ef..2e4b6ac2 100644
--- a/app/src/main/java/com/maxrave/simpmusic/ui/screen/player/NowPlayingScreen.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/ui/screen/player/NowPlayingScreen.kt
@@ -62,7 +62,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.LinearProgressIndicator
-import androidx.compose.material3.LocalMinimumInteractiveComponentEnforcement
+import androidx.compose.material3.LocalMinimumInteractiveComponentSize
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.material3.Text
@@ -87,6 +87,7 @@ import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
@@ -95,17 +96,14 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import androidx.core.net.toUri
 import androidx.core.os.bundleOf
 import androidx.media3.common.util.UnstableApi
-import androidx.media3.exoplayer.offline.DownloadRequest
-import androidx.media3.exoplayer.offline.DownloadService
 import androidx.navigation.NavController
 import com.maxrave.simpmusic.R
-import com.maxrave.simpmusic.common.DownloadState
-import com.maxrave.simpmusic.data.db.entities.PairSongLocalPlaylist
 import com.maxrave.simpmusic.extension.GradientAngle
 import com.maxrave.simpmusic.extension.GradientOffset
 import com.maxrave.simpmusic.extension.formatDuration
@@ -113,9 +111,7 @@ import com.maxrave.simpmusic.extension.getBrushListColorFromPalette
 import com.maxrave.simpmusic.extension.getScreenSizeInfo
 import com.maxrave.simpmusic.extension.navigateSafe
 import com.maxrave.simpmusic.extension.parseTimestampToMilliseconds
-import com.maxrave.simpmusic.extension.removeConflicts
 import com.maxrave.simpmusic.service.RepeatState
-import com.maxrave.simpmusic.service.test.download.MusicDownloadService
 import com.maxrave.simpmusic.ui.component.CenterLoadingBox
 import com.maxrave.simpmusic.ui.component.DescriptionView
 import com.maxrave.simpmusic.ui.component.FullscreenLyricsSheet
@@ -142,8 +138,6 @@ import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.distinctUntilChangedBy
-import kotlinx.coroutines.flow.mapNotNull
-import java.time.LocalDateTime
 
 @OptIn(ExperimentalFoundationApi::class)
 @UnstableApi
@@ -151,30 +145,29 @@ import java.time.LocalDateTime
 @Composable
 fun NowPlayingScreen(
     sharedViewModel: SharedViewModel,
-    navController: NavController
+    navController: NavController,
 ) {
     val screenInfo = getScreenSizeInfo()
 
+    @Suppress("ktlint:standard:property-naming")
     val TAG = "NowPlayingScreen"
     val context = LocalContext.current
     val localDensity = LocalDensity.current
     val uriHandler = LocalUriHandler.current
 
-    //ViewModel State
+    // ViewModel State
     val controllerState by sharedViewModel.controllerState.collectAsState()
     val screenDataState by sharedViewModel.nowPlayingScreenData.collectAsState()
     val timelineState by sharedViewModel.timeline.collectAsState()
     val likeStatus by sharedViewModel.likeStatus.collectAsState()
 
-    val songEntity = sharedViewModel.simpleMediaServiceHandler?.nowPlayingState?.mapNotNull { it.songEntity }?.collectAsState(initial = null)
-
     val shouldShowVideo by sharedViewModel.getVideo.collectAsState()
 
     LaunchedEffect(key1 = timelineState) {
         Log.w(TAG, "Loading: ${timelineState.loading}")
     }
 
-    //State
+    // State
     val mainScrollState = rememberScrollState()
 
     var showHideMiddleLayout by rememberSaveable {
@@ -189,14 +182,16 @@ fun NowPlayingScreen(
         mutableStateOf(false)
     }
 
-    //Palette state
+    // Palette state
     var palette by rememberPaletteState(null)
-    val startColor = remember {
-        Animatable(md_theme_dark_background)
-    }
-    val endColor = remember {
-        Animatable(md_theme_dark_background)
-    }
+    val startColor =
+        remember {
+            Animatable(md_theme_dark_background)
+        }
+    val endColor =
+        remember {
+            Animatable(md_theme_dark_background)
+        }
     val gradientOffset by remember {
         mutableStateOf(GradientOffset(GradientAngle.CW135))
     }
@@ -209,7 +204,7 @@ fun NowPlayingScreen(
         }
     }
 
-    //Height
+    // Height
     var topAppBarHeightDp by rememberSaveable {
         mutableIntStateOf(0)
     }
@@ -224,19 +219,23 @@ fun NowPlayingScreen(
     }
     val minimumPaddingDp by rememberSaveable {
         mutableIntStateOf(
-            30
+            30,
         )
     }
     LaunchedEffect(
-        topAppBarHeightDp, screenInfo, infoLayoutHeightDp, minimumPaddingDp
+        topAppBarHeightDp,
+        screenInfo,
+        infoLayoutHeightDp,
+        minimumPaddingDp,
     ) {
         if (topAppBarHeightDp > 0 && middleLayoutHeightDp > 0 && infoLayoutHeightDp > 0 && screenInfo.hDP > 0) {
             val result = (screenInfo.hDP - topAppBarHeightDp - middleLayoutHeightDp - infoLayoutHeightDp - minimumPaddingDp) / 2
-            middleLayoutPaddingDp = if (result > minimumPaddingDp) {
-                result
-            } else {
-                minimumPaddingDp
-            }
+            middleLayoutPaddingDp =
+                if (result > minimumPaddingDp) {
+                    result
+                } else {
+                    minimumPaddingDp
+                }
         }
     }
 
@@ -244,26 +243,29 @@ fun NowPlayingScreen(
         mutableFloatStateOf(0f)
     }
     LaunchedEffect(key1 = timelineState) {
-        sliderValue = if (timelineState.total > 0L) {
-            timelineState.current.toFloat() * 100 / timelineState.total.toFloat()
-        } else {
-            0f
-        }
+        sliderValue =
+            if (timelineState.total > 0L) {
+                timelineState.current.toFloat() * 100 / timelineState.total.toFloat()
+            } else {
+                0f
+            }
     }
     LaunchedEffect(key1 = screenDataState) {
         showHideMiddleLayout = screenDataState.canvasData == null
     }
 
-    //Show ControlLayout Or Show Artist Badge
+    // Show ControlLayout Or Show Artist Badge
     var showHideControlLayout by rememberSaveable {
         mutableStateOf(true)
     }
     val controlLayoutAlpha: Float by animateFloatAsState(
         targetValue = if (showHideControlLayout) 1f else 0f,
-        animationSpec = tween(
-            durationMillis = 500,
-            easing = LinearEasing,
-        ), label = "ControlLayoutAlpha"
+        animationSpec =
+            tween(
+                durationMillis = 500,
+                easing = LinearEasing,
+            ),
+        label = "ControlLayoutAlpha",
     )
 
     var showHideJob by remember {
@@ -273,7 +275,7 @@ fun NowPlayingScreen(
     LaunchedEffect(key1 = showHideJob) {
         if (!showHideJob) {
             delay(5000)
-            if (mainScrollState.value == 0){ showHideControlLayout = false }
+            if (mainScrollState.value == 0) showHideControlLayout = false
             showHideJob = true
         }
     }
@@ -293,7 +295,6 @@ fun NowPlayingScreen(
         }
     }
 
-
     LaunchedEffect(key1 = showHideControlLayout) {
         if (showHideControlLayout && screenDataState.canvasData != null && mainScrollState.value == 0) {
             showHideJob = false
@@ -313,7 +314,7 @@ fun NowPlayingScreen(
             }
     }
 
-    //Fullscreen overlay
+    // Fullscreen overlay
     var showHideFullscreenOverlay by rememberSaveable {
         mutableStateOf(false)
     }
@@ -325,80 +326,16 @@ fun NowPlayingScreen(
         }
     }
 
-    if (showSheet && songEntity != null) {
+    if (showSheet) {
         NowPlayingBottomSheet(
             isBottomSheetVisible = showSheet,
             onDismiss = {
                 showSheet = false
             },
             navController = navController,
-            sharedViewModel = sharedViewModel,
-            songEntity = songEntity,
-            onToggleLike = { sharedViewModel.onUIEvent(UIEvent.ToggleLike) },
-            getLocalPlaylist = { sharedViewModel.getAllLocalPlaylist() },
-            listLocalPlaylist = sharedViewModel.localPlaylist.collectAsState(),
-            onDownload = {
-                songEntity.value?.let { song ->
-                    sharedViewModel.updateDownloadState(
-                        song.videoId,
-                        DownloadState.STATE_PREPARING,
-                    )
-                    val downloadRequest =
-                        DownloadRequest
-                            .Builder(
-                                song.videoId,
-                                song.videoId.toUri(),
-                            ).setData(song.title.toByteArray())
-                            .setCustomCacheKey(song.videoId)
-                            .build()
-                    DownloadService.sendAddDownload(
-                        context,
-                        MusicDownloadService::class.java,
-                        downloadRequest,
-                        false,
-                    )
-                }
-            },
-            onSleepTimer = {
-                sharedViewModel.setSleepTimer(it)
-            },
-            onMainLyricsProvider = { provider ->
-                sharedViewModel.setLyricsProvider(provider)
-            },
-            onAddToLocalPlaylist = { playlist ->
-                val song = songEntity.value ?: return@NowPlayingBottomSheet
-                val tempTrack = ArrayList<String>()
-                if (playlist.tracks != null) {
-                    tempTrack.addAll(playlist.tracks)
-                }
-                if (!tempTrack.contains(
-                        song.videoId,
-                    ) &&
-                    playlist.syncedWithYouTubePlaylist == 1 &&
-                    playlist.youtubePlaylistId != null
-                ) {
-                    sharedViewModel.addToYouTubePlaylist(
-                        playlist.id,
-                        playlist.youtubePlaylistId,
-                        song.videoId,
-                    )
-                }
-                if (!tempTrack.contains(song.videoId)) {
-                    sharedViewModel.insertPairSongLocalPlaylist(
-                        PairSongLocalPlaylist(
-                            playlistId = playlist.id,
-                            songId = song.videoId,
-                            position = playlist.tracks?.size ?: 0,
-                            inPlaylist = LocalDateTime.now(),
-                        ),
-                    )
-                    tempTrack.add(song.videoId)
-                }
-                sharedViewModel.updateLocalPlaylistTracks(
-                    tempTrack.removeConflicts(),
-                    playlist.id,
-                )
-            }
+            songEntity = null, // Auto set now playing
+            setSleepTimerEnable = true,
+            changeMainLyricsProviderEnable = true,
         )
     }
 
@@ -406,7 +343,7 @@ fun NowPlayingScreen(
         FullscreenLyricsSheet(
             sharedViewModel = sharedViewModel,
             color = startColor.value,
-            navController = navController
+            navController = navController,
         ) {
             showFullscreenLyrics = false
         }
@@ -415,45 +352,47 @@ fun NowPlayingScreen(
     Column(
         Modifier
             .verticalScroll(
-                mainScrollState
-            )
-            .then(
+                mainScrollState,
+            ).then(
                 if (showHideMiddleLayout) {
                     Modifier.background(
                         Brush.linearGradient(
-                            colors = listOf(
-                                startColor.value, endColor
-                                    .value
-                            ),
+                            colors =
+                                listOf(
+                                    startColor.value,
+                                    endColor
+                                        .value,
+                                ),
                             start = gradientOffset.start,
-                            end = gradientOffset.end
-                        )
+                            end = gradientOffset.end,
+                        ),
                     )
                 } else {
                     Modifier.background(md_theme_dark_background)
-                }
-            )
+                },
+            ),
     ) {
         Box(modifier = Modifier.fillMaxWidth()) {
-            //Canvas Layout
-            //TODO: Canvas Layout
+            // Canvas Layout
             Box(
-                modifier = Modifier
-                    .height(screenInfo.hDP.dp)
-                    .fillMaxWidth()
-                    .alpha(
-                        if (!showHideMiddleLayout) 1f else 0f
-                    )
+                modifier =
+                    Modifier
+                        .height(screenInfo.hDP.dp)
+                        .fillMaxWidth()
+                        .alpha(
+                            if (!showHideMiddleLayout) 1f else 0f,
+                        ),
             ) {
-                //Canvas Layout
-                //TODO: Canvas Layout
+                // Canvas Layout
                 Crossfade(targetState = screenDataState.canvasData?.isVideo) { isVideo ->
                     if (isVideo == true) {
                         screenDataState.canvasData?.url?.let {
                             MediaPlayerView(
-                                url = it, modifier = Modifier
-                                    .fillMaxHeight()
-                                    .wrapContentWidth(unbounded = true, align = Alignment.CenterHorizontally)
+                                url = it,
+                                modifier =
+                                    Modifier
+                                        .fillMaxHeight()
+                                        .wrapContentWidth(unbounded = true, align = Alignment.CenterHorizontally),
                             )
                         }
                     } else if (isVideo == false) {
@@ -461,55 +400,65 @@ fun NowPlayingScreen(
                             imageModel = {
                                 screenDataState.canvasData?.url
                             },
-                            modifier = Modifier.fillMaxSize()
+                            modifier = Modifier.fillMaxSize(),
                         )
                     }
                 }
                 Crossfade(
                     targetState = (screenDataState.canvasData != null && showHideControlLayout),
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .align(
-                            Alignment.BottomCenter
-                        )
+                    modifier =
+                        Modifier
+                            .fillMaxSize()
+                            .align(
+                                Alignment.BottomCenter,
+                            ),
                 ) {
                     if (it) {
                         Box(
-                            modifier = Modifier
-                                .fillMaxSize()
-                                .background(
-                                    Brush.verticalGradient(
-                                        colorStops = arrayOf(
-                                            0.8f to overlay,
-                                            1f to Color.Black
+                            modifier =
+                                Modifier
+                                    .fillMaxSize()
+                                    .background(
+                                        Brush.verticalGradient(
+                                            colorStops =
+                                                arrayOf(
+                                                    0.8f to overlay,
+                                                    1f to Color.Black,
+                                                ),
                                         ),
-                                    )
-                                )
+                                    ),
                         )
                     }
-
                 }
             }
 
-            TopAppBar (
-                modifier = Modifier
-                    .align(Alignment.TopCenter)
-                    .onGloballyPositioned {
-                        topAppBarHeightDp = with(localDensity) { it.size.height.toDp().value.toInt() }
-                    },
-                colors = TopAppBarDefaults.topAppBarColors().copy(
-                    containerColor = Color.Transparent
-                ),
+            TopAppBar(
+                modifier =
+                    Modifier
+                        .align(Alignment.TopCenter)
+                        .onGloballyPositioned {
+                            topAppBarHeightDp =
+                                with(localDensity) {
+                                    it.size.height
+                                        .toDp()
+                                        .value
+                                        .toInt()
+                                }
+                        },
+                colors =
+                    TopAppBarDefaults.topAppBarColors().copy(
+                        containerColor = Color.Transparent,
+                    ),
                 title = {
                     Column(
                         modifier = Modifier.fillMaxWidth(),
                         horizontalAlignment = Alignment.CenterHorizontally,
-                        verticalArrangement = Arrangement.Center
+                        verticalArrangement = Arrangement.Center,
                     ) {
                         Text(
                             text = stringResource(id = R.string.now_playing_upper),
                             style = typo.bodyMedium,
-                            color = Color.White
+                            color = Color.White,
                         )
                         Text(
                             text = screenDataState.playlistName,
@@ -517,11 +466,12 @@ fun NowPlayingScreen(
                             color = Color.White,
                             textAlign = TextAlign.Center,
                             maxLines = 1,
-                            modifier = Modifier
-                                .fillMaxWidth()
-                                .wrapContentHeight(align = Alignment.CenterVertically)
-                                .basicMarquee(animationMode = MarqueeAnimationMode.Immediately)
-                                .focusable()
+                            modifier =
+                                Modifier
+                                    .fillMaxWidth()
+                                    .wrapContentHeight(align = Alignment.CenterVertically)
+                                    .basicMarquee(animationMode = MarqueeAnimationMode.Immediately)
+                                    .focusable(),
                         )
                     }
                 },
@@ -532,7 +482,7 @@ fun NowPlayingScreen(
                         Icon(
                             painter = painterResource(id = R.drawable.baseline_keyboard_arrow_down_24),
                             contentDescription = "",
-                            tint = Color.White
+                            tint = Color.White,
                         )
                     }
                 },
@@ -543,189 +493,204 @@ fun NowPlayingScreen(
                         Icon(
                             painter = painterResource(id = R.drawable.baseline_more_vert_24),
                             contentDescription = "",
-                            tint = Color.White
+                            tint = Color.White,
                         )
                     }
                 },
             )
             Column {
-                Spacer(modifier = Modifier.height(
-                    topAppBarHeightDp.dp
-                )
+                Spacer(
+                    modifier =
+                        Modifier.height(
+                            topAppBarHeightDp.dp,
+                        ),
                 )
                 Box {
                     Column(
                         Modifier
-                            .fillMaxWidth()
+                            .fillMaxWidth(),
                     ) {
-                        Spacer(modifier = Modifier
-                            .animateContentSize()
-                            .height(
-                                middleLayoutPaddingDp.dp
-                            )
-                            .fillMaxWidth()
+                        Spacer(
+                            modifier =
+                                Modifier
+                                    .animateContentSize()
+                                    .height(
+                                        middleLayoutPaddingDp.dp,
+                                    ).fillMaxWidth(),
                         )
 
-                        //Middle Layout
-                        Box(modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(horizontal = 40.dp)
-                            .onGloballyPositioned {
-                                middleLayoutHeightDp = with(localDensity) { it.size.height.toDp().value.toInt() }
-                            }
-                            .alpha(
-                                if (showHideMiddleLayout) 1f else 0f
-                            )
-                            .aspectRatio(1f)) {
-
-                            //IS SONG => Show Artwork
+                        // Middle Layout
+                        Box(
+                            modifier =
+                                Modifier
+                                    .fillMaxWidth()
+                                    .padding(horizontal = 40.dp)
+                                    .onGloballyPositioned {
+                                        middleLayoutHeightDp =
+                                            with(localDensity) {
+                                                it.size.height
+                                                    .toDp()
+                                                    .value
+                                                    .toInt()
+                                            }
+                                    }.alpha(
+                                        if (showHideMiddleLayout) 1f else 0f,
+                                    ).aspectRatio(1f),
+                        ) {
+                            // IS SONG => Show Artwork
                             CoilImage(
                                 imageModel =
-                                {
-                                    screenDataState.thumbnailURL?.toUri()
-                                },
+                                    {
+                                        screenDataState.thumbnailURL?.toUri()
+                                    },
                                 previewPlaceholder = painterResource(id = R.drawable.holder),
-                                modifier = Modifier
-                                    .align(Alignment.Center)
-                                    .fillMaxWidth()
-                                    .aspectRatio(
-                                        if (!screenDataState.isVideo) 1f else 16f / 9
-                                    )
-                                    .clip(
-                                        RoundedCornerShape(8.dp)
-                                    )
-                                    .alpha(
-                                        if (!screenDataState.isVideo || !shouldShowVideo) 1f else 0f
-                                    ),
+                                modifier =
+                                    Modifier
+                                        .align(Alignment.Center)
+                                        .fillMaxWidth()
+                                        .aspectRatio(
+                                            if (!screenDataState.isVideo) 1f else 16f / 9,
+                                        ).clip(
+                                            RoundedCornerShape(8.dp),
+                                        ).alpha(
+                                            if (!screenDataState.isVideo || !shouldShowVideo) 1f else 0f,
+                                        ),
                                 loading = {
                                     CenterLoadingBox(modifier = Modifier.fillMaxSize())
                                 },
-                                component = rememberImageComponent {
-                                    +CrossfadePlugin(duration = 200)
-                                    +PalettePlugin(
-                                        paletteLoadedListener = {
-                                            palette = it
-                                        },
-                                        useCache = true,
-                                    )
-                                    +PlaceholderPlugin.Loading(painterResource(id = R.drawable.holder))
-                                    +PlaceholderPlugin.Failure(painterResource(id = R.drawable.holder))
-                                }
+                                component =
+                                    rememberImageComponent {
+                                        +CrossfadePlugin(duration = 200)
+                                        +PalettePlugin(
+                                            paletteLoadedListener = {
+                                                palette = it
+                                            },
+                                            useCache = true,
+                                        )
+                                        +PlaceholderPlugin.Loading(painterResource(id = R.drawable.holder))
+                                        +PlaceholderPlugin.Failure(painterResource(id = R.drawable.holder))
+                                    },
                             )
 
-                            //IS VIDEO => Show Video
+                            // IS VIDEO => Show Video
                             androidx.compose.animation.AnimatedVisibility(
                                 visible = screenDataState.isVideo && shouldShowVideo,
-                                modifier = Modifier.align(Alignment.Center)
+                                modifier = Modifier.align(Alignment.Center),
                             ) {
                                 Box(
-                                    modifier = Modifier
-                                        .fillMaxWidth()
-                                        .aspectRatio(16f / 9)
-                                        .clip(
-                                            RoundedCornerShape(8.dp)
-                                        )
-                                        .background(
-                                            md_theme_dark_background
-                                        )
+                                    modifier =
+                                        Modifier
+                                            .fillMaxWidth()
+                                            .aspectRatio(16f / 9)
+                                            .clip(
+                                                RoundedCornerShape(8.dp),
+                                            ).background(
+                                                md_theme_dark_background,
+                                            ),
                                 ) {
-                                    //Player
-                                    //TODO: Player
+                                    // Player
                                     Box(Modifier.fillMaxSize()) {
-                                        sharedViewModel.simpleMediaServiceHandler?.player?.let {
-                                            MediaPlayerView(player = it, modifier = Modifier.align(Alignment.Center))
-                                        }
+                                        MediaPlayerView(player = sharedViewModel.getPlayer(), modifier = Modifier.align(Alignment.Center))
                                     }
                                     Box(
-                                        modifier = Modifier
-                                            .fillMaxSize()
-                                            .clickable(
-                                                onClick = { showHideFullscreenOverlay = !showHideFullscreenOverlay },
-                                                indication = null,
-                                                interactionSource = remember {
-                                                    MutableInteractionSource()
-                                                }
-                                            )
+                                        modifier =
+                                            Modifier
+                                                .fillMaxSize()
+                                                .clickable(
+                                                    onClick = { showHideFullscreenOverlay = !showHideFullscreenOverlay },
+                                                    indication = null,
+                                                    interactionSource =
+                                                        remember {
+                                                            MutableInteractionSource()
+                                                        },
+                                                ),
                                     ) {
                                         Crossfade(
                                             targetState = showHideFullscreenOverlay,
                                         ) {
                                             if (it) {
                                                 Box(
-                                                    modifier = Modifier
-                                                        .fillMaxSize()
-                                                        .background(
-                                                            Brush.verticalGradient(
-                                                                colorStops = arrayOf(
-                                                                    0.03f to blackMoreOverlay,
-                                                                    0.15f to overlay,
-                                                                    0.8f to Color.Transparent,
-                                                                )
-                                                            )
-                                                        )
-                                                )
-                                                {
+                                                    modifier =
+                                                        Modifier
+                                                            .fillMaxSize()
+                                                            .background(
+                                                                Brush.verticalGradient(
+                                                                    colorStops =
+                                                                        arrayOf(
+                                                                            0.03f to blackMoreOverlay,
+                                                                            0.15f to overlay,
+                                                                            0.8f to Color.Transparent,
+                                                                        ),
+                                                                ),
+                                                            ),
+                                                ) {
                                                     IconButton(onClick = {
                                                         navController.navigateSafe(
-                                                            R.id.action_global_fullscreenFragment
+                                                            R.id.action_global_fullscreenFragment,
                                                         )
                                                     }, Modifier.align(Alignment.TopEnd)) {
                                                         Icon(
                                                             painter = painterResource(id = R.drawable.baseline_fullscreen_24),
                                                             contentDescription = "",
-                                                            tint = Color.White
+                                                            tint = Color.White,
                                                         )
                                                     }
                                                     Row(
                                                         Modifier
                                                             .align(Alignment.Center)
                                                             .fillMaxWidth(),
-                                                        horizontalArrangement = Arrangement.SpaceEvenly
+                                                        horizontalArrangement = Arrangement.SpaceEvenly,
                                                     ) {
                                                         FilledTonalIconButton(
-                                                            colors = IconButtonDefaults.iconButtonColors().copy(
-                                                                containerColor = Color.Transparent
-                                                            ),
-                                                            modifier = Modifier
-                                                                .size(48.dp)
-                                                                .aspectRatio(1f)
-                                                                .clip(
-                                                                    CircleShape
+                                                            colors =
+                                                                IconButtonDefaults.iconButtonColors().copy(
+                                                                    containerColor = Color.Transparent,
                                                                 ),
+                                                            modifier =
+                                                                Modifier
+                                                                    .size(48.dp)
+                                                                    .aspectRatio(1f)
+                                                                    .clip(
+                                                                        CircleShape,
+                                                                    ),
                                                             onClick = {
                                                                 sharedViewModel.onUIEvent(UIEvent.Backward)
-                                                            }
+                                                            },
                                                         ) {
                                                             Icon(
                                                                 imageVector = Icons.Filled.Replay5,
                                                                 tint = Color.White,
                                                                 contentDescription = "",
-                                                                modifier = Modifier
-                                                                    .size(36.dp)
-                                                                    .alpha(0.8f)
+                                                                modifier =
+                                                                    Modifier
+                                                                        .size(36.dp)
+                                                                        .alpha(0.8f),
                                                             )
                                                         }
                                                         FilledTonalIconButton(
-                                                            colors = IconButtonDefaults.iconButtonColors().copy(
-                                                                containerColor = Color.Transparent
-                                                            ),
-                                                            modifier = Modifier
-                                                                .size(48.dp)
-                                                                .aspectRatio(1f)
-                                                                .clip(
-                                                                    CircleShape
+                                                            colors =
+                                                                IconButtonDefaults.iconButtonColors().copy(
+                                                                    containerColor = Color.Transparent,
                                                                 ),
+                                                            modifier =
+                                                                Modifier
+                                                                    .size(48.dp)
+                                                                    .aspectRatio(1f)
+                                                                    .clip(
+                                                                        CircleShape,
+                                                                    ),
                                                             onClick = {
                                                                 sharedViewModel.onUIEvent(UIEvent.Forward)
-                                                            }
+                                                            },
                                                         ) {
                                                             Icon(
                                                                 imageVector = Icons.Filled.Forward5,
                                                                 tint = Color.White,
                                                                 contentDescription = "",
-                                                                modifier = Modifier
-                                                                    .size(36.dp)
-                                                                    .alpha(0.8f)
+                                                                modifier =
+                                                                    Modifier
+                                                                        .size(36.dp)
+                                                                        .alpha(0.8f),
                                                             )
                                                         }
                                                     }
@@ -737,29 +702,36 @@ fun NowPlayingScreen(
                             }
                         }
 
-                        Spacer(modifier = Modifier
-                            .animateContentSize()
-                            .height(
-                                middleLayoutPaddingDp.dp
-                            )
-                            .fillMaxWidth()
+                        Spacer(
+                            modifier =
+                                Modifier
+                                    .animateContentSize()
+                                    .height(
+                                        middleLayoutPaddingDp.dp,
+                                    ).fillMaxWidth(),
                         )
 
-                        //Info Layout
+                        // Info Layout
                         Box {
                             Column(
                                 Modifier
                                     .alpha(controlLayoutAlpha)
                                     .onGloballyPositioned {
-                                        infoLayoutHeightDp = with(localDensity) { it.size.height.toDp().value.toInt() }
-                                    }
-                            )
-                            {
+                                        infoLayoutHeightDp =
+                                            with(localDensity) {
+                                                it.size.height
+                                                    .toDp()
+                                                    .value
+                                                    .toInt()
+                                            }
+                                    },
+                            ) {
                                 Row(
-                                    modifier = Modifier
-                                        .fillMaxWidth()
-                                        .padding(horizontal = 40.dp),
-                                    verticalAlignment = Alignment.CenterVertically
+                                    modifier =
+                                        Modifier
+                                            .fillMaxWidth()
+                                            .padding(horizontal = 40.dp),
+                                    verticalAlignment = Alignment.CenterVertically,
                                 ) {
                                     Column(Modifier.weight(1f)) {
                                         Text(
@@ -767,193 +739,243 @@ fun NowPlayingScreen(
                                             style = typo.headlineMedium,
                                             maxLines = 1,
                                             color = Color.White,
-                                            modifier = Modifier
-                                                .fillMaxWidth()
-                                                .wrapContentHeight(align = Alignment.CenterVertically)
-                                                .basicMarquee(animationMode = MarqueeAnimationMode.Immediately)
-                                                .focusable()
+                                            modifier =
+                                                Modifier
+                                                    .fillMaxWidth()
+                                                    .wrapContentHeight(align = Alignment.CenterVertically)
+                                                    .basicMarquee(animationMode = MarqueeAnimationMode.Immediately)
+                                                    .focusable(),
                                         )
                                         Spacer(modifier = Modifier.height(3.dp))
                                         Text(
                                             text = screenDataState.artistName,
                                             style = typo.bodyMedium,
                                             maxLines = 1,
-                                            modifier = Modifier
-                                                .fillMaxWidth()
-                                                .wrapContentHeight(align = Alignment.CenterVertically)
-                                                .basicMarquee(animationMode = MarqueeAnimationMode.Immediately)
-                                                .focusable()
+                                            modifier =
+                                                Modifier
+                                                    .fillMaxWidth()
+                                                    .wrapContentHeight(align = Alignment.CenterVertically)
+                                                    .basicMarquee(animationMode = MarqueeAnimationMode.Immediately)
+                                                    .focusable(),
                                         )
                                     }
                                     Spacer(modifier = Modifier.size(10.dp))
-                                    //TODO: Like Button
                                     HeartCheckBox(checked = controllerState.isLiked, size = 32) {
                                         sharedViewModel.onUIEvent(UIEvent.ToggleLike)
                                     }
                                 }
-                                //Real Slider
+                                // Real Slider
                                 Box(
                                     Modifier
                                         .padding(
-                                            top = 15.dp
-                                        )
-                                        .padding(horizontal = 40.dp)
+                                            top = 15.dp,
+                                        ).padding(horizontal = 40.dp),
                                 ) {
                                     Box(
-                                        modifier = Modifier
-                                            .fillMaxWidth()
-                                            .height(24.dp),
-                                        contentAlignment = Alignment.Center
+                                        modifier =
+                                            Modifier
+                                                .fillMaxWidth()
+                                                .height(24.dp),
+                                        contentAlignment = Alignment.Center,
                                     ) {
                                         Crossfade(timelineState.loading) {
                                             if (it) {
-                                                LinearProgressIndicator(
-                                                    modifier = Modifier
-                                                        .fillMaxWidth()
-                                                        .height(5.dp)
-                                                        .padding(
-                                                            horizontal = 10.dp
-                                                        )
-                                                        .clip(
-                                                            RoundedCornerShape(8.dp)
-                                                        ),
-                                                    color = Color.Gray,
-                                                    trackColor = Color.DarkGray,
-                                                )
-                                            } else {
-                                                LinearProgressIndicator(
-                                                    progress = { timelineState.bufferedPercent.toFloat() / 100 },
-                                                    modifier = Modifier
-                                                        .fillMaxWidth()
-                                                        .height(5.dp)
-                                                        .padding(
-                                                            horizontal = 10.dp
-                                                        )
-                                                        .clip(
-                                                            RoundedCornerShape(8.dp)
-                                                        ),
-                                                    color = Color.Gray,
-                                                    trackColor = Color.DarkGray,
-                                                )
+                                                CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides Dp.Unspecified) {
+                                                    LinearProgressIndicator(
+                                                        modifier =
+                                                        Modifier
+                                                            .fillMaxWidth()
+                                                            .height(4.dp)
+                                                            .padding(
+                                                                horizontal = 3.dp
+                                                            )
+                                                            .clip(
+                                                                RoundedCornerShape(8.dp),
+                                                            ),
+                                                        color = Color.Gray,
+                                                        trackColor = Color.DarkGray,
+                                                        strokeCap = StrokeCap.Round,
+                                                    )
+                                                }
+                                            }
+                                            else {
+                                                CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides Dp.Unspecified) {
+                                                    LinearProgressIndicator(
+                                                        progress = { timelineState.bufferedPercent.toFloat() / 100 },
+                                                        modifier =
+                                                        Modifier
+                                                            .fillMaxWidth()
+                                                            .height(4.dp)
+                                                            .padding(
+                                                                horizontal = 3.dp
+                                                            )
+                                                            .clip(
+                                                                RoundedCornerShape(8.dp),
+                                                            ),
+                                                        color = Color.Gray,
+                                                        trackColor = Color.DarkGray,
+                                                        strokeCap = StrokeCap.Round,
+                                                        drawStopIndicator = {}
+                                                    )
+                                                }
                                             }
                                         }
                                     }
-                                    CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
+                                    CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides Dp.Unspecified) {
                                         Slider(
                                             value = sliderValue,
                                             onValueChange = {
                                                 sharedViewModel.onUIEvent(
-                                                    UIEvent.UpdateProgress(it)
+                                                    UIEvent.UpdateProgress(it),
                                                 )
                                             },
                                             valueRange = 0f..100f,
-                                            modifier = Modifier
-                                                .fillMaxWidth()
-                                                .align(
-                                                    Alignment.TopCenter
-                                                ),
-                                            colors = SliderDefaults.colors().copy(
-                                                thumbColor = Color.White,
-                                                activeTrackColor = Color.White,
-                                                inactiveTrackColor = Color.Transparent
-                                            ),
-                                            thumb = {
-                                                SliderDefaults.Thumb(
+                                            modifier =
+                                                Modifier
+                                                    .fillMaxWidth()
+                                                    .padding(top = 3.dp)
+                                                    .align(
+                                                        Alignment.TopCenter,
+                                                    ),
+                                            track = { sliderState ->
+                                                SliderDefaults.Track(
                                                     modifier = Modifier
-                                                        .size(24.dp)
-                                                        .padding(6.dp),
-                                                    thumbSize = DpSize(8.dp, 8.dp),
-                                                    interactionSource = remember {
-                                                        MutableInteractionSource()
-                                                    },
+                                                        .height(5.dp),
+                                                    enabled = true,
+                                                    sliderState = sliderState,
                                                     colors = SliderDefaults.colors().copy(
                                                         thumbColor = Color.White,
                                                         activeTrackColor = Color.White,
-                                                        inactiveTrackColor = Color.Transparent
+                                                        inactiveTrackColor = Color.Transparent,
                                                     ),
-                                                    enabled = true
+                                                    thumbTrackGapSize = 0.dp,
+                                                    drawTick = { _, _ -> },
+                                                    drawStopIndicator = null
+                                                )
+                                            },
+                                            thumb = {
+                                                SliderDefaults.Thumb(
+                                                    modifier =
+                                                        Modifier
+                                                            .height(18.dp)
+                                                            .width(8.dp)
+                                                            .padding(
+                                                                vertical = 4.dp
+                                                            ),
+                                                    thumbSize = DpSize(8.dp, 8.dp),
+                                                    interactionSource =
+                                                        remember {
+                                                            MutableInteractionSource()
+                                                        },
+                                                    colors =
+                                                        SliderDefaults.colors().copy(
+                                                            thumbColor = Color.White,
+                                                            activeTrackColor = Color.White,
+                                                            inactiveTrackColor = Color.Transparent,
+                                                        ),
+                                                    enabled = true,
                                                 )
                                             },
                                         )
                                     }
                                 }
-                                //Time Layout
+                                // Time Layout
                                 Row(
                                     Modifier
                                         .fillMaxWidth()
-                                        .padding(horizontal = 40.dp)
+                                        .padding(horizontal = 40.dp),
                                 ) {
                                     Text(
-                                        text = if (timelineState.current >= 0L) formatDuration(timelineState.current) else stringResource(id = R.string.na_na),
+                                        text =
+                                            if (timelineState.current >= 0L) {
+                                                formatDuration(timelineState.current)
+                                            } else {
+                                                stringResource(id = R.string.na_na)
+                                            },
                                         style = typo.bodyMedium,
                                         modifier = Modifier.weight(1f),
-                                        textAlign = TextAlign.Left
+                                        textAlign = TextAlign.Left,
                                     )
                                     Text(
-                                        text = if (timelineState.total >= 0L) formatDuration(timelineState.total) else stringResource(id = R.string.na_na),
-                                        style = typo.bodyMedium, modifier = Modifier.weight(1f), textAlign = TextAlign.Right
+                                        text =
+                                            if (timelineState.total >= 0L) {
+                                                formatDuration(timelineState.total)
+                                            } else {
+                                                stringResource(id = R.string.na_na)
+                                            },
+                                        style = typo.bodyMedium,
+                                        modifier = Modifier.weight(1f),
+                                        textAlign = TextAlign.Right,
                                     )
                                 }
 
                                 Spacer(
-                                    modifier = Modifier
-                                        .fillMaxWidth()
-                                        .height(5.dp)
+                                    modifier =
+                                        Modifier
+                                            .fillMaxWidth()
+                                            .height(5.dp),
                                 )
-                                //Control Button Layout
+                                // Control Button Layout
                                 Row(
                                     verticalAlignment = Alignment.CenterVertically,
                                     horizontalArrangement = Arrangement.SpaceEvenly,
-                                    modifier = Modifier
-                                        .fillMaxWidth()
-                                        .height(96.dp)
-                                        .padding(horizontal = 40.dp)
+                                    modifier =
+                                        Modifier
+                                            .fillMaxWidth()
+                                            .height(96.dp)
+                                            .padding(horizontal = 40.dp),
                                 ) {
                                     FilledTonalIconButton(
-                                        colors = IconButtonDefaults.iconButtonColors().copy(
-                                            containerColor = Color.Transparent
-                                        ),
-                                        modifier = Modifier
-                                            .size(48.dp)
-                                            .aspectRatio(1f)
-                                            .clip(
-                                                CircleShape
-                                            )
-                                            .weight(1f),
+                                        colors =
+                                            IconButtonDefaults.iconButtonColors().copy(
+                                                containerColor = Color.Transparent,
+                                            ),
+                                        modifier =
+                                            Modifier
+                                                .size(48.dp)
+                                                .aspectRatio(1f)
+                                                .clip(
+                                                    CircleShape,
+                                                ).weight(1f),
                                         onClick = {
                                             sharedViewModel.onUIEvent(UIEvent.Shuffle)
-                                        }
+                                        },
                                     ) {
                                         Crossfade(targetState = controllerState.isShuffle, label = "Shuffle Button") { isShuffle ->
                                             if (!isShuffle) {
                                                 Icon(
-                                                    imageVector = Icons.Filled.Shuffle, tint = Color.White, contentDescription = "",
-                                                    modifier = Modifier.size(32.dp)
+                                                    imageVector = Icons.Filled.Shuffle,
+                                                    tint = Color.White,
+                                                    contentDescription = "",
+                                                    modifier = Modifier.size(32.dp),
                                                 )
                                             } else {
                                                 Icon(
-                                                    imageVector = Icons.Filled.Shuffle, tint = seed, contentDescription = "",
-                                                    modifier = Modifier.size(32.dp)
+                                                    imageVector = Icons.Filled.Shuffle,
+                                                    tint = seed,
+                                                    contentDescription = "",
+                                                    modifier = Modifier.size(32.dp),
                                                 )
                                             }
                                         }
                                     }
                                     FilledTonalIconButton(
-                                        colors = IconButtonDefaults.iconButtonColors().copy(
-                                            containerColor = Color.Transparent
-                                        ),
-                                        modifier = Modifier
-                                            .size(72.dp)
-                                            .aspectRatio(1f)
-                                            .clip(
-                                                CircleShape
-                                            )
-                                            .weight(1f),
+                                        colors =
+                                            IconButtonDefaults.iconButtonColors().copy(
+                                                containerColor = Color.Transparent,
+                                            ),
+                                        modifier =
+                                            Modifier
+                                                .size(72.dp)
+                                                .aspectRatio(1f)
+                                                .clip(
+                                                    CircleShape,
+                                                ).weight(1f),
                                         onClick = {
                                             if (controllerState.isPreviousAvailable) {
                                                 sharedViewModel.onUIEvent(UIEvent.Previous)
                                             }
-                                        }
+                                        },
                                     ) {
                                         Icon(
                                             imageVector = Icons.Filled.SkipPrevious,
@@ -963,19 +985,20 @@ fun NowPlayingScreen(
                                         )
                                     }
                                     FilledTonalIconButton(
-                                        colors = IconButtonDefaults.iconButtonColors().copy(
-                                            containerColor = Color.Transparent
-                                        ),
-                                        modifier = Modifier
-                                            .size(96.dp)
-                                            .aspectRatio(1f)
-                                            .clip(
-                                                CircleShape
-                                            )
-                                            .weight(1f),
+                                        colors =
+                                            IconButtonDefaults.iconButtonColors().copy(
+                                                containerColor = Color.Transparent,
+                                            ),
+                                        modifier =
+                                            Modifier
+                                                .size(96.dp)
+                                                .aspectRatio(1f)
+                                                .clip(
+                                                    CircleShape,
+                                                ).weight(1f),
                                         onClick = {
                                             sharedViewModel.onUIEvent(UIEvent.PlayPause)
-                                        }
+                                        },
                                     ) {
                                         Crossfade(targetState = controllerState.isPlaying) { isPlaying ->
                                             if (!isPlaying) {
@@ -983,139 +1006,151 @@ fun NowPlayingScreen(
                                                     imageVector = Icons.Filled.PlayCircle,
                                                     tint = Color.White,
                                                     contentDescription = "",
-                                                    modifier = Modifier.size(72.dp)
+                                                    modifier = Modifier.size(72.dp),
                                                 )
                                             } else {
                                                 Icon(
                                                     imageVector = Icons.Filled.PauseCircle,
                                                     tint = Color.White,
                                                     contentDescription = "",
-                                                    modifier = Modifier.size(72.dp)
+                                                    modifier = Modifier.size(72.dp),
                                                 )
                                             }
                                         }
                                     }
                                     FilledTonalIconButton(
-                                        colors = IconButtonDefaults.iconButtonColors().copy(
-                                            containerColor = Color.Transparent
-                                        ),
-                                        modifier = Modifier
-                                            .size(72.dp)
-                                            .aspectRatio(1f)
-                                            .clip(
-                                                CircleShape
-                                            )
-                                            .weight(1f),
+                                        colors =
+                                            IconButtonDefaults.iconButtonColors().copy(
+                                                containerColor = Color.Transparent,
+                                            ),
+                                        modifier =
+                                            Modifier
+                                                .size(72.dp)
+                                                .aspectRatio(1f)
+                                                .clip(
+                                                    CircleShape,
+                                                ).weight(1f),
                                         onClick = {
                                             if (controllerState.isNextAvailable) {
                                                 sharedViewModel.onUIEvent(UIEvent.Next)
                                             }
-                                        }
+                                        },
                                     ) {
                                         Icon(
                                             imageVector = Icons.Filled.SkipNext,
                                             tint = if (controllerState.isNextAvailable) Color.White else Color.Gray,
                                             contentDescription = "",
-                                            modifier = Modifier.size(52.dp)
+                                            modifier = Modifier.size(52.dp),
                                         )
                                     }
                                     FilledTonalIconButton(
-                                        colors = IconButtonDefaults.iconButtonColors().copy(
-                                            containerColor = Color.Transparent
-                                        ),
-                                        modifier = Modifier
-                                            .size(48.dp)
-                                            .aspectRatio(1f)
-                                            .clip(
-                                                CircleShape
-                                            )
-                                            .weight(1f),
+                                        colors =
+                                            IconButtonDefaults.iconButtonColors().copy(
+                                                containerColor = Color.Transparent,
+                                            ),
+                                        modifier =
+                                            Modifier
+                                                .size(48.dp)
+                                                .aspectRatio(1f)
+                                                .clip(
+                                                    CircleShape,
+                                                ).weight(1f),
                                         onClick = {
                                             sharedViewModel.onUIEvent(UIEvent.Repeat)
-                                        }
+                                        },
                                     ) {
                                         Crossfade(targetState = controllerState.repeatState) { rs ->
                                             when (rs) {
                                                 is RepeatState.None -> {
                                                     Icon(
-                                                        imageVector = Icons.Filled.Repeat, tint = Color.White, contentDescription = "",
-                                                        modifier = Modifier.size(32.dp)
+                                                        imageVector = Icons.Filled.Repeat,
+                                                        tint = Color.White,
+                                                        contentDescription = "",
+                                                        modifier = Modifier.size(32.dp),
                                                     )
                                                 }
 
                                                 RepeatState.All -> {
                                                     Icon(
-                                                        imageVector = Icons.Filled.Repeat, tint = seed, contentDescription = "",
-                                                        modifier = Modifier.size(32.dp)
+                                                        imageVector = Icons.Filled.Repeat,
+                                                        tint = seed,
+                                                        contentDescription = "",
+                                                        modifier = Modifier.size(32.dp),
                                                     )
                                                 }
 
                                                 RepeatState.One -> {
                                                     Icon(
-                                                        imageVector = Icons.Filled.RepeatOne, tint = seed, contentDescription = "",
-                                                        modifier = Modifier.size(32.dp)
+                                                        imageVector = Icons.Filled.RepeatOne,
+                                                        tint = seed,
+                                                        contentDescription = "",
+                                                        modifier = Modifier.size(32.dp),
                                                     )
                                                 }
                                             }
                                         }
                                     }
                                 }
-                                //List Bottom Buttons
-                                //24.dp
+                                // List Bottom Buttons
+                                // 24.dp
                                 Box(
-                                    modifier = Modifier
-                                        .height(32.dp)
-                                        .fillMaxWidth()
-                                        .padding(horizontal = 40.dp),
+                                    modifier =
+                                        Modifier
+                                            .height(32.dp)
+                                            .fillMaxWidth()
+                                            .padding(horizontal = 40.dp),
                                 ) {
                                     IconButton(
-                                        modifier = Modifier
-                                            .size(24.dp)
-                                            .aspectRatio(1f)
-                                            .align(Alignment.CenterStart)
-                                            .clip(
-                                                CircleShape
-                                            ),
+                                        modifier =
+                                            Modifier
+                                                .size(24.dp)
+                                                .aspectRatio(1f)
+                                                .align(Alignment.CenterStart)
+                                                .clip(
+                                                    CircleShape,
+                                                ),
                                         onClick = {
                                             navController.navigateSafe(
-                                                R.id.action_global_infoFragment
+                                                R.id.action_global_infoFragment,
                                             )
-                                        }
+                                        },
                                     ) {
                                         Icon(imageVector = Icons.Outlined.Info, tint = Color.White, contentDescription = "")
                                     }
                                     Row(
-                                        Modifier.align(Alignment.CenterEnd)
+                                        Modifier.align(Alignment.CenterEnd),
                                     ) {
                                         Crossfade(
-                                            targetState = likeStatus == true
+                                            targetState = likeStatus == true,
                                         ) {
-                                            if (it){
-                                                IconButton(
-                                                    modifier = Modifier
-                                                        .size(24.dp)
-                                                        .aspectRatio(1f)
-                                                        .clip(
-                                                            CircleShape
-                                                        ),
-                                                    onClick = {
-                                                        sharedViewModel.addToYouTubeLiked()
+                                            if (it)
+                                                {
+                                                    IconButton(
+                                                        modifier =
+                                                            Modifier
+                                                                .size(24.dp)
+                                                                .aspectRatio(1f)
+                                                                .clip(
+                                                                    CircleShape,
+                                                                ),
+                                                        onClick = {
+                                                            sharedViewModel.addToYouTubeLiked()
+                                                        },
+                                                    ) {
+                                                        Icon(imageVector = Icons.Filled.Done, tint = Color.White, contentDescription = "")
                                                     }
-                                                ) {
-                                                    Icon(imageVector = Icons.Filled.Done, tint = Color.White, contentDescription = "")
-                                                }
-                                            }
-                                            else {
+                                                } else {
                                                 IconButton(
-                                                    modifier = Modifier
-                                                        .size(24.dp)
-                                                        .aspectRatio(1f)
-                                                        .clip(
-                                                            CircleShape
-                                                        ),
+                                                    modifier =
+                                                        Modifier
+                                                            .size(24.dp)
+                                                            .aspectRatio(1f)
+                                                            .clip(
+                                                                CircleShape,
+                                                            ),
                                                     onClick = {
                                                         sharedViewModel.addToYouTubeLiked()
-                                                    }
+                                                    },
                                                 ) {
                                                     Icon(imageVector = Icons.Filled.Add, tint = Color.White, contentDescription = "")
                                                 }
@@ -1123,22 +1158,23 @@ fun NowPlayingScreen(
                                         }
                                         Spacer(modifier = Modifier.size(8.dp))
                                         IconButton(
-                                            modifier = Modifier
-                                                .size(24.dp)
-                                                .aspectRatio(1f)
-                                                .clip(
-                                                    CircleShape
-                                                ),
+                                            modifier =
+                                                Modifier
+                                                    .size(24.dp)
+                                                    .aspectRatio(1f)
+                                                    .clip(
+                                                        CircleShape,
+                                                    ),
                                             onClick = {
                                                 navController.navigateSafe(
-                                                    R.id.action_global_queueFragment
+                                                    R.id.action_global_queueFragment,
                                                 )
-                                            }
+                                            },
                                         ) {
                                             Icon(
                                                 imageVector = Icons.AutoMirrored.Outlined.QueueMusic,
                                                 tint = Color.White,
-                                                contentDescription = ""
+                                                contentDescription = "",
                                             )
                                         }
                                     }
@@ -1146,94 +1182,98 @@ fun NowPlayingScreen(
                             }
                             androidx.compose.animation.AnimatedVisibility(visible = !showHideControlLayout) {
                                 Box(
-                                    modifier = Modifier
-                                        .height(
-                                            infoLayoutHeightDp.dp
-                                        )
-                                        .fillMaxWidth()
-                                        .padding(
-                                            vertical = 20.dp,
-                                            horizontal = 40.dp
-                                        )
-                                        .clickable(
-                                            onClick = {
-                                                if (mainScrollState.value == 0) {
-                                                    showHideJob = true
-                                                    showHideControlLayout = !showHideControlLayout
-                                                }
-                                            },
-                                            indication = null,
-                                            interactionSource = remember {
-                                                MutableInteractionSource()
-                                            }
-                                        ),
+                                    modifier =
+                                        Modifier
+                                            .height(
+                                                infoLayoutHeightDp.dp,
+                                            ).fillMaxWidth()
+                                            .padding(
+                                                vertical = 20.dp,
+                                                horizontal = 40.dp,
+                                            ).clickable(
+                                                onClick = {
+                                                    if (mainScrollState.value == 0) {
+                                                        showHideJob = true
+                                                        showHideControlLayout = !showHideControlLayout
+                                                    }
+                                                },
+                                                indication = null,
+                                                interactionSource =
+                                                    remember {
+                                                        MutableInteractionSource()
+                                                    },
+                                            ),
                                     contentAlignment = Alignment.BottomStart,
                                 ) {
                                     Row(
-                                        verticalAlignment = Alignment.CenterVertically
+                                        verticalAlignment = Alignment.CenterVertically,
                                     ) {
                                         CoilImage(
                                             imageModel = {
                                                 screenDataState.songInfoData?.authorThumbnail?.toUri()
                                             },
                                             previewPlaceholder = painterResource(id = R.drawable.holder),
-                                            modifier = Modifier
-                                                .size(42.dp)
-                                                .clip(
-                                                    CircleShape
-                                                ),
-                                            component = rememberImageComponent {
-                                                +CrossfadePlugin(duration = 200)
-                                                +PlaceholderPlugin.Loading(painterResource(id = R.drawable.holder))
-                                                +PlaceholderPlugin.Failure(painterResource(id = R.drawable.holder))
-                                            }
+                                            modifier =
+                                                Modifier
+                                                    .size(42.dp)
+                                                    .clip(
+                                                        CircleShape,
+                                                    ),
+                                            component =
+                                                rememberImageComponent {
+                                                    +CrossfadePlugin(duration = 200)
+                                                    +PlaceholderPlugin.Loading(painterResource(id = R.drawable.holder))
+                                                    +PlaceholderPlugin.Failure(painterResource(id = R.drawable.holder))
+                                                },
                                         )
                                         Spacer(modifier = Modifier.size(12.dp))
                                         Text(
                                             text = screenDataState.songInfoData?.author ?: "",
                                             style = typo.labelMedium,
-                                            color = Color.White
+                                            color = Color.White,
                                         )
                                     }
                                 }
                             }
                         }
                     }
-                    //Touch Area
+                    // Touch Area
                     androidx.compose.animation.AnimatedVisibility(visible = screenDataState.canvasData != null) {
                         Box(
-                            modifier = Modifier
-                                .fillMaxWidth()
-                                .height(
-                                    (middleLayoutPaddingDp * 2 + middleLayoutHeightDp).dp
-                                )
-                                .clickable(
-                                    onClick = {
-                                        if (mainScrollState.value == 0) {
-                                            showHideJob = true
-                                            showHideControlLayout = !showHideControlLayout
-                                        }
-                                    },
-                                    indication = null,
-                                    interactionSource = remember {
-                                        MutableInteractionSource()
-                                    }
-                                )
+                            modifier =
+                                Modifier
+                                    .fillMaxWidth()
+                                    .height(
+                                        (middleLayoutPaddingDp * 2 + middleLayoutHeightDp).dp,
+                                    ).clickable(
+                                        onClick = {
+                                            if (mainScrollState.value == 0) {
+                                                showHideJob = true
+                                                showHideControlLayout = !showHideControlLayout
+                                            }
+                                        },
+                                        indication = null,
+                                        interactionSource =
+                                            remember {
+                                                MutableInteractionSource()
+                                            },
+                                    ),
                         )
                     }
                 }
                 Column(Modifier.padding(horizontal = 40.dp)) {
-                    //Lyrics Layout
+                    // Lyrics Layout
                     AnimatedVisibility(
                         visible = screenDataState.lyricsData != null,
-                        modifier = Modifier.padding(top = 10.dp)
+                        modifier = Modifier.padding(top = 10.dp),
                     ) {
                         ElevatedCard(
                             onClick = {},
                             shape = RoundedCornerShape(8.dp),
-                            colors = CardDefaults.elevatedCardColors().copy(
-                                containerColor = startColor.value
-                            )
+                            colors =
+                                CardDefaults.elevatedCardColors().copy(
+                                    containerColor = startColor.value,
+                                ),
                         ) {
                             Column(modifier = Modifier.padding(15.dp)) {
                                 Spacer(modifier = Modifier.height(5.dp))
@@ -1242,64 +1282,72 @@ fun NowPlayingScreen(
                                         text = stringResource(id = R.string.lyrics),
                                         style = typo.labelMedium,
                                         color = Color.White,
-                                        modifier = Modifier.weight(1f)
+                                        modifier = Modifier.weight(1f),
                                     )
-                                    CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
+                                    CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides Dp.Unspecified) {
                                         TextButton(
                                             onClick = {
                                                 showFullscreenLyrics = true
-                                            }, contentPadding = PaddingValues(0.dp),
-                                            modifier = Modifier
-                                                .height(20.dp)
-                                                .width(40.dp)
+                                            },
+                                            contentPadding = PaddingValues(0.dp),
+                                            modifier =
+                                                Modifier
+                                                    .height(20.dp)
+                                                    .width(40.dp),
                                         ) {
                                             Text(text = stringResource(id = R.string.show))
                                         }
                                     }
                                 }
-                                //TODO:Lyrics
-                                //Lyrics Layout
+                                // Lyrics Layout
                                 Spacer(modifier = Modifier.height(18.dp))
                                 Box(
-                                    modifier = Modifier
-                                        .fillMaxWidth()
-                                        .height(300.dp)
+                                    modifier =
+                                        Modifier
+                                            .fillMaxWidth()
+                                            .height(300.dp),
                                 ) {
                                     screenDataState.lyricsData?.let {
-                                        LyricsView(lyricsData = it, timeLine = sharedViewModel.timeline,
+                                        LyricsView(
+                                            lyricsData = it,
+                                            timeLine = sharedViewModel.timeline,
                                             onLineClick = { f ->
                                                 sharedViewModel.onUIEvent(UIEvent.UpdateProgress(f))
-                                            }
+                                            },
                                         )
                                     }
                                 }
 
                                 Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.End) {
                                     Text(
-                                        text = when (screenDataState.lyricsData?.lyrics?.syncType) {
-                                            "LINE_SYNCED" -> stringResource(id = R.string.line_synced)
-                                            else -> stringResource(id = R.string.unsynced)
-                                        },
+                                        text =
+                                            when (screenDataState.lyricsData?.lyrics?.syncType) {
+                                                "LINE_SYNCED" -> stringResource(id = R.string.line_synced)
+                                                else -> stringResource(id = R.string.unsynced)
+                                            },
                                         style = typo.bodySmall,
                                         textAlign = TextAlign.End,
-                                        modifier = Modifier
-                                            .fillMaxWidth()
-                                            .padding(top = 10.dp)
+                                        modifier =
+                                            Modifier
+                                                .fillMaxWidth()
+                                                .padding(top = 10.dp),
                                     )
                                     Text(
-                                        text = when (screenDataState.lyricsData?.lyricsProvider) {
-                                            LyricsProvider.MUSIXMATCH -> stringResource(id = R.string.lyrics_provider)
-                                            LyricsProvider.YOUTUBE -> stringResource(id = R.string.lyrics_provider_youtube)
-                                            LyricsProvider.SPOTIFY -> stringResource(id = R.string.spotify_lyrics_provider)
-                                            LyricsProvider.OFFLINE -> stringResource(id = R.string.offline_mode)
-                                            else -> {
-                                                ""
-                                            }
-                                        },
+                                        text =
+                                            when (screenDataState.lyricsData?.lyricsProvider) {
+                                                LyricsProvider.MUSIXMATCH -> stringResource(id = R.string.lyrics_provider)
+                                                LyricsProvider.YOUTUBE -> stringResource(id = R.string.lyrics_provider_youtube)
+                                                LyricsProvider.SPOTIFY -> stringResource(id = R.string.spotify_lyrics_provider)
+                                                LyricsProvider.OFFLINE -> stringResource(id = R.string.offline_mode)
+                                                else -> {
+                                                    ""
+                                                }
+                                            },
                                         style = typo.bodySmall,
                                         textAlign = TextAlign.End,
-                                        modifier = Modifier
-                                            .fillMaxWidth()
+                                        modifier =
+                                            Modifier
+                                                .fillMaxWidth(),
                                     )
                                 }
                             }
@@ -1309,55 +1357,59 @@ fun NowPlayingScreen(
                     AnimatedVisibility(visible = screenDataState.songInfoData != null) {
                         ElevatedCard(
                             onClick = {
-                                val song = songEntity?.value
+                                val song = sharedViewModel.nowPlayingState.value?.songEntity
                                 if (song != null && song.artistId?.firstOrNull() != null) {
                                     navController.navigateSafe(
                                         R.id.action_global_artistFragment,
                                         bundleOf(
-                                            "channelId" to song.artistId.firstOrNull()
-                                        )
+                                            "channelId" to song.artistId.firstOrNull(),
+                                        ),
                                     )
-                                }
-                                else {
+                                } else {
                                     navController.navigateSafe(
                                         R.id.action_global_artistFragment,
                                         bundleOf(
-                                            "channelId" to screenDataState.songInfoData?.authorId
-                                        )
+                                            "channelId" to screenDataState.songInfoData?.authorId,
+                                        ),
                                     )
                                 }
                             },
                             shape = RoundedCornerShape(8.dp),
-                            colors = CardDefaults.elevatedCardColors().copy(
-                                containerColor = startColor.value
-                            )
+                            colors =
+                                CardDefaults.elevatedCardColors().copy(
+                                    containerColor = startColor.value,
+                                ),
                         ) {
                             Box(
-                                modifier = Modifier
-                                    .fillMaxWidth()
-                                    .height(250.dp)
+                                modifier =
+                                    Modifier
+                                        .fillMaxWidth()
+                                        .height(250.dp),
                             ) {
                                 CoilImage(
                                     imageModel = {
                                         screenDataState.songInfoData?.authorThumbnail?.toUri()
                                     },
                                     previewPlaceholder = painterResource(id = R.drawable.holder_video),
-                                    modifier = Modifier
-                                        .fillMaxSize()
-                                        .alpha(0.8f)
-                                        .clip(
-                                            RoundedCornerShape(8.dp)
-                                        ),
-                                    component = rememberImageComponent {
-                                        +CrossfadePlugin(duration = 200)
-                                        +PlaceholderPlugin.Loading(painterResource(id = R.drawable.holder_video))
-                                        +PlaceholderPlugin.Failure(painterResource(id = R.drawable.holder_video))
-                                    }
+                                    modifier =
+                                        Modifier
+                                            .fillMaxSize()
+                                            .alpha(0.8f)
+                                            .clip(
+                                                RoundedCornerShape(8.dp),
+                                            ),
+                                    component =
+                                        rememberImageComponent {
+                                            +CrossfadePlugin(duration = 200)
+                                            +PlaceholderPlugin.Loading(painterResource(id = R.drawable.holder_video))
+                                            +PlaceholderPlugin.Failure(painterResource(id = R.drawable.holder_video))
+                                        },
                                 )
                                 Box(
-                                    modifier = Modifier
-                                        .padding(15.dp)
-                                        .fillMaxSize()
+                                    modifier =
+                                        Modifier
+                                            .padding(15.dp)
+                                            .fillMaxSize(),
                                 ) {
                                     Column(Modifier.align(Alignment.TopStart)) {
                                         Spacer(modifier = Modifier.height(5.dp))
@@ -1377,7 +1429,7 @@ fun NowPlayingScreen(
                                         Text(
                                             text = screenDataState.songInfoData?.subscribers ?: "",
                                             style = typo.bodySmall,
-                                            textAlign = TextAlign.End
+                                            textAlign = TextAlign.End,
                                         )
                                         Spacer(modifier = Modifier.height(5.dp))
                                     }
@@ -1390,14 +1442,15 @@ fun NowPlayingScreen(
                         ElevatedCard(
                             onClick = {},
                             shape = RoundedCornerShape(8.dp),
-                            colors = CardDefaults.elevatedCardColors().copy(
-                                containerColor = startColor.value
-                            )
+                            colors =
+                                CardDefaults.elevatedCardColors().copy(
+                                    containerColor = startColor.value,
+                                ),
                         ) {
                             Column(
                                 Modifier
                                     .padding(15.dp)
-                                    .fillMaxWidth()
+                                    .fillMaxWidth(),
                             ) {
                                 Spacer(modifier = Modifier.height(5.dp))
                                 Text(
@@ -1407,20 +1460,22 @@ fun NowPlayingScreen(
                                 )
                                 Spacer(modifier = Modifier.height(10.dp))
                                 Text(
-                                    text = stringResource(
-                                        id = R.string.view_count,
-                                        "%,d".format(screenDataState.songInfoData?.viewCount)
-                                    ),
+                                    text =
+                                        stringResource(
+                                            id = R.string.view_count,
+                                            "%,d".format(screenDataState.songInfoData?.viewCount),
+                                        ),
                                     style = typo.labelMedium,
                                     color = Color.White,
                                 )
                                 Spacer(modifier = Modifier.height(10.dp))
                                 Text(
-                                    text = stringResource(
-                                        id = R.string.like_and_dislike,
-                                        screenDataState.songInfoData?.like ?: 0,
-                                        screenDataState.songInfoData?.dislike ?: 0
-                                    ),
+                                    text =
+                                        stringResource(
+                                            id = R.string.like_and_dislike,
+                                            screenDataState.songInfoData?.like ?: 0,
+                                            screenDataState.songInfoData?.dislike ?: 0,
+                                        ),
                                     style = typo.bodyMedium,
                                 )
                                 Spacer(modifier = Modifier.height(10.dp))
@@ -1444,18 +1499,21 @@ fun NowPlayingScreen(
                                     },
                                     onURLClicked = { url ->
                                         uriHandler.openUri(
-                                            url
+                                            url,
                                         )
-                                    }
+                                    },
                                 )
                             }
                         }
                         Spacer(modifier = Modifier.height(5.dp))
                     }
                     Spacer(modifier = Modifier.height(10.dp))
-                    Spacer(modifier = Modifier.height(
-                        with(localDensity) { WindowInsets.systemBars.getBottom(localDensity).toDp() }
-                    ))
+                    Spacer(
+                        modifier =
+                            Modifier.height(
+                                with(localDensity) { WindowInsets.systemBars.getBottom(localDensity).toDp() },
+                            ),
+                    )
                 }
             }
         }
diff --git a/app/src/main/java/com/maxrave/simpmusic/viewModel/LocalPlaylistViewModel.kt b/app/src/main/java/com/maxrave/simpmusic/viewModel/LocalPlaylistViewModel.kt
index ea151a4d..6de2266b 100644
--- a/app/src/main/java/com/maxrave/simpmusic/viewModel/LocalPlaylistViewModel.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/viewModel/LocalPlaylistViewModel.kt
@@ -9,45 +9,57 @@ import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
 import androidx.media3.common.util.UnstableApi
 import androidx.media3.exoplayer.offline.Download
+import androidx.paging.LoadState
 import androidx.paging.PagingData
 import androidx.paging.cachedIn
+import androidx.paging.compose.LazyPagingItems
 import androidx.paging.filter
 import androidx.paging.insertFooterItem
 import com.maxrave.simpmusic.R
-import com.maxrave.simpmusic.common.DownloadState
+import com.maxrave.simpmusic.common.ASC
+import com.maxrave.simpmusic.common.Config
+import com.maxrave.simpmusic.common.DESC
 import com.maxrave.simpmusic.common.DownloadState.STATE_DOWNLOADED
 import com.maxrave.simpmusic.common.DownloadState.STATE_DOWNLOADING
 import com.maxrave.simpmusic.common.DownloadState.STATE_NOT_DOWNLOADED
+import com.maxrave.simpmusic.common.LOCAL_PLAYLIST_ID
 import com.maxrave.simpmusic.data.db.entities.LocalPlaylistEntity
 import com.maxrave.simpmusic.data.db.entities.PairSongLocalPlaylist
 import com.maxrave.simpmusic.data.db.entities.SetVideoIdEntity
 import com.maxrave.simpmusic.data.db.entities.SongEntity
 import com.maxrave.simpmusic.data.manager.LocalPlaylistManager
 import com.maxrave.simpmusic.data.model.browse.album.Track
-import com.maxrave.simpmusic.extension.toListVideoId
+import com.maxrave.simpmusic.extension.toArrayListTrack
 import com.maxrave.simpmusic.extension.toSongEntity
+import com.maxrave.simpmusic.extension.toTrack
 import com.maxrave.simpmusic.pagination.PagingActions
+import com.maxrave.simpmusic.service.PlaylistType
+import com.maxrave.simpmusic.service.QueueData
 import com.maxrave.simpmusic.service.test.download.DownloadUtils
-import com.maxrave.simpmusic.utils.Resource
 import com.maxrave.simpmusic.utils.collectLatestResource
 import com.maxrave.simpmusic.utils.collectResource
 import com.maxrave.simpmusic.viewModel.base.BaseViewModel
+import com.maxrave.simpmusic.viewModel.uiState.LocalPlaylistState
 import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.FlowPreview
+import kotlinx.coroutines.Job
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
-import kotlinx.coroutines.flow.cancellable
+import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.first
+import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.singleOrNull
-import kotlinx.coroutines.flow.stateIn
+import kotlinx.coroutines.flow.update
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import org.koin.android.annotation.KoinViewModel
 import org.koin.core.component.inject
 import java.time.LocalDateTime
 
+@OptIn(FlowPreview::class)
 @UnstableApi
 @KoinViewModel
 class LocalPlaylistViewModel(
@@ -60,19 +72,6 @@ class LocalPlaylistViewModel(
 
     private val downloadUtils: DownloadUtils by inject()
 
-    val id: MutableLiveData<Long> = MutableLiveData()
-
-    private var _localPlaylist: MutableStateFlow<LocalPlaylistEntity?> =
-        MutableStateFlow(null)
-    val localPlaylist: StateFlow<LocalPlaylistEntity?> = _localPlaylist
-
-    private var _listTrack: MutableStateFlow<List<SongEntity>?> = MutableStateFlow(null)
-    val listTrack: StateFlow<List<SongEntity>?> = _listTrack
-
-    private var _listPair: MutableStateFlow<List<PairSongLocalPlaylist>?> =
-        MutableStateFlow(null)
-    val listPair: StateFlow<List<PairSongLocalPlaylist>?> = _listPair
-
     private var _offset: MutableStateFlow<Int> = MutableStateFlow(0)
     val offset: StateFlow<Int> = _offset
 
@@ -82,90 +81,58 @@ class LocalPlaylistViewModel(
 
     var gradientDrawable: MutableLiveData<GradientDrawable> = MutableLiveData()
 
-    private var _listSuggestions: MutableStateFlow<ArrayList<Track>?> =
-        MutableStateFlow(arrayListOf())
-    val listSuggestions: StateFlow<ArrayList<Track>?> = _listSuggestions
-
-    private var reloadParams: MutableStateFlow<String?> = MutableStateFlow(null)
-
     var loading: MutableStateFlow<Boolean> = MutableStateFlow(false)
 
-    private val _loadingMore = MutableStateFlow<Boolean>(false)
-    val loadingMore: StateFlow<Boolean> get() = _loadingMore
-
-    private var _filter: MutableStateFlow<FilterState> =
-        MutableStateFlow(FilterState.OlderFirst)
-    val filter: StateFlow<FilterState> = _filter
+    private val _uiState: MutableStateFlow<LocalPlaylistState> = MutableStateFlow(LocalPlaylistState.initial())
+    val uiState: StateFlow<LocalPlaylistState> get() = _uiState
 
-    fun setFilter(filterState: FilterState) {
-        _filter.value = filterState
+    private fun setFilter(filterState: FilterState) {
+        _uiState.update {
+            it.copy(
+                filterState = filterState,
+            )
+        }
     }
 
-    private var _brush: MutableStateFlow<List<Color>> =
-        MutableStateFlow(
-            listOf(
-                Color.Black,
-                Color(
-                    application.resources.getColor(R.color.md_theme_dark_background, null),
-                ),
-            ),
-        )
-    val brush: StateFlow<List<Color>> = _brush
-
     fun setBrush(brush: List<Color>) {
-        _brush.value = brush
+        _uiState.update {
+            it.copy(
+                colors = brush,
+            )
+        }
     }
 
+    private var newUpdateJob: Job? = null
+
     init {
         viewModelScope.launch {
-            val checkDownloadedJob =
-                launch {
-                    listTrack.collect {
-                        if (it != null) {
-                            mainRepository.getPlaylistPairSong(id.value!!).collect {
-                                Log.w("Pair LocalPlaylistViewModel", "init: ${it?.size}")
-                            }
-                            val temp: ArrayList<SongEntity> = arrayListOf()
-                            var count = 0
-                            it.forEach { track ->
-                                temp.add(track)
-                                if (track.downloadState == STATE_DOWNLOADED) {
-                                    count++
-                                }
-                            }
-                            localPlaylist.value?.id?.let { id ->
-                                if (count == it.size &&
-                                    localPlaylist.value?.downloadState != STATE_DOWNLOADED
-                                ) {
-                                    updatePlaylistDownloadState(
-                                        id,
-                                        STATE_DOWNLOADED,
-                                    )
-                                    getLocalPlaylist(id)
-                                } else if (
-                                    count != it.size &&
-                                    localPlaylist.value?.downloadState != STATE_NOT_DOWNLOADED &&
-                                    localPlaylist.value?.downloadState != STATE_DOWNLOADING
-                                ) {
-                                    updatePlaylistDownloadState(
-                                        id,
-                                        STATE_NOT_DOWNLOADED,
-                                    )
-                                    getLocalPlaylist(id)
-                                } else if (
-                                    count < it.size && localPlaylist.value?.downloadState == STATE_DOWNLOADED
-                                ) {
-                                    updatePlaylistDownloadState(
-                                        id,
-                                        STATE_NOT_DOWNLOADED,
-                                    )
-                                    getLocalPlaylist(id)
+            val listTrackStringJob = launch {
+                uiState.map { it.id }
+                    .distinctUntilChanged()
+                    .collectLatest { id ->
+                        _uiState.update {
+                            it.copy(
+                                suggestions = null
+                            )
+                        }
+                        newUpdateJob?.cancel()
+                        newUpdateJob = launch {
+                            localPlaylistManager.listTrackFlow(id)
+                                .distinctUntilChanged()
+                                .collectLatest {
+                                    delay(500)
+                                    val currentList = uiState.value.trackCount
+                                    val newList = it.size
+                                    log("newList: $it", Log.DEBUG)
+                                    log("currentList: $currentList, newList: $newList", Log.DEBUG)
+                                    if (newList > currentList) {
+                                        updatePlaylistState(uiState.value.id, refresh = true)
+                                    }
                                 }
-                            }
                         }
                     }
                 }
-            checkDownloadedJob.join()
+            listTrackStringJob.join()
         }
     }
 
@@ -174,28 +141,35 @@ class LocalPlaylistViewModel(
             PagingData.empty(),
         )
     val tracksPagingState: StateFlow<PagingData<SongEntity>> get() = _tracksPagingState
+    private val lazyTrackPagingItems: MutableStateFlow<LazyPagingItems<SongEntity>?> = MutableStateFlow(null)
+
+    fun setLazyTrackPagingItems(lazyPagingItems: LazyPagingItems<SongEntity>) {
+        lazyTrackPagingItems.value = lazyPagingItems
+        Log.d(tag, "setLazyTrackPagingItems: ${lazyTrackPagingItems.value?.itemCount}")
+    }
 
     private val modifications = MutableStateFlow<List<PagingActions<SongEntity>>>(emptyList())
 
-    private fun getTracksPagingState() {
+    private fun getTracksPagingState(
+        id: Long,
+        filterState: FilterState,
+    ) {
         viewModelScope.launch {
-            Log.w("LocalPlaylistViewModel", "getTracksPagingState: ${localPlaylist.value}")
-            localPlaylist.value?.let { local ->
-                modifications.value = listOf()
-                localPlaylistManager
-                    .getTracksPaging(
-                        local.id,
-                        filter.value,
-                    ).distinctUntilChanged()
-                    .cachedIn(viewModelScope)
-                    .combine(modifications) { pagingData, modifications ->
-                        modifications.fold(pagingData) { data, actions ->
-                            applyActions(data, actions)
-                        }
-                    }.collect {
-                        _tracksPagingState.value = it
+            Log.w("LocalPlaylistViewModel", "getTracksPagingState: ${uiState.value}")
+            modifications.value = listOf()
+            localPlaylistManager
+                .getTracksPaging(
+                    id,
+                    filterState,
+                ).distinctUntilChanged()
+                .cachedIn(viewModelScope)
+                .combine(modifications) { pagingData, modifications ->
+                    modifications.fold(pagingData) { data, actions ->
+                        applyActions(data, actions)
                     }
-            }
+                }.collect {
+                    _tracksPagingState.value = it
+                }
         }
     }
 
@@ -205,7 +179,24 @@ class LocalPlaylistViewModel(
     ): PagingData<SongEntity> =
         when (actions) {
             is PagingActions.Insert -> {
-                pagingData.insertFooterItem(item = actions.item)
+                val loadState = lazyTrackPagingItems.value?.loadState
+                val list =
+                    lazyTrackPagingItems.value
+                        ?.itemSnapshotList
+                        ?.toList()
+                        ?.filterNotNull()
+                        ?.map { it.videoId }
+                        ?: emptyList()
+                Log.w(tag, "applyActions: $loadState")
+                if (loadState?.refresh is LoadState.NotLoading &&
+                    loadState.append is LoadState.NotLoading &&
+                    !list.contains(actions.item.videoId)
+                ) {
+                    pagingData
+                        .insertFooterItem(item = actions.item)
+                } else {
+                    pagingData
+                }
             }
 
             is PagingActions.Remove -> {
@@ -219,16 +210,41 @@ class LocalPlaylistViewModel(
         modifications.value += actions
     }
 
-    fun getSuggestions(ytPlaylistId: String) {
+    fun getSuggestions(playlistId: Long) {
         loading.value = true
         viewModelScope.launch {
-            mainRepository.getSuggestionPlaylist(ytPlaylistId).collect {
-                _listSuggestions.value = it?.second
-                reloadParams.value = it?.first
-                withContext(Dispatchers.Main) {
+            localPlaylistManager.getSuggestionsTrackForPlaylist(playlistId).collectLatestResource(
+                onSuccess = { res ->
+                    val reloadParams = res?.first
+                    val songs = res?.second
+                    if (reloadParams != null && songs != null) {
+                        _uiState.update {
+                            it.copy(
+                                suggestions = LocalPlaylistState.SuggestionSongs(
+                                    reloadParams = reloadParams,
+                                    songs = songs
+                                )
+                            )
+                        }
+                    } else {
+                        _uiState.update {
+                            it.copy(
+                                suggestions = null
+                            )
+                        }
+                    }
+                    loading.value = false
+                },
+                onError = { e ->
+                    makeToast(e)
                     loading.value = false
+                    _uiState.update {
+                        it.copy(
+                            suggestions = null
+                        )
+                    }
                 }
-            }
+            )
         }
     }
 
@@ -250,16 +266,34 @@ class LocalPlaylistViewModel(
     fun reloadSuggestion() {
         loading.value = true
         viewModelScope.launch {
-            val param = reloadParams.value
+            val param = uiState.value.suggestions?.reloadParams
             if (param != null) {
-                mainRepository.reloadSuggestionPlaylist(param).collect {
-                    _listSuggestions.value = it?.second
-                    reloadParams.value = it?.first
+                mainRepository.reloadSuggestionPlaylist(param).collect { res ->
+                    val reloadParams = res?.first
+                    val songs = res?.second
+                    if (reloadParams != null && songs != null) {
+                        _uiState.update {
+                            it.copy(
+                                suggestions =
+                                    LocalPlaylistState.SuggestionSongs(
+                                        reloadParams = reloadParams,
+                                        songs = songs,
+                                    ),
+                            )
+                        }
+                    } else {
+                        _uiState.update {
+                            it.copy(
+                                suggestions = null,
+                            )
+                        }
+                    }
                     withContext(Dispatchers.Main) {
                         loading.value = false
                     }
                 }
             } else {
+                _uiState.update { it.copy(suggestions = null) }
                 Toast
                     .makeText(
                         application,
@@ -273,137 +307,21 @@ class LocalPlaylistViewModel(
         }
     }
 
-    fun getLocalPlaylist(id: Long) {
-        viewModelScope.launch {
-            mainRepository.getLocalPlaylist(id).collect {
-                _localPlaylist.emit(it)
-            }
-            localPlaylistManager.getLocalPlaylist(id).collectLatestResource(
-                onSuccess = {
-                    _localPlaylist.value = it
-                    getTracksPagingState()
-                },
-                onLoading = {
-                    _localPlaylist.value = null
-                },
-                onError = {
-                    _localPlaylist.value = null
-                },
-            )
-        }
-    }
-
-    fun getListTrack(
-        playlistId: Long,
-        offset: Int,
-        filterState: FilterState,
-        totalCount: Int,
-    ) {
-        viewModelScope.launch {
-            _loadingMore.value = true
-            val pairJob =
-                launch {
-                    mainRepository
-                        .getPlaylistPairSongByOffset(
-                            playlistId,
-                            offset,
-                            filterState,
-                            totalCount,
-                        ).cancellable()
-                        .singleOrNull()
-                        .let { listPairPlaylist ->
-                            Log.w("Pair", "getListTrack: $listPairPlaylist")
-                            if (listPairPlaylist != null) {
-                                if (_listPair.value == null || offset == 0) {
-                                    _listPair.value = listPairPlaylist
-                                } else {
-                                    val temp: ArrayList<PairSongLocalPlaylist> = arrayListOf()
-                                    temp.addAll(_listPair.value ?: emptyList())
-                                    temp.addAll(listPairPlaylist)
-                                    _listPair.value = temp
-                                }
-                                setOffset(offset + 1)
-                                Log.w("Pair LocalPlaylistViewModel", "offset: ${_offset.value}")
-                                Log.w("Pair LocalPlaylistViewModel", "listPair: $listPairPlaylist")
-                                Log.w("Pair LocalPlaylistViewModel", "firstPair: ${listPairPlaylist.firstOrNull()?.position}")
-                                mainRepository
-                                    .getSongsByListVideoId(
-                                        listPairPlaylist.map { it.songId },
-                                    ).collect { list ->
-                                        val temp = mutableListOf<SongEntity>()
-                                        temp.addAll(listTrack.value ?: emptyList())
-                                        val newList =
-                                            listPairPlaylist.mapNotNull { pair ->
-                                                list.find { it.videoId == pair.songId }
-                                            }
-                                        temp.addAll(newList)
-                                        _listTrack.value = temp
-                                        _loadingMore.value = false
-                                        Log.w("Pair", "getListTrack: ${_listTrack.value}")
-                                        if (listTrack.value?.size == localPlaylist.value?.tracks?.size && localPlaylist.value?.tracks != null) {
-                                            setOffset(-1)
-                                        }
-                                    }
-                            } else {
-                                setOffset(-1)
-                            }
-                        }
-                }
-            pairJob.join()
-//                mainRepository.getSongsByListVideoIdOffset(list, offset).collect {
-//                    val temp: ArrayList<SongEntity> = arrayListOf()
-//                    var count = 0
-//                    it.forEach { track ->
-//                        temp.add(track)
-//                        if (track.downloadState == DownloadState.STATE_DOWNLOADED) {
-//                            count++
-//                        }
-//                    }
-//                    if (_listTrack.value == null) {
-//                        _listTrack.value = (temp)
-//                    } else {
-//                        val temp2: ArrayList<SongEntity> = arrayListOf()
-//                        temp2.addAll(_listTrack.value!!)
-//                        temp2.addAll(temp)
-//                        _listTrack.value = temp2
-//                    }
-//                    localPlaylist.value?.id?.let {
-//                            id ->
-//                        getPairSongLocalPlaylist(id)
-//                        if (count == it.size &&
-//                            localPlaylist.value?.downloadState != DownloadState.STATE_DOWNLOADED
-//                        ) {
-//                            updatePlaylistDownloadState(id, DownloadState.STATE_DOWNLOADED)
-//                            getLocalPlaylist(id)
-//                        } else if (
-//                            count != it.size &&
-//                            localPlaylist.value?.downloadState != DownloadState.STATE_NOT_DOWNLOADED &&
-//                            localPlaylist.value?.downloadState != DownloadState.STATE_DOWNLOADING
-//                        ) {
-//                            updatePlaylistDownloadState(
-//                                id,
-//                                DownloadState.STATE_NOT_DOWNLOADED,
-//                            )
-//                            getLocalPlaylist(id)
-//                        }
-//                    }
-//                }
-        }
-    }
-
-    val playlistDownloadState: MutableStateFlow<Int> =
-        MutableStateFlow(STATE_NOT_DOWNLOADED)
-
     fun updatePlaylistDownloadState(
         id: Long,
         state: Int,
     ) {
         viewModelScope.launch {
-            mainRepository.getLocalPlaylist(id).collect { playlist ->
-                _localPlaylist.value = playlist
-                mainRepository.updateLocalPlaylistDownloadState(state, id)
-                playlistDownloadState.value = state
-            }
+            localPlaylistManager.updateDownloadState(id, state).collectLatestResource(
+                onSuccess = { mess ->
+                    Log.d(tag, "updatePlaylistDownloadState: $mess")
+                    _uiState.update {
+                        it.copy(
+                            downloadState = state,
+                        )
+                    }
+                },
+            )
         }
     }
 
@@ -449,103 +367,39 @@ class LocalPlaylistViewModel(
 //        }
 //    }
 
-    @UnstableApi
-    fun getDownloadStateFromService(videoId: String) {
-        viewModelScope.launch {
-            val downloadState = downloadUtils.getDownload(videoId).stateIn(viewModelScope)
-            downloadState.collect { down ->
-                if (down != null) {
-                    when (down.state) {
-                        Download.STATE_COMPLETED -> {
-                            mainRepository.getSongById(videoId).collect { song ->
-                                if (song?.downloadState != STATE_DOWNLOADED) {
-                                    mainRepository.updateDownloadState(
-                                        videoId,
-                                        STATE_DOWNLOADED,
-                                    )
-                                    _listTrack.value?.find { it.videoId == videoId }?.copy(downloadState = STATE_DOWNLOADED)?.let { copy ->
-                                        val temp: ArrayList<SongEntity> = arrayListOf()
-                                        temp.addAll(listTrack.value ?: emptyList())
-                                        temp.replaceAll { s -> if (s.videoId == videoId) copy else s }
-                                        _listTrack.value = temp.toList()
-                                    }
-                                }
-                            }
-                            Log.d("Check Downloaded", "Downloaded")
-                        }
-
-                        Download.STATE_FAILED -> {
-                            mainRepository.getSongById(videoId).collect { song ->
-                                if (song?.downloadState != STATE_NOT_DOWNLOADED) {
-                                    mainRepository.updateDownloadState(
-                                        videoId,
-                                        STATE_NOT_DOWNLOADED,
-                                    )
-                                }
-                            }
-                            Log.d("Check Downloaded", "Failed")
-                        }
-
-                        Download.STATE_DOWNLOADING -> {
-                            mainRepository.getSongById(videoId).collect { song ->
-                                if (song?.downloadState != DownloadState.STATE_DOWNLOADING) {
-                                    mainRepository.updateDownloadState(
-                                        videoId,
-                                        DownloadState.STATE_DOWNLOADING,
-                                    )
-                                }
-                            }
-                            Log.d("Check Downloaded", "Downloading ${down.percentDownloaded}")
-                        }
-
-                        Download.STATE_QUEUED -> {
-                            mainRepository.getSongById(videoId).collect { song ->
-                                if (song?.downloadState != DownloadState.STATE_PREPARING) {
-                                    mainRepository.updateDownloadState(
-                                        videoId,
-                                        DownloadState.STATE_PREPARING,
-                                    )
-                                }
-                            }
-                            Log.d("Check Downloaded", "Queued")
-                        }
-
-                        else -> {
-                            Log.d("Check Downloaded", "Not Downloaded")
-                        }
-                    }
-                }
-            }
-        }
-    }
-
     fun updatePlaylistTitle(
         title: String,
         id: Long,
     ) {
         viewModelScope.launch {
+            showLoadingDialog(message = getString(R.string.updating))
             localPlaylistManager
                 .updateTitleLocalPlaylist(id, title)
                 .collectResource(
                     onSuccess = {
                         makeToast(it)
-                        getLocalPlaylist(id)
+                        updatePlaylistState(id)
+                        hideLoadingDialog()
                     },
                     onError = {
                         makeToast(it)
+                        hideLoadingDialog()
                     },
                 )
         }
     }
 
     fun deletePlaylist(id: Long) {
+        showLoadingDialog(message = getString(R.string.delete))
         viewModelScope.launch {
             localPlaylistManager.deleteLocalPlaylist(id).collectLatestResource(
                 onSuccess = {
                     makeToast(it)
+                    hideLoadingDialog()
                 },
                 onError = {
                     makeToast(it)
+                    hideLoadingDialog()
                 },
             )
         }
@@ -555,23 +409,22 @@ class LocalPlaylistViewModel(
         uri: String,
         id: Long,
     ) {
+        showLoadingDialog(message = getString(R.string.updating))
         viewModelScope.launch {
             localPlaylistManager.updateThumbnailLocalPlaylist(id, uri).collectResource(
                 onSuccess = {
                     makeToast(it)
-                    getLocalPlaylist(id)
+                    updatePlaylistState(id)
+                    hideLoadingDialog()
                 },
                 onError = {
                     makeToast(it)
+                    hideLoadingDialog()
                 },
             )
         }
     }
 
-    fun clearLocalPlaylist() {
-        _localPlaylist.value = null
-    }
-
     fun updateDownloadState(
         videoId: String,
         state: Int,
@@ -590,6 +443,7 @@ class LocalPlaylistViewModel(
                 onSuccess = {
                     makeToast(it)
                     onApplyActions(PagingActions.Remove(song))
+                    updatePlaylistState(id)
                 },
                 onError = {
                     makeToast(it)
@@ -602,31 +456,34 @@ class LocalPlaylistViewModel(
     fun downloadFullPlaylistState(id: Long) {
         viewModelScope.launch {
             downloadUtils.downloads.collect { download ->
-                playlistDownloadState.value =
-                    if (listJob.value.all { download[it.videoId]?.state == Download.STATE_COMPLETED }) {
-                        mainRepository.updateLocalPlaylistDownloadState(
-                            STATE_DOWNLOADED,
-                            id,
-                        )
-                        STATE_DOWNLOADED
-                    } else if (listJob.value.all {
-                            download[it.videoId]?.state == Download.STATE_QUEUED ||
-                                download[it.videoId]?.state == Download.STATE_DOWNLOADING ||
-                                download[it.videoId]?.state == Download.STATE_COMPLETED
+                _uiState.update { ui ->
+                    ui.copy(downloadState =
+                        if (listJob.value.all { download[it.videoId]?.state == Download.STATE_COMPLETED }) {
+                            mainRepository.updateLocalPlaylistDownloadState(
+                                STATE_DOWNLOADED,
+                                id,
+                            )
+                            STATE_DOWNLOADED
+                        } else if (listJob.value.all {
+                                download[it.videoId]?.state == Download.STATE_QUEUED ||
+                                    download[it.videoId]?.state == Download.STATE_DOWNLOADING ||
+                                    download[it.videoId]?.state == Download.STATE_COMPLETED
+                            }
+                        ) {
+                            mainRepository.updateLocalPlaylistDownloadState(
+                                STATE_DOWNLOADING,
+                                id,
+                            )
+                            STATE_DOWNLOADING
+                        } else {
+                            mainRepository.updateLocalPlaylistDownloadState(
+                                STATE_NOT_DOWNLOADED,
+                                id,
+                            )
+                            STATE_NOT_DOWNLOADED
                         }
-                    ) {
-                        mainRepository.updateLocalPlaylistDownloadState(
-                            DownloadState.STATE_DOWNLOADING,
-                            id,
-                        )
-                        DownloadState.STATE_DOWNLOADING
-                    } else {
-                        mainRepository.updateLocalPlaylistDownloadState(
-                            STATE_NOT_DOWNLOADED,
-                            id,
-                        )
-                        STATE_NOT_DOWNLOADED
-                    }
+                    )
+                }
             }
         }
     }
@@ -643,174 +500,129 @@ class LocalPlaylistViewModel(
         }
     }
 
-    fun syncPlaylistWithYouTubePlaylist(playlist: LocalPlaylistEntity) {
+    fun syncPlaylistWithYouTubePlaylist(id: Long) {
+        makeToast(getString(R.string.syncing))
+        showLoadingDialog(message = getString(R.string.syncing))
         viewModelScope.launch {
-            mainRepository.createYouTubePlaylist(playlist).collect {
-                if (it != null) {
-                    val ytId = "VL$it"
-                    mainRepository.updateLocalPlaylistYouTubePlaylistId(playlist.id, ytId)
-                    mainRepository.updateLocalPlaylistYouTubePlaylistSynced(playlist.id, 1)
-                    mainRepository.getLocalPlaylistByYoutubePlaylistId(ytId).collect { yt ->
-                        if (yt != null) {
-                            mainRepository.updateLocalPlaylistYouTubePlaylistSyncState(
-                                yt.id,
-                                LocalPlaylistEntity.YouTubeSyncState.Synced,
-                            )
-                            mainRepository.getLocalPlaylist(playlist.id).collect { last ->
-                                _localPlaylist.emit(last)
-                                Toast
-                                    .makeText(
-                                        application,
-                                        application.getString(R.string.synced),
-                                        Toast.LENGTH_SHORT,
-                                    ).show()
-                            }
-                        }
-                    }
-                } else {
-                    Toast
-                        .makeText(
-                            application,
-                            application.getString(R.string.error),
-                            Toast.LENGTH_SHORT,
-                        ).show()
-                }
-            }
+            localPlaylistManager
+                .syncLocalPlaylistToYouTubePlaylist(id)
+                .collectLatestResource(
+                    onSuccess = { ytId ->
+                        updateLocalPlaylistSyncState(id, LocalPlaylistEntity.YouTubeSyncState.Synced, ytId)
+                        makeToast(getString(R.string.synced))
+                        hideLoadingDialog()
+                    },
+                    onError = {
+                        makeToast(it)
+                        updateLocalPlaylistSyncState(id, LocalPlaylistEntity.YouTubeSyncState.NotSynced)
+                        hideLoadingDialog()
+                    },
+                )
+//            mainRepository.createYouTubePlaylist(playlist).collect {
+//                if (it != null) {
+//                    val ytId = "VL$it"
+//                    mainRepository.updateLocalPlaylistYouTubePlaylistId(playlist.id, ytId)
+//                    mainRepository.updateLocalPlaylistYouTubePlaylistSynced(playlist.id, 1)
+//                    mainRepository.getLocalPlaylistByYoutubePlaylistId(ytId).collect { yt ->
+//                        if (yt != null) {
+//                            mainRepository.updateLocalPlaylistYouTubePlaylistSyncState(
+//                                yt.id,
+//                                LocalPlaylistEntity.YouTubeSyncState.Synced,
+//                            )
+//                            mainRepository.getLocalPlaylist(playlist.id).collect { last ->
+//                                _localPlaylist.emit(last)
+//                                Toast
+//                                    .makeText(
+//                                        application,
+//                                        application.getString(R.string.synced),
+//                                        Toast.LENGTH_SHORT,
+//                                    ).show()
+//                            }
+//                        }
+//                    }
+//                } else {
+//                    Toast
+//                        .makeText(
+//                            application,
+//                            application.getString(R.string.error),
+//                            Toast.LENGTH_SHORT,
+//                        ).show()
+//                }
+//            }
         }
     }
 
-    fun unsyncPlaylistWithYouTubePlaylist(playlist: LocalPlaylistEntity) {
+    private fun updateLocalPlaylistSyncState(
+        id: Long,
+        syncState: Int,
+        ytId: String? = null,
+    ) {
+        showLoadingDialog()
         viewModelScope.launch {
-            mainRepository.updateLocalPlaylistYouTubePlaylistId(playlist.id, null)
-            mainRepository.updateLocalPlaylistYouTubePlaylistSynced(playlist.id, 0)
-            mainRepository.updateLocalPlaylistYouTubePlaylistSyncState(
-                playlist.id,
-                LocalPlaylistEntity.YouTubeSyncState.NotSynced,
+            localPlaylistManager.updateSyncState(id, syncState).collectLatestResource(
+                onSuccess = { mess ->
+                    makeToast(mess)
+                    _uiState.update {
+                        it.copy(
+                            syncState = syncState,
+                        )
+                    }
+                    hideLoadingDialog()
+                }, onError = {
+                    makeToast(it)
+                    hideLoadingDialog()
+                },
             )
-            mainRepository.getLocalPlaylist(playlist.id).collect { last ->
-                if (last.syncedWithYouTubePlaylist == 0) {
-                    _localPlaylist.emit(last)
-                    Toast
-                        .makeText(
-                            application,
-                            application.getString(R.string.unsynced),
-                            Toast.LENGTH_SHORT,
-                        ).show()
-                }
+            if (ytId != null) {
+                localPlaylistManager.updateYouTubePlaylistId(id, ytId).collectLatestResource(
+                    onSuccess = { mess ->
+                        Log.d(tag, "updateLocalPlaylistSyncState: $mess")
+                        _uiState.update {
+                            it.copy(
+                                ytPlaylistId = ytId,
+                            )
+                        }
+                    },
+                )
             }
         }
     }
 
-    fun updateYouTubePlaylistTitle(
-        title: String,
-        youtubePlaylistId: String,
-    ) {
+    fun unsyncPlaylistWithYouTubePlaylist(id: Long) {
+        makeToast(getString(R.string.unsyncing))
+        showLoadingDialog(message = getString(R.string.unsyncing))
         viewModelScope.launch {
-            mainRepository.updateLocalPlaylistYouTubePlaylistSyncState(
-                localPlaylist.value?.id!!,
-                LocalPlaylistEntity.YouTubeSyncState.Syncing,
+            localPlaylistManager.unsyncLocalPlaylist(id).collectLatestResource(
+                onSuccess = { mess ->
+                    makeToast(mess)
+                    _uiState.update {
+                        it.copy(
+                            syncState = LocalPlaylistEntity.YouTubeSyncState.NotSynced,
+                            ytPlaylistId = null,
+                        )
+                    }
+                    hideLoadingDialog()
+                },
+                onError = {
+                    makeToast(it)
+                    hideLoadingDialog()
+                },
             )
-            mainRepository.editYouTubePlaylist(title, youtubePlaylistId).collect { status ->
-                if (status == 200) {
-                    mainRepository.updateLocalPlaylistYouTubePlaylistSyncState(
-                        localPlaylist.value?.id!!,
-                        LocalPlaylistEntity.YouTubeSyncState.Synced,
-                    )
-                    Toast
-                        .makeText(
-                            application,
-                            application.getString(R.string.synced),
-                            Toast.LENGTH_SHORT,
-                        ).show()
-                } else {
-                    mainRepository.updateLocalPlaylistYouTubePlaylistSyncState(
-                        localPlaylist.value?.id!!,
-                        LocalPlaylistEntity.YouTubeSyncState.NotSynced,
-                    )
-                    Toast
-                        .makeText(
-                            application,
-                            application.getString(R.string.error),
-                            Toast.LENGTH_SHORT,
-                        ).show()
-                }
-            }
         }
     }
 
     fun updateListTrackSynced(
-        id: Long,
-        list: List<String>,
-        youtubeId: String,
+        id: Long
     ) {
+        makeToast(getString(R.string.syncing))
+        showLoadingDialog(message = getString(R.string.syncing))
         viewModelScope.launch {
-            mainRepository.getPlaylistData(youtubeId).collect { yt ->
-                if (yt is Resource.Success) {
-                    if (yt.data != null) {
-                        val listTrack: ArrayList<String> = arrayListOf()
-                        listTrack.addAll(list)
-                        yt.data.tracks.forEach { track ->
-                            if (!list.contains(track.videoId)) {
-                                listTrack.add(track.videoId)
-                                mainRepository.insertSong(track.toSongEntity()).first().let {
-                                    println("Insert song $it")
-                                }
-                                mainRepository.insertPairSongLocalPlaylist(
-                                    PairSongLocalPlaylist(
-                                        playlistId = id,
-                                        songId = track.videoId,
-                                        position = yt.data.tracks.indexOf(track),
-                                        inPlaylist = LocalDateTime.now(),
-                                    ),
-                                )
-                            }
-                        }
-                        mainRepository.updateLocalPlaylistTracks(listTrack, id)
-                        if (yt.data.tracks.size < list.size) {
-                            list.forEach { track2 ->
-                                if (!yt.data.tracks
-                                        .toListVideoId()
-                                        .contains(track2)
-                                ) {
-                                    mainRepository
-                                        .addYouTubePlaylistItem(youtubeId, track2)
-                                        .collect { status ->
-                                            if (status == "STATUS_SUCCEEDED") {
-                                                Toast
-                                                    .makeText(
-                                                        application,
-                                                        application.getString(
-                                                            R.string.added_to_youtube_playlist,
-                                                        ),
-                                                        Toast.LENGTH_SHORT,
-                                                    ).show()
-                                            } else {
-                                                Toast
-                                                    .makeText(
-                                                        application,
-                                                        application.getString(R.string.error),
-                                                        Toast.LENGTH_SHORT,
-                                                    ).show()
-                                            }
-                                        }
-                                }
-                            }
-                        }
-                        Toast
-                            .makeText(
-                                application,
-                                application.getString(R.string.synced),
-                                Toast.LENGTH_SHORT,
-                            ).show()
-                        mainRepository.updateLocalPlaylistYouTubePlaylistSyncState(
-                            id,
-                            LocalPlaylistEntity.YouTubeSyncState.Synced,
-                        )
-                        mainRepository.getLocalPlaylist(id).collect { last ->
-                            _localPlaylist.emit(last)
-                        }
-                    }
+            localPlaylistManager.updateListTrackSynced(id).collectLatest { done ->
+                if (done) {
+                    makeToast(application.getString(R.string.updated))
+                    updatePlaylistState(id, refresh = true)
                 }
+                hideLoadingDialog()
             }
         }
     }
@@ -851,8 +663,7 @@ class LocalPlaylistViewModel(
                         id,
                     )
                 }
-                getLocalPlaylist(id)
-                getPairSongLocalPlaylist(id)
+                updatePlaylistState(id)
             }
         }
     }
@@ -871,53 +682,20 @@ class LocalPlaylistViewModel(
         }
     }
 
-    fun getPairSongLocalPlaylist(id: Long) {
-        viewModelScope.launch {
-            mainRepository.getPlaylistPairSong(id).collect {
-                _listPair.value = (it)
-                Log.w("Pair", "getPairSongLocalPlaylist: $it")
-            }
-        }
-    }
-
     fun removeListSuggestion() {
-        _listSuggestions.value = null
-    }
-
-    fun removeData() {
-        _localPlaylist.value = null
-        _listTrack.value = null
-        _listPair.value = null
-    }
-
-    fun updateLikeStatus(
-        videoId: String,
-        likeStatus: Int,
-    ) {
-        viewModelScope.launch {
-            mainRepository.updateLikeStatus(likeStatus = likeStatus, videoId = videoId)
-            delay(150)
-            mainRepository.getSongById(videoId).collect { song ->
-                if (song != null) {
-                    val temp = mutableListOf<SongEntity>()
-                    temp.addAll(_listTrack.value ?: emptyList())
-                    temp.replaceAll { s -> if (s.videoId == videoId) song else s }
-                    _listTrack.value = temp.toList()
-                }
-            }
-        }
-    }
-
-    fun clearListPair() {
-        _listPair.value = null
+        _uiState.update { it.copy(suggestions = null) }
     }
 
     fun addSuggestTrackToListTrack(track: Track) {
         viewModelScope.launch {
-            _listSuggestions.value?.remove(track)
-            localPlaylist.value?.let { local ->
+            _uiState.update { state ->
+                state.copy(suggestions = state.suggestions?.copy(
+                    songs = state.suggestions.songs.filter { it.videoId != track.videoId }
+                ))
+            }
+            _uiState.value.id.let { id ->
                 localPlaylistManager
-                    .addTrackToLocalPlaylist(local.id, track.toSongEntity())
+                    .addTrackToLocalPlaylist(id, track.toSongEntity())
                     .collectLatestResource(
                         onSuccess = {
                             makeToast(it)
@@ -932,36 +710,178 @@ class LocalPlaylistViewModel(
         }
     }
 
-    private fun isLoadedFullPlaylist(): Boolean = _listTrack.value?.size == _localPlaylist.value?.tracks?.size
-
-    fun clearListTracks() {
-        _listTrack.value = null
-    }
-
     fun onUIEvent(ev: LocalPlaylistUIEvent) {
         when (ev) {
             is LocalPlaylistUIEvent.ChangeFilter -> {
-                if (_filter.value == FilterState.OlderFirst) {
-                    setFilter(FilterState.NewerFirst)
+                val newFilter = if (uiState.value.filterState == FilterState.OlderFirst) {
+                    (FilterState.NewerFirst)
                 } else {
-                    setFilter(FilterState.OlderFirst)
+                    (FilterState.OlderFirst)
                 }
-                Log.w("PlaylistScreen", "new filterState: ${filter.value}")
-                setOffset(0)
-                clearListPair()
-                clearListTracks()
-                if (localPlaylist.value != null) {
-                    localPlaylist.value?.let {
-                        Log.w(
-                            "Pair LocalPlaylistViewModel",
-                            "localPlaylist: ${it.tracks?.size}, listTrack: ${listTrack.value?.size}, listPair: ${listPair.value?.size}",
-                        )
-                        getListTrack(it.id, offset.value, filter.value, it.tracks?.size ?: 0)
-                        // New
-                        getLocalPlaylist(it.id)
+                setFilter(newFilter)
+                Log.w("PlaylistScreen", "new filterState: $newFilter")
+                getTracksPagingState(uiState.value.id, newFilter)
+            }
+
+            is LocalPlaylistUIEvent.ItemClick -> {
+                val loadedList = lazyTrackPagingItems.value?.itemSnapshotList?.toList() ?: return
+                val clickedSong = loadedList.find { it?.videoId == ev.videoId } ?: return
+
+                setQueueData(
+                    QueueData(
+                        listTracks = loadedList.filterNotNull().toArrayListTrack(),
+                        firstPlayedTrack = clickedSong.toTrack(),
+                        playlistId = LOCAL_PLAYLIST_ID + uiState.value.id,
+                        playlistName = "${
+                            getString(
+                                R.string.playlist,
+                            )
+                        } \"${uiState.value.title}\"",
+                        playlistType = PlaylistType.LOCAL_PLAYLIST,
+                        continuation = if (offset.value > 0) {
+                            if (uiState.value.filterState == FilterState.OlderFirst) ASC + offset.value.toString()
+                            else DESC + offset.value.toString()
+                        } else null
+                    )
+                )
+                loadMediaItem(
+                    clickedSong,
+                    Config.PLAYLIST_CLICK,
+                    loadedList.indexOf(clickedSong)
+                )
+
+            }
+            is LocalPlaylistUIEvent.SuggestionsItemClick -> {
+                val suggestionsList = uiState.value.suggestions?.songs ?: return
+                val clickedSong = suggestionsList.find { it.videoId == ev.videoId } ?: return
+
+                setQueueData(
+                    QueueData(
+                        listTracks = suggestionsList.toCollection(ArrayList()),
+                        firstPlayedTrack = clickedSong,
+                        playlistId = "RDAMVM${clickedSong.videoId}",
+                        playlistName = "${
+                            getString(
+                                R.string.playlist,
+                            )
+                        } \"${uiState.value.title}\" ${
+                            getString(R.string.suggest)
+                        }",
+                        playlistType = PlaylistType.RADIO,
+                        continuation = null,
+                    ),
+                )
+                loadMediaItem(
+                    clickedSong,
+                    Config.PLAYLIST_CLICK,
+                    0
+                )
+            }
+            is LocalPlaylistUIEvent.PlayClick -> {
+                val loadedList = lazyTrackPagingItems.value?.itemSnapshotList?.toList().let {
+                    if (it.isNullOrEmpty()) {
+                        makeToast(getString(R.string.playlist_is_empty))
+                        return
+                    } else {
+                        it.filterNotNull().toArrayListTrack()
                     }
                 }
+                val firstPlayTrack = loadedList.firstOrNull()
+                setQueueData(
+                    QueueData(
+                        listTracks = loadedList,
+                        firstPlayedTrack = firstPlayTrack,
+                        playlistId = LOCAL_PLAYLIST_ID + uiState.value.id,
+                        playlistName = "${
+                            getString(
+                                R.string.playlist,
+                            )
+                        } \"${uiState.value.title}\"",
+                        playlistType = PlaylistType.LOCAL_PLAYLIST,
+                        continuation =
+                        if (offset.value > 0) {
+                            if (uiState.value.filterState == FilterState.OlderFirst) {
+                                (ASC + offset.toString())
+                            } else {
+                                (DESC + offset)
+                            }
+                        } else {
+                            null
+                        },
+                    )
+                )
+                loadMediaItem(
+                    firstPlayTrack,
+                    Config.PLAYLIST_CLICK,
+                    0
+                )
+            }
+            is LocalPlaylistUIEvent.ShuffleClick -> {
+                val loadedList = lazyTrackPagingItems.value?.itemSnapshotList?.toList().let {
+                    if (it.isNullOrEmpty()) {
+                        makeToast(getString(R.string.playlist_is_empty))
+                        return
+                    } else {
+                        it.filterNotNull().toArrayListTrack()
+                    }
+                }
+                val random = loadedList.random()
+                setQueueData(
+                    QueueData(
+                        listTracks = loadedList,
+                        firstPlayedTrack = random,
+                        playlistId = LOCAL_PLAYLIST_ID + uiState.value.id,
+                        playlistName = "${
+                            getString(
+                                R.string.playlist,
+                            )
+                        } \"${uiState.value.title}\"",
+                        playlistType = PlaylistType.LOCAL_PLAYLIST,
+                        continuation =
+                        if (offset.value > 0) {
+                            if (uiState.value.filterState == FilterState.OlderFirst) {
+                                (ASC + offset.toString())
+                            } else {
+                                (DESC + offset)
+                            }
+                        } else {
+                            null
+                        },
+                    )
+                )
+                loadMediaItem(
+                    random,
+                    Config.PLAYLIST_CLICK,
+                    loadedList.indexOf(random)
+                )
             }
+
+        }
+    }
+
+    fun updatePlaylistState(id: Long, refresh: Boolean = false) {
+        viewModelScope.launch {
+            localPlaylistManager.getLocalPlaylist(id).collectLatestResource(
+                onSuccess = { pl ->
+                    if (pl != null) {
+                        _uiState.update {
+                            it.copy(
+                                id = pl.id,
+                                title = pl.title,
+                                thumbnail = pl.thumbnail,
+                                inLibrary = pl.inLibrary,
+                                downloadState = pl.downloadState,
+                                syncState = pl.syncState,
+                                ytPlaylistId = pl.youtubePlaylistId,
+                                trackCount = pl.tracks?.size ?: 0,
+                            )
+                        }
+                        if (refresh) {
+                            getTracksPagingState(id, _uiState.value.filterState)
+                        }
+                    }
+                },
+            )
         }
     }
 
@@ -976,6 +896,31 @@ class LocalPlaylistViewModel(
             }
         }
     }
+
+    fun downloadFullPlaylist() {
+        viewModelScope.launch {
+            val fullTracks = localPlaylistManager.getFullPlaylistTracks(id = uiState.value.id)
+            val listJob = fullTracks.filter { it.downloadState != STATE_DOWNLOADED }.map { it.videoId }
+            if (listJob.isNotEmpty()) {
+                downloadTracks(listJob)
+                downloadFullPlaylistState(uiState.value.id)
+            } else {
+                makeToast(getString(R.string.playlist_is_empty))
+            }
+        }
+    }
+
+    fun addAllToQueue() {
+        viewModelScope.launch {
+            val fullTracks = localPlaylistManager.getFullPlaylistTracks(id = uiState.value.id)
+            if (fullTracks.isNotEmpty()) {
+                simpleMediaServiceHandler.loadMoreCatalog(fullTracks.toArrayListTrack(), true)
+                makeToast(getString(R.string.added_to_queue))
+            } else {
+                makeToast(getString(R.string.playlist_is_empty))
+            }
+        }
+    }
 }
 
 sealed class FilterState {
@@ -986,4 +931,16 @@ sealed class FilterState {
 
 sealed class LocalPlaylistUIEvent {
     data object ChangeFilter : LocalPlaylistUIEvent()
+
+    data class ItemClick(
+        val videoId: String
+    ) : LocalPlaylistUIEvent()
+
+    data class SuggestionsItemClick(
+        val videoId: String
+    ) : LocalPlaylistUIEvent()
+
+    data object PlayClick : LocalPlaylistUIEvent()
+
+    data object ShuffleClick : LocalPlaylistUIEvent()
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/maxrave/simpmusic/viewModel/NowPlayingBottomSheetViewModel.kt b/app/src/main/java/com/maxrave/simpmusic/viewModel/NowPlayingBottomSheetViewModel.kt
new file mode 100644
index 00000000..4fa231c3
--- /dev/null
+++ b/app/src/main/java/com/maxrave/simpmusic/viewModel/NowPlayingBottomSheetViewModel.kt
@@ -0,0 +1,238 @@
+package com.maxrave.simpmusic.viewModel
+
+import android.app.Application
+import android.content.Intent
+import android.util.Log
+import androidx.core.net.toUri
+import androidx.lifecycle.viewModelScope
+import androidx.media3.common.util.UnstableApi
+import androidx.media3.exoplayer.offline.DownloadRequest
+import androidx.media3.exoplayer.offline.DownloadService
+import com.maxrave.simpmusic.R
+import com.maxrave.simpmusic.common.DownloadState
+import com.maxrave.simpmusic.data.dataStore.DataStoreManager.Settings.MUSIXMATCH
+import com.maxrave.simpmusic.data.dataStore.DataStoreManager.Settings.YOUTUBE
+import com.maxrave.simpmusic.data.db.entities.LocalPlaylistEntity
+import com.maxrave.simpmusic.data.db.entities.SongEntity
+import com.maxrave.simpmusic.extension.toTrack
+import com.maxrave.simpmusic.service.SleepTimerState
+import com.maxrave.simpmusic.service.test.download.MusicDownloadService
+import com.maxrave.simpmusic.viewModel.base.BaseViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.collectLatest
+import kotlinx.coroutines.flow.singleOrNull
+import kotlinx.coroutines.launch
+import org.koin.android.annotation.KoinViewModel
+
+@UnstableApi
+@KoinViewModel
+class NowPlayingBottomSheetViewModel(
+    private val application: Application,
+): BaseViewModel(application) {
+    override val tag: String
+        get() = "NowPlayingBottomSheetViewModel"
+
+    private val _uiState: MutableStateFlow<NowPlayingBottomSheetUIState> = MutableStateFlow(
+        NowPlayingBottomSheetUIState(
+            songEntity = null,
+            listLocalPlaylist = emptyList(),
+            mainLyricsProvider = MUSIXMATCH,
+            sleepTimer = SleepTimerState(
+                false,
+                0
+            )
+        )
+    )
+    val uiState: StateFlow<NowPlayingBottomSheetUIState> get() = _uiState.asStateFlow()
+
+    init {
+        viewModelScope.launch {
+            val sleepTimerJob = launch {
+                simpleMediaServiceHandler.sleepTimerState.collectLatest {
+                    _uiState.value = _uiState.value.copy(sleepTimer = it)
+                }
+            }
+            val listLocalPlaylistJob = launch {
+                mainRepository.getAllLocalPlaylists().collectLatest {
+                    _uiState.value = _uiState.value.copy(listLocalPlaylist = it)
+                }
+            }
+            val mainLyricsProviderJob = launch {
+                dataStoreManager.lyricsProvider.collectLatest {
+                    when (it) {
+                        MUSIXMATCH -> {
+                            _uiState.value = _uiState.value.copy(mainLyricsProvider = MUSIXMATCH)
+                        }
+                        YOUTUBE -> {
+                            _uiState.value = _uiState.value.copy(mainLyricsProvider = YOUTUBE)
+                        }
+                        else -> {
+                            log("Unknown lyrics provider", Log.ERROR)
+                        }
+                    }
+                }
+            }
+            sleepTimerJob.join()
+            listLocalPlaylistJob.join()
+            mainLyricsProviderJob.join()
+        }
+    }
+
+    fun setSongEntity(songEntity: SongEntity?) {
+        val songOrNowPlaying = songEntity ?: (simpleMediaServiceHandler.nowPlayingState.value.songEntity ?: return)
+        viewModelScope.launch {
+            songOrNowPlaying.videoId.let {
+                mainRepository.getSongById(it).singleOrNull().let { song ->
+                    if (song != null) {
+                        getSongEntityFlow(videoId = song.videoId)
+                    } else {
+                        mainRepository.insertSong(songOrNowPlaying).singleOrNull()?.let {
+                            getSongEntityFlow(videoId = songOrNowPlaying.videoId)
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    private fun getSongEntityFlow(videoId: String) {
+        viewModelScope.launch {
+            mainRepository.getSongAsFlow(videoId).collectLatest {
+                _uiState.value = _uiState.value.copy(songEntity = it)
+            }
+        }
+    }
+
+    fun onUIEvent(ev: NowPlayingBottomSheetUIEvent) {
+        val songEntity = uiState.value.songEntity ?: return
+        viewModelScope.launch {
+            when (ev) {
+                is NowPlayingBottomSheetUIEvent.DeleteFromPlaylist -> {
+
+                }
+                is NowPlayingBottomSheetUIEvent.ToggleLike -> {
+                    mainRepository.updateLikeStatus(
+                        songEntity.videoId, if (songEntity.liked) 0 else 1
+                    )
+                }
+                is NowPlayingBottomSheetUIEvent.Download -> {
+                    when (songEntity.downloadState) {
+                        DownloadState.STATE_NOT_DOWNLOADED -> {
+                            mainRepository.updateDownloadState(
+                                    videoId = songEntity.videoId,
+                                    downloadState = DownloadState.STATE_PREPARING
+                                )
+                            val downloadRequest = DownloadRequest.Builder(
+                                songEntity.videoId,
+                                songEntity.videoId.toUri()
+                            ).setData(songEntity.title.toByteArray())
+                                .setCustomCacheKey(songEntity.videoId)
+                                .build()
+                            DownloadService.sendAddDownload(
+                                application,
+                                MusicDownloadService::class.java,
+                                downloadRequest,
+                                false
+                            )
+                            makeToast(getString(R.string.downloading))
+                        }
+                        DownloadState.STATE_PREPARING, DownloadState.STATE_DOWNLOADING -> {
+                            DownloadService.sendRemoveDownload(
+                                application,
+                                MusicDownloadService::class.java,
+                                songEntity.videoId,
+                                false
+                            )
+                            mainRepository.updateDownloadState(
+                                songEntity.videoId,
+                                DownloadState.STATE_NOT_DOWNLOADED
+                            )
+                            makeToast(getString(R.string.removed_download))
+                        }
+                        DownloadState.STATE_DOWNLOADED -> {
+                            DownloadService.sendRemoveDownload(
+                                application,
+                                MusicDownloadService::class.java,
+                                songEntity.videoId,
+                                false
+                            )
+                            mainRepository.updateDownloadState(
+                                songEntity.videoId,
+                                DownloadState.STATE_NOT_DOWNLOADED
+                            )
+                            makeToast(getString(R.string.removed_download))
+                        }
+                    }
+                }
+                is NowPlayingBottomSheetUIEvent.AddToPlaylist -> {
+                    val targetPlaylist = uiState.value.listLocalPlaylist.find { it.id == ev.playlistId } ?: return@launch
+                    val newList = (targetPlaylist.tracks ?: emptyList<String>()).toMutableList()
+                    if (newList.contains(songEntity.videoId)) {
+                        return@launch
+                    }
+                    else {
+                        mainRepository.updateLocalPlaylistTracks(
+                            tracks = newList.apply {
+                                add(songEntity.videoId)
+                            },
+                            id = ev.playlistId
+                        )
+                        makeToast(getString(R.string.added_to_playlist))
+                    }
+
+                }
+                is NowPlayingBottomSheetUIEvent.PlayNext -> {
+                    simpleMediaServiceHandler.playNext(songEntity.toTrack())
+                    makeToast(getString(R.string.play_next))
+                }
+                is NowPlayingBottomSheetUIEvent.AddToQueue -> {
+                    simpleMediaServiceHandler.loadMoreCatalog(arrayListOf(songEntity.toTrack()), isAddToQueue = true)
+                    makeToast(getString(R.string.added_to_queue))
+                }
+                is NowPlayingBottomSheetUIEvent.ChangeLyricsProvider -> {
+                    if (listOf(MUSIXMATCH, YOUTUBE).contains(ev.lyricsProvider)) {
+                        dataStoreManager.setLyricsProvider(ev.lyricsProvider)
+                    } else return@launch
+                }
+                is NowPlayingBottomSheetUIEvent.SetSleepTimer -> {
+                    if (ev.cancel) {
+                        simpleMediaServiceHandler.sleepStop()
+                        makeToast(getString(R.string.sleep_timer_off_done))
+                    } else if (ev.minutes > 0) {
+                        simpleMediaServiceHandler.sleepStart(ev.minutes)
+                    }
+                }
+                is NowPlayingBottomSheetUIEvent.Share -> {
+                    val shareIntent = Intent(Intent.ACTION_SEND)
+                    shareIntent.type = "text/plain"
+                    val url = "https://music.youtube.com/watch?v=${songEntity.videoId}"
+                    shareIntent.putExtra(Intent.EXTRA_TEXT, url)
+                    val chooserIntent = Intent.createChooser(shareIntent, getString(R.string.share_url))
+                    application.startActivity(chooserIntent)
+                }
+            }
+        }
+    }
+
+}
+
+data class NowPlayingBottomSheetUIState(
+    val songEntity: SongEntity?,
+    val listLocalPlaylist: List<LocalPlaylistEntity>,
+    val mainLyricsProvider: String, // MUSIXMATCH OR YOUTUBE ONLY
+    val sleepTimer: SleepTimerState
+)
+
+sealed class NowPlayingBottomSheetUIEvent {
+    data class DeleteFromPlaylist(val videoId: String, val playlistId: Long): NowPlayingBottomSheetUIEvent()
+    data object ToggleLike: NowPlayingBottomSheetUIEvent()
+    data object Download: NowPlayingBottomSheetUIEvent()
+    data class AddToPlaylist(val playlistId: Long): NowPlayingBottomSheetUIEvent()
+    data object PlayNext: NowPlayingBottomSheetUIEvent()
+    data object AddToQueue: NowPlayingBottomSheetUIEvent()
+    data class ChangeLyricsProvider(val lyricsProvider: String): NowPlayingBottomSheetUIEvent()
+    data class SetSleepTimer(val cancel: Boolean = false, val minutes: Int = 0): NowPlayingBottomSheetUIEvent()
+    data object Share: NowPlayingBottomSheetUIEvent()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/maxrave/simpmusic/viewModel/SettingsViewModel.kt b/app/src/main/java/com/maxrave/simpmusic/viewModel/SettingsViewModel.kt
index 88257a13..ead73219 100644
--- a/app/src/main/java/com/maxrave/simpmusic/viewModel/SettingsViewModel.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/viewModel/SettingsViewModel.kt
@@ -107,6 +107,8 @@ class SettingsViewModel(
     private var _translucentBottomBar: MutableStateFlow<String?> = MutableStateFlow(null)
     val translucentBottomBar: StateFlow<String?> = _translucentBottomBar
 
+    fun getAudioSessionId() = simpleMediaServiceHandler.player.audioSessionId
+
     fun getTranslucentBottomBar() {
         viewModelScope.launch {
             dataStoreManager.translucentBottomBar.collect { translucentBottomBar ->
diff --git a/app/src/main/java/com/maxrave/simpmusic/viewModel/SharedViewModel.kt b/app/src/main/java/com/maxrave/simpmusic/viewModel/SharedViewModel.kt
index 9c1f5df7..3a79e95f 100644
--- a/app/src/main/java/com/maxrave/simpmusic/viewModel/SharedViewModel.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/viewModel/SharedViewModel.kt
@@ -59,7 +59,6 @@ import com.maxrave.simpmusic.service.PlayerEvent
 import com.maxrave.simpmusic.service.PlaylistType
 import com.maxrave.simpmusic.service.QueueData
 import com.maxrave.simpmusic.service.RepeatState
-import com.maxrave.simpmusic.service.SimpleMediaServiceHandler
 import com.maxrave.simpmusic.service.SimpleMediaState
 import com.maxrave.simpmusic.service.SleepTimerState
 import com.maxrave.simpmusic.service.test.download.DownloadUtils
@@ -110,8 +109,6 @@ class SharedViewModel(
 
     private val downloadUtils: DownloadUtils by inject()
 
-    var simpleMediaServiceHandler: SimpleMediaServiceHandler? = null
-
     private var _songDB: MutableLiveData<SongEntity?> = MutableLiveData()
     val songDB: LiveData<SongEntity?> = _songDB
     private var _liked: MutableStateFlow<Boolean> = MutableStateFlow(false)
@@ -241,8 +238,7 @@ class SharedViewModel(
         }
     }
 
-    fun setHandler(handler: SimpleMediaServiceHandler) {
-        simpleMediaServiceHandler = handler
+    init {
         runBlocking {
             dataStoreManager.getString("miniplayer_guide").first().let {
                 isFirstMiniplayer = it != STATUS_DONE
@@ -255,7 +251,7 @@ class SharedViewModel(
             }
         }
         viewModelScope.launch {
-            handler.nowPlayingState.distinctUntilChangedBy {
+            simpleMediaServiceHandler.nowPlayingState.distinctUntilChangedBy {
                 it.songEntity?.videoId
             }.collectLatest { state ->
                 Log.w(tag, "NowPlayingState is $state")
@@ -268,7 +264,7 @@ class SharedViewModel(
                     canvasData = null,
                     lyricsData = null,
                     songInfoData = null,
-                    playlistName = simpleMediaServiceHandler?.queueData?.value?.playlistName ?: ""
+                    playlistName = simpleMediaServiceHandler.queueData.value?.playlistName ?: ""
                 )
                 _likeStatus.value = false
                 _liked.value = state.songEntity?.liked ?: false
@@ -291,7 +287,7 @@ class SharedViewModel(
         viewModelScope.launch {
             val job1 =
                 launch {
-                    handler.simpleMediaState.collect { mediaState ->
+                    simpleMediaServiceHandler.simpleMediaState.collect { mediaState ->
                         when (mediaState) {
                             is SimpleMediaState.Buffering -> {
                                 _timeline.update {
@@ -330,7 +326,7 @@ class SharedViewModel(
                                             it.copy(
                                                 current = mediaState.progress,
                                                 loading = true,
-                                                total = handler.getPlayerDuration()
+                                                total = simpleMediaServiceHandler.getPlayerDuration()
                                             )
                                         }
                                     }
@@ -356,7 +352,7 @@ class SharedViewModel(
                             is SimpleMediaState.Ready -> {
                                 _timeline.update {
                                     it.copy(
-                                        current = handler.getProgress(),
+                                        current = simpleMediaServiceHandler.getProgress(),
                                         loading = false,
                                         total = mediaState.duration
                                     )
@@ -480,18 +476,18 @@ class SharedViewModel(
 //                    }
             val controllerJob = launch {
                 Log.w(tag, "ControllerJob is running")
-                handler.controlState.collectLatest {
+                simpleMediaServiceHandler.controlState.collectLatest {
                     Log.w(tag, "ControlState is $it")
                     _controllerState.value = it
                 }
             }
             val sleepTimerJob = launch {
-                handler.sleepTimerState.collectLatest {
+                simpleMediaServiceHandler.sleepTimerState.collectLatest {
                     _sleepTimerState.value = it
                 }
             }
             val playlistNameJob = launch {
-                handler.queueData.collectLatest {
+                simpleMediaServiceHandler.queueData.collectLatest {
                     _nowPlayingScreenData.update {
                         it.copy(playlistName = it.playlistName)
                     }
@@ -607,11 +603,11 @@ class SharedViewModel(
     }
 
     fun setSleepTimer(minutes: Int) {
-        simpleMediaServiceHandler?.sleepStart(minutes)
+        simpleMediaServiceHandler.sleepStart(minutes)
     }
 
     fun stopSleepTimer() {
-        simpleMediaServiceHandler?.sleepStop()
+        simpleMediaServiceHandler.sleepStop()
     }
 
     private var _downloadState: MutableStateFlow<Download?> = MutableStateFlow(null)
@@ -798,12 +794,12 @@ class SharedViewModel(
     }
 
     fun getCurrentMediaItemIndex(): Int {
-        return runBlocking { simpleMediaServiceHandler?.currentSongIndex?.first() } ?: 0
+        return runBlocking { simpleMediaServiceHandler.currentSongIndex?.first() } ?: 0
     }
 
     @UnstableApi
     fun playMediaItemInMediaSource(index: Int) {
-        simpleMediaServiceHandler?.playMediaItemInMediaSource(index)
+        simpleMediaServiceHandler.playMediaItemInMediaSource(index)
     }
 
     fun loadSharedMediaItem(videoId: String) {
@@ -811,7 +807,7 @@ class SharedViewModel(
             mainRepository.getFullMetadata(videoId).collectLatest {
                 if (it != null) {
                     val track = it.toTrack()
-                    simpleMediaServiceHandler?.setQueueData(
+                    simpleMediaServiceHandler.setQueueData(
                         QueueData(
                             listTracks = arrayListOf(track),
                             firstPlayedTrack = track,
@@ -838,7 +834,7 @@ class SharedViewModel(
     ) {
         quality = runBlocking { dataStoreManager.quality.first() }
         viewModelScope.launch {
-            simpleMediaServiceHandler?.clearMediaItems()
+            simpleMediaServiceHandler.clearMediaItems()
             mainRepository.insertSong(track.toSongEntity()).first().let {
                 println("insertSong: $it")
                 mainRepository.getSongById(track.videoId)
@@ -857,20 +853,20 @@ class SharedViewModel(
                 )
             }
             withContext(Dispatchers.Main) {
-                simpleMediaServiceHandler?.addMediaItem(track.toMediaItem(), playWhenReady = type != RECOVER_TRACK_QUEUE)
+                simpleMediaServiceHandler.addMediaItem(track.toMediaItem(), playWhenReady = type != RECOVER_TRACK_QUEUE)
             }
 
             when (type) {
                 SONG_CLICK -> {
-                    simpleMediaServiceHandler?.getRelated(track.videoId)
+                    simpleMediaServiceHandler.getRelated(track.videoId)
                 }
 
                 VIDEO_CLICK -> {
-                    simpleMediaServiceHandler?.getRelated(track.videoId)
+                    simpleMediaServiceHandler.getRelated(track.videoId)
                 }
 
                 SHARE -> {
-                    simpleMediaServiceHandler?.getRelated(track.videoId)
+                    simpleMediaServiceHandler.getRelated(track.videoId)
                 }
 
                 PLAYLIST_CLICK -> {
@@ -901,36 +897,36 @@ class SharedViewModel(
         viewModelScope.launch {
             when (uiEvent) {
                 UIEvent.Backward ->
-                    simpleMediaServiceHandler?.onPlayerEvent(
+                    simpleMediaServiceHandler.onPlayerEvent(
                         PlayerEvent.Backward,
                     )
 
-                UIEvent.Forward -> simpleMediaServiceHandler?.onPlayerEvent(PlayerEvent.Forward)
+                UIEvent.Forward -> simpleMediaServiceHandler.onPlayerEvent(PlayerEvent.Forward)
                 UIEvent.PlayPause ->
-                    simpleMediaServiceHandler?.onPlayerEvent(
+                    simpleMediaServiceHandler.onPlayerEvent(
                         PlayerEvent.PlayPause,
                     )
 
-                UIEvent.Next -> simpleMediaServiceHandler?.onPlayerEvent(PlayerEvent.Next)
+                UIEvent.Next -> simpleMediaServiceHandler.onPlayerEvent(PlayerEvent.Next)
                 UIEvent.Previous ->
-                    simpleMediaServiceHandler?.onPlayerEvent(
+                    simpleMediaServiceHandler.onPlayerEvent(
                         PlayerEvent.Previous,
                     )
 
-                UIEvent.Stop -> simpleMediaServiceHandler?.onPlayerEvent(PlayerEvent.Stop)
+                UIEvent.Stop -> simpleMediaServiceHandler.onPlayerEvent(PlayerEvent.Stop)
                 is UIEvent.UpdateProgress -> {
-                    simpleMediaServiceHandler?.onPlayerEvent(
+                    simpleMediaServiceHandler.onPlayerEvent(
                         PlayerEvent.UpdateProgress(
                             uiEvent.newProgress,
                         ),
                     )
                 }
 
-                UIEvent.Repeat -> simpleMediaServiceHandler?.onPlayerEvent(PlayerEvent.Repeat)
-                UIEvent.Shuffle -> simpleMediaServiceHandler?.onPlayerEvent(PlayerEvent.Shuffle)
+                UIEvent.Repeat -> simpleMediaServiceHandler.onPlayerEvent(PlayerEvent.Repeat)
+                UIEvent.Shuffle -> simpleMediaServiceHandler.onPlayerEvent(PlayerEvent.Shuffle)
                 UIEvent.ToggleLike -> {
                     Log.w(tag, "ToggleLike")
-                    simpleMediaServiceHandler?.onPlayerEvent(PlayerEvent.ToggleLike)
+                    simpleMediaServiceHandler.onPlayerEvent(PlayerEvent.ToggleLike)
                 }
             }
         }
@@ -1013,7 +1009,6 @@ class SharedViewModel(
 
     @UnstableApi
     override fun onCleared() {
-        simpleMediaServiceHandler = null
         Log.w("Check onCleared", "onCleared")
     }
 
@@ -1202,11 +1197,11 @@ class SharedViewModel(
     }
 
     fun addQueueToPlayer() {
-        simpleMediaServiceHandler?.addQueueToPlayer()
+        simpleMediaServiceHandler.addQueueToPlayer()
     }
 
     private fun loadPlaylistOrAlbum(index: Int? = null) {
-        simpleMediaServiceHandler?.loadPlaylistOrAlbum(index)
+        simpleMediaServiceHandler.loadPlaylistOrAlbum(index)
     }
 
     private fun updateLyrics(
@@ -1260,7 +1255,7 @@ class SharedViewModel(
                         ) {
                             song.artistName.firstOrNull()
                         } else {
-                            simpleMediaServiceHandler?.nowPlaying?.first()?.mediaMetadata?.artist
+                            simpleMediaServiceHandler.nowPlaying?.first()?.mediaMetadata?.artist
                                 ?: ""
                         }
                     mainRepository.getLyricsData(
@@ -1354,7 +1349,7 @@ class SharedViewModel(
                                     song.toTrack().copy(
                                         durationSeconds = duration,
                                     ),
-                                    "${song.title} ${song.artistName?.firstOrNull() ?: simpleMediaServiceHandler?.nowPlaying?.first()?.mediaMetadata?.artist ?: ""}",
+                                    "${song.title} ${song.artistName?.firstOrNull() ?: simpleMediaServiceHandler.nowPlaying?.first()?.mediaMetadata?.artist ?: ""}",
                                     duration,
                                 )
                             }
@@ -1367,7 +1362,7 @@ class SharedViewModel(
                                         song.toTrack().copy(
                                             durationSeconds = duration,
                                         ),
-                                        "${song.title} ${song.artistName?.firstOrNull() ?: simpleMediaServiceHandler?.nowPlaying?.first()?.mediaMetadata?.artist ?: ""}",
+                                        "${song.title} ${song.artistName?.firstOrNull() ?: simpleMediaServiceHandler.nowPlaying?.first()?.mediaMetadata?.artist ?: ""}",
                                         duration,
                                     )
                                 } else {
@@ -1460,7 +1455,7 @@ class SharedViewModel(
 
     fun addToQueue(track: Track) {
         viewModelScope.launch {
-            simpleMediaServiceHandler?.loadMoreCatalog(arrayListOf(track))
+            simpleMediaServiceHandler.loadMoreCatalog(arrayListOf(track))
             Toast.makeText(
                 context,
                 context.getString(R.string.added_to_queue),
@@ -1474,7 +1469,7 @@ class SharedViewModel(
         viewModelScope.launch {
             val listSong = mainRepository.getSongsByListVideoId(listVideoId).singleOrNull()
             if (!listSong.isNullOrEmpty()){
-                simpleMediaServiceHandler?.loadMoreCatalog(listSong.toArrayListTrack())
+                simpleMediaServiceHandler.loadMoreCatalog(listSong.toArrayListTrack(), true)
                 Toast.makeText(
                     context,
                     context.getString(R.string.added_to_queue),
@@ -1494,7 +1489,7 @@ class SharedViewModel(
 
     fun addListToQueue(listTrack: ArrayList<Track>) {
         viewModelScope.launch {
-            simpleMediaServiceHandler?.loadMoreCatalog(listTrack)
+            simpleMediaServiceHandler.loadMoreCatalog(listTrack)
             Toast.makeText(
                 context,
                 context.getString(R.string.added_to_queue),
@@ -1505,7 +1500,7 @@ class SharedViewModel(
     }
     fun playNext(song: Track) {
         viewModelScope.launch {
-            simpleMediaServiceHandler?.playNext(song)
+            simpleMediaServiceHandler.playNext(song)
             Toast.makeText(context, context.getString(R.string.play_next), Toast.LENGTH_SHORT)
                 .show()
         }
@@ -1515,12 +1510,12 @@ class SharedViewModel(
 
     fun addToYouTubeLiked() {
         viewModelScope.launch {
-            val videoId = simpleMediaServiceHandler?.nowPlaying?.first()?.mediaId
+            val videoId = simpleMediaServiceHandler.nowPlaying.first()?.mediaId
             if (videoId != null) {
                 val like = likeStatus.value
                 if (!like) {
                     mainRepository.addToYouTubeLiked(
-                        simpleMediaServiceHandler?.nowPlaying?.first()?.mediaId,
+                        simpleMediaServiceHandler.nowPlaying.first()?.mediaId,
                     )
                         .collect { response ->
                             if (response == 200) {
@@ -1540,7 +1535,7 @@ class SharedViewModel(
                         }
                 } else {
                     mainRepository.removeFromYouTubeLiked(
-                        simpleMediaServiceHandler?.nowPlaying?.first()?.mediaId,
+                        simpleMediaServiceHandler.nowPlaying?.first()?.mediaId,
                     )
                         .collect {
                             if (it == 200) {
@@ -1597,6 +1592,34 @@ class SharedViewModel(
         )
     }
 
+    fun getPlayer() = simpleMediaServiceHandler.player
+
+    fun getQueueDataFlow() = simpleMediaServiceHandler.queueData
+
+    fun getHandlerStateFlow() = simpleMediaServiceHandler.stateFlow
+
+    fun getCurrentSongIndex() = simpleMediaServiceHandler.currentSongIndex
+
+    fun startLoadMore() {
+        simpleMediaServiceHandler.loadMore()
+    }
+
+    suspend fun swapQueue(from: Int, to: Int) {
+        simpleMediaServiceHandler.swap(from, to)
+    }
+
+    suspend fun moveItemUp(index: Int) {
+        simpleMediaServiceHandler.moveItemUp(index)
+    }
+
+    suspend fun moveItemDown(index: Int) {
+        simpleMediaServiceHandler.moveItemDown(index)
+    }
+
+    fun removeItem(index: Int) {
+        simpleMediaServiceHandler.removeMediaItem(index)
+    }
+
 }
 
 sealed class UIEvent {
diff --git a/app/src/main/java/com/maxrave/simpmusic/viewModel/base/BaseViewModel.kt b/app/src/main/java/com/maxrave/simpmusic/viewModel/base/BaseViewModel.kt
index e5896f06..720a14d9 100644
--- a/app/src/main/java/com/maxrave/simpmusic/viewModel/base/BaseViewModel.kt
+++ b/app/src/main/java/com/maxrave/simpmusic/viewModel/base/BaseViewModel.kt
@@ -1,15 +1,37 @@
 package com.maxrave.simpmusic.viewModel.base
 
 import android.app.Application
+import android.util.Log
 import android.widget.Toast
 import androidx.lifecycle.AndroidViewModel
 import androidx.lifecycle.viewModelScope
+import androidx.media3.common.util.UnstableApi
+import com.maxrave.kotlinytmusicscraper.models.SongItem
+import com.maxrave.simpmusic.R
+import com.maxrave.simpmusic.common.Config.ALBUM_CLICK
+import com.maxrave.simpmusic.common.Config.PLAYLIST_CLICK
+import com.maxrave.simpmusic.common.Config.RECOVER_TRACK_QUEUE
+import com.maxrave.simpmusic.common.Config.SHARE
+import com.maxrave.simpmusic.common.Config.SONG_CLICK
+import com.maxrave.simpmusic.common.Config.VIDEO_CLICK
 import com.maxrave.simpmusic.data.dataStore.DataStoreManager
+import com.maxrave.simpmusic.data.db.entities.SongEntity
+import com.maxrave.simpmusic.data.model.browse.album.Track
 import com.maxrave.simpmusic.data.repository.MainRepository
+import com.maxrave.simpmusic.extension.toMediaItem
+import com.maxrave.simpmusic.extension.toTrack
+import com.maxrave.simpmusic.service.QueueData
+import com.maxrave.simpmusic.service.SimpleMediaServiceHandler
+import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.cancel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
 import org.koin.core.component.KoinComponent
 import org.koin.core.component.inject
 
+@UnstableApi
 abstract class BaseViewModel(
     private val application: Application,
 ) : AndroidViewModel(application),
@@ -17,11 +39,29 @@ abstract class BaseViewModel(
     protected val dataStoreManager: DataStoreManager by inject()
     protected val mainRepository: MainRepository by inject()
 
+    // I want I can play track from any viewModel instead of calling from UI to sharedViewModel
+    protected val simpleMediaServiceHandler: SimpleMediaServiceHandler by inject()
+
     /**
      * Tag for logging
      */
     abstract val tag: String
 
+    /**
+     * Log with viewModel tag
+     */
+    protected fun log(message: String, logType: Int) {
+        when (logType) {
+            Log.ASSERT -> Log.wtf(tag, message)
+            Log.VERBOSE -> Log.v(tag, message)
+            Log.DEBUG -> Log.d(tag, message)
+            Log.INFO -> Log.i(tag, message)
+            Log.WARN -> Log.w(tag, message)
+            Log.ERROR -> Log.e(tag, message)
+            else -> Log.d(tag, message)
+        }
+    }
+
     /**
      * Cancel all jobs
      */
@@ -33,4 +73,56 @@ abstract class BaseViewModel(
     protected fun makeToast(message: String?) {
         Toast.makeText(application, message ?: "NO MESSAGE", Toast.LENGTH_SHORT).show()
     }
+
+    protected fun getString(resId: Int): String = application.getString(resId)
+
+    // Loading dialog
+    private val _showLoadingDialog: MutableStateFlow<Pair<Boolean, String>> = MutableStateFlow(false to getString(R.string.loading))
+    val showLoadingDialog: StateFlow<Pair<Boolean, String>> get() = _showLoadingDialog
+
+    fun showLoadingDialog(message: String? = null) {
+        _showLoadingDialog.value = true to (message ?: getString(R.string.loading))
+    }
+    fun hideLoadingDialog() {
+        _showLoadingDialog.value = false to getString(R.string.loading)
+    }
+
+    /**
+     * Communicate with SimpleMediaServiceHandler to load media item
+     */
+    fun setQueueData(queueData: QueueData) {
+        simpleMediaServiceHandler.setQueueData(queueData)
+    }
+
+    fun <T> loadMediaItem(
+        anyTrack: T,
+        type: String,
+        index: Int? = null
+    ) {
+        val track = when (anyTrack) {
+            is Track -> anyTrack
+            is SongItem -> anyTrack.toTrack()
+            is SongEntity -> anyTrack.toTrack()
+            else -> return
+        }
+        viewModelScope.launch {
+            simpleMediaServiceHandler.clearMediaItems()
+            track.durationSeconds?.let {
+                mainRepository.updateDurationSeconds(it, track.videoId)
+            }
+            withContext(Dispatchers.Main) {
+                simpleMediaServiceHandler.addMediaItem(track.toMediaItem(), playWhenReady = type != RECOVER_TRACK_QUEUE)
+            }
+            when (type) {
+                SONG_CLICK, VIDEO_CLICK, SHARE -> {
+                    simpleMediaServiceHandler.getRelated(track.videoId)
+                }
+                PLAYLIST_CLICK, ALBUM_CLICK -> {
+                    simpleMediaServiceHandler.loadPlaylistOrAlbum(index)
+                }
+            }
+        }
+    }
+
+    fun getQueueData() = simpleMediaServiceHandler.queueData.value
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/maxrave/simpmusic/viewModel/uiState/LocalPlaylistState.kt b/app/src/main/java/com/maxrave/simpmusic/viewModel/uiState/LocalPlaylistState.kt
new file mode 100644
index 00000000..45d32814
--- /dev/null
+++ b/app/src/main/java/com/maxrave/simpmusic/viewModel/uiState/LocalPlaylistState.kt
@@ -0,0 +1,66 @@
+package com.maxrave.simpmusic.viewModel.uiState
+
+import androidx.compose.ui.graphics.Color
+import com.maxrave.simpmusic.common.DownloadState
+import com.maxrave.simpmusic.data.db.entities.LocalPlaylistEntity
+import com.maxrave.simpmusic.data.model.browse.album.Track
+import com.maxrave.simpmusic.ui.theme.md_theme_dark_background
+import com.maxrave.simpmusic.viewModel.FilterState
+import java.time.LocalDateTime
+
+data class LocalPlaylistState(
+    val id: Long,
+    val title: String,
+    val thumbnail: String? = null,
+    val colors: List<Color> =
+        listOf(
+            Color.Black,
+            md_theme_dark_background,
+        ),
+    val inLibrary: LocalDateTime? = null,
+    val downloadState: Int = DownloadState.STATE_NOT_DOWNLOADED,
+    val syncState: Int = LocalPlaylistEntity.YouTubeSyncState.NotSynced,
+    val ytPlaylistId: String? = null,
+    val trackCount: Int = 0,
+    val page: Int = 0,
+    val isLoadedFull: Boolean = false,
+    val loadState: PlaylistLoadState = PlaylistLoadState.Loading,
+    val filterState: FilterState = FilterState.OlderFirst,
+    val suggestions: SuggestionSongs? = null,
+) {
+    sealed class SuggestionState {
+        data object Loading : SuggestionState()
+
+        data object Error : SuggestionState()
+
+        data class Success(
+            val suggestSongs: SuggestionSongs,
+        ) : SuggestionState()
+    }
+
+    sealed class PlaylistLoadState {
+        data object Loading : PlaylistLoadState()
+
+        data object Error : PlaylistLoadState()
+
+        data object Success : PlaylistLoadState()
+    }
+
+    data class SuggestionSongs(
+        val reloadParams: String,
+        val songs: List<Track>,
+    )
+
+    companion object {
+        fun initial(): LocalPlaylistState =
+            LocalPlaylistState(
+                id = 0,
+                title = "",
+                thumbnail = null,
+                inLibrary = null,
+                downloadState = 0,
+                syncState = 0,
+                trackCount = 0,
+            )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index e9171aff..19947b85 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -357,4 +357,6 @@
     <string name="updated_to_youtube_playlist">Updated to YouTube Playlist</string>
     <string name="can_t_add_to_youtube_playlist">Can\'t add to YouTube Playlist</string>
     <string name="can_t_delete_from_youtube_playlist">Can\'t delete song from YouTube Playlist</string>
+    <string name="loading">Loading</string>
+    <string name="updating">Updating</string>
 </resources>
\ No newline at end of file
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 6fce4612..7a5d656a 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -1,25 +1,25 @@
 [versions]
-android = "8.6.0"
+android = "8.6.1"
 kotlin = "2.0.0"
 serialization = "2.0.0"
 ksp = "2.0.0-1.0.22"
-compose-bom = "2024.08.00"
-constraintlayout-compose = "1.0.1"
-activity-compose = "1.9.1"
-lifecycle-viewmodel-compose = "2.8.4"
-lifecycle-runtime-ktx = "2.8.4"
-core-ktx = "1.13.1"
+compose-bom = "2024.10.01"
+constraintlayout-compose = "1.1.0"
+activity-compose = "1.9.3"
+lifecycle-viewmodel-compose = "2.8.7"
+lifecycle-runtime-ktx = "2.8.7"
+core-ktx = "1.15.0"
 appcompat = "1.7.0"
-work = "2.9.1"
+work = "2.10.0"
 material = "1.11.0" #Version 1.12.0 caused bug
-startup-runtime = "1.1.1"
-lifecycle-livedata-ktx = "2.8.4"
-lifecycle-viewmodel-ktx = "2.8.4"
-ui-tooling = "1.6.8"
+startup-runtime = "1.2.0"
+lifecycle-livedata-ktx = "2.8.7"
+lifecycle-viewmodel-ktx = "2.8.7"
+ui-tooling = "1.7.5"
 media3 = "1.4.1"
 palette-ktx = "1.0.0"
 expandable-text = "2.0.0"
-constraintlayout = "2.1.4"
+constraintlayout = "2.2.0"
 junit = "4.13.2"
 androidx-junit = "1.2.1"
 espresso-core = "3.6.1"
@@ -27,12 +27,12 @@ room = "2.6.1"
 legacy-support-v4 = "1.0.0"
 coroutines-android = "1.8.1"
 coroutines-guava = "1.8.1"
-navigation = "2.7.7"
+navigation = "2.8.3"
 gson = "2.10.1"
 coil = "2.6.0"
 easypermissions = "3.0.0"
 preference-ktx = "1.2.1"
-fragment-ktx = "1.8.2"
+fragment-ktx = "1.8.5"
 datastore-preferences = "1.1.1"
 swiperefreshlayout = "1.2.0-alpha01"
 insetter = "0.6.1"
@@ -50,7 +50,7 @@ insetsx = "0.1.0-alpha10"
 ktor = "2.3.12"
 brotli = "0.1.2"
 ksoup = "0.3.1"
-desugaring = "2.1.1"
+desugaring = "2.1.2"
 koin-bom = "4.0.0-RC1"
 koin-annotations = "1.4.0-RC4"
 
@@ -58,6 +58,7 @@ koin-annotations = "1.4.0-RC4"
 desugaring = { group = "com.android.tools", name = "desugar_jdk_libs", version.ref = "desugaring"}
 compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "compose-bom" }
 compose-material3-lib = { group = "androidx.compose.material3", name = "material3" }
+compose-material3-sizeclass = { group = "androidx.compose.material3", name = "material3-window-size-class" }
 compose-ui = { group = "androidx.compose.ui", name = "ui" }
 compose-material-ripple = { group = "androidx.compose.material", name = "material-ripple" }
 compose-material-icons-core = { group = "androidx.compose.material", name = "material-icons-core" }
diff --git a/kotlinYtmusicScraper/build.gradle.kts b/kotlinYtmusicScraper/build.gradle.kts
index 15469b8a..0c41f017 100644
--- a/kotlinYtmusicScraper/build.gradle.kts
+++ b/kotlinYtmusicScraper/build.gradle.kts
@@ -9,7 +9,7 @@ plugins {
 
 android {
     namespace = "com.maxrave.kotlinytmusicscraper"
-    compileSdk = 34
+    compileSdk = 35
 
     defaultConfig {
         minSdk = 26
diff --git a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/YouTube.kt b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/YouTube.kt
index 4f12a080..189a4723 100644
--- a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/YouTube.kt
+++ b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/YouTube.kt
@@ -68,6 +68,14 @@ import com.maxrave.kotlinytmusicscraper.pages.RelatedPage
 import com.maxrave.kotlinytmusicscraper.pages.SearchPage
 import com.maxrave.kotlinytmusicscraper.pages.SearchResult
 import com.maxrave.kotlinytmusicscraper.pages.SearchSuggestionPage
+import com.maxrave.kotlinytmusicscraper.parser.fromPlaylistContinuationToTracks
+import com.maxrave.kotlinytmusicscraper.parser.fromPlaylistToTrack
+import com.maxrave.kotlinytmusicscraper.parser.fromPlaylistToTrackWithSetVideoId
+import com.maxrave.kotlinytmusicscraper.parser.getContinuePlaylistContinuation
+import com.maxrave.kotlinytmusicscraper.parser.getPlaylistContinuation
+import com.maxrave.kotlinytmusicscraper.parser.getReloadParams
+import com.maxrave.kotlinytmusicscraper.parser.getSuggestionSongItems
+import com.maxrave.kotlinytmusicscraper.parser.hasReloadParams
 import com.maxrave.kotlinytmusicscraper.parser.parseMusixmatchLyrics
 import com.maxrave.kotlinytmusicscraper.parser.parseUnsyncedLyrics
 import com.mohamedrejeb.ksoup.html.parser.KsoupHtmlHandler
@@ -206,21 +214,48 @@ object YouTube {
             val response = ytMusic.search(WEB_REMIX, query, filter.value).body<SearchResponse>()
             SearchResult(
                 items =
-                    response.contents?.tabbedSearchResultsRenderer?.tabs?.firstOrNull()
-                        ?.tabRenderer?.content?.sectionListRenderer?.contents?.lastOrNull()
-                        ?.musicShelfRenderer?.contents?.mapNotNull {
+                    response.contents
+                        ?.tabbedSearchResultsRenderer
+                        ?.tabs
+                        ?.firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.sectionListRenderer
+                        ?.contents
+                        ?.lastOrNull()
+                        ?.musicShelfRenderer
+                        ?.contents
+                        ?.mapNotNull {
                             SearchPage.toYTItem(it.musicResponsiveListItemRenderer)
                         }.orEmpty(),
                 listPodcast =
-                    response.contents?.tabbedSearchResultsRenderer?.tabs?.firstOrNull()
-                        ?.tabRenderer?.content?.sectionListRenderer?.contents?.lastOrNull()
-                        ?.musicShelfRenderer?.contents?.mapNotNull {
+                    response.contents
+                        ?.tabbedSearchResultsRenderer
+                        ?.tabs
+                        ?.firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.sectionListRenderer
+                        ?.contents
+                        ?.lastOrNull()
+                        ?.musicShelfRenderer
+                        ?.contents
+                        ?.mapNotNull {
                             SearchPage.toPodcast(it.musicResponsiveListItemRenderer)
                         }.orEmpty(),
                 continuation =
-                    response.contents?.tabbedSearchResultsRenderer?.tabs?.firstOrNull()
-                        ?.tabRenderer?.content?.sectionListRenderer?.contents?.lastOrNull()
-                        ?.musicShelfRenderer?.continuations?.getContinuation(),
+                    response.contents
+                        ?.tabbedSearchResultsRenderer
+                        ?.tabs
+                        ?.firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.sectionListRenderer
+                        ?.contents
+                        ?.lastOrNull()
+                        ?.musicShelfRenderer
+                        ?.continuations
+                        ?.getContinuation(),
             )
         }
 
@@ -234,7 +269,9 @@ object YouTube {
             val response = ytMusic.search(WEB_REMIX, continuation = continuation).body<SearchResponse>()
             SearchResult(
                 items =
-                    response.continuationContents?.musicShelfContinuation?.contents
+                    response.continuationContents
+                        ?.musicShelfContinuation
+                        ?.contents
                         ?.mapNotNull {
                             SearchPage.toYTItem(it.musicResponsiveListItemRenderer)
                         }!!,
@@ -243,7 +280,9 @@ object YouTube {
                         .mapNotNull {
                             SearchPage.toPodcast(it.musicResponsiveListItemRenderer)
                         }.orEmpty(),
-                continuation = response.continuationContents.musicShelfContinuation.continuations?.getContinuation(),
+                continuation =
+                    response.continuationContents.musicShelfContinuation.continuations
+                        ?.getContinuation(),
             )
         }
 
@@ -259,36 +298,135 @@ object YouTube {
     ): Result<AlbumPage> =
         runCatching {
             val response = ytMusic.browse(WEB_REMIX, browseId).body<BrowseResponse>()
-            val playlistId = response.microformat?.microformatDataRenderer?.urlCanonical?.substringAfterLast('=')!!
-            val albumItem = AlbumItem(
-                browseId = browseId,
-                playlistId = playlistId,
-                title = response.contents?.twoColumnBrowseResultsRenderer?.tabs?.firstOrNull()?.tabRenderer?.content?.sectionListRenderer
-                    ?.contents?.firstOrNull()?.musicResponsiveHeaderRenderer?.title?.runs?.firstOrNull()?.text ?: "",
-                artists =
-                response.contents?.twoColumnBrowseResultsRenderer?.tabs?.firstOrNull()?.tabRenderer?.content?.sectionListRenderer
-                    ?.contents?.firstOrNull()?.musicResponsiveHeaderRenderer?.straplineTextOne?.runs?.oddElements()?.map {
-                        Artist(
-                            name = it.text,
-                            id = it.navigationEndpoint?.browseEndpoint?.browseId,
-                        )
-                    }!!,
-                year = response.contents.twoColumnBrowseResultsRenderer.tabs.firstOrNull()?.tabRenderer?.content?.sectionListRenderer
-                    ?.contents?.firstOrNull()?.musicResponsiveHeaderRenderer?.subtitle?.runs?.lastOrNull()?.text?.toIntOrNull(),
-                thumbnail = response.contents.twoColumnBrowseResultsRenderer.tabs.firstOrNull()?.tabRenderer?.content?.sectionListRenderer
-                    ?.contents?.firstOrNull()?.musicResponsiveHeaderRenderer?.thumbnail?.musicThumbnailRenderer?.getThumbnailUrl()!!,
-            )
+            val playlistId =
+                response.microformat
+                    ?.microformatDataRenderer
+                    ?.urlCanonical
+                    ?.substringAfterLast('=')!!
+            val albumItem =
+                AlbumItem(
+                    browseId = browseId,
+                    playlistId = playlistId,
+                    title =
+                        response.contents
+                            ?.twoColumnBrowseResultsRenderer
+                            ?.tabs
+                            ?.firstOrNull()
+                            ?.tabRenderer
+                            ?.content
+                            ?.sectionListRenderer
+                            ?.contents
+                            ?.firstOrNull()
+                            ?.musicResponsiveHeaderRenderer
+                            ?.title
+                            ?.runs
+                            ?.firstOrNull()
+                            ?.text ?: "",
+                    artists =
+                        response.contents
+                            ?.twoColumnBrowseResultsRenderer
+                            ?.tabs
+                            ?.firstOrNull()
+                            ?.tabRenderer
+                            ?.content
+                            ?.sectionListRenderer
+                            ?.contents
+                            ?.firstOrNull()
+                            ?.musicResponsiveHeaderRenderer
+                            ?.straplineTextOne
+                            ?.runs
+                            ?.oddElements()
+                            ?.map {
+                                Artist(
+                                    name = it.text,
+                                    id = it.navigationEndpoint?.browseEndpoint?.browseId,
+                                )
+                            }!!,
+                    year =
+                        response.contents.twoColumnBrowseResultsRenderer.tabs
+                            .firstOrNull()
+                            ?.tabRenderer
+                            ?.content
+                            ?.sectionListRenderer
+                            ?.contents
+                            ?.firstOrNull()
+                            ?.musicResponsiveHeaderRenderer
+                            ?.subtitle
+                            ?.runs
+                            ?.lastOrNull()
+                            ?.text
+                            ?.toIntOrNull(),
+                    thumbnail =
+                        response.contents.twoColumnBrowseResultsRenderer.tabs
+                            .firstOrNull()
+                            ?.tabRenderer
+                            ?.content
+                            ?.sectionListRenderer
+                            ?.contents
+                            ?.firstOrNull()
+                            ?.musicResponsiveHeaderRenderer
+                            ?.thumbnail
+                            ?.musicThumbnailRenderer
+                            ?.getThumbnailUrl()!!,
+                )
             AlbumPage(
                 album = albumItem,
-                songs = if (withSongs) albumSongs(response.contents?.twoColumnBrowseResultsRenderer?.secondaryContents?.sectionListRenderer
-                    ?.contents?.firstOrNull()?.musicShelfRenderer?.contents, albumItem
-                ).getOrThrow() else emptyList(),
-                description = getDescriptionAlbum(response.contents.twoColumnBrowseResultsRenderer.tabs.firstOrNull()?.tabRenderer?.content?.sectionListRenderer
-                    ?.contents?.firstOrNull()?.musicResponsiveHeaderRenderer?.description?.musicDescriptionShelfRenderer?.description?.runs),
-                duration = response.contents.twoColumnBrowseResultsRenderer.tabs.firstOrNull()?.tabRenderer?.content?.sectionListRenderer
-                    ?.contents?.firstOrNull()?.musicResponsiveHeaderRenderer?.secondSubtitle?.runs?.get(2)?.text ?: "",
-                thumbnails = response.contents.twoColumnBrowseResultsRenderer.tabs.firstOrNull()?.tabRenderer?.content?.sectionListRenderer
-                    ?.contents?.firstOrNull()?.musicResponsiveHeaderRenderer?.thumbnail?.musicThumbnailRenderer?.thumbnail,
+                songs =
+                    if (withSongs) {
+                        albumSongs(
+                            response.contents
+                                ?.twoColumnBrowseResultsRenderer
+                                ?.secondaryContents
+                                ?.sectionListRenderer
+                                ?.contents
+                                ?.firstOrNull()
+                                ?.musicShelfRenderer
+                                ?.contents,
+                            albumItem,
+                        ).getOrThrow()
+                    } else {
+                        emptyList()
+                    },
+                description =
+                    getDescriptionAlbum(
+                        response.contents.twoColumnBrowseResultsRenderer.tabs
+                            .firstOrNull()
+                            ?.tabRenderer
+                            ?.content
+                            ?.sectionListRenderer
+                            ?.contents
+                            ?.firstOrNull()
+                            ?.musicResponsiveHeaderRenderer
+                            ?.description
+                            ?.musicDescriptionShelfRenderer
+                            ?.description
+                            ?.runs,
+                    ),
+                duration =
+                    response.contents.twoColumnBrowseResultsRenderer.tabs
+                        .firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.sectionListRenderer
+                        ?.contents
+                        ?.firstOrNull()
+                        ?.musicResponsiveHeaderRenderer
+                        ?.secondSubtitle
+                        ?.runs
+                        ?.get(2)
+                        ?.text ?: "",
+                thumbnails =
+                    response.contents.twoColumnBrowseResultsRenderer.tabs
+                        .firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.sectionListRenderer
+                        ?.contents
+                        ?.firstOrNull()
+                        ?.musicResponsiveHeaderRenderer
+                        ?.thumbnail
+                        ?.musicThumbnailRenderer
+                        ?.thumbnail,
             )
         }
 
@@ -303,10 +441,14 @@ object YouTube {
         return description
     }
 
-    suspend fun albumSongs(content: List<MusicShelfRenderer.Content>?, album: AlbumItem): Result<List<SongItem>> =
+    suspend fun albumSongs(
+        content: List<MusicShelfRenderer.Content>?,
+        album: AlbumItem,
+    ): Result<List<SongItem>> =
         runCatching {
-            if (content == null) return@runCatching emptyList()
-            else {
+            if (content == null) {
+                return@runCatching emptyList()
+            } else {
                 return@runCatching content.mapNotNull {
                     AlbumPage.fromMusicResponsiveListItemRenderer(it.musicResponsiveListItemRenderer, album)
                 }
@@ -318,11 +460,18 @@ object YouTube {
             val response = ytMusic.browse(WEB_REMIX, browseId).body<BrowseResponse>()
             val artistSections = arrayListOf<ArtistSection>()
             val content =
-                response.contents?.singleColumnBrowseResultsRenderer?.tabs?.firstOrNull()
-                    ?.tabRenderer?.content?.sectionListRenderer?.contents
+                response.contents
+                    ?.singleColumnBrowseResultsRenderer
+                    ?.tabs
+                    ?.firstOrNull()
+                    ?.tabRenderer
+                    ?.content
+                    ?.sectionListRenderer
+                    ?.contents
             if (content != null) {
                 for (i in 0 until content.size) {
-                    ArtistPage.fromSectionListRendererContent(content.get(i))
+                    ArtistPage
+                        .fromSectionListRendererContent(content.get(i))
                         ?.let { artistSections.add(it) }
                     println("Section $i checking \n artistSection ${artistSections.lastOrNull()}")
                 }
@@ -343,25 +492,155 @@ object YouTube {
                     ArtistItem(
                         id = browseId,
                         title =
-                            response.header?.musicImmersiveHeaderRenderer?.title?.runs?.firstOrNull()?.text
-                                ?: response.header?.musicVisualHeaderRenderer?.title?.runs?.firstOrNull()?.text!!,
+                            response.header
+                                ?.musicImmersiveHeaderRenderer
+                                ?.title
+                                ?.runs
+                                ?.firstOrNull()
+                                ?.text
+                                ?: response.header
+                                    ?.musicVisualHeaderRenderer
+                                    ?.title
+                                    ?.runs
+                                    ?.firstOrNull()
+                                    ?.text!!,
                         thumbnail =
-                            response.header?.musicImmersiveHeaderRenderer?.thumbnail?.musicThumbnailRenderer?.getThumbnailUrl()
-                                ?: response.header?.musicVisualHeaderRenderer?.foregroundThumbnail?.musicThumbnailRenderer?.getThumbnailUrl()!!,
-                        shuffleEndpoint = response.header?.musicImmersiveHeaderRenderer?.playButton?.buttonRenderer?.navigationEndpoint?.watchEndpoint,
-                        radioEndpoint = response.header?.musicImmersiveHeaderRenderer?.startRadioButton?.buttonRenderer?.navigationEndpoint?.watchEndpoint,
+                            response.header
+                                ?.musicImmersiveHeaderRenderer
+                                ?.thumbnail
+                                ?.musicThumbnailRenderer
+                                ?.getThumbnailUrl()
+                                ?: response.header
+                                    ?.musicVisualHeaderRenderer
+                                    ?.foregroundThumbnail
+                                    ?.musicThumbnailRenderer
+                                    ?.getThumbnailUrl()!!,
+                        shuffleEndpoint =
+                            response.header
+                                ?.musicImmersiveHeaderRenderer
+                                ?.playButton
+                                ?.buttonRenderer
+                                ?.navigationEndpoint
+                                ?.watchEndpoint,
+                        radioEndpoint =
+                            response.header
+                                ?.musicImmersiveHeaderRenderer
+                                ?.startRadioButton
+                                ?.buttonRenderer
+                                ?.navigationEndpoint
+                                ?.watchEndpoint,
                     ),
                 sections =
-                    response.contents?.singleColumnBrowseResultsRenderer?.tabs?.firstOrNull()
-                        ?.tabRenderer?.content?.sectionListRenderer?.contents
+                    response.contents
+                        ?.singleColumnBrowseResultsRenderer
+                        ?.tabs
+                        ?.firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.sectionListRenderer
+                        ?.contents
                         ?.mapNotNull(ArtistPage::fromSectionListRendererContent)!!,
-                description = response.header?.musicImmersiveHeaderRenderer?.description?.runs?.firstOrNull()?.text,
+                description =
+                    response.header
+                        ?.musicImmersiveHeaderRenderer
+                        ?.description
+                        ?.runs
+                        ?.firstOrNull()
+                        ?.text,
                 subscribers =
-                    response.header?.musicImmersiveHeaderRenderer?.subscriptionButton?.subscribeButtonRenderer?.longSubscriberCountText?.runs?.get(
-                        0,
-                    )?.text,
-                view = response.contents.singleColumnBrowseResultsRenderer.tabs[0].tabRenderer.content?.sectionListRenderer?.contents?.lastOrNull()?.musicDescriptionShelfRenderer?.subheader?.runs?.firstOrNull()?.text,
+                    response.header
+                        ?.musicImmersiveHeaderRenderer
+                        ?.subscriptionButton
+                        ?.subscribeButtonRenderer
+                        ?.longSubscriberCountText
+                        ?.runs
+                        ?.get(
+                            0,
+                        )?.text,
+                view =
+                    response.contents.singleColumnBrowseResultsRenderer.tabs[0]
+                        .tabRenderer.content
+                        ?.sectionListRenderer
+                        ?.contents
+                        ?.lastOrNull()
+                        ?.musicDescriptionShelfRenderer
+                        ?.subheader
+                        ?.runs
+                        ?.firstOrNull()
+                        ?.text,
+            )
+        }
+
+    suspend fun getYouTubePlaylistFullTracksWithSetVideoId(playlistId: String): Result<List<Pair<SongItem, String>>> =
+        runCatching {
+            // SongItem / SetVideoId
+            val listPair = mutableListOf<Pair<SongItem, String>>()
+            val response = ytMusic.playlist(playlistId).body<BrowseResponse>()
+            listPair.addAll(
+                response.fromPlaylistToTrackWithSetVideoId()
+            )
+            var continuation = response.getPlaylistContinuation()
+            while (continuation != null) {
+                val continuationResponse = ytMusic.browse(
+                    client = WEB_REMIX,
+                    setLogin = true,
+                    params = null,
+                    continuation = continuation
+                ).body<BrowseResponse>()
+                listPair.addAll(
+                    continuationResponse.fromPlaylistToTrackWithSetVideoId()
+                )
+                continuation = continuationResponse.getContinuePlaylistContinuation()
+            }
+
+            return@runCatching listPair
+        }
+
+    suspend fun getSuggestionsTrackForPlaylist(playlistId: String): Result<Pair<String?, List<SongItem>?>?> =
+        runCatching {
+            val initialResponse = ytMusic.playlist(
+                if (playlistId.startsWith("VL")) playlistId else "VL$playlistId"
+            ).body<BrowseResponse>()
+            var continuation = initialResponse.getPlaylistContinuation()
+            println("YouTube: getSuggestionsTrackForPlaylist: $continuation")
+            while (continuation != null) {
+                val continuationResponse = ytMusic.browse(
+                    client = WEB_REMIX,
+                    setLogin = true,
+                    params = "wAEB",
+                    continuation = continuation
+                ).body<BrowseResponse>()
+                println("YouTube: getSuggestionsTrackForPlaylist: ${continuationResponse.getReloadParams()}")
+                if (continuationResponse.hasReloadParams()) {
+                    return@runCatching Pair(continuationResponse.getReloadParams(), continuationResponse.getSuggestionSongItems())
+                } else {
+                    continuation = continuationResponse.getContinuePlaylistContinuation()
+                }
+            }
+            return@runCatching null
+        }
+
+    suspend fun getPlaylistFullTracks(playlistId: String): Result<List<SongItem>> =
+        runCatching {
+            val songs = mutableListOf<SongItem>()
+            val response = ytMusic.playlist(playlistId).body<BrowseResponse>()
+            songs.addAll(
+                response.fromPlaylistToTrack()
             )
+            var continuation = response.getPlaylistContinuation()
+            while (continuation != null) {
+                val continuationResponse = ytMusic.browse(
+                    client = WEB_REMIX,
+                    setLogin = true,
+                    params = null,
+                    continuation = continuation
+                ).body<BrowseResponse>()
+                songs.addAll(
+                    continuationResponse.fromPlaylistContinuationToTracks()
+                )
+                continuation = continuationResponse.getContinuePlaylistContinuation()
+            }
+            return@runCatching songs
         }
 
     /**
@@ -372,19 +651,26 @@ object YouTube {
     suspend fun playlist(playlistId: String): Result<PlaylistPage> =
         runCatching {
             val response =
-                ytMusic.browse(
-                    client = WEB_REMIX,
-                    browseId = "VL$playlistId",
-                    setLogin = true,
-                ).body<BrowseResponse>()
+                ytMusic
+                    .browse(
+                        client = WEB_REMIX,
+                        browseId = "VL$playlistId",
+                        setLogin = true,
+                    ).body<BrowseResponse>()
             val header =
                 response.header?.musicDetailHeaderRenderer
-                    ?: response.header?.musicEditablePlaylistDetailHeaderRenderer?.header?.musicDetailHeaderRenderer!!
+                    ?: response.header
+                        ?.musicEditablePlaylistDetailHeaderRenderer
+                        ?.header
+                        ?.musicDetailHeaderRenderer!!
             PlaylistPage(
                 playlist =
                     PlaylistItem(
                         id = playlistId,
-                        title = header.title.runs?.firstOrNull()?.text!!,
+                        title =
+                            header.title.runs
+                                ?.firstOrNull()
+                                ?.text!!,
                         author =
                             header.subtitle.runs?.getOrNull(2)?.let {
                                 Artist(
@@ -392,45 +678,80 @@ object YouTube {
                                     id = it.navigationEndpoint?.browseEndpoint?.browseId,
                                 )
                             },
-                        songCountText = header.secondSubtitle.runs?.firstOrNull()?.text,
+                        songCountText =
+                            header.secondSubtitle.runs
+                                ?.firstOrNull()
+                                ?.text,
                         thumbnail = header.thumbnail.croppedSquareThumbnailRenderer?.getThumbnailUrl()!!,
                         playEndpoint = null,
-                        shuffleEndpoint = header.menu.menuRenderer.topLevelButtons?.firstOrNull()?.buttonRenderer?.navigationEndpoint?.watchPlaylistEndpoint!!,
+                        shuffleEndpoint =
+                            header.menu.menuRenderer.topLevelButtons
+                                ?.firstOrNull()
+                                ?.buttonRenderer
+                                ?.navigationEndpoint
+                                ?.watchPlaylistEndpoint!!,
                         radioEndpoint =
-                            header.menu.menuRenderer.items.find {
-                                it.menuNavigationItemRenderer?.icon?.iconType == "MIX"
-                            }?.menuNavigationItemRenderer?.navigationEndpoint?.watchPlaylistEndpoint!!,
+                            header.menu.menuRenderer.items
+                                .find {
+                                    it.menuNavigationItemRenderer?.icon?.iconType == "MIX"
+                                }?.menuNavigationItemRenderer
+                                ?.navigationEndpoint
+                                ?.watchPlaylistEndpoint!!,
                     ),
                 songs =
-                    response.contents?.singleColumnBrowseResultsRenderer?.tabs?.firstOrNull()
-                        ?.tabRenderer?.content?.sectionListRenderer?.contents?.firstOrNull()
-                        ?.musicPlaylistShelfRenderer?.contents?.mapNotNull {
+                    response.contents
+                        ?.singleColumnBrowseResultsRenderer
+                        ?.tabs
+                        ?.firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.sectionListRenderer
+                        ?.contents
+                        ?.firstOrNull()
+                        ?.musicPlaylistShelfRenderer
+                        ?.contents
+                        ?.mapNotNull {
                             PlaylistPage.fromMusicResponsiveListItemRenderer(it.musicResponsiveListItemRenderer)
                         }!!,
                 songsContinuation =
-                    response.contents.singleColumnBrowseResultsRenderer.tabs.firstOrNull()
-                        ?.tabRenderer?.content?.sectionListRenderer?.contents?.firstOrNull()
-                        ?.musicPlaylistShelfRenderer?.continuations?.getContinuation(),
+                    response.contents.singleColumnBrowseResultsRenderer.tabs
+                        .firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.sectionListRenderer
+                        ?.contents
+                        ?.firstOrNull()
+                        ?.musicPlaylistShelfRenderer
+                        ?.continuations
+                        ?.getContinuation(),
                 continuation =
-                    response.contents.singleColumnBrowseResultsRenderer.tabs.firstOrNull()
-                        ?.tabRenderer?.content?.sectionListRenderer?.continuations?.getContinuation(),
+                    response.contents.singleColumnBrowseResultsRenderer.tabs
+                        .firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.sectionListRenderer
+                        ?.continuations
+                        ?.getContinuation(),
             )
         }
 
     suspend fun playlistContinuation(continuation: String) =
         runCatching {
             val response =
-                ytMusic.browse(
-                    client = WEB_REMIX,
-                    continuation = continuation,
-                    setLogin = true,
-                ).body<BrowseResponse>()
+                ytMusic
+                    .browse(
+                        client = WEB_REMIX,
+                        continuation = continuation,
+                        setLogin = true,
+                    ).body<BrowseResponse>()
             PlaylistContinuationPage(
                 songs =
                     response.continuationContents?.musicPlaylistShelfContinuation?.contents?.mapNotNull {
                         PlaylistPage.fromMusicResponsiveListItemRenderer(it.musicResponsiveListItemRenderer)
                     }!!,
-                continuation = response.continuationContents.musicPlaylistShelfContinuation.continuations?.getContinuation(),
+                continuation =
+                    response.continuationContents.musicPlaylistShelfContinuation.continuations
+                        ?.getContinuation(),
             )
         }
 
@@ -481,7 +802,13 @@ object YouTube {
     ) = runCatching {
         val request = ytMusic.postMusixmatchPostCredentials(email, password, userToken)
         val response = request.body<MusixmatchCredential>()
-        if (response.message.body.get(0).credential.error == null && response.message.body.get(0).credential.account != null) {
+        if (response.message.body
+                .get(0)
+                .credential.error == null &&
+            response.message.body
+                .get(0)
+                .credential.account != null
+        ) {
             val setCookies = request.headers.getAll("Set-Cookie")
 //            Log.w("postMusixmatchCredentials", setCookies.toString())
             if (!setCookies.isNullOrEmpty()) {
@@ -542,8 +869,19 @@ object YouTube {
     ) = runCatching {
         val response = ytMusic.getMusixmatchLyricsByQ(track, userToken).body<MusixmatchLyricsResponseByQ>()
 
-        if (!response.message.body.subtitle_list.isNullOrEmpty() && response.message.body.subtitle_list.firstOrNull()?.subtitle?.subtitle_body != null) {
-            return@runCatching parseMusixmatchLyrics(response.message.body.subtitle_list.firstOrNull()?.subtitle?.subtitle_body!!)
+        if (!response.message.body.subtitle_list
+                .isNullOrEmpty() &&
+            response.message.body.subtitle_list
+                .firstOrNull()
+                ?.subtitle
+                ?.subtitle_body != null
+        ) {
+            return@runCatching parseMusixmatchLyrics(
+                response.message.body.subtitle_list
+                    .firstOrNull()
+                    ?.subtitle
+                    ?.subtitle_body!!,
+            )
         } else {
             val unsyncedResponse = ytMusic.getMusixmatchUnsyncedLyrics(track.track_id.toString(), userToken).body<MusixmatchLyricsReponse>()
             if (unsyncedResponse.message.body.lyrics != null && unsyncedResponse.message.body.lyrics.lyrics_body != "") {
@@ -559,19 +897,21 @@ object YouTube {
         userToken: String,
         language: String,
     ) = runCatching {
-        ytMusic.getMusixmatchTranslateLyrics(trackId, userToken, language)
+        ytMusic
+            .getMusixmatchTranslateLyrics(trackId, userToken, language)
             .body<MusixmatchTranslationLyricsResponse>()
     }
 
     suspend fun getYouTubeCaption(videoId: String) =
         runCatching {
             val ytWeb = ytMusic.player(WEB, videoId, null, null).body<YouTubeInitialPage>()
-            ytMusic.getYouTubeCaption(
-                ytWeb.captions?.playerCaptionsTracklistRenderer?.captionTracks?.firstOrNull()?.baseUrl?.replace(
-                    "&fmt=srv3",
-                    "",
-                ) ?: "",
-            ).body<Transcript>()
+            ytMusic
+                .getYouTubeCaption(
+                    ytWeb.captions?.playerCaptionsTracklistRenderer?.captionTracks?.firstOrNull()?.baseUrl?.replace(
+                        "&fmt=srv3",
+                        "",
+                    ) ?: "",
+                ).body<Transcript>()
         }
 
     suspend fun getLrclibLyrics(
@@ -580,10 +920,11 @@ object YouTube {
         duration: Int?,
     ) = runCatching {
         val rs =
-            ytMusic.searchLrclibLyrics(
-                q_track = q_track,
-                q_artist = q_artist,
-            ).body<List<LrclibObject>>()
+            ytMusic
+                .searchLrclibLyrics(
+                    q_track = q_track,
+                    q_artist = q_artist,
+                ).body<List<LrclibObject>>()
         val lrclibObject: LrclibObject? =
             if (duration != null) {
                 rs.find { abs(it.duration.toInt() - duration) <= 10 }
@@ -652,19 +993,41 @@ object YouTube {
 //            .orEmpty()
             ExplorePage(
                 released =
-                response.contents?.singleColumnBrowseResultsRenderer?.tabs?.firstOrNull()?.tabRenderer?.content?.sectionListRenderer?.contents?.firstOrNull()?.gridRenderer?.items
-                    ?.mapNotNull { it.musicTwoRowItemRenderer }
-                    ?.mapNotNull(RelatedPage::fromMusicTwoRowItemRenderer)
-                    .orEmpty().mapNotNull {
-                        if (it.type == YTItemType.PLAYLIST) it as? PlaylistItem else null
-                    },
+                    response.contents
+                        ?.singleColumnBrowseResultsRenderer
+                        ?.tabs
+                        ?.firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.sectionListRenderer
+                        ?.contents
+                        ?.firstOrNull()
+                        ?.gridRenderer
+                        ?.items
+                        ?.mapNotNull { it.musicTwoRowItemRenderer }
+                        ?.mapNotNull(RelatedPage::fromMusicTwoRowItemRenderer)
+                        .orEmpty()
+                        .mapNotNull {
+                            if (it.type == YTItemType.PLAYLIST) it as? PlaylistItem else null
+                        },
                 musicVideo =
-                    response.contents?.singleColumnBrowseResultsRenderer?.tabs?.firstOrNull()?.tabRenderer?.content?.sectionListRenderer?.contents?.lastOrNull()?.musicCarouselShelfRenderer?.contents?.mapNotNull {
-                        it.musicTwoRowItemRenderer
-                    }
-                        ?.mapNotNull(
+                    response.contents
+                        ?.singleColumnBrowseResultsRenderer
+                        ?.tabs
+                        ?.firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.sectionListRenderer
+                        ?.contents
+                        ?.lastOrNull()
+                        ?.musicCarouselShelfRenderer
+                        ?.contents
+                        ?.mapNotNull {
+                            it.musicTwoRowItemRenderer
+                        }?.mapNotNull(
                             ArtistPage::fromMusicTwoRowItemRenderer,
-                        ).orEmpty().mapNotNull {
+                        ).orEmpty()
+                        .mapNotNull {
                             if (it.type == YTItemType.VIDEO) it as? VideoItem else null
                         },
             )
@@ -673,7 +1036,14 @@ object YouTube {
     suspend fun moodAndGenres(): Result<List<MoodAndGenres>> =
         runCatching {
             val response = ytMusic.browse(WEB_REMIX, browseId = "FEmusic_moods_and_genres").body<BrowseResponse>()
-            response.contents?.singleColumnBrowseResultsRenderer?.tabs?.firstOrNull()?.tabRenderer?.content?.sectionListRenderer?.contents!!
+            response.contents
+                ?.singleColumnBrowseResultsRenderer
+                ?.tabs
+                ?.firstOrNull()
+                ?.tabRenderer
+                ?.content
+                ?.sectionListRenderer
+                ?.contents!!
                 .mapNotNull(MoodAndGenres.Companion::fromSectionListRendererContent)
         }
 
@@ -684,34 +1054,59 @@ object YouTube {
         runCatching {
             val response = ytMusic.browse(WEB_REMIX, browseId = browseId, params = params).body<BrowseResponse>()
             BrowseResult(
-                title = response.header?.musicHeaderRenderer?.title?.runs?.firstOrNull()?.text,
+                title =
+                    response.header
+                        ?.musicHeaderRenderer
+                        ?.title
+                        ?.runs
+                        ?.firstOrNull()
+                        ?.text,
                 items =
-                    response.contents?.singleColumnBrowseResultsRenderer?.tabs?.firstOrNull()?.tabRenderer?.content?.sectionListRenderer?.contents?.mapNotNull {
-                            content ->
-                        when {
-                            content.gridRenderer != null -> {
-                                BrowseResult.Item(
-                                    title = content.gridRenderer.header?.gridHeaderRenderer?.title?.runs?.firstOrNull()?.text,
-                                    items =
-                                        content.gridRenderer.items
-                                            .mapNotNull(GridRenderer.Item::musicTwoRowItemRenderer)
-                                            .mapNotNull(RelatedPage.Companion::fromMusicTwoRowItemRenderer),
-                                )
-                            }
+                    response.contents
+                        ?.singleColumnBrowseResultsRenderer
+                        ?.tabs
+                        ?.firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.sectionListRenderer
+                        ?.contents
+                        ?.mapNotNull { content ->
+                            when {
+                                content.gridRenderer != null -> {
+                                    BrowseResult.Item(
+                                        title =
+                                            content.gridRenderer.header
+                                                ?.gridHeaderRenderer
+                                                ?.title
+                                                ?.runs
+                                                ?.firstOrNull()
+                                                ?.text,
+                                        items =
+                                            content.gridRenderer.items
+                                                .mapNotNull(GridRenderer.Item::musicTwoRowItemRenderer)
+                                                .mapNotNull(RelatedPage.Companion::fromMusicTwoRowItemRenderer),
+                                    )
+                                }
 
-                            content.musicCarouselShelfRenderer != null -> {
-                                BrowseResult.Item(
-                                    title = content.musicCarouselShelfRenderer.header?.musicCarouselShelfBasicHeaderRenderer?.title?.runs?.firstOrNull()?.text,
-                                    items =
-                                        content.musicCarouselShelfRenderer.contents
-                                            .mapNotNull(MusicCarouselShelfRenderer.Content::musicTwoRowItemRenderer)
-                                            .mapNotNull(RelatedPage.Companion::fromMusicTwoRowItemRenderer),
-                                )
-                            }
+                                content.musicCarouselShelfRenderer != null -> {
+                                    BrowseResult.Item(
+                                        title =
+                                            content.musicCarouselShelfRenderer.header
+                                                ?.musicCarouselShelfBasicHeaderRenderer
+                                                ?.title
+                                                ?.runs
+                                                ?.firstOrNull()
+                                                ?.text,
+                                        items =
+                                            content.musicCarouselShelfRenderer.contents
+                                                .mapNotNull(MusicCarouselShelfRenderer.Content::musicTwoRowItemRenderer)
+                                                .mapNotNull(RelatedPage.Companion::fromMusicTwoRowItemRenderer),
+                                    )
+                                }
 
-                            else -> null
-                        }
-                    }.orEmpty(),
+                                else -> null
+                            }
+                        }.orEmpty(),
             )
         }
 
@@ -738,27 +1133,50 @@ object YouTube {
             return@runCatching json.decodeFromString<YouTubeInitialPage>(response)
         }
 
-    suspend fun getLikedInfo(videoId: String): Result<LikeStatus> = runCatching {
-        val response = ytMusic.next(
-            ANDROID_MUSIC, videoId, null, null, null, null, null
-        ).body<NextAndroidMusicResponse>()
-        val likeStatus = response.playerOverlays?.playerOverlayRenderer?.actions?.find {it.likeButtonRenderer != null}
-            ?.likeButtonRenderer?.likeStatus?.toLikeStatus()
-        Log.w("YouTube", "Like Status ${response.playerOverlays}")
-        return@runCatching likeStatus ?: LikeStatus.INDIFFERENT
-    }
+    suspend fun getLikedInfo(videoId: String): Result<LikeStatus> =
+        runCatching {
+            val response =
+                ytMusic
+                    .next(
+                        ANDROID_MUSIC,
+                        videoId,
+                        null,
+                        null,
+                        null,
+                        null,
+                        null,
+                    ).body<NextAndroidMusicResponse>()
+            val likeStatus =
+                response.playerOverlays
+                    ?.playerOverlayRenderer
+                    ?.actions
+                    ?.find { it.likeButtonRenderer != null }
+                    ?.likeButtonRenderer
+                    ?.likeStatus
+                    ?.toLikeStatus()
+            Log.w("YouTube", "Like Status ${response.playerOverlays}")
+            return@runCatching likeStatus ?: LikeStatus.INDIFFERENT
+        }
 
     suspend fun getSongInfo(videoId: String): Result<SongInfo> =
         runCatching {
             val ytNext = ytMusic.next(WEB, videoId, null, null, null, null, null).body<NextResponse>()
             val videoSecondary =
-                ytNext.contents.twoColumnWatchNextResults?.results?.results?.content?.find {
-                    it?.videoSecondaryInfoRenderer != null
-                }?.videoSecondaryInfoRenderer
+                ytNext.contents.twoColumnWatchNextResults
+                    ?.results
+                    ?.results
+                    ?.content
+                    ?.find {
+                        it?.videoSecondaryInfoRenderer != null
+                    }?.videoSecondaryInfoRenderer
             val videoPrimary =
-                ytNext.contents.twoColumnWatchNextResults?.results?.results?.content?.find {
-                    it?.videoPrimaryInfoRenderer != null
-                }?.videoPrimaryInfoRenderer
+                ytNext.contents.twoColumnWatchNextResults
+                    ?.results
+                    ?.results
+                    ?.content
+                    ?.find {
+                        it?.videoPrimaryInfoRenderer != null
+                    }?.videoPrimaryInfoRenderer
             val returnYouTubeDislikeResponse =
                 ytMusic.returnYouTubeDislike(videoId).body<ReturnYouTubeDislikeResponse>()
             return@runCatching SongInfo(
@@ -768,13 +1186,30 @@ object YouTube {
                         Regex(" - Topic| - Chủ đề|"),
                         "",
                     ),
-                authorId = videoSecondary?.owner?.videoOwnerRenderer?.navigationEndpoint?.browseEndpoint?.browseId,
+                authorId =
+                    videoSecondary
+                        ?.owner
+                        ?.videoOwnerRenderer
+                        ?.navigationEndpoint
+                        ?.browseEndpoint
+                        ?.browseId,
                 authorThumbnail =
-                    videoSecondary?.owner?.videoOwnerRenderer?.thumbnail?.thumbnails?.find {
-                        it.height == 48
-                    }?.url?.replace("s48", "s960"),
+                    videoSecondary
+                        ?.owner
+                        ?.videoOwnerRenderer
+                        ?.thumbnail
+                        ?.thumbnails
+                        ?.find {
+                            it.height == 48
+                        }?.url
+                        ?.replace("s48", "s960"),
                 description = videoSecondary?.attributedDescription?.content,
-                subscribers = videoSecondary?.owner?.videoOwnerRenderer?.subscriberCountText?.simpleText,
+                subscribers =
+                    videoSecondary
+                        ?.owner
+                        ?.videoOwnerRenderer
+                        ?.subscriberCountText
+                        ?.simpleText,
                 uploadDate = videoPrimary?.dateText?.simpleText,
                 viewCount = returnYouTubeDislikeResponse.viewCount,
                 like = returnYouTubeDislikeResponse.likes,
@@ -789,19 +1224,24 @@ object YouTube {
     ): Result<Triple<String?, PlayerResponse, MediaType>> =
         runCatching {
             val cpn =
-                (1..16).map {
-                    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_"[
-                        Random.Default.nextInt(
-                            0,
-                            64,
-                        ),
-                    ]
-                }.joinToString("")
+                (1..16)
+                    .map {
+                        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_"[
+                            Random.Default.nextInt(
+                                0,
+                                64,
+                            ),
+                        ]
+                    }.joinToString("")
             val playerResponse =
                 ytMusic.player(ANDROID_MUSIC, videoId, playlistId, cpn).body<PlayerResponse>()
 //        val ytScrapeInitial: YouTubeInitialPage = ytMusic.player(WEB, videoId, playlistId, cpn).body<YouTubeInitialPage>()
             println("Thumbnails " + playerResponse.videoDetails?.thumbnail)
-            val firstThumb = playerResponse.videoDetails?.thumbnail?.thumbnails?.firstOrNull()
+            val firstThumb =
+                playerResponse.videoDetails
+                    ?.thumbnail
+                    ?.thumbnails
+                    ?.firstOrNull()
             val thumbnails =
                 if (firstThumb?.height == firstThumb?.width && firstThumb != null) MediaType.Song else MediaType.Video
             println("Player Response " + playerResponse.streamingData?.formats?.map { Pair(it.itag, it.isAudio) })
@@ -861,7 +1301,12 @@ object YouTube {
     ): Result<Int> =
         runCatching {
             val regex = Regex("len=([^&]+)")
-            val length = regex.find(watchtimeUrl)?.groupValues?.firstOrNull()?.drop(4) ?: "0"
+            val length =
+                regex
+                    .find(watchtimeUrl)
+                    ?.groupValues
+                    ?.firstOrNull()
+                    ?.drop(4) ?: "0"
             println(length)
             ytMusic.initPlayback(watchtimeUrl, cpn, mapOf("st" to length, "et" to length), playlistId).status.value.let { status ->
                 if (status == 204) {
@@ -900,19 +1345,21 @@ object YouTube {
                                     println("atr done")
                                     delay(500)
                                     val secondWatchTime = (Math.round(Random.nextFloat() * 100.0) / 100.0).toFloat() + 12f
-                                    ytMusic.initPlayback(
-                                        watchtimeUrl,
-                                        cpn,
-                                        mapOf<String, String>("st" to "0,5.54", "et" to "5.54,$secondWatchTime"),
-                                        playlistId,
-                                    ).status.value.let { watchtime ->
-                                        if (watchtime == 204) {
-                                            println("watchtime done")
-                                            return@runCatching Pair(watchtime, secondWatchTime)
-                                        } else {
-                                            return@runCatching Pair(watchtime, secondWatchTime)
+                                    ytMusic
+                                        .initPlayback(
+                                            watchtimeUrl,
+                                            cpn,
+                                            mapOf<String, String>("st" to "0,5.54", "et" to "5.54,$secondWatchTime"),
+                                            playlistId,
+                                        ).status.value
+                                        .let { watchtime ->
+                                            if (watchtime == 204) {
+                                                println("watchtime done")
+                                                return@runCatching Pair(watchtime, secondWatchTime)
+                                            } else {
+                                                return@runCatching Pair(watchtime, secondWatchTime)
+                                            }
                                         }
-                                    }
                                 } else {
                                     return@runCatching Pair(atr, 0f)
                                 }
@@ -934,44 +1381,87 @@ object YouTube {
     ): Result<NextResult> =
         runCatching {
             val response =
-                ytMusic.next(
-                    WEB_REMIX,
-                    endpoint.videoId,
-                    endpoint.playlistId,
-                    endpoint.playlistSetVideoId,
-                    endpoint.index,
-                    endpoint.params,
-                    continuation,
-                ).body<NextResponse>()
+                ytMusic
+                    .next(
+                        WEB_REMIX,
+                        endpoint.videoId,
+                        endpoint.playlistId,
+                        endpoint.playlistSetVideoId,
+                        endpoint.index,
+                        endpoint.params,
+                        continuation,
+                    ).body<NextResponse>()
             Log.w("YouTube", response.toString())
             val playlistPanelRenderer =
                 response.continuationContents?.playlistPanelContinuation
-                    ?: response.contents.singleColumnMusicWatchNextResultsRenderer?.tabbedRenderer?.watchNextTabbedResultsRenderer?.tabs?.firstOrNull()?.tabRenderer?.content?.musicQueueRenderer?.content?.playlistPanelRenderer
+                    ?: response.contents.singleColumnMusicWatchNextResultsRenderer
+                        ?.tabbedRenderer
+                        ?.watchNextTabbedResultsRenderer
+                        ?.tabs
+                        ?.firstOrNull()
+                        ?.tabRenderer
+                        ?.content
+                        ?.musicQueueRenderer
+                        ?.content
+                        ?.playlistPanelRenderer
             if (playlistPanelRenderer != null) {
                 // load automix items
-                if (playlistPanelRenderer.contents.lastOrNull()?.automixPreviewVideoRenderer?.content?.automixPlaylistVideoRenderer?.navigationEndpoint?.watchPlaylistEndpoint != null) {
+                if (playlistPanelRenderer.contents
+                        .lastOrNull()
+                        ?.automixPreviewVideoRenderer
+                        ?.content
+                        ?.automixPlaylistVideoRenderer
+                        ?.navigationEndpoint
+                        ?.watchPlaylistEndpoint !=
+                    null
+                ) {
                     return@runCatching next(
-                        playlistPanelRenderer.contents.lastOrNull()?.automixPreviewVideoRenderer?.content?.automixPlaylistVideoRenderer?.navigationEndpoint?.watchPlaylistEndpoint!!,
+                        playlistPanelRenderer.contents
+                            .lastOrNull()
+                            ?.automixPreviewVideoRenderer
+                            ?.content
+                            ?.automixPlaylistVideoRenderer
+                            ?.navigationEndpoint
+                            ?.watchPlaylistEndpoint!!,
                     ).getOrThrow()
                         .let { result ->
                             result.copy(
                                 title = playlistPanelRenderer.title,
                                 items =
-                                playlistPanelRenderer.contents.mapNotNull {
-                                    it.playlistPanelVideoRenderer?.let { renderer ->
-                                        NextPage.fromPlaylistPanelVideoRenderer(renderer)
-                                    }
-                                } + result.items,
+                                    playlistPanelRenderer.contents.mapNotNull {
+                                        it.playlistPanelVideoRenderer?.let { renderer ->
+                                            NextPage.fromPlaylistPanelVideoRenderer(renderer)
+                                        }
+                                    } + result.items,
                                 lyricsEndpoint =
-                                response.contents.singleColumnMusicWatchNextResultsRenderer?.tabbedRenderer?.watchNextTabbedResultsRenderer?.tabs?.getOrNull(
-                                    1,
-                                )?.tabRenderer?.endpoint?.browseEndpoint,
+                                    response.contents.singleColumnMusicWatchNextResultsRenderer
+                                        ?.tabbedRenderer
+                                        ?.watchNextTabbedResultsRenderer
+                                        ?.tabs
+                                        ?.getOrNull(
+                                            1,
+                                        )?.tabRenderer
+                                        ?.endpoint
+                                        ?.browseEndpoint,
                                 relatedEndpoint =
-                                response.contents.singleColumnMusicWatchNextResultsRenderer?.tabbedRenderer?.watchNextTabbedResultsRenderer?.tabs?.getOrNull(
-                                    2,
-                                )?.tabRenderer?.endpoint?.browseEndpoint,
+                                    response.contents.singleColumnMusicWatchNextResultsRenderer
+                                        ?.tabbedRenderer
+                                        ?.watchNextTabbedResultsRenderer
+                                        ?.tabs
+                                        ?.getOrNull(
+                                            2,
+                                        )?.tabRenderer
+                                        ?.endpoint
+                                        ?.browseEndpoint,
                                 currentIndex = playlistPanelRenderer.currentIndex,
-                                endpoint = playlistPanelRenderer.contents.lastOrNull()?.automixPreviewVideoRenderer?.content?.automixPlaylistVideoRenderer?.navigationEndpoint?.watchPlaylistEndpoint!!,
+                                endpoint =
+                                    playlistPanelRenderer.contents
+                                        .lastOrNull()
+                                        ?.automixPreviewVideoRenderer
+                                        ?.content
+                                        ?.automixPlaylistVideoRenderer
+                                        ?.navigationEndpoint
+                                        ?.watchPlaylistEndpoint!!,
                             )
                         }
                 }
@@ -981,50 +1471,73 @@ object YouTube {
                 return@runCatching NextResult(
                     title = playlistPanelRenderer.title,
                     items =
-                    playlistPanelRenderer.contents.mapNotNull {
-                        it.playlistPanelVideoRenderer?.let(NextPage::fromPlaylistPanelVideoRenderer)
-                    },
+                        playlistPanelRenderer.contents.mapNotNull {
+                            it.playlistPanelVideoRenderer?.let(NextPage::fromPlaylistPanelVideoRenderer)
+                        },
                     currentIndex = playlistPanelRenderer.currentIndex,
                     lyricsEndpoint =
-                    response.contents.singleColumnMusicWatchNextResultsRenderer?.tabbedRenderer?.watchNextTabbedResultsRenderer?.tabs?.getOrNull(
-                        1,
-                    )?.tabRenderer?.endpoint?.browseEndpoint,
+                        response.contents.singleColumnMusicWatchNextResultsRenderer
+                            ?.tabbedRenderer
+                            ?.watchNextTabbedResultsRenderer
+                            ?.tabs
+                            ?.getOrNull(
+                                1,
+                            )?.tabRenderer
+                            ?.endpoint
+                            ?.browseEndpoint,
                     relatedEndpoint =
-                    response.contents.singleColumnMusicWatchNextResultsRenderer?.tabbedRenderer?.watchNextTabbedResultsRenderer?.tabs?.getOrNull(
-                        2,
-                    )?.tabRenderer?.endpoint?.browseEndpoint,
+                        response.contents.singleColumnMusicWatchNextResultsRenderer
+                            ?.tabbedRenderer
+                            ?.watchNextTabbedResultsRenderer
+                            ?.tabs
+                            ?.getOrNull(
+                                2,
+                            )?.tabRenderer
+                            ?.endpoint
+                            ?.browseEndpoint,
                     continuation = playlistPanelRenderer.continuations?.getContinuation(),
                     endpoint = endpoint,
                 )
-            }
-            else {
+            } else {
                 Log.e("YouTube", response.toString())
                 val musicPlaylistShelfContinuation = response.continuationContents?.musicPlaylistShelfContinuation!!
                 return@runCatching NextResult(
-                    items = musicPlaylistShelfContinuation.contents.mapNotNull {
-                        it.musicResponsiveListItemRenderer?.let { renderer ->
-                            NextPage.fromMusicResponsiveListItemRenderer(renderer)
-                        }
-                    },
-                    continuation = musicPlaylistShelfContinuation.continuations?.firstOrNull()?.nextContinuationData?.continuation,
-                    endpoint = WatchEndpoint(
-                        videoId = null,
-                        playlistId = null,
-                        playlistSetVideoId = null,
-                        params = null,
-                        index = null,
-                        watchEndpointMusicSupportedConfigs = null
-                    )
-
+                    items =
+                        musicPlaylistShelfContinuation.contents.mapNotNull {
+                            it.musicResponsiveListItemRenderer?.let { renderer ->
+                                NextPage.fromMusicResponsiveListItemRenderer(renderer)
+                            }
+                        },
+                    continuation =
+                        musicPlaylistShelfContinuation.continuations
+                            ?.firstOrNull()
+                            ?.nextContinuationData
+                            ?.continuation,
+                    endpoint =
+                        WatchEndpoint(
+                            videoId = null,
+                            playlistId = null,
+                            playlistSetVideoId = null,
+                            params = null,
+                            index = null,
+                            watchEndpointMusicSupportedConfigs = null,
+                        ),
                 )
             }
-
         }
 
     suspend fun lyrics(endpoint: BrowseEndpoint): Result<String?> =
         runCatching {
             val response = ytMusic.browse(WEB_REMIX, endpoint.browseId, endpoint.params).body<BrowseResponse>()
-            response.contents?.sectionListRenderer?.contents?.firstOrNull()?.musicDescriptionShelfRenderer?.description?.runs?.firstOrNull()?.text
+            response.contents
+                ?.sectionListRenderer
+                ?.contents
+                ?.firstOrNull()
+                ?.musicDescriptionShelfRenderer
+                ?.description
+                ?.runs
+                ?.firstOrNull()
+                ?.text
         }
 
     suspend fun queue(
@@ -1035,7 +1548,10 @@ object YouTube {
             if (videoIds != null) {
                 assert(videoIds.size <= MAX_GET_QUEUE_SIZE) // Max video limit
             }
-            ytMusic.getQueue(WEB_REMIX, videoIds, playlistId).body<GetQueueResponse>().queueDatas
+            ytMusic
+                .getQueue(WEB_REMIX, videoIds, playlistId)
+                .body<GetQueueResponse>()
+                .queueDatas
                 .mapNotNull {
                     it.content.playlistPanelVideoRenderer?.let { renderer ->
                         NextPage.fromPlaylistPanelVideoRenderer(renderer)
@@ -1045,21 +1561,28 @@ object YouTube {
 
     suspend fun visitorData(): Result<String> =
         runCatching {
-            Json.parseToJsonElement(ytMusic.getSwJsData().bodyAsText().substring(5))
+            Json
+                .parseToJsonElement(ytMusic.getSwJsData().bodyAsText().substring(5))
                 .jsonArray[0]
                 .jsonArray[2]
-                .jsonArray.first { (it as? JsonPrimitive)?.content?.startsWith(VISITOR_DATA_PREFIX) == true }
+                .jsonArray
+                .first { (it as? JsonPrimitive)?.content?.startsWith(VISITOR_DATA_PREFIX) == true }
                 .jsonPrimitive.content
         }
 
     suspend fun accountInfo(): Result<AccountInfo?> =
         runCatching {
-            ytMusic.accountMenu(WEB_REMIX).apply {
-                this.bodyAsText().let {
-                    println(it)
-                }
-            }
-                .body<AccountMenuResponse>().actions[0].openPopupAction.popup.multiPageMenuRenderer.header?.activeAccountHeaderRenderer?.toAccountInfo()
+            ytMusic
+                .accountMenu(WEB_REMIX)
+                .apply {
+                    this.bodyAsText().let {
+                        println(it)
+                    }
+                }.body<AccountMenuResponse>()
+                .actions[0]
+                .openPopupAction.popup.multiPageMenuRenderer.header
+                ?.activeAccountHeaderRenderer
+                ?.toAccountInfo()
         }
 
     suspend fun pipeStream(
@@ -1075,7 +1598,9 @@ object YouTube {
         }
 
     @JvmInline
-    value class SearchFilter(val value: String) {
+    value class SearchFilter(
+        val value: String,
+    ) {
         companion object {
             val FILTER_SONG = SearchFilter("EgWKAQIIAWoKEAkQBRAKEAMQBA%3D%3D")
             val FILTER_VIDEO = SearchFilter("EgWKAQIQAWoKEAkQChAFEAMQBA%3D%3D")
@@ -1092,15 +1617,26 @@ object YouTube {
             val response = ytMusic.getSearchSuggestions(WEB_REMIX, query).body<GetSearchSuggestionsResponse>()
             SearchSuggestions(
                 queries =
-                    response.contents?.getOrNull(0)?.searchSuggestionsSectionRenderer?.contents?.mapNotNull { content ->
-                        content.searchSuggestionRenderer?.suggestion?.runs?.joinToString(separator = "") { it.text }
-                    }.orEmpty(),
+                    response.contents
+                        ?.getOrNull(0)
+                        ?.searchSuggestionsSectionRenderer
+                        ?.contents
+                        ?.mapNotNull { content ->
+                            content.searchSuggestionRenderer
+                                ?.suggestion
+                                ?.runs
+                                ?.joinToString(separator = "") { it.text }
+                        }.orEmpty(),
                 recommendedItems =
-                    response.contents?.getOrNull(1)?.searchSuggestionsSectionRenderer?.contents?.mapNotNull {
-                        it.musicResponsiveListItemRenderer?.let { renderer ->
-                            SearchSuggestionPage.fromMusicResponsiveListItemRenderer(renderer)
-                        }
-                    }.orEmpty(),
+                    response.contents
+                        ?.getOrNull(1)
+                        ?.searchSuggestionsSectionRenderer
+                        ?.contents
+                        ?.mapNotNull {
+                            it.musicResponsiveListItemRenderer?.let { renderer ->
+                                SearchSuggestionPage.fromMusicResponsiveListItemRenderer(renderer)
+                            }
+                        }.orEmpty(),
             )
         }
 
@@ -1160,7 +1696,8 @@ object YouTube {
         query: String,
         token: String,
     ) = runCatching {
-        ytMusic.searchSpotifyTrack(query, token)
+        ytMusic
+            .searchSpotifyTrack(query, token)
             .body<com.maxrave.kotlinytmusicscraper.models.response.spotify.SearchResponse>()
     }
 
diff --git a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/Ytmusic.kt b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/Ytmusic.kt
index 1f03dd1a..44d768d6 100644
--- a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/Ytmusic.kt
+++ b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/Ytmusic.kt
@@ -794,6 +794,23 @@ class Ytmusic {
             contentType(ContentType.Application.Json)
         }
 
+    suspend fun playlist(playlistId: String) =
+        httpClient.post("browse") {
+            ytClient(YouTubeClient.WEB_REMIX, !cookie.isNullOrEmpty())
+            setBody(
+                BrowseBody(
+                    context =
+                        YouTubeClient.WEB_REMIX.toContext(
+                            locale,
+                            visitorData,
+                        ),
+                    browseId = playlistId,
+                    params = "wAEB",
+                ),
+            )
+            parameter("alt", "json")
+        }
+
     suspend fun browse(
         client: YouTubeClient,
         browseId: String? = null,
diff --git a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/Badges.kt b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/Badges.kt
index 3360441d..4cedddc1 100644
--- a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/Badges.kt
+++ b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/Badges.kt
@@ -10,4 +10,4 @@ data class Badges(
     data class MusicInlineBadgeRenderer(
         val icon: Icon,
     )
-}
+}
\ No newline at end of file
diff --git a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/Menu.kt b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/Menu.kt
index 8ead3b90..0536815f 100644
--- a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/Menu.kt
+++ b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/Menu.kt
@@ -1,5 +1,6 @@
 package com.maxrave.kotlinytmusicscraper.models
 
+import com.maxrave.kotlinytmusicscraper.models.response.LikeStatus
 import kotlinx.serialization.Serializable
 
 @Serializable
@@ -34,7 +35,25 @@ data class Menu(
         @Serializable
         data class TopLevelButton(
             val buttonRenderer: ButtonRenderer?,
+            val likeButtonRenderer: LikeButtonRenderer? = null,
         ) {
+            @Serializable
+            data class LikeButtonRenderer(
+                val likeStatus: String,
+                val likesAllowed: Boolean,
+            ) {
+                fun toLikeStatus(): LikeStatus =
+                    if (likesAllowed) {
+                        when (likeStatus) {
+                            "LIKE" -> LikeStatus.LIKE
+                            "DISLIKE" -> LikeStatus.DISLIKE
+                            else -> LikeStatus.INDIFFERENT
+                        }
+                    } else {
+                        LikeStatus.INDIFFERENT
+                    }
+            }
+
             @Serializable
             data class ButtonRenderer(
                 val icon: Icon,
@@ -42,4 +61,4 @@ data class Menu(
             )
         }
     }
-}
+}
\ No newline at end of file
diff --git a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/MusicResponsiveListItemRenderer.kt b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/MusicResponsiveListItemRenderer.kt
index 8a36005d..f6d0bdc3 100644
--- a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/MusicResponsiveListItemRenderer.kt
+++ b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/MusicResponsiveListItemRenderer.kt
@@ -29,14 +29,34 @@ data class MusicResponsiveListItemRenderer(
     val isSong: Boolean
         get() = navigationEndpoint == null || navigationEndpoint.watchEndpoint != null || navigationEndpoint.watchPlaylistEndpoint != null
     val isVideo: Boolean
-        get() = navigationEndpoint?.watchEndpoint?.watchEndpointMusicSupportedConfigs?.watchEndpointMusicConfig?.musicVideoType != null
+        get() = navigationEndpoint
+            ?.watchEndpoint
+            ?.watchEndpointMusicSupportedConfigs
+            ?.watchEndpointMusicConfig
+            ?.musicVideoType != null
     val isPlaylist: Boolean
-        get() = navigationEndpoint?.browseEndpoint?.browseEndpointContextSupportedConfigs?.browseEndpointContextMusicConfig?.pageType == MUSIC_PAGE_TYPE_PLAYLIST
+        get() = navigationEndpoint
+            ?.browseEndpoint
+            ?.browseEndpointContextSupportedConfigs
+            ?.browseEndpointContextMusicConfig
+            ?.pageType == MUSIC_PAGE_TYPE_PLAYLIST
     val isAlbum: Boolean
-        get() = navigationEndpoint?.browseEndpoint?.browseEndpointContextSupportedConfigs?.browseEndpointContextMusicConfig?.pageType == MUSIC_PAGE_TYPE_ALBUM ||
-                navigationEndpoint?.browseEndpoint?.browseEndpointContextSupportedConfigs?.browseEndpointContextMusicConfig?.pageType == MUSIC_PAGE_TYPE_AUDIOBOOK
+        get() = navigationEndpoint
+            ?.browseEndpoint
+            ?.browseEndpointContextSupportedConfigs
+            ?.browseEndpointContextMusicConfig
+            ?.pageType == MUSIC_PAGE_TYPE_ALBUM ||
+                navigationEndpoint
+                    ?.browseEndpoint
+                    ?.browseEndpointContextSupportedConfigs
+                    ?.browseEndpointContextMusicConfig
+                    ?.pageType == MUSIC_PAGE_TYPE_AUDIOBOOK
     val isArtist: Boolean
-        get() = navigationEndpoint?.browseEndpoint?.browseEndpointContextSupportedConfigs?.browseEndpointContextMusicConfig?.pageType == MUSIC_PAGE_TYPE_ARTIST
+        get() = navigationEndpoint
+            ?.browseEndpoint
+            ?.browseEndpointContextSupportedConfigs
+            ?.browseEndpointContextMusicConfig
+            ?.pageType == MUSIC_PAGE_TYPE_ARTIST
 
     @Serializable
     data class FlexColumn(
@@ -46,7 +66,39 @@ data class MusicResponsiveListItemRenderer(
         @Serializable
         data class MusicResponsiveListItemFlexColumnRenderer(
             val text: Runs?,
-        )
+        ) {
+            fun toAlbum(): Album? {
+                val run = text?.runs?.firstOrNull()
+                if (run != null && isAlbum()) {
+                    return Album(
+                        name = run.text,
+                        id = run.navigationEndpoint?.browseEndpoint?.browseId ?: return null,
+                    )
+                }
+                return null
+            }
+
+            fun toArtist(): Artist? {
+                val run = text?.runs?.firstOrNull()
+                if (run != null && isArtist()) {
+                    return Artist(
+                        name = run.text,
+                        id = run.navigationEndpoint?.browseEndpoint?.browseId ?: "",
+                    )
+                }
+                return null
+            }
+
+            fun isAlbum(): Boolean {
+                return text?.runs?.firstOrNull()?.navigationEndpoint?.browseEndpoint?.isAlbumEndpoint == true
+            }
+
+            fun isArtist(): Boolean {
+                return text?.runs?.firstOrNull()?.navigationEndpoint?.browseEndpoint?.isArtistEndpoint == true ||
+                    (text?.runs?.firstOrNull()?.navigationEndpoint?.watchEndpoint == null
+                        && text?.runs?.firstOrNull()?.navigationEndpoint?.browseEndpoint == null)
+            }
+        }
     }
 
     @Serializable
diff --git a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/YTItem.kt b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/YTItem.kt
index 99225c1b..397574ab 100644
--- a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/YTItem.kt
+++ b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/models/YTItem.kt
@@ -1,5 +1,7 @@
 package com.maxrave.kotlinytmusicscraper.models
 
+import com.maxrave.kotlinytmusicscraper.models.response.LikeStatus
+
 sealed class YTItem {
     abstract val id: String
     abstract val title: String
@@ -29,12 +31,21 @@ data class SongItem(
     override val explicit: Boolean = false,
     val endpoint: WatchEndpoint? = null,
     val thumbnails: Thumbnails? = null,
+    val badges: List<SongBadges>? = null,
+    val likeStatus: LikeStatus = LikeStatus.INDIFFERENT,
 ) : YTItem() {
     override val shareLink: String
         get() = "https://music.youtube.com/watch?v=$id"
     override val type: YTItemType
         get() = YTItemType.SONG
+
+    sealed class SongBadges {
+        data object Explicit : SongBadges()
+
+        data object Remix : SongBadges()
+    }
 }
+
 data class VideoItem(
     override val id: String,
     override val title: String,
@@ -45,9 +56,9 @@ data class VideoItem(
     val artists: List<Artist>,
     val album: Album? = null,
     val duration: Int? = null,
-    val view: String? = null
-
-    ): YTItem() {
+    val view: String? = null,
+    val likeStatus: LikeStatus = LikeStatus.INDIFFERENT,
+) : YTItem() {
     override val shareLink: String
         get() = "https://music.youtube.com/watch?v=$id"
     override val type: YTItemType
@@ -110,5 +121,5 @@ enum class YTItemType {
     VIDEO,
     ALBUM,
     PLAYLIST,
-    ARTIST
+    ARTIST,
 }
\ No newline at end of file
diff --git a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/parser/PlaylistParser.kt b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/parser/PlaylistParser.kt
new file mode 100644
index 00000000..a2bce894
--- /dev/null
+++ b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/parser/PlaylistParser.kt
@@ -0,0 +1,244 @@
+package com.maxrave.kotlinytmusicscraper.parser
+
+import android.util.Log
+import com.maxrave.kotlinytmusicscraper.models.MusicResponsiveListItemRenderer
+import com.maxrave.kotlinytmusicscraper.models.MusicShelfRenderer
+import com.maxrave.kotlinytmusicscraper.models.SongItem
+import com.maxrave.kotlinytmusicscraper.models.getContinuation
+import com.maxrave.kotlinytmusicscraper.models.response.BrowseResponse
+import com.maxrave.kotlinytmusicscraper.models.response.LikeStatus
+
+fun BrowseResponse.fromPlaylistToTrack(): List<SongItem> =
+    (
+        (this.contents
+            ?.singleColumnBrowseResultsRenderer?.tabs
+            ?: this.contents?.twoColumnBrowseResultsRenderer?.tabs
+            )?.firstOrNull()
+            ?.tabRenderer
+            ?.content
+            ?.sectionListRenderer
+            ?.contents
+            ?.firstOrNull()
+            ?.musicPlaylistShelfRenderer
+            ?.contents
+            ?: this.contents
+                ?.twoColumnBrowseResultsRenderer
+                ?.secondaryContents
+                ?.sectionListRenderer
+                ?.contents
+                ?.firstOrNull()
+                ?.musicPlaylistShelfRenderer
+                ?.contents
+    )?.mapNotNull { content ->
+        content.toSongItem()
+    } ?: emptyList()
+
+fun BrowseResponse.fromPlaylistToTrackWithSetVideoId(): List<Pair<SongItem, String>> =
+    (
+        (this.contents
+            ?.singleColumnBrowseResultsRenderer?.tabs
+            ?: this.contents?.twoColumnBrowseResultsRenderer?.tabs
+            )?.firstOrNull()
+            ?.tabRenderer
+            ?.content
+            ?.sectionListRenderer
+            ?.contents
+            ?.firstOrNull()
+            ?.musicPlaylistShelfRenderer
+            ?.contents
+            ?: this.contents
+                ?.twoColumnBrowseResultsRenderer
+                ?.secondaryContents
+                ?.sectionListRenderer
+                ?.contents
+                ?.firstOrNull()
+                ?.musicPlaylistShelfRenderer
+                ?.contents
+        )?.mapNotNull { content ->
+            Pair(
+                content.toSongItem() ?: return@mapNotNull null,
+                content.toPlaylistItemData()?.playlistSetVideoId ?: return@mapNotNull null,
+            )
+        } ?: emptyList()
+
+fun BrowseResponse.fromPlaylistContinuationToTracks(): List<SongItem> =
+    (this.continuationContents
+        ?.musicPlaylistShelfContinuation
+        ?.contents
+        ?: this.continuationContents
+            ?.sectionListContinuation
+            ?.contents
+            ?.firstOrNull()
+            ?.musicShelfRenderer
+            ?.contents)
+        ?.mapNotNull { contents ->
+            contents.toSongItem()
+        } ?: emptyList()
+
+fun BrowseResponse.fromPlaylistContinuationToTrackWithSetVideoId(): List<Pair<SongItem, String>> =
+    (this.continuationContents
+        ?.musicPlaylistShelfContinuation
+        ?.contents
+    ?: this.continuationContents
+        ?.sectionListContinuation
+        ?.contents
+        ?.firstOrNull()
+        ?.musicShelfRenderer
+        ?.contents)
+        ?.mapNotNull { contents ->
+            Pair(
+                contents.toSongItem() ?: return@mapNotNull null,
+                contents.toPlaylistItemData()?.playlistSetVideoId ?: return@mapNotNull null,
+            )
+        } ?: emptyList()
+
+fun BrowseResponse.getPlaylistContinuation(): String? =
+    this.contents
+        ?.singleColumnBrowseResultsRenderer
+        ?.tabs
+        ?.firstOrNull()
+        ?.tabRenderer
+        ?.content
+        ?.sectionListRenderer
+        ?.continuations
+        ?.getContinuation()
+    ?: this.contents
+        ?.twoColumnBrowseResultsRenderer
+        ?.secondaryContents
+        ?.sectionListRenderer
+        ?.continuations
+        ?.getContinuation()
+
+fun BrowseResponse.getContinuePlaylistContinuation(): String? =
+    this.continuationContents
+        ?.musicPlaylistShelfContinuation
+        ?.continuations
+        ?.getContinuation()
+
+fun MusicShelfRenderer.Content.toPlaylistItemData(): MusicResponsiveListItemRenderer.PlaylistItemData? =
+    this.musicResponsiveListItemRenderer?.playlistItemData
+
+fun MusicShelfRenderer.Content.toSongItem(): SongItem? {
+    val flexColumns = this.musicResponsiveListItemRenderer?.flexColumns
+    val fixedColumns = this.musicResponsiveListItemRenderer?.fixedColumns
+    val menu = this.musicResponsiveListItemRenderer?.menu
+    return SongItem(
+        id =
+            flexColumns
+                ?.firstOrNull()
+                ?.musicResponsiveListItemFlexColumnRenderer
+                ?.text
+                ?.runs
+                ?.firstOrNull()
+                ?.navigationEndpoint
+                ?.watchEndpoint
+                ?.videoId ?: return null,
+        title =
+            flexColumns
+                .firstOrNull()
+                ?.musicResponsiveListItemFlexColumnRenderer
+                ?.text
+                ?.runs
+                ?.firstOrNull()
+                ?.text ?: return null,
+        artists =
+            flexColumns
+                .apply {
+                    Log.w("PlaylistParser", "Artists: ${this.map {
+                        it.musicResponsiveListItemFlexColumnRenderer.text?.runs?.firstOrNull()?.text
+                    }}")
+                }
+                .filter {
+                it.musicResponsiveListItemFlexColumnRenderer.isArtist()
+            }.apply {
+                    Log.w("PlaylistParser", "Artists after filter: ${this.map {
+                        it.musicResponsiveListItemFlexColumnRenderer.text?.runs?.firstOrNull()?.text
+                    }}")
+                }
+                .mapNotNull { it.musicResponsiveListItemFlexColumnRenderer.toArtist() },
+        album =
+            flexColumns.find {
+                it.musicResponsiveListItemFlexColumnRenderer.isAlbum()
+            }?.musicResponsiveListItemFlexColumnRenderer?.toAlbum(),
+        duration =
+            fixedColumns
+                ?.firstOrNull()
+                ?.musicResponsiveListItemFlexColumnRenderer
+                ?.text
+                ?.runs
+                ?.firstOrNull()
+                ?.text
+                .toDurationSeconds(),
+        thumbnail =
+            this.musicResponsiveListItemRenderer
+                ?.thumbnail
+                ?.musicThumbnailRenderer
+                ?.getThumbnailUrl() ?: "",
+        endpoint = flexColumns
+            .first()
+            .musicResponsiveListItemFlexColumnRenderer
+            .text
+            ?.runs
+            ?.firstOrNull()
+            ?.navigationEndpoint
+            ?.watchEndpoint,
+        explicit =
+            this.musicResponsiveListItemRenderer?.badges?.toSongBadges()?.contains(
+                SongItem.SongBadges.Explicit,
+            ) ?: false,
+        thumbnails =
+            this.musicResponsiveListItemRenderer
+                ?.thumbnail
+                ?.musicThumbnailRenderer
+                ?.thumbnail,
+        likeStatus =
+            menu
+                ?.menuRenderer
+                ?.topLevelButtons
+                ?.firstOrNull()
+                ?.likeButtonRenderer
+                ?.toLikeStatus()
+                ?: LikeStatus.INDIFFERENT,
+        badges = this.musicResponsiveListItemRenderer?.badges?.toSongBadges(),
+    )
+}
+
+/**
+ * Check if the browse response has reload params, if true, this has the suggestion tracks
+ */
+fun BrowseResponse.hasReloadParams(): Boolean =
+    this.continuationContents
+        ?.sectionListContinuation
+        ?.contents
+        ?.firstOrNull()
+        ?.musicShelfRenderer
+        ?.continuations
+        ?.firstOrNull()
+        ?.reloadContinuationData
+        ?.continuation != null
+
+fun BrowseResponse.getReloadParams(): String? =
+    this.continuationContents
+        ?.sectionListContinuation
+        ?.contents
+        ?.firstOrNull()
+        ?.musicShelfRenderer
+        ?.continuations
+        ?.firstOrNull()
+        ?.reloadContinuationData
+        ?.continuation
+
+fun BrowseResponse.getSuggestionSongItems(): List<SongItem> =
+    if (hasReloadParams()) {
+        this.continuationContents
+            ?.sectionListContinuation
+            ?.contents
+            ?.firstOrNull()
+            ?.musicShelfRenderer
+            ?.contents
+            ?.mapNotNull { content ->
+                content.toSongItem()
+            } ?: emptyList()
+    } else {
+        emptyList()
+    }
\ No newline at end of file
diff --git a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/parser/YtItemParser.kt b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/parser/YtItemParser.kt
new file mode 100644
index 00000000..5653a704
--- /dev/null
+++ b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/parser/YtItemParser.kt
@@ -0,0 +1,24 @@
+package com.maxrave.kotlinytmusicscraper.parser
+
+import com.maxrave.kotlinytmusicscraper.models.Badges
+import com.maxrave.kotlinytmusicscraper.models.SongItem
+
+fun List<Badges>.toSongBadges(): List<SongItem.SongBadges> =
+    this.mapNotNull {
+        when (it.musicInlineBadgeRenderer?.icon?.iconType) {
+            "MUSIC_EXPLICIT_BADGE" -> SongItem.SongBadges.Explicit
+            else -> null
+        }
+    }
+
+fun String?.toDurationSeconds(): Int =
+    this
+        ?.let {
+            if (it.contains(":")) {
+                it.split(":")
+            } else if (it.contains(".")) {
+                it.split(".")
+            } else {
+                listOf(it)
+            }
+        }?.let { it[0].toInt() * 60 + it[1].toInt() } ?: 0
\ No newline at end of file
diff --git a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/test/main.kt b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/test/main.kt
index ed1d8b7b..ad2d196a 100644
--- a/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/test/main.kt
+++ b/kotlinYtmusicScraper/src/main/java/com/maxrave/kotlinytmusicscraper/test/main.kt
@@ -11,7 +11,6 @@ import com.maxrave.kotlinytmusicscraper.models.SectionListRenderer
 import com.maxrave.kotlinytmusicscraper.models.Thumbnail
 import com.maxrave.kotlinytmusicscraper.models.YouTubeClient
 import com.maxrave.kotlinytmusicscraper.models.YouTubeLocale
-import com.maxrave.kotlinytmusicscraper.models.response.NextAndroidMusicResponse
 import com.maxrave.kotlinytmusicscraper.models.response.spotify.TokenResponse
 import io.ktor.client.call.body
 import io.ktor.client.statement.bodyAsText
@@ -20,18 +19,19 @@ import kotlin.random.Random
 
 fun main() {
     runBlocking {
-        Ytmusic().apply {
+        YouTube.apply {
             cookie = "VISITOR_INFO1_LIVE=ej0GQpuOBos; VISITOR_PRIVACY_METADATA=CgJWThIEGgAgQQ%3D%3D; LOGIN_INFO=AFmmF2swRQIgfEnCJc4rCc5_Q70_MokB-2HMsW2LqaB-m7DOMpdA5ZoCIQC4Htl3LK79tMioZH08h7yuNsefHkP0mgAzS-5azSqf3w:QUQ3MjNmeGZtVEdLV1o2ZGgwdElidG5pNWkzcVF6Tl9VSjNEX1Bmb09XNWZxcXNUYzhsdEZOVWY4WkdqRGlxYUkxR1h0cHpCeGc2Z0hvUDRrU3N4dUZkQUNkVkdhQlM5S0FXUXhweUlyanZHN1ZJN3MyeG9GdTI4TUl0Z1hOMFZncGlSaU1KUWVkekVkcW9sUDBsaW91eVNpNUE4UnFxd0V3; PREF=f6=40000000&tz=Asia.Saigon&f5=20000&f7=100&repeat=NONE&autoplay=true&hl=vi; SID=g.a000ngiHuOY8jgmJeLJPBFtCR5mr1gHnrABtzUUka0E_P4-sTIdAWwBqOyl01hovpPSpjWaiTgACgYKATISARMSFQHGX2Mi7ZwahgxrzPHmQtXRYxqX7RoVAUF8yKpX1WTuOzJ4PtaZ24jJ49tQ0076; __Secure-1PSIDTS=sidts-CjIBUFGoh4ZfeeGZ9ZJGQJzW6dkdPrz7-BH_5SmEQiGTNRr4cOdKyf8fRGd3kcKkVGr0SxAA; __Secure-3PSIDTS=sidts-CjIBUFGoh4ZfeeGZ9ZJGQJzW6dkdPrz7-BH_5SmEQiGTNRr4cOdKyf8fRGd3kcKkVGr0SxAA; __Secure-1PSID=g.a000ngiHuOY8jgmJeLJPBFtCR5mr1gHnrABtzUUka0E_P4-sTIdAr3V1zfjK_W9FXuzqw7Za5QACgYKATcSARMSFQHGX2MiVxSCfBo_m-FXygl34Q8WjxoVAUF8yKovcVEDth2Pi29u9KQpNN5c0076; __Secure-3PSID=g.a000ngiHuOY8jgmJeLJPBFtCR5mr1gHnrABtzUUka0E_P4-sTIdAqjw43ggC06CrT_cmcI7KpAACgYKAeMSARMSFQHGX2Mio-Vfwe3BaUrbD04PdnYdAxoVAUF8yKpMQqSg4yD_9g2A-7ZBg8D00076; HSID=ANzF8FV_wvhOlj5i-; SSID=AfpQrKdbaQOUdSpaA; APISID=x07RZm3QDC6OUUyf/A-lAr51RKQCdh1qIU; SAPISID=WZVGvk8OAccoLVLE/ADzIBvD0MxBghSO_8; __Secure-1PAPISID=WZVGvk8OAccoLVLE/ADzIBvD0MxBghSO_8; __Secure-3PAPISID=WZVGvk8OAccoLVLE/ADzIBvD0MxBghSO_8; YSC=HS0aiOi6Hqg; SIDCC=AKEyXzXSO1wVpJyALOgo27uLxVg-Q0Vwe5QP6K9b5jaUbAhPodoA2Q-GdX3zemansPpcsP0w-RI; __Secure-1PSIDCC=AKEyXzVPWaJYK6EvJ411aYs2Nnbih4HBwqJfj-vphs_iOq57AFh_mlz53wDLX3ldIHSxW4F12VUB; __Secure-3PSIDCC=AKEyXzU19gZnXJkAIMXqWnOfvmJPvYQ1fn85bccHKIgDsDyCnLXbhHTDo6QOmGfFCo65F1Xq7N58; ST-tsiny9=csn=sIwy3ZUM6DEzRm22&itct=CCcQyfQCGAAiEwiSxtX7kZ6IAxU2m1YBHSngELk%3D"
-        }.next(
-            YouTubeClient.ANDROID_MUSIC,
-            "yoh-oXuR1-g",
-            null,
-            null,
-            null,
-            null,
-        ).apply {
-            println(body<NextAndroidMusicResponse>())
-        }
+        }.getSuggestionsTrackForPlaylist("VLPLJ9AkrV4jKlpou5U61HJCu_0LVf3HNYNp")
+            .onSuccess { res ->
+                res?.second?.map {
+                    it.title
+                }.apply {
+                    println(this)
+                }
+                println(res?.first)
+            }.onFailure { e ->
+                e.printStackTrace()
+            }
     }
 }