Services Plugins FAQs

Inconsistent values with Countdown Timer plugin

Plugins
#1

Hi all,

So I’ve got quite a complex set up going on here, probably more complex than it needs to be, but I’ll attempt to explain.

At a high level, the concept is an exercise application. Hosts create a workout, add exercies (along with the duration of each exercise), and then stream the class to an audience. The countdown timer is used to display the remaining time left of the current exercise.

  • I have two separate pages on my app that show a countdown timer (the ‘hosts’ view, and the ‘audiences’ view)
  • These two timers should always be in sync for ALL users viewing either of those two pages (i.e. should both show the same values)
  • The values to be input into these timers are generated by the user when they create a workout. There is a separate page where they enter the timer value, and it is captured in seconsd
  • In order to trigger the timer to start, there is a ‘Start’ button on one of the pages that is clicked by a user
  • The way this works is that I have a data field called ‘Status’; When the user clicks ‘start’, the status changes in the data base from ‘start’ (countdown timer inactive) to ‘play’ (countdown timer becomes active), and so the countdown timer begins counting down
  • Since this is a change in the back end, the countdown timer should start for ALL users on BOTH pages at roughly the same time
  • To ensure the timers are sync, the countdown timer will capture the current date, then add on the duration of the current exercise (for example, if the current time 12:00pm, and the current exercises goes for 5 minutes, it will set the countdown timer to countdown to 12:05pm. The reason it works this way, as opposed to a standard timer, is because I want all the timers to be synced, and linking it to a universal date/time, it should be consistent

Now, I’ve had this working successfully previously, but I spent a couple of months away from Bubble, and have come back to find there are issues.

The timer still starts as it should, but the issue is that the two timers displays different values sometimes. For example, when I press ‘start’, the timer on page A will show “10:00”, but the timer on page B will show “10:30” or something.

If I test this on two separate windows on my laptop, it works fine. However if I test the exact same thing with one desktop window and one on my mobile, the timers are out of sync.

I’m not sure why this would be happening. The only thing I can think of is there’s a syncing issue with how date/time is displayed on my desktop vs how it’s displayed on my mobile? Could the date/time on my desktop be slightly different to on my mobile? But as I said it has worked previously, so I’m not sure why this would change. I obviously want the solution to work across all devices in the same time zone, so if there is a syncing issue I’ll need to rectify it somehow.

Apologies if this doesn’t make much sense. I’m happy to clarify any details, and provide access to the app if required. Thanks in advance!

#2

Hello @nickjbaxter

Thank you for reaching out.

Appreciate the detailed explanation of the issue, we’ve recently fixed the issue with timers running different values when the window is minimized by the user, so it is indeed strange that you have this issue. Can you confirm that your use case worked before the recent updates to the plugin?

Please try rolling back to the previous updates, and see if the issues still persists. If the timer still not in sync, please add our Support Team email to the list of collaborators to your application and provide me a link to your application? This will allow us to check your settings and run some tests to understand what might be the problem.

To add our Support Team as a collaborator, you need to do the following steps in the Bubble Editor:

Settings > Collaboration > Add email support@zeroqode.com

Note: avoid the warning message regarding the plan, as we are an agency and you can easily add us to your collaborators.

Looking forward to your reply.

#3

Hi Kirill,

Thanks so much for the speedy reply, and for managing to make sense of my rambling!

So the last time I tested the app before I took a break from it was probably ~4 - 6 months? And as far as I’m aware it was working properly then, but the past two weeks has been having issues.

  • Happy to roll back to a previous version of the plugin. Currently I’m using 1.10.0, which version would you recommend rolling back to for testing?
  • Bonus question. If I’m using this method for a countdown timer, how will this work across different time zones? Will there be issues with this?

I’ll try rolling back the plugin version first, and if that doesn’t work I’ll leave an update here and add teh Zeroqode support account.

Thanks again!

#4

Hi @Kirill ,

Quick update from my end. I rolled back to a previous version of the plugin (1.08.0) and it still had the issue.

I noticed I already have Zeroqode as a collaborator from a previois query I had, so you should already have access. Please visit the app here.

As I mentioned above, it’s quite complex, so below I’ve tried to detail how it works within the app.

Duration of exercise is set by user
Page: create-class-2_copy
Workflow: “When ‘Button - Add’ is clicked”

There are 3 different steps in this workflow that create an exercise, but they all follow the same process. To take an example, step 1 shows the data field “exercise-duration (secs)”, which captures the exercise duration in seconds.

Telling the timer what value to use
Page: stream-host
Workflow: “When ‘Button Start Class’ is clicked”

Once this is clicked, it will take the current date/time and add on the exercise duration. For example, if the current time is 12:00pm, and the exercise duration is 120 seconds, it will define the end date in the data base (under a data field called ‘current-exercise-end’) as 12:02pm.

It will also change the ‘stream-status’ from ‘start’ to ‘play’ (which is the trigger for the countdown to start. I used database changes to trigger the timer, since database changes will trigger an action for ALL users, as opposed to just the current user)

Displaying the countdown timer
Page: stream-host
Layer on elements tree: “Text - Countdown Timer”

Before the timer starts, it will display a static number of the first exercise. However, once the status changes to ‘Play’, it will display the countdown timer, and will begin counting down. These are all defined as conditions under the ‘Conditions’ tab of the “Text - Countdown Timer” layer. There are multiple conditions in here to align with what I’m trying to achieve.

I know this is quite confusing, I’ve used lots of hacky ways to try and make this work, and this is the closest I’ve come to get the outcome I want. Would love if you could figure out why these timers aren’t synchronised, and would also love it there’s a much more simpler way of achieving what I’ve tried to do!

Thanks again, look forward to your response.

#5

Thanks for the additional information @nickjbaxter

There does not seem to be an issue with the timer itself, we’ve also tested it with one window open on Mac and another one on iPhone, and there is no timer difference on our side.

I do have a couple of actions to determine when exactly you encounter the issue.

  1. Do we have to join the class as one host, and another as an attendee?
  2. Also, what is the approximate time difference between two timers?
  3. Are the timers not in sync on various devices too? For example one windows laptop, another mac laptop? Or the issue happens only on mobile/desktop setup? As on our demo page, the issue does not reproduce too.
  4. Please record a video of the issue if it is possible, we suggest you using Loom, it will help to understand to see where exactly is the problem

At the current moment, the timer works as intended and it is believed that the issue is related to how a certain device shows the timer, and how Bubble is responding on various devices. Also, it might be due to complications with conditions and the effect they have on different devices. However, we will do our best to fix the issue if it is related to our plugin, but as of right now we haven’t found the issue in the plugin.

#6

Thanks for the reply and for testing Kirill. I just tried to replicate the issue and film a video for you, but of course it appears to be working now! I’m not sure if you tweaked anything?

To answer your questions anyway, the issue was happening when I was viewing from a ‘hosts’ perspective on my MacBook, and then viewing the same class from the ‘attendees’ perspective on my Android phone. The time difference was about 30secs.

It’s a bit worrying, because if it’s unstable when I’m testing between two devices, I’m worried about how stable it will be across multiple devices in various locations, but I guess we will have to wait and see.

Thanks again Kirill, the work you guys do and level of support you offer is truly amazing. Whenever I download a Zeroqode plugin, I can always feel safe knowing that there’s such a great team working to support their customers.

#7

Thank you for the kind words @nickjbaxter, we appreciate it :slight_smile: Our team is always trying to do their best to provide an exceptional support.

We updated a plugin not too long ago, and you rolling back to the previous version and then going back to the new version might have solved the issue, there might have been a glitch/bug with the Bubble itself, or the plugin not being updated in your editor for some reason. Anyways, it is definitely kind of hard to tell what might have been exactly the issue, but hopefully, the plugin works well now and there’ll be no issues.

In case you have any other questions, simply let me know.

Have a great day!

1 Like