From 4f9aa231cb7d8f8c9ffb980ee4f099203aa88de2 Mon Sep 17 00:00:00 2001
From: d <78005038+makerio90@users.noreply.github.com>
Date: Tue, 16 Aug 2022 06:37:16 -0400
Subject: [PATCH] add playlist progress bar (#2402)

* add playlist progress bar

could use some css

* theme and lint
idk if those changes to the package.json or yarn.lock are ok but
it wouldent lint without them :/

* hopfuly fix errors

* why is this not working

* this is anoying.

* fix some other issues

thx @PikachuEXE

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

* spelling mistake

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

* will not display if playlist is shuffled or
reversed

Co-authored-by: makerio90 <makerio1@pm.me>
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
---
 .../watch-video-playlist.css                  | 20 +++++++++++++++++++
 .../watch-video-playlist.vue                  |  6 ++++++
 2 files changed, 26 insertions(+)

diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index 364e807c..6ce695d1 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -15,6 +15,26 @@
   color: var(--tertiary-text-color);
 }
 
+.playlistProgressBar {
+  margin-left: 10px;
+  /* > In order to let ::-webkit-progress-value take effect, appearance needs to be set to none on the <progress> element. */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */
+  appearance: none;
+}
+
+.playlistProgressBar::-webkit-progress-value {
+  /* Color for filled part */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */
+  /* background-color is required to be declared here to prevent color being green */
+  background-color: var(--accent-color);
+}
+
+.playlistProgressBar::-webkit-progress-bar {
+  /* Color for unfilled part */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar */
+  background-color: var(--secondary-text-color);
+}
+
 .playlistIcon {
   font-size: 20px;
   padding: 10px;
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
index bbae3729..a4f3a697 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
@@ -22,6 +22,12 @@
         class="playlistIndex"
       >
         - {{ currentVideoIndex }} / {{ playlistVideoCount }}
+        <progress
+          v-if="!shuffleEnabled && !reversePlaylist"
+          class="playlistProgressBar"
+          :value="currentVideoIndex"
+          :max="playlistVideoCount"
+        />
       </span>
       <p>
         <font-awesome-icon