From 28c2d6f1c4cd67a584c293e7f127fc64545166fa Mon Sep 17 00:00:00 2001 From: Amber Huo <105802812+amber-huo@users.noreply.github.com> Date: Wed, 11 Oct 2023 16:49:14 -0400 Subject: [PATCH] Added ability to set playhead text background color and padding See #507 --- doc/API.md | 18 +++++++++++++++ src/main.js | 32 ++++++++++++++----------- src/playhead-layer.js | 54 ++++++++++++++++++++++++++++--------------- src/waveform-view.js | 2 ++ 4 files changed, 74 insertions(+), 32 deletions(-) diff --git a/doc/API.md b/doc/API.md index f22840de..b9548afa 100644 --- a/doc/API.md +++ b/doc/API.md @@ -155,6 +155,12 @@ var options = { // Color of the playhead text playheadTextColor: '#aaa', + // Background color of the playhead text + playheadBackgroundColor: 'transparent', + + // Padding around the playhead text (pixels) + playheadPadding: 2, + // Tolerance for clicks in the zoomview to be interpreted as // dragging the playhead (pixels) playheadClickTolerance: 3, @@ -258,6 +264,12 @@ var options = { // Color of the playhead text playheadTextColor: '#aaa', + // Background color of the playhead text + playheadBackgroundColor: 'transparent', + + // Padding around the playhead text (pixels) + playheadPadding: 2, + // Returns a string for the playhead timestamp label formatPlayheadTime: function, @@ -407,6 +419,12 @@ var options = { // Color of the playhead text playheadTextColor: '#aaa', + // Background color of the playhead text + playheadBackgroundColor: 'transparent', + + // Padding around the playhead text (pixels) + playheadPadding: 2, + // Color of the axis gridlines axisGridlineColor: '#ccc', diff --git a/src/main.js b/src/main.js index 4e5fa00a..9c77626d 100644 --- a/src/main.js +++ b/src/main.js @@ -67,19 +67,21 @@ function Peaks() { Peaks.prototype = Object.create(EventEmitter.prototype); const defaultViewOptions = { - playheadColor: '#111111', - playheadTextColor: '#aaaaaa', - axisGridlineColor: '#cccccc', - showAxisLabels: true, - axisTopMarkerHeight: 10, - axisBottomMarkerHeight: 10, - axisLabelColor: '#aaaaaa', - fontFamily: 'sans-serif', - fontSize: 11, - fontStyle: 'normal', - timeLabelPrecision: 2, - enablePoints: true, - enableSegments: true + playheadColor: '#111111', + playheadTextColor: '#aaaaaa', + playheadBackgroundColor: 'transparent', + playheadPadding: 2, + axisGridlineColor: '#cccccc', + showAxisLabels: true, + axisTopMarkerHeight: 10, + axisBottomMarkerHeight: 10, + axisLabelColor: '#aaaaaa', + fontFamily: 'sans-serif', + fontSize: 11, + fontStyle: 'normal', + timeLabelPrecision: 2, + enablePoints: true, + enableSegments: true }; const defaultZoomviewOptions = { @@ -142,6 +144,8 @@ function getOverviewOptions(opts) { 'playedWaveformColor', 'playheadColor', 'playheadTextColor', + 'playheadBackgroundColor', + 'playheadPadding', 'formatPlayheadTime', 'timeLabelPrecision', 'axisGridlineColor', @@ -199,6 +203,8 @@ function getZoomviewOptions(opts) { 'playedWaveformColor', 'playheadColor', 'playheadTextColor', + 'playheadBackgroundColor', + 'playheadPadding', 'formatPlayheadTime', 'playheadClickTolerance', 'timeLabelPrecision', diff --git a/src/playhead-layer.js b/src/playhead-layer.js index e647e82f..e77e209b 100644 --- a/src/playhead-layer.js +++ b/src/playhead-layer.js @@ -24,6 +24,8 @@ import { Text } from 'konva/lib/shapes/Text'; * is shown next to the playhead. * @param {String} options.playheadColor * @param {String} options.playheadTextColor + * @param {String} options.playheadBackgroundColor + * @param {Number} options.playheadPadding * @param {String} options.playheadFontFamily * @param {Number} options.playheadFontSize * @param {String} options.playheadFontStyle @@ -37,6 +39,8 @@ function PlayheadLayer(options) { this._playheadVisible = false; this._playheadColor = options.playheadColor; this._playheadTextColor = options.playheadTextColor; + this._playheadBackgroundColor = options.playheadBackgroundColor; + this._playheadPadding = options.playheadPadding; this._playheadFontFamily = options.playheadFontFamily; this._playheadFontSize = options.playheadFontSize; @@ -44,10 +48,10 @@ function PlayheadLayer(options) { this._playheadLayer = new Konva.Layer(); - this._createPlayhead(this._playheadColor); + this._createPlayhead(); if (options.showPlayheadTime) { - this._createPlayheadText(this._playheadTextColor); + this._createPlayheadText(); } this.fitToView(); @@ -118,10 +122,10 @@ PlayheadLayer.prototype.fitToView = function() { * @param {String} color */ -PlayheadLayer.prototype._createPlayhead = function(color) { +PlayheadLayer.prototype._createPlayhead = function() { // Create with default points, the real values are set in fitToView(). this._playheadLine = new Line({ - stroke: color, + stroke: this._playheadColor, strokeWidth: 1 }); @@ -134,23 +138,34 @@ PlayheadLayer.prototype._createPlayhead = function(color) { this._playheadLayer.add(this._playheadGroup); }; -PlayheadLayer.prototype._createPlayheadText = function(color) { - const time = this._player.getCurrentTime(); - const text = this._view.formatTime(time); +PlayheadLayer.prototype._createPlayheadText = function() { + const self = this; + + const time = self._player.getCurrentTime(); + const text = self._view.formatTime(time); // Create with default y, the real value is set in fitToView(). - this._playheadText = new Text({ - x: 2, + self._playheadText = new Text({ + x: 0, y: 0, + padding: self._playheadPadding, text: text, - fontSize: this._playheadFontSize, - fontFamily: this._playheadFontFamily, - fontStyle: this._playheadFontStyle, - fill: color, - align: 'right' + fontSize: self._playheadFontSize, + fontFamily: self._playheadFontFamily, + fontStyle: self._playheadFontStyle, + fill: self._playheadTextColor, + align: 'right', + sceneFunc: function(context, shape) { + const width = shape.width(); + const height = shape.height() + 2 * self._playheadPadding; + + context.fillStyle = self._playheadBackgroundColor; + context.fillRect(0, -self._playheadPadding, width, height); + shape._sceneFunc(context); + } }); - this._playheadGroup.add(this._playheadText); + self._playheadGroup.add(self._playheadText); }; /** @@ -197,15 +212,15 @@ PlayheadLayer.prototype._syncPlayhead = function(time) { if (this._playheadText) { const text = this._view.formatTime(time); - const playheadTextWidth = this._playheadText.getTextWidth(); + const playheadTextWidth = this._playheadText.width(); this._playheadText.setText(text); if (playheadTextWidth + playheadX > width - 2) { - this._playheadText.setX(-playheadTextWidth - 2); + this._playheadText.setX(-playheadTextWidth); } else if (playheadTextWidth + playheadX < width) { - this._playheadText.setX(2); + this._playheadText.setX(0); } } } @@ -271,7 +286,8 @@ PlayheadLayer.prototype.showPlayheadTime = function(show) { if (show) { if (!this._playheadText) { // Create it - this._createPlayheadText(this._playheadTextColor); + this._createPlayheadText(this._playheadTextColor, + this._playheadBackgroundColor, this._playheadPadding); this.fitToView(); } } diff --git a/src/waveform-view.js b/src/waveform-view.js index d2f15014..56a99a37 100644 --- a/src/waveform-view.js +++ b/src/waveform-view.js @@ -84,6 +84,8 @@ function WaveformView(waveformData, container, peaks, viewOptions) { showPlayheadTime: self._viewOptions.showPlayheadTime, playheadColor: self._viewOptions.playheadColor, playheadTextColor: self._viewOptions.playheadTextColor, + playheadBackgroundColor: self._viewOptions.playheadBackgroundColor, + playheadPadding: self._viewOptions.playheadPadding, playheadFontFamily: self._viewOptions.fontFamily, playheadFontSize: self._viewOptions.fontSize, playheadFontStyle: self._viewOptions.fontStyle