publikator-boombox/_layouts/post.html

---
layout: default
---
{% if page.category == 'releases' %}
<script src="{{ relBase }}/assets/js/jquery-3.5.1.min.js"></script>
{% include header.html %}

<section id="play">
 <div class="album-player">

<!-- HERE BEGINS MADNESS -->

{% for album in site.albums %}
{% if page.album == album.slug %}
{% assign onetracker = album.tracks | size %}
<div class="player-wrap">

  <div id="plwrap">
    <h2>Track list</h2>
    <ul id="plList">
      {% for track in album.tracks %}
      <li class="" {% if onetracker == 1 %}style="border-radius: 5px;"{% endif %}>
        <div class="plItem">
          <div class="plNum">{{ track.common.track.no }}.</div>
          <div class="plTitle">{{ track.common.title }}</div>
          <div class="plLength">
            {% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}
          </div>
        </div>
      </li>
      {% endfor %}
    </ul>
  </div>
</div>
<div class="noJSalbum">
  <div class="coverartwrapper">
    <div class="coverartwrapped" style="background-image: url({{ page.image }});"></div>
  </div>
  {% for track in album.tracks %}

  <div class="plItem">
    <div class="plNum">{{ track.common.track.no }}.</div>
    <div class="plTitle"><a href="{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.mp3" target="_blank"
      rel="noopener">{{ track.common.title }} </a></div>
    <div class="plLength">
      {% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}
    </div>
  </div>

  {% endfor %}

</div>


<div class="coverart">
  <div class="coverartwrapper">
    <div id="npImage" class="coverartwrapped"></div>
  </div>
  
  {% assign author_id = page.author | prepend: "/authors/" | append: "/" %}
  {% assign author = site.authors | where: "url", author_id | first %}
  <div id="author">
    <div class="bio">
      
      <p class="date">
        Published the
  
        <time datetime="{{ page.date }}">{% include dates.html %}</time>
      </p>
  
  
      <h6>
  
        Share this page:
      </h6>
      <ul>
        <a target="_blank" rel="nofollow noopener" title="Share to facebook" alt="Share to facebook" href="https://touch.facebook.com/sharer.php?u={{ site.url }}{{ page.url | xml_escape }}&quest;pk_campaign=homeshare&amp;quote={{ page.description | xml_escape }}%20By%20{{ site.title | xml_escape }}%20via%20{{ site.url }}" class="icon smaller fab fa-facebook-f"><span class="label">Facebook</span></a>
        <a target="_blank" rel="nofollow noopener" title="Share to twitter" alt="Share to twitter" href="https://twitter.com/share?url={{ site.url }}{{ page.url | xml_escape }}&quest;pk_campaign=homeshare&amp;text={{ page.description | xml_escape }}%20via%20&#64;{{ site.social.usernames.twitter }}%20&amp;hashtags=#{{ site.social.hashtag }}" class="icon smaller fab fa-twitter"><span class="label">Twitter</span></a>
        <a target="_blank" rel="nofollow noopener" title="Share to telegram" alt="Share to telgram" href="https://telegram.me/share/url?url={{ site.url }}{{ page.url }}&quest;pk_campaign=homeshare&amp;text={{ page.description | xml_escape }}%20via%20&#64;{{ site.social.usernames.telegram }}" class="icon smaller fab fa-telegram"><span class="label ">Telegram</span></a>
        <a target="_blank" rel="nofollow noopener" title="Share to reddit" alt="Share to reddit" href="https://reddit.com/submit/?url={{ site.url }}{{ page.url }}&quest;pk_campaign=homeshare&amp;title={{ page.description | xml_escape }}%20By%20{{ site.title | xml_escape }}" class="icon smaller fab fa-reddit"><span class="label">Reddit</span></a>
      </ul>
      <a href="{{ relBase }}/chat/#read" target="_blank" class="button">📢 Chat</a>
  
  
    </div>
  </div>
