Media: Add video optimization to WordPress Plupload

[swissspidy]

Feature Description

WordPress uses Plupload for uploading media in the Backbone media modal.

It seems possible to hook into that code to perform our pre-upload video optimization.

That would improve the UX for users uploading videos that way.

The WP Plupload code is here:

https://github.com/WordPress/wordpress-develop/blob/2382765afa36e10bf3c74420024ad4e85763a47c/src/js/_enqueues/vendor/plupload/wp-plupload.js

https://github.com/WordPress/wordpress-develop/blob/2382765afa36e10bf3c74420024ad4e85763a47c/src/js/_enqueues/vendor/plupload/handlers.js

Plupload 2.1.9 source code: https://github.com/moxiecode/plupload/blob/v2.1.9/src/plupload.js

We might be able to do something like this:

this.uploader.bind( 'FilesAdded', function( file ) {
if (videoShouldBeOptimized) {
  optimizeVideo(file).then(() => 
    file.status = plupload.UPLOADING;
    this.trigger("UploadFile", file);
  });

  return false;
}
});

Alternatives Considered

Additional Context

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

Implementation Brief

• Add feature flag?

[spacedmonkey]

So the idea is to highjack the upload before it is uploaded, transcode it and upload it? Or to update the original file and trigger the code used to trancode existing videos?

This also would not fix the case where someone inserts an existing video attachment from the WordPress media picker.

[swissspidy]

So the idea is to highjack the upload before it is uploaded, transcode it and upload it?

Yes, this. Not sure how feasible it is, so needs some testing / proof-of-concept. But it seems possible.

This also would not fix the case where someone inserts an existing video attachment from the WordPress media picker.

Correct. I'll be creating a separate ticket for that use case.

[spacedmonkey]

As mentioned in sprint planning, this ticket is less important, as their is a now a workaround for uploading / trancoding media in https://github.com/google/web-stories-wp/pull/7766.

Another quick workaround would be trigger transcoding directly after upload here.

https://github.com/google/web-stories-wp/blob/1222255391a88bade1f3f8f8b6a5d03358e08605/assets/src/edit-story/components/mediaPicker/useMediaPicker.js#L70-L82

However this means directly after upload, the transcode is trigger. But this isn't likely only a couple of seconds before, it might be inserted into the page anyway.