From afbb18a8acdc1f3c2c3293d2cf8f42a86091a0c6 Mon Sep 17 00:00:00 2001
From: Florian Heft <heft@synyx.de>
Date: Wed, 2 Jun 2021 16:13:31 +0200
Subject: [PATCH 1/3] Persist image media type

---
 pkg/project/fs.go      | 1 +
 pkg/project/project.go | 1 +
 pkg/web/api_test.go    | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/pkg/project/fs.go b/pkg/project/fs.go
index ae1175b..a60c457 100644
--- a/pkg/project/fs.go
+++ b/pkg/project/fs.go
@@ -131,6 +131,7 @@ func (fr *FilesystemRepository) SaveImage(slug, contentType string, data []byte)
 		return Project{}, err
 	}
 	project.FilePath = filename
+	project.FileType = contentType
 	project, err = fr.SaveProject(slug, project)
 	if err != nil {
 		return Project{}, err
diff --git a/pkg/project/project.go b/pkg/project/project.go
index 84552d8..cbed598 100644
--- a/pkg/project/project.go
+++ b/pkg/project/project.go
@@ -24,6 +24,7 @@ type Project struct {
 	Slug       string     `json:"slug"`
 	Name       string     `json:"name"`
 	FilePath   string     `json:"file-path" edn:"file-path"`
+	FileType   string     `json:"fileType" edn:"fileType"`
 	Dimensions Dimensions `json:"dimensions"`
 	Slides     []Slide    `json:"slides"`
 }
diff --git a/pkg/web/api_test.go b/pkg/web/api_test.go
index 908469c..55b44c4 100644
--- a/pkg/web/api_test.go
+++ b/pkg/web/api_test.go
@@ -230,7 +230,8 @@ func TestAPI_updateProjectImage(t *testing.T) {
 		header.Add("Content-Type", "image/bmp")
 		resp := tc.RequestWithHeaders("PUT", "/api/tales/foo/image", data, header)
 
-		AssertProjectResponse(t, resp, project.Project{Slug: "foo", Name: "Bar", FilePath: "foo.bmp"}, 202)
+		AssertProjectResponse(t, resp, project.Project{Slug: "foo", Name: "Bar", FilePath: "foo.bmp",
+			FileType: "image/bmp"}, 202)
 	})
 	t.Run("invalid content type", func(t *testing.T) {
 		tc := NewTestClient(t)

From 56f7ffe3fae77f743dd02fd6240b61b5dd1f031d Mon Sep 17 00:00:00 2001
From: Florian Heft <heft@synyx.de>
Date: Wed, 2 Jun 2021 16:14:41 +0200
Subject: [PATCH 2/3] Only allow image files when uploading poster

* Filter the file selection dialog to only
  show image files
---
 js/editor/upload.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/editor/upload.js b/js/editor/upload.js
index 2f87d2b..7cb293b 100644
--- a/js/editor/upload.js
+++ b/js/editor/upload.js
@@ -8,6 +8,7 @@ export let uploader = tale => {
     h("input", {
       attrs: {
         type: "file",
+        accept: "image/*",
       },
       on: {
         change: ev => {

From 93e25600d6f47c315a91abe828024464fe4401f7 Mon Sep 17 00:00:00 2001
From: Florian Heft <heft@synyx.de>
Date: Wed, 2 Jun 2021 16:16:47 +0200
Subject: [PATCH 3/3] Fix blurry SVG rendering in Firefox

* use `object` elements instead of `img`s
  to display poster images.
* Current versions of Firefox render very large
  SVG images blurry when they are embedded
  as img elements. Embedding them as objects
  fixes this.
---
 js/editor/index.js    | 8 ++++----
 js/presenter/index.js | 5 +++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/js/editor/index.js b/js/editor/index.js
index 69cd973..43b1691 100644
--- a/js/editor/index.js
+++ b/js/editor/index.js
@@ -130,9 +130,9 @@ export function notFound() {
   return h("div", "Unwritten tale…");
 }
 
-function poster(url) {
-  return h("img.poster", {
-    attrs: { src: url },
+function poster(url, type) {
+  return h("object.poster", {
+    attrs: { data: url, type },
   });
 }
 
@@ -239,7 +239,7 @@ let navigator = (tale, transformMatrix, cameraPosition, activeSlide) => {
       },
     },
     [
-      poster(`/editor/${tale.slug}/${tale["file-path"]}`),
+      poster(`/editor/${tale.slug}/${tale["file-path"]}`, tale.fileType),
       layer(
         {
           on: {
diff --git a/js/presenter/index.js b/js/presenter/index.js
index b5aa18e..be4f02d 100644
--- a/js/presenter/index.js
+++ b/js/presenter/index.js
@@ -40,9 +40,10 @@ export let presenter = tale => {
           },
         },
       },
-      h("img", {
+      h("object", {
         attrs: {
-          src: `/editor/${tale.slug}/${tale["file-path"]}`,
+          data: `/editor/${tale.slug}/${tale["file-path"]}`,
+          type: tale.fileType,
         },
       }),
     ),