diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue index 7fe24f88..57d0d0c3 100644 --- a/src/components/PreferencesPage.vue +++ b/src/components/PreferencesPage.vue @@ -66,6 +66,10 @@ + + + + @@ -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); diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue index 2130141a..f136e97f 100644 --- a/src/components/VideoPlayer.vue +++ b/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(); + }); + } + }, + }, }; diff --git a/src/locales/en.json b/src/locales/en.json index 665f26ab..63d77357 100644 --- a/src/locales/en.json +++ b/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",