@salesforcedevs/dx-components 1.3.245 → 1.3.246-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.245",
+    "version": "1.3.246-canary.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -23,6 +23,7 @@
         "lodash.defaults": "^4.2.0",
         "lodash.get": "^4.4.2",
         "lodash.kebabcase": "^4.1.1",
+        "memoize-one": "^6.0.0",
         "microtip": "0.2.2",
         "salesforce-oauth2": "^0.2.0",
         "throttle-debounce": "^5.0.0",
@@ -43,6 +44,5 @@
     },
     "volta": {
         "node": "16.19.1"
-    },
-    "gitHead": "7785e120dec8c1c204eeed4f8610603480fc5c7b"
+    }
 }

package/src/modules/dx/audio/audio.css

@@ -1,16 +1,237 @@
-.audio-container {
-    width: 350px;
+:host {
+    --dx-c-track-before-color: var(--dx-g-indigo-vibrant-30);
+    --dx-c-track-custom-dark-gray: rgba(62 62 62 / 100%);
+    --dx-c-track-custom-medium-gray: rgba(195 195 195 / 100%);
+    --dx-c-track-custom-light-gray: rgba(235 235 236 / 100%);
+    --dx-c-track-thumb-size: 10px;
+    --dx-c-threedot-menu-item-padding: 14px;
+}
+
+/* Outermost container/border */
+.custom-audio-player {
+    background-color: var(--dx-g-indigo-vibrant-90, #e0e5f8);
+    border-radius: 12px;
+    padding: 6px 13px 13px;
+}
+
+.listen-icon {
+    padding: 0 6px 0 4px;
+}
+
+.listen-text {
+    display: inline-block;
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-2xs, 11px);
+    font-weight: var(--dx-g-font-bold, bold);
+    letter-spacing: 0.6px;
+    position: relative;
+    text-transform: uppercase;
+    top: 1px;
+}
+
+/* The "inner" container/main part of the player, inside the outer, colored border */
+/* Current design goal of this element and all other "inner" elements is to closely match native controls as they appear in Chrome */
+.player {
+    --dx-c-popover-border-radius: 0;
+    --dx-c-popover-padding: 0;
+
+    align-items: center;
+    background-color: var(--sds-g-gray-1, #fff);
+    border-radius: 5px;
+    display: flex;
+    margin-top: 8px;
+    padding: 3px 4px;
+}
+
+/* Player button controls */
+.player dx-button::part(container) {
+    height: 24px;
+    width: 24px;
+}
+
+.player-time,
+.player-volume-slider,
+.player-seek-slider {
+    position: relative;
+    top: 1px;
+}
+
+.player-time {
+    display: inline-block;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-2xs, 11px);
+    margin-left: 4px;
+    margin-right: 8px;
 }
 
-/* TODO: we need mobile breakpoints for this, it looks bad on mobile */
-.audio {
-    width: 350px;
+/* Sliders and "thumb" controls */
+.player-volume-slider,
+.player-seek-slider {
+    appearance: none;
+    border-radius: 16px;
+    cursor: pointer;
+    height: 4px;
+    outline: none;
+    width: 100%;
+}
+
+.player-seek-slider {
+    background: var(--dx-c-track-custom-light-gray);
+}
+
+.player-volume-slider {
+    background: var(--sds-g-gray-7);
+}
+
+/* Create a large, solid "shadow" to the left of the "thumb" on the progress bar, simulating filled in space */
+.player-volume-slider::-webkit-slider-thumb,
+.player-seek-slider::-webkit-slider-thumb {
+    appearance: none;
+    background-color: var(--dx-g-indigo-vibrant-30);
+    border: none;
+    border-radius: 50%;
+    height: var(--dx-c-track-thumb-size);
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    width: var(--dx-c-track-thumb-size);
+}
+
+.player-volume-slider::-moz-range-thumb,
+.player-seek-slider::-moz-range-thumb {
+    background-color: var(--dx-g-indigo-vibrant-30);
+    border: none;
+    border-radius: 50%;
+    height: var(--dx-c-track-thumb-size);
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    width: var(--dx-c-track-thumb-size);
+}
+
+/* NOTE: Even though the 'active' CSS rules for sliders on webkit and mozilla are the same here, they CANNOT be combined or the slider breaks */
+.player-volume-slider:active::-webkit-slider-thumb,
+.player-seek-slider:active::-webkit-slider-thumb {
+    opacity: 1;
+}
+
+.player-volume-slider:active::-moz-range-thumb,
+.player-seek-slider:active::-moz-range-thumb {
+    opacity: 1;
+}
+
+/* Container for the volume slider, which transitions in and out on hover */
+.player-volume-container {
+    align-items: center;
+    border-radius: var(--dx-g-spacing-xs);
+    display: flex;
+    padding-left: 2px;
+    transition: 0.2s ease-out;
+    width: 24px;
+}
+
+.player-volume-container .player-volume-slider {
+    margin: 0;
+    visibility: hidden;
+}
+
+.player-volume-container:hover {
+    background: var(--sds-g-gray-4);
+    width: 100px;
+}
+
+.player-volume-container:hover .player-volume-slider {
+    visibility: visible;
+}
+
+/* Three dot menu, for download and playback speed settings */
+.player-threedot-menu ul {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-2xs, 11px);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.player-threedot-menu li {
+    cursor: pointer;
+    position: relative;
+}
+
+/* Speed selection items have a large left padding in Chrome, which we are mimicking */
+.player-threedot-menu li.player-speed-item {
+    padding-left: calc(var(--dx-c-threedot-menu-item-padding) * 2);
+}
+
+.player-threedot-menu a {
+    color: initial;
+    cursor: pointer;
     display: block;
-    margin-bottom: var(--dx-g-spacing-3xl);
-    border: 5px solid
-        var(
-            --dx-c-featured-content-header-background-color,
-            var(--dx-g-indigo-vibrant-90)
-        );
-    border-radius: 2em;
+    padding: var(--dx-c-threedot-menu-item-padding);
+    text-decoration: none;
+}
+
+.player-threedot-menu dx-icon {
+    display: inline-block;
 }
+
+.player-threedot-menu dx-icon:not(.player-selected-speed) {
+    margin-right: var(--dx-c-threedot-menu-item-padding);
+    position: relative;
+    top: -1px; /* fix icon vertical position */
+}
+
+/* The selected speed has a check mark icon to the right side */
+.player-threedot-menu dx-icon.player-selected-speed {
+    color: var(--dx-g-indigo-vibrant-40);
+    position: absolute;
+    right: 40px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+/* All clickable elements inside of the three dot menu are buttons, except for the download link */
+/* dx-button is not used here because these things barely look like buttons */
+.player-threedot-menu button {
+    background: transparent;
+    border: 0;
+    color: initial; /* only necessary on iOS Safari to remove blue text color */
+    cursor: pointer;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-2xs, 11px);
+    padding: var(--dx-c-threedot-menu-item-padding);
+    text-align: left;
+    width: 100%;
+}
+
+.audio-container {
+    display: none;
+}
+
+@media (hover: hover) {
+    .player dx-button::part(container):hover {
+        background: var(--sds-g-gray-4);
+    }
+
+    /* NOTE: Even though the 'hover' CSS rules for sliders on webkit and mozilla are the same here, they CANNOT be combined or the slider breaks */
+    .player-volume-slider:hover::-webkit-slider-thumb,
+    .player-seek-slider:hover::-webkit-slider-thumb {
+        opacity: 1;
+    }
+
+    .player-volume-slider:hover::-moz-range-thumb,
+    .player-seek-slider:hover::-moz-range-thumb {
+        opacity: 1;
+    }
+
+    .player-volume-container:hover {
+        background: var(--sds-g-gray-4);
+        width: 100px;
+    }
+
+    .player-volume-container:hover .player-volume-slider {
+        visibility: visible;
+    }
+
+    .player-threedot-menu li:hover {
+        background: var(--sds-g-gray-4);
+    }
+}

package/src/modules/dx/audio/audio.html

@@ -1,6 +1,146 @@
 <template>
+    <div class="custom-audio-player">
+        <dx-icon
+            class="listen-icon"
+            size="xsmall"
+            sprite="general"
+            symbol="headphones"
+        ></dx-icon>
+        <span class="listen-text">Listen to this article</span>
+        <div class="player">
+            <template lwc:if={isPlaying}>
+                <dx-button
+                    aria-label="Pause"
+                    class="player-pause-button"
+                    icon-symbol="pause"
+                    variant="custom"
+                    onclick={handleAudioPause}
+                ></dx-button>
+            </template>
+            <template lwc:else>
+                <dx-button
+                    aria-label="Play"
+                    class="player-play-button"
+                    icon-symbol="play"
+                    variant="custom"
+                    onclick={handleAudioPlay}
+                ></dx-button>
+            </template>
+            <div class="player-time">
+                <span class="player-current-time">{formattedCurrentTime}</span>
+                &nbsp;/&nbsp;
+                <span class="player-duration">{formattedDuration}</span>
+            </div>
+            <input
+                aria-label="Current Time"
+                class="player-seek-slider"
+                type="range"
+                max={durationSeconds}
+                lwc:ref="playerSeekSlider"
+                value={currentTimeSeconds}
+                onchange={handleSeekChange}
+                oninput={handleSeekInput}
+            />
+            <div class="player-volume-container">
+                <input
+                    aria-label="Volume Level"
+                    class="player-volume-slider"
+                    type="range"
+                    max="100"
+                    lwc:ref="playerVolumeSlider"
+                    value={volume}
+                    oninput={handleVolumeInput}
+                />
+                <dx-button
+                    aria-label="Volume"
+                    class="player-volume-button"
+                    icon-symbol={volumeIcon}
+                    onclick={handleVolumeClick}
+                    variant="custom"
+                ></dx-button>
+            </div>
+            <dx-popover
+                lwc:ref="playbackSpeedPopover"
+                width="200px"
+                onclose={resetIsSettingPlaybackSpeed}
+            >
+                <dx-button
+                    aria-label="More"
+                    icon-symbol="threedots_vertical"
+                    slot="control"
+                    variant="custom"
+                ></dx-button>
+                <div class="player-threedot-menu" slot="content">
+                    <template lwc:if={isSettingPlaybackSpeed}>
+                        <div>
+                            <ul>
+                                <li>
+                                    <button
+                                        onclick={resetIsSettingPlaybackSpeed}
+                                    >
+                                        <dx-icon
+                                            size="small"
+                                            symbol="back"
+                                        ></dx-icon>
+                                        Options
+                                    </button>
+                                </li>
+                                <template
+                                    for:each={playbackSpeedData}
+                                    for:item="playbackSpeedDatum"
+                                >
+                                    <li
+                                        key={playbackSpeedDatum.value}
+                                        class="player-speed-item"
+                                    >
+                                        <button onclick={handleSetPlaybackSpeed}>
+                                            {playbackSpeedDatum.value}
+                                        </button>
+                                        <dx-icon
+                                            class="player-selected-speed"
+                                            lwc:if={playbackSpeedDatum.selected}
+                                            size="small"
+                                            symbol="check"
+                                        ></dx-icon>
+                                    </li>
+                                </template>
+                            </ul>
+                        </div>
+                    </template>
+                    <template lwc:else>
+                        <ul>
+                            <li>
+                                <a
+                                    href={audioSrc}
+                                    download
+                                    target="_blank"
+                                    rel="noopener"
+                                >
+                                    <dx-icon
+                                        size="small"
+                                        symbol="download"
+                                    ></dx-icon>
+                                    Download
+                                </a>
+                            </li>
+                            <li>
+                                <button onclick={handlePlaybackSpeedClick}>
+                                    <dx-icon
+                                        size="small"
+                                        sprite="general"
+                                        symbol="tachometer-alt"
+                                    ></dx-icon>
+                                    Playback Speed
+                                </button>
+                            </li>
+                        </ul>
+                    </template>
+                </div>
+            </dx-popover>
+        </div>
+    </div>
     <div class="audio-container">
-        <audio class="audio" controls>
+        <audio lwc:ref="audioElement" class="audio" controls>
             <source src={audioSrc} type="audio/mpeg" />
             Your browser does not support the audio element.
         </audio>

package/src/modules/dx/audio/audio.ts

@@ -1,63 +1,403 @@
+import Popover from "dx/popover";
 import { track } from "dxUtils/analytics";
-import { LightningElement, api } from "lwc";
+import { api } from "lwc";
+import { LightningElementWithTypedRefs } from "dxUtilsInternal/withTypedRefs";
+import memoize from "memoize-one";
 
-export default class Audio extends LightningElement {
+type TrackColors = {
+    before: string;
+    buffer?: string;
+    after: string;
+};
+type PlaybackSpeed = (typeof formattedPlaybackSpeeds)[number];
+
+/*
+ * Color settings for the "track" of the slider, which dynamically updates based on amount buffered,
+ * amount played, and amount remaining. The "before" color is what goes _before_ the "thumb" on the
+ * slider, and so on.
+ */
+const uiConfig = {
+    seekSlider: {
+        trackColors: {
+            before: "var(--dx-g-indigo-vibrant-30)",
+            buffer: "var(--dx-c-track-custom-medium-gray)",
+            after: "var(--dx-c-track-custom-light-gray)"
+        } as TrackColors
+    },
+    volumeSlider: {
+        trackColors: {
+            before: "var(--dx-g-indigo-vibrant-30)",
+            after: "var(--dx-c-track-custom-medium-gray)"
+        } as TrackColors
+    }
+};
+
+// Standard playback speeds, though the "formatted" version for 1 is "Normal" (mimicking Chrome)
+const formattedPlaybackSpeeds = [
+    "0.25",
+    "0.5",
+    "0.75",
+    "Normal",
+    "1.25",
+    "1.5",
+    "1.75",
+    "2"
+] as const;
+
+export default class Audio extends LightningElementWithTypedRefs<{
+    audioElement: HTMLAudioElement;
+    playbackSpeedPopover: Popover;
+    playerSeekSlider: HTMLInputElement;
+    playerVolumeSlider: HTMLInputElement;
+}> {
     @api audioSrc!: string;
     @api postName!: string;
 
-    renderedCallback() {
-        const audioElement = this.template.querySelector("audio");
-        audioElement?.addEventListener(
-            "play",
-            this.trackPlay.bind(this),
-            false
+    private _bufferedTimeRanges?: TimeRanges;
+    private _currentTimeSeconds = 0;
+    private _durationSeconds = 0;
+    private _volume = 100; // 100 is browser default (and max), at least in Chrome, for audio elements
+    private animationFrameId: number | null = null; // controls movement of the timeline when audio is playing
+    private currentPlaybackSpeed: PlaybackSpeed = "Normal";
+    private didRender = false;
+    private isPlaying = false;
+    private isSettingPlaybackSpeed = false; // popover menu has two panes; this manages that state
+    // `playbackSpeedData` tracks which value is selected, in a way useable by LWC for:each without requiring a separate sub-component
+    private playbackSpeedData = formattedPlaybackSpeeds.map((value) => ({
+        selected: value === "Normal",
+        value
+    }));
+    private prevVolume = this._volume; // previous volume is tracked so that it can be restored on unmute
+    private volumeIcon: "volume_high" | "volume_off" = "volume_high"; // built-in browser UI doesn't distinguish between high/low, just "on"/"off" (we use the "high" icon for "on")
+
+    private get formattedCurrentTime() {
+        return this.getFormatted(this.currentTimeSeconds);
+    }
+
+    private get formattedDuration() {
+        return this.getFormatted(this.durationSeconds);
+    }
+
+    // NOTE that values with getters and setters here have side effects that update the UI elements.
+    // This essentially makes these items the source of truth for the UI.
+    private get bufferedTimeRanges() {
+        return this._bufferedTimeRanges;
+    }
+    private set bufferedTimeRanges(value: TimeRanges | undefined) {
+        this._bufferedTimeRanges = value;
+        this.updateRangeInputStyles(
+            this.refs.playerSeekSlider,
+            this.currentTimeSeconds
+        );
+    }
+
+    private get currentTimeSeconds() {
+        return this._currentTimeSeconds;
+    }
+    private set currentTimeSeconds(value: number) {
+        this._currentTimeSeconds = value;
+        this.updateRangeInputStyles(this.refs.playerSeekSlider, value);
+    }
+
+    private get durationSeconds() {
+        return this._durationSeconds;
+    }
+    private set durationSeconds(value: number) {
+        this._durationSeconds = value;
+        this.updateRangeInputStyles(
+            this.refs.playerSeekSlider,
+            this.currentTimeSeconds
         );
-        audioElement?.addEventListener(
+    }
+
+    private get volume() {
+        return this._volume;
+    }
+    private set volume(value: number) {
+        this.prevVolume = this.volume;
+        this._volume = value;
+        this.updateRangeInputStyles(this.refs.playerVolumeSlider, value);
+    }
+
+    renderedCallback(): void {
+        if (this.didRender) {
+            return;
+        }
+
+        this.didRender = true;
+        this.volume = this.refs.audioElement.volume * 100;
+
+        // We only need to listen for the metadata event if the metadata isn't already loaded;
+        // sometimes, browsers can load it _before_ the event handler can even be added.
+        if (this.refs.audioElement.readyState > 0) {
+            this.handleAudioLoadedMetadata();
+        } else {
+            this.refs.audioElement.addEventListener(
+                "loadedmetadata",
+                this.handleAudioLoadedMetadata
+            );
+        }
+
+        // "progress" handles buffering of audio data, lets us update the UI for the buffered amount
+        this.refs.audioElement.addEventListener(
+            "progress",
+            this.handleAudioProgress
+        );
+        this.refs.audioElement.addEventListener("ended", this.handleAudioEnded);
+    }
+
+    disconnectedCallback(): void {
+        this.refs.audioElement.removeEventListener(
+            "loadedmetadata",
+            this.handleAudioLoadedMetadata
+        );
+        this.refs.audioElement.removeEventListener(
+            "progress",
+            this.handleAudioProgress
+        );
+        this.refs.audioElement.removeEventListener(
             "ended",
-            this.trackEnded.bind(this),
-            false
+            this.handleAudioEnded
         );
-        audioElement?.addEventListener(
-            "pause",
-            this.trackPause.bind(this),
-            false
+    }
+
+    /* BEGIN event handlers */
+
+    handleAudioLoadedMetadata = () => {
+        // `loadedmetadata` is the first spot at which duration is available.
+        this.durationSeconds = this.refs.audioElement.duration;
+    };
+
+    handleAudioProgress = () => {
+        // New buffered amount received, store the buffered time ranges.
+        this.bufferedTimeRanges = this.refs.audioElement.buffered;
+    };
+
+    handleAudioPlay = (event: Event) => {
+        this.refs.audioElement.play();
+        this.syncTimeWithAudio();
+        this.isPlaying = true;
+        this.trackPlay(event);
+    };
+
+    handleAudioPause = (event: Event) => {
+        this.refs.audioElement.pause();
+        cancelAnimationFrame(this.animationFrameId as number);
+        this.isPlaying = false;
+        this.trackPause(event);
+    };
+
+    handleAudioEnded = (event: Event) => {
+        cancelAnimationFrame(this.animationFrameId as number);
+        this.isPlaying = false;
+        this.trackEnded(event);
+    };
+
+    // Handles any user-driven movement on the "seek" slider (timeline)
+    handleSeekInput = () => {
+        if (!this.durationSeconds) {
+            // No moving the "thumb" when metadata hasn't even loaded.
+            return;
+        }
+
+        if (this.isPlaying) {
+            // To allow the user to interact with the slider, we temporarily have to stop moving the
+            // "thumb," but leave the player in the "isPlaying" state so that the play button
+            // remains and audio picks back up once the user is done interacting (the last bit is
+            // handled in the `handleSeekChange` handler, when the user actually commits the change)
+            cancelAnimationFrame(this.animationFrameId as number);
+        }
+
+        this.currentTimeSeconds = parseInt(
+            this.refs.playerSeekSlider.value,
+            10
+        );
+    };
+
+    // `change` is only fired once the user *commits* to a value (e.g., by releasing the mouse click), unlike `input` above
+    handleSeekChange = () => {
+        if (this.isPlaying) {
+            // Resume playing after user finishes interacting with seek slider, if the audio was
+            // already playing (see note in `handleSeekInput`)
+            this.syncTimeWithAudio();
+        }
+
+        this.currentTimeSeconds = parseInt(
+            this.refs.playerSeekSlider.value,
+            10
+        );
+        this.refs.audioElement!.currentTime = this.currentTimeSeconds;
+    };
+
+    // Handles any user-driven movement on the volume slider
+    handleVolumeInput = ({
+        currentTarget
+    }: InputEvent & { currentTarget: HTMLInputElement }) => {
+        this.volume = parseInt(currentTarget.value, 10);
+        this.refs.audioElement.volume = this.volume / 100;
+    };
+
+    // Direct click on the volume button is mute/unmute
+    handleVolumeClick = () => {
+        if (this.refs.audioElement.muted) {
+            this.refs.audioElement.muted = false;
+            this.volumeIcon = "volume_high";
+            this.volume = this.prevVolume; // restore to previous volume level
+        } else {
+            this.refs.audioElement.muted = true;
+            this.volumeIcon = "volume_off";
+            this.volume = 0;
+        }
+    };
+
+    // Set "pane" state for playback popover menu
+    handlePlaybackSpeedClick = () => {
+        this.isSettingPlaybackSpeed = true;
+    };
+
+    // Handle selection of a playback speed in the "three dot" menu
+    handleSetPlaybackSpeed = (event: Event) => {
+        const currentTarget = event.currentTarget as Node;
+        const selectedPlaybackSpeed =
+            currentTarget.textContent as PlaybackSpeed;
+
+        if (selectedPlaybackSpeed === this.currentPlaybackSpeed) {
+            return;
+        }
+
+        this.playbackSpeedData = formattedPlaybackSpeeds.map((value) => ({
+            selected: value === selectedPlaybackSpeed,
+            value
+        }));
+        this.currentPlaybackSpeed = selectedPlaybackSpeed;
+        this.refs.playbackSpeedPopover.closePopover();
+        this.resetIsSettingPlaybackSpeed();
+        this.refs.audioElement.playbackRate =
+            selectedPlaybackSpeed === "Normal"
+                ? 1
+                : parseFloat(selectedPlaybackSpeed);
+    };
+
+    // Sets "pane" state for popover back to the default
+    resetIsSettingPlaybackSpeed = () => {
+        this.isSettingPlaybackSpeed = false;
+    };
+
+    /* END event handlers, BEGIN private utility methods */
+
+    // Animates the seek slider (timeline) each frame so that it is N*Sync with current play
+    // time. We do this using requestAnimationFrame so that we can temporarily cancel the
+    // animating whenever the user is interacting with the slider.
+    private syncTimeWithAudio = () => {
+        this.currentTimeSeconds = Math.floor(
+            this.refs.audioElement.currentTime
         );
+        this.animationFrameId = requestAnimationFrame(this.syncTimeWithAudio);
+    };
+
+    // Convert raw numerical seconds to strings formatted as "X:XX"
+    private getFormatted(totalSeconds: number) {
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = Math.floor(totalSeconds % 60);
+        const doubleDigitSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+        return `${minutes}:${doubleDigitSeconds}`;
     }
 
-    private trackClick(e: Event, eventType: string, action: string) {
-        const audioElement = this.template.querySelector(
-            "audio"
-        ) as HTMLMediaElement;
+    // Find the end of the buffered amount of audio, if any, that overlaps with the current
+    // position. We care about the overlap because buffered time ranges can have gaps.
+    // Memoized because it is called whenever input styles are updated, and bufferedTimeRanges
+    // rarely changes.
+    private getOverlappingBufferEnd = memoize(
+        (currentTimeSeconds: number, bufferedTimeRanges?: TimeRanges) => {
+            let nearestBufferEnd = 0;
+
+            if (bufferedTimeRanges?.length) {
+                for (let i = 0; i < bufferedTimeRanges.length; i++) {
+                    if (
+                        bufferedTimeRanges.start(i) <= currentTimeSeconds &&
+                        bufferedTimeRanges.end(i) > currentTimeSeconds
+                    ) {
+                        nearestBufferEnd = bufferedTimeRanges.end(i);
+                        break;
+                    }
+                }
+            }
+
+            return nearestBufferEnd;
+        }
+    );
+
+    // Visually updates sliders (timeline or volume) so that the amount "covered" (before the
+    // "thumb") is visually different than the amount remaining; also handles visually showing the
+    // buffered amount if there is buffer data and the element is the "seek"/timeline slider
+    private updateRangeInputStyles(
+        target: HTMLInputElement | null,
+        currentValue: number
+    ) {
+        if (
+            !target ||
+            (target === this.refs.playerSeekSlider && !this.durationSeconds)
+        ) {
+            return;
+        }
+
+        const maximumValue =
+            target === this.refs.playerVolumeSlider
+                ? 100
+                : this.durationSeconds;
+        const trackColors =
+            target === this.refs.playerVolumeSlider
+                ? uiConfig.volumeSlider.trackColors
+                : uiConfig.seekSlider.trackColors;
+        const percentageCovered =
+            maximumValue === 100
+                ? currentValue
+                : (currentValue / maximumValue) * 100;
+        const overlappingBufferEnd = this.getOverlappingBufferEnd(
+            this.currentTimeSeconds,
+            this.bufferedTimeRanges
+        );
 
+        if (trackColors.buffer && overlappingBufferEnd) {
+            // Slider with three colors: the before amount, the buffered amount, and the full
+            // "remaining" slider color.
+            const bufferPercentage =
+                (overlappingBufferEnd / maximumValue) * 100;
+            target.style.background = `linear-gradient(to right, ${trackColors.before} ${percentageCovered}%, ${trackColors.buffer} ${percentageCovered}% ${bufferPercentage}%, ${trackColors.after} ${bufferPercentage}%)`;
+        } else {
+            // "Basic" slider, with only two colors, no buffering.
+            target.style.background = `linear-gradient(to right, ${trackColors.before} ${percentageCovered}%, ${trackColors.after} ${percentageCovered}%)`;
+        }
+    }
+
+    private trackClick = (e: Event, eventType: string, action: string) => {
         const payload = {
             event: eventType,
             media_action: action,
             media_name: this.postName,
-            media_percentage_played: (
-                (audioElement!.currentTime * 100) /
-                audioElement!.duration
-            ).toFixed(0),
-            media_seconds_played: audioElement!.currentTime,
+            media_percentage_played:
+                this.durationSeconds === 0
+                    ? this.durationSeconds
+                    : (
+                          (this.currentTimeSeconds * 100) /
+                          this.durationSeconds
+                      ).toFixed(0),
+            media_seconds_played: this.currentTimeSeconds,
             media_type: "blog audio"
         };
 
         track(e.currentTarget!, "custEv_blogAudioPlay", payload);
-    }
+    };
 
-    private trackPlay(e: Event) {
+    private trackPlay = (e: Event) => {
         this.trackClick(e, "custEv_blogAudioPlay", "play");
-    }
-    private trackEnded(e: Event) {
+    };
+
+    private trackEnded = (e: Event) => {
         this.trackClick(e, "custEv_blogAudioComplete", "complete");
-    }
-    private trackPause(e: Event) {
-        const audioElement = this.template.querySelector(
-            "audio"
-        ) as HTMLMediaElement;
+    };
 
-        //suppress 'pause' events that happen in the last 99% of the duration
-        if ((audioElement!.currentTime * 99) / audioElement!.duration < 99) {
-            this.trackClick(e, "custEv_blogAudioPause", "pause");
-        }
-    }
+    private trackPause = (e: Event) => {
+        this.trackClick(e, "custEv_blogAudioPause", "pause");
+    };
 }

package/src/modules/dx/popover/popover.css

@@ -6,7 +6,7 @@
         var(--dx-g-spacing-sm)
     );
     --popover-border: var(--dx-c-popover-border, 1px solid var(--dx-g-gray-90));
-    --popover-padding: var(--dx-g-spacing-sm);
+    --popover-padding: var(--dx-c-popover-padding, --dx-g-spacing-sm);
 }
 
 .popover-container {

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.