feat(webview): adds iosAllowInlineMediaPlayback property (#10014)

NativeScript · Oct 7, 2022 · 4a0e1c9 · 4a0e1c9
1 parent a162901
commit 4a0e1c9
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 1 deletion.
diff --git a/apps/toolbox/src/main-page.xml b/apps/toolbox/src/main-page.xml
@@ -19,6 +19,7 @@
         <Button text="vector-image" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="visibility-vs-hidden" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="fs-helper" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="webview" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
       </StackLayout>
     </ScrollView>
   </StackLayout>

diff --git a/apps/toolbox/src/pages/webview.ts b/apps/toolbox/src/pages/webview.ts
@@ -0,0 +1,10 @@
+import { Observable, EventData, Page, CoreTypes } from '@nativescript/core';
+
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new WebviewModel();
+}
+
+export class WebviewModel extends Observable {}
diff --git a/apps/toolbox/src/pages/webview.xml b/apps/toolbox/src/pages/webview.xml
@@ -0,0 +1,17 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="WebView" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <StackLayout class="p-10">
+      <Label text="iPhone by default plays media content in a webview in full screen, meaning it takes over your whole UI. You can toggle this on and off with a cool new property: iosAllowInlineMediaPlayback" textWrap="true" style="color: gray;" class="m-b-10 v-center text-center" />
+
+      <Label style="color: gray;" textWrap="true" class="m-b-5 text-center" text="This webview plays this youtube content inline." />
+      <WebView iosAllowInlineMediaPlayback="true" src="https://sphere.presonus.com/video/youtube/QnGX0xrv6Dw" height="200" />
+
+      <Label style="color: gray;" textWrap="true" class="m-b-5 m-t-20 text-center" text="This webview forces media content into fullscreen on iPhone." />
+      <WebView src="https://sphere.presonus.com/video/youtube/QnGX0xrv6Dw" height="200" />
+
+		</StackLayout>
+</Page>
diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts
@@ -1212,7 +1212,7 @@ export const idProperty = new Property<ViewBase, string>({
 });
 idProperty.register(ViewBase);
 
-export function booleanConverter(v: string): boolean {
+export function booleanConverter(v: string | boolean): boolean {
 	const lowercase = (v + '').toLowerCase();
 	if (lowercase === 'true') {
 		return true;

diff --git a/packages/core/ui/web-view/index.d.ts b/packages/core/ui/web-view/index.d.ts
@@ -60,6 +60,12 @@ export class WebView extends View {
 	 */
 	disableZoom: boolean;
 
+	/**
+	 * Enables inline media playback on iOS.
+	 * By default, webview forces iPhone into fullscreen media playback.
+	 */
+	iosAllowInlineMediaPlayback: boolean;
+
 	/**
 	 * Stops loading the current content (if any).
 	 */

diff --git a/packages/core/ui/web-view/index.ios.ts b/packages/core/ui/web-view/index.ios.ts
@@ -4,6 +4,7 @@ import { profile } from '../../profiling';
 import { Trace } from '../../trace';
 export * from './web-view-common';
 import { knownFolders } from '../../file-system';
+import { booleanConverter } from '../core/view-base';
 
 @NativeClass
 class WKNavigationDelegateImpl extends NSObject implements WKNavigationDelegate {
@@ -159,17 +160,34 @@ export class WebView extends WebViewBase {
 	private _delegate: WKNavigationDelegateImpl;
 	private _scrollDelegate: UIScrollViewDelegateImpl;
 	private _uiDelegate: WKUIDelegateImpl;
+	private _iosAllowInlineMediaPlayback: boolean;
 
 	_maximumZoomScale;
 	_minimumZoomScale;
 	_zoomScale;
 
+	get iosAllowInlineMediaPlayback(): boolean {
+		return this._iosAllowInlineMediaPlayback;
+	}
+
+	set iosAllowInlineMediaPlayback(value: boolean) {
+		// Note: can be set on the view markup,
+		// thus the converter usage (value could come in as string).
+		// Property.setNative should not be used because
+		// it should be set before nativeView is created
+		this._iosAllowInlineMediaPlayback = booleanConverter(value);
+	}
+
 	createNativeView() {
 		const jScript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'initial-scale=1.0'); document.getElementsByTagName('head')[0].appendChild(meta);";
 		const wkUScript = WKUserScript.alloc().initWithSourceInjectionTimeForMainFrameOnly(jScript, WKUserScriptInjectionTime.AtDocumentEnd, true);
 		const wkUController = WKUserContentController.new();
 		wkUController.addUserScript(wkUScript);
 		const configuration = WKWebViewConfiguration.new();
+		if (this.iosAllowInlineMediaPlayback) {
+			configuration.allowsInlineMediaPlayback = true;
+			configuration.allowsPictureInPictureMediaPlayback = true;
+		}
 		configuration.userContentController = wkUController;
 		configuration.preferences.setValueForKey(true, 'allowFileAccessFromFileURLs');