Feat clickable playlist progress bar #7782

NishPatel101 · 2025-08-05T05:47:54Z

Pull Request Type

Bugfix
Feature Implementation
Documentation
Other

Related issue

Description

Enhances the playlist progress bar to be clickable so users can select a video in their playlist without needing to scroll through the videos playlist.

Expands bar for visibility when hovering
Has the playlist in ticks, with each tick corresponding to a video index
Shows the video thumbnail and title for the currently hovered video

Screenshots

Before

After

Testing

View playlist with videos
Hover over playlist progress bar and view preview thumbnails/titles
Select video in playlist through progress bar
Ensure index numbering and progress fill match current video's rank in playlist

Desktop

OS: Windows
OS Version: 11, 24H2
FreeTube version: 0.23.5 Beta

Additional context

PikachuEXE · 2025-08-06T00:44:45Z

I think what #7207 describes is to scroll to the video in the view not start watching clicked video
Progress bar clicking especially with long playlists is very easy to misclick (especially on mobile/with touchscreen
Scrolling to specific video much safer action

kommunarr · 2025-08-09T14:15:46Z

I think what #7207 describes is to scroll to the video in the view not start watching clicked video
Progress bar clicking especially with long playlists is very easy to misclick (especially on mobile/with touchscreen
Scrolling to specific video much safer action

@NishPatel101 Yes, to confirm, what @PikachuEXE is suggesting is my original proposal. You can probably do this through something like calling scrollIntoView() on the selected video element.

github-actions · 2025-08-24T02:11:34Z

This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

* development: (84 commits) Translated using Weblate (Chinese (Traditional Han script)) Show more information on long playlists. (FreeTubeApp#7804) Translated using Weblate (French) Refactor/cleanup tray related code after PR merged (FreeTubeApp#7856) Translated using Weblate (Estonian) Translated using Weblate (Italian) Translated using Weblate (Afrikaans) Translated using Weblate (Latvian) Translated using Weblate (Lithuanian) Translated using Weblate (Norwegian Nynorsk) Translated using Weblate (Galician) Translated using Weblate (Korean) Translated using Weblate (Slovenian) Translated using Weblate (Danish) Translated using Weblate (Kurdish) Translated using Weblate (Catalan) Translated using Weblate (Indonesian) Translated using Weblate (Greek) Translated using Weblate (Slovak) Translated using Weblate (Spanish (Mexico)) ...

…e video

…e small width one

PikachuEXE · 2025-08-25T05:34:50Z

Updated the progress bar click to scroll to playlist item instead of start watching that video
Also updated thumbnail style to be slightly larger and has 4/3 ratio like width < 768px one

absidue · 2025-08-30T15:45:07Z

src/renderer/components/watch-video-playlist/watch-video-playlist.js

+          if (this.backendPreference === 'invidious') {
+            baseUrl = this.currentInvidiousInstanceUrl
+          }
+          return `${baseUrl}/vi/${videoId}/mqdefault.jpg`


As the thumbnail preview is tiny, lets use a smaller image.

Suggested change

return `${baseUrl}/vi/${videoId}/mqdefault.jpg`

return `${baseUrl}/vi/${videoId}/default.jpg`

absidue · 2025-08-30T15:46:22Z

src/renderer/components/watch-video-playlist/watch-video-playlist.js

+    updateProgressBarPreview: function (event) {
+      if (!this.showProgressBarPreview) return
+
+      const rect = event.currentTarget.querySelector('.playlistProgressBar').getBoundingClientRect()


You could probably replace this querySelector call with a template ref.

absidue · 2025-08-30T15:51:38Z

src/renderer/components/watch-video-playlist/watch-video-playlist.js

+
+      if (targetArrayIndex >= 0 && targetArrayIndex < this.playlistItems.length) {
+        const container = this.$refs.playlistItems
+        const targetPlaylistItemEl = (this.$refs.playlistItem || [])[targetArrayIndex]


Vue does not guarantee that template ref arrays created by v-for are in the same order as the elements on the page for performance reasons, as it is a lot faster to insert new elements at the end of an array or leave them in their current positions when the elements on the page move, than maintaining the correct order. So this code would only work if nobody modifies the playlist sort order or the playlist iteself from another window while you are on the watch page in this window.

In the chapters component we solve this by adding template ref to the parent element and using the .children property on the parent element.

absidue · 2025-08-30T15:55:58Z

src/renderer/components/watch-video-playlist/watch-video-playlist.css

+  border-inline-start: 6px solid transparent;
+  border-inline-end: 6px solid transparent;


Suggested change

border-inline-start: 6px solid transparent;

border-inline-end: 6px solid transparent;

border-inline: 6px solid transparent;

absidue · 2025-08-30T15:57:09Z

src/renderer/components/watch-video-playlist/watch-video-playlist.css

+  border: 1px solid var(--primary-border-color);
+  border-radius: 8px;
+  padding-block: 8px;
+  padding-inline: 12px; /* remove? */


If this line needs to be removed, please remove the line otherwise remove the comment.

Feat clickable playlist progress bar

8226347

FreeTubeBot enabled auto-merge (squash) August 5, 2025 05:48

github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Aug 5, 2025

NishPatel101 mentioned this pull request Aug 5, 2025

[Feature Request]: Click on playlist progress bar to scroll to index #7207

Open

3 tasks

absidue added PR: changes requested and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels Aug 6, 2025

github-actions bot added the PR: stale label Aug 24, 2025

PikachuEXE added 3 commits August 25, 2025 11:48

* Make clicking on progress bar scroll the view instead of playing th…

bb4c078

…e video

* Update thumbnail size to be slightly bigger w/ aspect ratio 4/3 lik…

92a2be9

…e small width one

PikachuEXE added PR: waiting for review For PRs that are complete, tested, and ready for review and removed PR: changes requested PR: stale labels Aug 25, 2025

PikachuEXE requested review from kommunarr, absidue, efb4f5ff-1298-471a-8973-3d47447115dc and ChunkyProgrammer August 25, 2025 05:36

absidue reviewed Aug 30, 2025

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc added PR: changes requested and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels Aug 30, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat clickable playlist progress bar #7782

Feat clickable playlist progress bar #7782

NishPatel101 commented Aug 5, 2025

Uh oh!

PikachuEXE commented Aug 6, 2025

Uh oh!

kommunarr commented Aug 9, 2025

Uh oh!

github-actions bot commented Aug 24, 2025

Uh oh!

PikachuEXE commented Aug 25, 2025

Uh oh!

absidue Aug 30, 2025

Uh oh!

absidue Aug 30, 2025

Uh oh!

absidue Aug 30, 2025

Uh oh!

absidue Aug 30, 2025

Uh oh!

absidue Aug 30, 2025

Uh oh!

Uh oh!

	return `${baseUrl}/vi/${videoId}/mqdefault.jpg`
	return `${baseUrl}/vi/${videoId}/default.jpg`

		border-inline-start: 6px solid transparent;
		border-inline-end: 6px solid transparent;

	border-inline-start: 6px solid transparent;
	border-inline-end: 6px solid transparent;
	border-inline: 6px solid transparent;

Feat clickable playlist progress bar #7782

Are you sure you want to change the base?

Feat clickable playlist progress bar #7782

Conversation

NishPatel101 commented Aug 5, 2025

Pull Request Type

Related issue

Description

Screenshots

Testing

Desktop

Additional context

Uh oh!

PikachuEXE commented Aug 6, 2025

Uh oh!

kommunarr commented Aug 9, 2025

Uh oh!

github-actions bot commented Aug 24, 2025

Uh oh!

PikachuEXE commented Aug 25, 2025

Uh oh!

absidue Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

absidue Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

absidue Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

absidue Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

absidue Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!