clip-navigator

Upon updating the json payload for Bubble Bubble that ships with clip-navigator I discovered two problems:

• The json is bundled with the build
• The build doesn’t work with node 18

Considering a package-lock.json drop and re-install didn’t work, an upgrade dependencies was in order. This included:

• CRA v4 🤢 -> vite v4
• React v17 -> React v18
• Material UI v4 > mui v5

mui doesn’t support makeStyles any more however tss-react is very similar and quite simple to migrate with the associated Codemod.

Getting clip navigator to not look like garbage on mobile required wrapping the video iframes using this technique and switching out the iframe that embeds the react app into the blog with the script and link tags generated by create-react-app.

Embedding the clip-navigator directly into the page required parsing the index.html that is built by create-react-app, querying for all links and scripts, and outputting them to a new file called out.html. I do this in package.js and then move the file to my jekyll _includes folder for generation when the blog deploys.

Finally, I moved the clip tools into their own drop-down menu and changed the hotkeys, hence the major version bump. Still some work to have mobile auto-play.

Clip Navigator now supports the Vzaar video player, which is what most of the videos submitted to Twin Galaxies use. There was no readily available npm package for the vzaar player so I had to instead write a wrapper around around their javascript API.

The data schema is updated to support a type of either YouTube or Vzaar and the player will automatically switch based on the type of the currently selected video.

Support for Twin Galaxies videos means I’ll be able to include a lot more videos in the bubble bobble comparison.

I’ve implemented JSON export which makes building the data Clip Navigator needs easier - an export button now exists to copy the JSON payload directly to the clipboard, rather than snooping around in browser storage to find it.

Clicking buttons also felt a bit slow when creating and removing clips, so I’ve added some more keyboard shortcuts to speed this process up:

• Z - New clip at current location
• X - Delete last clip
• Left Arrow - Scrub -5sec
• Right Arrow - Scrub +5 sec