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 ( - {!this.state.fullscreenMode && } + {!this.state.fullscreenMode && } + + + { + this.playerBackground = ref; + }} + onLayout={evt => { + if (!this.state.playerBgHeight) { + this.setState({ playerBgHeight: evt.nativeEvent.layout.height }); + } + }} + /> + + {this.state.fullscreenMode && } { this.player = ref; @@ -144,89 +179,74 @@ class LiteFilePage extends React.PureComponent { } }} /> - - { - this.scrollView = ref; - }} - > - this.setState({ showDescription: !this.state.showDescription })} + { + this.scrollView = ref; + }} > - - - - {title} - - {isRewardContent && } - - - {viewCount === 1 && __('%view% view', { view: viewCount })} - {viewCount > 1 && __('%view% views', { view: viewCount })} - - - - - - this.handleSharePress(uri)}> - - {__('Share')} - - - this.setState({ showTipView: true })} + this.setState({ showDescription: !this.state.showDescription })} > - - {__('Tip')} - - - - - - {channelName && ( - { - navigateToUri( - navigation, - normalizeURI(channelUri), - null, - false, - null, - false, - ); - }} - /> - )} - {!channelName && ( - - {__('Anonymous')} + + + + {title} + + {isRewardContent && } + + + {viewCount === 1 && __('%view% view', { view: viewCount })} + {viewCount > 1 && __('%view% views', { view: viewCount })} - )} + + + + + this.handleSharePress(uri)}> + + {__('Share')} + + + this.setState({ showTipView: true })}> + + {__('Tip')} + - - + + + {channelName && ( + { + navigateToUri(navigation, normalizeURI(channelUrl), null, false, null, false); + }} + /> + )} + {!channelName && ( + + {__('Anonymous')} + + )} + + - {this.state.showRecommended && ( - - )} - + + + {this.state.showRecommended && ( + + )} + + ); } 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"