For those of us who want a countdown timer to your next live service and don't use version 3 of Life Church's Church Online Platform. I have modified their code to use Rock schedules.

What you will need:

1. A schedule Category with all your services underneath. Get the CategoryID from the url (https://admin.oneandall.church/page/180?CategoryId=539&ExpandedIds=C539%2cC50)
   
2. Create an html block where you want the live notification.
3. Add the code below
4. modify the {%- assign scheduleid = 539 -%} for your Category from step 1

The Code

CSS

.counter {
  display: inline-block;
  min-width: 150px;
  padding: 0;
  font-weight: 400;
  border-radius: 8px
}
.counter div {
  position: relative;
  display: inline-block;
  margin-right: 2px;
  margin-left: 2px;
  width: 26px
}
.counter.days, .counter.hours, .counter.minutes, .counter.seconds {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  text-align: center
}
.counter.days .value, .counter.hours .value, .counter.minutes .value, .counter.seconds .value {
  display: block;
  width: 100%
}
.counter.days .span, .counter.hours .span, .counter.minutes .span, .counter.seconds .span {
  display: block;
  width: 100%;
  font-size: 8pt;
  opacity: 0.8
}
.counter .hours::before, .counter .minutes::before, .counter .seconds::before {
  position: absolute;
  top: -3px;
  left: -7px;
  font-size: 20pt;
  content: ":";
  opacity: 0.7;
  animation: blink 1s ease-in-out infinite
}
#liveBar {
  position: relative;
  z-index: 999
}
.live-btn {
  padding: 0 7px;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 3px;
  vertical-align: 3px;
  border: 1px solid;
  border-radius: 5px
}
.live-btn i {
  font-size: 8px;
  vertical-align: 3px
}
.live-btn .not-live {
  color: red
}
.live-btn .is-live {
  color: #00d000
}
.centerIt {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%)
}
@keyframes blink {
  0% {
    opacity: 1
  }
  50% {
    opacity: 0.5
  }
  100% {
    opacity: 1
  }
}
#churchonline_counter a {
  color: #000
}
#churchonline_counter {
  overflow: auto;
  width: 300px;
  padding: 10px;
  display: none
}
#churchonline_counter .description, #churchonline_counter .time li .label {
  font-size: 0.8em
}
#churchonline_counter .time {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0
}
#churchonline_counter .time li {
  float: left;
  padding: 0 10px;
  text-align: center
}
#churchonline_counter .time li:first-child {
  padding-left: 0
}
#churchonline_counter .time li span {
  font-size: 1.2em
}
#churchonline_counter .no-live {
  display: inline-block;
  font-weight: 400
}
#churchonline_counter .live {
  display: none;
  font-weight: 400
}

html

{%- assign scheduleid = 539 -%}
<div id="liveBar" class="bg-yellow pt-2 pb-2">
	<div class="container">
  		<div class="row d-md-flex flex-center">
  			<div class="col-md-5 col-xs-12 text-sm-right text-center">
  				<h6 id="churchonline_counter" class="mt-0 mb-0">
  					<div class="d-inline-block live-btn font-primary-medium mr-2">
  						<a href="https://live.oneandall.church/">
  							<div class="no-live color-black">LIVE IN</div>
  							<div class="live color-black">LIVE NOW</div>
  							<span>
  								<i class="fas fa-circle not-live"></i>
  							</span>
		   				</a>
  					</div>
   				<a class="time" href="https://live.oneandall.church/">
  						<span class="counter h4 font-w-400 mt-0 mb-0">
   						<div class="days d-inline-block">
  								<div class="value"></div>
  							</div>
  							<div class="hours d-inline-block">
  								<div class="value"></div>
  							</div>
							<div class="minutes d-inline-block">
  								<div class="value"></div>
							</div>
  							<div class="seconds d-inline-block">
  								<div class="value"></div>
							</div>
						</span>
  					</a>
  				</h6>
			</div>
  		</div>
	</div>
</div>

<script type="text/javascript">
	jQuery(function() {
   	var days, goLive, hours, intervalId, minutes, seconds;
		goLive = function() {
      		$("#churchonline_counter .time").hide();
	      	$("#churchonline_counter .not-live").hide();
			$("#churchonline_counter .no-live").hide();
      		$("#churchonline_counter .live").show();
      		$("#churchonline_counter").show();
		};
        
        loadCountdown = function(data){
            var seconds_till;
      		if (data=='islive') {
      			return goLive();
      		} else {
      			dateString = data;
      			seconds_till = Math.abs((new Date(dateString)) - (new Date())) / 1000;
      			days = Math.floor(seconds_till / 86400);
      			hours = Math.floor((seconds_till % 86400) / 3600);
      			minutes = Math.floor((seconds_till % 3600) / 60);
      			seconds = Math.floor(seconds_till % 60);
      			return intervalId = setInterval(function() {
      				if (--seconds < 0) {
      					seconds = 59;
      					if (--minutes < 0) {
      						minutes = 59;
      						if (--hours < 0) {
      							hours = 23;
      							if (--days < 0) {
      								days = 0;
      							}
      						}
      					}
      				}
					$("#churchonline_counter .days").html((days.toString().length < 2) ? "0" + days : days);
					$("#churchonline_counter .hours").html((hours.toString().length < 2 ? "0" + hours : hours));
					$("#churchonline_counter .minutes").html((minutes.toString().length < 2 ? "0" + minutes : minutes));
					$("#churchonline_counter .seconds").html((seconds.toString().length < 2 ? "0" + seconds : seconds));
					if (seconds === 0 && minutes === 0 && hours === 0 && days === 0) {
						goLive();
						return clearInterval(intervalId);
					}
					$("#churchonline_counter").show();
      			}, 1000);
			}
		}
		days = void 0;
		hours = void 0;
		minutes = void 0;
		seconds = void 0;
		intervalId = void 0;
		data = "{[ scheduledcontent schedulecategoryid:'{{scheduleid}}' showwhen:'notlive'  ]}{{ NextOccurrenceDateTime | Date: 'yyyy/MM/dd HH:mm:ss' }}{[ endscheduledcontent ]}{[ scheduledcontent schedulecategoryid:'{{scheduleid}}' showwhen:'live'  ]}islive{[ endscheduledcontent ]}";
		loadCountdown(data);
	});
</script>