147 lines
3.5 KiB
HTML
147 lines
3.5 KiB
HTML
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Click for memes</title>
|
|
<script src="max.js"></script>
|
|
<script>
|
|
var idQueue = []
|
|
|
|
function generateRandomID() {
|
|
let videoID = Math.floor(Math.random() * MAX + 1)
|
|
let videoIDString = videoID.toString();
|
|
let paddedID = videoIDString.padStart(5, '0')
|
|
return paddedID
|
|
}
|
|
|
|
function newVideo() {
|
|
let videoPlayer = document.getElementById("video-player")
|
|
let paddedID
|
|
|
|
do {
|
|
paddedID = generateRandomID()
|
|
} while (idQueue.indexOf(paddedID) > 0)
|
|
|
|
|
|
if (idQueue.length < MAX) {
|
|
idQueue.push(paddedID)
|
|
}
|
|
else {
|
|
idQueue.shift()
|
|
}
|
|
|
|
|
|
videoPlayer.src = (paddedID + ".mp4")
|
|
}
|
|
|
|
function modeSwitch() {
|
|
const darkModeButton = document.getElementById("dark-mode")
|
|
const bodyElement = document.querySelector('body')
|
|
|
|
if (darkModeButton.checked) {
|
|
bodyElement.style.backgroundColor = "rgb(25, 25, 25)"
|
|
bodyElement.style.color = "rgb(240, 240, 240)"
|
|
|
|
localStorage.setItem("memes.darkMode", true)
|
|
}
|
|
else {
|
|
bodyElement.style.backgroundColor = "rgb(240, 240, 240)"
|
|
bodyElement.style.color = "rgb(25, 25, 25)"
|
|
|
|
localStorage.setItem("memes.darkMode", false)
|
|
}
|
|
}
|
|
|
|
function setLocalStorage() {
|
|
const autoPlayButton = document.getElementById("autoplay")
|
|
|
|
if (autoPlayButton.checked) {
|
|
localStorage.setItem("memes.autoPlay", true)
|
|
}
|
|
else {
|
|
localStorage.setItem("memes.autoPlay", false)
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
* {
|
|
text-align: center;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
video {
|
|
border-radius: 25px;
|
|
display: block;
|
|
margin: auto
|
|
}
|
|
|
|
button {
|
|
display: block;
|
|
position: relative;
|
|
margin: auto;
|
|
margin-bottom: 10px;
|
|
border-color: let(--bg-color);
|
|
border: 0;
|
|
background-color: lightgrey;
|
|
transition: background-color ease-in 100ms;
|
|
transition: transform linear 50ms;
|
|
|
|
border-radius: 25px;
|
|
height: 2rem;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: darkgrey;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
button:active {
|
|
transition: background-color linear 20ms;
|
|
background-color: grey;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body onload="newVideo()" style="background-color:rgb(240, 240, 240); color:rgb(25, 25, 25)">
|
|
|
|
<p>Click button to see new video</p>
|
|
|
|
<button type="button" onclick="newVideo()">Get new video</button>
|
|
|
|
<input type="checkbox" id="autoplay" title="autoplayButton" value="True" onclick="setLocalStorage()">
|
|
<label for="checkbox">Autoplay</label>
|
|
|
|
<input type="checkbox" id="dark-mode" title="modeSwitchButton" value="True" onclick="modeSwitch()">
|
|
<label for="checkbox">Dark Mode</label>
|
|
|
|
<p>Click player to start memes</p>
|
|
|
|
<video src="" id="video-player" controls autoPlay></video>
|
|
|
|
|
|
<script>
|
|
const video = document.getElementById("video-player")
|
|
const autoPlayButton = document.getElementById("autoplay")
|
|
|
|
video.onended = (event) => {
|
|
if (autoPlayButton.checked) {
|
|
setTimeout(newVideo, 500)
|
|
}
|
|
else {
|
|
video.play()
|
|
}
|
|
}
|
|
|
|
|
|
let darkModeCheck = localStorage.getItem("memes.darkMode")
|
|
if (darkModeCheck === "true") {
|
|
const darkModeCheckbox = document.getElementById("dark-mode")
|
|
darkModeCheckbox.checked = true
|
|
modeSwitch()
|
|
}
|
|
|
|
let autoPlayCheck = localStorage.getItem("memes.autoPlay")
|
|
if (autoPlayCheck === "true") {
|
|
autoPlayButton.checked = true
|
|
}
|
|
</script>
|
|
</body> |