Merge branch 'preprod'

README.md

@@ -28,8 +28,7 @@ Some links :
 * [How to cite a podcast](https://www.buzzsprout.com/blog/cite-podcast), now you can support time positions URL
 * Main author : [Xavier "dascritch" Mouton-Dubosc](http://dascritch.com)
 
-Version : 6.6 [Licence GPL 3](LICENSE)
-
+Version : 6.6.3 [Licence GPL 3](LICENSE)
 
 Purpose
 -------
@@ -50,6 +49,17 @@ During the page life :
 <a href="#sound&t=20m45s">This link starts the upper player at 20:45</a>
 
 
+HOW TO install
+--------------
+
+A unique and lightweight js file to install, without any dependencies, 
+
+* [How to install, deploy and customize on your server](INSTALL)
+* [You can try playing with our live configurator tool](LIVE)
+* See [basic examples](examples) and [applications with advanced use cases](applications) 
+* [Known problems and misconfigurations](TROUBLESHOOTING)
+
+
 Features
 ---------
 
@@ -95,14 +105,6 @@ When the interface got the focus, you can use those keys :
 For handheld users, a long press on the timeline will show you another interface for a more precise navigation.
 
 
-HOW TO install
---------------
-
-* [How install, deploy and customize on your server](INSTALL)
-* [You can try playing with our live configurator tool, event it isn't perfect yet.](LIVE)
-* [Known problems and misconfigurations](TROUBLESHOOTING)
-
-
 Participate
 -----------
 
@@ -112,8 +114,8 @@ Participate
 * [What to do, next](https://github.com/dascritch/cpu-audio/blob/master/TODO.md)
 
 
-Versions
---------
+Versions history
+----------------
 
 * June 2019 : 6 , plane and points, public API stabilization
 * April 2018 : 5 , [forking to cpu-audio, WebComponent version](https://github.com/dascritch/ondemiroir-audio-tag/issues/7#issuecomment-382043789)
@@ -126,6 +128,8 @@ Versions
 * June 2014 : 0.2 , proof of concept
 * October 2012 : first version, trashed
 
+[See releases for detailled changes](https://github.com/dascritch/cpu-audio/releases)
+
 
 Credits
 -------

RELEASE.md

@@ -1,4 +1,4 @@
-RELEASE NOTES Version 6.6.2
+RELEASE NOTES version 6.6.3
 ===========================
 
 New features
@@ -28,6 +28,12 @@ Corrections
  * We try to preload duration metadata when the mouse cursors goes over the timeline on a not know duration and not streamed source ([#88](#88))
  * github-pages trigger strange problems, numerous CPU-audio instances
  * Chrome returned more than one activeCue, strange regression
+ * Lot of corrections in chapters panels/tracks due to surprising behaviour of Chrome :
+   * multiple TextTracks.activeCues creating race conflicts but only in some specific conditions,
+   * chapter tracks not displayed if duration not seen in time, refreshing timeline when duration is certainly known,
+   * unuseful refreshes
+ * Removed Chapter editor from github pages due to a sync problem. Now available [as a standalone and not yet skinned page](applications/chapters_editor.html) with better explanations
+
 
 Back-end
 --------
@@ -41,10 +47,13 @@ Back-end
    * Erroneous `@brief` annotations changed to `@summary`
    * … but a lot of bugs in Closure, as TextTracks objects aren't declared as iterable, a surprising “*Property replaceAll never defined on String*” and so on…
  * We have a [surprising bug in Chrome that avoid to use `audiotag.currentTime=<number>` ONLY if the source is hosted on localhost](https://stackoverflow.com/questions/52620284/make-html5-video-start-at-specified-currenttime-in-chrome), if your local server doesn't support HTTP response 206 (partial content). If you need to local test on Chrome, please user file:/// protocol or a complete web server.
+ * An `applications` sub-directory is created by the way
+ * Mask error from Google Closure that doesn't `recognize string.replace().replaceAll()`
  * Primitives for package github ([#86](#86)). “to be done”
 
+
 Making of
----------
+=========
 
 [Those posts are mainly in French, sorry](https://dascritch.net/serie/cpu-audio)
 

_includes/footer.html

@@ -4,7 +4,7 @@ <h3><a href="https://dascritch.github.io/cpu-audio/">CPU Audio webcomponent</a><
     <li><a href="FEATURES">Features</a></li>
     <li><a href="INSTALL">Install</a></li>
     <li><a href="API">API</a></li>
-    <li><a href="LIVE">Live conf.</a></li>
+    <li><a href="LIVE">Config helper</a></li>
     <li><a href="TROUBLESHOOTING">Troubles</a></li>
     <li><a href="https://github.com/dascritch/cpu-audio/blob/master/CONTRIBUTING.md">Contribute</a></li>
     <li><a href="https://github.com/dascritch/cpu-audio/">Code</a></li>

examples/Style_highlight_page_chapters.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+    <meta charset="UTF-8" />
+    <title>CPU-Audio API example : Highlight page chapters</title>
+
+    <script src="../dist/cpu-audio.js" async></script>
+    <style>
+        /* 
+            For each reached chapter, declare which chapters must be hightlighted.
+            During a chapter, the cpu-audio player will add specific class on document <body> tag, as here :
+            .cpu_playing_tag_«highlights»_cue_«chap-1»   
+            - «highlights» refers to the Id of the <audio id="highlights" controls> tag
+            - «chap-1» is the cue name, in the "../tests-assets/chapters-ex0085.vtt" file
+            - syntax seems strange, but those characters are valids, per https://www.w3.org/TR/CSS21/syndata.html#characters
+
+
+        */
+        #demo li {
+            padding : 5px;
+            margin : 5px;
+        }
+        /*
+            in-text chapters in standby mode
+        */
+        #demo li {
+            opacity : 0.5;
+        }
+
+        /*
+            in-text chapters during chapter playing. Sorry, this is verbose
+        */
+        .cpu_playing_tag_«highlights»_cue_«chap-1» #highlights_c1,
+        .cpu_playing_tag_«highlights»_cue_«chap-2» #highlights_c2,
+        .cpu_playing_tag_«highlights»_cue_«chap-3» #highlights_c3,
+        .cpu_playing_tag_«highlights»_cue_«chap-4» #highlights_c4,
+        .cpu_playing_tag_«highlights»_cue_«chap-5» #highlights_c5,
+        .cpu_playing_tag_«highlights»_cue_«chap-6» #highlights_c6,
+        .cpu_playing_tag_«highlights»_cue_«chap-7» #highlights_c7,
+        .cpu_playing_tag_«highlights»_cue_«chap-8» #highlights_c8,
+        .cpu_playing_tag_«highlights»_cue_«chap-9» #highlights_c9,
+        .cpu_playing_tag_«highlights»_cue_«chap-10» #highlights_c10 {
+            opacity : 1;
+            background : #ddd;
+            outline : 1px solid black;
+        }
+    </style>
+
+<body>
+
+<h1 id="highlighting-text-amond-chapters">Highlighting text amond chapters</h1>
+
+<p>In this example, elements of the host page are highlighted when the player show some chapters, with only CSS and HTML.</p>
+<details>
+    <summary>Technical explanations</summary>
+    <p>
+        If you use a chapter track with name chapters <a href="applications/chapters_editor.html">(you can generate them here)</a>, you can use a CSS rule to highlight a portion of your text with the playing audio.
+    </p>
+    <p>
+        This feature works if a chapter &lt;track&gt; is correctly loaded and interpreted by cpu-audio. Once loaded interpreted, you can hide chapter panel and tracks in the player (with hide="chapters panels"), the feature and so the css effects will still work.
+    </p>
+    <p>
+        Please note : This example must be run in a web server, not via file:/// protocol, due to CSP/CORS requirements from browsers. Please note that obviously a chapter track is unuseful for a live streamed audio.<br />
+        Also note that the class is set when the page is loaded and before the element is playing only if the audio id is expressed in the hash url
+    </p>
+    <p>
+        The context-style feature was inspired by the now defunct BBC mini website hommage to their 1980s TV show about computers.
+    </p>
+
+</details>
+<hr />
+
+
+<cpu-audio title="Ex0085 Le Mystère Enigma" poster="https://cpu.dascritch.net/public/Images/Emissions/.1805-Ex0085-Enigma_m.jpg" canonical="https://cpu.dascritch.net/post/2018/05/17/Ex0085-Histoires-de-la-cryptographie%2C-2%C3%A8me-partie-%3A-Le-myst%C3%A8re-d-Enigma" twitter="@cpuprogramme">
+    <audio id="highlights" data-title="Ex0085 Le Mystère Enigma" data-poster="https://cpu.dascritch.net/public/Images/Emissions/.1805-Ex0085-Enigma_m.jpg" data-canonical="https://cpu.dascritch.net/post/2018/05/17/Ex0085-Histoires-de-la-cryptographie%2C-2%C3%A8me-partie-%3A-Le-myst%C3%A8re-d-Enigma" data-twitter="@cpuprogramme" controls>
+        <source src="https://dascritch.net/vrac/Emissions/CPU/0085-CPU%2817-05-18%29.ogg" type="audio/ogg">
+        <source src="https://dascritch.net/vrac/Emissions/CPU/podcast/0085-CPU%2817-05-18%29.mp3" type="audio/mpeg">
+        <track kind="chapters" src="../tests-assets/chapters-ex0085.vtt" default="">
+    </audio>
+
+    <!-- Fallback messages -->
+    <div class="cpu-audio-without-webcomponents too-old">
+        <h2>Player didn't start (yet ?)</h2>
+        <p>
+            Your browser is loading very slowly, or doesn't support WebComponent fairly enough.
+            Following examples are <strong>not fully functionnal</strong>, as the interface is not shown and the browser display its native player. This is intentional.<br>
+            Only the hash-links functions works.
+        </p>
+    </div>
+</cpu-audio>
+
+<div id="demo">
+    <ul>
+        <li id="highlights_c1"><a href="#highlights&amp;t=1m17s">Bonjour à toi, Enfant du Futur Immédiat : Des chiffres et des lettres</a></li>
+        <li id="highlights_c2"><a href="#highlights&amp;t=6m28s">Lexique : Casser un chiffrement</a></li>
+        <li id="highlights_c3">music. joke intented by the song name</li>
+        <li id="highlights_c4"><a href="#highlights&amp;t=12m45s">Plantage : La chute de l'Empire du chiffre Allemand</a></li>
+        <li id="highlights_c5"><a href="#highlights&amp;t=20m45s">Artefact du passé : La machine Enigma</a></li>
+        <li id="highlights_c6">music. French band name, spanish song name, german lyrics</li>
+        <li id="highlights_c7"><a href="#highlights&amp;t=33m19s">Histoire : Les génies du Biuro Szyfrów</a></li>
+        <li id="highlights_c8"><a href="#highlights&amp;t=38m35s">Ainsi naquit : Bletchley Park, le premier campus technologique</a></li>
+        <li id="highlights_c9">music. Obligatory musical reference to the Turing biopic</li>
+        <li id="highlights_c10"><a href="#highlights&amp;t=50m03s">Le Gourou : Alan Turing</a></li>
+    </ul>
+</div>
+
+
+</body>
+</html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpu-audio",
-  "version": "6.6.0",
+  "version": "6.6.3",
   "description": "An audio WebComponent to provide an user-interface, timecoded links and some other features to an <audio> tag",
   "main": "index.js",
   "directories": {

src/11_utils.js

@@ -107,6 +107,15 @@ function escapeHTML(text) {
 	return out;
 }
 
+/**
+ * @summary check if an element.id is cited in hash url
+ *
+ * @param      {string}   id      element id to check
+ * @return     {boolean}  is in hash
+ */
+function id_in_hash(id) {
+	return location.hash.substr(1).split('&').includes(id);
+}
 
 
 /**

src/30_trigger.js

@@ -14,6 +14,12 @@ const trigger = {
 	// @private
 	_last_play_error : false,
 
+	/**
+	 * @summary If audio position out of begin/end borders, remove borders
+	 * @private
+	 *
+	 * @param      {number}  at      timecode position
+	 */
 	_remove_timecode_outofborders : function(at) {
 		if ( 
 			(at < trigger._timecode_start)
@@ -23,7 +29,6 @@ const trigger = {
 		}
 	},
 
-
 	/**
 	 * @summary    Interprets the hash part of the URL, when loaded or changed
 	 *
@@ -33,6 +38,7 @@ const trigger = {
 	 * @param      {Function}       callback_fx  When done, call a function to end the tests (optional).
 	 */
 	hashOrder : async function(hashcode, callback_fx=undefined) {
+		info('hashOrder')
 		let at_start = true;
 		if (typeof hashcode !== 'string') {
 			at_start = 'at_start' in hashcode;
@@ -485,18 +491,17 @@ const trigger = {
 	/**
 	 * @summary Refresh document body when changing chapter
 	 *
-	 * @param      {Object}   active_cue         The TextTrack actived
+	 * @param      {Object}   active_cue         		The TextTrack actived
+	 * @param      {HTMLAudioElement}   audiotag        Audiotag relative to TextTrack
 	 * 
 	 * To not warns on classList.remove()
 	 * @suppress {checkTypes} 
 	 */
-	cuechange : function(active_cue) {
+	cuechange : function(active_cue, audiotag) {
 		document.body.classList.remove(document.CPU.body_className_playing_cue);
 		// giving a class to document.body, with a syntax according to https://www.w3.org/TR/CSS21/syndata.html#characters
-		if (document.CPU.current_audiotag_playing !== null) {
-			document.CPU.body_className_playing_cue = `cpu_playing_tag_«${document.CPU.current_audiotag_playing.id}»_cue_«${active_cue.id}»`;
-			document.body.classList.add(document.CPU.body_className_playing_cue);
-		}
+		document.CPU.body_className_playing_cue = `cpu_playing_tag_«${audiotag.id}»_cue_«${active_cue.id}»`;
+		document.body.classList.add(document.CPU.body_className_playing_cue);
 	},
 
 
@@ -506,7 +511,6 @@ const trigger = {
 	 * @param      {Object}  event   The event
 	 */
 	update : function(event) {
-		// info(`update ${event.type}`)
 		let audiotag = event.target;
 
 		if ((trigger._timecode_end !== false) && (audiotag.currentTime > trigger._timecode_end)) {