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"