From f6d4d40caa6206454208d6fc4cbe036d6e26a3dd Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Mon, 25 Jun 2018 16:10:31 -0400
Subject: [PATCH] Open YouTube videos at a specific time (#1794)

* Open YouTube videos at a specific time

* Move react-native-youtube changes to a fork
---
 .../post_body_additional_content.js           | 42 ++++++++++++++++---
 package-lock.json                             |  5 +--
 package.json                                  |  2 +-
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/app/components/post_body_additional_content/post_body_additional_content.js b/app/components/post_body_additional_content/post_body_additional_content.js
index 2c29d0828..d66574d08 100644
--- a/app/components/post_body_additional_content/post_body_additional_content.js
+++ b/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;
diff --git a/package-lock.json b/package-lock.json
index f9570bd81..0c3a652be 100644
--- a/package-lock.json
+++ b/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"
       }
diff --git a/package.json b/package.json
index 8786a2482..df04c7d14 100644
--- a/package.json
+++ b/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",