From 718e413d03f2b1f9667a5db9ef0a66dd6c43d3bb Mon Sep 17 00:00:00 2001 From: Christian Ebert Date: Fri, 29 Dec 2023 17:43:10 +0000 Subject: [PATCH] doc(css): explain state classes --- README.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/README.md b/README.md index 945e788..df18eb9 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ - [Disabling and enabling the plugin](#disabling-and-enabling-the-plugin) - [Playlist example](#playlist-example) - [Debugging](#debugging) + - [CSS state classes](#css-state-classes) - [Migrating from v2.1.x](#migrating-from-v21x) - [Constraints](#constraints) - [License](#license) @@ -318,6 +319,23 @@ player.spriteThumbnails({ }).log.level('debug'); ``` +### CSS state classes + +The plugin uses two CSS classes on the player element to signal the current state of plugin: + +class name | plugin state +---------- | ------------ +`vjs-sprite-thumbnails` | plugin is/not loaded +`vjs-thumbnails-ready` | plugin is/not ready to show thumbnails + +This allows for CSS directives which apply to player elements depending on plugin state: + +```css +.video-js.vjs-thumbnails-ready .vjs-progress-holder { + background-color: green; +} +``` +

Migrating from v2.1.x

Plugin version 2.2.0 introduces the *mandatory* option [`columns`](#columns). Thumbnail images are now [loaded on demand](https://github.com/phloxic/videojs-sprite-thumbnails/issues/56) which interferes less with video playback. Please apply the option to your existing setups.