deprecate legacy "stills" option from event view

web/skins/classic/views/event.php

@@ -275,41 +275,6 @@ echo htmlSelect('rate', $rates, intval($rate), array('id'=>'rateValue'));
           <span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue">1</span>x</span>
         </div>
       </div><!--eventVideo-->
-      <div id="eventStills" class="hidden">
-        <div id="eventThumbsPanel">
-          <div id="eventThumbs">
-          </div>
-        </div>
-        <div id="eventImagePanel">
-          <div id="eventImageFrame">
-            <img id="eventImage" src="graphics/transparent.png" alt=""/>
-            <div id="eventImageBar">
-              <div id="eventImageClose"><button type="button" data-on-click="hideEventImage"><?php echo translate('Close') ?></button></div>
-              <div id="eventImageStats" class="hidden"><button type="button" data-on-click="showFrameStats"><?php echo translate('Stats') ?></button></div>
-              <div id="eventImageData"><?php echo translate('Frame') ?> <span id="eventImageNo"></span></div>
-            </div>
-          </div>
-        </div>
-        <div id="eventImageNav">
-          <div id="thumbsSliderPanel">
-            <div id="alarmCue" class="alarmCue"></div>
-            <div id="thumbsSlider">
-              <div id="thumbsKnob">
-              </div>
-            </div>
-          </div>
-          <div id="eventImageButtons">
-            <div id="prevButtonsPanel">
-              <button id="prevEventBtn" type="button" data-on-click="prevEvent" disabled="disabled">&lt;E</button>
-              <button id="prevThumbsBtn" type="button" data-on-click="prevThumbs" disabled="disabled">&lt;&lt;</button>
-              <button id="prevImageBtn" type="button" data-on-click="prevImage" disabled="disabled">&lt;</button>
-              <button id="nextImageBtn" type="button" data-on-click="nextImage" disabled="disabled">&gt;</button>
-              <button id="nextThumbsBtn" type="button" data-on-click="nextThumbs" disabled="disabled">&gt;&gt;</button>
-              <button id="nextEventBtn" type="button" data-on-click="nextEvent" disabled="disabled">E&gt;</button>
-            </div>
-          </div>
-        </div>
-      </div>
 <?php
 } // end if Event exists
 ?>

web/skins/classic/views/js/event.js

@@ -14,8 +14,6 @@ var prevEventStartTime = 0;
 var nextEventStartTime = 0;
 var PrevEventDefVideoPath = "";
 var NextEventDefVideoPath = "";
-var slider = null;
-var scroll = null;
 var currEventId = null;
 var CurEventDefVideoPath = null;
 var vid = null;
@@ -27,8 +25,6 @@ var streamCmdTimer = null;
 var streamStatus = null;
 var lastEventId = 0;
 var zmsBroke = false; //Use alternate navigation if zms has crashed
-var frameBatch = 40;
-var currFrameId = null;
 var auth_hash;
 var wasHidden = false;
 
