Change video layout, add alignment button for Discord activity

The button to snap the video to the left or right instead of the
default center is because mobile Discord shows the user's avatar as a
little floating window over the activity. This can infringe on the
video if we're unlucky vis-a-vis screen aspect ratio and video aspect
ratio; in practice we can often save ourselves by changing the
video alignment so as to create a greater region of unused space in
which the avatar can reside.

Making this work required changes to how we set video dimensions.
Previously we set the player's container to 100% width and height
(technically 100svw and 100svh respectively), let video.js fill the
container, and let it draw the actual video in the center of this area
by itself. But this gives us no control over where the video is drawn,
so we couldn't implement snapping.

Any attempt to change this runs into the difficulty that it's really
hard to substantively control video.js player dimensions without
knowing the aspect ratio, which we don't. (Yes, I tried
object-fit: contain; it didn't seem to do anything.) The solution is
to default to 100% width and height on page load, and set them to
better values once we load enough video metadata to know the aspect
ratio. (This is all responsive using CSS media queries.)

0 files changed, 0 insertions, 0 deletions