From fa66f4e918f5922418650bf2c9560a7dc26a7e70 Mon Sep 17 00:00:00 2001 From: 6ea86b96 <6ea86b96@gmail.com> Date: Wed, 31 May 2017 11:31:08 +0400 Subject: [PATCH 1/4] Fix download progress for recontructing files --- ui/js/actions/content.js | 3 ++- ui/js/component/fileActions/view.jsx | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/js/actions/content.js b/ui/js/actions/content.js index e6b6a30a1..a7276abf9 100644 --- a/ui/js/actions/content.js +++ b/ui/js/actions/content.js @@ -166,6 +166,8 @@ export function doDownloadFile(uri, streamInfo) { fileInfo, } }) + + dispatch(doUpdateLoadStatus(uri, streamInfo.outpoint)) }) lbryio.call('file', 'view', { @@ -176,7 +178,6 @@ export function doDownloadFile(uri, streamInfo) { rewards.claimEligiblePurchaseRewards() - dispatch(doUpdateLoadStatus(uri, streamInfo.outpoint)) } } diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index 5dd4357c6..6653bd236 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -110,7 +110,6 @@ class FileActions extends React.Component { content = openInShell(fileInfo)} />; } else { console.log('handle this case of file action props?'); - console.log(this.props) } return ( -- 2.45.3 From b1bbf7ee4e0d693e21e517da61e6eb55b1c95a1c Mon Sep 17 00:00:00 2001 From: 6ea86b96 <6ea86b96@gmail.com> Date: Wed, 31 May 2017 14:24:55 +0400 Subject: [PATCH 2/4] Scroll to top of page when changing path --- ui/js/actions/app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index a513b820c..bf0451c82 100644 --- a/ui/js/actions/app.js +++ b/ui/js/actions/app.js @@ -52,6 +52,7 @@ export function doChangePath(path) { const state = getState() const pageTitle = selectPageTitle(state) window.document.title = pageTitle + window.scrollTo(0, 0) const currentPage = selectCurrentPage(state) if (currentPage === 'search') { -- 2.45.3 From 8505959c22e7385b3610749d16b1047ee293027b Mon Sep 17 00:00:00 2001 From: 6ea86b96 <6ea86b96@gmail.com> Date: Wed, 31 May 2017 21:36:38 +0400 Subject: [PATCH 3/4] Use render-media to render audio and images --- ui/js/component/fileActions/view.jsx | 2 ++ ui/js/component/video/index.js | 5 +++- ui/js/component/video/view.jsx | 40 ++++++++++++++++++++-------- ui/js/lbry.js | 2 +- ui/js/page/filePage/view.jsx | 3 ++- 5 files changed, 38 insertions(+), 14 deletions(-) diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index 6653bd236..604261376 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -73,6 +73,8 @@ class FileActions extends React.Component { let content + console.log(fileInfo) + if (downloading) { const diff --git a/ui/js/component/video/index.js b/ui/js/component/video/index.js index 423ff533a..e581f4bc6 100644 --- a/ui/js/component/video/index.js +++ b/ui/js/component/video/index.js @@ -13,7 +13,8 @@ import { doLoadVideo, } from 'actions/content' import { - makeSelectMetadataForUri + makeSelectMetadataForUri, + makeSelectContentTypeForUri, } from 'selectors/claims' import { makeSelectFileInfoForUri, @@ -32,6 +33,7 @@ const makeSelect = () => { const selectIsLoading = makeSelectLoadingForUri() const selectIsDownloading = makeSelectDownloadingForUri() const selectMetadata = makeSelectMetadataForUri() + const selectContentType = makeSelectContentTypeForUri() const select = (state, props) => ({ costInfo: selectCostInfo(state, props), @@ -40,6 +42,7 @@ const makeSelect = () => { modal: selectCurrentModal(state), isLoading: selectIsLoading(state, props), isDownloading: selectIsDownloading(state, props), + contentType: selectContentType(state, props), }) return select diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx index d7a1f274f..723b92c62 100644 --- a/ui/js/component/video/view.jsx +++ b/ui/js/component/video/view.jsx @@ -2,6 +2,10 @@ import React from 'react'; import FilePrice from 'component/filePrice' import Link from 'component/link'; import Modal from 'component/modal'; +import lbry from 'lbry' +import { + Thumbnail, +} from 'component/common' class VideoPlayButton extends React.Component { onPurchaseConfirmed() { @@ -33,6 +37,7 @@ class VideoPlayButton extends React.Component { isLoading, costInfo, fileInfo, + mediaType, } = this.props /* @@ -44,13 +49,14 @@ class VideoPlayButton extends React.Component { */ const disabled = isLoading || fileInfo === undefined || (fileInfo === null && (!costInfo || costInfo.cost === undefined)) + const icon = mediaType == "image" ? "icon-folder-o" : "icon-play" return (
You don't have enough LBRY credits to pay for this stream. @@ -89,12 +95,14 @@ class Video extends React.Component { isLoading, isDownloading, fileInfo, + contentType, } = this.props const { isPlaying = false, } = this.state const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0 + const mediaType = lbry.getMediaType(contentType, fileInfo && fileInfo.file_name) let loadStatusMessage = '' @@ -106,14 +114,24 @@ class Video extends React.Component { loadStatusMessage = "Downloading stream... not long left now!" } + let klassName = "" + if (isLoading || isDownloading) klassName += "video-embedded video" + if (mediaType === "video") { + klassName += "video-embedded video" + klassName += isPlaying ? " video--active" : " video--hidden" + } else { + if (!isPlaying) klassName += "video-embedded" + } + const poster = metadata.thumbnail + return ( -
{ +
{ isPlaying || isLoading ? (!isReadyToPlay ? this is the world's worst loading screen and we shipped our software with it anyway...

{loadStatusMessage} : - ) : + ) :
- +
}
); @@ -126,10 +144,9 @@ const fs = require('fs') class VideoPlayer extends React.Component { componentDidMount() { - const elem = this.refs.video + const elem = this.refs.media const { downloadPath, - contentType, filename, } = this.props const file = { @@ -138,7 +155,7 @@ class VideoPlayer extends React.Component { return fs.createReadStream(downloadPath, opts) } } - player.render(file, elem, { + player.append(file, elem, { autoplay: true, controls: true, }) @@ -147,14 +164,15 @@ class VideoPlayer extends React.Component { render() { const { downloadPath, - contentType, + mediaType, poster, } = this.props return ( - +
+ {mediaType === "audio" && } +
+
) } } diff --git a/ui/js/lbry.js b/ui/js/lbry.js index b7e0f9960..7b95016ac 100644 --- a/ui/js/lbry.js +++ b/ui/js/lbry.js @@ -286,7 +286,7 @@ lbry.imagePath = function(file) lbry.getMediaType = function(contentType, fileName) { if (contentType) { - return /^[^/]+/.exec(contentType); + return /^[^/]+/.exec(contentType)[0]; } else if (fileName) { var dotIndex = fileName.lastIndexOf('.'); if (dotIndex == -1) { diff --git a/ui/js/page/filePage/view.jsx b/ui/js/page/filePage/view.jsx index e7a1e2068..b1e031df7 100644 --- a/ui/js/page/filePage/view.jsx +++ b/ui/js/page/filePage/view.jsx @@ -92,11 +92,12 @@ class FilePage extends React.Component{ const channelClaimId = claim.value && claim.value.publisherSignature ? claim.value.publisherSignature.certificateId : null; const channelUri = signatureIsValid && hasSignature && channelName ? lbryuri.build({channelName, claimId: channelClaimId}, false) : null const uriIndicator = + const mediaType = lbry.getMediaType(contentType) return (
- { contentType && contentType.startsWith('video/') ? + { ["video", "audio", "image"].indexOf(mediaType) !== -1 ?
-- 2.45.3 From 912933d4e742e66cf2698fd5bf70e089852d3be3 Mon Sep 17 00:00:00 2001 From: 6ea86b96 <6ea86b96@gmail.com> Date: Fri, 2 Jun 2017 14:40:40 +0700 Subject: [PATCH 4/4] Sync loading between file actions and video player --- ui/js/component/fileActions/index.js | 2 ++ ui/js/component/fileActions/view.jsx | 5 ++--- ui/js/component/video/view.jsx | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/ui/js/component/fileActions/index.js b/ui/js/component/fileActions/index.js index 8e9555a14..1d8ba6088 100644 --- a/ui/js/component/fileActions/index.js +++ b/ui/js/component/fileActions/index.js @@ -43,6 +43,7 @@ const makeSelect = () => { const selectIsAvailableForUri = makeSelectIsAvailableForUri() const selectDownloadingForUri = makeSelectDownloadingForUri() const selectCostInfoForUri = makeSelectCostInfoForUri() + const selectLoadingForUri = makeSelectLoadingForUri() const select = (state, props) => ({ fileInfo: selectFileInfoForUri(state, props), @@ -51,6 +52,7 @@ const makeSelect = () => { modal: selectCurrentModal(state), downloading: selectDownloadingForUri(state, props), costInfo: selectCostInfoForUri(state, props), + loading: selectLoadingForUri(state, props), }) return select diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index 604261376..8b3d2678b 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -63,6 +63,7 @@ class FileActions extends React.Component { closeModal, startDownload, costInfo, + loading, } = this.props const deleteChecked = this.state.deleteChecked, @@ -73,9 +74,7 @@ class FileActions extends React.Component { let content - console.log(fileInfo) - - if (downloading) { + if (loading || downloading) { const progress = (fileInfo && fileInfo.written_bytes) ? fileInfo.written_bytes / fileInfo.total_bytes * 100 : 0, diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx index 723b92c62..09ca9a5ac 100644 --- a/ui/js/component/video/view.jsx +++ b/ui/js/component/video/view.jsx @@ -126,7 +126,7 @@ class Video extends React.Component { return (
{ - isPlaying || isLoading ? + isPlaying ? (!isReadyToPlay ? this is the world's worst loading screen and we shipped our software with it anyway...

{loadStatusMessage} : ) : -- 2.45.3