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

feat: show volume after changing via shortcut

Browse source
This commit is contained in:
Bnyro 2024-06-15 13:57:23 +02:00
parent a22f6373b8
commit a57448a411
1 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/VideoPlayer.vue
View file

@ -40,6 +40,14 @@
<i class="i-fa6-solid:gauge-high h-25 w-25 p-5" /> <i class="i-fa6-solid:gauge-high h-25 w-25 p-5" />
<span v-text="$refs.videoEl.playbackRate" /> <span v-text="$refs.videoEl.playbackRate" />
</div> </div>
<div
v-if="showCurrentVolume"
class="text-l absolute left-1/2 top-1/2 flex flex-col transform items-center gap-6 rounded-8 bg-white/80 px-8 py-4 -translate-x-1/2 -translate-y-1/2 .dark:bg-dark-700/80"
>
<i v-if="$refs.videoEl.volume > 0" class="i-fa6-solid:volume-high h-25 w-25 p-5" />
<i v-else class="i-fa6-solid:volume-xmark h-25 w-25 p-5" />
<span v-text="Math.round($refs.videoEl.volume * 100) / 100" />
</div>
</div> </div>
<ModalComponent v-if="showSpeedModal" @close="showSpeedModal = false"> <ModalComponent v-if="showSpeedModal" @close="showSpeedModal = false">
@ -95,6 +103,8 @@ export default {
showSpeedModal: false, showSpeedModal: false,
showCurrentSpeed: false, showCurrentSpeed: false,
hideCurrentSpeed: null, hideCurrentSpeed: null,
showCurrentVolume: false,
hideCurrentVolume: null,
playbackSpeedInput: null, playbackSpeedInput: null,
currentTime: 0, currentTime: 0,
seekbarPadding: 2, seekbarPadding: 2,
@ -167,11 +177,11 @@ export default {
e.preventDefault(); e.preventDefault();
break; break;
case "up": case "up":
videoEl.volume = Math.min(videoEl.volume + 0.05, 1); self.adjustPlaybackVolume(videoEl.volume + 0.05);
e.preventDefault(); e.preventDefault();
break; break;
case "down": case "down":
videoEl.volume = Math.max(videoEl.volume - 0.05, 0); self.adjustPlaybackVolume(videoEl.volume - 0.05);
e.preventDefault(); e.preventDefault();
break; break;
case "left": case "left":
@ -693,6 +703,14 @@ export default {
this.showCurrentSpeed = true; this.showCurrentSpeed = true;
this.hideCurrentSpeed = window.setTimeout(() => (this.showCurrentSpeed = false), 1500); this.hideCurrentSpeed = window.setTimeout(() => (this.showCurrentSpeed = false), 1500);
}, },
adjustPlaybackVolume(newVolume) {
const normalizedVolume = Math.min(1, Math.max(0, newVolume));
this.$refs.videoEl.volume = normalizedVolume;
if (this.hideCurrentVolume) window.clearTimeout(this.hideCurrentVolume);
this.showCurrentVolume = false;
this.showCurrentVolume = true;
this.hideCurrentVolume = window.setTimeout(() => (this.showCurrentVolume = false), 1500);
},
setSpeedFromInput() { setSpeedFromInput() {
try { try {
const newSpeed = Number(this.playbackSpeedInput); const newSpeed = Number(this.playbackSpeedInput);