Page MenuHomePhabricator

Improve video cropping + rotating experience.
Closed, ResolvedPublic

Description

Improve video cropping + rotating experience in VideoCutTool, As currently videos can be rotated and cropped at once but the user experience while performing these actions are not so good, So let us improve!

Also, it would be better if we also improve the rotating player experience when the user clicks on rotate video.

Event Timeline

Change 595326 had a related patch set uploaded (by Gopavasanth; owner: Gopavasanth):
[labs/tools/VideoCutTool@master] Improve video cropping + rotating experience.

https://gerrit.wikimedia.org/r/595326

Gopavasanth removed a project: Patch-For-Review.

The code is changed a lot now, This patch need's to be rebased and minor tweeks has to be done.

Gopavasanth triaged this task as Medium priority.Oct 5 2020, 5:27 AM
Gopavasanth updated the task description. (Show Details)

Hi @Soda, Thanks for taking up the ticket!
Currently, Video cropping and rotating can be selected individually before tapping on "Preview" button, So we are trying to achive performing croping by selecting "Crop layer" in rotated video player both actions together in same time and also adjust the CSS for the rotated player for the good user expierence, Hope you got the requirements of the ticket, Feel free to ask more questions if required, happy to provide more insights to help you :)

@Gopavasanth I'm trying to set up the workspace for VideoCutTool, but the whole setup doesn't seem to work as expected. I've got both the VideoCutTool and video-cut-tool-backend up and running but the backend doesn't seem to be doing anything once the request for trimming has been sent by the frontend. Any ideas as to what I may be doing wrong?

Okay, I realized what I was doing wrong... I hadn't downloaded the service worker part of the tool which seems to be what does the actual rendering.

@Soda, Do you have any progress or struck some where else and seeking for help? Feel free to post your queries here if anything is still unclear :)

@Soda, Do you have any progress or struck some where else and seeking for help? Feel free to post your queries here if anything is still unclear :)

@Gopavasanth Sorry for not replying earlier, I'm working on the patch though progress is a bit slow since I'm having to switch systems for a hardware upgrade :) I'll try to put in the patch by the end of this week.

@Gopavasanth Wrt to the crop area, should it change orientation with the video or should it stay in the horizontal state ?

@Soda I couldn't get what you meant by the "horizontal state". Also I would suggest you to try out the current cropping functionality so you will get the idea on how it works. Here we are just trying to improve the user interface and user expierence of the same :-)

Change 639242 had a related patch set uploaded (by Sohom Datta; owner: Sohom Datta):
[labs/tools/VideoCutTool@master] [WIP]Improve cropping + rotating experience

https://gerrit.wikimedia.org/r/639242

We are planning to release a newer version of the tool including this change, Seems like the above patch needs to be rebased @Soda Are you still interested to work on your patch?

@Gopavasanth I've rebased and uploaded a newer version of the patch. The main area I'm struggling with (and have been struggling for quite some time) is, getting the draggable interface to properly move with the mouse once the video is rotated. The draggable currently moves in the opposite direction to that of the mouse( when the video is rotated ).

Video of the problem:

Hi @Soda, Thanks for your update, I had a look at your patch, the cropping behavior seems to be weird when the player is rotated, can we try trying add the custom CSS or if you have any other plans happy to listen them :)

Change 595326 abandoned by Gopavasanth:
[labs/tools/VideoCutTool@master] Improve video cropping + rotating experience.

Reason:
As superseded by https://gerrit.wikimedia.org/r/639242

https://gerrit.wikimedia.org/r/595326

@SarthakKundra Are you still working on this task? Can you please share your progress? Thanks! :)

Hi @Gopavasanth I shifted my focus on Dockerizing the tool. Give me a couple of days if I don't make any progress with this, I'll unassign myself. Hope that's fine?

Hey, @SarthakKundra regarding dockerizing the tool i.e T274855 I need to discuss with our team, So for now, you can give more priority to this task as dockerizing is always optional :)

@Gopavasanth I am trying to run the tool on my machine. I replaced backend_url in env.js with "https://videocuttool.wmflabs.org" but I keep getting this error: "http://localhost:3000/socket.io/?EIO=3&transport=polling&t=NVtn-ck 404 (Not Found)".

I tried to register oAuth with mediawiki but because I was running on localhost with SSL cert I was not able to login.

Is there another way I could run this on my PC so I can test the changes I made.

Thanks for the reply. I just tried it but received the same error.

Login works, but the the wizard is stuck at "Your video is processing".

Is there anything else I need to run/install?

@Khr2003, You should also install and setup service worker, See: https://github.com/gopavasanth/video-cut-tool/blob/master/README.md

I would recommend all the development set-up related queries to go to https://wikimedia.zulipchat.com/#narrow/stream/275007-VideoCutTool/topic/General Thanks!

@Gopavasanth

The .env file is missing socket_io_url in development object. I added: "socket_io_url: 'https://videocuttool.wmflabs.org'" and everything is working now :)

Hey @Khr2003 if you had faced any difficulties while setting up or you feel something not right, Please feel free to create a new ticket for the same with clear description, screenshots &/ console errors :)

Change 670445 had a related patch set uploaded (by Khr2003; owner: Khr2003):
[labs/tools/VideoCutTool@master] Improve cropping and rotating functions

https://gerrit.wikimedia.org/r/670445

Change 670448 had a related patch set uploaded (by Khr2003; owner: Khr2003):
[labs/tools/video-cut-tool-worker@master] Swap rotate and crop functions position

https://gerrit.wikimedia.org/r/670448

Awesome work! @Khr2003 Works like a charm!! I tried Rotating (270 degrees) + Cropping this video, The results after rotating and cropping looks like the below image, It's colliding with the right-side panel, So how about reducing the size of the player and making it constant?

@Gopavasanth Yes. I realized that an hour ago. I will send a commit shortly to fix this issue.

Change 670445 merged by jenkins-bot:
[labs/tools/VideoCutTool@master] Improve cropping and rotating functions

https://gerrit.wikimedia.org/r/670445

Change 670448 merged by jenkins-bot:
[labs/tools/video-cut-tool-worker@master] Swap rotate and crop functions position

https://gerrit.wikimedia.org/r/670448

Gopavasanth added a subscriber: Sandyabhi.

@Khr2003 Superb cool work!

@SarthakKundra, @Sandyabhi, and @Khr2003 I would advise you all to check about GSoC'21 and participate in the same if you are still eligible for the program :)

I think cropping in mobile screens got broken from this patch? Tested in a couple of mobiles, not able to change the dimensions of cropping div.

Change 639242 abandoned by Gopavasanth:
[labs/tools/VideoCutTool@master] [WIP]Improve cropping + rotating experience

Reason:
Suppressed by https://gerrit.wikimedia.org/r/670445

https://gerrit.wikimedia.org/r/639242

Change 674248 had a related patch set uploaded (by Khr2003; owner: Khr2003):
[labs/tools/VideoCutTool@master] Added support for drag and crop touch events

https://gerrit.wikimedia.org/r/674248

Change 674248 merged by jenkins-bot:
[labs/tools/VideoCutTool@master] Added support for drag and crop touch events

https://gerrit.wikimedia.org/r/674248