From b8f7e622bbee068ac9e6a96c2307dbc7d7b02b14 Mon Sep 17 00:00:00 2001
From: Laria Carolin Chabowski <laria@laria.me>
Date: Wed, 14 Oct 2020 22:52:21 +0200
Subject: Lazy load background image using XHR

We now don't immediately reload the reddit background image, as this delays
the initial page load quite a bit. Instead we trigger an XHR request on
page load to update the background image.
---
 main.go                                | 23 +++++++++++-
 reddit_background/reddit_background.go | 38 +++++++++++++++----
 template.html                          | 69 +++++++++++++++++++++++++++-------
 3 files changed, 107 insertions(+), 23 deletions(-)

diff --git a/main.go b/main.go
index e1ee16c..77944c0 100644
--- a/main.go
+++ b/main.go
@@ -1,6 +1,7 @@
 package main
 
 import (
+	"encoding/json"
 	"errors"
 	"flag"
 	"fmt"
@@ -61,6 +62,7 @@ func main() {
 
 	http.HandleFunc("/", startpage(*config, redditImageProvider))
 	http.HandleFunc("/bgimg", bgimg(redditImageProvider))
+	http.HandleFunc("/update-bgimg", updateBgimg(redditImageProvider))
 
 	if config.BackgroundSavepath != "" {
 		http.HandleFunc("/savebg", savebg(redditImageProvider, config.BackgroundSavepath))
@@ -70,7 +72,7 @@ func main() {
 }
 
 type TplData struct {
-	BgImage   *reddit_background.RedditImage
+	BgImage   *reddit_background.RedditImageForAjax
 	Weather   *weather.Weather
 	Links     []Link
 	CanSaveBg bool
@@ -91,7 +93,7 @@ func startpage(config Config, redditImageProvider *reddit_background.RedditImage
 		}
 
 		if err := tpl.Execute(rw, &TplData{
-			redditImageProvider.Image(),
+			redditImageProvider.Image().ForAjax(),
 			curWeather,
 			config.Links,
 			config.BackgroundSavepath != "",
@@ -118,6 +120,23 @@ func bgimg(redditImageProvider *reddit_background.RedditImageProvider) http.Hand
 	}
 }
 
+func updateBgimg(redditImageProvider *reddit_background.RedditImageProvider) http.HandlerFunc {
+	return func(rw http.ResponseWriter, req *http.Request) {
+		defer req.Body.Close()
+
+		updated := redditImageProvider.UpdateImage()
+
+		rw.Header().Set("Content-Type", "application/json")
+		json.NewEncoder(rw).Encode(struct {
+			Updated bool
+			Image   *reddit_background.RedditImageForAjax
+		}{
+			updated,
+			redditImageProvider.Image().ForAjax(),
+		})
+	}
+}
+
 func savebg(redditImageProvider *reddit_background.RedditImageProvider, savepath string) http.HandlerFunc {
 	return func(rw http.ResponseWriter, req *http.Request) {
 		defer req.Body.Close()
diff --git a/reddit_background/reddit_background.go b/reddit_background/reddit_background.go
index 67b25d0..60ba4ec 100644
--- a/reddit_background/reddit_background.go
+++ b/reddit_background/reddit_background.go
@@ -41,6 +41,23 @@ type RedditImage struct {
 	Mediatype string `json:"-"`
 }
 
+type RedditImageForAjax struct {
+	Permalink string
+	Title     string
+	Saved     bool
+}
+
+func (ri *RedditImage) ForAjax() *RedditImageForAjax {
+	if ri == nil {
+		return nil
+	}
+	return &RedditImageForAjax{
+		Permalink: ri.Permalink,
+		Title:     ri.Title,
+		Saved:     ri.Saved,
+	}
+}
+
 func GetRedditImage(maxsize int, subreddit string) (*RedditImage, error) {
 	subredditUrl := fmt.Sprintf("https://www.reddit.com/r/%s.json", subreddit)
 
@@ -211,21 +228,28 @@ func NewRedditImageProvider(maxsize int, subreddit string) *RedditImageProvider
 	}
 }
 
-func (rip *RedditImageProvider) Image() *RedditImage {
+func (rip *RedditImageProvider) UpdateImage() bool {
+	updated := false
+
 	rip.intervalRunner.Run(func() bool {
 		log.Printf("Getting new RedditImage")
 
-		var err error
-		rip.image, err = GetRedditImage(rip.maxsize, rip.subreddit)
+		image, err := GetRedditImage(rip.maxsize, rip.subreddit)
 
-		if err == nil {
-			log.Printf("Successfully loaded RedditImage")
-		} else {
+		if err != nil {
 			log.Printf("Failed loading RedditImage: %s", err)
+			return false
 		}
 
-		return err == nil
+		log.Printf("Successfully loaded RedditImage")
+		rip.image = image
+		updated = true
+		return true
 	})
 
+	return updated
+}
+
+func (rip *RedditImageProvider) Image() *RedditImage {
 	return rip.image
 }
diff --git a/template.html b/template.html
index ffb833c..4b20536 100644
--- a/template.html
+++ b/template.html
@@ -4,16 +4,17 @@
 		<title>Startpage</title>
 		<style type="text/css">
 			body {
-				background: grey;
+				background-color: grey;
+				background-image: none;
+				background-repeat: no-repeat;
+				background-position: center center;
+				background-attachment: fixed;
+
 				-moz-background-size: cover;
 				-o-background-size: cover;
 				background-size: cover;
+				transition: background-color 0.5s, background-image 0.5s;
 			}
-			{{ if .BgImage }}
-				body {
-					background: black url(/bgimg) no-repeat center center fixed;
-				}
-			{{ end }}
 			a {
 				color: #eee;
 				text-decoration: none;
@@ -76,7 +77,7 @@
 			}
 		</style>
 	</head>
-	<body>
+	<body {{ if .BgImage }} style="background-color: black; background-image: url(/bgimg);"{{ end }}>
 		{{ if .Weather }}
 			<div id="weather">
 				<a href="{{ .Weather.URL }}"><img src="{{ .Weather.Icon }}" alt="" /></a>
@@ -99,13 +100,53 @@
 				<div id="yr_no_credit">Weather forecast from Yr, delivered by the Norwegian Meteorological Institute and NRK</div>
 			{{ end }}
 
-			{{ if .BgImage }}
-				<span id="imageinfo">
-					<a href="http://reddit.com{{ .BgImage.Permalink }}">{{ .BgImage.Title }}</a>{{ if .CanSaveBg}}
-						| {{ if .BgImage.Saved }}saved{{ else }}<a href="/savebg">save</a>{{ end }}
-					{{ end }}
-				</span>
-			{{ end}}
+			<span id="imageinfo"></span>
 		</footer>
+
+		<script type="text/javascript">
+			var CanSaveBg = {{ .CanSaveBg }};
+
+			function link(href, text) {
+				var a = document.createElement("a");
+				a.href = href;
+				a.innerText = text;
+				return a;
+			}
+
+			function updateImageInfo(image) {
+				var imageinfo = document.getElementById("imageinfo");
+				imageinfo.innerHTML = "";
+				imageinfo.appendChild(link("http://reddit.com" + image.Permalink, image.Title));
+				if (CanSaveBg) {
+					imageinfo.appendChild(document.createTextNode(" | "));
+					if (image.Saved) {
+						imageinfo.appendChild(document.createTextNode("saved"));
+					} else {
+						imageinfo.appendChild(link("/savebg", "save"));
+					}
+				}
+			}
+
+			{{ if .BgImage }}
+				updateImageInfo({{ .BgImage }});
+			{{ end }}
+
+			var xhr = new XMLHttpRequest();
+			xhr.addEventListener("load", function () {
+				if (!xhr.response.Updated) {
+					return;
+				}
+
+				var bodyStyle = document.body.style;
+				bodyStyle.setProperty("background-image", "url(/bgimg?rand=" + Math.random() + ")");
+				bodyStyle.setProperty("background-color", "black");
+
+				updateImageInfo(xhr.response.Image);
+			});
+
+			xhr.open("GET", "/update-bgimg");
+			xhr.responseType = "json";
+			xhr.send();
+		</script>
 	</body>
 </html>
-- 
cgit v1.2.3-54-g00ecf