From 5aec7c56ea4a008a1d4c839030384f2354e6390b Mon Sep 17 00:00:00 2001
From: "shopify[bot]" <79544226+shopify[bot]@users.noreply.github.com>
Date: Sun, 4 Sep 2022 17:41:02 +0000
Subject: [PATCH] Update from Shopify for theme dawn/use-image-tag

Committed from shop: SWOOSH CA
---
 assets/video-player.js.LICENSE.txt         |  20 +
 snippets/single-ajaxify-album.liquid       | 393 +++++++++++++++
 snippets/single-footer-player.liquid       | 207 ++++++++
 snippets/single-progress-bar.liquid        |  74 +++
 snippets/single-track.liquid               | 161 +++++++
 templates/page.single.nft-countdown.liquid | 102 ++++
 templates/product.single.album.liquid      | 528 +++++++++++++++++++++
 7 files changed, 1485 insertions(+)
 create mode 100644 assets/video-player.js.LICENSE.txt
 create mode 100644 snippets/single-ajaxify-album.liquid
 create mode 100644 snippets/single-footer-player.liquid
 create mode 100644 snippets/single-progress-bar.liquid
 create mode 100644 snippets/single-track.liquid
 create mode 100644 templates/page.single.nft-countdown.liquid
 create mode 100644 templates/product.single.album.liquid

