Show mp3 files correctly when added in a LP see BT#15416

main/document/showinframes.php

@@ -103,7 +103,7 @@ if (!$is_allowed_to_edit && !$is_visible) {
 }
 
 $pathinfo = pathinfo($header_file);
-$playerSupportedFiles = ['mp4', 'ogv', 'flv', 'm4v', 'webm'];
+$playerSupportedFiles = ['mp3', 'mp4', 'ogv', 'flv', 'm4v', 'webm'];
 $playerSupported = false;
 if (in_array(strtolower($pathinfo['extension']), $playerSupportedFiles)) {
     $playerSupported = true;
@@ -188,7 +188,7 @@ if (in_array(strtolower($pathinfo['extension']), $web_odf_supported_files)) {
             var topbarHeight = $("#topbar").height();
             $("#viewerJSContent").height((bodyHeight - topbarHeight));
         }
-        $(document).ready(function() {
+        $(function() {
             $(window).resize(resizeIframe());
         });
     </script>'
@@ -261,12 +261,11 @@ if ($originIsLearnpath) {
     Display::display_header('');
 }
 
-echo '<div class="text-center">';
-
 $file_url = api_get_path(WEB_COURSE_PATH).$courseInfo['path'].'/document'.$header_file;
 $file_url_web = $file_url.'?'.api_get_cidreq();
 
 if ($show_web_odf) {
+    echo '<div class="text-center">';
     $browser = api_get_navigator();
     $pdfUrl = api_get_path(WEB_LIBRARY_PATH).'javascript/ViewerJS/index.html#'.$file_url;
     if ($browser['name'] == 'Mozilla' && preg_match('|.*\.pdf|i', $header_file)) {
@@ -277,12 +276,11 @@ if ($show_web_odf) {
             src="'.$pdfUrl.'">
         </iframe>';
     echo '</div>';
+    echo '</div>';
 }
 
-echo '</div>';
-
 if ($playerSupported) {
-    echo DocumentManager::generateVideoPreview($file_url_web, $extension);
+    echo DocumentManager::generateMediaPreview($file_url_web, $extension);
 }
 
 if ($is_freemind_available) {

main/inc/lib/display.lib.php

@@ -2806,12 +2806,16 @@ HTML;
     {
         $defaultFeatures = ['playpause', 'current', 'progress', 'duration', 'tracks', 'volume', 'fullscreen', 'vrview'];
         $features = api_get_configuration_value('video_features');
+        $bowerJsFiles = [];
+        $bowerCSSFiles = [];
         if (!empty($features) && isset($features['features'])) {
             foreach ($features['features'] as $feature) {
                 if ($feature === 'vrview') {
                     continue;
                 }
                 $defaultFeatures[] = $feature;
+                $bowerJsFiles[] = "mediaelement/plugins/$feature/$feature.js";
+                $bowerCSSFiles[] = "mediaelement/plugins/$feature/$feature.css";
             }
         }
 
@@ -2821,11 +2825,24 @@ HTML;
             $translateHtml = '{type:"script", id:"_fr4", src:"'.api_get_path(WEB_AJAX_PATH).'lang.ajax.php?a=translate_html&'.api_get_cidreq().'"},';
         }
 
+        $counter = 10;
+        $extraMediaFiles = '';
+        foreach ($bowerJsFiles as $file) {
+            $extraMediaFiles .= '{type: "script", id: "media_'.$counter.'", src: "'.api_get_path(WEB_PUBLIC_PATH).'assets/'.$file.'"},';
+            $counter++;
+        }
+
+        foreach ($bowerCSSFiles as $file) {
+            $extraMediaFiles .= '{type: "stylesheet", id: "media_'.$counter.'", src: "'.api_get_path(WEB_PUBLIC_PATH).'assets/'.$file.'"},';
+            $counter++;
+        }
+
+
         $defaultFeatures = implode("','", $defaultFeatures);
         $frameReady = '
           $.frameReady(function() {
-            $(document).ready(function () {
-                $("video:not(.skip), audio:not(.skip)").mediaelementplayer({
+            $(function() {
+                $("video:not(.skip), audio:not(.skip)").mediaelementplayer({                    
                     pluginPath: "'.api_get_path(WEB_PUBLIC_PATH).'assets/mediaelement/build/",            
                     features: ["'.$defaultFeatures.'"],
                     success: function(mediaElement, originalNode, instance) {
@@ -2847,6 +2864,7 @@ HTML;
                 {type: "stylesheet", id: "_media2", src: "'.api_get_path(WEB_PUBLIC_PATH).'assets/mediaelement/build/mediaelementplayer.min.css"},                
                 {type: "stylesheet", id: "_media4", src: "'.api_get_path(WEB_PUBLIC_PATH).'assets/mediaelement/plugins/vrview/vrview.css"},
                 {type: "script", id: "_media4", src: "'.api_get_path(WEB_PUBLIC_PATH).'assets/mediaelement/plugins/vrview/vrview.js"},
+                '.$extraMediaFiles.'
                 '.$translateHtml.'
             ]
           });';

main/inc/lib/document.lib.php

@@ -3212,19 +3212,21 @@ class DocumentManager
      *
      * @return string
      */
-    public static function generateVideoPreview($file, $extension)
+    public static function generateMediaPreview($file, $extension)
     {
-        $type = '';
-        /*if ($extension != 'flv') {
-
-        }*/
-        //$type = "video/$extension";
-        //$fileInfo = parse_url($file);
-        //$type = self::file_get_mime_type(basename($fileInfo['path']));
-
-        $html = '<video id="myvideo" controls>';
-        $html .= '<source src="'.$file.'" >';
-        $html .= '</video>';
+        $id = api_get_unique_id();
+        switch ($extension) {
+            case 'mp3':
+                $document_data['file_extension'] = $extension;
+                $html = '<div style="margin: 0; position: absolute; top: 50%; left: 35%;">';
+                $html .= '<audio id="'.$id.'" controls="controls" src="'.$file.'" type="audio/mp3" ></audio></div>';
+                break;
+            default:
+                $html = '<video id="'.$id.'" controls>';
+                $html .= '<source src="'.$file.'" >';
+                $html .= '</video>';
+                break;
+        }
 
         return $html;
     }

main/lp/learnpath.class.php

@@ -13491,9 +13491,9 @@ EOD;
                 }
 
                 $documentPathInfo = pathinfo($document->getPath());
-                $jplayerSupportedFiles = ['mp4', 'ogv', 'flv', 'm4v'];
+                $mediaSupportedFiles = ['mp3', 'mp4', 'ogv', 'flv', 'm4v'];
                 $extension = isset($documentPathInfo['extension']) ? $documentPathInfo['extension'] : '';
-                $showDirectUrl = !in_array($extension, $jplayerSupportedFiles);
+                $showDirectUrl = !in_array($extension, $mediaSupportedFiles);
 
                 $openmethod = 2;
                 $officedoc = false;