make layout respect different fontsizes

new-player/src/main/java/net/newpipe/newplayer/ui/VideoPlayerControllerUI.kt

@@ -58,6 +58,7 @@ import net.newpipe.newplayer.utils.getDefaultBrightness
 import net.newpipe.newplayer.utils.getInsets
 
 val CONTROLLER_UI_BACKGROUND_COLOR = Color(0x75000000)
+val STREAMSELECT_UI_BACKGROUND_COLOR = Color(0xba000000)
 
 @Composable
 fun VideoPlayerControllerUI(

new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/StreamSelectUI.kt

@@ -57,6 +57,7 @@ import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
 import net.newpipe.newplayer.Chapter
 import net.newpipe.newplayer.NewPlayerException
 import net.newpipe.newplayer.playerInternals.PlaylistItem
+import net.newpipe.newplayer.ui.STREAMSELECT_UI_BACKGROUND_COLOR
 import net.newpipe.newplayer.ui.videoplayer.streamselect.ChapterItem
 import net.newpipe.newplayer.ui.videoplayer.streamselect.ChapterSelectTopBar
 import net.newpipe.newplayer.ui.videoplayer.streamselect.StreamItem
@@ -72,7 +73,7 @@ fun StreamSelectUI(
     val insets = getInsets()
     Surface(
         modifier = Modifier.fillMaxSize(),
-        color = CONTROLLER_UI_BACKGROUND_COLOR
+        color = STREAMSELECT_UI_BACKGROUND_COLOR
     ) {
         Scaffold(
             modifier = Modifier
@@ -94,7 +95,7 @@ fun StreamSelectUI(
                 modifier = Modifier
                     .padding(innerPadding)
                     .fillMaxSize(),
-                verticalArrangement = Arrangement.spacedBy(10.dp),
+//                verticalArrangement = Arrangement.spacedBy(10.dp),
                 contentPadding = PaddingValues(start = 8.dp, end = 4.dp)
             ) {
                 if (isChapterSelect) {

new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/TopUI.kt

@@ -42,6 +42,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -55,9 +56,7 @@ import net.newpipe.newplayer.utils.getEmbeddedUiConfig
 
 @Composable
 fun TopUI(
-    modifier: Modifier,
-    viewModel: VideoPlayerViewModel,
-    uiState: VideoPlayerUIState
+    modifier: Modifier, viewModel: VideoPlayerViewModel, uiState: VideoPlayerUIState
 ) {
     val embeddedUiConfig = getEmbeddedUiConfig(activity = LocalContext.current as Activity)
     Row(
@@ -66,12 +65,16 @@ fun TopUI(
         horizontalArrangement = Arrangement.SpaceBetween,
     ) {
         Column(horizontalAlignment = Alignment.Start, modifier = Modifier.weight(1F)) {
-            Text("The Title", fontSize = 15.sp, fontWeight = FontWeight.Bold)
             Text(
-                "The Channel",
-                fontSize = 12.sp,
-
-                )
+                "The Title",
+                fontSize = 15.sp,
+                fontWeight = FontWeight.Bold,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+            Text(
+                "The Channel", fontSize = 12.sp, maxLines = 1, overflow = TextOverflow.Ellipsis
+            )
         }
         Button(
             onClick = { /*TODO*/ },

new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/streamselect/ChapterItem.kt

@@ -37,6 +37,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -64,6 +65,7 @@ fun ChapterItem(
     Row(
         modifier = modifier
             .height(80.dp)
+            .padding(5.dp)
             .clickable { onClicked(id) }
     ) {
         val contentDescription = stringResource(R.string.chapter)
@@ -98,8 +100,18 @@ fun ChapterItem(
             modifier = Modifier.padding(start = 8.dp),
             horizontalAlignment = Alignment.Start,
         ) {
-            Text(text = chapterTitle, fontSize = 18.sp, fontWeight = FontWeight.Bold)
-            Text(getTimeStringFromMs(chapterStartInMs, locale))
+            Text(
+                text = chapterTitle,
+                fontSize = 18.sp,
+                fontWeight = FontWeight.Bold,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+            Text(
+                getTimeStringFromMs(chapterStartInMs, locale),
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
         }
 
     }

new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/streamselect/ChapterSelectTopBar.kt

@@ -35,6 +35,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import net.newpipe.newplayer.R
 import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
@@ -45,8 +46,7 @@ fun ChapterSelectTopBar(modifier: Modifier = Modifier, onClose: () -> Unit) {
     TopAppBar(modifier = modifier,
         colors = topAppBarColors(containerColor = Color.Transparent),
         title = {
-            Text("Chapter TODO")
-            //Text(stringResource(R.string.chapter))
+            Text(stringResource(R.string.chapter), maxLines = 1, overflow = TextOverflow.Ellipsis)
         }, actions = {
             IconButton(
                 onClick = onClose

new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/streamselect/StreamItem.kt

@@ -25,13 +25,16 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 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.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.DragHandle
@@ -47,6 +50,7 @@ import androidx.compose.ui.input.pointer.pointerInteropFilter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -77,34 +81,40 @@ fun StreamItem(
     val locale = getLocale()!!
     Row(modifier = modifier
         .clickable { onClicked(id) }
-        .height(80.dp)) {
-        Box {
+        .padding(5.dp)
+        .height(IntrinsicSize.Min)) {
+        Box(
+            modifier = Modifier
+                .aspectRatio(16f / 9f)
+                .wrapContentHeight()
+                .fillMaxWidth()
+        ) {
             val contentDescription = stringResource(R.string.chapter)
             if (thumbnail != null) {
                 when (thumbnail) {
                     is OnlineThumbnail -> AsyncImage(
+                        modifier = Modifier.fillMaxSize(),
                         model = thumbnail.url,
                         contentDescription = contentDescription
                     )
 
                     is BitmapThumbnail -> Image(
+                        modifier = Modifier.fillMaxSize(),
                         bitmap = thumbnail.img,
                         contentDescription = contentDescription
                     )
 
                     is VectorThumbnail -> Image(
+                        modifier = Modifier.fillMaxSize(),
                         imageVector = thumbnail.vec,
                         contentDescription = contentDescription
                     )
                 }
-                AsyncImage(
-                    model = thumbnail,
-                    contentDescription = contentDescription
-                )
             } else {
                 Image(
-                    painterResource(R.drawable.tiny_placeholder),
-                    contentDescription = stringResource(R.string.chapter_thumbnail)
+                    modifier = Modifier.fillMaxSize(),
+                    painter = painterResource(R.drawable.tiny_placeholder),
+                    contentDescription = contentDescription
                 )
             }
             Surface(
@@ -118,28 +128,37 @@ fun StreamItem(
                     modifier = Modifier.padding(
                         start = 4.dp,
                         end = 4.dp,
-                        top = 2.dp,
-                        bottom = 2.dp
-                    ), text = getTimeStringFromMs(lengthInMs, locale)
+                        top = 0.5.dp,
+                        bottom = 0.5.dp
+                    ),
+                    text = getTimeStringFromMs(lengthInMs, locale, leadingZerosForMinutes = false),
+                    fontSize = 14.sp,
                 )
             }
         }
 
         Column(
             modifier = Modifier
-                .padding(8.dp)
+                .padding(1.dp)
                 .weight(1f)
-                .fillMaxSize()
+                .height(IntrinsicSize.Min)
+                .fillMaxWidth()
         ) {
-            Text(text = title, fontSize = 18.sp, fontWeight = FontWeight.Bold)
+            Text(
+                text = title, fontSize = 14.sp, fontWeight = FontWeight.Bold, maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
             if (creator != null) {
-                Text(text = creator)
+                Text(
+                    text = creator, fontSize = 13.sp, fontWeight = FontWeight.Light, maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
+                )
             }
         }
 
         Box(modifier = Modifier
-            .fillMaxHeight()
             .aspectRatio(1f)
+            .fillMaxSize()
             .pointerInteropFilter {
                 when (it.action) {
                     MotionEvent.ACTION_UP -> {
@@ -157,7 +176,7 @@ fun StreamItem(
             }) {
             Icon(
                 modifier = Modifier
-                    .size(40.dp)
+                    .size(25.dp)
                     .align(Alignment.Center),
                 imageVector = Icons.Filled.DragHandle,
                 //contentDescription = stringResource(R.string.stream_item_drag_handle)
@@ -172,17 +191,18 @@ fun StreamItem(
 fun StreamItemPreview() {
     VideoPlayerTheme {
         Surface(modifier = Modifier.fillMaxSize(), color = Color.DarkGray) {
-            StreamItem(
-                id = 0,
-                modifier = Modifier.fillMaxSize(),
-                title = "Video Title",
-                creator = "Video Creator",
-                thumbnail = null,
-                lengthInMs = 15 * 60 * 1000,
-                onDragStart = {},
-                onDragEnd = {},
-                onClicked = {}
-            )
+            Box(modifier = Modifier.fillMaxSize()) {
+                StreamItem(
+                    id = 0,
+                    title = "Video Title",
+                    creator = "Video Creator",
+                    thumbnail = null,
+                    lengthInMs = 15 * 60 * 1000,
+                    onDragStart = {},
+                    onDragEnd = {},
+                    onClicked = {}
+                )
+            }
         }
     }
 }

new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/streamselect/StreamSelectTopBar.kt

@@ -41,6 +41,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.media3.common.Player
 import net.newpipe.newplayer.NewPlayerException
@@ -68,7 +69,9 @@ fun StreamSelectTopBar(
             val duration = getPlaylistDurationInS(uiState.playList).toLong() * 1000
             val durationString = getTimeStringFromMs(timeSpanInMs = duration, locale)
             Text(
-                text = "00:00/$durationString"
+                text = "00:00/$durationString",
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
             )
         }, actions = {
             IconButton(

new-player/src/main/java/net/newpipe/newplayer/utils/utils.kt

@@ -113,7 +113,7 @@ private const val MILLIS_PER_DAY =
 private const val MILLIS_PER_HOUR = MINUTES_PER_HOUR * SECONDS_PER_MINUTE * MILLIS_PER_SECOND
 private const val MILLIS_PER_MINUTE = SECONDS_PER_MINUTE * MILLIS_PER_SECOND
 
-fun getTimeStringFromMs(timeSpanInMs: Long, locale: Locale): String {
+fun getTimeStringFromMs(timeSpanInMs: Long, locale: Locale, leadingZerosForMinutes:Boolean = true): String {
     val days = timeSpanInMs / MILLIS_PER_DAY
     val millisThisDay = timeSpanInMs - days * MILLIS_PER_DAY
     val hours = millisThisDay / MILLIS_PER_HOUR
@@ -126,7 +126,7 @@ fun getTimeStringFromMs(timeSpanInMs: Long, locale: Locale): String {
     val time_string =
         if (0L < days) String.format(locale, "%d:%02d:%02d:%02d", days, hours, minutes, seconds)
         else if (0L < hours) String.format(locale, "%d:%02d:%02d", hours, minutes, seconds)
-        else String.format(locale, "%02d:%02d", minutes, seconds)
+        else String.format(locale, if(leadingZerosForMinutes) "%02d:%02d" else "%d:%02d", minutes, seconds)
 
     return time_string
 }