[TikiWiki-commits] [Git][tikiwiki/tiki][24.x] [BP][FIX] Tracker field files: fixed modal for audio files

Merci Jacob pushed to branch 24.x at Tiki Wiki CMS Groupware / Tiki


Commits:
116bdd15 by Merci Jacob at 2025-12-12T19:26:11+00:00
[BP][FIX] Tracker field files: fixed modal for audio files
---
* fix linter

* [BP][FIX] Tracker field files: fixed modal for audio files

Commits:
* [FIX] Files tracker field: used colorbox to display audio and video files

See merge request tikiwiki/tiki!3950

See merge request tikiwiki/tiki!9226

- - - - -


4 changed files:

- lib/core/Tracker/Field/Files.php
- lib/jquery_tiki/tiki-jquery.js
- lib/mime/mimetypes.php
- templates/trackerinput/files.tpl


Changes:

=====================================
lib/core/Tracker/Field/Files.php
=====================================
@@ -370,7 +370,6 @@ class Tracker_Field_Files extends Tracker_Field_Abstract implements Tracker_Fiel
         global $prefs;
         global $mimetypes;
         global $tikipath;
-        
 
         include('lib/mime/mimetypes.php');
         $galleryId = (int)$this->getOption('galleryId');
@@ -541,40 +540,32 @@ class Tracker_Field_Files extends Tracker_Field_Abstract implements Tracker_Fiel
                     $viewicon = smarty_function_icon(['name' => 'view'], $smarty->getEmptyInternalTemplate());
 
                     if ($file['filetype'] == $mimetypes["pdf"] || (PDFHelper::canConvertToPDF($file['filetype']) && $prefs['fgal_convert_documents_pdf'] == 'y')) {
-
                         if ($pdfjsIsInstalled && $prefs['fgal_pdfjs_feature'] == 'y') {
                             $ret .= " <a href='tiki-display.php?fileId=" . $file['fileId']
                                 . "' target='_blank' class='tips' title='Preview: " . $file['filename'] . "'>
                                 $viewicon
                             </a>";
                         }
-                        
-                    } elseif ($file['filetype'] == $mimetypes['mp3'] || $file['filetype'] == $mimetypes['oga']) {
+                    } elseif ($this->isMimeType($mimetypes, $file['filetype'], ['mp3', 'oga', 'webm', 'mp4', 'wmv', 'ogv'])) {
                         global $base_url;
                         $src = smarty_modifier_sefurl($file['fileId'], 'display');
                         $fileurl = $base_url . $src;
 
-                        //Audio preview modal
-                        $audiomodal = '
-                            <div class="modal fade" id="audioModal' . $fileId . '" tabindex="-1" role="dialog"  aria-hidden="true">
-                                <div class="modal-dialog modal-dialog-centered" role="document">
-                                    <div class="modal-content">
-                                        <div class="modal-body">
-                                                <audio controls style="width : 100%">
-                                                    <source src="'.$fileurl.'" type="audio/mpeg">
-                                                </audio>
-                                        </div>
-                                        <div class="modal-footer">
-                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>';
-
-                        $ret .= $audiomodal . " <a type='button' href='' title='preview' data-toggle='modal' data-backdrop='false' data-target='#audioModal$fileId' >
-                            $viewicon
-                        </a>";
-
+                        $ret .= "<div style='display:none'>
+                            <div id='inline-file-$fileId'>";
+                        if ($this->isMimeType($mimetypes, $file['filetype'], ['mp3', 'oga'])) {
+                            $tag = 'audio';
+                            $style = "data-box-width='35%' data-box-height='20%'";
+                        } else {
+                            $tag = 'video';
+                            $style = '';
+                        }
+                        $ret .= "<{$tag} controls style='width : 100%'>
+                                    <source src='{$fileurl}' type='{$file['filetype']}'>
+                                </{$tag}>
+                            </div>
+                        </div>
+                        <a class='cboxInlineMedia' $style title='{$tag} preview' href='#inline-file-$fileId'>$viewicon</a>";
                     } else {
                         $dataAttributes = [];
 
@@ -596,6 +587,16 @@ class Tracker_Field_Files extends Tracker_Field_Abstract implements Tracker_Fiel
         return $ret;
     }
 
