From 4b2c9cfa23d043353bedb3f9673627ef4e50bb3f Mon Sep 17 00:00:00 2001 From: Christian Heller <c.heller@plomlompom.de> Date: Sun, 24 Nov 2024 16:29:27 +0100 Subject: [PATCH] Improve templating modularity. --- templates/_base.tmpl | 20 ++++++++++++++++++++ templates/_macros.tmpl | 13 +++++++++++++ templates/playlist.tmpl | 27 ++++++++++++++------------- templates/queries.tmpl | 12 ++++++------ templates/results.tmpl | 12 ++++++------ templates/video.tmpl | 14 ++++++-------- templates/videos.tmpl | 12 ++++++------ templates/yt_video.tmpl | 13 ++++++------- ytplom/misc.py | 8 +++----- 9 files changed, 80 insertions(+), 51 deletions(-) create mode 100644 templates/_base.tmpl create mode 100644 templates/_macros.tmpl diff --git a/templates/_base.tmpl b/templates/_base.tmpl new file mode 100644 index 0000000..8839067 --- /dev/null +++ b/templates/_base.tmpl @@ -0,0 +1,20 @@ +{% import '_macros.tmpl' as macros %} +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> +<script> +{% block script %} +{% endblock %} +</script> +<style> +body { background-color: #aaaa00; } +{% block css %} +{% endblock %} +</style> +</head> +<body> +{% block body %} +{% endblock %} +</body> +</html> diff --git a/templates/_macros.tmpl b/templates/_macros.tmpl new file mode 100644 index 0000000..12b28df --- /dev/null +++ b/templates/_macros.tmpl @@ -0,0 +1,13 @@ +{% macro _link_if(cond, target) %}{% if cond %}<a href="/{{target}}">{% endif %}{{target}}{% if cond %}</a>{% endif %}{% endmacro %} + + +{% macro nav_head(selected="") %} +<p> +{{ _link_if("playlist" != selected, "playlist") }} +· +{{ _link_if("videos" != selected, "videos") }} +· +{{ _link_if("queries" != selected, "queries") }} +</p> +<hr /> +{% endmacro %} diff --git a/templates/playlist.tmpl b/templates/playlist.tmpl index 70aaa43..58c2b5b 100644 --- a/templates/playlist.tmpl +++ b/templates/playlist.tmpl @@ -1,7 +1,7 @@ -<html> -<head> -<meta charset="UTF-8"> -<script> +{% extends '_base.tmpl' %} + + +{% block script %} const RELOAD_INTERVAL_S = 10; const PATH_LAST_UPDATE = '/_last_playlist_update.json'; const MSG_SERVER_DOWN = 'Server seems to be unavailable.'; @@ -25,16 +25,18 @@ async function keep_updated() { setTimeout(keep_updated, RELOAD_INTERVAL_S * 1000); } window.onload = keep_updated; -</script> -<style> -body { background-color: #aaaaaa; } +{% endblock %} + + +{% block css %} table { width: 100%; } #status { text-align: center; font-weight: bold; } td.history { width: 50%; } -</style> -</head> -<body> -<p>playlist · <a href="/videos">videos</a> · <a href="/queries">queries</a></p> +{% endblock %} + + +{% block body %} +{{ macros.nav_head("playlist") }} <table> <tr><td id="status" colspan=2> {% if running %}{% if pause %}PAUSED{% else %}PLAYING{% endif %}{% else %}STOPPED{% endif %}:<br /> @@ -55,6 +57,5 @@ td.history { width: 50%; } </td></tr> {% endfor %} </table> -</body> -</html> +{% endblock %} diff --git a/templates/queries.tmpl b/templates/queries.tmpl index 6ba91cb..457f80e 100644 --- a/templates/queries.tmpl +++ b/templates/queries.tmpl @@ -1,7 +1,8 @@ -<html> -<meta charset="UTF-8"> -<body> -<p><a href="/playlist">playlist</a> · <a href="/videos">videos</a> · queries</p> +{% extends '_base.tmpl' %} + + +{% block body %} +{{ macros.nav_head("queries") }} <p>quota: {{quota_count}}/100000</p> <form action="/queries" method="POST" /> <input name="query" /> @@ -18,5 +19,4 @@ </tr> {% endfor %} </table> -</body> -</html> +{% endblock %} diff --git a/templates/results.tmpl b/templates/results.tmpl index db9d9a5..131d14e 100644 --- a/templates/results.tmpl +++ b/templates/results.tmpl @@ -1,7 +1,8 @@ -<html> -<meta charset="UTF-8"> -<body> -<p><a href="/playlist">playlist</a> · <a href="/videos">videos</a> · <a href="/queries">queries</a></p> +{% extends '_base.tmpl' %} + + +{% block body %} +{{ macros.nav_head() }} <p>query: {{query}}</p> <table> {% for video in videos %} @@ -19,5 +20,4 @@ </tr> {% endfor %} </table> -</body> -</html> +{% endblock %} diff --git a/templates/video.tmpl b/templates/video.tmpl index bcdaabb..54d005f 100644 --- a/templates/video.tmpl +++ b/templates/video.tmpl @@ -1,7 +1,8 @@ -<html> -<meta charset="UTF-8"> -<body> -<p><a href="/playlist">playlist</a> · <a href="/videos">videos</a> · <a href="/queries">queries</a></p> +{% extends '_base.tmpl' %} + + +{% block body %} +{{ macros.nav_head() }} <table> <tr><th>path:</th><td>{{file.rel_path}}</td></tr> <tr><th>YouTube ID:</th><td><a href="/yt_video/{{file.yt_id}}">{{file.yt_id}}</a></tr> @@ -13,7 +14,4 @@ {% endfor %} <input type="submit" /> </form> -</body> -</html> - - +{% endblock %} diff --git a/templates/videos.tmpl b/templates/videos.tmpl index 14c3a2f..5cbf47f 100644 --- a/templates/videos.tmpl +++ b/templates/videos.tmpl @@ -1,12 +1,12 @@ -<html> -<meta charset="UTF-8"> -<body> -<p><a href="/playlist">playlist</a> · videos · <a href="/queries">queries</a></p> +{% extends '_base.tmpl' %} + + +{% block body %} +{{ macros.nav_head("videos") }} <p>downloaded videos:</p> <ul> {% for video_id, path in videos %} <li><a href="/video/{{video_id}}">{{ path }}</a> {% endfor %} </ul> -</body> -</html> +{% endblock %} diff --git a/templates/yt_video.tmpl b/templates/yt_video.tmpl index 358cced..1ecb258 100644 --- a/templates/yt_video.tmpl +++ b/templates/yt_video.tmpl @@ -1,7 +1,8 @@ -<html> -<meta charset="UTF-8"> -<body> -<p><a href="/playlist">playlist</a> · <a href="/videos">videos</a> · <a href="/queries">queries</a></p> +{% extends '_base.tmpl' %} + + +{% block body %} +{{ macros.nav_head() }} <table> <tr><th>title:</th><td>{{video_data.title}}</td></tr> <tr><th>thumbnail:</th><td><img src="/thumbnails/{{video_data.id_}}.jpg" /></td></tr> @@ -19,6 +20,4 @@ </td> </tr> </table> -</body> -</html> - +{% endblock %} diff --git a/ytplom/misc.py b/ytplom/misc.py index 5d7a2f0..809787a 100644 --- a/ytplom/misc.py +++ b/ytplom/misc.py @@ -16,7 +16,7 @@ from urllib.parse import urlparse, parse_qs from urllib.request import urlretrieve from urllib.error import HTTPError # non-included libs -from jinja2 import Template +from jinja2 import Environment as JinjaEnv, FileSystemLoader as JinjaFSLoader from mpv import MPV # type: ignore from yt_dlp import YoutubeDL # type: ignore import googleapiclient.discovery # type: ignore @@ -594,6 +594,7 @@ class Server(HTTPServer): def __init__(self, downloads_db: DownloadsDb, *args, **kwargs) -> None: super().__init__(*args, **kwargs) + self.jinja = JinjaEnv(loader=JinjaFSLoader(PATH_TEMPLATES)) self.player = Player() self.downloads = downloads_db @@ -743,10 +744,7 @@ class TaskHandler(BaseHTTPRequestHandler): tmpl_name: PathStr, tmpl_ctx: TemplateContext ) -> None: - with open(path_join(PATH_TEMPLATES, tmpl_name), - 'r', encoding='utf8' - ) as templ_file: - tmpl = Template(str(templ_file.read())) + tmpl = self.server.jinja.get_template(tmpl_name) html = tmpl.render(**tmpl_ctx) self._send_http(bytes(html, 'utf8')) -- 2.30.2