First pass at an interactive picture-in-picture video component
Much of the video that winds up on dash.ohn.sh is recorded in a very particular format (in OBS Studio), consisting of four 1080p tiles, each representing an “angle” of the same scene. Two of those angles are screen captures, which are difficult to read when limited to one quarter of a video player. Luckily, the web platform provides a bunch of tools to process video and create custom video players. The above demo shows a first pass at a solution, implemented as an interactive React component.
Concept
The basic idea is to display one quadrant at a time in a main view that occupies most of the video player, with the other three quadrants shown picture-in-picture style along one edge. Clicking a picture-in-picture view swaps it with the main view. Clicking the main view toggles all of the picture-in-picture views on/off as a group, which is important because they do obscure part of the main view when enabled.
Git Commits
dash commits 8
ohnsh/dash-
4:21 pm — John Sherrell <dev@ohn.sh>
@dash/next: more accessibility improvements to CropOverlay. The static data structure that defines the crop regions now includes descriptive text that is ised in `aria-label` attributes.
-
3:19 pm — John Sherrell <dev@ohn.sh>
@dash/next: improve accessibility in CropOverlay by wrapping interactive <canvas> elements in <button>s that are given the onClick actions.
-
12:59 pm — John Sherrell <dev@ohn.sh>
@dash/next: make focus outline styles work in Safari, too, it an annoyingly fragile way. The fixes currently only apply to the VODPlayer views; the sidebar is next.
-
12:41 pm — John Sherrell <dev@ohn.sh>
@dash/next: improve styling of links and buttons in VODPlayer views by creating room for browser-default focus outlines inside scroll containers, where they are otherwise clipped. Update buttons underneath VODPlayer to simply brighten on hover rather than use outline styles that could be confused with focus.
-
10:56 am — John Sherrell <dev@ohn.sh>
@dash/next: CropOverlay: make pipEnabled true by default (when overlay is activated). Add `cursor: pointer` to "See more" button in sidebar.
-
1:55 am — John Sherrell <dev@ohn.sh>
@dash/next: fixed another layout bug, this time for landscape mobile viewports. At some point, I changed `overflow: hidden` to `overflow: clip` on the <video> wrapper element, which removed the flexbox min-size reset associated with scroll containers. I'm now setting `min-height: 0` directly.
-
1:15 am — John Sherrell <dev@ohn.sh>
@dash/next: better CSS handling of VODPlayer when no source selected. Uses `vh` unit for both width and max-height in order to limit the size while maintaining a reasonable aspect ratio. (Unfortunately, `aspect-ratio` itself doesn't seem to constraing width when `max-height` is reached.)
-
1:06 am — John Sherrell <dev@ohn.sh>
@dash/next: fixed min-height bug that caused VODPlayer to overflow the viewport in portrait mode at mobile sizes.
days commits 4
ohnsh/days-
10:34 pm — John Sherrell <dev@ohn.sh>
Tag markdown code blocks as typescript for syntax highlighting.
-
8:52 pm — John Sherrell <dev@ohn.sh>
Document typos, vale, and cspell usage (spellcheckers / prose linters).
-
8:17 pm — John Sherrell <dev@ohn.sh>
CropOverlay demo video was too large for `wrangler deploy`; moved to a new R2 bucket.
-
7:55 pm — John Sherrell <dev@ohn.sh>
New post about CropOverlay component in @dash/next, along with demo video. Ran `typos` on project and fixed a few typos.