formatTimeCallback(seconds, pxPerSec) , pxPerSec is undefined and v7 differences

[MrEdwards007]

Bug description

I'm using wavesufer v7 via the online scripts

  <script src="https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.min.js"></script>
  <script src="https://unpkg.com/wavesurfer.js@7/dist/plugins/timeline.min.js"></script>
  <script src="https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.min.js"></script>

I was using https://wavesurfer.xyz/example/timeline-notches/ as a guide for addressing my needs in formatting the timeline string "formatTimeCallback" and I figured out why it wasn't working as expected. I was getting an 'undefined' on 'pxPerSec' when I output the information to the console. I didn't cause the program to stop working but did cause it to not work correctly.

So, based on what I'm seeing in version 6, this should be functional but I am using version 7 and 'pxPerSec' is no longer being passed to the callback.

I could not find any notes for version 7 indicating pxPerSec was removed but it is definitely not being passed

I have a workaround, which takes the instance variable and then performs the pxPerSec calculation but wanted to ensure that either this a documented change (loss of pxPerSec as an input) or treated as a bug.

        // A custom function to format the time labels
        function formatTimeCallback_OLD(seconds, pxPerSec) {
            seconds = Number(seconds);
            var minutes = Math.floor(seconds / 60);
            seconds = seconds % 60;

            console.log('minutes, seconds, pxPerSec', minutes, seconds, pxPerSec );
            
            // Adjust detail based on zoom level (pxPerSec)
            var secondsStr = Math.round(seconds).toString();
            if (pxPerSec >= 25 * 100) { // e.g., > 250 px per second
                secondsStr = seconds.toFixed(2); // Show milliseconds
                console.log('--pxPerSec >= 25 * 100', pxPerSec);
            } else if (pxPerSec >= 25 * 1) {
                secondsStr = seconds.toFixed(1); // Show one decimal place
                console.log('--pxPerSec >= 25 * 1', pxPerSec);
            }

            if (minutes > 0) {
                if (seconds < 10) {
                    secondsStr = '0' + secondsStr;
                }
                return `${minutes}:${secondsStr}`;
            }
            return secondsStr;
        }

        function formatTimeCallback(seconds) {
            seconds = Number(seconds);
            var minutes = Math.floor(seconds / 60);
            seconds = seconds % 60;

            // Calculate pxPerSec manually: Total Width / Total Duration
            // Note: Ensure 'wavesurfer' is the name of your instance variable and is in scope
            var pxPerSec = wavesurfer.getWrapper().scrollWidth / wavesurfer.getDuration();

            console.log('minutes, seconds, pxPerSec', minutes, seconds, pxPerSec);
            
            // Adjust detail based on zoom level (pxPerSec)
            var secondsStr = Math.round(seconds).toString();
            if (pxPerSec >= 25 * 100) { 
                secondsStr = seconds.toFixed(2); // Show milliseconds
            } else if (pxPerSec >= 25 * 10) { // Changed threshold to match common zoom levels
                secondsStr = seconds.toFixed(1); // Show one decimal place
            }

            if (minutes > 0) {
                if (seconds < 10) {
                    secondsStr = '0' + secondsStr;
                }
                return `${minutes}:${secondsStr}`;
            }
            return secondsStr;
        }

Also in v7 timeline plugin, only primaryColor appears to have an effect, the others are ignored.
After a lot of digging, I was able to affect them with CSS styling

              primaryColor: 'blue',
              secondaryColor: 'red',
              primaryFontColor: 'blue',
              secondaryFontColor: 'red' 

      var wavesurfer = WaveSurfer.create({
          // your other options here
          plugins: [
              WaveSurfer.timeline.create({
                  container: '#timeline',
                  formatTimeCallback: formatTimeCallback,
                  timeInterval: timeInterval,
                  primaryLabelInterval: primaryLabelInterval,
                  secondaryLabelInterval: secondaryLabelInterval,
                  primaryColor: 'blue',
                  secondaryColor: 'red',
                  primaryFontColor: 'blue',
                  secondaryFontColor: 'red'
              })
      	]
      });

For future reference, others may need to affect the timeline and tickmarks is the style section of the CSS.
I really struggled to find and affect the timeline, so this information may be of value.

    /* ========================================= */
    /* TIMELINE STYLES                           */
    /* ========================================= */

    /* 1. PRIMARY LABELS (RED) */
    
    /* If rendered in Light DOM */
    div[part*="timeline-notch-primary"] {
        color: #ff0000 !important;
    }
   
    /* If rendered in Shadow DOM (likely) */
    ::part(timeline-notch-primary) {
        color: #ff0000 !important;
    }
    

    /* 2. SECONDARY LABELS (BLUE) */

    /* For Shadow DOM (Standard WaveSurfer 7 behavior) */
    ::part(timeline-notch-secondary) {
        color: #6538d8 !important;
        opacity: 1 !important;  /* <--- THIS IS REQUIRED for blue on dark */
    }

    /* Fallback for Light DOM */
    div[part*="timeline-notch-secondary"] {
        color: #6538d8 !important;
        opacity: 1 !important;
    }

    /* Text and line for intermediate intervals */
    ::part(timeline-notch-secondary) {
        color: #6538d8 !important;
        opacity: 1 !important;
    }
    div[part*="timeline-notch-secondary"] {
        color: #6538d8 !important;
        opacity: 1 !important;
    }

    /* 3. MINOR TICKS (BRIGHT GREEN) */
    /* Small lines with no text */
    ::part(timeline-notch-tick) {
        color: #00ff00 !important; /* Bright Green */
        opacity: 1 !important;     /* Force visibility (default is 0.25) */
        border-left: 1px solid currentColor; /* Ensures the line takes the color */
    }
    
    /* Fallback for non-Shadow DOM */
    div[part*="timeline-notch-tick"] {
        color: #00ff00 !important;
        opacity: 1 !important;
    }

Environment

• Browser: Chrome

Minimal code snippet

Expected result

Obtained result

Screenshots

[katspaugh]

Thanks for catching this inconsistency between the versions!

https://wavesurfer.xyz/example/timeline-notches/ is an old v6 example not linked anywhere on the website.

The new example Timeline in v7 is here: https://wavesurfer.xyz/examples/?timeline-custom.js (it also links to the API reference).

Since this is not a bug, I'm going to transfer this issue to Q&A.