Add support to view sponsors on seekbar.

Closes #2
This commit is contained in:
Kavin 2022-06-06 03:18:47 +01:00
parent ce8bcd6e68
commit 07322080a2
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
3 changed files with 71 additions and 0 deletions

View file

@ -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);

View file

@ -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>

View file

@ -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",