Topic timer - live countdown

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

Hello,
I’m looking for a modification of how topic timers are visualized - I want a live countdown, like 2d 14:37:50 (meaning will be executed after 2days 14 hours, 37 minutes and 50 seconds; updating each second). I’m using topic timers for auto-closing topics.
Both plugin or direct code modification are acceptable. Generally the data is also available in the HTML, so it should be possible to just hook a JS to change the actual visualization. I’m not into ember though.

Would you be interested in providing such customization? On what terms?
Thank you.

2 Likes

Hey @darhazer,

Thanks for reaching out. Yes, this is something we can handle for you.

Our standard rate is $175 USD an hour. Depending on the specifics, this would take in the order of 2-3 hours.

We also have an open source rate of $130 USD which we offer when we think the work will be useful to others, and the client is willing to open source it. We think that applies in this case.

So you’ll be looking at somewhere around $260 to $390 USD for this. Does this suit your budget?

Best,

Angus

1 Like

Hello,

Thank you for the provided estimations and rates.

If you are willing to make it open source for $300 fixed price, we have a deal.

On a side note, is there a way for a recurring support for your open source works (Patreon, OpenCollective, Github sponsorts, etc.)?

Regards,
Maxim

1 Like

Ok, that might be possible.

Just to clarify, you’d like the timer display to look like this (counting down each second):

.

What I suggest we do here is:

  1. Make this a theme component

  2. Make the formatting of time a site setting, that accepts any moment.js format, allowing users to customise the format.

How does that sound?

Thanks for asking about donations. You can make a recurring donation here: Pavilion

1 Like

Thank you. Yes, that’s the visualization I have in mind.

Theme component sounds great.
How do I pay? Do you provide invoice for the payment?

2 Likes

Great. I’m going to share this topic with some others, and potentially make it public. Is that’s ok with you?

For a small job like this we just use paypal. I’ll provide a link in a bit.

1 Like

I’m going to share this topic with some others, and potentially make it public. Is that’s ok with you?

Sure. It’s completely up to you how you manage it.
Waiting for the paypal link.

@darhazer One of our members @fzngagan has agreed to take this on. He’ll be working under my supervision.

Our delivery time for this work is 2019-09-13T11:30:00Z. If that doesn’t work with your schedule let us know.

As discussed, we’ll deliver this as a theme component with a setting to accept moment.js formatting notation to set the display format. This will allow you to achieve the format you want, and others to use it with other formats (i.e. to work as a general open source component).

@fzngagan Will respond with a paypal link shortly. He’ll update you with his progress as he goes.

1 Like

Hi @darhazer,
I’m the one taking up this project. Happy to work with you on this.

Here’s my PayPal link: https://www.paypal.me/fzngagan

I’ll be giving you timely updates on the progress of the work. Feel free to ask any questions you have regarding the task or any other query.

Thanks @darhazer for the payment. Just to confirm, I’ve received 300USD in my PayPal account from the name Maxim Krizhanovski. I’ve started to look into it and will be updating you regularly on this topic as I proceed with the development work .

1 Like

Sweet! I love this idea for a theme component, which will lend excitement to the AMA topics we do over an 8 hour time period. Example: Give us your feedback: ASK ME ANYTHING about The Engine Room’s Light Touch Support! - Technology - Global Legal Empowerment Network Community Discussions

3 Likes

Yeah I love this!

Maybe even having (the option?) to have the countdown be omnipresent in the header next to the topic title would be good idea.

4 Likes

@angus. I’ve setup my theme development environment using discourse_theme cli and connected it to my local dev instance.

Also, I’ve build a strategy to tackle this task. I’ll lay out my thoughts here.

I’ll need to override the topic timer component’s template. It currently displays only number of days until the topic will get closed.

In the overridden template, I’ll add labels for hours, minutes, seconds. I’ll try and keep it closer to the default things, so that its easier to modify and work on later if we come up with improvements etc.

From my primary research, I understood that discourse already passes the complete closing time details to the client side which I’ll probably be able to utilize.

Note: We need to disable the timer on this topic though :wink:

2 Likes

It looks like the topic-timer-info component uses buffered rendering.

It doesn’t have a handlebars template. Buffered rendering works similarly to virtual dom rendering (e.g. React.js, or the virtual dom widgets in Discourse), building the html in the javascript.

Note that the rerenderTriggers object is an array of computed properties that will trigger a rerender.

Have a close read of that component, check how that logic is working then let me know how you want to tackle modifying it. Remember we’re looking for the most light-touch way.

2 Likes

On line 52 of topic-timer-info.js.es6

method: buildBuffer

let options = {
          timeLeft: duration.humanize(true),
          duration: moment.duration(autoCloseHours, "hours").humanize()
        };

This method needs to be overridden and I’ll copy it as it is. I’ll just modify the lines above.

Now here’s a library to format a moment.duration.

I’ll try and check if discourse already has something to use here.

The rerender delay will also required to be modified to a very small number probably a second.

An aside question: Would rerender here be compute costly as compared to a jquery manupulation?

I hacked core and I was able to get to this without external libraries.

But as we want to provide a proper setting for this, we’ll need to use that library I suggested.

Then we can link the setting to the github page, or create our own little doc on this instance and link to it.

1 Like

I’ve implemented the code as a theme component here:

Works perfectly.

Remaining:

  • providing a setting for custom formatting options.
  • String Translation.
2 Likes

Great job @fzngagan!! Going to test it out on one of my communities. :slight_smile:

I think
18 hours, 55 minutes, 21 seconds
looks slightly better than
18 hours , 55 minutes , 21 seconds
spacing wise?

Made a PR for if y’all agree.

3 Likes

Thanks for the PR buddy. The formatting setting is already a part of the project though. :slight_smile:

I’ll be working on it on Monday.

Update

I added a setting so that the admin users can format the duration by themselves.

@Eli
I think this serves your purpose. Right?

1 Like