diff --git a/assets/video-player.js.LICENSE.txt b/assets/video-player.js.LICENSE.txt
new file mode 100644
index 00000000000..882e3092893
--- /dev/null
+++ b/assets/video-player.js.LICENSE.txt
@@ -0,0 +1,20 @@
+/*!
+ * 
+ * Copyright (C) 2020, Bitmovin, Inc., All Rights Reserved
+ * 
+ * This source code and its use and distribution, is subject to the terms
+ * and conditions of the applicable license agreement.
+ * 
+ * bitmovin-analytics version v2.18.0
+ * 
+ */
+
+/*!
+ * @overview es6-promise - a tiny implementation of Promises/A+.
+ * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
+ * @license   Licensed under MIT license
+ *            See https://raw.githubusercontent.com/jakearchibald/es6-promise/master/LICENSE
+ * @version   2.3.0
+ */
+
+/*! codem-isoboxer v0.2.1 https://github.com/madebyhiro/codem-isoboxer/blob/master/LICENSE.txt */
diff --git a/snippets/single-ajaxify-album.liquid b/snippets/single-ajaxify-album.liquid
new file mode 100644
index 00000000000..7188a0f4a36
--- /dev/null
+++ b/snippets/single-ajaxify-album.liquid
@@ -0,0 +1,393 @@
+{% comment %}
+<!--
+Copyright (c) 2022 Single, LLC - ALL RIGHTS RESERVED
+
+NOTICE:  All information contained herein is, and remains the property of Single, LLC
+and its suppliers, if any. The intellectual and technical concepts contained herein are
+proprietary to Single, LLC and its suppliers and may be covered by U.S. and Foreign Patents,
+patents in process, and are protected by trade secret or copyright law. Dissemination of this
+information or reproduction of this material is strictly forbidden unless prior
+written permission is obtained from Single, LLC.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+-->
+{% endcomment %}
+<script>
+  $(window).on("load", function() {
+    Shopify.AjaxifyCart = (function ($) {
+
+      const Config = {
+        labels: {
+          addToCart: 'Add to Cart',
+          added: 'Thank you!',
+          adding: 'Adding...',
+          soldOut: 'Sold Out',
+        },
+        selectors: {
+          cartCount: '.cart-count, #cart-count a:first, #gocart p a, #cart .checkout em, .item-count, #CartCount',
+          total: '#cart-price',
+          addToCartButton: '[type="submit"]',
+          addToCartForm: 'form[action="/cart/add"]',
+          currencies: '[name="currencies"]',
+          selectedCurrency: '#currencies span.selected'
+        },
+        uri: {
+          add: '/cart/add.js',
+          cart: '/cart.js',
+        },
+
+        feedbackPosition: 'nextButton',
+        feedbackTimeout: 3000,
+        {% if livestream %}
+        livestream: true,
+        livestreamId: '{{ livestream_id }}',
+        {% endif %}
+        {% if single_host %}
+        singleHost: '{{ single_host }}',
+        {% endif %}
+
+        currency: '{{ shop.currency }}',
+        moneyFormat: '{{ shop.money_format | remove: "'" | remove: '"' }}'
+      };
+
+      const _save = function (key, data, expireDate) {
+        const item = {
+          value: data,
+          expiresOn: expireDate,
+        };
+        localStorage.setItem(key, JSON.stringify(item));
+      };
+
+      const _load = function (key) {
+        const data = localStorage.getItem(key);
+        if (!data) {
+          return null;
+        }
+        const now = new Date();
+        const item = JSON.parse(data);
+        if (!!item.expiresOn && now.getTime() > item.expiresOn) {
+          localStorage.removeItem(key)
+          return null;
+        }
+        return item.value;
+      };
+
+      const _saveLivestreamId = function () {
+        if (!Config.livestreamId) {
+          return;
+        }
+        const data = {
+          livestreamId: Config.livestreamId,
+        };
+        const expiresOn = new Date().getTime() + (60000 * 60);
+        _save("singlemusic_livestream_id", data, expiresOn);
+      };
+
+      const _saveSingleHost = function () {
+        if (!Config.singleHost) {
+          return;
+        }
+        const data = {
+          singleHost: Config.singleHost
+        };
+        const expiresOn = new Date().getTime() + (60000 * 60 * 24);
+        _save("singlemusic_host", data, expiresOn);
+      };
+
+      const _loadLivestreamId = function () {
+        const livestreamData = _load("singlemusic_livestream_id");
+        if (!livestreamData || !livestreamData.livestreamId) {
+          return null;
+        }
+        return livestreamData.livestreamId;
+      };
+
+      const _loadSingleHost = function () {
+        const hostData = _load("singlemusic_host");
+        if (!hostData || !hostData.singleHost) {
+          return null;
+        }
+        return hostData.singleHost;
+      }
+
+      const _getProductId = function (form) {
+        return form.attr('id').split('product_form_')[1];
+      };
+
+      const _getProductVariantId = function (form) {
+        return form.find('[name="id"]').val();
+      };
+
+      const _showFeedback = function (success, html, cartForm) {
+        const productId = 'single-ajaxified-cart-feedback-' + _getProductId(cartForm);
+        $('#' + productId).remove();
+        const feedback =
+                '<div id = "' + productId +
+                '" class="single-ajaxified-cart-feedback ' + success + '">'
+                + html +
+                '</div>';
+        switch (Config.feedbackPosition) {
+          case 'aboveForm':
+            cartForm.before(feedback);
+            break;
+          case 'belowForm':
+            cartForm.after(feedback);
+            break;
+          case 'nextButton':
+          default:
+            cartForm.find(Config.selectors.addToCartButton)
+                    .filter(function () {
+                      return !$(this).attr('data-single-clone');
+                    })
+                    .after(feedback);
+            break;
+        }
+        $('.single-ajaxified-cart-feedback').slideDown();
+      };
+
+      const _setText = function ($button, label) {
+        if ($button.children().length) {
+          $button.children().each(function () {
+            if ($.trim($(this).text()) !== '') {
+              $(this).text(label);
+            }
+          });
+        } else {
+          $button.val(label).text(label);
+        }
+      };
+
+      const _getAddToCartButton = function (form) {
+        let button;
+        if (Config.livestream) {
+          button = form.children(Config.selectors.addToCartButton);
+        } else {
+          button = form.find(Config.selectors.addToCartButton);
+        }
+        button = button.filter(function () {
+          return !$(this).attr('data-single-clone');
+        });
+        return button
+      };
+
+      const _disableElement = function (element) {
+        element.addClass('disabled')
+                .prop('disabled', true);
+      };
+
+      const _enableElement = function (element) {
+        element.prop('disabled', false)
+                .removeClass('disabled')
+                .removeClass('single-hidden');
+      };
+
+      const _hideElement = function (element) {
+        element.addClass('single-hidden');
+      };
+
+      const _showElement = function (element) {
+        element.removeClass('single-hidden');
+      };
+
+      const _resetFeedback = function (addToCartButton, cartForm, itemData) {
+        _enableElement(addToCartButton);
+        _hideElement($('#single-ajaxified-cart-feedback-' + _getProductId(cartForm)));
+        _showElement($('#single-variant-select-' + itemData.product_id));
+        _setText(addToCartButton, Config.labels.addToCart);
+      };
+
+      const _showCartFeedback = function (cart) {
+        if (Config.selectors.cartCount && $(Config.selectors.cartCount).size()) {
+          const value = $(Config.selectors.cartCount).html() || '0';
+          $(Config.selectors.cartCount).html(value.replace(/[0-9]+/, cart.item_count)).removeClass('hidden-count');
+        }
+        if (Config.selectors.total && $(Config.selectors.total).size()) {
+          if (typeof Currency !== 'undefined' && typeof Currency.moneyFormats !== 'undefined') {
+            var currency = '';
+            if ($(Config.selectors.currencies).size()) {
+              currency = $(Config.selectors.currencies).val();
+            } else if ($(Config.selectors.selectedCurrency).size()) {
+              currency = $(Config.selectors.selectedCurrency).attr('data-currency');
+            }
+            if (currency) {
+              $(Config.selectors.total).html(
+                      '<span class=money>'
+                      + Shopify.formatMoney(
+                              Currency.convert(cart.total_price, Config.currency, currency),
+                              Currency.money_format[currency])
+                      + '</span>');
+            } else {
+              $(Config.selectors.total).html(Shopify.formatMoney(cart.total_price, Config.moneyFormat));
+            }
+          } else {
+            $(Config.selectors.total).html(Shopify.formatMoney(cart.total_price, Config.moneyFormat));
+          }
+        }
+      };
+
+      const _getAddedFeedbackHtml = function () {
+        if (Config.livestream) {
+          return '<a href="/cart" target="_blank" class="btn"><i class="material-icons">check</i> Added to cart!</a>';
+        }
+        return '<a href="/cart" class="btn"><i class="material-icons">check</i> Added to cart!</a>'
+      };
+
+      const _addToCartSuccess = function (itemData, addToCartButton, cartForm) {
+        _hideElement(addToCartButton);
+        _hideElement($('#single-variant-select-' + itemData.product_id));
+        _setText(addToCartButton, Config.labels.added);
+        _showFeedback(
+                'success',
+                _getAddedFeedbackHtml(),
+                cartForm);
+
+        window.setTimeout(() => _resetFeedback(addToCartButton, cartForm, itemData), Config.feedbackTimeout);
+
+        // Update cart count and show cart link.
+        $.getJSON(Config.uri.cart, _showCartFeedback);
+      };
+
+      const _addToCartError = function (response, addToCartButton, cartForm) {
+        response = response.description;
+        if (response.slice(0, 4) === 'All ') {
+          _showFeedback('error', response.replace('All 1 ', 'All '), cartForm);
+          addToCartButton.prop('disabled', false);
+          _setText(addToCartButton, Config.labels.soldOut);
+          addToCartButton.prop('disabled', true);
+        } else {
+          _showFeedback('error', '<i class="fa fa-warning"></i> ' + response, cartForm);
+          _enableElement(addToCartButton);
+          _setText(addToCartButton, Config.labels.addToCart);
+        }
+      };
+
+      const _toAddRequest = function (cartForm, livestreamId) {
+        let item = {
+          id: _getProductVariantId(cartForm),
+          quantity: 1,
+        };
+        if (livestreamId) {
+          const properties = {};
+          properties['__livestream_id__' + livestreamId] = '';
+          item = Object.assign(item, {
+            properties: properties
+          });
+        }
+        return {
+          items: [
+            item
+          ]
+        };
+      };
+
+      const _isMerchTableProduct = function (productId, livestreamId) {
+        const singleHost = _loadSingleHost();
+        if (!singleHost) {
+          return Promise.resolve({found: false});
+        }
+        if (Config.livestream) {
+          return Promise.resolve({found: true});
+        }
+        if (!livestreamId) {
+          return Promise.resolve({found: false});
+        }
+        const url = ['/apps', 'single', 'v1', 'external', 'merch-table', 'search'].join("/");
+        return fetch(url, {
+          method: 'POST',
+          cache: 'no-cache',
+          credentials: 'same-origin',
+          headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json'
+          },
+          body: JSON.stringify({
+            productId: productId.toString(),
+            livestreamId: livestreamId
+          }),
+        });
+      };
+
+      const _addItemToCart = function (cartForm, livestreamId) {
+        const request = _toAddRequest(cartForm, livestreamId);
+        return fetch(Config.uri.add, {
+          method: 'POST',
+          cache: 'no-cache',
+          credentials: 'same-origin',
+          headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json'
+          },
+          body: JSON.stringify(request),
+        });
+      };
+
+      const _init = function () {
+        $(document).ready(function () {
+          // register add to cart function
+          $(Config.selectors.addToCartForm).submit(function (e) {
+            e.preventDefault();
+            const cartForm = $(this);
+            const addToCartButton = _getAddToCartButton(cartForm);
+            _setText(addToCartButton, Config.labels.adding);
+            _disableElement(addToCartButton);
+            const productId = _getProductId(cartForm);
+            const livestreamId = _loadLivestreamId();
+            _isMerchTableProduct(productId, livestreamId)
+                    .then(response => {
+                      if (response.found !== undefined) {
+                        return _addItemToCart(cartForm, response.found ? livestreamId : null);
+                      } else if (!response.ok) {
+                        return _addItemToCart(cartForm, null);
+                      } else {
+                        return response.json()
+                                .then((resp) => {
+                                  const found = !!resp && resp.found;
+                                  return _addItemToCart(cartForm, found ? livestreamId : null);
+                                });
+                      }
+                    })
+                    .then(response => {
+                      if (response.ok) {
+                        return response.json();
+                      }
+                      return Promise.reject(response);
+                    })
+                    .then(response => _addToCartSuccess(response, addToCartButton, cartForm))
+                    .catch(response => {
+                      return response.json()
+                              .then(resp => _addToCartError(resp, addToCartButton, cartForm));
+                    });
+            return false;
+          });
+          // store livestream ID
+          _saveLivestreamId();
+          _saveSingleHost();
+        });
+      };
+      return {
+        init: function (params) {
+          // Configuration
+          params = params || {};
+          // Merging with defaults.
+          $.extend(Config, params);
+          // Action
+          $(function () {
+            _init();
+          });
+        },
+        getConfig: function () {
+          return Config;
+        }
+      }
+    })(jQuery);
+
+    Shopify.AjaxifyCart.init();
+
+  });
+</script>
diff --git a/snippets/single-footer-player.liquid b/snippets/single-footer-player.liquid
new file mode 100644
index 00000000000..90b11d6c159
--- /dev/null
+++ b/snippets/single-footer-player.liquid
@@ -0,0 +1,207 @@
+<style>
+  body {
+    padding-bottom: 90px;
+  }
+
+  .single-footer-player {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: black;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1em;
+    line-height: 1;
+    font-size: 16px;
+    gap: 1em;
+    z-index: 2;
+  }
+
+  .col {
+    display: inline-flex;
+    gap: 1em;
+    align-items: center;
+  }
+
+  .col-1_4 {
+    width: 25%;
+  }
+
+  .col-2_4 {
+    width: 75%;
+  }
+
+  .justify-end {
+    justify-content: flex-end;
+  }
+
+  .thumbnail {
+    line-height: 1;
+  }
+
+  .thumbnail img {
+    border-radius: 4px;
+    height: 60px;
+    width: 60px;
+  }
+
+  .track-info {
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+  .track-title {
+    font-weight: bolder;
+    margin-bottom: .25em;
+  }
+
+  .track-artist {
+    font-size: .75em;
+    opacity: .75;
+  }
+
+  .small {
+    font-size: .75em;
+  }
+
+  .track-meta {
+    margin-top: .75em;
+  }
+
+  .divider,
+  .remaining {
+    opacity: .5;
+    font-size: .75em
+  }
+
+  .track-waveform {
+    flex-grow: 1;
+  }
+
+  .player-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: .25em;
+    font-size: 24px;
+  }
+
+  .play {
+    font-size: 1.5em;
+    cursor: pointer;
+  }
+
+  .player-controls .prev,
+  .player-controls .next,
+  .single-track-add-to-cart {
+    cursor: pointer;
+  }
+
+  @media screen and (max-width: 750px) {
+    body {
+      padding-bottom: 150px;
+    }
+
+    .single-footer-player {
+      flex-direction: column;
+    }
+
+    #main_info {
+      display: flex;
+      width: 100%;
+      flex-basis: 100%;
+    }
+
+    #waveform {
+      display: none;
+    }
+
+    .col-2_4 {
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .track-details,
+    .track-purchase {
+      flex-basis: 30%;
+    }
+
+    .player-controls {
+      flex-grow: 1;
+      justify-content: center;
+      gap: .5em;
+    }
+
+    .track-info {
+      font-size: .8em;
+    }
+
+    .thumbnail img {
+      height: 30px;
+      width: 30px;
+    }
+
+  }
+</style>
+
+<div class="single-footer-player">
+  <div class="col col-1_4"
+       id="main_info">
+    <div class="thumbnail">
+      <img src="{{ product.featured_image.src | img_url: '120x120' }}" />
+    </div>
+    <div class="track-info">
+      <span class="track-title">Track Title</span>
+      <span class="track-artist">Artist Name</span>
+    </div>
+  </div>
+
+  <div class="col col-2_4">
+
+    <div id="waveform"
+         class="track-waveform">
+    </div>
+
+    <div class="track-details small">
+      <div class="track-time">
+        <span class="elapsed">00:00</span>
+        <span class="divider">/ </span>
+        <span class="remaining">00:00</span>
+      </div>
+      <div class="track-meta"
+           style="display:none;">
+        <span class="track-tuning">C#</span>
+        <span style="opacity: .25;">•</span>
+        <span class="track-bpm">126bpm</span>
+      </div>
+    </div>
+
+    <div class="player-controls">
+      <span class="prev material-icons">
+        skip_previous
+      </span>
+      <span class="play material-icons"
+            id="playPause">
+        <span id="play">play_circle_outline</span>
+        <span id="pause"
+              style="display: none;">pause_circle_outline</span>
+      </span>
+      <span class="next material-icons">
+        skip_next
+      </span>
+    </div>
+
+    <div class="track-purchase">
+      <div class="single-track-add-to-cart single-footer-add-to-cart">
+        <div class="single-track-btn">
+          <i class="material-icons">add_shopping_cart</i>
+          <span>$0.99</span>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/snippets/single-progress-bar.liquid b/snippets/single-progress-bar.liquid
new file mode 100644
index 00000000000..d69d85abb35
--- /dev/null
+++ b/snippets/single-progress-bar.liquid
@@ -0,0 +1,74 @@
+<style>
+    #inventory {
+        margin-bottom:4em;
+    }
+    #inventory h3 {
+        margin-bottom: .5em;
+    }
+    .inventory-bar{
+        background:#eeeeee;
+        width:100%;
+        border-radius: 30px;
+        overflow: hidden;
+    }
+    .filler {
+        background: rgb(129,38,180);
+        background: linear-gradient(130deg, rgba(231,63,139,1) 0%, rgba(129,38,180,1) 100%);    text-align: center;
+        text-indent: 5px;
+        color: white;
+        font-size: .75em;
+    }
+
+    #powered {
+        display: flex;
+        justify-content: end;
+    }
+
+    .by {
+        font-size: .75em;
+        font-weight: bolder;
+        letter-spacing: 0;
+    }
+</style>
+
+{% for variant in product.variants %}
+    {% if variant.metafields.single_nft['is_nft'] == 'true' %}
+        {% assign available = variant.inventory_quantity %}
+        {% assign total_inventory = variant.metafields.single_nft['product_supply'] %}
+    {% endif %}
+{% endfor %}
+{% assign claimed_count = total_inventory | minus: available %}
+{% assign denom = total_inventory | times: 1.0 %}
+{% assign bar_width = claimed_count | divided_by: denom | times: 100 | round: 2 %}
+
+{% if total_inventory > 0 %}
+
+    <div id="inventory">
+        <h3>{{ available }} of {{ total_inventory }} available</h3>
+        {% for variant in product.variants %}
+            <div class="inventory-item">
+                <div class="inventory-bar">
+                    <div class="filler">
+                        <span>{{ bar_width }}%</span>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+
+    {% if variant.inventory_quantity == 0 %}
+        <style>
+            .filler {
+                background: none;
+                color: black;
+            }
+        </style>
+    {% else %}
+        <style>
+            .filler {
+                width: {{ bar_width }}%;
+            }
+        </style>
+    {% endif %}
+
+{% endif %}
\ No newline at end of file
diff --git a/snippets/single-track.liquid b/snippets/single-track.liquid
new file mode 100644
index 00000000000..e2cfd1e185c
--- /dev/null
+++ b/snippets/single-track.liquid
@@ -0,0 +1,161 @@
+{% comment %}
+  <!--
+  Copyright (c) 2021 Single, LLC - ALL RIGHTS RESERVED
+
+  NOTICE:  All information contained herein is, and remains the property of Single, LLC
+  and its suppliers, if any. The intellectual and technical concepts contained herein are
+  proprietary to Single, LLC and its suppliers and may be covered by U.S. and Foreign Patents,
+  patents in process, and are protected by trade secret or copyright law. Dissemination of this
+  information or reproduction of this material is strictly forbidden unless prior
+  written permission is obtained from Single, LLC.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+  -->
+{% endcomment %}
+
+{% capture trackReleaseDateString %}{{ track.metafields.track.release_date }}{% endcapture %}
+{% assign trackDateParts =  trackReleaseDateString | split: "/" %}
+{% capture trackReleaseDateFormatted -%}
+  {{- trackDateParts[2] }}-{{ trackDateParts[0] }}-{{ trackDateParts[1] -}}
+{%- endcapture %}
+{% assign trackReleaseDate = trackReleaseDateFormatted | date: "%s" | plus: 0 %}
+{% capture trackOnSale -%}
+  {%- if trackReleaseDate <= now %}true{% endif -%}
+{%- endcapture %}
+{% capture previewAvailable -%}
+  {%- if track.metafields.track.preview == "true" %}true{% endif -%}
+{%- endcapture %}
+{% assign previewLink = track.metafields.track.preview_link %}
+{% capture albumOnly -%}
+  {%- if track.metafields.track.album_only == "true" %}true{% endif -%}
+{%- endcapture %}
+{% capture previewClickEvent -%}
+  {%- if trackOnSale == "true" and previewAvailable == "true" -%}
+    onclick="togglePlayingTrack('{{ track.id }}', '{{ previewLink }}')"
+  {%- endif -%}
+{%- endcapture %}
+{% capture trackTime -%}
+  {%- if track.metafields.track.track_time != '' -%}
+    <span>{{ track.metafields.track.track_time }}</span>
+  {%- endif -%}
+{%- endcapture %}
+{% capture previewClass -%}
+  {%- if previewAvailable == "true" %} single-track-preview{% endif -%}
+{%- endcapture %}
+{% capture availableClass -%}
+  {%- if trackOnSale == "true" %} single-track-available{% endif -%}
+{%- endcapture %}
+{% assign tuning = track.metafields.track.tuning | default: 'C#' %}
+{% assign bpm = track.metafields.track.bpm | default: '126bpm' %}
+
+{% for variant in track.variants %}
+  {% if variant.available %}
+    {% if variant == track.selected_or_first_available_variant %}
+      {% assign track_variant = variant.id %}
+    {% endif %}
+  {% endif %}
+{% endfor %}
+
+{% if trackOnSale == "true" and previewAvailable == "true" %}
+  <a
+    class='single-track {{previewClass}} {{availableClass}}'
+    href=''
+    data-track-id='{{ track.id }}'
+    data-variant-id='{{ track_variant }}'
+    data-href=''
+    data-preview-link='{{ previewLink | escape }}'
+    data-tuning='{{ tuning | escape }}'
+    data-bpm='{{ bpm | escape }}'
+    data-title='{% if track.metafields.track.featured_artist_names %}{{ track.title }} (feat. {{track.metafields.track.featured_artist_names}}){% else %}{{ track.title | escape }}{% endif %}'
+    data-artist='{{ product.metafields.album.artist_name | escape }}'
+    data-price='{{ track.price | money }}'
+  >
+    <div
+      class='single-track-play'
+      data-href=''
+      data-track-id='{{ track.id }}'
+      data-variant-id='{{ track_variant }}'
+      data-preview-link='{{ previewLink | escape }}'
+      data-tuning='{{ tuning | escape }}'
+      data-bpm='{{ bpm | escape }}'
+      data-title='{% if track.metafields.track.featured_artist_names %}{{ track.title }} (feat. {{track.metafields.track.featured_artist_names}}){% else %}{{ track.title | escape }}{% endif %}'
+      data-artist='{{ product.metafields.album.artist_name | escape }}'
+      data-price='{{ track.price | money }}'
+    >
+      {% if trackOnSale == "true" and previewAvailable == "true" %}
+        <span class='single-play-icon'>
+          <i class='material-icons'>play_circle_outline</i>
+        </span>
+      {% endif %}
+    </div>
+
+    <div class='single-track-title'>
+      {% if track.metafields.track.featured_artist_names %}
+        <span>{{ track.title }} (feat. {{ track.metafields.track.featured_artist_names }})</span>
+      {% else %}
+        <span>{{ track.title }}</span>
+      {% endif %}
+    </div>
+
+    {% if trackOnSale == "true" and previewAvailable == "true" %}
+      <div class='single-track-time'>
+        {{ trackTime }}
+      </div>
+    {% endif %}
+
+    {% if track.metafields.track.album_only == "true" or trackOnSale != "true" %}
+      <!-- If Album Only -->
+    {% else %}
+      {% if presale != "true" or trackOnSale == "true" %}
+        <div
+          class='single-track-add-to-cart'
+          data-variant-id='{{ track_variant }}'
+          data-track-id='{{ track.id }}'
+        >
+          <div class='single-track-btn'>
+            <i class='material-icons single-add-track-to-cart-icon-{{track.id}}'
+              >add_shopping_cart</i
+            >
+            <span>{{ track.price | money }}</span>
+          </div>
+        </div>
+      {% endif %}
+    {% endif %}
+  </a>
+{% else %}
+  <div class='single-track'>
+    <div class='single-track-title'>
+      {% if product.metafields.album.confidential_release_date == "true" and trackOnSale != "true" %}
+        <span style='opacity: .5;'>Track {{ track.metafields.track.track_order }}</span>
+      {% else %}
+        {% if track.metafields.track.featured_artist_names %}
+          <span>{{ track.title }} (feat. {{ track.metafields.track.featured_artist_names }})</span>
+        {% else %}
+          <span>{{ track.title }}</span>
+        {% endif %}
+      {% endif %}
+    </div>
+    {% if track.metafields.track.album_only == "true" or trackOnSale != "true" %}
+      <!-- Not For Individual Sale -->
+    {% else %}
+      <div
+        class='single-track-add-to-cart'
+        data-variant-id='{{ track_variant }}'
+        data-track-id='{{ track.id }}'
+      >
+        <div class='single-track-btn'>
+          <i class='material-icons single-add-track-to-cart-icon-{{track.id}}'
+            >add_shopping_cart</i
+          >
+          <span>{{ track.price | money }}</span>
+        </div>
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/templates/page.single.nft-countdown.liquid b/templates/page.single.nft-countdown.liquid
new file mode 100644
index 00000000000..132f388b434
--- /dev/null
+++ b/templates/page.single.nft-countdown.liquid
@@ -0,0 +1,102 @@
+{% comment %}
+<!--
+Copyright (c) 2021 Single, LLC - ALL RIGHTS RESERVED
+
+NOTICE:  All information contained herein is, and remains the property of Single, LLC
+and its suppliers, if any. The intellectual and technical concepts contained herein are
+proprietary to Single, LLC and its suppliers and may be covered by U.S. and Foreign Patents,
+patents in process, and are protected by trade secret or copyright law. Dissemination of this
+information or reproduction of this material is strictly forbidden unless prior
+written permission is obtained from Single, LLC.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+-->
+{% endcomment %}
+
+{% comment %}
+<!-- Single Default Styles - Can be edited in assets/single.css -->
+{% endcomment %}
+{{ 'single-v4.css' | asset_url | stylesheet_tag }}
+{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
+
+{% assign page_handle = page.handle %}
+{% assign product_name = pages[page_handle].metafields.single_nft['product_name'] %}
+{% assign product_handle = pages[page_handle].metafields.single_nft['product_handle'] %}
+{% assign product_supply = pages[page_handle].metafields.single_nft['product_supply'] %}
+{% assign artwork = pages[page_handle].metafields.single_nft['artwork'] %}
+{% assign family = pages[page_handle].metafields.single_nft['family'] %}
+{% assign release_date = pages[page_handle].metafields.single_nft['release_date'] %}
+{% assign product = all_products[product_handle] %}
+
+<div class="single-grid {{ theme.name | handleize }}"
+     itemscope
+     itemtype="http://schema.org/Product">
+    <div class="single-grid-item">
+        <!-- Product Metatags -->
+        <meta itemprop="url" content="{{ shop.url }}{{ page.url }}">
+        <meta itemprop="image" content="{{ artwork }}">
+        <meta property="og:title" content="{{ product_name }}"/>
+        <meta property="og:image" content="{{ artwork }}"/>
+        <meta property="og:url" content="{{ shop.url }}{{ page.url }}"/>
+        <!-- Left Column-->
+        <div class="single-col single-col-l single-col-4">
+            <div class="single-album-art">
+                <img src="{{ artwork }}"
+                     alt="">
+            </div>
+        </div>
+        <!--End Left Column-->
+        <!--Right Column-->
+        <div class="single-col single-col-r single-col-8">
+            <div class="single-nft-countdown-data">
+                <div class="single-nft-title">
+                    <h1 itemprop="name">{{ product_name }}</h1>
+                    <p><i>{{ family }}</i></p>
+                </div>
+                <p>Available in:</p>
+                <h2 id="single_nft_countdown">
+                    <div id="single_nft_timer"></div>
+                </h2>
+                <p>Total supply:</p>
+                <h2>{{ product_supply }}</h2>
+            </div>
+            <div class="single-nft-page-content">
+                {{ page.content }}
+            </div>
+        </div>
+        <!-- End Right Column -->
+    </div>
+    <!-- End Inner Wrap -->
+</div>
+
+<script>
+    function forwardToProductPage() {
+        jQuery.getJSON('/products/{{ product_handle }}.js', function(product) {
+            window.location.href = "{{ shop.url }}/products/{{ product_handle }}"
+        });
+    }
+    const loadTime = new Date().getTime();
+    const countDownDate = new Date("{{ release_date }}").getTime();
+    const interval = setInterval(function () {
+        const now = new Date().getTime();
+        const distance = countDownDate - now;
+        if (distance < -5000) {
+            forwardToProductPage();
+        } else if (distance < 0) {
+            // Do nothing...redirect will happen momentarily
+        } else {
+            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+            document.getElementById("single_nft_timer").innerHTML = days + "d " + hours + "h "
+                + minutes + "m " + seconds + "s ";
+        }
+    }, 1000);
+</script>
\ No newline at end of file
diff --git a/templates/product.single.album.liquid b/templates/product.single.album.liquid
new file mode 100644
index 00000000000..d68bc9df734
--- /dev/null
+++ b/templates/product.single.album.liquid
@@ -0,0 +1,528 @@
+{% comment %}
+  <!--
+  Copyright (c) 2021 Single, LLC - ALL RIGHTS RESERVED
+
+  NOTICE:  All information contained herein is, and remains the property of Single, LLC
+  and its suppliers, if any. The intellectual and technical concepts contained herein are
+  proprietary to Single, LLC and its suppliers and may be covered by U.S. and Foreign Patents,
+  patents in process, and are protected by trade secret or copyright law. Dissemination of this
+  information or reproduction of this material is strictly forbidden unless prior
+  written permission is obtained from Single, LLC.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+  -->
+{% endcomment %}
+
+{% comment %}
+  <!-- Single Default Styles - Can be edited in assets/single-v2.scss.liquid -->
+{% endcomment %}
+{{ 'single-v4.css' | asset_url | stylesheet_tag }}
+
+{% comment %}
+  <!-- jQuery -->
+{% endcomment %}
+{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
+
+{% comment %}
+  <!-- Release Date Logic for Presale products -->
+{% endcomment %}
+{% capture releaseDateString %}{{ product.metafields.album.release_date }}{% endcapture %}
+{% assign dateParts = releaseDateString | split: "/" %}
+{% capture releaseDateFormatted -%}
+  {{- dateParts[2] }}-{{ dateParts[0] }}-{{ dateParts[1] -}}
+{%- endcapture %}
+{% assign releaseDate = releaseDateFormatted | date: "%s" | plus: 0 %}
+{% assign now = "now" | date: "%s" | plus: 0 %}
+{% capture presale -%}
+  {%- if releaseDate > now %}true{% endif -%}
+{%- endcapture %}
+
+<div
+  class='single-grid {{ theme.name | handleize }}'
+  itemscope
+  itemtype='http://schema.org/Product'
+>
+  <div class='single-grid-item'>
+    <!-- Product Metatags -->
+    <meta itemprop='url' content='{{ shop.url }}{{ product.url }}'>
+    <meta itemprop='image' content='{{ product.featured_image.src | img_url: 'grande' }}'>
+    <meta property='og:title' content='{{ product.title }}'>
+    <meta property='og:image' content='{{ product.featured_image.src | img_url: 'grande' }}'>
+    <meta property='og:url' content='{{ shop.url }}{{ product.url }}'>
+    <!-- Left Column -->
+    <div class='single-col single-col-l single-col-4'>
+      <div class='single-album-art'>
+        <img
+          src='{{ product.featured_image.src | img_url: 'grande' }}'
+          alt='{{ featured_img_alt }}'
+        >
+      </div>
+      {% if product.metafields.album.track_count > 1 %}
+        {% unless product.metafields.album.confidential_release_date == "true" %}
+          {% if presale == "true" %}
+            <div class='single-album-release-date'>
+              Pre-order: Expected {{ releaseDateFormatted | time_tag: '%B %d, %Y' }}
+            </div>
+            <div class='single-presale-note'>
+              Pre-order contents may change without notice. You'll receive items from this pre-order
+              as they become available.
+            </div>
+          {% else %}
+            <div class='single-album-release-date'>
+              <p>Release Date: {{ releaseDateFormatted | time_tag: '%B %d, %Y' }}</p>
+            </div>
+          {% endif %}
+        {% endunless %}
+        <div
+          class='single-album-description desktop-desc'
+          itemprop='description'
+        >
+          <p>Downloads include choice of MP3, WAV, or FLAC</p>
+          <p>{{ product.description }}</p>
+        </div>
+      {% endif %}
+    </div>
+    <!-- End Left Column -->
+    <!-- Right Column -->
+    <div class='single-col single-col-r single-col-8'>
+      <!-- Begin Single Header -->
+      <div class='single-album-header'>
+        <h1
+          class='single-album-title'
+          itemprop='name'
+        >
+          {% if product.metafields.album.featured_artist_names %}
+            <span>
+              {{- product.title }} (feat.
+              {{ product.metafields.album.featured_artist_names }})</span
+            >
+          {% else %}
+            <span>{{ product.title }}</span>
+          {% endif %}
+        </h1>
+        <p class='single-album-artist'>{{ product.metafields.album.artist_name }}</p>
+        {% if product.variants.size == 1 %}
+          <h3 class='single-album-price'>
+            {% if product.metafields.album.track_count == 1 %}
+              {% assign collection_key = product.metafields.album.collection_handle %}
+              {% assign track = collections[collection_key].products.first %}
+              {% capture trackTime -%}
+                {%- if track.metafields.track.track_time != '' -%}
+                  <span class='single-track-preview-timer'>
+                    {{- track.metafields.track.track_time -}}
+                  </span>
+                {%- endif -%}
+              {%- endcapture %}
+              {% capture previewAvailable -%}
+                {%- if track.metafields.track.preview == "true" %}true{% endif -%}
+              {%- endcapture %}
+              {% assign previewLink = track.metafields.track.preview_link %}
+              {% assign tuning = track.metafields.track.tuning | default: 'C#' %}
+              {% assign bpm = track.metafields.track.bpm | default: '120bpm' %}
+
+              {% for variant in track.variants %}
+                {% if variant.available %}
+                  {% if variant == track.selected_or_first_available_variant %}
+                    {% assign track_variant = variant.id %}
+                  {% endif %}
+                {% endif %}
+              {% endfor %}
+
+              {% if previewAvailable == "true" %}
+                <div id='playlist' style='display: inline-block'>
+                  <a
+                    class='single-track {{previewClass}} {{availableClass}}'
+                    href=''
+                    data-track-id='{{ track.id }}'
+                    data-variant-id='{{ track_variant }}'
+                    data-href=''
+                    data-preview-link='{{ previewLink | escape }}'
+                    data-tuning='{{ tuning | escape }}'
+                    data-bpm='{{ bpm | escape }}'
+                    data-title='{% if track.metafields.track.featured_artist_names %}{{ track.title }} (feat. {{track.metafields.track.featured_artist_names}}){% else %}{{ track.title | escape }}{% endif %}'
+                    data-artist='{{ product.metafields.album.artist_name | escape }}'
+                    data-price='{{ track.price | money }}'
+                    style='display: inline-block'
+                  >
+                    <span
+                      class='single-album-track-play'
+                      data-track-id='{{ track.id }}'
+                      data-variant-id='{{ track_variant }}'
+                      data-href=''
+                      data-preview-link='{{ previewLink | escape }}'
+                      data-tuning='{{ tuning | escape }}'
+                      data-bpm='{{ bpm | escape }}'
+                      data-title='{% if track.metafields.track.featured_artist_names %}{{ track.title }} (feat. {{track.metafields.track.featured_artist_names}}){% else %}{{ track.title | escape }}{% endif %}'
+                      data-artist='{{ product.metafields.album.artist_name | escape }}'
+                      data-price='{{ track.price | money }}'
+                    >
+                      <i class='material-icons'>play_circle_outline</i>
+                    </span>
+                  </a>
+                </div>
+              {% endif %}
+            {% endif %}
+            <span>{{ product.variants.first.price | money }}</span>
+            <span class='single-track-time'>{{ trackTime }}</span>
+          </h3>
+        {% endif %}
+        <meta itemprop='priceCurrency' content='{{ shop.currency }}'>
+        <!-- Add to Cart -->
+        {% form 'product', product %}
+          {% if product.variants.size > 1 %}
+            <div class='single-field-label'>Select Format</div>
+            <select
+              name='id'
+              class='single-select-field'
+            >
+              {% for variant in product.variants %}
+                {% if variant.available == true %}
+                  <option value='{{variant.id}}'>
+                    {{ variant.title }} - {{ variant.price | money }}
+                  </option>
+                {% else %}
+                  <option disabled='disabled'>{{ variant.title }} - sold out!</option>
+                {% endif %}
+              {% endfor %}
+            </select>
+          {% else %}
+            <input
+              name='id'
+              value='{{ product.variants.first.id }}'
+              type='hidden'
+            >
+          {% endif %}
+          <div class='single-album-add-to-cart'>
+            <button
+              type='submit'
+              name='add'
+              id='AddToCart'
+              class='btn btn--secondary-accent button button--secondary'
+            >
+              <span id='AddToCartText'
+                >Add{% if presale == "true" %} Pre-order{% endif %} to Cart</span
+              >
+            </button>
+            {{ form | payment_button }}
+          </div>
+        {% endform %}
+      </div>
+      <!-- End Single Header -->
+      <!-- Begin Tracklist -->
+      {% assign collection_key = product.metafields.album.collection_handle %}
+      {% assign products = collections[collection_key].products %}
+      {% capture productsExist -%}
+        {%- if products != '' and products.length != 0 %}true{% endif -%}
+      {%- endcapture %}
+      {% if product.metafields.album.track_count != 1 and productsExist == 'true' %}
+        <div
+          id='playlist'
+          class='single-tracklist'
+        >
+          {% for track in products %}
+            {% if track.type == 'Digital Track' %}
+              {% include 'single-track' with track %}
+            {% endif %}
+          {% endfor %}
+        </div>
+      {% endif %}
+      <!-- End Tracklist -->
+      <!-- Single Track Info -->
+      {% if product.metafields.album.track_count == 1 %}
+        {% unless product.metafields.album.confidential_release_date == "true" %}
+          {% if presale == "true" %}
+            <div class='single-album-release-date'>
+              Pre-order: Expected {{ releaseDateFormatted | time_tag: '%B %d, %Y' }}
+            </div>
+            <div class='single-presale-note'>
+              Pre-order contents may change without notice. You'll receive items from this pre-order
+              as they become available.
+            </div>
+          {% else %}
+            <div class='single-album-release-date'>
+              <p>Release Date: {{ releaseDateFormatted | time_tag: '%B %d, %Y' }}</p>
+            </div>
+          {% endif %}
+        {% endunless %}
+        <div
+          class='single-album-description desktop-desc'
+          itemprop='description'
+        >
+          <p>Downloads include choice of MP3, WAV, or FLAC</p>
+          <p>{{ product.description }}</p>
+        </div>
+      {% endif %}
+      <!-- Mobile Description -->
+      <div
+        class='single-album-description mobile-desc'
+        itemprop='description'
+      >
+        <p>Downloads include choice of MP3, WAV, or FLAC</p>
+        <p>{{ product.description }}</p>
+      </div>
+    </div>
+    <!-- End Right Column -->
+  </div>
+  <!-- End Inner Wrap -->
+</div>
+<!-- End Product Wrap -->
+
+<!-- Footer Player -->
+{% for track in products %}
+  {% capture trackReleaseDateString %}{{ track.metafields.track.release_date }}{% endcapture %}
+  {% assign trackDateParts =  trackReleaseDateString | split: "/" %}
+  {% capture trackReleaseDateFormatted -%}
+    {{- trackDateParts[2] }}-{{ trackDateParts[0] }}-{{ trackDateParts[1] -}}
+  {%- endcapture %}
+  {% assign trackReleaseDate = trackReleaseDateFormatted | date: "%s" | plus: 0 %}
+  {%- if trackReleaseDate <= now %}
+    {%- if track.metafields.track.preview == "true" %}
+      {% assign enablePlayer = "true" %}
+    {% endif -%}
+  {% endif -%}
+{% endfor %}
+
+{% if enablePlayer == "true" %}
+  {% include 'single-footer-player' %}
+  <script src='https://unpkg.com/wavesurfer.js'></script>
+  <script>
+    var singleAlbumPlayer = {
+      // Declare vars
+      links: document.querySelectorAll('#playlist a'),
+      currentTrack: 0,
+      currentTrackData: false,
+      hasLoaded: false,
+      wavesurfer: WaveSurfer.create({
+        container: '#waveform',
+        waveColor: 'rgba(255,255,255,.25)',
+        progressColor: 'white',
+        height: '60',
+        barHeight: '1',
+        barWidth: '3',
+        barRadius: 3,
+        cursorWidth: 1,
+        mediaControls: 'true',
+        responsive: 'true',
+        hideScrollbar: 'true'
+      }),
+
+      addEventListeners: function addEventListeners() {
+        var self = this;
+
+        // Transform URLs
+        // Add play button event listeners
+        Array.prototype.forEach.call(this.links, function (link, index) {
+        if(link.dataset.previewLink !== '') {
+          // set the actual preview link
+          $.ajax({
+            url: link.dataset.previewLink,
+            dataType: 'text',
+            type: 'GET',
+            success: function(previewURL) {
+              link.dataset.href = previewURL
+
+              var parentLink = link.parentElement
+              if(parentLink && parentLink.href) {
+                parentLink.href = previewURL
+              }
+
+              link.addEventListener('click', function (e) {
+                e.preventDefault();
+                self.setCurrentSong(index);
+              });
+
+              if(index == 0) {
+                // Load the first track
+                self.setCurrentSong(0);
+              }
+            },
+            error: function(XMLHttpRequest) {
+              console.log('Error playing track');
+            }
+          })
+        }
+      });
+
+        // playPause
+        document.querySelector('#playPause').addEventListener('click', function () {
+          self.wavesurfer.playPause();
+        });
+
+        // prev/next watchers
+        document.querySelector('.player-controls .prev').addEventListener('click', function() {
+          self.setCurrentSong((self.currentTrack - 1) <= 0 ? (self.links.length - 1) : (self.currentTrack - 1));
+        });
+
+        document.querySelector('.player-controls .next').addEventListener('click', function() {
+          self.setCurrentSong((self.currentTrack + 1) > (self.links.length - 1) ? 0 : (self.currentTrack + 1));
+        });
+
+        // individual product atc
+        var atcs = document.querySelectorAll('.single-tracklist .single-track-add-to-cart')
+        atcs.forEach(function(atc) {
+          atc.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            var variantId = atc.dataset.variantId;
+            var trackId = atc.dataset.trackId;
+            self.addTrackToCart(variantId, trackId);
+          });
+        });
+
+        //add to cart watcher
+        document.querySelector('.single-footer-add-to-cart').addEventListener('click', function() {
+          self.addTrackToCart(self.currentTrackData.variantId, self.currentTrackData.trackId);
+        });
+      },
+
+      addWavesurferListeners: function addWavesurferListeners() {
+        var self = this;
+
+        // Toggle play/pause text
+        this.wavesurfer.on('play', function () {
+          document.querySelector('#play').style.display = 'none';
+          document.querySelector('#pause').style.display = '';
+
+          var playlistIcons = document.querySelectorAll('#playlist .single-play-icon i');
+          if(playlistIcons.length > 0) {
+            Array.prototype.forEach.call(playlistIcons, function (icon, index) {
+              icon.innerHTML = 'play_circle_outline';
+            });
+          }
+
+          var trackId = self.currentTrackData.trackId;
+          var playPauseInline = document.querySelector('[data-track-id="' + trackId + '"] .single-play-icon i')
+          if(playPauseInline) playPauseInline.innerHTML = 'pause_circle_outline'
+        });
+
+        this.wavesurfer.on('pause', function () {
+          document.querySelector('#play').style.display = 'block';
+          document.querySelector('#pause').style.display = 'none';
+
+          var playlistIcons = document.querySelectorAll('#playlist .single-play-icon i')
+          if(playlistIcons.length > 0) {
+            Array.prototype.forEach.call(playlistIcons, function (icon, index) {
+              icon.innerHTML = 'play_circle_outline';
+            });
+          }
+        });
+
+        // When wavesurfer loads a new track
+        this.wavesurfer.on('audioprocess', function() {
+          var totalTime = self.wavesurfer.getDuration(),
+              currentTime = self.wavesurfer.getCurrentTime();
+
+          if (self.wavesurfer.isPlaying()) {
+            document.querySelector('.track-time .elapsed').innerHTML = self.toHHMMSS(currentTime);
+            document.querySelector('.track-time .remaining').innerHTML = self.toHHMMSS(totalTime);
+          }
+        });
+
+        // Update time on seek
+        this.wavesurfer.on('seek', function (position) {
+          document.querySelector('.track-time .elapsed').innerHTML = self.toHHMMSS(self.wavesurfer.getCurrentTime());
+        });
+
+        // Play on audio load
+        this.wavesurfer.on('ready', function () {
+          if(self.hasLoaded) {
+            self.wavesurfer.play();
+          } else {
+            self.hasLoaded = true;
+          }
+
+          document.querySelector('.track-time .elapsed').innerHTML = '00:00';
+          document.querySelector('.track-time .remaining').innerHTML = self.toHHMMSS(self.wavesurfer.getDuration());
+        });
+
+        this.wavesurfer.on('error', function (e) {
+          console.warn(e);
+        });
+
+        // Go to the next track on finish
+        this.wavesurfer.on('finish', function () {
+          self.setCurrentSong((self.currentTrack + 1) % self.links.length);
+        });
+      },
+
+      setCurrentSong: function setCurrentSong(index) {
+        if(index != this.currentTrack || !this.hasLoaded) {
+          this.links[this.currentTrack].classList.remove('active');
+
+          this.currentTrack = index;
+          this.currentTrackData = this.links[this.currentTrack].dataset;
+
+          var atcButtonIcon = document.querySelector('.single-footer-player .single-track-add-to-cart .single-track-btn')
+          atcButtonIcon.innerHTML = '<i class="material-icons single-add-track-to-cart-icon-' + this.currentTrackData.trackId + '">add_shopping_cart</i><span>$0.99</span>';
+
+          this.links[this.currentTrack].classList.add('active');
+
+          document.querySelector('.track-title').innerHTML = this.currentTrackData.title;
+          document.querySelector('.track-artist').innerHTML = this.currentTrackData.artist;
+          document.querySelector('.track-tuning').innerHTML = this.currentTrackData.tuning;
+          document.querySelector('.track-bpm').innerHTML = this.currentTrackData.bpm;
+          document.querySelector('.single-footer-add-to-cart span').innerHTML = this.currentTrackData.price;
+
+          this.wavesurfer.load(this.currentTrackData.href);
+        } else {
+          this.wavesurfer.playPause();
+        }
+      },
+
+      // Add track to cart
+      addTrackToCart: function addTrackToCart(variantId, trackId, e) {
+        if(e) { e.preventDefault(); e.stopPropagation(); }
+
+        $.post('/cart/add.json', { quantity: 1, id: variantId },
+          function (variant) {
+            var els = $('.single-add-track-to-cart-icon-' + trackId);
+            els.each(function(i) {
+              $(this).replaceWith('<a href="/cart"><i class="material-icons animated pulse">check_circle</i></a>');
+            });
+
+            $.get('/cart.json', function (cart) {
+              var cartElem = $('.cart-count-bubble');
+              if (!cartElem) {
+                return;
+              }
+              cartElem.find('span:first-of-type').text(cart.item_count);
+              cartElem.find('span:last-of-type').text(cart.item_count + ' items');
+
+            });
+          }).fail(function () {
+            {% comment %} // This happens if track fails to add. --> {% endcomment %}
+            alert('Failed to add track to cart!');
+          });
+      },
+
+      // Format time
+      toHHMMSS: function toHHMMSS(secs) {
+        var sec_num = parseInt(secs, 10)
+        var hours   = Math.floor(sec_num / 3600)
+        var minutes = Math.floor(sec_num / 60) % 60
+        var seconds = sec_num % 60
+
+        return [hours,minutes,seconds]
+            .map(v => v < 10 ? "0" + v : v)
+            .filter((v,i) => v !== "00" || i > 0)
+            .join(":")
+      },
+
+      init: function() {
+        this.addEventListeners()
+        this.addWavesurferListeners()
+      }
+    }
+
+    singleAlbumPlayer.init()
+  </script>
+{% endif %}
+
+{% include 'single-ajaxify-album' %}