Add web view sample

SRGSSR · Dec 19, 2023 · 0b1815e · 0b1815e
1 parent 2946d9f
commit 0b1815e
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 0 deletions.
diff --git a/pillarbox-demo-shared/src/main/java/ch/srgssr/pillarbox/demo/shared/ui/NavigationRoutes.kt b/pillarbox-demo-shared/src/main/java/ch/srgssr/pillarbox/demo/shared/ui/NavigationRoutes.kt
@@ -20,6 +20,7 @@ object NavigationRoutes {
     const val exoPlayerSample = "exoplayer_sample"
     const val trackingSample = "tracking_sample"
     const val updatableSample = "updatable_sample"
+    const val webViewSample = "web_view_sample"
 
     const val homeLists = "home_lists"
     const val contentLists = "content_lists"

diff --git a/pillarbox-demo/src/main/java/ch/srgssr/pillarbox/demo/ui/showcases/ShowCaseList.kt b/pillarbox-demo/src/main/java/ch/srgssr/pillarbox/demo/ui/showcases/ShowCaseList.kt
@@ -77,6 +77,14 @@ fun ShowCaseList(navController: NavController) {
                 modifier = itemModifier,
                 onClick = { navController.navigate(NavigationRoutes.story) }
             )
+
+            Divider()
+
+            DemoListItemView(
+                title = stringResource(R.string.webview),
+                modifier = itemModifier,
+                onClick = { navController.navigate(NavigationRoutes.webViewSample) }
+            )
         }
 
         DemoListHeaderView(

diff --git a/pillarbox-demo/src/main/java/ch/srgssr/pillarbox/demo/ui/showcases/ShowCaseNavigation.kt b/pillarbox-demo/src/main/java/ch/srgssr/pillarbox/demo/ui/showcases/ShowCaseNavigation.kt
@@ -6,6 +6,7 @@ package ch.srgssr.pillarbox.demo.ui.showcases
 
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.composable
 import ch.srgssr.pillarbox.demo.DemoPageView
 import ch.srgssr.pillarbox.demo.shared.ui.NavigationRoutes
 import ch.srgssr.pillarbox.demo.ui.composable
@@ -14,6 +15,7 @@ import ch.srgssr.pillarbox.demo.ui.showcases.multiplayer.MultiPlayer
 import ch.srgssr.pillarbox.demo.ui.showcases.story.StoryHome
 import ch.srgssr.pillarbox.demo.ui.showcases.tracking.TrackingToggleSample
 import ch.srgssr.pillarbox.demo.ui.showcases.updatable.UpdatableMediaItemView
+import ch.srgssr.pillarbox.demo.ui.showcases.webview.WebViewShowcase
 
 /**
  * Inject Showcases Navigation
@@ -43,6 +45,9 @@ fun NavGraphBuilder.showCasesNavGraph(navController: NavController) {
     composable(NavigationRoutes.updatableSample, DemoPageView("updatable item", Levels)) {
         UpdatableMediaItemView()
     }
+    composable(route = NavigationRoutes.webViewSample) {
+        WebViewShowcase()
+    }
 }
 
 private val Levels = listOf("app", "pillarbox", "showcase")
diff --git a/...arbox-demo/src/main/java/ch/srgssr/pillarbox/demo/ui/showcases/webview/WebViewShowcase.kt b/...arbox-demo/src/main/java/ch/srgssr/pillarbox/demo/ui/showcases/webview/WebViewShowcase.kt
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) SRG SSR. All rights reserved.
+ * License information is available from the LICENSE file.
+ */
+package ch.srgssr.pillarbox.demo.ui.showcases.webview
+
+import android.annotation.SuppressLint
+import android.view.ViewGroup
+import android.webkit.PermissionRequest
+import android.webkit.WebChromeClient
+import android.webkit.WebView
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.viewinterop.AndroidView
+
+/**
+ * Web view showcase
+ * A show case to integrate Pillarbox web inside a WebView.
+ */
+@SuppressLint("SetJavaScriptEnabled")
+@Composable
+fun WebViewShowcase() {
+    AndroidView(
+        modifier = Modifier.fillMaxSize(),
+        factory = { context ->
+            WebView(context).apply {
+                layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
+                settings.javaScriptEnabled = true
+                webChromeClient = DrmReadyWebChromeClient()
+                settings.loadWithOverviewMode = true
+                settings.useWideViewPort = true
+                settings.setSupportZoom(false)
+                settings.setSupportMultipleWindows(true)
+            }
+        },
+        update = { webView ->
+            // DRM content can be played only inside a secure context. To do so we create ab iframe with a correct base url.
+            webView.loadDataWithBaseURL(
+                "https://srgssr.github.io/pillarbox-web",
+                "<iframe src=\"https://srgssr.github.io/pillarbox-web\" width=\"100%\" " +
+                    "height=\"100%\" allow=\"encrypted-media;\"></iframe>",
+                "text/html",
+                "UTF-8",
+                null
+            )
+            // No secure context, so DRM doesn't work.
+            // webView.loadUrl("https://srgssr.github.io/pillarbox-web/")
+        }
+    )
+}
+
+/**
+ * Drm ready web chrome client
+ *
+ * https://amokranechentir.hashnode.dev/android-play-drm-protected-content-inside-a-webview
+ */
+private class DrmReadyWebChromeClient : WebChromeClient() {
+    override fun onPermissionRequest(request: PermissionRequest?) {
+        val resources = request?.resources
+        resources?.forEach { resource ->
+            if (
+                PermissionRequest.RESOURCE_PROTECTED_MEDIA_ID == resource
+            ) {
+                request.grant(resources)
+                return
+            }
+        }
+        super.onPermissionRequest(request)
+    }
+}
diff --git a/pillarbox-demo/src/main/res/values/strings.xml b/pillarbox-demo/src/main/res/values/strings.xml
@@ -24,4 +24,5 @@
     <string name="stage">Stage</string>
     <string name="test">Test</string>
     <string name="update_media_item_example">Updatable media metadata</string>
+    <string name="webview">WebView</string>
 </resources>