Add sizing options in timeline
Moe
parent
2ff4a6d35a
commit
08d0160be5
|
|
@ -9123,12 +9123,12 @@ module.exports = function(s,config,lang){
|
|||
"info": [
|
||||
{
|
||||
"fieldType": "div",
|
||||
"class": "row",
|
||||
"class": "row m-0",
|
||||
"id": "timeline-video-canvas",
|
||||
},
|
||||
{
|
||||
"fieldType": "div",
|
||||
"class": "row",
|
||||
"class": "row p-1 m-0",
|
||||
"id": "timeline-info",
|
||||
"divContent": `
|
||||
<div class="text-center">
|
||||
|
|
@ -9143,17 +9143,22 @@ module.exports = function(s,config,lang){
|
|||
<div class="d-flex flex-row">
|
||||
<div class="flex-grow-1">
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-sm btn-default" timeline-action="jumpLeft"><i class="fa fa-arrow-circle-left"></i></a>
|
||||
<a class="btn btn-sm btn-primary" timeline-action="playpause"><i class="fa fa-play-circle-o"></i></a>
|
||||
<a class="btn btn-sm btn-default" timeline-action="jumpRight"><i class="fa fa-arrow-circle-right"></i></a>
|
||||
<a class="btn btn-sm btn-default" timeline-action="jumpLeft" title="${lang.jumpFiveSeconds}"><i class="fa fa-arrow-circle-left"></i></a>
|
||||
<a class="btn btn-sm btn-primary" timeline-action="playpause" title="${lang.Play}/${lang.Pause}"><i class="fa fa-play-circle-o"></i></a>
|
||||
<a class="btn btn-sm btn-default" timeline-action="jumpRight" title="${lang.jumpFiveSeconds}"><i class="fa fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-sm btn-default btn-success" timeline-action="speed" speed="1">1</a>
|
||||
<a class="btn btn-sm btn-default" timeline-action="speed" speed="5">5</a>
|
||||
<a class="btn btn-sm btn-default" timeline-action="speed" speed="10">10</a>
|
||||
<a class="btn btn-sm btn-default" timeline-action="speed" speed="15">15</a>
|
||||
<a class="btn btn-sm btn-default btn-success" timeline-action="speed" speed="1" title="${lang.Speed} x1">x1</a>
|
||||
<a class="btn btn-sm btn-default" timeline-action="speed" speed="2" title="${lang.Speed} x2">x2</a>
|
||||
<a class="btn btn-sm btn-default" timeline-action="speed" speed="5" title="${lang.Speed} x5">x5</a>
|
||||
<a class="btn btn-sm btn-default" timeline-action="speed" speed="7" title="${lang.Speed} x7">x7</a>
|
||||
<a class="btn btn-sm btn-default" timeline-action="speed" speed="10" title="${lang.Speed} x10">x10</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-sm btn-default" timeline-action="gridSize" size="12">1</a>
|
||||
<a class="btn btn-sm btn-default btn-success" timeline-action="gridSize" size="6">2</a>
|
||||
<a class="btn btn-sm btn-default" timeline-action="gridSize" size="4">3</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div class="btn-group">
|
||||
|
|
@ -9167,6 +9172,11 @@ module.exports = function(s,config,lang){
|
|||
{
|
||||
"fieldType": "div",
|
||||
"id": "timeline-bottom-strip",
|
||||
},
|
||||
{
|
||||
"fieldType": "div",
|
||||
"id": "timeline-pre-buffers",
|
||||
"class": "hidden",
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
"Tile Size": "Tile Size",
|
||||
"fieldTextTileSize": "When in Accuracy Mode this is the size of each tile in pixels squared. A lower number will have higher accuracy but more resource use.",
|
||||
"Turn Speed": "Turn Speed",
|
||||
"Speed": "Speed",
|
||||
"Session Key": "Session Key",
|
||||
"Active Monitors": "Active Monitors",
|
||||
"Storage Use": "Storage Use",
|
||||
|
|
@ -1015,6 +1016,9 @@
|
|||
"File Not Exist": "File Not Exist",
|
||||
"No Videos Found": "No Videos Found",
|
||||
"activateRequiredLiveStream": "Live Stream is only available here with an Activated installation.",
|
||||
"activationRequired": "Activation Required",
|
||||
"jumpFiveSeconds": "Jump 5 Seconds",
|
||||
"featureRequiresActivationText": "The feature you are trying to use requires that your installation be activated. Please see the Help tab for more information.",
|
||||
"FileNotExistText": "Cannot save non existant file. Something went wrong.",
|
||||
"CameraNotRecordingText": "Settings may be incompatible. Check encoders. Restarting...",
|
||||
"Camera is not running": "Camera is not running",
|
||||
|
|
|
|||
|
|
@ -7,8 +7,15 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#timeline-video-canvas .timeline-video {
|
||||
height:350px;
|
||||
#timeline-video-canvas .timeline-video.col-md-4 {
|
||||
height:33%;
|
||||
}
|
||||
#timeline-video-canvas .timeline-video.col-md-6 {
|
||||
height: 50%;
|
||||
}
|
||||
#timeline-video-canvas .timeline-video.col-md-12 {
|
||||
height: 100%;
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
#timeline-video-canvas .timeline-video.no-video{
|
||||
background-color: #1f80f9;
|
||||
|
|
@ -17,6 +24,9 @@
|
|||
#timeline-video-canvas.show-only-playing .timeline-video.no-video{
|
||||
display: none;
|
||||
}
|
||||
#timeline-info {
|
||||
background: #004e8e;
|
||||
}
|
||||
#timeline-bottom-strip {
|
||||
background: rgba(0,0,0,0.6);
|
||||
height: 93px;
|
||||
|
|
|
|||
|
|
@ -18,9 +18,11 @@ var chartColors = {
|
|||
purple: 'rgb(153, 102, 255)',
|
||||
grey: 'rgb(201, 203, 207)'
|
||||
};
|
||||
var isAppleDevice = navigator.userAgent.match(/(iPod|iPhone|iPad)/)||(navigator.userAgent.match(/(Safari)/)&&!navigator.userAgent.match('Chrome'));
|
||||
var userAgent = navigator.userAgent;
|
||||
var isAppleDevice = userAgent.match(/(iPod|iPhone|iPad)/)||(navigator.userAgent.match(/(Safari)/)&&!navigator.userAgent.match('Chrome'));
|
||||
var isMobile = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|
||||
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))
|
||||
var isChromiumBased = userAgent.includes('Chrome') && !userAgent.includes('Edg') && !userAgent.includes('OPR') || userAgent.includes('Brave');
|
||||
var keyShortcuts = {}
|
||||
function base64ArrayBuffer(arrayBuffer) {
|
||||
var base64 = ''
|
||||
|
|
@ -1021,6 +1023,20 @@ function setSubmitButton(editorForm,text,icon,toggle){
|
|||
var submitButtons = editorForm.find('[type="submit"]').prop('disabled',toggle)
|
||||
submitButtons.html(`<i class="fa fa-${icon}"></i> ${text}`)
|
||||
}
|
||||
function featureIsActivated(showNotice){
|
||||
if(userHasSubscribed){
|
||||
return true
|
||||
}else{
|
||||
if(showNotice){
|
||||
new PNotify({
|
||||
title: lang.activationRequired,
|
||||
text: lang.featureRequiresActivationText,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
$(document).ready(function(){
|
||||
onInitWebsocket(function(){
|
||||
loadMonitorsIntoMemory(function(data){
|
||||
|
|
|
|||
|
|
@ -3,17 +3,21 @@ $(document).ready(function(){
|
|||
var timeStripEl = $('#timeline-bottom-strip');
|
||||
var timeStripControls = $('#timeline-controls');
|
||||
var timeStripInfo = $('#timeline-info');
|
||||
var timeStripPreBuffers = $('#timeline-pre-buffers');
|
||||
var playToggles = timeStripControls.find('[timeline-action="playpause"]')
|
||||
var speedButtons = timeStripControls.find('[timeline-action="speed"]')
|
||||
var gridSizeButtons = timeStripControls.find('[timeline-action="gridSize"]')
|
||||
var currentTimeLabel = timeStripInfo.find('.current-time')
|
||||
var timelineActionButtons = timeStripControls.find('[timeline-action]')
|
||||
var timelineSpeed = 1;
|
||||
var timelineGridSizing = `md-6`;
|
||||
var timeStripVis = null;
|
||||
var timeStripVisTick = null;
|
||||
var timeStripVisItems = null;
|
||||
var timeStripVisTickMovementInterval = null;
|
||||
var timeStripHollowClickQueue = {}
|
||||
var timeStripTickPosition = new Date()
|
||||
var timeStripPreBuffersEls = {}
|
||||
var loadedVideosOnTimeStrip = []
|
||||
var loadedVideosOnCanvas = {}
|
||||
var loadedVideoElsOnCanvas = {}
|
||||
|
|
@ -95,10 +99,13 @@ $(document).ready(function(){
|
|||
}
|
||||
function drawVideosToCanvas(selectedVideosByMonitorId){
|
||||
var html = ''
|
||||
var preBufferHtml = ''
|
||||
$.each(loadedMonitors,function(monitorId,monitor){
|
||||
html += `<div class="timeline-video col-md-6 p-0 m-0 no-video" data-mid="${monitorId}" data-ke="${monitor.ke}"></div>`
|
||||
html += `<div class="timeline-video col-${timelineGridSizing} p-0 m-0 no-video" data-mid="${monitorId}" data-ke="${monitor.ke}"></div>`
|
||||
preBufferHtml += `<div class="timeline-video-buffer" data-mid="${monitorId}" data-ke="${monitor.ke}"></div>`
|
||||
})
|
||||
timeStripVideoCanvas.html(html)
|
||||
timeStripPreBuffers.html(preBufferHtml)
|
||||
$.each(selectedVideosByMonitorId,function(monitorId,video){
|
||||
if(!video)return;
|
||||
setVideoInCanvas(video)
|
||||
|
|
@ -163,11 +170,17 @@ $(document).ready(function(){
|
|||
// make tick
|
||||
timeStripVisTick = timeStripVis.addCustomTime(new Date(), `${lang.Time}`);
|
||||
timeStripVis.on('click', async function(properties) {
|
||||
var currentlyPlaying = !!isPlaying;
|
||||
timeStripPlay(true)
|
||||
if(!timeChanging){
|
||||
var clickTime = properties.time;
|
||||
await resetTimeline(clickTime)
|
||||
}
|
||||
timeStripPlay(true)
|
||||
if(currentlyPlaying){
|
||||
setTimeout(() => {
|
||||
timeStripPlay()
|
||||
},500)
|
||||
}
|
||||
});
|
||||
timeStripVis.on('rangechange', function(properties){
|
||||
timeChanging = true
|
||||
|
|
@ -223,6 +236,9 @@ $(document).ready(function(){
|
|||
function getVideoElInCanvas(video){
|
||||
return getVideoContainerInCanvas(video).find('video')[0]
|
||||
}
|
||||
function getVideoContainerPreBufferEl(video){
|
||||
return timeStripPreBuffers.find(`[data-mid="${video.mid}"][data-ke="${video.ke}"]`)
|
||||
}
|
||||
function getWaitTimeUntilNextVideo(endTimeOfFirstVideo,startTimeOfNextVideo){
|
||||
return (new Date(startTimeOfNextVideo).getTime() - new Date(endTimeOfFirstVideo).getTime()) / timelineSpeed
|
||||
}
|
||||
|
|
@ -248,6 +264,7 @@ $(document).ready(function(){
|
|||
if(isPlaying)playVideo(vidEl)
|
||||
loadedVideoElsOnCanvas[monitorId] = vidEl
|
||||
loadedVideosOnCanvas[monitorId] = newVideo
|
||||
timeStripPreBuffersEls[monitorId] = getVideoContainerPreBufferEl(newVideo)
|
||||
queueNextVideo(newVideo)
|
||||
}
|
||||
function setTimeOfCanvasVideos(newTime){
|
||||
|
|
@ -268,8 +285,8 @@ $(document).ready(function(){
|
|||
var videoAfter = video.videoAfter
|
||||
videoEl.onerror = function(err){
|
||||
err.preventDefault()
|
||||
console.log(`queueNextVideo videoEl.onerror`)
|
||||
console.log(err)
|
||||
console.error(`video error`)
|
||||
console.error(err)
|
||||
}
|
||||
videoEl.ontimeupdate = function(){
|
||||
if(videoEl.currentTime >= videoEl.duration){
|
||||
|
|
@ -287,6 +304,8 @@ $(document).ready(function(){
|
|||
}
|
||||
}
|
||||
}
|
||||
// pre-buffer it
|
||||
timeStripPreBuffersEls[monitorId].html(videoAfter ? `<video preload="auto" muted src="${videoAfter.href}"></video>` : '')
|
||||
}
|
||||
function findVideoAfterTime(time, monitorId) {
|
||||
let inputTime = new Date(time);
|
||||
|
|
@ -415,6 +434,13 @@ $(document).ready(function(){
|
|||
setHollowClickQueue()
|
||||
if(currentlyPlaying)timeStripPlay();
|
||||
}
|
||||
function adjustTimelineGridSize(newCol){
|
||||
timelineGridSizing = `${newCol}`
|
||||
var containerEls = timeStripVideoCanvas.find('.timeline-video')
|
||||
containerEls.removeClass (function (index, className) {
|
||||
return (className.match (/(^|\s)col-\S+/g) || []).join(' ');
|
||||
}).addClass(`col-${newCol}`)
|
||||
}
|
||||
timelineActionButtons.click(function(){
|
||||
var el = $(this)
|
||||
var type = el.attr('timeline-action')
|
||||
|
|
@ -423,7 +449,9 @@ $(document).ready(function(){
|
|||
timeStripPlay()
|
||||
break;
|
||||
case'downloadAll':
|
||||
downloadAllPlayingVideos()
|
||||
if(featureIsActivated(true)){
|
||||
downloadAllPlayingVideos()
|
||||
}
|
||||
break;
|
||||
case'jumpLeft':
|
||||
jumpTimeline(5000,'left')
|
||||
|
|
@ -433,8 +461,16 @@ $(document).ready(function(){
|
|||
break;
|
||||
case'speed':
|
||||
var speed = parseInt(el.attr('speed'))
|
||||
adjustTimelineSpeed(speed)
|
||||
speedButtons.removeClass('btn-success')
|
||||
if(featureIsActivated(true)){
|
||||
adjustTimelineSpeed(speed)
|
||||
speedButtons.removeClass('btn-success')
|
||||
el.addClass('btn-success')
|
||||
}
|
||||
break;
|
||||
case'gridSize':
|
||||
var size = `md-${parseInt(el.attr('size'))}`
|
||||
adjustTimelineGridSize(size)
|
||||
gridSizeButtons.removeClass('btn-success')
|
||||
el.addClass('btn-success')
|
||||
break;
|
||||
}
|
||||
|
|
@ -451,4 +487,9 @@ $(document).ready(function(){
|
|||
// destroyTimeline()
|
||||
timeStripPlay(true)
|
||||
})
|
||||
if(isChromiumBased){
|
||||
[ 7, 10 ].forEach((speed) => {
|
||||
timeStripControls.find(`[timeline-action="speed"][speed="${speed}"]`).remove()
|
||||
});
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue