From 7ecdbe3d4e84d061289b0ccc8c7faaed1df97f8e Mon Sep 17 00:00:00 2001
From: Florian Pritz <bluewind@xinu.at>
Date: Fri, 12 Jun 2020 14:46:21 +0200
Subject: thumbnail-view.js: Detect automatic image rotation in recent browsers

The default value has been changed to `from-image` and at least with
Firefox 76 and Chromium 83 this leads to double rotated images.
Disabling the automatic rotation with `image-orientation: none` in CSS
leads to incorrectly scaled images, (likely, but unverified) because the
width/height are returned incorrectly/rotated in jquery/javascript.
Whatever it may be, the easier fix is to just check for the new default
value and if the browser handles orientation automatically, we disable
our own code.

https://github.com/w3c/csswg-drafts/issues/3799

Signed-off-by: Florian Pritz <bluewind@xinu.at>
---
 NEWS                                  |  2 ++
 public_html/data/js/thumbnail-view.js | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/NEWS b/NEWS
index 05b22512f..dae445a7b 100644
--- a/NEWS
+++ b/NEWS
@@ -1,6 +1,8 @@
 This file lists major, incompatible or otherwise important changes, you should look at it after every update.
 
 NEXT
+ - Fix image orientation/rotation when viewing images with the
+   colorbox/lightbox in Firefox 76/Chromium 83.
 
 3.4.4 2020-04-19
  - Log PublicApiException to error log
diff --git a/public_html/data/js/thumbnail-view.js b/public_html/data/js/thumbnail-view.js
index dc2f547ab..eb9ee33ce 100644
--- a/public_html/data/js/thumbnail-view.js
+++ b/public_html/data/js/thumbnail-view.js
@@ -20,7 +20,19 @@ define(['jquery', 'underscore', 'multipaste', 'jquery.colorbox'], function ($, _
 			$(window).resize(_.bind(this.onResize, this));
 		},
 
+		browserHandlesImageOrientation: function () {
+			var testImg = $('<img>');
+			$('body').append(testImg);
+			var style = window.getComputedStyle(testImg.get(0));
+			var result = style.getPropertyValue('image-orientation')
+			console.log('Browser default image-orientation: ', result)
+			testImg.remove();
+			return result == 'from-image';
+		},
+
 		setupColorbox: function () {
+			var browserHandlesImageOrientation = PrivateFunctions.browserHandlesImageOrientation();
+
 			$(ui.colorbox).colorbox({
 				transistion: "none",
 				speed: 0,
@@ -36,7 +48,11 @@ define(['jquery', 'underscore', 'multipaste', 'jquery.colorbox'], function ($, _
 				close: '<span class="glyphicon glyphicon-remove"></span>',
 				loop: false,
 				orientation: function() {
-					return $(this).data('orientation');
+					if (browserHandlesImageOrientation) {
+						return 1;
+					} else {
+						return $(this).data('orientation');
+					}
 				},
 			});
 		},
-- 
cgit v1.2.3-24-g4f1b