From 948bbf74d11baf0a491782622b9dac53b90c87f4 Mon Sep 17 00:00:00 2001 From: "s0wlz (Matthias Puchstein)" Date: Wed, 11 Mar 2026 03:40:49 +0100 Subject: [PATCH] [refactor] further templating work --- .prettierignore | 3 +++ .prettierrc.json | 2 +- .../templates/overlay/browsersource.html.j2 | 24 ++++++++++--------- .../{countdown.style.j2 => countdown.css.j2} | 23 +++++++++++------- .../overlay/countdown/countdown.html.j2 | 18 ++++++++++---- .../{countdown.script.j2 => countdown.js.j2} | 12 +++++----- 6 files changed, 50 insertions(+), 32 deletions(-) create mode 100644 .prettierignore rename src-tauri/templates/overlay/countdown/{countdown.style.j2 => countdown.css.j2} (52%) rename src-tauri/templates/overlay/countdown/{countdown.script.j2 => countdown.js.j2} (58%) diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..937e342 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +src-tauri/templates/overlay/browsersource.html.j2 +**/*.css.j2 +**/*.js.j2 diff --git a/.prettierrc.json b/.prettierrc.json index bed4155..1c20d3e 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -2,7 +2,7 @@ "plugins": ["prettier-plugin-jinja-template"], "overrides": [ { - "files": ["*.j2"], + "files": ["**/*.j2"], "options": { "parser": "jinja-template" } diff --git a/src-tauri/templates/overlay/browsersource.html.j2 b/src-tauri/templates/overlay/browsersource.html.j2 index 61aad0d..b1882c4 100644 --- a/src-tauri/templates/overlay/browsersource.html.j2 +++ b/src-tauri/templates/overlay/browsersource.html.j2 @@ -1,18 +1,20 @@ - + + + - - + + {{ content }} - + diff --git a/src-tauri/templates/overlay/countdown/countdown.style.j2 b/src-tauri/templates/overlay/countdown/countdown.css.j2 similarity index 52% rename from src-tauri/templates/overlay/countdown/countdown.style.j2 rename to src-tauri/templates/overlay/countdown/countdown.css.j2 index 2a4d6b1..a81f9cc 100644 --- a/src-tauri/templates/overlay/countdown/countdown.style.j2 +++ b/src-tauri/templates/overlay/countdown/countdown.css.j2 @@ -1,27 +1,32 @@ +.countdown-item { + display: flex; +} .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; +{% for c in countdowns %} +#timer-{{ c.id }} { + font-size: {{ c.font_size }}rem; font-family: monospace; - color: {{ text_color }}; + color: {{ c.text_color }}; text-shadow: 2px 2px 4px black; } - -#icon { width: { icon_size }; height: { icon_size }; vertical-align: middle; margin-right: 0.5rem; } +#icon-{{ c.id }} { + width: {{ c.icon_size }}; + height: {{ c.icon_size }}; + vertical-align: middle; + margin-right: 0.5rem; +} +{% endfor %} diff --git a/src-tauri/templates/overlay/countdown/countdown.html.j2 b/src-tauri/templates/overlay/countdown/countdown.html.j2 index 0baf701..77802af 100644 --- a/src-tauri/templates/overlay/countdown/countdown.html.j2 +++ b/src-tauri/templates/overlay/countdown/countdown.html.j2 @@ -1,10 +1,18 @@
{% for c in countdowns %} -
- {% if c.icon %}{% endif %} - - {{ c.remaining }} - +
+ {% if c.icon %} + {{ c.name }} + {% endif %} + + {{ c.remaining }} +
{% endfor %}
diff --git a/src-tauri/templates/overlay/countdown/countdown.script.j2 b/src-tauri/templates/overlay/countdown/countdown.js.j2 similarity index 58% rename from src-tauri/templates/overlay/countdown/countdown.script.j2 rename to src-tauri/templates/overlay/countdown/countdown.js.j2 index 81b7024..d8f210a 100644 --- a/src-tauri/templates/overlay/countdown/countdown.script.j2 +++ b/src-tauri/templates/overlay/countdown/countdown.js.j2 @@ -1,14 +1,14 @@ const hideIdle = {{ hide_idle | lower }}; -const es = new EventSource('/sse/countdown/{{ id }}'); -es.addEventListener('tick', e => { +const es = new EventSource('/sse/group/{{ id }}'); +es.addEventListener('countdown-tick', e => { const {id, remaining} = JSON.parse(e.data); - document.getElementById('countdown-' + id).innerText = remaining; + document.getElementById('timer-' + id).textContent = remaining; }); -es.AddEventListener('state', e => { +es.addEventListener('countdown-state', e => { const {id, state} = JSON.parse(e.data); if (hideIdle) { - document.getElementById('countdown-' + id).style.display = state === 'idle' ? 'none' : ''; + document.getElementById('countdown-' + id).style.display = state === 'Idle' ? 'none' : ''; } -} +}); es.addEventListener('reload', () => location.reload()); es.onerror = () => setTimeout(() => location.reload(), 3000);