From f25559adfb8d1b747847fa00daed6fcfb0c531c2 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Fri, 2 Aug 2019 02:28:14 -0400 Subject: [PATCH] oh boy --- flow-typed/npm/mime_v2.x.x.js | 27 -- flow-typed/render-media.js | 3 - package.json | 4 +- src/ui/component/claimPreview/index.js | 4 +- src/ui/component/claimPreview/view.jsx | 7 +- src/ui/component/common/loading-screen.jsx | 2 +- src/ui/component/fileDetails/view.jsx | 7 +- src/ui/component/fileDownloadLink/index.js | 11 +- src/ui/component/fileDownloadLink/view.jsx | 114 ++--- src/ui/component/fileRender/index.js | 19 +- src/ui/component/fileRender/view.jsx | 152 +++--- src/ui/component/fileViewer/index.js | 49 +- .../fileViewer/internal/play-button.jsx | 34 -- .../component/fileViewer/internal/player.jsx | 437 ------------------ src/ui/component/fileViewer/view.jsx | 385 ++++----------- src/ui/component/hiddenNsfwClaims/index.js | 4 +- src/ui/component/selectThumbnail/view.jsx | 5 +- src/ui/component/viewers/audioViewer.jsx | 300 ++++++++++++ .../component/viewers/audioViewer.module.scss | 193 ++++++++ src/ui/component/viewers/videoViewer.jsx | 82 ---- src/ui/component/viewers/videoViewer/index.js | 23 + src/ui/component/viewers/videoViewer/view.jsx | 81 ++++ src/ui/modal/modalAffirmPurchase/index.js | 6 +- src/ui/modal/modalRemoveFile/view.jsx | 8 +- src/ui/page/file/index.js | 4 +- src/ui/page/file/view.jsx | 53 +-- src/ui/page/settings/index.js | 1 + src/ui/page/settings/view.jsx | 95 +++- src/ui/reducers.js | 2 + src/ui/redux/actions/content.js | 223 +++------ src/ui/redux/actions/subscriptions.js | 16 +- src/ui/redux/reducers/app.js | 2 +- src/ui/redux/selectors/app.js | 2 +- src/ui/redux/selectors/content.js | 23 +- src/ui/redux/selectors/settings.js | 2 +- src/ui/scss/component/_content.scss | 39 +- src/ui/scss/init/_gui.scss | 5 + src/ui/util/detect-typing.js | 2 +- src/ui/util/get-media-type.js | 35 -- yarn.lock | 108 +---- 40 files changed, 1052 insertions(+), 1517 deletions(-) delete mode 100644 flow-typed/npm/mime_v2.x.x.js delete mode 100644 flow-typed/render-media.js delete mode 100644 src/ui/component/fileViewer/internal/play-button.jsx delete mode 100644 src/ui/component/fileViewer/internal/player.jsx create mode 100644 src/ui/component/viewers/audioViewer.jsx create mode 100644 src/ui/component/viewers/audioViewer.module.scss delete mode 100644 src/ui/component/viewers/videoViewer.jsx create mode 100644 src/ui/component/viewers/videoViewer/index.js create mode 100644 src/ui/component/viewers/videoViewer/view.jsx delete mode 100644 src/ui/util/get-media-type.js diff --git a/flow-typed/npm/mime_v2.x.x.js b/flow-typed/npm/mime_v2.x.x.js deleted file mode 100644 index 1a5173ef5..000000000 --- a/flow-typed/npm/mime_v2.x.x.js +++ /dev/null @@ -1,27 +0,0 @@ -// flow-typed signature: 405ae1983603e8018c018978697f94de -// flow-typed version: 578dff53f6/mime_v2.x.x/flow_>=v0.25.x - -declare type $npm$mime$TypeMap = {[mime: string]: Array}; - -declare class $npm$mime$Mime { - constructor(...typeMap: Array<$npm$mime$TypeMap>): void; - - define(typeMap: $npm$mime$TypeMap, force?: boolean): void; - getExtension(mime: string): ?string; - getType(path: string): ?string; -} - -declare module 'mime' { - declare type TypeMap = $npm$mime$TypeMap; - declare module.exports: $npm$mime$Mime; -} - -declare module 'mime/lite' { - declare type TypeMap = $npm$mime$TypeMap; - declare module.exports: $npm$mime$Mime; -} - -declare module 'mime/Mime' { - declare type TypeMap = $npm$mime$TypeMap; - declare module.exports: typeof $npm$mime$Mime; -} diff --git a/flow-typed/render-media.js b/flow-typed/render-media.js deleted file mode 100644 index acb885cc8..000000000 --- a/flow-typed/render-media.js +++ /dev/null @@ -1,3 +0,0 @@ -declare module 'render-media' { - declare module.exports: any; -} diff --git a/package.json b/package.json index cdb528a1c..335ed53f9 100644 --- a/package.json +++ b/package.json @@ -125,14 +125,13 @@ "jsmediatags": "^3.8.1", "json-loader": "^0.5.4", "lbry-format": "https://github.com/lbryio/lbry-format.git", - "lbry-redux": "lbryio/lbry-redux#8f12baa88f6f057eb3b7d0cf04d6e4bb0eb11763", + "lbry-redux": "lbryio/lbry-redux#1b7bb1cc9f2cb6a8efcce1869031d4da8ddbf4ca", "lbryinc": "lbryio/lbryinc#a93596c51c8fb0a226cb84df04c26a6bb60a45fb", "lint-staged": "^7.0.2", "localforage": "^1.7.1", "lodash-es": "^4.17.14", "make-runnable": "^1.3.6", "mammoth": "^1.4.6", - "mime": "^2.3.1", "moment": "^2.22.0", "node-abi": "^2.5.1", "node-fetch": "^2.3.0", @@ -169,7 +168,6 @@ "remark-attr": "^0.8.3", "remark-emoji": "^2.0.1", "remark-react": "^4.0.3", - "render-media": "^3.1.0", "reselect": "^3.0.0", "sass-loader": "^7.1.0", "semver": "^5.3.0", diff --git a/src/ui/component/claimPreview/index.js b/src/ui/component/claimPreview/index.js index 88b81ed86..7b49dc36d 100644 --- a/src/ui/component/claimPreview/index.js +++ b/src/ui/component/claimPreview/index.js @@ -12,7 +12,7 @@ import { selectChannelIsBlocked, } from 'lbry-redux'; import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc'; -import { selectShowNsfw } from 'redux/selectors/settings'; +import { selectShowMatureContent } from 'redux/selectors/settings'; import { makeSelectHasVisitedUri } from 'redux/selectors/content'; import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions'; import ClaimPreview from './view'; @@ -20,7 +20,7 @@ import ClaimPreview from './view'; const select = (state, props) => ({ pending: makeSelectClaimIsPending(props.uri)(state), claim: makeSelectClaimForUri(props.uri)(state), - obscureNsfw: !selectShowNsfw(state), + obscureNsfw: !selectShowMatureContent(state), claimIsMine: makeSelectClaimIsMine(props.uri)(state), isResolvingUri: makeSelectIsUriResolving(props.uri)(state), thumbnail: makeSelectThumbnailForUri(props.uri)(state), diff --git a/src/ui/component/claimPreview/view.jsx b/src/ui/component/claimPreview/view.jsx index bb673fe37..d15ed42ad 100644 --- a/src/ui/component/claimPreview/view.jsx +++ b/src/ui/component/claimPreview/view.jsx @@ -1,5 +1,5 @@ // @flow -import React, { Fragment, useEffect } from 'react'; +import React, { Fragment, useEffect, forwardRef } from 'react'; import classnames from 'classnames'; import { parseURI, convertToShareLink } from 'lbry-redux'; import { withRouter } from 'react-router-dom'; @@ -46,7 +46,7 @@ type Props = { isSubscribed: boolean, }; -function ClaimPreview(props: Props) { +const ClaimPreview = forwardRef((props: Props, ref: any) => { const { obscureNsfw, claimIsMine, @@ -150,6 +150,7 @@ function ClaimPreview(props: Props) { return (
    • ); -} +}); export default withRouter(ClaimPreview); diff --git a/src/ui/component/common/loading-screen.jsx b/src/ui/component/common/loading-screen.jsx index c8eb3f3fb..4f2a09a03 100644 --- a/src/ui/component/common/loading-screen.jsx +++ b/src/ui/component/common/loading-screen.jsx @@ -3,7 +3,7 @@ import React from 'react'; import Spinner from 'component/spinner'; type Props = { - status: string, + status?: string, spinner: boolean, }; diff --git a/src/ui/component/fileDetails/view.jsx b/src/ui/component/fileDetails/view.jsx index 0e440fa4f..72cc8a869 100644 --- a/src/ui/component/fileDetails/view.jsx +++ b/src/ui/component/fileDetails/view.jsx @@ -30,10 +30,11 @@ class FileDetails extends PureComponent { : fileInfo && fileInfo.download_path && formatBytes(fileInfo.written_bytes); let downloadPath = fileInfo && fileInfo.download_path ? path.normalize(fileInfo.download_path) : null; let downloadNote; - // If the path is blank, file is not avialable. Create path from name so the folder opens on click. - if (fileInfo && fileInfo.download_path === null) { + // If the path is blank, file is not avialable. Streamed files won't have any blobs saved + // Create path from name so the folder opens on click. + if (fileInfo && fileInfo.blobs_completed >= 1 && fileInfo.download_path === null) { downloadPath = `${fileInfo.download_directory}/${fileInfo.file_name}`; - downloadNote = 'This file may have been moved or deleted'; + downloadNote = 'This file may have been streamed, moved or deleted'; } return ( diff --git a/src/ui/component/fileDownloadLink/index.js b/src/ui/component/fileDownloadLink/index.js index 719a6debd..97a420f8a 100644 --- a/src/ui/component/fileDownloadLink/index.js +++ b/src/ui/component/fileDownloadLink/index.js @@ -3,28 +3,23 @@ import { makeSelectFileInfoForUri, makeSelectDownloadingForUri, makeSelectLoadingForUri, - makeSelectClaimForUri, makeSelectClaimIsMine, + makeSelectUriIsStreamable, } from 'lbry-redux'; -import { makeSelectCostInfoForUri } from 'lbryinc'; import { doOpenModal } from 'redux/actions/app'; -import { doPurchaseUri, doStartDownload, doSetPlayingUri } from 'redux/actions/content'; +import { doSetPlayingUri } from 'redux/actions/content'; import FileDownloadLink from './view'; const select = (state, props) => ({ fileInfo: makeSelectFileInfoForUri(props.uri)(state), - /* availability check is disabled due to poor performance, TBD if it dies forever or requires daemon fix */ downloading: makeSelectDownloadingForUri(props.uri)(state), - costInfo: makeSelectCostInfoForUri(props.uri)(state), loading: makeSelectLoadingForUri(props.uri)(state), - claim: makeSelectClaimForUri(props.uri)(state), claimIsMine: makeSelectClaimIsMine(props.uri)(state), + isStreamable: makeSelectUriIsStreamable(props.uri)(state), }); const perform = dispatch => ({ openModal: (modal, props) => dispatch(doOpenModal(modal, props)), - purchaseUri: uri => dispatch(doPurchaseUri(uri)), - restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)), pause: () => dispatch(doSetPlayingUri(null)), }); diff --git a/src/ui/component/fileDownloadLink/view.jsx b/src/ui/component/fileDownloadLink/view.jsx index 99c04e5e0..150bca323 100644 --- a/src/ui/component/fileDownloadLink/view.jsx +++ b/src/ui/component/fileDownloadLink/view.jsx @@ -4,104 +4,46 @@ import * as MODALS from 'constants/modal_types'; import React from 'react'; import Button from 'component/button'; import ToolTip from 'component/common/tooltip'; -import analytics from 'analytics'; type Props = { - claim: StreamClaim, claimIsMine: boolean, - uri: string, downloading: boolean, - fileInfo: ?{ - written_bytes: number, - total_bytes: number, - outpoint: number, - download_path: string, - completed: boolean, - status: string, - }, loading: boolean, - costInfo: ?{}, - restartDownload: (string, number) => void, + isStreamable: boolean, + fileInfo: ?FileInfo, openModal: (id: string, { path: string }) => void, - purchaseUri: string => void, pause: () => void, }; -class FileDownloadLink extends React.PureComponent { - componentDidMount() { - const { fileInfo, uri, restartDownload } = this.props; - if ( - fileInfo && - !fileInfo.completed && - fileInfo.status === 'running' && - fileInfo.written_bytes !== false && - fileInfo.written_bytes < fileInfo.total_bytes - ) { - // This calls file list to show the percentage - restartDownload(uri, fileInfo.outpoint); - } +function FileDownloadLink(props: Props) { + const { fileInfo, downloading, loading, openModal, pause, claimIsMine, isStreamable } = props; + + if (!isStreamable && (loading || downloading)) { + const progress = fileInfo && fileInfo.written_bytes > 0 ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100 : 0; + const label = + fileInfo && fileInfo.written_bytes > 0 + ? __('Downloading: ') + progress.toFixed(0) + __('% complete') + : __('Connecting...'); + + return {label}; } - uri: ?string; - - render() { - const { - fileInfo, - downloading, - uri, - openModal, - purchaseUri, - costInfo, - loading, - pause, - claim, - claimIsMine, - } = this.props; - - if (loading || downloading) { - const progress = fileInfo && fileInfo.written_bytes ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100 : 0; - const label = fileInfo ? __('Downloading: ') + progress.toFixed(0) + __('% complete') : __('Connecting...'); - - return {label}; - } else if ((fileInfo === null && !downloading) || (fileInfo && !fileInfo.download_path)) { - if (!costInfo) { - return null; - } - - return ( - -