Knowclip

A cross-platform desktop application for turning audio and video files into flashcards.

It works like this:

1. Choose a media file.
2. Make your clips (manually or automatically).
3. Export your audio flashcards for use in Anki.

Currently being built with Electron, Vite, Redux and RxJS. Audio processing is done with ffmpeg.

Demo: Making cards automatically with subtitled video

Development

To install NPM packages:

npm install

Once packages are installed, you may run the dev build:

npm start

A dev build of the Electron app will open automatically. The server will be running in the background, with Hot Module Reloading available by default, thanks to electron-vite.

Tests

Tests are run with Vitest.

Unit tests

npm test

Integration tests

Integration tests use Webdriverio to make sure all the parts of the app are working together.

npm run integration

The disadvantage of integration tests is that they are slow to run. To speed things up while writing tests, you can run these scripts instead:

# Run integration tests
# without rebuilding the app.
# Useful if you only changed test code
npm run integration:skip-build

# Run integration tests
# without closing the app at the end.
# Lets you inspect things (e.g. with dev tools)
# in the event of a test failure.
npm run integration:debug


# run the test without building the app
# and without closing the app on completion.
# (combines debug "d" and skip-build "s")
npm run integration:ds

Test CLI options

Any arguments you pass to the test scripts will be forwarded to Vitest.

So if you wanted to say, run just one specific test, you can do something like this:

npm test -- "reducers/clips" # target tests with "reducers/clips" in the filepath

Electron upgrade config checklist

Upgrading Electron version requires a few config files to be touched.

• Node version must be updated in:
  • .nvmrc,
  • .tool-versions
  • "engines" in package.json
  • Github workflows (Mac, Linux, and Windows)
• Electron version must be updated in:
  • .npmrc "browserslist"
  • "dependencies" in package.json
• Chromedriver version must be updated in:
  • "dependencies" package.json