From a1eef7a44dc5ba87538271409b1356a36a095986 Mon Sep 17 00:00:00 2001
From: Hugh Francis <hugh@sanctuary.computer>
Date: Sat, 11 Dec 2021 13:58:10 -0500
Subject: [PATCH] Implement radio.co integration for streaming radio

---
 theme/layout/theme.liquid        |  1 +
 theme/scripts/index.ts           |  3 +-
 theme/scripts/patronSlider.ts    |  4 +-
 theme/scripts/radio.ts           | 23 +++++++++++
 theme/snippets/radio.liquid      | 15 ++++++++
 theme/styles/_snippets.scss      |  1 +
 theme/styles/global.scss         |  1 +
 theme/styles/snippets/radio.scss | 66 ++++++++++++++++++++++++++++++++
 8 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 theme/scripts/radio.ts
 create mode 100644 theme/snippets/radio.liquid
 create mode 100644 theme/styles/snippets/radio.scss

diff --git a/theme/layout/theme.liquid b/theme/layout/theme.liquid
index a1682af7..460ddf1e 100644
--- a/theme/layout/theme.liquid
+++ b/theme/layout/theme.liquid
@@ -29,6 +29,7 @@
 
   {% render 'footer' %}
   {% render 'cookie-consent' %}
+  {% render 'radio' %}
 
   <script src="https://chr15m.github.io/bugout/bugout.min.js"></script>
   <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
diff --git a/theme/scripts/index.ts b/theme/scripts/index.ts
index 11c577c6..3e52f4c4 100644
--- a/theme/scripts/index.ts
+++ b/theme/scripts/index.ts
@@ -27,4 +27,5 @@ import "./logo";
 import "./pageTransition";
 import "./fadeIn";
 import "./magicMouse";
-import "./patronSlider";
\ No newline at end of file
+import "./radio";
+import "./patronSlider";
diff --git a/theme/scripts/patronSlider.ts b/theme/scripts/patronSlider.ts
index 2836bbb0..c5286324 100644
--- a/theme/scripts/patronSlider.ts
+++ b/theme/scripts/patronSlider.ts
@@ -55,9 +55,11 @@ export default (function () {
     SLIDER: null,
 
     init() {
+      const slider = document.querySelector(PatronSlider.SELECTORS.slider);
+      if (!slider) return;
       // Initialize noUiSlider instance.
       PatronSlider.SLIDER = rangeSlider.create(
-        document.querySelector(PatronSlider.SELECTORS.slider),
+        slider,
         {
           // Start with the slider at this value.
           start: [START_VALUE],
diff --git a/theme/scripts/radio.ts b/theme/scripts/radio.ts
new file mode 100644
index 00000000..2550f6e7
--- /dev/null
+++ b/theme/scripts/radio.ts
@@ -0,0 +1,23 @@
+export default (function() {
+  const Radio = {
+    async init() {
+      const response =
+        await window.fetch('https://public.radio.co/stations/s8a3652f0b/status')
+      const data = await response.json();
+      if (data.status === "online") Radio.enablePlayer();
+    },
+
+    async enablePlayer() {
+      const radio = document.getElementById("Radio");
+      $('.Radio').radiocoPlayer();
+      const child = document.createElement('div');
+      child.innerHTML =
+        '<span class="CollectionLinks__button live"><i class="live-icon"></i>&nbsp; Live</span>';
+      radio.appendChild(child.firstChild);
+      radio.classList.add("enabled");
+    }
+  };
+
+  Radio.init();
+})();
+
diff --git a/theme/snippets/radio.liquid b/theme/snippets/radio.liquid
new file mode 100644
index 00000000..33ee3cd1
--- /dev/null
+++ b/theme/snippets/radio.liquid
@@ -0,0 +1,15 @@
+<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+<script src="https://public.radio.co/playerapi/jquery.radiocoplayer.min.js"></script>
+<div
+  id="Radio"
+  class="Radio md:flex uppercase py_5 px_625 md:px_75 flex items-center justify-between bg-color-white w100 fixed b0 r0 l0 z-nav"
+  data-src="https://s2.radio.co/s8a3652f0b/listen"
+  data-autoplay="false"
+  data-playbutton="true"
+  data-volumeslider="false"
+  data-elapsedtime="false"
+  data-nowplaying="true"
+  data-showplayer="true"
+  data-volume="100"
+  data-showartwork="false">
+</div>
diff --git a/theme/styles/_snippets.scss b/theme/styles/_snippets.scss
index 6d1bacfd..24806c59 100644
--- a/theme/styles/_snippets.scss
+++ b/theme/styles/_snippets.scss
@@ -24,3 +24,4 @@
 @import 'snippets/add-to-cart-container';
 @import 'snippets/product-date';
 @import 'snippets/patron-slider';
+@import 'snippets/radio';
diff --git a/theme/styles/global.scss b/theme/styles/global.scss
index c08f28e7..2ea59715 100644
--- a/theme/styles/global.scss
+++ b/theme/styles/global.scss
@@ -30,6 +30,7 @@
 /* Offset for Nav height */
 body {
   padding-top: $nav-height;
+  padding-bottom: 50px;
 
   @include media('md-up') {
     padding-top: $nav-height-md;
diff --git a/theme/styles/snippets/radio.scss b/theme/styles/snippets/radio.scss
new file mode 100644
index 00000000..25f1e2fb
--- /dev/null
+++ b/theme/styles/snippets/radio.scss
@@ -0,0 +1,66 @@
+.Radio {
+  display: none;
+  position: fixed;
+  width: 100%;
+  background-color: black;
+  height: 50px;
+  z-index: 999;
+  font-family: ITCGaramondStdLtCond,serif;
+  color: white;
+  border-top: 1px solid white;
+  &.enabled {
+    display: flex;
+  }
+
+  .radioco-image {
+    display: none;
+  }
+  .radioco-bg {
+    display: none;
+  }
+  .radioco-playButton-playing {
+    box-sizing: border-box;
+    height: 24px;
+    border-color: transparent transparent transparent white;
+    transition: 100ms all ease;
+    will-change: border-width;
+    cursor: pointer;
+    border-style: solid;
+    border-width: 12px 0 12px 20px;
+  }
+  .radioco-playButton-paused {
+    box-sizing: border-box;
+    height: 24px;
+    border-color: transparent transparent transparent white;
+    transition: 100ms all ease;
+    will-change: border-width;
+    cursor: pointer;
+    border-style: double;
+    border-width: 0px 0 0px 20px;
+  }
+  .live {
+    border-radius: 0.375rem;
+    border: 1px solid white;
+    text-transform: uppercase;
+    color: white;
+    text-decoration: none;
+    padding: 0.1rem 0.3rem;
+    font-size: 1rem;
+    line-height: 1.6875rem;
+    letter-spacing: -.03rem;
+    display: flex;
+    align-items: center;
+  }
+  .live-icon {
+    width: 10px;
+    background-color: #c50000;
+    height: 10px;
+    display: inline-block;
+    border-radius: 999px;
+    animation: blinker 1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;
+  }
+  @keyframes blinker {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+}