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 // Icons
import { import {
Backward15Seconds, Backward15Seconds,
@ -10,7 +16,7 @@ import {
<div class="video-controls"> <div class="video-controls">
<div class="vc-top"> <div class="vc-top">
<p>The Mark On The Wall</p> <p>{Title}</p>
</div> </div>
<div class="vc-bottom"> <div class="vc-bottom">
<div class="vc-start"> <div class="vc-start">
@ -20,7 +26,7 @@ import {
</div> </div>
<div class="vc-center"> <div class="vc-center">
<div class="vc-seek"> <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"> <input class="seek" id="seek" value="0" min="0" type="range" step="1">
</div> </div>
<p class="timestamp"> <p class="timestamp">
@ -30,6 +36,7 @@ import {
</p> </p>
</div> </div>
<div class="vc-end"> <div class="vc-end">
<slot/>
<button id="vc-fullscreen"><Enlarge /></button> <button id="vc-fullscreen"><Enlarge /></button>
</div> </div>
</div> </div>

View file

@ -3,11 +3,11 @@
const { const {
Poster, Poster,
Video, Video,
Audio, // For YouTube Frontends that wants to support 1080p and higher Audio,
CustomControls = true,
VideoAttributes, VideoAttributes,
AudioAttributes, AudioAttributes,
Milieu Milieu,
SettingsMenu
} = Astro.props } = Astro.props
// Components // Components
@ -19,6 +19,7 @@ import Sync from './Controls/Sync.astro'
// Styles // Styles
import './Index.scss' import './Index.scss'
import { Settings } from '@iconoir/vue'
--- ---
<div class="video-container"> <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 } {Audio ? <audio class="main-audio"><source {AudioAttributes} src={Audio} type="audio/mp3"/></audio> : null }
{Milieu ? <MilieuEffect/> : null } {Milieu ? <MilieuEffect/> : null }
{Audio ? <Sync/> : 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> </div>