WORLDSERVICE-354: Portrait Video Thumbnail

[Louis-Matsika]

Resolves JIRA WORLDSERVICE-354

Overall changes

Adds code to detect for ["Editorial", "Portrait"].

This doesn't fix the issue with video aspect ratio appearing weird when playing some videos:
https://www.bbc.com/persian/articles/c149pnldynxo

Need to message the smp team about this, if it's something we can change on our end, or something editorial needs to do when uploading a video.

Code changes

• Adds code to check for portrait in both the first and second position of the array.
• Adds unit tests to cover new cases

Testing

1. http://localhost:7080/indonesia/articles/c391p84jgdno?renderer_env=live

Helpful Links

Add Links to useful resources related to this PR if applicable.

Coding Standards

Repository use guidelines

[karinathomasbbc]

Could this be improved in any way with array destructuring & some clever checking whether the orientation is already in the mapping object?

const [orientationType] = versionsBlock?.types?.filter(type => Object.keys(ORIENTATION_MAPPING).includes(type));

const orientation = ORIENTATION_MAPPING[orientationType] || ORIENTATION_MAPPING.Original;

[HarveyPeachey]

Yeah this will definitely work, the only reason why we've targeted the specific positions in the types array is because I didn't know what the schema could be for types

[karinathomasbbc]

You could do a find instead of a filter... so that it would just match the first one it matches. But it's also OK to leave as is as like you say, we don't know what else might be in that array...

const orientationType = versionsBlock?.types?.find(type => Object.keys(ORIENTATION_MAPPING).includes(type));

const orientation = ORIENTATION_MAPPING[orientationType] || ORIENTATION_MAPPING.Original;

[HarveyPeachey]

I'll just switch it over to this as it's cleaner and is basically the same

[HarveyPeachey]

Ahh wait undefined can't be used as an index selector

[HarveyPeachey]

Do you reckon something like this:

const orientationType =
    versionsBlock?.types?.find(type =>
      Object.keys(ORIENTATION_MAPPING).includes(type),
    ) ?? 'Original';

  const orientation = ORIENTATION_MAPPING[orientationType];

[karinathomasbbc]

That would work!

[Isabella-Mitchell]

Can see this working as expected. Thanks :)

Tested:

• 'Editorial portrait' (renders correctly): http://localhost.bbc.com:7080/indonesia/articles/c391p84jgdno?renderer_env=live
• 'Editorial' and 'Original' landscape videos (no change): http://localhost.bbc.com:7080/persian/articles/c5y3x5jlpyko?renderer_env=live
• 'Portrait' video (no change): http://localhost.bbc.com:7080/mundo/articles/c1xv2q1gewvo?renderer_env=test

I can see that the video asset in is distorted in Castaway (the tools Editorial use to upload videos). So agree it might be something in upload or playback.

[karinathomasbbc]

You could do a find instead of a filter... so that it would just match the first one it matches. But it's also OK to leave as is as like you say, we don't know what else might be in that array...

const orientationType = versionsBlock?.types?.find(type => Object.keys(ORIENTATION_MAPPING).includes(type));

const orientation = ORIENTATION_MAPPING[orientationType] || ORIENTATION_MAPPING.Original;