MinPluto/Zorn
MinPluto/Zorn
1
0
Fork 0
Code Issues Activity

Add volume controller

Browse source
This commit is contained in:
Korbs 2024-11-02 05:15:32 -04:00
parent 6d44cba179
commit 7ff06e549a
3 changed files with 47 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/Controls.astro
View file

@ -12,8 +12,9 @@ import {
Enlarge, Enlarge,
ForwardSolid, ForwardSolid,
PlaySolid, PlaySolid,
Refresh Refresh,
} from "@iconoir/vue"; SoundHighSolid
} from "@iconoir/vue"
--- ---
<div class="video-controls"> <div class="video-controls">
@ -30,6 +31,13 @@ import {
<button id="vc-backwards"><RewindSolid /></button> <button id="vc-backwards"><RewindSolid /></button>
<button id="vc-forwards"><ForwardSolid /></button> <button id="vc-forwards"><ForwardSolid /></button>
} }
<div class="vc-volume-controller">
<button><SoundHighSolid/></button>
<div class="vc-volume-controller-input">
<span style={`background: lightblue`} class="vc-volume-bar"></span>
<input type="range" min="0" max="1.0" step="0.01"/>
</div>
</div>
</div> </div>
<div class="vc-center"> <div class="vc-center">
{Live ? {Live ?
@ -58,7 +66,6 @@ import {
</div> </div>
</div> </div>
<!-- HLS Script --> <!-- HLS Script -->
<!-- Required to support live streaming --> <!-- Required to support live streaming -->
<!-- Script is not loaded if the video player is not set for a stream --> <!-- Script is not loaded if the video player is not set for a stream -->

18
src/Index.scss
View file

@ -81,6 +81,24 @@
width: max-content; width: max-content;
} }
} }
.vc-volume-controller, .vc-volume-controller-input {
display: flex;
align-items: center;
}
.vc-volume-controller:hover {
.vc-volume-controller-input {
width: auto;
opacity: 1;
pointer-events: all;
transition: 0.3s opacity, 0.4s width;
}
}
.vc-volume-controller-input {
width: 0px;
opacity: 0;
pointer-events: none;
transition: 0.3s opacity, 0.4s width;
}
.vc-seek { .vc-seek {
background: rgb(255 255 255 / 10%); background: rgb(255 255 255 / 10%);
width: 100%; width: 100%;

20
src/Player.astro
View file

@ -24,10 +24,10 @@ import { Settings } from '@iconoir/vue'
--- ---
<div class="video-container"> <div class="video-container">
<video class="main-video" {VideoAttributes} src={Video} poster={Poster} preload="auto"></video> <video class="main-video" {VideoAttributes} disableremoteplayback src={Video} poster={Poster} preload="auto"></video>
{Audio ? <audio class="main-audio"><source {AudioAttributes} src={Audio} type="audio/mp3"/></audio> : null } {Audio ? <audio class="main-audio"><source {AudioAttributes} src={Audio} type="audio/mp3"/></audio> : null }
{Milieu ? <MilieuEffect/> : null }
{Audio ? <Sync/> : null } {Audio ? <Sync/> : null }
{Milieu ? <MilieuEffect/> : null }
{SettingsMenu ? {SettingsMenu ?
<Controls Live={Live}> <Controls Live={Live}>
<button id="open-zorn-settings-button" onclick="OpenZornMenu()"><Settings/></button> <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><Settings/></button>
@ -39,3 +39,19 @@ import { Settings } from '@iconoir/vue'
<Controller/> <Controller/>
<Seek/> <Seek/>
</div> </div>
<!-- Needs control the correct source -->
{Audio ?
<script is:inline>
var ZornAudioSource = document.querySelector('.video-container audio')
var VolumeRange = document.querySelector('.vc-volume-controller-input input')
VolumeRange.addEventListener("input", (event) => {ZornAudioSource.volume = event.target.value})
</script>
:
<script is:inline>
var Player = document.querySelector('.video-container video')
var VolumeRange = document.querySelector('.vc-volume-controller-input input')
VolumeRange.addEventListener("input", (event) => {Player.volume = event.target.value})
</script>
}