tfaour
aef8a10029
Build and push server image / build-and-push (push) Successful in 34s
The native HTML5 Drag-and-Drop API (draggable/dragstart/dragover/drop) is mouse-only by spec and never fires on phones/tablets, so reordering was unusable on mobile. Replaced it with the Pointer Events API (pointerdown/pointermove/pointerup), which unifies mouse, touch, and pen into one code path, plus touch-action: none on the cards so touching one to drag it doesn't get hijacked by the browser's default scroll gesture. Same visual behavior as before (dim the dragged card, outline the drop target).
331 lines
13 KiB
HTML
331 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>ESPresso Frame</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; max-width: 900px; margin: 40px auto; padding: 0 16px; color: #222; }
|
|
.config-panel { max-width: 480px; }
|
|
h1 { font-size: 20px; }
|
|
p.sub { color: #666; font-size: 14px; margin-top: -8px; }
|
|
label { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; }
|
|
input, select { width: 100%; padding: 8px; box-sizing: border-box; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
|
|
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
|
|
.checkbox-row input { width: auto; margin-top: 0; }
|
|
.checkbox-row label { margin-top: 0; font-weight: normal; }
|
|
button { margin-top: 20px; padding: 10px 16px; border: none; border-radius: 4px; background: #2563eb; color: white; cursor: pointer; font-size: 14px; }
|
|
button:hover { background: #1d4ed8; }
|
|
button.secondary { background: #6b7280; margin-right: 8px; }
|
|
.status { margin-top: 16px; padding: 10px; border-radius: 4px; font-size: 14px; }
|
|
.status.ok { background: #dcfce7; color: #166534; }
|
|
.status.err { background: #fee2e2; color: #991b1b; }
|
|
.info-box { margin-top: 16px; padding: 10px; border-radius: 4px; font-size: 13px; background: #f3f4f6; color: #444; }
|
|
.info-box.warn { background: #fef9c3; color: #854d0e; }
|
|
code { background: #f3f4f6; padding: 2px 5px; border-radius: 3px; }
|
|
h2.section { font-size: 16px; margin-top: 28px; margin-bottom: 8px; }
|
|
.thumb { width: 160px; max-width: 100%; border-radius: 4px; display: block; }
|
|
|
|
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 8px; }
|
|
.photo-card {
|
|
position: relative; cursor: grab; border-radius: 6px; overflow: hidden; aspect-ratio: 1;
|
|
background: #f3f4f6; border: 1px solid #e5e7eb;
|
|
/* Touching a card is what starts a drag -- without this the browser
|
|
treats that touch as the start of a page scroll instead, and
|
|
pointermove events for the drag never arrive on mobile. */
|
|
touch-action: none;
|
|
}
|
|
.photo-card:active { cursor: grabbing; }
|
|
.photo-card.dragging { opacity: 0.35; }
|
|
.photo-card.drag-over { outline: 3px solid #2563eb; outline-offset: -3px; }
|
|
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
|
|
.photo-card .badge { position: absolute; top: 6px; left: 6px; background: rgba(0, 0, 0, 0.6); color: white; font-size: 10px; padding: 2px 6px; border-radius: 3px; }
|
|
.photo-card .show-next {
|
|
position: absolute; bottom: 6px; left: 6px; right: 6px; margin: 0; padding: 5px 0;
|
|
font-size: 11px; text-align: center; background: rgba(37, 99, 235, 0.92); border-radius: 4px;
|
|
opacity: 0; transition: opacity 0.15s;
|
|
}
|
|
.photo-card:hover .show-next, .photo-card:focus-within .show-next { opacity: 1; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>ESPresso Frame</h1>
|
|
<p class="sub">Point your frame's "Tools Server" field at this server's <code>host:port</code>.</p>
|
|
|
|
<div class="config-panel">
|
|
{% if cfg.immich_url %}
|
|
<div class="info-box">Immich: <code>{{ cfg.immich_url }}</code> (API key configured). Set via
|
|
<code>IMMICH_URL</code>/<code>IMMICH_API_KEY</code> in <code>docker-compose.yml</code> -- see
|
|
<code>docker-compose.yml.example</code>.</div>
|
|
{% else %}
|
|
<div class="info-box warn">Immich isn't configured yet. Set <code>IMMICH_URL</code> and
|
|
<code>IMMICH_API_KEY</code> in <code>docker-compose.yml</code> (copy
|
|
<code>docker-compose.yml.example</code>) and restart the server.</div>
|
|
{% endif %}
|
|
|
|
<form id="config-form">
|
|
<label>Album
|
|
<select id="album_id">
|
|
{% if cfg.album_id %}<option value="{{ cfg.album_id }}" selected>(current selection -- reload to rename)</option>{% endif %}
|
|
</select>
|
|
</label>
|
|
<label>Order
|
|
<select id="order">
|
|
<option value="sequential" {% if cfg.order == "sequential" %}selected{% endif %}>Sequential</option>
|
|
<option value="shuffle" {% if cfg.order == "shuffle" %}selected{% endif %}>Shuffle</option>
|
|
</select>
|
|
</label>
|
|
<label>Refresh interval (minutes)
|
|
<input type="number" id="refresh_interval_minutes" min="1" max="1440"
|
|
value="{{ (cfg.refresh_interval_s // 60) or 60 }}" required>
|
|
</label>
|
|
<div class="checkbox-row">
|
|
<input type="checkbox" id="smart_crop_faces" {% if cfg.smart_crop_faces %}checked{% endif %}>
|
|
<label for="smart_crop_faces">Center faces in crop</label>
|
|
</div>
|
|
<label>Upcoming photos to show
|
|
<select id="queue_target_len">
|
|
{% for n in [5, 10, 15, 20, 25, 30, 40, 50] %}
|
|
<option value="{{ n }}" {% if cfg.queue_target_len == n %}selected{% endif %}>{{ n }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<button type="button" class="secondary" id="load-albums">Load Albums</button>
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
<div id="result"></div>
|
|
|
|
<h2 class="section">Now displaying</h2>
|
|
<div id="current-thumb"><p class="sub">Loading...</p></div>
|
|
</div>
|
|
|
|
<h2 class="section">Upcoming</h2>
|
|
<p class="sub">Drag a photo to reorder, or use "Show next" to jump it to the front.</p>
|
|
<div id="upcoming-grid" class="photo-grid"></div>
|
|
|
|
<script>
|
|
const resultEl = document.getElementById('result');
|
|
|
|
function showStatus(ok, message) {
|
|
resultEl.innerHTML = `<div class="status ${ok ? 'ok' : 'err'}">${message}</div>`;
|
|
}
|
|
|
|
async function saveConfig() {
|
|
const minutes = parseInt(document.getElementById('refresh_interval_minutes').value, 10) || 60;
|
|
const body = new URLSearchParams({
|
|
album_id: document.getElementById('album_id').value || '',
|
|
order: document.getElementById('order').value,
|
|
refresh_interval_s: String(minutes * 60),
|
|
smart_crop_faces: String(document.getElementById('smart_crop_faces').checked),
|
|
queue_target_len: document.getElementById('queue_target_len').value,
|
|
});
|
|
const resp = await fetch('/api/config', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body,
|
|
});
|
|
if (!resp.ok) {
|
|
throw new Error(await resp.text());
|
|
}
|
|
}
|
|
|
|
document.getElementById('load-albums').addEventListener('click', async () => {
|
|
try {
|
|
await saveConfig();
|
|
|
|
const resp = await fetch('/api/albums');
|
|
if (!resp.ok) {
|
|
throw new Error(await resp.text());
|
|
}
|
|
const albums = await resp.json();
|
|
|
|
const select = document.getElementById('album_id');
|
|
select.innerHTML = '';
|
|
for (const a of albums) {
|
|
const opt = document.createElement('option');
|
|
opt.value = a.id;
|
|
opt.textContent = `${a.name} (${a.count})`;
|
|
select.appendChild(opt);
|
|
}
|
|
showStatus(true, `Loaded ${albums.length} album(s) -- pick one and click Save.`);
|
|
} catch (e) {
|
|
showStatus(false, e.message);
|
|
}
|
|
});
|
|
|
|
document.getElementById('config-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
await saveConfig();
|
|
showStatus(true, 'Saved.');
|
|
loadQueue();
|
|
} catch (e) {
|
|
showStatus(false, e.message);
|
|
}
|
|
});
|
|
|
|
let upcomingItems = [];
|
|
|
|
// Pointer Events (not the native HTML5 Drag-and-Drop API) so the same
|
|
// code drives mouse, touch, and pen -- native drag-and-drop is
|
|
// mouse-only by spec and never fires at all on phones/tablets.
|
|
let dragState = null; // { pointerId, fromIndex, toIndex, moved }
|
|
const DRAG_START_THRESHOLD_PX = 6; // ignore tiny jitter from an imprecise tap
|
|
|
|
function clearDragOverStyling() {
|
|
document.querySelectorAll('.photo-card.drag-over').forEach((el) => el.classList.remove('drag-over'));
|
|
}
|
|
|
|
function endDrag(card) {
|
|
card.classList.remove('dragging');
|
|
clearDragOverStyling();
|
|
if (dragState && dragState.moved && dragState.toIndex !== undefined && dragState.toIndex !== dragState.fromIndex) {
|
|
moveItem(dragState.fromIndex, dragState.toIndex);
|
|
}
|
|
dragState = null;
|
|
}
|
|
|
|
function renderUpcoming(items) {
|
|
upcomingItems = items;
|
|
const grid = document.getElementById('upcoming-grid');
|
|
grid.innerHTML = '';
|
|
|
|
items.forEach((item, i) => {
|
|
const card = document.createElement('div');
|
|
card.className = 'photo-card';
|
|
card.dataset.index = String(i);
|
|
|
|
const img = document.createElement('img');
|
|
img.src = item.thumbnail_url;
|
|
img.alt = '';
|
|
card.appendChild(img);
|
|
|
|
const badge = document.createElement('span');
|
|
badge.className = 'badge';
|
|
badge.textContent = String(i + 1);
|
|
card.appendChild(badge);
|
|
|
|
const nextBtn = document.createElement('button');
|
|
nextBtn.type = 'button';
|
|
nextBtn.className = 'show-next';
|
|
nextBtn.textContent = 'Show next';
|
|
nextBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
showNext(i);
|
|
});
|
|
card.appendChild(nextBtn);
|
|
|
|
card.addEventListener('pointerdown', (e) => {
|
|
if (e.target.closest('.show-next')) {
|
|
return; // let the button's own click handler run, don't start a drag
|
|
}
|
|
if (e.pointerType === 'mouse' && e.button !== 0) {
|
|
return; // left button only
|
|
}
|
|
dragState = { pointerId: e.pointerId, fromIndex: i, toIndex: undefined, moved: false, startX: e.clientX, startY: e.clientY };
|
|
card.setPointerCapture(e.pointerId);
|
|
});
|
|
|
|
card.addEventListener('pointermove', (e) => {
|
|
if (!dragState || dragState.pointerId !== e.pointerId) {
|
|
return;
|
|
}
|
|
if (!dragState.moved) {
|
|
const dx = e.clientX - dragState.startX;
|
|
const dy = e.clientY - dragState.startY;
|
|
if (Math.hypot(dx, dy) < DRAG_START_THRESHOLD_PX) {
|
|
return;
|
|
}
|
|
dragState.moved = true;
|
|
card.classList.add('dragging');
|
|
}
|
|
const overCard = document.elementFromPoint(e.clientX, e.clientY)?.closest('.photo-card');
|
|
clearDragOverStyling();
|
|
if (overCard && overCard !== card) {
|
|
overCard.classList.add('drag-over');
|
|
dragState.toIndex = Number(overCard.dataset.index);
|
|
} else {
|
|
dragState.toIndex = undefined;
|
|
}
|
|
});
|
|
|
|
card.addEventListener('pointerup', (e) => {
|
|
if (dragState && dragState.pointerId === e.pointerId) {
|
|
endDrag(card);
|
|
}
|
|
});
|
|
card.addEventListener('pointercancel', (e) => {
|
|
if (dragState && dragState.pointerId === e.pointerId) {
|
|
endDrag(card);
|
|
}
|
|
});
|
|
|
|
grid.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function moveItem(fromIndex, toIndex) {
|
|
const items = upcomingItems.slice();
|
|
const [moved] = items.splice(fromIndex, 1);
|
|
items.splice(toIndex, 0, moved);
|
|
renderUpcoming(items);
|
|
persistOrder(items);
|
|
}
|
|
|
|
async function showNext(index) {
|
|
const assetId = upcomingItems[index].id;
|
|
try {
|
|
const resp = await fetch('/api/queue/promote', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ asset_id: assetId }),
|
|
});
|
|
if (!resp.ok) {
|
|
throw new Error(await resp.text());
|
|
}
|
|
} catch (e) {
|
|
showStatus(false, e.message);
|
|
}
|
|
loadQueue(); // always refetch the authoritative order rather than guessing locally
|
|
}
|
|
|
|
async function persistOrder(items) {
|
|
try {
|
|
const resp = await fetch('/api/queue/reorder', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ queue: items.map((item) => item.id) }),
|
|
});
|
|
if (!resp.ok) {
|
|
throw new Error(await resp.text());
|
|
}
|
|
} catch (e) {
|
|
showStatus(false, e.message);
|
|
loadQueue();
|
|
}
|
|
}
|
|
|
|
async function loadQueue() {
|
|
const currentEl = document.getElementById('current-thumb');
|
|
try {
|
|
const resp = await fetch('/api/queue');
|
|
if (!resp.ok) {
|
|
currentEl.innerHTML = '<p class="sub">Not available yet -- configure Immich and an album first.</p>';
|
|
renderUpcoming([]);
|
|
return;
|
|
}
|
|
const data = await resp.json();
|
|
currentEl.innerHTML = data.current
|
|
? `<img class="thumb" src="${data.current.thumbnail_url}">`
|
|
: '<p class="sub">Nothing displayed yet.</p>';
|
|
renderUpcoming(data.upcoming);
|
|
} catch (e) {
|
|
currentEl.innerHTML = '<p class="sub">Could not load.</p>';
|
|
}
|
|
}
|
|
|
|
loadQueue();
|
|
</script>
|
|
</body>
|
|
</html>
|