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

Add ability to show or hide back and forward buttons

Browse source
This commit is contained in:
Korbs 2024-11-29 22:29:45 -05:00
parent 6c0ce61d0b
commit 2370518319
1 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/Controls.astro
View file

@ -3,6 +3,7 @@
const { const {
Title, Title,
Live, Live,
ShowBackAndForward,
SeekColor = '#2185d0' SeekColor = '#2185d0'
} = Astro.props } = Astro.props
@ -24,8 +25,11 @@ import './Styles/Iconoir.css'
{Live ? {Live ?
null null
: :
ShowBackAndForward ?
<button id="vc-backwards"><i class="iconoir-rewind-solid"></i></button> <button id="vc-backwards"><i class="iconoir-rewind-solid"></i></button>
<button id="vc-forwards"><i class="iconoir-forward-solid"></i></button> <button id="vc-forwards"><i class="iconoir-forward-solid"></i></button>
:
null
} }
<div class="vc-volume-controller"> <div class="vc-volume-controller">
<button><i class="iconoir-sound-high-solid"></i></button> <button><i class="iconoir-sound-high-solid"></i></button>
@ -41,7 +45,7 @@ import './Styles/Iconoir.css'
: :
<div class="vc-seek"> <div class="vc-seek">
<span style={`background: ${SeekColor}`} class="vc-progress-bar"></span> <span style={`background: ${SeekColor}`} class="vc-progress-bar"></span>
<input class="seek" id="seek" value="0" min="0" type="range" step="1"/> <input class="seek" id="seek" value="0" min="0" aria-valuenow="1" type="range" step="1"/>
</div> </div>
<p class="timestamp"> <p class="timestamp">
<span class="seek-tooltip" id="seek-tooltip">00:00</span> <span class="seek-tooltip" id="seek-tooltip">00:00</span>