From bde719997d4218add89c491893042a078eaa7bb7 Mon Sep 17 00:00:00 2001 From: Omar Sweidan Date: Tue, 10 May 2022 12:59:03 +0200 Subject: [PATCH] =?utf8?q?Start=20of=20media=20kezel=C3=A9se=20lej=C3=A1ts?= =?utf8?q?z=C3=B3ban?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- .../LOCAL/settings/application.yaml | 2 +- server/user.mediacube.gui/css/searchitems.css | 498 ++++++++++-------- server/user.mediacube.gui/js/searchitems.js | 161 ++++-- server/user.mediacube.gui/pages/joblist.zul | 1 + server/user.mediacube.gui/pages/jobs.zul | 1 + .../user.mediacube.gui/pages/searchitems.zul | 16 +- .../jobengine/zk/model/ListSearchModel.java | 13 +- 7 files changed, 415 insertions(+), 277 deletions(-) diff --git a/server/-product/production/LOCAL/settings/application.yaml b/server/-product/production/LOCAL/settings/application.yaml index 7b51132e..ff4fd17e 100644 --- a/server/-product/production/LOCAL/settings/application.yaml +++ b/server/-product/production/LOCAL/settings/application.yaml @@ -23,7 +23,7 @@ datasource: password: VDani services: ffmpeg: - execurable-location: /opt/ffmpeg/ffmpeg + executable-location: /opt/ffmpeg/ffmpeg mediacube: proxy-root: /data/mediacube nexio: diff --git a/server/user.mediacube.gui/css/searchitems.css b/server/user.mediacube.gui/css/searchitems.css index 38c5c1c9..4c7832aa 100644 --- a/server/user.mediacube.gui/css/searchitems.css +++ b/server/user.mediacube.gui/css/searchitems.css @@ -1,224 +1,274 @@ -@charset "UTF-8"; - -.myimg { - margin: 5px; - border: 1px solid #CFCFCF; -} - -div.z-row-content span { - font-family: Tahoma, Arial, serif; - background: none; - background-image: none; -} - -.z-row .z-detail-outer { - padding: 3px 6px; -} - -.heavy { - font-weight: bold; - font-family: Tahoma, Arial, serif; -} - -.ir { -/* ir == informationResult */ - font-weight: bold; - font-family: Tahoma, Arial, serif; - color: green; -} - -.details { - padding: 5px; - line-height: 1.5em; - font-size: 10px; -} - -.relevant { - padding: 8px; - font-size: 10px; -} - -.rhl { - color: #E53935; - font-weight: bold; -} - -.z-row:hover>.z-row-inner, .z-row:hover>.z-cell { - background: none; - background-image: none; -} - -.z-row:hover>.z-row-inner>.z-row-content { - color: black; - background: none; - background-image: none; -} - -.RED100 .z-toolbarbutton-content { - background: #FFCDD2; -} - -.RED200 .z-toolbarbutton-content { - background: #EF9A9A; -} - -.BROWN100 .z-toolbarbutton-content { -/* background: #D7CCC8; */ - background: none; - background-image: none; -} - -.YELLOW200 .z-toolbarbutton-content { - background: #FFF59D; -} - -.INDIGO100 .z-toolbarbutton-content { - background: #C5CAE9; -} - -.INDIGO200 .z-toolbarbutton-content { - background: #9FA8DA; -} - -.BLUE100 .z-toolbarbutton-content { - background: #BBDEFB; -} - -.BLUE200 .z-toolbarbutton-content { - background: #90CAF9; -} - -.TEAL100 .z-toolbarbutton-content { - background: #B2DFDB; -} - -.TEAL200 .z-toolbarbutton-content { - background: #80CBC4; -} - -.typefilter { - font-size: 9px; - padding: 0px; - margin: 0px; - background: none; -} - -.toolbar { - padding: 1px; - background: none; - border: 0px; -} - -.z-toolbarbutton:hover { -/* background: transparent; */ - background: none; - background-image: none; -} - -.ie8 .z-toolbarbutton:active { - background: transparent; -} - -.ie8 .z-toolbarbutton-checked { -/* background: transparent; */ - background: none; - background-image: none; -} - -.z-toolbarbutton-content { - text-shadow: none; - background: transparent; -} - -.buttonBold { - font-weight: bold; - width: 200px; -} - -.menuButtons { - display: flex; - justify-content: space-around; - flex-wrap: wrap; - padding: 5px 20px 5px 20px; - align-content: space-around; -} - -.menuButtons>button { - width: 200px; -} - -.z-messagebox-window { - top: 40% !important; - width: 30% !important; -} - -.z-toolbar-start { - width: 100%; -} - -.myVideoDiv-dimensions { - width: 100%; - height: 100%; -} - -.vjs-error { - width: 100%; - height: 100%; -} - -.vjs-modal-dialog-content { - width: 100%; - height: 100%; - display: none; -} - -.vjs-no-js { - width: 100%; - height: 100%; -} - -.z-notification-content { - width: auto; - min-width: 400px; -} - -/* .z-listitem.z-listitem-selected>.z-listcell{ */ -/* background: red; */ -/* background-image: none; */ -/* } */ - -/* .z-listitem.z-listitem>.z-listcell:checked{ */ -/* background: green; */ -/* background-image: none; */ -/* } */ - - -/* -LIST -*/ - -.z-listitem.z-listitem-selected>.z-listcell { - background: #F1F8E9; -} - -.z-listitem.z-listitem-selected:hover>.z-listcell { - background: #F1F8E9; -} - -.z-listitem.z-listitem-selected.z-listitem-focus>.z-listcell { - background: #F1F8E9; -} - -.z-listitem.z-listitem-selected.z-listitem-focus:hover>.z-listcell { - background: #F1F8E9; -} - -.z-listitem-focus>.z-listcell { - background: #F1F8E9; -} - -.z-listitem-selected>.z-listcell>.z-listcell-content>.z-listitem-checkable .z-listitem-icon.z-icon-radio - { - background: #F1F8E9; -} - +@charset "UTF-8"; + +.myimg { + margin: 5px; + border: 1px solid #CFCFCF; +} + +div.z-row-content span { + font-family: Tahoma, Arial, serif; + background: none; + background-image: none; +} + +.z-row .z-detail-outer { + padding: 3px 6px; +} + +.heavy { + font-weight: bold; + font-family: Tahoma, Arial, serif; +} + +.ir { +/* ir == informationResult */ + font-weight: bold; + font-family: Tahoma, Arial, serif; + color: green; +} + +.details { + padding: 5px; + line-height: 1.5em; + font-size: 10px; +} + +.relevant { + padding: 8px; + font-size: 10px; +} + +.rhl { + color: #E53935; + font-weight: bold; +} + +.z-row:hover>.z-row-inner, .z-row:hover>.z-cell { + background: none; + background-image: none; +} + +.z-row:hover>.z-row-inner>.z-row-content { + color: black; + background: none; + background-image: none; +} + +.RED100 .z-toolbarbutton-content { + background: #FFCDD2; +} + +.RED200 .z-toolbarbutton-content { + background: #EF9A9A; +} + +.BROWN100 .z-toolbarbutton-content { +/* background: #D7CCC8; */ + background: none; + background-image: none; +} + +.YELLOW200 .z-toolbarbutton-content { + background: #FFF59D; +} + +.INDIGO100 .z-toolbarbutton-content { + background: #C5CAE9; +} + +.INDIGO200 .z-toolbarbutton-content { + background: #9FA8DA; +} + +.BLUE100 .z-toolbarbutton-content { + background: #BBDEFB; +} + +.BLUE200 .z-toolbarbutton-content { + background: #90CAF9; +} + +.TEAL100 .z-toolbarbutton-content { + background: #B2DFDB; +} + +.TEAL200 .z-toolbarbutton-content { + background: #80CBC4; +} + +.typefilter { + font-size: 9px; + padding: 0px; + margin: 0px; + background: none; +} + +.toolbar { + padding: 1px; + background: none; + border: 0px; +} + +.z-toolbarbutton:hover { +/* background: transparent; */ + background: none; + background-image: none; +} + +.ie8 .z-toolbarbutton:active { + background: transparent; +} + +.ie8 .z-toolbarbutton-checked { +/* background: transparent; */ + background: none; + background-image: none; +} + +.z-toolbarbutton-content { + text-shadow: none; + background: transparent; +} + +.buttonBold { + font-weight: bold; + width: 200px; +} + +.menuButtons { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + padding: 5px 20px 5px 20px; + align-content: space-around; +} + +.menuButtons>button { + width: 200px; +} + +.z-messagebox-window { + top: 40% !important; + width: 30% !important; +} + +.z-toolbar-start { + width: 100%; +} + +.myVideoDiv-dimensions { + width: 100%; + height: 100%; +} + +.vjs-error { + width: 100%; + height: 100%; +} + +.vjs-modal-dialog-content { + width: 100%; + height: 100%; + display: none; +} + +.vjs-no-js { + width: 100%; + height: 100%; +} + +.z-notification-content { + width: auto; + min-width: 400px; +} + +/* .z-listitem.z-listitem-selected>.z-listcell{ */ +/* background: red; */ +/* background-image: none; */ +/* } */ + +/* .z-listitem.z-listitem>.z-listcell:checked{ */ +/* background: green; */ +/* background-image: none; */ +/* } */ + + +/* +LIST +*/ + +.z-listitem.z-listitem-selected>.z-listcell { + background: #F1F8E9; +} + +.z-listitem.z-listitem-selected:hover>.z-listcell { + background: #F1F8E9; +} + +.z-listitem.z-listitem-selected.z-listitem-focus>.z-listcell { + background: #F1F8E9; +} + +.z-listitem.z-listitem-selected.z-listitem-focus:hover>.z-listcell { + background: #F1F8E9; +} + +.z-listitem-focus>.z-listcell { + background: #F1F8E9; +} + +.z-listitem-selected>.z-listcell>.z-listcell-content>.z-listitem-checkable .z-listitem-icon.z-icon-radio { + background: #F1F8E9; +} + +.video-js .vjs-remaining-time, +.vjs-no-flex .vjs-remaining-time { + display: none; +} + +.vjs-time-divider { + display: none; + line-height: 3em; + visibility: hidden; +} + +.video-js .vjs-timebox { + display: block; + line-height: 3em; + width: 25%; +} + +.video-js .vjs-currenttimebox { + display: block; + line-height: 3em; + width: 25%; + font-weight: 900; +} + +.vjs-has-started .vjs-control-bar { + flex-wrap: wrap; + justify-content: flex-end; +} + +.video-js .vjs-timecode-container, +.vjs-no-flex .vjs-timecode-container, +.video-js.vjs-layout-tiny .vjs-timecode-container { + display: inherit; + background: rgba(43, 51, 63, 0.7); + flex-wrap: wrap; + justify-content: flex-end; + height: auto; + position: absolute; + bottom: 30px; + left: 0; /* kötelező, ha teljes szélességű timecode-container-t akarunk */ + right: 0; /* kötelező, ha teljes szélességű timecode-container-t akarunk */ +} + +.vjs-menu .vjs-menu-content { + display: block; + padding: 0; + margin: 0; + font-family: Arial, Helvetica, sans-serif; + overflow: auto; + z-index: 2; +} \ No newline at end of file diff --git a/server/user.mediacube.gui/js/searchitems.js b/server/user.mediacube.gui/js/searchitems.js index 6956ffc0..a14fe5d0 100644 --- a/server/user.mediacube.gui/js/searchitems.js +++ b/server/user.mediacube.gui/js/searchitems.js @@ -3,37 +3,27 @@ function addButton(player, id, text, icon, callback){ var button = videojs.getComponent('Button'); var breakButton = videojs.extend(button, { - constructor: function() { - button.apply(this, arguments); - this.controlText(text); - this.addClass(icon); - - }, - handleClick: function() { - callback(); - } + constructor: function() { + button.apply(this, arguments); + this.controlText(text); + this.addClass(icon); + }, + handleClick: function() { + callback(); + } }); videojs.registerComponent(id, breakButton); player.getChild('controlBar').addChild(id, {}); } -function createPlayer() { - var player = videojs('myVideoDiv', { +function createPlayer() { + player = videojs('myVideoDiv', { controls : true, preload : "auto", controlBar: { - pictureInPictureToggle: false, - _children: [ - "playToggle", - "volumeMenuButton", - "durationDisplay", - "timeDivider", - "currentTimeDisplay", - "progressControl", - "remainingTimeDisplay", - "fullscreenToggle" - ] - }, + pictureInPictureToggle: false + }, + _userActions: { hotkeys: function(event){ //console.log(event.which); @@ -78,13 +68,42 @@ function createPlayer() { return player; } - +var startOfMedia= 0; var player = createPlayer(); -function setSource(src, srcType) { - console.log("setSource", player, src); +player.ready(function(){ + var container; + var start; + var current; + var end; + var duration; + + this.on('loadedmetadata', function(){ + container= player.getChild('controlBar').addChild('timecodeContainer'); + start= container.addChild('startTime'); + current= container.addChild('currentTime'); + end= container.addChild('endTime'); + duration= container.addChild('duration'); + start.updateTextContent(SMPTEToString(secondsToSMPTEWithSOM(0))); + current.updateTextContent(SMPTEToString(secondsToSMPTEWithSOM(player.currentTime()))); + end.updateTextContent(SMPTEToString(secondsToSMPTEWithSOM(player.duration()))); + duration.updateTextContent(SMPTEToString(secondsToSMPTE(player.duration()))); + }); + + this.on('timeupdate', function(){ + current.updateTextContent(SMPTEToString(secondsToSMPTEWithSOM(player.currentTime()))); + }); +}); + +function setSource(src, srcType, som) { + console.log("setSource", src, srcType, som); + if(player != null){ - if(src != null) { + if(som > 0){ + startOfMedia= som; + } + + if(src != null) { player.src({ type : srcType, src : src @@ -117,6 +136,19 @@ function secondsToSMPTE(seconds) { return {h: hours, m: minutes, s: seconds, f: f}; } +function secondsToSMPTEWithSOM(seconds) { + seconds= seconds + startOfMedia; + + var f = Math.floor((seconds % 1) * 25); + var seconds = Math.floor(seconds); + var minutes = Math.floor(seconds / 60); + var hours = Math.floor(minutes / 60); + minutes = minutes % 60; + seconds = seconds % 60; + + return {h: hours, m: minutes, s: seconds, f: f}; +} + function SMPTEToString(timecode) { if (timecode.h < 10) { timecode.h = "0" + timecode.h; } if (timecode.m < 10) { timecode.m = "0" + timecode.m; } @@ -125,12 +157,80 @@ function SMPTEToString(timecode) { return timecode.h + ":" + timecode.m + ":" + timecode.s + ":" + timecode.f; } - + function customTimeFormat(seconds) { - return SMPTEToString(secondsToSMPTE(seconds)); + return SMPTEToString(secondsToSMPTE(seconds)); } +videojs.setFormatTime(customTimeFormat); + +var Component = videojs.getComponent('Component'); + +var timecodeContainer = videojs.extend(Component, { + constructor: function(player, options) { + Component.apply(this, arguments); + + if (options.text) { + this.updateTextContent(options.text); + } + }, + + createEl: function() { + return videojs.dom.createEl('div', { + className: 'vjs-timecode-container' + }); + }, + updateTextContent: function(text) { + + videojs.dom.emptyEl(this.el()); + videojs.dom.appendContent(this.el(), text); + } +}); +videojs.registerComponent('timecodeContainer', timecodeContainer); -//videojs.setFormatTime(customTimeFormat); +var timeBox = videojs.extend(timecodeContainer, { + constructor: function(player, options) { + Component.apply(this, arguments); + + if (options.text) { + this.updateTextContent(options.text); + } + }, + + createEl: function() { + return videojs.dom.createEl('div', { + className: 'vjs-timebox' + }); + }, + updateTextContent: function(text) { + videojs.dom.emptyEl(this.el()); + videojs.dom.appendContent(this.el(), text); + } +}); + +var currenttimeBox = videojs.extend(timecodeContainer, { + constructor: function(player, options) { + Component.apply(this, arguments); + + if (options.text) { + this.updateTextContent(options.text); + } + }, + + createEl: function() { + return videojs.dom.createEl('div', { + className: 'vjs-currenttimebox' + }); + }, + updateTextContent: function(text) { + videojs.dom.emptyEl(this.el()); + videojs.dom.appendContent(this.el(), text); + } +}); + +videojs.registerComponent('startTime', timeBox); +videojs.registerComponent('currentTime', currenttimeBox); +videojs.registerComponent('endTime', timeBox); +videojs.registerComponent('duration', timeBox); function createBreakPoint() { var current = player.currentTime(); @@ -178,7 +278,6 @@ function addMediaTags(tags) { mediaTagify.addTags(tags); } - function onTag(e) { // console.log("onTag", e); diff --git a/server/user.mediacube.gui/pages/joblist.zul b/server/user.mediacube.gui/pages/joblist.zul index 50a823c1..aac353e8 100644 --- a/server/user.mediacube.gui/pages/joblist.zul +++ b/server/user.mediacube.gui/pages/joblist.zul @@ -4,6 +4,7 @@ +