Cloudinary video player does not conform to transformation string set in the settings

[dugajean]

After a lot of research on this bug and a lot of failed attempts, I'm finally happy with my solution.

As Ryan has described, steps to reproduce:

• In /wp-admin > Cloudinary > Global Transformations > Video Settings, select ‘Cloudinary Player'
• Enter h100,w100 as the ‘Video Transformation String’
• Click ‘Save Settings’
• Create a new post in the block editor
• Add a video block
• Click ‘Media Library’
• Select a video that has been synced with Cloudinary, or upload a video and ensure it’s synced
• Click ‘Select'
• Click ‘Preview’ to see the front-end
• Expected: because there’s a global transformation of h100,w100, the video should be 100 x 100
• Actual: the video is its normal size

The Cloudinary video player JS library has a ton of options that can be added when instantiating it (including width and height), but simply parsing w_100 and h_100 into an options object and passing it didn't seem like a very scalable solution as there are a lot more transformations that could be applied.

I realized that transformations could be directly added to the URL in their short form (ie. w_100), so parsing the transformations is no longer needed.

Example:

http://res.cloudinary.com/myuser/video/upload/vid.mp4

Turns into:

http://res.cloudinary.com/myuser/video/upload/w_100,h_100/vid.mp4

I generate a small amount of JS to switch the URL for each Cloudinary video on the page and apply the global transformations accordingly.

Result:

[kienstra]

Hi @dugajean,
Nice work, this required a lot of digging into the API, it looks like.

If you agree with the main point of #42 (comment), the rest of the comments aren't really relevant.

[kienstra]

Hi @dugajean,
Nice work, this is a tough bug.

It'd be nice if we could avoid the code duplication in the script. You've looked at this more, so you could have a much better approach than me.

[dugajean]

@kienstra I'll do that then! 👍

[dugajean]

@kienstra Implemented your suggestion from above. Works flawlessly!

Also kept the controls check removed as you noted above and let it up to the user to remove the controls if they see it as necessary.

[kienstra]

Hi @dugajean,
Just some minor points here. Also, I'll do a quick test of this in a bit.

[kienstra]

Thanks, almost there.

[dugajean]

@kienstra Should be all good now! 🎉

[kienstra]

Approved

Hi @dugajean,
Thanks for your patience, and for staying so late today. This looks good.

[kienstra]

Feel free to merge this when you'd like.

[kienstra]

I'm merging this, but if there's something you'd like to change, feel free to open another PR.