simplify floating player controls

ui/component/fileRender/view.jsx

@@ -33,6 +33,7 @@ type Props = {
   renderMode: string,
   thumbnail: string,
   desktopPlayStartTime?: number,
+  className?: string,
 };
 
 class FileRender extends React.PureComponent<Props> {
@@ -129,10 +130,10 @@ class FileRender extends React.PureComponent<Props> {
               // @if TARGET='app'
               file: options => fs.createReadStream(downloadPath, options),
               // @endif
-              stream: source
+              stream: source,
             }}
             theme={currentTheme}
-            />
+          />
         );
       case RENDER_MODES.APPLICATION:
         return <AppViewer uri={uri} />;
@@ -142,11 +143,11 @@ class FileRender extends React.PureComponent<Props> {
   }
 
   render() {
-    const { embedded, renderMode } = this.props;
+    const { embedded, renderMode, className } = this.props;
 
     return (
       <div
-        className={classnames('file-render', {
+        className={classnames('file-render', className, {
           'file-render--document': RENDER_MODES.TEXT_MODES.includes(renderMode) && !embedded,
           'file-render--embed': embedded,
         })}

ui/component/fileRenderFloating/index.js

@@ -8,7 +8,7 @@ import {
   makeSelectFileRenderModeForUri,
 } from 'redux/selectors/content';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
-import { doCloseFloatingPlayer, doSetPlayingUri } from 'redux/actions/content';
+import { doCloseFloatingPlayer } from 'redux/actions/content';
 import { withRouter } from 'react-router';
 import FileRenderFloating from './view';
 
@@ -29,7 +29,6 @@ const select = (state, props) => {
 
 const perform = dispatch => ({
   closeFloatingPlayer: () => dispatch(doCloseFloatingPlayer(null)),
-  setPlayingUri: uri => dispatch(doSetPlayingUri(uri)),
 });
 
 export default withRouter(connect(select, perform)(FileRenderFloating));

ui/component/fileRenderFloating/view.jsx

@@ -23,7 +23,6 @@ type Props = {
   floatingPlayerEnabled: boolean,
   closeFloatingPlayer: () => void,
   renderMode: string,
-  setPlayingUri: string => void,
 };
 
 export default function FileRenderFloating(props: Props) {
@@ -36,7 +35,6 @@ export default function FileRenderFloating(props: Props) {
     closeFloatingPlayer,
     floatingPlayerEnabled,
     renderMode,
-    setPlayingUri,
   } = props;
 
   const isMobile = useIsMobile();
@@ -128,28 +126,19 @@ export default function FileRenderFloating(props: Props) {
           })}
         >
           {isFloating && (
-            <div className="draggable content__floating-header">
-              <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"
-                  />
-                </Tooltip>
-                <Tooltip label={__('Close')}>
-                  <Button onClick={closeFloatingPlayer} icon={ICONS.REMOVE} button="primary" />
-                </Tooltip>
-              </div>
-            </div>
+            <Tooltip label={__('Close')}>
+              <Button
+                onClick={closeFloatingPlayer}
+                icon={ICONS.REMOVE}
+                button="primary"
+                className="content__floating-close"
+              />
+            </Tooltip>
           )}
 
           {isReadyToPlay ? (
             <FileRender
+              className="draggable"
               uri={uri}
               // @if TARGET='app'
               desktopPlayStartTime={desktopPlayStartTime}
@@ -161,7 +150,7 @@ export default function FileRenderFloating(props: Props) {
           {isFloating && (
             <div className="draggable content__info">
               <div className="claim-preview__title" title={title || uri}>
-                {title || uri}
+                <Button label={title || uri} navigate={uri} button="link" className="content__floating-link" />
               </div>
               <UriIndicator link addTooltip={false} uri={uri} />
             </div>

ui/scss/component/_content.scss

@@ -21,8 +21,7 @@
   z-index: 9999;
 
   &:hover {
-    .content__actions,
-    .content__floating-header {
+    .content__floating-close {
       visibility: visible;
     }
   }
@@ -56,22 +55,20 @@
   }
 }
 
-.content__floating-header {
-  cursor: grab;
+.content__floating-close {
   visibility: hidden;
   position: absolute;
-  top: 0;
-  width: 100%;
-  height: 2rem;
-  display: flex;
-  justify-content: space-between;
-  line-height: 1.5rem;
-  padding: 0.25rem;
-  background-color: var(--color-background);
+  top: var(--spacing-s);
+  right: var(--spacing-s);
+  width: 3rem;
+  height: 3rem;
 }
 
-.content__actions,
-.content__floating-header {
+.content__floating-link {
+  color: var(--color-text);
+}
+
+.content__floating-close {
   z-index: 3; /*must be one higher than .file-viewer__overlay */
 }