ShinobiSystems
/
Shinobi
mirror of https://gitlab.com/Shinobi-Systems/Shinobi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update and Fix Live Grid (gridstack updated from 0.3 to 7.0)

disk-divisor
Moe 2022-10-21 18:28:36 -07:00
parent 696bbd2771
commit dcc18e9083
10 changed files with 71 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/assets/css/bs5.liveGrid.css
View File

@ -114,7 +114,7 @@
.data-menu.logs{list-style:none;}
.monitor_item .motionVision{display:none}
.monitor_item .grid-stack-item-content{width:100%!important;left:0!important;right:0!important}
.monitor_item .grid-stack-item-content{width:100%!important;left:0!important;right:0!important;height:100%;}
.monitor_item .ui-resizable-se {bottom: 10px!important;}
.monitor_item .stream-block{position: relative;text-align: center}
.monitor_item .mdl-data_window{overflow-x: auto;background:rgba(0,0,0,0.7);color:#fff;height:100%}
@ -124,7 +124,7 @@
.monitor_item.fullscreen img.stream-element{height:100%;width:auto}
.monitor_item.fullscreen canvas.stream-element{height:auto;width:auto;background-color:black;}
.monitor_item .stream-element{border: 0;object-fit: fill;height: 100%;width:100%}
.monitor_item{position:relative;padding:0;transition:none;background:#000}
.monitor_item{position:relative;padding:0;transition:none;background:#000;height:100%;}
.monitor_item .mdl-card{min-height:auto;border:1px solid #272727;border-radius:0px;overflow:hidden}
.monitor_item .mdl-card__media{height:100%;position:relative;padding:0!important;display:block!important;background:#000;}
.monitor_item.selected .stream-element{height:600px}
@ -212,3 +212,6 @@ img.circle-img,div.circle-img{border-radius:50%;height:50px;width:50px}
.dont-stretch-monitors .monitor_item .stream-element {
object-fit: contain!important;
}
.grid-stack-instance-1 > .grid-stack-item > .grid-stack-item-content {
inset: 0!important;
}

108
web/assets/js/bs5.liveGrid.js
View File

@ -3,6 +3,7 @@ var monitorPops = {}
var liveGridElements = {}
var runningJpegStreams = {}
var liveGrid = $('#monitors_live')
var liveGridData = null
var liveGridOpenCountElements = $('.liveGridOpenCount')
var liveGridOpenCount = 0
//
@ -28,7 +29,7 @@ function setLiveGridOpenCount(addOrRemove){
liveGridOpenCountElements.text(liveGridOpenCount)
}
function getLiveGridData(){
return liveGrid.data('gridstack')
return liveGridData
}
function getMonitorsPerRow(){
var x
@ -58,16 +59,18 @@ function getMonitorsPerRow(){
return x
}
function saveLiveGridBlockPositions() {
console.log('saveLiveGridBlockPositions')
var monitors = {}
liveGrid.find(" .monitor_item").each(function(n,v){
liveGrid.find(".grid-stack-item").each(function(n,v){
var el = $(v)
var monitorItem = el.find('.monitor_item')
var item = {}
item.ke = el.attr('data-ke')
item.mid = el.attr('data-mid')
item.x = el.attr('data-gs-x')
item.y = el.attr('data-gs-y')
item.height = el.attr('data-gs-height')
item.width = el.attr('data-gs-width')
item.ke = monitorItem.attr('data-ke')
item.mid = monitorItem.attr('data-mid')
item.x = el.attr('gs-x')
item.y = el.attr('gs-y')
item.height = el.attr('gs-h')
item.width = el.attr('gs-w')
monitors[item.ke+''+item.mid] = item
})
$user.details.monitorOrder = monitors;
@ -100,20 +103,24 @@ function buildStreamElementHtml(streamType){
return html
}
function attachVideoElementErrorHandler(monitorId){
var monitor = loadedMonitors[monitorId]
var monitorDetails = safeJsonParse(monitor.details)
var subStreamChannel = monitor.subStreamChannel
var streamType = subStreamChannel ? monitorDetails.substream ? monitorDetails.substream.output.stream_type : 'hls' : monitorDetails.stream_type
if(
streamType === 'flv' ||
streamType === 'hls'
){
var streamBlock = liveGridElements[monitorId].monitorItem.find('video.stream-block')
streamBlock[0].onerror = function(){
setTimeout(function(){
mainSocket.f({f:'monitor',ff:'watch_on',id:monitorId})
},2000)
try{
var monitor = loadedMonitors[monitorId]
var monitorDetails = safeJsonParse(monitor.details)
var subStreamChannel = monitor.subStreamChannel
var streamType = subStreamChannel ? monitorDetails.substream ? monitorDetails.substream.output.stream_type : 'hls' : monitorDetails.stream_type
if(
streamType === 'flv' ||
streamType === 'hls'
){
var streamBlock = liveGridElements[monitorId].streamElement
streamBlock[0].onerror = function(){
setTimeout(function(){
mainSocket.f({f:'monitor',ff:'watch_on',id:monitorId})
},2000)
}
}
}catch(err){
console.error(`Failed to Set Error Handler for Video Element`,err)
}
}
function resetMonitorCanvas(monitorId,initiateAfter,subStreamChannel){
@ -164,7 +171,7 @@ function buildLiveGridBlock(monitor){
data-ke="${monitor.ke}"
data-mid="${monitor.mid}"
data-mode="${monitor.mode}"
class="grid-stack-item monitor_item glM${monitor.mid} ${streamBlockInfo.gridBlockClass || ''}"
class="monitor_item glM${monitor.mid} ${streamBlockInfo.gridBlockClass || ''}"
>
<div class="grid-stack-item-content ui-draggable-handle">
<div class="stream-block no-padding mdl-card__media mdl-color-text--grey-50">
@ -258,8 +265,8 @@ function updateAllLiveGridElementsHeightWidth(monitorId){
function drawLiveGridBlock(monitorConfig,subStreamChannel){
var monitorId = monitorConfig.mid
if($('#monitor_live_' + monitorId).length === 0){
var x = 0;
var y = 0;
var x = null;
var y = null;
var monitorsPerRow = getMonitorsPerRow()
var width = monitorsPerRow
var height = width;
@ -273,7 +280,13 @@ function drawLiveGridBlock(monitorConfig,subStreamChannel){
width = saved.width;
height = saved.height;
}
liveGrid.data('gridstack').addWidget($(html), x, y, isSmallMobile ? 4 : height, isSmallMobile ? 4 : height, !monitorOrderEngaged);
liveGridData.addWidget({
x,
y,
h: isSmallMobile ? 4 : height,
w: isSmallMobile ? 4 : width,// !monitorOrderEngaged
content: html
});
var theBlock = $('#monitor_live_' + monitorId);
var streamElement = theBlock.find('.stream-element')
liveGridElements[monitorId] = {
@ -574,32 +587,35 @@ function revokeVideoPlayerUrl(monitorId){
}
function closeLiveGridPlayer(monitorId,killElement){
try{
var livePlayerElement = loadedLiveGrids[monitorId]
if(livePlayerElement){
if(livePlayerElement.hls){livePlayerElement.hls.destroy()}
if(livePlayerElement.Poseidon){livePlayerElement.Poseidon.stop()}
if(livePlayerElement.Base64){livePlayerElement.Base64.disconnect()}
if(livePlayerElement.dash){livePlayerElement.dash.reset()}
if(livePlayerElement.jpegInterval){
var loadedPlayer = loadedLiveGrids[monitorId]
if(loadedPlayer){
if(loadedPlayer.hls){loadedPlayer.hls.destroy()}
if(loadedPlayer.Poseidon){loadedPlayer.Poseidon.stop()}
if(loadedPlayer.Base64){loadedPlayer.Base64.disconnect()}
if(loadedPlayer.dash){loadedPlayer.dash.reset()}
if(loadedPlayer.jpegInterval){
stopJpegStream(monitorId)
}
$.each(onLiveStreamCloseExtensions,function(n,extender){
extender(livePlayerElement)
extender(loadedPlayer)
})
}
if(liveGridElements[monitorId])revokeVideoPlayerUrl(monitorId)
clearInterval(livePlayerElement.signal)
clearInterval(loadedPlayer.signal)
}catch(err){
console.log(err)
}
if(killElement){
var theElement = $('#monitor_live_'+monitorId)
if(theElement.length > 0){
getLiveGridData().removeWidget(theElement)
try{
if(killElement){
var livePlayerElement = liveGridElements[monitorId]
var theElement = livePlayerElement.monitorItem.parents('.grid-stack-item')[0]
getLiveGridData().removeWidget(theElement, true)
setLiveGridOpenCount(-1)
delete(loadedLiveGrids[monitorId])
delete(liveGridElements[monitorId])
}
}catch(err){
console.log(err)
}
}
function callMonitorToLiveGrid(v){
@ -984,18 +1000,15 @@ $(document).ready(function(e){
saveLiveGridBlockOpenState(monitorId,$user.ke,0)
},1000)
})
})
liveGrid
.gridstack({
cellHeight: 80,
verticalMargin: 0,
})
});
liveGridData = GridStack.init();
liveGridData
.on('dragstop', function(event,ui){
setTimeout(function(){
saveLiveGridBlockPositions()
},700)
})
.on('gsresizestop', function(){
.on('resizestop', function(){
// resetAllLiveGridDimensionsInMemory()
saveLiveGridBlockPositions()
});
@ -1026,6 +1039,7 @@ $(document).ready(function(e){
break;
case'monitor_watch_off':case'monitor_stopping':
var monitorId = d.mid || d.id
console.log('closeLiveGridPlayer',monitorId)
closeLiveGridPlayer(monitorId,(d.f === 'monitor_watch_off'))
break;
case'monitor_status':
@ -1142,9 +1156,9 @@ $(document).ready(function(e){
})
dashboardSwitchCallbacks.monitorOrder = function(toggleState){
if(toggleState !== 1){
$('.monitor_item').attr('data-gs-auto-position','yes')
$('.monitor_item').attr('gs-auto-position','yes')
}else{
$('.monitor_item').attr('data-gs-auto-position','no')
$('.monitor_item').attr('gs-auto-position','no')
}
}
dashboardSwitchCallbacks.dontMonStretch = function(toggleState){

1
web/assets/vendor/gridstack-extra.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
web/assets/vendor/gridstack.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
web/assets/vendor/js/gridstack-all.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
web/assets/vendor/js/gridstack.jQueryUI.min.js vendored
View File

@ -1,9 +0,0 @@
/**
* gridstack.js 0.3.0
* http://troolee.github.io/gridstack.js/
* (c) 2014-2016 Pavel Reznikov, Dylan Weiss
* gridstack.js may be freely distributed under the MIT license.
* @preserve
*/
!function(a){if("function"==typeof define&&define.amd)define(["jquery","lodash","gridstack","jquery-ui/data","jquery-ui/disable-selection","jquery-ui/focusable","jquery-ui/form","jquery-ui/ie","jquery-ui/keycode","jquery-ui/labels","jquery-ui/jquery-1-7","jquery-ui/plugin","jquery-ui/safe-active-element","jquery-ui/safe-blur","jquery-ui/scroll-parent","jquery-ui/tabbable","jquery-ui/unique-id","jquery-ui/version","jquery-ui/widget","jquery-ui/widgets/mouse","jquery-ui/widgets/draggable","jquery-ui/widgets/droppable","jquery-ui/widgets/resizable"],a);else if("undefined"!=typeof exports){try{jQuery=require("jquery")}catch(a){}try{_=require("lodash")}catch(a){}try{GridStackUI=require("gridstack")}catch(a){}a(jQuery,_,GridStackUI)}else a(jQuery,_,GridStackUI)}(function(a,b,c){function d(a){c.GridStackDragDropPlugin.call(this,a)}window;return c.GridStackDragDropPlugin.registerPlugin(d),d.prototype=Object.create(c.GridStackDragDropPlugin.prototype),d.prototype.constructor=d,d.prototype.resizable=function(c,d){if(c=a(c),"disable"===d||"enable"===d)c.resizable(d);else if("option"===d){var e=arguments[2],f=arguments[3];c.resizable(d,e,f)}else c.resizable(b.extend({},this.grid.opts.resizable,{start:d.start||function(){},stop:d.stop||function(){},resize:d.resize||function(){}}));return this},d.prototype.draggable=function(c,d){return c=a(c),"disable"===d||"enable"===d?c.draggable(d):c.draggable(b.extend({},this.grid.opts.draggable,{containment:this.grid.opts.isNested?this.grid.container.parent():null,start:d.start||function(){},stop:d.stop||function(){},drag:d.drag||function(){}})),this},d.prototype.droppable=function(b,c){return b=a(b),"disable"===c||"enable"===c?b.droppable(c):b.droppable({accept:c.accept}),this},d.prototype.isDroppable=function(b,c){return b=a(b),Boolean(b.data("droppable"))},d.prototype.on=function(b,c,d){return a(b).on(c,d),this},d});
//# sourceMappingURL=gridstack.min.map

13
web/assets/vendor/js/gridstack.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
web/assets/vendor/js/gridstack.min.map vendored
View File

File diff suppressed because one or more lines are too long

1
web/pages/blocks/footer.ejs
View File

@ -13,7 +13,6 @@
<script src="<%-window.libURL%>assets/vendor/js/placeholder.js"></script>
<script src="<%-window.libURL%>assets/vendor/js/lodash.min.js"></script>
<script src="<%-window.libURL%>assets/vendor/js/gridstack.min.js"></script>
<script src="<%-window.libURL%>assets/vendor/js/gridstack.jQueryUI.min.js"></script>
<script src="<%-window.libURL%>assets/vendor/js/jquery.canvasAreaDraw.js"></script>
<script src="<%-window.libURL%>assets/vendor/js/Chart.js"></script>
<script src="<%-window.libURL%>assets/vendor/js/clock.js"></script>

1
web/pages/blocks/header.ejs
View File

@ -29,7 +29,6 @@
<link rel="stylesheet" href="<%-window.libURL%>assets/vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<%-window.libURL%>assets/vendor/daterangepicker.css">
<link rel="stylesheet" href="<%-window.libURL%>assets/vendor/gridstack.min.css">
<link rel="stylesheet" href="<%-window.libURL%>assets/vendor/gridstack-extra.min.css">
<link rel="stylesheet" href="<%-window.libURL%>assets/vendor/jquery-ui.min.css">
<link rel="stylesheet" href="<%-window.libURL%>assets/css/clock.css">
<link rel="stylesheet" href="<%-window.libURL%>assets/css/bs5.liveGrid.css">