diff options
Diffstat (limited to 'libs/music')
| -rw-r--r-- | libs/music/player | 10 | ||||
| -rw-r--r-- | libs/music/player.d/main_static.js | 59 | ||||
| -rw-r--r-- | libs/music/player.d/styles.css | 14 |
3 files changed, 68 insertions, 15 deletions
diff --git a/libs/music/player b/libs/music/player index 6f5b4d8..f885d87 100644 --- a/libs/music/player +++ b/libs/music/player @@ -25,6 +25,12 @@ The Stupid Online Player License: Expat (MIT) Changelog: +2021.04.05 2.7.0 +Clicking the track name after "Now Playing" shows the note for it. +2020.08.04 2.6.1+b1 +Follow system theme if user has a preference. +2020.05.21 2.6.1 +Added bouncy spectrum visualization from ShadowPlayer. 2019.12.20 2.6.0 Added multitrack audio support. 2018.11.29 2.5.4 @@ -86,13 +92,15 @@ The online player was added. --> <body onload="init();"> <div id="overlay"><span style="text-align:center;" id="overlaytext" class="TText">LOADING...</span></div> + <div id="notes" class="TText" style="display:none;"><pre class="TText" id="ntext"></pre> + <a href="javascript:NSUI.hideNotes()">close</a></div> <div id="panel" class="TText"> <ul id="panellist"> <li><a href="/"><h1>Chrisoft</h1></a></li> <li><a href="/libs/music/player"><h2>Music Library</h2></a></li> <li><ul id="plists"></ul></li> <li><a href="//filestorage.chrisoft.org/music/" target="_blank">Downloads</a></li> - <li><a>TSOP 2.6.1</a></li> + <li><a>TSOP 2.7.0</a></li> </ul> </div> <div id="content"> diff --git a/libs/music/player.d/main_static.js b/libs/music/player.d/main_static.js index 51f7243..cc327d8 100644 --- a/libs/music/player.d/main_static.js +++ b/libs/music/player.d/main_static.js @@ -1,5 +1,6 @@ -//Chris Xiong 2015,2016,2017,2018 +//Chris Xiong 2015-2021 //License: Expat +//WARNING: This file contains profanity (thrown as exceptions). let NSInk=null; let NSAudio=null; @@ -49,10 +50,9 @@ NSPlayer={ load_playlist:async function(pln,ord) { let r=null; - try{ - const resp=await fetch(new Request(`/libs/music/player.d/playlists/${pln}.playlist?${new Date().getTime()}`)); - r=await resp.text(); - }catch(e){return;} + 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'; @@ -75,7 +75,11 @@ NSPlayer={ `#${encodeURIComponent(this.plistname)}/${encodeURIComponent(this.tracks[id].title)}`); NSUI.iplaypause.style.backgroundPosition=`${NSUI.bpauserect}`; this.current=id; - NSUI.lbnowplaying.innerHTML=`Now Playing: ${this.tracks[id].title}`; + 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); 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); @@ -253,10 +257,9 @@ NSUI={ { const moi=this; let r=null; - try{ - const resp=await fetch(new Request(`/libs/music/player.d/playlists/playlists?${new Date().getTime()}`)); - r=await resp.text(); - }catch(e){return;} + 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; @@ -270,7 +273,7 @@ NSUI={ NSPlayer.load_playlist(t,i).then((rp)=>{ tarr[rp.plistord]=rp; if(--cnt<=0)a(null); - }); + },()=>{b(null);}); } }); await p; @@ -288,7 +291,11 @@ NSUI={ { const ta=NSUI.ulplaylists.childNodes[i].firstChild; if(ta.pid==this.pid) - {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)(); @@ -395,7 +402,28 @@ NSUI={ document.getElementById('timeleft').innerHTML=`-${NSUI.formatTime(NSUI.audio.duration-NSUI.audio.currentTime)}`; 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); + } }; NSAudio={ @@ -711,7 +739,10 @@ function init() } sh.elem('overlay').style.display='none'; } - }); + }, + ()=>{ + 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); diff --git a/libs/music/player.d/styles.css b/libs/music/player.d/styles.css index 354fd45..bcbfee3 100644 --- a/libs/music/player.d/styles.css +++ b/libs/music/player.d/styles.css @@ -24,6 +24,20 @@ top:50%; transform:translateXY(-50%,-50%); } +#notes{ + bottom:0; + right:0; + position:absolute; + width:min(80%,480px); + height:min(80%,300px); + z-index:9; + background-color:rgba(0,0,0,0.6); + transition:opacity 0.3s; + opacity:0; + color:#FFF; + margin:1em; + padding:1em; +} .switches{text-align:center;width:100%;padding:0.25em 0 0.25em 0;} .centered-audio{text-align:center;width:100%;} canvas#cvs{width:100%;height:100%;} |