Recent Videos now shows videos as "Day Cards"
Moe
parent
7b025de306
commit
6d91234f11
|
|
@ -56,6 +56,6 @@
|
|||
.video-time-needle-event {
|
||||
border-left: 3px solid #828282;
|
||||
}
|
||||
.video-day {
|
||||
.video-day-slice {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -876,6 +876,14 @@ $(document).ready(function(){
|
|||
deleteTab(tabName)
|
||||
return false;
|
||||
})
|
||||
.on('click','.delete-tab-dynamic',function(e){
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
var tabName = $(this).parents('.page-tab').attr('id').replace('tab-','')
|
||||
goBackOneTab()
|
||||
deleteTab(tabName)
|
||||
return false;
|
||||
})
|
||||
.on('click','[page-open]',function(){
|
||||
var el = $(this)
|
||||
var pageChoice = el.attr('page-open')
|
||||
|
|
|
|||
|
|
@ -11,12 +11,14 @@ $(document).ready(function(){
|
|||
}
|
||||
function drawDaysToList(videos,toBegin){
|
||||
var videosSortedByDays = sortVideosByDays(videos)
|
||||
$.each(videosSortedByDays,function(dayKey,videos){
|
||||
var copyOfVideos = ([]).concat(videos).reverse()
|
||||
theList.append(createDayCard(copyOfVideos,dayKey))
|
||||
var theChildren = theList.children()
|
||||
var createdCardCarrier = toBegin ? theChildren.first() : theChildren.last()
|
||||
bindFrameFindingByMouseMoveForDay(createdCardCarrier,dayKey,copyOfVideos)
|
||||
$.each(videosSortedByDays,function(groupKey,days){
|
||||
$.each(days,function(dayKey,videos){
|
||||
var copyOfVideos = ([]).concat(videos).reverse()
|
||||
theList.append(createDayCard(copyOfVideos,dayKey))
|
||||
var theChildren = theList.children()
|
||||
var createdCardCarrier = toBegin ? theChildren.first() : theChildren.last()
|
||||
bindFrameFindingByMouseMoveForDay(createdCardCarrier,dayKey,copyOfVideos)
|
||||
})
|
||||
})
|
||||
}
|
||||
function loadVideos(options,callback){
|
||||
|
|
@ -24,11 +26,11 @@ $(document).ready(function(){
|
|||
getVideos(options,function(data){
|
||||
var html = ``
|
||||
var videos = data.videos || []
|
||||
$.each(videos,function(n,row){
|
||||
var createdCardCarrier = drawRowToList(row,false,true)
|
||||
bindFrameFindingByMouseMove(createdCardCarrier,row)
|
||||
})
|
||||
// drawDaysToList(videos,false)
|
||||
// $.each(videos,function(n,row){
|
||||
// var createdCardCarrier = drawRowToList(row,false,true)
|
||||
// bindFrameFindingByMouseMove(createdCardCarrier,row)
|
||||
// })
|
||||
drawDaysToList(videos,false)
|
||||
getCountOfEvents({
|
||||
monitorId: options.monitorId,
|
||||
})
|
||||
|
|
@ -59,7 +61,7 @@ $(document).ready(function(){
|
|||
liveStamp()
|
||||
})
|
||||
})
|
||||
addOnTabReopen('initial', function () {
|
||||
theBlock.find('.recent-videos-refresh').click(function(){
|
||||
var theSelected = `${monitorList.val()}`
|
||||
drawMonitorListToSelector(monitorList.find('optgroup'))
|
||||
monitorList.val(theSelected)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
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){
|
||||
var newTabId = `videoPlayer-${video.mid}-${moment(video.time).format('YYYY-MM-DD-HH-mm-ss')}`
|
||||
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)}`
|
||||
|
|
@ -32,38 +35,44 @@ $(document).ready(function(){
|
|||
})
|
||||
eventMatrixHtml += `</div>`
|
||||
}
|
||||
var baseHtml = `<main class="container page-tab tab-videoPlayer" id="tab-${newTabId}" video-id="${video.mid}${video.time}">
|
||||
<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>
|
||||
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>
|
||||
</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="p-3">
|
||||
<div class="d-block">
|
||||
<a class="btn btn-sm btn-success" download href="${videoUrl}"><i class="fa fa-download"></i> ${lang.Download}</a>
|
||||
</div>
|
||||
<div class="d-block">
|
||||
<b class="flex-grow-1">${lang.Started}</b>
|
||||
<div class="video-time">${humanStartTime}</div>
|
||||
</div>
|
||||
<div class="d-block">
|
||||
<b class="flex-grow-1">${lang.Ended}</b>
|
||||
<div class="video-end">${humanEndTime}</div>
|
||||
</div>
|
||||
<div class="d-block">
|
||||
${eventMatrixHtml}
|
||||
</div>
|
||||
<small class="d-block text-end mt-3">
|
||||
<a class="go-back btn badge">${lang['Back']}</a>
|
||||
</small>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</main>`
|
||||
var tabCreateResponse = createNewTab(newTabId,tabLabel,baseHtml,{},null,'videoPlayer')
|
||||
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')
|
||||
|
|
|
|||
|
|
@ -71,7 +71,10 @@ function getFrameOnVideoRow(percentageInward,video){
|
|||
var foundFrame = video.timelapseFrames.find(function(row){
|
||||
return new Date(row.time) > timeAdded
|
||||
});
|
||||
return foundFrame
|
||||
return {
|
||||
foundFrame: foundFrame,
|
||||
timeAdded: timeAdded,
|
||||
}
|
||||
}
|
||||
function getVideoFromDay(percentageInward,videos){
|
||||
var startTime = new Date(videos[0].time)
|
||||
|
|
@ -96,13 +99,13 @@ function bindFrameFindingByMouseMove(createdCardCarrier,video){
|
|||
var amountMoved = evt.pageX - offest.left
|
||||
var percentMoved = amountMoved / elementWidth * 100
|
||||
percentMoved = percentMoved > 100 ? 100 : percentMoved < 0 ? 0 : percentMoved
|
||||
var frameFound = getFrameOnVideoRow(percentMoved,video)
|
||||
var frameFound = getFrameOnVideoRow(percentMoved,video).frameFound
|
||||
if(frameFound){
|
||||
timeImg.css('background-image',`url(${frameFound.href})`)
|
||||
}
|
||||
timeNeedleSeeker.css('left',`${amountMoved}px`)
|
||||
})
|
||||
timeImg.css('background-image',`url(${getFrameOnVideoRow(1,video).href})`)
|
||||
timeImg.css('background-image',`url(${getFrameOnVideoRow(1,video).frameFound.href})`)
|
||||
}else{
|
||||
if(video.events.length === 0){
|
||||
timeStrip.hide()
|
||||
|
|
@ -151,32 +154,39 @@ function bindFrameFindingByMouseMoveForDay(createdCardCarrier,dayKey,videos){
|
|||
}
|
||||
})
|
||||
if(hasFrames){
|
||||
var videoSlices = createdCardElement.find('.video-day')
|
||||
var videoSlices = createdCardElement.find('.video-day-slice')
|
||||
var videoTimeLabel = createdCardElement.find('.video-time-label')
|
||||
var currentlySelected = null
|
||||
createdCardElement.on('mousemove',function(evt){
|
||||
var offest = createdCardElement.offset()
|
||||
var elementWidth = createdCardElement.width() + 2
|
||||
var amountMoved = evt.pageX - offest.left
|
||||
var percentMoved = amountMoved / elementWidth * 100
|
||||
percentMoved = percentMoved > 100 ? 100 : percentMoved < 0 ? 0 : percentMoved
|
||||
var videoFound = getVideoFromDay(percentMoved,videos)
|
||||
console.log(percentMoved,videos,videoSliceAmountMoved,videoSlicePercentMoved)
|
||||
createdCardElement.find(`[data-video-time]`).css('background-color','')
|
||||
createdCardElement.find(`[data-time]`).css('background-color','')
|
||||
if(videoFound){
|
||||
console.log('videoFound!!!!',videoFound.time)
|
||||
var videoSlice = createdCardElement.find(`[data-video-time="${videoFound.time}"]`).css('background-color','rgba(0,0,0,0.3)')
|
||||
var videoSlice = createdCardElement.find(`[data-time="${videoFound.time}"]`).css('background-color','rgba(0,0,0,0.3)')
|
||||
var videoSliceOffest = videoSlice.offset()
|
||||
var videoSliceElementWidth = videoSlice.width()
|
||||
console.log('videoSliceElementWidth',videoSliceElementWidth)
|
||||
var videoSliceAmountMoved = evt.pageX - videoSliceOffest.left
|
||||
var videoSlicePercentMoved = videoSliceAmountMoved / videoSliceElementWidth * 100
|
||||
videoSlicePercentMoved = videoSlicePercentMoved > 100 ? 100 : videoSlicePercentMoved < 0 ? 0 : videoSlicePercentMoved
|
||||
var frameFound = getFrameOnVideoRow(videoSlicePercentMoved,videoFound)
|
||||
var result = getFrameOnVideoRow(videoSlicePercentMoved,videoFound)
|
||||
var frameFound = result.foundFrame
|
||||
videoTimeLabel.text(result.timeAdded)
|
||||
if(frameFound){
|
||||
console.log('frameFound!!!!',frameFound)
|
||||
timeImg.css('background-image',`url(${frameFound.href})`)
|
||||
if(currentlySelected !== videoFound){
|
||||
timeNeedleSeeker.attr('video-time-seeked-video-position',videoFound.time)
|
||||
timeNeedleSeeker.attr('data-mid',videoFound.mid)
|
||||
}
|
||||
}
|
||||
currentlySelected = videoFound
|
||||
}
|
||||
timeNeedleSeeker.css('left',`${amountMoved}px`)
|
||||
timeNeedleSeeker.css('left',`${percentMoved}%`)
|
||||
})
|
||||
createdCardElement.trigger('mousemove')
|
||||
}
|
||||
}
|
||||
function getPercentOfTimePositionFromVideo(video,theEvent){
|
||||
|
|
@ -186,8 +196,6 @@ function getPercentOfTimePositionFromVideo(video,theEvent){
|
|||
var rangeMax = endTime - startTime
|
||||
var eventMs = eventTime - startTime
|
||||
var percentChanged = eventMs / rangeMax * 100
|
||||
|
||||
console.log(`percentChanged`,percentChanged)
|
||||
return percentChanged
|
||||
}
|
||||
function createVideoRow(row,classOverride){
|
||||
|
|
@ -242,8 +250,9 @@ function sortVideosByDays(videos){
|
|||
videos.forEach(function(video){
|
||||
var videoTime = new Date(video.time)
|
||||
var theDayKey = `${videoTime.getDate()}-${videoTime.getMonth()}-${videoTime.getFullYear()}`
|
||||
if(!days[theDayKey])days[theDayKey] = [];
|
||||
days[theDayKey].push(video)
|
||||
if(!days[video.mid])days[video.mid] = {};
|
||||
if(!days[video.mid][theDayKey])days[video.mid][theDayKey] = [];
|
||||
days[video.mid][theDayKey].push(video)
|
||||
})
|
||||
return days
|
||||
}
|
||||
|
|
@ -255,14 +264,13 @@ function getVideoPercentWidthForDay(row,videos){
|
|||
var stripEndTime = new Date(videos[videos.length - 1].end)
|
||||
var stripTimeDifference = stripEndTime - stripStartTime
|
||||
var percent = (timeDifference / stripTimeDifference) * 100
|
||||
console.log(percent,100 - percent)
|
||||
return percent
|
||||
}
|
||||
function createDayCard(videos,dayKey,classOverride){
|
||||
var html = ''
|
||||
var eventMatrixHtml = ``
|
||||
$.each(videos,function(n,row){
|
||||
eventMatrixHtml += `<div class="video-day" data-video-time="${row.time}" style="width:${getVideoPercentWidthForDay(row,videos)}%;position:relative">`
|
||||
eventMatrixHtml += `<div class="video-day-slice" data-mid="${row.mid}" data-time="${row.time}" style="width:${getVideoPercentWidthForDay(row,videos)}%;position:relative">`
|
||||
if(row.events && row.events.length > 0){
|
||||
$.each(row.events,function(n,theEvent){
|
||||
var leftPercent = getPercentOfTimePositionFromVideo(row,theEvent)
|
||||
|
|
@ -276,9 +284,10 @@ function createDayCard(videos,dayKey,classOverride){
|
|||
<div class="card shadow-lg px-0 btn-default">
|
||||
<div class="card-header d-flex flex-row">
|
||||
<div class="flex-grow-1 ${definitions.Theme.isDark ? 'text-white' : ''}">
|
||||
<span class="video-time-label">${videos[0].time} to ${videos[videos.length - 1].end}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-time-img">
|
||||
<div class="video-time-img" style="background-image: url(${videos[0].timelapseFrames ? videos[0].timelapseFrames[0].href : ''})">
|
||||
|
||||
</div>
|
||||
<div class="video-time-strip card-footer p-0">
|
||||
|
|
@ -322,7 +331,6 @@ function getVideos(options,callback){
|
|||
var videos = data.videos
|
||||
$.getJSON(`${getApiPrefix(`timelapse`)}${monitorId ? `/${monitorId}` : ''}?${requestQueries.join('&')}`,function(timelapseFrames){
|
||||
$.getJSON(`${getApiPrefix(`events`)}${monitorId ? `/${monitorId}` : ''}?${requestQueries.join('&')}`,function(eventData){
|
||||
console.log(timelapseFrames)
|
||||
var newVideos = applyDataListToVideos(videos,eventData)
|
||||
newVideos = applyTimelapseFramesListToVideos(newVideos,timelapseFrames,'timelapseFrames',true)
|
||||
$.each(newVideos,function(n,video){
|
||||
|
|
@ -360,10 +368,11 @@ function getEvents(options,callback){
|
|||
onWebSocketEvent(function(d){
|
||||
switch(d.f){
|
||||
case'video_delete':
|
||||
console.log(d)
|
||||
$('[file="'+d.filename+'"][mid="'+d.mid+'"]:not(.modal)').remove();
|
||||
$('[data-file="'+d.filename+'"][data-mid="'+d.mid+'"]:not(.modal)').remove();
|
||||
$('[data-time-formed="'+(new Date(d.time))+'"][data-mid="'+d.mid+'"]:not(.modal)').remove();
|
||||
var videoPlayerId = getVideoPlayerTabId(d)
|
||||
deleteTab(videoPlayerId)
|
||||
// if($.powerVideoWindow.currentDataObject&&$.powerVideoWindow.currentDataObject[d.filename]){
|
||||
// delete($.timelapse.currentVideos[$.powerVideoWindow.currentDataObject[d.filename].position])
|
||||
// $.powerVideoWindow.drawTimeline(false)
|
||||
|
|
@ -385,6 +394,13 @@ $(document).ready(function(){
|
|||
var video = loadedVideosInMemory[`${monitorId}${videoTime}`]
|
||||
createVideoPlayerTab(video)
|
||||
})
|
||||
.on('click','[video-time-seeked-video-position]',function(){
|
||||
var el = $(this)
|
||||
var monitorId = el.attr('data-mid')
|
||||
var videoTime = el.attr('video-time-seeked-video-position')
|
||||
var video = loadedVideosInMemory[`${monitorId}${videoTime}`]
|
||||
createVideoPlayerTab(video)
|
||||
})
|
||||
.on('click','.delete-video',function(){
|
||||
var el = $(this).parents('[data-mid]')
|
||||
var monitorId = el.attr('data-mid')
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
<div class="my-3 p-3 <%- define.Theme.isDark ? 'bg-dark text-white' : 'bg-light' %> rounded shadow-sm" id="recentVideos">
|
||||
<h4 class="mb-3 pb-3 <%- define.Theme.isDark ? 'text-white' : '' %> border-bottom-dotted border-color-blue row">
|
||||
<div class="col-md-8">
|
||||
<div class="col-md-7">
|
||||
<%- lang['Recent Videos'] %>
|
||||
</div>
|
||||
<div class="col-md-1 text-right">
|
||||
<a class="btn btn-primary btn-sm recent-videos-refresh"> <i class="fa fa-refresh"> </i></a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<select class="form-control form-control-sm <%- define.Theme.isDark ? 'btn-dark' : '' %> text-start monitors_list" type="text" id="recentVideosMonitorId">
|
||||
<option value=""><%- lang['All Monitors'] %></option>
|
||||
|
|
|
|||
Loading…
Reference in New Issue