212 lines
8.2 KiB
HTML
212 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Photo Frame</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body, html { margin: 0; background: black; height: 100%; overflow: hidden; }
|
|
#viewer {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
object-fit: contain;
|
|
transition: opacity 0.8s ease-in-out;
|
|
}
|
|
.fade-out { opacity: 0; }
|
|
.fade-in { opacity: 1; }
|
|
.hide-mouse { cursor: none; }
|
|
</style>
|
|
</head>
|
|
<body class="flex items-center justify-center hide-mouse">
|
|
|
|
<img id="viewer" src="" class="fade-out">
|
|
|
|
<div id="ui" class="fixed bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-4 bg-black/70 backdrop-blur-md text-white px-6 py-3 rounded-2xl border border-white/10 opacity-0 transition-opacity duration-300 hover:opacity-100">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs uppercase font-bold text-gray-400">Interval:</span>
|
|
<input type="number" id="speed" value="5" min="1"
|
|
class="bg-white/10 border border-white/20 rounded px-2 py-1 w-14 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
|
|
<span class="text-xs text-gray-400">s</span>
|
|
</div>
|
|
|
|
<div class="h-4 w-[1px] bg-white/20"></div>
|
|
|
|
<button id="shuffleBtn" onclick="toggleShuffle()" class="text-xs uppercase font-bold text-gray-400 hover:text-white transition-colors flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
|
|
Shuffle: <span id="shuffleStatus">OFF</span>
|
|
</button>
|
|
|
|
<button onclick="toggleFullScreen()" class="text-sm hover:text-blue-400 transition-colors">Full Screen</button>
|
|
<a href="/" class="text-sm bg-blue-600 hover:bg-blue-500 px-4 py-1.5 rounded-lg transition-colors">Back</a>
|
|
</div>
|
|
|
|
<div id="qr-container" class="fixed top-6 right-6 p-3 bg-white rounded-xl shadow-2xl opacity-0 transition-opacity duration-300">
|
|
<div id="qrcode"></div>
|
|
<p class="text-black text-[10px] font-bold text-center mt-2 uppercase tracking-tighter">Scan to Upload</p>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
|
|
|
<script>
|
|
let images = [];
|
|
let playlist = [];
|
|
let index = 0;
|
|
let timer;
|
|
let isShuffle = true;
|
|
|
|
const viewer = document.getElementById('viewer');
|
|
const speedInput = document.getElementById('speed');
|
|
const shuffleStatus = document.getElementById('shuffleStatus');
|
|
|
|
// Fisher-Yates Shuffle Algorithm
|
|
function shuffleArray(array) {
|
|
for (let i = array.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[array[i], array[j]] = [array[j], array[i]];
|
|
}
|
|
}
|
|
|
|
function rebuildPlaylist() {
|
|
if (images.length === 0) return;
|
|
playlist = [...images];
|
|
if (isShuffle) {
|
|
shuffleArray(playlist);
|
|
}
|
|
index = 0;
|
|
}
|
|
|
|
async function checkSchedule() {
|
|
try {
|
|
const res = await fetch('/api/get-schedule');
|
|
const schedule = await res.json();
|
|
|
|
const now = new Date();
|
|
const day = now.toLocaleDateString('en-US', { weekday: 'long' });
|
|
// Format current time as HH:MM
|
|
const currentTime = now.getHours().toString().padStart(2, '0') + ":" +
|
|
now.getMinutes().toString().padStart(2, '0');
|
|
|
|
const isActive = schedule[day + "_active"];
|
|
const start = schedule[day + "_start"];
|
|
const end = schedule[day + "_end"];
|
|
|
|
// Check if we should be "OFF"
|
|
if (isActive && (currentTime < start || currentTime > end)) {
|
|
viewer.classList.add('hidden'); // Hide image
|
|
document.body.style.backgroundColor = "black";
|
|
return false; // Tells the slideshow to skip this turn
|
|
} else {
|
|
viewer.classList.remove('hidden');
|
|
return true; // Everything is fine
|
|
}
|
|
} catch (err) {
|
|
return true; // If API fails, show photos anyway
|
|
}
|
|
}
|
|
|
|
function toggleShuffle() {
|
|
isShuffle = !isShuffle;
|
|
shuffleStatus.textContent = isShuffle ? "ON" : "OFF";
|
|
shuffleStatus.parentElement.classList.toggle('text-blue-400', isShuffle);
|
|
rebuildPlaylist();
|
|
}
|
|
|
|
async function loadImages() {
|
|
try {
|
|
const res = await fetch('/api/images');
|
|
const newList = await res.json();
|
|
|
|
if (JSON.stringify(images) !== JSON.stringify(newList)) {
|
|
images = newList;
|
|
rebuildPlaylist();
|
|
if (images.length > 0 && !timer) {
|
|
start();
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to fetch image list:", err);
|
|
}
|
|
}
|
|
|
|
async function showNext() {
|
|
if (playlist.length === 0) return;
|
|
|
|
const isRunning = await checkSchedule();
|
|
if (!isRunning) return;
|
|
|
|
viewer.classList.replace('fade-in', 'fade-out');
|
|
|
|
setTimeout(() => {
|
|
viewer.src = "/uploads/" + playlist[index];
|
|
|
|
index++;
|
|
if (index >= playlist.length) {
|
|
rebuildPlaylist();
|
|
}
|
|
|
|
viewer.onload = () => {
|
|
viewer.classList.replace('fade-out', 'fade-in');
|
|
};
|
|
}, 800);
|
|
}
|
|
|
|
function start() {
|
|
clearInterval(timer);
|
|
showNext();
|
|
const ms = Math.max(speedInput.value, 1) * 1000;
|
|
timer = setInterval(showNext, ms);
|
|
}
|
|
|
|
// WebSocket Logic
|
|
const socket = new WebSocket("ws://" + window.location.host + "/ws");
|
|
socket.onmessage = (event) => {
|
|
if (event.data === "refresh") {
|
|
loadImages();
|
|
}
|
|
};
|
|
|
|
// UI Helpers
|
|
function toggleFullScreen() {
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen();
|
|
} else {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
|
|
let mouseTimer;
|
|
document.addEventListener('mousemove', () => {
|
|
document.body.classList.remove('hide-mouse');
|
|
document.getElementById('ui').classList.add('opacity-100');
|
|
document.getElementById('qr-container').classList.add('opacity-100');
|
|
|
|
clearTimeout(mouseTimer);
|
|
mouseTimer = setTimeout(() => {
|
|
document.body.classList.add('hide-mouse');
|
|
document.getElementById('ui').classList.remove('opacity-100');
|
|
document.getElementById('qr-container').classList.remove('opacity-100');
|
|
}, 3000);
|
|
});
|
|
|
|
async function setupQRCode() {
|
|
try {
|
|
const res = await fetch('/api/info');
|
|
const data = await res.json();
|
|
const uploadUrl = `http://${data.ip}:${data.port}/`;
|
|
|
|
new QRCode(document.getElementById("qrcode"), {
|
|
text: uploadUrl,
|
|
width: 128,
|
|
height: 128
|
|
});
|
|
} catch (err) {}
|
|
}
|
|
|
|
speedInput.addEventListener('change', start);
|
|
|
|
// Initial setup
|
|
setupQRCode();
|
|
loadImages();
|
|
</script>
|
|
</body>
|
|
</html> |