TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2729 from amogusussy/master

Browse source 
Use var() for video player's progress and audio bar.
This commit is contained in:
Bnyro 2023-07-30 18:50:18 +02:00 committed by GitHub
commit 848712a27c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/components/VideoPlayer.vue
View file

@ -482,9 +482,9 @@ export default {
const config = { const config = {
overflowMenuButtons: overflowMenuButtons, overflowMenuButtons: overflowMenuButtons,
seekBarColors: { seekBarColors: {
base: "rgba(255, 255, 255, 0.3)", base: "var(--player-base)",
buffered: "rgba(255, 255, 255, 0.54)", buffered: "var(--player-buffered)",
played: "rgb(255, 0, 0)", played: "var(--player-played)",
}, },
}; };
@ -612,6 +612,7 @@ export default {
this.$refs.videoEl.currentTime = time; this.$refs.videoEl.currentTime = time;
} }
}, },
updateMarkers() { updateMarkers() {
const markers = this.$refs.container.querySelector(".shaka-ad-markers"); const markers = this.$refs.container.querySelector(".shaka-ad-markers");
const array = ["to right"]; const array = ["to right"];
@ -619,38 +620,19 @@ export default {
const start = (segment.segment[0] / this.video.duration) * 100; const start = (segment.segment[0] / this.video.duration) * 100;
const end = (segment.segment[1] / this.video.duration) * 100; const end = (segment.segment[1] / this.video.duration) * 100;
var color; var color = [
switch (segment.category) { "sponsor",
case "sponsor": "selfpromo",
color = "#00d400"; "interaction",
break; "poi_highlight",
case "selfpromo": "intro",
color = "#ffff00"; "outro",
break; "preview",
case "interaction": "filler",
color = "#cc00ff"; "music_offtopic",
break; ].includes(segment.category)
case "poi_highlight": ? `var(--spon-seg-${segment.category})`
color = "#ff1684"; : "var(--spon-seg-default)";
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(`transparent ${start}%`);
array.push(`${color} ${start}%`); array.push(`${color} ${start}%`);
@ -779,6 +761,23 @@ export default {
</script> </script>
<style> <style>
:root {
--player-base: rgba(255, 255, 255, 0.3);
--player-buffered: rgba(255, 255, 255, 0.54);
--player-played: rgba(255, 0, 0);
--spon-seg-sponsor: #00d400;
--spon-seg-selfpromo: #ffff00;
--spon-seg-interaction: #cc00ff;
--spon-seg-poi_highlight: #ff1684;
--spon-seg-intro: #00ffff;
--spon-seg-outro: #0202ed;
--spon-seg-preview: #008fd6;
--spon-seg-filler: #7300ff;
--spon-seg-music_offtopic: #ff9900;
--spon-seg-default: white;
}
.player-container { .player-container {
@apply max-h-75vh min-h-64 bg-black; @apply max-h-75vh min-h-64 bg-black;
} }