LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Issue/7152 #7214

Closed
billycolon wants to merge 9 commits from issue/7152 into master
pull from: issue/7152
merge into: LBRYCommunity:master
Conversation 11 Commits 9 Files changed 19 +664 -29
billycolon commented 2021-10-01 22:51:17 +02:00 (Migrated from github.com)
Copy link

Issue Number: 7152

Added download progress and cancel features.

Issue Number: 7152 Added download progress and cancel features.
jessopb (Migrated from github.com) requested changes 2021-10-02 08:14:55 +02:00
jessopb (Migrated from github.com) left a comment
Copy link

The look and feel is great and the code is clean and readable.
Just pointed out some DRY reuse opportunities a couple bugs and codebase style consistency preferences.

The look and feel is great and the code is clean and readable. Just pointed out some DRY reuse opportunities a couple bugs and codebase style consistency preferences.
ui/component/claimMenuList/view.jsx
jessopb (Migrated from github.com) commented 2021-10-02 01:35:47 +02:00
Copy link

Did you think context menu download was a worthwhile path, or is it better to improve styling on the overlay download?

Did you think context menu download was a worthwhile path, or is it better to improve styling on the overlay download?
ui/component/downloadProgress/index.js
@ -0,0 +5,4 @@
import { selectPrimaryUri, selectPlayingUri } from 'redux/selectors/content';
import { makeSelectClientSetting } from 'redux/selectors/settings';
const select = (state) => {
jessopb (Migrated from github.com) commented 2021-10-01 22:58:12 +02:00
Copy link

I think I'd prefer to use the selector for consistency
4c72a563da/ui/redux/selectors/file_info.js (L6)

return { downloadList: selectFileInfosByOutpoint(state) }

I think I'd prefer to use the selector for consistency https://github.com/lbryio/lbry-desktop/blob/4c72a563daf15502787bbada67958ab72f63db59/ui/redux/selectors/file_info.js#L6 return { downloadList: selectFileInfosByOutpoint(state) }
ui/component/downloadProgress/view.jsx
jessopb (Migrated from github.com) commented 2021-10-01 23:15:06 +02:00
Copy link

(Object.keys(props.downloadList): any).map(..)
Will fix your inevitable flowtype complaint here :)

(Object.keys(props.downloadList): any).map(..) Will fix your inevitable flowtype complaint here :)
jessopb (Migrated from github.com) commented 2021-10-01 23:22:28 +02:00
Copy link

