Add option for color and custom menu
This commit is contained in:
parent
4d136a06e2
commit
b4d52c0320
|
@ -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>
|
||||
|
|
|
@ -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>
|
Loading…
Reference in a new issue