commit ab06d58c0a3b9a2d3bc13aa85d47079606b1b5a0
parent 6cc0617efb6201380ace4c26983b47922ccedffd
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Mon, 17 Jun 2024 21:55:59 +0200
feat: set placeholder height for thumbnails and allow to toggle them
Diffstat:
2 files changed, 31 insertions(+), 1 deletion(-)
diff --git a/template.html b/template.html
@@ -35,6 +35,10 @@
border-width: 1px;
padding: 0.25em;
}
+ .thumbnails {
+ width: 100%;
+ aspect-ratio: 4/3;
+ }
</style>
<script>
// Embed Youtube Video
@@ -81,11 +85,32 @@
toggleTheme(set_mode = 0);
}
}
+ // Disable images
+ function setThumbnails() {
+ if (sessionStorage.getItem("disable-thumbnails") == 1) {
+ document.querySelectorAll(".thumbnails").forEach(function(tn) {
+ tn.style = "display:none;";
+ });
+ } else {
+ document.querySelectorAll(".thumbnails").forEach(function(tn) {
+ tn.style = "display:unset;";
+ });
+ }
+ }
+ function toggleThumbnails() {
+ if (sessionStorage.getItem("disable-thumbnails") == 1) {
+ sessionStorage.setItem("disable-thumbnails", 0);
+ } else {
+ sessionStorage.setItem("disable-thumbnails", 1);
+ }
+ setThumbnails();
+ }
+
</script>
</head>
- <body class="list dark" onload="initialTheme();">
+ <body class="list dark" onload="initialTheme();setThumbnails();">
<main class="main">
<h1>Videos</h1>
@@ -98,6 +123,7 @@
Dark Mode
</button>
</a>
+ <a href="javascript:toggleThumbnails();"><button class="button">🖼 Thumbnails</button></a>
<a href="reload.php"><button class="button">⟳ Refresh</button></a><br>
<form action="https://www.youtube.com/results" method="GET" style="width:100%;">
diff --git a/yt.R b/yt.R
@@ -99,10 +99,12 @@ for (chan in as.numeric(channels)) {
"<h2>",
"<a href=\"", data[ent, "url"], "\" class=\"hyperlink\">",
data[ent, "title"], "</a></h2>\n",
+ "<div class=\"thumbnails\">\n",
"<img src=\"", data[ent, "img"], "\"",
" id=\"thumbnail_", ent, "\" loading=\"lazy\"",
" onclick=embed_yt(\"", ent, "\",\"", data[ent, "vid"], "\")",
">\n",
+ "</div>\n",
"<p>",
"<a class=\"button\" href=\"./videos_", ent, ".html\">",
data[ent, "author"], "</a>",
@@ -123,10 +125,12 @@ entry <- paste0("<article class='post-entry' id='entry_", seq_len(nrow(data)), "
"<h2>",
"<a href=\"", data[, "url"], "\" class=\"hyperlink\">",
data[, "title"], "</a></h2>\n",
+ "<div class=\"thumbnails\">\n",
"<img src=\"", data[, "img"], "\"",
" id=\"thumbnail_", seq_len(nrow(data)), "\" loading=\"lazy\"",
" onclick=embed_yt(\"", seq_len(nrow(data)), "\",\"", data[, "vid"], "\")",
">\n",
+ "</div>\n",
"<p>",
"<a class=\"button\" href=\"./videos_", entry_id, ".html\">",
data[, "author"], "</a> on ", data[, "date"], " ", data[, "time"],
