Extract shared Compose UI into core module

app-tv/build.gradle.kts

@@ -53,6 +53,7 @@ kotlin {
 dependencies {
     implementation(project(":core:model"))
     implementation(project(":core:image"))
+    implementation(project(":core:ui"))
     implementation(project(":core:data"))
     implementation(project(":core:navigation"))
     implementation(project(":core:download"))

app-tv/src/main/AndroidManifest.xml

@@ -14,7 +14,7 @@
         android:required="true" />
 
     <application
-        android:name="hu.bbara.purefin.TvApplication"
+        android:name="hu.bbara.purefin.tv.TvApplication"
         android:allowBackup="true"
         android:banner="@drawable/banner"
         android:dataExtractionRules="@xml/data_extraction_rules"
@@ -25,7 +25,7 @@
         android:supportsRtl="true"
         android:theme="@style/Theme.Purefin">
         <activity
-            android:name="hu.bbara.purefin.TvActivity"
+            android:name="hu.bbara.purefin.tv.TvActivity"
             android:exported="true"
             android:theme="@style/Theme.Purefin">
             <intent-filter>

app-tv/src/main/java/hu/bbara/purefin/tv/TvActivity.kt

@@ -1,4 +1,4 @@
-package hu.bbara.purefin
+package hu.bbara.purefin.tv
 
 import android.content.pm.ApplicationInfo
 import android.os.Bundle

app-tv/src/main/java/hu/bbara/purefin/tv/TvApplication.kt

@@ -1,4 +1,4 @@
-package hu.bbara.purefin
+package hu.bbara.purefin.tv
 
 import android.app.Application
 import dagger.hilt.android.HiltAndroidApp

app-tv/src/main/java/hu/bbara/purefin/ui/common/badge/UnwatchedEpisodeBadge.kt

@@ -1,46 +0,0 @@
-package hu.bbara.purefin.ui.common.badge
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-
-@Composable
-fun UnwatchedEpisodeBadge(
-    unwatchedCount: Int,
-    foregroundColor: Color = MaterialTheme.colorScheme.onPrimary,
-    backgroundColor: Color = MaterialTheme.colorScheme.primary,
-    size: Int = 24,
-    modifier: Modifier = Modifier
-) {
-    if (unwatchedCount == 0) {
-        return
-    }
-
-    Box(
-        contentAlignment = Alignment.Center,
-        modifier = modifier
-            .border(1.dp, backgroundColor.copy(alpha = 0.8f), CircleShape)
-            .background(backgroundColor.copy(alpha = 0.8f), CircleShape)
-            .size(size.dp)
-            .clip(CircleShape)
-    ) {
-        Text(
-            text = if (unwatchedCount > 9) "9+" else unwatchedCount.toString(),
-            color = foregroundColor.copy(alpha = 0.8f),
-            fontWeight = FontWeight.W900,
-            fontSize = 15.sp
-        )
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/badge/WatchStateBadge.kt

@@ -1,81 +0,0 @@
-package hu.bbara.purefin.ui.common.badge
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Check
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-
-@Composable
-fun WatchStateBadge(
-    watched: Boolean,
-    started: Boolean,
-    watchedColor: Color = MaterialTheme.colorScheme.onPrimary,
-    watchedBackgroundColor: Color = MaterialTheme.colorScheme.primary,
-    startedColor: Color = MaterialTheme.colorScheme.onSecondary,
-    startedBackgroundColor: Color = MaterialTheme.colorScheme.secondary,
-    size: Int = 24,
-    modifier: Modifier = Modifier
-) {
-
-    if (watched.not() && started.not()) {
-        return
-    }
-
-    val foregroundColor = if (watched) watchedColor.copy(alpha = 0.8f) else startedColor.copy(alpha = 0.3f)
-    val backgroundColor = if (watched) watchedBackgroundColor.copy(alpha = 0.8f) else startedBackgroundColor.copy(alpha = 0.3f)
-    val borderColor = if (watched) watchedBackgroundColor.copy(alpha = 0.8f) else startedBackgroundColor.copy(alpha = 0.8f)
-
-
-    Box(
-        contentAlignment = Alignment.Center,
-        modifier = modifier
-            .border(1.dp, borderColor, CircleShape)
-            .background(backgroundColor, CircleShape)
-            .size(size.dp)
-            .clip(CircleShape)
-    ) {
-        if (watched) {
-            Icon(
-                imageVector = Icons.Outlined.Check,
-                contentDescription = "Check",
-                tint = foregroundColor,
-                modifier = Modifier
-                    .padding(1.dp)
-                    .matchParentSize()
-            )
-        }
-    }
-}
-
-@Preview
-@Composable
-private fun WatchStateBadgePreview() {
-    Column() {
-        WatchStateBadge(
-            watched = false,
-            started = false
-        )
-        WatchStateBadge(
-            watched = true,
-            started = false
-        )
-        WatchStateBadge(
-            watched = false,
-            started = true
-        )
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/bar/MediaProgressBar.kt

@@ -1,53 +0,0 @@
-package hu.bbara.purefin.ui.common.bar
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-
-/**
- * A progress bar component for displaying media playback progress.
- *
- * @param progress The progress value between 0f and 1f, where 0f is no progress and 1f is complete.
- * @param foregroundColor The color of the progress indicator.
- * @param backgroundColor The color of the background/unfilled portion of the progress bar.
- * @param modifier The modifier to be applied to the Box. Modifier should contain the Alignment.
- */
-@Composable
-fun MediaProgressBar(
-    progress: Float,
-    foregroundColor: Color = MaterialTheme.colorScheme.onSurface,
-    backgroundColor: Color = MaterialTheme.colorScheme.primary,
-    contentPadding: PaddingValues = PaddingValues(start = 8.dp, end = 8.dp, bottom = 8.dp),
-    barHeight: Dp = 4.dp,
-    cornerRadius: Dp = 24.dp,
-    modifier: Modifier
-) {
-    if (progress <= 0f) return
-    Box(
-        modifier = modifier
-            .padding(contentPadding)
-            .clip(RoundedCornerShape(cornerRadius))
-            .fillMaxWidth()
-            .height(barHeight)
-            .background(backgroundColor.copy(alpha = 0.2f))
-    ) {
-        Box(
-            modifier = Modifier
-                .fillMaxHeight()
-                .fillMaxWidth(progress)
-                .background(foregroundColor)
-        )
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/button/GhostIconButton.kt

@@ -1,56 +0,0 @@
-package hu.bbara.purefin.ui.common.button
-
-import androidx.compose.animation.animateColorAsState
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.focus.onFocusChanged
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.unit.dp
-
-@Composable
-fun GhostIconButton(
-    icon: ImageVector,
-    contentDescription: String,
-    onClick: () -> Unit,
-    modifier: Modifier = Modifier
-) {
-    val scheme = MaterialTheme.colorScheme
-    var isFocused by remember { mutableStateOf(false) }
-    val scale by animateFloatAsState(targetValue = if (isFocused) 1.1f else 1.0f, label = "scale")
-    val borderColor by animateColorAsState(targetValue = if (isFocused) scheme.primary else Color.Transparent, label = "border")
-
-    Box(
-        modifier = modifier
-            .graphicsLayer { scaleX = scale; scaleY = scale }
-            .size(52.dp)
-            .border(if (isFocused) 2.5.dp else 0.dp, borderColor, CircleShape)
-            .clip(CircleShape)
-            .background(if (isFocused) scheme.primary.copy(alpha = 0.25f) else scheme.background.copy(alpha = 0.65f))
-            .onFocusChanged { isFocused = it.isFocused }
-            .clickable { onClick() },
-        contentAlignment = Alignment.Center
-    ) {
-        Icon(
-            imageVector = icon,
-            contentDescription = contentDescription,
-            tint = scheme.onBackground
-        )
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/button/MediaActionButton.kt

@@ -1,55 +0,0 @@
-package hu.bbara.purefin.ui.common.button
-
-import androidx.compose.animation.animateColorAsState
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.focus.onFocusChanged
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-
-@Composable
-fun MediaActionButton(
-    backgroundColor: Color,
-    iconColor: Color,
-    icon: ImageVector,
-    modifier: Modifier = Modifier,
-    height: Dp,
-    onClick: () -> Unit = {},
-) {
-    val scheme = MaterialTheme.colorScheme
-    var isFocused by remember { mutableStateOf(false) }
-    val scale by animateFloatAsState(targetValue = if (isFocused) 1.1f else 1.0f, label = "scale")
-    val borderColor by animateColorAsState(targetValue = if (isFocused) scheme.primary else Color.Transparent, label = "border")
-
-    Box(
-        modifier = modifier
-            .graphicsLayer { scaleX = scale; scaleY = scale }
-            .size(height)
-            .border(if (isFocused) 2.5.dp else 0.dp, borderColor, CircleShape)
-            .clip(CircleShape)
-            .background(backgroundColor.copy(alpha = 0.6f))
-            .onFocusChanged { isFocused = it.isFocused }
-            .clickable { onClick() },
-        contentAlignment = Alignment.Center
-    ) {
-        Icon(imageVector = icon, contentDescription = null, tint = iconColor)
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/button/MediaResumeButton.kt

@@ -1,125 +0,0 @@
-package hu.bbara.purefin.ui.common.button
-
-import androidx.compose.animation.animateColorAsState
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.focusable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.Row
-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.width
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.PlayArrow
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.drawWithContent
-import androidx.compose.ui.focus.onFocusChanged
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.drawscope.clipRect
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-
-@Composable
-fun MediaResumeButton(
-    text: String,
-    progress: Float = 0f,
-    onClick: () -> Unit,
-    modifier: Modifier = Modifier
-) {
-    val scheme = MaterialTheme.colorScheme
-    val primaryColor = scheme.primary
-    val onPrimaryColor = scheme.onPrimary
-    val focusShape = RoundedCornerShape(50)
-    var isFocused by remember { mutableStateOf(false) }
-    val scale by animateFloatAsState(targetValue = if (isFocused) 1.08f else 1.0f, label = "scale")
-    val focusBorderColor by animateColorAsState(
-        targetValue = if (isFocused) scheme.onBackground else Color.Transparent,
-        label = "focus-border"
-    )
-    val focusHaloColor by animateColorAsState(
-        targetValue = if (isFocused) scheme.primary.copy(alpha = 0.22f) else Color.Transparent,
-        label = "focus-halo"
-    )
-
-    BoxWithConstraints(
-        modifier = modifier
-            .graphicsLayer { scaleX = scale; scaleY = scale }
-            .height(52.dp)
-            .background(focusHaloColor, focusShape)
-            .border(3.dp, focusBorderColor, focusShape)
-            .clip(focusShape)
-            .onFocusChanged { isFocused = it.isFocused || it.hasFocus }
-            .clickable(onClick = onClick)
-            .focusable()
-    ) {
-        // Bottom layer: inverted colors (visible for the remaining %)
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .background(onPrimaryColor),
-            contentAlignment = Alignment.Center
-        ) {
-            ButtonContent(text = text, color = primaryColor)
-        }
-
-        // Top layer: primary colors, clipped to the progress %
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .drawWithContent {
-                    val clipWidth = size.width * progress
-                    clipRect(
-                        left = 0f,
-                        top = 0f,
-                        right = clipWidth,
-                        bottom = size.height
-                    ) {
-                        this@drawWithContent.drawContent()
-                    }
-                }
-                .background(primaryColor),
-            contentAlignment = Alignment.Center
-        ) {
-            ButtonContent(text = text, color = onPrimaryColor)
-        }
-
-        if (isFocused) {
-            Box(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .border(2.dp, scheme.primary.copy(alpha = 0.95f), focusShape)
-            )
-        }
-    }
-}
-
-@Composable
-private fun ButtonContent(text: String, color: Color) {
-    Row(
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.Center
-    ) {
-        Text(text, color = color, fontWeight = FontWeight.Bold, fontSize = 16.sp)
-        Spacer(Modifier.width(8.dp))
-        Icon(Icons.Filled.PlayArrow, null, tint = color)
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/button/PurefinIconButton.kt

@@ -1,55 +0,0 @@
-package hu.bbara.purefin.ui.common.button
-
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.focus.onFocusChanged
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.unit.dp
-
-@Composable
-fun PurefinIconButton(
-    icon: ImageVector,
-    contentDescription: String,
-    onClick: () -> Unit,
-    modifier: Modifier = Modifier,
-    size: Int = 52
-) {
-    val scheme = MaterialTheme.colorScheme
-    var isFocused by remember { mutableStateOf(false) }
-    val scale by animateFloatAsState(targetValue = if (isFocused) 1.1f else 1.0f, label = "scale")
-
-    Box(
-        modifier = modifier
-            .graphicsLayer { scaleX = scale; scaleY = scale }
-            .size(size.dp)
-            .border(if (isFocused) 2.5.dp else 0.dp, if (isFocused) scheme.onPrimary else Color.Transparent, CircleShape)
-            .clip(CircleShape)
-            .background(if (isFocused) scheme.primary else scheme.secondary)
-            .onFocusChanged { isFocused = it.isFocused }
-            .clickable { onClick() },
-        contentAlignment = Alignment.Center
-    ) {
-        Icon(
-            imageVector = icon,
-            contentDescription = contentDescription,
-            tint = scheme.onSecondary
-        )
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/button/PurefinTextButton.kt

@@ -1,26 +0,0 @@
-package hu.bbara.purefin.ui.common.button
-
-import androidx.compose.foundation.layout.RowScope
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-
-@Composable
-fun PurefinTextButton(
-    onClick: () -> Unit,
-    modifier: Modifier = Modifier,
-    enabled: Boolean = true,
-    content: @Composable RowScope.() -> Unit // Slot API
-) {
-    Button(
-        onClick = onClick,
-        modifier = modifier,
-        enabled = enabled,
-        colors = ButtonDefaults.buttonColors(
-            containerColor = MaterialTheme.colorScheme.primary
-        ),
-        content = content
-    )
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/card/PosterCard.kt

@@ -1,41 +1,13 @@
 package hu.bbara.purefin.ui.common.card
 
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.focus.onFocusChanged
-import androidx.compose.ui.graphics.TransformOrigin
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import hu.bbara.purefin.ui.common.image.PurefinAsyncImage
-import hu.bbara.purefin.ui.common.badge.UnwatchedEpisodeBadge
-import hu.bbara.purefin.ui.common.badge.WatchStateBadge
+import hu.bbara.purefin.core.model.MediaKind
 import hu.bbara.purefin.feature.browse.home.FocusableItem
 import hu.bbara.purefin.feature.browse.home.PosterItem
 import java.util.UUID
-import hu.bbara.purefin.core.model.MediaKind
 
 @Composable
 fun PosterCard(
@@ -51,106 +23,66 @@ fun PosterCard(
     onSeriesSelected: (UUID) -> Unit,
     onEpisodeSelected: (UUID, UUID, UUID) -> Unit,
 ) {
-    val scheme = MaterialTheme.colorScheme
-    var isFocused by remember { mutableStateOf(false) }
-    val scale by animateFloatAsState(targetValue = if (isFocused) 1.07f else 1.0f, label = "scale")
+    PosterCardContent(
+        model = item.toPosterCardModel(),
+        onClick = { item.open(onMovieSelected, onSeriesSelected, onEpisodeSelected) },
+        modifier = modifier,
+        imageModifier = imageModifier,
+        posterWidth = posterWidth,
+        showSecondaryText = showSecondaryText,
+        indicatorSize = indicatorSize,
+        indicatorPadding = indicatorPadding,
+        onFocused = { onFocusedItem(item) },
+        focusedScale = 1.07f,
+        focusedBorderWidth = 2.dp
+    )
+}
 
-    fun openItem(posterItem: PosterItem) {
-        when (posterItem.type) {
-            MediaKind.MOVIE -> onMovieSelected(posterItem.id)
-            MediaKind.SERIES -> onSeriesSelected(posterItem.id)
-            MediaKind.EPISODE -> {
-                val ep = posterItem.episode!!
-                onEpisodeSelected(ep.seriesId, ep.seasonId, ep.id)
-            }
-            else -> {}
-        }
-    }
-
-    Column(
-        modifier = modifier
-            .width(posterWidth)
-            .graphicsLayer {
-                scaleX = scale
-                scaleY = scale
-                transformOrigin = TransformOrigin(0.5f, 0f)
-            }
-    ) {
-        Box {
-            PurefinAsyncImage(
-                model = item.imageUrl,
-                contentDescription = null,
-                modifier = imageModifier
-                    .aspectRatio(2f / 3f)
-                    .clip(RoundedCornerShape(14.dp))
-                    .border(
-                        width = if (isFocused) 2.dp else 1.dp,
-                        color = if (isFocused) scheme.primary else scheme.outlineVariant.copy(alpha = 0.3f),
-                        shape = RoundedCornerShape(14.dp)
-                    )
-                    .background(scheme.surfaceVariant)
-                    .onFocusChanged {
-                        isFocused = it.isFocused
-                        if (it.isFocused) {
-                            onFocusedItem(item)
-                        }
-                    }
-                    .clickable(onClick = { openItem(item) }),
-                contentScale = ContentScale.Crop
-            )
-            when (item.type) {
-                MediaKind.MOVIE -> {
-                    val m = item.movie!!
-                    WatchStateBadge(
-                        size = indicatorSize,
-                        modifier = Modifier.align(Alignment.TopEnd)
-                            .padding(indicatorPadding),
-                        watched = m.watched,
-                        started = (m.progress ?: 0.0) > 0
-                    )
-                }
-                MediaKind.EPISODE -> {
-                    val ep = item.episode!!
-                    WatchStateBadge(
-                        size = indicatorSize,
-                        modifier = Modifier.align(Alignment.TopEnd)
-                            .padding(indicatorPadding),
-                        watched = ep.watched,
-                        started = (ep.progress ?: 0.0) > 0
-                    )
-                }
-                MediaKind.SERIES -> UnwatchedEpisodeBadge(
-                    size = indicatorSize,
-                    modifier = Modifier.align(Alignment.TopEnd)
-                        .padding(indicatorPadding),
-                    unwatchedCount = item.series!!.unwatchedEpisodeCount
+private fun PosterItem.toPosterCardModel(): PosterCardModel {
+    return PosterCardModel(
+        title = title,
+        secondaryText = secondaryText,
+        imageUrl = imageUrl,
+        mediaKind = type,
+        badge = when (type) {
+            MediaKind.MOVIE -> {
+                val movie = requireNotNull(movie)
+                PosterCardBadge.WatchState(
+                    watched = movie.watched,
+                    started = (movie.progress ?: 0.0) > 0.0
                 )
-                else -> {}
             }
-        }
-        Column(
-            modifier = Modifier.padding(top = 8.dp, start = 4.dp, end = 4.dp, bottom = 8.dp)
-        ) {
-            Text(
-                text = item.title,
-                color = scheme.onBackground,
-                fontSize = 13.sp,
-                fontWeight = FontWeight.Medium,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis
+
+            MediaKind.EPISODE -> {
+                val episode = requireNotNull(episode)
+                PosterCardBadge.WatchState(
+                    watched = episode.watched,
+                    started = (episode.progress ?: 0.0) > 0.0
+                )
+            }
+
+            MediaKind.SERIES -> PosterCardBadge.UnwatchedEpisodes(
+                count = requireNotNull(series).unwatchedEpisodeCount
             )
-            item.secondaryText
-                .takeIf { showSecondaryText }
-                ?.takeIf { it.isNotBlank() }
-                ?.let { text ->
-                    Text(
-                        text = text,
-                        color = scheme.onSurfaceVariant,
-                        fontSize = 11.sp,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis
-                    )
-                }
+
+            else -> PosterCardBadge.None
         }
+    )
+}
+
+private fun PosterItem.open(
+    onMovieSelected: (UUID) -> Unit,
+    onSeriesSelected: (UUID) -> Unit,
+    onEpisodeSelected: (UUID, UUID, UUID) -> Unit,
+) {
+    when (type) {
+        MediaKind.MOVIE -> onMovieSelected(id)
+        MediaKind.SERIES -> onSeriesSelected(id)
+        MediaKind.EPISODE -> {
+            val ep = requireNotNull(episode)
+            onEpisodeSelected(ep.seriesId, ep.seasonId, ep.id)
+        }
+
+        else -> Unit
     }
 }

app-tv/src/main/java/hu/bbara/purefin/ui/common/image/PurefinAsyncImage.kt

@@ -1,38 +0,0 @@
-package hu.bbara.purefin.ui.common.image
-
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.painter.ColorPainter
-import androidx.compose.ui.layout.ContentScale
-import coil3.compose.AsyncImage
-
-/**
- * Async image that falls back to theme-synced color blocks so loading/error states
- * stay aligned with PurefinTheme's colorScheme.
- */
-@Composable
-fun PurefinAsyncImage(
-    model: Any?,
-    contentDescription: String?,
-    modifier: Modifier = Modifier,
-    contentScale: ContentScale = ContentScale.Crop
-) {
-    val placeholderPainter = ColorPainter(MaterialTheme.colorScheme.surfaceVariant)
-
-    // Convert empty string to null to properly trigger fallback
-    val effectiveModel = when {
-        model is String && model.isEmpty() -> null
-        else -> model
-    }
-
-    AsyncImage(
-        model = effectiveModel,
-        contentDescription = contentDescription,
-        modifier = modifier,
-        contentScale = contentScale,
-        placeholder = placeholderPainter,
-        error = placeholderPainter,
-        fallback = placeholderPainter
-    )
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/media/MediaDetailComponents.kt

@@ -1,131 +0,0 @@
-package hu.bbara.purefin.ui.common.media
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-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.Spacer
-import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.foundation.lazy.LazyRow
-import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Person
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.TextUnit
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import hu.bbara.purefin.ui.common.image.PurefinAsyncImage
-import hu.bbara.purefin.core.model.CastMember
-
-@Composable
-fun MediaMetaChip(
-    text: String,
-    background: Color = MaterialTheme.colorScheme.surfaceVariant,
-    border: Color = Color.Transparent,
-    textColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
-    modifier: Modifier = Modifier
-) {
-    Box(
-        modifier = modifier
-            .height(28.dp)
-            .wrapContentHeight(Alignment.CenterVertically)
-            .clip(RoundedCornerShape(6.dp))
-            .background(background)
-            .border(width = 1.dp, color = border, shape = RoundedCornerShape(6.dp))
-            .padding(horizontal = 12.dp),
-        contentAlignment = Alignment.Center
-    ) {
-        Text(
-            text = text,
-            color = textColor,
-            fontSize = 12.sp,
-            fontWeight = FontWeight.Bold
-        )
-    }
-}
-
-@Composable
-fun MediaCastRow(
-    cast: List<CastMember>,
-    modifier: Modifier = Modifier,
-    cardWidth: Dp = 96.dp,
-    nameSize: TextUnit = 12.sp,
-    roleSize: TextUnit = 10.sp
-) {
-    val scheme = MaterialTheme.colorScheme
-    val mutedStrong = scheme.onSurfaceVariant.copy(alpha = 0.7f)
-
-    LazyRow(
-        modifier = modifier,
-        contentPadding = PaddingValues(horizontal = 4.dp),
-        horizontalArrangement = Arrangement.spacedBy(16.dp)
-    ) {
-        items(cast) { member ->
-            Column(modifier = Modifier.width(cardWidth)) {
-                Box(
-                    modifier = Modifier
-                        .aspectRatio(4f / 5f)
-                        .clip(RoundedCornerShape(12.dp))
-                        .background(scheme.surfaceVariant)
-                ) {
-                    if (member.imageUrl == null) {
-                        Box(
-                            modifier = Modifier
-                                .fillMaxSize()
-                                .background(scheme.surfaceVariant.copy(alpha = 0.6f)),
-                            contentAlignment = Alignment.Center
-                        ) {
-                            Icon(
-                                imageVector = Icons.Outlined.Person,
-                                contentDescription = null,
-                                tint = mutedStrong
-                            )
-                        }
-                    } else {
-                        PurefinAsyncImage(
-                            model = member.imageUrl,
-                            contentDescription = null,
-                            modifier = Modifier.fillMaxSize(),
-                            contentScale = ContentScale.Crop
-                        )
-                    }
-                }
-                Spacer(modifier = Modifier.height(6.dp))
-                Text(
-                    text = member.name,
-                    color = scheme.onBackground,
-                    fontSize = nameSize,
-                    fontWeight = FontWeight.Bold,
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
-                )
-                Text(
-                    text = member.role,
-                    color = mutedStrong,
-                    fontSize = roleSize,
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
-                )
-            }
-        }
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/media/MediaDetailsTopBar.kt

@@ -54,6 +54,7 @@ internal fun MediaDetailsTopBar(
     backFocusRequester: FocusRequester? = null,
     downFocusRequester: FocusRequester? = null
 ) {
+    val scheme = MaterialTheme.colorScheme
     val downModifier = if (downFocusRequester != null) {
         Modifier.focusProperties { down = downFocusRequester }
     } else {
@@ -78,7 +79,11 @@ internal fun MediaDetailsTopBar(
                 icon = Icons.AutoMirrored.Outlined.ArrowBack,
                 contentDescription = "Back",
                 onClick = onBack,
-                modifier = backModifier.then(downModifier)
+                modifier = backModifier.then(downModifier),
+                focusedScale = 1.1f,
+                focusedBorderWidth = 2.5.dp,
+                focusedBorderColor = scheme.primary,
+                focusedBackgroundColor = scheme.primary.copy(alpha = 0.25f)
             )
             if (shortcut != null) {
                 GhostTextButton(
@@ -93,13 +98,21 @@ internal fun MediaDetailsTopBar(
                 icon = Icons.Outlined.Cast,
                 contentDescription = "Cast",
                 onClick = onCastClick,
-                modifier = downModifier
+                modifier = downModifier,
+                focusedScale = 1.1f,
+                focusedBorderWidth = 2.5.dp,
+                focusedBorderColor = scheme.primary,
+                focusedBackgroundColor = scheme.primary.copy(alpha = 0.25f)
             )
             GhostIconButton(
                 icon = Icons.Outlined.MoreVert,
                 contentDescription = "More",
                 onClick = onMoreClick,
-                modifier = downModifier
+                modifier = downModifier,
+                focusedScale = 1.1f,
+                focusedBorderWidth = 2.5.dp,
+                focusedBorderColor = scheme.primary,
+                focusedBackgroundColor = scheme.primary.copy(alpha = 0.25f)
             )
         }
     }

app-tv/src/main/java/hu/bbara/purefin/ui/common/media/MediaPlaybackSettings.kt

@@ -1,103 +0,0 @@
-package hu.bbara.purefin.ui.common.media
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.ClosedCaption
-import androidx.compose.material.icons.outlined.ExpandMore
-import androidx.compose.material.icons.outlined.VolumeUp
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-
-@Composable
-fun MediaPlaybackSettings(
-    backgroundColor: Color,
-    foregroundColor: Color,
-    audioTrack: String,
-    subtitles: String,
-    audioIcon: ImageVector = Icons.Outlined.VolumeUp,
-    subtitleIcon: ImageVector = Icons.Outlined.ClosedCaption,
-    modifier: Modifier = Modifier
-) {
-    Column(
-        modifier = modifier
-            .fillMaxWidth()
-    ) {
-        MediaSettingDropdown(
-            backgroundColor = backgroundColor,
-            foregroundColor = foregroundColor,
-            label = "Audio Track",
-            value = audioTrack,
-            icon = audioIcon
-        )
-        Spacer(modifier = Modifier.height(12.dp))
-        MediaSettingDropdown(
-            backgroundColor = backgroundColor,
-            foregroundColor = foregroundColor,
-            label = "Subtitles",
-            value = subtitles,
-            icon = subtitleIcon
-        )
-    }
-}
-
-@Composable
-private fun MediaSettingDropdown(
-    backgroundColor: Color,
-    foregroundColor: Color,
-    label: String,
-    value: String,
-    icon: ImageVector
-) {
-    Row (
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Text(
-            text = label,
-            color = foregroundColor,
-            fontSize = 14.sp,
-            fontWeight = FontWeight.Medium,
-        )
-        Spacer(modifier = Modifier.width(12.dp))
-        Row(
-            modifier = Modifier
-                .height(38.dp)
-                .clip(RoundedCornerShape(12.dp))
-                .background(backgroundColor)
-                .padding(horizontal = 16.dp),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceBetween
-        ) {
-            Row(verticalAlignment = Alignment.CenterVertically) {
-                Icon(
-                    imageVector = icon, contentDescription = null, tint = MaterialTheme.colorScheme.onBackground
-                )
-                Spacer(modifier = Modifier.width(10.dp))
-                Text(text = value, color = foregroundColor, fontSize = 14.sp)
-            }
-            Icon(
-                imageVector = Icons.Outlined.ExpandMore,
-                contentDescription = null,
-                tint = foregroundColor
-            )
-        }
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/media/MediaSynopsis.kt

@@ -1,75 +0,0 @@
-package hu.bbara.purefin.ui.common.media
-
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-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.semantics.Role
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.TextUnit
-import androidx.compose.ui.unit.TextUnit.Companion.Unspecified
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-
-@Composable
-fun MediaSynopsis(
-    synopsis: String,
-    modifier: Modifier = Modifier,
-    title: String = "Synopsis",
-    titleColor: Color = MaterialTheme.colorScheme.onBackground,
-    bodyColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
-    titleFontSize: TextUnit = 18.sp,
-    bodyFontSize: TextUnit = 15.sp,
-    bodyLineHeight: TextUnit? = 22.sp,
-    titleSpacing: Dp = 12.dp,
-    collapsedLines: Int = 3,
-    collapseInitially: Boolean = true
-) {
-    var isExpanded by remember(synopsis) { mutableStateOf(!collapseInitially) }
-    var isOverflowing by remember(synopsis) { mutableStateOf(false) }
-
-    val containerModifier = if (isOverflowing) {
-        modifier.clickable(role = Role.Button) { isExpanded = !isExpanded }
-    } else {
-        modifier
-    }
-
-    Column(modifier = containerModifier) {
-        Text(
-            text = title,
-            color = titleColor,
-            fontSize = titleFontSize,
-            fontWeight = FontWeight.Bold
-        )
-        Spacer(modifier = Modifier.height(titleSpacing))
-        Text(
-            text = synopsis,
-            color = bodyColor,
-            fontSize = bodyFontSize,
-            lineHeight = bodyLineHeight ?: Unspecified,
-            maxLines = if (isExpanded) Int.MAX_VALUE else collapsedLines,
-            overflow = if (isExpanded) TextOverflow.Clip else TextOverflow.Ellipsis,
-            onTextLayout = { result ->
-                val overflowed = if (isExpanded) {
-                    result.lineCount > collapsedLines
-                } else {
-                    result.hasVisualOverflow || result.lineCount > collapsedLines
-                }
-                if (overflowed != isOverflowing) {
-                    isOverflowing = overflowed
-                }
-            }
-        )
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/textfield/PurefinComplexTextField.kt

@@ -1,68 +0,0 @@
-package hu.bbara.purefin.ui.common.textfield
-
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Visibility
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.material3.TextField
-import androidx.compose.material3.TextFieldDefaults
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.input.VisualTransformation
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-
-@Composable
-fun PurefinComplexTextField(
-    label: String,
-    value: String,
-    onValueChange: (String) -> Unit,
-    placeholder: String,
-    leadingIcon: ImageVector? = null,
-    trailingIcon: ImageVector? = null,
-    visualTransformation: VisualTransformation = VisualTransformation.None
-) {
-    val scheme = MaterialTheme.colorScheme
-
-    Column(modifier = Modifier.fillMaxWidth()) {
-        Text(
-            text = label,
-            color = scheme.onBackground,
-            fontWeight = FontWeight.Bold,
-            fontSize = 14.sp,
-            modifier = Modifier.padding(bottom = 8.dp)
-        )
-        TextField(
-            value = value,
-            onValueChange = onValueChange,
-            modifier = Modifier
-                .fillMaxWidth()
-                .clip(RoundedCornerShape(12.dp)),
-            placeholder = { Text(placeholder, color = scheme.onSurfaceVariant) },
-            leadingIcon = if (leadingIcon != null) {
-                { Icon(leadingIcon, contentDescription = null, tint = scheme.onSurfaceVariant) }
-            } else null,
-            trailingIcon = if (trailingIcon != null) {
-                { Icon(Icons.Default.Visibility, contentDescription = null, tint = scheme.onSurfaceVariant) }
-            } else null,
-            visualTransformation = visualTransformation,
-            colors = TextFieldDefaults.colors(
-                focusedContainerColor = scheme.surfaceVariant,
-                unfocusedContainerColor = scheme.surfaceVariant,
-                focusedIndicatorColor = Color.Transparent,
-                unfocusedIndicatorColor = Color.Transparent,
-                cursorColor = scheme.primary,
-                focusedTextColor = scheme.onSurface,
-                unfocusedTextColor = scheme.onSurface
-            ))
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/textfield/PurefinPasswordField.kt

@@ -1,76 +0,0 @@
-package hu.bbara.purefin.ui.common.textfield
-
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Visibility
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.material3.TextField
-import androidx.compose.material3.TextFieldDefaults
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.input.PasswordVisualTransformation
-import androidx.compose.ui.text.input.VisualTransformation
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-
-@Composable
-fun PurefinPasswordField(
-    label: String,
-    value: String,
-    onValueChange: (String) -> Unit,
-    placeholder: String,
-    leadingIcon: ImageVector,
-) {
-    val scheme = MaterialTheme.colorScheme
-
-    val showField = remember { mutableStateOf(false) }
-
-    Column(modifier = Modifier.fillMaxWidth()) {
-        Text(
-            text = label,
-            color = scheme.onBackground,
-            fontWeight = FontWeight.Bold,
-            fontSize = 14.sp,
-            modifier = Modifier.padding(bottom = 8.dp)
-        )
-        TextField(
-            value = value,
-            onValueChange = onValueChange,
-            modifier = Modifier
-                .fillMaxWidth()
-                .clip(RoundedCornerShape(12.dp)),
-            placeholder = { Text(placeholder, color = scheme.onSurfaceVariant) },
-            leadingIcon = { Icon(leadingIcon, contentDescription = null, tint = scheme.onSurfaceVariant) },
-            trailingIcon =
-                {
-                    IconButton(
-                        onClick = { showField.value = !showField.value },
-                    ) {
-                        Icon(Icons.Default.Visibility, contentDescription = null, tint = scheme.onSurfaceVariant)
-                    }
-                },
-            visualTransformation = if (showField.value) VisualTransformation.None else PasswordVisualTransformation(),
-            colors = TextFieldDefaults.colors(
-                focusedContainerColor = scheme.surfaceVariant,
-                unfocusedContainerColor = scheme.surfaceVariant,
-                focusedIndicatorColor = Color.Transparent,
-                unfocusedIndicatorColor = Color.Transparent,
-                cursorColor = scheme.primary,
-                focusedTextColor = scheme.onSurface,
-                unfocusedTextColor = scheme.onSurface
-            )
-        )
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/common/visual/TimedVisibility.kt

@@ -1,87 +0,0 @@
-package hu.bbara.purefin.ui.common.visual
-
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.EnterTransition
-import androidx.compose.animation.ExitTransition
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
-import kotlinx.coroutines.delay
-
-/**
- * A composable that displays content for a specified duration after the value becomes null.
- *
- * @param value The value to display. When set to a non-null value, it will be shown immediately.
- *              When set to null, the previously shown value will remain visible for [hideAfterMillis]
- *              before being hidden.
- * @param hideAfterMillis The duration in milliseconds to keep showing the last value after [value] becomes null.
- *                        Defaults to 1000ms (1 second).
- * @param content The composable content to display, receiving the current non-null value.
- */
-@Composable
-fun <T> EmptyValueTimedVisibility(
-    value: T?,
-    hideAfterMillis: Long = 1_000,
-    modifier: Modifier = Modifier,
-    content: @Composable (T) -> Unit
-) {
-    val shownValue = remember { mutableStateOf<T?>(null) }
-
-    LaunchedEffect(value) {
-        if (value == null) {
-            delay(hideAfterMillis)
-            shownValue.value = null
-        }
-        shownValue.value = value
-    }
-
-    shownValue.value?.let {
-        content(it)
-    }
-}
-
-/**
- * Displays [content] whenever [value] changes and hides it after [hideAfterMillis]
- * milliseconds without further updates.
- *
- * @param value The value whose changes should trigger visibility.
- * @param hideAfterMillis Duration in milliseconds after which the content will be hidden
- *                        if [value] has not changed again.
- * @param content The composable to render while visible.
- */
-@Composable
-fun <T> ValueChangeTimedVisibility(
-    value: T,
-    hideAfterMillis: Long = 1_000,
-    modifier: Modifier = Modifier,
-    content: @Composable (T) -> Unit
-) {
-    var displayedValue by remember { mutableStateOf(value) }
-    var isVisible by remember { mutableStateOf(false) }
-    var hasInitialValue by remember { mutableStateOf(false) }
-
-    LaunchedEffect(value) {
-        displayedValue = value
-        if (!hasInitialValue) {
-            hasInitialValue = true
-            return@LaunchedEffect
-        }
-
-        isVisible = true
-        delay(hideAfterMillis)
-        isVisible = false
-    }
-
-    AnimatedVisibility(
-        visible = isVisible,
-        modifier = modifier,
-        enter = EnterTransition.None,
-        exit = ExitTransition.None
-    ) {
-        content(displayedValue)
-    }
-}

app-tv/src/main/java/hu/bbara/purefin/ui/screen/episode/components/TvEpisodeComponents.kt

@@ -2,8 +2,6 @@ package hu.bbara.purefin.ui.screen.episode.components
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -20,13 +18,14 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import hu.bbara.purefin.ui.common.media.MediaMetaChip
 import hu.bbara.purefin.ui.common.button.MediaResumeButton
+import hu.bbara.purefin.ui.common.media.MediaMetadataFlowRow
+import hu.bbara.purefin.ui.common.media.mediaPlaybackProgress
+import hu.bbara.purefin.ui.common.media.mediaPlayButtonText
 import hu.bbara.purefin.core.model.Episode
 
 internal const val EpisodePlayButtonTag = "episode-play-button"
 
-@OptIn(ExperimentalLayoutApi::class)
 @Composable
 internal fun TvEpisodeHeroSection(
     episode: Episode,
@@ -71,33 +70,26 @@ internal fun TvEpisodeHeroSection(
             fontWeight = FontWeight.Medium
         )
         Spacer(modifier = Modifier.height(18.dp))
-        FlowRow(
-            horizontalArrangement = Arrangement.spacedBy(8.dp),
-            verticalArrangement = Arrangement.spacedBy(8.dp)
-        ) {
-            MediaMetaChip(text = episode.releaseDate)
-            MediaMetaChip(text = episode.rating)
-            MediaMetaChip(text = episode.runtime)
-            MediaMetaChip(
-                text = episode.format,
-                background = scheme.primary.copy(alpha = 0.2f),
-                border = scheme.primary.copy(alpha = 0.35f),
-                textColor = scheme.primary
-            )
-        }
+        MediaMetadataFlowRow(
+            items = listOf(episode.releaseDate, episode.rating, episode.runtime, episode.format),
+            highlightedItem = episode.format
+        )
         Spacer(modifier = Modifier.height(24.dp))
         MediaResumeButton(
-            text = episode.playButtonText(),
-            progress = episode.progress?.div(100)?.toFloat() ?: 0f,
+            text = mediaPlayButtonText(episode.progress, episode.watched),
+            progress = mediaPlaybackProgress(episode.progress),
             onClick = onPlay,
             modifier = Modifier
                 .sizeIn(minWidth = 216.dp, maxWidth = 240.dp)
                 .focusRequester(playFocusRequester)
-                .testTag(EpisodePlayButtonTag)
+                .testTag(EpisodePlayButtonTag),
+            focusedScale = 1.08f,
+            focusHaloColor = scheme.primary.copy(alpha = 0.22f),
+            focusBorderWidth = 3.dp,
+            focusBorderColor = scheme.onBackground,
+            overlayBorderWidth = 2.dp,
+            overlayBorderColor = scheme.primary.copy(alpha = 0.95f),
+            focusable = true
         )
     }
 }
-
-private fun Episode.playButtonText(): String {
-    return if ((progress ?: 0.0) > 0.0 && !watched) "Resume" else "Play"
-}

app-tv/src/main/java/hu/bbara/purefin/ui/screen/library/TvLibraryScreen.kt

@@ -64,6 +64,7 @@ private fun TvLibraryTopBar(
     title: String,
     onBack: () -> Unit
 ) {
+    val scheme = MaterialTheme.colorScheme
     Row(
         modifier = Modifier
             .fillMaxWidth()
@@ -74,7 +75,11 @@ private fun TvLibraryTopBar(
         PurefinIconButton(
             icon = Icons.AutoMirrored.Outlined.ArrowBack,
             contentDescription = "Back",
-            onClick = onBack
+            onClick = onBack,
+            focusedScale = 1.1f,
+            focusedBorderWidth = 2.5.dp,
+            focusedBorderColor = scheme.onPrimary,
+            focusedBackgroundColor = scheme.primary
         )
         Text(
             text = title,

app-tv/src/main/java/hu/bbara/purefin/ui/screen/login/LoginScreen.kt

@@ -1,29 +1,5 @@
 package hu.bbara.purefin.ui.screen.login
 
-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.Row
-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.layout.size
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Lock
-import androidx.compose.material.icons.filled.Movie
-import androidx.compose.material.icons.filled.Person
-import androidx.compose.material.icons.filled.Search
-import androidx.compose.material.icons.filled.Storage
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -31,16 +7,8 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
-import hu.bbara.purefin.ui.common.textfield.PurefinComplexTextField
-import hu.bbara.purefin.ui.common.textfield.PurefinPasswordField
-import hu.bbara.purefin.ui.common.button.PurefinTextButton
-import hu.bbara.purefin.ui.screen.waiting.PurefinWaitingScreen
 import hu.bbara.purefin.feature.login.LoginViewModel
 import kotlinx.coroutines.launch
 
@@ -49,166 +17,52 @@ fun LoginScreen(
     viewModel: LoginViewModel = hiltViewModel(),
     modifier: Modifier = Modifier
 ) {
-    val scheme = MaterialTheme.colorScheme
-
-    // Observe ViewModel state
     val serverUrl by viewModel.url.collectAsState()
     val username by viewModel.username.collectAsState()
     val password by viewModel.password.collectAsState()
     val errorMessage by viewModel.errorMessage.collectAsState()
     var isLoggingIn by remember { mutableStateOf(false) }
-
     val coroutineScope = rememberCoroutineScope()
 
-    if (isLoggingIn) {
-        PurefinWaitingScreen(modifier = modifier)
-    } else {
-        Column(
-            modifier = modifier
-                .fillMaxSize()
-                .background(scheme.background)
-                .padding(24.dp)
-                .verticalScroll(rememberScrollState()),
-            horizontalAlignment = Alignment.CenterHorizontally
-        ) {
-            Spacer(modifier = Modifier.weight(0.5f))
-
-            // Logo Section
-            Box(
-                modifier = Modifier
-                    .size(100.dp)
-                    .background(scheme.primary, RoundedCornerShape(24.dp)),
-                contentAlignment = Alignment.Center
-            ) {
-                Icon(
-                    imageVector = Icons.Default.Movie,
-                    contentDescription = "Logo",
-                    tint = scheme.onPrimary,
-                    modifier = Modifier.size(60.dp)
-                )
-            }
-
-            Text(
-                text = "Jellyfin",
-                color = scheme.onBackground,
-                fontSize = 32.sp,
-                fontWeight = FontWeight.Bold,
-                modifier = Modifier.padding(top = 16.dp)
-            )
-            Text(
-                text = "PERSONAL MEDIA SYSTEM",
-                color = scheme.onSurfaceVariant,
-                fontSize = 12.sp,
-                letterSpacing = 2.sp
-            )
-
-            Spacer(modifier = Modifier.height(48.dp))
-
-            // Form Section
-            Text(
-                text = "Connect to Server",
-                color = scheme.onBackground,
-                fontSize = 22.sp,
-                fontWeight = FontWeight.Bold,
-                modifier = Modifier.align(Alignment.Start)
-            )
-            Text(
-                text = "Enter your details to access your library",
-                color = scheme.onSurfaceVariant,
-                fontSize = 14.sp,
-                modifier = Modifier
-                    .align(Alignment.Start)
-                    .padding(bottom = 24.dp)
-            )
-
-            if (errorMessage != null) {
-                Text(
-                    text = errorMessage!!,
-                    color = scheme.error,
-                    fontSize = 14.sp,
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .background(
-                            scheme.errorContainer,
-                            RoundedCornerShape(8.dp)
-                        )
-                        .padding(12.dp)
-                )
-                Spacer(modifier = Modifier.height(16.dp))
-            }
-
-            PurefinComplexTextField(
-                label = "Server URL",
-                value = serverUrl,
-                onValueChange = {
-                    viewModel.clearError()
-                    viewModel.setUrl(it)
-                },
-                placeholder = "http://192.168.1.100:8096",
-                leadingIcon = Icons.Default.Storage
-            )
-
-            Spacer(modifier = Modifier.height(16.dp))
-
-            PurefinComplexTextField(
-                label = "Username",
-                value = username,
-                onValueChange = {
-                    viewModel.clearError()
-                    viewModel.setUsername(it)
-                },
-                placeholder = "Enter your username",
-                leadingIcon = Icons.Default.Person
-            )
-
-            Spacer(modifier = Modifier.height(16.dp))
-
-            PurefinPasswordField(
-                label = "Password",
-                value = password,
-                onValueChange = {
-                    viewModel.clearError()
-                    viewModel.setPassword(it)
-                },
-                placeholder = "••••••••",
-                leadingIcon = Icons.Default.Lock,
-            )
-
-            Spacer(modifier = Modifier.height(32.dp))
-
-            PurefinTextButton(
-                content = { Text("Connect") },
-                onClick = {
-                    coroutineScope.launch {
-                        isLoggingIn = true
-                        try {
-                            viewModel.login()
-                        } finally {
-                            isLoggingIn = false
-                        }
-                    }
-                }
-            )
-
-            Spacer(modifier = Modifier.weight(0.5f))
-
-            // Footer Links
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.SpaceBetween
-            ) {
-                TextButton(onClick = {}) {
-                    Row(verticalAlignment = Alignment.CenterVertically) {
-                        Icon(Icons.Default.Search, contentDescription = null, tint = scheme.onSurfaceVariant, modifier = Modifier.size(18.dp))
-                        Text(" Discover Servers", color = scheme.onSurfaceVariant)
-                    }
-                }
-                TextButton(onClick = {}) {
-                    Text("Need Help?", color = scheme.onSurfaceVariant)
-                }
-            }
-
-            Spacer(modifier = Modifier.height(16.dp))
-        }
+    val state = remember(serverUrl, username, password, errorMessage) {
+        LoginContentState(
+            serverUrl = serverUrl,
+            username = username,
+            password = password,
+            errorMessage = errorMessage
+        )
     }
+    val callbacks = remember(viewModel, coroutineScope) {
+        LoginContentCallbacks(
+            onServerUrlChange = {
+                viewModel.clearError()
+                viewModel.setUrl(it)
+            },
+            onUsernameChange = {
+                viewModel.clearError()
+                viewModel.setUsername(it)
+            },
+            onPasswordChange = {
+                viewModel.clearError()
+                viewModel.setPassword(it)
+            },
+            onConnect = {
+                coroutineScope.launch {
+                    isLoggingIn = true
+                    try {
+                        viewModel.login()
+                    } finally {
+                        isLoggingIn = false
+                    }
+                }
+            }
+        )
+    }
+
+    LoginContent(
+        state = state,
+        callbacks = callbacks,
+        isLoggingIn = isLoggingIn,
+        modifier = modifier
+    )
 }

app-tv/src/main/java/hu/bbara/purefin/ui/screen/movie/components/TvMovieComponents.kt

@@ -2,8 +2,6 @@ package hu.bbara.purefin.ui.screen.movie.components
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -20,13 +18,14 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import hu.bbara.purefin.ui.common.media.MediaMetaChip
 import hu.bbara.purefin.ui.common.button.MediaResumeButton
+import hu.bbara.purefin.ui.common.media.MediaMetadataFlowRow
+import hu.bbara.purefin.ui.common.media.mediaPlaybackProgress
+import hu.bbara.purefin.ui.common.media.mediaPlayButtonText
 import hu.bbara.purefin.core.model.Movie
 
 internal const val MoviePlayButtonTag = "movie-play-button"
 
-@OptIn(ExperimentalLayoutApi::class)
 @Composable
 internal fun TvMovieHeroSection(
     movie: Movie,
@@ -51,33 +50,26 @@ internal fun TvMovieHeroSection(
             overflow = TextOverflow.Ellipsis
         )
         Spacer(modifier = Modifier.height(18.dp))
-        FlowRow(
-            horizontalArrangement = Arrangement.spacedBy(8.dp),
-            verticalArrangement = Arrangement.spacedBy(8.dp)
-        ) {
-            MediaMetaChip(text = movie.year)
-            MediaMetaChip(text = movie.rating)
-            MediaMetaChip(text = movie.runtime)
-            MediaMetaChip(
-                text = movie.format,
-                background = scheme.primary.copy(alpha = 0.2f),
-                border = scheme.primary.copy(alpha = 0.35f),
-                textColor = scheme.primary
-            )
-        }
+        MediaMetadataFlowRow(
+            items = listOf(movie.year, movie.rating, movie.runtime, movie.format),
+            highlightedItem = movie.format
+        )
         Spacer(modifier = Modifier.height(24.dp))
         MediaResumeButton(
-            text = movie.playButtonText(),
-            progress = movie.progress?.div(100)?.toFloat() ?: 0f,
+            text = mediaPlayButtonText(movie.progress, movie.watched),
+            progress = mediaPlaybackProgress(movie.progress),
             onClick = onPlay,
             modifier = Modifier
                 .sizeIn(minWidth = 216.dp, maxWidth = 240.dp)
                 .focusRequester(playFocusRequester)
-                .testTag(MoviePlayButtonTag)
+                .testTag(MoviePlayButtonTag),
+            focusedScale = 1.08f,
+            focusHaloColor = scheme.primary.copy(alpha = 0.22f),
+            focusBorderWidth = 3.dp,
+            focusBorderColor = scheme.onBackground,
+            overlayBorderWidth = 2.dp,
+            overlayBorderColor = scheme.primary.copy(alpha = 0.95f),
+            focusable = true
         )
     }
 }
-
-private fun Movie.playButtonText(): String {
-    return if ((progress ?: 0.0) > 0.0 && !watched) "Resume" else "Play"
-}

app-tv/src/main/java/hu/bbara/purefin/ui/screen/player/components/TvPlayerLoadingErrorEndCard.kt

@@ -1,23 +1,8 @@
 package hu.bbara.purefin.ui.screen.player.components
 
-import androidx.compose.animation.AnimatedVisibility
-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.Row
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import hu.bbara.purefin.core.player.model.PlayerUiState
 
@@ -30,84 +15,17 @@ internal fun TvPlayerLoadingErrorEndCard(
     onDismissError: () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    val scheme = MaterialTheme.colorScheme
-
-    Box(modifier = modifier) {
-        AnimatedVisibility(visible = uiState.isBuffering && uiState.error == null) {
-            CircularProgressIndicator(color = scheme.primary)
-        }
-
-        AnimatedVisibility(visible = uiState.error != null) {
-            Column(
-                modifier = Modifier
-                    .clip(RoundedCornerShape(16.dp))
-                    .background(scheme.background.copy(alpha = 0.92f))
-                    .padding(24.dp),
-                horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.spacedBy(16.dp)
-            ) {
-                Text(
-                    text = uiState.error ?: "Playback error",
-                    color = scheme.onBackground,
-                    fontWeight = FontWeight.Bold,
-                    style = MaterialTheme.typography.titleMedium
-                )
-                Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
-                    Button(onClick = onRetry) {
-                        Text("Retry")
-                    }
-                    Button(
-                        onClick = onDismissError,
-                        colors = ButtonDefaults.buttonColors(
-                            containerColor = scheme.surface
-                        )
-                    ) {
-                        Text("Dismiss", color = scheme.onSurface)
-                    }
-                }
-            }
-        }
-
-        AnimatedVisibility(visible = uiState.isEnded && uiState.error == null && !uiState.isBuffering) {
-            val nextUp = uiState.queue.getOrNull(
-                uiState.queue.indexOfFirst { it.isCurrent }
-                    .takeIf { it >= 0 }
-                    ?.plus(1) ?: -1
-            )
-            Column(
-                modifier = Modifier
-                    .clip(RoundedCornerShape(16.dp))
-                    .background(scheme.background.copy(alpha = 0.92f))
-                    .padding(24.dp),
-                horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.spacedBy(16.dp)
-            ) {
-                if (nextUp != null) {
-                    Text(
-                        text = "Up next",
-                        color = scheme.primary,
-                        fontWeight = FontWeight.Medium
-                    )
-                    Text(
-                        text = nextUp.title,
-                        color = scheme.onBackground,
-                        fontWeight = FontWeight.Bold,
-                        style = MaterialTheme.typography.titleMedium
-                    )
-                    Button(onClick = onNext) {
-                        Text("Play next")
-                    }
-                } else {
-                    Text(
-                        text = "Playback finished",
-                        color = scheme.onBackground,
-                        style = MaterialTheme.typography.titleMedium
-                    )
-                    Button(onClick = onReplay) {
-                        Text("Replay")
-                    }
-                }
-            }
-        }
-    }
+    PlayerLoadingErrorEndCardContent(
+        uiState = uiState,
+        onRetry = onRetry,
+        onNext = onNext,
+        onReplay = onReplay,
+        onDismissError = onDismissError,
+        modifier = modifier,
+        showBufferWhileError = false,
+        cardPadding = 24.dp,
+        cardSpacing = 16.dp,
+        backgroundAlpha = 0.92f,
+        headlineStyle = MaterialTheme.typography.titleMedium
+    )
 }

app-tv/src/main/java/hu/bbara/purefin/ui/screen/player/components/TvPlayerSeekBar.kt

@@ -1,6 +1,5 @@
 package hu.bbara.purefin.ui.screen.player.components
 
-import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.focusable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
@@ -18,15 +17,12 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.input.key.Key
 import androidx.compose.ui.input.key.KeyEventType
 import androidx.compose.ui.input.key.key
 import androidx.compose.ui.input.key.onPreviewKeyEvent
 import androidx.compose.ui.input.key.type
 import androidx.compose.ui.unit.dp
-import hu.bbara.purefin.core.player.model.MarkerType
 import hu.bbara.purefin.core.player.model.TimedMarker
 
 @Composable
@@ -43,13 +39,8 @@ internal fun TvPlayerSeekBar(
     focusRequester: FocusRequester = remember { FocusRequester() },
     modifier: Modifier = Modifier
 ) {
-    val scheme = MaterialTheme.colorScheme
     val safeDuration = durationMs.takeIf { it > 0 } ?: 1L
     val position = positionMs.coerceIn(0, safeDuration)
-    val bufferRatio = (bufferedMs.toFloat() / safeDuration).coerceIn(0f, 1f)
-    val progressRatio = (position.toFloat() / safeDuration).coerceIn(0f, 1f)
-    val combinedMarkers = chapterMarkers.map { it.copy(type = MarkerType.CHAPTER) } +
-        adMarkers.map { it.copy(type = MarkerType.AD) }
     var isFocused by remember { mutableStateOf(false) }
 
     Box(
@@ -90,52 +81,17 @@ internal fun TvPlayerSeekBar(
             .focusable(),
         contentAlignment = Alignment.Center
     ) {
-        Canvas(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(horizontal = 2.dp, vertical = 10.dp)
-        ) {
-            val trackHeight = if (isFocused) 6f else 4f
-            val trackTop = size.height / 2 - trackHeight / 2
-            drawRect(
-                color = scheme.onSurface.copy(alpha = 0.2f),
-                size = Size(width = size.width, height = trackHeight),
-                topLeft = Offset(0f, trackTop)
-            )
-            drawRect(
-                color = scheme.onSurface.copy(alpha = 0.4f),
-                size = Size(width = bufferRatio * size.width, height = trackHeight),
-                topLeft = Offset(0f, trackTop)
-            )
-            val progressWidth = progressRatio * size.width
-            drawRect(
-                color = scheme.primary,
-                size = Size(width = progressWidth, height = trackHeight),
-                topLeft = Offset(0f, trackTop)
-            )
-            val thumbRadius = if (isFocused) 9.dp.toPx() else 7.dp.toPx()
-            val thumbCenter = Offset(progressWidth.coerceIn(0f, size.width), size.height / 2)
-            drawCircle(
-                color = scheme.primary,
-                radius = thumbRadius,
-                center = thumbCenter
-            )
-            if (isFocused) {
-                drawCircle(
-                    color = scheme.primary.copy(alpha = 0.3f),
-                    radius = thumbRadius + 4.dp.toPx(),
-                    center = thumbCenter
-                )
-            }
-            combinedMarkers.forEach { marker ->
-                val x = (marker.positionMs.toFloat() / safeDuration) * size.width
-                val color = if (marker.type == MarkerType.AD) scheme.secondary else scheme.primary
-                drawRect(
-                    color = color,
-                    topLeft = Offset(x - 1f, size.height / 2 - 6f),
-                    size = Size(width = 2f, height = 12f)
-                )
-            }
-        }
+        PlayerSeekBarTrack(
+            positionMs = position,
+            durationMs = safeDuration,
+            bufferedMs = bufferedMs,
+            chapterMarkers = chapterMarkers,
+            adMarkers = adMarkers,
+            modifier = Modifier.fillMaxSize(),
+            isFocused = isFocused,
+            thumbRadius = 7.dp,
+            focusedThumbRadius = 9.dp,
+            focusedThumbHaloRadiusDelta = 4.dp
+        )
     }
 }

app-tv/src/main/java/hu/bbara/purefin/ui/screen/series/components/TvSeriesComponents.kt

@@ -8,8 +8,6 @@ import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
@@ -54,11 +52,13 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
 import hu.bbara.purefin.ui.common.media.MediaCastRow
-import hu.bbara.purefin.ui.common.media.MediaMetaChip
 import hu.bbara.purefin.ui.common.bar.MediaProgressBar
 import hu.bbara.purefin.ui.common.button.MediaResumeButton
 import hu.bbara.purefin.ui.common.image.PurefinAsyncImage
 import hu.bbara.purefin.ui.common.badge.WatchStateBadge
+import hu.bbara.purefin.ui.common.media.MediaMetadataFlowRow
+import hu.bbara.purefin.ui.common.media.mediaPlaybackProgress
+import hu.bbara.purefin.ui.common.media.mediaPlayButtonText
 import hu.bbara.purefin.core.image.ImageUrlBuilder
 import hu.bbara.purefin.core.model.CastMember
 import hu.bbara.purefin.core.model.Episode
@@ -70,17 +70,11 @@ import hu.bbara.purefin.core.image.ArtworkKind
 internal const val SeriesPlayButtonTag = "series-play-button"
 internal const val SeriesFirstSeasonTabTag = "series-first-season-tab"
 
-@OptIn(ExperimentalLayoutApi::class)
 @Composable
 internal fun TvSeriesMetaChips(series: Series) {
-    val scheme = MaterialTheme.colorScheme
-    FlowRow(
-        horizontalArrangement = Arrangement.spacedBy(8.dp),
-        verticalArrangement = Arrangement.spacedBy(8.dp)
-    ) {
-        MediaMetaChip(text = series.year)
-        MediaMetaChip(text = "${series.seasonCount} Seasons")
-    }
+    MediaMetadataFlowRow(
+        items = listOf(series.year, "${series.seasonCount} Seasons")
+    )
 }
 
 @Composable
@@ -241,14 +235,21 @@ internal fun TvSeriesHeroSection(
             )
             Spacer(modifier = Modifier.height(24.dp))
             MediaResumeButton(
-                text = nextUpEpisode.playButtonText(),
-                progress = nextUpEpisode.progress?.div(100)?.toFloat() ?: 0f,
+                text = mediaPlayButtonText(nextUpEpisode.progress, nextUpEpisode.watched),
+                progress = mediaPlaybackProgress(nextUpEpisode.progress),
                 onClick = { onPlayEpisode(nextUpEpisode) },
                 modifier = Modifier
                     .sizeIn(minWidth = 216.dp, maxWidth = 240.dp)
                     .focusRequester(playFocusRequester)
                     .focusProperties { down = firstContentFocusRequester }
-                    .testTag(SeriesPlayButtonTag)
+                    .testTag(SeriesPlayButtonTag),
+                focusedScale = 1.08f,
+                focusHaloColor = scheme.primary.copy(alpha = 0.22f),
+                focusBorderWidth = 3.dp,
+                focusBorderColor = scheme.onBackground,
+                overlayBorderWidth = 2.dp,
+                overlayBorderColor = scheme.primary.copy(alpha = 0.95f),
+                focusable = true
             )
         } else {
             Text(
@@ -376,10 +377,6 @@ internal fun CastRow(cast: List<CastMember>, modifier: Modifier = Modifier) {
     )
 }
 
-private fun Episode.playButtonText(): String {
-    return if ((progress ?: 0.0) > 0.0 && !watched) "Resume" else "Play"
-}
-
 private fun Episode.heroStatusText(): String {
     return if ((progress ?: 0.0) > 0.0 && !watched) "Continue Watching" else "Up Next"
 }

app-tv/src/main/java/hu/bbara/purefin/ui/screen/waiting/WaitingScreen.kt

@@ -1,199 +0,0 @@
-package hu.bbara.purefin.ui.screen.waiting
-
-import androidx.compose.animation.core.FastOutSlowInEasing
-import androidx.compose.animation.core.RepeatMode
-import androidx.compose.animation.core.animateFloat
-import androidx.compose.animation.core.infiniteRepeatable
-import androidx.compose.animation.core.rememberInfiniteTransition
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Movie
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-
-@Composable
-fun PurefinWaitingScreen(
-    modifier: Modifier = Modifier
-) {
-    val scheme = MaterialTheme.colorScheme
-    val accentColor = scheme.primary
-    val backgroundColor = scheme.background
-    val surfaceColor = scheme.surface
-    val textPrimary = scheme.onSurface
-    val textSecondary = scheme.onSurfaceVariant
-
-    val transition = rememberInfiniteTransition(label = "waiting-pulse")
-    val pulseScale = transition.animateFloat(
-        initialValue = 0.9f,
-        targetValue = 1.15f,
-        animationSpec = infiniteRepeatable(
-            animation = tween(durationMillis = 1400, easing = FastOutSlowInEasing),
-            repeatMode = RepeatMode.Reverse
-        ),
-        label = "pulse-scale"
-    )
-    val pulseAlpha = transition.animateFloat(
-        initialValue = 0.2f,
-        targetValue = 0.6f,
-        animationSpec = infiniteRepeatable(
-            animation = tween(durationMillis = 1400, easing = FastOutSlowInEasing),
-            repeatMode = RepeatMode.Reverse
-        ),
-        label = "pulse-alpha"
-    )
-
-    val gradient = Brush.radialGradient(
-        colors = listOf(
-            accentColor.copy(alpha = 0.28f),
-            backgroundColor
-        )
-    )
-
-    Box(
-        modifier = modifier
-            .fillMaxSize()
-            .background(gradient)
-            .padding(24.dp),
-        contentAlignment = Alignment.Center
-    ) {
-        Column(
-            modifier = Modifier
-                .clip(RoundedCornerShape(28.dp))
-                .background(surfaceColor.copy(alpha = 0.92f))
-                .padding(horizontal = 28.dp, vertical = 32.dp),
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center
-        ) {
-            Box(contentAlignment = Alignment.Center) {
-                Box(
-                    modifier = Modifier
-                        .size(86.dp)
-                        .graphicsLayer {
-                            scaleX = pulseScale.value
-                            scaleY = pulseScale.value
-                        }
-                        .alpha(pulseAlpha.value)
-                        .border(
-                            width = 2.dp,
-                            color = accentColor.copy(alpha = 0.6f),
-                            shape = RoundedCornerShape(26.dp)
-                        )
-                )
-                Box(
-                    modifier = Modifier
-                        .size(72.dp)
-                        .clip(RoundedCornerShape(22.dp))
-                        .background(accentColor),
-                    contentAlignment = Alignment.Center
-                ) {
-                    Icon(
-                        imageVector = Icons.Outlined.Movie,
-                        contentDescription = null,
-                        tint = scheme.onPrimary,
-                        modifier = Modifier.size(40.dp)
-                    )
-                }
-            }
-
-            Spacer(modifier = Modifier.height(20.dp))
-
-            Text(
-                text = "Just a moment",
-                color = textPrimary,
-                fontSize = 20.sp,
-                fontWeight = FontWeight.Bold
-            )
-            Text(
-                text = "I am doing all I can...",
-                color = textSecondary,
-                fontSize = 14.sp
-            )
-
-            Spacer(modifier = Modifier.height(24.dp))
-
-            WaitingDots(accentColor = accentColor)
-        }
-    }
-}
-
-@Composable
-private fun WaitingDots(accentColor: Color, modifier: Modifier = Modifier) {
-    val transition = rememberInfiniteTransition(label = "waiting-dots")
-    val firstAlpha = transition.animateFloat(
-        initialValue = 0.3f,
-        targetValue = 1f,
-        animationSpec = infiniteRepeatable(
-            animation = tween(durationMillis = 700, delayMillis = 0, easing = FastOutSlowInEasing),
-            repeatMode = RepeatMode.Reverse
-        ),
-        label = "dot-1"
-    )
-    val secondAlpha = transition.animateFloat(
-        initialValue = 0.3f,
-        targetValue = 1f,
-        animationSpec = infiniteRepeatable(
-            animation = tween(durationMillis = 700, delayMillis = 140, easing = FastOutSlowInEasing),
-            repeatMode = RepeatMode.Reverse
-        ),
-        label = "dot-2"
-    )
-    val thirdAlpha = transition.animateFloat(
-        initialValue = 0.3f,
-        targetValue = 1f,
-        animationSpec = infiniteRepeatable(
-            animation = tween(durationMillis = 700, delayMillis = 280, easing = FastOutSlowInEasing),
-            repeatMode = RepeatMode.Reverse
-        ),
-        label = "dot-3"
-    )
-
-    Row(
-        modifier = modifier,
-        horizontalArrangement = Arrangement.spacedBy(10.dp),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        WaitingDot(alpha = firstAlpha.value, color = accentColor)
-        WaitingDot(alpha = secondAlpha.value, color = accentColor)
-        WaitingDot(alpha = thirdAlpha.value, color = accentColor)
-    }
-}
-
-@Composable
-private fun WaitingDot(alpha: Float, color: Color) {
-    Box(
-        modifier = Modifier
-            .size(10.dp)
-            .graphicsLayer {
-                val scale = 0.7f + (alpha * 0.3f)
-                scaleX = scale
-                scaleY = scale
-            }
-            .alpha(alpha)
-            .background(color, CircleShape)
-    )
-}