Fix floating player issues (#7073)

* Fix Floating Player stopping on certain files

* Dont show additional player buttons from markdown and comments

* Fix markdown resizing for the same video playing

* Update changelog

CHANGELOG.md

@@ -50,6 +50,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fix Paid embed warning overlay redirection button now links to odysee _community pr!_ ([#6819](https://github.com/lbryio/lbry-desktop/pull/6819))
 - Fix comment section redirection to create channel _community pr!_ ([#6557](https://github.com/lbryio/lbry-desktop/pull/6557))
 - Clicking on the title of a floating player will take you back to the list ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
+- Fix floating player stopping on markdown or image files ([#7073](https://github.com/lbryio/lbry-desktop/pull/7073))
 
 ## [0.51.1] - [2021-06-26]
 

flow-typed/content.js

@@ -2,6 +2,7 @@
 
 declare type PlayingUri = {
   uri: string,
+  primaryUri: string,
   pathname: string,
   commentId?: string,
   source?: string,

ui/component/embedPlayButton/view.jsx

@@ -12,12 +12,12 @@ type Props = {
   uri: string,
   thumbnail: string,
   claim: ?Claim,
-  doResolveUri: string => void,
+  doResolveUri: (string) => void,
-  doFetchCostInfoForUri: string => void,
+  doFetchCostInfoForUri: (string) => void,
   costInfo: ?{ cost: number },
   floatingPlayerEnabled: boolean,
   doPlayUri: (string, ?boolean, ?boolean, (GetResponse) => void) => void,
-  doAnaltyicsPurchaseEvent: GetResponse => void,
+  doAnaltyicsPurchaseEvent: (GetResponse) => void,
   parentCommentId?: string,
   isMarkdownPost: boolean,
   doSetPlayingUri: ({}) => void,
@@ -69,8 +69,8 @@ export default function EmbedPlayButton(props: Props) {
       const formattedUrl = formatLbryUrlForWeb(uri);
       push(formattedUrl);
     } else {
-      doPlayUri(uri, undefined, undefined, fileInfo => {
+      doPlayUri(uri, undefined, undefined, (fileInfo) => {
-        let playingOptions: PlayingUri = { uri, pathname };
+        let playingOptions = { uri, pathname, source: undefined, commentId: undefined };
         if (parentCommentId) {
           playingOptions.source = 'comment';
           playingOptions.commentId = parentCommentId;

ui/component/fileRenderFloating/view.jsx

@@ -69,7 +69,7 @@ export default function FileRenderFloating(props: Props) {
   const { location, push } = useHistory();
   const hideFloatingPlayer = location.state && location.state.hideFloatingPlayer;
   const isMobile = useIsMobile();
-  const mainFilePlaying = playingUri && isURIEqual(playingUri.uri, primaryUri);
+  const mainFilePlaying = !isFloating && isURIEqual(uri, primaryUri);
   const [fileViewerRect, setFileViewerRect] = useState();
   const [desktopPlayStartTime, setDesktopPlayStartTime] = useState();
   const [wasDragging, setWasDragging] = useState(false);
@@ -85,7 +85,8 @@ export default function FileRenderFloating(props: Props) {
     y: 0,
   });
 
-  const navigateUrl = uri + (collectionId ? generateListSearchUrlParams(collectionId) : '');
+  const navigateUrl =
+    playingUri && playingUri.primaryUri + (collectionId ? generateListSearchUrlParams(collectionId) : '');
 
   const isFree = costInfo && costInfo.cost === 0;
   const canViewFile = isFree || claimWasPurchased;
@@ -154,7 +155,7 @@ export default function FileRenderFloating(props: Props) {
 
   // Listen to main-window resizing and adjust the fp position accordingly:
   useEffect(() => {
-    const handleMainWindowResize = debounce((e) => {
+    const handleMainWindowResize = debounce(() => {
       let newPos = {
         x: Math.round(relativePos.x * getScreenWidth()),
         y: Math.round(relativePos.y * getScreenHeight()),
@@ -175,13 +176,11 @@ export default function FileRenderFloating(props: Props) {
       ? document.querySelector(`.${PRIMARY_PLAYER_WRAPPER_CLASS}`)
       : document.querySelector(`.${INLINE_PLAYER_WRAPPER_CLASS}`);
 
-    if (!element) {
+    if (!element) return;
-      return;
-    }
 
     const rect = element.getBoundingClientRect();
 
-    // getBoundingCLientRect returns a DomRect, not an object
+    // getBoundingClientRect returns a DomRect, not an object
     const objectRect = {
       top: rect.top,
       right: rect.right,
@@ -198,11 +197,11 @@ export default function FileRenderFloating(props: Props) {
   }, [mainFilePlaying]);
 
   useEffect(() => {
-    if (streamingUrl) {
+    if (playingUri && playingUri.primaryUri) {
       handleResize();
       setCountdownCanceled(false);
     }
-  }, [handleResize, streamingUrl, videoTheaterMode]);
+  }, [handleResize, playingUri, videoTheaterMode]);
 
   useEffect(() => {
     handleResize();
@@ -270,7 +269,7 @@ export default function FileRenderFloating(props: Props) {
     return null;
   }
 
-  function handleDragStart(e, ui) {
+  function handleDragStart() {
     // Not really necessary, but reset just in case 'handleStop' didn't fire.
     setWasDragging(false);
   }
@@ -286,7 +285,7 @@ export default function FileRenderFloating(props: Props) {
     });
   }
 
-  function handleDragStop(e, ui) {
+  function handleDragStop(e) {
     if (wasDragging) {
       e.stopPropagation();
       setWasDragging(false);

ui/component/fileRenderInitiator/index.js

@@ -4,7 +4,6 @@ import {
   makeSelectFileInfoForUri,
   makeSelectThumbnailForUri,
   makeSelectClaimForUri,
-  makeSelectStreamingUrlForUri,
   makeSelectClaimWasPurchased,
   SETTINGS,
   COLLECTIONS_CONSTS,
@@ -16,7 +15,6 @@ import { withRouter } from 'react-router';
 import {
   makeSelectIsPlaying,
   makeSelectShouldObscurePreview,
-  selectPlayingUri,
   makeSelectInsufficientCreditsForUri,
   makeSelectFileRenderModeForUri,
 } from 'redux/selectors/content';
@@ -33,9 +31,7 @@ const select = (state, props) => {
     fileInfo: makeSelectFileInfoForUri(props.uri)(state),
     obscurePreview: makeSelectShouldObscurePreview(props.uri)(state),
     isPlaying: makeSelectIsPlaying(props.uri)(state),
-    playingUri: selectPlayingUri(state),
     insufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
-    streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
     autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY_MEDIA)(state),
     costInfo: makeSelectCostInfoForUri(props.uri)(state),
     renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
@@ -47,9 +43,9 @@ const select = (state, props) => {
 };
 
 const perform = (dispatch) => ({
-  play: (uri, collectionId) => {
+  play: (uri, collectionId, isPlayable) => {
     dispatch(doSetPrimaryUri(uri));
-    dispatch(doSetPlayingUri({ uri, collectionId }));
+    if (isPlayable) dispatch(doSetPlayingUri({ uri, collectionId }));
     dispatch(doPlayUri(uri, undefined, undefined, (fileInfo) => dispatch(doAnaltyicsPurchaseEvent(fileInfo))));
   },
 });

ui/component/fileRenderInitiator/view.jsx

@@ -16,8 +16,7 @@ import Nag from 'component/common/nag';
 import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
 
 type Props = {
-  play: (string, string) => void,
+  play: (string, string, boolean) => void,
-  isLoading: boolean,
   isPlaying: boolean,
   fileInfo: FileListItem,
   uri: string,
@@ -104,9 +103,9 @@ export default function FileRenderInitiator(props: Props) {
         e.stopPropagation();
       }
 
-      play(uri, collectionId);
+      play(uri, collectionId, isPlayable);
     },
-    [play, uri, collectionId]
+    [play, uri, isPlayable, collectionId]
   );
 
   useEffect(() => {

ui/component/viewers/videoViewer/index.js

@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import {
   makeSelectClaimForUri,
-  makeSelectFileInfoForUri,
   makeSelectThumbnailForUri,
   SETTINGS,
   COLLECTIONS_CONSTS,
@@ -40,6 +39,7 @@ const select = (state, props) => {
   const userId = selectUser(state) && selectUser(state).id;
   const playingUri = selectPlayingUri(state);
   const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID) || (playingUri && playingUri.collectionId);
+  const isMarkdownOrComment = playingUri && (playingUri.source === 'markdown' || playingUri.source === 'comment');
 
   let nextRecommendedUri;
   let previousListUri;
@@ -51,24 +51,23 @@ const select = (state, props) => {
   }
 
   return {
+    position,
+    userId,
+    collectionId,
+    nextRecommendedUri,
+    previousListUri,
+    isMarkdownOrComment,
     autoplayIfEmbedded: Boolean(autoplay),
-    autoplayMedia: Boolean(makeSelectClientSetting(SETTINGS.AUTOPLAY_MEDIA)(state)),
+    autoplayNext: makeSelectClientSetting(SETTINGS.AUTOPLAY_NEXT)(state),
-    autoplayNext: Boolean(makeSelectClientSetting(SETTINGS.AUTOPLAY_NEXT)(state)),
     volume: selectVolume(state),
     muted: selectMute(state),
     videoPlaybackRate: makeSelectClientSetting(SETTINGS.VIDEO_PLAYBACK_RATE)(state),
-    position: position,
-    hasFileInfo: Boolean(makeSelectFileInfoForUri(uri)(state)),
     thumbnail: makeSelectThumbnailForUri(uri)(state),
     claim: makeSelectClaimForUri(uri)(state),
     homepageData: selectHomepageData(state),
     authenticated: selectUserVerifiedEmail(state),
-    userId: userId,
     shareTelemetry: IS_WEB || selectDaemonSettings(state).share_usage_data,
     isFloating: makeSelectIsPlayerFloating(props.location)(state),
-    collectionId,
-    nextRecommendedUri,
-    previousListUri,
     videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),
   };
 };

ui/component/viewers/videoViewer/view.jsx

@@ -42,7 +42,6 @@ type Props = {
   videoPlaybackRate: number,
   volume: number,
   uri: string,
-  autoplayMedia: boolean,
   autoplayNext: boolean,
   autoplayIfEmbedded: boolean,
   desktopPlayStartTime?: number,
@@ -64,6 +63,7 @@ type Props = {
   nextRecommendedUri: string,
   previousListUri: string,
   videoTheaterMode: boolean,
+  isMarkdownOrComment: boolean,
 };
 
 /*
@@ -84,7 +84,6 @@ function VideoViewer(props: Props) {
     uri,
     muted,
     volume,
-    autoplayMedia,
     autoplayNext,
     autoplayIfEmbedded,
     doAnalyticsView,
@@ -106,6 +105,7 @@ function VideoViewer(props: Props) {
     nextRecommendedUri,
     previousListUri,
     videoTheaterMode,
+    isMarkdownOrComment,
   } = props;
   const permanentUrl = claim && claim.permanent_url;
   const adApprovedChannelIds = homepageData ? getAllIds(homepageData) : [];
@@ -196,7 +196,8 @@ function VideoViewer(props: Props) {
   );
 
   useEffect(() => {
-    if (doNavigate) {
+    if (!doNavigate) return;
+
     if (playNextUrl) {
       if (permanentUrl !== nextRecommendedUri) {
         if (nextRecommendedUri) {
@@ -221,7 +222,6 @@ function VideoViewer(props: Props) {
     if (!ended) setDoNavigate(false);
     setEnded(false);
     setPlayNextUrl(true);
-    }
   }, [
     clearPosition,
     collectionId,
@@ -236,7 +236,8 @@ function VideoViewer(props: Props) {
   ]);
 
   React.useEffect(() => {
-    if (ended) {
+    if (!ended) return;
+
     analytics.videoIsPlaying(false);
 
     if (adUrl) {
@@ -253,20 +254,7 @@ function VideoViewer(props: Props) {
     }
 
     clearPosition(uri);
-    }
+  }, [adUrl, autoplayNext, clearPosition, collectionId, embedded, ended, setAdUrl, uri]);
-  }, [
-    embedded,
-    setIsEndedEmbed,
-    autoplayMedia,
-    setShowAutoplayCountdown,
-    adUrl,
-    setAdUrl,
-    clearPosition,
-    uri,
-    ended,
-    collectionId,
-    autoplayNext,
-  ]);
 
   function onPlay(player) {
     setEnded(false);
@@ -321,6 +309,7 @@ function VideoViewer(props: Props) {
       player.muted(muted);
       player.volume(volume);
       player.playbackRate(videoPlaybackRate);
+      if (!isMarkdownOrComment) {
         addTheaterModeButton(player, toggleVideoTheaterMode);
         if (collectionId) {
           addPlayNextButton(player, doPlayNext);
@@ -329,6 +318,7 @@ function VideoViewer(props: Props) {
           addAutoplayNextButton(player, toggleAutoplayNext, autoplayNext);
         }
       }
+    }
 
     const shouldPlay = !embedded || autoplayIfEmbedded;
     // https://blog.videojs.com/autoplay-best-practices-with-video-js/#Programmatic-Autoplay-and-Success-Failure-Detection

ui/redux/selectors/content.js

@@ -34,14 +34,14 @@ export const makeSelectIsPlaying = (uri: string) =>
   createSelector(selectPrimaryUri, (primaryUri) => primaryUri === uri);
 
 export const makeSelectIsPlayerFloating = (location: UrlLocation) =>
-  createSelector(selectPrimaryUri, selectPlayingUri, selectClaimsByUri, (primaryUri, playingUri, claimsByUri) => {
+  createSelector(selectPrimaryUri, selectPlayingUri, (primaryUri, playingUri) => {
     const isInlineSecondaryPlayer =
       playingUri &&
       playingUri.uri !== primaryUri &&
       location.pathname === playingUri.pathname &&
       (playingUri.source === 'comment' || playingUri.source === 'markdown');
 
-    if ((playingUri && playingUri.uri === primaryUri) || isInlineSecondaryPlayer) {
+    if ((playingUri && playingUri.primaryUri === primaryUri) || isInlineSecondaryPlayer) {
       return false;
     }