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 && (