Add countdown timer and fix stream

package.json

@@ -11,7 +11,9 @@
         "@gridsome/source-contentful": "^0.5.2",
         "buefy": "^0.8.8",
         "gridsome": "^0.7.0",
+        "moment": "^2.29.1",
         "node-sass": "^4.13.0",
-        "sass-loader": "^8.0.0"
+        "sass-loader": "^8.0.0",
+        "vue-awesome-countdown": "^1.1.4"
     }
 }

src/main.js

@@ -3,6 +3,7 @@
 
 // Import plugins and libraries
 import Buefy from "buefy";
+import VueAwesomeCountdown from "vue-awesome-countdown";
 
 // Import components
 import Navbar from "~/components/Navbar.vue";
@@ -28,6 +29,9 @@ export default function(Vue, { router, head, isClient }) {
         defaultIconPack: "fas", // Font Awesome Solid
     });
 
+    // Use the countdown library
+    Vue.use(VueAwesomeCountdown);
+
     // Make the Navbar component available on all pages
     Vue.component("Navbar", Navbar);
 

src/pages/Index.vue

@@ -43,6 +43,26 @@
         <div id="twitch-embed"></div>
         <!-- Load the Twitch embed script -->
 
+        <p class="notification is-primary has-text-centered is-size-2">
+            <i class="fa fa-chevron-up fa-lg"></i>&nbsp;
+            <span>
+                {{ streamTimerMessage }}
+                <countdown :end-time="streamTimerEnd">
+                    <span slot="process" slot-scope="{ timeObj }">{{
+                        `${timeObj.d == "0" ? "" : timeObj.d + ":"}${
+                            timeObj.h
+                        }:${timeObj.m}:${timeObj.s}`
+                    }}</span>
+                    <span slot="finish">{{
+                        streamTimerMessage == ""
+                            ? "Stream is " + streamTimerTense
+                            : "... now!"
+                    }}</span>
+                </countdown> </span
+            >&nbsp;
+            <i class="fa fa-chevron-up fa-lg"></i>
+        </p>
+
         <p class="notification is-primary has-text-centered">
             <i class="fa fa-chevron-down fa-lg"></i>&nbsp;
             <strong>Warning: Outdated content!</strong> Content beneath this box
@@ -133,6 +153,11 @@
 
 <script>
 import BlogPostList from "~/components/BlogPostList.vue";
+import moment from "moment";
+
+const streamStart = moment("2021-01-09 13:00:00-05:00");
+const streamEnd = moment("2021-01-09 22:00:00-05:00");
+const finalStretch = false;
 
 const meta = {
     url: "https://fullmoonrobotics.org/",
@@ -168,6 +193,23 @@ export default {
             parent: ["fullmoonrobotics.org"],
         });
     },
+    computed: {
+        streamTimerMessage() {
+            if (moment().isBefore(streamStart)) return "Stream starts in ";
+            else if (finalStretch && moment().isBefore(streamEnd))
+                return "Stream ends in ";
+            else return "";
+        },
+        streamTimerTense() {
+            if (moment().isBefore(streamEnd)) return "live!";
+            else return "offline.";
+        },
+        streamTimerEnd() {
+            if (moment().isBefore(streamStart) || !finalStretch)
+                return streamStart.toDate();
+            else return streamEnd.toDate();
+        },
+    },
     components: {
         BlogPostList,
     },