Skip to content

Commit e59ca35

Browse files
Jankin-WuJankin-Wu
committed
feat(client): Optimize the interface layout of the subtitle adjustment box
1 parent 7442f49 commit e59ca35

File tree

2 files changed

+108
-97
lines changed

2 files changed

+108
-97
lines changed

‎composeApp/src/commonMain/kotlin/com/jankinwu/fntv/client/ui/component/player/SubtitleControlFlyout.kt‎

Lines changed: 106 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,11 @@ import androidx.compose.animation.core.Animatable
44
import androidx.compose.animation.core.tween
55
import androidx.compose.foundation.BorderStroke
66
import androidx.compose.foundation.Canvas
7-
import androidx.compose.foundation.gestures.detectDragGestures
8-
import androidx.compose.foundation.gestures.detectTapGestures
9-
import androidx.compose.foundation.layout.fillMaxHeight
10-
import androidx.compose.ui.geometry.Offset
11-
import androidx.compose.ui.graphics.StrokeCap
12-
import androidx.compose.ui.input.pointer.pointerInput
13-
import kotlin.math.roundToInt
147
import androidx.compose.foundation.background
158
import androidx.compose.foundation.border
169
import androidx.compose.foundation.clickable
10+
import androidx.compose.foundation.gestures.detectDragGestures
11+
import androidx.compose.foundation.gestures.detectTapGestures
1712
import androidx.compose.foundation.layout.Arrangement
1813
import androidx.compose.foundation.layout.Box
1914
import androidx.compose.foundation.layout.Column
@@ -35,8 +30,6 @@ import androidx.compose.material.icons.filled.Search
3530
import androidx.compose.material.icons.filled.Storage
3631
import androidx.compose.material3.HorizontalDivider
3732
import androidx.compose.material3.Icon
38-
import androidx.compose.material3.Slider
39-
import androidx.compose.material3.SliderDefaults
4033
import androidx.compose.material3.Surface
4134
import androidx.compose.material3.Text
4235
import androidx.compose.runtime.Composable
@@ -51,24 +44,27 @@ import androidx.compose.ui.ExperimentalComposeUiApi
5144
import androidx.compose.ui.Modifier
5245
import androidx.compose.ui.draw.alpha
5346
import androidx.compose.ui.draw.clip
47+
import androidx.compose.ui.geometry.Offset
5448
import androidx.compose.ui.graphics.Color
49+
import androidx.compose.ui.graphics.StrokeCap
5550
import androidx.compose.ui.graphics.TransformOrigin
5651
import androidx.compose.ui.graphics.graphicsLayer
5752
import androidx.compose.ui.graphics.vector.ImageVector
5853
import androidx.compose.ui.input.pointer.PointerEventType
5954
import androidx.compose.ui.input.pointer.PointerIcon
6055
import androidx.compose.ui.input.pointer.onPointerEvent
6156
import androidx.compose.ui.input.pointer.pointerHoverIcon
57+
import androidx.compose.ui.input.pointer.pointerInput
6258
import androidx.compose.ui.text.font.FontWeight
6359
import androidx.compose.ui.text.style.TextOverflow
6460
import androidx.compose.ui.unit.IntOffset
6561
import androidx.compose.ui.unit.dp
6662
import androidx.compose.ui.unit.sp
6763
import androidx.compose.ui.window.Popup
6864
import androidx.compose.ui.window.PopupProperties
69-
import com.jankinwu.fntv.client.data.model.SubtitleSettings
7065
import com.jankinwu.fntv.client.data.convertor.FnDataConvertor
7166
import com.jankinwu.fntv.client.data.model.PlayingInfoCache
67+
import com.jankinwu.fntv.client.data.model.SubtitleSettings
7268
import com.jankinwu.fntv.client.data.model.response.SubtitleStream
7369
import com.jankinwu.fntv.client.icons.Delete
7470
import com.jankinwu.fntv.client.icons.Subtitle
@@ -77,6 +73,7 @@ import com.jankinwu.fntv.client.ui.providable.IsoTagData
7773
import kotlinx.coroutines.Job
7874
import kotlinx.coroutines.delay
7975
import kotlinx.coroutines.launch
76+
import kotlin.math.roundToInt
8077

