Make session grid item title font size variable

feature/sessions/src/main/java/io/github/droidkaigi/confsched2023/sessions/component/TimetableGridItem.kt

@@ -24,9 +24,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import io.github.droidkaigi.confsched2023.designsystem.theme.KaigiTheme
 import io.github.droidkaigi.confsched2023.designsystem.theme.room_hall_a
 import io.github.droidkaigi.confsched2023.designsystem.theme.room_hall_b
@@ -40,21 +45,31 @@ import io.github.droidkaigi.confsched2023.model.RoomIndex.Room4
 import io.github.droidkaigi.confsched2023.model.RoomIndex.Room5
 import io.github.droidkaigi.confsched2023.model.TimetableItem
 import io.github.droidkaigi.confsched2023.model.TimetableItem.Session
+import io.github.droidkaigi.confsched2023.model.TimetableSpeaker
 import io.github.droidkaigi.confsched2023.model.fake
 import io.github.droidkaigi.confsched2023.model.type
 import io.github.droidkaigi.confsched2023.sessions.SessionsStrings.ScheduleIcon
 import io.github.droidkaigi.confsched2023.sessions.SessionsStrings.UserIcon
+import io.github.droidkaigi.confsched2023.sessions.section.TimetableSizes
 import io.github.droidkaigi.confsched2023.ui.previewOverride
 import io.github.droidkaigi.confsched2023.ui.rememberAsyncImagePainter
