Create new Presnetation mode
This commit is contained in:
parent
965015c18e
commit
dd91226717
127
src/Presentation/Player.astro
Normal file
127
src/Presentation/Player.astro
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
---
|
||||
// Properties
|
||||
const {
|
||||
PlayerName,
|
||||
Video,
|
||||
Position = "RightBottom",
|
||||
Inset,
|
||||
Theme = "255, 255, 255, 0.5",
|
||||
ThemeBorder = "White",
|
||||
Loop
|
||||
} = Astro.props
|
||||
|
||||
// Icons and Styles
|
||||
import '../Styles/Presentation.scss'
|
||||
import '../Styles/Iconoir.css'
|
||||
---
|
||||
|
||||
<div class="presentation-container" id={"zorn-presentation-player-" + PlayerName}>
|
||||
<video loop muted autoplay playsinline class="main-video" src={Video} preload="auto"></video>
|
||||
<button style={'background: rgba(' + Theme + '); border-color: ' + ThemeBorder} id="pc-playpause"><i class="iconoir-pause-solid"></i></button>
|
||||
</div>
|
||||
|
||||
<script is:inline define:vars={{PlayerName}}>
|
||||
var Presenter = document.querySelector('#zorn-presentation-player-' + PlayerName + ' video')
|
||||
|
||||
// Icons
|
||||
var play_solid_default = '<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
|
||||
var pause_solid_default = '<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M6 18.4V5.6C6 5.26863 6.26863 5 6.6 5H9.4C9.73137 5 10 5.26863 10 5.6V18.4C10 18.7314 9.73137 19 9.4 19H6.6C6.26863 19 6 18.7314 6 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path><path d="M14 18.4V5.6C14 5.26863 14.2686 5 14.6 5H17.4C17.7314 5 18 5.26863 18 5.6V18.4C18 18.7314 17.7314 19 17.4 19H14.6C14.2686 19 14 18.7314 14 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path></svg>';
|
||||
var PlayIcon = play_solid_default;
|
||||
var PauseIcon = pause_solid_default;
|
||||
|
||||
function PlayPause() {
|
||||
// Get Button
|
||||
const Button_PlayPause = document.querySelector("#zorn-presentation-player-" + PlayerName + " #pc-playpause");
|
||||
|
||||
// Event Listern
|
||||
Button_PlayPause.addEventListener("click", Toggle_PlayPause);
|
||||
Presenter.addEventListener("click", Toggle_PlayPause);
|
||||
Presenter.addEventListener("play", Update_PlayPauseButton);
|
||||
Presenter.addEventListener("pause", Update_PlayPauseButton);
|
||||
function Toggle_PlayPause() {
|
||||
if (Presenter.paused || Presenter.ended) {Presenter.play()}
|
||||
else {Presenter.pause()}
|
||||
}
|
||||
|
||||
// Update Button
|
||||
function Update_PlayPauseButton() {
|
||||
if (Presenter.paused) {
|
||||
Button_PlayPause.setAttribute("data-title", "Play (K)");
|
||||
Button_PlayPause.innerHTML = `${PlayIcon}`;
|
||||
} else {
|
||||
Button_PlayPause.setAttribute("data-title", "Pause (K)");
|
||||
Button_PlayPause.innerHTML = `${PauseIcon}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
PlayPause()
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
{Inset ?
|
||||
<style>
|
||||
#pc-playpause {
|
||||
margin-bottom: -20px;
|
||||
border-width: 4px;
|
||||
}
|
||||
</style>
|
||||
:
|
||||
null
|
||||
}
|
||||
|
||||
{
|
||||
()=> {
|
||||
if (Position === "LeftTop") {
|
||||
return <style>
|
||||
#pc-playpause {
|
||||
top: 0px !important;
|
||||
bottom: inherit !important;
|
||||
left: 0px !important;
|
||||
right: inherit !important;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
else if (Position === "RightTop") {
|
||||
return <style>
|
||||
#pc-playpause {
|
||||
top: 0px !important;
|
||||
bottom: inherit !important;
|
||||
left: inherit !important;
|
||||
right: 0px !important;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
else if (Position === "LeftBottom") {
|
||||
return <style>
|
||||
#pc-playpause {
|
||||
top: inherit !important;
|
||||
bottom: 0px !important;
|
||||
left: 0px !important;
|
||||
right: inherit !important;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
else if (Position === "CenterBottom") {
|
||||
return <style>
|
||||
#pc-playpause {
|
||||
top: inherit !important;
|
||||
bottom: 0px !important;
|
||||
left: 50% !important;
|
||||
right: inherit !important;
|
||||
transform: translate(-93%);
|
||||
}
|
||||
</style>
|
||||
}
|
||||
else if (Position === "RightBottom") {
|
||||
return <style>
|
||||
#pc-playpause {
|
||||
top: inherit !important;
|
||||
bottom: 0px !important;
|
||||
left: inherit !important;
|
||||
right: 0px !important;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
}
|
||||
}
|
||||
30
src/Styles/Presentation.scss
Normal file
30
src/Styles/Presentation.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
.presentation-container {
|
||||
position: relative;
|
||||
.video-controls, video {
|
||||
border-radius: 12px;
|
||||
}
|
||||
*:focus-visible {
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.5) !important;
|
||||
transition: 1s background;
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
#pc-playpause {
|
||||
position: absolute;
|
||||
margin: 24px;
|
||||
color: white;
|
||||
border: 2px solid;
|
||||
border-radius: 3rem;
|
||||
aspect-ratio: 1;
|
||||
backdrop-filter: blur(6px) contrast(0.8);
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
}
|
||||
Loading…
Reference in a new issue