8178
private val FlyoutBackgroundColor = Color.Black.copy(alpha = 0.9f)
8279
private val FlyoutBorderColor = Color.Gray.copy(alpha = 0.5f)
@@ -346,10 +343,10 @@ fun SubtitleAdjustmentContent(
346343
border = BorderStroke(1.dp, FlyoutBorderColor),
347344
modifier = Modifier.width(MenuWidth)
348345
) {
349-
Column(modifier = Modifier.padding(16.dp)) {
346+
Column(modifier = Modifier.padding(start = 8.dp, top = 16.dp, bottom = 16.dp, end = 8.dp)) {
350347
// Header
351348
Row(
352-
modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp),
349+
modifier = Modifier.fillMaxWidth().padding(horizontal = 4.dp, vertical = 4.dp),
353350
horizontalArrangement = Arrangement.SpaceBetween,
354351
verticalAlignment = Alignment.CenterVertically
355352
) {
@@ -373,99 +370,111 @@ fun SubtitleAdjustmentContent(
373370
}
374371
}
375372

376-
// Offset
377-
Text("偏移", color = Color.White, fontSize = 14.sp, fontWeight = FontWeight.Medium)
378-
Row(verticalAlignment = Alignment.CenterVertically) {
379-
SubtitleAdjustmentSlider(
380-
value = settings.offsetSeconds,
381-
onValueChange = {
382-
// Round to 1 decimal place
383-
val rounded = (it * 10).roundToInt() / 10f
384-
onSettingsChanged(settings.copy(offsetSeconds = rounded))
385-
},
386-
valueRange = -5f..5f,
387-
showCenterMark = true,
388-
modifier = Modifier.weight(1f)
389-
)
390-
Spacer(modifier = Modifier.width(8.dp))
391-
Box(
392-
modifier = Modifier
393-
.background(Color.White.copy(alpha = 0.1f), RoundedCornerShape(4.dp))
394-
.padding(horizontal = 8.dp, vertical = 4.dp)
395-
.width(40.dp), // Fixed width for stability
396-
contentAlignment = Alignment.Center
397-
) {
373+
HorizontalDivider(
374+
modifier = Modifier.padding(vertical = 12.dp),
375+
color = Color.White.copy(alpha = 0.1f)
376+
)
377+
378+
// Content Container with fixed height to match SubtitleFlyoutContent
379+
Column(
380+
modifier = Modifier
381+
.height(300.dp)
382+
.padding(horizontal = 8.dp)
383+
) {
384+
// Offset
385+
Text("偏移", color = Color.White, fontSize = 14.sp, fontWeight = FontWeight.Medium)
386+
Row(verticalAlignment = Alignment.CenterVertically) {
387+
SubtitleAdjustmentSlider(
388+
value = settings.offsetSeconds,
389+
onValueChange = {
390+
// Round to 1 decimal place
391+
val rounded = (it * 10).roundToInt() / 10f
392+
onSettingsChanged(settings.copy(offsetSeconds = rounded))
393+
},
394+
valueRange = -5f..5f,
395+
showCenterMark = true,
396+
modifier = Modifier.weight(1f)
397+
)
398+
Spacer(modifier = Modifier.width(8.dp))
399+
Box(
400+
modifier = Modifier
401+
.background(Color.White.copy(alpha = 0.1f), RoundedCornerShape(4.dp))
402+
.padding(horizontal = 8.dp, vertical = 4.dp)
403+
.width(40.dp), // Fixed width for stability
404+
contentAlignment = Alignment.Center
405+
) {
406+
Text(
407+
text = "${((settings.offsetSeconds * 10).roundToInt() / 10.0)}",
408+
color = Color.White,
409+
fontSize = 12.sp
410+
)
411+
}
398412
Text(
399-
text = "${((settings.offsetSeconds * 10).roundToInt() / 10.0)}",
413+
" 秒",
400414
color = Color.White,
401-
fontSize = 12.sp
415+
fontSize = 12.sp,
416+
modifier = Modifier.padding(start = 4.dp)
402417
)
403418
}
404-
Text(
405-
" 秒",
406-
color = Color.White,
407-
fontSize = 12.sp,
408-
modifier = Modifier.padding(start = 4.dp)
409-
)
410-
}
411-
Row(
412-
modifier = Modifier.fillMaxWidth().padding(end = 60.dp), // Align with slider
413-
horizontalArrangement = Arrangement.SpaceBetween
414-
) {
415-
Text("-5秒", color = DefaultTextColor, fontSize = 10.sp)
416-
Text("+5秒", color = DefaultTextColor, fontSize = 10.sp)
417-
}
419+
Row(
420+
modifier = Modifier.fillMaxWidth().padding(end = 60.dp), // Align with slider
421+
horizontalArrangement = Arrangement.SpaceBetween
422+
) {
423+
Text("-5秒", color = DefaultTextColor, fontSize = 10.sp)
424+
Text("+5秒", color = DefaultTextColor, fontSize = 10.sp)
425+
}
418426

419-
Spacer(modifier = Modifier.height(16.dp))
427+
Spacer(modifier = Modifier.height(16.dp))
420428

421-
// Position
422-
Text("位置", color = Color.White, fontSize = 14.sp, fontWeight = FontWeight.Medium)
423-
Row(verticalAlignment = Alignment.CenterVertically) {
424-
Text(
425-
"底部",
426-
color = DefaultTextColor,
427-
fontSize = 12.sp,
428-
modifier = Modifier.padding(end = 8.dp)
429-
)
430-
SubtitleAdjustmentSlider(
431-
value = settings.verticalPosition,
432-
onValueChange = { onSettingsChanged(settings.copy(verticalPosition = it)) },
433-
valueRange = 0f..1f,
434-
showCenterMark = true,
435-
modifier = Modifier.weight(1f)
436-
)
437-
Text(
438-
"顶部",
439-
color = DefaultTextColor,
440-
fontSize = 12.sp,
441-
modifier = Modifier.padding(start = 8.dp)
442-
)
443-
}
429+
// Position
430+
Text("位置", color = Color.White, fontSize = 14.sp, fontWeight = FontWeight.Medium)
431+
Row(verticalAlignment = Alignment.CenterVertically) {
432+
Text(
433+
"底部",
434+
color = DefaultTextColor,
435+
fontSize = 12.sp,
436+
modifier = Modifier.padding(end = 8.dp)
437+
)
438+
SubtitleAdjustmentSlider(
439+
value = settings.verticalPosition,
440+
onValueChange = { onSettingsChanged(settings.copy(verticalPosition = it)) },
441+
valueRange = 0f..1f,
442+
showCenterMark = true,
443+
modifier = Modifier.weight(1f)
444+
)
445+
Text(
446+
"顶部",
447+
color = DefaultTextColor,
448+
fontSize = 12.sp,
449+
modifier = Modifier.padding(start = 8.dp)
450+
)
451+
}
444452

445-
Spacer(modifier = Modifier.height(16.dp))
453+
Spacer(modifier = Modifier.height(16.dp))
446454

447-
// Font Size
448-
Text("字号", color = Color.White, fontSize = 14.sp, fontWeight = FontWeight.Medium)
449-
Row(verticalAlignment = Alignment.CenterVertically) {
450-
Text(
451-
"最小",
452-
color = DefaultTextColor,
453-
fontSize = 12.sp,
454-
modifier = Modifier.padding(end = 8.dp)
455-
)
456-
SubtitleAdjustmentSlider(
457-
value = settings.fontScale,
458-
onValueChange = { onSettingsChanged(settings.copy(fontScale = it)) },
459-
valueRange = 0.5f..2.0f,
460-
showCenterMark = true,
461-
modifier = Modifier.weight(1f)
462-
)
463-
Text(
464-
"最大",
465-
color = DefaultTextColor,
466-
fontSize = 12.sp,
467-
modifier = Modifier.padding(start = 8.dp)
468-
)
455+
// Font Size
456+
Text("字号", color = Color.White, fontSize = 14.sp, fontWeight = FontWeight.Medium)
457+
Row(verticalAlignment = Alignment.CenterVertically) {
458+
Text(
459+
"最小",
460+
color = DefaultTextColor,
461+
fontSize = 12.sp,
462+
modifier = Modifier.padding(end = 8.dp)
463+
)
464+
SubtitleAdjustmentSlider(
465+
value = settings.fontScale,
466+
onValueChange = { onSettingsChanged(settings.copy(fontScale = it)) },
467+
valueRange = 0.5f..2.0f,
468+
showCenterMark = true,
469+
modifier = Modifier.weight(1f)
470+
)
471+
Text(
472+
"最大",
473+
color = DefaultTextColor,
474+
fontSize = 12.sp,
475+
modifier = Modifier.padding(start = 8.dp)
476+
)
477+
}
469478
}
470479
}
471480
}

‎composeApp/src/jvmMain/kotlin/com/jankinwu/fntv/client/main.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import com.jankinwu.fntv.client.viewmodel.viewModelModule
4242
import com.jankinwu.fntv.client.window.WindowFrame
4343
import fntv_client_multiplatform.composeapp.generated.resources.Res
4444
import fntv_client_multiplatform.composeapp.generated.resources.icon
45+
import kotlinx.coroutines.FlowPreview
4546
import kotlinx.coroutines.flow.debounce
4647
import org.jetbrains.compose.resources.painterResource
4748
import org.koin.compose.KoinApplication
@@ -50,6 +51,7 @@ import org.openani.mediamp.compose.rememberMediampPlayer
5051
import java.awt.Dimension
5152
import java.io.File
5253

54+
@OptIn(FlowPreview::class)
5355
fun main() = application {
5456
val logDir = initializeLoggingDirectory()
5557
Logger.setLogWriters(ConsoleLogWriter(), FileLogWriter(logDir))

0 commit comments

Comments
 (0)