app/src/component/dateTime/index.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import { doFetchBlock, makeSelectBlockDate } from 'lbry-redux';
+import DateTime from './view';
+
+const select = (state, props) => ({
+  date: !props.date && props.block ? makeSelectBlockDate(props.block)(state) : props.date,
+});
+
+const perform = dispatch => ({
+  fetchBlock: height => dispatch(doFetchBlock(height)),
+});
+
+export default connect(
+  select,
+  perform
+)(DateTime);

app/src/component/dateTime/view.js

@@ -0,0 +1,52 @@
+// @flow
+import React from 'react';
+import moment from 'moment';
+import { View, Text } from 'react-native';
+
+type Props = {
+  date?: number,
+  timeAgo?: boolean,
+  formatOptions: {},
+  show?: string,
+};
+
+class DateTime extends React.PureComponent<Props> {
+  static SHOW_DATE = 'date';
+  static SHOW_TIME = 'time';
+  static SHOW_BOTH = 'both';
+
+  static defaultProps = {
+    formatOptions: {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    },
+  };
+
+  render() {
+    const { date, formatOptions, timeAgo, style, textStyle } = this.props;
+    const show = this.props.show || DateTime.SHOW_BOTH;
+    const locale = 'en-US'; // default to en-US until we get a working i18n module for RN
+
+    if (timeAgo) {
+      return date ? <View style={style}><Text style={textStyle}>{moment(date).from(moment())}</Text></View> : null;
+    }
+
+    return (
+      <View style={style}>
+        <Text style={textStyle}>
+          {date &&
+            (show === DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
+            date.toLocaleDateString([locale, 'en-US'], formatOptions)}
+          {show === DateTime.SHOW_BOTH && ' '}
+          {date &&
+            (show === DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&
+            date.toLocaleTimeString()}
+          {!date && '...'}
+        </Text>
+      </View>
+    );
+  }
+}
+
+export default DateTime;

app/src/component/fileDownloadButton/view.js

@@ -38,7 +38,9 @@ class FileDownloadButton extends React.PureComponent {
       purchaseUri,
       costInfo,
       isPlayable,
+      isViewable,
       onPlay,
+      onView,
       loading,
       doPause,
       style,
@@ -68,7 +70,7 @@ class FileDownloadButton extends React.PureComponent {
       }
       return (
         <Button icon={isPlayable ? 'play' : null}
-                text={isPlayable ? 'Play' : 'Download'}
+                text={(isPlayable ? 'Play' : (isViewable ? 'View' : 'Download'))}
                 onLayout={onButtonLayout}
                 style={[style, fileDownloadButtonStyle.container]} onPress={() => {
           if (NativeModules.Mixpanel) {
@@ -78,13 +80,16 @@ class FileDownloadButton extends React.PureComponent {
           if (isPlayable && onPlay) {
             this.props.onPlay();
           }
+          if (isViewable && onView) {
+            this.props.onView();
+          }
         }} />
       );
     } else if (fileInfo && fileInfo.download_path) {
       return (
         <TouchableOpacity onLayout={onButtonLayout}
                           style={[style, fileDownloadButtonStyle.container]} onPress={openFile}>
-          <Text style={fileDownloadButtonStyle.text}>Open</Text>
+          <Text style={fileDownloadButtonStyle.text}>{isViewable ? 'View' : 'Open'}</Text>
         </TouchableOpacity>
       );
     }

app/src/component/fileItem/view.js

@@ -2,14 +2,15 @@ import React from 'react';
 import { normalizeURI } from 'lbry-redux';
 import { NavigationActions } from 'react-navigation';
 import { NativeModules, Text, View, TouchableOpacity } from 'react-native';
-import { navigateToUri } from '../../utils/helper';
-import Colors from '../../styles/colors';
-import FileItemMedia from '../fileItemMedia';
-import FilePrice from '../filePrice';
+import { navigateToUri } from 'utils/helper';
+import Colors from 'styles/colors';
+import DateTime from 'component/dateTime';
+import FileItemMedia from 'component/fileItemMedia';
+import FilePrice from 'component/filePrice';
 import Icon from 'react-native-vector-icons/FontAwesome5';
-import Link from '../link';
-import NsfwOverlay from '../nsfwOverlay';
-import discoverStyle from '../../styles/discover';
+import Link from 'component/link';
+import NsfwOverlay from 'component/nsfwOverlay';
+import discoverStyle from 'styles/discover';
 
 class FileItem extends React.PureComponent {
   constructor(props) {
@@ -50,6 +51,7 @@ class FileItem extends React.PureComponent {
     const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
     const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
     const channelName = claim ? claim.channel_name : null;
+    const height = claim ? claim.height : null;
 
     return (
       <View style={style}>
@@ -71,11 +73,14 @@ class FileItem extends React.PureComponent {
             <Text style={[discoverStyle.fileItemName, discoverStyle.rewardTitle]}>{title}</Text>
             {isRewardContent && <Icon style={discoverStyle.rewardIcon} name="award" size={20} />}
           </View>
-          {channelName &&
-            <Link style={discoverStyle.channelName} text={channelName} onPress={() => {
-              const channelUri = normalizeURI(channelName);
-              navigateToUri(navigation, channelUri);
-            }} />}
+          <View style={discoverStyle.detailsRow}>
+            {channelName &&
+              <Link style={discoverStyle.channelName} text={channelName} onPress={() => {
+                const channelUri = normalizeURI(channelName);
+                navigateToUri(navigation, channelUri);
+              }} />}
+            <DateTime style={discoverStyle.dateTime} textStyle={discoverStyle.dateTimeText} timeAgo block={height} />
+          </View>
         </TouchableOpacity>
         {obscureNsfw && <NsfwOverlay onPress={() => navigation.navigate({ routeName: 'Settings', key: 'settingsPage' })} />}
       </View>

app/src/component/fileListItem/view.js

@@ -8,12 +8,13 @@ import {
   TouchableOpacity,
   View
 } from 'react-native';
-import { navigateToUri, formatBytes } from '../../utils/helper';
-import Colors from '../../styles/colors';
-import FileItemMedia from '../fileItemMedia';
-import Link from '../../component/link';
-import NsfwOverlay from '../../component/nsfwOverlay';
-import fileListStyle from '../../styles/fileList';
+import { navigateToUri, formatBytes } from 'utils/helper';
+import Colors from 'styles/colors';
+import DateTime from 'component/dateTime';
+import FileItemMedia from 'component/fileItemMedia';
+import Link from 'component/link';
+import NsfwOverlay from 'component/nsfwOverlay';
+import fileListStyle from 'styles/fileList';
 
 class FileListItem extends React.PureComponent {
   getStorageForFileInfo = (fileInfo) => {
@@ -62,11 +63,11 @@ class FileListItem extends React.PureComponent {
     const isResolving = !fileInfo && isResolvingUri;
     const title = fileInfo ? fileInfo.metadata.title : metadata && metadata.title ? metadata.title : parseURI(uri).contentName;
 
-    let name;
-    let channel;
+    let name, channel, height;
     if (claim) {
       name = claim.name;
       channel = claim.channel_name;
+      height = claim.height;
     }
 
     return (
@@ -93,9 +94,13 @@ class FileListItem extends React.PureComponent {
                 navigateToUri(navigation, channelUri);
               }} />}
 
+            <View style={fileListStyle.info}>
+              {fileInfo && <Text style={fileListStyle.infoText}>{this.getStorageForFileInfo(fileInfo)}</Text>}
+              <DateTime style={fileListStyle.publishInfo} textStyle={fileListStyle.infoText} timeAgo block={height} />
+            </View>
+
             {fileInfo &&
               <View style={fileListStyle.downloadInfo}>
-                <Text style={fileListStyle.downloadStorage}>{this.getStorageForFileInfo(fileInfo)}</Text>
                 {!fileInfo.completed &&
                   <View style={fileListStyle.progress}>
                     <View style={[fileListStyle.progressCompleted, { flex: this.getDownloadProgress(fileInfo) } ]} />

app/src/component/mediaPlayer/view.js

@@ -154,6 +154,9 @@ class MediaPlayer extends React.PureComponent {
 
   onEnd = () => {
     this.setState({ paused: true });
+    if (this.props.onPlaybackFinished) {
+      this.props.onPlaybackFinished();
+    }
     this.video.seek(0);
   }
 

app/src/page/about/view.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Lbry } from 'lbry-redux';
 import { NativeModules, Text, View, ScrollView } from 'react-native';
-import Link from '../../component/link';
-import PageHeader from '../../component/pageHeader';
-import aboutStyle from '../../styles/about';
+import { navigateBack } from 'utils/helper';
+import Link from 'component/link';
+import PageHeader from 'component/pageHeader';
+import aboutStyle from 'styles/about';
 
 class AboutPage extends React.PureComponent {
   state = {

app/src/page/file/view.js

@@ -43,6 +43,8 @@ class FilePage extends React.PureComponent {
 
   playerBackground = null;
 
+  scrollView = null;
+
   startTime = null;
 
   constructor(props) {
@@ -58,6 +60,7 @@ class FilePage extends React.PureComponent {
       isLandscape: false,
       mediaLoaded: false,
       pageSuspended: false,
+      relatedContentY: 0,
       showImageViewer: false,
       showWebView: false,
       showTipView: false,
@@ -303,6 +306,18 @@ class FilePage extends React.PureComponent {
     NativeModules.Mixpanel.track('Play', payload);
   }
 
+  onPlaybackFinished = () => {
+    if (this.scrollView && this.state.relatedContentY) {
+        this.scrollView.scrollTo({ x: 0, y: this.state.relatedContentY, animated: true});
+    }
+  }
+
+  setRelatedContentPosition = (evt) =>  {
+    if (!this.state.relatedContentY) {
+      this.setState({ relatedContentY: evt.nativeEvent.layout.y });
+    }
+  }
+
   logFileView = (uri, fileInfo, timeToStart) => {
     const { outpoint, claim_id: claimId } = fileInfo;
     const params = {
@@ -424,25 +439,30 @@ class FilePage extends React.PureComponent {
         // at least 2MB (or the full download) before media can be loaded
         const canLoadMedia = fileInfo &&
           (fileInfo.written_bytes >= 2097152 || fileInfo.written_bytes == fileInfo.total_bytes); // 2MB = 1024*1024*2
-        const canOpen = (mediaType === 'image' || mediaType === 'text') && completed;
+        const isViewable = (mediaType === 'image' || mediaType === 'text');
         const isWebViewable = mediaType === 'text';
+        const canOpen =  isViewable && completed;
         const localFileUri = this.localUriForFileInfo(fileInfo);
 
         const openFile = () => {
           if (mediaType === 'image') {
             // use image viewer
-            this.setState({
-              imageUrls: [{
-                url: localFileUri
-              }],
-              showImageViewer: true
-            });
+            if (!this.state.showImageViewer) {
+              this.setState({
+                imageUrls: [{
+                  url: localFileUri
+                }],
+                showImageViewer: true
+              });
+            }
           }
           if (isWebViewable) {
             // show webview
-            this.setState({
-              showWebView: true
-            });
+            if (!this.state.showWebView) {
+              this.setState({
+                showWebView: true
+              });
+            }
           }
         }
 
@@ -452,6 +472,11 @@ class FilePage extends React.PureComponent {
           });
         }
 
+        if (this.state.downloadPressed && canOpen) {
+          // automatically open a web viewable or image file after the download button is pressed
+          openFile();
+        }
+
         innerContent = (
           <View style={filePageStyle.pageContainer}>
             {this.state.showWebView && isWebViewable && <WebView source={{ uri: localFileUri }}
@@ -474,10 +499,12 @@ class FilePage extends React.PureComponent {
                                         style={filePageStyle.downloadButton}
                                         openFile={openFile}
                                         isPlayable={isPlayable}
+                                        isViewable={isViewable}
                                         onPlay={() => {
                                           this.startTime = Date.now();
                                           this.setState({ downloadPressed: true, autoPlayMedia: true, stopDownloadConfirmed: false });
                                         }}
+                                        onView={() => this.setState({ downloadPressed: true })}
                                         onButtonLayout={() => this.setState({ downloadButtonShown: true })}
                                         onStartDownloadFailed={this.startDownloadFailed} />}
                   {!fileInfo && <FilePrice uri={uri} style={filePageStyle.filePriceContainer} textStyle={filePageStyle.filePriceText} />}
@@ -503,6 +530,7 @@ class FilePage extends React.PureComponent {
                                                }}
                                                onMediaLoaded={() => this.onMediaLoaded(channelName, title, uri)}
                                                onPlaybackStarted={this.onPlaybackStarted}
+                                               onPlaybackFinished={this.onPlaybackFinished}
                                                thumbnail={metadata.thumbnail}
                                               />}
 
@@ -534,7 +562,8 @@ class FilePage extends React.PureComponent {
                 </View>}
                 <ScrollView
                   style={showActions ? filePageStyle.scrollContainerActions : filePageStyle.scrollContainer}
-                  contentContainerstyle={showActions ? null : filePageStyle.scrollContent}>
+                  contentContainerstyle={showActions ? null : filePageStyle.scrollContent}
+                  ref={(ref) => { this.scrollView = ref; }}>
                   <Text style={filePageStyle.title} selectable={true}>{title}</Text>
                   {channelName &&
                     <View style={filePageStyle.channelRow}>
@@ -562,6 +591,7 @@ class FilePage extends React.PureComponent {
 
                   {description && <Text style={filePageStyle.description} selectable={true}>{this.linkify(description)}</Text>}
 
+                  <View onLayout={this.setRelatedContentPosition} />
                   <RelatedContent navigation={navigation} uri={uri} />
                 </ScrollView>
                 {this.state.showTipView && <View style={filePageStyle.tipCard}>

app/src/page/splash/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doBalanceSubscribe, doBlackListedOutpointsSubscribe, doToast } from 'lbry-redux';
+import { doBalanceSubscribe, doBlackListedOutpointsSubscribe, doUpdateBlockHeight, doToast } from 'lbry-redux';
 import {
   doAuthenticate,
   doCheckSubscriptionsInit,
@@ -11,7 +11,7 @@ import {
   selectUser,
   selectEmailToVerify
 } from 'lbryinc';
-import { doDeleteCompleteBlobs } from '../../redux/actions/file';
+import { doDeleteCompleteBlobs } from 'redux/actions/file';
 import SplashScreen from './view';
 
 const select = state => ({
@@ -29,6 +29,7 @@ const perform = dispatch => ({
   fetchSubscriptions: (callback) => dispatch(doFetchMySubscriptions(callback)),
   notify: data => dispatch(doToast(data)),
   setEmailToVerify: email => dispatch(doUserEmailToVerify(email)),
+  updateBlockHeight: () => dispatch(doUpdateBlockHeight()),
   verifyUserEmail: (token, recaptcha) => dispatch(doUserEmailVerify(token, recaptcha)),
   verifyUserEmailFailure: error => dispatch(doUserEmailVerifyFailure(error))
 });

app/src/page/splash/view.js

@@ -18,6 +18,8 @@ import Colors from '../../styles/colors';
 import Constants from '../../constants';
 import splashStyle from '../../styles/splash';
 
+const BLOCK_HEIGHT_INTERVAL = 1000 * 60 * 2.5; // every 2.5 minutes
+
 class SplashScreen extends React.PureComponent {
   static navigationOptions = {
     title: 'Splash'
@@ -147,6 +149,7 @@ class SplashScreen extends React.PureComponent {
           balanceSubscribe,
           blacklistedOutpointsSubscribe,
           checkSubscriptionsInit,
+          updateBlockHeight,
           navigation,
           notify
         } = this.props;
@@ -154,6 +157,8 @@ class SplashScreen extends React.PureComponent {
         balanceSubscribe();
         blacklistedOutpointsSubscribe();
         checkSubscriptionsInit();
+        updateBlockHeight();
+        setInterval(() => { updateBlockHeight(); }, BLOCK_HEIGHT_INTERVAL);
         NativeModules.VersionInfo.getAppVersion().then(appVersion => {
           this.setState({ shouldAuthenticate: true });
           authenticate(appVersion, Platform.OS);

app/src/styles/discover.js

@@ -134,6 +134,18 @@ const discoverStyle = StyleSheet.create({
   },
   titleText: {
     fontFamily: 'Inter-UI-Regular'
+  },
+  detailsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  dateTime: {
+    marginTop: 2
+  },
+  dateTimeText: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 14,
+    color: Colors.DescriptionGrey
   }
 });
 

app/src/styles/fileList.js

@@ -45,14 +45,19 @@ const fileListStyle = StyleSheet.create({
   loading: {
     position: 'absolute'
   },
-  downloadInfo: {
-    marginTop: (screenWidthPixels <= 720) ? 4 : 8
+  info: {
+    marginTop: (screenWidthPixels <= 720) ? 1 : 2,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
   },
-  downloadStorage: {
+  infoText: {
     fontFamily: 'Inter-UI-Regular',
     fontSize: (screenWidthPixels <= 720) ? 12 : 14,
     color: Colors.ChannelGrey
   },
+  downloadInfo: {
+    marginTop: 2
+  },
   progress: {
     marginTop: (screenWidthPixels <= 720) ? 2 : 4,
     height: 3,
@@ -65,7 +70,7 @@ const fileListStyle = StyleSheet.create({
   progressRemaining: {
     backgroundColor: Colors.LbryGreen,
     opacity: 0.2
-  }
+  },
 });
 
 export default fileListStyle;