[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX] Generally use Plyr to play audio recordings as Glightbox does not support audio

Victor Emanouilov pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
159b5bf7 by Merci Jacob at 2026-04-23T13:17:33+00:00
[FIX] Generally use Plyr to play audio recordings as Glightbox does not support audio
---
* remove unecessary imports

* [FIX] Generally use Plyr to play audio recordings as Glightbox does not support audio

See merge request tikiwiki/tiki!10014

- - - - -


6 changed files:

- lib/core/Tracker/Field/Files.php
- lib/parser/parserlib.php
- lib/smarty_tiki/FunctionHandler/InlineAudioPlayer.php
- path_js_importmap_generator.php
- − src/js/jquery-tiki/tiki-inline_audio_player.js
- themes/base_files/scss/_tiki-external_scripts_overrides.scss


Changes:

=====================================
lib/core/Tracker/Field/Files.php
=====================================
@@ -597,15 +597,19 @@ class Tracker_Field_Files extends \Tracker\Field\AbstractItemField implements \T
 
                 foreach ($this->getConfiguration('files') as $fileId => $file) {
                     $ret .= '<li>';
+                    $skipName = false;
                     if ($prefs['vimeo_upload'] == 'y' && $this->getOption('displayMode') == 'vimeo') {
                         $ret .= smarty_function_icon(['name' => 'vimeo'], $smarty->getEmptyInternalTemplate());
                     } elseif (str_starts_with($file['filetype'], 'audio/')) {
-                        $ret .= smarty_function_inline_audio_player(['fileId' => $fileId], $smarty->getEmptyInternalTemplate());
+                        $ret .= smarty_function_inline_audio_player(['fileId' => $fileId, 'type' => $file['filetype']], $smarty->getEmptyInternalTemplate());
+                        $skipName = true;
                     } else {
                         $ret .= smarty_modifier_iconify('tiki-download_file.php?fileId=' . $fileId, $file['filetype'], $fileId, 2);
                     }
 
-                    $ret .= smarty_function_object_link(['type' => 'file', 'id' => $fileId, 'title' => $file['name'], 'class' => 'label'], $smarty->getEmptyInternalTemplate());
+                    if (! $skipName) {
+                        $ret .= smarty_function_object_link(['type' => 'file', 'id' => $fileId, 'title' => $file['name'], 'class' => 'label'], $smarty->getEmptyInternalTemplate());
+                    }
 
                     $globalperms = Perms::get([ 'type' => 'file gallery', 'object' => $galleryId ]);
 


=====================================
lib/parser/parserlib.php
=====================================
@@ -1614,6 +1614,11 @@ class ParserLib extends TikiDb_Bridge
                     $fileId = $file['fileId'];
                     $filename = $file['name'];
                     $type = $file['filetype'];
+
+                    if (str_starts_with($type, 'audio/')) {
+                        return smarty_function_inline_audio_player(['fileId' => $fileId, 'type' => $type], TikiLib::lib('smarty')->getEmptyInternalTemplate());
+                    }
+
                     $icon = smarty_function_icon(['name' => 'paperclip'], TikiLib::lib('smarty')->getEmptyInternalTemplate());
                     return "<span class='badge rounded-pill bg-secondary' role='button' data-file-ref-type='$type' data-file-ref-id='$fileId'>$icon $filename</span>";
                 }