+import kotlinx.datetime.DateTimeUnit
+import kotlinx.datetime.minus
+import kotlin.math.roundToInt
 
 const val TimetableGridItemTestTag = "TimetableGridItem"
 
 @Composable
 fun TimetableGridItem(
     timetableItem: TimetableItem,
     onTimetableItemClick: (TimetableItem) -> Unit,
+    gridItemHeightPx: Int,
     modifier: Modifier = Modifier,
 ) {
+    val localDensity = LocalDensity.current
+
+    val speaker = timetableItem.speakers.firstOrNull()
+
     val backgroundColor = when (timetableItem.room.type) {
         Room1 -> room_hall_a
         Room2 -> room_hall_b
@@ -63,6 +78,19 @@ fun TimetableGridItem(
         Room5 -> room_hall_e
         else -> Color.White
     }
+    val height = with(localDensity) { gridItemHeightPx.toDp() }
+    val titleTextStyle = MaterialTheme.typography.labelLarge.let {
+        check(it.fontSize.isSp)
+        val titleFontSize = calculateTitleFontSize(
+            textStyle = it,
+            localDensity = localDensity,
+            gridItemHeightPx = gridItemHeightPx,
+            speaker = speaker,
+            titleLength = timetableItem.title.currentLangTitle.length,
+        )
+        it.copy(fontSize = titleFontSize, color = Color.White)
+    }
+
     Box(modifier.testTag(TimetableGridItemTestTag)) {
         Box(
             modifier = Modifier
@@ -72,6 +100,7 @@ fun TimetableGridItem(
                     shape = RoundedCornerShape(4.dp),
                 )
                 .width(192.dp)
+                .height(height)
                 .clickable {
                     onTimetableItemClick(timetableItem)
                 }
@@ -80,7 +109,7 @@ fun TimetableGridItem(
             Column {
                 Text(
                     text = timetableItem.title.currentLangTitle,
-                    style = MaterialTheme.typography.labelLarge.copy(Color.White),
+                    style = titleTextStyle,
                 )
                 Spacer(modifier = Modifier.height(4.dp))
                 Row(modifier = Modifier.height(16.dp)) {
@@ -99,7 +128,6 @@ fun TimetableGridItem(
                 Spacer(modifier = Modifier.height(16.dp))
 
                 // TODO: Dealing with more than one speaker
-                val speaker = timetableItem.speakers.firstOrNull()
                 if (speaker != null) {
                     Row(
                         modifier = Modifier.height(32.dp),
@@ -124,6 +152,50 @@ fun TimetableGridItem(
     }
 }
 
+/**
+ *
+ * Calculate the font size of the title by the height of the displayed session grid.
+ *
+ * @param textStyle session title text style.
+ * @param localDensity local density.
+ * @param gridItemHeightPx session grid item height. (unit is px.)
+ * @param speaker session speaker.
+ * @param titleLength session title length.
+ *
+ */
+private fun calculateTitleFontSize(
+    textStyle: TextStyle,
+    localDensity: Density,
+    gridItemHeightPx: Int,
+    speaker: TimetableSpeaker?,
+    titleLength: Int,
+): TextUnit {
+    val titleToScheduleSpaceHeight = with(localDensity) { 4.dp.toPx() }
+    val scheduleHeight = with(localDensity) { 16.dp.toPx() }
+    val scheduleToSpeakerSpaceHeight = with(localDensity) { 16.dp.toPx() }
+    val horizontalPadding = with(localDensity) { (12 * 2).dp.toPx() }
+
+    // The height of the title that should be displayed.
+    var displayTitleHeight =
+        gridItemHeightPx - titleToScheduleSpaceHeight - scheduleHeight - scheduleToSpeakerSpaceHeight - horizontalPadding
+    displayTitleHeight -= if (speaker != null) with(localDensity) { 32.dp.toPx() } else 0f
+
+    // Actual height of displayed title.
+    val boxWidthWithoutPadding = with(localDensity) { (192 - 12 * 2).dp.toPx() }
+    val fontSizePx = with(localDensity) { textStyle.fontSize.toPx() }
+    val textLengthInRow = (boxWidthWithoutPadding / fontSizePx).roundToInt()
+    val rows = titleLength / textLengthInRow
+    val actualTitleHeight = rows * fontSizePx
+
+    val oneLine = 1
+    val minFontSize = 9.sp
+    return when {
+        displayTitleHeight <= 0 -> minFontSize
+        rows <= oneLine || displayTitleHeight > actualTitleHeight -> textStyle.fontSize
+        else -> minFontSize
+    }
+}
+
 @Preview
 @Composable
 fun PreviewTimetableGridItem() {
@@ -132,6 +204,36 @@ fun PreviewTimetableGridItem() {
             TimetableGridItem(
                 timetableItem = Session.fake(),
                 onTimetableItemClick = {},
+                gridItemHeightPx = 350,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PreviewTimetableGridLongTitleItem() {
+    val fake = Session.fake()
+
+    val localDensity = LocalDensity.current
+    val verticalScale = 1f
+
+    val minutePx = with(localDensity) { TimetableSizes.minuteHeight.times(verticalScale).toPx() }
+    val displayEndsAt = fake.endsAt.minus(1, DateTimeUnit.MINUTE)
+    val height = ((displayEndsAt - fake.startsAt).inWholeMinutes * minutePx).roundToInt()
+
+    KaigiTheme {
+        Surface {
+            TimetableGridItem(
+                timetableItem = Session.fake().let {
+                    val longTitle = it.title.copy(
+                        jaTitle = it.title.jaTitle.repeat(2),
+                        enTitle = it.title.enTitle.repeat(2),
+                    )
+                    it.copy(title = longTitle)
+                },
+                onTimetableItemClick = {},
+                gridItemHeightPx = height,
             )
         }
     }

feature/sessions/src/main/java/io/github/droidkaigi/confsched2023/sessions/section/TimetableGrid.kt

@@ -77,10 +77,11 @@ fun TimetableGrid(
         timetableState = timetableGridState,
         modifier = modifier,
         contentPadding = PaddingValues(16.dp),
-    ) { timetableItem ->
+    ) { timetableItem, itemHeightPx ->
         TimetableGridItem(
             timetableItem = timetableItem,
             onTimetableItemClick = onTimetableItemClick,
+            gridItemHeightPx = itemHeightPx,
         )
     }
 }
@@ -92,13 +93,9 @@ fun TimetableGrid(
     timetableState: TimetableState,
     modifier: Modifier = Modifier,
     contentPadding: PaddingValues = PaddingValues(),
-    content: @Composable (TimetableItem) -> Unit,
+    content: @Composable (TimetableItem, Int) -> Unit,
 ) {
     val coroutineScope = rememberCoroutineScope()
-    val itemProvider = itemProvider({ timetable.timetableItems.size }) { index ->
-        val timetableItemWithFavorite = timetable.contents[index]
-        content(timetableItemWithFavorite.timetableItem)
-    }
     val density = timetableState.density
     val verticalScale = timetableState.screenScaleState.verticalScale
     val timetableLayout = remember(timetable, verticalScale) {
@@ -117,6 +114,12 @@ fun TimetableGrid(
     val linePxSize = with(timetableState.density) { TimetableSizes.lineStrokeSize.toPx() }
     val layoutDirection = LocalLayoutDirection.current
 
+    val itemProvider = itemProvider({ timetable.timetableItems.size }) { index ->
+        val timetableItemWithFavorite = timetable.contents[index]
+        val itemHeightPx = timetableLayout.timetableLayouts[index].height
+        content(timetableItemWithFavorite.timetableItem, itemHeightPx)
+    }
+
     LazyLayout(
         modifier = modifier
             .padding(
@@ -246,10 +249,11 @@ fun TimetablePreview() {
         modifier = Modifier.fillMaxSize(),
         timetable = Timetable.fake(),
         timetableState = timetableState,
-    ) { timetableItem ->
+    ) { timetableItem, itemHeightPx ->
         TimetableGridItem(
             timetableItem = timetableItem,
             onTimetableItemClick = {},
+            gridItemHeightPx = itemHeightPx,
         )
     }
 }