improve floating behavior when coming from embeds

ui/component/common/loading-screen.jsx

@@ -1,23 +1,26 @@
 // @flow
 import React from 'react';
+import classnames from 'classnames';
 import Spinner from 'component/spinner';
 
 type Props = {
   status?: string,
   spinner: boolean,
+  isDocument: boolean,
 };
 
 class LoadingScreen extends React.PureComponent<Props> {
   static defaultProps = {
     spinner: true,
+    isDocument: false,
   };
 
   render() {
-    const { status, spinner } = this.props;
+    const { status, spinner, isDocument } = this.props;
     return (
-      <div className="content__loading">
-        {spinner && <Spinner light />}
-        {status && <span className="content__loading-text">{status}</span>}
+      <div className={classnames('content__loading', { 'content__loading--document': isDocument })}>
+        {spinner && <Spinner light={!isDocument} />}
+        {status && <span className={classnames('content__loading-text')}>{status}</span>}
       </div>
     );
   }

ui/component/embedPlayButton/index.js

@@ -2,7 +2,7 @@ import * as SETTINGS from 'constants/settings';
 import { connect } from 'react-redux';
 import { makeSelectThumbnailForUri, doResolveUri, makeSelectClaimForUri } from 'lbry-redux';
 import { doFetchCostInfoForUri } from 'lbryinc';
-import { doSetFloatingUri } from 'redux/actions/content';
+import { doSetFloatingUri, doPlayUri } from 'redux/actions/content';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import ChannelThumbnail from './view';
 
@@ -16,4 +16,5 @@ export default connect(select, {
   doResolveUri,
   doFetchCostInfoForUri,
   doSetFloatingUri,
+  doPlayUri,
 })(ChannelThumbnail);

ui/component/embedPlayButton/view.jsx

@@ -14,6 +14,7 @@ type Props = {
   doFetchCostInfoForUri: string => void,
   doSetFloatingUri: string => void,
   floatingPlayerEnabled: boolean,
+  doPlayUri: string => void,
 };
 
 export default function FileRenderFloating(props: Props) {
@@ -25,6 +26,7 @@ export default function FileRenderFloating(props: Props) {
     doFetchCostInfoForUri,
     doSetFloatingUri,
     floatingPlayerEnabled,
+    doPlayUri,
   } = props;
   const { push } = useHistory();
   const isMobile = useIsMobile();
@@ -43,6 +45,9 @@ export default function FileRenderFloating(props: Props) {
       push(formattedUrl);
     } else {
       doSetFloatingUri(uri);
+      // @if TARGET='app'
+      doPlayUri(uri);
+      // @endif
     }
   }
 

ui/component/fileRenderFloating/view.jsx

@@ -118,7 +118,14 @@ export default function FileRenderFloating(props: Props) {
               <span className="media__uri--inline">{uri}</span>
               <div className="content__actions">
                 <Tooltip label={__('View File')}>
-                  <Button navigate={uri} onClick={() => setPlayingUri(uri)} icon={ICONS.VIEW} button="primary" />
+                  <Button
+                    navigate={uri}
+                    onClick={() => {
+                      setPlayingUri(uri);
+                    }}
+                    icon={ICONS.VIEW}
+                    button="primary"
+                  />
                 </Tooltip>
                 <Tooltip label={__('Close')}>
                   <Button onClick={closeFloatingPlayer} icon={ICONS.REMOVE} button="primary" />

ui/component/fileRenderInline/view.jsx

@@ -52,5 +52,5 @@ export default function FileRenderInline(props: Props) {
     return null;
   }
 
-  return renderContent ? <FileRender uri={uri} /> : <LoadingScreen status={__('Preparing your content')} />;
+  return renderContent ? <FileRender uri={uri} /> : <LoadingScreen status={__('Preparing your content')} isDocument />;
 }

ui/redux/selectors/content.js

@@ -37,20 +37,18 @@ export const makeSelectIsPlaying = (uri: string) => createSelector(selectPlaying
 
 // below is dumb, some context: https://stackoverflow.com/questions/39622864/access-react-router-state-in-selector
 export const makeSelectIsPlayerFloating = (location: UrlLocation) =>
-  createSelector(selectFloatingUri, selectPlayingUri, (floatingUri, playingUri) => {
-    if (floatingUri) {
-      if (!playingUri) {
-        return true;
-      } else {
-        return floatingUri !== playingUri;
-      }
+  createSelector(selectFloatingUri, selectPlayingUri, selectClaimsByUri, (floatingUri, playingUri, claimsByUri) => {
+    if (playingUri && floatingUri && playingUri !== floatingUri) {
+      return true;
     }
 
     // If there is no floatingPlayer explicitly set, see if the playingUri can float
     try {
-      const { pathname, hash } = location;
-      const newpath = buildURI(parseURI(pathname.slice(1).replace(/:/g, '#')));
-      return playingUri && playingUri !== newpath + hash;
+      const { pathname } = location;
+      const pageUrl = buildURI(parseURI(pathname.slice(1).replace(/:/g, '#')));
+      const claimFromUrl = claimsByUri[pageUrl];
+      const playingClaim = claimsByUri[playingUri];
+      return (claimFromUrl && claimFromUrl.claim_id) !== (playingClaim && playingClaim.claim_id);
     } catch (e) {}
 
     return !!playingUri;

ui/scss/component/_content.scss

@@ -155,6 +155,15 @@
   justify-content: center;
   padding: 0 var(--spacing-large);
   background-color: #000;
+
+  &.content__loading--document {
+    background-color: var(--color-card-background);
+    padding: calc(var(--spacing-xlarge) * 3) 0;
+
+    .content__loading-text {
+      color: var(--color-text);
+    }
+  }
 }
 
 .content__loading-text {

ui/scss/component/_file-render.scss

@@ -51,16 +51,6 @@
   max-height: none;
   overflow: auto;
 
-  .content__loading {
-    background-color: transparent;
-    padding: 0;
-    margin: var(--spacing-xlarge) 0;
-
-    .content__loading-text {
-      color: var(--color-text);
-    }
-  }
-
   .markdown-preview {
     height: 100%;
     overflow: auto;