javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dave Coffin
2022-10-07 11:41:38 -04:00
committed by GitHub
parent a162901f8c
commit 4a0e1c9aa1
6 changed files with 53 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/toolbox/src/main-page.xml
View File

@@ -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>

10
apps/toolbox/src/pages/webview.ts Normal file
View File

@@ -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 {}

17
apps/toolbox/src/pages/webview.xml Normal file
View File

@@ -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>

2
packages/core/ui/core/view-base/index.ts
View File

@@ -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;

6
packages/core/ui/web-view/index.d.ts vendored
View File

@@ -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).
*/

18
packages/core/ui/web-view/index.ios.ts
View File

@@ -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');