From 16c79a0545cc721854ff50b3f5916498d28acc68 Mon Sep 17 00:00:00 2001
From: Mark Boas <markb@happyworm.com>
Date: Thu, 22 Aug 2024 13:17:13 +0200
Subject: [PATCH 1/2] changes for selection popover

---
 wp-hyperaudio/hyperaudio.php             |   7 -
 wp-hyperaudio/js/hyperaudio-lite.js      | 981 +++++++++++------------
 wp-hyperaudio/js/share-this-clipboard.js |  17 -
 wp-hyperaudio/js/share-this-twitter.js   |   1 -
 wp-hyperaudio/js/share-this.js           |   1 -
 5 files changed, 458 insertions(+), 549 deletions(-)
 delete mode 100644 wp-hyperaudio/js/share-this-clipboard.js
 delete mode 100644 wp-hyperaudio/js/share-this-twitter.js
 delete mode 100644 wp-hyperaudio/js/share-this.js

diff --git a/wp-hyperaudio/hyperaudio.php b/wp-hyperaudio/hyperaudio.php
index da87299..d0db383 100644
--- a/wp-hyperaudio/hyperaudio.php
+++ b/wp-hyperaudio/hyperaudio.php
@@ -218,10 +218,6 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
   $o .='<div id="'. esc_attr( $transcriptid ) .'" class="hyperaudio-transcript" style="overflow-y:scroll; width:'. esc_attr( $width ) .'; height:'. esc_attr( $transcriptHeight ) .'; position:relative; border-style:dashed; border-width: 1px; border-color:#999; padding: 8px">'. wp_kses_post( $transcript ) . wp_kses_post( $hyperaudioLink ) . '</div>';
 
   $o .= '<script>
-  ShareThis({
-      sharers: [ ShareThisViaTwitter, ShareThisViaClipboard ],
-      selector: "article"
-  }).init();
 
   var minimizedMode = false;
   var autoScroll = true;
@@ -246,9 +242,6 @@ function hyperaudio_init()
     wp_enqueue_script('velocity', plugins_url('/js/velocity.js', __FILE__), array(), '1.0.0', false);
     wp_enqueue_script('hyperaudio-lite', plugins_url('/js/hyperaudio-lite.js', __FILE__), array(), '1.0.0', false);
     wp_enqueue_script('caption', plugins_url('/js/caption.js', __FILE__), array(), '1.0.0', false);
-    wp_enqueue_script('share-this', plugins_url('/js/share-this.js', __FILE__), array(), '1.0.0', false);
-    wp_enqueue_script('share-this-twitter', plugins_url('/js/share-this-twitter.js', __FILE__), array(), '1.0.0', false);
-    wp_enqueue_script('share-this-clipboard', plugins_url('/js/share-this-clipboard.js', __FILE__), array(), '1.0.0', false);
   }
 }
 
diff --git a/wp-hyperaudio/js/hyperaudio-lite.js b/wp-hyperaudio/js/hyperaudio-lite.js
index 0e379fb..fbef82f 100644
--- a/wp-hyperaudio/js/hyperaudio-lite.js
+++ b/wp-hyperaudio/js/hyperaudio-lite.js
@@ -1,697 +1,677 @@
 /*! (C) The Hyperaudio Project. MIT @license: en.wikipedia.org/wiki/MIT_License. */
-/*! Version 2.1.7 */
+/*! Version 2.3.1 */
 
 'use strict';
 
