Add experimental URL timestamp functionality

hugo/layouts/partials/player.html

@@ -75,6 +75,10 @@ <h3 class="player-number ml-2 my-0">
         </div>
       </div>
 
+      <div class="d-flex">
+        <button class="btn btn-link" data-action="player#getLinkToPosition">🔗</button>
+      </div>
+
       <div class="d-flex align-items-center justify-content-center player-rate">
         <button class="btn btn-link" data-action="player#togglePlaybackRate" data-target="player.rate">1</button>
       </div>

hugo/src/js/controllers/page_controller.js

@@ -1,10 +1,16 @@
 import Controller from '../base_controller';
+import {addTimeToURL} from '../utils'
 
 export default class extends Controller {
+  static state = {
+    URLTime: null,
+  };
+
   static targets = ['player', 'playerStateReceiver'];
 
   initialize() {
     super.initialize();
+    this.getURLTimecode();
   }
 
   updatePodcasts() {
@@ -14,6 +20,12 @@ export default class extends Controller {
   }
 
   playPodcast({ detail }) {
+    // set playback position from ?t=00:00:00 if present
+    if (this.constructor.state.URLTime) {
+      detail.timeLabel = this.constructor.state.URLTime;
+      Object.assign(this.constructor.state, { "URLTime": null });
+      addTimeToURL(detail.url, detail.timeLabel);
+    }
     this.getPlayerController().playPodcast(detail);
   }
 
@@ -23,4 +35,13 @@ export default class extends Controller {
   getPlayerController() {
     return this.application.getControllerForElementAndIdentifier(this.playerTarget, 'player');
   }
+
+  getURLTimecode() {
+    let searchParams = new URLSearchParams(window.location.search);
+    let timeFromUrl = searchParams.get("t");
+    let timeRegExp = new RegExp(/[0-9]*:?[0-9]:?[0-9]+/m);
+    if (timeRegExp.test(timeFromUrl)) {
+      Object.assign(this.constructor.state, { "URLTime": timeFromUrl });
+    }
+  }
 }

hugo/src/js/controllers/podcast_controller.js

@@ -1,5 +1,6 @@
 import Controller from '../base_controller';
 import Player from './player_controller';
+import { addTimeToURL } from '../utils'
 
 /**
  * @property playButtonTarget
@@ -52,6 +53,8 @@ export default class extends Controller {
   }
 
   goToTimeLabel(e) {
+    // add each seek time to URL as t?=00:00:00
+    this.podcastAddTimeToURL(e);
     this.play(e, e.target.textContent);
   }
 
@@ -63,4 +66,9 @@ export default class extends Controller {
       number: this.numberTarget.textContent,
     };
   }
+
+  podcastAddTimeToURL(e) {
+    let podcastPathname = this.data.get('url');
+    addTimeToURL(podcastPathname, e.target.textContent);
+  }
 }

hugo/src/js/utils.js

@@ -22,8 +22,8 @@ export function getUnits(value, units) {
   return /^[0,2-9]?[1]$/.test(value)
     ? units[0]
     : /^[0,2-9]?[2-4]$/.test(value)
-    ? units[1]
-    : units[2];
+      ? units[1]
+      : units[2];
 }
 
 // 00:02:24 => 144
@@ -49,3 +49,47 @@ export function getTextSnippet(html) {
 
   return snippet.length === LENGTH && result.length !== LENGTH ? `${snippet}...` : snippet;
 }
+
+//https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
+function fallbackCopyTextToClipboard(text) {
+  var textArea = document.createElement("textarea");
+  textArea.value = text;
+
+  // Avoid scrolling to bottom
+  textArea.style.top = "0";
+  textArea.style.left = "0";
+  textArea.style.position = "fixed";
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    var successful = document.execCommand('copy');
+    var msg = successful ? 'successful' : 'unsuccessful';
+    alert('Временная метка скопирована в буфер обмена', msg, '\nTO DO: сделать красивое оповещение');
+  } catch (err) {
+    alert('ОШИБКА: невозможно скопировать временную метку в буфер обмена    ', err, "\nTO DO: сделать красивое оповещение");
+  }
+
+  document.body.removeChild(textArea);
+}
+
+export function copyTextToClipboard(text) {
+  if (!navigator.clipboard) {
+    fallbackCopyTextToClipboard(text);
+    return;
+  }
+  navigator.clipboard.writeText(text).then(function () {
+    alert('Временная метка скопирована в буфер обмена\nTO DO: сделать красивое оповещение');
+  }, function (err) {
+    alert('ОШИБКА: невозможно скопировать временную метку в буфер обмена    ', err, "\nTO DO: сделать красивое оповещение");
+  });
+}
+
+export function addTimeToURL(podcastPathname, currentTime) {
+  // add full link to URL
+  if (window.history.pushState) {
+    window.history.pushState(null, null, [podcastPathname, "?t=", currentTime].join(""));
+  }
+}