Silence screen

Author: Joonas Haaparanta

.gitignore

@@ -1,3 +1,5 @@
+run.sh
+
 # Logs
 logs
 *.log

main.js

@@ -22,13 +22,13 @@ app.get("/giphy/", async (req, res) => {
   res.send(`sent ${str} -> ${image}`);
 });
 
-app.get("/", (_, res) => res.sendFile(path.join(__dirname, "index.html")));
+app.use("/", express.static("public"));
 
 const getTrack = async () => {
   try {
     const track = await device.currentTrack();
 
-    if (track.uri.includes("spotify")) {
+    if (track.uri && track.uri.includes("spotify")) {
       return {
         ...track,
         dj: " Null ",

public/.gitignore

@@ -8,185 +8,20 @@
       href="https://fonts.googleapis.com/css?family=Fira+Mono"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="./main.css" />
     <title>Musacorneri</title>
-    <style>
-            html,
-            body {
-              margin: 0;
-              padding: 0;
-              font-family: "Fira Mono", monospace;
-            }
-
-            body {
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              height: 100vh;
-              background: black;
-              overflow: hidden;
-              cursor: none;
-            }
-
-            h1 {
-              width: 100%;
-              padding: 30px;
-              margin: 0;
-              text-align: center;
-              /* background: #292929; */
-              background: rgba(0, 0, 0, 0.5);
-              color: #1ed760;
-              font-size: 90px;
-              text-transform: uppercase;
-            }
-
-            .trackinfo {
-              display: flex;
-              flex-direction: column;
-              width: 100%;
-              flex: 1;
-              justify-content: center;
-              align-items: center;
-              color: white;
-            }
-
-            .artist {
-              /* margin-top: 20px; */
-              font-size: 56px;
-            }
-
-            .track {
-              font-size: 36px;
-              margin-bottom: 20px;
-            }
-
-            .albumart {
-              height: 500px;
-              width: 500px;
-              border: 15px solid #292929;
-            }
-
-            .timebar {
-              width: 500px;
-              margin-left: 10px;
-              margin-right: 10px;
-              height: 10px;
-              background: #999;
-              border-radius: 5px;
-              overflow: hidden;
-            }
-
-            .timehead {
-              width: 0%;
-              height: 10px;
-              background: #1ed760;
-            }
-
-            .timeContainer {
-              display: flex;
-              align-items: center;
-            }
-
-            .dj {
-              text-align: right;
-              align-self: flex-end;
-              color: #777777;
-              padding: 5px 15px;
-            }
-
-            .party {
-              background: rgb(224, 9, 189);
-              background: linear-gradient(
-                45deg,
-                rgba(224, 9, 189, 1) 0%,
-                rgba(0, 212, 255, 1) 100%
-              );
-            }
-
-            .parrot {
-              height: 60px;
-            }
-
-            .eqcontainer {
-              position: absolute;
-              top: 30%;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              z-index: -1;
-              opacity: .7;
-            }
-
-            svg {
-              display: block;
-              width: 100%;
-              height: 100%;
-              padding: 0;
-              margin: 0;
-              position: absolute;
-            }
-
-            path {
-              stroke-linecap: square;
-              stroke: white;
-              stroke-width: 0.5px;
-            }
-
-            .bgBlurri {
-              position: absolute;
-              top: -480px;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              width: 100%;
-              height: auto;
-              opacity: 0.9;
-              border: none;
-              filter: blur(20px);
-              z-index: 0;
-            }
-
-            .c {
-              z-index: 1;
-              position: absolute;
-              top: 0;
-              left: 0;
-              right: 0;
-              bottom: 0;
-
-              display: flex;
-              flex-direction: column;
-            }
-
-            .juttu {
-              position: fixed;
-          bottom: 0;
-          background: rgba(0,0,0,.5);
-          left: 0;
-          right: 0;
-          display: flex;
-          flex-direction: inherit;
-          align-items: center;
-          padding: 20px;
-      }
-
-      .beercontainer {
-        color: white;
-    font-size: 40px;
-    padding-top: 20px;
-    text-align: center;
-}
-      
-            
-    </style>
   </head>
 
   <body>
     <div class="c">
-      <div class="beercontainer">
-        Kaljat ~<span id="beertemp" />
-      </div>
+      <div class="beercontainer">Kaljat ~<span id="beertemp" /></div>
+      <div class="silence" style="display: none;">🙉</div>
       <div class="trackinfo">
-        <img class="albumart" src="https://giphy.com/embed/5nsiFjdgylfK3csZ5T" alt="" />
+        <img
+          class="albumart"
+          src="https://giphy.com/embed/5nsiFjdgylfK3csZ5T"
+          alt=""
+        />
         <div class="juttu">
           <div class="artist"></div>
           <div class="track"></div>
@@ -198,7 +33,6 @@
           </div>
         </div>
       </div>
-      
     </div>
     <!-- EQ no work with raspberry... -->
     <div class="eqcontainer">
@@ -234,6 +68,8 @@
 
   <script>
     const e = {
+      trackinfo: document.querySelector(".trackinfo"),
+      silence: document.querySelector(".silence"),
       track: document.querySelector(".track"),
       artist: document.querySelector(".artist"),
       albumart: document.querySelectorAll(".albumart"),
@@ -245,50 +81,45 @@
       beertemp: document.querySelector("#beertemp")
     };
 
-    async function getBeerTemp(){
-      const res = await fetch("https://zclvxxpogl.execute-api.eu-west-1.amazonaws.com/dev/isbeercold");
-     const json = await res.json();
+    async function getBeerTemp() {
+      const res = await fetch(
+        "https://zclvxxpogl.execute-api.eu-west-1.amazonaws.com/dev/isbeercold"
+      );
+      const json = await res.json();
 
-      e.beertemp.innerHTML = json.values[json.values.length -1] + " °C"
+      e.beertemp.innerHTML = json.values[json.values.length - 1] + " °C";
 
-     json.values[json.values.length - 1]
-     
+      json.values[json.values.length - 1];
     }
 
     getBeerTemp();
     setInterval(async () => {
       getBeerTemp();
-    }, 1000 * 60)
+    }, 1000 * 60);
 
     const socket = io();
 
+    socket.on("show-image", function({ image, text }) {
+      if (!image) return;
 
-
-    socket.on("show-image", function({image, text}){
-      if(!image) return;
-
-      console.log("got image", {image, text});
-      
-      const ifrm  = document.createElement("iframe");
+      const ifrm = document.createElement("iframe");
       ifrm.setAttribute("src", image);
       ifrm.setAttribute("id", "giphy");
 
       const dim = Math.min(window.innerHeight, window.innerWidth) - 200;
 
       ifrm.style.width = `${dim}px`;
       ifrm.style.height = `${dim}px`;
-      
 
-      ifrm.style.zIndex = 100
+      ifrm.style.zIndex = 100;
       ifrm.style.border = "none";
-      ifrm.style.margin = "auto"
-    
-      ifrm.style.bottom = 0
-      ifrm.style.top = 0
-      ifrm.style.left = 0
-      ifrm.style.right = 0
-
-      
+      ifrm.style.margin = "auto";
+
+      ifrm.style.bottom = 0;
+      ifrm.style.top = 0;
+      ifrm.style.left = 0;
+      ifrm.style.right = 0;
+
       const gText = document.createElement("div");
       gText.setAttribute("id", "gText");
       gText.innerText = text;
@@ -297,24 +128,19 @@
       gText.style.background = "black";
       gText.style.fontSize = "100px";
       gText.style.zIndex = 101;
-      gText.style.padding = "40px"
+      gText.style.padding = "40px";
 
-    
-      document.body.appendChild(gText)
-      document.body.appendChild(ifrm)
+      document.body.appendChild(gText);
+      document.body.appendChild(ifrm);
 
       setTimeout(() => {
-        
-        document.body.removeChild(document.getElementById("giphy"))
-        document.body.removeChild(document.getElementById("gText"))
-      }, 10000)
-      
-    })
-
-    
+        document.body.removeChild(document.getElementById("giphy"));
+        document.body.removeChild(document.getElementById("gText"));
+      }, 10000);
+    });
 
     socket.on("track-update", function(track) {
-       updateTrackData(e, track);
+      updateTrackData(e, track);
     });
 
     function secondsToTime(s) {
@@ -342,7 +168,18 @@
     const parrot = `<img class="parrot" src="https://cultofthepartyparrot.com/parrots/parrot.gif" />`;
 
     function updateTrackData(e, track) {
-      if (currentUri !== track.uri || currentTitle !== track.title) {
+      if (track.position === null && track.duration === null) {
+        // Undefined track!
+
+        e.trackinfo.style.display = "none";
+        e.silence.style.display = "flex";
+
+        e.albumart.forEach(x => {
+          x.src = "/jungle.jpg";
+        });
+      } else if (currentUri !== track.uri || currentTitle !== track.title) {
+        e.trackinfo.style.display = "flex";
+        e.silence.style.display = "none";
         currentUri = track.uri;
         currentTitle = track.title;
         e.track.innerHTML = track.title;
@@ -351,7 +188,6 @@
           x.src = track.albumArtURL;
         });
         e.totalTime.innerHTML = secondsToTime(track.duration);
-        
 
         // Friday
         if (track.isFridaySong) {
@@ -377,7 +213,6 @@
       var report = 0;
 
       var soundAllowed = function(stream) {
-        console.log("Sound");
         //Audio stops listening in FF without // window.persistAudioStream = stream;
         //https://bugzilla.mozilla.org/show_bug.cgi?id=965483
         //https://support.mozilla.org/en-US/questions/984179
@@ -422,10 +257,11 @@
         h.innerHTML = "You must allow your microphone.";
         console.log(error);
       };
-      navigator.getUserMedia = ( navigator.getUserMedia ||
-                       navigator.webkitGetUserMedia ||
-                       navigator.mozGetUserMedia ||
-                       navigator.msGetUserMedia);
+      navigator.getUserMedia =
+        navigator.getUserMedia ||
+        navigator.webkitGetUserMedia ||
+        navigator.mozGetUserMedia ||
+        navigator.msGetUserMedia;
 
       navigator.getUserMedia({ audio: true }, soundAllowed, soundNotAllowed);
     };