Merge pull request #1944 from ecency/nt/youtube

Youtube iFrame

package.json

@@ -105,6 +105,7 @@
     "react-native-version-number": "^0.3.5",
     "react-native-webview": "^11.2.1",
     "react-native-youtube": "^2.0.1",
+    "react-native-youtube-iframe": "^2.0.1",
     "react-navigation": "^4.0.10",
     "react-navigation-drawer": "^2.3.3",
     "react-navigation-redux-helpers": "^4.0.1",

src/components/postElements/body/view/postBodyView.js

@@ -9,10 +9,12 @@ import get from 'lodash/get';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import RNFetchBlob from 'rn-fetch-blob';
 import ActionSheet from 'react-native-actionsheet';
+import ActionSheetView from 'react-native-actions-sheet';
 import { connect } from 'react-redux';
 
 import { YouTubeStandaloneAndroid } from 'react-native-youtube';
 import Config from 'react-native-config';
+import Youtube from 'react-native-youtube-iframe';
 import { customBodyScript } from './config';
 import { PostPlaceHolder, CommentPlaceHolder } from '../../../basicUIElements';
 
@@ -24,6 +26,7 @@ import { toastNotification } from '../../../../redux/actions/uiAction';
 import { default as ROUTES } from '../../../../constants/routeNames';
 import getYoutubeId from '../../../../utils/getYoutubeId';
 import isAndroidOreo from '../../../../utils/isAndroidOreo';
+import YoutubePlayer from './youtubePlayer';
 
 const WIDTH = Dimensions.get('window').width;
 
@@ -38,14 +41,17 @@ const PostBody = ({
   onLoadEnd,
 }) => {
   const [isImageModalOpen, setIsImageModalOpen] = useState(false);
+
   const [postImages, setPostImages] = useState([]);
   const [selectedImage, setSelectedImage] = useState(null);
   const [selectedLink, setSelectedLink] = useState(null);
   const [html, setHtml] = useState('');
+  const [youtubeVideoId, setYoutubeVideoId] = useState(null);
 
   const intl = useIntl();
   const actionImage = useRef(null);
   const actionLink = useRef(null);
+  const youtubePlayerRef = useRef(null);
   // const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -137,26 +143,9 @@ const PostBody = ({
 
   const _handleYoutubePress = (embedUrl) => {
     const videoId = getYoutubeId(embedUrl);
-
-    if (Platform.OS === 'ios') {
-      //standalone play for ios goes against youtube policies,
-      //that is why using it as component in separate screen
-      navigation.navigate(ROUTES.SCREENS.YOUTUBE, {
-        videoId,
-      });
-    } else if (isAndroidOreo()) {
-      //if android oreo, open youtube app instead to avoid app reload on back press.
-      const interappLink = `vnd.youtube://${videoId}`;
-      Linking.canOpenURL(interappLink) && Linking.openURL(interappLink);
-    } else {
-      YouTubeStandaloneAndroid.playVideo({
-        apiKey: Config.YOUTUBE_API_KEY,
-        videoId: videoId, // The YouTube video ID,
-        lightboxMode: true,
-        autoplay: true,
-      })
-        .then(() => console.log('Standalone Player Exited'))
-        .catch((errorMessage) => console.error(errorMessage));
+    if (videoId && youtubePlayerRef.current) {
+      setYoutubeVideoId(videoId);
+      youtubePlayerRef.current.setModalVisible(true);
     }
   };
 
@@ -459,6 +448,20 @@ const PostBody = ({
           onClick={() => setIsImageModalOpen(false)}
         />
       </Modal>
+
+      <ActionSheetView
+        ref={youtubePlayerRef}
+        gestureEnabled={true}
+        hideUnderlay
+        containerStyle={{ backgroundColor: 'black' }}
+        indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')}
+        onClose={() => {
+          setYoutubeVideoId(null);
+        }}
+      >
+        <YoutubePlayer videoId={youtubeVideoId} />
+      </ActionSheetView>
+
       <ActionSheet
         ref={actionImage}
         options={[

src/components/postElements/body/view/youtubePlayer.tsx

@@ -0,0 +1,53 @@
+import React, {useState} from 'react';
+import { View, StyleSheet, ActivityIndicator } from 'react-native';
+import YoutubeIframe from 'react-native-youtube-iframe';
+
+interface YoutubePlayerProps {
+    videoId:string
+}
+
+const YoutubePlayer = ({videoId}: YoutubePlayerProps) => {
+
+    const [shouldPlay, setShouldPlay] = useState(false);
+    const [loading, setLoading] = useState(true);
+
+    const _onReady = () => {
+        setLoading(false)
+        setShouldPlay(true);
+    }
+
+    const _onChangeState = (event:string) => {
+        setShouldPlay(!(event == 'paused' || event == 'ended'));
+    }
+
+    const _onError = () => {
+        setLoading(false)
+    }
+
+    return (
+        <View style={styles.container}>
+            
+            {videoId && 
+                <YoutubeIframe 
+                    height={250} 
+                    videoId={videoId} 
+                    onReady={_onReady} 
+                    play={shouldPlay} 
+                    onChangeState={_onChangeState} 
+                    onError={_onError}
+                />
+            }
+            {loading && <ActivityIndicator style={styles.activityIndicator}/>}
+        </View>
+  );
+};
+
+export default YoutubePlayer;
+
+const styles = StyleSheet.create({
+    container: {
+        paddingVertical:16,
+    },
+    activityIndicator: {
+        position:'absolute', alignItems:'center', justifyContent:'center', top:0, bottom:0, left:0, right:0}
+});

yarn.lock

@@ -3619,7 +3619,7 @@ events@^1.1.0:
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
   integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
 
-events@^3.0.0:
+events@^3.0.0, events@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
@@ -7692,6 +7692,13 @@ react-native-webview@^11.2.1:
     escape-string-regexp "2.0.0"
     invariant "2.2.4"
 
+react-native-youtube-iframe@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-youtube-iframe/-/react-native-youtube-iframe-2.0.1.tgz#19182bf95904e0cc5da4c6ea488a02551db9396d"
+  integrity sha512-DPu4nyHhfGs+bylgFRYuRjHlP0mg5Wjlm+KAPRhV68mUMuK1c3v2nXapuoia5GFkmtDwTrrMpIf5iG99QJoILg==
+  dependencies:
+    events "^3.2.0"
+
 react-native-youtube@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-native-youtube/-/react-native-youtube-2.0.1.tgz#1b6275ca2c1db8e13539a59ccfda8ae8479b1590"