=====================================
lib/smarty_tiki/FunctionHandler/InlineAudioPlayer.php
=====================================
@@ -13,28 +13,22 @@ class InlineAudioPlayer extends \Smarty\FunctionHandler\Base
 {
     public function handle($params, \Smarty\Template $template)
     {
-        TikiLib::lib('header')->add_js_module('import "@jquery-tiki/tiki-inline_audio_player";');
-        $icon = smarty_function_icon(['name' => 'play'], $template);
-        $pauseIcon = smarty_function_icon(['name' => 'pause', 'size' => 1], $template);
-        $stopIcon = smarty_function_icon(['name' => 'xmark', 'size' => 1], $template);
-        $src = 'tiki-download_file.php?fileId=' . $params['fileId'];
+        $fileId = $params['fileId'];
+        $type = $params['type'];
+
+        $uniqueId = uniqid('audio-player-');
+
+        $headerlib = TikiLib::lib('header');
+        $headerlib->add_jsfile(NODE_PUBLIC_DIST_PATH . '/glightbox/dist/plyr.min.js');
+        $headerlib->add_cssfile(NODE_PUBLIC_DIST_PATH . '/glightbox/dist/plyr.css');
+        $headerlib->add_js(<<<JS
+            new Plyr('#$uniqueId', {
+                controls: ['play', 'progress', 'current-time', 'duration', 'settings']
+            });
+        JS);
 
         return <<<HTML
-        <button class="play-audio btn btn-sm btn-link bg-secondary-subtle rounded-circle" data-src="{$src}">
-            {$icon}
-        </button>
-        <button class="pause-audio btn btn-sm btn-link bg-secondary-subtle rounded-circle d-none">
-            {$pauseIcon}
-        </button>
-        <div class="audio-timer">
-            <div class="end-line rounded-pill bg-secondary-subtle">
-                <div class="progress-bar rounded-pill bg-secondary"></div>
-            </div>
-            <div class="time d-none fw-lighter"></div>
-        </div>
-        <button class="stop-audio btn btn-sm btn-link rounded-circle d-none">
-            {$stopIcon}
-        </button>
-        HTML;
+                <audio playsinline id="$uniqueId" data-file-ref-id="$fileId"><source src="tiki-download_file.php?fileId=$fileId&display" type="$type"></audio>
+            HTML;
     }
 }


=====================================
path_js_importmap_generator.php
=====================================
@@ -122,7 +122,6 @@ function generateJsImportmapScripts(bool $useBaseUrl = false)
                 "@jquery-tiki/tiki-admin_menu_options" => $tikiUrl . JS_ASSETS_PATH . "/jquery-tiki/tiki-admin_menu_options.js",
                 "@jquery-tiki/tiki-admin_2fa" => $tikiUrl . JS_ASSETS_PATH . "/jquery-tiki/tiki-admin_2fa.js",
                 "@jquery-tiki/tiki-edit_structure" => $tikiUrl . JS_ASSETS_PATH . "/jquery-tiki/tiki-edit_structure.js",
-                "@jquery-tiki/tiki-inline_audio_player" => $tikiUrl . JS_ASSETS_PATH . "/jquery-tiki/tiki-inline_audio_player.js",
                 "@jquery-tiki/wikiplugin-mouseover" => $tikiUrl . JS_ASSETS_PATH . "/jquery-tiki/wikiplugin-mouseover.js",
                 "@jquery-tiki/wikiplugin-trackercalendar" => $tikiUrl . JS_ASSETS_PATH . "/jquery-tiki/wikiplugin-trackercalendar.js",
                 "@jquery-tiki/eventcalendar_to_pdf" => $tikiUrl . JS_ASSETS_PATH . "/jquery-tiki/eventcalendar_to_pdf.js",