+    private function isMimeType(array $mimes, string $fileType, array $extensions): bool
+    {
+        foreach ($extensions as $ext) {
+            if ($mimes[$ext] == $fileType) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     public function handleSave($value, $oldValue)
     {
         $new = array_diff(explode(',', $value), explode(',', $oldValue));
@@ -730,7 +731,7 @@ class Tracker_Field_Files extends Tracker_Field_Abstract implements Tracker_Fiel
             $url = smarty_modifier_sefurl($file['fileId'], 'file');
             $result .= smarty_modifier_iconify($url, $file['filetype'], $file['fileId'], 1);
             $result .= ' <a href="' . $url . '">' . smarty_modifier_escape($file['name']) . '</a>';
-            $result .= ' <a href="' . $url . '&amp;display" target="_blank" class="tips cboxElement" title="Preview" data-content="'.smarty_modifier_escape($file['name']).'" data-box="box-3" data-original-title="Preview">';
+            $result .= ' <a href="' . $url . '&amp;display" target="_blank" class="tips cboxElement" title="Preview" data-content="' . smarty_modifier_escape($file['name']) . '" data-box="box-3" data-original-title="Preview">';
             $result .= '<span class="icon icon-view fas fa-search-plus"></span></a><br/>';
         }
 


=====================================
lib/jquery_tiki/tiki-jquery.js
=====================================
@@ -613,6 +613,33 @@ $(function() { // JQuery's DOM is ready event - before onload
             current: jqueryTiki.cboxCurrent
         });
 
+        function pausePlaying(type)
+        {
+            $(type).each(function () {
+                $(this).get(0).pause();
+            });
+        }
+
+        $(this).find('.cboxInlineMedia').colorbox({
+            inline: true,
+            rel: 'lightbox',
+            width: function () {
+                return $(this).attr("data-box-width") ?? '60%';
+            },
+            height: function () {
+                return $(this).attr("data-box-height") ?? '80%';
+            },
+            onClosed: function () {
+                pausePlaying('video');
+                pausePlaying('audio');
+            }
+        });
+
+        $(this).on('click', '#cboxPrevious, #cboxNext', function () {
+            pausePlaying('video');
+            pausePlaying('audio');
+        });
+
         // now, first let suppose that we want to display images in ColorBox by default:
 
         // this matches data-box attributes containing type=img or no type= specified


=====================================
lib/mime/mimetypes.php
=====================================
@@ -444,6 +444,7 @@ $mimetypes = [
     "wad" => "application/x-doom",
     "wav" => "audio/x-wav",
     "wax" => "audio/x-ms-wax",
+    "webm" => "video/webm",
     "wbmp" => "image/vnd.wap.wbmp",
     "wbxml" => "application/vnd.wap.wbxml",
     "wk" => "application/x-123",
@@ -454,7 +455,7 @@ $mimetypes = [
     "wmls" => "text/vnd.wap.wmlscript",
     "wml" => "text/vnd.wap.wml",
     "wm" => "video/x-ms-wm",
-    "wmv" => "video/x-ms-wmv",
+    "wmv" => "video/x-ms-asf",
     "wmx" => "video/x-ms-wmx",
     "wmz" => "application/x-ms-wmz",
     "wp5" => "application/wordperfect5.1",


=====================================
templates/trackerinput/files.tpl
=====================================
@@ -268,9 +268,6 @@
         addFile(data.fileId, data.filetype, data.name);
             };
         });
-        $(function() {
-            $('.tracker-item-files .modal').appendTo('body');
-        });
     {/jq}
 
     {if $prefs.vimeo_upload eq 'y' and $field.options_map.displayMode eq 'vimeo' and $prefs.feature_jquery_validation eq 'y'}



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/116bdd155dbf5739b4bc01502c460aa9ba760ddf

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/116bdd155dbf5739b4bc01502c460aa9ba760ddf
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs