diff --git a/public/js/opendxp/settings/videothumbnail/item.js b/public/js/opendxp/settings/videothumbnail/item.js
index 1eece336..8203c70f 100644
--- a/public/js/opendxp/settings/videothumbnail/item.js
+++ b/public/js/opendxp/settings/videothumbnail/item.js
@@ -11,13 +11,12 @@
* @license https://www.gnu.org/licenses/gpl-3.0.html GNU General Public License version 3 (GPLv3)
*/
-opendxp.registerNS("opendxp.settings.videothumbnail.item");
+opendxp.registerNS('opendxp.settings.videothumbnail.item');
/**
* @private
*/
opendxp.settings.videothumbnail.item = Class.create({
-
initialize: function (data, parentPanel) {
this.parentPanel = parentPanel;
this.data = data;
@@ -25,65 +24,58 @@ opendxp.settings.videothumbnail.item = Class.create({
this.medias = {};
this.addLayout();
+ this.addMediaPanel('default', this.data.items, false, true);
- // add default panel
- this.addMediaPanel("default", this.data.items, false, true);
-
- // add medias
- if (this.data["medias"]) {
- Ext.iterate(this.data.medias, function (key, items) {
+ if (this.data.medias) {
+ Ext.iterate(this.data.medias, (key, items) => {
this.addMediaPanel(key, items, true, false);
- }.bind(this));
+ });
}
},
-
addLayout: function () {
- var panelButtons = [];
- let buttonConfig = {
- text: t("save"),
- iconCls: "opendxp_icon_apply",
+ const buttonConfig = {
+ text: t('save'),
+ iconCls: 'opendxp_icon_apply',
handler: this.save.bind(this),
disabled: !this.data.writeable
};
if (!this.data.writeable) {
- buttonConfig.tooltip = t("config_not_writeable");
+ buttonConfig.tooltip = t('config_not_writeable');
}
- panelButtons.push(buttonConfig);
-
this.mediaPanel = new Ext.TabPanel({
autoHeight: true,
plugins: [Ext.create('Ext.ux.TabReorderer', {})]
});
- var addViewPortButton = {
+ const addViewPortButton = {
xtype: 'panel',
style: 'margin-bottom: 15px',
items: [{
xtype: 'button',
- style: "float: right",
- text: t("add_media_segment"),
- iconCls: "opendxp_icon_add",
- handler: function () {
- Ext.MessageBox.prompt("", t("enter_media_segment"), function (button, value) {
- if (button == "ok") {
+ style: 'float: right',
+ text: t('add_media_segment'),
+ iconCls: 'opendxp_icon_add',
+ handler: () => {
+ Ext.MessageBox.prompt('', t('enter_media_segment'), (button, value) => {
+ if (button === 'ok') {
this.addMediaPanel(value, null, true, true);
}
- }.bind(this), null, false, '500K');
- }.bind(this)
+ }, null, false, '500K');
+ }
}, {
xtype: 'component',
- style: "float: right; padding: 8px 40px 0 0;",
+ style: 'float: right; padding: 8px 40px 0 0;',
html: t('dash_media_message')
}]
};
this.groupField = new Ext.form.field.Text({
- name: "group",
+ name: 'group',
value: this.data.group,
- fieldLabel: t("group"),
+ fieldLabel: t('group'),
width: 450
});
@@ -94,7 +86,7 @@ opendxp.settings.videothumbnail.item = Class.create({
renderer: Ext.util.Format.htmlEncode
},
items: [{
- xtype: "panel",
+ xtype: 'panel',
autoHeight: true,
border: false,
loader: {
@@ -102,61 +94,54 @@ opendxp.settings.videothumbnail.item = Class.create({
autoLoad: true
}
}, {
- xtype: "textfield",
- name: "name",
+ xtype: 'textfield',
+ name: 'name',
value: this.data.name,
- fieldLabel: t("name"),
+ fieldLabel: t('name'),
width: 450,
readOnly: true
}, {
- xtype: "textarea",
- name: "description",
+ xtype: 'textarea',
+ name: 'description',
value: this.data.description,
- fieldLabel: t("description"),
+ fieldLabel: t('description'),
width: 450,
height: 100
}, this.groupField, {
- xtype: "combo",
- name: "present",
- fieldLabel: t("select_presetting"),
- triggerAction: "all",
- mode: "local",
+ xtype: 'combo',
+ name: 'present',
+ fieldLabel: t('select_presetting'),
+ triggerAction: 'all',
+ mode: 'local',
width: 300,
- store: [["average", t("average")], ["good", t("good")], ["best", t("best")]],
+ store: [['average', t('average')], ['good', t('good')], ['best', t('best')]],
listeners: {
- select: function (el) {
- var sel = el.getValue();
- var vb = "";
- var ab = "";
-
- if (sel == "average") {
- vb = 400;
- ab = 128;
- } else if (sel == "good") {
- vb = 600;
- ab = 128;
- } else if (sel == "best") {
- vb = 800;
- ab = 196;
+ select: (el) => {
+ const presets = {
+ average: { vb: 400, ab: 128 },
+ good: { vb: 600, ab: 128 },
+ best: { vb: 800, ab: 196 },
+ };
+ const preset = presets[el.getValue()];
+ if (preset) {
+ this.settings.getComponent('videoBitrate').setValue(preset.vb);
+ this.settings.getComponent('audioBitrate').setValue(preset.ab);
}
-
- this.settings.getComponent("videoBitrate").setValue(vb);
- this.settings.getComponent("audioBitrate").setValue(ab);
- }.bind(this)
+ }
}
}, {
- xtype: "numberfield",
- name: "videoBitrate",
- itemId: "videoBitrate",
+ xtype: 'numberfield',
+ name: 'videoBitrate',
+ itemId: 'videoBitrate',
value: this.data.videoBitrate,
- fieldLabel: t("video_bitrate"),
+ fieldLabel: t('video_bitrate'),
width: 250
}, {
- xtype: "numberfield",
- name: "audioBitrate",
- itemId: "audioBitrate",
+ xtype: 'numberfield',
+ name: 'audioBitrate',
+ itemId: 'audioBitrate',
value: this.data.audioBitrate,
- fieldLabel: t("audio_bitrate"),
+ fieldLabel: t('audio_bitrate'),
width: 250
}]
});
@@ -165,14 +150,13 @@ opendxp.settings.videothumbnail.item = Class.create({
border: false,
closable: true,
autoScroll: true,
- bodyStyle: "padding: 20px;",
+ bodyStyle: 'padding: 20px;',
title: this.data.name,
- id: "opendxp_videothumbnail_panel_" + this.data.name,
+ id: `opendxp_videothumbnail_panel_${this.data.name}`,
items: [this.settings, addViewPortButton, this.mediaPanel],
- buttons: panelButtons
+ buttons: [buttonConfig]
});
-
this.parentPanel.getEditPanel().add(this.panel);
this.parentPanel.getEditPanel().setActiveTab(this.panel);
@@ -180,61 +164,50 @@ opendxp.settings.videothumbnail.item = Class.create({
},
addMediaPanel: function (name, items, closable, activate) {
- name = name.replace(/[^a-zA-Z0-9_\-+]/g,'');
+ name = name.replace(/[^a-zA-Z0-9_\-+]/g, '');
if (this.medias[name]) {
return;
}
- var addMenu = [];
- var itemTypes = Object.keys(opendxp.settings.videothumbnail.items);
- for (var i = 0; i < itemTypes.length; i++) {
- if (itemTypes[i].indexOf("item") == 0) {
- addMenu.push({
- iconCls: "opendxp_icon_add",
- handler: this.addItem.bind(this, name, itemTypes[i]),
- text: opendxp.settings.videothumbnail.items[itemTypes[i]](null, null, true)
- });
- }
- }
+ const addMenu = Object.keys(opendxp.settings.videothumbnail.items)
+ .filter(type => type.startsWith('item'))
+ .map(type => ({
+ iconCls: 'opendxp_icon_add',
+ handler: this.addItem.bind(this, name, type),
+ text: opendxp.settings.videothumbnail.items[type](null, null, true)
+ }));
- var title = "";
- if (name == "default") {
- title = t("default");
- } else {
- title = name;
- }
+ const title = name === 'default' ? t('default') : name;
- var itemContainer = new Ext.Panel({
+ const itemContainer = new Ext.Panel({
title: title,
tbar: [{
- text: t("transformations"),
- iconCls: "opendxp_icon_add",
+ text: t('transformations'),
+ iconCls: 'opendxp_icon_add',
menu: addMenu
}],
border: false,
closable: closable,
autoHeight: true,
listeners: {
- close: function (name) {
+ close: () => {
delete this.medias[name];
- }.bind(this, name)
+ }
}
});
this.medias[name] = itemContainer;
if (items && items.length > 0) {
- for (var i = 0; i < items.length; i++) {
- this.addItem(name, "item" + ucfirst(items[i].method), items[i].arguments);
- }
+ items.forEach(item => {
+ this.addItem(name, `item${ucfirst(item.method)}`, item.arguments);
+ });
}
-
this.mediaPanel.add(itemContainer);
this.mediaPanel.updateLayout();
- // activate the default panel
if (activate) {
this.mediaPanel.setActiveTab(itemContainer);
}
@@ -242,43 +215,37 @@ opendxp.settings.videothumbnail.item = Class.create({
return itemContainer;
},
-
addItem: function (name, type, data) {
-
- var item = opendxp.settings.videothumbnail.items[type](this.medias[name], data);
+ const item = opendxp.settings.videothumbnail.items[type](this.medias[name], data);
this.medias[name].add(item);
this.medias[name].updateLayout();
-
this.currentIndex++;
},
getData: function () {
+ const mediaData = {};
+ const mediaOrder = {};
- var mediaData = {};
- var mediaOrder = {};
-
- Ext.iterate(this.medias, function (key, value) {
+ Ext.iterate(this.medias, (key, value) => {
mediaData[key] = [];
mediaOrder[key] = this.mediaPanel.tabBar.items.indexOf(value.tab);
-
- var items = value.items.getRange();
- for (var i = 0; i < items.length; i++) {
- mediaData[key].push(items[i].getForm().getFieldValues());
- }
- }.bind(this));
+ value.items.getRange().forEach(item => {
+ mediaData[key].push(item.getForm().getFieldValues());
+ });
+ });
return {
settings: Ext.encode(this.settings.getForm().getFieldValues()),
medias: Ext.encode(mediaData),
mediaOrder: Ext.encode(mediaOrder),
name: this.data.name
- }
+ };
},
save: function () {
+ let reload = false;
+ const newGroup = this.groupField.getValue();
- var reload = false;
- var newGroup = this.groupField.getValue();
if (newGroup != this.data.group) {
this.data.group = newGroup;
reload = true;
@@ -286,7 +253,8 @@ opendxp.settings.videothumbnail.item = Class.create({
Ext.Ajax.request({
url: Routing.generate('opendxp_admin_settings_videothumbnailupdate'),
- method: "PUT", params: this.getData(),
+ method: 'PUT',
+ params: this.getData(),
success: this.saveOnComplete.bind(this, reload)
});
},
@@ -298,327 +266,10 @@ opendxp.settings.videothumbnail.item = Class.create({
});
}
- opendxp.helpers.showNotification(t("success"), t("saved_successfully"), "success");
+ opendxp.helpers.showNotification(t('success'), t('saved_successfully'), 'success');
},
getCurrentIndex: function () {
return this.currentIndex;
}
-
-});
-
-
-/**
- * ITEM TYPES
- */
-opendxp.registerNS("opendxp.settings.videothumbnail.items");
-/**
- * @private
- */
-opendxp.settings.videothumbnail.items = {
-
- getTopBar: function (name, index, parent) {
- return [{
- xtype: "tbtext",
- text: "" + name + ""
- }, "-", {
- iconCls: "opendxp_icon_up",
- handler: function (blockId, parent) {
-
- var container = parent;
- var blockElement = Ext.getCmp(blockId);
-
- container.moveBefore(blockElement, blockElement.previousSibling());
- }.bind(window, index, parent)
- }, {
- iconCls: "opendxp_icon_down",
- handler: function (blockId, parent) {
-
- var container = parent;
- var blockElement = Ext.getCmp(blockId);
-
- container.moveAfter(blockElement, blockElement.nextSibling());
- }.bind(window, index, parent)
- }, "->", {
- iconCls: "opendxp_icon_delete",
- handler: function (index, parent) {
- parent.remove(Ext.getCmp(index));
- }.bind(window, index, parent)
- }];
- },
-
- itemResize: function (panel, data, getName) {
-
- var niceName = t("resize");
- if (typeof getName != "undefined" && getName) {
- return niceName;
- }
-
- if (typeof data == "undefined") {
- data = {};
- }
- var myId = Ext.id();
-
- var item = new Ext.form.FormPanel({
- id: myId,
- style: "margin-top: 10px",
- border: true,
- bodyStyle: "padding: 10px;",
- tbar: this.getTopBar(niceName, myId, panel),
- items: [{
- xtype: 'fieldset',
- layout: 'hbox',
- style: "border-top: none !important;",
- border: 'false',
- padding: 0,
- items: [{
- xtype: 'numberfield',
- name: "width",
- style: "padding-right: 10px",
- fieldLabel: t("width") + ", " + t("height"),
- width: 210,
- value: data.width
- },
- {
- xtype: 'numberfield',
- name: "height",
- hideLabel: true,
- width: 95,
- value: data.height
- }]
- }, {
- xtype: "hidden",
- name: "type",
- value: "resize"
- }, {
- xtype: "displayfield",
- hideLabel: true,
- value: "" + t("width_and_height_must_be_an_even_number") + ""
- }]
- });
-
- return item;
- },
-
- itemScaleByHeight: function (panel, data, getName) {
-
- var niceName = t("scalebyheight");
- if (typeof getName != "undefined" && getName) {
- return niceName;
- }
-
- if (typeof data == "undefined") {
- data = {};
- }
- var myId = Ext.id();
-
- var item = new Ext.form.FormPanel({
- id: myId,
- style: "margin-top: 10px",
- border: true,
- bodyStyle: "padding: 10px;",
- tbar: this.getTopBar(niceName, myId, panel),
- items: [{
- xtype: 'numberfield',
- name: "height",
- fieldLabel: t("height"),
- width: 250,
- value: data.height
- }, {
- xtype: "hidden",
- name: "type",
- value: "scaleByHeight"
- }]
- });
-
- return item;
- },
-
- itemScaleByWidth: function (panel, data, getName) {
-
- var niceName = t("scalebywidth");
- if (typeof getName != "undefined" && getName) {
- return niceName;
- }
-
- if (typeof data == "undefined") {
- data = {};
- }
- var myId = Ext.id();
-
- var item = new Ext.form.FormPanel({
- id: myId,
- style: "margin-top: 10px",
- border: true,
- bodyStyle: "padding: 10px;",
- tbar: this.getTopBar(niceName, myId, panel),
- items: [{
- xtype: 'numberfield',
- name: "width",
- fieldLabel: t("width"),
- width: 250,
- value: data.width
- }, {
- xtype: "hidden",
- name: "type",
- value: "scaleByWidth"
- }]
- });
-
- return item;
- },
-
- itemCut: function (panel, data, getName) {
-
- var niceName = t("cut");
- if (typeof getName != "undefined" && getName) {
- return niceName;
- }
-
- if (typeof data == "undefined") {
- data = {
- start: '00:00:00',
- duration: '00:00:00'
- };
- }
- var myId = Ext.id();
-
- var item = new Ext.form.FormPanel({
- id: myId,
- style: "margin-top: 10px",
- border: true,
- bodyStyle: "padding: 10px;",
- tbar: this.getTopBar(niceName, myId, panel),
- items: [{
- xtype: 'textfield',
- name: "start",
- fieldLabel: t("start"),
- width: 250,
- value: data.start,
- regex: /^\d*:?[0-5]\d:?[0-5]\d\.?\d*$/,
- emptyText: 'HH:MM:SS.MS'
- }, {
- xtype: 'textfield',
- name: "duration",
- fieldLabel: t("duration"),
- width: 250,
- value: data.duration,
- regex: /^\d*:?[0-5]\d:?[0-5]\d\.?\d*$/,
- emptyText: 'HH:MM:SS.MS'
- }, {
- xtype: "hidden",
- name: "type",
- value: "cut"
- }]
- });
-
- return item;
- },
-
- itemColorChannelMixer: function (panel, data, getName) {
-
- var niceName = t("colorChannelMixer");
- if (typeof getName != "undefined" && getName) {
- return niceName;
- }
-
- if (typeof data == "undefined") {
- data = { effect: 'bw' };
- }
- var myId = Ext.id();
-
- var item = new Ext.form.FormPanel({
- id: myId,
- style: "margin-top: 10px",
- border: true,
- bodyStyle: "padding: 10px;",
- tbar: this.getTopBar(niceName, myId, panel),
- items: [{
- xtype: 'combobox',
- name: "effect",
- fieldLabel: t("effect"),
- width: 450,
- value: data.effect,
- store: [
- ['.9:0:0:0:0:1.1:0:0:0:0:1:0:0:0:0:1', 'Cold'],
- ['.3:.4:.3:0:.3:.4:.3:0:.3:.4:.3', 'Grayscale'],
- ['.393:.769:.189:0:.349:.686:.168:0:.272:.534:.131', 'Sepia'],
- ],
- required: true
- }, {
- xtype: "hidden",
- name: "type",
- value: "colorChannelMixer"
- }]
- });
-
- return item;
- },
-
- itemMute: function (panel, data, getName) {
-
- var niceName = t("mute");
- if (typeof getName != "undefined" && getName) {
- return niceName;
- }
-
- if (typeof data == "undefined") {
- data = {};
- }
- var myId = Ext.id();
-
- var item = new Ext.form.FormPanel({
- id: myId,
- style: "margin-top: 10px",
- border: true,
- bodyStyle: "padding: 10px;",
- tbar: this.getTopBar(niceName, myId, panel),
- items: [{
- xtype: 'container',
- html: t('this_filter_has_no_settings')
- }, {
- xtype: "hidden",
- name: "type",
- value: "mute"
- }]
- });
-
- return item;
- },
-
- itemSetFramerate: function (panel, data, getName) {
-
- var niceName = t("setframerate");
- if (typeof getName != "undefined" && getName) {
- return niceName;
- }
-
- if (typeof data == "undefined") {
- data = { fps: 1 };
- }
- var myId = Ext.id();
-
- var item = new Ext.form.FormPanel({
- id: myId,
- style: "margin-top: 10px",
- border: true,
- bodyStyle: "padding: 10px;",
- tbar: this.getTopBar(niceName, myId, panel),
- items: [{
- xtype: 'numberfield',
- name: "fps",
- fieldLabel: t("fps"),
- minValue: 1,
- maxValue: 60,
- width: 250,
- value: data.fps
- }, {
- xtype: "hidden",
- name: "type",
- value: "setFramerate"
- }]
- });
-
- return item;
- }
-}
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/public/js/opendxp/settings/videothumbnail/items.js b/public/js/opendxp/settings/videothumbnail/items.js
new file mode 100644
index 00000000..3f4a81b4
--- /dev/null
+++ b/public/js/opendxp/settings/videothumbnail/items.js
@@ -0,0 +1,288 @@
+/**
+ * OpenDXP
+ *
+ * This source file is licensed under the GNU General Public License version 3 (GPLv3).
+ *
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ * @copyright Copyright (c) Pimcore GmbH (https://pimcore.com)
+ * @copyright Modification Copyright (c) OpenDXP (https://www.opendxp.ch)
+ * @license https://www.gnu.org/licenses/gpl-3.0.html GNU General Public License version 3 (GPLv3)
+ */
+
+opendxp.registerNS('opendxp.settings.videothumbnail.items');
+/**
+ * @private
+ */
+opendxp.settings.videothumbnail.items = {
+
+ getTopBar: function (name, index, parent) {
+ return [{
+ xtype: 'tbtext',
+ text: `${name}`
+ }, '-', {
+ iconCls: 'opendxp_icon_up',
+ handler: function (blockId, container) {
+ const blockElement = Ext.getCmp(blockId);
+ container.moveBefore(blockElement, blockElement.previousSibling());
+ }.bind(window, index, parent)
+ }, {
+ iconCls: 'opendxp_icon_down',
+ handler: function (blockId, container) {
+ const blockElement = Ext.getCmp(blockId);
+ container.moveAfter(blockElement, blockElement.nextSibling());
+ }.bind(window, index, parent)
+ }, '->', {
+ iconCls: 'opendxp_icon_delete',
+ handler: function (blockId, container) {
+ container.remove(Ext.getCmp(blockId));
+ }.bind(window, index, parent)
+ }];
+ },
+
+ itemResize: function (panel, data, getName) {
+ const niceName = t('resize');
+ if (getName) {
+ return niceName;
+ }
+
+ data = data ?? {};
+ const myId = Ext.id();
+
+ return new Ext.form.FormPanel({
+ id: myId,
+ style: 'margin-top: 10px',
+ border: true,
+ bodyStyle: 'padding: 10px;',
+ tbar: this.getTopBar(niceName, myId, panel),
+ items: [{
+ xtype: 'fieldset',
+ layout: 'hbox',
+ style: 'border-top: none !important;',
+ border: 'false',
+ padding: 0,
+ items: [{
+ xtype: 'numberfield',
+ name: 'width',
+ style: 'padding-right: 10px',
+ fieldLabel: `${t('width')}, ${t('height')}`,
+ width: 210,
+ value: data.width
+ }, {
+ xtype: 'numberfield',
+ name: 'height',
+ hideLabel: true,
+ width: 95,
+ value: data.height
+ }]
+ }, {
+ xtype: 'hidden',
+ name: 'type',
+ value: 'resize'
+ }, {
+ xtype: 'displayfield',
+ hideLabel: true,
+ value: `${t('width_and_height_must_be_an_even_number')}`
+ }]
+ });
+ },
+
+ itemScaleByHeight: function (panel, data, getName) {
+ const niceName = t('scalebyheight');
+ if (getName) {
+ return niceName;
+ }
+
+ data = data ?? {};
+ const myId = Ext.id();
+
+ return new Ext.form.FormPanel({
+ id: myId,
+ style: 'margin-top: 10px',
+ border: true,
+ bodyStyle: 'padding: 10px;',
+ tbar: this.getTopBar(niceName, myId, panel),
+ items: [{
+ xtype: 'numberfield',
+ name: 'height',
+ fieldLabel: t('height'),
+ width: 250,
+ value: data.height
+ }, {
+ xtype: 'checkbox',
+ name: 'forceResize',
+ checked: (data['forceResize'] !== false),
+ fieldLabel: t('force_resize')
+ }, {
+ xtype: 'hidden',
+ name: 'type',
+ value: 'scaleByHeight'
+ }]
+ });
+ },
+
+ itemScaleByWidth: function (panel, data, getName) {
+ const niceName = t('scalebywidth');
+ if (getName) {
+ return niceName;
+ }
+
+ data = data ?? {};
+ const myId = Ext.id();
+
+ return new Ext.form.FormPanel({
+ id: myId,
+ style: 'margin-top: 10px',
+ border: true,
+ bodyStyle: 'padding: 10px;',
+ tbar: this.getTopBar(niceName, myId, panel),
+ items: [{
+ xtype: 'numberfield',
+ name: 'width',
+ fieldLabel: t('width'),
+ width: 250,
+ value: data.width
+ }, {
+ xtype: 'checkbox',
+ name: 'forceResize',
+ checked: (data['forceResize'] !== false),
+ fieldLabel: t('force_resize')
+ }, {
+ xtype: 'hidden',
+ name: 'type',
+ value: 'scaleByWidth'
+ }]
+ });
+ },
+
+ itemCut: function (panel, data, getName) {
+ const niceName = t('cut');
+ if (getName) {
+ return niceName;
+ }
+
+ data = data ?? { start: '00:00:00', duration: '00:00:00' };
+ const myId = Ext.id();
+
+ return new Ext.form.FormPanel({
+ id: myId,
+ style: 'margin-top: 10px',
+ border: true,
+ bodyStyle: 'padding: 10px;',
+ tbar: this.getTopBar(niceName, myId, panel),
+ items: [{
+ xtype: 'textfield',
+ name: 'start',
+ fieldLabel: t('start'),
+ width: 250,
+ value: data.start,
+ regex: /^\d*:?[0-5]\d:?[0-5]\d\.?\d*$/,
+ emptyText: 'HH:MM:SS.MS'
+ }, {
+ xtype: 'textfield',
+ name: 'duration',
+ fieldLabel: t('duration'),
+ width: 250,
+ value: data.duration,
+ regex: /^\d*:?[0-5]\d:?[0-5]\d\.?\d*$/,
+ emptyText: 'HH:MM:SS.MS'
+ }, {
+ xtype: 'hidden',
+ name: 'type',
+ value: 'cut'
+ }]
+ });
+ },
+
+ itemColorChannelMixer: function (panel, data, getName) {
+ const niceName = t('colorChannelMixer');
+ if (getName) {
+ return niceName;
+ }
+
+ data = data ?? { effect: 'bw' };
+ const myId = Ext.id();
+
+ return new Ext.form.FormPanel({
+ id: myId,
+ style: 'margin-top: 10px',
+ border: true,
+ bodyStyle: 'padding: 10px;',
+ tbar: this.getTopBar(niceName, myId, panel),
+ items: [{
+ xtype: 'combobox',
+ name: 'effect',
+ fieldLabel: t('effect'),
+ width: 450,
+ value: data.effect,
+ store: [
+ ['.9:0:0:0:0:1.1:0:0:0:0:1:0:0:0:0:1', 'Cold'],
+ ['.3:.4:.3:0:.3:.4:.3:0:.3:.4:.3', 'Grayscale'],
+ ['.393:.769:.189:0:.349:.686:.168:0:.272:.534:.131', 'Sepia'],
+ ],
+ required: true
+ }, {
+ xtype: 'hidden',
+ name: 'type',
+ value: 'colorChannelMixer'
+ }]
+ });
+ },
+
+ itemMute: function (panel, data, getName) {
+ const niceName = t('mute');
+ if (getName) {
+ return niceName;
+ }
+
+ const myId = Ext.id();
+
+ return new Ext.form.FormPanel({
+ id: myId,
+ style: 'margin-top: 10px',
+ border: true,
+ bodyStyle: 'padding: 10px;',
+ tbar: this.getTopBar(niceName, myId, panel),
+ items: [{
+ xtype: 'container',
+ html: t('this_filter_has_no_settings')
+ }, {
+ xtype: 'hidden',
+ name: 'type',
+ value: 'mute'
+ }]
+ });
+ },
+
+ itemSetFramerate: function (panel, data, getName) {
+ const niceName = t('setframerate');
+ if (getName) {
+ return niceName;
+ }
+
+ data = data ?? { fps: 1 };
+ const myId = Ext.id();
+
+ return new Ext.form.FormPanel({
+ id: myId,
+ style: 'margin-top: 10px',
+ border: true,
+ bodyStyle: 'padding: 10px;',
+ tbar: this.getTopBar(niceName, myId, panel),
+ items: [{
+ xtype: 'numberfield',
+ name: 'fps',
+ fieldLabel: t('fps'),
+ minValue: 1,
+ maxValue: 60,
+ width: 250,
+ value: data.fps
+ }, {
+ xtype: 'hidden',
+ name: 'type',
+ value: 'setFramerate'
+ }]
+ });
+ }
+};
\ No newline at end of file
diff --git a/templates/admin/index/index.html.twig b/templates/admin/index/index.html.twig
index e9c31409..eb760d99 100644
--- a/templates/admin/index/index.html.twig
+++ b/templates/admin/index/index.html.twig
@@ -255,6 +255,7 @@
"opendxp/settings/thumbnail/item.js",
"opendxp/settings/thumbnail/panel.js",
"opendxp/settings/videothumbnail/item.js",
+ "opendxp/settings/videothumbnail/items.js",
"opendxp/settings/videothumbnail/panel.js",
"opendxp/settings/translation.js",
"opendxp/settings/translationEditor.js",