feat(ui): request card progress bar

[OwsleyJr]

Description

Status Badge Progress Bar

As I know that this is a very requested feature, I thought I could implement it! The main feature of this PR is to display a movie/show progress on the status badge until it is finished processing. I also added to the tooltip a quick peek that will display more download information similar to the manageSlideover. Below I will go into detail on the exact changes.

• Status badge

  • The core change is that it will now show the progress of each movie or show that is currently downloading. If the case is a show, then it will display the progress of each episode with the season and episode number.
  • If a show is partially available and in the process of downloading, the status badge will now display processing instead of partially available.
  • The progress is calculated from the download item that is being passed in from each parent component that houses the status badge.

• Tooltip

  • Download block is now being passed into the tooltip on the status badge to display more information about the downloads progress.
  • Used ReactDOM.createPortal to prevent overflow-hidden on the parent component.
  • Added classname prop to make it dynamic.
  • Title on download block will change depending on user permissions.

• Servarr backend

  • Added params to retrieve the season and episode number from the Sonarr API.
  • New optional type called episode added to DownloadBlock interface.

Screenshot (if UI-related)

• Successful build yarn build
• Translation keys yarn i18n:extract

Issues Fixed or Closed

• Fixes Add User Permission to see Movie/TvShow Download Status #994

[cypress]

---

Test summary

25 • 0 • 0 • 0 • 0

---

Run details

Project	overseerr
Status	Passed
Commit	1e22c77
Started	Dec 27, 2022 2:11 AM
Ended	Dec 27, 2022 2:13 AM
Duration	02:31 💡
OS	Linux Ubuntu - 22.04
Browser	Electron 102

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[Fallenbagel]

Hi. Love the work on this PR, I just have a few comments on the progress bar design. I was thinking, wouldn't this design be more inline with the overall overseerr ui? (Just a thought)

(The purple background with light purple hue progress bar instead of transparent background with dark purple progress bar)

[OwsleyJr]

Hi. Love the work on this PR, I just have a few comments on the progress bar design. I was thinking, wouldn't this design be more inline with the overall overseerr ui? (Just a thought)

(The purple background with light purple hue progress bar instead of transparent background with dark purple progress bar)

Readability is easier if the background is black to contrast the progress bar. Also, the design already used in the PR is more inline with the direction Overseerr is headed. The new design of the request modal is a good example.

[github-actions]

🎉 This PR is included in version 1.32.0 🎉

The release is available on:

• v1.32.0
• GitHub release

Your semantic-release bot 📦🚀