Add option for color and custom menu

This commit is contained in:
Korbs 2024-08-16 22:26:39 -04:00
parent 4d136a06e2
commit b4d52c0320
2 changed files with 23 additions and 6 deletions

View file

@ -1,4 +1,10 @@
---
// Properties
const {
Title,
SeekColor = '#ff274d'
} = Astro.props
// Icons
import {
Backward15Seconds,
@ -10,7 +16,7 @@ import {
<div class="video-controls">
<div class="vc-top">
<p>The Mark On The Wall</p>
<p>{Title}</p>
</div>
<div class="vc-bottom">
<div class="vc-start">
@ -20,7 +26,7 @@ import {
</div>
<div class="vc-center">
<div class="vc-seek">
<span 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">
</div>
<p class="timestamp">
@ -30,6 +36,7 @@ import {
</p>
</div>
<div class="vc-end">
<slot/>
<button id="vc-fullscreen"><Enlarge /></button>
</div>
</div>

View file

@ -3,11 +3,11 @@
const {
Poster,
Video,
Audio, // For YouTube Frontends that wants to support 1080p and higher
CustomControls = true,
Audio,
VideoAttributes,
AudioAttributes,
Milieu
Milieu,
SettingsMenu
} = Astro.props
// Components
@ -19,6 +19,7 @@ import Sync from './Controls/Sync.astro'
// Styles
import './Index.scss'
import { Settings } from '@iconoir/vue'
---
<div class="video-container">
@ -26,5 +27,14 @@ import './Index.scss'
{Audio ? <audio class="main-audio"><source {AudioAttributes} src={Audio} type="audio/mp3"/></audio> : null }
{Milieu ? <MilieuEffect/> : null }
{Audio ? <Sync/> : null }
{CustomControls ? <Controls/> <Controller/> <Seek/> : null }
{SettingsMenu ?
<Controls>
<button id="open-zorn-settings-button" onclick="OpenZornMenu()"><Settings/></button>
<slot/>
</Controls>
:
<Controls/>
}
<Controller/>
<Seek/>
</div>