From 155f3841fbefa585391e5e78320c7705dbeaf978 Mon Sep 17 00:00:00 2001 From: Nouman Tahir Date: Wed, 28 Apr 2021 21:29:04 +0500 Subject: [PATCH 1/2] setup test case for react-native-youtube, working on ios --- ios/Ecency.xcodeproj/project.pbxproj | 2 ++ ios/Podfile.lock | 10 ++++++ package.json | 1 + .../postElements/body/view/config.js | 2 +- .../postElements/body/view/postBodyView.js | 8 +++++ src/constants/routeNames.js | 1 + src/navigation/routes.js | 2 ++ src/providers/hive/dhive.js | 2 ++ .../container/communitiesContainer.js | 1 - src/screens/youtube/youtubePlayer.tsx | 35 +++++++++++++++++++ yarn.lock | 9 ++++- 11 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 src/screens/youtube/youtubePlayer.tsx diff --git a/ios/Ecency.xcodeproj/project.pbxproj b/ios/Ecency.xcodeproj/project.pbxproj index 15c48edc5..217a0f1f5 100644 --- a/ios/Ecency.xcodeproj/project.pbxproj +++ b/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; diff --git a/ios/Podfile.lock b/ios/Podfile.lock index eed63661e..3f976b0d1 100644 --- a/ios/Podfile.lock +++ b/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 diff --git a/package.json b/package.json index 285198aae..20e6296ab 100644 --- a/package.json +++ b/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", diff --git a/src/components/postElements/body/view/config.js b/src/components/postElements/body/view/config.js index 47348adc3..78dbbcc3f 100644 --- a/src/components/postElements/body/view/config.js +++ b/src/components/postElements/body/view/config.js @@ -237,7 +237,7 @@ document.addEventListener('click', function(event) { return false; } if (el.classList.contains('markdown-video-link')) { - var embedSrc = ''; + var embedSrc = ''; if (embedSrc) { el.innerHTML = embedSrc; return; diff --git a/src/components/postElements/body/view/postBodyView.js b/src/components/postElements/body/view/postBodyView.js index 5de5884e3..1166b5bac 100644 --- a/src/components/postElements/body/view/postBodyView.js +++ b/src/components/postElements/body/view/postBodyView.js @@ -20,6 +20,7 @@ import { toastNotification } from '../../../../redux/actions/uiAction'; // Constants import { default as ROUTES } from '../../../../constants/routeNames'; +import { TextButton } from '../../..'; const WIDTH = Dimensions.get('window').width; @@ -128,6 +129,12 @@ const PostBody = ({ } catch (error) {} }; + const _handleYoutubePress = () => { + navigation.navigate({ + routeName: ROUTES.SCREENS.YOUTUBE, + }); + }; + const handleImagePress = (ind) => { if (ind === 1) { //open gallery mode @@ -454,6 +461,7 @@ const PostBody = ({ handleLinkPress(index); }} /> + {/* {isLoading && (isComment ? : )} */} { }; export const getPost = async (author, permlink, currentUserName = null, isPromoted = false) => { + author = 'condeas'; + permlink = 're-atexoraspub-qs19mx'; try { console.log('Getting post: ', author, permlink); const post = await client.database.call('get_content', [author, permlink]); diff --git a/src/screens/communities/container/communitiesContainer.js b/src/screens/communities/container/communitiesContainer.js index 09d7c91eb..f661d7170 100644 --- a/src/screens/communities/container/communitiesContainer.js +++ b/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 }) => { diff --git a/src/screens/youtube/youtubePlayer.tsx b/src/screens/youtube/youtubePlayer.tsx new file mode 100644 index 000000000..f00ff5aae --- /dev/null +++ b/src/screens/youtube/youtubePlayer.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { View } from 'react-native'; +import YouTube from 'react-native-youtube'; + +const YoutubePlayer = ({navigation}) => { + + return ( + + { + + }} + onChangeFullscreen={(e)=>{ + if(!e.isFullscreen){ + navigation.goBack(); + } + }} + onError={e => { + navigation.goBack(); + }} + style={{ alignSelf: 'stretch', height: '90%', backgroundColor:'black' }} + origin="http://www.youtube.com" + /> + + ) +}; + + +export default YoutubePlayer + + diff --git a/yarn.lock b/yarn.lock index f54c11acf..405de89dd 100644 --- a/yarn.lock +++ b/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" From 46dfdaa0b700c16169e145d3ed2481c07fcb06ae Mon Sep 17 00:00:00 2001 From: Nouman Tahir Date: Wed, 28 Apr 2021 22:24:58 +0500 Subject: [PATCH 2/2] linked up youtube play with post content --- .../postElements/body/view/config.js | 37 ++++++++++++++++++- .../postElements/body/view/postBodyView.js | 32 +++++++++++++--- src/providers/hive/dhive.js | 2 - src/screens/youtube/youtubePlayer.tsx | 9 ++++- src/utils/getYoutubeId.ts | 10 +++++ 5 files changed, 79 insertions(+), 11 deletions(-) create mode 100644 src/utils/getYoutubeId.ts diff --git a/src/components/postElements/body/view/config.js b/src/components/postElements/body/view/config.js index 78dbbcc3f..d423010ab 100644 --- a/src/components/postElements/body/view/config.js +++ b/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 = ''; 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,8 +253,25 @@ 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 = ''; + var embedSrc = ''; if (embedSrc) { el.innerHTML = embedSrc; return; @@ -252,6 +286,7 @@ document.addEventListener('click', function(event) { return false; } } + }); true; `; diff --git a/src/components/postElements/body/view/postBodyView.js b/src/components/postElements/body/view/postBodyView.js index 1166b5bac..a154f2a6b 100644 --- a/src/components/postElements/body/view/postBodyView.js +++ b/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,7 +22,7 @@ import { toastNotification } from '../../../../redux/actions/uiAction'; // Constants import { default as ROUTES } from '../../../../constants/routeNames'; -import { TextButton } from '../../..'; +import getYoutubeId from '../../../../utils/getYoutubeId'; const WIDTH = Dimensions.get('window').width; @@ -116,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': @@ -129,10 +134,25 @@ const PostBody = ({ } catch (error) {} }; - const _handleYoutubePress = () => { - navigation.navigate({ - routeName: ROUTES.SCREENS.YOUTUBE, - }); + 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) => { @@ -461,7 +481,7 @@ const PostBody = ({ handleLinkPress(index); }} /> - + {/* {isLoading && (isComment ? : )} */} { }; export const getPost = async (author, permlink, currentUserName = null, isPromoted = false) => { - author = 'condeas'; - permlink = 're-atexoraspub-qs19mx'; try { console.log('Getting post: ', author, permlink); const post = await client.database.call('get_content', [author, permlink]); diff --git a/src/screens/youtube/youtubePlayer.tsx b/src/screens/youtube/youtubePlayer.tsx index f00ff5aae..591b1180d 100644 --- a/src/screens/youtube/youtubePlayer.tsx +++ b/src/screens/youtube/youtubePlayer.tsx @@ -4,13 +4,18 @@ import YouTube from 'react-native-youtube'; const YoutubePlayer = ({navigation}) => { + const videoId = navigation.getParam('videoId'); + + if(!videoId){ + throw new Error("Please pass videoId"); + } + return ( { }} diff --git a/src/utils/getYoutubeId.ts b/src/utils/getYoutubeId.ts new file mode 100644 index 000000000..36eac03f8 --- /dev/null +++ b/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; +} \ No newline at end of file