Implement basic audio player for audio expose

api/js/etemplate/et2_widget_link.js

@@ -24,7 +24,6 @@ var __extends = (this && this.__extends) || (function () {
 })();
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.et2_link_add = exports.et2_link_list = exports.et2_link_string = exports.et2_link = exports.et2_link_entry = exports.et2_link_apps = exports.et2_link_to = void 0;
 /*egw:uses
     /vendor/bower-asset/jquery/dist/jquery.js;
     /vendor/bower-asset/jquery-ui/jquery-ui.js;
@@ -1327,7 +1326,7 @@ var et2_link_string = /** @class */ (function (_super) {
         et2_link_string.prototype.getMedia = function (_value) {
             var base_url = egw.webserverUrl.match(/^\//, 'ig') ? egw(window).window.location.origin + egw.webserverUrl : egw.webserverUrl;
             var mediaContent = [];
-            if (_value && typeof _value.type != 'undefined' && _value.type.match(/video\//, 'ig')) {
+            if (_value && typeof _value.type != 'undefined' && _value.type.match(/video\/|audio\//, 'ig')) {
                 mediaContent = [{
                         title: _value.id,
                         type: _value.type,
@@ -1356,9 +1355,12 @@ var et2_link_string = /** @class */ (function (_super) {
                 .click(function (e) {
                 var fe = egw_get_file_editor_prefered_mimes(_link_data.type);
                 if (self.options.expose_view && typeof _link_data.type != 'undefined'
-                    && _link_data.type.match(self.mime_regexp, 'ig')) {
+                    && _link_data.type.match(self.mime_regexp, 'ig') && !_link_data.type.match(self.mime_audio_regexp, 'ig')) {
                     self._init_blueimp_gallery(e, _link_data);
                 }
+                else if (_link_data.type.match(self.mime_audio_regexp, 'ig')) {
+                    self._audio_player(_link_data);
+                }
                 else if (typeof _link_data.type != 'undefined' && fe && fe.mime && fe.mime[_link_data.type]) {
                     egw.open_link(egw.link('/index.php', {
                         menuaction: fe.edit.menuaction,

api/js/etemplate/et2_widget_link.ts

@@ -1641,7 +1641,7 @@ export class et2_link_string extends expose(class et2_link_string extends et2_va
 	{
 		let base_url = egw.webserverUrl.match(/^\//,'ig')?egw(window).window.location.origin + egw.webserverUrl : egw.webserverUrl;
 		let mediaContent = [];
-		if (_value && typeof _value.type !='undefined' && _value.type.match(/video\//,'ig'))
+		if (_value && typeof _value.type !='undefined' && _value.type.match(/video\/|audio\//,'ig'))
 		{
 			mediaContent = [{
 					title: _value.id,
@@ -1672,10 +1672,14 @@ export class et2_link_string extends expose(class et2_link_string extends et2_va
 			.click( function(e){
 				var fe = egw_get_file_editor_prefered_mimes(_link_data.type);
 				if (self.options.expose_view && typeof _link_data.type !='undefined'
-					&& _link_data.type.match(self.mime_regexp,'ig'))
+					&& _link_data.type.match(self.mime_regexp,'ig') && !_link_data.type.match(self.mime_audio_regexp,'ig'))
 				{
 					self._init_blueimp_gallery(e, _link_data);
 				}
+				else if(_link_data.type.match(self.mime_audio_regexp,'ig'))
+				{
+					self._audio_player(_link_data);
+				}
 				else if(typeof _link_data.type !='undefined' && fe && fe.mime && fe.mime[_link_data.type])
 				{
 					egw.open_link(egw.link('/index.php', {

api/js/etemplate/expose.js

@@ -25,6 +25,9 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+Object.defineProperty(exports, "__esModule", { value: true });
+var et2_core_widget_1 = require("./et2_core_widget");
+var et2_widget_dialog_1 = require("./et2_widget_dialog");
 /**
  * This function extends the given widget with blueimp gallery plugin
  *
@@ -44,8 +47,9 @@ function expose(Base) {
     // For filtering to only show things we can handle
     var MIME_REGEX = (navigator.userAgent.match(/(MSIE|Trident)/)) ?
         // IE only supports video/mp4 mime type
-        new RegExp(/(video\/mp4)|(image\/:*(?!tif|x-xcf|pdf))/) :
+        new RegExp(/(video\/mp4)|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/) :
-        new RegExp(/(video\/(mp4|ogg|webm))|(image\/:*(?!tif|x-xcf|pdf))/);
+        new RegExp(/(video\/(mp4|ogg|webm))|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/);
+    var MIME_AUDIO_REGEX = new RegExp(/(audio\/:*)/);
     // open office document mime type currently supported by webodf editor
     var MIME_ODF_REGEX = new RegExp(/application\/vnd\.oasis\.opendocument\.text/);
     // Only one gallery
@@ -181,6 +185,7 @@ function expose(Base) {
             }
             var _this = _super.apply(this, args) || this;
             _this.mime_regexp = MIME_REGEX;
+            _this.mime_audio_regexp = MIME_AUDIO_REGEX;
             _this.mime_odf_regex = MIME_ODF_REGEX;
             var self = _this;
             _this.expose_options = {
@@ -372,9 +377,12 @@ function expose(Base) {
                 jQuery(this.node).on('click', function (event) {
                     // Do not trigger expose view if one of the operator keys are held
                     if (!event.altKey && !event.ctrlKey && !event.shiftKey && !event.metaKey) {
-                        if (_value.mime.match(MIME_REGEX, 'ig')) {
+                        if (_value.mime.match(MIME_REGEX, 'ig') && !_value.mime.match(MIME_AUDIO_REGEX, 'ig')) {
                             self._init_blueimp_gallery(event, _value);
                         }
+                        else if (_value.mime.match(MIME_AUDIO_REGEX, 'ig')) {
+                            self._audio_player(_value);
+                        }
                         else if (fe && fe.mime && fe.edit && fe.mime[_value.mime]) {
                             egw.open_link(egw.link('/index.php', {
                                 menuaction: fe.edit.menuaction,
@@ -420,6 +428,40 @@ function expose(Base) {
             // @ts-ignore
             gallery = blueimp.Gallery(mediaContent, this.expose_options);
         };
+        /**
+         * audio player expose
+         * @param _value
+         * @private
+         */
+        exposable.prototype._audio_player = function (_value) {
+            var button = [
+                { "button_id": 1, "text": egw.lang('close'), id: '1', image: 'cancel', default: true }
+            ];
+            // @ts-ignore
+            var mediaContent = this.getMedia(_value)[0];
+            et2_core_widget_1.et2_createWidget("dialog", {
+                callback: function (_btn, value) {
+                    if (_btn == et2_widget_dialog_1.et2_dialog.OK_BUTTON) {
+                    }
+                },
+                beforeClose: function () {
+                },
+                title: mediaContent.title,
+                buttons: button,
+                minWidth: 350,
+                minHeight: 200,
+                modal: false,
+                position: "right bottom,right-50 bottom-10",
+                value: {
+                    content: {
+                        src: mediaContent.download_href
+                    }
+                },
+                resizable: false,
+                template: egw.webserverUrl + '/api/templates/default/audio_player.xet',
+                dialogClass: "audio_player"
+            });
+        };
         /**
          * Check if clicked target from nm is in depth
          *

api/js/etemplate/expose.ts

@@ -16,6 +16,9 @@
 "use strict";
 
 
+import {et2_createWidget} from "./et2_core_widget";
+import {et2_dialog} from "./et2_widget_dialog";
+
 type Constructor<T = {}> = new (...args: any[]) => T;
 
 /**
@@ -39,10 +42,10 @@ function expose<TBase extends Constructor>(Base: TBase) {
 	// For filtering to only show things we can handle
 	const MIME_REGEX = (navigator.userAgent.match(/(MSIE|Trident)/)) ?
 		// IE only supports video/mp4 mime type
-		new RegExp(/(video\/mp4)|(image\/:*(?!tif|x-xcf|pdf))/) :
+		new RegExp(/(video\/mp4)|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/) :
-		new RegExp(/(video\/(mp4|ogg|webm))|(image\/:*(?!tif|x-xcf|pdf))/);
+		new RegExp(/(video\/(mp4|ogg|webm))|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/);
-
 
+	const MIME_AUDIO_REGEX = new RegExp(/(audio\/:*)/);
 	// open office document mime type currently supported by webodf editor
 	const MIME_ODF_REGEX = new RegExp(/application\/vnd\.oasis\.opendocument\.text/);
 
@@ -192,6 +195,7 @@ function expose<TBase extends Constructor>(Base: TBase) {
 			// Call the inherited constructor
 			super(...args);
 			this.mime_regexp = MIME_REGEX;
+			this.mime_audio_regexp = MIME_AUDIO_REGEX;
 			this.mime_odf_regex = MIME_ODF_REGEX;
 			let self = this;
 			this.expose_options = {
@@ -386,9 +390,14 @@ function expose<TBase extends Constructor>(Base: TBase) {
 				jQuery(this.node).on('click', function (event) {
 					// Do not trigger expose view if one of the operator keys are held
 					if (!event.altKey && !event.ctrlKey && !event.shiftKey && !event.metaKey) {
-						if (_value.mime.match(MIME_REGEX, 'ig')) {
+						if (_value.mime.match(MIME_REGEX, 'ig') && !_value.mime.match(MIME_AUDIO_REGEX,'ig')) {
 							self._init_blueimp_gallery(event, _value);
-						} else if (fe && fe.mime && fe.edit && fe.mime[_value.mime]) {
+						}
+						else if (_value.mime.match(MIME_AUDIO_REGEX,'ig'))
+						{
+							self._audio_player(_value);
+						}
+						else if (fe && fe.mime && fe.edit && fe.mime[_value.mime]) {
 							egw.open_link(egw.link('/index.php', {
 								menuaction: fe.edit.menuaction,
 								path: _value.path,
@@ -436,6 +445,46 @@ function expose<TBase extends Constructor>(Base: TBase) {
 			gallery = blueimp.Gallery(mediaContent, this.expose_options);
 		}
 
+		/**
+		 * audio player expose
+		 * @param _value
+		 * @private
+		 */
+		private _audio_player(_value)
+		{
+			let button = [
+				{"button_id": 1, "text": egw.lang('close'), id: '1', image: 'cancel', default: true}
+			];
+
+			// @ts-ignore
+			let mediaContent = this.getMedia(_value)[0];
+			et2_createWidget("dialog",{
+				callback: function(_btn, value){
+					if (_btn == et2_dialog.OK_BUTTON)
+					{
+
+					}
+				},
+				beforeClose: function(){
+
+				},
+				title: mediaContent.title,
+				buttons: button,
+				minWidth: 350,
+				minHeight: 200,
+				modal: false,
+				position:"right bottom,right-50 bottom-10",
+				value: {
+					content: {
+						src:mediaContent.download_href
+					}
+				},
+				resizable: false,
+				template: egw.webserverUrl+'/api/templates/default/audio_player.xet',
+				dialogClass:"audio_player"
+			});
+		}
+
 		/**
 		 * Check if clicked target from nm is in depth
 		 *

api/templates/default/audio_player.xet

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE overlay PUBLIC "-//EGroupware GmbH//eTemplate 2//EN" "http://www.egroupware.org/etemplate2.dtd">
+<!-- $Id$ -->
+<overlay>
+	<template id="etemplate.audio_player" template="" lang="" group="0" version="16.2">
+		<vbox>
+			<audio src="@src" autoplay="true"/>
+		</vbox>
+	</template>
+</overlay>