-
-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve statusbar #125
Improve statusbar #125
Changes from 2 commits
474b1a3
fd0fdd8
0e5cb86
9397062
193e1ba
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -31,7 +31,7 @@ var width = 640, | |
|
||
// Capture | ||
capturedFramesRaw = [], | ||
curFrame = 0, | ||
totalFrames = 0, | ||
curSelectedFrame = null, | ||
btnGridToggle = document.querySelector("#btn-grid-toggle"), | ||
btnCaptureFrame = document.querySelector("#btn-capture-frame"), | ||
|
@@ -55,8 +55,8 @@ var width = 640, | |
|
||
// Status bar | ||
statusBarCurMode = document.querySelector("#currentMode span"), | ||
statusBarCurFrame = document.querySelector("#currentFrame span"), | ||
statusBarFrameNum = document.querySelector("#num-of-frames span"), | ||
statusBarCurFrame = document.querySelector("#currentFrame"), | ||
statusBarFrameNum = document.querySelector("#num-of-frames"), | ||
statusBarFrameRate = document.querySelector("#currentFrameRate span"), | ||
|
||
// Export frames | ||
|
@@ -224,14 +224,14 @@ function startup() { | |
// Play/pause the preview | ||
btnPlayPause.addEventListener("click", function() { | ||
// Make sure we have frames to play back | ||
if (curFrame > 0) { | ||
if (totalFrames > 0) { | ||
(isPlaying ? videoPause : previewCapturedFrames)(); | ||
} | ||
}); | ||
|
||
// Stop the preview | ||
btnStop.addEventListener("click", function() { | ||
if (curFrame > 0) { | ||
if (totalFrames > 0) { | ||
_removeFrameReelSelection(); | ||
videoStop(); | ||
} | ||
|
@@ -297,7 +297,7 @@ function switchMode(newMode) { | |
"use strict"; | ||
winMode = newMode; | ||
if (winMode === "capture") { | ||
statusBarCurFrame.innerHTML = curFrame; | ||
statusBarCurFrame.innerHTML = 0; | ||
playbackWindow.classList.add("hidden"); | ||
captureWindow.classList.remove("hidden"); | ||
captureWindow.classList.add("active"); | ||
|
@@ -336,6 +336,8 @@ function _removeFrameReelSelection() { | |
function _addFrameReelSelection(id) { | ||
"use strict"; | ||
document.querySelector(`.frame-reel-img#img-${id}`).classList.add("selected"); | ||
curSelectedFrame = id; | ||
statusBarCurFrame.innerHTML = id; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm not sold on these two lines. The method is called Fun challenge for you: devise how this should be fixed on your own instead of me telling you. Let's see how much you are learning. :) |
||
} | ||
|
||
/** | ||
|
@@ -350,13 +352,13 @@ function updateFrameReel(action, id) { | |
"use strict"; | ||
var onionSkinFrame = id - 1; | ||
// Display number of captured frames in status bar | ||
statusBarCurFrame.innerHTML = curFrame; | ||
statusBarFrameNum.innerHTML = `${curFrame} ${curFrame === 1 ? "frame" : "frames"}`; | ||
statusBarFrameNum.innerHTML = totalFrames; | ||
|
||
// Add the newly captured frame | ||
if (action === "capture") { | ||
// Remove any frame selection | ||
_removeFrameReelSelection(); | ||
statusBarCurFrame.innerHTML = 0; | ||
|
||
// Insert the new frame into the reel | ||
frameReelRow.insertAdjacentHTML("beforeend", `<td><div class="frame-reel-preview"> | ||
|
@@ -365,14 +367,14 @@ function updateFrameReel(action, id) { | |
|
||
// Remove the chosen frame | ||
} else if (action === "delete") { | ||
if (id !== curFrame) { | ||
if (id !== totalFrames) { | ||
onionSkinFrame = id - 2; | ||
} | ||
frameReelRow.removeChild(frameReelRow.children[id - 1]); | ||
} | ||
|
||
// We have frames, display them | ||
if (curFrame > 0) { | ||
if (totalFrames > 0) { | ||
frameReelMsg.classList.add("hidden"); | ||
frameReelTable.classList.remove("hidden"); | ||
|
||
|
@@ -383,7 +385,7 @@ function updateFrameReel(action, id) { | |
// Update frame preview selection | ||
if (curSelectedFrame) { | ||
_removeFrameReelSelection(); | ||
document.querySelector(`.frame-reel-img#img-${id - 1}`).classList.add("selected"); | ||
_addFrameReelSelection(id - 1); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good catch! |
||
} | ||
|
||
// All the frames were deleted, display "No frames" message | ||
|
@@ -409,9 +411,9 @@ function deleteFrame(id) { | |
|
||
exportedFramesList.splice(id - 1, 1); | ||
capturedFramesRaw.splice(id - 1, 1); | ||
curFrame--; | ||
totalFrames--; | ||
updateFrameReel("delete", id); | ||
console.info(`There are now ${curFrame} captured frames`); | ||
console.info(`There are now ${totalFrames} captured frames`); | ||
} | ||
|
||
/** | ||
|
@@ -420,8 +422,8 @@ function deleteFrame(id) { | |
function undoFrame() { | ||
"use strict"; | ||
// Make sure there is a frame to delete | ||
if (curFrame > 0) { | ||
confirmSet(deleteFrame, curFrame, "Are you sure you want to delete the last frame captured?"); | ||
if (totalFrames > 0) { | ||
confirmSet(deleteFrame, totalFrames, "Are you sure you want to delete the last frame captured?"); | ||
} else { | ||
notifyError("There is no previous frame to undo!"); | ||
} | ||
|
@@ -447,8 +449,8 @@ function _toggleOnionSkin(ev) { | |
|
||
// Display last captured frame | ||
onionSkinWindow.classList.add("visible"); | ||
if (curFrame > 0) { | ||
onionSkinWindow.setAttribute("src", capturedFramesRaw[curFrame - 1]); | ||
if (totalFrames > 0) { | ||
onionSkinWindow.setAttribute("src", capturedFramesRaw[totalFrames - 1]); | ||
} | ||
} | ||
} | ||
|
@@ -483,12 +485,12 @@ function takePicture() { | |
|
||
// Store the image data and update the current frame | ||
capturedFramesRaw.push(data); | ||
curFrame++; | ||
console.info(`Captured frame: ${data.slice(100, 120)} There are now: ${curFrame} frames`); | ||
totalFrames++; | ||
console.info(`Captured frame: ${data.slice(100, 120)} There are now: ${totalFrames} frames`); | ||
|
||
// Save the frame to disk and update the frame reel | ||
saveFrame(curFrame); | ||
updateFrameReel("capture", curFrame); | ||
saveFrame(totalFrames); | ||
updateFrameReel("capture", totalFrames); | ||
|
||
// Scroll the frame reel to the end | ||
frameReelArea.scrollLeft = frameReelArea.scrollWidth; | ||
|
@@ -542,10 +544,10 @@ function videoStop() { | |
// Reset the player | ||
videoPause(); | ||
curPlayFrame = 0; | ||
playback.setAttribute("src", capturedFramesRaw[curFrame - 1]); | ||
playback.setAttribute("src", capturedFramesRaw[totalFrames - 1]); | ||
|
||
// Display newest frame number in status bar | ||
statusBarCurFrame.innerHTML = curFrame; | ||
statusBarCurFrame.innerHTML = totalFrames; | ||
console.info("Playback stopped"); | ||
} | ||
|
||
|
@@ -568,7 +570,7 @@ function _videoPlay() { | |
curPlayFrame++; | ||
|
||
// There are no more frames to preview | ||
if (curPlayFrame >= curFrame) { | ||
if (curPlayFrame >= totalFrames) { | ||
// We are not looping, stop the playback | ||
if (!isLooping) { | ||
videoStop(); | ||
|
@@ -607,7 +609,7 @@ function _frameReelScroll() { | |
if (curPlayFrame === 0) { | ||
// Scroll to start when playback begins | ||
frameReelArea.scrollLeft = 0; | ||
} else if (curPlayFrame + 1 !== curFrame) { | ||
} else if (curPlayFrame + 1 !== totalFrames) { | ||
// Scroll so currently played frame is in view | ||
document.querySelector(`.frame-reel-img#img-${curPlayFrame + 2}`).scrollIntoView(); | ||
} else { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Go ahead and change this ID to
current-frame
since you are already editing it.