diff options
author | 2021-12-08 03:38:10 +0800 | |
---|---|---|
committer | 2021-12-08 03:38:10 +0800 | |
commit | 154b63534baf812bf9a5234774daf09952556285 (patch) | |
tree | 7099ab6ef22827924f6bf129be1f84f50ff27050 /libs/music/player.d/main_static.js | |
parent | 9542720148b9b1526763262bea0752a0e21f7cb7 (diff) | |
download | web-154b63534baf812bf9a5234774daf09952556285.tar.xz |
TSOP 2.7.1: help & format switching.
Also finally removed all reminiscence of the legacy player.
Diffstat (limited to 'libs/music/player.d/main_static.js')
-rw-r--r-- | libs/music/player.d/main_static.js | 172 |
1 files changed, 105 insertions, 67 deletions
diff --git a/libs/music/player.d/main_static.js b/libs/music/player.d/main_static.js index 0c3be91..7ac79f1 100644 --- a/libs/music/player.d/main_static.js +++ b/libs/music/player.d/main_static.js @@ -14,9 +14,9 @@ const sh={ newelem:function(e) {return document.createElement(e);}, getcookie:function(key) - {return document.cookie.replace(new RegExp('(?:(?:^|.*;\\s*)'+key+'\\s*\\=\\s*([^;]*).*$)|^.*$'),'$1');}, - useFLAC:function() - {return sh.elem('audio').canPlayType('audio/ogg')=='';} + {return document.cookie.replace(new RegExp('(?:(?:^|.*;\\s*)'+key+'\\s*\\=\\s*([^;]*).*$)|^.*$'),'$2');}, + setcookie:function(key,value) + {return document.cookie=`${key}=${value};max-age=31536000`;}, }; class Ink @@ -47,15 +47,23 @@ NSPlayer={ current:null, shuffle:0, repeat:0, + served_formats:{'ogg':{'mime':'audio/ogg; codecs=vorbis','disp':'ogg 224 kbps'},'flac':{'mime':'audio/flac','disp':'flac'},'opus':{'mime':'audio/ogg; codecs=opus','disp':'opus 96 kbps'},'m4a':{'mime':'audio/aac','disp':'aac 192kbps'}}, + get_preferred_or_default_format:function() + { + if (sh.getcookie('preferredformat') in this.served_formats) + return sh.getcookie('preferredformat'); + for (let fmt in this.served_formats) + if (sh.elem('audio').canPlayType(this.served_formats[fmt].mime)!='') + return fmt; + }, load_playlist:async function(pln,ord) { let r=null; - const resp=await fetch(new Request(`/libs/music/player.d/playlists/${pln}.playlist?${new Date().getTime()}`)); - if(!resp.ok)throw "shit"; - r=await resp.text(); + const resp=await fetch(new Request(`/libs/music/player.d/playlists/${pln}.playlist?${new Date().getTime()}`)); + if(!resp.ok)throw "shit"; + r=await resp.text(); let rarr=r.split('\n'); let tarr=[]; - const fmt=sh.useFLAC()?'flac':'ogg'; for(let i=1;i<rarr.length;++i) { let t=rarr[i].trim(); @@ -63,7 +71,6 @@ NSPlayer={ let titem={}; titem.title=t; titem.ord=i-1; - titem.src=`//filestorage.chrisoft.org/music/${fmt}/${t}.${fmt}`; tarr.push(titem); } return ({plistname:pln,playlist:tarr,plistord:ord}); @@ -76,14 +83,15 @@ NSPlayer={ NSUI.iplaypause.style.backgroundPosition=`${NSUI.bpauserect}`; this.current=id; NSUI.lbnowplaying.innerHTML="Now Playing: "; - const a=sh.newelem("a"); - a.innerHTML=this.tracks[id].title; - a.href=`javascript:NSUI.showNotes("${this.tracks[id].title}")`; - NSUI.lbnowplaying.appendChild(a); + const a=sh.newelem("a"); + a.innerHTML=this.tracks[id].title; + a.href=`javascript:NSUI.showNotes("${this.tracks[id].title}")`; + NSUI.lbnowplaying.appendChild(a); if(navigator.mediaSession) navigator.mediaSession.metadata=new MediaMetadata({title:this.tracks[id].title,album:this.plistname}); NSUI.set_highlighted(this.plistname,this.tracks[id].title); - NSUI.audio.src=this.tracks[id].src; + const fmt=NSPlayer.get_preferred_or_default_format(); + NSUI.audio.src=`//filestorage.chrisoft.org/music/${fmt}/${this.tracks[id].title}.${fmt}`; NSUI.audio.load(); NSUI.audio.play(); }, @@ -139,6 +147,7 @@ NSUI={ pbprev:null, ctrlcontainer:null, am3u8:null, + swformat:null, bplayrect:"0 -48px", bpauserect:"-24px -48px", brallrect:"-24px -24px", @@ -171,28 +180,44 @@ NSUI={ this.pbprev=sh.elem('pbprev'); this.ctrlcontainer=sh.elem('ctrlcontainer'); this.am3u8=sh.elem('am3u8'); + this.swformat=sh.elem('formatsw'); + if(!(sh.getcookie('preferredformat') in NSPlayer.served_formats)) + sh.setcookie('preferredformat',''); + const fmt=NSPlayer.get_preferred_or_default_format(); + const cantplay=(NSUI.audio.canPlayType(NSPlayer.served_formats[fmt].mime)=='')?' !':''; + this.swformat.innerHTML=`[${NSPlayer.served_formats[fmt].disp}${cantplay}]`; NSUI.canvas.width=NSUI.canvas.clientWidth*window.devicePixelRatio; NSUI.canvas.height=NSUI.canvas.clientHeight*window.devicePixelRatio; NSUI.vissel.onchange=function(){ if(this.value!='none'&&this.oldvalue=='none')requestAnimationFrame(NSVisualization.updateVisualization); else NSUI.canvas.getContext('2d').clearRect(0,0,NSUI.canvas.width,NSUI.canvas.height); - document.cookie='playervisualization='+this.value; + sh.setcookie('playervisualization',this.value); this.oldvalue=this.value; }; - document.getElementById('shufflesw').onclick=function(){ + sh.elem('shufflesw').onclick=function(){ NSUI.shuffle_switch(NSPlayer.shuffle=1-NSPlayer.shuffle); NSUI.ishuffle.style.backgroundPosition=`${NSPlayer.shuffle?NSUI.bshonrect:NSUI.bsoffrect}`; - document.cookie=`playershuffle=${NSPlayer.shuffle}`; + sh.setcookie('playershuffle',NSPlayer.shuffle); }; - document.getElementById('repeatsw').onclick=function(){ + sh.elem('repeatsw').onclick=function(){ NSPlayer.repeat=1-NSPlayer.repeat; NSUI.audio.loop=NSPlayer.repeat?true:false; NSUI.irepeat.style.backgroundPosition=`${NSPlayer.repeat?NSUI.bronerect:NSUI.brallrect}`; - document.cookie=`playerrepeat=${NSPlayer.repeat}`; + sh.setcookie('playerrepeat',NSPlayer.repeat); + }; + sh.elem('formatsw').onclick=function(){ + const cfmt=NSPlayer.get_preferred_or_default_format(); + fmts=Object.keys(NSPlayer.served_formats); + const nfmt=fmts[(fmts.indexOf(cfmt)+1)%fmts.length]; + sh.setcookie('preferredformat',nfmt); + const cantplay=(NSUI.audio.canPlayType(NSPlayer.served_formats[nfmt].mime)=='')?' !':''; + NSUI.swformat.innerHTML=`[${NSPlayer.served_formats[nfmt].disp}${cantplay}]`; + if(NSUI.selectedplist) + NSUI.switch_playlist(NSUI.selectedplist); }; - document.getElementById('plistsw').onclick=NSUI.togglePlist; - document.getElementById('tsliderbase').onclick= - document.getElementById('tsliderbase').onmousemove=function(e) + sh.elem('plistsw').onclick=NSUI.togglePlist; + sh.elem('tsliderbase').onclick= + sh.elem('tsliderbase').onmousemove=function(e) { if(e.type=='click'||(e.type=='mousemove'&&e.buttons==1)) { @@ -257,9 +282,9 @@ NSUI={ { const moi=this; let r=null; - const resp=await fetch(new Request(`/libs/music/player.d/playlists/playlists?${new Date().getTime()}`)); - if(!resp.ok)throw "shit"; - r=await resp.text(); + const resp=await fetch(new Request(`/libs/music/player.d/playlists/playlists?${new Date().getTime()}`)); + if(!resp.ok)throw "shit"; + r=await resp.text(); let rarr=r.split('\n'); let tarr=[]; let cnt=0; @@ -292,10 +317,10 @@ NSUI={ const ta=NSUI.ulplaylists.childNodes[i].firstChild; if(ta.pid==this.pid) { - if(ta.classList.contains('highlighted')) - NSUI.showNotes(this.innerHTML); - ta.classList.add('highlighted');ta.classList.add('active'); - } + if(ta.classList.contains('highlighted')) + NSUI.showNotes(this.innerHTML); + ta.classList.add('highlighted');ta.classList.add('active'); + } else{ta.classList.remove('highlighted');ta.classList.remove('active');} } NSUI.present_playlist.bind(NSUI,this.pid)(); @@ -317,7 +342,8 @@ NSUI={ const l=sh.newelem('li'); const a=sh.newelem('a'); a.innerHTML=list[i].title; - a.href=list[i].src; + const fmt=NSPlayer.get_preferred_or_default_format(); + a.href=`//filestorage.chrisoft.org/music/${fmt}/${list[i].title}.${fmt}`; a.ord=i; a.onclick=function(e){e.preventDefault();NSUI.switch_track.bind(NSUI,this.ord)();}; l.appendChild(a); @@ -326,7 +352,7 @@ NSUI={ const d=sh.newelem('div');d.style.height=`${NSUI.ctrlcontainer.getBoundingClientRect().height+16}px`; this.playlist.appendChild(d); this.selectedplist=this.playlists[id].plistname; - this.am3u8.href=`https://chrisoft.org/libs/music/player.d/cgi-bin/m3u8.cgi?plist=${this.playlists[id].plistname}`; + this.am3u8.href=`https://chrisoft.org/libs/music/player.d/cgi-bin/m3u8.cgi?plist=${this.playlists[id].plistname}&type=${NSPlayer.get_preferred_or_default_format()}`; }, switch_playlist:function(pl,setactive) { @@ -403,27 +429,39 @@ NSUI={ document.getElementById('ctime').style.width=NSUI.audio.currentTime/NSUI.audio.duration*100+'%'; NSUI.bufferedUpdate(); }, - showNotes:async function(title) - { - const nd=sh.elem("notes"); - const nt=sh.elem("ntext"); - nt.innerHTML="Loading..." - nd.style.display="block"; - setTimeout(()=>{nd.style.opacity=1.;}); - const url=`//filestorage.chrisoft.org/music/notes/${title}.note`; - try{ - const resp=await fetch(new Request(url)); - if(!resp.ok)throw "shit"; - r=await resp.text(); - nt.innerHTML=r; - }catch(e){nt.innerHTML="This particular track doesn't seem to have a note.";} - }, - hideNotes:function(title) - { - const nd=sh.elem("notes"); - nd.style.opacity=0.; - setTimeout(()=>{nd.style.display="none";},500); - } + showNotes:async function(title) + { + const nd=sh.elem("notes"); + const nt=sh.elem("ntext"); + nt.innerHTML="Loading..." + nd.style.display="block"; + setTimeout(()=>{nd.style.opacity=1.;},5); + const url=`//filestorage.chrisoft.org/music/notes/${title}.note`; + try{ + const resp=await fetch(new Request(url)); + if(!resp.ok)throw "shit"; + r=await resp.text(); + nt.innerHTML=r; + }catch(e){nt.innerHTML="This particular track doesn't seem to have a note.";} + }, + hideNotes:function(title) + { + const nd=sh.elem("notes"); + nd.style.opacity=0.; + setTimeout(()=>{nd.style.display="none";},500); + }, + showHelp:function() + { + const hd=sh.elem("helpoverlay"); + hd.style.display="block"; + setTimeout(()=>{hd.style.opacity=1.;},5); + }, + hideHelp:function() + { + const hd=sh.elem("helpoverlay"); + hd.style.opacity=0.; + setTimeout(()=>{hd.style.display="none";},500); + } }; NSAudio={ @@ -721,31 +759,31 @@ NSInk={ function init() { if(!window.devicePixelRatio)window.devicePixelRatio=1; - loadTheme(); + loadTheme(); NSUI.setup_ui(); NSUI.load_playlists() .then(()=>{ sh.elem('overlaytext').innerHTML+="Done!<br>Click or tap anywhere to start." sh.elem('overlay').onclick=function(){ - try{ + try{ NSAudio.audioInit();NSAudio.connect(); - }catch(e){return;} - if(window.location.hash.length) - { - let p=window.location.hash.substr(1).split('/'); - for(let i=0;i<p.length;++i)p[i]=decodeURIComponent(p[i]); - NSUI.switch_playlist(p[0],true); - let id=0; - for(;id<NSPlayer.tracks.length&&NSPlayer.tracks[id].title!=p[1];++id); - if(id<NSPlayer.tracks.length)NSUI.switch_track(id); - } + if(window.location.hash.length) + { + let p=window.location.hash.substr(1).split('/'); + for(let i=0;i<p.length;++i)p[i]=decodeURIComponent(p[i]); + NSUI.switch_playlist(p[0],true); + let id=0; + for(;id<NSPlayer.tracks.length&&NSPlayer.tracks[id].title!=p[1];++id); + if(id<NSPlayer.tracks.length)NSUI.switch_track(id); + } + }catch(e){return;} sh.elem('overlay').style.display='none'; } - sh.elem('overlay').onclick(); + sh.elem('overlay').onclick(); }, - ()=>{ - sh.elem('overlaytext').innerHTML+="Failed...<br>Maybe try refreshing the page?" - }); + ()=>{ + sh.elem('overlaytext').innerHTML+="Failed...<br>Maybe try refreshing the page?" + }); NSVisualization.init();NSInk.inkPrepare(); NSUI.audio.ontimeupdate=NSUI.timeUpdate; NSUI.audio.onended=NSPlayer.next.bind(NSPlayer); |