From e3acc2a2d6725ce0ff1f68efda45be3fa8c17f03 Mon Sep 17 00:00:00 2001
From: IgorA100 <igora100@gmail.com>
Date: Thu, 10 Apr 2025 22:57:15 +0300
Subject: [PATCH] Move "FontFaceObserver" to the top (functions.php)

Now we don't have to wait for the DOM to fully load (without media content) to change the class of elements.
Now after loading the font, we write the style for displaying the font in the DOM.
---
 web/skins/classic/includes/functions.php | 59 +++++++++++-------------
 1 file changed, 28 insertions(+), 31 deletions(-)

diff --git a/web/skins/classic/includes/functions.php b/web/skins/classic/includes/functions.php
index d9b8b5c0e..1ad7655fc 100644
--- a/web/skins/classic/includes/functions.php
+++ b/web/skins/classic/includes/functions.php
@@ -65,6 +65,24 @@ if (defined('ZM_WEB_FAVICON')) {
 ';
 }
 echo output_link_if_exists(array('css/base/material-icons.css'));
+echo output_script_if_exists(array(
+  'js/fontfaceobserver.standalone.js',
+));
+
+?>
+  <script nonce="<?php echo $cspNonce; ?>">
+    const fontMaterialIcons = new FontFaceObserver("Material Icons", {weight: 400});
+    fontMaterialIcons.load(null, 30000).then(function() {
+      console.log("Material Icons is loaded");
+      var _style_ = document.createElement('style');
+      _style_.innerHTML = `.material-icons {display: inline-block !important;}`;
+       document.querySelector('head').prepend(_style_);
+    }, function() {
+      console.log("Material Icons is NOT loaded");
+    });
+  </script>
+<?php
+
 echo output_cache_busted_stylesheet_links(array(
   'css/reset.css',
   'css/font-awesome.min.css',
@@ -761,7 +779,7 @@ function getCycleHTML($view) {
     $class = $view == 'cycle' ? ' selected' : '';
     $result .= '<li id="getCycleHTML" class="nav-item"><a class="nav-link'.$class.'" href="?view=watch&amp;cycle=true">' .translate('Cycle'). '</a></li>'.PHP_EOL;
   }
-  
+
   return $result;
 }
 
@@ -769,12 +787,12 @@ function getCycleHTML($view) {
 function getMontageHTML($view) {
   global $user;
   $result = '';
-  
+
   if (canView('Stream') and count($user->viewableMonitorIds())) {
     $class = $view == 'montage' ? ' selected' : '';
     $result .= '<li id="getMontageHTML" class="nav-item"><a class="nav-link'.$class.'" href="?view=montage">' .translate('Montage'). '</a></li>'.PHP_EOL;
   }
-  
+
   return $result;
 }
 
@@ -801,42 +819,42 @@ function getMontageReviewHTML($view) {
     $class = $view == 'montagereview' ? ' selected' : '';
     $result .= '<li id="getMontageReviewHTML" class="nav-item"><a class="nav-link'.$class.'" href="?view=montagereview' .$live. '">'.translate('MontageReview').'</a></li>'.PHP_EOL;
   }
-  
+
   return $result;
 }
 
 // Returns the html representing the Montage menu item
 function getSnapshotsHTML($view) {
   $result = '';
-  
+
   if (defined('ZM_FEATURES_SNAPSHOTS') and ZM_FEATURES_SNAPSHOTS and canView('Snapshots')) {
     $class = $view == 'snapshots' ? ' selected' : '';
     $result .= '<li id="getSnapshotsHTML" class="nav-item"><a class="nav-link'.$class.'" href="?view=snapshots">' .translate('Snapshots'). '</a></li>'.PHP_EOL;
   }
-  
+
   return $result;
 }
 
 function getReportsHTML($view) {
   $result = '';
-  
+
   if (canView('Events')) {
     $class = ($view == 'reports' or $view == 'report') ? ' selected' : '';
     $result .= '<li id="getReportsHTML" class="nav-item"><a class="nav-link'.$class.'" href="?view=reports">'.translate('Reports').'</a></li>'.PHP_EOL;
   }
-  
+
   return $result;
 }
 
 // Returns the html representing the Audit Events Report menu item
 function getRprtEvntAuditHTML($view) {
   $result = '';
-  
+
   if ( canView('Events') ) {
     $class = $view == 'report_event_audit' ? ' selected' : '';
     $result .= '<li id="getRprtEvntAuditHTML" class="nav-item"><a class="nav-link'.$class.'" href="?view=report_event_audit">'.translate('ReportEventAudit').'</a></li>'.PHP_EOL;
   }
-  
+
   return $result;
 }
 
@@ -994,27 +1012,6 @@ function xhtmlFooter() {
   global $skin;
   global $basename;
 
-  echo output_script_if_exists(array(
-    'js/fontfaceobserver.standalone.js',
-  ));
-?>
-  <script nonce="<?php echo $cspNonce; ?>">
-    const fontMaterialIcons = new FontFaceObserver("Material Icons", {weight: 400});
-    fontMaterialIcons.load(null, 30000).then(function() {
-      console.log("Material Icons is loaded");
-      document.querySelectorAll(".material-icons").forEach(function(el) {
-        el.style.display = "inline-block";
-      });
-    }, function() {
-      console.log("Material Icons is NOT loaded");
-      // This code doesn't make sense, because if the Font hasn't loaded, then there's nothing to display. I left it because it was there before.
-      document.querySelectorAll(".material-icons").forEach(function(el) {
-        el.style.display = "inline-block";
-      });
-    });
-  </script>
-<?php
-
   $skinJsPhpFile = getSkinFile('js/skin.js.php');
   $viewJsFile = getSkinFile('views/js/'.$basename.'.js');
   $viewJsPhpFile = getSkinFile('views/js/'.$basename.'.js.php');