Add video cropping tools

RESOLVED INCOMPLETE

Status

RESOLVED INCOMPLETE
5 years ago
a year ago

People

(Reporter: jon, Assigned: zulfa2all, Mentored)

Tracking

Details

(Whiteboard: [good first bug])

(Reporter)

Description

5 years ago
Feature request from the Youth Hackjam here in Toronto, add tools to crop videos
What's going to be hard about this is getting the faded UI for the area you're going to grop, when in cropping more.

Other than that, it is trivial and would be a pretty huge win.
Whiteboard: [mentor=thecount][mentor=mjschranz]
Whiteboard: [mentor=thecount][mentor=mjschranz] → [mentor=thecount][mentor=mjschranz][good first bug]

Comment 2

5 years ago
Can I get assigned to this? It seems pretty interesting, and Webmaker.org has all of its bugs assigned.
(Assignee)

Comment 3

5 years ago
Hello, I want to take this bug as my first contribution to Mozilla, can someone assign me to it?
Hey Zulfa,

Sorry Kofler I missed your comment :(

This bug is a big more of an ambitious starter bug than others. It's good for people that want a challenege or that learn best when pushed. It's not for everyone, but would be pretty cool to have.

Is that still cool? You won't be alone on this, I'll be helping you for whatever you need :)

We can also split it up into smaller bugs as we go.
Assignee: nobody → zulfa2all

Comment 5

5 years ago
[:thecount] I want to participate too. I'll help in everything you need.
Hey, sure :)

This is where I would start:

You'll need webmaker running locally. Start with webmaker-suite if you don't already have it running: https://github.com/mozilla/webmaker-suite

Follow the readme instructions there and let me know if you have any issues.

Then start looking into popcorn maker. Go to popcorn.webmaker.org and play around with images and video clips.

The likely files of interest are:

The existing image cropping code: https://github.com/mozilla/popcorn.webmaker.org/blob/master/public/templates/assets/editors/image/image-editor.js#L456

However it only works with images.

The actual media clip plugin is here: https://github.com/mozilla/popcorn.webmaker.org/blob/master/public/templates/assets/plugins/sequencer/popcorn.sequencer.js

And this looks to be the media clip editor helper where you'll want to add the cropping functionality: https://github.com/mozilla/popcorn.webmaker.org/blob/d94b2c8b94b077a27a5a5e52ea498b5315d8b3cc/public/src/editor/sequencer-editor.js#L537

I think ultimately we want to move croppable from image into the modules here: https://github.com/mozilla/popcorn.webmaker.org/blob/master/public/src/editor/editorhelper.js (like draggable and resizable) then use that for both image and video, and modify it enough to work with both image and video, but that can be a follow up ticket.

If you can make it work without the greyed out area while cropping that's fine.

The basic idea is the video lives inside a overflow hidden container and the video itself's position is offset inside that.

Here is the image plugin code: https://github.com/mozilla/popcorn.webmaker.org/blob/d94b2c8b94b077a27a5a5e52ea498b5315d8b3cc/public/templates/assets/plugins/image/popcorn.image.js

In there you can see the innerLeft, innerWidth, etc. That's the data from the cropping tool that saves it to that position.
Status: NEW → ASSIGNED
Mentor: scott schranz.m
Mentor: schranz.m, scott
Whiteboard: [mentor=thecount][mentor=mjschranz][good first bug] → [good first bug]

Updated

4 years ago
Mentor: schranz.m, scott
Popcorn Maker is no longer under active development.

https://learning.mozilla.org/blog/product-update-for-appmaker-and-popcorn-maker
Status: ASSIGNED → RESOLVED
Last Resolved: a year ago
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.