add live now badge to sessions that are currently streaming (#35)

* fix: add Code Connect section * add the first sponsor * added asbrucon sponsor * wording fix * html comment removed. * fix for missing logo in Safari * fix for missing logo in Safari * Added agilita sponsor. * add more sponsors * add LinkedIn links for Rizind and Aarini * add a new sponsor and remove propose topic link * add registration message * Introduced tito widget section - removed early bird ticket section. * updated asbrucon sponsor logo to latest version. * added rev-trac as a sponsor * added missing dark mode logo to rev-trac * open registration * join waitlist button update * add Gambit sponsor * add the agenda * css and html for the latest header * add FAQ * minor CSS fixes for mobile mode * add link to the app and CSS fixes * update aarini sponsor and the sorting * format food break to show dining * add links to the livestreams --------- Co-authored-by: Fabian Tempel <[email protected]> Co-authored-by: Fabian Tempel <[email protected]>
sapmentors · May 28, 2024 · 94eb89c · 94eb89c
1 parent 366fabf
commit 94eb89c
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 5 deletions.
diff --git a/docs/css/common.css b/docs/css/common.css
@@ -682,6 +682,20 @@ main {
     margin-block-end: 0;
 }
 
+.recap-live {
+  display: flex;
+  line-height: 1;
+  color: var(--brand-color);
+  font-size: clamp(3rem, 6vw, 5rem);
+  font-weight: 900;
+  text-align: center;
+  background-image: linear-gradient(35deg, var(--brand-color), var(--brand-color-alt));
+  background-clip: text;
+  color: transparent;
+  margin-block: 1rem 2rem;
+}
+
+
 @media only screen and (min-width: 768px) {
   .recap-site-header .recap-wrap {
     flex-direction: row-reverse;

diff --git a/docs/css/modules/_agenda.css b/docs/css/modules/_agenda.css
@@ -202,6 +202,42 @@
   outline: none;
 }
 
+.recap-agenda-slot-live {
+    font-weight: 600;
+    display: block;
+    margin-block-end: 1rem;
+    color: var(--brand-color-alt);
+}
+
+.recap-agenda-slot-live {
+    -webkit-animation: color_change 1s infinite alternate;
+    -moz-animation: color_change 1s infinite alternate;
+    -ms-animation: color_change 1s infinite alternate;
+    -o-animation: color_change 1s infinite alternate;
+    animation: color_change 1s infinite alternate;
+}
+
+@-webkit-keyframes color_change {
+    from { color: var(--brand-color-alt); }
+    to { color: var(--brand-color); }
+}
+@-moz-keyframes color_change {
+    from { color: var(--brand-color-alt); }
+    to { color: var(--brand-color); }
+}
+@-ms-keyframes color_change {
+    from { color: var(--brand-color-alt); }
+    to { color: var(--brand-color); }
+}
+@-o-keyframes color_change {
+    from { color: var(--brand-color-alt); }
+    to { color: var(--brand-color); }
+}
+@keyframes color_change {
+    from { color: var(--brand-color-alt); }
+    to { color: var(--brand-color); }
+}
+
 @media only screen and (min-width: 768px) {
     .recap-agenda-slot-info {
         gap: 1.5rem;

diff --git a/docs/index.html b/docs/index.html
@@ -50,7 +50,8 @@ <h1>
 
         <p class="recap-agenda-annonce">Check our <a href="#agenda">agenda</a>, <a href="#recap-faq">FAQ</a> and <a href="https://recap2024.cfapps.eu10.hana.ondemand.com" target="_blank" title="conrefence app, click to open on a new page">app</a> for more details!</p>
 
-        <p>
+        <div class="recap-live" v-if="showLive">WE ARE LIVE</div>
+        <p v-else>
           Can't join us in person? No problem! Watch the conference online via our livestreams. Tune in and stay connected from
           anywhere!
         </p>
@@ -353,12 +354,15 @@ <h2>Agenda</h2>
           </fieldset>
         </div>
 
-
-
         <ol class="recap-agenda">
           <li class="recap-agenda-slot" v-for="event in this.formattedLineup" :key="event.id" v-cloak>
             <div class="recap-agenda-slot-container">
               <div class="recap-agenda-slot-talk">
+                <span 
+                  class="recap-agenda-slot-live" 
+                  v-if="event.liveNow && (event.location.toLowerCase() === 'audimax' || event.location.toLowerCase() === 'w1')">
+                  LIVE NOW
+                </span>
                 <div class="recap-agenda-slot-info">
                   <span>
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">

diff --git a/docs/js/main.js b/docs/js/main.js
@@ -1,5 +1,56 @@
 'use strict';
 
+var header = new Vue({
+  el: "#header",
+  data() {
+    return {
+      showLive: false,
+    };
+  },
+  mounted() {
+    this.updateLiveSession();
+
+    let interval2;
+    let timeNow = new Date().toISOString();
+    const confStartTime = new Date(
+      "2024-06-04T00:00:00.000+02:00"
+    ).toISOString();
+
+    const confEndTime = new Date("2024-06-04T18:00:00.000+02:00").toISOString();
+
+    if (timeNow >= confStartTime && timeNow <= confEndTime) {
+      interval2 = setInterval(() => {
+        timeNow = new Date().toISOString();
+        if (timeNow > confEndTime) {
+          clearInterval(interval2);
+          return;
+        }
+        this.updateLiveSession();
+      }, 30000);
+    }
+
+  },
+  methods: {
+    updateLiveSession() {
+      let timeNow = new Date().toISOString();
+
+      const confStartTime = new Date(
+        "2024-06-04T09:00:00.000+02:00"
+      ).toISOString();
+
+      const confEndTime = new Date(
+        "2024-06-04T18:00:00.000+02:00"
+      ).toISOString();
+
+      if (timeNow > confStartTime && timeNow <= confEndTime) {
+        this.showLive = true;
+      } else {
+        this.showLive = false;
+      }
+    },
+  },
+});
+
 var main = new Vue({
   el: "#main",
   data() {
@@ -21,6 +72,31 @@ var main = new Vue({
         this.lineup = response.data;
         this.formattedLineup = this.formatLineup();
       });
+
+    this.updateLiveSession();
+
+    let interval;
+
+    let timeNow = new Date().toISOString();
+
+    const startCounterTime = new Date(
+      "2024-06-04T00:00:00.000+02:00"
+    ).toISOString();
+
+    const endCounterTime = new Date(
+      "2024-06-04T18:10:00.000+02:00"
+    ).toISOString();
+
+    if (timeNow > startCounterTime && timeNow <= endCounterTime) {
+      interval = setInterval(() => {
+        timeNow = new Date().toISOString();
+        if (timeNow > endCounterTime) {
+          clearInterval(interval);
+          return;
+        }
+        this.updateLiveSession();
+      }, 30000);
+    }
   },
   methods: {
     toggleAnswer(event) {
@@ -240,6 +316,19 @@ var main = new Vue({
         return "https://bsky.app/profile/" + handle.replace("@", "");
       }
     },
+    updateLiveSession() {
+      return this.formattedLineup.map((session) => {
+        let timeNow = new Date().toISOString();
+        let sessionTimeStart = new Date(session.startTime).toISOString();
+        let sessionTimeEnd = new Date(session.endTime).toISOString();
+
+        if (timeNow >= sessionTimeStart && timeNow < sessionTimeEnd) {
+          session.liveNow = true;
+        } else {
+          session.liveNow = false;
+        }
+      });
+    },
   },
   filters: {
     trimTime: function (value) {
@@ -265,7 +354,7 @@ var main = new Vue({
         } else if (value.startsWith("w1") || value.startsWith("w2")) {
           return "Room W1 | W2";
         } else if (value.startsWith("w3")) {
-          return "Room W3"
+          return "Room W3";
         } else {
           return value;
         }
@@ -279,7 +368,7 @@ var main = new Vue({
           return "workshop";
         } else if (value.startsWith("yoga")) {
           return "yoga";
-        } else if (value.startsWith("lunch") || value.startsWith("food") ) {
+        } else if (value.startsWith("lunch") || value.startsWith("food")) {
           return "dining";
         } else {
           return value;