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' %}
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 =
+ ' Live';
+ 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 @@
+
+
+
+
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; }
+ }
+}