</div>
</div>
</section>
<section class="info">
  <div class="container">
  {{ content }}
  {% if page.link %}
  <p class="center">

    <a href="{{ page.link.url }}?ref=TheMusicSyndicateWashere" target="_bank" rel="noopener" class="button">{% if page.link.buttontext %}{{ page.link.buttontext }}{% else %}👀 check it out{% endif %}</a>


  </p>
  {% endif %}
  </div>
</section>
<div id="fixedPlayer" class="showplayer hideplayer">
  <div id="audiowrap">

    <div id="audio0">
      <audio id="audio1" preload="metadata" controls="controls">
        Your browser does not support HTML5 Audio!
      </audio>
    </div>

  </div>
  <div id="nowPlay">

    {% if onetracker > 1 %}
    <div id="tracks">
      <a id="btnPrev"><span class="fas fa-fast-backward"></span></a>
      <a id="btnNext"><span class="fas fa-fast-forward"></span></a>
    </div>
    {% endif %}
    <p class="right" id="npTitle" style="font-weight: bold;"></p>
    <p class="left" id="npAction">Paused...</p>
  </div>

</div>
{% include streamer.html %}

{% if onetracker > 1 %}
  <!-- Tracks -->
{% for track in album.tracks %}

<section class="track-picker">
  <div class="full-image" style="background-image:url({{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.jpeg);">
  </div>
  <div>
    <h2>{{ track.common.title }}</h2>
    <p>
      {% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}
   | <strong>{{ track.common.genre }}</strong></p>
      <p>{{ track.common.year }}</p>
    <p><a href="{{ relBase }}/{{ track.slug }}/" class="button">🔊 Play</a></p>
    {% if track.all.UNSYNCEDLYRICS and track.all.USLT %}

      <p>
        {{ track.all.USLT.text | newline_to_br }}
      </p>

    {% elsif track.all.USLT and track.all.UNSYNCEDLYRICS == nil %}

      <p>
        {{ track.all.USLT.text | newline_to_br }}
      </p>

    {% elsif track.all.UNSYNCEDLYRICS and track.all.USLT == nil %}

      <p>
        {{ track.all.UNSYNCEDLYRICS | newline_to_br }}
      </p>

    {% elsif track.all.lyrics %}

      <p>
        {{ track.all.lyrics | newline_to_br }}
      </p>

    {% endif %}
  </div>
</section>

{% endfor %}

  <!-- END Tracks -->
{% endif %}

  {% break %} {% endif %} {% endfor %}
  <!-- HERE ENDS MADNESS -->

<!-- post Naviation -->
<section class="post-navigation">
  {% if page.previous.url or page.next.url %}
  <div class="container">
    <div class="post-nav">
      {% if page.previous.url %}
      <h4><a href="{{ relBase }}{{ page.previous.url }}" alt="Read {{ page.previous.title }}"
        title="Read {{ page.previous.title }}"><span class="fas fa-arrow-left"
        style="font-size:3em;text-decoration: none;"></span></a></h4>
      <h3>{{ page.previous.title }}</h3>
      <p>{{ page.previous.description }}</p>
      {% endif %}
    </div>
    <div class="post-nav-next">
      {% if page.next.url%}
      <h4><a href="{{ page.next.url }}"><span class="fas fa-arrow-right" style="font-size:3em;"></span></a></h4>
      <h3>{{ page.next.title }}</h3>
      <p>{{ page.next.description }}</p>
      {% endif %}
    </div>
  </div>
  {% endif %}
