Progress bar has delay

[damjan25]

• Currently there is a big delay between ad time and progress bar.
  For example ad is already done playing and the progress bar is not even at full width yet. By the looks of if there is something like 1s delay without using any css transition. If you add css transitions to make the progress bar look smooth and not buggy then the delay is even bigger.

• Is it possible to adjust this with any property ?

• For example the ad is done playing and it closes and the progress bar is still not fully expanded like this:
  

• Simple example:
  https://codepen.io/imasdk/pen/wpyQXP

• Why is this an issue?
  If someone is looking at the progress bar, they might think that you are closing the ad before the player even finishes playing the ad.

Browser: chrome 108.0.5359.125
"videojs-ima": "^2.1.0"

[damjan25]

Just an idea:
src\client-side\ad-ui.js

  // Update UI
  //add configurable property so if user uses css like for ex. ".ima-progress-div { transition: width 1s ease; }"
  //so that he can add this 1s for the animation delay
  const userConfigurableDelay = 0; //default 0s and passed into the function as a parameter
  const animationDefaultDelay = 0.5; //by default there seems to be 0.5s animation delay

  currentTime += animationDefaultDelay + userConfigurableDelay;

  const playProgressRatio = currentTime / duration;
  const playProgressPercent = playProgressRatio * 100;
  this.progressDiv.style.width = playProgressPercent + '%';

Just for reference to see which lines are changed:

[Kiro705]

Hello @damjan25 ,

Using your sample app, I see the progress bar nearly full right as the ad is nearly finished playing, see attached screenshot. Let me know if there is anything additional needed to be done to reproduce the issue.

Jackson
IMA SDK team

[damjan25]

@Kiro705 This is the issue, that it does not go all the way. Looks like it just depends on player size on how much of the space will be left.
On my laptop screen there seems to be much more space left (like on my 1st screenshot) but on my pc screen it looks the same as on your screenshot.

Would it be possible to add this so that the bar goes all the way ?

[Kiro705]

Hello @damjan25 ,

Would it be possible to share a screen-size I can emulate with Chrome inspector tools that can reproduce the issue?

Thank you,
Jackson
IMA SDK team

[damjan25]

Os: Windows
Browser: Chrome

24' 1080p 100% zoom => looks like on my first screenshot
27' 1440p 125% zoom => looks the same as on my first screenshot
16' 1200p 150% zoom (laptop) => looks the same as on your screenshot (progress bar does not go all the way but there is not that much space left)

Problem is that if you add any css animation/transition on progress bar to make it smoother it will add that delay on top of this 0.5s delay* that is already there :(

[damjan25]

Hi,
any update here?
We got mail from our publisher today that it also happens on mobile phones :/

[Kiro705]

Hello @damjan25 ,

It is my understanding that the bar fills up at the same rate, and the last image of the progress bar will be roughly 95%-97% full. On larger players, the gap will appear larger, but will still be only 3-5% of the total length of the bar.

As far as I can tell, the bar is accurately representing the remaining time of the ad. At 100% the player will have already transitioned back to content or gone to the next ad.

Right now, we are considering this as 'working as indented'.

Please let me know if you have any follow-up questions.

Thank you,
Jackson
IMA SDK team

[damjan25]

Tnx for feedback, really appreciate it.

Is there any workaround that we could do on our side?

For now we have decided to rather hide the progress bar, just so that our publishers don't think that the ads are not being played till the end.

[Kiro705]

Here is where the css percentage is calculated:
https://github.com/googleads/videojs-ima/blob/main/src/client-side/ad-ui.js#L300

Either

// Update UI
  const playProgressRatio = currentTime / duration;
  const playProgressPercent = (playProgressRatio * 100) + 5;
  this.progressDiv.style.width = playProgressPercent + '%';

or

// Update UI
  const playProgressRatio = currentTime / duration;
  const playProgressPercent = (playProgressRatio * 100);
  if (playProgressPercent > 90) {
    playProgressPercent = 100;
  }
  this.progressDiv.style.width = playProgressPercent + '%';

would result in making sure the progress bar reaches 100% while the ad is still playing.