Add countdown number on slideshow

Dermah · Oct 14, 2019 · 2f250c7 · 2f250c7
1 parent f7254f7
commit 2f250c7
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 16 deletions.
diff --git a/pulsar/assets/js/audience/audience-app.js b/pulsar/assets/js/audience/audience-app.js
@@ -43,13 +43,8 @@ new p5(p => {
   let maxStrobe = 0;
   let strobe = 0;
 
-  const instrumentMap = [
-    "bass/synth",
-    "drums",
-    "percussion",
-    "horns",
-    "melody"
-  ];
+  const instrumentMap = ["bass", "drums", "percussion", "horns", "melody"];
+  let countdown;
 
   let instrumentDrawings = [[], [], [], [], []];
   channel.on(
@@ -80,6 +75,8 @@ new p5(p => {
         maxStrobe = size;
       } else if (type === "autostrobe") {
         autostrobe = value;
+      } else if (type === "countdown") {
+        countdown = value;
       } else if (type === "instrument") {
         instrumentDrawings[recievedInstrument].push({
           x: x * p.width,
@@ -288,7 +285,14 @@ new p5(p => {
       strobe--;
     }
 
-    // Fireflys
+    if (countdown >= 1) {
+      p.fill(150, 150, 150, 255 * (countdown / 10));
+      p.textSize(p.width / 10);
+      p.text(countdown, widthPc(5), p.height - heightPc(5));
+    }
+    p.textSize(12);
+
+    // Fireflys;
     drawFirefly();
     drawInstruments();
 

diff --git a/pulsar/assets/js/slides/slides.js b/pulsar/assets/js/slides/slides.js
@@ -28,6 +28,8 @@ Reveal.initialize({
 let socket = new Socket("/socket", { params: { token: window.userToken } });
 socket.connect();
 let slidesChannel = socket.channel("slides:lobby", {});
+let pulseChannel = socket.channel("audience:lobby", {});
+
 slidesChannel
   .join()
   .receive("ok", resp => {
@@ -37,6 +39,24 @@ slidesChannel
     console.log("Unable to join", resp);
   });
 
+pulseChannel
+  .join()
+  .receive("ok", resp => {
+    console.log("Joined audience successfully", resp);
+  })
+  .receive("error", resp => {
+    console.log("Unable to join", resp);
+  });
+
 slidesChannel.on("slides", ({ action }) => {
   Reveal[action]();
 });
+
+Reveal.addEventListener("slidechanged", function(event) {
+  console.log(Reveal.getTotalSlides() - event.indexh - 1);
+  pulseChannel.push("pulse", {
+    type: "countdown",
+    value: Reveal.getTotalSlides() - event.indexh - 1
+  });
+  // event.previousSlide, event.currentSlide, event.indexh, event.indexv
+});
diff --git a/pulsar/lib/pulsar_web/templates/slides/index.html.eex b/pulsar/lib/pulsar_web/templates/slides/index.html.eex
@@ -25,24 +25,24 @@
   <body>
     <div class="reveal">
       <div class="slides">
-        <section style="height: 100%;">
+        <section data-background-color="#000" style="height: 100%;">
           <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around;">
             <p><a>http://pulsar.wtf</a></p>
             <h1>Outsourced<br/>VJ-ing</h1>
             <h5>Sputnik <small style="vertical-align: middle;">(@dermah)</small></h4>
           </div>
         </section>
-        <section>
+        <section data-background-color="#000">
           <p><a>http://pulsar.wtf</a></p>
           <img src="https://s3-ap-southeast-2.amazonaws.com/pulsar.wtf-assets/images/dj.jpg"/>
           <h5>Sputnik <small style="vertical-align: middle;">(@dermah)</small></h4>
         </section>
-        <section data-transition="fade">
+        <section data-background-color="#000" data-transition="fade">
           <p><a>http://pulsar.wtf</a></p>
           <img src="https://s3-ap-southeast-2.amazonaws.com/pulsar.wtf-assets/images/vj.jpg"/>
           <h5>Sputnik <small style="vertical-align: middle;">(@dermah)</small></h4>
         </section>
-        <section style="height: 100%;">
+        <section data-background-color="#000" style="height: 100%;">
           <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around;">
             <p><a>http://pulsar.wtf</a></p>
             <h3><strike>Outsourced<br/>VJ-ing</strike></h3>
@@ -51,21 +51,21 @@
           </div>
         </section>
 
-        <section>
+        <section data-background-color="#000">
           <div id="test-pattern-video"></div>
         </section>
 
-        <section>
+        <section data-background-color="#000">
           <div id="mpe-video"></div>
         </section>
 
-        <section>
+        <section data-background-color="#000">
           <video data-autoplay loop muted>
             <source data-src="https://s3-ap-southeast-2.amazonaws.com/pulsar.wtf-assets/videos/PULSAR-SNIP.mp4" type="video/mp4" />
           </video>
         </section>
 
-        <section>
+        <section data-background-color="#000">
           <img src="https://s3-ap-southeast-2.amazonaws.com/pulsar.wtf-assets/images/system.jpg">
         </section>