Developer Docs - Apple TV Docs - Countdown

Display a live countdown that changes the look when it hits zero.

Basic Usage

To quickly get started, you can test this by setting a countdown to three days from now.

{% assign exampleDate = 'Now' | DateAdd:3, 'd' | Date:"yyyy-MM-ddTHH:mm:ss.fffffffK" }}

See the Lava documentation if you're unfamiliar with the provided value of the StartDateTime property.

Lava Shortcode

You can also utilize the scheduledcontent Lava shortcode.

This shortcode's logic does take some overhead. You may consider caching the output if your page will be heavily visited, even if it's only cached for a minute or two.

{[ scheduledcontent scheduleid:'3' showwhen:'both' ]}
    
{[ endscheduledcontent ]}

Properties

Countdown Visibility Tri-State

For this type, there are three accepted values:

Children

Here is a list of all the accessible children to this element, that have unique functionalities if included.

Example With Children

    
        
            
            Join now to participate in the live stream.
        
        
            Watch Now
        
    

Completed Command

In some cases, you may want to execute a command when the countdown hits zero. This can be done by setting the completedCommand property. In addition to the completed command, you should also provide any additional attributes that are used as parameters for the command you are executing.

    
        
            
            Join now to participate in the live stream.
        
        
            Watch Now
        
    

This example would play a video upon the countdown completion. In addition to a completed command, in most cases you should still provide content in the completedPanel.

When the page is loaded, and the countdown is under a certain value, you may not want to execute the completed command. For instance, let's say you wire up the countdown to play a video. If you were to load the page with three seconds left in the countdown, you could be navigated to the video screen before even realizing what is going on. That's why we introduced a property named completedCommandSecondThreshold. This property represents the number (in seconds) to not execute the completed command within, checked when the control is initialized.

Styling

To style this element, you have access to multiple different unique styles, Here is the corresponding x-ray for the countdown control.

Countdown control CSS X-Ray.

Countdown control completed content CSS X-Ray.

You can see the type of element that the style is targeting to the right of the class name. This particular control is comprised solely of RockStackViews and RockLabels. Look at those pages for more detail on the properties you can change via CSS.