Implement radio.co integration for streaming radio

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>

theme/scripts/index.ts

@@ -27,4 +27,5 @@ import "./logo";
 import "./pageTransition";
 import "./fadeIn";
 import "./magicMouse";
-import "./patronSlider";
+import "./radio";
+import "./patronSlider";

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],

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();
+})();
+

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>

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';

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;

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; }
+  }
+}