docs: update documentation and add FAQs in website

Author: LonelyCpp

docs/about.mdx

@@ -1,6 +1,7 @@
 ---
 id: about
 title: React Native Youtube-iframe
+slug: /
 ---
 
 import useBaseUrl from '@docusaurus/useBaseUrl';

docs/faq.mdx

@@ -0,0 +1,13 @@
+---
+id: play-store-compatibility
+title: Google Play Store
+---
+
+Google is very strict about apps on the play store that have youtube content on it. It absolutely does not allow background play in any form. Make sure that your app complies with [youtube's terms of service](https://developers.google.com/youtube/terms/api-services-terms-of-service).
+
+A few users have faced app rejections and the best way to avoid any issues is to make sure that the video stops when your app. ([#72](https://github.com/LonelyCpp/react-native-youtube-iframe/issues/72), [#105](https://github.com/LonelyCpp/react-native-youtube-iframe/issues/105)).
+
+- goes to the background
+- the video is no longer on the screen
+
+Use the [AppState](https://reactnative.dev/docs/appstate) api to stop the video when the app is not "active" and use navigational hooks to stop the video when a user navigates away from the screen.

docs/play-store-compatibility.mdx

@@ -118,6 +118,24 @@ Gives access to the player reference. This can be used to access player function
 
 ---
 
+### `baseUrlOverride`
+
+<Type>String</Type>
+
+A link that serves the iframe code. If you want to host the code on your own domain, get the source from [here](https://github.com/LonelyCpp/react-native-youtube-iframe/blob/master/iframe.html).
+
+Default link - https://lonelycpp.github.io/react-native-youtube-iframe/iframe.html
+
+---
+
+### `useLocalHTML`
+
+<Type>Boolean</Type>
+
+use locally generated html to render on the webview
+
+---
+
 ### `onChangeState`
 
 <Type>function(event: string)</Type>
@@ -296,13 +314,3 @@ scale factor for initial-scale and maximum-scale in `<meta />` tag on the webpag
 :::info zoom -
 enabling the `allowWebViewZoom` disabled the maximum-scale attribute in the webpage
 :::
-
----
-
-### `baseUrlOverride`
-
-<Type>String</Type>
-
-A link that serves the iframe code. If you want to host the code on your own domain, get the source from [here](https://github.com/LonelyCpp/react-native-youtube-iframe/blob/master/iframe.html).
-
-Default link - https://lonelycpp.github.io/react-native-youtube-iframe/iframe.html

docs/props.mdx

@@ -0,0 +1,45 @@
+---
+id: remove-context-share
+title: Remove Context Menu
+---
+
+---
+
+### Removing context menu on long-press:
+
+Use react-native's [Pressable API](https://reactnative.dev/docs/pressable) or any of the touchables to intercept long presses.
+
+example : (by [@vijay122](https://github.com/LonelyCpp/react-native-youtube-iframe/pull/111/files))
+
+```jsx
+<Pressable
+  onLongPress={() => {
+    // handle or ignore
+  }}>
+  <YoutubePlayer (...) />
+</Pressable>
+```
+
+### Removing context menu on kebab menu (prevent share):
+
+It is not possible to change to UI of the player. You can however achieve this by placing an absolutely positioned view on the player (either fully covering the player or just tall enough to cover the title) to prevent the webview from receiving user touches. This will not remove the logo or three dots, but will make it un-interactable.
+
+example:
+
+```jsx
+<View>
+  <YoutubePlayer height={300} videoId={'XSqi5s3rfqk'} />
+  <TouchableOpacity
+    // TouchableOpacity to "steal" taps
+    // absolutely positioned to the top
+    // height must be adjusted to
+    // just cover the top 3 dots
+    style={{
+      top: 0,
+      height: 50,
+      width: '100%',
+      position: 'absolute',
+    }}
+  />
+</View>
+```

docs/remove-context-share.mdx

@@ -0,0 +1,58 @@
+---
+id: elapsed-time
+title: Show elapsed time
+---
+
+The player provides a way to fetch current time. Combining this with `setInterval` is the right way to go, since you can control the accuracy and frequency of the reading.
+
+example:
+
+```javascript
+import React, {useState, useRef, useEffect} from 'react';
+import {Text, View} from 'react-native';
+import YoutubePlayer from 'react-native-youtube-iframe';
+
+const App = () => {
+  const [elapsed, setElapsed] = useState(0);
+  const playerRef = useRef();
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      const elapsed_sec = await playerRef.current.getCurrentTime(); // this is a promise. dont forget to await
+
+      // calculations
+      const elapsed_ms = Math.floor(elapsed_sec * 1000);
+      const ms = elapsed_ms % 1000;
+      const min = Math.floor(elapsed_ms / 60000);
+      const seconds = Math.floor((elapsed_ms - min * 60000) / 1000);
+
+      setElapsed(
+        min.toString().padStart(2, '0') +
+          ':' +
+          seconds.toString().padStart(2, '0') +
+          ':' +
+          ms.toString().padStart(3, '0'),
+      );
+    }, 100); // 100 ms refresh. increase it if you don't require millisecond precision
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <>
+      <YoutubePlayer
+        height={250}
+        ref={playerRef}
+        videoId={'DC471a9qrU4'}
+      />
+      <View>
+        <View style={{flexDirection: 'row'}}>
+          <Text style={{flex: 1}}>{'elapsed time'}</Text>
+          <Text style={{flex: 1, color: 'green'}}>{elapsed}</Text>
+        </View>
+    </>
+  );
+};
+```

docs/show-elapsed-time.mdx

@@ -9,6 +9,10 @@ module.exports = {
   organizationName: 'LonelyCpp',
   projectName: 'react-native-youtube-iframe',
   themeConfig: {
+    sidebarCollapsible: false,
+    colorMode: {
+      defaultMode: 'dark',
+    },
     navbar: {
       title: 'React Native Youtube-iframe',
       logo: {
@@ -34,7 +38,6 @@ module.exports = {
         docs: {
           path: '../docs',
           routeBasePath: '/',
-          homePageId: 'about',
           sidebarPath: require.resolve('./sidebars.js'),
         },
         theme: {

website/docusaurus.config.js

@@ -1,10 +1,11 @@
 module.exports = {
-  someSidebar: {
+  sideBar: {
     About: ['about', 'install', 'basic-usage'],
     Documentation: [
       'component-props',
       'component-ref-methods',
       'module-methods',
     ],
+    FAQ: ['play-store-compatibility', 'remove-context-share', 'elapsed-time'],
   },
 };

website/sidebars.js

@@ -1 +1 @@
-<!doctypehtml><meta name="viewport"content="width=device-width,maximum-scale=1"><style>body{margin:0}.container{position:relative;width:100%;height:0;padding-bottom:56.25%}.video{position:absolute;top:0;left:0;width:100%;height:100%}</style><div class="container"><div class="video"id="player"></div></div><script>const parsedUrl=new URL(window.location.href),UrlQueryData=parsedUrl.searchParams.get("data"),{end:end,list:list,color:color,start:start,rel_s:rel_s,loop_s:loop_s,listType:listType,playerLang:playerLang,playlist:playlist,videoId_s:videoId_s,controls_s:controls_s,cc_lang_pref_s:cc_lang_pref_s,contentScale_s:contentScale_s,modestbranding_s:modestbranding_s,iv_load_policy:iv_load_policy,preventFullScreen_s:preventFullScreen_s,showClosedCaptions_s:showClosedCaptions_s}=JSON.parse(UrlQueryData);function sendMessageToRN(e){window.ReactNativeWebView.postMessage(JSON.stringify(e))}var tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api";var player,firstScriptTag=document.getElementsByTagName("script")[0];function onYouTubeIframeAPIReady(){player=new YT.Player("player",{width:"1000",height:"1000",videoId:videoId_s,playerVars:{end:end,rel:rel_s,list:list,color:color,loop:loop_s,start:start,playsinline:1,hl:playerLang,playlist:playlist,listType:listType,controls:controls_s,fs:preventFullScreen_s,cc_lang_pref:cc_lang_pref_s,iv_load_policy:iv_load_policy,modestbranding:modestbranding_s,cc_load_policy:showClosedCaptions_s},events:{onReady:onPlayerReady,onError:onPlayerError,onStateChange:onPlayerStateChange,onPlaybackRateChange:onPlaybackRateChange,onPlaybackQualityChange:onPlaybackQualityChange}})}function onPlayerError(e){sendMessageToRN({eventType:"playerError",data:e.data})}function onPlaybackRateChange(e){sendMessageToRN({eventType:"playbackRateChange",data:e.data})}function onPlaybackQualityChange(e){sendMessageToRN({eventType:"playerQualityChange",data:e.data})}function onPlayerReady(e){sendMessageToRN({eventType:"playerReady"})}function onPlayerStateChange(e){sendMessageToRN({eventType:"playerStateChange",data:e.data})}firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);var isFullScreen=!1;function onFullScreenChange(){isFullScreen=document.fullscreenElement||document.msFullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement,sendMessageToRN({eventType:"fullScreenChange",data:Boolean(isFullScreen)})}document.addEventListener("fullscreenchange",onFullScreenChange),document.addEventListener("msfullscreenchange",onFullScreenChange),document.addEventListener("mozfullscreenchange",onFullScreenChange),document.addEventListener("webkitfullscreenchange",onFullScreenChange)</script>
+<!doctypehtml><meta name="viewport"content="width=device-width,"><style>body{margin:0}.container{position:relative;width:100%;height:0;padding-bottom:56.25%}.video{position:absolute;top:0;left:0;width:100%;height:100%}</style><div class="container"><div class="video"id="player"></div></div><script>const parsedUrl=new URL(window.location.href),UrlQueryData=parsedUrl.searchParams.get("data"),{end:end,list:list,color:color,start:start,rel_s:rel_s,loop_s:loop_s,listType:listType,playerLang:playerLang,playlist:playlist,videoId_s:videoId_s,controls_s:controls_s,cc_lang_pref_s:cc_lang_pref_s,contentScale_s:contentScale_s,allowWebViewZoom:allowWebViewZoom,modestbranding_s:modestbranding_s,iv_load_policy:iv_load_policy,preventFullScreen_s:preventFullScreen_s,showClosedCaptions_s:showClosedCaptions_s}=JSON.parse(UrlQueryData);function sendMessageToRN(e){window.ReactNativeWebView.postMessage(JSON.stringify(e))}let metaString="";contentScale_s&&(metaString+=`initial-scale=${contentScale_s}`),allowWebViewZoom||(metaString+=`maximum-scale=${contentScale_s}`);const viewport=document.querySelector("meta[name=viewport]");viewport.setAttribute("content","width=device-width,"+metaString);var tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api";var player,firstScriptTag=document.getElementsByTagName("script")[0];function onYouTubeIframeAPIReady(){player=new YT.Player("player",{width:"1000",height:"1000",videoId:videoId_s,playerVars:{end:end,rel:rel_s,list:list,color:color,loop:loop_s,start:start,playsinline:1,hl:playerLang,playlist:playlist,listType:listType,controls:controls_s,fs:preventFullScreen_s,cc_lang_pref:cc_lang_pref_s,iv_load_policy:iv_load_policy,modestbranding:modestbranding_s,cc_load_policy:showClosedCaptions_s},events:{onReady:onPlayerReady,onError:onPlayerError,onStateChange:onPlayerStateChange,onPlaybackRateChange:onPlaybackRateChange,onPlaybackQualityChange:onPlaybackQualityChange}})}function onPlayerError(e){sendMessageToRN({eventType:"playerError",data:e.data})}function onPlaybackRateChange(e){sendMessageToRN({eventType:"playbackRateChange",data:e.data})}function onPlaybackQualityChange(e){sendMessageToRN({eventType:"playerQualityChange",data:e.data})}function onPlayerReady(e){sendMessageToRN({eventType:"playerReady"})}function onPlayerStateChange(e){sendMessageToRN({eventType:"playerStateChange",data:e.data})}firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);var isFullScreen=!1;function onFullScreenChange(){isFullScreen=document.fullscreenElement||document.msFullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement,sendMessageToRN({eventType:"fullScreenChange",data:Boolean(isFullScreen)})}document.addEventListener("fullscreenchange",onFullScreenChange),document.addEventListener("msfullscreenchange",onFullScreenChange),document.addEventListener("mozfullscreenchange",onFullScreenChange),document.addEventListener("webkitfullscreenchange",onFullScreenChange)</script>