From a5fad5cc68cd9dd0f3a9170a3064935d2f47032b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=ADguel=20=C3=81ngel=20Mulero=20Mart=C3=ADnez?=
 <mcgivergim@gmail.com>
Date: Fri, 20 Jan 2023 08:44:23 +0100
Subject: [PATCH] Add zoom option to make OSD big in small screens (#3252)

---
 locales/en/messages.json |  7 ++++---
 src/css/tabs/osd.less    | 14 +++++++++++++-
 src/js/tabs/osd.js       | 16 ++++++++--------
 src/tabs/osd.html        |  7 ++++---
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/locales/en/messages.json b/locales/en/messages.json
index 34baf62a..4ea7fca0 100644
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -4740,6 +4740,10 @@
         "message": "Font {{fontName}}",
         "description": "Content of the selector for the OSD Font in the preview"
     },
+    "osdSetupPreviewCheckZoom": {
+        "message": "Zoom",
+        "description": "Check to select a bigger display of the OSD preview in small screens"
+    },
     "osdSetupVideoFormatTitle": {
         "message": "Video Format"
     },
@@ -4842,9 +4846,6 @@
         "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 da48e01a..97779391 100644
--- a/src/css/tabs/osd.less
+++ b/src/css/tabs/osd.less
@@ -248,6 +248,17 @@
 		}
 
 	}
+	.osd-preview-zoom {
+		width: max-content !important;
+		padding-right: 1em;
+	}
+	.osd-preview-zoom-group {
+		display: none;
+	}
+	.osd-preview-zoom-selector {
+		margin-left: 5px;
+		vertical-align: text-bottom;
+	}
 	.char.mouseover {
 		background: rgba(255,255,255,0.4);
 	}
@@ -541,8 +552,9 @@ button {
 @media all and (max-width: 575px) {
 	.tab-osd {
 		.osd-preview {
-			width: fit-content;
+			min-width: 100%;
 			order: 1;
+			width: fit-content;
 		}
 		.osd-feature {
 			order: 2;
diff --git a/src/js/tabs/osd.js b/src/js/tabs/osd.js
index f778b3bd..73f9ac9c 100644
--- a/src/js/tabs/osd.js
+++ b/src/js/tabs/osd.js
@@ -2609,8 +2609,6 @@ 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();
 
@@ -2985,6 +2983,14 @@ osd.initialize = function(callback) {
                     // Hide custom if not used
                     $('.osdfont-selector option[value=-1]').toggle(osdFontSelectorElement.val() === -1);
 
+                    // Zoom option for the preview only for mobile devices
+                    if (GUI.isCordova()) {
+                        $('.osd-preview-zoom-group').css({display: 'inherit'});
+                        $('#osd-preview-zoom-selector').on('change', function() {
+                            $('.tab-osd .osd-preview').toggleClass('osd-preview-zoom', this.checked);
+                        });
+                    }
+
                     // display fields on/off and position
                     const $displayFields = $('#element-fields').empty();
                     let enabledCount = 0;
@@ -3283,8 +3289,6 @@ 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');
 
@@ -3415,10 +3419,6 @@ 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 6a37bca3..3d4f0327 100644
--- a/src/tabs/osd.html
+++ b/src/tabs/osd.html
@@ -46,6 +46,10 @@
                                    <select class="osdfont-selector">
                                        <!-- Populated at runtime -->
                                    </select>
+                                   <span class="osd-preview-zoom-group">
+                                       <input type="checkbox" id="osd-preview-zoom-selector" class="osd-preview-zoom-selector"/>
+                                       <label for="osd-preview-zoom-selector" i18n="osdSetupPreviewCheckZoom" />
+                                   </span>
                                </span>
                                 </div>
                             </div>
@@ -197,9 +201,6 @@
 
                 <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>