File downloads and refactoring #3918

2020-03-31T03:14:27+02:00

kauffj commented

2020-03-31 03:14:27 +02:00

(Migrated from github.com)

I think this is close. What it does:

Substantial refactor of player and file logic. Establishes a single selector as source of all rendering truth. makeSelectFileRenderModeForUri combined with renderFilePageLayout is a good way of understanding the possible paths. Can walk through some of this on standup tomorrow if interested.
Establishes more standardize components on file pages. Adopts cards for file pages.
Much better experience for downloadable content and unplayable content on lbry.tv.
Some other style clean up (plus a little debt in a few places to balance it all out :). Most notably, no more margins on cards!
Disables some modes on app (comics, cad files, etc.). I had trouble getting CAD files to work on previous master and I couldn't even find a working comic. I suspect most people are viewing these in third party apps anyway.

I think this is close. What it does: - Substantial refactor of player and file logic. Establishes a single selector as source of all rendering truth. `makeSelectFileRenderModeForUri` combined with `renderFilePageLayout` is a good way of understanding the possible paths. Can walk through some of this on standup tomorrow if interested. - Establishes more standardize components on file pages. Adopts cards for file pages. - Much better experience for downloadable content and unplayable content on lbry.tv. - Some other style clean up (plus a little debt in a few places to balance it all out :). Most notably, no more margins on cards! - Disables some modes on app (comics, cad files, etc.). I had trouble getting CAD files to work on previous master and I couldn't even find a working comic. I suspect most people are viewing these in third party apps anyway.

kauffj (Migrated from github.com) reviewed 2020-03-31 03:45:55 +02:00

ui/component/IframeReact/view.jsx

					
				@ -0,0 +7,4 @@

				  title: string,

				};

				export default function I18nMessage(props: Props) {

kauffj (Migrated from github.com) commented

2020-03-31 03:15:37 +02:00

This doesn't do anything. If iframes are serving files from the same domain, growable iframes would work. Ironically we just changed this.

ui/component/common/card.jsx

					
				@ -19,0 +25,4 @@

				    icon,

				    className,

				    isPageTitle = false,

				    isBodyTable = false,

kauffj (Migrated from github.com) commented

2020-03-31 03:16:14 +02:00

For cards that should have title as an h1

ui/component/common/card.jsx

					
				@ -19,0 +26,4 @@

				    className,

				    isPageTitle = false,

				    isBodyTable = false,

				    actionIconPadding = true,

kauffj (Migrated from github.com) commented

2020-03-31 03:16:34 +02:00

New option for cards where the entire body is a table (there was one on Help)

ui/component/common/card.jsx

					
				@ -34,2 +53,4 @@

				        </div>

				      )}

				      {actions && (

				        <div

kauffj (Migrated from github.com) commented

2020-03-31 03:17:00 +02:00

add support cards without titles

ui/component/common/nag.jsx

					
				@ -24,0 +27,4 @@

				        'nag--error': type === 'error',

				        'nag--inline': inline,

				      })}

				    >

kauffj (Migrated from github.com) commented

2020-03-31 03:17:36 +02:00

Add support for inline nags (used on the player). Inline is possibly a bad term as I review this, should possibly be absolute?

ui/component/fileActions/view.jsx

					
				@ -63,3 +57,3 @@

				      <div className="section__actions">

				      <ActionWrapper>

				        <Button

				          button="alt"

kauffj (Migrated from github.com) commented

2020-03-31 03:18:18 +02:00

🤮

ui/component/fileDetails/view.jsx

					
				@ -80,0 +72,4 @@

				                  <tr>

				                    <td> {__('Effective Amount')}</td>

				                    <td>{claim.meta.effective_amount} LBC</td>

				                  </tr>

kauffj (Migrated from github.com) commented

2020-03-31 03:19:14 +02:00

Expandable should become a card option. As should @jessopb's newest collapsible elements (they're collapsible cards).

ui/component/fileRender/view.jsx

					
				@ -20,4 +15,3 @@

				import Yrbl from 'component/yrbl';

				import DocumentViewer from 'component/viewers/documentViewer';

				import PdfViewer from 'component/viewers/pdfViewer';

kauffj (Migrated from github.com) commented

2020-03-31 03:31:03 +02:00

moved into proxied selector, this way we can assume when selecting a streamUrl it will just work

ui/component/fileRender/view.jsx

kauffj (Migrated from github.com) commented

2020-03-31 03:20:06 +02:00

media and content types should not need to be messed with for the most part

just use renderMode

media and content types should not need to be messed with for the most part just use renderMode

ui/component/fileRenderDownload/view.jsx

					
				@ -0,0 +1,43 @@

				// @flow

				import React from 'react';

kauffj (Migrated from github.com) commented

2020-03-31 03:31:58 +02:00

New view for downloadable content. Download only content does not go through <FileRenderInitiator> (previous ViewerInitiator)

New view for downloadable content. Download only content does not go through `<FileRenderInitiator>` (previous ViewerInitiator)

ui/component/fileRenderInline/index.js

					
				@ -0,0 +1,25 @@

				import { connect } from 'react-redux';

kauffj (Migrated from github.com) commented

2020-03-31 03:38:14 +02:00

"TextViewer" is now FileRenderInline

This is used for all content types that are renderable (i.e. not downloadable) but not "playable" (go into floating player)

"TextViewer" is now FileRenderInline This is used for all content types that are renderable (i.e. not downloadable) but not "playable" (go into floating player)

ui/page/file/view.jsx

kauffj (Migrated from github.com) commented

2020-03-31 03:44:28 +02:00

these are essentially the 4 ways a page can be laid out:

file pages with floating player (do not render the file, let FileRenderFloating fill area rendered FileRenderInitiator)
unrenderable files - present as downloads, never use Initiator
text modes - render Initiator but replaced with inline player once started + title on top
everything else - same as above, but title below (images mainly, but technically everything else)

these are essentially the 4 ways a page can be laid out: - file pages with floating player (do not render the file, let FileRenderFloating fill area rendered FileRenderInitiator) - unrenderable files - present as downloads, never use Initiator - text modes - render Initiator but replaced with inline player once started + title on top - everything else - same as above, but title below (images mainly, but technically everything else)

neb-b commented

2020-03-31 15:52:16 +02:00

(Migrated from github.com)

@kauffj The app crashes when I try to run this branch. I also see
"export 'UNSUPPORTED_ON_WEB' (imported as 'RENDER_MODES') was not found in 'constants/file_render_modes'

@kauffj The app crashes when I try to run this branch. I also see `"export 'UNSUPPORTED_ON_WEB' (imported as 'RENDER_MODES') was not found in 'constants/file_render_modes'`

neb-b commented

2020-04-01 20:04:29 +02:00

(Migrated from github.com)

whoops.

@kauffj I made some changes to the buttons. I think this is ready but it looks like streaming video on desktop is broken.

It looks like an effect is continuously re-ran. This can be merged after that is resolved.

whoops. @kauffj I made some changes to the buttons. I think this is ready but it looks like streaming video on desktop is broken. It looks like an effect is continuously re-ran. This can be merged after that is resolved.

neb-b (Migrated from github.com) requested changes 2020-04-01 20:04:49 +02:00

neb-b (Migrated from github.com) left a comment

see comment ^

neb-b commented

2020-04-01 20:23:08 +02:00

(Migrated from github.com)

@kauffj nevermind. I'm just gonna fix this now so we can merge it since it's a lot of changes

kauffj commented

2020-04-01 20:36:27 +02:00

(Migrated from github.com)

thanks @seanyesmunt

Sign in to join this conversation.