Merge pull request #1937 from ecency/nt/bug-fixes

Nt/bug fixes

ios/Ecency.xcodeproj/project.pbxproj

@@ -742,6 +742,7 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
 				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
+				"${PODS_ROOT}/YoutubePlayer-in-WKWebView/WKYTPlayerView/WKYTPlayerView.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -763,6 +764,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/WKYTPlayerView.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;

ios/Podfile.lock

@@ -151,6 +151,9 @@ PODS:
     - Folly (= 2018.10.22.00)
     - RCTRequired (= 0.61.5)
     - React-Core (= 0.61.5)
+  - RCTYouTube (2.0.1):
+    - React
+    - YoutubePlayer-in-WKWebView (~> 0.3.1)
   - React (0.61.5):
     - React-Core (= 0.61.5)
     - React-Core/DevSupport (= 0.61.5)
@@ -427,6 +430,7 @@ PODS:
   - toolbar-android (0.1.0-rc.2):
     - React
   - Yoga (1.14.0)
+  - YoutubePlayer-in-WKWebView (0.3.5)
 
 DEPENDENCIES:
   - appcenter-analytics (from `../node_modules/appcenter-analytics/ios`)
@@ -443,6 +447,7 @@ DEPENDENCIES:
   - lottie-react-native (from `../node_modules/lottie-react-native`)
   - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
   - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
+  - RCTYouTube (from `../node_modules/react-native-youtube`)
   - React (from `../node_modules/react-native/`)
   - React-Core (from `../node_modules/react-native/`)
   - React-Core/DevSupport (from `../node_modules/react-native/`)
@@ -517,6 +522,7 @@ SPEC REPOS:
     - SDWebImage
     - SDWebImageWebPCoder
     - TOCropViewController
+    - YoutubePlayer-in-WKWebView
 
 EXTERNAL SOURCES:
   appcenter-analytics:
@@ -547,6 +553,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/RCTRequired"
   RCTTypeSafety:
     :path: "../node_modules/react-native/Libraries/TypeSafety"
+  RCTYouTube:
+    :path: "../node_modules/react-native-youtube"
   React:
     :path: "../node_modules/react-native/"
   React-Core:
@@ -674,6 +682,7 @@ SPEC CHECKSUMS:
   Protobuf: 0cde852566359049847168e51bd1c690e0f70056
   RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1
   RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320
+  RCTYouTube: 4509d59a7de050dd0c7c6cb1f427d37678d63b5c
   React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78
   React-Core: 688b451f7d616cc1134ac95295b593d1b5158a04
   React-CoreModules: d04f8494c1a328b69ec11db9d1137d667f916dcb
@@ -723,6 +732,7 @@ SPEC CHECKSUMS:
   TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
   toolbar-android: 85f3ef4d691469f2d304e7dee4bca013aa1ba1ff
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
+  YoutubePlayer-in-WKWebView: cfbf46da51d7370662a695a8f351e5fa1d3e1008
 
 PODFILE CHECKSUM: fe3729fa5bd9034637b0c0653446c2895b1c839d
 

package.json

@@ -104,6 +104,7 @@
     "react-native-version": "^4.0.0",
     "react-native-version-number": "^0.3.5",
     "react-native-webview": "^11.2.1",
+    "react-native-youtube": "^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/config.js

