Video Button Refinements about processing-hour-of-code HOT 16 CLOSED

The forward/reverse 30 seconds or 10 seconds would be a great add if it's possible. This is the primary feedback that I've heard.

from processing-hour-of-code.

I also received some feedback today asking for a "skip to end" button. I'm undecided about this one but thought I would offer it into the mix. While users can click to the next lesson rather easily via the menu on the top there's no way to jump directly to the "exercise" portion at the end of each video.

from processing-hour-of-code.

@REAS, regarding your email comments:

I do think a "Jump to exercise" and "Back 10 Seconds" might be nice additions. How about this, where Rewind is 10 seconds back and Next is jump to the exercise (or to the place where Dan introduces the exercise).

[ Restart ] [ Pause ] [ Rewind ] [ Next ]

I'm going to ditch "Pause" because Vimeo provides it whether we want it to or not and its one less thing to break. "Restart" makes sense. "Rewind" is tricky because that almost implies you can hold it and seek back. Maybe something like "Jump Back 30" is better, though that phrasing is clumsy. "Next" is problematic because "next" should always mean go to the next lesson. I think we need something like "Jump to Exercise" if we specifically want to jump to the exercise.

from processing-hour-of-code.

Here's a new proposal based on your comments:

[ Restart ] [ Back 10 Seconds ] [ Jump to Exercise ]

from processing-hour-of-code.

I think that sounds great.

Just to be clear, do we want to jump to @shiffmans introduction of the exercise or to the post-video state with the final hint screen, etc? I think my vote would be to jump to the introduction, if only because I'm a little unsure of how Popcorn would handle jumping to the last frame of a video.

from processing-hour-of-code.

I agree, the introduction. @shiffman?

It seems that Pause is still useful, that way all of the video controls are grouped together, rather than needing to control the pause in an entirely different way.

from processing-hour-of-code.

That's fair. I'll see how the new set of buttons fits. There may be room for pause, though you should technically be able to click anywhere that isn't a button to pause.

from processing-hour-of-code.

Okay, most of the basics are in place. I'm not closing this yet because I know there's an issue with going in and out of full screen when jumping around. "Questions" is especially problematic because it jumps back and forth so much and it has to trigger all of those events before it lands on the final example.

I left pause off for now because it won't fit on the smallest video size without wrapping in a broken-looking way.

@shiffman, I picked what seemed like good spots to jump to for the exercise assignments, but you should definitely tweak them as you see fit. There's just a new property on each of the scripts called "exerciseTime". Regarding an earlier conversation we had, Popcorn seems to support granularity beyond one second with no problem, but I do think that decimal number is a frame number (1-24 or 1-30 depending on the fps) and not a fraction of a second.

from processing-hour-of-code.

Wonderful Scott. I think these are very solid improvements. My first run through them reveals them to be working well.

from processing-hour-of-code.

Great work, thank you so much for this! These are working really well for me.

Assuming this is not too annoying to implement, I think that we should add a "jump ahead" button on the first video also, we can say "Jump to Lesson" instead of "Exercise" and have it go just to the beginning of Shapes.

I like that the jump button takes you to the video explanation. The remaining explanation in the video is quite short and since these videos are so primary to this tutorial, jumping straight to the hints page doesn't feel right. I'll work on tweaking the timing.

from processing-hour-of-code.

Okay, so to get things working in (hopefully) all instances, I had to rework things pretty significantly. The main problem was Popcorn losing state when jumping to a new spot, so you'd end up with a very broken layout (e.g. a large video with a canvas on top of it).

The best solution I could come up goes something like this:

1. User hits the button to jump back or forward
2. The video is paused
3. The initial state for the lesson is reset
4. The player time is set to zero
5. The player time is set to the new desired time so all events fire.

It's pretty ridiculous, but it's the only way I can find to reliably maintain state unless we completely define a new state for every single video event. Please click around when you get a chance because I've likely broken something.

@shiffman, just something to note, you don't have to hide the editor and canvas in the script when going into video mode anymore because it tries to never show those elements now when the video is large. You do need to show them when going into editor mode, though, because we have some cases in editor mode where they're there and some where they're not.

from processing-hour-of-code.

I think everything we've talked about here is supported. I've yet to break it during testing, so I'll close this for now.

from processing-hour-of-code.

Should we add a "jump to end" button on the last video so you can skip it and go write to the code editor + hints + share?

from processing-hour-of-code.

Should we jump to a moment in the video right before the hint display the way we do everywhere else?

from processing-hour-of-code.

Sure, yes, for consistency let's do that. Let's try for ~ 1:18 where I say "Thanks again for being here. . . " I still need to go through and refine the timing for some of the other jump aheads too.

from processing-hour-of-code.

Should be in good shape here.

from processing-hour-of-code.