</section>
<!-- End Post Navigation -->


  <script type="text/javascript">
    // html5media enables <video> and <audio> tags in all major browsers
    // External File: http://api.html5media.info/1.1.8/html5media.min.js


    // Add user agent as an attribute on the <html> tag...
    // Inspiration: http://css-tricks.com/ie-10-specific-styles/
    // var b = document.documentElement;
    // b.setAttribute('data-useragent', navigator.userAgent);
    // b.setAttribute('data-platform', navigator.platform);


    // HTML5 audio player + playlist controls...
    // Inspiration: http://jonhall.info/how_to/create_a_playlist_for_html5_audio
    // Mythium Archive: https://archive.org/details/mythium/
    jQuery(function ($) {
      var supportsAudio = !!document.createElement('audio').canPlayType;
      if (supportsAudio) {
        var index = 0,
          playing = false,
          mediaPath = '',
          extension = '',
          tracks = [{% for album in site.albums %}{% if page.album == album.slug %}{% for track in album.tracks %}{ 
            "track": {{ track.common.track.no }},
            "name": "{{ track.common.title }}",
            "length": "{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}",
            "file": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}",
            "image": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}"
          }{% unless forloop.last %},{% endunless %}{% endfor %}{% break %} {% endif %}{% endfor %}],
          trackCount = tracks.length,
          npAction = $('#npAction'),
          npTitle = $('#npTitle'),
          npImage = $('#npImage'),
          audio = $('#audio1').bind('play', function () {
            playing = true;
            npAction.text('Playing...');
            $('#fixedPlayer').removeClass('hideplayer');
            $("#npImage").addClass('spinnit');
          }).bind('pause', function () {
            playing = false;
            npAction.text('Paused...');
            
            $("#npImage").removeClass('spinnit');
          }).bind('ended', function () {
            npAction.text('Paused...');
            if ((index + 1) < trackCount) {
              index++;
              loadTrack(index);
              playTrack(index);
              audio.play();
            } else {
              audio.pause();
              index = 0;
              loadTrack(index);
            }
          }).get(0),
          btnPrev = $('#btnPrev').click(function () {
            if ((index - 1) > -1) {
              index--;
              loadTrack(index);
              playTrack(index);
              if (playing) {
                audio.play();
              }
            } else {
              audio.pause();
              index = 0;
              loadTrack(index);
            }
          }),
          btnNext = $('#btnNext').click(function () {
            if ((index + 1) < trackCount) {
              index++;
              loadTrack(index);
              playTrack(index);
              if (playing) {
                audio.play();
              }
            } else {
              audio.pause();
              index = 0;
              loadTrack(index);
            }
          }),
          li = $('#plList li').click(function () {
            var id = parseInt($(this).index());
            if (id !== index || playing == false) {
              playTrack(id);
            }else {
              audio.pause();
            }
            
          }),
          loadTrack = function (id) {

            npTitle.text(tracks[id].name);
            index = id;
            audio.src = mediaPath + tracks[id].file + extension;
            $('audio').attr("data-matomo-title", tracks[id].name);
            $("#npImage").attr('style', 'background-image:url(' + tracks[id].image + '.jpeg)');

            
  
          },
          playTrack = function (id) {
            $('.plSel').removeClass('plSel');
            $('#plList li:eq(' + id + ')').addClass('plSel');
            loadTrack(id);
            audio.play();

          };
        extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
        loadTrack(index);
      }
    });

  </script>


{% else %}
  {% include header.html %}
  
  <section class="info" id="read">
  
    <div class="info-pages">
  
      {{ content }}
      {% if page.link %}
      <p class="center">
   
        <a href="{{ page.link.url }}?ref=TheMusicSyndicateWashere" target="_bank" rel="noopener" class="button">{% if page.link.buttontext %}{{ page.link.buttontext }}{% else %}👀 check it out{% endif %}</a>


      </p>
      {% endif %}
      {% include author.html %}
    </div>
  </section>



<!-- post Naviation -->
<section class="post-navigation">
  {% if page.previous.url or page.next.url %}
  <div class="container">
  <div class="post-nav">
    {% if page.previous.url %}
    <h4><a href="{{ relBase }}{{ page.previous.url }}" alt="Read {{ page.previous.title }}" title="Read {{ page.previous.title }}"><span
      class="fas fa-arrow-left" style="font-size:3em;text-decoration: none;"></span></a></h4>
    <h3>{{ page.previous.title }}</h3>
    <p>{{ page.previous.description }}</p>
    {% endif %}
  </div>
  <div class="post-nav-next">
    {% if page.next.url%}
    <h4><a href="{{ page.next.url }}"><span class="fas fa-arrow-right" style="font-size:3em;"></span></a></h4>
    <h3>{{ page.next.title }}</h3>
    <p>{{ page.next.description }}</p>
    {% endif %}
  </div>
</div>
{% endif %}
</section>
{% endif %}