prepare radio page for event

_radio-backup.html

@@ -0,0 +1,153 @@
+---
+title: Basspistol Libre Radio
+subtitle: Radio CrashParty
+description: >-
+  Basspistol Radio Station! 777% without commercials! RobotDJ-sets and live
+  interventions! This is the sound of freedom.
+tags:
+  - radio
+  - basspistol
+  - live
+  - music
+  - broadcast
+  - stream
+video_path: /assets/vid/radio.mp4
+image: /assets/vid/radio.jpg
+layout: default
+---
+{% include relBase.html %}
+<script src="{{ relBase }}/assets/js/jquery-3.5.1.min.js"></script>
+<script type="text/javascript">
+  function getData() {
+    $.getJSON('https://radio.basspistol.com/status-json.xsl', function (json) {
+      output = "<h4>Now Playing: </h4>";
+      output += "<h3>" + json.icestats.source.title + "</h3>";
+      output += "<p style='font-size:14px;'>" + json.icestats.source.listeners + " peers are listening<br />";
+      document.getElementById("radioPlaceholder").innerHTML = output;
+    });
+  }
+  setInterval(getData, 7000);
+
+  $(function () {
+    getData();
+  });
+</script>
+<!-- Banner -->
+
+
+<div id="trackArt">
+  <section>
+    <div class="coverartwrapper">
+      <div class="coverartwrapped" id="coverart" style="background-image: url({{ page.image }});"></div>
+    </div>
+    <div class="playbutton hideWhenNoJS">
+      <a id="mu_pause" class="button">🎶 Play!</a>
+    </div>
+
+  </section>
+</div>
+<!-- Content -->
+<div id="trackInfo">
+  <section>
+    <h1>{{ page.title }}</h1>
+    <p>{{ page.description }} To enjoy the stream in your favorite player <a target="_blank" rel="noopener noreferrer"
+        href='https://radio.basspistol.com/radio.mp3.m3u'>click here</a></p>
+
+    <div id="radioPlaceholder"></div>
+    
+    <p><strong>Bellow is the list of all the generous artists making this radio possible.</strong> Some of them simply have no crib on the
+      internet. If you know that they now have a URL, if you somehow find a missing name or if you are featured on this
+      list but no longer wish to be, please <a href="/chat/#read">conact us ASAP.</a> Also feel free to contact us if
+      you think your music would fit in the radio!</p>
+    <h3>
+      {% assign sorted = site.data.radio | sort: 'name' %}
+      {% for artist in sorted %}
+      {% if artist.url %}
+      <a href="{{ artist.url }}" target="_blank" rel="noopener">{{ artist.name }}</a>
+      {% unless forloop.last %}-{% endunless %}
+      {% else %}
+      {{ artist.name }} {% unless forloop.last %}-{% endunless %}
+      {% endif %}
+      {% endfor %}
+    </h3>
+    <h2 style="text-align: left;">Chat with us!</h2>
+    <p><strong>Questions about the playlist? Requests? Want to submit tracks? Chat with us!<br /></strong>You do not
+      need to register to participate. This chat is public. <strong>We never ask you to submit credit-card (or any other
+        payment information) nor personal information.</strong> It is provided by kiwi via freenode. Read the privacy
+      policy of <a target="_blank" rel="noopener" href="https://kiwiirc.com/privacy">Kiwi</a> and <a target="_blank"
+        rel="noopener" href="https://freenode.net/policies">Freenode</a><br />Matrix user? <a
+        href="{{ site.social.irc.matrix }}" target="_blank" rel="noopener">Click here</a></p>
+    <div>
+    <iframe
+      src="https://kiwiirc.com/client/irc.freenode.net/?nick={{ site.social.irc.guest-nick }}|?&theme=cli{{ site.social.irc.channel }}"
+      style="border:0; width:100%; height:540px;"></iframe>
+    </div>
+
+    {% include author.html %}
+
+    <p class="noJSalbum"><a class="button" target="_blank" rel="noopener"
+        href="https://radio.basspistol.com/radio.mp3"><span class="fas fa-play"></span> Play!</a></p>
+
+  </section>
+  {% include footer.html %}
+  <!-- End Post Navigation -->
+</div>
+
+<!-- Audio player-->
+
+<div id="fixedPlayer" class="showplayer hideplayer">
+  <div id="audiowrap">
+    <div id="audio0">
+      <audio controls autoplay preload="none" data-matomo-title="Basspistol Radio">
+        <source src="https://radio.basspistol.com/radio.mp3" type="audio/mpeg" />
+        <h1>Your browser isn't ready for so much hotness. Use the download-link instead.</h1>.
+      </audio>
+    </div>
+  </div>
+  <div id="nowPlay">
+
+  </div>
+</div>
+
+<script type="text/javascript">
+
+  function loadUrl(newLocation) {
+    window.location = newLocation;
+    return false;
+  }
+
+  var mu = document.getElementsByTagName("audio")[0];
+  var pauseButton = document.getElementById("mu_pause");
+  var spincover = document.getElementById("coverart");
+  var fixedplayer = document.getElementById("fixedPlayer");
+
+  mu.addEventListener('ended', function () {
+    // only functional if "loop" is removed
+    mu.pause();
+    mu.currentTime = 0;
+    loadUrl("{{ relBase }}{{ page.next.url }}"); return false;
+  });
+  mu.onplaying = function () {
+    pauseButton.innerHTML = "⏯️ Pause";
+    fixedplayer.classList.remove("hideplayer");
+  };
+
+  pauseButton.addEventListener("click", function () {
+    if (mu.paused) {
+      mu.play();
+    }
+    else {
+      mu.pause();
+    }
+  });
+
+  mu.addEventListener('playing', function () {
+    spincover.classList.add("spinnit");
+    spincover.classList.remove("paused");
+  });
+  mu.addEventListener('pause', function () {
+    spincover.classList.add("paused");
+    pauseButton.innerHTML = "⏯️ Resume";
+  });
+
+</script>