Merge pull request #159 from BoatsAreRockable/frame-reel-nos

Add frame reel image numbers
charlielee · Jun 25, 2016 · fd65fe5 · fd65fe5
2 parents eda83e9 + f2a74de
commit fd65fe5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 16 deletions.
diff --git a/app/animator.html b/app/animator.html
@@ -131,9 +131,10 @@ <h2><i class="fa fa-download fa-fw"></i> Export</h2>
                       <!--This is where the frame is added through JS -->
                     </tr>
                     <tr>
-                        <td>
+                        <td class="frame-reel-preview">
+                          <div class="frame-reel-no" id="live-view-frame-no"></div>
                            <div id="btn-live-view" title="Live Preview">
-                              <i class="fa fa-video-camera"></i>
+                             <i class="fa fa-video-camera"></i>
                             </div>
                         </td>
                     </tr>

diff --git a/app/css/animator.css b/app/css/animator.css
@@ -181,7 +181,7 @@ a {
 /* ========== VIDEO PREVIEW ============== */
 
 #capture-window, #playback-window {
-  height: calc(100vh - 200px);
+  height: calc(100vh - 210px);
   width: 100%;
   text-align: center;
   background-color: black;
@@ -208,7 +208,7 @@ a {
 #playback {
   height: 100%;
   width: 100%;
-  max-height: calc(100vh - 200px);
+  max-height: calc(100vh - 210px);
   object-fit: contain;
 }
 
@@ -308,13 +308,17 @@ a {
   top: -3px;
   overflow-x: scroll;
   background-color: #171717;
+  height: 6.2em;
 }
 
 #area-frame-reel table {
-  border-spacing: none !important;
+  border-spacing: 0 !important;
 }
 
-#area-frame-reel tr { display: inline-block; }
+#area-frame-reel tr {
+  display: inline-block;
+  vertical-align: top;
+}
 
 #area-frame-reel tr:nth-child(2) { display: table-cell; }
 
@@ -327,24 +331,29 @@ a {
 #area-frame-reel > table.hidden { display: none; }
 
 /* Image container */
-.frame-reel-preview { position: relative; }
+.frame-reel-preview {
+  position: relative;
+  padding-left: 0.25em;
+}
 
 /* Preview image */
 .frame-reel-img { cursor: pointer; }
 .frame-reel-img:hover { opacity: 0.8; }
 .frame-reel-img.selected { outline: 1px solid #d9d9d9; }
 
+.frame-reel-no {
+  padding: 0.25em 0.25em 0.25em 0;
+  font-size: 0.75em;
+}
+
 #btn-live-view {
   width: 67px;
-  height: 48px;
+  height: 50px;
   background-color: #171717;
   color: #D9D9D9;
   text-align: center;
   font-size: 2.5em;
   cursor: pointer;
-  margin-left: -0.15em;
-  margin-top: -0.73em;
-  margin-bottom: -1em;
 }
 #btn-live-view:hover { color: #ad0000; }
 

diff --git a/app/js/main.js b/app/js/main.js
@@ -76,6 +76,7 @@ var width  = 640,
     frameReelMsg   = document.querySelector("#area-frame-reel > p"),
     frameReelRow   = document.querySelector("#area-frame-reel #reel-captured-imgs"),
     frameReelTable = document.querySelector("#area-frame-reel table"),
+    liveViewframeNo = document.querySelector("#live-view-frame-no"),
 
     // Notifications
     notifyBar     = document.querySelector(".notification"),
@@ -384,9 +385,9 @@ function _removeFrameReelSelection() {
  * @param {Number} id The image ID to highlight.
  */
 function _addFrameReelSelection(id) {
-    "use strict";
-    document.querySelector(`.frame-reel-img#img-${id}`).classList.add("selected");
-    curSelectedFrame = id;
+  "use strict";
+  document.querySelector(`.frame-reel-img#img-${id}`).classList.add("selected");
+  curSelectedFrame = id;
 }
 
 /**
@@ -416,10 +417,10 @@ function updateFrameReel(action, id) {
     if (action === "capture") {
         // Remove any frame selection
         _removeFrameReelSelection();
-        _updateStatusBarCurFrame(totalFrames + 1);
 
         // Insert the new frame into the reel
         frameReelRow.insertAdjacentHTML("beforeend", `<td><div class="frame-reel-preview">
+<div class="frame-reel-no" id="no-${id}" title="Frame ${id}">${id}</div>
 <img class="frame-reel-img" id="img-${id}" title="Frame ${id}" width="67" height="50" src="${capturedFrames[id - 1].src}">
 </div></td>`);
 
@@ -429,9 +430,11 @@ function updateFrameReel(action, id) {
             onionSkinFrame = id - 2;
         }
         frameReelRow.removeChild(frameReelRow.children[id - 1]);
-       _updateStatusBarCurFrame(totalFrames - 1);
     }
 
+  // Update the last frame number above the live view button
+  liveViewframeNo.innerHTML = totalFrames + 1;
+
     // We have frames, display them
     if (totalFrames > 0) {
         frameReelMsg.classList.add("hidden");
@@ -446,6 +449,8 @@ function updateFrameReel(action, id) {
             _removeFrameReelSelection();
             _addFrameReelSelection(id - 1);
             _updateStatusBarCurFrame(id - 1);
+        } else if (winMode === "capture") {
+            _updateStatusBarCurFrame(totalFrames + 1);
         }
 
         // All the frames were deleted, display "No frames" message