add playlist progress bar

[makerio90]

could use some css

---

add playlist progress bar

Important note
We may remove your pull request if you do not use this provided PR template correctly.

Pull Request Type
Please select what type of pull request this is:

• Bugfix
• Feature Implementation

Related issue
Please link the issue your pull request is referring to. If this pull request fully resolves the relevant issue, put "closes" before the issue number. Example: "closes #123456".

Description
when whatching a playlist, it displays a little progress bar to show you your progress through the playlist.

Screenshots (if appropriate)
Please add before and after screenshots if there is a visible change.

Testing (for code that is not small enough to be easily understandable)
Has this pull request been tested? y
Please describe shortly how you tested it and whether there are any ramifications remaining.
it works.
Desktop (please complete the following information):

• OS: [manjaro]
• OS Version: [n/a]
• FreeTube version: [latest]

Additional context
Add any other context about the problem here.
needs css

[efb4f5ff-1298-471a-8973-3d47447115dc]

fix lint warnings

Would also like to see the color of the progress bar gets adjusted to the color u choose in the settings under Theme settings > secondary theme settings

[makerio90]

fix lint warnings

Would also like to see the color of the progress bar gets adjusted to the color u choose in the settings under Theme settings > secondary theme settings

fixed and fixed, although the theming is a bit odd.

[efb4f5ff-1298-471a-8973-3d47447115dc]

30k lines added and 7k removed? I think something didnt go well.

[makerio90]

30k lines added and 7k removed? I think something didnt go well.

i dont think i was supposed to track yarn.lock or package-lock.json

[efb4f5ff-1298-471a-8973-3d47447115dc]

LGTM

[PrestonN]

Not too sure if having a progress bar will make sense 100% of the time. What if the user is shuffling through the playlist? This doesn't seem to account for reverse order of playlists either. I don't see this as being as beneficial as we might think it will be. Open to other opinions however.

[PikachuEXE]

What about only showing this when the order is "ascending" (with shuffling disabled)
We can figure out if that's useful for "reverse order" (I don't even know that exists)

But yup in this case this new components should only be displayed sometimes

[makerio90]

What about only showing this when the order is "ascending" (with shuffling disabled) We can figure out if that's useful for "reverse order" (I don't even know that exists)

But yup in this case this new components should only be displayed sometimes

Im checking for !shuffleEnabled && !reversePlaylist

[PikachuEXE]

Tested locally

Screen.Recording.2022-07-21.at.10.30.54.mov

[efb4f5ff-1298-471a-8973-3d47447115dc]

LGTM

[efb4f5ff-1298-471a-8973-3d47447115dc]

@absidue or @ChunkyProgrammer one more approval needed. Review if u got some spare time.

[absidue]

When the page is between 900px and 1292px wide the progress bar will wrap around to a new line if the channel name or current index are "too long", which looks bad, ideally the progress bar would stay on the same line as the channel name and the numbers, just changing it's width to fit into the available space.

[absidue]

Okay so I realised that fixing that issue requires more CSS and changing the layout, so I'm happy getting this merged and I'll create a PR to fix that issue afterwards. That way I can also make sure that the CSS changes I want to make will work with the newer CSS on the development branch (I tried rebasing but the commits with the package.json, package-lock.json and yarn.lock files break rebasing).