Support picture in picture

app/build.gradle.kts

@@ -19,7 +19,7 @@ android {
 
     defaultConfig {
         applicationId = appPackageName
-        minSdk = 21
+        minSdk = 26
         targetSdk = 34
         versionCode = 289
         versionName = "8.0.5"

app/src/main/AndroidManifest.xml

@@ -27,7 +27,8 @@
             android:name=".ui.MainActivity"
             android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"
             android:exported="true"
-            android:launchMode="singleTask">
+            android:launchMode="singleTask"
+            android:supportsPictureInPicture="true">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 

app/src/main/kotlin/com/livetl/android/ui/screen/player/PlayerScreen.kt

@@ -17,14 +17,14 @@ import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import timber.log.Timber
 
-// TODO: draw over apps as overlay
 @Composable
 fun PlayerScreen(videoId: String, viewModel: PlayerViewModel = hiltViewModel()) {
     val coroutineScope = rememberCoroutineScope()
 
     var streamInfo by remember { mutableStateOf<StreamInfo?>(null) }
     var chatState by remember { mutableStateOf<ChatState>(ChatState.LOADING) }
 
+    // TODO: handle time change for archives
     fun onCurrentSecond(second: Long) {
         // Live chats don't need to be progressed manually
         if (streamInfo?.isLive == false) {

app/src/main/kotlin/com/livetl/android/ui/screen/player/composable/PlayerTabs.kt

@@ -1,6 +1,8 @@
 package com.livetl.android.ui.screen.player.composable
 
+import android.app.PictureInPictureParams
 import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
@@ -11,6 +13,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.Chat
 import androidx.compose.material.icons.outlined.KeyboardArrowDown
 import androidx.compose.material.icons.outlined.KeyboardArrowUp
+import androidx.compose.material.icons.outlined.PictureInPictureAlt
 import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.material3.Button
 import androidx.compose.material3.HorizontalDivider
@@ -27,14 +30,20 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.util.fastForEachIndexed
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.livetl.android.R
+import com.livetl.android.data.chat.ChatMessage
 import com.livetl.android.data.stream.StreamInfo
 import com.livetl.android.ui.screen.player.PlayerViewModel
 import com.livetl.android.ui.screen.player.composable.chat.ChatState
 import com.livetl.android.util.collectAsState
+import com.livetl.android.util.findActivity
+import com.livetl.android.util.rememberIsInPipMode
+import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf
 import kotlinx.coroutines.launch
 
@@ -45,17 +54,52 @@ private enum class Tabs(@StringRes val nameRes: Int, val icon: ImageVector) {
 private val tabs = Tabs.entries
 
 @Composable
-fun PlayerTabs(streamInfo: StreamInfo?, chatState: ChatState, modifier: Modifier = Modifier, viewModel: PlayerViewModel = viewModel()) {
+fun PlayerTabs(
+    streamInfo: StreamInfo?,
+    chatState: ChatState,
+    modifier: Modifier = Modifier,
+    viewModel: PlayerViewModel = viewModel(),
+) {
+    val isInPipMode = rememberIsInPipMode()
+
+    val tlScale by viewModel.prefs.tlScale().collectAsState()
+    val filteredMessages by viewModel.filteredMessages.collectAsState(initial = persistentListOf())
+
+    if (isInPipMode) {
+        ChatTab(
+            filteredMessages = filteredMessages,
+            fontScale = tlScale,
+            state = chatState,
+        )
+        return
+    }
+
+    FullPlayerTab(
+        streamInfo,
+        filteredMessages,
+        tlScale,
+        chatState,
+        modifier,
+    )
+}
+
+@Composable
+private fun FullPlayerTab(
+    streamInfo: StreamInfo?,
+    filteredMessages: ImmutableList<ChatMessage>,
+    tlScale: Float,
+    chatState: ChatState,
+    modifier: Modifier = Modifier,
+) {
     val coroutineScope = rememberCoroutineScope()
+    val activity = LocalContext.current.findActivity()
 
     val pagerState = rememberPagerState(
         initialPage = tabs.indexOf(Tabs.Chat),
         pageCount = { tabs.size },
     )
 
     var showStreamInfo by remember { mutableStateOf(true) }
-    val tlScale by viewModel.prefs.tlScale().collectAsState()
-    val filteredMessages by viewModel.filteredMessages.collectAsState(initial = persistentListOf())
 
     Column(
         modifier = modifier
@@ -68,7 +112,9 @@ fun PlayerTabs(streamInfo: StreamInfo?, chatState: ChatState, modifier: Modifier
             )
         }
 
-        Row {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+        ) {
             TabRow(
                 selectedTabIndex = pagerState.currentPage,
                 divider = {},
@@ -91,12 +137,29 @@ fun PlayerTabs(streamInfo: StreamInfo?, chatState: ChatState, modifier: Modifier
                     )
                 }
             }
+
             Button(onClick = { showStreamInfo = !showStreamInfo }) {
-                Icon(imageVector = if (showStreamInfo) {
-                    Icons.Outlined.KeyboardArrowUp
-                } else {
-                    Icons.Outlined.KeyboardArrowDown
-               }, contentDescription = null)
+                Icon(
+                    imageVector = if (showStreamInfo) {
+                        Icons.Outlined.KeyboardArrowUp
+                    } else {
+                        Icons.Outlined.KeyboardArrowDown
+                    },
+                    contentDescription = null,
+                )
+            }
+
+            Button(
+                onClick = {
+                    activity.enterPictureInPictureMode(
+                        PictureInPictureParams.Builder().build(),
+                    )
+                },
+            ) {
+                Icon(
+                    imageVector = Icons.Outlined.PictureInPictureAlt,
+                    contentDescription = null,
+                )
             }
         }
         HorizontalDivider()

app/src/main/kotlin/com/livetl/android/ui/screen/player/composable/chat/ChatMessage.kt

@@ -71,7 +71,7 @@ private fun getAuthorName(author: MessageAuthor): AnnotatedString {
 private fun ChatMessage.getEmojiInlineContent(emojiCache: EmojiCache) = content
     .filterIsInstance<ChatMessageContent.Emoji>()
     .distinctBy { it.id }
-    .associate { it.id to emojiCache.get(it) }
+    .associate { it.id to emojiCache[it] }
 
 private val LocalAuthorNameColor = compositionLocalOf { Color.White }
 

app/src/main/kotlin/com/livetl/android/ui/screen/player/composable/chat/EmojiCache.kt

@@ -19,7 +19,7 @@ import javax.inject.Inject
 class EmojiCache @Inject constructor() {
     private val cache = LruCache<String, InlineTextContent>(50)
 
-    fun get(emote: ChatMessageContent.Emoji): InlineTextContent {
+    operator fun get(emote: ChatMessageContent.Emoji): InlineTextContent {
         val cached = cache[emote.id]
         return if (cached != null) {
             cached

app/src/main/kotlin/com/livetl/android/util/ContextExtensions.kt

@@ -3,9 +3,20 @@ package com.livetl.android.util
 import android.content.ClipData
 import android.content.ClipboardManager
 import android.content.Context
+import android.content.ContextWrapper
 import android.content.Intent
 import android.os.Build
 import android.widget.Toast
+import androidx.activity.ComponentActivity
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.platform.LocalContext
+import androidx.core.app.PictureInPictureModeChangedInfo
+import androidx.core.util.Consumer
 import com.livetl.android.R
 import timber.log.Timber
 import java.io.BufferedReader
@@ -53,3 +64,28 @@ fun Context.readFile(filePath: String): String =
         }
         total.toString()
     }
+
+fun Context.findActivity(): ComponentActivity {
+    var context = this
+    while (context is ContextWrapper) {
+        if (context is ComponentActivity) return context
+        context = context.baseContext
+    }
+    throw IllegalStateException("No Activity context found")
+}
+
+@Composable
+fun rememberIsInPipMode(): Boolean {
+    val activity = LocalContext.current.findActivity()
+    var pipMode by remember { mutableStateOf(activity.isInPictureInPictureMode) }
+    DisposableEffect(activity) {
+        val observer = Consumer<PictureInPictureModeChangedInfo> { info ->
+            pipMode = info.isInPictureInPictureMode
+        }
+        activity.addOnPictureInPictureModeChangedListener(
+            observer,
+        )
+        onDispose { activity.removeOnPictureInPictureModeChangedListener(observer) }
+    }
+    return pipMode
+}

app/src/main/kotlin/com/livetl/android/util/StringExtensions.kt

@@ -1,15 +1,9 @@
 package com.livetl.android.util
 
-import android.os.Build
 import android.text.Html
 import java.util.Locale
 
-fun String.escapeHtmlEntities(): String = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
-    Html.fromHtml(this, Html.FROM_HTML_MODE_LEGACY).toString()
-} else {
-    @Suppress("DEPRECATION")
-    Html.fromHtml(this).toString()
-}
+fun String.escapeHtmlEntities(): String = Html.fromHtml(this, Html.FROM_HTML_MODE_LEGACY).toString()
 
 fun String.capitalize(): String = replaceFirstChar {
     if (it.isLowerCase()) it.titlecase(Locale.getDefault()) else it.toString()