From 4cc04b375851c7eab49c1fc6be0bffaa7f67d37c Mon Sep 17 00:00:00 2001 From: amtins Date: Sat, 13 Jan 2024 16:43:49 +0100 Subject: [PATCH] feat(markers-display): displays the marker buffer This feature modifies the `MarkerDisplay` class to add support for displaying and updating the marker buffer at every progress event. - modifies the `updateMarker` function to take a `time` and a `css variable` as parameters - adds the `updateMarkerBuffered` function, which uses `updateMarker` to update the marker buffer - adds the `updateMarkerPlayed` function, which uses `updateMarker` to update the played marker - renames the `css variable` used to update the marker's buffering percentage - redefines the default color of `--cst-marker-buffered-background-color` --- package-lock.json | 4 +- package.json | 2 +- src/markers/css/cassettator-markers.css | 4 +- src/markers/src/marker-display.js | 51 +++++++++++++++++-------- 4 files changed, 40 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8f28ff9..0b25d23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cassettator.js", - "version": "0.69.420", + "version": "0.504.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cassettator.js", - "version": "0.69.420", + "version": "0.504.0", "license": "MIT", "devDependencies": { "@rollup/plugin-json": "^6.0.1", diff --git a/package.json b/package.json index 2634569..affefca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cassettator.js", - "version": "0.420.0", + "version": "0.504.0", "description": "A collection of video.js components and plugins", "author": "amtins ", "license": "MIT", diff --git a/src/markers/css/cassettator-markers.css b/src/markers/css/cassettator-markers.css index 582a930..99e3c0a 100644 --- a/src/markers/css/cassettator-markers.css +++ b/src/markers/css/cassettator-markers.css @@ -3,7 +3,7 @@ /* private variables */ --_cst-marker-played: 0%; /* TODO implement buffered */ - --cst-marker-buffered: 0%; + --_cst-marker-buffered: 0%; } .cassettator-markers .vjs-time-tooltip { @@ -36,7 +36,7 @@ height: 100%; 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-buffered-background-color, rgba(115, 133, 159, 0.7)) 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); } diff --git a/src/markers/src/marker-display.js b/src/markers/src/marker-display.js index 79d6bf4..b8a2683 100644 --- a/src/markers/src/marker-display.js +++ b/src/markers/src/marker-display.js @@ -9,7 +9,7 @@ import videojs from 'video.js'; */ /** - * A class representing a marker. + * A class representing a marker that will be displayed in the progress bar. * * @class * @extends Component @@ -26,10 +26,12 @@ class MarkerDisplay extends videojs.getComponent('component') { super(player, options); const { gap } = options; - this.updateMarker = this.updateMarker.bind(this); + this.updateMarkerPlayed = this.updateMarkerPlayed.bind(this); + this.updateMarkerBuffered = this.updateMarkerBuffered.bind(this); this.setMarkerWidth(this.markerWidth(), gap); - this.player().on('timeupdate', this.updateMarker); + this.player().on('timeupdate', this.updateMarkerPlayed); + this.player().on('progress', this.updateMarkerBuffered); } /** @@ -59,12 +61,13 @@ class MarkerDisplay extends videojs.getComponent('component') { } /** - * Updates the marker background color, which uses the player's current time - * to calculate the percentage of the marker that has been played. + * Updates the marker background color based on the provided time and the css + * variable name. + * + * @param {number} time - The time (in seconds). + * @param {string} cssVar - The CSS variable name. */ - updateMarker() { - const currentTime = this.player().currentTime(); - + updateMarker(time = 0, cssVar) { const duration = this.player().duration(); const markersElWidth = this.parentComponent_.el().getClientRects()[0].width; const markerOffsetLeft = this.el().offsetLeft; @@ -72,22 +75,36 @@ class MarkerDisplay extends videojs.getComponent('component') { const markerStart = (duration * markerOffsetLeft) / markersElWidth; const markerEnd = (duration * (markerOffsetLeft + markerOffsetWidth)) / markersElWidth; - const percent = (currentTime - markerStart) / (markerStart - markerEnd); + const percent = (time - markerStart) / (markerStart - markerEnd); - if (currentTime > markerEnd) { + if (time > 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(cssVar, `200%`); } - if (currentTime < markerStart) { - this.el().style.setProperty('--_cst-marker-played', `0%`); + if (time < markerStart) { + this.el().style.setProperty(cssVar, `0%`); } - if (currentTime >= markerStart && currentTime <= markerEnd) { - this.el().style.setProperty('--_cst-marker-played', `${Math.abs(percent) * 100}%`); + if (time >= markerStart && time <= markerEnd) { + this.el().style.setProperty(cssVar, `${Math.abs(percent) * 100}%`); } } + /** + * Updates the buffered portion of the marker. + */ + updateMarkerBuffered() { + this.updateMarker(this.player().bufferedEnd(), '--_cst-marker-buffered'); + } + + /** + * Updates the played portion of the marker. + */ + updateMarkerPlayed() { + this.updateMarker(this.player().currentTime(), '--_cst-marker-played'); + } + // *************************************************************************** // Standard component functions ********************************************** // *************************************************************************** @@ -116,7 +133,9 @@ class MarkerDisplay extends videojs.getComponent('component') { * Disposes of the marker component. */ dispose() { - this.player().off('timeupdate', this.updateMarker); + this.player().off('timeupdate', this.updateMarkerPlayed); + this.player().off('progress', this.updateMarkerBuffered); + super.dispose(); } }