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>

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;

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