fixing layout

_layouts/post.html

@@ -14,6 +14,7 @@ layout: default
 <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 %}>
@@ -242,6 +243,7 @@ layout: default
             if ((index - 1) > -1) {
               index--;
               loadTrack(index);
+              playTrack(index);
               if (playing) {
                 audio.play();
               }
@@ -255,6 +257,7 @@ layout: default
             if ((index + 1) < trackCount) {
               index++;
               loadTrack(index);
+              playTrack(index);
               if (playing) {
                 audio.play();
               }

_layouts/track.html

@@ -6,7 +6,7 @@ layout: default
 <!-- Banner -->
 
 
-<div id="trackArt" style="background-image:url({{ site.mediaurl }}/{{ page.slug }}.jpeg)">
+<div id="trackArt">
 <section>
   <div class="coverartwrapper">
     <div class="coverartwrapped" id="coverart" style="background-image: url({{ site.mediaurl }}/{{ page.slug }}.jpeg);"></div>
@@ -18,18 +18,6 @@ layout: default
   <br />{{ page.common.year }}
 </p>
 
-<p><strong><span id="tracktime"></span></strong><span id="trackDuration"></span></strong></p> 
-
-  <script type="text/javascript">
-    var trackDurationtimestamp = {{ page.format.duration | round }};
-    var trackDurationhours = Math.floor(trackDurationtimestamp / 60 / 60);
-    var trackDurationminutes = Math.floor(trackDurationtimestamp / 60) - (trackDurationhours * 60);
-    var trackDurationseconds = trackDurationtimestamp % 60;
-    var trackDurationformatted = trackDurationhours.toString().padStart(2, '0') + ':' + trackDurationminutes.toString().padStart(2, '0') + ':' + trackDurationseconds.toString().padStart(2, '0');
-    var theSpan = document.getElementById("trackDuration");
-    theSpan.innerHTML = trackDurationformatted;
-  </script>
-
 </section>
 </div>
 <!-- Content -->
@@ -37,7 +25,8 @@ layout: default
 <section>
 
   <h1 style="margin-top:80px">{{ page.common.title }}</h1>
- 
+  <p><strong>{% assign round_seconds = page.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></p> 
+   
 
   {% include author.html %}
 
@@ -56,25 +45,34 @@ layout: default
 
 
 <!-- Content -->
-<div class="info">
+
   {% if page.all.UNSYNCEDLYRICS and page.all.USLT %}
-  <p style="font-size:16px;">
-    {{ page.all.USLT.text | newline_to_br }}
-  </p>
+  <div class="info">
+    <p>
+      {{ page.all.USLT.text | newline_to_br }}
+    </p>
+  </div>
   {% elsif page.all.USLT and page.all.UNSYNCEDLYRICS == nil %}
-  <p style="font-size:16px;">
-    {{ page.all.USLT.text | newline_to_br }}
-  </p>
+  <div class="info">
+    <p>
+      {{ page.all.USLT.text | newline_to_br }}
+    </p>
+  </div>
   {% elsif page.all.UNSYNCEDLYRICS and page.all.USLT == nil %}
-  <p style="font-size:16px;">
-    {{ page.all.UNSYNCEDLYRICS | newline_to_br }}
-  </p>
+  <div class="info">
+    <p>
+      {{ page.all.UNSYNCEDLYRICS | newline_to_br }}
+    </p>
+  </div>
   {% endif %}
   <p>
     {{ page.all.Comment }}
   </p>
-</div>
-
+  {% for albumurl in site.posts %}
+  {% if albumurl.album == page.albumSlug %}
+<a href="{{ relBase }}{{ albumurl.url }}" class="button">See release page</a>
+{% endif %}
+{% endfor %}
 </section>
 {% for post in site.posts %}
 {% if post.album == page.albumSlug %}
@@ -162,7 +160,7 @@ layout: default
   var mu = document.getElementsByTagName("audio")[0];
   var pauseButton = document.getElementById("mu_pause");
   var spincover = document.getElementById("coverart");
-  var fixedplayer = document.getElementById("fixedPlayer")
+  var fixedplayer = document.getElementById("fixedPlayer");
 
   mu.addEventListener('ended', function () {
     // only functional if "loop" is removed
@@ -172,9 +170,8 @@ layout: default
   });
   mu.onplaying = function() {
     pauseButton.innerHTML = "Pause";
-    spincover.classList.add("spinnit");
-    spincover.classList.remove("paused");
     fixedplayer.classList.remove("hideplayer");
+
   }; 
 
   pauseButton.addEventListener("click", function () {
@@ -184,20 +181,18 @@ layout: default
     }
     else {
       mu.pause();
-      pauseButton.innerHTML = "Resume";
 
-      spincover.classList.add("paused");
+
     }
   });
-
-  mu.addEventListener('timeupdate', function () {
-    var timestamp = Math.floor(mu.currentTime);
-    var hours = Math.floor(timestamp / 60 / 60);
-    var minutes = Math.floor(timestamp / 60) - (hours * 60);
-    var seconds = timestamp % 60;
-    var formatted = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
-    var thecurrentSpan = document.getElementById("tracktime");
-    thecurrentSpan.innerHTML = formatted + ' / ';
+  mu.addEventListener('playing', function () {
+    spincover.classList.add("spinnit");
+    spincover.classList.remove("paused");
+  });
+  mu.addEventListener('pause', function () {
+    spincover.classList.add("paused");
+    pauseButton.innerHTML = "Resume";
   });
 
+
 </script>