Video trimming UI plugin

[DanielHuntleySBG]

Link to related issue (if applicable)

1743

Summary of proposed changes

Introduction of a video trimming tool into the libary. The tool is useful when creating clips or repeating loops.

Workflow

• The trimming tool can be toggled via the enterTrim/exitTrim event or using the control in the controls bar.
• Users can then drag the start and end point of the region to define the clipping region.
• Doing so fires the trimChange event outputting the start and end points of the region.
• From here the defined bounds of the clipping region can be used to create a clip (which will need to be done by the user)

Covered edge cases:

• The user cannot define the trimming region outside of the bounds of the timeline.
• The start or end time cannot be before one another

Thanks for taking the time to review these proposed changes and welcome any feedback or changes, thanks!

Checklist

• Use develop as the base branch
• Exclude the gulp build (/dist changes) from the PR
• Test on supported browsers

[tomByrer]

Interesting idea! Does it use Chapters?

http://thenewcode.com/977/Create-Interactive-HTML5-Video-with-WebVTT-Chapters

http://html5videoguide.net/demos/google_io/3_navigation/#videoBox

[DanielHuntleySBG]

Interesting idea! Does it use Chapters?

http://thenewcode.com/977/Create-Interactive-HTML5-Video-with-WebVTT-Chapters

http://html5videoguide.net/demos/google_io/3_navigation/#videoBox

It doesn't at the moment but that would be a good accessbilility enhancement!

[tomByrer]

"Chapters" is for more than accessibility; some tools use that markup..

[Thiryn]

Chapters are a good idea but perhaps not part of his work, this is allowing to make a 'sub-timeline', I like the idea and looks good. @sampotts any plan to bring this in?

[jackguoAtJogg]

@DanielHuntleySBG Do you have documentation how to use it? I would like to try it out since I have a project that needs a trimmer like this.

[jackguoAtJogg]

@sampotts Do we a timeline that when will this get merged?

[DanielHuntleySBG]

@jackguoAtJogg I have added documentation in the readme file outlining listeners and methods, hope it helps

[jackguoAtJogg]

@DanielHuntleySBG I see it in the README, I'll play around with it! Thank you making this amazing UI plugin! 🙇

[adeeb1]

@DanielHuntleySBG I would love to use this. Would it be possible to resolve conflicts and update the branch please?

[DanielHuntleySBG]

@adeeb1 Hello, I would be happy to resolve the merge conflicts but am still waiting to hear whether it will be merged into the main repo 😄

[adeeb1]

@DanielHuntleySBG If it's not too much work, this would be valuable to me (and possibly others) even if it's not merged into the official repo. I'm already using a fork with Dailymotion support (credit) and could include this in it. Otherwise, I may be able to update this.

[sampotts]

Could you fix the conflict on this? Then we could look at merging it in.

[DanielHuntleySBG]

@sampotts Should be resolved, let me know if you have any issues

[sampotts]

Thanks! Will take a look.

[jackguoAtJogg]

@DanielHuntleySBG I believe there's a typescript bug in plyr.d.ts line 834 where the duration type is missing.

interface SyncPoint {
    id: string;
    time: number;
    start: number;
    duration: duration;
  }

[dy]

Any chance it will be merged? Missing this feature in coming project, youtube clips is also in early alpha. What help can I provide?