diff --git a/README.md b/README.md index f517bf67..46d421e8 100644 --- a/README.md +++ b/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 : This link starts the upper player at 20:45 +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 ------- diff --git a/RELEASE.md b/RELEASE.md index 49df635b..36c019ba 100644 --- a/RELEASE.md +++ b/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=` 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) diff --git a/_includes/footer.html b/_includes/footer.html index 4126576e..61b69c68 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -4,7 +4,7 @@

CPU Audio webcomponent<
  • Features
  • Install
  • API
    • -
  • Live conf.
    • +
  • Config helper
  • Troubles
  • Contribute
  • Code
    • diff --git a/dist/cpu-audio.js b/dist/cpu-audio.js index ccbf170b..65b15ed0 100644 --- a/dist/cpu-audio.js +++ b/dist/cpu-audio.js @@ -1,7 +1,7 @@ (function(){/* Cpu-Audio: an extension to the hash system to address timecode into audio/video elements. -Version 6.6.2 +Version 6.6.3 Copyright (C) 2014-2021 Xavier "dascritch" Mouton-Dubosc & contributors. License GNU GPL 3 @@ -18,39 +18,39 @@ document.head.appendChild(a);a=document.createElement("template");a.id="CPU__tem document.head.appendChild(a)}document.CPU__template__installed||(null!==document.head?z():document.addEventListener("DOMContentLoaded",z,{passive:!0}));function A(a){"function"===typeof a&&a()}function B(a,b,c){c=void 0===c?document:c;Array.from(c.querySelectorAll(a)).forEach(b)}function C(a){let b=document.createElement("a");b.href="string"!==typeof a?a:a.split("#")[0];return b.href}function D(a){C(window.location.href)===C(a.target.href)&&a.preventDefault()}function E(a){a.addEventListener("click",D)}function F(a){let b=document.createElement("span");b.innerText=a;a=b.innerHTML;b.remove();return a} function G(a){window.console.warn("CPU-AUDIO: ",a)};const H={units:{d:86400,h:3600,m:60,s:1},_is_only_numeric:/^\d+$/,_any_not_numeric:/\D*/g,Infinity:"?",TimeInSeconds:function(a){let b=0;""!==a&&(b=H._is_only_numeric.test(a)?Number(a):-1===a.indexOf(":")?H.SubunitTimeInSeconds(a):H.ColonTimeInSeconds(a));return b},SubunitTimeInSeconds:function(a){let b=0;for(let c in H.units)H.units.hasOwnProperty(c)&&-1!==a.indexOf(c)&&(a=a.split(c),b+=Number(a[0].replace(H._any_not_numeric,""))*H.units[c],a=a[1]);return b},ColonTimeInSeconds:function(a){let b= 0;a=a.split(":");let c=[1,60,3600,86400];for(let d=0;d=f||c){c=!0;let g=Math.floor(a/f);b+=g+d;a-=g*f}}return""===b?"0s":b},SecondsInColonTime:function(a){if(Infinity==a)return H.Infinity;let b="",c=!1;for(let d in H.units)if(H.units.hasOwnProperty(d)){let f=H.units[d];if(a>=f||c){c=!0;let g=Math.floor(a/ -f);b+=""===b?"":":";b+=(10>g&&""!==b?"0":"")+g;a-=g*f}}return 1===b.length?"0:0"+b:2===b.length?"0:"+b:""===b?"0:00":b},SecondsInPaddledColonTime:function(a){if(Infinity==a)return H.Infinity;a=H.SecondsInColonTime(a);return"00:00:00".substr(0,8-a.length)+a},IsoDuration:function(a){return`P${H.SecondsInTime(a).toUpperCase()}`}};const I={_timecode_start:0,_timecode_end:!1,_last_play_error:!1,_remove_timecode_outofborders:function(a){if(aI._timecode_end)I._timecode_start=0,I._timecode_end=!1},hashOrder:async function(a,b){var c=!0;"string"!==typeof a&&(c="at_start"in a,a=location.hash.substr(1));let d="";var f="",g=a.split("&");a=!1;for(let l of g)if(-1===l.indexOf("=")&&""===d)d=l;else{g=l.split("=");let m=g[1];switch(g[0]){case "t":f=m=""!==m?m:"0";a=!0;break;case "autoplay":a= -"1"===m;break;case "auto_play":a="true"===m}}""===f||c&&!a?A(b):(c=f.split(","),f=c[0],I._timecode_start=H.TimeInSeconds(f),I._timecode_end=1I._timecode_start?I._timecode_end:!1),await document.CPU.jumpIdAt(d,f,b),document.CPU.global_controller&&document.CPU.global_controller.build_playlist())},hover:function(a){let b=a.target,c=document.CPU.find_container(b);b.getClientRects();c.show_throbber_at(a.offsetX/b.clientWidth* -c.audiotag.duration)},out:function(a){document.CPU.find_container(a.target).hide_throbber()},preview_container_hover:function(a){var b=a.target;b.id||(b=b.closest("[id]"));null!==b&&(a=document.CPU.find_container(b),b=a.get_point_names_from_id(b.id),a.highlight_point(b[0],b[1]))},throbble:function(a){var b=0;b=a.target;let c=document.CPU.find_container(b).audiotag;if(Infinity===c.duration)I.play(a);else if(document.CPU.current_audiotag_playing&&!document.CPU.is_audiotag_playing(c)&&I.pause(void 0, -document.CPU.current_audiotag_playing),isNaN(c.duration)&&!document.CPU.is_audiotag_streamed(c)){let d=c.CPU_controller();null!==d&&d.update_loading&&d.update_loading(void 0,100*a.offsetX/b.clientWidth);let f={offsetX:a.offsetX,target:a.target};c.addEventListener("loadedmetadata",function(){I.throbble(f)},v);c.setAttribute("preload","metadata")}else b=void 0!==a.at?a.at:a.offsetX/b.clientWidth*c.duration,document.CPU.seekElementAt(c,b),I.play(a)},pause:function(a,b){void 0===b&&(a=a.target,b="AUDIO"=== -a.tagName?a:document.CPU.find_container(a).audiotag);b.pause();document.CPU.current_audiotag_playing=null;window.localStorage.removeItem(b.currentSrc)},play_once:function(a){a=a.target;document.CPU.last_used=a;document.CPU.only_play_one_audiotag&&document.CPU.current_audiotag_playing&&!document.CPU.is_audiotag_playing(a)&&I.pause(void 0,document.CPU.current_audiotag_playing);document.CPU.current_audiotag_playing=a},play:function(a,b){function c(d){I._last_play_error=!1;document.CPU.autoplay&&I.play(d, -b)}void 0===b&&(b=document.CPU.find_container(a.target).audiotag);void 0===a&&I._last_play_error?G("play() prevented because already waiting for focus"):(I._last_play_error=!1,I._remove_timecode_outofborders(b.currentTime),a=b.play(),void 0!==a&&a.then(()=>{document.CPU.had_played=!0}).catch(d=>{I._last_play_error=!0;switch(d.name){case "NotAllowedError":G("Auto-play prevented : Browser requires a manual interaction first.");document.addEventListener("focus",c,v);document.addEventListener("click", +f);b+=""===b?"":":";b+=(10>g&&""!==b?"0":"")+g;a-=g*f}}return 1===b.length?"0:0"+b:2===b.length?"0:"+b:""===b?"0:00":b},SecondsInPaddledColonTime:function(a){if(Infinity==a)return H.Infinity;a=H.SecondsInColonTime(a);return"00:00:00".substr(0,8-a.length)+a},IsoDuration:function(a){return`P${H.SecondsInTime(a).toUpperCase()}`}};const I={_timecode_start:0,_timecode_end:!1,_last_play_error:!1,_remove_timecode_outofborders:function(a){if(aI._timecode_end)I._timecode_start=0,I._timecode_end=!1},hashOrder:async function(a,b){window.console.info("CPU-AUDIO: ","hashOrder");var c=!0;"string"!==typeof a&&(c="at_start"in a,a=location.hash.substr(1));let d="";var f="",g=a.split("&");a=!1;for(let l of g)if(-1===l.indexOf("=")&&""===d)d=l;else{g=l.split("=");let m=g[1];switch(g[0]){case "t":f= +m=""!==m?m:"0";a=!0;break;case "autoplay":a="1"===m;break;case "auto_play":a="true"===m}}""===f||c&&!a?A(b):(c=f.split(","),f=c[0],I._timecode_start=H.TimeInSeconds(f),I._timecode_end=1I._timecode_start?I._timecode_end:!1),await document.CPU.jumpIdAt(d,f,b),document.CPU.global_controller&&document.CPU.global_controller.build_playlist())},hover:function(a){let b=a.target,c=document.CPU.find_container(b);b.getClientRects(); +c.show_throbber_at(a.offsetX/b.clientWidth*c.audiotag.duration)},out:function(a){document.CPU.find_container(a.target).hide_throbber()},preview_container_hover:function(a){var b=a.target;b.id||(b=b.closest("[id]"));null!==b&&(a=document.CPU.find_container(b),b=a.get_point_names_from_id(b.id),a.highlight_point(b[0],b[1]))},throbble:function(a){var b=0;b=a.target;let c=document.CPU.find_container(b).audiotag;if(Infinity===c.duration)I.play(a);else if(document.CPU.current_audiotag_playing&&!document.CPU.is_audiotag_playing(c)&& +I.pause(void 0,document.CPU.current_audiotag_playing),isNaN(c.duration)&&!document.CPU.is_audiotag_streamed(c)){let d=c.CPU_controller();null!==d&&d.update_loading&&d.update_loading(void 0,100*a.offsetX/b.clientWidth);let f={offsetX:a.offsetX,target:a.target};c.addEventListener("loadedmetadata",function(){I.throbble(f)},v);c.setAttribute("preload","metadata")}else b=void 0!==a.at?a.at:a.offsetX/b.clientWidth*c.duration,document.CPU.seekElementAt(c,b),I.play(a)},pause:function(a,b){void 0===b&&(a= +a.target,b="AUDIO"===a.tagName?a:document.CPU.find_container(a).audiotag);b.pause();document.CPU.current_audiotag_playing=null;window.localStorage.removeItem(b.currentSrc)},play_once:function(a){a=a.target;document.CPU.last_used=a;document.CPU.only_play_one_audiotag&&document.CPU.current_audiotag_playing&&!document.CPU.is_audiotag_playing(a)&&I.pause(void 0,document.CPU.current_audiotag_playing);document.CPU.current_audiotag_playing=a},play:function(a,b){function c(d){I._last_play_error=!1;document.CPU.autoplay&& +I.play(d,b)}void 0===b&&(b=document.CPU.find_container(a.target).audiotag);void 0===a&&I._last_play_error?G("play() prevented because already waiting for focus"):(I._last_play_error=!1,I._remove_timecode_outofborders(b.currentTime),a=b.play(),void 0!==a&&a.then(()=>{document.CPU.had_played=!0}).catch(d=>{I._last_play_error=!0;switch(d.name){case "NotAllowedError":G("Auto-play prevented : Browser requires a manual interaction first.");document.addEventListener("focus",c,v);document.addEventListener("click", c,v);b.CPU_connected&&b.CPU_controller().CPU.set_act_container("glow");break;case "NotSupportedError":d("The browser refuses the audio source, probably due to audio format.")}}),document.CPU.global_controller&&(a=document.CPU.global_controller,b.isEqualNode(a.audiotag)||(a.attach_audiotag_to_controller(b),a.audiotag=b,a.show_main(),a.redraw_all_planes(),a.set_mode_container()),a.build_playlist()))},key:function(a,b){function c(g){a.at=d.audiotag.currentTime+g;d.show_throbber_at(a.at);I.throbble(a); d.hide_throbber_later()}if(!(a.altKey||a.ctrlKey||a.metaKey||a.shiftKey)){b=void 0===b?1:b;var d=document.CPU.find_container(a.target),f=d.audiotag;switch(a.keyCode){case 27:I.restart(a);I.pause(void 0,f);break;case 32:f.paused?I.play(a,f):I.pause(void 0,f);break;case 35:document.CPU.seekElementAt(f,f.duration);break;case 36:I.restart(a);break;case 37:c(-(document.CPU.keymove*b));break;case 39:c(+(document.CPU.keymove*b));break;default:return}a.preventDefault()}},keydownplay:function(a){if(13===a.keyCode){var b= document.CPU.find_container(a.target).audiotag;b.paused?I.play(void 0,b):I.pause(void 0,b);a.preventDefault()}},restart:function(a){a=document.CPU.find_container(a.target);document.CPU.seekElementAt(a.audiotag,0)},reward:function(a){a.keyCode=37;I.key(a)},foward:function(a){a.keyCode=39;I.key(a)},fastreward:function(a){a.keyCode=37;I.key(a,document.CPU.fast_factor)},fastfoward:function(a){a.keyCode=39;I.key(a,document.CPU.fast_factor)},_hand_on:null,_press_button:function(a){let b=a.target.id?a.target: a.target.closest("button"),c=["fastreward","reward","foward","fastfoward"];b.id&&-1!==c.indexOf(b.id)&&(I[b.id](a),null!==I._hand_on&&window.clearTimeout(I._hand_on),I._hand_on=window.setTimeout(I._repeat_button,document.CPU.repeat_delay,{target:b,preventDefault:A}),a.preventDefault())},_repeat_button:function(a){I[a.target.id](a);I._hand_on=window.setTimeout(I._repeat_button,document.CPU.repeat_factor,a)},_release_button:function(a){window.clearTimeout(I._hand_on);I._hand_on=null;a.preventDefault()}, -cuechange:function(a){document.body.classList.remove(document.CPU.body_className_playing_cue);null!==document.CPU.current_audiotag_playing&&(document.CPU.body_className_playing_cue=`cpu_playing_tag_\u00ab${document.CPU.current_audiotag_playing.id}\u00bb_cue_\u00ab${a.id}\u00bb`,document.body.classList.add(document.CPU.body_className_playing_cue))},update:function(a){a=a.target;!1!==I._timecode_end&&a.currentTime>I._timecode_end&&I.pause(void 0,a);a.CPU_update();a.paused||document.CPU.is_audiotag_streamed(a)|| -window.localStorage.setItem(a.currentSrc,String(a.currentTime))},ended:function(a,b){void 0===b&&(b=a.target);if("playlist"in b.dataset){a=b.dataset.playlist;var c=document.CPU.playlists[a];if(void 0===c)G(`Named playlist ${a} not created. WTF ?`);else{var d=c.indexOf(b.id);-1===d?G(`Audiotag ${b.id} not in playlist ${a}. WTF ?`):d+1!==c.length&&(b=c[d+1],a=document.getElementById(b),null===a?G(`Audiotag #${b} doesn't exists. WTF ?`):(document.CPU.seekElementAt(a,0),I.play({},a)))}}},observer_cpuaudio:function(a){a= -document.CPU.find_container(a[0].target);null===a.element.querySelector("audio")?(window.console.info("CPU-AUDIO: ","

    `;for(let b of this.current_playlist){let c=document.getElementById(b),d=document.createElement("a");d.classList.add("cue");b===this.audiotag.id&&d.classList.add("active-cue");d.href=`#${c.id}&t=0`;d.tabIndex=0;d.innerHTML=`${c.dataset.title}`;a.append(d)}}}}build_controller(){let a=this;B("[id]",g=>{a.elements[g.id]=g},this.element.shadowRoot); -this.elements.poster.addEventListener("load",()=>{a.elements["interface"].classList.add("poster-loaded")},u);var b={pause:I.play,play:I.pause,time:I.throbble,actions:this.show_actions,back:this.show_main,poster:this.show_main,restart:I.restart};for(var c in b)this.elements[c].addEventListener("click",b[c],u);b=["fastreward","reward","foward","fastfoward"];c={touchstart:!0,touchend:!1,touchcancel:!1,mousedown:!0,mouseup:!1,mouseleave:!1};for(var d of b)for(var f in c)this.elements[d].addEventListener(f, -c[f]?I._press_button:I._release_button);this.element.addEventListener("keydown",I.key);this.elements.control.addEventListener("keydown",I.keydownplay);d=this.elements.time;f={mouseover:!0,mousemove:!0,mouseout:!1,touchstart:!0,touchend:!1,touchcancel:!1};for(let g in f)d.addEventListener(g,f[g]?I.hover:I.out,u);d.addEventListener("touchstart",I.touchstart,u);d.addEventListener("touchend",I.touchcancel,u);d.addEventListener("contextmenu",this.show_handheld_nav);this.audiotag&&(this.show_main(),this.build_chapters_loader(), -this._fire_event("ready"))}};HTMLAudioElement.prototype.CPU_connected=!1;HTMLAudioElement.prototype.CPU_controller=function(){return this.closest("CPU-AUDIO")};HTMLAudioElement.prototype.CPU_update=function(){var a=this.CPU_controller();a&&(a=a.CPU)&&a.update&&a.update();null!==document.CPU.global_controller&&document.CPU.global_controller.update()};class R extends HTMLElement{constructor(){super();this.CPU=null;window.matchMedia("screen").matches?"CPU-AUDIO"===this.tagName&&null===this.querySelector("audio[controls]")?(G("Tag without