=====================================
src/js/jquery-tiki/tiki-inline_audio_player.js deleted
=====================================
@@ -1,133 +0,0 @@
-import moment from "moment";
-
-$(".play-audio").on("click", async function () {
-    $(this).addClass("loading");
-    $(this).prop("disabled", true);
-
-    try {
-        const audio = await getPlayableAudio.call(this);
-
-        $(this).removeClass("loading");
-        $(this).prop("disabled", false);
-
-        if (!audio) {
-            showMessage(tr("Failed to load audio file."), "error");
-            return;
-        }
-
-        await audio.play();
-
-        $(this).addClass("d-none");
-        $(this).siblings(".pause-audio").removeClass("d-none").data("audio", audio);
-        $(this).siblings(".stop-audio").removeClass("d-none").data("audio", audio);
-
-        const audioTimer = $(this).siblings(".audio-timer");
-        audioTimer.addClass("show");
-        audioTimer.find(".time").removeClass("d-none");
-        $(this).siblings(".label").hide();
-
-        audio.addEventListener("timeupdate", () => {
-            const currentTime = Math.floor(audio.currentTime);
-            const duration = Math.floor(audio.duration);
-            const remainder = duration - currentTime;
-
-            const now = moment().minute(0).second(0).unix();
-            const endTime = now + remainder;
-
-            const minutes = Math.floor(remainder / 60);
-            let timeLabel = "";
-            if (minutes > 60) {
-                timeLabel = moment.unix(endTime).format("HH:mm:ss");
-            } else {
-                timeLabel = moment.unix(endTime).format("mm:ss");
-            }
-
-            audioTimer.find(".time").text(timeLabel);
-
-            const percentage = (currentTime / duration) * 100;
-            audioTimer.find(".progress-bar").css("width", `${percentage}%`);
-        });
-        audio.addEventListener("ended", () => {
-            audioTimer.removeClass("show");
-            $(this).siblings(".label").show();
-            audioTimer.find(".time").addClass("d-none");
-            audioTimer.find(".progress-bar").css("width", "0%");
-
-            $(this).removeClass("d-none");
-            $(this).siblings(".pause-audio").addClass("d-none");
-            $(this).siblings(".stop-audio").addClass("d-none");
-        });
-    } catch (event) {
-        const errorCode = event.target?.error?.code;
-        if ([MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED, MediaError.MEDIA_ERR_DECODE].includes(errorCode)) {
-            showMessage(tr("Failed to play audio, the format is unsupported."), "error");
-        } else {
-            showMessage(tr("Failed to play audio: ") + event.target?.error?.message, "error");
-        }
-        $(this).removeClass("loading");
-        $(this).prop("disabled", false);
-    }
-});
-
-$(".pause-audio").on("click", function () {
-    const audio = $(this).data("audio");
-    if (audio) {
-        audio.pause();
-        $(this).addClass("d-none");
-        $(this).siblings(".play-audio").removeClass("d-none").data("audio", audio);
-    }
-});
-
-$(".stop-audio").on("click", function () {
-    const audio = $(this).data("audio");
-    if (audio) {
-        audio.pause();
-        audio.currentTime = 0;
-
-        audio.dispatchEvent(new Event("ended"));
-    }
-});
-
-function getPlayableAudio() {
-    return new Promise(async (resolve, reject) => {
-        const audio = $(this).data("audio");
-        if (audio) {
-            resolve(audio);
-        } else {
-            const url = $(this).data("src");
-            fetch(url)
-                .then(async (response) => {
-                    if (!response.ok) {
-                        resolve(null);
-                    }
-                    const blob = await response.blob();
-                    const audio = new Audio(URL.createObjectURL(blob));
-                    loadMetadata(audio)
-                        .then(() => resolve(audio))
-                        .catch(reject);
-                })
-                .catch(() => resolve(null));
-        }
-    });
-}
-
-function loadMetadata(audioElement) {
-    return new Promise((resolve, reject) => {
-        audioElement.addEventListener("loadedmetadata", () => {
-            if (audioElement.duration === Infinity) {
-                audioElement.currentTime = 1e101; // Set a large value to force metadata loading
-
-                audioElement.ontimeupdate = () => {
-                    audioElement.ontimeupdate = null;
-                    audioElement.currentTime = 0;
-                    resolve();
-                };
-            } else {
-                resolve();
-            }
-        });
-        audioElement.addEventListener("error", (e) => {
-            reject(e);
-        });
-    });
-}


=====================================
themes/base_files/scss/_tiki-external_scripts_overrides.scss
=====================================
@@ -284,3 +284,8 @@ div.mb-3 label.error {
         width: auto;
     }
 }
+
+:root {
+    --plyr-audio-controls-background: var(--bs-secondary-bg-subtle);
+    --plyr-color-main: var(--bs-primary);
+}



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/159b5bf723358468cd813e7c75e9b1f2964825ad

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/159b5bf723358468cd813e7c75e9b1f2964825ad
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

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