From 484f158e17111b1cdea200f56ab40bb94e1445af Mon Sep 17 00:00:00 2001
From: acite <1498045907@qq.com>
Date: Mon, 25 Aug 2025 04:26:34 +0800
Subject: [PATCH] [add] Implement Bilibili style

---
 app/build.gradle.kts                          |   1 +
 .../main/java/com/acitelight/aether/Global.kt |   4 +-
 .../com/acitelight/aether/MainActivity.kt     |   4 +-
 .../java/com/acitelight/aether/model/Video.kt |   1 +
 .../aether/model/VideoQueryIndex.kt           |   9 +
 .../aether/service/RecentManager.kt           |  94 ++
 .../com/acitelight/aether/view/HomeScreen.kt  |  46 +-
 .../com/acitelight/aether/view/VideoPlayer.kt | 848 ++++++++++--------
 .../com/acitelight/aether/view/VideoScreen.kt |  59 +-
 .../aether/viewModel/HomeScreenViewModel.kt   |  62 +-
 .../aether/viewModel/VideoPlayerViewModel.kt  |  43 +-
 .../aether/viewModel/VideoScreenViewModel.kt  |  19 +-
 12 files changed, 766 insertions(+), 424 deletions(-)
 create mode 100644 app/src/main/java/com/acitelight/aether/model/VideoQueryIndex.kt
 create mode 100644 app/src/main/java/com/acitelight/aether/service/RecentManager.kt

diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 556cfc9..d9d08e4 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -2,6 +2,7 @@ plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.kotlin.android)
     alias(libs.plugins.kotlin.compose)
