feat: video player
This commit is contained in:
parent
502a7121cd
commit
8b97f20167
5 changed files with 123 additions and 2 deletions
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
public/assets/**.png filter=lfs diff=lfs merge=lfs -text
|
BIN
public/assets/play.png
(Stored with Git LFS)
Normal file
BIN
public/assets/play.png
(Stored with Git LFS)
Normal file
Binary file not shown.
|
@ -1,14 +1,27 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import SvgContent from "./components/SVGContent.svelte";
|
import SvgContent from "./components/SVGContent.svelte";
|
||||||
|
import VideoPlayer from "./components/VideoPlayer.svelte";
|
||||||
|
|
||||||
function setBackground(ev: CustomEvent<string>) {
|
function setBackground(ev: CustomEvent<string>) {
|
||||||
console.debug(`Setting background color to "${ev.detail}"`);
|
console.debug(`Setting background color to "${ev.detail}"`);
|
||||||
document.body.style.background = ev.detail;
|
document.body.style.background = ev.detail;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let currentVideo: string | undefined;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<SvgContent url="content/intro.svg" on:setBackground={setBackground} />
|
<SvgContent
|
||||||
|
url="content/intro.svg"
|
||||||
|
on:setBackground={setBackground}
|
||||||
|
on:video={(ev) => (currentVideo = ev.detail)}
|
||||||
|
/>
|
||||||
|
{#if currentVideo}
|
||||||
|
<VideoPlayer
|
||||||
|
url={currentVideo}
|
||||||
|
on:exit={() => (currentVideo = undefined)}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
@ -252,6 +252,11 @@
|
||||||
const images = processImages(svg);
|
const images = processImages(svg);
|
||||||
console.info(`[SVG] Found ${images.length} images.`);
|
console.info(`[SVG] Found ${images.length} images.`);
|
||||||
|
|
||||||
|
// Videos
|
||||||
|
console.debug("[SVG] Processing images as videos.");
|
||||||
|
processVideos(svg, (el) => root.appendChild(el));
|
||||||
|
// console.info(`[SVG] Found ${audioAreas.length} audio areas.`);
|
||||||
|
|
||||||
// Audio areas
|
// Audio areas
|
||||||
console.debug("[SVG] Processing audio areas.");
|
console.debug("[SVG] Processing audio areas.");
|
||||||
audioAreas = processAudio(svg);
|
audioAreas = processAudio(svg);
|
||||||
|
@ -426,6 +431,65 @@
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function processVideos(
|
||||||
|
svgDocument: SVGElement,
|
||||||
|
callback: (el: HTMLDivElement) => void
|
||||||
|
) {
|
||||||
|
const ratio =
|
||||||
|
svgDocument.clientWidth / (svgDocument as any).viewBox.baseVal.width;
|
||||||
|
|
||||||
|
Array.from(svgDocument.getElementsByTagName("image")).forEach((el) => {
|
||||||
|
const href = el.getAttribute("xlink:href");
|
||||||
|
const origPath = href.split("/");
|
||||||
|
const basename = origPath[origPath.length - 1];
|
||||||
|
const videoUrl = `content/video/${basename.replace(
|
||||||
|
/.[a-zA-Z0-9]+$/,
|
||||||
|
".mp4"
|
||||||
|
)}`;
|
||||||
|
|
||||||
|
fetch(videoUrl, {
|
||||||
|
method: "HEAD",
|
||||||
|
cache: "no-store",
|
||||||
|
}).then((videoExistsFetch) => {
|
||||||
|
if (videoExistsFetch.status !== 200) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.debug(
|
||||||
|
`[SVG/VIDEOS] Found image with video: #${el.id} (${href} / ${videoUrl}).`
|
||||||
|
);
|
||||||
|
|
||||||
|
let x = el.x.baseVal.value;
|
||||||
|
let y = el.y.baseVal.value;
|
||||||
|
let w = el.width.baseVal.value;
|
||||||
|
let h = el.height.baseVal.value;
|
||||||
|
let angle = 0;
|
||||||
|
|
||||||
|
const transform = el.attributes.getNamedItem("transform");
|
||||||
|
const rotateResult = /rotate\((-?[0-9.]+)\)/.exec(
|
||||||
|
transform?.value || ""
|
||||||
|
);
|
||||||
|
if (rotateResult) {
|
||||||
|
angle = parseFloat(rotateResult[1]);
|
||||||
|
const [ncx, ncy] = rotate(x + w / 2, y + h / 2, 0, 0, angle);
|
||||||
|
x = ncx - w / 2;
|
||||||
|
y = ncy - h / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
const playEl = document.createElement("div");
|
||||||
|
playEl.classList.add("videoOverlay");
|
||||||
|
playEl.style.position = "absolute";
|
||||||
|
playEl.style.top = `${y * ratio}px`;
|
||||||
|
playEl.style.left = `${x * ratio}px`;
|
||||||
|
playEl.style.width = `${w * ratio}px`;
|
||||||
|
playEl.style.height = `${h * ratio}px`;
|
||||||
|
playEl.addEventListener("click", () => {
|
||||||
|
dispatch("video", videoUrl);
|
||||||
|
});
|
||||||
|
callback(playEl);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
async function processScrolls(
|
async function processScrolls(
|
||||||
svg: SVGElement,
|
svg: SVGElement,
|
||||||
images: SVGImageElement[]
|
images: SVGImageElement[]
|
||||||
|
@ -708,6 +772,16 @@
|
||||||
box-shadow: 0 6px 3px rgba(0, 0, 0, 0.33);
|
box-shadow: 0 6px 3px rgba(0, 0, 0, 0.33);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.videoOverlay) {
|
||||||
|
background: url("assets/play.png");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 66%;
|
||||||
|
opacity: 0.25;
|
||||||
|
background-color: rgba(0, 0, 0, 1);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.dev {
|
.dev {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
30
src/components/VideoPlayer.svelte
Normal file
30
src/components/VideoPlayer.svelte
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
export let url: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="videoPlayer" on:click={() => dispatch("exit")}>
|
||||||
|
<!-- svelte-ignore a11y-media-has-caption -->
|
||||||
|
<video controls autoplay src={url} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.videoPlayer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
background: rgba(0, 0, 0, 0.88);
|
||||||
|
video {
|
||||||
|
width: 90%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in a new issue