@react-native-ohos/react-native-webview 13.15.2-rc.1 → 13.15.3-1

package/README.md

@@ -4,9 +4,9 @@ This project is based on [react-native-webview@13.15.0](https://github.com/react
 
 ## Documentation
 
-- [中文](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-webview.md)
+- [中文](https://gitcode.com/OpenHarmony-RN/usage-docs/blob/master/zh-cn/react-native-webview.md)
 
-- [English](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-webview.md)
+- [English](https://gitcode.com/OpenHarmony-RN/usage-docs/blob/master/en/react-native-webview.md)
 
 ## License
 

package/harmony/rn_webview/oh-package.json5

@@ -6,7 +6,7 @@
   "name": "@react-native-ohos/react-native-webview",
   "description": "main cpai architecture",
   "main": "index.ets",
-  "version": "13.15.2-rc.1",
+  "version": "13.15.3-1",
   "dependencies": {
     "@rnoh/react-native-openharmony": "../react_native_openharmony.har"
   }

package/harmony/rn_webview/src/main/ets/Magic.ets

@@ -45,7 +45,7 @@ export interface WebViewProps extends ViewRawProps {
   cacheMode: CACHE_MODE
   domStorageEnabled: boolean
   scalesPageToFit: boolean
-   hasOnShouldStartLoadWithRequestEvent?: boolean
+  hasOnShouldStartLoadWithRequestEvent?: boolean
   messagingModuleName: string
   webviewDebuggingEnabled: boolean
   scrollEnabled: boolean
@@ -65,8 +65,22 @@ export interface WebViewProps extends ViewRawProps {
   geolocationEnabled: boolean
   applicationNameForUserAgent: string
   pullToRefreshEnabled: boolean
+  mediaCapturePermissionGrantType?: 'prompt' | 'grant' | 'deny' | 'grantIfSameHostElsePrompt' | 'grantIfSameHostElseDeny'
+  menuItems?: Array<MenuItem> | undefined;
 }
 
+export interface MenuItem {
+  label: string,
+  key: string
+}
+
+export enum WebMediaCapturePermissionGrantType {
+  GRANT_IF_SAME_HOST_ELSE_PROMPT = "grantIfSameHostElsePrompt",
+  GRANT_IF_SAME_HOST_ELSE_DENY = "grantIfSameHostElseDeny",
+  DENY = "deny",
+  GRANT = "grant",
+  PROMPT = "prompt",
+}
 
 export class RNCWebViewBridge {
   postMessage!: (data: string) => void;

package/harmony/rn_webview/src/main/ets/RNCWebView.ets

@@ -25,9 +25,11 @@ import {
   WebViewDescriptor,
   REFRESH_OFFSET,
   MINHEIGHT,
+  WebMediaCapturePermissionGrantType,
+  MenuItem
 } from './Magic';
 
-import { abilityAccessCtrl, bundleManager } from '@kit.AbilityKit';
+import { abilityAccessCtrl, bundleManager, Permissions } from '@kit.AbilityKit';
 import { WebViewTurboModule, ShouldStartParams, ShouldOverrideCallbackState } from './WebViewTurboModule';
 import { AnyThreadRNInstance, WorkerTaskRunnable } from '@rnoh/react-native-openharmony/src/main/ets/RNOH';
 import buffer from '@ohos.buffer';
@@ -425,33 +427,130 @@ export struct RNCWebView {
     return false
   }
 
+  onCreateMenu = (menuItems: Array<TextMenuItem>) => {
+    let customMenuItems = this.descriptorWrapper.rawProps.menuItems
+    if (customMenuItems == undefined) {
+      return menuItems;
+    }  else if (customMenuItems.length == 0) {
+      return [];
+    } else {
+      let menuItemsArray: Array<TextMenuItem> = [];
+      for (let index = 0; index < customMenuItems.length; index++) {
+        let element: MenuItem = customMenuItems[index];
+        let customItem: TextMenuItem = {
+          content: element.label,
+          id: TextMenuItemId.of(element.key)
+        };
+        menuItemsArray.push(customItem)
+      }
+      return menuItemsArray;
+    }
+  }
+
+  onMenuItemClick(menuItem: TextMenuItem): boolean {
+    if (this.descriptorWrapper.rawProps.menuItems != undefined) {
+      this.controller.runJavaScript("(function(){return {selection: window.getSelection().toString()} })()")
+        .then((result: string) => {
+          this.webViewBaseOperate?.customMenuSelection(menuItem, result)
+        })
+        .catch((error: string | Error) => {
+          Logger.info('[RNOH] function onMenuItemClick error: ' + error);
+        })
+      // 禁用系统默认行为
+      return true;
+    }
+    return false;
+  }
+
+  onPermissionRequestAlert(event: OnPermissionRequestEvent){
+    AlertDialog.show({
+      title: this.resourceToString($r('app.string.on_confirm')) + event.request.getOrigin(),
+      message: this.getPermissionDialogMessage(event),
+      alignment: DialogAlignment.Center,
+      primaryButton: {
+        value: $r('app.string.deny'),
+        action: () => {
+          event.request.deny();
+        }
+      },
+      secondaryButton: {
+        value: $r('app.string.on_confirm'),
+        action: () => {
+          event.request.grant(event.request.getAccessibleResource());
+        }
+      },
+      cancel: () => {
+        event.request.deny();
+      }
+    })
+  }
+
+  async handleMediaCapturePermissionGrantType(resources: string[], domain: string) {
+    let permissionList: Array<Permissions> = [];
+    resources.forEach(resource => {
+      switch (resource.toString()) {
+        case 'TYPE_VIDEO_CAPTURE':
+          permissionList.push('ohos.permission.CAMERA');
+          break;
+        case 'TYPE_AUDIO_CAPTURE':
+          permissionList.push('ohos.permission.MICROPHONE');
+          break;
+      }
+    });
+
+    await atManager.requestPermissionsFromUser(this.ctx.uiAbilityContext, permissionList);
+  }
+
   build() {
     Stack() {
         if ( deviceInfo.sdkApiVersion >= 20) {
           Web({ src: "", controller: this.controller, renderMode: this.renderMode })
             .mixedMode(this.mode)
-            .onPermissionRequest((event: OnPermissionRequestEvent) => {
+            .onPermissionRequest(async (event: OnPermissionRequestEvent) => {
               if (event && (this.getPermissionDialogMessage(event) != "TYPE_SENSOR")) {
-                AlertDialog.show({
-                  title: this.resourceToString($r('app.string.on_confirm')) + event.request.getOrigin(),
-                  message: this.getPermissionDialogMessage(event),
-                  alignment: DialogAlignment.Center,
-                  primaryButton: {
-                    value: $r('app.string.deny'),
-                    action: () => {
+                const resources: string[] = event.request.getAccessibleResource();
+                if (resources.indexOf('TYPE_AUDIO_CAPTURE') >= 0 || resources.indexOf('TYPE_VIDEO_CAPTURE') >= 0 ) {
+                  const originUrl = this.webViewBaseOperate?.verifyURLFormat(event.request.getOrigin(), this.source.html,
+                    this.source.baseUrl);
+                  const currentUrl = this.webViewBaseOperate?.verifyURLFormat(this.controller.getUrl(), this.source.html,
+                    this.source.baseUrl);
+                  const originDomain: string = OSUrl.URL.parseURL(originUrl).hostname;
+                  const currentDomain: string = OSUrl.URL.parseURL(currentUrl).hostname;
+                  let mediaCapturePermissionGrantType: string = WebMediaCapturePermissionGrantType.PROMPT
+                  if (this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType != undefined) {
+                    mediaCapturePermissionGrantType = this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType;
+                  }
+                  if (mediaCapturePermissionGrantType != WebMediaCapturePermissionGrantType.DENY) {
+                    await this.handleMediaCapturePermissionGrantType(resources, originDomain)
+                  }
+                  switch (mediaCapturePermissionGrantType) {
+                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_PROMPT:
+                      if (originDomain != currentDomain) {
+                        this.onPermissionRequestAlert(event)
+                      } else {
+                        event.request.grant(resources);
+                      }
+                      break;
+                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_DENY:
+                      if (originDomain != currentDomain) {
+                        event.request.deny();
+                      } else {
+                        event.request.grant(resources);
+                      }
+                      break;
+                    case WebMediaCapturePermissionGrantType.DENY:
                       event.request.deny();
-                    }
-                  },
-                  secondaryButton: {
-                    value: $r('app.string.on_confirm'),
-                    action: () => {
-                      event.request.grant(event.request.getAccessibleResource());
-                    }
-                  },
-                  cancel: () => {
-                    event.request.deny();
+                      break;
+                    case WebMediaCapturePermissionGrantType.GRANT:
+                      event.request.grant(resources);
+                      break;
+                    case WebMediaCapturePermissionGrantType.PROMPT:
+                      this.onPermissionRequestAlert(event)
+                      break;
                   }
-                })
+                } else {
+                  this.onPermissionRequestAlert(event)
+                }
               }
             })
             .width(this.webviewWidth)
@@ -499,31 +598,58 @@ export struct RNCWebView {
             .onRenderExited((event: OnRenderExitedEvent) => this.webViewBaseOperate?.onRenderExited(event))
             .onLoadIntercept((event: OnLoadInterceptEvent) => this.onLoadIntercept(event))
             .onTitleReceive((event: OnTitleReceiveEvent) => this.webViewBaseOperate?.onTitleReceive(event))
+            .editMenuOptions({
+              onCreateMenu: this.onCreateMenu.bind(this),
+              onMenuItemClick: this.onMenuItemClick.bind(this),
+            })
         } else {
           Web({ src: "", controller: this.controller, renderMode: this.renderMode })
             .mixedMode(this.mode)
-            .onPermissionRequest((event: OnPermissionRequestEvent) => {
+            .onPermissionRequest(async (event: OnPermissionRequestEvent) => {
               if (event && (this.getPermissionDialogMessage(event) != "TYPE_SENSOR")) {
-                AlertDialog.show({
-                  title: this.resourceToString($r('app.string.on_confirm')) + event.request.getOrigin(),
-                  message: this.getPermissionDialogMessage(event),
-                  alignment: DialogAlignment.Center,
-                  primaryButton: {
-                    value: $r('app.string.deny'),
-                    action: () => {
+                const resources: string[] = event.request.getAccessibleResource();
+                if (resources.indexOf('TYPE_AUDIO_CAPTURE') >= 0 || resources.indexOf('TYPE_VIDEO_CAPTURE') >= 0 ) {
+                  const originUrl = this.webViewBaseOperate?.verifyURLFormat(event.request.getOrigin(), this.source.html,
+                    this.source.baseUrl);
+                  const currentUrl = this.webViewBaseOperate?.verifyURLFormat(this.controller.getUrl(), this.source.html,
+                    this.source.baseUrl);
+                  const originDomain: string = OSUrl.URL.parseURL(originUrl).hostname;
+                  const currentDomain: string = OSUrl.URL.parseURL(currentUrl).hostname;
+                  let mediaCapturePermissionGrantType: string = WebMediaCapturePermissionGrantType.PROMPT
+                  if (this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType != undefined) {
+                    mediaCapturePermissionGrantType = this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType;
+                  }
+                  if (mediaCapturePermissionGrantType != WebMediaCapturePermissionGrantType.DENY) {
+                    await this.handleMediaCapturePermissionGrantType(resources, originDomain)
+                  }
+                  switch (mediaCapturePermissionGrantType) {
+                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_PROMPT:
+                      if (originDomain != currentDomain) {
+                        this.onPermissionRequestAlert(event)
+                      } else {
+                        event.request.grant(resources);
+                      }
+                      break;
+                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_DENY:
+                      if (originDomain != currentDomain) {
+                        event.request.deny();
+                      } else {
+                        event.request.grant(resources);
+                      }
+                      break;
+                    case WebMediaCapturePermissionGrantType.DENY:
                       event.request.deny();
-                    }
-                  },
-                  secondaryButton: {
-                    value: $r('app.string.on_confirm'),
-                    action: () => {
-                      event.request.grant(event.request.getAccessibleResource());
-                    }
-                  },
-                  cancel: () => {
-                    event.request.deny();
+                      break;
+                    case WebMediaCapturePermissionGrantType.GRANT:
+                      event.request.grant(resources);
+                      break;
+                    case WebMediaCapturePermissionGrantType.PROMPT:
+                      this.onPermissionRequestAlert(event)
+                      break;
                   }
-                })
+                } else {
+                  this.onPermissionRequestAlert(event)
+                }
               }
             })
 
@@ -571,7 +697,10 @@ export struct RNCWebView {
             .onRenderExited((event: OnRenderExitedEvent) => this.webViewBaseOperate?.onRenderExited(event))
             .onLoadIntercept((event: OnLoadInterceptEvent) => this.onLoadIntercept(event))
             .onTitleReceive((event: OnTitleReceiveEvent) => this.webViewBaseOperate?.onTitleReceive(event))
-
+            .editMenuOptions({
+              onCreateMenu: this.onCreateMenu.bind(this),
+              onMenuItemClick: this.onMenuItemClick.bind(this),
+            })
           }
       }
     .width(this.webviewWidth)

package/harmony/rn_webview/src/main/ets/WebViewBaseOperate.ets

@@ -454,4 +454,17 @@ export class BaseOperate {
       Logger.error(TAG, `[RNOH] onTitleReceive Errorcode: ${error.code}`);
     }
   }
+
+  customMenuSelection(menuItem: TextMenuItem, selectionText: string) {
+    try {
+      selectionText = JSON.parse(selectionText).selection;
+      this.eventEmitter!.emit('customMenuSelection', {
+        label: menuItem.content.toString(),
+        key: JSON.parse(JSON.stringify(menuItem.id)).id_,
+        selectedText: selectionText
+      })
+    } catch (error) {
+      Logger.error(TAG, `[RNOH] customMenuSelection Errorcode: ${error.code}`);
+    }
+  }
 }

package/package.json

@@ -9,7 +9,7 @@
     "Thibault Malbranche <malbranche.thibault@gmail.com>"
   ],
   "license": "MIT",
-  "version": "13.15.2-rc.1",
+  "version": "13.15.3-1",
   "homepage": "https://gitcode.com/openharmony-sig/rntpc_react-native-webview/tree/br_rnoh0.77#readme",
   "scripts": {
     "macos": "react-native run-macos --scheme WebviewExample --project-path example/macos",
@@ -48,6 +48,7 @@
     "@react-native/eslint-config": "0.73.2",
     "@react-native/metro-config": "0.73.5",
     "@react-native/typescript-config": "0.73.1",
+    "@react-native-oh/react-native-harmony-cli": "npm:@react-native-oh/react-native-harmony-cli@0.77.18-1",
     "@rnx-kit/metro-config": "1.3.15",
     "@semantic-release/git": "7.0.16",
     "@types/invariant": "^2.2.30",

package/src/WebView.harmony.tsx

@@ -67,7 +67,7 @@ const WebViewComponent = forwardRef<{}, IOSWebViewProps & { scalesPageToFit: boo
       injectedJavaScript,
       injectedJavaScriptBeforeContentLoaded,
       injectedJavaScriptObject,
-      menuItems = [],
+      menuItems,
       injectedJavaScriptForMainFrameOnly = true,
       injectedJavaScriptBeforeContentLoadedForMainFrameOnly = true,
       thirdPartyCookiesEnabled = false,