https://nickjeffrey.com/assets/Audio-Cs1v-tzU.js

1import{_ as b,m as y,b as T,r as c,c as l,i as t,j as B,v as j,n as p,F as S,k as x,l as d,t as a,d as h,w as E,f as w,e as C,u as m,g as F,o as s}from"./index-D2A303cJ.js";import{B as P}from"./BackButton-D34f2i9s.js";import{F as V}from"./FullscreenButton-CTHfZJAD.js";const N=`
2<div class="plyr__controls">
3  <button type="button" class="plyr__controls__item plyr__control" id="prevTrack">
4    <svg role="presentation" focusable="false">
5      <polygon points="5.558,9 5.558,17 2.317,17 2.317,1 5.558,1 5.558,9 15.683,1 15.683,17 "/>
6    </svg>
7    <span class="plyr__tooltip" role="tooltip">Previous</span>
8  </button>
9  <button type="button" class="plyr__controls__item plyr__control" aria-label="Play, {title}" data-plyr="play">
10    <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg>
11    <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg>
12    <span class="label--pressed plyr__tooltip" role="tooltip">Pause</span>
13    <span class="label--not-pressed plyr__tooltip" role="tooltip">Play</span>
14  </button>
15  <button type="button" class="plyr__controls__item plyr__control" id="nextTrack">
16    <svg role="presentation" focusable="false">
17      <polygon points="12.442,9 12.442,17 15.683,17 15.683,1 12.442,1 12.442,9 2.317,1 2.317,17 "/>
18    </svg>
19    <span class="plyr__tooltip" role="tooltip">Next</span>
20  </button>
21  <div class="plyr__controls__item plyr__progress__container">
22    <div class="plyr__progress">
23      <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
24      <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
25      <span role="tooltip" class="plyr__tooltip">00:00</span>
26    </div>
27  </div>
28  <div class="plyr__controls__item plyr__time plyr__time--current" aria-label="Current time">00:00</div>
29  <div class="plyr__controls__item plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
30  <div class="plyr__controls__item plyr__volume">
31    <button type="button" class="plyr__control" aria-label="Mute" data-plyr="mute">
32      <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-muted"></use></svg>
33      <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-volume"></use></svg>
34      <span class="label--pressed plyr__tooltip" role="tooltip">Unmute</span>
35      <span class="label--not-pressed plyr__tooltip" role="tooltip">Mute</span>
36    </button>
37    <input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" autocomplete="off" aria-label="Volume">
38  </div>
39</div>
40`,A={components:{BackButton:P,FullscreenButton:V},data(){return{player:null,playerOptions:{controls:N},currentTime:0,currentTrack:null,playing:!1}},computed:{...y(m,["fullscreen","fullscreenSupport"]),...y(F,["project","isProjectEntered"]),elapsed(){let e=new Date(this.currentTime*1e3).toISOString();return this.currentTime<3600?e.substr(14,5):e.substr(11,8)},progress(){return this.elapsed+" / "+this.tracks[this.currentTrack].duration},tracks(){return this.project.tracks}},methods:{...T(m,["closeFullscreen"]),prevTrack(){let e=this.currentTrack>0?this.currentTrack-1:this.tracks.length-1;this.selectTrack(e)},nextTrack(){let e=this.currentTrack<this.tracks.length-1?this.currentTrack+1:0;this.selectTrack(e)},selectTrack(e){e!==this.currentTrack?(this.currentTrack=e,this.currentTime=0,this.player.source={type:"audio",title:"Example title",sources:[{src:`http://nickjeffrey.com/files/mp3/${this.tracks[e].file}.mp3`,type:"audio/mp3"}]},this.player.play()):this.player.playing?this.player.pause():this.player.paused&&this.player.play()}},mounted(){this.$nextTick(()=>{this.player=this.$refs.plyr.player,this.player.on("ready",()=>{document.getElementById("prevTrack").addEventListener("click",this.prevTrack),document.getElementById("nextTrack").addEventListener("click",this.nextTrack)}),this.player.on("playing",()=>{this.playing=!0}),this.player.on("pause",()=>{this.playing=!1}),this.player.on("timeupdate",()=>{this.currentTime=Math.trunc(this.player.currentTime)}),this.player.on("ended",()=>{this.currentTrack<this.tracks.length-1?this.selectTrack(this.currentTrack+1):this.currentTrack=null})})},beforeRouteLeave(e,k,n){this.fullscreen==="local"?this.closeFullscreen().then(()=>{let u=this.$watch("fullscreen",()=>{u(),n()})}):n()}},D={class:"audio"},I={class:"album"},L={class:"inner"},M={class:"cover"},O=["href"],R=["src"],z={class:"playlist"},U=["onClick"],$={class:"title"},q={class:"duration"},G={key:0},H={key:1},J=["href"],K={class:"player"},Q=t("audio",{controls:"",playsinline:""},[t("source",{src:"http://nickjeffrey.com/files/mp3/residual-drifter---healer---01-nocturnal-ecologies.mp3",type:"audio/mp3"})],-1);function W(e,k,n,u,r,i){const f=c("vue-plyr"),v=c("BackButton"),g=c("FullscreenButton");return s(),l("div",{class:p(["exhibits",{loading:!e.isProjectEntered,"song-playing":r.currentTrack!==null}]),ref:"exhibits"},[t("div",D,[B(t("div",I,[t("div",L,[t("div",M,[t("a",{href:e.project.link,title:"View album on Bandcamp",target:"_blank"}

40,[t("img",{src:"https://nickjeffrey.com/files/mp3/"+e.project.largeImg},null,8,R)],8,O)]),t("div",z,[t("ol",{class:p({playing:r.playing})},[(s(!0),l(S,null,x(i.tracks,(_,o)=>(s(),l("li",{key:o,class:p(["track",{active:r.currentTrack==o}]),onClick:X=>i.selectTrack(o)},[t("div",$,a(_.name),1),t("div",q,[r.currentTrack==o?(s(),l("span",G,a(i.progress),1)):(s(),l("span",H,a(_.duration),1))])],10,U))),128))],2),t("p",null,[d(" Released "+a(e.project.released)+". Available through ",1),t("a",{href:e.project.link,target:"_blank"},"Bandcamp",8,J),d(". ")])])])],512),[[j,e.isProjectEntered]]),t("div",K,[h(f,{ref:"plyr",options:r.playerOptions},{default:E(()=>[Q]),_:1},8,["options"])])]),h(v,{class:"close-button button",title:"Close album"}),e.fullscreenSupport&&e.fullscreen!=="global"?(s(),w(g,{key:0})):C("",!0)],2)}const te=b(A,[["render",W]]);export{te as default};