@@ -86,7 +82,8 @@ function vjsReplay() {
 
 function initialAlarmCues(eventId) {
   //get frames data for alarmCues and inserts into html
-  $j.getJSON(thisUrl + '?view=request&request=status&entity=frames&id=' + eventId, setAlarmCues)
+  $j.getJSON(thisUrl + '?view=request&request=status&entity=frames&id=' + eventId)
+      .done(setAlarmCues)
       .fail(logAjaxFail);
 }
 
@@ -180,14 +177,10 @@ function changeScale() {
   var newWidth;
   var newHeight;
   var autoScale;
-  var eventViewer;
+  var eventViewer= $j(vid ? '#videoobj' : '#evtStream');
   var alarmCue = $j('div.alarmCue');
-  var bottomEl = streamMode == 'stills' ? $j('#eventImageNav') : $j('#replayStatus');
+  var bottomEl = $j('#replayStatus');
-  if ( streamMode == 'stills' ) {
+
-    eventViewer = $j('#eventThumbs');
-  } else {
-    eventViewer = $j(vid ? '#videoobj' : '#evtStream');
-  }
   if ( scale == '0' || scale == 'auto' ) {
     var newSize = scaleToFit(eventData.Width, eventData.Height, eventViewer, bottomEl);
     newWidth = newSize.width;
@@ -198,20 +191,13 @@ function changeScale() {
     newWidth = eventData.Width * scale / SCALE_BASE;
     newHeight = eventData.Height * scale / SCALE_BASE;
   }
-  if ( streamMode != 'stills' ) {
   eventViewer.width(newWidth);
-  } // stills handles its own width
   eventViewer.height(newHeight);
   if ( !vid ) { // zms needs extra sizing
     streamScale(scale == '0' ? autoScale : scale);
     drawProgressBar();
   }
-  if ( streamMode == 'stills' ) {
-    slider.autosize();
-    alarmCue.html(renderAlarmCues($j('#thumbsSliderPanel')));
-  } else {
   alarmCue.html(renderAlarmCues(eventViewer));//just re-render alarmCues.  skip ajax call
-  }
   setCookie('zmEventScale'+eventData.MonitorId, scale, 3600);
 
   // After a resize, check if we still have room to display the event stats table
@@ -583,11 +569,6 @@ function getEventResponse(respObj, respText) {
   }
 
   eventData = respObj.event;
-  var eventStills = $j('#eventStills');
-
-  if ( eventStills && !eventStills.hasClass('hidden') && currEventId != eventData.Id ) {
-    resetEventStills();
-  }
   currEventId = eventData.Id;
 
   $j('#dataEventId').text( eventData.Id );
@@ -652,8 +633,6 @@ function getNearEventsResponse( respObj, respText ) {
   PrevEventDefVideoPath = respObj.nearevents.PrevEventDefVideoPath;
   NextEventDefVideoPath = respObj.nearevents.NextEventDefVideoPath;
 
-  $j('#prevEventBtn').prop('disabled', !prevEventId);
-  $j('#nextEventBtn').prop('disabled', !nextEventId);
   $j('#prevBtn').prop('disabled', prevEventId == 0 ? true : false).attr('class', prevEventId == 0 ? 'unavail' : 'inactive');
   $j('#nextBtn').prop('disabled', nextEventId == 0 ? true : false).attr('class', nextEventId == 0 ? 'unavail' : 'inactive');
 }
@@ -664,117 +643,6 @@ function nearEventsQuery( eventId ) {
       .fail(logAjaxFail);
 }
 
-function loadEventThumb( event, frame, loadImage ) {
-  var thumbImg = $j('#eventThumb'+frame.FrameId);
-  if ( !thumbImg ) {
-    console.error('No holder found for frame '+frame.FrameId);
-    return;
-  }
-  var img = new Asset.image( imagePrefix+frame.EventId+"&fid="+frame.FrameId,
-      {
-        'onload': ( function( loadImage ) {
-          thumbImg.prop('src', img.prop('src'));
-          thumbImg.prop('class', frame.Type=='Alarm'?'alarm':'normal');
-          thumbImg.prop('title', frame.FrameId+' / '+((frame.Type=='Alarm')?frame.Score:0));
-          thumbImg.removeClass('placeholder');
-          thumbImg.off('click');
-          thumbImg.click(function() {
-            locateImage( frame.FrameId, true );
-          } );
-          if ( loadImage ) {
-            loadEventImage( event, frame );
-          }
-        } ).pass( loadImage )
-      }
-  );
-}
-
-function loadEventImage(event, frame) {
-  console.debug('Loading '+event.Id+'/'+frame.FrameId);
-  var eventImg = $j('#eventImage');
-  var thumbImg = $j('#eventThumb'+frame.FrameId);
-  if ( eventImg.prop('src') != thumbImg.prop('src') ) {
-    var eventImagePanel = $j('#eventImagePanel');
-
-    if ( eventImagePanel.css('display') != 'none' ) {
-      var lastThumbImg = $j('#eventThumb' + eventImg.prop('alt'));
-      lastThumbImg.removeClass('selected');
-      lastThumbImg.css('opacity', '1.0');
-    }
-
-    $j('#eventImageBar').css('width', event.Width);
-    if ( frame.Type == 'Alarm' ) {
-      $j('#eventImageStats').removeClass('hidden');
-    } else {
-      $j('#eventImageStats').addClass('hidden');
-    }
-    thumbImg.addClass('selected');
-    thumbImg.css('opacity', '0.5');
-
-    if ( eventImagePanel.css('display') == 'none' ) {
-      eventImagePanel.css('opacity', '0');
-      eventImagePanel.css('display', 'inline-block');
-      new Fx.Tween( eventImagePanel, {duration: 500, transition: Fx.Transitions.Sine} ).start( 'opacity', 0, 1 );
-    }
-
-    eventImg.prop( {
-      'class': frame.Type=='Alarm'?'alarm':'normal',
-      'src': thumbImg.prop('src'),
-      'title': thumbImg.prop('title'),
-      'alt': thumbImg.prop('alt'),
-      'height': $j('#eventThumbs').height() - $j('#eventImageBar').outerHeight(true)-10
-    } );
-
-    $j('#eventImageNo').text(frame.FrameId);
-    $j('#prevImageBtn').prop('disabled', !frame.FrameId == 1);
-    $j('#nextImageBtn').prop('disabled', !frame.FrameId == event.Frames);
-  }
-}
-
-function hideEventImageComplete() {
-  var thumbImg = $j('#eventThumb'+$j('#eventImage').prop('alt'));
-  if ( thumbImg ) {
-    thumbImg.removeClass('selected');
-    thumbImg.css('opacity', '1.0');
-  } else {
-    console.log('Unable to find eventThumb at eventThumb'+$j('#eventImage').prop('alt'));
-  }
-  $j('#prevImageBtn').prop('disabled', true);
-  $j('#nextImageBtn').prop('disabled', true);
-  $j('#eventImagePanel').css('display', 'none');
-  $j('#eventImageStats').addClass('hidden');
-}
-
-function hideEventImage() {
-  if ( $j('#eventImagePanel').css('display') != 'none' ) {
-    new Fx.Tween( $j('#eventImagePanel'), {duration: 500, transition: Fx.Transitions.Sine, onComplete: hideEventImageComplete} ).start('opacity', 1, 0);
-  }
-}
-
-function resetEventStills() {
-  hideEventImage();
-  $j('#eventThumbs').empty();
-  if ( true || !slider ) {
-    slider = new Slider( '#thumbsSlider', '#thumbsKnob', {
-      /*steps: eventData.Frames,*/
-      value: 0,
-      onChange: function( step ) {
-        if ( !step ) {
-          step = 0;
-        }
-        var fid = parseInt((step * eventData.Frames)/this.options.steps);
-        if ( fid < 1 ) {
-          fid = 1;
-        } else if ( fid > eventData.Frames ) {
-          fid = eventData.Frames;
-        }
-        checkFrames( eventData.Id, fid, ($j('#eventImagePanel').css('display')=='none'?'':'true'));
-        scroll.toElement( 'eventThumb'+fid );
-      }
-    } );
-  }
-}
-
 function getFrameResponse(respObj, respText) {
   if ( checkStreamForErrors('getFrameResponse', respObj) ) {
     return;
@@ -792,8 +660,6 @@ function getFrameResponse(respObj, respText) {
   }
 
   eventData['frames'][frame.FrameId] = frame;
-
-  loadEventThumb(eventData, frame, respObj.loopback=="true");
 }
 
 function frameQuery( eventId, frameId, loadImage ) {
@@ -806,108 +672,6 @@ function frameQuery( eventId, frameId, loadImage ) {
       .fail(logAjaxFail);
 }
 
-function checkFrames( eventId, frameId, loadImage ) {
-  if ( !eventData ) {
-    console.error("No event "+eventId+" found");
-    return;
-  }
-
-  if ( !eventData['frames'] ) {
-    eventData['frames'] = {};
-  }
-
-  currFrameId = frameId;
-
-  var loFid = frameId - frameBatch/2;
-  if ( loFid < 1 ) {
-    loFid = 1;
-  }
-  var hiFid = loFid + (frameBatch-1);
-  if ( hiFid > eventData.Frames ) {
-    hiFid = eventData.Frames;
-  }
-
-  for ( var fid = loFid; fid <= hiFid; fid++ ) {
-    if ( !$j('#eventThumb'+fid) ) {
-      var img = $j('<img>');
-      img.attr({
-        'id': 'eventThumb'+fid,
-        'src': 'graphics/transparent.png',
-        'alt': fid,
-        'class': 'placeholder'
-      });
-
-      img.click(function() {
-        eventData['frames'][fid] = null;
-        checkFrames(eventId, fid);
-      });
-      frameQuery(eventId, fid, loadImage && (fid == frameId));
-      var imgs = $j('#eventThumbs img');
-      var injected = false;
-      if ( fid < imgs.length ) {
-        imgs.before(img);
-        injected = true;
-      } else {
-        injected = imgs.toArray().some(
-            function( thumbImg, index ) {
-              if ( parseInt(img.prop('alt')) < parseInt(thumbImg.prop('alt')) ) {
-                thumbImg.before(img);
-                return true;
-              }
-              return false;
-            }
-        );
-      }
-      if ( !injected ) {
-        $j('#eventThumbs').append(img);
-      }
-      var scale = parseInt(img.css('height'));
-      img.css( {
-        'width': parseInt((eventData.Width*scale)/100),
-        'height': parseInt((eventData.Height*scale)/100)
-      } );
-    } else if ( eventData['frames'][fid] ) {
-      if ( loadImage && (fid == frameId) ) {
-        loadEventImage( eventData, eventData['frames'][fid], loadImage );
-      }
-    }
-  }
-  $j('#prevThumbsBtn').prop('disabled', frameId == 1);
-  $j('#nextThumbsBtn').prop('disabled', frameId == eventData.Frames);
-}
-
-function locateImage( frameId, loadImage ) {
-  if ( slider ) {
-    slider.fireEvent( 'tick', slider.toPosition( parseInt((frameId-1)*slider.options.steps/eventData.Frames) ));
-  }
-  checkFrames( eventData.Id, frameId, loadImage );
-  scroll.toElement( 'eventThumb'+frameId );
-}
-
-function prevImage() {
-  if ( currFrameId > 1 ) {
-    locateImage( parseInt(currFrameId)-1, true );
-  }
-}
-
-function nextImage() {
-  if ( currFrameId < eventData.Frames ) {
-    locateImage( parseInt(currFrameId)+1, true );
-  }
-}
-
-function prevThumbs() {
-  if ( currFrameId > 1 ) {
-    locateImage( parseInt(currFrameId)>10?(parseInt(currFrameId)-10):1, $j('#eventImagePanel').css('display')!="none" );
-  }
-}
-
-function nextThumbs() {
-  if ( currFrameId < eventData.Frames ) {
-    locateImage( parseInt(currFrameId)<(eventData.Frames-10)?(parseInt(currFrameId)+10):eventData.Frames, $j('#eventImagePanel').css('display')!="none" );
-  }
-}
-
 function prevEvent() {
   if ( prevEventId ) {
     eventQuery( prevEventId );
@@ -959,54 +723,6 @@ function showEventFrames() {
   window.location.assign('?view=frames&eid='+eventData.Id);
 }
 
-function showStream() {
-  $j('#eventStills').addClass('hidden');
-  $j('#eventVideo').removeClass('hidden');
-
-  $j('#stillsEvent').removeClass('hidden');
-  $j('#streamEvent').addClass('hidden');
-
-  streamMode = 'video';
-  if (scale == 'auto') changeScale();
-}
-
-function showStills() {
-  $j('#eventStills').removeClass('hidden');
-  $j('#eventVideo').addClass('hidden');
-
-  if (vid && ( vid.paused != true ) ) {
-    // Pause the video
-    vid.pause();
-
-    // Update the button text to 'Play'
-    //if ( playButton )
-    //playButton.innerHTML = "Play";
-  }
-
-  $j('#stillsEvent').addClass('hidden');
-  $j('#streamEvent').removeClass('hidden');
-
-  streamMode = 'stills';
-
-  pauseClicked();
-  if ( !scroll ) {
-    scroll = new Fx.Scroll('eventThumbs', {
-      wait: false,
-      duration: 500,
-      offset: {'x': 0, 'y': 0},
-      transition: Fx.Transitions.Quad.easeInOut
-    }
-    );
-  }
-  resetEventStills();
-  if (scale == 'auto') changeScale();
-}
-
-function showFrameStats() {
-  var fid = $j('#eventImageNo').text();
-  window.location.assign('?view=stats&eid='+eventData.Id+'&fid='+fid);
-}
-
 function videoEvent() {
   window.location.assign('?view=video&eid='+eventData.Id);
 }