Page MenuHomePhabricator

Tool should also to take the Video URL as param and edit.
Closed, ResolvedPublic

Description

VideoCutTool aims to trim and crop on fly videos in Wikimedia commons, This tool is to perform trim, crop, rotate and audio disability and hosted in Wikimedia toolforge.

Check the tool here: https://tools.wmflabs.org/video-cut-tool/

If the user provides a file name in the tool's URL something like https://tools.wmflabs.org/video-cut-tool?title=JeremyNguyen_-_Video_Cut_Tool_Demonstration.webm VideoCutTool has to dircetly go to step-1.

Code repos:
https://gerrit.wikimedia.org/r/#/admin/projects/labs/tools/VideoCutTool
https://gerrit.wikimedia.org/r/#/admin/projects/labs/tools/video-cut-tool-back-end

Event Timeline

I would like to work on this issue

Hi @Abhishekbvs thanks for claiming this task, If the task description is unclear, please feel free to comment here.

Hello @Abhishekbvs are you still interested in working on this issue

Hello @Gopavasanth

If the user provides a file name in the tool's URL something like https://tools.wmflabs.org/video-cut-tool?title=JeremyNguyen_-_Video_Cut_Tool_Demonstration.webm

are we handling the case where the url is entered like this in a web browser's url bar
or in the text field named as 'video url' at tool's home page

The tool should run in both ways, From tool's URL and also from the Video URL input box.

Hey @lalit97, Do you have any updates to share?

nope, I will share updates within 2-3 days. Will that be okay?

Change 572629 had a related patch set uploaded (by Lalit97; owner: Lalit97):
[labs/tools/VideoCutTool@master] Add function to handle file name given as url

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

as you suggested at gerrit
I have tried to access Croptool but it is giving me this error

Can we check if file exists or not by doing a axios get request?

@lalit97 You should log in to CropTool, did you?

Yes I have created an account on Wikimedia commons and followed the steps given on
https://commons.wikimedia.org/w/index.php?title=Commons:CropTool&withJS=MediaWiki:ActivateGadget.js&gadgetname=CropTool
I think there is some problem going on with Croptool right now.

I don't think its a problem with CropTool as its working fine for me, Can I know what you have tried to reproduce the error you are facing?

As you are facing difficulties with the crop tool, Let me share a screenshot to you:

I'm expecting similar behavior like this in VideoCutTool when I give incorrect file name in URL (https://tools.wmflabs.org/croptool/?site=commons.wikimedia.org&title=fdfdfad.jpg)

I don't think its a problem with CropTool as its working fine for me, Can I know what you have tried to reproduce the error you are facing?


It is showing this error message after completing Oauth

I'm expecting similar behavior like this in VideoCutTool when I give incorrect file name in URL

Yes I have understood your point. I was thinking about the possible ways to implement this.
One of idea is we can try accessing the file url by doing something like "axios.get(url)" and if it returns status code 200 then our file is there
other wise we can show an error message.

Thanks, basically something like this using axios in Reactjs

Awesome, I would also prefer to implement this method in Step-1 near Video URL

Okay, I will add this at step-1 also :)

Change 572955 had a related patch set uploaded (by Lalit97; owner: Lalit97):
[labs/tools/VideoCutTool@master] Add function to handle file name given as url

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

Hello @Gopavasanth

http://localhost:3000/?title=Thawra_Protests_TyreSourLebanon_RomanDeckert22102019.webm has to work but intially it shows "File doesn't Exist" but when I clicked on "Edit video" button it plays.

This is happening because of CORS error. Basically whenever the below function runs

checkFileExist(filePath){
   axios.get(filePath
   ).then(response => {
       this.goToNextStep()
     })
     .catch(error => {
       showNotificationWithIcon("error", "File Does Not Exist");
     })
 }

This error occurs in console

Access to XMLHttpRequest at 'https://commons.wikimedia.org/wiki/File:Thawra_Protests_TyreSourLebanon_RomanDeckert22102019.webm' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have done some research and solved it by using a chrome extension described in this article
3-ways-to-fix-the-cors-error

Also it is mention here that this error won't occur in Production
https://github.com/axios/axios/issues/853#issuecomment-515671287

So currently my code is working fine with moesif-orign-cors-extension.

If you find any other solution we can try that also.

Here is a screen recording from my laptop

I just deployed your patch in production as well, Please have a look at https://tools.wmflabs.org/video-cut-tool?title=Thawra_Protests_TyreSourLebanon_RomanDeckert22102019.webm. This also shows an error message: "File not found"

Hello @Gopavasanth I have fixed the pervious issues by using commons api. But now there is some encoding issue showing up.

for this file https://commons.wikimedia.org/wiki/File:20170921UdienzeDisponibilit%C3%A0Lampschool.ogv
if we pass it as title http://localhost:3000/?title=20170921UdienzeDisponibilit%C3%A0Lampschool.ogv

then the function validateVideoURL says Incorrect url. But actually it is correct.

validateVideoURL(url) {
  if (url !== "") {
    if ( url.match( /^(?:https?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$%&'()*+,;=.]+(?:mp4|webm|mov|flv|ogv)+$/g ) !== null ) {
      console.log("Your are using right URL !");
      this.setState({ validateVideoURL: true });
      return true;
    } else {
      showNotificationWithIcon("error", "Provide the right URL");
      console.log("You are providing incorrect url");
      return false;
    }
  }
}

I am using this API to test if the file exists or not

https://commons.wikimedia.org/w/api.php?action=query&titles=File:20170921UdienzeDisponibilitàLampschool.ogv&format=json&formatversion=2

So if possible we can remove the function validateVideoURL also. Because we are checking it in the above api call already.

Change 573354 had a related patch set uploaded (by Lalit97; owner: Lalit97):
[labs/tools/VideoCutTool@master] Add function to handle file name given as url

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

Change 572629 abandoned by Gopavasanth:
Add function to handle file name given as url

Reason:
As per changes here: I7e87fa38e4e9f5741785d6091b83ff2eef9f660e
Closing as a duplicate patches.

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

Change 572955 abandoned by Gopavasanth:
Add function to handle file name given as url

Reason:
As per changes here: I7e87fa38e4e9f5741785d6091b83ff2eef9f660e
Closing as a duplicate patches.

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

Change 573354 merged by jenkins-bot:
[labs/tools/VideoCutTool@master] Add function to handle file name given as url

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