feat(cassettator-markers): css customization

Facilitates customization via CSS. It is no longer necessary to target the
component class in order to redefine the CSS variable, thus improving the
developer experience.

In concrete terms, this means the following changes:

- Before modification:
  ```css
    .cst-marker {
        --cst-marker-played-background-color: blue;
    }
  ```
- After modification:
  ```css
    .video-js {
        --cst-marker-played-background-color: blue;
    }
  ```

- remove the assignment of a default value to variables
- add a new variable for the default background color
- add documentation for the new variable

Author: amtins

docs/cassettator-markers.md

@@ -31,7 +31,8 @@ You can customize the look and feel of these markers using CSS variables.
 
 | **Variable Name** | **Description** |
 |------------------|-----------------|
+| `--cst-default-background-color` | Sets default background color to be applied to `.cst-markers:empty` and `.cst-marker` |
 | `--cst-markers-background-color` | Sets the background color of the markers in the seek bar. |
+| `--cst-marker-background-color` | Sets the background color of the marker in the seek bar. |
 | `--cst-marker-played-background-color` | Sets the background color of the played portion of the marker. |
 | `--cst-marker-buffered-background-color` | Sets the background color of the buffered portion of the marker. |
-| `--cst-marker-background-color` | Sets the background color of the markers in the seek bar. |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cassettator.js",
-  "version": "0.69.42035",
+  "version": "0.420.0",
   "description": "A collection of video.js components and plugins",
   "author": "amtins <[email protected]>",
   "license": "MIT",

src/markers/css/cassettator-markers.css

@@ -1,25 +1,18 @@
-.cassettator-markers .vjs-progress-holder,
-.cassettator-markers .vjs-load-progress,
-.cassettator-markers .vjs-load-progress div,
-.cassettator-markers .vjs-play-progress {
-  background-color: transparent;
+.cassettator-markers {
+  --cst-default-background-color: rgba(115, 133, 159, 0.5);
+  /* private variables */
+  --_cst-marker-played: 0%;
+  /* TODO implement buffered */
+  --cst-marker-buffered: 0%;
 }
 
-
 .cassettator-markers .vjs-time-tooltip {
   padding: var(--cst-time-tooltip, .15em .25em);
 }
 
 .cassettator-markers .vjs-mouse-display .vjs-time-tooltip {
   white-space: nowrap;
   transform: translateX(-50%);
-
-
-  /* max-width: 10em;
-  background: blueviolet;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis; */
 }
 
 /* remove mouse display flickering when hovering with the mouse */
@@ -28,7 +21,6 @@
 }
 
 .cst-markers {
-  --cst-markers-background-color : rgba(115, 133, 159, 0.5);
   width: 100%;
   height: 100%;
   display: flex;
@@ -37,23 +29,21 @@
 }
 
 .cst-markers:empty {
-  background: var(--cst-markers-background-color);
+  background: var(--cst-markers-background-color, var(--cst-default-background-color));
 }
 
 .cst-marker {
-  --cst-marker-played-background-color: #fff;
-  --cst-marker-buffered-background-color: transparent;
-  --cst-marker-background-color : var(--cst-markers-background-color);
-  --cst-marker-played: 0%;
-  /* TODO implement buffered */
-  --cst-marker-buffered: 0%;
-
   height: 100%;
-  background: linear-gradient(
-    to right,
-    var(--cst-marker-played-background-color) var(--cst-marker-played),
-    var(--cst-marker-buffered-background-color) 0 var(--cst-marker-buffered),
-    var(--cst-marker-background-color) 0%
-  );
+  background: linear-gradient(to right,
+      var(--cst-marker-played-background-color, #fff) var(--_cst-marker-played),
+      var(--cst-marker-buffered-background-color, transparent) 0 var(--cst-marker-buffered),
+      var(--cst-marker-background-color, var(--cst-default-background-color)) 0%);
   border-radius: var(--cst-marker-border-radius, 0.05em);
+}
+
+.cassettator-markers .vjs-progress-holder,
+.cassettator-markers .vjs-load-progress,
+.cassettator-markers .vjs-load-progress div,
+.cassettator-markers .vjs-play-progress {
+  background-color: transparent;
 }

src/markers/src/marker-display.js

@@ -76,15 +76,15 @@ class MarkerDisplay extends videojs.getComponent('component') {
 
     if (currentTime > markerEnd) {
       // Setting the value to 200% avoids losing pixel when resizing the player.
-      this.el().style.setProperty('--cst-marker-played', `200%`);
+      this.el().style.setProperty('--_cst-marker-played', `200%`);
     }
 
     if (currentTime < markerStart) {
-      this.el().style.setProperty('--cst-marker-played', `0%`);
+      this.el().style.setProperty('--_cst-marker-played', `0%`);
     }
 
     if (currentTime >= markerStart && currentTime <= markerEnd) {
-      this.el().style.setProperty('--cst-marker-played', `${Math.abs(percent) * 100}%`);
+      this.el().style.setProperty('--_cst-marker-played', `${Math.abs(percent) * 100}%`);
     }
   }