Upgrade demo to support storyblock usage in compose

compose/app/build.gradle.kts

@@ -8,13 +8,13 @@ plugins {
 android {
     namespace = "com.firework.example.compose"
 
-    compileSdk = 34
+    compileSdk = 35
 
     defaultConfig {
         applicationId = "com.firework.example.compose"
 
         minSdk = 21
-        targetSdk = 34
+        targetSdk = 35
 
         versionCode = 1
         versionName = "1.0.0"
@@ -80,13 +80,14 @@ detekt {
 }
 
 dependencies {
-    implementation("androidx.core:core-ktx:1.13.0")
-    implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0")
-    implementation("androidx.activity:activity-compose:1.9.0")
-    implementation("androidx.compose.material:material:1.6.6")
+    implementation("androidx.appcompat:appcompat:1.7.0")
+    implementation("androidx.core:core-ktx:1.15.0")
+    implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.8.7")
+    implementation("androidx.activity:activity-compose:1.10.1")
+    implementation("androidx.compose.material:material:1.7.8")
 
     // compose
-    implementation(platform("androidx.compose:compose-bom:2024.04.01"))
+    implementation(platform("androidx.compose:compose-bom:2025.02.00"))
     implementation("androidx.compose.ui:ui")
     implementation("androidx.compose.ui:ui-graphics")
     implementation("androidx.compose.ui:ui-tooling-preview")

compose/app/src/main/AndroidManifest.xml

@@ -19,6 +19,14 @@
             </intent-filter>
         </activity>
 
+        <activity android:name=".videofeed.VideoFeedActivity"
+            android:theme="@style/Theme.AppCompat.DayNight"/>
+
+        <activity android:name=".storyblock.ComposeStoryActivity" />
+
+        <activity android:name=".storyblock.ComposeLazyVerticalGridStoryActivity"
+            android:theme="@style/Theme.AppCompat.DayNight"/>
+
     </application>
 
 </manifest>

compose/app/src/main/java/com/firework/example/compose/MainActivity.kt

@@ -1,37 +1,26 @@
 package com.firework.example.compose
 
-import android.content.Context
+import android.content.Intent
 import android.os.Bundle
-import android.util.TypedValue
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.toArgb
-import androidx.compose.ui.viewinterop.AndroidView
-import com.firework.common.PlayerMode
-import com.firework.common.cta.CtaDelay
-import com.firework.common.cta.CtaDelayUnit
-import com.firework.common.cta.CtaStyle
-import com.firework.common.feed.FeedLayout
-import com.firework.common.feed.FeedResource
-import com.firework.common.feed.FeedTitlePosition
-import com.firework.common.widget.ActionButton
-import com.firework.common.widget.Shape
-import com.firework.common.widget.WidgetImage
-import com.firework.videofeed.fwVideoFeedView
-import com.firework.videofeed.viewOptions
-import com.firework.viewoptions.actionButtonOptions
-import com.firework.viewoptions.baseOptions
-import com.firework.viewoptions.ctaOptions
-import com.firework.viewoptions.layoutOptions
-import com.firework.viewoptions.pipButtonOptions
-import com.firework.viewoptions.playerOptions
-import com.firework.viewoptions.playerUiOptions
-import com.firework.viewoptions.titleOptions
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
+import com.firework.example.compose.storyblock.ComposeLazyVerticalGridStoryActivity
+import com.firework.example.compose.storyblock.ComposeStoryActivity
+import com.firework.example.compose.videofeed.VideoFeedActivity
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -42,95 +31,33 @@ class MainActivity : ComponentActivity() {
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background,
                 ) {
-                    VideoFeed()
+                    Scaffold { innerPadding ->
+                        NavigationButtons(innerPadding)
+                    }
                 }
             }
         }
     }
 }
 
-@Suppress("MagicNumber")
 @Composable
