automatically scroll to related content when a media file finishes playing
This commit is contained in:
parent
6d234672b8
commit
91639d887f
2 changed files with 22 additions and 1 deletions
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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}>
|
||||
|
|
Loading…
Reference in a new issue