-function nativePlayer(instance) {
-  this.player = instance.player;
-  this.player.addEventListener('pause', instance.pausePlayHead, false);
-  this.player.addEventListener('play', instance.preparePlayHead, false);
-  this.paused = true;
+// Base player class to handle common player functionality
+class BasePlayer {
+  constructor(instance) {
+    this.player = this.initPlayer(instance); // Initialize the player
+    this.paused = true; // Set initial paused state
+    if (this.player) {
+      this.attachEventListeners(instance); // Attach event listeners for play and pause
+    }
+  }
 
-  this.getTime = () => {
-    return new Promise((resolve) => {
-      resolve(this.player.currentTime);
-    });
+  // Method to initialize the player - to be implemented by subclasses
+  initPlayer(instance) {
+    throw new Error('initPlayer method should be implemented by subclasses');
+  }
+
+  // Method to attach common event listeners
+  attachEventListeners(instance) {
+    this.player.addEventListener('pause', instance.pausePlayHead.bind(instance), false);
+    this.player.addEventListener('play', instance.preparePlayHead.bind(instance), false);
+  }
+
+  // Method to get the current time of the player
+  getTime() {
+    return Promise.resolve(this.player.currentTime);
   }
 
-  this.setTime = (seconds) => {
+  // Method to set the current time of the player
+  setTime(seconds) {
     this.player.currentTime = seconds;
   }
 
-  this.play = () => {
+  // Method to play the media
+  play() {
     this.player.play();
     this.paused = false;
   }
 
-  this.pause = () => {
+  // Method to pause the media
+  pause() {
     this.player.pause();
     this.paused = true;
   }
 }
 
-function soundcloudPlayer(instance) {
-  this.player = SC.Widget(instance.player.id);
-  this.player.bind(SC.Widget.Events.PAUSE, instance.pausePlayHead);
-  this.player.bind(SC.Widget.Events.PLAY, instance.preparePlayHead);
-  this.paused = true;
-
-  this.getTime = () => {
-    return new Promise((resolve) => {
-      this.player.getPosition(ms => {
-        resolve(ms / 1000);
-      });
-    });
+// Class for native HTML5 player
+class NativePlayer extends BasePlayer {
+  // Initialize the native HTML5 player
+  initPlayer(instance) {
+    return instance.player;
   }
+}
 
-  this.setTime = (seconds) => {
-    this.player.seekTo(seconds * 1000);
+// Class for SoundCloud player
+class SoundCloudPlayer extends BasePlayer {
+  // Initialize the SoundCloud player
+  initPlayer(instance) {
+    return SC.Widget(instance.player.id);
   }
 
-  this.play = () => {
-    this.player.play();
-    this.paused = false;
+  // Attach event listeners specific to SoundCloud player
+  attachEventListeners(instance) {
+    this.player.bind(SC.Widget.Events.PAUSE, instance.pausePlayHead.bind(instance));
+    this.player.bind(SC.Widget.Events.PLAY, instance.preparePlayHead.bind(instance));
   }
 
-  this.pause = () => {
-    this.player.pause();
-    this.paused = true;
+  // Get the current time of the SoundCloud player
+  getTime() {
+    return new Promise(resolve => {
+      this.player.getPosition(ms => resolve(ms / 1000));
+    });
   }
-}
 
-function videojsPlayer(instance) {
-  this.player = videojs.getPlayer(instance.player.id);
-  this.player.addEventListener('pause', instance.pausePlayHead, false);
-  this.player.addEventListener('play', instance.preparePlayHead, false);
-  this.paused = true;
-
-  this.getTime = () => {
-    return new Promise((resolve) => {
-      resolve(this.player.currentTime());
-    });
+  // Set the current time of the SoundCloud player
+  setTime(seconds) {
+    this.player.seekTo(seconds * 1000);
   }
+}
 
-  this.setTime = (seconds) => {
-    this.player.currentTime(seconds);
+// Class for VideoJS player
+class VideoJSPlayer extends BasePlayer {
+  // Initialize the VideoJS player
+  initPlayer(instance) {
+    return videojs.getPlayer(instance.player.id);
   }
 
-  this.play = () => {
-    this.player.play();
-    this.paused = false;
+  // Get the current time of the VideoJS player
+  getTime() {
+    return Promise.resolve(this.player.currentTime());
   }
 
-  this.pause = () => {
-    this.player.pause();
-    this.paused = true;
+  // Set the current time of the VideoJS player
+  setTime(seconds) {
+    this.player.currentTime(seconds);
   }
 }
 
-function vimeoPlayer(instance) {
-  const iframe = document.querySelector('iframe');
-  this.player = new Vimeo.Player(iframe);
-  this.player.setCurrentTime(0);
-  this.paused = true;
-  this.player.ready().then(instance.checkPlayHead);
-  this.player.on('play',instance.preparePlayHead);
-  this.player.on('pause',instance.pausePlayHead);
-
-  this.getTime = () => {
-    return new Promise((resolve) => {
-      resolve(this.player.getCurrentTime());
-    });
+// Class for Vimeo player
+class VimeoPlayer extends BasePlayer {
+  // Initialize the Vimeo player
+  initPlayer(instance) {
+    const iframe = document.querySelector('iframe');
+    return new Vimeo.Player(iframe);
   }
 
-  this.setTime = (seconds) => {
-    this.player.setCurrentTime(seconds);
+  // Attach event listeners specific to Vimeo player
+  attachEventListeners(instance) {
+    this.player.ready().then(instance.checkPlayHead.bind(instance));
+    this.player.on('play', instance.preparePlayHead.bind(instance));
+    this.player.on('pause', instance.pausePlayHead.bind(instance));
   }
 
-  this.play = () => {
-    this.player.play();
-    this.paused = false;
+  // Get the current time of the Vimeo player
+  getTime() {
+    return this.player.getCurrentTime();
   }
 
-  this.pause = () => {
-    this.player.pause();
-    this.paused = true;
+  // Set the current time of the Vimeo player
+  setTime(seconds) {
+    this.player.setCurrentTime(seconds);
   }
 }
 
-function youtubePlayer(instance) {
-  const tag = document.createElement('script');
-  tag.id = 'iframe-demo';
-  tag.src = 'https://www.youtube.com/iframe_api';
-  const firstScriptTag = document.getElementsByTagName('script')[0];
-  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-  this.paused = true;
-
-  const previousYTEvent = window.onYouTubeIframeAPIReady;
-  window.onYouTubeIframeAPIReady = () => {
-    if (typeof previousYTEvent !== 'undefined') { // used for multiple YouTube players
-      previousYTEvent();
+// Class for YouTube player
+class YouTubePlayer extends BasePlayer {
+  // Initialize the YouTube player by loading YouTube IFrame API
+  initPlayer(instance) {
+    // Defer attaching event listeners until the player is ready
+    this.isReady = false;
+
+    // Load the YouTube IFrame API script
+    if (!document.getElementById('iframe-demo')) {
+      const tag = document.createElement('script');
+      tag.id = 'iframe-demo';
+      tag.src = 'https://www.youtube.com/iframe_api';
+      const firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
     }
 
+    // Set the global callback for the YouTube IFrame API
+    window.onYouTubeIframeAPIReady = this.onYouTubeIframeAPIReady.bind(this, instance);
+  }
+
+  // Callback when YouTube IFrame API is ready
+  onYouTubeIframeAPIReady(instance) {
     this.player = new YT.Player(instance.player.id, {
       events: {
-        onStateChange: onPlayerStateChange,
-      },
+        onStateChange: this.onPlayerStateChange.bind(this, instance),
+        onReady: this.onPlayerReady.bind(this)
+      }
     });
-  };
+  }
+
+  // Event handler when the YouTube player is ready
+  onPlayerReady() {
+    this.isReady = true;
+  }
 
-  let onPlayerStateChange = event => {
-    if (event.data === 1) {
-      // playing
+  // Handle YouTube player state changes (play, pause)
+  onPlayerStateChange(instance, event) {
+    if (event.data === YT.PlayerState.PLAYING) { // Playing
       instance.preparePlayHead();
       this.paused = false;
-    } else if (event.data === 2) {
-      // paused
+    } else if (event.data === YT.PlayerState.PAUSED) { // Paused
       instance.pausePlayHead();
       this.paused = true;
     }
-  };
-
-  this.getTime = () => {
-    return new Promise((resolve) => {
-      resolve(this.player.getCurrentTime());
-    });
-  }
-
-  this.setTime = (seconds) => {
-    this.player.seekTo(seconds, true);
-  }
-
-  this.play = () => {
-    this.player.playVideo();
   }
 
-  this.pause = () => {
-    this.player.pauseVideo();
+  // Get the current time of the YouTube player
+  getTime() {
+    if (this.isReady) {
+      return Promise.resolve(this.player.getCurrentTime());
+    } else {
+      return Promise.resolve(0); // Return 0 if the player is not ready
+    }
   }
-}
-
-// Note – The Spotify Player is in beta.
-// The API limits us to:
-// 1. A seek accuracy of nearest second
-// 2. An update frequency of one second (although a workaround is provided)
-// 3. Playing a file without previous iteraction will always play from start
-//    ie – a shared selection will highlight but not start at the start of
-//    that selection. 
-
-function spotifyPlayer(instance) {
-  this.currentTime = 0;
-  this.paused = true;
-  this.player = null;
-
-  window.onSpotifyIframeApiReady = IFrameAPI => {
 
-    const element = document.getElementById(instance.player.id);
-
-    const extractEpisodeID = (url) => {
-      const match = url.match(/episode\/(.+)$/);
-      return match ? match[1] : null;
+  // Set the current time of the YouTube player
+  setTime(seconds) {
+    if (this.isReady) {
+      this.player.seekTo(seconds, true);
     }
+  }
 
-    const subSample = (sampleInterval) => {
-      this.currentTime += sampleInterval;
+  // Play the YouTube video
+  play() {
+    if (this.isReady) {
+      this.player.playVideo();
     }
+  }
 
-    const srcValue = element.getAttribute('src');
-    const episodeID = extractEpisodeID(srcValue);
-
-    const options = {
-      uri: `spotify:episode:${episodeID}`,
+  // Pause the YouTube video
+  pause() {
+    if (this.isReady) {
+      this.player.pauseVideo();
     }
+  }
+}
 
-    const callback = player => {
-      this.player = player;
-      player.addListener('playback_update', e => {
-        if (e.data.isPaused !== true) {
-          this.currentTime = e.data.position / 1000;
-          let currentSample = 0;
-          let totalSample = 0;
-          let sampleInterval = 0.25;
-
-          while (totalSample < 1){
-            currentSample += sampleInterval;
-            setTimeout(subSample, currentSample*1000, sampleInterval);
-            totalSample = currentSample + sampleInterval;
+// Class for Spotify player
+class SpotifyPlayer extends BasePlayer {
+  // Initialize the Spotify player by setting up the Spotify IFrame API
+  initPlayer(instance) {
+    window.onSpotifyIframeApiReady = IFrameAPI => {
+      const element = document.getElementById(instance.player.id);
+      const srcValue = element.getAttribute('src');
+      const episodeID = this.extractEpisodeID(srcValue);
+
+      const options = { uri: `spotify:episode:${episodeID}` };
+      const callback = player => {
+        this.player = player;
+        player.addListener('playback_update', e => {
+          if (e.data.isPaused !== true) {
+            this.currentTime = e.data.position / 1000;
+            instance.preparePlayHead();
+            this.paused = false;
+          } else {
+            instance.pausePlayHead();
+            this.paused = true;
           }
+        });
 
-          instance.preparePlayHead();
-          this.paused = false;
-        } else {
-          instance.pausePlayHead();
-          this.paused = true;
-        }
-      });
+        player.addListener('ready', () => {
+          player.togglePlay(); // Priming the playhead
+          instance.checkPlayHead();
+        });
+      };
 
-      player.addListener('ready', () => {
-        // With the Spotify API we need to play before we seek. 
-        // Although togglePlay should autoplay it doesn't,
-        // but lets us prime the playhead.
-        player.togglePlay();
-        instance.checkPlayHead();
-      });
+      IFrameAPI.createController(element, options, callback);
     };
-  
-    IFrameAPI.createController(element, options, callback);
   }
 
-  this.getTime = () => {
-    return new Promise((resolve) => {
-      resolve(this.currentTime);
-    });
+  // Extract episode ID from the Spotify URL
+  extractEpisodeID(url) {
+    const match = url.match(/episode\/(.+)$/);
+    return match ? match[1] : null;
   }
 
-  this.setTime = (seconds) => {
+  // Get the current time of the Spotify player
+  getTime() {
+    return Promise.resolve(this.currentTime);
+  }
+
+  // Set the current time of the Spotify player
+  setTime(seconds) {
     this.player.seek(seconds);
   }
 
-  this.play = () => {
+  // Play the Spotify track
+  play() {
     this.player.play();
     this.paused = false;
   }
 
-  this.pause = () => {
+  // Pause the Spotify track
+  pause() {
     this.player.togglePlay();
     this.paused = true;
   }
 }
 
+// Mapping player types to their respective classes
 const hyperaudioPlayerOptions = {
-  "native": nativePlayer,
-  "soundcloud": soundcloudPlayer,
-  "youtube": youtubePlayer,
-  "videojs": videojsPlayer,
-  "vimeo": vimeoPlayer,
-  "spotify": spotifyPlayer
-}
-
+  "native": NativePlayer,
+  "soundcloud": SoundCloudPlayer,
+  "youtube": YouTubePlayer,
+  "videojs": VideoJSPlayer,
+  "vimeo": VimeoPlayer,
+  "spotify": SpotifyPlayer
+};
+
+// Factory function to create player instances
 function hyperaudioPlayer(playerType, instance) {
-  if (playerType !== null && playerType !== undefined) {
-    return new playerType(instance);
+  if (playerType) {
+    return new hyperaudioPlayerOptions[playerType](instance);
   } else {
-    console.warn("HYPERAUDIO LITE WARNING: data-player-type attribute should be set on player if not native, eg SoundCloud, YouTube, Vimeo, VideoJS");
+    console.warn("HYPERAUDIO LITE WARNING: data-player-type attribute should be set on player if not native, e.g., SoundCloud, YouTube, Vimeo, VideoJS");
   }
 }
 
+// Main class for HyperaudioLite functionality
 class HyperaudioLite {
   constructor(transcriptId, mediaElementId, minimizedMode, autoscroll, doubleClick, webMonetization, playOnClick) {
     this.transcript = document.getElementById(transcriptId);
     this.init(mediaElementId, minimizedMode, autoscroll, doubleClick, webMonetization, playOnClick);
+
+    // Ensure correct binding for class methods
+    this.preparePlayHead = this.preparePlayHead.bind(this);
+    this.pausePlayHead = this.pausePlayHead.bind(this);
+    this.setPlayHead = this.setPlayHead.bind(this);
+    this.checkPlayHead = this.checkPlayHead.bind(this);
+    this.clearTimer = this.clearTimer.bind(this);
   }
 
-  init = (mediaElementId, minimizedMode, autoscroll, doubleClick, webMonetization, playOnClick) => {
+  // Initialize the HyperaudioLite instance
+  init(mediaElementId, minimizedMode, autoscroll, doubleClick, webMonetization, playOnClick) {
+    this.setupTranscriptHash();
+    this.setupPopover();
+    this.setupPlayer(mediaElementId);
+    this.setupTranscriptWords();
+    this.setupEventListeners(doubleClick, playOnClick);
+    this.setupInitialPlayHead();
+    this.minimizedMode = minimizedMode;
+    this.autoscroll = autoscroll;
+    this.webMonetization = webMonetization;
+  }
 
+  // Setup hash for transcript selection
+  setupTranscriptHash() {
     const windowHash = window.location.hash;
     const hashVar = windowHash.substring(1, windowHash.indexOf('='));
-    
 
     if (hashVar === this.transcript.id) {
       this.hashArray = windowHash.substring(this.transcript.id.length + 2).split(',');
     } else {
       this.hashArray = [];
     }
+  }
 
-    document.addEventListener(
-      'selectionchange',
-      () => {
-        const mediaFragment = this.getSelectionMediaFragment();
-
-        if (mediaFragment !== null) {
-          document.location.hash = mediaFragment;
+  // Setup the popover for text selection
+  setupPopover() {
+    if (typeof popover !== 'undefined') {
+      this.transcript.addEventListener('mouseup', () => {
+        const selection = window.getSelection();
+        const popover = document.getElementById('popover');
+        let selectionText;
+  
+        if (selection.toString().length > 0) {
+          selectionText = selection.toString().replaceAll("'", "`");
+          const range = selection.getRangeAt(0);
+          const rect = range.getBoundingClientRect();
+  
+          popover.style.left = `${rect.left + window.scrollX}px`;
+          popover.style.top = `${rect.bottom + window.scrollY}px`;
+          popover.style.display = 'block';
+  
+          const mediaFragment = this.getSelectionMediaFragment();
+  
+          if (mediaFragment) {
+            document.location.hash = mediaFragment;
+          }
+        } else {
+          popover.style.display = 'none';
         }
-      },
-      false,
-    );
-
-    this.minimizedMode = minimizedMode;
-    this.textShot = '';
-    this.wordIndex = 0;
-
-    this.autoscroll = autoscroll;
-    this.scrollerContainer = this.transcript;
-    this.scrollerOffset = 0;
-    this.scrollerDuration = 800;
-    this.scrollerDelay = 0;
-
-    this.doubleClick = doubleClick;
-    this.webMonetization = webMonetization;
-    this.playOnClick = playOnClick;
-    this.highlightedText = false;
-    this.start = null;
-
-    this.myPlayer = null;
-    this.playerPaused = true;
-
-    if (this.autoscroll === true) {
-      this.scroller = window.Velocity || window.jQuery.Velocity;
+  
+        const popoverBtn = document.getElementById('popover-btn');
+        popoverBtn.addEventListener('click', (e) => {
+          popover.style.display = 'none';
+          let cbText = `${selectionText} ${document.location}`;
+          navigator.clipboard.writeText(cbText);
+  
+          const dialog = document.getElementById("clipboard-dialog");
+          document.getElementById("clipboard-text").innerHTML = cbText;
+          dialog.showModal();
+  
+          const confirmButton = document.getElementById("clipboard-confirm");
+          confirmButton.addEventListener("click", () => dialog.close());
+  
+          e.preventDefault();
+          return false;
+        });
+      });
     }
+  }
 
-    //Create the array of timed elements (wordArr)
-
-    const words = this.transcript.querySelectorAll('[data-m]');
-    this.wordArr = this.createWordArray(words);
-    this.parentTag = words[0].parentElement.tagName;
-    this.parentElements = this.transcript.getElementsByTagName(this.parentTag);
+  // Setup the media player
+  setupPlayer(mediaElementId) {
     this.player = document.getElementById(mediaElementId);
-
-    // Grab the media source and type from the first section if it exists
-    // and add it to the media element.
-
     const mediaSrc = this.transcript.querySelector('[data-media-src]');
-
-    if (mediaSrc !== null &&  mediaSrc !== undefined) {
+    if (mediaSrc) {
       this.player.src = mediaSrc.getAttribute('data-media-src');
     }
 
-    if (this.player.tagName == 'VIDEO' || this.player.tagName == 'AUDIO') {
-      //native HTML media elements
+    if (this.player.tagName === 'VIDEO' || this.player.tagName === 'AUDIO') {
       this.playerType = 'native';
     } else {
-      //assume it is a SoundCloud or YouTube iframe
       this.playerType = this.player.getAttribute('data-player-type');
     }
 
-    this.myPlayer = hyperaudioPlayer(hyperaudioPlayerOptions[this.playerType], this);
-    this.parentElementIndex = 0;
-    words[0].classList.add('active');
-    //this.parentElements[0].classList.add('active');
-    let playHeadEvent = 'click';
+    this.myPlayer = hyperaudioPlayer(this.playerType, this);
+  }
 
-    if (this.doubleClick === true) {
-      playHeadEvent = 'dblclick';
-    }
+  // Setup the transcript words
+  setupTranscriptWords() {
+    const words = this.transcript.querySelectorAll('[data-m]');
+    this.wordArr = this.createWordArray(words);
+    this.parentTag = words[0].parentElement.tagName;
+    this.parentElements = this.transcript.getElementsByTagName(this.parentTag);
+  }
 
-    this.transcript.addEventListener(playHeadEvent, this.setPlayHead, false);
-    this.transcript.addEventListener(playHeadEvent, this.checkPlayHead, false);
+  // Setup event listeners for interactions
+  setupEventListeners(doubleClick, playOnClick) {
+    this.minimizedMode = false;
+    this.autoscroll = false;
+    this.doubleClick = doubleClick;
+    this.webMonetization = false;
+    this.playOnClick = playOnClick;
+    this.highlightedText = false;
+    this.start = null;
 
-    this.start = this.hashArray[0];
+    if (this.autoscroll) {
+      this.scroller = window.Velocity || window.jQuery.Velocity;
+    }
 
-    //check for URL based start and stop times 
+    const playHeadEvent = doubleClick ? 'dblclick' : 'click';
+    this.transcript.addEventListener(playHeadEvent, this.setPlayHead.bind(this), false);
+    this.transcript.addEventListener(playHeadEvent, this.checkPlayHead.bind(this), false);
+  }
 
+  // Setup initial playhead position based on URL hash
+  setupInitialPlayHead() {
+    this.start = this.hashArray[0];
     if (!isNaN(parseFloat(this.start))) {
       this.highlightedText = true;
-      
       let indices = this.updateTranscriptVisualState(this.start);
-      let index = indices.currentWordIndex;
-
-      if (index > 0) {
-        this.scrollToParagraph(indices.currentParentElementIndex, index);
+      if (indices.currentWordIndex > 0) {
+        this.scrollToParagraph(indices.currentParentElementIndex, indices.currentWordIndex);
       }
     }
 
     this.end = this.hashArray[1];
-
     //TODO convert to binary search for below for quicker startup
     if (this.start && this.end) {
+      const words = this.transcript.querySelectorAll('[data-m]');
       for (let i = 1; i < words.length; i++) {
-        const wordStart = parseInt(words[i].getAttribute('data-m')) / 1000;
-        if (wordStart > parseFloat(this.start) && parseFloat(this.end) > wordStart) {
+        let startTime = parseInt(words[i].getAttribute('data-m')) / 1000;
+        let wordStart = (Math.round(startTime * 100) / 100).toFixed(2);
+        if (wordStart >= parseFloat(this.start) && parseFloat(this.end) > wordStart) {
           words[i].classList.add('share-match');
         }
       }
     }
-  }; // end init
-
-  createWordArray = words => {
-    let wordArr = [];
+  }
 
-    words.forEach((word, i) => {
+  // Create an array of words with metadata from the transcript
+  createWordArray(words) {
+    return Array.from(words).map(word => {
       const m = parseInt(word.getAttribute('data-m'));
       let p = word.parentNode;
       while (p !== document) {
-        if (
-          p.tagName.toLowerCase() === 'p' ||
-          p.tagName.toLowerCase() === 'figure' ||
-          p.tagName.toLowerCase() === 'ul'
-        ) {
+        if (['p', 'figure', 'ul'].includes(p.tagName.toLowerCase())) {
           break;
         }
         p = p.parentNode;
       }
-      wordArr[i] = { n: words[i], m: m, p: p };
-      wordArr[i].n.classList.add('unread');
+      word.classList.add('unread');
+      return { n: word, m, p };
     });
+  }
 
-    return wordArr;
-  };
-
-  getSelectionMediaFragment = () => {
-    let fragment = null;
-    let selection = null;
-
-    if (window.getSelection) {
-      selection = window.getSelection();
-    } else if (document.selection) {
-      selection = document.selection.createRange();
-    }
+  getSelectionRange = () => {
+    const selection = window.getSelection();
+    if (selection.rangeCount === 0) return null;
 
-    // check to see if selection is actually inside the transcript
-    let insideTranscript = false;
-    let parentElement = selection.focusNode;
-    while (parentElement !== null) {
-      if (parentElement.id === this.transcript.id) {
-        insideTranscript = true;
-        break;
+    const range = selection.getRangeAt(0);
+    
+    // Helper function to get the closest span
+    function getClosestSpan(node) {
+      while (node && node.nodeType !== Node.ELEMENT_NODE) {
+        node = node.parentNode;
       }
-      parentElement = parentElement.parentElement;
+      return node.closest('[data-m]');
     }
 
-    if (selection.toString() !== '' && insideTranscript === true && selection.focusNode !== null && selection.anchorNode !== null) {
-      
-      let fNode = selection.focusNode.parentNode;
-      let aNode = selection.anchorNode.parentNode;
+    // Get all relevant spans
+    const allSpans = Array.from(this.transcript.querySelectorAll('[data-m]'));
 
-      if (aNode.tagName === "P") {
-        aNode = selection.anchorNode.nextElementSibling;
-      }
+    // Find the first and last span that contain selected text
+    let startSpan = null;
+    let endSpan = null;
+    let selectedText = range.toString();
+    let trimmedSelectedText = selectedText.trim();
 
-      if (fNode.tagName === "P") {
-        fNode = selection.focusNode.nextElementSibling;
+    for (let span of allSpans) {
+      if (range.intersectsNode(span) && span.textContent.trim() !== '') {
+        if (!startSpan) startSpan = span;
+        endSpan = span;
       }
+    }
 
-      if (aNode.getAttribute('data-m') === null || aNode.className === 'speaker') {
-        aNode = aNode.nextElementSibling;
-      }
-
-      if (fNode.getAttribute('data-m') === null || fNode.className === 'speaker') {
-        fNode = fNode.previousElementSibling;
-      }
-
-      // if the selection starts with a space we want the next element
-      if(selection.toString().charAt(0) == " " && aNode !== null) {
-        aNode = aNode.nextElementSibling;
-      }
-
-      if (aNode !== null) {
-        let aNodeTime = parseInt(aNode.getAttribute('data-m'), 10);
-        let aNodeDuration = parseInt(aNode.getAttribute('data-d'), 10);
-        let fNodeTime;
-        let fNodeDuration;
-
-        if (fNode !== null && fNode.getAttribute('data-m') !== null) {
-          // if the selection ends in a space we want the previous element if it exists
-          if(selection.toString().slice(-1) == " " && fNode.previousElementSibling !== null) {
-            fNode = fNode.previousElementSibling;
-          }
+    if (!startSpan || !endSpan) return null;
 
-          fNodeTime = parseInt(fNode.getAttribute('data-m'), 10);
-          fNodeDuration = parseInt(fNode.getAttribute('data-d'), 10);
+    // Adjust start span if selection starts with a space
+    let startIndex = allSpans.indexOf(startSpan);
+    while (selectedText.startsWith(' ') && startIndex < allSpans.length - 1) {
+      startIndex++;
+      startSpan = allSpans[startIndex];
+      selectedText = selectedText.slice(1);
+    }
 
-          // if the selection starts with a space we want the next element
+    // Calculate start time
+    let startTime = parseInt(startSpan.dataset.m) / 1000;
 
-        }
+    // Calculate end time
 
-        // 1 decimal place will do
-        aNodeTime = Math.round(aNodeTime / 100) / 10;
-        aNodeDuration = Math.round(aNodeDuration / 100) / 10;
-        fNodeTime = Math.round(fNodeTime / 100) / 10;
-        fNodeDuration = Math.round(fNodeDuration / 100) / 10;
+    let duration = 0;
+    if (endSpan.dataset.d) {
+      duration = parseInt(endSpan.dataset.d);
+    } else {
+      // when no duration exists default to 1 second
+      duration = 1000; 
+    }
 
-        let nodeStart = aNodeTime;
-        let nodeDuration = Math.round((fNodeTime + fNodeDuration - aNodeTime) * 10) / 10;
+    let endTime = (parseInt(endSpan.dataset.m) + duration) / 1000;
 
-        if (aNodeTime >= fNodeTime) {
-          nodeStart = fNodeTime;
-          nodeDuration = Math.round((aNodeTime + aNodeDuration - fNodeTime) * 10) / 10;
-        }
+    // Format to seconds at 2 decimal place precision
+    let startTimeFormatted = (Math.round(startTime * 100) / 100).toFixed(2);
+    let endTimeFormatted = (Math.round(endTime * 100) / 100).toFixed(2);
 
-        if (nodeDuration === 0 || nodeDuration === null || isNaN(nodeDuration)) {
-          nodeDuration = 10; // arbitary for now
-        }
+    // Only return a range if there's actually selected text (excluding only spaces)
+    return trimmedSelectedText ? `${startTimeFormatted},${endTimeFormatted}` : null;
+  }
 
-        if (isNaN(parseFloat(nodeStart))) {
-          fragment = null;
-        } else {
-          fragment = this.transcript.id + '=' + nodeStart + ',' + Math.round((nodeStart + nodeDuration) * 10) / 10;
-        }
-      }
+  getSelectionMediaFragment = () => {
+    let range = this.getSelectionRange();
+    if (range === null) {
+      return null;
     }
+    console.log(range);
+    return (this.transcript.id + '=' +range);
+  }
 
-    return fragment;
-  };
-
-  setPlayHead = e => {
-    const target = e.target ? e.target : e.srcElement;
-
-    // cancel highlight playback
+  // Set the playhead position in the media player based on the transcript
+  setPlayHead(e) {
+    const target = e.target || e.srcElement;
     this.highlightedText = false;
+    this.clearActiveClasses();
 
-    // clear elements with class='active'
-    let activeElements = Array.from(this.transcript.getElementsByClassName('active'));
-
-    activeElements.forEach(e => {
-      e.classList.remove('active');
-    });
-
-    if (this.myPlayer.paused === true && target.getAttribute('data-m') !== null) {
+    if (this.myPlayer.paused && target.dataset.m) {
       target.classList.add('active');
       target.parentNode.classList.add('active');
     }
 
-    const timeSecs = parseInt(target.getAttribute('data-m')) / 1000;
+    const timeSecs = parseInt(target.dataset.m) / 1000;
     this.updateTranscriptVisualState(timeSecs);
 
-    if (!isNaN(parseFloat(timeSecs))) {
+    if (!isNaN(timeSecs)) {
       this.end = null;
       this.myPlayer.setTime(timeSecs);
-      if (this.playOnClick === true) {
+      if (this.playOnClick) {
         this.myPlayer.play();
       }
     }
-  };
+  }
 
-  clearTimer = () => {
-    if (this.timer) clearTimeout(this.timer);
-  };
+  // Clear the active classes from the transcript
+  clearActiveClasses() {
+    const activeElements = Array.from(this.transcript.getElementsByClassName('active'));
+    activeElements.forEach(e => e.classList.remove('active'));
+  }
 
-  preparePlayHead = () => {
+  // Prepare the playhead for playback
+  preparePlayHead() {
     this.myPlayer.paused = false;
     this.checkPlayHead();
   }
 
-  pausePlayHead = () => {
+  // Pause the playhead
+  pausePlayHead() {
     this.clearTimer();
     this.myPlayer.paused = true;
   }
 
-  checkPlayHead = () => {
-
+  // Check the playhead position and update the transcript
+  checkPlayHead() {
     this.clearTimer();
 
-    (async (instance) => {
-      instance.currentTime = await instance.myPlayer.getTime();
-
-      if (instance.highlightedText === true) {
-        instance.currentTime = instance.start;
-        instance.myPlayer.setTime(instance.currentTime);
-        instance.highlightedText = false;
+    (async () => {
+      this.currentTime = await this.myPlayer.getTime();
+      if (this.highlightedText) {
+        this.currentTime = this.start;
+        this.myPlayer.setTime(this.currentTime);
+        this.highlightedText = false;
       }
-      // no need to check status if the currentTime hasn't changed
-      
-      instance.checkStatus();
-
-    })(this);
+      this.checkStatus();
+    })();
   }
 
-  scrollToParagraph = (currentParentElementIndex, index) => {
-    let newPara = false;
-    let scrollNode = this.wordArr[index - 1].n.parentNode;
-
-    if (scrollNode !== null && scrollNode.tagName != 'P') {
-      // it's not inside a para so just use the element
-      scrollNode = this.wordArr[index - 1].n;
+  // Clear the timer for the playhead
+  clearTimer() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
     }
+  }
 
-    if (currentParentElementIndex != this.parentElementIndex) {
-
-      if (typeof this.scroller !== 'undefined' && this.autoscroll === true) {
-        if (scrollNode !== null) {
-          if (typeof this.scrollerContainer !== 'undefined' && this.scrollerContainer !== null) {
-            this.scroller(scrollNode, 'scroll', {
-              container: this.scrollerContainer,
-              duration: this.scrollerDuration,
-              delay: this.scrollerDelay,
-              offset: this.scrollerOffset,
-            });
-          } else {
-            this.scroller(scrollNode, 'scroll', {
-              duration: this.scrollerDuration,
-              delay: this.scrollerDelay,
-              offset: this.scrollerOffset,
-            });
-          }
+  // Scroll to the paragraph containing the current word
+  scrollToParagraph(currentParentElementIndex, index) {
+    const scrollNode = this.wordArr[index - 1].n.closest('p') || this.wordArr[index - 1].n;
+
+    if (currentParentElementIndex !== this.parentElementIndex) {
+      if (this.autoscroll && typeof this.scroller !== 'undefined') {
+        if (scrollNode) {
+          this.scroller(scrollNode, 'scroll', {
+            container: this.scrollerContainer,
+            duration: this.scrollerDuration,
+            delay: this.scrollerDelay,
+            offset: this.scrollerOffset,
+          });
         } else {
-          // the wordlst needs refreshing
-          let words = this.transcript.querySelectorAll('[data-m]');
-          this.wordArr = this.createWordArray(words);
+          this.wordArr = this.createWordArray(this.transcript.querySelectorAll('[data-m]'));
           this.parentElements = this.transcript.getElementsByTagName(this.parentTag);
         }
       }
-
-      newPara = true;
       this.parentElementIndex = currentParentElementIndex;
     }
-    return(newPara);
   }
 
-  checkStatus = () => {
-    //check for end time of shared piece
-
-    let interval = 0;
-
-    if (this.myPlayer.paused === false) {
-    
+  // Check the status of the playhead and update the transcript
+  checkStatus() {
+    if (!this.myPlayer.paused) {
       if (this.end && parseInt(this.end) < parseInt(this.currentTime)) {
         this.myPlayer.pause();
         this.end = null;
       } else {
-        let newPara = false;
-        //interval = 0; // used to establish next checkPlayHead
-
-        let indices = this.updateTranscriptVisualState(this.currentTime);
-        let index = indices.currentWordIndex;
-
+        const indices = this.updateTranscriptVisualState(this.currentTime);
+        const index = indices.currentWordIndex;
         if (index > 0) {
-          newPara = this.scrollToParagraph(indices.currentParentElementIndex, index);
+          this.scrollToParagraph(indices.currentParentElementIndex, index);
         }
 
-        //minimizedMode is still experimental - it changes document.title upon every new word
         if (this.minimizedMode) {
-          const elements = transcript.querySelectorAll('[data-m]');
+          const elements = this.transcript.querySelectorAll('[data-m]');
           let currentWord = '';
           let lastWordIndex = this.wordIndex;
 
           for (let i = 0; i < elements.length; i++) {
-            if ((' ' + elements[i].className + ' ').indexOf(' active ') > -1) {
+            if (elements[i].classList.contains('active')) {
               currentWord = elements[i].innerHTML;
               this.wordIndex = i;
             }
           }
 
-          let textShot = '';
-
-          if (this.wordIndex != lastWordIndex) {
-            textShot = textShot + currentWord;
+          if (this.wordIndex !== lastWordIndex) {
+            document.title = currentWord;
           }
+        }
 
-          if (textShot.length > 16 || newPara === true) {
-            document.title = textShot;
-            textShot = '';
-            newPara = false;
+        if (this.webMonetization === true) {
+          //check for payment pointer
+          let activeElements = this.transcript.getElementsByClassName('active');
+          let paymentPointer = this.checkPaymentPointer(activeElements[activeElements.length - 1]);
+    
+          if (paymentPointer !== null) {
+            let metaElements = document.getElementsByTagName('meta');
+            let wmMeta = document.querySelector("meta[name='monetization']");
+            if (wmMeta === null) {
+              wmMeta = document.createElement('meta');
+              wmMeta.name = 'monetization';
+              wmMeta.content = paymentPointer;
+              document.getElementsByTagName('head')[0].appendChild(wmMeta);
+            } else {
+              wmMeta.name = 'monetization';
+              wmMeta.content = paymentPointer;
+            }
           }
         }
 
+        let interval = 0;
         if (this.wordArr[index]) {
-          interval = parseInt(this.wordArr[index].n.getAttribute('data-m') - this.currentTime * 1000);
-        }
-      }
-      if (this.webMonetization === true) {
-        //check for payment pointer
-        let activeElements = this.transcript.getElementsByClassName('active');
-        let paymentPointer = this.checkPaymentPointer(activeElements[activeElements.length - 1]);
-  
-        if (paymentPointer !== null) {
-          let metaElements = document.getElementsByTagName('meta');
-          let wmMeta = document.querySelector("meta[name='monetization']");
-          if (wmMeta === null) {
-            wmMeta = document.createElement('meta');
-            wmMeta.name = 'monetization';
-            wmMeta.content = paymentPointer;
-            document.getElementsByTagName('head')[0].appendChild(wmMeta);
-          } else {
-            wmMeta.name = 'monetization';
-            wmMeta.content = paymentPointer;
-          }
+          interval = this.wordArr[index].n.getAttribute('data-m') - this.currentTime * 1000;
         }
+
+        this.timer = setTimeout(() => this.checkPlayHead(), interval + 1);
       }
-      this.timer = setTimeout(() => {
-        this.checkPlayHead();
-      }, interval + 1); // +1 to avoid rounding issues (better to be over than under)
     } else {
       this.clearTimer();
     }
-  };
+  }
 
   checkPaymentPointer = element => {
     let paymentPointer = null;
@@ -715,39 +695,34 @@ class HyperaudioLite {
         return this.checkPaymentPointer(parent);
       }
     }
-  };
-
-  updateTranscriptVisualState = (currentTime) => {
+  }
 
+  // Update the visual state of the transcript based on the current time
+  updateTranscriptVisualState(currentTime) {
     let index = 0;
     let words = this.wordArr.length - 1;
 
-    // Binary search https://en.wikipedia.org/wiki/Binary_search_algorithm
     while (index <= words) {
-      const guessIndex = index + ((words - index) >> 1); // >> 1 has the effect of halving and rounding down
-      const difference = this.wordArr[guessIndex].m / 1000 - currentTime; // wordArr[guessIndex].m represents start time of word
+      const guessIndex = index + ((words - index) >> 1);
+      const difference = this.wordArr[guessIndex].m / 1000 - currentTime;
 
       if (difference < 0) {
-        // comes before the element
         index = guessIndex + 1;
       } else if (difference > 0) {
-        // comes after the element
         words = guessIndex - 1;
       } else {
-        // equals the element
         index = guessIndex;
         break;
       }
     }
 
     this.wordArr.forEach((word, i) => {
-      let classList = word.n.classList;
-      let parentClassList = word.n.parentNode.classList;
+      const classList = word.n.classList;
+      const parentClassList = word.n.parentNode.classList;
 
       if (i < index) {
         classList.add('read');
-        classList.remove('unread');
-        classList.remove('active');
+        classList.remove('unread', 'active');
         parentClassList.remove('active');
       } else {
         classList.add('unread');
@@ -755,66 +730,26 @@ class HyperaudioLite {
       }
     });
 
-
     this.parentElements = this.transcript.getElementsByTagName(this.parentTag);
-
-    //remove active class from all paras
-    Array.from(this.parentElements).forEach(el => {
-      if (el.classList.contains('active')) {
-        el.classList.remove('active');
-      }
-    });
-
-    // set current word and para to active
+    Array.from(this.parentElements).forEach(el => el.classList.remove('active'));
 
     if (index > 0) {
-      if (this.myPlayer.paused === false) {
+      if (!this.myPlayer.paused) {
         this.wordArr[index - 1].n.classList.add('active');
       }
+      this.wordArr[index - 1].n.parentNode.classList.add('active');
+    }
 
-      if (this.wordArr[index - 1].n.parentNode !== null) {
-        this.wordArr[index - 1].n.parentNode.classList.add('active');
-      }
-    } 
-
-    // Establish current paragraph index
-    let currentParentElementIndex;
+    const currentParentElementIndex = Array.from(this.parentElements).findIndex(el => el.classList.contains('active'));
 
-    Array.from(this.parentElements).every((el, i) => {
-      if (el.classList.contains('active')) {
-        currentParentElementIndex = i;
-        return false;
-      }
-      return true;
-    });
-
-    let indices = {
+    return {
       currentWordIndex: index,
-      currentParentElementIndex: currentParentElementIndex,
+      currentParentElementIndex
     };
-
-    return indices;
-  };
-
-  setScrollParameters = (duration, delay, offset, container) => {
-    this.scrollerContainer = container;
-    this.scrollerDuration = duration;
-    this.scrollerDelay = delay;
-    this.scrollerOffset = offset;
-  };
-
-  toggleAutoScroll = () => {
-    this.autoscroll = !this.autoscroll;
-  };
-
-  setAutoScroll = state => {
-    this.autoscroll = state;
-  };
+  }
 }
 
-// required for testing
+// Export for testing or module usage
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = { HyperaudioLite };
-}
-
-//export default HyperaudioLite;
+}
\ No newline at end of file
diff --git a/wp-hyperaudio/js/share-this-clipboard.js b/wp-hyperaudio/js/share-this-clipboard.js
deleted file mode 100644
index f11c3aa..0000000
--- a/wp-hyperaudio/js/share-this-clipboard.js
+++ /dev/null
@@ -1,17 +0,0 @@
-!function(e,r){
-  "object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r((e=e||self).ShareThisViaClipboard={})
-}
-(this,(
-function(e){
-  "use strict";
-  e.getShareUrl = function(text,refUrl){
-    const saneText = text.replaceAll("'", "`");
-    const cbText = "&quot;" + saneText + "&quot; " + refUrl;
-    return `onclick="navigator.clipboard.writeText('${cbText}');alert('copied the following text to the clipboard – ${cbText}')"`;
-  },
-  e.name="clipboard",
-  e.render = function(text, rawText, refUrl){
-    return"<a "+this.getShareUrl(text,refUrl)+' rel="noopener nofollow noreferrer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-9 -9 600 600"><path d="m161,152.9h190c0.1,0 0.1,0 0.2,0 10.8,0 19.6-7.1 19.6-16 0-1.5-14.1-82.7-14.1-82.7-1.3-7.9-9.6-13.8-19.4-13.8l-61.7,.1v-13.5c0-8.8-8.8-16-19.6-16-10.8,0-19.6,7.1-19.6,16v13.6l-61.8,.1c-9.8,0-18,5.9-19.4,13.8l-13.7,80.3c-1.2,14.3 13.5,18.1 19.5,18.1z" fill="currentcolor"/><path d="m427.5,78.9h-26.8c0,0 9.3,53.5 9.3,58 0,30.4-26.4,55.2-58.8,55.2h-190.2c-19.6,0.4-63.3-14.7-58.1-63.9l8.4-49.2h-26.8c-10.8,0-19.6,8.8-19.6,19.6v382.9c0,10.8 8.8,19.6 19.6,19.6h343c10.8,0 19.6-8.8 19.6-19.6v-383c0-10.8-8.8-19.6-19.6-19.6zm-76.5,320.1h-190c-10.8,0-19.6-8.8-19.6-19.6 0-10.8 8.8-19.6 19.6-19.6h190c10.8,0 19.6,8.8 19.6,19.6 0,10.8-8.7,19.6-19.6,19.6zm0-110.3h-190c-10.8,0-19.6-8.8-19.6-19.6 0-10.8 8.8-19.6 19.6-19.6h190c10.8,0 19.6,8.8 19.6,19.6 0,10.8-8.7,19.6-19.6,19.6z" fill="currentcolor"/></svg></a>'
-  },
-  Object.defineProperty(e,"__esModule",{value:!0})
-}));
diff --git a/wp-hyperaudio/js/share-this-twitter.js b/wp-hyperaudio/js/share-this-twitter.js
deleted file mode 100644
index bbc2b79..0000000
--- a/wp-hyperaudio/js/share-this-twitter.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.ShareThisViaTwitter=e.ShareThisViaTwitter||{})}(this,function(e){"use strict";function t(e,t,n){var r=this.getText(e);return'<a href="'+this.getShareUrl(r,n)+'" target="_blank" rel="noopener nofollow noreferrer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 20 20"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill="currentcolor"/></svg></a>'}function n(e){var t=e.trim();return t.length>i-2&&(t=t.slice(0,i-3).trim()+"…"),"“"+t+"”"}function r(e,t){return"https://twitter.com/share?text="+encodeURIComponent(e)+"&url="+encodeURIComponent(t)}function o(e,t){e.preventDefault(),t.ownerDocument.defaultView.open(t.firstChild.href,"share_via_twitter","height=440,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,width=640").opener=null}var i=120;e.render=t,e.getText=n,e.getShareUrl=r,e.action=o,e.name="twitter",Object.defineProperty(e,"__esModule",{value:!0})});
diff --git a/wp-hyperaudio/js/share-this.js b/wp-hyperaudio/js/share-this.js
deleted file mode 100644
index 4885a6c..0000000
--- a/wp-hyperaudio/js/share-this.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.ShareThis=t()}(this,function(){"use strict";function e(e){var t=e.document.body,n="static"===e.getComputedStyle(t).position?t.parentNode:t;return n.getBoundingClientRect()}function t(e,t){return h||(h=o(e)),e[h](t)}function n(e,n){for(var r=e;r&&(1!==r.nodeType||!t(r,n));)r=r.parentNode;return r}function r(e,t){var n=e.compareDocumentPosition(t);return!n||(16&n)>0}function o(e){for(var t="atchesSelector",n=["matches","m"+t,"webkitM"+t,"mozM"+t,"msM"+t,"oM"+t],r=0;r<n.length;r++){var o=n[r];if(e[o])return o}}function i(e,t){for(var n=0;n<e.length;n++){var r=e[n];if(r.name===t)return r}}function a(e,t){if(t&&"object"===("undefined"==typeof t?"undefined":m(t)))for(var n in t)e[n]=t[n];return e}function c(e){return"function"==typeof e}function u(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function f(e){if(e.isCollapsed)return!0;var t=e.anchorNode.compareDocumentPosition(e.focusNode);return t?(4&t)>0:e.anchorOffset<e.focusOffset}function l(e,t){var n=void 0,r=e.getClientRects(),o=[].slice.bind(r);if(t){for(var i=1/0,a=r.length;a--;){var c=r[a];if(c.left>i)break;i=c.left}n=o(a+1)}else{for(var f=-(1/0),l=0;l<r.length;l++){var s=r[l];if(s.right<f)break;f=s.right}n=o(0,l)}return{top:Math.min.apply(Math,u(n.map(function(e){return e.top}))),bottom:Math.max.apply(Math,u(n.map(function(e){return e.bottom}))),left:n[0].left,right:n[n.length-1].right}}function s(e,t){var o=e.cloneRange();if(e.collapsed||!t)return o;var i=n(e.startContainer,t);return i?r(i,e.endContainer)||o.setEnd(i,i.childNodes.length):(i=n(e.endContainer,t),i?o.setStart(i,0):o.collapse()),o}function d(t,n,r){var o=r.document,i=o.defaultView,a=i.getSelection(),c=f(a),u=l(n,c),s=e(i),d=t.style;c?d.right=o.documentElement.clientWidth-u.right+s.left+"px":d.left=u.left-s.left+"px",d.width=u.right-u.left+"px",d.height=u.bottom-u.top+"px",d.top=u.top-s.top+"px",d.position="absolute",t.className=r.popoverClass}function p(e,t){var r=n(t.target,"["+g+"]");if(r){var o=r.getAttribute(g),a=i(e,o);a&&c(a.action)&&a.action(t,r)}}function v(e){return{createPopover:function(){var t=e.createElement("div");return t.addEventListener("click",function(e){p(this.sharers,e)}),t},attachPopover:function(t){e.body.appendChild(t)},removePopover:function(e){var t=e.parentNode;t&&t.removeChild(e)}}}var h=void 0,m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},g="data-share-via",y=function(e,t,n,r){var o=e.shareUrl||e.document.defaultView.location;return"<ul>"+t.map(function(e){return'<li data-share-via="'+e.name+'">'+e.render.call(e,n,r,o)+"</li>"}).join("")+"</ul>"},b=void 0,C=["selectionchange","mouseup","touchend","touchcancel"],S=function(e){function t(e){g.addEventListener(e,o)}function n(e){g.removeEventListener(e,o)}function r(){E&&d(E,i(),p)}function o(e){var t=e.type,n="selectionchange"===t;!E!==n&&setTimeout(function(){var e=i();e?u(e):f()},10)}function i(){var e=S.getSelection(),t=e.rangeCount&&e.getRangeAt(0);if(t){var n=s(t,p.selector);if(!n.collapsed&&n.getClientRects().length)return n}}function u(e){var t=!E,n=e.toString(),r=p.transformer(n),o=p.sharers.filter(l.bind(null,r,n));return o.length?(t&&(E=M.createPopover()),E.sharers=o,E.innerHTML=y(p,o,r,n),d(E,e,p),void(t&&(M.attachPopover(E),c(p.onOpen)&&p.onOpen(E,r,n)))):void(E&&f())}function f(){E&&(M.removePopover(E),E=b,c(p.onClose)&&p.onClose())}function l(e,t,n){var r=n.active;return c(r)?r(e,t):r===b||r}var p=(Object.assign||a)({document:document,selector:"body",sharers:[],popoverClass:"share-this-popover",transformer:function(e){return e.trim().replace(/\s+/g," ")}},e||{}),h=!1,m=!1,g=b,S=b,E=b,M=b;return{init:function(){return!h&&(g=p.document,S=g.defaultView,S.getSelection?(C.forEach(t),S.addEventListener("resize",r),M=v(g),h=!0):(console.warn("share-this: Selection API isn't supported"),!1))},destroy:function(){return!(!h||m)&&(C.forEach(n),S.removeEventListener("resize",r),f(),g=b,S=b,m=!0)}}};return S});

From 216698f0b4fb9bdfe72368700a717942268dd59a Mon Sep 17 00:00:00 2001
From: Mark Boas <markb@happyworm.com>
Date: Thu, 22 Aug 2024 13:18:51 +0200
Subject: [PATCH 2/2] update popover styling etc

---
 wp-hyperaudio/hyperaudio.php | 50 +++++++++++++++++++++++++++++++++---
 1 file changed, 47 insertions(+), 3 deletions(-)

diff --git a/wp-hyperaudio/hyperaudio.php b/wp-hyperaudio/hyperaudio.php
index d0db383..677f319 100644
--- a/wp-hyperaudio/hyperaudio.php
+++ b/wp-hyperaudio/hyperaudio.php
@@ -139,7 +139,42 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
 
   .hyperaudio-transcript a {
     text-decoration:none !important;
-  }';
+  }
+    
+  #popover {
+    position: absolute;
+    background-color: #f9f9f9;
+    
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    display: none;
+    z-index: 1;
+    font-size: small;
+    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
+  }
+
+  #popover a {
+    text-decoration: none; 
+    color: #303030;
+    cursor: pointer;
+  }
+
+  #clipboard-text {
+    font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; 
+    font-size: 0.8em;
+    line-height: 1.2;
+  }
+
+  #clipboard-confirm {
+    font-size: medium;
+  }
+
+  #clipboard-dialog {
+    width: 50%;
+  }
+  ';
 
   if (!is_null($fontfamily)) {
     $o .=' .hyperaudio-transcript {
@@ -170,8 +205,7 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
   }
 
 
-  $o .=' 
-  .share-this-popover{max-width:8em;pointer-events:none;-webkit-filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));-webkit-animation:a .3s;animation:a .3s}.share-this-popover:before{content:"";position:absolute;bottom:100%;left:50%;width:0;height:0;margin:.25em -.5em;border-width:.5em .5em 0;border-style:solid;border-color:#333 transparent}.share-this-popover>ul{pointer-events:auto;list-style:none;padding:0;margin:-.75em 0 0;white-space:nowrap;background:#333;color:#fff;border-radius:.25em;position:absolute;left:50%;-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.share-this-popover>ul>li{display:inline-block;width:2em;height:2em;line-height:2em;text-align:center}.share-this-popover>ul>li>a{display:inline-block;width:100%;height:100%;color:inherit;box-sizing:border-box;padding:.35em}.share-this-popover>ul>li>a:focus,.share-this-popover>ul>li>a:hover{background:hsla(0,0%,100%,.25)}@media (pointer:coarse){.share-this-popover{font-size:150%}.share-this-popover:before{bottom:auto;top:100%;border-width:0 .5em .5em;margin-top:0}.share-this-popover>ul{top:100%;transform:translateX(-50%);margin:.5em 0 0}}@media (max-width:575px){.share-this-popover{left:0!important;right:0!important;width:auto!important;max-width:none}.share-this-popover:before{bottom:auto;top:100%;border-width:0 .5em .5em;margin-top:0}.share-this-popover>ul{top:100%;transform:translateX(-50%);margin:.5em 0 0;left:0;width:100%;transform:none;border-radius:0;text-align:center}}@-webkit-keyframes a{0%{-webkit-transform:translateY(-3em);opacity:0}80%{-webkit-transform:translateY(.5em);opacity:1}to{-webkit-transform:translateY(0)}}@keyframes a{0%{transform:translateY(-3em);opacity:0}80%{transform:translateY(.5em);opacity:1}to{transform:translateY(0)}}</style>';
+  $o .='</style>';
 
   $o .='<!--<p>
     <form id="searchForm" style="float:right">
@@ -206,6 +240,16 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
     }
 
     $o .= '</video>';
+
+    $o .= '<div id="popover"><a id="popover-btn">Copy to clipboard <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="-130 -110 600 600"><path d="m161,152.9h190c0.1,0 0.1,0 0.2,0 10.8,0 19.6-7.1 19.6-16 0-1.5-14.1-82.7-14.1-82.7-1.3-7.9-9.6-13.8-19.4-13.8l-61.7,.1v-13.5c0-8.8-8.8-16-19.6-16-10.8,0-19.6,7.1-19.6,16v13.6l-61.8,.1c-9.8,0-18,5.9-19.4,13.8l-13.7,80.3c-1.2,14.3 13.5,18.1 19.5,18.1z" fill="currentcolor"/><path d="m427.5,78.9h-26.8c0,0 9.3,53.5 9.3,58 0,30.4-26.4,55.2-58.8,55.2h-190.2c-19.6,0.4-63.3-14.7-58.1-63.9l8.4-49.2h-26.8c-10.8,0-19.6,8.8-19.6,19.6v382.9c0,10.8 8.8,19.6 19.6,19.6h343c10.8,0 19.6-8.8 19.6-19.6v-383c0-10.8-8.8-19.6-19.6-19.6zm-76.5,320.1h-190c-10.8,0-19.6-8.8-19.6-19.6 0-10.8 8.8-19.6 19.6-19.6h190c10.8,0 19.6,8.8 19.6,19.6 0,10.8-8.7,19.6-19.6,19.6zm0-110.3h-190c-10.8,0-19.6-8.8-19.6-19.6 0-10.8 8.8-19.6 19.6-19.6h190c10.8,0 19.6,8.8 19.6,19.6 0,10.8-8.7,19.6-19.6,19.6z" fill="currentcolor"/></svg></a></div>
+
+  <dialog id="clipboard-dialog">
+      <h4>The following text has been copied to the clipboard</h4>
+      <p id=clipboard-text></p>
+      <div style="text-align: right;">
+        <button id="clipboard-confirm">ok</button>
+      </div>
+  </dialog>';
   }
 
   $o .='</div>';