[optimize] Optimize the video list loading logic to avoid duplicate loading and list mixing

app/src/main/java/com/acitelight/aether/view/VideoScreen.kt

@@ -1,6 +1,5 @@
 package com.acitelight.aether.view
 
-import android.R.id.tabs
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -20,12 +19,7 @@ import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.PrimaryScrollableTabRow
 import androidx.compose.material3.Tab
-import androidx.compose.material3.TabRow
-import androidx.compose.material3.TabRowDefaults
-import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -39,19 +33,16 @@ import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import coil3.compose.AsyncImage
 import com.acitelight.aether.model.Video
-import com.acitelight.aether.service.MediaManager
 import com.acitelight.aether.viewModel.VideoScreenViewModel
-import androidx.compose.material3.PrimaryTabRow
 import androidx.compose.material3.ScrollableTabRow
-import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.navigation.NavHostController
 import coil3.request.ImageRequest
 import com.acitelight.aether.Global
-import kotlinx.coroutines.flow.first
 import java.nio.charset.Charset
 
 fun String.toHex(): String {
@@ -72,6 +63,7 @@ fun String.hexToString(charset: Charset = Charsets.UTF_8): String {
 @Composable
 fun VideoScreen(videoScreenViewModel: VideoScreenViewModel = viewModel(), navController: NavHostController)
 {
+    val tabIndex by videoScreenViewModel.tabIndex;
     videoScreenViewModel.SetupClient()
 
     Column(
@@ -86,8 +78,11 @@ fun VideoScreen(videoScreenViewModel: VideoScreenViewModel = viewModel(), navCon
             horizontalArrangement = Arrangement.spacedBy(8.dp)
         )
         {
-            items(videoScreenViewModel.videos) { video ->
+            if(videoScreenViewModel.classes.isNotEmpty())
-                VideoCard(video, navController, videoScreenViewModel)
+            {
+                items(videoScreenViewModel.classesMap[videoScreenViewModel.classes[tabIndex]] ?: mutableStateListOf()) { video ->
+                    VideoCard(video, navController, videoScreenViewModel)
+                }
             }
         }
     }
@@ -98,12 +93,11 @@ fun VideoScreen(videoScreenViewModel: VideoScreenViewModel = viewModel(), navCon
 fun TopRow(videoScreenViewModel: VideoScreenViewModel)
 {
     val tabIndex by videoScreenViewModel.tabIndex;
-    val klasses by videoScreenViewModel.klasses.collectAsState();
 
-    if(klasses.isEmpty()) return
+    if(videoScreenViewModel.classes.isEmpty()) return
 
     ScrollableTabRow (selectedTabIndex = tabIndex) {
-        klasses.forEachIndexed { index, title ->
+        videoScreenViewModel.classes.forEachIndexed { index, title ->
             Tab(
                 selected = tabIndex == index,
                 onClick = { videoScreenViewModel.setTabIndex(index)  },
@@ -115,13 +109,14 @@ fun TopRow(videoScreenViewModel: VideoScreenViewModel)
 
 @Composable
 fun VideoCard(video: Video, navController: NavHostController, videoScreenViewModel: VideoScreenViewModel) {
+    val tabIndex by videoScreenViewModel.tabIndex;
     Card(
         shape = RoundedCornerShape(6.dp),
         modifier = Modifier
             .fillMaxWidth()
             .wrapContentHeight(),
         onClick = {
-            Global.sameClassVideos = videoScreenViewModel.videos
+            Global.sameClassVideos = videoScreenViewModel.classesMap[videoScreenViewModel.classes[tabIndex]] ?: mutableStateListOf()
             val route = "video_player_route/${ "${video.klass}/${video.id}".toHex() }"
             navController.navigate(route)
         }

app/src/main/java/com/acitelight/aether/viewModel/VideoScreenViewModel.kt

@@ -3,51 +3,35 @@ package com.acitelight.aether.viewModel
 import android.app.Application
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
-import androidx.compose.runtime.collectAsState
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateMapOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.snapshots.SnapshotStateList
 import androidx.compose.ui.platform.LocalContext
 import androidx.datastore.preferences.core.stringPreferencesKey
 import androidx.lifecycle.AndroidViewModel
-import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import coil3.ImageLoader
 import coil3.network.okhttp.OkHttpNetworkFetcherFactory
-import com.acitelight.aether.Global
 import com.acitelight.aether.dataStore
 import com.acitelight.aether.model.Video
-import com.acitelight.aether.service.ApiClient
 import com.acitelight.aether.service.ApiClient.createOkHttp
-import com.acitelight.aether.service.AuthManager
 import com.acitelight.aether.service.MediaManager
 import kotlinx.coroutines.flow.Flow
-import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.launch
 
 class VideoScreenViewModel(application: Application) : AndroidViewModel(application)
 {
-    private val dataStore = application.dataStore
-    private val USER_NAME_KEY = stringPreferencesKey("user_name")
-    private val PRIVATE_KEY   = stringPreferencesKey("private_key")
-
-    val userNameFlow: Flow<String> = dataStore.data.map { preferences ->
-        preferences[USER_NAME_KEY] ?: ""
-    }
-
-    val privateKeyFlow: Flow<String> = dataStore.data.map {  preferences ->
-        preferences[PRIVATE_KEY] ?: ""
-    }
-
     private val _tabIndex = mutableIntStateOf(0)
     val tabIndex: State<Int> = _tabIndex
+    // val videos = mutableStateListOf<Video>()
+    // private val _klasses = MutableStateFlow<List<String>>(emptyList())
+    var classes = mutableStateListOf<String>()
+    val classesMap = mutableStateMapOf<String, SnapshotStateList<Video>>()
 
-    val videos = mutableStateListOf<Video>()
-    private val _klasses = MutableStateFlow<List<String>>(emptyList())
-    val klasses: StateFlow<List<String>> = _klasses;
     var imageLoader: ImageLoader? = null;
 
     @Composable
@@ -62,10 +46,14 @@ class VideoScreenViewModel(application: Application) : AndroidViewModel(applicat
     }
 
     suspend fun init() {
-        _klasses.value = MediaManager.listVideoKlasses()
+        classes.addAll(MediaManager.listVideoKlasses())
+        for(it in classes)
+        {
+            classesMap[it] = mutableStateListOf<Video>()
+        }
 
-        MediaManager.listVideos(_klasses.value.first()){
+        MediaManager.listVideos(classes[0]){
-            v -> if(0 == tabIndex.value && !videos.contains(v)) videos.add(videos.size, v)
+            v -> classesMap[classes[0]]?.add(v)
         }
     }
 
@@ -75,10 +63,9 @@ class VideoScreenViewModel(application: Application) : AndroidViewModel(applicat
         {
             _tabIndex.intValue = index;
 
-            videos.clear()
+            MediaManager.listVideos(classes[index])
-            MediaManager.listVideos(_klasses.value[index])
             {
-                v -> if(index == tabIndex.value) videos.add(videos.size, v)
+                v -> classesMap[classes[index]]?.add(v)
             }
         }
     }