zoneminder/web/skins/classic/views/js/timeline.js

var events = {};

function showEvent( eid, fid, width, height )
{    
    var url = '?view=event&eid='+eid+'&fid='+fid;
    url += filterQuery;
    var pop=createPopup( url, 'zmEvent', 'event', width, height );
    pop.vid=$('preview');
    
    //video element is blocking video elements elsewhere in chrome possible interaction with mouseover event?
    //FIXME unless an exact cause can be determined should store all video controls and do something to the other controls when we want to load a new video seek etc or whatever may block
    /*var vid= $('preview');
    vid.oncanplay=null;
//    vid.currentTime=vid.currentTime-0.1;
    vid.pause();*/
}

function createEventHtml( event, frame )
{
    var eventHtml = new Element( 'div' );

    if ( event.Archived > 0 )
        eventHtml.addClass( 'archived' );

    new Element( 'p' ).inject( eventHtml ).set( 'text', monitors[event.MonitorId].Name );
    new Element( 'p' ).inject( eventHtml ).set( 'text', event.Name+(frame?("("+frame.FrameId+")"):"") );
    new Element( 'p' ).inject( eventHtml ).set( 'text', event.StartTime+" - "+event.Length+"s" );
    new Element( 'p' ).inject( eventHtml ).set( 'text', event.Cause );
    if ( event.Notes )
        new Element( 'p' ).inject( eventHtml ).set( 'text', event.Notes );
    if ( event.Archived > 0 )
        new Element( 'p' ).inject( eventHtml ).set( 'text', archivedString );

    return( eventHtml );
}

function showEventDetail( eventHtml )
{
    $('instruction').addClass( 'hidden' );
    $('eventData').empty();
    $('eventData').adopt( eventHtml );
    $('eventData').removeClass( 'hidden' );
}

function eventDataResponse( respObj, respText )
{
    var event = respObj.event;
    if ( !event )
    {
        console.log( "Null event" );
        return;
    }
    events[event.Id] = event;

    if ( respObj.loopback )
    {
        requestFrameData( event.Id, respObj.loopback );
    }
}

function frameDataResponse( respObj, respText )
{
    var frame = respObj.frameimage;
    if ( !frame.FrameId )
    {
        console.log( "Null frame" );
        return;
    }

    var event = events[frame.EventId];
    if ( !event )
    {
        console.error( "No event "+frame.eventId+" found" );
        return;
    }

    if ( !event['frames'] )
        event['frames'] = new Object();

    event['frames'][frame.FrameId] = frame;
    event['frames'][frame.FrameId]['html'] = createEventHtml( event, frame );

    previewEvent(frame.EventId, frame.FrameId);
}

var eventQuery = new Request.JSON( { url: thisUrl, method: 'get', timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: eventDataResponse } );
var frameQuery = new Request.JSON( { url: thisUrl, method: 'get', timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: frameDataResponse } );

function requestFrameData( eventId, frameId )
{
    if ( !events[eventId] )
    {
        eventQuery.options.data = "view=request&request=status&entity=event&id="+eventId+"&loopback="+frameId;
        eventQuery.send();
    }
    else
    {
        frameQuery.options.data = "view=request&request=status&entity=frameimage&id[0]="+eventId+"&id[1]="+frameId;
        frameQuery.send();
    }
}

function previewEvent( eventId, frameId )
{
    
    if ( events[eventId] )
    {
        var event = events[eventId];
        if ( event['frames'] )
        {
            if ( event['frames'][frameId] )
            {
                showEventDetail( event['frames'][frameId]['html'] );
                var imagePath = event.frames[frameId].Image.imagePath;
                var videoName = event.DefaultVideo;
                loadEventImage( imagePath, eventId, frameId, event.Width, event.Height, event.Frames/event.Length, videoName, event.Length, event.StartTime, monitors[event.MonitorId]);
                return;
            }
        }
    }
    requestFrameData( eventId, frameId );
}

function loadEventImage( imagePath, eid, fid, width, height, fps, videoName, duration, startTime, Monitor )
{
    var vid= $('preview');
    var imageSrc = $('imageSrc');
    if(videoName)
    {
        vid.show();
        imageSrc.hide();
        var newsource=imagePrefix+imagePath.slice(0,imagePath.lastIndexOf('/'))+"/"+videoName;
        //console.log(newsource);
        //console.log(sources[0].src.slice(-newsource.length));
        if(newsource!=vid.currentSrc.slice(-newsource.length) || vid.readyState==0)
        {
            //console.log("loading new");
            //it is possible to set a long source list here will that be unworkable?
            var sources = vid.getElementsByTagName('source');
            sources[0].src=newsource;
            var tracks = vid.getElementsByTagName('track');
            if(tracks.length){
                tracks[0].parentNode.removeChild(tracks[0]);
            }
            vid.load();
            addVideoTimingTrack(vid, Monitor.LabelFormat, Monitor.Name, duration, startTime)
            vid.currentTime = fid/fps;
        }
        else
        {
            if(!vid.seeking)
                vid.currentTime=fid/fps;
        }
    }
    else
    {
        vid.hide();
        imageSrc.show();
        imageSrc.setProperty( 'src', imagePrefix+imagePath );
        imageSrc.removeEvent( 'click' );
        imageSrc.addEvent( 'click', showEvent.pass( [ eid, fid, width, height ] ) );
    }

    var eventData = $('eventData');
    eventData.removeEvent( 'click' );
    eventData.addEvent( 'click', showEvent.pass( [ eid, fid, width, height ] ) );
}

function tlZoomBounds( minTime, maxTime )
{
    console.log( "Zooming" );
    window.location = '?view='+currentView+filterQuery+'&minTime='+minTime+'&maxTime='+maxTime;
}

function tlZoomRange( midTime, range )
{
    window.location = '?view='+currentView+filterQuery+'&midTime='+midTime+'&range='+range;
}

function tlPan( midTime, range )
{
    window.location = '?view='+currentView+filterQuery+'&midTime='+midTime+'&range='+range;
}