Fix markdown resizing for the same video playing

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,
-  doFetchCostInfoForUri: string => void,
+  doResolveUri: (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 => {
-        let playingOptions: PlayingUri = { uri, pathname };
+      doPlayUri(uri, undefined, undefined, (fileInfo) => {
+        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) {
-      return;
-    }
+    if (!element) 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/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;
     }