84 active colour fix and hyperaudio lite version bump

wp-hyperaudio/hyperaudio-admin.php

@@ -199,6 +199,7 @@ function hyperaudio_options_page()
       <tr><td><code>media-height</code></td><td><code>640px</code></td><td>set the height of the audio or video</td></tr>
       <tr><td><code>font-family</code></td><td><code>Arial, Helvetica, sans-serif;</code></td><td>set the font family of the transcript</td></tr>
       <tr><td><code>id</code></td><td><code>mytranscript</code></td><td>sets the id of the trancript for sharing purposes</td></tr>
+      <tr><td><code>show-active</code></td><td><code>true</code></td><td>highlights the word being played in a different colour. (<code>false</code> by default)</td></tr>
       <tr><td><code>webmonetization</code></td><td><code>true</code></td><td>enables <a href="https://webmonetization.org/">Web Monetization</a> (<code>false</code> by default)</td></tr>
       </table>
     </p>

wp-hyperaudio/hyperaudio.php

@@ -32,6 +32,7 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
   $language = "en";
   $trackLabel = "English";
   $webmonetization = false;
+  $showActive = false;
 
   if (isset($atts['src'])) $src = esc_html__($atts['src']);
   if (isset($atts['width'])) $width = $atts['width'];
@@ -48,6 +49,8 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
   if (isset($atts['track-label'])) $trackLabel = $atts['track-label'];
 
   if (isset($atts['webmonetization'])) $webmonetization = $atts['webmonetization'];
+  if (isset($atts['show-active'])) $showActive = $atts['show-active'];
+
 
 
   $transcript = preg_replace( "/\r|\n/", "", $transcript);
@@ -120,7 +123,7 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
   .speaker {
     font-weight: bold;
   }
-  
+
   .hyperaudio-transcript a {
     text-decoration:none !important;
   }';
@@ -131,6 +134,13 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
     }';
   }
 
+  if ($showActive == true) {
+    $o .=' .hyperaudio-transcript .active {
+      color: #0000cc !important;
+    }';
+  }
+
+
   $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>';
 

wp-hyperaudio/js/hyperaudio-lite.js

@@ -1,5 +1,5 @@
 /*! (C) The Hyperaudio Project. MIT @license: en.wikipedia.org/wiki/MIT_License. */
-/*! Version 2.0.11 */
+/*! Version 2.0.13 */
 
 'use strict';
 
@@ -45,6 +45,7 @@ class HyperaudioLite {
     this.webMonetization = w;
     this.highlightedText = false;
     this.start = null;
+
 
     if (this.autoscroll === true) {
       this.scroller = window.Velocity || window.jQuery.Velocity;
@@ -56,7 +57,9 @@ class HyperaudioLite {
 
     this.wordArr = this.createWordArray(words);
 
-    this.paras = this.transcript.getElementsByTagName('p');
+    this.parentTag = words[0].parentElement.tagName;
+    this.parentElements = this.transcript.getElementsByTagName(this.parentTag);
+
 
     this.player = document.getElementById(mediaElementId);
 
@@ -109,10 +112,10 @@ class HyperaudioLite {
       };
     }
 
-    this.paraIndex = 0;
+    this.parentElementIndex = 0;
 
     words[0].classList.add('active');
-    this.paras[0].classList.add('active');
+    this.parentElements[0].classList.add('active');
 
     let playHeadEvent = 'click';
 
@@ -132,7 +135,7 @@ class HyperaudioLite {
       let index = indices.currentWordIndex;
 
       if (index > 0) {
-        this.scrollToParagraph(indices.currentParaIndex, index);
+        this.scrollToParagraph(indices.currentParentElementIndex, index);
       }
     }
 
@@ -321,7 +324,7 @@ class HyperaudioLite {
     }
   }
 
-  scrollToParagraph = (currentParaIndex, index) => {
+  scrollToParagraph = (currentParentElementIndex, index) => {
     let newPara = false;
     let scrollNode = this.wordArr[index - 1].n.parentNode;
 
@@ -330,7 +333,7 @@ class HyperaudioLite {
       scrollNode = this.wordArr[index - 1].n;
     }
 
-    if (currentParaIndex != this.paraIndex) {
+    if (currentParentElementIndex != this.parentElementIndex) {
 
       if (typeof this.scroller !== 'undefined' && this.autoscroll === true) {
         if (scrollNode !== null) {
@@ -352,13 +355,13 @@ class HyperaudioLite {
           // the wordlst needs refreshing
           let words = this.transcript.querySelectorAll('[data-m]');
           this.wordArr = this.createWordArray(words);
-          this.paras = this.transcript.getElementsByTagName('p');
+          this.parentElements = this.transcript.getElementsByTagName(this.parentTag);
         }
       }
 
       newPara = true;
 
-      this.paraIndex = currentParaIndex;
+      this.parentElementIndex = currentParentElementIndex;
     }
     return(newPara);
   }
@@ -384,7 +387,7 @@ class HyperaudioLite {
       let index = indices.currentWordIndex;
 
       if (index > 0) {
-        newPara = this.scrollToParagraph(indices.currentParaIndex, index);
+        newPara = this.scrollToParagraph(indices.currentParentElementIndex, index);
       }
 
       //minimizedMode is still experimental - it changes document.title upon every new word
@@ -500,40 +503,41 @@ class HyperaudioLite {
       }
     });
 
-    this.paras = this.transcript.getElementsByTagName('p');
+    this.parentElements = this.transcript.getElementsByTagName(this.parentTag);
 
     //remove active class from all paras
 
-    Array.from(this.paras).forEach(para => {
-      if (para.classList.contains('active')) {
-        para.classList.remove('active');
+    Array.from(this.parentElements).forEach(el => {
+      if (el.classList.contains('active')) {
+        el.classList.remove('active');
       }
     });
 
     // set current word and para to active
 
     if (index > 0) {
       this.wordArr[index - 1].n.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 currentParaIndex;
+    let currentParentElementIndex;
 
-    Array.from(this.paras).every((para, i) => {
-      if (para.classList.contains('active')) {
-        currentParaIndex = i;
+    Array.from(this.parentElements).every((el, i) => {
+      if (el.classList.contains('active')) {
+        currentParentElementIndex = i;
         return false;
       }
       return true;
     });
 
     let indices = {
       currentWordIndex: index,
-      currentParaIndex: currentParaIndex,
+      currentParentElementIndex: currentParentElementIndex,
     };
 
     return indices;
@@ -560,4 +564,4 @@ if (typeof module !== 'undefined' && module.exports) {
   module.exports = { HyperaudioLite };
 }
 
-//export default HyperaudioLite;
+//export default HyperaudioLite;