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

Clean up regular video player ui and fix quick seek by event click

merge-requests/367/head
Moe 2022-07-12 15:09:14 -07:00
parent 9438b16b27
commit 4ab3eb76d3
1 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
web/assets/js/bs5.videoPlayer.js
View File

@ -1,20 +1,20 @@
function getVideoPlayerTabId(video){
return `videoPlayer-${video.mid}-${moment(video.time).format('YYYY-MM-DD-HH-mm-ss')}`
}
$(document).ready(function(){
var theBlock = $('#tab-videoPlayer')
window.createVideoPlayerTab = function(video,timeStart){
window.getVideoPlayerTabId = function(video){
return `videoPlayer-${video.mid}-${moment(video.time).format('YYYY-MM-DD-HH-mm-ss')}`
}
window.createVideoPlayerTab = function(video){
var newTabId = getVideoPlayerTabId(video)
var humanStartTime = formattedTime(video.time,true)
var humanEndTime = formattedTime(video.end,true)
var tabLabel = `<b>${lang['Video']}</b> : ${loadedMonitors[video.mid].name} : ${formattedTime(video.time,true)}`
var videoUrl = getApiPrefix(`videos`) + '/' + video.mid + '/' + video.filename
var videoUrl = getLocation() + video.href
var hasRows = video.events && video.events.length > 0
var loadedEvents = {}
var eventMatrixHtml = ``
if(hasRows){
var objectsFound = {}
eventMatrixHtml += `<div class="border-top-dotted border-top-dark pt-2 mt-2"><h3>${lang.Events}</h3></div>`
eventMatrixHtml += `<h3>${lang.Events}</h3>`
$.each(video.events,function(n,theEvent){
loadedEvents[new Date(theEvent.time)] = theEvent
var objectsFound = {}
@ -35,46 +35,46 @@ $(document).ready(function(){
})
eventMatrixHtml += `</div>`
}
var baseHtml = `<main class="container page-tab tab-videoPlayer" id="tab-${newTabId}" video-id="${video.mid}${video.time}" data-mid="${video.mid}" data-time="${video.time}">
<div class="mt-3 ${definitions.Theme.isDark ? 'bg-dark text-white' : 'bg-light text-dark'} rounded shadow-sm" style="overflow:hidden">
<div class="d-flex flex-row">
<div class="flex-grow-1">
<h6 class="video-title border-bottom-dotted border-bottom-dark p-3 mb-0">${tabLabel}</h6>
</div>
<div>
<a class="btn btn-default btn-sm delete-tab-dynamic"><i class="fa fa-times"></i></a>
</div>
var baseHtml = `<main class="container page-tab tab-videoPlayer" id="tab-${newTabId}" video-id="${video.mid}${video.time}" data-time="${video.time}" data-mid="${video.mid}">
<div class="my-3 ${definitions.Theme.isDark ? 'bg-dark text-white' : 'bg-light text-dark'} rounded shadow-sm">
<div class="p-3">
<h6 class="video-title border-bottom-dotted border-bottom-dark pb-2 mb-0">${tabLabel}</h6>
</div>
<div style="position: relative">
<div class="tab-videoPlayer-event-objects" style="position: absolute;width: 100%; height: 100%; z-index: 10"></div>
<video class="tab-videoPlayer-video-element" controls autoplay src="${videoUrl}"></video>
</div>
<div class="d-flex flex-row">
<div class="d-block p-3">
<b class="flex-grow-1">${lang.Started}</b>
<div class="video-time">${humanStartTime}</div>
</div>
<div class="d-block p-3">
<b class="flex-grow-1">${lang.Ended}</b>
<div class="video-end">${humanEndTime}</div>
</div>
</div>
<div class="mb-3">
${eventMatrixHtml}
</div>
<div class="d-flex flex-row">
<div class="flex-grow-1 bg-gradient-blue">
<a class="btn btn-block px-1 py-3 ${definitions.Theme.isDark ? 'text-white' : 'text-dark'}" download href="${videoUrl}"><i class="fa fa-download"></i> ${lang.Download}</a>
</div>
<div class="flex-grow-1 bg-gradient-orange">
<a class="btn btn-block px-1 py-3 delete-video ${definitions.Theme.isDark ? 'text-white' : 'text-dark'}"><i class="fa fa-trash-o"></i> ${lang.Delete}</a>
<div class="p-3">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<b class="flex-grow-1">${lang.Started}</b>
<div class="video-time">${humanStartTime}</div>
</div>
<div class="col-md-6">
<b class="flex-grow-1">${lang.Ended}</b>
<div class="video-end">${humanEndTime}</div>
</div>
</div>
<div class="d-block pt-4">
<div class="btn-group btn-group-justified">
<a class="btn btn-sm btn-success" download href="${videoUrl}"><i class="fa fa-download"></i> ${lang.Download}</a>
<a class="btn btn-sm btn-danger delete-video"><i class="fa fa-trash-o"></i> ${lang.Delete}</a>
</div>
</div>
</div>
<div class="col-md-6">
${eventMatrixHtml}
</div>
</div>
</div>
</div>
</main>`
var tabCreateResponse = createNewTab(newTabId,tabLabel,baseHtml,{},null,'videoPlayer')
var videoElement = tabCreateResponse.theTab.find('.tab-videoPlayer-video-element')[0]
console.log(tabCreateResponse)
if(!tabCreateResponse.existAlready){
var videoElement = tabCreateResponse.theTab.find('.tab-videoPlayer-video-element')[0]
var videoObjectContainer = tabCreateResponse.theTab.find('.tab-videoPlayer-event-objects')
var videoHeight = videoObjectContainer.height()
var videoWidth = videoObjectContainer.width()
@ -92,7 +92,6 @@ $(document).ready(function(){
}
}
}
if(timeStart)videoElement.currentTime = timeStart;
}
window.closeVideoPlayer = function(tabId){
console.log('closeVideoPlayer')
@ -155,5 +154,6 @@ $(document).ready(function(){
var newVideoTimeIndex = timeIndex - videoTime
console.log(newVideoTimeIndex)
videoEl[0].currentTime = newVideoTimeIndex
videoEl[0].play()
})
})