Open YouTube videos at a specific time (#1794)

* Open YouTube videos at a specific time

* Move react-native-youtube changes to a fork

app/components/post_body_additional_content/post_body_additional_content.js

@@ -9,6 +9,7 @@ import {
     Platform,
     StyleSheet,
     TouchableWithoutFeedback,
+    TouchableOpacity,
     View,
 } from 'react-native';
 import {YouTubeStandaloneAndroid, YouTubeStandaloneIOS} from 'react-native-youtube';
@@ -160,7 +161,7 @@ export default class PostBodyAdditionalContent extends PureComponent {
                 const thumbUrl = `https://i.ytimg.com/vi/${videoId}/default.jpg`;
 
                 return (
-                    <TouchableWithoutFeedback
+                    <TouchableOpacity
                         style={[styles.imageContainer, {height: imgHeight}]}
                         {...this.responder}
                         onPress={this.playYouTubeVideo}
@@ -173,14 +174,14 @@ export default class PostBodyAdditionalContent extends PureComponent {
                             resizeMode='cover'
                             onError={this.handleLinkLoadError}
                         >
-                            <TouchableWithoutFeedback onPress={this.playYouTubeVideo}>
+                            <TouchableOpacity onPress={this.playYouTubeVideo}>
                                 <Image
                                     source={require('assets/images/icons/youtube-play-icon.png')}
                                     onPress={this.playYouTubeVideo}
                                 />
-                            </TouchableWithoutFeedback>
+                            </TouchableOpacity>
                         </ProgressiveImage>
-                    </TouchableWithoutFeedback>
+                    </TouchableOpacity>
                 );
             }
 
@@ -343,9 +344,10 @@ export default class PostBodyAdditionalContent extends PureComponent {
     playYouTubeVideo = () => {
         const {link} = this.props;
         const videoId = youTubeVideoId(link);
+        const startTime = this.getYouTubeTime(link);
 
         if (Platform.OS === 'ios') {
-            YouTubeStandaloneIOS.playVideo(videoId);
+            YouTubeStandaloneIOS.playVideo(videoId, startTime);
         } else {
             const {config} = this.props;
 
@@ -354,6 +356,7 @@ export default class PostBodyAdditionalContent extends PureComponent {
                     apiKey: config.GoogleDeveloperKey,
                     videoId,
                     autoplay: true,
+                    startTime,
                 });
             } else {
                 Linking.openURL(link);
@@ -361,6 +364,35 @@ export default class PostBodyAdditionalContent extends PureComponent {
         }
     };
 
+    getYouTubeTime = (link) => {
+        const timeRegex = /[\\?&](t|start|time_continue)=([0-9]+h)?([0-9]+m)?([0-9]+s?)/;
+
+        const time = link.match(timeRegex);
+        if (!time || !time[0]) {
+            return '';
+        }
+
+        const hours = time[2] ? time[2].match(/([0-9]+)h/) : null;
+        const minutes = time[3] ? time[3].match(/([0-9]+)m/) : null;
+        const seconds = time[4] ? time[4].match(/([0-9]+)s?/) : null;
+
+        let ticks = 0;
+
+        if (hours && hours[1]) {
+            ticks += parseInt(hours[1], 10) * 3600;
+        }
+
+        if (minutes && minutes[1]) {
+            ticks += parseInt(minutes[1], 10) * 60;
+        }
+
+        if (seconds && seconds[1]) {
+            ticks += parseInt(seconds[1], 10);
+        }
+
+        return ticks;
+    };
+
     render() {
         const {link, openGraphData, postProps} = this.props;
         const {linkLoadError} = this.state;

package-lock.json

@@ -14913,9 +14913,8 @@
       }
     },
     "react-native-youtube": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/react-native-youtube/-/react-native-youtube-1.1.0.tgz",
-      "integrity": "sha512-/+xy09Bq4rdoUyMsDAVtflOje6mh6MK8V8D4+qC0d8EM7mSyrdrmo9rtlfQwCsGtnb+Uak46ILevyJb0FTFeHg==",
+      "version": "github:enahum/react-native-youtube#3f395b620ae4e05a3f1c6bdeef3a1158e78daadc",
+      "from": "github:enahum/react-native-youtube#3f395b620ae4e05a3f1c6bdeef3a1158e78daadc",
       "requires": {
         "prop-types": "^15.5.0"
       }

package.json

@@ -53,7 +53,7 @@
     "react-native-tooltip": "5.2.0",
     "react-native-vector-icons": "4.6.0",
     "react-native-video": "2.0.0",
-    "react-native-youtube": "1.1.0",
+    "react-native-youtube": "enahum/react-native-youtube#3f395b620ae4e05a3f1c6bdeef3a1158e78daadc",
     "react-navigation": "1.5.11",
     "react-redux": "5.0.7",
     "redux": "4.0.0",