Add Milieu modes and settings
This commit is contained in:
parent
93f4f9d181
commit
48a44dade7
5 changed files with 52 additions and 13 deletions
10
TODO.md
10
TODO.md
|
@ -10,11 +10,11 @@
|
||||||
- [x] Allow for multiple players on one page
|
- [x] Allow for multiple players on one page
|
||||||
- [ ] 360 Video Support
|
- [ ] 360 Video Support
|
||||||
- [x] Remove Iconoir's Vue package, [replace with CSS](https://iconoir.com/docs/packages/css)
|
- [x] Remove Iconoir's Vue package, [replace with CSS](https://iconoir.com/docs/packages/css)
|
||||||
- [ ] Milieu Settings
|
- [x] Milieu Settings
|
||||||
- [ ] Mode (Default | Fullscreen)
|
- [x] Mode (Default | Fullscreen)
|
||||||
- [ ] Speed (Default | Instant | Slow)
|
- [x] Speed
|
||||||
- [ ] Blur
|
- [x] Blur
|
||||||
- [ ] Scale
|
- [x] Scale
|
||||||
- [ ] Modes
|
- [ ] Modes
|
||||||
- [ ] Audio-Only
|
- [ ] Audio-Only
|
||||||
- [ ] Pop-Up
|
- [ ] Pop-Up
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
"live-streaming"
|
"live-streaming"
|
||||||
],
|
],
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.4.62",
|
"version": "0.4.63",
|
||||||
"exports": {
|
"exports": {
|
||||||
".": "./index.ts"
|
".": "./index.ts"
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,12 +1,33 @@
|
||||||
---
|
---
|
||||||
const {
|
const {
|
||||||
PlayerName
|
PlayerName,
|
||||||
|
MilieuMode,
|
||||||
|
MilieuSpeed,
|
||||||
|
MilieuBlur,
|
||||||
|
MilieuScale,
|
||||||
} = Astro.props
|
} = Astro.props
|
||||||
---
|
---
|
||||||
<canvas id="zorn-canvas-1"/>
|
<canvas id="zorn-canvas-1"/>
|
||||||
<canvas id="zorn-canvas-2"/>
|
<canvas id="zorn-canvas-2"/>
|
||||||
|
|
||||||
<script define:vars={{PlayerName}}>
|
{
|
||||||
|
()=> {
|
||||||
|
if (MilieuMode === "Default") {
|
||||||
|
return <style is:global>.video-container canvas {position: absolute}</style>
|
||||||
|
} else if (MilieuMode === "Fullscreen") {
|
||||||
|
return <style is:global>.video-container canvas {position: fixed}</style>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
<style is:global define:vars={{MilieuScale, MilieuBlur}}>
|
||||||
|
.video-container canvas {
|
||||||
|
transform: scale(var(--MilieuScale));
|
||||||
|
filter: blur(var(--MilieuBlur))
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script define:vars={{PlayerName, MilieuSpeed }}>
|
||||||
/**
|
/**
|
||||||
* @licstart The following is the entire license notice for the
|
* @licstart The following is the entire license notice for the
|
||||||
* JavaScript code in this page.
|
* JavaScript code in this page.
|
||||||
|
@ -38,7 +59,7 @@ var SecondCanvas = document.getElementById("zorn-canvas-2")
|
||||||
var FirstCtx = FirstCanvas.getContext("2d")
|
var FirstCtx = FirstCanvas.getContext("2d")
|
||||||
var SecondCtx = SecondCanvas.getContext("2d")
|
var SecondCtx = SecondCanvas.getContext("2d")
|
||||||
|
|
||||||
const FrameInterval = 2000
|
const FrameInterval = MilieuSpeed
|
||||||
const CanvasOpacity = "0.4"
|
const CanvasOpacity = "0.4"
|
||||||
|
|
||||||
let IntervalId
|
let IntervalId
|
||||||
|
|
|
@ -2,13 +2,23 @@
|
||||||
// Properties
|
// Properties
|
||||||
const {
|
const {
|
||||||
PlayerName,
|
PlayerName,
|
||||||
|
|
||||||
|
Whitelabel = false,
|
||||||
|
|
||||||
Poster,
|
Poster,
|
||||||
Video,
|
Video,
|
||||||
Audio,
|
Audio,
|
||||||
VideoAttributes,
|
VideoAttributes,
|
||||||
AudioAttributes,
|
AudioAttributes,
|
||||||
|
|
||||||
Milieu,
|
Milieu,
|
||||||
|
MilieuMode = "Default",
|
||||||
|
MilieuSpeed = "2000",
|
||||||
|
MilieuScale = "1.05",
|
||||||
|
MilieuBlur = "16px",
|
||||||
|
|
||||||
SettingsMenu,
|
SettingsMenu,
|
||||||
|
|
||||||
Live
|
Live
|
||||||
} = Astro.props
|
} = Astro.props
|
||||||
|
|
||||||
|
@ -28,7 +38,17 @@ import './Styles/Iconoir.css'
|
||||||
<video class="main-video" {VideoAttributes} disableremoteplayback src={Video} poster={Poster} preload="auto"></video>
|
<video class="main-video" {VideoAttributes} disableremoteplayback src={Video} poster={Poster} preload="auto"></video>
|
||||||
{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 }
|
||||||
{Audio ? <Sync PlayerName={PlayerName}/> : null }
|
{Audio ? <Sync PlayerName={PlayerName}/> : null }
|
||||||
{Milieu ? <MilieuEffect PlayerName={PlayerName}/> : null }
|
{Milieu ?
|
||||||
|
<MilieuEffect
|
||||||
|
PlayerName={PlayerName}
|
||||||
|
MilieuMode={MilieuMode}
|
||||||
|
MilieuSpeed={MilieuSpeed}
|
||||||
|
MilieuScale={MilieuScale}
|
||||||
|
MilieuBlur={MilieuBlur}
|
||||||
|
/>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
{SettingsMenu ?
|
{SettingsMenu ?
|
||||||
<Controls PlayerName={PlayerName} Live={Live}>
|
<Controls PlayerName={PlayerName} Live={Live}>
|
||||||
<button id="open-zorn-settings-button" onclick="OpenZornMenu()"><i class="iconoir-settings"></i></button>
|
<button id="open-zorn-settings-button" onclick="OpenZornMenu()"><i class="iconoir-settings"></i></button>
|
||||||
|
|
|
@ -24,15 +24,13 @@
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
canvas {
|
canvas {
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
filter: blur(24px);
|
transition: 0.6s filter;
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
}
|
||||||
.video-controls {
|
.video-controls {
|
||||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7523460068) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 94%, rgb(0 0 0 / 0%) 100%);
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7523460068) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 94%, rgb(0 0 0 / 0%) 100%);
|
||||||
|
|
Loading…
Reference in a new issue