From 40e2080c525cfb11a97d8d4152b37e26d6bfbc4a Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Mon, 9 Mar 2020 13:51:53 +0100
Subject: [PATCH] handle additional params for notifiication cold start

---
 package.json                 |   2 +-
 src/constants.js             |   1 +
 src/page/liteFile/view.js    | 194 +++++++++++++++++++----------------
 src/page/splash/view.js      |   5 +-
 src/redux/reducers/drawer.js |   9 +-
 src/utils/helper.js          |   4 +
 yarn.lock                    |   4 +-
 7 files changed, 122 insertions(+), 97 deletions(-)

diff --git a/package.json b/package.json
index a677410..6c4f879 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "base-64": "^0.1.0",
     "@expo/vector-icons": "^8.1.0",
     "gfycat-style-urls": "^1.0.3",
-    "lbry-redux": "lbryio/lbry-redux#9c48cce570ee8e057068c86cb6507e1b441841ee",
+    "lbry-redux": "lbryio/lbry-redux#f36b91496b3852e3d032b6d360b14d5fafbc07a9",
     "lbryinc": "lbryio/lbryinc#1fc104c2d29d1d3975234c3606e848eaa28e1b6e",
     "lodash": ">=4.17.11",
     "merge": ">=1.2.1",
diff --git a/src/constants.js b/src/constants.js
index 37aa7fb..bf019b5 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -93,6 +93,7 @@ const Constants = {
   DRAWER_ROUTE_CHANNEL_CREATOR: 'ChannelCreator',
   DRAWER_ROUTE_CHANNEL_CREATOR_FORM: 'ChannnelCreatorForm',
   DRAWER_ROUTE_INVITES: 'Invites',
+  DRAWER_ROUTE_LITE_FILE: 'LiteFile',
 
   FULL_ROUTE_NAME_DISCOVER: 'DiscoverStack',
   FULL_ROUTE_NAME_WALLET: 'WalletStack',
diff --git a/src/page/liteFile/view.js b/src/page/liteFile/view.js
index 8c60814..bf20c5c 100644
--- a/src/page/liteFile/view.js
+++ b/src/page/liteFile/view.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Lbry, formatCredits, normalizeURI, parseURI } from 'lbry-redux';
+import { Lbry, formatCredits, normalizeURI, parseURI, parseQueryParams } from 'lbry-redux';
 import { Lbryio } from 'lbryinc';
 import {
   ActivityIndicator,
@@ -24,11 +24,10 @@ import Link from 'component/link';
 import MediaPlayer from 'component/mediaPlayer';
 import RelatedContent from 'component/relatedContent';
 import filePageStyle from 'styles/filePage';
-import { formatLbryUrlForWeb, navigateToUri } from 'utils/helper';
-import uriBarStyle from 'styles/uriBar';
+import { decode, formatLbryUrlForWeb, navigateToUri } from 'utils/helper';
 import Icon from 'react-native-vector-icons/FontAwesome5';
-import ProgressCircle from 'react-native-progress-circle';
-import Constants from "constants";
+import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
+import uriBarStyle from 'styles/uriBar';
 
 // This page will only be used for playing audio / video content from a remote stream URL
 class LiteFilePage extends React.PureComponent {
@@ -39,6 +38,9 @@ class LiteFilePage extends React.PureComponent {
   player = null;
 
   state = {
+    channelName: null,
+    channelUrl: null,
+    contentTitle: null,
     fullscreenMode: false,
     playerHeight: null,
     isLandscape: false,
@@ -102,15 +104,33 @@ class LiteFilePage extends React.PureComponent {
     NativeModules.UtilityModule.shareUrl(shareUrl);
   };
 
-  render() {
-    const { navigation, rewardedContentClaimIds, title } = this.props;
-    const { viewCount } = this.state;
+  componentDidUpdate() {
+    const { navigation } = this.props;
     const { uri } = navigation.state.params;
 
+    if (!this.state.contentTitle) {
+      const params = parseQueryParams(uri);
+      const { channelUrl, contentTitle } = params;
+      const channelName = channelUrl ? parseURI(decode(channelUrl)).claimName : null;
+
+      this.setState({
+        title: decode(contentTitle),
+        channelUrl,
+        channelName,
+        showRecommended: true,
+      });
+    }
+  }
+
+  render() {
+    const { navigation, rewardedContentClaimIds } = this.props;
+    const { channelName, channelUrl, title, viewCount } = this.state;
+    const { uri } = navigation.state.params;
     const { claimName, claimId } = parseURI(uri);
     const isRewardContent = rewardedContentClaimIds.includes(claimId);
-    const channelName = null;
-    const channelUri = null;
+
+    const playerBgStyle = [filePageStyle.playerBackground, filePageStyle.containedPlayerBackground];
+    const fsPlayerBgStyle = [filePageStyle.playerBackground, filePageStyle.fullscreenPlayerBackground];
 
     const playerStyle = [
       filePageStyle.player,
@@ -123,12 +143,27 @@ class LiteFilePage extends React.PureComponent {
 
     return (
       <View style={filePageStyle.pageContainer}>
-        {!this.state.fullscreenMode && <UriBar value={uri} navigation={navigation} />}
+        {!this.state.fullscreenMode && <UriBar value={uri.split('?')[0]} navigation={navigation} />}
 
         <View
           style={this.state.fullscreenMode ? filePageStyle.innerPageContainerFsMode : filePageStyle.innerPageContainer}
           onLayout={this.checkOrientation}
         >
+          <TouchableOpacity activeOpacity={0.5} style={filePageStyle.mediaContainer} />
+
+          <View
+            style={playerBgStyle}
+            ref={ref => {
+              this.playerBackground = ref;
+            }}
+            onLayout={evt => {
+              if (!this.state.playerBgHeight) {
+                this.setState({ playerBgHeight: evt.nativeEvent.layout.height });
+              }
+            }}
+          />
+
+          {this.state.fullscreenMode && <View style={fsPlayerBgStyle} />}
           <MediaPlayer
             assignPlayer={ref => {
               this.player = ref;
@@ -144,89 +179,74 @@ class LiteFilePage extends React.PureComponent {
               }
             }}
           />
-        </View>
 
-        <ScrollView
-          contentContainerstyle={filePageStyle.scrollContent}
-          keyboardShouldPersistTaps={'handled'}
-          ref={ref => {
-            this.scrollView = ref;
-          }}
-        >
-          <TouchableWithoutFeedback
-            style={filePageStyle.titleTouch}
-            onPress={() => this.setState({ showDescription: !this.state.showDescription })}
+          <ScrollView
+            style={filePageStyle.scrollContainer}
+            contentContainerStyle={filePageStyle.scrollContent}
+            keyboardShouldPersistTaps={'handled'}
+            ref={ref => {
+              this.scrollView = ref;
+            }}
           >
-            <View style={filePageStyle.titleArea}>
-              <View style={filePageStyle.titleRow}>
-                <Text style={filePageStyle.title} selectable>
-                  {title}
-                </Text>
-                {isRewardContent && <Icon name="award" style={filePageStyle.rewardIcon} size={16} />}
-              </View>
-              <Text style={filePageStyle.viewCount}>
-                {viewCount === 1 && __('%view% view', { view: viewCount })}
-                {viewCount > 1 && __('%view% views', { view: viewCount })}
-              </Text>
-            </View>
-          </TouchableWithoutFeedback>
-
-          <View style={filePageStyle.largeButtonsRow}>
-            <TouchableOpacity style={filePageStyle.largeButton} onPress={() => this.handleSharePress(uri)}>
-              <Icon name={'share-alt'} size={16} style={filePageStyle.largeButtonIcon} />
-              <Text style={filePageStyle.largeButtonText}>{__('Share')}</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity
-              style={filePageStyle.largeButton}
-              onPress={() => this.setState({ showTipView: true })}
+            <TouchableWithoutFeedback
+              style={filePageStyle.titleTouch}
+              onPress={() => this.setState({ showDescription: !this.state.showDescription })}
             >
-              <Icon name={'gift'} size={16} style={filePageStyle.largeButtonIcon} />
-              <Text style={filePageStyle.largeButtonText}>{__('Tip')}</Text>
-            </TouchableOpacity>
-          </View>
-
-          <View style={filePageStyle.channelRow}>
-            <View style={filePageStyle.publishInfo}>
-              {channelName && (
-                <Link
-                  style={filePageStyle.channelName}
-                  selectable
-                  text={channelName}
-                  numberOfLines={1}
-                  ellipsizeMode={'tail'}
-                  onPress={() => {
-                    navigateToUri(
-                      navigation,
-                      normalizeURI(channelUri),
-                      null,
-                      false,
-                      null,
-                      false,
-                    );
-                  }}
-                />
-              )}
-              {!channelName && (
-                <Text style={filePageStyle.anonChannelName} selectable ellipsizeMode={'tail'}>
-                  {__('Anonymous')}
+              <View style={filePageStyle.titleArea}>
+                <View style={filePageStyle.titleRow}>
+                  <Text style={filePageStyle.title} selectable>
+                    {title}
+                  </Text>
+                  {isRewardContent && <Icon name="award" style={filePageStyle.rewardIcon} size={16} />}
+                </View>
+                <Text style={filePageStyle.viewCount}>
+                  {viewCount === 1 && __('%view% view', { view: viewCount })}
+                  {viewCount > 1 && __('%view% views', { view: viewCount })}
                 </Text>
-              )}
+              </View>
+            </TouchableWithoutFeedback>
+
+            <View style={filePageStyle.largeButtonsRow}>
+              <TouchableOpacity style={filePageStyle.largeButton} onPress={() => this.handleSharePress(uri)}>
+                <Icon name={'share-alt'} size={16} style={filePageStyle.largeButtonIcon} />
+                <Text style={filePageStyle.largeButtonText}>{__('Share')}</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity style={filePageStyle.largeButton} onPress={() => this.setState({ showTipView: true })}>
+                <Icon name={'gift'} size={16} style={filePageStyle.largeButtonIcon} />
+                <Text style={filePageStyle.largeButtonText}>{__('Tip')}</Text>
+              </TouchableOpacity>
             </View>
-          </View>
 
-          <View onLayout={this.setRelatedContentPosition} />
+            <View style={filePageStyle.channelRow}>
+              <View style={filePageStyle.publishInfo}>
+                {channelName && (
+                  <Link
+                    style={filePageStyle.channelName}
+                    selectable
+                    text={channelName}
+                    numberOfLines={1}
+                    ellipsizeMode={'tail'}
+                    onPress={() => {
+                      navigateToUri(navigation, normalizeURI(channelUrl), null, false, null, false);
+                    }}
+                  />
+                )}
+                {!channelName && (
+                  <Text style={filePageStyle.anonChannelName} selectable ellipsizeMode={'tail'}>
+                    {__('Anonymous')}
+                  </Text>
+                )}
+              </View>
+            </View>
 
-          {this.state.showRecommended && (
-            <RelatedContent
-              navigation={navigation}
-              claimId={claimId}
-              title={title}
-              uri={uri}
-              fullUri={uri}
-            />
-          )}
-        </ScrollView>
+            <View onLayout={this.setRelatedContentPosition} />
+
+            {this.state.showRecommended && (
+              <RelatedContent navigation={navigation} claimId={claimId} title={title} uri={uri} fullUri={uri} />
+            )}
+          </ScrollView>
+        </View>
       </View>
     );
   }
diff --git a/src/page/splash/view.js b/src/page/splash/view.js
index ded3599..e5f9d28 100644
--- a/src/page/splash/view.js
+++ b/src/page/splash/view.js
@@ -160,12 +160,13 @@ class SplashScreen extends React.PureComponent {
 
   navigateToLiteMode = () => {
     const { navigation } = this.props;
+    const { launchUrl } = this.state;
     const resetAction = StackActions.reset({
       index: 0,
       actions: [
         NavigationActions.navigate({
-          routeName: 'LiteFile',
-          params: { uri: this.state.launchUrl.replace(/liteMode=1/gi, '') },
+          routeName: Constants.DRAWER_ROUTE_LITE_FILE,
+          params: { uri: launchUrl },
         }),
       ],
     });
diff --git a/src/redux/reducers/drawer.js b/src/redux/reducers/drawer.js
index 2525ece..6b5a8c5 100644
--- a/src/redux/reducers/drawer.js
+++ b/src/redux/reducers/drawer.js
@@ -45,15 +45,14 @@ reducers[Constants.ACTION_PUSH_DRAWER_STACK] = (state, action) => {
   if (routeName === Constants.DRAWER_ROUTE_SUBSCRIPTIONS && newStack.length === 1) {
     canPushStack = false;
   }
+  if (routeName === Constants.DRAWER_ROUTE_LITE_FILE) {
+    canPushStack = false;
+  }
 
   let lastRouteInStack;
   if (canPushStack) {
     newStack.push({ route: routeName, params });
-
-    // save the route (if it's not lite mode)
-    if (routeName.toLowerCase() !== 'litefile') {
-      lastRouteInStack = { route: routeName, params };
-    }
+    lastRouteInStack = { route: routeName, params };
   }
 
   return {
diff --git a/src/utils/helper.js b/src/utils/helper.js
index 38daa46..756826c 100644
--- a/src/utils/helper.js
+++ b/src/utils/helper.js
@@ -432,3 +432,7 @@ export function fetchReferralCode(successCallback, errorCallback) {
       }
     });
 }
+
+export function decode(value) {
+  return decodeURIComponent(value).replace(/\+/g, ' ');
+}
diff --git a/yarn.lock b/yarn.lock
index 6651987..c61e10c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4591,9 +4591,9 @@ latest-version@^3.0.0:
   dependencies:
     package-json "^4.0.0"
 
-lbry-redux@lbryio/lbry-redux#9c48cce570ee8e057068c86cb6507e1b441841ee:
+lbry-redux@lbryio/lbry-redux#f36b91496b3852e3d032b6d360b14d5fafbc07a9:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/9c48cce570ee8e057068c86cb6507e1b441841ee"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/f36b91496b3852e3d032b6d360b14d5fafbc07a9"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"