+    kotlin("plugin.serialization") version "1.9.0"
 }
 
 android {
diff --git a/app/src/main/java/com/acitelight/aether/Global.kt b/app/src/main/java/com/acitelight/aether/Global.kt
index 8ce306d..cd109f4 100644
--- a/app/src/main/java/com/acitelight/aether/Global.kt
+++ b/app/src/main/java/com/acitelight/aether/Global.kt
@@ -6,8 +6,6 @@ import androidx.compose.runtime.setValue
 import com.acitelight.aether.model.Video
 
 object Global {
-    var videoName: String = ""
-    var videoClass: String = ""
     var loggedIn by mutableStateOf(false)
-    var video: Video? = null
+    var sameClassVideos: List<Video>? = null
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/acitelight/aether/MainActivity.kt b/app/src/main/java/com/acitelight/aether/MainActivity.kt
index 213371d..02c02b9 100644
--- a/app/src/main/java/com/acitelight/aether/MainActivity.kt
+++ b/app/src/main/java/com/acitelight/aether/MainActivity.kt
@@ -116,7 +116,7 @@ fun AppNavigation() {
             modifier = if(shouldShowBottomBar)Modifier.padding(innerPadding) else Modifier.padding(0.dp)
         ) {
             composable(Screen.Home.route) {
-                HomeScreen()
+                HomeScreen(navController = navController)
             }
             composable(Screen.Video.route) {
                 VideoScreen(navController = navController)
@@ -159,8 +159,6 @@ fun BottomNavigationBar(navController: NavController) {
         Screen.Me
     ) else  listOf(
         Screen.Home,
-        Screen.Video,
-        Screen.Comic,
         Screen.Transmission,
         Screen.Me
     )
diff --git a/app/src/main/java/com/acitelight/aether/model/Video.kt b/app/src/main/java/com/acitelight/aether/model/Video.kt
index 5ab7ce4..66a8aa6 100644
--- a/app/src/main/java/com/acitelight/aether/model/Video.kt
+++ b/app/src/main/java/com/acitelight/aether/model/Video.kt
@@ -25,4 +25,5 @@ class Video constructor(
             KeyImage(url = "${ApiClient.base}api/video/$klass/$id/gallery/$it?token=$token", key = "$klass/$id/gallery/$it")
         }
     }
+
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/acitelight/aether/model/VideoQueryIndex.kt b/app/src/main/java/com/acitelight/aether/model/VideoQueryIndex.kt
new file mode 100644
index 0000000..236134a
--- /dev/null
+++ b/app/src/main/java/com/acitelight/aether/model/VideoQueryIndex.kt
@@ -0,0 +1,9 @@
+package com.acitelight.aether.model
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class VideoQueryIndex(
+    val klass: String,
+    val id: String
+)
diff --git a/app/src/main/java/com/acitelight/aether/service/RecentManager.kt b/app/src/main/java/com/acitelight/aether/service/RecentManager.kt
new file mode 100644
index 0000000..0a11269
--- /dev/null
+++ b/app/src/main/java/com/acitelight/aether/service/RecentManager.kt
@@ -0,0 +1,94 @@
+package com.acitelight.aether.service
+
+import android.content.Context
+import com.acitelight.aether.model.Video
+import com.acitelight.aether.model.VideoQueryIndex
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.sync.Mutex
+import kotlinx.coroutines.sync.withLock
+import kotlinx.coroutines.withContext
+import kotlinx.serialization.json.*
+import java.io.File
+import java.io.FileNotFoundException
+import java.io.IOException
+
+object RecentManager
+{
+    private val mutex = Mutex()
+
+    suspend fun readFile(context: Context, filename: String): String {
+        return withContext(Dispatchers.IO) {
+            try {
+                val file = File(context.filesDir, filename)
+                val content = file.readText()
+                content
+            } catch (e: FileNotFoundException) {
+                "[]"
+            } catch (e: IOException) {
+                "[]"
+            }
+        }
+    }
+
+    suspend fun writeFile(context: Context, filename: String, content: String) {
+        withContext(Dispatchers.IO) {
+            try {
+                val file = File(context.filesDir, filename)
+                file.writeText(content)
+
+            } catch (e: IOException) {
+                e.printStackTrace()
+            }
+        }
+    }
+
+    suspend fun Query(context: Context): List<VideoQueryIndex>
+    {
+        val content = readFile(context, "recent.json")
+        try{
+            val r = Json.decodeFromString<List<VideoQueryIndex>>(content)
+
+            _recent.value = r.map{
+                MediaManager.queryVideo(it.klass, it.id)
+            }
+            return r
+        }catch (e: Exception)
+        {
+            print(e.message)
+        }
+
+        return listOf()
+    }
+
+    suspend fun Push(context: Context, video: VideoQueryIndex)
+    {
+        mutex.withLock{
+            val content = readFile(context, "recent.json")
+            var o = Json.decodeFromString<List<VideoQueryIndex>>(content).toMutableList();
+
+            if(o.contains(video))
+            {
+                val temp = o[0]
+                val index = o.indexOf(video)
+                o[0] = o[index]
+                o[index] = temp
+            }
+            else
+            {
+                o.add(0, video)
+            }
+
+            if(o.size >= 21)
+                o.removeAt(o.size - 1)
+            _recent.value = o.map{
+                MediaManager.queryVideo(it.klass, it.id)
+            }
+            writeFile(context, "recent.json", Json.encodeToString(o))
+        }
+    }
+
+    private val _recent = MutableStateFlow<List<Video>>(emptyList())
+    val recent: StateFlow<List<Video>> = _recent
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/acitelight/aether/view/HomeScreen.kt b/app/src/main/java/com/acitelight/aether/view/HomeScreen.kt
index f20ecd1..d4cbc2f 100644
--- a/app/src/main/java/com/acitelight/aether/view/HomeScreen.kt
+++ b/app/src/main/java/com/acitelight/aether/view/HomeScreen.kt
@@ -4,20 +4,64 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.Button
+import androidx.compose.material3.DividerDefaults
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
 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
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import androidx.navigation.NavController
+import com.acitelight.aether.Global
+import com.acitelight.aether.service.RecentManager
 import com.acitelight.aether.viewModel.HomeScreenViewModel
 
 @Composable
-fun HomeScreen(homeScreenViewModel: HomeScreenViewModel = viewModel())
+fun HomeScreen(homeScreenViewModel: HomeScreenViewModel = viewModel(), navController: NavController)
 {
+    if(Global.loggedIn)
+        homeScreenViewModel.Init()
+    val recent by RecentManager.recent.collectAsState()
+
+    LazyColumn(modifier = Modifier.fillMaxWidth())
+    {
+        item()
+        {
+            Column {
+                Text(
+                    text = "Recent",
+                    style = MaterialTheme.typography.headlineMedium,
+                    modifier = Modifier.padding(16.dp).align(Alignment.Start)
+                )
+
+                HorizontalDivider(Modifier.padding(8.dp), 2.dp, DividerDefaults.color)
+
+                for(i in recent)
+                {
+                    MiniVideoCard(
+                        modifier = Modifier
+                            .padding(horizontal = 12.dp),
+                        i,
+                        {
+                            val route = "video_player_route/${ "${i.klass}/${i.id}".toHex() }"
+                            navController.navigate(route)
+                        })
+                    HorizontalDivider(Modifier.padding(vertical = 8.dp).alpha(0.25f), 1.dp, DividerDefaults.color)
+                }
+            }
+        }
+    }
 
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/acitelight/aether/view/VideoPlayer.kt b/app/src/main/java/com/acitelight/aether/view/VideoPlayer.kt
index 4f58433..a6fed4d 100644
--- a/app/src/main/java/com/acitelight/aether/view/VideoPlayer.kt
+++ b/app/src/main/java/com/acitelight/aether/view/VideoPlayer.kt
@@ -1,91 +1,56 @@
 package com.acitelight.aether.view
 
-import android.R
 import android.app.Activity
 import android.content.pm.ActivityInfo
 import android.content.res.Configuration
-import android.text.Layout
-import android.widget.Toast
 import androidx.activity.compose.BackHandler
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.animation.scaleIn
-import androidx.compose.animation.scaleOut
 import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.safeDrawing
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Pause
 import androidx.compose.material.icons.filled.PlayArrow
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.SegmentedButtonDefaults.Icon
 import androidx.compose.material3.Slider
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffect
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableLongStateOf
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
-import androidx.core.view.WindowCompat
-import androidx.core.view.WindowInsetsCompat
-import androidx.core.view.WindowInsetsControllerCompat
 import androidx.lifecycle.viewmodel.compose.viewModel
-import androidx.media3.common.MediaItem
-import androidx.media3.common.Player
 import androidx.media3.exoplayer.ExoPlayer
 import androidx.media3.ui.PlayerView
 import androidx.navigation.NavHostController
-import com.acitelight.aether.service.MediaManager
 import com.acitelight.aether.viewModel.VideoPlayerViewModel
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.gestures.detectDragGestures
 import androidx.compose.foundation.gestures.detectTapGestures
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.absoluteOffset
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.requiredWidthIn
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
-import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.FastForward
 import androidx.compose.material.icons.filled.Fullscreen
 import androidx.compose.material.icons.filled.Info
@@ -93,44 +58,42 @@ import androidx.compose.material.icons.filled.Share
 import androidx.compose.material.icons.filled.Star
 import androidx.compose.material.icons.filled.ThumbDown
 import androidx.compose.material.icons.filled.ThumbUp
-import androidx.compose.material3.Divider
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardColors
 import androidx.compose.material3.DividerDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.VerticalDivider
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.material3.Tab
 import androidx.compose.material3.TabRow
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.TransformOrigin
+import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
+import androidx.compose.ui.input.nestedscroll.NestedScrollSource
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.layout.ModifierLocalBeyondBoundsLayout
+import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.LineHeightStyle
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.tooling.preview.PreviewParameter
-import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import coil3.compose.AsyncImage
 import coil3.request.ImageRequest
-import com.acitelight.aether.BottomNavigationBar
 import com.acitelight.aether.Global
 import com.acitelight.aether.ToggleFullScreen
 import com.acitelight.aether.model.KeyImage
-import com.acitelight.aether.ui.theme.AetherTheme
-import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.TimeoutCancellationException
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.launch
-import kotlinx.coroutines.withTimeout
-import org.jetbrains.annotations.Async
-import java.nio.file.WatchEvent
+import com.acitelight.aether.model.Video
 
 fun formatTime(ms: Long): String {
     if (ms <= 0) return "00:00:00"
@@ -238,249 +201,303 @@ fun VideoPlayer(
     videoId: String,
     navController: NavHostController
 ) {
-    videoPlayerViewModel.Init(videoId);
-    videoPlayerViewModel.startListen()
+    videoPlayerViewModel.Init(videoId)
 
-    if (isLandscape()) {
-        VideoPlayerLandscape(videoPlayerViewModel)
-    }
-    else
+    if(videoPlayerViewModel.startPlaying)
     {
-        VideoPlayerPortal(videoPlayerViewModel, navController)
+        if (isLandscape()) {
+            VideoPlayerLandscape(videoPlayerViewModel)
+        }
+        else
+        {
+            VideoPlayerPortal(videoPlayerViewModel, navController)
+        }
     }
 }
 
 @Composable
-fun VideoPlayerPortal(videoPlayerViewModel: VideoPlayerViewModel, navController: NavHostController?) {
+fun PortalCorePlayer(modifier: Modifier, videoPlayerViewModel: VideoPlayerViewModel, cover: Float)
+{
+    val exoPlayer: ExoPlayer = videoPlayerViewModel._player!!;
     val context = LocalContext.current
     val activity = context as? Activity
-    val exoPlayer: ExoPlayer = videoPlayerViewModel._player!!;
-    val configuration = LocalConfiguration.current
-    val screenHeight = configuration.screenHeightDp.dp;
 
-    ToggleFullScreen(false)
-    Column()
+    Box(modifier)
     {
-        Box(modifier = Modifier.padding(top = 42.dp).heightIn(max = screenHeight * 0.65f))
-        {
-            AndroidView(
-                factory = {
-                    PlayerView(
-                        it
-                    ).apply {
-                        player = exoPlayer
-                        useController = false
-                    }
-                },
-                modifier = Modifier
-                    .align(Alignment.TopCenter)
-                    .fillMaxWidth()
-                    .pointerInput(Unit) {
-                        detectDragGestures(
-                            onDragStart = {
-                                videoPlayerViewModel.dragging = true
-                                videoPlayerViewModel.planeVisibility = true
-                                exoPlayer.pause()
-                            },
-                            onDragEnd = {
-                                videoPlayerViewModel.dragging = false
-                                if (videoPlayerViewModel.isPlaying)
-                                    exoPlayer.play()
-                            },
-                            onDrag = { change, dragAmount ->
-                                exoPlayer.seekTo((exoPlayer.currentPosition + dragAmount.x * 200.0f).toLong())
-                                videoPlayerViewModel.playProcess = exoPlayer.currentPosition.toFloat() / exoPlayer.duration.toFloat()
-                            }
-                        )
-                    }
-                    .pointerInput(Unit) {
-                        detectTapGestures(
-                            onDoubleTap = {
-                                videoPlayerViewModel.isPlaying = !videoPlayerViewModel.isPlaying
-                                if (videoPlayerViewModel.isPlaying) exoPlayer.play() else exoPlayer.pause()
-                            },
-                            onTap = {
-                                videoPlayerViewModel.planeVisibility =
-                                    !videoPlayerViewModel.planeVisibility
-                            },
-                            onLongPress = {
-                                videoPlayerViewModel.isLongPressing = true
-                                exoPlayer.playbackParameters = exoPlayer.playbackParameters
-                                    .withSpeed(3.0f)
-                            },
-                            onPress = { offset ->
-                                val pressResult = tryAwaitRelease()
-                                if (pressResult && videoPlayerViewModel.isLongPressing) {
-                                    videoPlayerViewModel.isLongPressing = false
-                                    exoPlayer.playbackParameters = exoPlayer.playbackParameters
-                                        .withSpeed(1.0f)
-                                }
-                            },
-                        )
-                    }
-            )
-
-            androidx.compose.animation.AnimatedVisibility(
-                visible = videoPlayerViewModel.isLongPressing,
-                enter = slideInVertically(initialOffsetY = { fullHeight -> -fullHeight }),
-                exit = slideOutVertically(targetOffsetY = { fullHeight -> -fullHeight }),
-                modifier = Modifier
-                    .align(Alignment.TopCenter)
-            )
-            {
-                Box(modifier = Modifier.align(Alignment.TopCenter).padding(top = 24.dp).background(Color(0x44000000), RoundedCornerShape(18)))
-                {
-                    Row{
-                        Icon(
-                            imageVector = Icons.Filled.FastForward,
-                            contentDescription = "Fast Forward",
-                            tint = Color.White,
-                            modifier = Modifier.size(36.dp).padding(4.dp).align(Alignment.CenterVertically)
-                        )
-
-                        Text(
-                            text = "3X Speed...",
-                            modifier = Modifier.padding(4.dp).align(Alignment.CenterVertically),
-                            fontSize = 16.sp,
-                            fontWeight = FontWeight.Bold,
-                            color = Color(0xFFFFFFFF)
-                        )
-                    }
+        AndroidView(
+            factory = {
+                PlayerView(
+                    it
+                ).apply {
+                    player = exoPlayer
+                    useController = false
                 }
-            }
-
-            IconButton(
-                onClick = { navController?.popBackStack() },
-                modifier = Modifier
-                    .padding(8.dp)
-                    .align(Alignment.TopStart)
-            ) {
-                Icon(
-                    imageVector = Icons.AutoMirrored.Filled.ArrowBack,
-                    contentDescription = "Back",
-                    tint = Color.White
-                )
-            }
-
-            androidx.compose.animation.AnimatedVisibility(
-                visible = videoPlayerViewModel.dragging,
-                enter = fadeIn(
-                    initialAlpha = 0f,
-                ),
-                exit = fadeOut(
-                    targetAlpha = 0f
-                ),
-                modifier = Modifier.align(Alignment.Center)
-            ) {
-                Text(
-                    text = "${formatTime((exoPlayer.duration * videoPlayerViewModel.playProcess).toLong())}/${
-                        formatTime(
-                            (exoPlayer.duration).toLong()
-                        )
-                    }",
-                    fontWeight = FontWeight.Bold,
-                    modifier = Modifier
-                        .padding(bottom = 12.dp),
-                    fontSize = 18.sp
-                )
-            }
-
-            androidx.compose.animation.AnimatedVisibility(
-                visible = !videoPlayerViewModel.planeVisibility,
-                enter = fadeIn(
-                    initialAlpha = 0f,
-                ),
-                exit = fadeOut(
-                    targetAlpha = 0f
-                ),
-                modifier = Modifier.fillMaxWidth().align(Alignment.BottomCenter)
-            ) {
-                BiliMiniSlider(
-                    value = videoPlayerViewModel.playProcess,
-                    onValueChange = {},
-                    modifier = Modifier
-                        .height(4.dp)
-                        .align(Alignment.BottomCenter)
-                )
-            }
-
-            androidx.compose.animation.AnimatedVisibility(
-                visible = videoPlayerViewModel.planeVisibility,
-                enter = fadeIn(
-                    initialAlpha = 0f,
-                ),
-                exit = fadeOut(
-                    targetAlpha = 0f
-                ),
-                modifier = Modifier.fillMaxWidth().align(Alignment.BottomCenter)
-            )
-            {
-                Row(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(horizontal = 2.dp)
-                        .align(Alignment.BottomCenter),
-                    horizontalArrangement = Arrangement.SpaceBetween,
-                ) {
-                    IconButton(
-                        onClick = {
+            },
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .fillMaxWidth()
+                .pointerInput(Unit) {
+                    detectDragGestures(
+                        onDragStart = {
+                            videoPlayerViewModel.dragging = true
+                            videoPlayerViewModel.planeVisibility = true
+                            exoPlayer.pause()
+                        },
+                        onDragEnd = {
+                            videoPlayerViewModel.dragging = false
+                            if (videoPlayerViewModel.isPlaying)
+                                exoPlayer.play()
+                        },
+                        onDrag = { change, dragAmount ->
+                            exoPlayer.seekTo((exoPlayer.currentPosition + dragAmount.x * 200.0f).toLong())
+                            videoPlayerViewModel.playProcess = exoPlayer.currentPosition.toFloat() / exoPlayer.duration.toFloat()
+                        }
+                    )
+                }
+                .pointerInput(Unit) {
+                    detectTapGestures(
+                        onDoubleTap = {
                             videoPlayerViewModel.isPlaying = !videoPlayerViewModel.isPlaying
                             if (videoPlayerViewModel.isPlaying) exoPlayer.play() else exoPlayer.pause()
                         },
-                        Modifier
-                            .size(36.dp)
-                            .align(Alignment.CenterVertically)
-                    ) {
-                        Icon(
-                            imageVector = if (videoPlayerViewModel.isPlaying) Icons.Default.Pause else Icons.Default.PlayArrow,
-                            contentDescription = "Play/Pause",
-                            tint = Color.White,
-                            modifier = Modifier.size(32.dp)
-                        )
-                    }
-
-                    BiliStyleSlider(
-                        value = videoPlayerViewModel.playProcess,
-                        onValueChange = { value ->
-                            exoPlayer.seekTo((exoPlayer.duration * value).toLong())
+                        onTap = {
+                            videoPlayerViewModel.planeVisibility =
+                                !videoPlayerViewModel.planeVisibility
                         },
-                        modifier = Modifier
-                            .height(8.dp)
-                            .align(Alignment.CenterVertically)
-                            .weight(1f)
+                        onLongPress = {
+                            videoPlayerViewModel.isLongPressing = true
+                            exoPlayer.playbackParameters = exoPlayer.playbackParameters
+                                .withSpeed(3.0f)
+                        },
+                        onPress = { offset ->
+                            val pressResult = tryAwaitRelease()
+                            if (pressResult && videoPlayerViewModel.isLongPressing) {
+                                videoPlayerViewModel.isLongPressing = false
+                                exoPlayer.playbackParameters = exoPlayer.playbackParameters
+                                    .withSpeed(1.0f)
+                            }
+                        },
+                    )
+                }
+        )
+
+        androidx.compose.animation.AnimatedVisibility(
+            visible = videoPlayerViewModel.isLongPressing,
+            enter = slideInVertically(initialOffsetY = { fullHeight -> -fullHeight }),
+            exit = slideOutVertically(targetOffsetY = { fullHeight -> -fullHeight }),
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+        )
+        {
+            Box(modifier = Modifier.align(Alignment.TopCenter).padding(top = 24.dp).background(Color(0x44000000), RoundedCornerShape(18)))
+            {
+                Row{
+                    Icon(
+                        imageVector = Icons.Filled.FastForward,
+                        contentDescription = "Fast Forward",
+                        tint = Color.White,
+                        modifier = Modifier.size(36.dp).padding(4.dp).align(Alignment.CenterVertically)
                     )
 
                     Text(
-                        text = formatTime((exoPlayer.duration * videoPlayerViewModel.playProcess).toLong()),
-                        maxLines = 1,
-                        fontSize = 12.sp,
-                        color = Color(0xFFFFFFFF),
+                        text = "3X Speed...",
+                        modifier = Modifier.padding(4.dp).align(Alignment.CenterVertically),
+                        fontSize = 16.sp,
                         fontWeight = FontWeight.Bold,
-                        modifier = Modifier
-                            .width(80.dp)
-                            .align(Alignment.CenterVertically)
-                            .padding(start = 12.dp)
+                        color = Color(0xFFFFFFFF)
                     )
-
-                    IconButton(
-                        onClick = {
-                            activity?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
-                        },
-                        Modifier
-                            .size(36.dp)
-                            .align(Alignment.CenterVertically)
-                    ) {
-                        Icon(
-                            imageVector = Icons.Default.Fullscreen,
-                            contentDescription = "Fullscreen",
-                            tint = Color.White,
-                            modifier = Modifier.size(32.dp)
-                        )
-                    }
                 }
             }
         }
 
+        androidx.compose.animation.AnimatedVisibility(
+            visible = videoPlayerViewModel.dragging,
+            enter = fadeIn(
+                initialAlpha = 0f,
+            ),
+            exit = fadeOut(
+                targetAlpha = 0f
+            ),
+            modifier = Modifier.align(Alignment.Center)
+        ) {
+            Text(
+                text = "${formatTime((exoPlayer.duration * videoPlayerViewModel.playProcess).toLong())}/${
+                    formatTime(
+                        (exoPlayer.duration).toLong()
+                    )
+                }",
+                fontWeight = FontWeight.Bold,
+                modifier = Modifier
+                    .padding(bottom = 12.dp),
+                fontSize = 18.sp
+            )
+        }
+
+        if(cover > 0.0f)
+            Spacer(Modifier.background(Color(0x00FF6699 - 0x00222222 + ((0x000000FF * cover).toLong() shl 24) )).fillMaxSize())
+
+        androidx.compose.animation.AnimatedVisibility(
+            visible = !videoPlayerViewModel.planeVisibility,
+            enter = fadeIn(
+                initialAlpha = 0f,
+            ),
+            exit = fadeOut(
+                targetAlpha = 0f
+            ),
+            modifier = Modifier.fillMaxWidth().align(Alignment.BottomCenter)
+        ) {
+            BiliMiniSlider(
+                value = videoPlayerViewModel.playProcess,
+                onValueChange = {},
+                modifier = Modifier
+                    .height(4.dp)
+                    .align(Alignment.BottomCenter)
+            )
+        }
+
+        androidx.compose.animation.AnimatedVisibility(
+            visible = videoPlayerViewModel.planeVisibility,
+            enter = fadeIn(
+                initialAlpha = 0f,
+            ),
+            exit = fadeOut(
+                targetAlpha = 0f
+            ),
+            modifier = Modifier.fillMaxWidth().align(Alignment.BottomCenter).height(42.dp)
+        )
+        {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 2.dp)
+                    .align(Alignment.BottomCenter),
+                horizontalArrangement = Arrangement.SpaceBetween,
+            ) {
+                IconButton(
+                    onClick = {
+                        videoPlayerViewModel.isPlaying = !videoPlayerViewModel.isPlaying
+                        if (videoPlayerViewModel.isPlaying) exoPlayer.play() else exoPlayer.pause()
+                    },
+                    Modifier
+                        .size(36.dp)
+                        .align(Alignment.CenterVertically)
+                ) {
+                    Icon(
+                        imageVector = if (videoPlayerViewModel.isPlaying) Icons.Default.Pause else Icons.Default.PlayArrow,
+                        contentDescription = "Play/Pause",
+                        tint = Color.White,
+                        modifier = Modifier.size(32.dp)
+                    )
+                }
+
+                BiliStyleSlider(
+                    value = videoPlayerViewModel.playProcess,
+                    onValueChange = { value ->
+                        exoPlayer.seekTo((exoPlayer.duration * value).toLong())
+                    },
+                    modifier = Modifier
+                        .height(8.dp)
+                        .align(Alignment.CenterVertically)
+                        .weight(1f)
+                )
+
+                Text(
+                    text = formatTime((exoPlayer.duration * videoPlayerViewModel.playProcess).toLong()),
+                    maxLines = 1,
+                    fontSize = 12.sp,
+                    color = Color(0xFFFFFFFF),
+                    fontWeight = FontWeight.Bold,
+                    modifier = Modifier
+                        .width(80.dp)
+                        .align(Alignment.CenterVertically)
+                        .padding(start = 12.dp)
+                )
+
+                IconButton(
+                    onClick = {
+                        activity?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
+                    },
+                    Modifier
+                        .size(36.dp)
+                        .align(Alignment.CenterVertically)
+                ) {
+                    Icon(
+                        imageVector = Icons.Default.Fullscreen,
+                        contentDescription = "Fullscreen",
+                        tint = Color.White,
+                        modifier = Modifier.size(32.dp)
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun VideoPlayerPortal(videoPlayerViewModel: VideoPlayerViewModel, navController: NavHostController)
+{
+    val configuration = LocalConfiguration.current
+    val screenHeight = configuration.screenHeightDp.dp;
+
+    val minHeight = 42.dp
+    var coverAlpha by remember{ mutableFloatStateOf(0.0f) }
+    var maxHeight = remember { screenHeight * 0.65f }
+    var posed = remember { false }
+    val dens = LocalDensity.current
+    val listState = rememberLazyListState()
+
+    var playerHeight by remember { mutableStateOf(screenHeight * 0.65f) }
+
+    val nestedScrollConnection = remember {
+        object : NestedScrollConnection {
+            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
+                val deltaY = available.y // px
+                val deltaDp = with(dens) { deltaY.toDp() }
+
+                val r = if (deltaY < 0 && playerHeight > minHeight) {
+                    val newHeight = (playerHeight + deltaDp).coerceIn(minHeight, maxHeight)
+                    val consumedDp = newHeight - playerHeight
+                    playerHeight = newHeight
+                    val consumedPx = with(dens) { consumedDp.toPx() }
+                    Offset(0f, consumedPx)
+                } else if(deltaY > 0 && playerHeight < maxHeight && listState.firstVisibleItemIndex == 0 && listState.firstVisibleItemScrollOffset == 0) {
+                    val newHeight = (playerHeight + deltaDp).coerceIn(minHeight, maxHeight)
+                    val consumedDp = newHeight - playerHeight
+                    playerHeight = newHeight
+                    val consumedPx = with(dens) { consumedDp.toPx() }
+                    Offset(0f, consumedPx)
+                } else {
+                    Offset.Zero
+                }
+
+                val dh = playerHeight - minHeight;
+                coverAlpha = (if(dh > 10.dp)
+                    0f
+                else
+                    (10.dp.value - dh.value) / 10.0f)
+
+                return r
+            }
+        }
+    }
+
+    ToggleFullScreen(false)
+    Column(Modifier.nestedScroll(nestedScrollConnection).fillMaxHeight())
+    {
+        PortalCorePlayer(
+            Modifier
+                .padding(top = 42.dp)
+                .heightIn(max = playerHeight)
+                .onGloballyPositioned { layoutCoordinates ->
+                    if(!posed && videoPlayerViewModel.renderedFirst)
+                    {
+                        maxHeight = with(dens) {layoutCoordinates.size.height.toDp()}
+                        playerHeight = maxHeight
+                        posed = true
+                    }
+                },
+            videoPlayerViewModel = videoPlayerViewModel, coverAlpha)
+
         Row()
         {
             TabRow (
@@ -503,13 +520,13 @@ fun VideoPlayerPortal(videoPlayerViewModel: VideoPlayerViewModel, navController:
             }
         }
 
-        LazyColumn( modifier = Modifier.fillMaxWidth()) {
+        LazyColumn(state = listState, modifier = Modifier.fillMaxWidth()) {
             item{
                 HorizontalDivider(Modifier, 2.dp, DividerDefaults.color)
 
                 Text(
                     modifier = Modifier.align(Alignment.Start).padding(horizontal = 12.dp).padding(top = 12.dp),
-                    text = Global.videoName,
+                    text = videoPlayerViewModel.video?.video?.name ?: "",
                     fontSize = 16.sp,
                     maxLines = 2,
                     fontWeight = FontWeight.Bold,
@@ -518,7 +535,7 @@ fun VideoPlayerPortal(videoPlayerViewModel: VideoPlayerViewModel, navController:
                 Row(Modifier.align(Alignment.Start).padding(horizontal = 4.dp).alpha(0.5f)) {
                     Text(
                         modifier = Modifier.padding(horizontal = 8.dp),
-                        text = Global.videoClass,
+                        text = videoPlayerViewModel.video?.klass ?: "",
                         fontSize = 14.sp,
                         maxLines = 1,
                         fontWeight = FontWeight.Bold,
@@ -526,7 +543,7 @@ fun VideoPlayerPortal(videoPlayerViewModel: VideoPlayerViewModel, navController:
 
                     Text(
                         modifier = Modifier.padding(horizontal = 8.dp),
-                        text = formatTime(Global.video?.video?.duration ?: 0),
+                        text = formatTime(videoPlayerViewModel.video?.video?.duration ?: 0),
                         fontSize = 14.sp,
                         maxLines = 1,
                         fontWeight = FontWeight.Bold,
@@ -535,114 +552,137 @@ fun VideoPlayerPortal(videoPlayerViewModel: VideoPlayerViewModel, navController:
 
                 HorizontalDivider(Modifier.padding(vertical = 8.dp), 1.dp, DividerDefaults.color)
 
-                Row(
-                    horizontalArrangement = Arrangement.Center,
-                    modifier = Modifier.align(Alignment.CenterHorizontally)
-                )
-                {
-                    Column(modifier = Modifier.padding(horizontal = 12.dp)) {
-                        IconButton(
-                            onClick = {  },
-                            modifier = Modifier.padding(horizontal = 4.dp).align(Alignment.CenterHorizontally).size(36.dp),
-                        ) {
-                            Icon(
-                                modifier = Modifier.size(28.dp),
-                                imageVector = Icons.Filled.ThumbUp,
-                                contentDescription = "ThumbUp",
-                                tint = Color.Gray
-                            )
-                        }
+                SocialPanel(Modifier.align(Alignment.CenterHorizontally).fillMaxWidth(), videoPlayerViewModel = videoPlayerViewModel)
 
-                        Text(
-                            modifier = Modifier.align(Alignment.CenterHorizontally),
-                            text = videoPlayerViewModel.thumbUp.toString(),
-                            fontSize = 12.sp,
-                            maxLines = 1,
-                            fontWeight = FontWeight.Bold)
-                    }
-
-                    Column(modifier = Modifier.padding(horizontal = 12.dp)) {
-                        IconButton(
-                            onClick = {  },
-                            modifier = Modifier.padding(horizontal = 4.dp).align(Alignment.CenterHorizontally).size(36.dp),
-                        ) {
-                            Icon(
-                                modifier = Modifier.size(28.dp),
-                                imageVector = Icons.Filled.ThumbDown,
-                                contentDescription = "ThumbDown",
-                                tint = Color.Gray
-                            )
-                        }
-
-                        Text(
-                            modifier = Modifier.align(Alignment.CenterHorizontally),
-                            text = videoPlayerViewModel.thumbDown.toString(),
-                            fontSize = 12.sp,
-                            maxLines = 1,
-                            fontWeight = FontWeight.Bold)
-                    }
-
-                    Column(modifier = Modifier.padding(horizontal = 12.dp)) {
-                        IconButton(
-                            onClick = { videoPlayerViewModel.star = !videoPlayerViewModel.star  },
-                            modifier = Modifier.padding(horizontal = 4.dp).align(Alignment.CenterHorizontally).size(36.dp),
-                        ) {
-                            Icon(
-                                modifier = Modifier.size(28.dp),
-                                imageVector = Icons.Filled.Star,
-                                contentDescription = "Star",
-                                tint = if(videoPlayerViewModel.star) Color(0xFFFF6699) else Color.Gray
-                            )
-                        }
-                    }
-
-                    Column(modifier = Modifier.padding(horizontal = 12.dp)) {
-                        IconButton(
-                            onClick = { },
-                            modifier = Modifier.padding(horizontal = 4.dp).align(Alignment.CenterHorizontally).size(36.dp),
-                        ) {
-                            Icon(
-                                modifier = Modifier.size(28.dp),
-                                imageVector = Icons.Filled.Share,
-                                contentDescription = "Forward",
-                                tint = Color.Gray
-                            )
-                        }
-                    }
-
-                    Column(modifier = Modifier.padding(horizontal = 12.dp)) {
-                        IconButton(
-                            onClick = { },
-                            modifier = Modifier.padding(horizontal = 4.dp).align(Alignment.CenterHorizontally).size(36.dp),
-                        ) {
-                            Icon(
-                                modifier = Modifier.size(28.dp),
-                                imageVector = Icons.Filled.Info,
-                                contentDescription = "Detail",
-                                tint = Color.Gray
-                            )
-                        }
-                    }
-                }
-
-                Spacer(modifier = Modifier.height(16.dp))
-
-                HorizontalGallery()
                 HorizontalDivider(Modifier.padding(vertical = 8.dp), 1.dp, DividerDefaults.color)
+
+                HorizontalGallery(videoPlayerViewModel)
+                HorizontalDivider(Modifier.padding(vertical = 8.dp), 1.dp, DividerDefaults.color)
+
+                for(i in Global.sameClassVideos ?: listOf())
+                {
+                    if(i.id == videoPlayerViewModel.video?.id) continue
+
+                    MiniVideoCard(
+                        modifier = Modifier
+                            .padding(horizontal = 12.dp),
+                        i,
+                        {
+                            videoPlayerViewModel.isPlaying = false
+                            videoPlayerViewModel._player?.pause()
+                            val route = "video_player_route/${ "${i.klass}/${i.id}".toHex() }"
+                            navController.navigate(route)
+                        })
+                    HorizontalDivider(Modifier.padding(vertical = 8.dp).alpha(0.25f), 1.dp, DividerDefaults.color)
+                }
             }
         }
     }
 }
 
 @Composable
-fun HorizontalGallery()
+fun SocialPanel(modifier: Modifier, videoPlayerViewModel: VideoPlayerViewModel)
+{
+    Row(
+        modifier,
+        horizontalArrangement = Arrangement.Center
+    )
+    {
+        Column(modifier = Modifier.padding(horizontal = 12.dp)) {
+            IconButton(
+                onClick = {  },
+                modifier = Modifier.padding(horizontal = 4.dp).align(Alignment.CenterHorizontally).size(36.dp),
+            ) {
+                Icon(
+                    modifier = Modifier.size(28.dp),
+                    imageVector = Icons.Filled.ThumbUp,
+                    contentDescription = "ThumbUp",
+                    tint = Color.Gray
+                )
+            }
+
+            Text(
+                modifier = Modifier.align(Alignment.CenterHorizontally),
+                text = videoPlayerViewModel.thumbUp.toString(),
+                fontSize = 12.sp,
+                maxLines = 1,
+                fontWeight = FontWeight.Bold)
+        }
+
+        Column(modifier = Modifier.padding(horizontal = 12.dp)) {
+            IconButton(
+                onClick = {  },
+                modifier = Modifier.padding(horizontal = 4.dp).align(Alignment.CenterHorizontally).size(36.dp),
+            ) {
+                Icon(
+                    modifier = Modifier.size(28.dp),
+                    imageVector = Icons.Filled.ThumbDown,
+                    contentDescription = "ThumbDown",
+                    tint = Color.Gray
+                )
+            }
+
+            Text(
+                modifier = Modifier.align(Alignment.CenterHorizontally),
+                text = videoPlayerViewModel.thumbDown.toString(),
+                fontSize = 12.sp,
+                maxLines = 1,
+                fontWeight = FontWeight.Bold)
+        }
+
+        Column(modifier = Modifier.padding(horizontal = 12.dp)) {
+            IconButton(
+                onClick = { videoPlayerViewModel.star = !videoPlayerViewModel.star  },
+                modifier = Modifier.padding(horizontal = 4.dp).align(Alignment.CenterHorizontally).size(36.dp),
+            ) {
+                Icon(
+                    modifier = Modifier.size(28.dp),
+                    imageVector = Icons.Filled.Star,
+                    contentDescription = "Star",
+                    tint = if(videoPlayerViewModel.star) Color(0xFFFF6699) else Color.Gray
+                )
+            }
+        }
+
+        Column(modifier = Modifier.padding(horizontal = 12.dp)) {
+            IconButton(
+                onClick = { },
+                modifier = Modifier.padding(horizontal = 4.dp).align(Alignment.CenterHorizontally).size(36.dp),
+            ) {
+                Icon(
+                    modifier = Modifier.size(28.dp),
+                    imageVector = Icons.Filled.Share,
+                    contentDescription = "Forward",
+                    tint = Color.Gray
+                )
+            }
+        }
+
+        Column(modifier = Modifier.padding(horizontal = 12.dp)) {
+            IconButton(
+                onClick = { },
+                modifier = Modifier.padding(horizontal = 4.dp).align(Alignment.CenterHorizontally).size(36.dp),
+            ) {
+                Icon(
+                    modifier = Modifier.size(28.dp),
+                    imageVector = Icons.Filled.Info,
+                    contentDescription = "Detail",
+                    tint = Color.Gray
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun HorizontalGallery(videoPlayerViewModel: VideoPlayerViewModel)
 {
     LazyRow(
-        modifier = Modifier.fillMaxWidth().height(100.dp),
+        modifier = Modifier.fillMaxWidth().height(120.dp),
         horizontalArrangement = Arrangement.spacedBy(12.dp),
         contentPadding = PaddingValues(horizontal = 24.dp)
     ) {
-        items(Global.video?.getGallery() ?: listOf()) { it ->
+        items(videoPlayerViewModel.video?.getGallery() ?: listOf()) { it ->
             SingleImageItem(img = it)
         }
     }
@@ -659,7 +699,7 @@ fun SingleImageItem(img: KeyImage) {
         contentDescription = null,
         modifier = Modifier
             .fillMaxWidth()
-            .clip(RoundedCornerShape(8.dp)),
+            .clip(RoundedCornerShape(12.dp)),
         contentScale = ContentScale.Crop
     )
 }
@@ -866,4 +906,68 @@ fun VideoPlayerLandscape(videoPlayerViewModel: VideoPlayerViewModel)
             }
         }
     }
+}
+
+@Composable
+fun MiniVideoCard(modifier: Modifier, video: Video, onClick: () -> Unit)
+{
+    Card(
+        modifier = modifier.height(80.dp).fillMaxWidth(),
+        colors = CardColors(
+            containerColor = Color.Transparent,
+            contentColor = MaterialTheme.colorScheme.onSurface,
+            disabledContentColor = Color.Transparent,
+            disabledContainerColor = Color.Transparent
+        ),
+        onClick = onClick
+    )
+    {
+        Row()
+        {
+            AsyncImage(
+                model = ImageRequest.Builder(LocalContext.current)
+                    .data(video.getCover())
+                    .memoryCacheKey("${video.klass}/${video.id}/cover")
+                    .diskCacheKey("${video.klass}/${video.id}/cover")
+                    .build(),
+                contentDescription = null,
+                modifier = Modifier
+                    .width(128.dp).fillMaxHeight()
+                    .clip(RoundedCornerShape(8.dp)),
+                contentScale = ContentScale.Crop
+            )
+
+            Column (
+                modifier = Modifier.padding(horizontal = 8.dp).fillMaxHeight().fillMaxWidth().align(Alignment.CenterVertically),
+                verticalArrangement = Arrangement.Center
+            )
+            {
+                Text(
+                    modifier = Modifier,
+                    text = video.video.name,
+                    fontSize = 14.sp,
+                    maxLines = 2,
+                    fontWeight = FontWeight.Bold,
+                )
+
+                Spacer(modifier.weight(1f))
+
+                Text(
+                    modifier = Modifier.height(16.dp),
+                    text = video.klass,
+                    fontSize = 8.sp,
+                    maxLines = 1,
+                    fontWeight = FontWeight.Bold,
+                )
+
+                Text(
+                    modifier = Modifier.height(16.dp),
+                    text = formatTime(video.video.duration),
+                    fontSize = 8.sp,
+                    maxLines = 1,
+                    fontWeight = FontWeight.Bold,
+                )
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/acitelight/aether/view/VideoScreen.kt b/app/src/main/java/com/acitelight/aether/view/VideoScreen.kt
index 51164c5..ac15901 100644
--- a/app/src/main/java/com/acitelight/aether/view/VideoScreen.kt
+++ b/app/src/main/java/com/acitelight/aether/view/VideoScreen.kt
@@ -3,6 +3,7 @@ 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
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -43,11 +44,14 @@ import com.acitelight.aether.viewModel.VideoScreenViewModel
 import androidx.compose.material3.PrimaryTabRow
 import androidx.compose.material3.ScrollableTabRow
 import androidx.compose.runtime.LaunchedEffect
+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 {
@@ -83,7 +87,7 @@ fun VideoScreen(videoScreenViewModel: VideoScreenViewModel = viewModel(), navCon
         )
         {
             items(videoList) { video ->
-                VideoCard(video, navController)
+                VideoCard(video, navController, videoScreenViewModel)
             }
         }
     }
@@ -110,17 +114,17 @@ fun TopRow(videoScreenViewModel: VideoScreenViewModel)
 }
 
 @Composable
-fun VideoCard(video: Video, navController: NavHostController) {
+fun VideoCard(video: Video, navController: NavHostController, videoScreenViewModel: VideoScreenViewModel) {
+    val videoList by videoScreenViewModel.videos.collectAsState()
+
     Card(
         shape = RoundedCornerShape(6.dp),
         modifier = Modifier
             .fillMaxWidth()
             .wrapContentHeight(),
         onClick = {
-            Global.videoName = video.video.name
-            Global.videoClass = video.klass
-            Global.video = video
-            val route = "video_player_route/${ video.getVideo().toHex() }"
+            Global.sameClassVideos = videoList
+            val route = "video_player_route/${ "${video.klass}/${video.id}".toHex() }"
             navController.navigate(route)
         }
     ) {
@@ -128,17 +132,35 @@ fun VideoCard(video: Video, navController: NavHostController) {
             modifier = Modifier
                 .fillMaxWidth()
         )  {
-            AsyncImage(
-                model = ImageRequest.Builder(LocalContext.current)
-                    .data(video.getCover())
-                    .memoryCacheKey("${video.klass}/${video.id}/cover")
-                    .diskCacheKey("${video.klass}/${video.id}/cover")
-                    .build(),
-                contentDescription = null,
-                modifier = Modifier
-                    .fillMaxSize(),
-                contentScale = ContentScale.Crop
-            )
+            Box(modifier = Modifier.fillMaxSize()){
+                AsyncImage(
+                    model = ImageRequest.Builder(LocalContext.current)
+                        .data(video.getCover())
+                        .memoryCacheKey("${video.klass}/${video.id}/cover")
+                        .diskCacheKey("${video.klass}/${video.id}/cover")
+                        .build(),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .fillMaxSize(),
+                    contentScale = ContentScale.Crop
+                )
+
+                Text(
+                    modifier = Modifier.align(Alignment.BottomEnd).padding(2.dp),
+                    text = formatTime(video.video.duration), fontSize = 12.sp, color = Color.White, fontWeight = FontWeight.Bold)
+
+                Box(
+                    Modifier
+                        .fillMaxWidth()
+                        .height(24.dp)
+                        .background( brush = Brush.verticalGradient(
+                            colors = listOf(
+                                Color.Transparent,
+                                Color.Black.copy(alpha = 0.45f)
+                            )
+                        ))
+                        .align(Alignment.BottomCenter))
+            }
             Text(
                 text = video.video.name,
                 fontSize = 14.sp,
@@ -151,7 +173,8 @@ fun VideoCard(video: Video, navController: NavHostController) {
                 modifier = Modifier.padding(horizontal = 8.dp),
                 horizontalArrangement = Arrangement.SpaceBetween,
             ) {
-                Text("class: ${video.klass}", fontSize = 12.sp)
+                Text("Class", fontSize = 12.sp)
+                Text("${video.klass}", fontSize = 12.sp)
             }
         }
     }
diff --git a/app/src/main/java/com/acitelight/aether/viewModel/HomeScreenViewModel.kt b/app/src/main/java/com/acitelight/aether/viewModel/HomeScreenViewModel.kt
index a3bc17d..38b6cf9 100644
--- a/app/src/main/java/com/acitelight/aether/viewModel/HomeScreenViewModel.kt
+++ b/app/src/main/java/com/acitelight/aether/viewModel/HomeScreenViewModel.kt
@@ -1,21 +1,81 @@
 package com.acitelight.aether.viewModel
 
 import android.app.Application
+import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.lifecycle.ViewModel
 import androidx.compose.runtime.State
 import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalContext
 import androidx.datastore.preferences.core.stringPreferencesKey
+import androidx.lifecycle.AndroidViewModel
 import androidx.lifecycle.viewModelScope
 import com.acitelight.aether.Global
 import com.acitelight.aether.dataStore
+import com.acitelight.aether.model.Video
+import com.acitelight.aether.model.VideoQueryIndex
 import com.acitelight.aether.service.ApiClient
 import com.acitelight.aether.service.AuthManager
 import com.acitelight.aether.service.MediaManager
 import com.acitelight.aether.service.MediaManager.token
+import com.acitelight.aether.service.RecentManager
+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 HomeScreenViewModel() : ViewModel()
+class HomeScreenViewModel(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] ?: ""
+    }
+
+    var _init = false
+
+    @Composable
+    fun Init(){
+        if(_init) return
+        _init = true
+
+        val context = LocalContext.current
+        remember {
+            viewModelScope.launch {
+                RecentManager.Query(context)
+            }
+        }
+    }
+
+    init {
+        viewModelScope.launch {
+            val u = userNameFlow.first()
+            val p = privateKeyFlow.first()
+
+            if(u=="" || p=="") return@launch
+
+            try{
+                if (MediaManager.token == "null")
+                    MediaManager.token = AuthManager.fetchToken(
+                        ApiClient.base,
+                        u,
+                        p
+                    )!!
+            }catch(e: Exception)
+            {
+                print(e.message)
+            }finally {
+                Global.loggedIn = true
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/acitelight/aether/viewModel/VideoPlayerViewModel.kt b/app/src/main/java/com/acitelight/aether/viewModel/VideoPlayerViewModel.kt
index c76d07a..7567c86 100644
--- a/app/src/main/java/com/acitelight/aether/viewModel/VideoPlayerViewModel.kt
+++ b/app/src/main/java/com/acitelight/aether/viewModel/VideoPlayerViewModel.kt
@@ -13,10 +13,15 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import androidx.media3.common.MediaItem
+import androidx.media3.common.Player
+import androidx.media3.common.Player.STATE_READY
 import androidx.media3.common.util.UnstableApi
 import androidx.media3.exoplayer.ExoPlayer
 import com.acitelight.aether.Global
+import com.acitelight.aether.model.Video
+import com.acitelight.aether.model.VideoQueryIndex
 import com.acitelight.aether.service.MediaManager
+import com.acitelight.aether.service.RecentManager
 import com.acitelight.aether.view.hexToString
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
@@ -32,25 +37,47 @@ class VideoPlayerViewModel() : ViewModel()
     var isLongPressing by mutableStateOf(false)
     var dragging by mutableStateOf(false)
 
-
     var thumbUp by mutableIntStateOf(0)
     var thumbDown by mutableIntStateOf(0)
     var star by mutableStateOf(false)
 
     private var _init: Boolean = false;
+    var startPlaying by mutableStateOf(false)
+    var renderedFirst = false
+    var video: Video? = null
 
     @Composable
     fun Init(videoId: String)
     {
         if(_init) return;
         val context = LocalContext.current
-        _player = remember {
-            ExoPlayer.Builder(context).build().apply {
-                val url = videoId.hexToString()
-                val mediaItem = MediaItem.fromUri(url)
-                setMediaItem(mediaItem)
-                prepare()
-                playWhenReady = true
+        val v = videoId.hexToString()
+
+        remember {
+            viewModelScope.launch {
+                video = MediaManager.queryVideo(v.split("/")[0], v.split("/")[1])
+                RecentManager.Push(context, VideoQueryIndex(v.split("/")[0], v.split("/")[1]))
+                _player = ExoPlayer.Builder(context).build().apply {
+                    val url = video?.getVideo() ?: ""
+                    val mediaItem = MediaItem.fromUri(url)
+                    setMediaItem(mediaItem)
+                    prepare()
+                    playWhenReady = true
+
+                    addListener(object : Player.Listener {
+                        override fun onPlaybackStateChanged(playbackState: Int) {
+                            if (playbackState == STATE_READY) {
+                                startPlaying = true
+                            }
+                        }
+
+                        override fun onRenderedFirstFrame() {
+                            super.onRenderedFirstFrame()
+                            renderedFirst = true
+                        }
+                    })
+                }
+                startListen()
             }
         }
 
diff --git a/app/src/main/java/com/acitelight/aether/viewModel/VideoScreenViewModel.kt b/app/src/main/java/com/acitelight/aether/viewModel/VideoScreenViewModel.kt
index a442429..bdb850a 100644
--- a/app/src/main/java/com/acitelight/aether/viewModel/VideoScreenViewModel.kt
+++ b/app/src/main/java/com/acitelight/aether/viewModel/VideoScreenViewModel.kt
@@ -62,24 +62,7 @@ class VideoScreenViewModel(application: Application) : AndroidViewModel(applicat
 
     init {
         viewModelScope.launch {
-            val u = userNameFlow.first()
-            val p = privateKeyFlow.first()
-
-            if(u=="" || p=="") return@launch
-
-            try{
-                if (MediaManager.token == "null")
-                    MediaManager.token = AuthManager.fetchToken(
-                        ApiClient.base,
-                        u,
-                        p
-                    )!!
-
-                init()
-            }catch(e: Exception)
-            {
-                print(e.message)
-            }
+            init()
         }
     }
 }
\ No newline at end of file