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