Add zoom option to make OSD big in small screens (#3252)

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"
     },

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;

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');

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>