Add a configurable option for allowing webview zooming

dpwilhelmsen · dpwilhelmsen · commit 005792a7c143 · 2020-05-13T23:04:19.000-07:00
diff --git a/doc/readme.md b/doc/readme.md
@@ -46,6 +46,7 @@
 - [webViewStyle](#webViewStyle)
 - [webViewProps](#webViewProps)
 - [forceAndroidAutoplay](#forceAndroidAutoplay)
+- [allowWebViewZoom](#allowWebViewZoom)
 
 ### Ref functions
 
@@ -250,6 +251,10 @@ Changes user string to make autoplay work on the iframe player for some android
 
 userAgent string - `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36';`
 
+## allowWebViewZoom
+
+Controls whether the embedded webview allows user to zoom in. Defaults to `false`
+
 # Ref functions
 
 usage -
diff --git a/index.d.ts b/index.d.ts
@@ -100,6 +100,10 @@ export interface YoutubeIframeProps {
    * callback for when the video playback rate changes.
    */
   onPlaybackRateChange?: (event: String) => void;
+  /**
+   * Flag to decide whether or not a user can zoom the video webview.
+   */
+  allowWebViewZoom?: Boolean;
 }
 
 declare const YoutubeIframe: React.SFC<YoutubeIframeProps>;
diff --git a/readme.md b/readme.md
@@ -87,6 +87,7 @@ list of available APIs -
 - initialPlayerParams
 - webViewStyle
 - webViewProps
+- allowWebViewZoom
 
 ### Ref functions
 
diff --git a/src/PlayerScripts.js b/src/PlayerScripts.js
@@ -57,10 +57,14 @@ export const MAIN_SCRIPT = (
     rel,
     start,
   },
+  allowWebViewZoom,
 ) => `<!DOCTYPE html>
 <html>
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0${allowWebViewZoom ? '' : ', maximum-scale=1'}"
+    >
     <style>
       body {
         margin: 0;
diff --git a/src/YoutubeIframe.js b/src/YoutubeIframe.js
@@ -28,6 +28,7 @@ const YoutubeIframe = (
     onReady = _event => {},
     playListStartIndex = 0,
     initialPlayerParams = {},
+    allowWebViewZoom = false,
     forceAndroidAutoplay = false,
     onChangeState = _event => {},
     onPlaybackQualityChange = _quality => {},
@@ -171,7 +172,7 @@ const YoutubeIframe = (
         style={[styles.webView, webViewStyle]}
         mediaPlaybackRequiresUserAction={false}
         allowsFullscreenVideo={!initialPlayerParams?.preventFullScreen}
-        source={{html: MAIN_SCRIPT(videoId, playList, initialPlayerParams)}}
+        source={{html: MAIN_SCRIPT(videoId, playList, initialPlayerParams, allowWebViewZoom)}}
         userAgent={
           forceAndroidAutoplay
             ? Platform.select({android: CUSTOM_USER_AGENT, ios: ''})
