Merge pull request #4753 from IgorA100/patch-546864

Provide the user with up-to-date information about the supported version of audioMotionAnalyzer

web/lang/en_gb.php

@@ -121,6 +121,9 @@ $SLANG = array(
     'AttrTotalScore'        => 'Total Score',
     'AttrStartWeekday'      => 'Start Weekday',
     'AttrEndWeekday'        => 'End Weekday',
+    'AudioMotionVersionOK'  => 'Correct version installed "{AudioMotionVersionInstalled}"',
+    'AudioMotionVersionNotInstalled' => 'Requires audio motion analyzer version "{AudioMotionVersionRequired}" to be installed~~Download link: https://cdn.jsdelivr.net/npm/audiomotion-analyzer@{AudioMotionVersionRequired} or https://github.com/hvianna/audioMotion-analyzer/releases/tag/{AudioMotionVersionRequired}',
+    'AudioMotionVersionWrongVersion' => 'The required analyzer version is "{AudioMotionVersionRequired}", but you have "{AudioMotionVersionInstalled}" installed~~Download link: https://cdn.jsdelivr.net/npm/audiomotion-analyzer@{AudioMotionVersionRequired} or https://github.com/hvianna/audioMotion-analyzer/releases/tag/{AudioMotionVersionRequired}',
     'Auth'                  => 'Authentication',
     'AutoStopTimeout'       => 'Auto Stop Timeout',
     'AvgBrScore'            => 'Avg.<br/>Score',
@@ -1143,9 +1146,8 @@ None: No frames will be decoded, live view and thumbnails will not be available~
      Audio motion visualization can be displayed on the Montage, Watch, and Event pages.~~
      To do this, install the file "/skins/MySkin/assets/audioMotion-analyzer/src/audioMotion-analyzer.js".~~
      This file can be downloaded from the following links:~~
-     https://cdn.jsdelivr.net/npm/audiomotion-analyzer@4.5.4~~
-     https://github.com/hvianna/audioMotion-analyzer/releases~~
-     Currently supported version 4.5.4
+     https://cdn.jsdelivr.net/npm/audiomotion-analyzer@X.X.X where X.X.X is the version number~~
+     https://github.com/hvianna/audioMotion-analyzer/releases
     '
    ),
   'ZM_OPT_TRAINING' => array(

web/lang/ru_ru.php

@@ -136,6 +136,9 @@ $SLANG = array(
     'AttrStorageServer'    => 'Сервер для размещения хранилища', // Added - 2018-08-30
     'AttrSystemLoad'       => 'Нагрузка проц.',
     'AttrTotalScore'       => 'Сумм. оценка',
+    'AudioMotionVersionOK' => 'Установлена корректная версия "{AudioMotionVersionInstalled}"',
+    'AudioMotionVersionNotInstalled' => 'Требуется установка audio motion analyzer версии "{AudioMotionVersionRequired}"~~Ссылка для загрузки: https://cdn.jsdelivr.net/npm/audiomotion-analyzer@{AudioMotionVersionRequired} или https://github.com/hvianna/audioMotion-analyzer/releases/tag/{AudioMotionVersionRequired}',
+    'AudioMotionVersionWrongVersion' => 'Требуется версия анализатора "{AudioMotionVersionRequired}", но у Вас установлена "{AudioMotionVersionInstalled}"~~Ссылка для загрузки: https://cdn.jsdelivr.net/npm/audiomotion-analyzer@{AudioMotionVersionRequired} или https://github.com/hvianna/audioMotion-analyzer/releases/tag/{AudioMotionVersionRequired}',
     'Auth'                 => 'Авторизация',
     'Auto'                 => 'Авто',
     'AutoStopTimeout'      => 'Тайм-аут автоостановки',
@@ -1202,9 +1205,8 @@ $OLANG = array(
      На страницах живого просмотра, монтажа и просмотра события возможно отображение движения аудио.~~
      Для этого необходимо установить файл "/skins/MySkin/assets/audioMotion-analyzer/src/audioMotion-analyzer.js".~~
      Указанный файл можно скачать по ссылкам:~~
-     https://cdn.jsdelivr.net/npm/audiomotion-analyzer@4.5.4~~
-     https://github.com/hvianna/audioMotion-analyzer/releases~~
-     На данный момент поддердивается версия 4.5.4
+     https://cdn.jsdelivr.net/npm/audiomotion-analyzer@X.X.X где X.X.X это номер версии~~
+     https://github.com/hvianna/audioMotion-analyzer/releases
     '
    ),
   'FUNCTION_ANALYSIS_ENABLED' => array(

web/skins/classic/assets/audioMotion-analyzer/src/help.txt

@@ -1,6 +1,5 @@
 Audio motion visualization can be displayed on the Montage, Watch, and Event pages.
 To do this, install the file "/skins/MySkin/assets/audioMotion-analyzer/src/audioMotion-analyzer.js".
 This file can be downloaded from the following links:
-https://cdn.jsdelivr.net/npm/audiomotion-analyzer@4.5.4
+https://cdn.jsdelivr.net/npm/audiomotion-analyzer@X.X.X where X.X.X is the version number
 https://github.com/hvianna/audioMotion-analyzer/releases
-Currently, version 4.5.4 is supported.

web/skins/classic/includes/functions.php

@@ -1816,7 +1816,7 @@ function xhtmlFooter() {
   $skinJsFile = getSkinFile('js/skin.js');
 ?>
   <script nonce="<?php echo $cspNonce; ?>" src="<?php echo cache_bust($skinJsFile) ?>"></script>
-<?php if ( in_array( $basename, array( 'watch', 'montage', 'event' ) ) ) { ?>
+<?php if ( in_array( $basename, array( 'watch', 'montage', 'event', 'monitor' ) ) ) { ?>
   <script nonce="<?php echo $cspNonce; ?>" type="module" src="skins/<?php echo $skin ?>/js/audioMotionAnalyzer.js"></script>
 <?php } ?>
   </body>

web/skins/classic/js/audioMotionAnalyzer.js

@@ -3,6 +3,8 @@
 * IgorA100 2026
 */
 
+window.SUPPORTED_AUDIO_MOTION_ANALYZER_VERSION = '4.5.4';
+
 var AudioMotionAnalyzer = null;
 
 function checkAudioMotionEnabled() {
@@ -16,7 +18,13 @@ if (checkAudioMotionEnabled()) {
     } else {
       AudioMotionAnalyzer = window.AudioMotionAnalyzer;
     }
+    window.CURRENT_AUDIO_MOTION_ANALYZER_VERSION = AudioMotionAnalyzer.version;
+  }).catch(error => {
+    console.error('Failed to load audioMotion-analyzer module:', error);
+    window.CURRENT_AUDIO_MOTION_ANALYZER_VERSION = "LoadFailed";
   });
+} else {
+  window.CURRENT_AUDIO_MOTION_ANALYZER_VERSION = "NotInstalled";
 }
 //import {AudioMotionAnalyzer} from '../assets/audioMotion-analyzer/src/audioMotion-analyzer.js';
 

web/skins/classic/js/skin.js

@@ -3130,6 +3130,15 @@ const getAVStream = function(mid) {
   return (document.querySelector('#liveStream'+mid + ' video') || document.getElementById('liveStream'+mid));
 };
 
+const replaceDoubleTildeToBR = function(str) {
+  return (str.replaceAll("~~", "<br/>"));
+};
+
+const createClickableLink = function(text) {
+  const text1=text.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '<a target="_blank" href="$1">$1</a>');
+  return text1.replace(/(^|[^\/])(www\.[\S]+(\b|$))/gim, '$1<a target="_blank" href="http://$2">$2</a>');
+};
+
 // https://stackoverflow.com/a/69273090
 class ManageEventListener {
   #listeners = {}; // # in a JS class signifies private

web/skins/classic/views/js/monitor.js

@@ -528,8 +528,38 @@ function initPage() {
   if (!isMobile()) initThumbAnimation();
 
   manageChannelStream();
+  checkVerAudioMotion();
 } // end function initPage()
 
+async function checkVerAudioMotion() {
+  const result = await waitUntil(() => window.CURRENT_AUDIO_MOTION_ANALYZER_VERSION, 20000);
+  if (result === false) {
+    console.warn("Unable to obtain the current version number of audio motion analyzer.");
+    return;
+  }
+  const whatDisplayInfo = document.getElementById("WhatDisplayInfo");
+  whatDisplayInfo.classList.remove("text-success");
+  whatDisplayInfo.classList.remove("text-info");
+  whatDisplayInfo.classList.remove("text-danger");
+
+  if (window.SUPPORTED_AUDIO_MOTION_ANALYZER_VERSION === window.CURRENT_AUDIO_MOTION_ANALYZER_VERSION) {
+    whatDisplayInfo.innerHTML = applyTemplateAudioMotionTranslation(audioMotionVersionOK);
+    whatDisplayInfo.classList.add("text-success");
+  } else if (window.CURRENT_AUDIO_MOTION_ANALYZER_VERSION === "NotInstalled") {
+    whatDisplayInfo.innerHTML = applyTemplateAudioMotionTranslation(audioMotionVersionNotInstalled);
+    whatDisplayInfo.classList.add("text-info");
+  } else { //The versions do not match
+    whatDisplayInfo.innerHTML = applyTemplateAudioMotionTranslation(audioMotionVersionWrongVersion);
+    whatDisplayInfo.classList.add("text-danger");
+  }
+}
+
+function applyTemplateAudioMotionTranslation(str) {
+  str = str.replaceAll('{AudioMotionVersionInstalled}', window.CURRENT_AUDIO_MOTION_ANALYZER_VERSION);
+  str = str.replaceAll('{AudioMotionVersionRequired}', window.SUPPORTED_AUDIO_MOTION_ANALYZER_VERSION);
+  return createClickableLink(replaceDoubleTildeToBR(str));
+}
+
 function saveMonitorData(href = '') {
   const alertBlock = $j("#alertSaveMonitorData");
   const form_data = $j("#contentForm").serializeArray();

web/skins/classic/views/js/monitor.js.php

@@ -1,6 +1,9 @@
 const hasOnvif = <?php echo ZM_HAS_ONVIF ?>;
 const defaultAspectRatio = '<?php echo ZM_DEFAULT_ASPECT_RATIO ?>';
 const messageSavingDataWhenLeavingPage = '<?php echo translate('MessageSavingDataWhenLeavingPage') ?>';
+const audioMotionVersionOK = '<?php echo translate('AudioMotionVersionOK') ?>';
+const audioMotionVersionNotInstalled = '<?php echo translate('AudioMotionVersionNotInstalled') ?>';
+const audioMotionVersionWrongVersion = '<?php echo translate('AudioMotionVersionWrongVersion') ?>';
 
 <?php
 global $players;

web/skins/classic/views/monitor.php

@@ -1255,8 +1255,9 @@ echo htmlSelect('newMonitor[OutputContainer]', $videowriter_containers, $monitor
               <label><?php echo translate('Show'); echo makeHelpLink('OPTIONS_WHATTODISPLAY') ?> </label>
               <?php if (defined('AUDIO_MOTION_ENABLED') && AUDIO_MOTION_ENABLED)
                       echo htmlSelect('newMonitor[WhatDisplay]', $whatDisplay, $monitor->WhatDisplay());
-	                else
-	                  echo '<span class="text-info">' . translate('RequiresAudioMotionEnabled') . '</span>';
+                    else
+                      echo '<span class="text-info">' . translate('RequiresAudioMotionEnabled') . '</span>';
+                    echo '<div id="WhatDisplayInfo" class="form-text"></div>';
               ?>
             </li>
             <li class="RTSPServer">