mpuchstein/Owlerlay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[refactor] restructuring the templates WIP

Browse Source
This commit is contained in:
Matthias Puchstein
2026-03-11 02:51:06 +01:00
parent fdcb793322
commit 7298a8c8ff
7 changed files with 75 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/overlay.css
View File

@@ -1,12 +0,0 @@
body {
background: transparent;
margin: 0;
padding: 0;
}
#timer {
font-size: 16rem;
font-family: monospace;
color: white;
text-shadow: 2px 2px 4px black;
}

17
src-tauri/src/server/routes.rs
View File

@@ -1,13 +1,13 @@
use crate::app_state::AppState;
use crate::countdown::commands::build_snapshot_dtos;
use crate::countdown::events::AppEvent;
use axum::Json;
use axum::extract::{Path, Query, State};
use axum::response::sse::KeepAlive;
use axum::response::{
sse::{Event, Sse},
Html,
};
use axum::Json;
use std::sync::Arc;
use std::time::Duration;
use tokio_stream::wrappers::BroadcastStream;
@@ -22,13 +22,6 @@ pub async fn overlay_countdown(
State(state): State<Arc<AppState>>,
Query(q): Query<OverlayQuery>,
) -> Html<String> {
let css_version = tokio::fs::metadata("public/overlay.css")
.await
.ok()
.and_then(|m| m.modified().ok())
.and_then(|t| t.duration_since(std::time::UNIX_EPOCH).ok())
.map(|d| d.as_secs())
.unwrap_or(0);
let config = state
.overlay_configs
.lock()
@@ -46,7 +39,7 @@ pub async fn overlay_countdown(
let mut env = minijinja::Environment::new();
env.add_template(
"page",
include_str!("../../templates/overlay/countdown.html"),
include_str!("../../templates/overlay/countdown.html.j2"),
)
.unwrap();
let html = env
@@ -58,7 +51,6 @@ pub async fn overlay_countdown(
icon => config.icon,
text_color => config.text_color,
bg_color => config.bg_color,
css_version => css_version,
})
.unwrap();
Html(html)
@@ -121,7 +113,10 @@ pub async fn list_icons() -> Json<Vec<String>> {
if let Ok(mut entries) = tokio::fs::read_dir("public/icons").await {
while let Ok(Some(entry)) = entries.next_entry().await {
let path = entry.path();
if matches!(path.extension().and_then(|e| e.to_str()), Some("svg" | "png")) {
if matches!(
path.extension().and_then(|e| e.to_str()),
Some("svg" | "png")
) {
if let Some(filename) = path.file_name().and_then(|s| s.to_str()) {
names.push(filename.to_string());
}

18
src-tauri/templates/overlay/browsersource.html.j2 Normal file
View File

@@ -0,0 +1,18 @@
<head>
<meta charset="UTF-8">
<style>
body {
background: transparent;
margin: 0;
padding: 0;
}
{{ style }}
</style>
</head>
<body>
{{ content }}
<script>
{{ script }}
</script>
</body>
</html>

24
src-tauri/templates/overlay/countdown.html
View File

@@ -1,24 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/overlay.css?v={{ css_version }}">
<style>
body { background-color: {{ bg_color }}; }
#timer { color: {{ text_color }}; }
#icon { width: 3rem; height: 3rem; vertical-align: middle; margin-right: 0.5rem; }
</style>
</head>
<body>
<div id="display">
{% if icon %}<img id="icon" src="/static/icons/{{ icon }}" />{% endif %}
<span id="timer">{{ remaining }}</span>
</div>
<script>
const es = new EventSource('/sse/countdown/{{ id }}');
es.addEventListener('tick', e => { document.getElementById('timer').textContent = e.data; });
es.addEventListener('reload', () => location.reload());
es.onerror = () => setTimeout(() => location.reload(), 3000);
</script>
</body>
</html>

10
src-tauri/templates/overlay/countdown/countdown.html.j2 Normal file
View File

@@ -0,0 +1,10 @@
<div class="countdown-list {{ layout }}">
{% for c in countdowns %}
<div id="countdown-{{ c.id }}" class="countdown-item{% if hide_idle and c.state == 'Idle' %} hidden{% endif %}">
{% if c.icon %}<img ...>{% endif %}
<span id="timer-{{ c.id }}" style="font-size:{{ c.font_size }}rem; color:{{ c.text_color }}">
{{ c.remaining }}
</span>
</div>
{% endfor %}
</div>

14
src-tauri/templates/overlay/countdown/countdown.script.j2 Normal file
View File

@@ -0,0 +1,14 @@
const hideIdle = {{ hide_idle | lower }};
const es = new EventSource('/sse/countdown/{{ id }}');
es.addEventListener('tick', e => {
const {id, remaining} = JSON.parse(e.data);
document.getElementById('countdown-' + id).innerText = remaining;
});
es.AddEventListener('state', e => {
const {id, state} = JSON.parse(e.data);
if (hideIdle) {
document.getElementById('countdown-' + id).style.display = state === 'idle' ? 'none' : '';
}
}
es.addEventListener('reload', () => location.reload());
es.onerror = () => setTimeout(() => location.reload(), 3000);

27
src-tauri/templates/overlay/countdown/countdown.style.j2 Normal file
View File

@@ -0,0 +1,27 @@
.countdown-list.vertical {
flex-direction: column;
}
.countdown-list.horizontal {
flex-direction: row;
}
.countdown-item {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.countdown-item.hidden {
display: none;
}
#timer-{{ id }} {
font-size: {{ font_size }}rem;
font-family: monospace;
color: {{ text_color }};
text-shadow: 2px 2px 4px black;
}
#icon { width: { icon_size }; height: { icon_size }; vertical-align: middle; margin-right: 0.5rem; }