automatically scroll to related content when a media file finishes playing

This commit is contained in:
Akinwale Ariwodola 2019-01-23 05:02:43 +01:00
parent 6d234672b8
commit 91639d887f
2 changed files with 22 additions and 1 deletions

View file

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

View file

@ -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 = {
@ -503,6 +518,7 @@ class FilePage extends React.PureComponent {
}}
onMediaLoaded={() => this.onMediaLoaded(channelName, title, uri)}
onPlaybackStarted={this.onPlaybackStarted}
onPlaybackFinished={this.onPlaybackFinished}
/>}
{showActions &&
@ -533,7 +549,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}>
@ -561,6 +578,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}>