Add support to view sponsors on seekbar.

Closes #2

src/components/PreferencesPage.vue

@@ -66,6 +66,10 @@
     <br />
     <input id="chkSkipFiller" v-model="skipFiller" class="checkbox" type="checkbox" @change="onChange($event)" />
     <br />
+    <label for="chkShowMarkers"><strong v-t="'actions.show_markers'" /></label>
+    <br />
+    <input id="chkShowMarkers" v-model="showMarkers" class="checkbox" type="checkbox" @change="onChange($event)" />
+    <br />
     <label for="ddlTheme"><strong v-t="'actions.theme'" /></label>
     <br />
     <select id="ddlTheme" v-model="selectedTheme" class="select w-auto" @change="onChange($event)">
@@ -211,6 +215,7 @@ export default {
             skipMusicOffTopic: true,
             skipHighlight: false,
             skipFiller: false,
+            showMarkers: true,
             selectedTheme: "dark",
             autoPlayVideo: true,
             listen: false,
@@ -339,6 +344,7 @@ export default {
                 });
             }
 
+            this.showMarkers = this.getPreferenceBoolean("showMarkers", true);
             this.selectedTheme = this.getPreferenceString("theme", "dark");
             this.autoPlayVideo = this.getPreferenceBoolean("playerAutoPlay", true);
             this.listen = this.getPreferenceBoolean("listen", false);
@@ -392,6 +398,7 @@ export default {
                 if (this.skipFiller) sponsorSelected.push("filler");
                 localStorage.setItem("selectedSkip", sponsorSelected);
 
+                localStorage.setItem("showMarkers", this.showMarkers);
                 localStorage.setItem("theme", this.selectedTheme);
                 localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
                 localStorage.setItem("listen", this.listen);

src/components/VideoPlayer.vue

@@ -464,6 +464,8 @@ export default {
                 this.$ui.configure(config);
             }
 
+            this.updateMarkers();
+
             const player = this.$ui.getControls().getPlayer();
 
             this.$player = player;
@@ -554,6 +556,58 @@ export default {
                 this.$refs.videoEl.currentTime = time;
             }
         },
+        updateMarkers() {
+            const markers = this.$refs.container.querySelector(".shaka-ad-markers");
+            const array = ["to right"];
+            this.sponsors?.segments.forEach(segment => {
+                const start = (segment.segment[0] / this.video.duration) * 100;
+                const end = (segment.segment[1] / this.video.duration) * 100;
+
+                var color;
+                switch (segment.category) {
+                    case "sponsor":
+                        color = "#00d400";
+                        break;
+                    case "selfpromo":
+                        color = "#ffff00";
+                        break;
+                    case "interaction":
+                        color = "#cc00ff";
+                        break;
+                    case "poi_highlight":
+                        color = "#ff1684";
+                        break;
+                    case "intro":
+                        color = "#00ffff";
+                        break;
+                    case "outro":
+                        color = "#0202ed";
+                        break;
+                    case "preview":
+                        color = "#008fd6";
+                        break;
+                    case "filler":
+                        color = "#7300FF";
+                        break;
+                    case "music_offtopic":
+                        color = "#ff9900";
+                        break;
+                    default:
+                        color = "white";
+                }
+
+                array.push(`transparent ${start}%`);
+                array.push(`${color} ${start}%`);
+                array.push(`${color} ${end}%`);
+                array.push(`transparent ${end}%`);
+            });
+
+            if (array.length <= 1) {
+                return;
+            }
+
+            markers.style.background = `linear-gradient(${array.join(",")})`;
+        },
         destroy(hotkeys) {
             if (this.$ui) {
                 this.$ui.destroy();
@@ -568,6 +622,15 @@ export default {
             if (this.$refs.container) this.$refs.container.querySelectorAll("div").forEach(node => node.remove());
         },
     },
+    watch: {
+        sponsors() {
+            if (this.getPreferenceBoolean("showMarkers", true)) {
+                this.shakaPromise.then(() => {
+                    this.updateMarkers();
+                });
+            }
+        },
+    },
 };
 </script>
 

src/locales/en.json

@@ -33,6 +33,7 @@
         "skip_non_music": "Skip Music: Non-Music Section",
         "skip_highlight": "Skip Highlight",
         "skip_filler_tangent": "Skip Filler Tangent",
+        "show_markers": "Show Markers on Player",
         "theme": "Theme",
         "auto": "Auto",
         "dark": "Dark",