Merge pull request #9 from WayOfTheCrab/feature/link-to-playhead-loca…

…tion

make it possible to link to a particular playhead location

sass/_layout.scss

@@ -146,8 +146,10 @@ hr {
     }
 }
 
-.audio-link {
+
+.audio-meta {
+    display: flex;
+    justify-content: space-between;
     font-size: x-small;
     font-style: italic;
-    text-align: right;
-}
+}

static/player.js

@@ -1,18 +1,51 @@
+const copyPosToClipboard = (ev) => {
+    ev.preventDefault();
+
+    const permaLink = document.querySelector(".perma-link");
+    navigator.clipboard.writeText(permaLink.href);
+
+    const origText = permaLink.innerText;
+    permaLink.innerText = "Copied to clipboard...";
+    ev.target.onmouseleave = () => {
+        setTimeout(() => {
+            permaLink.innerText = origText;
+        }, 1000);
+    };
+}
+
 onload = (_) => {
-    const players = document.querySelectorAll("audio");
+    // -----------------------------------------------------------------------------
+    //     - Link to a position -
+    // -----------------------------------------------------------------------------
+    const querystring = new URLSearchParams(window.location.search);
+    const playhead = querystring.get("t");
+
+    // -----------------------------------------------------------------------------
+    //     - Remember playhead position -
+    // -----------------------------------------------------------------------------
+    const player = document.querySelector("audio");
+    const permaLink = document.querySelector(".perma-link");
+    if (!(player || permaLink)) return;
+
+    permaLink.onclick = copyPosToClipboard;
+
+    const id = "player-id-" + player.currentSrc;
 
-    for (i in players) {
-        const player = players[i];
-        const id = "player-id-" + player.currentSrc;
+    var lastTime = parseFloat(window.localStorage.getItem(id)) || 0;
 
-        var lastTime = parseFloat(window.localStorage.getItem(id)) || 0;
+    player.currentTime = lastTime;
+    player.ontimeupdate = (_) => {
+        permaLink.href = `${permaLink.dataset['url']}?t=${Math.round(player.currentTime)}`;
+        if (Math.abs(player.currentTime - lastTime) > 5) {
+            lastTime = player.currentTime;
+            window.localStorage.setItem(id, lastTime);
+        }
+    };
 
-        player.currentTime = lastTime;
-        player.ontimeupdate = (_) => {
-            if (Math.abs(player.currentTime - lastTime) > 5) {
-                lastTime = player.currentTime;
-                window.localStorage.setItem(id, lastTime);
-            }
-        };
+    // If the playhead position is set in the querystring
+    // that will take precedence over the stored location
+    if (playhead != null) {
+        const playheadPos = parseFloat(playhead || 0);
+        player.currentTime = playheadPos;
     }
 };

templates/page.html

@@ -16,10 +16,17 @@ <h4>Published {{ page.date | date(format= "%Y-%m-%d") }}</h4>
     <source src="{{ page.extra.aac_url }}" type="audio/aac">
 </audio>
 
-<p class="audio-link">
-    Controls not working? 
-    The episode can be <a href="{{ page.extra.aac_url }}">downloaded here</a>.
-</p>
+<section class="audio-meta">
+    <p>
+        <a class="perma-link" href="{{ page.permalink }}" data-url="{{ page.permalink }}">Share current timestamp</a>
+        (copy to clipboard)
+    </p>
+
+    <p class="audio-link">
+        Controls not working? 
+        The episode can be <a href="{{ page.extra.aac_url }}">downloaded here</a>.
+    </p>
+</section>
 {% endif %}
 
 {{ page.content | safe }}