summaryrefslogtreecommitdiff
path: root/priv/static/video.js/examples
diff options
context:
space:
mode:
authorArjun Satarkar <me@arjunsatarkar.net>2024-07-29 14:37:17 +0000
committerArjun Satarkar <me@arjunsatarkar.net>2024-07-29 14:50:20 +0000
commit37db2ef91cb806a6ddd123bf7c1974d00699b86a (patch)
tree38dd2a6fc6a7bba5f161856f7264b610dfb6d7d4 /priv/static/video.js/examples
parent78808161c6b8726be5e18427a5da4328ab1fa26f (diff)
downloadmediasync-37db2ef91cb806a6ddd123bf7c1974d00699b86a.tar
mediasync-37db2ef91cb806a6ddd123bf7c1974d00699b86a.tar.gz
mediasync-37db2ef91cb806a6ddd123bf7c1974d00699b86a.zip
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.)
Diffstat (limited to 'priv/static/video.js/examples')
0 files changed, 0 insertions, 0 deletions