-private fun VideoFeed() {
-    val feedTitleTextColor = MaterialTheme.colorScheme.onPrimary.hashCode()
-    val feedTitleBackgroundColor = MaterialTheme.colorScheme.primary.hashCode()
-    val backgroundColor = MaterialTheme.colorScheme.background.hashCode()
-    val secondaryColor = MaterialTheme.colorScheme.secondary.toArgb()
-
-    AndroidView(factory = { context ->
-        fwVideoFeedView(context) {
-            viewOptions {
-                baseOptions {
-                    feedResource(FeedResource.Discovery)
-                }
-                layoutOptions {
-                    feedLayout(FeedLayout.GRID)
-                    columnCount(3)
-                    backgroundColor(backgroundColor)
-                    itemSpacing(context.dpToPx(8f))
-                    roundedCorner(true)
-                    roundedCornerRadius(context.dpToPx(6f))
-                    feedTitlePosition(FeedTitlePosition.NESTED)
-                    showPlayIcon(true)
-                }
-                titleOptions {
-                    showFeedTitle(true)
-                    feedTitleBackgroundColor(feedTitleBackgroundColor)
-                    feedTitleTextColor(feedTitleTextColor)
-                    feedTitleTextPadding(context.dpToPx(8f))
-                    feedTitleTextSize(context.spToPx(14f))
-                    feedTitleTextNumberOfLines(1)
-                }
-                ctaOptions {
-                    ctaDelay(CtaDelay(0.2f, CtaDelayUnit.PERCENTAGE))
-                    ctaStyle(
-                        CtaStyle(
-                            shape = Shape.SHAPE_OVAL,
-                            backgroundColor = secondaryColor,
-                            textColor = feedTitleTextColor,
-                            fontSize = context.spToPx(18f).toFloat(),
-                        ),
-                    )
-                }
-                playerOptions {
-                    autoplay(true)
-                    playerMode(PlayerMode.FIT_MODE)
-                    showShareButton(true)
-                    autoPlayOnComplete(true)
-                    playerUiOptions {
-                        pipButtonOptions {
-                            icon(WidgetImage(R.drawable.ic_pip))
-                        }
-                    }
-                    actionButtonOptions {
-                        actionButton(
-                            ActionButton(
-                                backgroundColor = secondaryColor,
-                                dividingLineColor = backgroundColor,
-                                shape = Shape.SHAPE_OVAL,
-                                textColor = feedTitleTextColor,
-                            ),
-                        )
-                        cancelButton(
-                            ActionButton(
-                                backgroundColor = secondaryColor,
-                                shape = Shape.SHAPE_OVAL,
-                                textColor = feedTitleTextColor,
-                            ),
-                        )
-                    }
-                }
-            }
+private fun NavigationButtons(padding: PaddingValues) {
+    val context = LocalContext.current
+    Column(modifier = Modifier.padding(padding).padding(horizontal = 20.dp, vertical = 30.dp).fillMaxWidth()) {
+        Button(modifier = Modifier.fillMaxWidth().padding(30.dp), onClick = {
+            context.startActivity(Intent(context, VideoFeedActivity::class.java))
+        }) {
+            Text("Video Feed")
         }
-    })
-}
-
-private fun Context.spToPx(sp: Float): Int {
-    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, resources.displayMetrics)
-        .toInt()
-}
-
-private fun Context.dpToPx(dp: Float): Int {
-    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, resources.displayMetrics)
-        .toInt()
+        Button(modifier = Modifier.fillMaxWidth().padding(30.dp), onClick = {
+            context.startActivity(Intent(context, ComposeStoryActivity::class.java))
+        }) {
+            Text("Single StoryBlock")
+        }
+        Button(modifier = Modifier.fillMaxWidth().padding(30.dp), onClick = {
+            context.startActivity(Intent(context, ComposeLazyVerticalGridStoryActivity::class.java))
+        }) {
+            Text("StoryBlock in Grid")
+        }
+    }
 }

compose/app/src/main/java/com/firework/example/compose/storyblock/ComposeLazyVerticalGridStoryActivity.kt

@@ -0,0 +1,137 @@
+package com.firework.example.compose.storyblock
+
+import android.os.Bundle
+import android.util.Log
+import android.view.ViewGroup
+import androidx.activity.compose.setContent
+import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import com.firework.common.PlayerMode
+import com.firework.common.feed.FeedResource
+import com.firework.storyblock.FwStoryBlockView
+import com.firework.viewoptions.baseOptions
+import com.firework.viewoptions.playerOptions
+import com.firework.viewoptions.storyBlockOptions
+import com.firework.viewoptions.viewOptions
+import kotlin.apply
+import kotlin.collections.getOrPut
+
+class ComposeLazyVerticalGridStoryActivity : AppCompatActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        setContent {
+            MaterialTheme {
+                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
+                    LazyVerticalGridItem(
+                        modifier = Modifier
+                            .padding(innerPadding)
+                            .fillMaxSize(),
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Suppress("MagicNumber")
+val list = List(50) {
+    if (it == 3 || it == 24) {
+        "View"
+    } else {
+        "Text"
+    }
+}
+
+private val width = 150.dp
+private val height = 250.dp
+
+@Composable
+fun LazyVerticalGridItem(modifier: Modifier = Modifier) {
+    val androidViewMap = remember { mutableMapOf<String, FwStoryBlockView>() }
+    LazyVerticalGrid(columns = GridCells.Fixed(2)) {
+        items(list.size) { index ->
+            if (list[index] == "View") {
+                StoryBlockItem(modifier = modifier, key = "View_${index}", androidViewMap = androidViewMap)
+            } else {
+                Text(text = "Text $index", modifier = modifier.size(width, height))
+            }
+        }
+    }
+
+    DisposableEffect(Unit) {
+        onDispose {
+            for (v in androidViewMap.values) {
+                v.destroy()
+            }
+        }
+    }
+}
+
+@Composable
+fun StoryBlockItem(modifier: Modifier = Modifier, key: String, androidViewMap: MutableMap<String, FwStoryBlockView>) {
+    val context = LocalContext.current
+    val storyblockAndroidView = androidViewMap.getOrPut(key) {
+        val storyBlockView = FwStoryBlockView(context = LocalContext.current)
+        // init view options
+        val viewOptions = viewOptions {
+            baseOptions {
+                feedResource(FeedResource.Discovery)
+            }
+            playerOptions {
+                playerMode(PlayerMode.FIT_MODE)
+            }
+            storyBlockOptions {
+                enableAutoPlay(true)
+                showFullScreenIcon(true)
+            }
+        }
+        storyBlockView.init(
+            (context as AppCompatActivity).supportFragmentManager,
+            context,
+            viewOptions,
+            true,
+        )
+        storyBlockView.apply {
+            layoutParams = ViewGroup.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.MATCH_PARENT,
+            )
+            storyBlockView.setOnErrorListener { e ->
+                Log.d("firework", "$e")
+            }
+        }
+    }
+
+    AndroidView(
+        modifier = modifier
+            .padding(top = 16.dp)
+            .size(width, height),
+        factory = { _ ->
+            storyblockAndroidView
+        },
+        update = { _ ->
+            Log.d("firework", "update")
+        },
+        onReset = {
+            Log.d("firework", "reset")
+        },
+        onRelease = {
+            Log.d("firework", "release")
+        },
+    )
+}