does our Button component work here?

        <Button
          iconSize={24}
          button="close" <- or your className?
          aria-label={__('Close')}
          icon={ICONS.REMOVE}
          onClick={...}
        />
        ```
does our Button component work here? ``` <Button iconSize={24} button="close" <- or your className? aria-label={__('Close')} icon={ICONS.REMOVE} onClick={...} /> ```
jessopb (Migrated from github.com) commented 2021-10-01 23:24:46 +02:00
Copy link

All strings can be wrapped in __('some text') for i18n

All strings can be wrapped in __('some text') for i18n
jessopb (Migrated from github.com) commented 2021-10-01 23:51:27 +02:00
Copy link

This could be <Button button="link" label={__('Yes')} /> if it works well.

This could be <Button button="link" label={__('Yes')} /> if it works well.
jessopb (Migrated from github.com) commented 2021-10-02 01:42:48 +02:00
Copy link

This {title} should probably link to the FilePage for the content url
Since an item in downloadList includes a claim_id and a claim_name, you can try using something like

<Button
...
navigate={buildURI({ claimName: item.claim_name, claimID: item.claim_id }))
>
This {title} should probably link to the FilePage for the content url Since an item in downloadList includes a claim_id and a claim_name, you can try using something like ``` <Button ... navigate={buildURI({ claimName: item.claim_name, claimID: item.claim_id })) > ```
jessopb (Migrated from github.com) commented 2021-10-02 02:09:01 +02:00
Copy link

Neat to see this done from scratch and in about the same way!
We have this util function:
https://github.com/lbryio/lbry-desktop/blob/master/ui/util/format-bytes.js

Neat to see this done from scratch and in about the same way! We have this util function: https://github.com/lbryio/lbry-desktop/blob/master/ui/util/format-bytes.js
jessopb (Migrated from github.com) commented 2021-10-02 06:00:24 +02:00
Copy link

I think DownloadProgressItem be clearer? The word "state" takes a second for me to disambiguate.

I think DownloadProgressItem be clearer? The word "state" takes a second for me to disambiguate.
jessopb (Migrated from github.com) commented 2021-10-02 07:14:36 +02:00
Copy link

we can persist this using our usePersistedState() hook

we can persist this using our usePersistedState() hook
jessopb (Migrated from github.com) commented 2021-10-02 08:03:23 +02:00
Copy link

something weird happens here that crashes the app when I play a video.
"cannot read status of null"
redux devtools (which has a bug that sometimes doesn't load unless you yarn dev and wait for the app to finish before opening devtools) tells me initial state byOutpoint is { : null } until file_list fetch comes back.

something weird happens here that crashes the app when I play a video. "cannot read status of null" redux devtools (which has a bug that sometimes doesn't load unless you `yarn dev` and wait for the app to finish before opening devtools) tells me initial state byOutpoint is { <outpoint>: null } until file_list fetch comes back.
ui/component/downloadProgress/view.jsx
@ -0,0 +89,4 @@
}
});
if (!isShow) {
jessopb (Migrated from github.com) commented 2021-10-02 01:38:16 +02:00
Copy link

non-blocker, but I wonder if a side-docked indicator component would be better than a floating circle.

non-blocker, but I wonder if a side-docked indicator component would be better than a floating circle.
ui/component/page/view.jsx
jessopb (Migrated from github.com) commented 2021-10-01 23:25:26 +02:00
Copy link

Since this feature is only desktop app, related imports should be wrapped with this directive

/* @if TARGET='app' */
import DownloadProgress from 'component/downloadProgress';
/* @endif */
Since this feature is only desktop app, related imports should be wrapped with this directive ``` /* @if TARGET='app' */ import DownloadProgress from 'component/downloadProgress'; /* @endif */ ```
ui/component/page/view.jsx
jessopb (Migrated from github.com) commented 2021-10-01 23:28:04 +02:00
Copy link
/* @if TARGET='app' */
<DownloadProgress />
/* @endif */
``` /* @if TARGET='app' */ <DownloadProgress /> /* @endif */ ```
ui/redux/actions/content.js
@ -20,3 +20,3 @@
} from 'lbry-redux';
import { doPurchaseUri } from 'redux/actions/file';
import { doPurchaseUri, doDeleteFile } from 'redux/actions/file';
import { makeSelectCostInfoForUri, Lbryio } from 'lbryinc';
jessopb (Migrated from github.com) commented 2021-10-02 07:49:27 +02:00
Copy link

on Refresh, doUpdateLoadStatus doesn't get restarted (I guess this was a noted TODO issue) :( which means the progress gets stuck.
uri passed in seems unused - it doesn't appear to play any role at all according to redux devtools so doUpdateLoadStatus(null, outpoint) should work fine to restart it. Stripping it out would be nice though.

on Refresh, doUpdateLoadStatus doesn't get restarted (I guess this was a noted TODO issue) :( which means the progress gets stuck. uri passed in seems unused - it doesn't appear to play any role at all according to redux devtools so `doUpdateLoadStatus(null, outpoint)` should work fine to restart it. Stripping it out would be nice though.
ui/redux/actions/content.js
@ -28,4 +29,4 @@
// Updates the loading status for a uri as it's downloading
// Calls file_list and checks the written_bytes value to see if the number has increased
// Not needed on web as users aren't actually downloading the file
// @if TARGET='app'
jessopb (Migrated from github.com) commented 2021-10-02 07:15:27 +02:00
Copy link

If I refresh, this gets cleared and the progress gets stuck.

If I refresh, this gets cleared and the progress gets stuck.
ui/redux/actions/content.js
jessopb (Migrated from github.com) commented 2021-10-02 01:30:28 +02:00
Copy link

This should probably be moved to redux/actions/file and call doDeleteFile
4c72a563da/ui/redux/actions/file.js (L33)

This should probably be moved to redux/actions/file and call doDeleteFile https://github.com/lbryio/lbry-desktop/blob/4c72a563daf15502787bbada67958ab72f63db59/ui/redux/actions/file.js#L33
jessopb (Migrated from github.com) commented 2021-10-02 01:33:19 +02:00
Copy link

Not a blocker, but this api call could easily add "pause" if it works
https://lbry.tech/api/sdk#file_set_status

        Usage:
            file_set_status (<status> | --status=<status>) [--sd_hash=<sd_hash>]
                      [--file_name=<file_name>] [--stream_hash=<stream_hash>] [--rowid=<rowid>]

        Options:
            --status=<status>            : (str) one of "start" or "stop"
Not a blocker, but this api call could easily add "pause" if it works https://lbry.tech/api/sdk#file_set_status ``` Usage: file_set_status (<status> | --status=<status>) [--sd_hash=<sd_hash>] [--file_name=<file_name>] [--stream_hash=<stream_hash>] [--rowid=<rowid>] Options: --status=<status> : (str) one of "start" or "stop" ```
ui/scss/component/_download-progress.scss
jessopb (Migrated from github.com) commented 2021-10-01 23:38:11 +02:00
Copy link

We'll probably want to replace a lot of values with some existing vars at polishing time. This will also make it support dark mode.

We'll probably want to replace a lot of values with some existing vars at polishing time. This will also make it support dark mode.
jessopb (Migrated from github.com) commented 2021-10-01 23:58:10 +02:00
Copy link

I like this color, but maybe it should use var(--color-primary)?

I like this color, but maybe it should use var(--color-primary)?
jessopb (Migrated from github.com) commented 2021-10-02 06:49:48 +02:00
Copy link

dark mode, unless my .env is messed up
image

dark mode, unless my .env is messed up ![image](https://user-images.githubusercontent.com/36554050/135703949-ec59f91e-6512-43b7-8a08-4376ab509243.png)
jessopb (Migrated from github.com) commented 2021-10-02 07:07:15 +02:00
Copy link

http://getbem.com/naming/
This is our css naming convention, so
download-progress__bar-container

http://getbem.com/naming/ This is our css naming convention, so download-progress__bar-container
jessopb (Migrated from github.com) requested changes 2021-10-05 22:17:26 +02:00
jessopb (Migrated from github.com) left a comment
Copy link

Changes look better, but:
Card overlay download status styling is invisible on dark mode
Download then Playing another created a condition where a download was stuck - and X-ing the download killed the playing video.

Changes look better, but: Card overlay download status styling is invisible on dark mode Download then Playing another created a condition where a download was stuck - and X-ing the download killed the playing video.
jessopb commented 2021-10-07 18:00:28 +02:00 (Migrated from github.com)
Copy link

image
Playing a video and then playing another video causes indicator to get stuck at Infinity minutes NaN

![image](https://user-images.githubusercontent.com/36554050/136421355-45ba39b2-12f7-4e20-8af2-dae6988961fd.png) Playing a video and then playing another video causes indicator to get stuck at `Infinity minutes NaN`
😆 1
jessopb commented 2021-10-07 18:10:21 +02:00 (Migrated from github.com)
Copy link

I think it might be better to show download progress for all videos downloading whether playing or not. But perhaps disable the 'x' if currently playing - maybe indicate currently playing as well.

I think it might be better to show download progress for all videos downloading whether playing or not. But perhaps disable the 'x' if currently playing - maybe indicate currently playing as well.
jessopb (Migrated from github.com) reviewed 2021-10-08 02:02:15 +02:00
jessopb (Migrated from github.com) left a comment
Copy link

We need to make sure progress X behavior isn't confusing when download progress is what is currently playing.

We need to make sure progress X behavior isn't confusing when download progress is what is currently playing.
billycolon commented 2021-10-08 19:47:29 +02:00 (Migrated from github.com)
Copy link

image Playing a video and then playing another video causes indicator to get stuck at Infinity minutes NaN

It is fixed.

> ![image](https://user-images.githubusercontent.com/36554050/136421355-45ba39b2-12f7-4e20-8af2-dae6988961fd.png) Playing a video and then playing another video causes indicator to get stuck at `Infinity minutes NaN` It is fixed.
billycolon commented 2021-10-08 19:48:07 +02:00 (Migrated from github.com)
Copy link

I think it might be better to show download progress for all videos downloading whether playing or not. But perhaps disable the 'x' if currently playing - maybe indicate currently playing as well.

It is good idea and I implemented it according to your logic.

> I think it might be better to show download progress for all videos downloading whether playing or not. But perhaps disable the 'x' if currently playing - maybe indicate currently playing as well. It is good idea and I implemented it according to your logic.
jessopb (Migrated from github.com) requested changes 2021-10-08 20:37:31 +02:00
ui/component/downloadProgress/view.jsx
jessopb (Migrated from github.com) commented 2021-10-08 20:03:24 +02:00
Copy link

this name sounds like a function rather than an array.
downloadsToUpdate?

this name sounds like a function rather than an array. downloadsToUpdate?
jessopb (Migrated from github.com) commented 2021-10-08 20:07:16 +02:00
Copy link

this could use a comment

this could use a comment
ui/component/downloadProgress/view.jsx
@ -0,0 +7,4 @@
import { formatBytes } from 'util/format-bytes';
import { areEqual, removeItem } from 'util/array';
import loadingIcon from '../../../static/img/white_loading.gif';
import darkLoadingIcon from '../../../static/img/dark_loading.gif';
jessopb (Migrated from github.com) commented 2021-10-08 20:06:32 +02:00
Copy link

I'm not sure I want the new loading gifs, but it might be ok. @kauffj will look by monday.

I'm not sure I want the new loading gifs, but it might be ok. @kauffj will look by monday.
ui/component/downloadProgress/view.jsx
@ -0,0 +99,4 @@
onClick={() => setIsShow(true)}
>
<div className="download-progress__current-downloading">
<span className="notification__bubble">
jessopb (Migrated from github.com) commented 2021-10-08 20:31:51 +02:00
Copy link

I think we want information about how many, but not urgent distraction of bouncing. And maybe not red (but maybe?)

I think we want information about how many, but not urgent distraction of bouncing. And maybe not red (but maybe?)
ui/component/downloadProgress/view.jsx
@ -0,0 +270,4 @@
<div className="download-progress__cancel">
<p>{__('Do you cancel download this file?')}</p>
<div className="download-progress__cancel-confirm">
<Button label={__('Yes')} className="download-progress__cancel-ok" onClick={processStopDownload} />
jessopb (Migrated from github.com) commented 2021-10-08 20:26:51 +02:00
Copy link

When this shows up it shifts the whole component - is it a good idea for this to take the place of the X?

When this shows up it shifts the whole component - is it a good idea for this to take the place of the X?
ui/scss/component/_download-progress.scss
jessopb (Migrated from github.com) commented 2021-10-08 20:25:59 +02:00
Copy link

having a border, especially high contrast, is a somewhat new pattern. what would make it more consistent with the rest of the app?

having a border, especially high contrast, is a somewhat new pattern. what would make it more consistent with the rest of the app?
jessopb (Migrated from github.com) commented 2021-10-08 20:34:40 +02:00
Copy link

try var(--border-radius)

try var(--border-radius)
jessopb (Migrated from github.com) commented 2021-10-08 20:36:36 +02:00
Copy link

try var(--border-radius)

try var(--border-radius)
jessopb commented 2021-10-08 22:57:19 +02:00 (Migrated from github.com)
Copy link

image
<hr> and border elements could be same style as the background preview cards. But I feel like the progress cards could be just a bit different - maybe the button type=alt bg color.

![image](https://user-images.githubusercontent.com/36554050/136623878-657b74a2-f19f-4c23-ba8b-f0ac6491b068.png) `<hr>` and border elements could be same style as the background preview cards. But I feel like the progress cards could be just a bit different - maybe the button type=alt bg color.
jessopb (Migrated from github.com) reviewed 2021-10-08 23:01:48 +02:00
jessopb (Migrated from github.com) left a comment
Copy link

Still getting buggy/stuck display with infinity and NaN when clicking from play to play. Not sure what changed.

Still getting buggy/stuck display with infinity and NaN when clicking from play to play. Not sure what changed.
jessopb commented 2021-10-09 00:17:41 +02:00 (Migrated from github.com)
Copy link

Check to see if on your branch, the side menu works while on a player page. It seems to work on master, so might be a rebase issue.

Check to see if on your branch, the side menu works while on a player page. It seems to work on master, so might be a rebase issue.
billycolon commented 2021-10-09 01:32:22 +02:00 (Migrated from github.com)
Copy link

Still getting buggy/stuck display with infinity and NaN when clicking from play to play. Not sure what changed.

clear cache and try again

> Still getting buggy/stuck display with infinity and NaN when clicking from play to play. Not sure what changed. clear cache and try again
billycolon commented 2021-10-09 01:32:38 +02:00 (Migrated from github.com)
Copy link

Check to see if on your branch, the side menu works while on a player page. It seems to work on master, so might be a rebase issue.

clear cache and try again.

> Check to see if on your branch, the side menu works while on a player page. It seems to work on master, so might be a rebase issue. clear cache and try again.
jessopb commented 2021-10-09 01:52:59 +02:00 (Migrated from github.com)
Copy link

cleared electron application info, cleared the dist folder, checked that most recent branch is update css made sure I didn't have other repos linked locally. Your new bouncing notification button shows up. Playing videos do not show up.

cleared electron application info, cleared the dist folder, checked that most recent branch is `update css` made sure I didn't have other repos linked locally. Your new bouncing notification button shows up. Playing videos do not show up.
jessopb commented 2021-10-09 18:46:52 +02:00 (Migrated from github.com)
Copy link

confirmed navbar bug and not showing playing video progress item on fresh install on fresh machine. I'm not sure what's wrong or why this might be interfering with reach-ui.

confirmed navbar bug and not showing playing video progress item on fresh install on fresh machine. I'm not sure what's wrong or why this might be interfering with reach-ui.
jessopb commented 2021-11-15 14:50:25 +01:00 (Migrated from github.com)
Copy link

closed in favor of rebase

closed in favor of rebase

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
jessopb
Labels
Clear labels   
accessibility

   
app-parity

   
area: creator

   
area: daemon

   
area: design

   
area: devops

   
area: discovery

   
area: docs

   
area: installer

   
area: internal

   
area: livestream

   
area: performance

   
area: proposal

Work is part of a proposal

  
area: reposts

   
area: rewards

   
area: search

   
area: security

   
area: subscriptions

   
area: sync

   
area: ux

   
area: viewer

   
area: wallet

   
BEAMER

Beamer is waiting on you!

  
channel

   
comments

   
community PR

   
consider soon

Discuss this issue at the next planning meeting, then remove this label

  
core team

   
css

   
dependencies

   
electron

   
Epic

   
feature request

   
first-timers-only

   
good first issue

   
hacktoberfest

Welcome to Hacktoberfest

  
help wanted

   
hub-dependent

   
icebox

Long-term storage

  
Invalid

   
level: 0

   
level: 1

No knowledge of the existing code required

  
level: 2

Some knowledge of the existing code is recommended

  
level: 3

Significant knowledge of the existing code is recommended

  
level: 4

Intimate knowledge of the existing code is recommended

  
merge when green

   
needs: exploration

Solution unclear, needs research

  
needs: grooming

Issue needs to be groomed before work can start

  
needs: priority

Priority level needs to be defined

  
needs: repro

Issue needs step-by-step instructions on how to reproduce in latest code

  
needs: tech design

Needs technical design signoff before implementation can begin

  
notifications

   
odysee

   
on hold

Temporarily paused

  
playlists

   
priority: blocker

Issue is blocking release, do ASAP

  
priority: high

Work needs to be moved into sprint ASAP

  
priority: low

Work should be done but can stay in the backlog for now

  
priority: medium

Work needs to be done within 2-3 sprints

  
protocol dependent

   
recsys

   
redesign

general redesign not prioritize for anyone release

  
regression

   
resilience

   
sdk dependent

Requires work on lbry-sdk repo

  
Tom's Wishlist

   
trending

   
type: bug

Existing functionality is wrong or broken

  
type: discussion

A conversation. No specific changes requested

  
type: improvement

Existing (or partially existing) functionality needs to be changed

  
type: new feature

New functionality that does not exist yet

  
type: refactor

Minimal user-visible changes, but significant internal work

  
type: task

Either work that's not related to the code, or a small chore that does not fit into other categories

  
type: testing

Solution needs additional user testing

  
unplanned

Work that was not planned into the spirnt, took priority over planned work

  
windows
No labels
accessibility
app-parity
area: creator
area: daemon
area: design
area: devops
area: discovery
area: docs
area: installer
area: internal
area: livestream
area: performance
area: proposal
area: reposts
area: rewards
area: search
area: security
area: subscriptions
area: sync
area: ux
area: viewer
area: wallet
BEAMER
channel
comments
community PR
consider soon
core team
css
dependencies
electron
Epic
feature request
first-timers-only
good first issue
hacktoberfest
help wanted
hub-dependent
icebox
Invalid
level: 0
level: 1
level: 2
level: 3
level: 4
merge when green
needs: exploration
needs: grooming
needs: priority
needs: repro
needs: tech design
notifications
odysee
on hold
playlists
priority: blocker
priority: high
priority: low
priority: medium
protocol dependent
recsys
redesign
regression
resilience
sdk dependent
Tom's Wishlist
trending
type: bug
type: discussion
type: improvement
type: new feature
type: refactor
type: task
type: testing
unplanned
windows
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: LBRYCommunity/lbry-desktop#7214
No description provided.
Delete branch "issue/7152"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?