diff --git a/ui/component/autoplayCountdown/index.js b/ui/component/autoplayCountdown/index.js
index e7e53d559..e965abcc3 100644
--- a/ui/component/autoplayCountdown/index.js
+++ b/ui/component/autoplayCountdown/index.js
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
import { makeSelectClaimForUri } from 'lbry-redux';
import { makeSelectNextUnplayedRecommended } from 'redux/selectors/content';
import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { doSetPlayingUri } from 'redux/actions/content';
import RecommendedVideos from './view';
const select = (state, props) => {
@@ -14,7 +15,9 @@ const select = (state, props) => {
};
};
-const perform = (dispatch, ownProps) => ({});
+const perform = dispatch => ({
+ setPlayingUri: uri => dispatch(doSetPlayingUri(uri)),
+});
export default connect(
select,
diff --git a/ui/component/autoplayCountdown/view.jsx b/ui/component/autoplayCountdown/view.jsx
index 645cbed1f..4ea1a5861 100644
--- a/ui/component/autoplayCountdown/view.jsx
+++ b/ui/component/autoplayCountdown/view.jsx
@@ -9,12 +9,14 @@ type Props = {
history: { push: string => void },
nextRecommendedClaim: ?StreamClaim,
nextRecommendedUri: string,
+ setPlayingUri: (string | null) => void,
};
function AutoplayCountdown(props: Props) {
const {
nextRecommendedUri,
nextRecommendedClaim,
+ setPlayingUri,
history: { push },
} = props;
const nextTitle = nextRecommendedClaim && nextRecommendedClaim.value && nextRecommendedClaim.value.title;
@@ -32,6 +34,8 @@ function AutoplayCountdown(props: Props) {
interval = setInterval(() => {
const newTime = timer - 1;
if (newTime === 0) {
+ // Set the playingUri to null so the app doesn't try to make a floating window with the video that just finished
+ setPlayingUri(null);
push(navigateUrl);
} else {
setTimer(timer - 1);
@@ -41,7 +45,7 @@ function AutoplayCountdown(props: Props) {
return () => {
clearInterval(interval);
};
- }, [timer, navigateUrl, push, timerCanceled]);
+ }, [timer, navigateUrl, push, timerCanceled, setPlayingUri, nextRecommendedUri]);
if (timerCanceled) {
return null;
@@ -49,12 +53,14 @@ function AutoplayCountdown(props: Props) {
return (
-
Up Next
+
{__('Up Next')}
{nextTitle}
-
Playing in {timer} seconds
+
+ {__('Playing in %seconds_left% seconds', { seconds_left: timer })}
+
diff --git a/ui/component/fileRender/index.js b/ui/component/fileRender/index.js
index 99f1979e1..a9973b57c 100644
--- a/ui/component/fileRender/index.js
+++ b/ui/component/fileRender/index.js
@@ -11,6 +11,7 @@ import {
import * as SETTINGS from 'constants/settings';
import { makeSelectClientSetting } from 'redux/selectors/settings';
import { makeSelectIsText } from 'redux/selectors/content';
+import { doSetPlayingUri } from 'redux/actions/content';
import FileRender from './view';
const select = (state, props) => ({
@@ -22,7 +23,15 @@ const select = (state, props) => ({
downloadPath: makeSelectDownloadPathForUri(props.uri)(state),
fileName: makeSelectFileNameForUri(props.uri)(state),
streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
+ autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
isText: makeSelectIsText(props.uri)(state),
});
-export default connect(select)(FileRender);
+const perform = dispatch => ({
+ setPlayingUri: uri => dispatch(doSetPlayingUri(uri)),
+});
+
+export default connect(
+ select,
+ perform
+)(FileRender);
diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx
index e2250db0b..3545726d0 100644
--- a/ui/component/fileRender/view.jsx
+++ b/ui/component/fileRender/view.jsx
@@ -36,6 +36,9 @@ type Props = {
currentTheme: string,
downloadPath: string,
fileName: string,
+ autoplay: boolean,
+ setPlayingUri: (string | null) => void,
+ currentlyFloating: boolean,
};
type State = {
@@ -51,7 +54,8 @@ class FileRender extends React.PureComponent
{
};
(this: any).escapeListener = this.escapeListener.bind(this);
- (this: any).onEndedCb = this.onEndedCb.bind(this);
+ (this: any).onEndedAutoplay = this.onEndedAutoplay.bind(this);
+ (this: any).getOnEndedCb = this.getOnEndedCb.bind(this);
}
componentDidMount() {
@@ -76,8 +80,25 @@ class FileRender extends React.PureComponent {
remote.getCurrentWindow().setFullScreen(false);
}
- onEndedCb() {
- this.setState({ showAutoplayCountdown: true });
+ getOnEndedCb() {
+ const { setPlayingUri, currentlyFloating } = this.props;
+
+ if (!currentlyFloating) {
+ return this.onEndedAutoplay;
+ }
+
+ // if (embeded) {
+ // return this.onEndedEmbed
+ // }
+
+ return () => setPlayingUri(null);
+ }
+
+ onEndedAutoplay() {
+ const { autoplay } = this.props;
+ if (autoplay) {
+ this.setState({ showAutoplayCountdown: true });
+ }
}
renderViewer() {
@@ -99,8 +120,8 @@ class FileRender extends React.PureComponent {
application: ,
// @endif
- video: ,
- audio: ,
+ video: ,
+ audio: ,
image: ,
// Add routes to viewer...
};
@@ -108,10 +129,10 @@ class FileRender extends React.PureComponent {
// Supported contentTypes
const contentTypes = {
'application/x-ext-mkv': (
-
+
),
'video/x-matroska': (
-
+
),
'application/pdf': ,
'text/html': ,
@@ -189,12 +210,12 @@ class FileRender extends React.PureComponent {
}
render() {
- const { isText, uri } = this.props;
+ const { isText, uri, currentlyFloating } = this.props;
const { showAutoplayCountdown } = this.state;
return (
- {showAutoplayCountdown &&
}
+ {!currentlyFloating && showAutoplayCountdown &&
}
}>{this.renderViewer()}
);
diff --git a/ui/component/floatingViewer/view.jsx b/ui/component/floatingViewer/view.jsx
index cf0e644dc..51965ff4e 100644
--- a/ui/component/floatingViewer/view.jsx
+++ b/ui/component/floatingViewer/view.jsx
@@ -175,7 +175,11 @@ export default function FileViewer(props: Props) {
)}
- {isReadyToPlay ?
:
}
+ {isReadyToPlay ? (
+
+ ) : (
+
+ )}
{!inline && (