Logistics/infrastructure required for highlight images

[JonEsparaz]

I'm having issues cropping these highlight images:
.

Unfortunately React Native doesn't have anything like object-position in CSS. There's an Expo supported image manipulator library, but it requires the image to be on the local file system and definitely has performance drawbacks. I attempted to use WebView with CSS and a solution from Stack Overflow, but neither worked.

I think manually cropping and uploading the images is required if we want to keep this design feature.

┆Issue is synchronized with this Wrike Task

[JonEsparaz]

For future development (we will launch with the 16:9 images)...

A good way to automate this is a Python script in GitHub actions that crops (and downscales) the image, then performs a checkout to https://github.com/themeetinghouse/web. We can tell which highlight videos have already had the thumbnail processed by naming the files <youtubeId>.jpg. If we want to get fancy, OpenCV is a good option for detecting faces to get the optimal crop.

[GeorgeBellTMH]

I’d prefer not to have them in GitHub. If we can figure out a way to do it on s3 that would be great. Maybe just have a property that is percentage left/right that is setable in the admin and runs a lambda.

…

Sent from my iPhone On Aug 26, 2020, at 3:33 PM, Jon Esparaz <notifications@github.com> wrote:  For future development (we will launch with the 16:9 images)... A good way to automate this is a Python script in GitHub actions that crops (and downscales) the image, then performs a checkout to https://github.com/themeetinghouse/web. We can tell which highlight videos have already had the thumbnail processed by naming the files <youtubeId>.jpg. If we want to get fancy, OpenCV is a good option for detecting faces to get the optimal crop. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#50 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ALMJUYWZQEDOROQG77WQTELSCVPQXANCNFSM4QGPGOBA>.