disable countdown for floating window

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,

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 (
     <div className="video-overlay__wrapper">
-      <div className="video-overlay__subtitle">Up Next</div>
+      <div className="video-overlay__subtitle">{__('Up Next')}</div>
       <div className="video-overlay__title">{nextTitle}</div>
       <UriIndicator link uri={nextRecommendedUri} />
 
       <div className="video-overlay__actions">
-        <div className="video-overlay__subtitle">Playing in {timer} seconds</div>
+        <div className="video-overlay__subtitle">
+          {__('Playing in %seconds_left% seconds', { seconds_left: timer })}
+        </div>
         <div className="section__actions--centered">
           <Button label={__('Cancel')} button="secondary" onClick={() => setTimerCanceled(true)} />
         </div>

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);

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<Props, State> {
     };
 
     (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,9 +80,26 @@ class FileRender extends React.PureComponent<Props, State> {
     remote.getCurrentWindow().setFullScreen(false);
   }
 
-  onEndedCb() {
+  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() {
     const { mediaType, currentTheme, claim, contentType, downloadPath, fileName, streamingUrl, uri } = this.props;
@@ -99,8 +120,8 @@ class FileRender extends React.PureComponent<Props, State> {
       application: <AppViewer uri={uri} />,
       // @endif
 
-      video: <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.onEndedCb} />,
-      audio: <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.onEndedCb} />,
+      video: <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.getOnEndedCb()} />,
+      audio: <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.getOnEndedCb()} />,
       image: <ImageViewer uri={uri} source={source} />,
       // Add routes to viewer...
     };
@@ -108,10 +129,10 @@ class FileRender extends React.PureComponent<Props, State> {
     // Supported contentTypes
     const contentTypes = {
       'application/x-ext-mkv': (
-        <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.onEndedCb} />
+        <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.getOnEndedCb()} />
       ),
       'video/x-matroska': (
-        <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.onEndedCb} />
+        <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.getOnEndedCb()} />
       ),
       'application/pdf': <PdfViewer source={downloadPath || source} />,
       'text/html': <HtmlViewer source={downloadPath || source} />,
@@ -189,12 +210,12 @@ class FileRender extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { isText, uri } = this.props;
+    const { isText, uri, currentlyFloating } = this.props;
     const { showAutoplayCountdown } = this.state;
 
     return (
       <div className={classnames('file-render', { 'file-render--document': isText })}>
-        {showAutoplayCountdown && <AutoplayCountdown uri={uri} />}
+        {!currentlyFloating && showAutoplayCountdown && <AutoplayCountdown uri={uri} />}
         <Suspense fallback={<div />}>{this.renderViewer()}</Suspense>
       </div>
     );

ui/component/floatingViewer/view.jsx

@@ -175,7 +175,11 @@ export default function FileViewer(props: Props) {
             </div>
           )}
 
-          {isReadyToPlay ? <FileRender uri={uri} /> : <LoadingScreen status={loadingMessage} />}
+          {isReadyToPlay ? (
+            <FileRender currentlyFloating={!inline} uri={uri} />
+          ) : (
+            <LoadingScreen status={loadingMessage} />
+          )}
           {!inline && (
             <div className="draggable content__info">
               <div className="claim-preview-title" title={title || uri}>