@@ -97,6 +97,21 @@ document.addEventListener('click', function(event) {
     window.ReactNativeWebView.postMessage(JSON.stringify(result));
     return false;
   }
+
+  if (el.classList.contains('markdown-video-link-youtube')) {
+    var embedUrl = el.getAttribute('data-embed-src');
+
+    if (embedUrl) {
+  
+      var result = {
+        type: 'markdown-video-link-youtube',
+        tag: embedUrl
+      };
+      window.ReactNativeWebView.postMessage(JSON.stringify(result));
+      return false;
+    }
+  }
+
   if (el.classList.contains('markdown-video-link')) {
     var embedSrc = '<iframe frameborder="0" allowfullscreen src="' + el.getAttribute('data-embed-src') + '"></iframe>';
     if (embedSrc) {
@@ -113,6 +128,8 @@ document.addEventListener('click', function(event) {
       return false;
     }
   }
+  
+
   var author = el.getAttribute('data-author').toString();
   window.ReactNativeWebView.postMessage(JSON.stringify(author));
 });
@@ -236,6 +253,23 @@ document.addEventListener('click', function(event) {
     window.ReactNativeWebView.postMessage(JSON.stringify(result));
     return false;
   }
+
+  if (el.classList.contains('markdown-video-link-youtube')) {
+    var embedUrl = el.getAttribute('data-embed-src');
+
+    if (embedUrl) {
+
+
+      var result = {
+        type: 'markdown-video-link-youtube',
+        tag: embedUrl
+      };
+      window.ReactNativeWebView.postMessage(JSON.stringify(result));
+      return false;
+    }
+  }
+
+
   if (el.classList.contains('markdown-video-link')) {
     var embedSrc = '<iframe frameborder="0" allowfullscreen src="' + el.getAttribute('data-embed-src') + '"></iframe>';
     if (embedSrc) {
@@ -252,6 +286,7 @@ document.addEventListener('click', function(event) {
       return false;
     }
   }
+
 });
 true;
 `;

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

@@ -11,6 +11,8 @@ import RNFetchBlob from 'rn-fetch-blob';
 import ActionSheet from 'react-native-actionsheet';
 import { connect } from 'react-redux';
 
+import { YouTubeStandaloneAndroid } from 'react-native-youtube';
+import Config from 'react-native-config';
 import { customBodyScript } from './config';
 import { PostPlaceHolder, CommentPlaceHolder } from '../../../basicUIElements';
 
@@ -20,6 +22,7 @@ import { toastNotification } from '../../../../redux/actions/uiAction';
 
 // Constants
 import { default as ROUTES } from '../../../../constants/routeNames';
+import getYoutubeId from '../../../../utils/getYoutubeId';
 
 const WIDTH = Dimensions.get('window').width;
 
@@ -115,6 +118,9 @@ const PostBody = ({
           break;
         case 'markdown-proposal-link':
           break;
+        case 'markdown-video-link-youtube':
+          _handleYoutubePress(tag);
+          break;
         case 'markdown-video-link':
           break;
         case 'image':
@@ -128,6 +134,27 @@ const PostBody = ({
     } catch (error) {}
   };
 
+  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 {
+      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));
+    }
+  };
+
   const handleImagePress = (ind) => {
     if (ind === 1) {
       //open gallery mode
@@ -454,6 +481,7 @@ const PostBody = ({
           handleLinkPress(index);
         }}
       />
+
       {/* {isLoading && (isComment ? <CommentPlaceHolder /> : <PostPlaceHolder />)} */}
       <AutoHeightWebView
         source={{ html }}

src/constants/routeNames.js

@@ -30,6 +30,7 @@ export default {
     ACCOUNT_BOOST: `AccountBoost${SCREEN_SUFFIX}`,
     COMMUNITY: `Community${SCREEN_SUFFIX}`,
     COMMUNITIES: `Communities${SCREEN_SUFFIX}`,
+    YOUTUBE: `YouTube${SCREEN_SUFFIX}`,
   },
   DRAWER: {
     MAIN: `Main${DRAWER_SUFFIX}`,

src/navigation/routes.js

@@ -39,6 +39,7 @@ import {
   Community,
   Communities,
 } from '../screens';
+import YoutubePlayer from '../screens/youtube/youtubePlayer';
 
 const bottomTabNavigator = createBottomTabNavigator(
   {
@@ -150,6 +151,7 @@ const stackNavigator = createStackNavigator(
     [ROUTES.SCREENS.ACCOUNT_BOOST]: { screen: AccountBoost },
     [ROUTES.SCREENS.COMMUNITY]: { screen: Community },
     [ROUTES.SCREENS.COMMUNITIES]: { screen: Communities },
+    [ROUTES.SCREENS.YOUTUBE]: { screen: YoutubePlayer },
   },
   {
     headerMode: 'none',

src/screens/communities/container/communitiesContainer.js

@@ -8,7 +8,6 @@ import ROUTES from '../../../constants/routeNames';
 
 import { getCommunities, getSubscriptions } from '../../../providers/hive/dhive';
 
-import { toastNotification } from '../../../redux/actions/uiAction';
 import { subscribeCommunity, leaveCommunity } from '../../../redux/actions/communitiesAction';
 
 const CommunitiesContainer = ({ children, navigation }) => {

src/screens/youtube/youtubePlayer.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View } from 'react-native';
+import YouTube from 'react-native-youtube';
+
+const YoutubePlayer = ({navigation}) => {
+    
+    const videoId = navigation.getParam('videoId');
+
+    if(!videoId){
+        throw new Error("Please pass videoId");
+    }
+
+    return (
+        <View style={{flex:1, backgroundColor:'black', justifyContent:'center', alignItems:'center'}} >
+            <YouTube
+                videoId={videoId} // The YouTube video ID
+                play // control playback of video with true/false
+                fullscreen // control whether the video should play in fullscreen or inline
+                onReady={e => {
+                  
+                }}
+                onChangeFullscreen={(e)=>{
+                    if(!e.isFullscreen){
+                        navigation.goBack();
+                    }
+                }}
+                onError={e => {
+                    navigation.goBack();
+                }}
+                style={{ alignSelf: 'stretch', height: '90%', backgroundColor:'black' }}
+                origin="http://www.youtube.com"
+            />
+        </View>
+    )
+};
+
+
+export default YoutubePlayer
+
+

src/utils/getYoutubeId.ts

@@ -0,0 +1,10 @@
+
+
+export default (url) => {
+    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+    var match = url.match(regExp);
+    var videoId = (match&&match[7].length==11)? match[7] : false;
+
+    console.log("Extracting id ", videoId, url);
+    return videoId;
+}

yarn.lock

@@ -7245,7 +7245,7 @@ prop-types@15.6.2:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7692,6 +7692,13 @@ react-native-webview@^11.2.1:
     escape-string-regexp "2.0.0"
     invariant "2.2.4"
 
+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"
+  integrity sha512-CVzJyynKoEEMXHv/Nx+s8HdovnfVIZs0DIUjWUQsgEd+kbBubXJZTguCKj4WigI8SI1LJ0thF8SEGbdqW8oJkw==
+  dependencies:
+    prop-types "^15.5.0"
+
 react-native@0.61.5:
   version "0.61.5"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.61.5.tgz#6e21acb56cbd75a3baeb1f70201a66f42600bba8"