From 4b0d4467de6cec52664f372cbfd392d867e78a9e Mon Sep 17 00:00:00 2001
From: haslinghuis <mark@numloq.nl>
Date: Mon, 16 Jan 2023 00:14:08 +0100
Subject: [PATCH] Fix OSD (HD) display overflow on Android (#3241)

* Fix OSD (HD) display overflow on Android
* Add button for OSD tab orientation (Android)
---
 locales/en/messages.json | 3 +++
 src/css/tabs/osd.less    | 2 +-
 src/js/tabs/osd.js       | 8 ++++++++
 src/tabs/osd.html        | 3 +++
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/locales/en/messages.json b/locales/en/messages.json
index daf48c1f2d..c850a32f6b 100644
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -4839,6 +4839,9 @@
         "message": "Uploaded all {{length}} characters to the OSD"
     },
 
+    "osdToggleOrientation": {
+        "message": "Orientation"
+    },
     "osdSetupSave": {
         "message": "Save"
     },
diff --git a/src/css/tabs/osd.less b/src/css/tabs/osd.less
index 6f86dec4f7..bf33196ba3 100644
--- a/src/css/tabs/osd.less
+++ b/src/css/tabs/osd.less
@@ -541,7 +541,7 @@ button {
 @media all and (max-width: 575px) {
 	.tab-osd {
 		.osd-preview {
-			min-width: 100%;
+			width: fit-content;
 			order: 1;
 		}
 		.osd-feature {
diff --git a/src/js/tabs/osd.js b/src/js/tabs/osd.js
index 37ff434631..f778b3bd7e 100644
--- a/src/js/tabs/osd.js
+++ b/src/js/tabs/osd.js
@@ -2609,6 +2609,8 @@ osd.initialize = function(callback) {
         // must invoke before i18n.localizePage() since it adds translation keys for expected logo size
         LogoManager.init(FONT, SYM.LOGO);
 
+        $('div.btn.orientation').toggle(GUI.isCordova());
+
         // translate to user-selected language
         i18n.localizePage();
 
@@ -3281,6 +3283,8 @@ osd.initialize = function(callback) {
             self.analyticsChanges = {};
         });
 
+        $('a.orientation').on('click', () => screen.orientation.lock(screen.orientation.type.startsWith("portrait") ? "landscape" : "portrait"));
+
         // font preview window
         const fontPreviewElement = $('.font-preview');
 
@@ -3411,6 +3415,10 @@ osd.cleanup = function(callback) {
         OSD.GUI.fontManager.destroy();
     }
 
+    if (GUI.isCordova()) {
+        window.screen.orientation.lock("portrait");
+    }
+
     // unbind "global" events
     $(document).unbind('keypress');
     $(document).off('click', 'span.progressLabel a');
diff --git a/src/tabs/osd.html b/src/tabs/osd.html
index fe6b3268bb..6a37bca381 100644
--- a/src/tabs/osd.html
+++ b/src/tabs/osd.html
@@ -197,6 +197,9 @@ <h3 i18n="osdSetupCustomLogoInfoTitle"></h3>
 
                 <div class="supported hide">
                     <div class="content_toolbar" style="left:0;">
+                        <div class="btn orientation">
+                            <a class="orientation" href="#" i18n="osdToggleOrientation"></a>
+                        </div>
                         <div class="btn">
                             <a class="requires-max7456-font-device-detected fonts" id="fontmanager" href="#" i18n="osdSetupFontManager"></a>
                         </div>