amtins / cassettator.js

A collection of video.js components and plugins

Cassettator

A collection of video.js components and plugins in a single repo.

⚠️ Still work in progress.

Table of Contents

• Cassettator
  • Table of Contents
  • Installation
  • Usage
    • Cassettator-markers

Installation

Install cassettator.js via npm:

npm install cassettator.js

Usage

import videojs from 'video.js';
import 'cassettator.js';


const player = videojs('my-player');

Cassettator-markers

A customizable plugin for displaying markers directly in the progress bar.

Refer to the plugin page for more details..

cassettator.js's Issues

Bundle consideration

Current status

It appears that parceljs, despite being my favorite tool, doesn't allow me to compile the project the way I'd like. So, at least for the generation of the npm package, I've decided to stop using parceljs.

I'd like to avoid spending hours (minutes) configuring a bundling tool as much as possible. So I'll apply the same rule I always use when selecting a tool. That rule is: the 10-minute rule

It works like this:

• 5 minutes to have a quick look at the documentation
• 5 minutes to test a basic case

If it works, it's a good tool, if it doesn't, it's a tool that requires intelligence that I don't have, so I leave it to talented people.

Most people don't even think about how a pen works, they just use it and it works...

Potential solution

• webpack, never
• esbuild, looks very good, but I failed
• vitejs, I had high hopes, but I failed too
• rollup, I was very dubious at first, because it always reminded me of webpack, I don't know why. However, I managed to do what I wanted without having to think. So that's the tool I'm going to use.

Error when changing source during playback

Description

When playback has started and a new source is loaded, an error occurs because the updateMarker function tries to access the this.parentComponent_.el().getClientRects()[0].width even though getClientRects() is still empty.

cassettator.js/src/markers/src/marker-display.js

Line 72 in da6f701

const markersElWidth = this.parentComponent_.el().getClientRects()[0].width;

Screencast.from.28.01.24.14.35.28.webm

Steps to reproduce

1. open https://amtins.github.io/cassettator.js/
2. start the playback
3. open the developer console
4. run player.src(player.src())