113 lines
2.4 KiB
Svelte
113 lines
2.4 KiB
Svelte
<script>
|
|
import { Link } from "svelte-navigator";
|
|
import { onMount } from "svelte";
|
|
|
|
export let audioId;
|
|
export let videoId;
|
|
|
|
let videoUrl = "";
|
|
let audioUrl = "";
|
|
|
|
$: videoCode = extract(videoUrl);
|
|
$: audioCode = extract(audioUrl);
|
|
|
|
let videoReady = false;
|
|
let audioReady = false;
|
|
|
|
let videoPlayer;
|
|
let audioPlayer;
|
|
|
|
function extract(url) {
|
|
const match = url.match(/(youtu\.be\/|youtube\.com\/watch\?v=)([\w]+)/);
|
|
if (match) {
|
|
return match[2];
|
|
} else {
|
|
return "???";
|
|
}
|
|
}
|
|
|
|
onMount(async () => {
|
|
const tag = document.createElement("script");
|
|
tag.src = "https://www.youtube.com/iframe_api";
|
|
const firstScriptTag = document.getElementsByTagName("script")[0];
|
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
|
|
const currentResult = await fetch("/grid.php");
|
|
const current = await currentResult.json();
|
|
videoUrl = current.find((link) => link.id == videoId).url;
|
|
audioUrl = current.find((link) => link.id == audioId).url;
|
|
|
|
// @ts-ignore
|
|
window.onYouTubeIframeAPIReady = () => {
|
|
// @ts-ignore
|
|
videoPlayer = new YT.Player("videoPlayer", {
|
|
videoId: videoCode,
|
|
events: {
|
|
onReady: () => {
|
|
videoReady = true;
|
|
},
|
|
},
|
|
});
|
|
|
|
// @ts-ignore
|
|
audioPlayer = new YT.Player("audioPlayer", {
|
|
videoId: audioCode,
|
|
events: {
|
|
onReady: () => {
|
|
audioReady = true;
|
|
},
|
|
},
|
|
});
|
|
};
|
|
});
|
|
|
|
function go() {
|
|
videoPlayer.playVideo();
|
|
videoPlayer.mute();
|
|
audioPlayer.playVideo();
|
|
}
|
|
</script>
|
|
|
|
<main>
|
|
<a class="link" href="javascript:;" on:click={go}>START</a>
|
|
|
|
<div id="player">
|
|
<h2 title={videoUrl}>Video</h2>
|
|
<div id="videoPlayer" />
|
|
<h2 title={audioUrl}>Audio</h2>
|
|
<div id="audioPlayer" />
|
|
</div>
|
|
|
|
<Link class="link" to="/">BACK</Link>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
:global(.link) {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
padding: 1em 2em;
|
|
margin: 2rem;
|
|
color: white;
|
|
background-color: rgba(255, 255, 255, 0.25);
|
|
border-radius: 2em;
|
|
border: 2px solid rgba(255, 255, 255, 0);
|
|
outline: none;
|
|
width: 200px;
|
|
font-variant-numeric: tabular-nums;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#audioPlayer {
|
|
height: 128px;
|
|
}
|
|
</style>
|