Add Milieu modes and settings

This commit is contained in:
Korbs 2024-11-11 21:56:07 -05:00
parent 93f4f9d181
commit 48a44dade7
5 changed files with 52 additions and 13 deletions

10
TODO.md
View file

@ -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

View file

@ -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"
}, },

View file

@ -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

View file

@ -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>

View file

@ -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%);