From 357b7c193548a125591b5462c5de6ef6469b73f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriel=20Font=C3=A1n?= <gabilessto@gmail.com>
Date: Sun, 28 Jul 2024 18:42:29 +0200
Subject: [PATCH] perf: Rewritten the metadata saver
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gabriel Fontán <gabilessto@gmail.com>
---
 .idea/deploymentTargetSelector.xml            |   4 +-
 .../metadator/presentation/Navigation.kt      | 140 +++--
 .../tageditor/ID3MetadataEditorPage.kt        |  65 +--
 .../tageditor/rework/MetadataEditorPage.kt    | 500 ++++++++++++++++++
 .../tageditor/rework/MetadataEditorVM.kt      | 343 ++++++++++++
 app/src/main/res/values/strings.xml           |   1 +
 .../text/PreConfiguredOutlinedTextField.kt    |  30 +-
 .../util/RememberSaveableWithInitialValue.kt  |  12 +-
 .../main/java/com/bobbyesp/ui/util/Savers.kt  |  15 +
 .../com/bobbyesp/utilities/ext/PropertyMap.kt |  16 +
 .../utilities/mediastore/AudioFileMetadata.kt |   2 +
 .../bobbyesp/utilities/states/ScreenState.kt  |   2 +-
 gradle/libs.versions.toml                     |   4 +-
 13 files changed, 1021 insertions(+), 113 deletions(-)
 create mode 100644 app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/rework/MetadataEditorPage.kt
 create mode 100644 app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/rework/MetadataEditorVM.kt
 create mode 100644 app/ui/src/main/java/com/bobbyesp/ui/util/Savers.kt

diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
index 7c11440..4561253 100644
--- a/.idea/deploymentTargetSelector.xml
+++ b/.idea/deploymentTargetSelector.xml
@@ -4,10 +4,10 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2024-05-15T19:04:18.114165Z">
+        <DropdownSelection timestamp="2024-07-27T17:35:42.676944300Z">
           <Target type="DEFAULT_BOOT">
             <handle>
-              <DeviceId pluginId="LocalEmulator" identifier="path=C:\Users\gabil\.android\avd\Pixel_6_API_30.avd" />
+              <DeviceId pluginId="LocalEmulator" identifier="path=C:\Users\gabil\.android\avd\Pixel_7_Pro_API_34.avd" />
             </handle>
           </Target>
         </DropdownSelection>
diff --git a/app/src/main/java/com/bobbyesp/metadator/presentation/Navigation.kt b/app/src/main/java/com/bobbyesp/metadator/presentation/Navigation.kt
index e5c4dcf..3d7d6f5 100644
--- a/app/src/main/java/com/bobbyesp/metadator/presentation/Navigation.kt
+++ b/app/src/main/java/com/bobbyesp/metadator/presentation/Navigation.kt
@@ -1,6 +1,11 @@
 package com.bobbyesp.metadator.presentation
 
 import android.annotation.SuppressLint
+import android.app.Activity
+import android.util.Log
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.IntentSenderRequest
+import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.BoxWithConstraints
@@ -39,6 +44,7 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -85,13 +91,14 @@ import com.bobbyesp.metadator.presentation.pages.mediaplayer.MediaplayerViewMode
 import com.bobbyesp.metadator.presentation.pages.mediaplayer.player.CollapsedPlayerHeight
 import com.bobbyesp.metadator.presentation.pages.mediaplayer.player.PlayerAnimationSpec
 import com.bobbyesp.metadator.presentation.pages.settings.SettingsPage
-import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.ID3MetadataEditorPage
-import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.ID3MetadataEditorPageViewModel
+import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.rework.MetadataEditorPage
+import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.rework.MetadataEditorVM
 import com.bobbyesp.ui.components.bottomsheet.draggable.rememberDraggableBottomSheetState
 import com.bobbyesp.ui.components.tags.RoundedTag
 import com.bobbyesp.ui.motion.animatedComposable
 import com.bobbyesp.ui.motion.slideInVerticallyComposable
 import com.bobbyesp.utilities.navigation.parcelableType
+import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.launch
 import kotlin.reflect.typeOf
 
@@ -149,18 +156,14 @@ fun Navigator() {
         }
 
         val animatedBottom by animateDpAsState(
-            targetValue = targetBottom,
-            label = "Animated bottom insets for player sheet"
+            targetValue = targetBottom, label = "Animated bottom insets for player sheet"
         )
 
         val playerAwareWindowInsets = remember(
-            bottomInset,
-            mediaPlayerSheetState.isDismissed,
-            animatedBottom
+            bottomInset, mediaPlayerSheetState.isDismissed, animatedBottom
         ) {
             val insetsBottom = animatedBottom
-            windowsInsets
-                .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top)
+            windowsInsets.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top)
                 .add(WindowInsets(bottom = insetsBottom))
         }
 
@@ -229,11 +232,11 @@ fun Navigator() {
                                         }
                                     },
                                     icon = {
-                                        Icon(
-                                            imageVector = destinationInfo?.icon
-                                                ?: Icons.Rounded.Square,
-                                            contentDescription = destinationInfo?.title
-                                                ?.let { stringResource(id = it) })
+                                        Icon(imageVector = destinationInfo?.icon
+                                            ?: Icons.Rounded.Square,
+                                            contentDescription = destinationInfo?.title?.let {
+                                                stringResource(id = it)
+                                            })
                                     },
                                     modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                                 )
