Skip to content
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

Feature/video slider ui #151

Merged
merged 52 commits into from Feb 16, 2018

Conversation

@WebsByTodd
Copy link
Collaborator

commented Jan 22, 2018

No description provided.

WebsByTodd added some commits Jan 21, 2018

Added a basic rc-slider component so users can use a range on a slide…
…r to set the video start and end times.
Added external player controls, restart, skip back, play/pause, and s…
…kip forward.

Also added range zoom buttons.

In this commit, only restart and play/pause are functional.

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Jan 22, 2018 Inactive

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Jan 22, 2018 Inactive

Removed zoom controls and added a second range. The first range is al…
…ways from 0 to the end of the video. The second range begins 15 seconds before the clip starts and ends 15 seconds after the clip ends. There is also a 3rd handle on the range which represents the current video time. Moving the range handles and using the video controls makes the video and the transcript behave as you would expect.

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Jan 29, 2018 Inactive

Remove a click event handler. When you click on the transcripts now, …
…nothing happens unless you've highlighted text.

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Jan 30, 2018 Inactive

WebsByTodd added some commits Jan 30, 2018

Changed zoomed view range buffer to be 10% of the video clip.
Changed skip forward/back buttons to skip 10% of the video clip.

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Jan 30, 2018 Inactive

WebsByTodd added some commits Jan 30, 2018

Lift some functionality from ClipEditor up into CaptionView so that t…
…ext can be returned from a video range that is 10% wider than the clip duration.

Right now this is rendered in a very ugly way. Will work on this in the next commit.
Render the text between the timelines to fit perfectly within the bou…
…nds of the container. Text aligns closely with the video play time. Text does not render at all for clips longer than 10 seconds, because it would be too small to read anyway.

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Feb 1, 2018 Inactive

WebsByTodd added some commits Feb 3, 2018

Fixed a terrible performance bug causing handleScroll function to be …
…called twice every second, which performs a hefty binary search and re-renders all child components.
Using 3 different range sliders.
The first slider min value is 0, max value is video length. The range handles of this slider represent the zoom level min and max. 

The next two sliders min/max values are equal to the zoom level set by the first slider.

Slider 2 shows the text selection within the zoom level. Slider 3 shows the view window of the transcript within the zoom level.

The view window end range is hard coded to be 20 words greater than the start range. There is no easy way to get the real end range without significantly impacting performance, so hardcoded it for now.
The Video component contains the state for zoomRange, selectionRange,…
… and viewRange.

The ClipEditor component receives these as props to render the ranges and uses prop functions to tell the Video component to update state. If the selection or view ranges are outside the zoomRange, they are clipped when rendered.

The CaptionTextNodeList component still needs work.
These haven't been updated in a while. These tests have been passing …
…even though there were errors in the workspace when I open the files. Fixed the errors and updated the snapshots.
Known issue: while loop executes faster than hiddenDiv.innerHTML read…
…ing/writing.

Get the index of the first word in the scrolling div. This is done by calculating the number of lines in the current paragraph based on its height and the value of the line-height. Then find the line number that is at the top of the div. This represents our "before" number line that starts at 0, goes to the number of lines in the paragraph, and the number we're interested in is the line number at the top of the view.

The "after" number line starts at the index of the first word in the paragraph and ends at the index of the last word in the paragraph. The number we are interested in is the index of the first word at the top of the view. Using numberLineTransform we can approximate this number, and then add or subtract words from the hidden div behind (z-index behind) the paragraph one word at a time. Once our div height matches the height we expect based on the previous calculations, we have the index of our first word.

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Feb 13, 2018 Inactive

@nedtwigg

This comment has been minimized.

Copy link
Collaborator

commented Feb 13, 2018

Minor issue 1: on mobile safari, drag from edge is doing tab swipe:

img_3ace7f77d466-1

Set of issues 2:

  • Now playing
  • Track labels
  • Context-sensitive buttons with text
  • Too many decimal points
  • Sticky header takes too much vertical space (make instructions not sticky)
  • Confusing color match between tracks
  • "Real" end of transcript view vs 5s assumption

img_3518

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Feb 13, 2018 Inactive

WebsByTodd added some commits Feb 13, 2018

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Feb 13, 2018 Inactive

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Feb 13, 2018 Inactive

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Feb 13, 2018 Inactive

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Feb 14, 2018 Inactive

WebsByTodd added some commits Feb 14, 2018

-Added a "zoom to clip" button which changes to a "play clip" button …
…when the zoom level is right.

-Added "15s" to the skip buttons.
-Styled the buttons differently now that they have text.
-Moved YTPlayerParameters to the instance instead of recreating on ev…
…ery render.

-When video is cued, set start/end times on this.playerVars
-Fixed a selection handle issue when the selection exactly matches the zoom by adding or subtracting 0.1 to the selection immediately before it will be the same as the zoom to prevent it from ever becoming the same as the zoom.
-When clip ends, cue the video to start where it left off when the user presses play again

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Feb 15, 2018 Inactive

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Feb 16, 2018 Inactive

-Added a ZoomViewer component to draw a trapezoid that connects the z…
…oom handles to the edges of the zoomed sliders.

-Don't render the "zoom to clip"/"play clip" button when there's no clip.

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Feb 16, 2018 Inactive

Sometimes when searching for the words in the view the last word is t…
…he same as the first word. This should almost never happen. The performance is too bad right now to debug this, so just hardcoding a +5 for now. Performance improvements are on the horizon.
@nedtwigg

This comment has been minimized.

Copy link
Collaborator

commented Feb 16, 2018

Bug I forgot to mention during phone call:

@nedtwigg nedtwigg temporarily deployed to mytake-staging-pr-151 Feb 16, 2018 Inactive

Fixed some zoom range bugs.
-When page loads without highlights and user highlights text, zoom range is set automatically.
-When user updates text selection, "Zoom to Clip" button is shown again.

@WebsByTodd WebsByTodd merged commit 53bef2e into master Feb 16, 2018

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@WebsByTodd WebsByTodd deleted the feature/video-slider-ui branch Feb 16, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.