From 0f0b6e41540833ad3655cf7da1b64d318d2dbf1a Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Tue, 16 Mar 2021 13:23:54 +0100 Subject: [PATCH] Implement basic audio player for audio expose --- api/js/etemplate/et2_widget_link.js | 8 ++-- api/js/etemplate/et2_widget_link.ts | 8 +++- api/js/etemplate/expose.js | 48 +++++++++++++++++++-- api/js/etemplate/expose.ts | 59 +++++++++++++++++++++++--- api/templates/default/audio_player.xet | 10 +++++ 5 files changed, 120 insertions(+), 13 deletions(-) create mode 100644 api/templates/default/audio_player.xet diff --git a/api/js/etemplate/et2_widget_link.js b/api/js/etemplate/et2_widget_link.js index d08436c5db..06dee8d00e 100644 --- a/api/js/etemplate/et2_widget_link.js +++ b/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, diff --git a/api/js/etemplate/et2_widget_link.ts b/api/js/etemplate/et2_widget_link.ts index 97ad14eb74..d6a4962407 100644 --- a/api/js/etemplate/et2_widget_link.ts +++ b/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', { diff --git a/api/js/etemplate/expose.js b/api/js/etemplate/expose.js index c600ddc978..25015fd2ce 100644 --- a/api/js/etemplate/expose.js +++ b/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|ogg|webm))|(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))|(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 * diff --git a/api/js/etemplate/expose.ts b/api/js/etemplate/expose.ts index 3e7a49d1bd..b5ba1d492f 100644 --- a/api/js/etemplate/expose.ts +++ b/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 = new (...args: any[]) => T; /** @@ -39,10 +42,10 @@ function expose(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|ogg|webm))|(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))|(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(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(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(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 * diff --git a/api/templates/default/audio_player.xet b/api/templates/default/audio_player.xet new file mode 100644 index 0000000000..8bdadc9704 --- /dev/null +++ b/api/templates/default/audio_player.xet @@ -0,0 +1,10 @@ + + + + + +