extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-25 16:19:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Implement basic audio player for audio expose

Browse Source
This commit is contained in:
Hadi Nategh 2021-03-16 13:23:54 +01:00
parent 886884feea
commit 0f0b6e4154
5 changed files with 120 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
api/js/etemplate/et2_widget_link.js
View File

@ -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,

8
api/js/etemplate/et2_widget_link.ts
View File

@ -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', {

48
api/js/etemplate/expose.js
View File

@ -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
*

59
api/js/etemplate/expose.ts
View File

@ -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|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<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
*

10
api/templates/default/audio_player.xet Normal file
View File

@ -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>