Merge pull request #1944 from ecency/nt/youtube

Youtube iFrame
This commit is contained in:
Feruz M 2021-05-10 00:46:56 +03:00 committed by GitHub
commit 78ef575ef4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 85 additions and 21 deletions

View File

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

View File

@ -9,10 +9,12 @@ import get from 'lodash/get';
import ImageViewer from 'react-native-image-zoom-viewer'; import ImageViewer from 'react-native-image-zoom-viewer';
import RNFetchBlob from 'rn-fetch-blob'; import RNFetchBlob from 'rn-fetch-blob';
import ActionSheet from 'react-native-actionsheet'; import ActionSheet from 'react-native-actionsheet';
import ActionSheetView from 'react-native-actions-sheet';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { YouTubeStandaloneAndroid } from 'react-native-youtube'; import { YouTubeStandaloneAndroid } from 'react-native-youtube';
import Config from 'react-native-config'; import Config from 'react-native-config';
import Youtube from 'react-native-youtube-iframe';
import { customBodyScript } from './config'; import { customBodyScript } from './config';
import { PostPlaceHolder, CommentPlaceHolder } from '../../../basicUIElements'; import { PostPlaceHolder, CommentPlaceHolder } from '../../../basicUIElements';
@ -24,6 +26,7 @@ import { toastNotification } from '../../../../redux/actions/uiAction';
import { default as ROUTES } from '../../../../constants/routeNames'; import { default as ROUTES } from '../../../../constants/routeNames';
import getYoutubeId from '../../../../utils/getYoutubeId'; import getYoutubeId from '../../../../utils/getYoutubeId';
import isAndroidOreo from '../../../../utils/isAndroidOreo'; import isAndroidOreo from '../../../../utils/isAndroidOreo';
import YoutubePlayer from './youtubePlayer';
const WIDTH = Dimensions.get('window').width; const WIDTH = Dimensions.get('window').width;
@ -38,14 +41,17 @@ const PostBody = ({
onLoadEnd, onLoadEnd,
}) => { }) => {
const [isImageModalOpen, setIsImageModalOpen] = useState(false); const [isImageModalOpen, setIsImageModalOpen] = useState(false);
const [postImages, setPostImages] = useState([]); const [postImages, setPostImages] = useState([]);
const [selectedImage, setSelectedImage] = useState(null); const [selectedImage, setSelectedImage] = useState(null);
const [selectedLink, setSelectedLink] = useState(null); const [selectedLink, setSelectedLink] = useState(null);
const [html, setHtml] = useState(''); const [html, setHtml] = useState('');
const [youtubeVideoId, setYoutubeVideoId] = useState(null);
const intl = useIntl(); const intl = useIntl();
const actionImage = useRef(null); const actionImage = useRef(null);
const actionLink = useRef(null); const actionLink = useRef(null);
const youtubePlayerRef = useRef(null);
// const [isLoading, setIsLoading] = useState(true); // const [isLoading, setIsLoading] = useState(true);
useEffect(() => { useEffect(() => {
@ -137,26 +143,9 @@ const PostBody = ({
const _handleYoutubePress = (embedUrl) => { const _handleYoutubePress = (embedUrl) => {
const videoId = getYoutubeId(embedUrl); const videoId = getYoutubeId(embedUrl);
if (videoId && youtubePlayerRef.current) {
if (Platform.OS === 'ios') { setYoutubeVideoId(videoId);
//standalone play for ios goes against youtube policies, youtubePlayerRef.current.setModalVisible(true);
//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));
} }
}; };
@ -459,6 +448,20 @@ const PostBody = ({
onClick={() => setIsImageModalOpen(false)} onClick={() => setIsImageModalOpen(false)}
/> />
</Modal> </Modal>
<ActionSheetView
ref={youtubePlayerRef}
gestureEnabled={true}
hideUnderlay
containerStyle={{ backgroundColor: 'black' }}
indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')}
onClose={() => {
setYoutubeVideoId(null);
}}
>
<YoutubePlayer videoId={youtubeVideoId} />
</ActionSheetView>
<ActionSheet <ActionSheet
ref={actionImage} ref={actionImage}
options={[ options={[

View File

@ -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}
});

View File

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