password: VDani\r
services:\r
ffmpeg:\r
- execurable-location: /opt/ffmpeg/ffmpeg \r
+ executable-location: /opt/ffmpeg/ffmpeg \r
mediacube:\r
proxy-root: /data/mediacube\r
nexio:\r
-@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";\r
+\r
+.myimg {\r
+ margin: 5px;\r
+ border: 1px solid #CFCFCF;\r
+}\r
+\r
+div.z-row-content span {\r
+ font-family: Tahoma, Arial, serif;\r
+ background: none;\r
+ background-image: none;\r
+}\r
+\r
+.z-row .z-detail-outer {\r
+ padding: 3px 6px;\r
+}\r
+\r
+.heavy {\r
+ font-weight: bold;\r
+ font-family: Tahoma, Arial, serif;\r
+}\r
+\r
+.ir {\r
+/* ir == informationResult */\r
+ font-weight: bold;\r
+ font-family: Tahoma, Arial, serif;\r
+ color: green;\r
+}\r
+\r
+.details {\r
+ padding: 5px;\r
+ line-height: 1.5em;\r
+ font-size: 10px;\r
+}\r
+\r
+.relevant {\r
+ padding: 8px;\r
+ font-size: 10px;\r
+}\r
+\r
+.rhl {\r
+ color: #E53935;\r
+ font-weight: bold;\r
+}\r
+\r
+.z-row:hover>.z-row-inner, .z-row:hover>.z-cell {\r
+ background: none;\r
+ background-image: none;\r
+}\r
+\r
+.z-row:hover>.z-row-inner>.z-row-content {\r
+ color: black;\r
+ background: none;\r
+ background-image: none;\r
+}\r
+\r
+.RED100 .z-toolbarbutton-content {\r
+ background: #FFCDD2;\r
+}\r
+\r
+.RED200 .z-toolbarbutton-content {\r
+ background: #EF9A9A;\r
+}\r
+\r
+.BROWN100 .z-toolbarbutton-content {\r
+/* background: #D7CCC8; */\r
+ background: none;\r
+ background-image: none;\r
+}\r
+\r
+.YELLOW200 .z-toolbarbutton-content {\r
+ background: #FFF59D;\r
+}\r
+\r
+.INDIGO100 .z-toolbarbutton-content {\r
+ background: #C5CAE9; \r
+}\r
+\r
+.INDIGO200 .z-toolbarbutton-content {\r
+ background: #9FA8DA;\r
+}\r
+\r
+.BLUE100 .z-toolbarbutton-content {\r
+ background: #BBDEFB;\r
+}\r
+\r
+.BLUE200 .z-toolbarbutton-content {\r
+ background: #90CAF9;\r
+}\r
+\r
+.TEAL100 .z-toolbarbutton-content {\r
+ background: #B2DFDB;\r
+}\r
+\r
+.TEAL200 .z-toolbarbutton-content {\r
+ background: #80CBC4;\r
+}\r
+\r
+.typefilter {\r
+ font-size: 9px;\r
+ padding: 0px;\r
+ margin: 0px;\r
+ background: none;\r
+}\r
+\r
+.toolbar {\r
+ padding: 1px;\r
+ background: none;\r
+ border: 0px;\r
+}\r
+\r
+.z-toolbarbutton:hover {\r
+/* background: transparent; */\r
+ background: none;\r
+ background-image: none;\r
+}\r
+\r
+.ie8 .z-toolbarbutton:active {\r
+ background: transparent;\r
+}\r
+\r
+.ie8 .z-toolbarbutton-checked {\r
+/* background: transparent; */\r
+ background: none;\r
+ background-image: none;\r
+}\r
+\r
+.z-toolbarbutton-content {\r
+ text-shadow: none;\r
+ background: transparent;\r
+}\r
+\r
+.buttonBold {\r
+ font-weight: bold;\r
+ width: 200px;\r
+}\r
+\r
+.menuButtons {\r
+ display: flex;\r
+ justify-content: space-around;\r
+ flex-wrap: wrap;\r
+ padding: 5px 20px 5px 20px;\r
+ align-content: space-around;\r
+}\r
+\r
+.menuButtons>button {\r
+ width: 200px;\r
+}\r
+\r
+.z-messagebox-window {\r
+ top: 40% !important;\r
+ width: 30% !important;\r
+}\r
+\r
+.z-toolbar-start {\r
+ width: 100%;\r
+}\r
+\r
+.myVideoDiv-dimensions {\r
+ width: 100%;\r
+ height: 100%;\r
+}\r
+\r
+.vjs-error {\r
+ width: 100%;\r
+ height: 100%;\r
+}\r
+\r
+.vjs-modal-dialog-content {\r
+ width: 100%;\r
+ height: 100%;\r
+ display: none;\r
+}\r
+\r
+.vjs-no-js {\r
+ width: 100%;\r
+ height: 100%;\r
+}\r
+\r
+.z-notification-content {\r
+ width: auto;\r
+ min-width: 400px;\r
+}\r
+\r
+/* .z-listitem.z-listitem-selected>.z-listcell{ */\r
+/* background: red; */\r
+/* background-image: none; */\r
+/* } */\r
+\r
+/* .z-listitem.z-listitem>.z-listcell:checked{ */\r
+/* background: green; */\r
+/* background-image: none; */\r
+/* } */\r
+\r
+\r
+/*\r
+LIST\r
+*/\r
+\r
+.z-listitem.z-listitem-selected>.z-listcell {\r
+ background: #F1F8E9;\r
+}\r
+\r
+.z-listitem.z-listitem-selected:hover>.z-listcell {\r
+ background: #F1F8E9;\r
+}\r
+\r
+.z-listitem.z-listitem-selected.z-listitem-focus>.z-listcell {\r
+ background: #F1F8E9;\r
+}\r
+\r
+.z-listitem.z-listitem-selected.z-listitem-focus:hover>.z-listcell {\r
+ background: #F1F8E9;\r
+}\r
+\r
+.z-listitem-focus>.z-listcell {\r
+ background: #F1F8E9;\r
+}\r
+\r
+.z-listitem-selected>.z-listcell>.z-listcell-content>.z-listitem-checkable .z-listitem-icon.z-icon-radio {\r
+ background: #F1F8E9;\r
+}\r
+\r
+.video-js .vjs-remaining-time,\r
+.vjs-no-flex .vjs-remaining-time {\r
+ display: none;\r
+}\r
+\r
+.vjs-time-divider {\r
+ display: none;\r
+ line-height: 3em;\r
+ visibility: hidden;\r
+}\r
+\r
+.video-js .vjs-timebox {\r
+ display: block;\r
+ line-height: 3em;\r
+ width: 25%;\r
+}\r
+\r
+.video-js .vjs-currenttimebox {\r
+ display: block;\r
+ line-height: 3em;\r
+ width: 25%;\r
+ font-weight: 900;\r
+}\r
+\r
+.vjs-has-started .vjs-control-bar {\r
+ flex-wrap: wrap;\r
+ justify-content: flex-end;\r
+}\r
+\r
+.video-js .vjs-timecode-container,\r
+.vjs-no-flex .vjs-timecode-container,\r
+.video-js.vjs-layout-tiny .vjs-timecode-container {\r
+ display: inherit;\r
+ background: rgba(43, 51, 63, 0.7);\r
+ flex-wrap: wrap;\r
+ justify-content: flex-end;\r
+ height: auto;\r
+ position: absolute;\r
+ bottom: 30px;\r
+ left: 0; /* kötelező, ha teljes szélességű timecode-container-t akarunk */\r
+ right: 0; /* kötelező, ha teljes szélességű timecode-container-t akarunk */\r
+}\r
+\r
+.vjs-menu .vjs-menu-content {\r
+ display: block;\r
+ padding: 0;\r
+ margin: 0;\r
+ font-family: Arial, Helvetica, sans-serif;\r
+ overflow: auto;\r
+ z-index: 2;\r
+}
\ No newline at end of file
function addButton(player, id, text, icon, callback){\r
var button = videojs.getComponent('Button');\r
var breakButton = videojs.extend(button, {\r
- constructor: function() {\r
- button.apply(this, arguments);\r
- this.controlText(text);\r
- this.addClass(icon);\r
-\r
- },\r
- handleClick: function() {\r
- callback();\r
- }\r
+ constructor: function() {\r
+ button.apply(this, arguments);\r
+ this.controlText(text);\r
+ this.addClass(icon);\r
+ },\r
+ handleClick: function() {\r
+ callback();\r
+ }\r
});\r
videojs.registerComponent(id, breakButton);\r
player.getChild('controlBar').addChild(id, {}); \r
}\r
\r
-function createPlayer() {\r
- var player = videojs('myVideoDiv', {\r
+function createPlayer() { \r
+ player = videojs('myVideoDiv', {\r
controls : true,\r
preload : "auto",\r
controlBar: {\r
- pictureInPictureToggle: false,\r
- _children: [\r
- "playToggle",\r
- "volumeMenuButton",\r
- "durationDisplay",\r
- "timeDivider",\r
- "currentTimeDisplay",\r
- "progressControl",\r
- "remainingTimeDisplay",\r
- "fullscreenToggle"\r
- ]\r
- },\r
+ pictureInPictureToggle: false\r
+ }, \r
+ \r
_userActions: {\r
hotkeys: function(event){\r
//console.log(event.which);\r
return player;\r
}\r
\r
-\r
+var startOfMedia= 0;\r
var player = createPlayer();\r
\r
-function setSource(src, srcType) {\r
- console.log("setSource", player, src);\r
+player.ready(function(){\r
+ var container;\r
+ var start;\r
+ var current;\r
+ var end;\r
+ var duration;\r
+ \r
+ this.on('loadedmetadata', function(){ \r
+ container= player.getChild('controlBar').addChild('timecodeContainer');\r
+ start= container.addChild('startTime'); \r
+ current= container.addChild('currentTime');\r
+ end= container.addChild('endTime');\r
+ duration= container.addChild('duration');\r
+ start.updateTextContent(SMPTEToString(secondsToSMPTEWithSOM(0)));\r
+ current.updateTextContent(SMPTEToString(secondsToSMPTEWithSOM(player.currentTime())));\r
+ end.updateTextContent(SMPTEToString(secondsToSMPTEWithSOM(player.duration())));\r
+ duration.updateTextContent(SMPTEToString(secondsToSMPTE(player.duration())));\r
+ });\r
+ \r
+ this.on('timeupdate', function(){\r
+ current.updateTextContent(SMPTEToString(secondsToSMPTEWithSOM(player.currentTime())));\r
+ });\r
+});\r
+\r
+function setSource(src, srcType, som) {\r
+ console.log("setSource", src, srcType, som);\r
+ \r
if(player != null){\r
- if(src != null) { \r
+ if(som > 0){\r
+ startOfMedia= som;\r
+ }\r
+ \r
+ if(src != null) {\r
player.src({\r
type : srcType,\r
src : src\r
return {h: hours, m: minutes, s: seconds, f: f};\r
}\r
\r
+function secondsToSMPTEWithSOM(seconds) {\r
+ seconds= seconds + startOfMedia;\r
+ \r
+ var f = Math.floor((seconds % 1) * 25);\r
+ var seconds = Math.floor(seconds);\r
+ var minutes = Math.floor(seconds / 60);\r
+ var hours = Math.floor(minutes / 60);\r
+ minutes = minutes % 60;\r
+ seconds = seconds % 60;\r
+\r
+ return {h: hours, m: minutes, s: seconds, f: f};\r
+}\r
+\r
function SMPTEToString(timecode) {\r
if (timecode.h < 10) { timecode.h = "0" + timecode.h; }\r
if (timecode.m < 10) { timecode.m = "0" + timecode.m; }\r
\r
return timecode.h + ":" + timecode.m + ":" + timecode.s + ":" + timecode.f;\r
}\r
-\r
+ \r
function customTimeFormat(seconds) {\r
- return SMPTEToString(secondsToSMPTE(seconds));\r
+ return SMPTEToString(secondsToSMPTE(seconds));\r
}\r
+videojs.setFormatTime(customTimeFormat);\r
+\r
+var Component = videojs.getComponent('Component');\r
+\r
+var timecodeContainer = videojs.extend(Component, {\r
+ constructor: function(player, options) {\r
+ Component.apply(this, arguments);\r
+\r
+ if (options.text) {\r
+ this.updateTextContent(options.text);\r
+ }\r
+ },\r
+\r
+ createEl: function() {\r
+ return videojs.dom.createEl('div', {\r
+ className: 'vjs-timecode-container'\r
+ });\r
+ },\r
+ updateTextContent: function(text) {\r
+ \r
+ videojs.dom.emptyEl(this.el());\r
+ videojs.dom.appendContent(this.el(), text);\r
+ }\r
+});\r
+videojs.registerComponent('timecodeContainer', timecodeContainer);\r
\r
-//videojs.setFormatTime(customTimeFormat); \r
+var timeBox = videojs.extend(timecodeContainer, {\r
+ constructor: function(player, options) {\r
+ Component.apply(this, arguments);\r
+\r
+ if (options.text) {\r
+ this.updateTextContent(options.text);\r
+ }\r
+ },\r
+\r
+ createEl: function() {\r
+ return videojs.dom.createEl('div', {\r
+ className: 'vjs-timebox'\r
+ });\r
+ },\r
+ updateTextContent: function(text) {\r
+ videojs.dom.emptyEl(this.el());\r
+ videojs.dom.appendContent(this.el(), text);\r
+ }\r
+});\r
+\r
+var currenttimeBox = videojs.extend(timecodeContainer, {\r
+ constructor: function(player, options) {\r
+ Component.apply(this, arguments);\r
+\r
+ if (options.text) {\r
+ this.updateTextContent(options.text);\r
+ }\r
+ },\r
+\r
+ createEl: function() {\r
+ return videojs.dom.createEl('div', {\r
+ className: 'vjs-currenttimebox'\r
+ });\r
+ },\r
+ updateTextContent: function(text) {\r
+ videojs.dom.emptyEl(this.el());\r
+ videojs.dom.appendContent(this.el(), text);\r
+ }\r
+});\r
+\r
+videojs.registerComponent('startTime', timeBox);\r
+videojs.registerComponent('currentTime', currenttimeBox);\r
+videojs.registerComponent('endTime', timeBox);\r
+videojs.registerComponent('duration', timeBox);\r
\r
function createBreakPoint() {\r
var current = player.currentTime();\r
mediaTagify.addTags(tags);\r
}\r
\r
-\r
function onTag(e) {\r
// console.log("onTag", e);\r
\r
<!DOCTYPE xml>\r
\r
<zk xmlns:w="http://www.zkoss.org/2005/zk/client" xmlns:ca="client/attribute" xmlns:x="xhtml">\r
+ <link rel="shortcut icon" href="#"/>\r
<style src="/css/joblist.css" />\r
\r
<!-- csak igy jo a list sebessege -->\r
<!DOCTYPE xml>\r
\r
<zk xmlns:w="http://www.zkoss.org/2005/zk/client" xmlns:ca="client/attribute" xmlns:x="xhtml">\r
+ <link rel="shortcut icon" href="#"/>\r
<tabbox id="pagesTab" vflex="true" hflex="true" orient="top">\r
<tabs visible="true">\r
<tab id="tab0" label="Futó folyamatok" selected="true" />\r
\r
<!-- tag deklarációja -->\r
<?component name="search-filters" inline="true" macroURI="searchitems/filters.zul"?>\r
-<?component name="search-results" if inline="true" macroURI="searchitems/tabulatorresults.zul"?>\r
+<?component name="search-results" if inline="true" macroURI="searchitems/listresults.zul"?>\r
<?component name="item-details" inline="true" macroURI="searchitems/details.zul"?>\r
\r
<!DOCTYPE xml>\r
<!-- <style src="https://vjs.zencdn.net/7.18.1/video-js.css"/> -->\r
<!-- <h:script src="https://vjs.zencdn.net/7.18.1/video.min.js"/> -->\r
\r
-\r
- <style src="/css/video-js.css?v=3" />\r
- <style src="/css/searchitems.css" /> \r
- <style src="/css/tagify.css" /> \r
+ <style src="/css/video-js.css" />\r
+ <style src="/css/searchitems.css" />\r
+ <style src="/css/tagify.css" />\r
\r
<h:script src="/js/tagify.min.js" />\r
<h:script src="/js/video.js" />\r
document.selection.empty();\r
}\r
}\r
-\r
- \r
</script>\r
\r
<!-- csak igy jo a list sebessege -->\r
\r
- <div id="scdiv" width="100%" height="100%" viewModel="@id('vm') @init('user.jobengine.zk.model.TabulatorSearchModel')">\r
+ <div id="scdiv" width="100%" height="100%" viewModel="@id('vm') @init('user.jobengine.zk.model.ListSearchModel')">\r
<timer id="timer" delay="500" repeats="false" onTimer="@command('uiTick')" />\r
<div id="tagListener" onChange="@command('onTagChanged')" />\r
\r
<borderlayout height="100%" width="100%">\r
<north border="none" size="60%" splittable="true" minsize="250" collapsible="true">\r
<div align="center" height="100%" width="100%">\r
- <h:video-js id="myVideoDiv" class="video-js vjs-big-play-centered" \r
- data-setup='{"inactivityTimeout": 0}'\r
+ <h:video-js id="myVideoDiv" class="video-js vjs-big-play-centered"\r
style="width: 100%;height: 100%">\r
</h:video-js>\r
<div id="videoListener" onCreateBreakPoint="@command('onCreateBreakPoint')"/>\r
// Clients.evalJavaScript("setSource('http://localhost:9080/services/proxy/20209535_1-20205617.mp4',\r
// 'video/mp4')");\r
logger.info("afterCompose");\r
+ Clients.evalJavaScript("setSource('https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8', 'application/x-mpegURL', 100)");\r
\r
try {\r
Selectors.wireComponents(view, this, false);\r
private void configureSearchResultListbox() {\r
logger.info("configureSearchResultListbox");\r
if (itemsListbox != null && itemsListbox.getHeads().size() == 1) {\r
-// if (itemsListbox.getItemCount() > 0) {\r
Paging paging = itemsListbox.getPagingChild();\r
paging.setAutohide(false);\r
-// Listhead listhead = (Listhead) itemsListbox.getHeads().iterator().next();\r
-// logger.info("next");\r
-// for (Component header : itemsListbox.getListhead(). getHeads()) {\r
-// Listhead column = (Listhead) header;\r
-// if (columnOrder != null)\r
-// if (column.getAttribute("label").equals(columnOrder.entrySet().iterator().next().getKey()))\r
-// column.setAttribute("label", columnOrder.entrySet().iterator().next().getValue());\r
-// column.addEventListener("onSort", evt -> doSort(evt));\r
-// }\r
-// }\r
}\r
}\r
\r
\r
@NotifyChange({ "selectedObject", "hasLowresMediaFile", "hasTSMMediaFile", "lowresMediaFilePath" })\r
public void setSelectedObject(ArchivedMedia selectedObject) {\r
+ logger.info("setSelectedObject()");\r
this.selectedObject = selectedObject;\r
if (selectedObject != null) {\r
long mediaId = selectedObject.getMedia().getId();\r
https://git.useribm.hu / mediacube.git / commitdiff