@@ -246,8 +249,7 @@ fun Navigator() {
                                 .padding(horizontal = 12.dp),
                         ) {
                             Row(
-                                modifier = Modifier,
-                                verticalAlignment = Alignment.CenterVertically
+                                modifier = Modifier, verticalAlignment = Alignment.CenterVertically
                             ) {
                                 Text(
                                     modifier = Modifier.padding(16.dp),
@@ -262,19 +264,17 @@ fun Navigator() {
                                     shape = MaterialTheme.shapes.small
                                 )
                             }
-                            Surface(
-                                onClick = {
-                                    navController.navigate(Route.SettingsNavigator.Settings)
-                                    scope.launch {
-                                        drawerState.close()
-                                    }
-                                },
+                            Surface(onClick = {
+                                navController.navigate(Route.SettingsNavigator.Settings)
+                                scope.launch {
+                                    drawerState.close()
+                                }
+                            },
                                 modifier = Modifier
                                     .semantics { role = Role.Tab }
                                     .height(56.dp)
                                     .fillMaxWidth(),
-                                color = Color.Transparent
-                            ) {
+                                color = Color.Transparent) {
                                 Row(
                                     Modifier.padding(start = 16.dp, end = 24.dp),
                                     verticalAlignment = Alignment.CenterVertically
@@ -297,31 +297,27 @@ fun Navigator() {
                     }
                 },
             ) {
-                Scaffold(
-                    modifier = Modifier.windowInsetsPadding(
-                        insets = WindowInsets(
-                            left = WindowInsets.safeDrawing.getLeft(
-                                density,
-                                layoutDirection = LocalLayoutDirection.current
-                            ),
-                            right = WindowInsets.safeDrawing.getRight(
-                                density,
-                                layoutDirection = LocalLayoutDirection.current
-                            ),
+                Scaffold(modifier = Modifier.windowInsetsPadding(
+                    insets = WindowInsets(
+                        left = WindowInsets.safeDrawing.getLeft(
+                            density, layoutDirection = LocalLayoutDirection.current
+                        ),
+                        right = WindowInsets.safeDrawing.getRight(
+                            density, layoutDirection = LocalLayoutDirection.current
+                        ),
+                    )
+                ), snackbarHost = {
+                    SnackbarHost(
+                        hostState = snackbarHostState
+                    ) { dataReceived ->
+                        Snackbar(
+                            modifier = Modifier,
+                            snackbarData = dataReceived,
+                            containerColor = MaterialTheme.colorScheme.inverseSurface,
+                            contentColor = MaterialTheme.colorScheme.inverseOnSurface,
                         )
-                    ),
-                    snackbarHost = {
-                        SnackbarHost(
-                            hostState = snackbarHostState
-                        ) { dataReceived ->
-                            Snackbar(
-                                modifier = Modifier,
-                                snackbarData = dataReceived,
-                                containerColor = MaterialTheme.colorScheme.inverseSurface,
-                                contentColor = MaterialTheme.colorScheme.inverseOnSurface,
-                            )
-                        }
-                    }) {
+                    }
+                }) {
                     NavHost(
                         modifier = Modifier
                             .fillMaxWidth()
@@ -354,15 +350,47 @@ fun Navigator() {
                             slideInVerticallyComposable<Route.UtilitiesNavigator.TagEditor>(
                                 typeMap = mapOf(typeOf<ParcelableSong>() to parcelableType<ParcelableSong>()),
                             ) {
-                                val song =
-                                    it.toRoute<Route.UtilitiesNavigator.TagEditor>()
+                                val song = it.toRoute<Route.UtilitiesNavigator.TagEditor>()
 
-                                val viewModel = hiltViewModel<ID3MetadataEditorPageViewModel>()
+                                val viewModel = hiltViewModel<MetadataEditorVM>()
+                                val state = viewModel.state.collectAsStateWithLifecycle()
 
-                                ID3MetadataEditorPage(
-                                    viewModel = viewModel,
-                                    parcelableSong = song.selectedSong
-                                )
+                                val securityErrorHandler =
+                                    rememberLauncherForActivityResult(
+                                        contract = ActivityResultContracts.StartIntentSenderForResult()
+                                    ) { result ->
+                                        if (result.resultCode == Activity.RESULT_OK) {
+                                            viewModel.savePropertyMap(
+                                                audioPath = song.selectedSong.localSongPath
+                                            )
+                                            navController.popBackStack()
+                                        }
+                                    }
+
+                                LaunchedEffect(true) {
+                                    viewModel.eventFlow.collectLatest { event ->
+                                        Log.i("MetadataEditor", "Event received: $event")
+                                        when (event) {
+                                            is MetadataEditorVM.Companion.UiEvent.RequestPermission -> {
+                                                val intent =
+                                                    IntentSenderRequest.Builder(event.intent)
+                                                        .build()
+                                                securityErrorHandler.launch(intent)
+                                            }
+
+                                            MetadataEditorVM.Companion.UiEvent.SaveSuccess -> {
+                                                navController.popBackStack()
+                                            }
+                                        }
+                                    }
+                                }
+
+                                MetadataEditorPage(
+                                    state = state,
+                                    receivedSong = song.selectedSong,
+                                ) { receivedEvent ->
+                                    viewModel.onEvent(receivedEvent)
+                                }
                             }
                         }
 
diff --git a/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/ID3MetadataEditorPage.kt b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/ID3MetadataEditorPage.kt
index f1ec5db..b57743d 100644
--- a/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/ID3MetadataEditorPage.kt
+++ b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/ID3MetadataEditorPage.kt
@@ -157,41 +157,42 @@ fun ID3MetadataEditorPage(
     }
 
 
-    BottomSheetScaffold(topBar = {
-        TopAppBar(title = {
-            Column(modifier = Modifier.fillMaxWidth()) {
-                MarqueeText(
-                    text = stringResource(id = R.string.viewing_metadata),
-                    style = MaterialTheme.typography.bodyLarge,
-                    fontSize = 20.sp,
-                    fontWeight = FontWeight.Bold
-                )
-            }
-        }, navigationIcon = {
-            CloseButton { navController.popBackStack() }
-        }, actions = {
-            IconButton(onClick = {
-                scope.launch {
-                    scaffoldState.bottomSheetState.partialExpand()
+    BottomSheetScaffold(
+        topBar = {
+            TopAppBar(title = {
+                Column(modifier = Modifier.fillMaxWidth()) {
+                    MarqueeText(
+                        text = stringResource(id = R.string.viewing_metadata),
+                        style = MaterialTheme.typography.bodyLarge,
+                        fontSize = 20.sp,
+                        fontWeight = FontWeight.Bold
+                    )
                 }
-            }) {
-                Icon(
-                    imageVector = Icons.Rounded.Downloading,
-                    contentDescription = stringResource(
-                        id = R.string.retrieve_song_info
+            }, navigationIcon = {
+                CloseButton { navController.popBackStack() }
+            }, actions = {
+                IconButton(onClick = {
+                    scope.launch {
+                        scaffoldState.bottomSheetState.partialExpand()
+                    }
+                }) {
+                    Icon(
+                        imageVector = Icons.Rounded.Downloading,
+                        contentDescription = stringResource(
+                            id = R.string.retrieve_song_info
+                        )
                     )
-                )
-            }
-            TextButton(onClick = {
-                val isInfoSavedInMediaStore = saveInMediaStore()
-                if (isInfoSavedInMediaStore) {
-                    navController.popBackStack()
                 }
-            }) {
-                Text(text = stringResource(id = R.string.save))
-            }
-        }, scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior())
-    },
+                TextButton(onClick = {
+                    val isInfoSavedInMediaStore = saveInMediaStore()
+                    if (isInfoSavedInMediaStore) {
+                        navController.popBackStack()
+                    }
+                }) {
+                    Text(text = stringResource(id = R.string.save))
+                }
+            }, scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior())
+        },
         modifier = Modifier.fillMaxSize(),
         scaffoldState = scaffoldState,
         sheetPeekHeight = 148.dp,
diff --git a/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/rework/MetadataEditorPage.kt b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/rework/MetadataEditorPage.kt
new file mode 100644
index 0000000..08da398
--- /dev/null
+++ b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/rework/MetadataEditorPage.kt
@@ -0,0 +1,500 @@
+package com.bobbyesp.metadator.presentation.pages.utilities.tageditor.rework
+
+import android.content.res.Configuration
+import android.net.Uri
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.PickVisualMediaRequest
+import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.animation.Crossfade
+import androidx.compose.animation.core.tween
+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
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Edit
+import androidx.compose.material3.BottomSheetScaffold
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SheetValue
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberBottomSheetScaffoldState
+import androidx.compose.material3.rememberStandardBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.State
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshots.SnapshotStateMap
+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.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.bobbyesp.metadator.R
+import com.bobbyesp.metadator.model.ParcelableSong
+import com.bobbyesp.metadator.presentation.common.LocalNavController
+import com.bobbyesp.metadator.presentation.common.LocalOrientation
+import com.bobbyesp.metadator.presentation.components.image.AsyncImage
+import com.bobbyesp.ui.components.button.CloseButton
+import com.bobbyesp.ui.components.others.MetadataTag
+import com.bobbyesp.ui.components.text.LargeCategoryTitle
+import com.bobbyesp.ui.components.text.MarqueeText
+import com.bobbyesp.ui.components.text.PreConfiguredOutlinedTextField
+import com.bobbyesp.utilities.ext.toMinutes
+import com.bobbyesp.utilities.states.ResourceState
+import com.bobbyesp.utilities.states.ScreenState
+import com.kyant.taglib.AudioProperties
+import com.materialkolor.ktx.harmonize
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun MetadataEditorPage(
+    state: State<MetadataEditorVM.PageViewState>,
+    receivedSong: ParcelableSong,
+    onEvent: (MetadataEditorVM.Companion.Event) -> Unit
+) {
+    val navController = LocalNavController.current
+
+    val pageState = state.value
+
+    LaunchedEffect(receivedSong) {
+        onEvent(MetadataEditorVM.Companion.Event.LoadMetadata(receivedSong.localSongPath))
+    }
+
+    var newArtworkAddress by rememberSaveable(key = "newArtworkAddress") {
+        mutableStateOf<Uri?>(null)
+    }
+
+    val singleImagePickerLauncher = rememberLauncherForActivityResult(
+        contract = ActivityResultContracts.PickVisualMedia(),
+        onResult = { uri ->
+            newArtworkAddress = uri
+        })
+
+    val scaffoldState = rememberBottomSheetScaffoldState(
+        bottomSheetState = rememberStandardBottomSheetState(
+            initialValue = SheetValue.Hidden, skipHiddenState = false
+        )
+    )
+
+    BottomSheetScaffold(
+        topBar = {
+            TopAppBar(title = {
+                Column(modifier = Modifier.fillMaxWidth()) {
+                    MarqueeText(
+                        text = stringResource(id = R.string.viewing_metadata),
+                        style = MaterialTheme.typography.bodyLarge,
+                        fontSize = 20.sp,
+                        fontWeight = FontWeight.Bold
+                    )
+                }
+            }, navigationIcon = {
+                CloseButton { navController.popBackStack() }
+            }, actions = {
+                TextButton(
+                    onClick = {
+                        onEvent(MetadataEditorVM.Companion.Event.SaveProperties(receivedSong.localSongPath))
+                    }
+                ) {
+                    Text(text = stringResource(id = R.string.save))
+                }
+            }, scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior())
+        },
+        modifier = Modifier.fillMaxSize(),
+        scaffoldState = scaffoldState,
+        sheetPeekHeight = 148.dp,
+        sheetShadowElevation = 8.dp,
+        sheetContent = { /* TODO */ },
+    ) { innerPadding ->
+        Crossfade(
+            targetState = pageState.pageState,
+            animationSpec = tween(175),
+            label = "Fade between pages (ID3MetadataEditorPage)",
+            modifier = Modifier
+                .fillMaxSize()
+                .navigationBarsPadding()
+        ) { state ->
+            when (state) {
+                is ScreenState.Error -> TODO()
+                ScreenState.Loading -> LoadingState(modifier = Modifier.fillMaxSize())
+
+                is ScreenState.Success -> {
+                    val scrollState = rememberScrollState()
+                    val orientation = LocalOrientation.current
+
+                    val artworkUri = newArtworkAddress ?: receivedSong.artworkPath
+
+                    when (orientation) {
+                        Configuration.ORIENTATION_PORTRAIT -> {
+                            Column(
+                                modifier = Modifier
+                                    .fillMaxSize()
+                                    .verticalScroll(scrollState)
+                                    .padding(horizontal = 16.dp)
+                            ) {
+                                Box(
+                                    modifier = Modifier
+                                        .size(250.dp)
+                                        .padding(8.dp)
+                                        .padding(bottom = 8.dp)
+                                        .aspectRatio(1f)
+                                        .align(Alignment.CenterHorizontally),
+                                ) {
+                                    AsyncImage(
+                                        modifier = Modifier
+                                            .fillMaxSize()
+                                            .clip(MaterialTheme.shapes.small)
+                                            .align(Alignment.Center),
+                                        imageModel = artworkUri,
+                                    )
+                                    Box(
+                                        modifier = Modifier
+                                            .fillMaxSize()
+                                            .padding(8.dp),
+                                        contentAlignment = Alignment.BottomEnd
+                                    ) {
+                                        IconButton(colors = IconButtonDefaults.iconButtonColors(
+                                            containerColor = Color.Black.copy(alpha = 0.5f)
+                                        ), onClick = {
+                                            singleImagePickerLauncher.launch(
+                                                PickVisualMediaRequest(
+                                                    ActivityResultContracts.PickVisualMedia.ImageOnly
+                                                )
+                                            )
+                                        }) {
+                                            Icon(
+                                                imageVector = Icons.Rounded.Edit,
+                                                tint = Color.White.harmonize(Color.Black.copy(alpha = 0.5f)),
+                                                contentDescription = stringResource(id = R.string.edit_image)
+                                            )
+                                        }
+                                    }
+                                }
+
+                                if (pageState.audioProperties is ResourceState.Success && pageState.audioProperties.data != null) {
+                                    AudioProperties(
+                                        modifier = Modifier,
+                                        audioProperties = pageState.audioProperties.data!!
+                                    )
+                                }
+
+                                if (pageState.metadata is ResourceState.Success) {
+                                    SongProperties(pageState.mutablePropertiesMap)
+                                    //TODO: Crear el mapa mutable basándonos en lo recibido por el viewmodel.
+                                    //Lo iremos modificando en cada cambio que se realicen en los textfields
+                                    //Cuando le demos a guardar, se enviará el mapa mutable al view model, que se encargará de
+                                    //guardar los cambios en el archivo de audio.
+                                    //Si se cancela, se descartarán los cambios (mostrar un dialogo de confirmación antes)
+                                    //y se cerrará la pantalla.
+                                }
+                            }
+                        }
+
+                        Configuration.ORIENTATION_LANDSCAPE -> {
+                            Row(
+                                modifier = Modifier.fillMaxSize(),
+                                horizontalArrangement = Arrangement.spacedBy(16.dp)
+                            ) {
+                                Box(
+                                    modifier = Modifier
+                                        .padding(8.dp)
+                                        .aspectRatio(1f)
+                                        .align(Alignment.CenterVertically),
+                                ) {
+                                    AsyncImage(
+                                        modifier = Modifier
+                                            .fillMaxSize()
+                                            .clip(MaterialTheme.shapes.small)
+                                            .align(Alignment.Center),
+                                        imageModel = artworkUri,
+                                    )
+                                    Box(
+                                        modifier = Modifier
+                                            .fillMaxSize()
+                                            .padding(8.dp),
+                                        contentAlignment = Alignment.BottomEnd
+                                    ) {
+                                        IconButton(colors = IconButtonDefaults.iconButtonColors(
+                                            containerColor = Color.Black.copy(alpha = 0.5f)
+                                        ), onClick = {
+                                            singleImagePickerLauncher.launch(
+                                                PickVisualMediaRequest(
+                                                    ActivityResultContracts.PickVisualMedia.ImageOnly
+                                                )
+                                            )
+                                        }) {
+                                            Icon(
+                                                imageVector = Icons.Rounded.Edit,
+                                                tint = Color.White.harmonize(Color.Black.copy(alpha = 0.5f)),
+                                                contentDescription = stringResource(id = R.string.edit_image)
+                                            )
+                                        }
+                                    }
+                                }
+                                Column(
+                                    modifier = Modifier
+                                        .weight(0.5f)
+                                        .verticalScroll(scrollState)
+                                ) {
+                                    if (pageState.audioProperties is ResourceState.Success && pageState.audioProperties.data != null) {
+                                        AudioProperties(
+                                            modifier = Modifier,
+                                            audioProperties = pageState.audioProperties.data!!
+                                        )
+                                    }
+                                    if (pageState.metadata is ResourceState.Success) {
+                                        SongProperties(pageState.mutablePropertiesMap)
+                                    }
+                                }
+
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun AudioProperties(modifier: Modifier = Modifier, audioProperties: AudioProperties) {
+    LargeCategoryTitle(
+        modifier = Modifier.padding(vertical = 6.dp),
+        text = stringResource(id = R.string.audio_details)
+    )
+
+    Column(
+        modifier = modifier.fillMaxWidth(),
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(bottom = 8.dp),
+        ) {
+            MetadataTag(
+                modifier = Modifier.weight(0.5f),
+                typeOfMetadata = stringResource(id = R.string.bitrate),
+                metadata = audioProperties.bitrate.toString() + " kbps"
+            )
+            MetadataTag(
+                modifier = Modifier.weight(0.5f),
+                typeOfMetadata = stringResource(id = R.string.sample_rate),
+                metadata = audioProperties.sampleRate.toString() + " Hz"
+            )
+        }
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(bottom = 8.dp),
+        ) {
+            MetadataTag(
+                modifier = Modifier.weight(0.5f),
+                typeOfMetadata = stringResource(id = R.string.channels),
+                metadata = audioProperties.channels.toString()
+            )
+            MetadataTag(
+                modifier = Modifier.weight(0.5f),
+                typeOfMetadata = stringResource(id = R.string.duration),
+                metadata = audioProperties.length.toMinutes()
+            )
+        }
+    }
+}
+
+@Composable
+fun SongProperties(mutablePropertiesMap: SnapshotStateMap<String, String>) {
+    LargeCategoryTitle(
+        modifier = Modifier.padding(vertical = 6.dp),
+        text = stringResource(id = R.string.general_tags)
+    )
+
+    PreConfiguredOutlinedTextField(
+        value = mutablePropertiesMap["TITLE"],
+        label = stringResource(id = R.string.title),
+        modifier = Modifier.fillMaxWidth()
+    ) { title ->
+        mutablePropertiesMap["TITLE"] = title
+    }
+
+    PreConfiguredOutlinedTextField(
+        value = mutablePropertiesMap["ARTIST"],
+        label = stringResource(id = R.string.artist),
+        modifier = Modifier.fillMaxWidth()
+    ) { artists ->
+        mutablePropertiesMap["ARTIST"] = artists
+    }
+
+    PreConfiguredOutlinedTextField(
+        value = mutablePropertiesMap["ALBUM"],
+        label = stringResource(id = R.string.album),
+        modifier = Modifier.fillMaxWidth()
+    ) { album ->
+        mutablePropertiesMap["ALBUM"] = album
+    }
+
+    PreConfiguredOutlinedTextField(
+        value = mutablePropertiesMap["ALBUMARTIST"],
+        label = stringResource(id = R.string.album_artist),
+        modifier = Modifier.fillMaxWidth()
+    ) { albumArtist ->
+        mutablePropertiesMap["ALBUMARTIST"] = albumArtist
+    }
+
+    Column(
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            PreConfiguredOutlinedTextField(
+                value = mutablePropertiesMap["TRACKNUMBER"],
+                label = stringResource(id = R.string.track_number),
+                modifier = Modifier.weight(0.5f)
+            ) { trackNumber ->
+                mutablePropertiesMap["TRACKNUMBER"] = trackNumber
+            }
+            Spacer(modifier = Modifier.width(8.dp))
+            PreConfiguredOutlinedTextField(
+                value = mutablePropertiesMap["DISCNUMBER"],
+                label = stringResource(id = R.string.disc_number),
+                modifier = Modifier.weight(0.5f)
+            ) { discNumber ->
+                mutablePropertiesMap["DISCNUMBER"] = discNumber
+            }
+        }
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            PreConfiguredOutlinedTextField(
+                value = mutablePropertiesMap["DATE"],
+                label = stringResource(id = R.string.date),
+                modifier = Modifier.weight(0.5f)
+            ) { date ->
+                mutablePropertiesMap["DATE"] = date
+            }
+            Spacer(modifier = Modifier.width(8.dp))
+            PreConfiguredOutlinedTextField(
+                value = mutablePropertiesMap["GENRE"],
+                label = stringResource(id = R.string.genre),
+                modifier = Modifier.weight(0.5f)
+            ) { genre ->
+                mutablePropertiesMap["GENRE"] = genre
+            }
+        }
+    }
+
+    LargeCategoryTitle(
+        modifier = Modifier.padding(vertical = 6.dp), text = stringResource(id = R.string.credits)
+    )
+
+    Column(
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            PreConfiguredOutlinedTextField(
+                value = mutablePropertiesMap["COMPOSER"],
+                label = stringResource(id = R.string.composer),
+                modifier = Modifier.weight(0.5f)
+            ) { composer ->
+                mutablePropertiesMap["COMPOSER"] = composer
+            }
+            Spacer(modifier = Modifier.width(8.dp))
+            PreConfiguredOutlinedTextField(
+                value = mutablePropertiesMap["LYRICIST"],
+                label = stringResource(id = R.string.lyricist),
+                modifier = Modifier.weight(0.5f)
+            ) { lyricist ->
+                mutablePropertiesMap["LYRICIST"] = lyricist
+            }
+        }
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            PreConfiguredOutlinedTextField(
+                value = mutablePropertiesMap["CONDUCTOR"],
+                label = stringResource(id = R.string.conductor),
+                modifier = Modifier.weight(0.5f)
+            ) { conductor ->
+                mutablePropertiesMap["CONDUCTOR"] = conductor
+            }
+            Spacer(modifier = Modifier.width(8.dp))
+            PreConfiguredOutlinedTextField(
+                value = mutablePropertiesMap["REMIXER"],
+                label = stringResource(id = R.string.remixer),
+                modifier = Modifier.weight(0.5f)
+            ) { remixer ->
+                mutablePropertiesMap["REMIXER"] = remixer
+            }
+        }
+        PreConfiguredOutlinedTextField(
+            value = mutablePropertiesMap["PERFORMER"],
+            label = stringResource(id = R.string.performer),
+            modifier = Modifier.fillMaxWidth()
+        ) { performer ->
+            mutablePropertiesMap["PERFORMER"] = performer
+        }
+
+        LargeCategoryTitle(
+            modifier = Modifier.padding(vertical = 6.dp),
+            text = stringResource(id = R.string.others)
+        )
+
+        Column(
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            PreConfiguredOutlinedTextField(
+                value = mutablePropertiesMap["COMMENT"],
+                label = stringResource(id = R.string.comment),
+                modifier = Modifier.fillMaxWidth(),
+                maxLines = 3
+            ) { comment ->
+                mutablePropertiesMap["COMMENT"] = comment
+            }
+        }
+    }
+}
+
+@Composable
+private fun LoadingState(modifier: Modifier = Modifier) {
+    Column(
+        modifier = modifier, verticalArrangement = Arrangement.spacedBy(
+            8.dp, alignment = Alignment.CenterVertically
+        ), horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = stringResource(id = R.string.loading_audio_information),
+            style = MaterialTheme.typography.bodyMedium,
+            fontWeight = FontWeight.SemiBold
+        )
+        LinearProgressIndicator(
+            modifier = Modifier.fillMaxWidth(0.7f)
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/rework/MetadataEditorVM.kt b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/rework/MetadataEditorVM.kt
new file mode 100644
index 0000000..b53bc3c
--- /dev/null
+++ b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/rework/MetadataEditorVM.kt
@@ -0,0 +1,343 @@
+package com.bobbyesp.metadator.presentation.pages.utilities.tageditor.rework
+
+import android.app.PendingIntent
+import android.app.RecoverableSecurityException
+import android.content.Context
+import android.net.Uri
+import android.os.Build
+import android.os.ParcelFileDescriptor
+import android.util.Log
+import androidx.compose.runtime.mutableStateMapOf
+import androidx.compose.runtime.snapshots.SnapshotStateMap
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.bobbyesp.utilities.ext.toModifiableMap
+import com.bobbyesp.utilities.mediastore.AudioFileMetadata.Companion.toAudioFileMetadata
+import com.bobbyesp.utilities.mediastore.AudioFileMetadata.Companion.toPropertyMap
+import com.bobbyesp.utilities.mediastore.MediaStoreReceiver
+import com.bobbyesp.utilities.states.ResourceState
+import com.bobbyesp.utilities.states.ScreenState
+import com.kyant.taglib.AudioProperties
+import com.kyant.taglib.AudioPropertiesReadStyle
+import com.kyant.taglib.Metadata
+import com.kyant.taglib.Picture
+import com.kyant.taglib.PropertyMap
+import com.kyant.taglib.TagLib
+import dagger.hilt.android.lifecycle.HiltViewModel
+import dagger.hilt.android.qualifiers.ApplicationContext
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
+import javax.inject.Inject
+
+@HiltViewModel
+class MetadataEditorVM @Inject constructor(
+    @ApplicationContext private val context: Context,
+) : ViewModel() {
+    private val mutableState = MutableStateFlow(PageViewState())
+    val state = mutableState.asStateFlow()
+
+    private val _eventFlow = MutableSharedFlow<UiEvent>()
+    val eventFlow = _eventFlow.asSharedFlow()
+
+    private var latestLoadedSongPath: String? = null
+
+    data class PageViewState(
+        val metadata: ResourceState<Metadata?> = ResourceState.Loading(),
+        val audioProperties: ResourceState<AudioProperties?> = ResourceState.Loading(),
+        val pageState: ScreenState<Nothing> = ScreenState.Loading,
+        val mutablePropertiesMap: SnapshotStateMap<String, String> = mutableStateMapOf()
+    )
+
+    suspend fun loadTrackMetadata(path: String) {
+        updateState(ScreenState.Loading)
+        mutableState.value.mutablePropertiesMap.clear()
+        runCatching {
+            MediaStoreReceiver.getFileDescriptorFromPath(context, path, mode = "r")?.use { songFd ->
+
+                val metadata = loadAudioMetadata(songFd)
+
+                val audioProperties = loadAudioProperties(songFd)
+
+                updateAudioInformation(metadata, audioProperties)
+            }
+        }.onFailure { error ->
+            Log.e(
+                "MetadataEditorVM",
+                "Error while trying to load the audio file: ${error.message}"
+            )
+            when (error) {
+                is NullAudioFileDescriptorException -> {
+                    if (error.isAudioProperties) mutableState.update {
+                        it.copy(
+                            audioProperties = ResourceState.Error(
+                                message = error.message ?: error.stackTrace.toString()
+                            )
+                        )
+                    } else {
+                        mutableState.update {
+                            it.copy(
+                                metadata = ResourceState.Error(
+                                    message = error.message ?: error.stackTrace.toString()
+                                )
+                            )
+                        }
+                    }
+                }
+
+                else -> {
+                    updateState(ScreenState.Error(error))
+                }
+            }
+            updateState(ScreenState.Error(error))
+        }.onSuccess {
+            updateState(ScreenState.Success(null))
+            mutableState.value.metadata.data?.propertyMap?.toModifiableMap()?.forEach {
+                mutableState.value.mutablePropertiesMap[it.key] = it.value ?: ""
+            }
+        }
+    }
+
+    suspend fun loadAudioMetadata(songFd: ParcelFileDescriptor): Metadata? {
+        val fd = songFd.dup()?.detachFd()
+            ?: throw NullAudioFileDescriptorException(isAudioProperties = false)
+
+        return withContext(Dispatchers.IO) {
+            TagLib.getMetadata(fd = fd)
+        }
+    }
+
+
+    suspend fun loadAudioProperties(
+        songFd: ParcelFileDescriptor,
+        readStyle: AudioPropertiesReadStyle = AudioPropertiesReadStyle.Average
+    ): AudioProperties? {
+        val fd = songFd.dup()?.detachFd()
+            ?: throw NullAudioFileDescriptorException(isAudioProperties = true)
+
+        return withContext(Dispatchers.IO) {
+            TagLib.getAudioProperties(
+                fd = fd,
+                readStyle = readStyle
+            )
+        }
+    }
+
+    fun savePropertyMap(
+        context: Context = this.context,
+        newPropertiesMap: PropertyMap = mutableState.value.mutablePropertiesMap.toAudioFileMetadata()
+            .toPropertyMap(),
+        audioPath: String,
+        intentPassthrough: (PendingIntent) -> Unit = {}
+    ): Boolean {
+        return try {
+            val fd = MediaStoreReceiver.getFileDescriptorFromPath(context, audioPath, mode = "w")
+                ?: throw NullAudioFileDescriptorException(isAudioProperties = false)
+
+            fd.dup().detachFd().let {
+                TagLib.savePropertyMap(
+                    it,
+                    propertyMap = newPropertiesMap
+                )
+            }
+
+            true
+        } catch (securityException: SecurityException) {
+            handleSecurityException(securityException, intentPassthrough)
+            false
+        } catch (e: Exception) {
+            mutableState.update {
+                it.copy(
+                    pageState = ScreenState.Error(e)
+                )
+            }
+            false
+        }
+    }
+
+    fun savePictures(
+        context: Context = this.context,
+        imagesUri: List<Uri> = emptyList(),
+        audioPath: String,
+        intentPassthrough: (PendingIntent) -> Unit
+    ): Boolean {
+        return try {
+            val fd = MediaStoreReceiver.getFileDescriptorFromPath(context, audioPath, mode = "w")
+                ?: throw NullAudioFileDescriptorException(isAudioProperties = false)
+
+            val mutablePicturesList = mutableListOf<Picture>()
+            fd.dup().detachFd().let {
+                imagesUri.forEachIndexed { index, imageUri ->
+                    val byteArray = context.contentResolver.openInputStream(imageUri)?.readBytes()
+                        ?: return@forEachIndexed
+                    val mimeType =
+                        context.contentResolver.getType(imageUri) ?: return@forEachIndexed
+                    val picture = Picture(
+                        data = byteArray,
+                        mimeType = mimeType,
+                        description = "Song image $index - Metadator",
+                        pictureType = "Cover (front)"
+                    )
+
+                    mutablePicturesList.add(picture)
+                }
+
+                TagLib.savePictures(
+                    it,
+                    pictures = mutablePicturesList.toTypedArray()
+                )
+            }
+            true
+        } catch (securityException: SecurityException) {
+            handleSecurityException(securityException, intentPassthrough)
+            false
+        } catch (e: Exception) {
+            mutableState.update {
+                it.copy(
+                    pageState = ScreenState.Error(e)
+                )
+            }
+            false
+        }
+    }
+
+    private fun savePictures(
+        context: Context = this.context,
+        imagesUri: List<Uri> = emptyList(),
+        fileDescriptorId: Int = -1
+    ): Boolean {
+
+        val mutablePicturesList = mutableListOf<Picture>()
+
+        imagesUri.forEachIndexed { index, uri ->
+            val byteArray = context.contentResolver.openInputStream(uri)?.readBytes()
+                ?: throw IllegalStateException("Image byte array is null")
+            val mimeType = context.contentResolver.getType(uri)
+                ?: throw IllegalStateException("Image mime type is null")
+
+            val picture = Picture(
+                data = byteArray,
+                mimeType = mimeType,
+                description = "Song cover - Metadator",
+                pictureType = "Cover (front)"
+            )
+
+            mutablePicturesList.add(picture)
+        }
+
+        kotlin.runCatching {
+            TagLib.savePictures(
+                fileDescriptorId,
+                pictures = mutablePicturesList.toTypedArray()
+            )
+        }.onFailure {
+            return false
+        }.onSuccess {
+            return true
+        }
+
+        return true
+    }
+
+    private fun handleSecurityException(
+        securityException: SecurityException,
+        intentPassthrough: (PendingIntent) -> Unit
+    ) {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+            val recoverableSecurityException = securityException as? RecoverableSecurityException
+                ?: throw RuntimeException(securityException.message, securityException)
+
+            intentPassthrough(recoverableSecurityException.userAction.actionIntent)
+        } else {
+            throw RuntimeException(securityException.message, securityException)
+        }
+    }
+
+
+    private fun updateAudioInformation(metadata: Metadata?, audioProperties: AudioProperties?) {
+        mutableState.update {
+            it.copy(
+                metadata = ResourceState.Success(metadata),
+                audioProperties = ResourceState.Success(audioProperties)
+            )
+        }
+    }
+
+    private fun updateState(state: ScreenState<Nothing>) {
+        mutableState.update {
+            it.copy(
+                pageState = state
+            )
+        }
+    }
+
+    fun emitUiEvent(event: UiEvent) {
+        viewModelScope.launch {
+            _eventFlow.emit(event)
+        }
+    }
+
+    fun onEvent(event: Event) {
+        when (event) {
+            is Event.LoadMetadata -> {
+                viewModelScope.launch {
+                    if (latestLoadedSongPath != event.path) {
+                        loadTrackMetadata(event.path)
+                        latestLoadedSongPath = event.path
+                    }
+                }
+            }
+
+            is Event.SaveProperties -> {
+                val succeeded = savePropertyMap(audioPath = event.path, intentPassthrough = {
+                    emitUiEvent(UiEvent.RequestPermission(it))
+                })
+
+                if (succeeded) {
+                    emitUiEvent(UiEvent.SaveSuccess)
+                }
+            }
+
+            is Event.SavePictures -> {
+                val succeeded = savePictures(
+                    imagesUri = event.imagesUri,
+                    audioPath = event.path,
+                    intentPassthrough = {
+                        emitUiEvent(UiEvent.RequestPermission(it))
+                    }
+                )
+
+                if (succeeded) {
+                    emitUiEvent(UiEvent.SaveSuccess)
+                }
+            }
+
+            is Event.SaveAll -> {
+                //TODO
+            }
+        }
+    }
+
+
+    companion object {
+        class NullAudioFileDescriptorException(val isAudioProperties: Boolean) :
+            Exception("Audio file descriptor is null")
+
+        interface Event {
+            data class LoadMetadata(val path: String) : Event
+            data class SaveAll(val path: String) : Event
+            data class SaveProperties(val path: String) : Event
+            data class SavePictures(val path: String, val imagesUri: List<Uri>) : Event
+        }
+
+        interface UiEvent {
+            data class RequestPermission(val intent: PendingIntent) : UiEvent
+            data object SaveSuccess : UiEvent
+        }
+    }
+}
\ 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 4eaea3a..a118540 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -68,5 +68,6 @@
     <string name="made_by">Made with 💖 by BobbyESP</string>
     <string name="appearance">Appearance</string>
     <string name="appearance_description">Customize how the app looks like</string>
+    <string name="loading_audio_information">Loading audio information</string>
 
 </resources>
\ No newline at end of file
diff --git a/app/ui/src/main/java/com/bobbyesp/ui/components/text/PreConfiguredOutlinedTextField.kt b/app/ui/src/main/java/com/bobbyesp/ui/components/text/PreConfiguredOutlinedTextField.kt
index f52294b..a605409 100644
--- a/app/ui/src/main/java/com/bobbyesp/ui/components/text/PreConfiguredOutlinedTextField.kt
+++ b/app/ui/src/main/java/com/bobbyesp/ui/components/text/PreConfiguredOutlinedTextField.kt
@@ -8,13 +8,13 @@ import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.rounded.Undo
+import androidx.compose.material.icons.rounded.Undo
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.SideEffect
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
@@ -35,16 +35,16 @@ fun PreConfiguredOutlinedTextField(
     minLines: Int = 1,
     returnModifiedValue: (String) -> Unit = {}
 ) {
-    val (text, setText) = rememberSaveableWithVolatileInitialValue(value)
-
-    SideEffect {
-        if (!text.isNullOrEmpty()) returnModifiedValue(text) else returnModifiedValue("")
-    }
+    val (text, setText) = rememberSaveableWithVolatileInitialValue(value ?: "")
+    val originalValue = remember { value ?: "" }
 
     OutlinedTextField(
         modifier = modifier,
-        value = text ?: "",
-        onValueChange = setText,
+        value = text,
+        onValueChange = { newValue ->
+            setText(newValue)
+            returnModifiedValue(newValue)
+        },
         label = { Text(text = label, maxLines = 1, overflow = TextOverflow.Ellipsis) },
         enabled = enabled,
         readOnly = readOnly,
@@ -55,22 +55,20 @@ fun PreConfiguredOutlinedTextField(
         minLines = minLines,
         trailingIcon = {
             AnimatedVisibility(
-                visible = text != value,
+                visible = text != originalValue,
                 enter = fadeIn() + slideInHorizontally(),
                 exit = fadeOut() + slideOutHorizontally()
             ) {
                 IconButton(onClick = {
-                    setText(value)
+                    setText(originalValue)
+                    returnModifiedValue(originalValue)
                 }) {
                     Icon(
-                        imageVector = Icons.AutoMirrored.Rounded.Undo,
-                        contentDescription = stringResource(
-                            id = R.string.undo
-                        )
+                        imageVector = Icons.Rounded.Undo,
+                        contentDescription = stringResource(id = R.string.undo)
                     )
                 }
             }
         }
     )
-
 }
\ No newline at end of file
diff --git a/app/ui/src/main/java/com/bobbyesp/ui/util/RememberSaveableWithInitialValue.kt b/app/ui/src/main/java/com/bobbyesp/ui/util/RememberSaveableWithInitialValue.kt
index a0cc35c..b7fde4f 100644
--- a/app/ui/src/main/java/com/bobbyesp/ui/util/RememberSaveableWithInitialValue.kt
+++ b/app/ui/src/main/java/com/bobbyesp/ui/util/RememberSaveableWithInitialValue.kt
@@ -4,6 +4,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.key
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.Saver
+import androidx.compose.runtime.saveable.autoSaver
 import androidx.compose.runtime.saveable.rememberSaveable
 
 /**
@@ -17,10 +19,11 @@ import androidx.compose.runtime.saveable.rememberSaveable
  */
 @Composable
 fun <T : Any?> rememberSaveableWithVolatileInitialValue(
-    initialValue: T?
+    initialValue: T?,
+    saver: Saver<T?, out Any> = autoSaver()
 ): MutableState<T?> {
     return key(initialValue) {
-        rememberSaveable {
+        rememberSaveable(stateSaver = saver) {
             mutableStateOf(initialValue)
         }
     }
@@ -38,10 +41,11 @@ fun <T : Any?> rememberSaveableWithVolatileInitialValue(
 @JvmName("rememberSaveableWithVolatileInitialValueNotNull")
 @Composable
 fun <T : Any> rememberSaveableWithVolatileInitialValue(
-    initialValue: T
+    initialValue: T,
+    saver: Saver<T, out Any> = autoSaver()
 ): MutableState<T> {
     return key(initialValue) {
-        rememberSaveable {
+        rememberSaveable(stateSaver = saver) {
             mutableStateOf(initialValue)
         }
     }
diff --git a/app/ui/src/main/java/com/bobbyesp/ui/util/Savers.kt b/app/ui/src/main/java/com/bobbyesp/ui/util/Savers.kt
new file mode 100644
index 0000000..05a2b6c
--- /dev/null
+++ b/app/ui/src/main/java/com/bobbyesp/ui/util/Savers.kt
@@ -0,0 +1,15 @@
+package com.bobbyesp.ui.util
+
+import androidx.compose.runtime.saveable.Saver
+import androidx.compose.runtime.saveable.SaverScope
+import androidx.compose.ui.text.input.TextFieldValue
+
+object TextFieldValueSaver : Saver<TextFieldValue, String> {
+    override fun restore(value: String): TextFieldValue {
+        return TextFieldValue(value)
+    }
+
+    override fun SaverScope.save(value: TextFieldValue): String {
+        return value.text
+    }
+}
\ No newline at end of file
diff --git a/app/utilities/src/main/java/com/bobbyesp/utilities/ext/PropertyMap.kt b/app/utilities/src/main/java/com/bobbyesp/utilities/ext/PropertyMap.kt
index 1527bb9..1d1653b 100644
--- a/app/utilities/src/main/java/com/bobbyesp/utilities/ext/PropertyMap.kt
+++ b/app/utilities/src/main/java/com/bobbyesp/utilities/ext/PropertyMap.kt
@@ -2,8 +2,18 @@ package com.bobbyesp.utilities.ext
 
 import com.bobbyesp.utilities.mediastore.AudioFileMetadata
 
+/**
+ * Type alias for a HashMap where the key is a String and the value is an Array of Strings.
+ * This is used to represent a map of properties where each property can have multiple values.
+ */
 typealias PropertyMap = HashMap<String, Array<String>>
 
+/**
+ * Extension function for PropertyMap to convert it to an AudioFileMetadata object.
+ *
+ * @param separator The separator to use when joining array elements into a single string. Default is ", ".
+ * @return An AudioFileMetadata object populated with values from the PropertyMap.
+ */
 fun PropertyMap.toAudioFileMetadata(separator: String = ", "): AudioFileMetadata {
     return AudioFileMetadata(
         title = this["TITLE"]?.getOrNull(0),
@@ -23,6 +33,12 @@ fun PropertyMap.toAudioFileMetadata(separator: String = ", "): AudioFileMetadata
     )
 }
 
+/**
+ * Extension function for PropertyMap to convert it to a modifiable map.
+ *
+ * @param separator The separator to use when joining array elements into a single string. Default is ", ".
+ * @return A MutableMap where the key is a String and the value is a nullable String.
+ */
 fun PropertyMap.toModifiableMap(separator: String = ", "): MutableMap<String, String?> {
     return mutableMapOf(
         "TITLE" to this["TITLE"]?.getOrNull(0),
diff --git a/app/utilities/src/main/java/com/bobbyesp/utilities/mediastore/AudioFileMetadata.kt b/app/utilities/src/main/java/com/bobbyesp/utilities/mediastore/AudioFileMetadata.kt
index e241c96..01ccd81 100644
--- a/app/utilities/src/main/java/com/bobbyesp/utilities/mediastore/AudioFileMetadata.kt
+++ b/app/utilities/src/main/java/com/bobbyesp/utilities/mediastore/AudioFileMetadata.kt
@@ -1,10 +1,12 @@
 package com.bobbyesp.utilities.mediastore
 
+import androidx.compose.runtime.Stable
 import com.bobbyesp.utilities.ext.PropertyMap
 import com.bobbyesp.utilities.ext.formatForField
 import kotlinx.serialization.Serializable
 
 @Serializable
+@Stable
 data class AudioFileMetadata(
     val title: String?,
     val artist: String?,
diff --git a/app/utilities/src/main/java/com/bobbyesp/utilities/states/ScreenState.kt b/app/utilities/src/main/java/com/bobbyesp/utilities/states/ScreenState.kt
index baf239e..1178dce 100644
--- a/app/utilities/src/main/java/com/bobbyesp/utilities/states/ScreenState.kt
+++ b/app/utilities/src/main/java/com/bobbyesp/utilities/states/ScreenState.kt
@@ -3,5 +3,5 @@ package com.bobbyesp.utilities.states
 sealed class ScreenState<out T> {
     data object Loading : ScreenState<Nothing>()
     data class Success<T>(val data: T?) : ScreenState<T>()
-    data class Error(val exception: Exception) : ScreenState<Nothing>()
+    data class Error(val exception: Throwable) : ScreenState<Nothing>()
 }
\ No newline at end of file
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 7990f2c..a06dbf5 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -67,7 +67,7 @@ firebaseBom = "33.1.2"
 spotify-apiHandler = "4.1.3"
 
 #Others
-taglib = "1.0.0-alpha17"
+taglib = "1.0.0-alpha18"
 qrcodeKotlinAndroid = "4.1.0"
 
 #Tests
@@ -230,7 +230,7 @@ google-gms = { id = "com.google.gms.google-services", version.ref = "googleServi
 core = ["core-ktx", "lifecycle-runtime-ktx", "lifecycle-compose-runtime", "lifecycle-compose-viewModel", "activity-compose", "core-appcompat", "core-splashscreen"]
 ktor = ["ktor-android", "ktor-okhttp" ,"ktor-core", "ktor-serialization", "ktor-logging", "ktor-contentnegotiation", "ktor-encoding"]
 accompanist = ["accompanist-navigation-animation", "accompanist-permissions", "accompanist-webview", "accompanist-pager-layouts", "accompanist-pager-indicators", "accompanist-flowlayout", "accompanist-material"]
-compose = ["compose-ui-util", "compose-graphics", "compose-runtime", "compose-foundation", "compose-material-iconsExtended", "compose-animation", "compose-ui", "compose-material", "compose-material3", "compose-navigation", "compose-material3-windowSizeClass", "compose-constraintLayout"]
+compose = ["compose-ui-util", "compose-graphics", "compose-runtime", "compose-foundation", "compose-material-iconsExtended", "compose-animation", "compose-ui", "compose-material3", "compose-navigation", "compose-material3-windowSizeClass", "compose-constraintLayout"]
 hilt = ["compose-hilt-navigation", "hilt-android"]
 pagination = ["paging-compose", "paging-runtime"]
 googleServices = ["firebase-auth", "gms-playservices-auth", "google-services"]