floating player actually working

package.json

@@ -148,6 +148,7 @@
     "rc-progress": "^2.0.6",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
+    "react-draggable": "^3.3.0",
     "react-ga": "^2.5.7",
     "react-hot-loader": "^4.11.1",
     "react-modal": "^3.1.7",

src/ui/component/app/index.js

@@ -1,6 +1,6 @@
 import { hot } from 'react-hot-loader/root';
 import { connect } from 'react-redux';
-import { doUpdateBlockHeight, doError, doFetchTransactions } from 'lbry-redux';
+import { doError, doFetchTransactions } from 'lbry-redux';
 import { selectUser, doRewardList, doFetchRewardedContent, doFetchAccessToken, selectAccessToken } from 'lbryinc';
 import { selectThemePath } from 'redux/selectors/settings';
 import App from './view';
@@ -13,7 +13,6 @@ const select = state => ({
 
 const perform = dispatch => ({
   alertError: errorList => dispatch(doError(errorList)),
-  updateBlockHeight: () => dispatch(doUpdateBlockHeight()),
   fetchRewards: () => dispatch(doRewardList()),
   fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
   fetchTransactions: () => dispatch(doFetchTransactions()),

src/ui/component/app/view.jsx

@@ -1,7 +1,7 @@
 // @flow
 import React, { useEffect, useRef } from 'react';
 import analytics from 'analytics';
-import { Lbry } from 'lbry-redux';
+import { Lbry, buildURI } from 'lbry-redux';
 import Router from 'component/router/index';
 import ModalRouter from 'modal/modalRouter';
 import ReactModal from 'react-modal';
@@ -10,6 +10,8 @@ import Header from 'component/header';
 import { openContextMenu } from 'util/context-menu';
 import useKonamiListener from 'util/enhanced-layout';
 import Yrbl from 'component/yrbl';
+import FileViewer from 'component/fileViewer';
+import { withRouter } from 'react-router';
 
 export const MAIN_WRAPPER_CLASS = 'main-wrapper';
 
@@ -20,6 +22,7 @@ type Props = {
   theme: string,
   accessToken: ?string,
   user: ?{ id: string, has_verified_email: boolean },
+  location: { pathname: string },
   fetchRewards: () => void,
   fetchRewardedContent: () => void,
   fetchTransactions: () => void,
@@ -33,6 +36,18 @@ function App(props: Props) {
   const userId = user && user.id;
   const hasVerifiedEmail = user && user.has_verified_email;
 
+  const { pathname } = props.location;
+  const urlParts = pathname.split('/');
+  const claimName = urlParts[1];
+  const claimId = urlParts[2];
+
+  // @routingfixme
+  // claimName and claimId come from the url `{domain}/{claimName}/{claimId}"
+  let uri;
+  try {
+    uri = buildURI({ contentName: claimName, claimId: claimId });
+  } catch (e) {}
+
   useEffect(() => {
     ReactModal.setAppElement(appRef.current);
     fetchAccessToken();
@@ -42,7 +57,7 @@ function App(props: Props) {
     fetchRewards();
     fetchTransactions();
     // @endif
-  }, [fetchRewards, fetchRewardedContent, fetchTransactions]);
+  }, [fetchRewards, fetchRewardedContent, fetchTransactions, fetchAccessToken]);
 
   useEffect(() => {
     // $FlowFixMe
@@ -73,9 +88,11 @@ function App(props: Props) {
       </div>
 
       <ModalRouter />
+      <FileViewer pageUri={uri} />
+
       {isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
     </div>
   );
 }
 
-export default App;
+export default withRouter(App);

src/ui/component/button/view.jsx

@@ -127,7 +127,12 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
       title={title}
       aria-label={description || label || title}
       className={combinedClassName}
-      onClick={onClick}
+      onClick={e => {
+        if (onClick) {
+          e.stopPropagation();
+          onClick(e);
+        }
+      }}
       disabled={disabled}
       type={type}
       {...otherProps}

src/ui/component/common/icon-custom.jsx

@@ -276,4 +276,11 @@ export const icons = {
       <polyline points="17 6 23 6 23 12" />
     </g>
   ),
+  [ICONS.VIEW]: buildIcon(
+    <g>
+      <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
+      <polyline points="10 17 15 12 10 7" />
+      <line x1="15" y1="12" x2="3" y2="12" />
+    </g>
+  ),
 };

src/ui/component/errorBoundary/view.jsx

@@ -1,14 +1,15 @@
 // @flow
+import type { Node } from 'react';
 import { Lbryio } from 'lbryinc';
-import * as React from 'react';
+import React, { Fragment } from 'react';
 import Yrbl from 'component/yrbl';
 import Button from 'component/button';
 import { withRouter } from 'react-router';
 import Native from 'native';
 import { Lbry } from 'lbry-redux';
 
 type Props = {
-  children: React.Node,
+  children: Node,
   history: {
     replace: string => void,
   },
@@ -73,7 +74,7 @@ class ErrorBoundary extends React.Component<Props, State> {
             type="sad"
             title={__('Aw shucks!')}
             subtitle={
-              <div>
+              <Fragment>
                 <p>
                   {__("There was an error. It's been reported and will be fixed")}. {__('Try')}{' '}
                   <Button
@@ -84,7 +85,7 @@ class ErrorBoundary extends React.Component<Props, State> {
                   />{' '}
                   {__('to fix it')}.
                 </p>
-              </div>
+              </Fragment>
             }
           />
         </div>

src/ui/component/fileActions/view.jsx

@@ -16,8 +16,9 @@ type Props = {
 class FileActions extends React.PureComponent<Props> {
   render() {
     const { fileInfo, uri, openModal, claimIsMine, claimId } = this.props;
-    const showDelete = claimIsMine || (fileInfo && (fileInfo.written_bytes > 0 || fileInfo.blobs_completed === true));
-
+    const showDelete =
+      claimIsMine ||
+      (fileInfo && (fileInfo.written_bytes > 0 || fileInfo.blobs_completed === fileInfo.blobs_in_stream));
     return (
       <React.Fragment>
         {showDelete && (

src/ui/component/fileRender/view.jsx

@@ -94,9 +94,12 @@ class FileRender extends React.PureComponent<Props> {
 
   renderViewer() {
     const { mediaType, currentTheme, claim, contentType, downloadPath, fileName, streamingUrl, uri } = this.props;
-
     const fileType = fileName && path.extname(fileName).substring(1);
 
+    // Ideally the lbrytv api server would just replace the streaming_url returned by the sdk so we don't need this check
+    // https://github.com/lbryio/lbrytv/issues/51
+    const source = IS_WEB ? `https://api.lbry.tv/content/claims/${claim.name}/${claim.claim_id}/stream` : streamingUrl;
+
     // Human-readable files (scripts and plain-text files)
     const readableFiles = ['text', 'document', 'script'];
 
@@ -108,17 +111,19 @@ class FileRender extends React.PureComponent<Props> {
       application: <AppViewer uri={uri} />,
       // @endif
 
-      video: <VideoViewer source={streamingUrl} contentType={contentType} />,
-      audio: <VideoViewer source={streamingUrl} contentType={contentType} />,
-      image: <ImageViewer source={streamingUrl} />,
+      video: <VideoViewer uri={uri} source={source} contentType={contentType} />,
+      audio: <VideoViewer uri={uri} source={source} contentType={contentType} />,
+      image: <ImageViewer uri={uri} source={source} />,
       // Add routes to viewer...
     };
 
     // Supported fileType
     const fileTypes = {
+      // @if TARGET='app'
       pdf: <PdfViewer source={downloadPath} />,
       docx: <DocxViewer source={downloadPath} />,
       html: <HtmlViewer source={downloadPath} />,
+      // @endif
       // Add routes to viewer...
     };
 
@@ -151,7 +156,7 @@ class FileRender extends React.PureComponent<Props> {
     // @endif
 
     // Message Error
-    const unsupportedMessage = __("We can't preview this file.");
+    const unsupportedMessage = __("Sorry, we can't preview this file.");
     const unsupported = <LoadingScreen status={unsupportedMessage} spinner={false} />;
 
     // Return viewer

src/ui/component/fileViewer/index.js

@@ -1,30 +1,42 @@
+import * as SETTINGS from 'constants/settings';
 import { connect } from 'react-redux';
-import { doPlayUri } from 'redux/actions/content';
 import {
   makeSelectFileInfoForUri,
   makeSelectThumbnailForUri,
   makeSelectStreamingUrlForUri,
   makeSelectMediaTypeForUri,
   makeSelectUriIsStreamable,
+  makeSelectTitleForUri,
 } from 'lbry-redux';
-import { makeSelectIsPlaying, makeSelectShouldObscurePreview } from 'redux/selectors/content';
+import { makeSelectIsPlaying, makeSelectShouldObscurePreview, selectPlayingUri } from 'redux/selectors/content';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { doSetPlayingUri } from 'redux/actions/content';
+import { withRouter } from 'react-router';
 import FileViewer from './view';
 
-const select = (state, props) => ({
-  thumbnail: makeSelectThumbnailForUri(props.uri)(state),
-  mediaType: makeSelectMediaTypeForUri(props.uri)(state),
-  fileInfo: makeSelectFileInfoForUri(props.uri)(state),
-  obscurePreview: makeSelectShouldObscurePreview(props.uri)(state),
-  isPlaying: makeSelectIsPlaying(props.uri)(state),
-  streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
-  isStreamable: makeSelectUriIsStreamable(props.uri)(state),
-});
+const select = (state, props) => {
+  const uri = selectPlayingUri(state);
+  return {
+    uri,
+    title: makeSelectTitleForUri(uri)(state),
+    thumbnail: makeSelectThumbnailForUri(uri)(state),
+    mediaType: makeSelectMediaTypeForUri(uri)(state),
+    fileInfo: makeSelectFileInfoForUri(uri)(state),
+    obscurePreview: makeSelectShouldObscurePreview(uri)(state),
+    isPlaying: makeSelectIsPlaying(uri)(state),
+    streamingUrl: makeSelectStreamingUrlForUri(uri)(state),
+    isStreamable: makeSelectUriIsStreamable(uri)(state),
+    floatingPlayerEnabled: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),
+  };
+};
 
 const perform = dispatch => ({
-  play: uri => dispatch(doPlayUri(uri)),
+  clearPlayingUri: () => dispatch(doSetPlayingUri(null)),
 });
 
-export default connect(
-  select,
-  perform
-)(FileViewer);
+export default withRouter(
+  connect(
+    select,
+    perform
+  )(FileViewer)
+);