ShinobiCE/web/pages/blocks/powerVideo2.ejs

<!--Video File Window-->
<div class="modal full fade dark" id="powerVideo" role="dialog" aria-labelledby="powerVideoLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="powerVideoLabel"><i class="fa fa-map-marker"></i> &nbsp; <%-lang['Power Video Viewer']%><span style="display:none" class="_loading"> &nbsp; <i class="fa fa-pulse fa-spinner"></i></span></h4>
      </div>
      <div class="modal-body" style="overflow:inherit">
          <div class="row">
              <div class="col-md-4" id="powerVideoTabs" tab-chooser-parent>
                  <div class="form-group-group grey text-center">
                      <h4></h4>
                      <div class="btn-group" id="powerVideoTabButtons">
                          <button type="button" class="btn btn-primary btn-sm" tab-chooser="monitors"><%- lang.Monitors %></button>
                          <button type="button" class="btn btn-primary btn-sm" tab-chooser="settings"><%- lang['Search Settings'] %></button>
                      </div>
                  </div>
                  <div class="form-group-group grey" tab-section="monitors" style="max-height:265px;overflow:auto;">
                      <h4><%-lang.Monitors%></h4>
                      <div id="powerVideoMonitorsList" class="list-group"></div>
                  </div>
                  <div class="form-group-group grey" tab-section="settings" style="display:none">
                      <h4><%- lang['Search Settings'] %></h4>
                      <div class="form-group">
                          <label><%- lang['Date Range'] %></label>
                          <input id="powerVideoDateRange" class="form-control"></input>
                      </div>
                      <div class="row">
                          <div class="col-md-6">
                              <div class="form-group">
                                  <label><%- lang['Video Limit'] %> <small>(<%- lang['Per Monitor'] %>)</small></label>
                                  <input id="powerVideoVideoLimit" class="form-control" placeholder="0"></input>
                              </div>
                          </div>
                          <div class="col-md-6">
                              <div class="form-group">
                                  <label><%- lang['Event Limit'] %> <small>(<%- lang['Per Monitor'] %>)</small></label>
                                  <input id="powerVideoEventLimit" class="form-control" placeholder="500"></input>
                              </div>
                        </div>
                     </div>
                  </div>
              </div>
              <div class="col-md-8">
                  <div id="powerVideoMonitorViews"></div>
                  <div id="powerVideoMonitorControls" class="text-center">
                      <div class="btn-group">
                          <button type="button" powerVideo-control="toggleZoom" class="btn btn-sm btn-default" title="<%- lang['Zoom In'] %>">&nbsp;<i class="fa fa-search-plus"></i>&nbsp;</button>
                      </div>
                      <div class="btn-group">
                          <button type="button" powerVideo-control="previousVideoAll" class="btn btn-sm btn-default" title="<%- lang['Previous Video'] %>">&nbsp;<i class="fa fa-arrow-circle-left"></i>&nbsp;</button>
                          <button type="button" powerVideo-control="playAll" class="btn btn-sm btn-danger" title="<%- lang.Play %>">&nbsp;<i class="fa fa-play"></i>&nbsp;</button>
                          <button type="button" powerVideo-control="pauseAll" class="btn btn-sm btn-default" title="<%- lang.Pause %>">&nbsp;<i class="fa fa-pause"></i>&nbsp;</button>
                          <button type="button" powerVideo-control="nextVideoAll" class="btn btn-sm btn-default" title="<%- lang['Next Video'] %>">&nbsp;<i class="fa fa-arrow-circle-right"></i>&nbsp;</button>
                      </div>
                      <div class="btn-group" style="font-family: monospace;">
                          <button type="button" powerVideo-control="playSpeedAll" data-speed="1" class="btn btn-sm btn-default">1</button>
                          <button type="button" powerVideo-control="playSpeedAll" data-speed="5" class="btn btn-sm btn-default">5</button>
                          <button type="button" powerVideo-control="playSpeedAll" data-speed="10" class="btn btn-sm btn-default">10</button>
                          <button type="button" powerVideo-control="playSpeedAll" data-speed="15" class="btn btn-sm btn-default">15</button>
                      </div>
                  </div>
              </div>
          </div>
          <div class="row">
              <div class="col-md-12" style="margin-top:10px;">
                  <div id="powerVideoTimelineStrips">
                      <div class="loading"><i class="fa fa-hand-pointer-o"></i><div class="epic-text"><%- lang['Select a Monitor'] %></div></div>
                  </div>
              </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><%-lang['Close']%></button>
      </div>
    </div>
  </div>
</div>
<link rel="stylesheet" href="<%-window.libURL%>libs/css/vis.min.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.powerVideo2.css">
<script src="<%-window.libURL%>libs/js/vis.min.js" async></script>
<script src="<%-window.libURL%>libs/js/dash2.powerVideo2.js" async></script>