{"version":3,"sources":["audio-player.js"],"names":["formatSeconds","time","let","minutes","Math","floor","timeMinutes","timeSeconds","seconds","podcastPlayer","document","querySelectorAll","forEach","player","timeline","querySelector","durationEl","currentTimeEl","rangeInputWrap","rangeInput","episodeId","getAttribute","episodeProgress","localStorage","getItem","duration","currentTime","newTime","style","setProperty","playState","playBtn","playerAudio","play","pause","setAttribute","ffBtn","addEventListener","rwBtn","innerHTML","updateTimelineRange","saveProgress","loadProgress","event","console","log","target","value"],"mappings":"aAOA,SAAAA,cAAAC,GAsBE,OApBoBD,KACpBE,IAAAC,EAAAC,KAAAC,MAAAJ,EAAA,EAAA,EAKE,OAHAE,EADIG,EAAAA,GACO,IAAOH,EAGlBA,CAGD,GADC,EAYM,KATR,KACAD,IAAMK,EAAAA,KAAeF,MAAMJ,EAAA,EAAA,EAMzB,OAJAO,EADIA,EAAUJ,GACH,IAAOI,EAIXA,CACR,GAAE,CAEL,CAKA,SAASC,gBACSC,SAASC,iBAAiB,qBAAqB,EAG7DC,QAAAC,IAGA,MAAMC,EAAWD,EAAOE,cAAc,OAAA,EACtC,IAAMC,EAAUH,EAAGC,cAASC,yBAA0B,EACtD,MAAME,EAAaH,EAAGA,cAASC,WAAc,EACvCG,EAAcJ,EAAUC,cAAc,cAAA,EACtCI,EAAaN,EAAOE,cAAc,0BAAkB,EACpDK,EAAaP,EAAAE,cAAiBM,iBAAa,EAC3CC,EAAAA,WAAkBC,EAAYF,aAASD,gBAAmB,EAA1DE,EAAkBC,aAAaC,QAAQJ,CAAS,GAAK,CAAA,EAI3DlB,IAAIuB,EAAQZ,EAAAQ,aAAA,YAAA,EACRK,EAAAA,EAUJ,SACEP,EAA0BQ,GAC1BT,EAAAA,MAAeU,EAIjBV,EAAAU,MAAAC,YAHI,aAKJF,EAAAF,EAAA,IAAA,GACA,CAHA,CAeA,MAIIK,EAAYjB,EAAAE,cAAS,cAAA,EAHzBgB,EAIIA,iBAAqB,QAAS,MACtBhB,WAARgB,GACDC,EAAMC,KAAA,EACLD,EAAYE,UACZJ,EAAAA,cAAoB,OAAA,EAAAK,aAAA,SAAA,EAAA,EACpBJ,EAAQhB,cAAc,QAAQ,IAEhCiB,EAAAE,MAAA,EACAJ,EAAA,SAHEC,EAAQhB,cAAc,QAAQ,EAAEoB,aAAa,SAAU,EAAE,EAK7DJ,EAAAhB,cAAA,OAAA,IALoCoB,gBAAa,QAAU,CAO3DC,CAAAA,EADcvB,EAAOE,cAAc,YAAY,EAK/CsB,iBAAA,QAAA,KACAL,EAAcnB,aAAOE,EACrBuB,CAAAA,EADczB,EAAOE,cAAc,gBAAgB,EAKnDsB,iBAAA,QAAA,KAHEL,EAAYN,aAAe,EAK7B,CAAA,EACAM,EAKIA,iBAAuB,aAAGV,KAC5BG,EAAOO,EAAAP,SAEPH,GAJEI,EAAcJ,EAMhBU,EAAAN,YAAAJ,GAHEI,EAAcM,EAAYN,YAS5BV,EAAAuB,UAAAvC,cAAAyB,CAAA,EAGAR,EAAAsB,UAAAvC,cAAA0B,CAAA,EAGFM,EAAYK,CAAiB,EAC3BX,EAAWS,aAAGH,MAAYN,CAAW,CAJvC,CAAC,EAGDM,EAKEQ,iBAAoBd,aAAY,KArElC,IAAsBN,EAAWnB,EAsE/BwC,EAAarB,EAAWM,YACxBT,EAAAsB,UAAAvC,cAAA0B,CAAA,EAGFP,EAAWkB,CAAiB,EA1ENjB,EA2ERA,EA3EmBnB,EA2ETyB,EArExBH,aAASmB,QAAatB,EAAWnB,CAAA,CAiEjC,CAAC,EAQDkB,EAAAkB,iBAAA,QAAAM,IACJC,QAAAC,IAAA,SAAA,EACInC,IAAQiB,EAACZ,EAAc+B,OAAAC,MA9FEpB,EA+FZA,EA9FbK,EAAAN,YAAAC,CA+FJ,CAAA,CAJE,CAAC,CACH,CACIjB,SAASK,cAAc,eAAe,GACxCN,cAAc","file":"../audio-player.min.js","sourcesContent":["// ---------------------------------------------\r\n// ======---------------------------------======\r\n// Audio player\r\n// ======---------------------------------======\r\n// ---------------------------------------------\r\n\r\n// ====---------------====\r\n// Utilities\r\n// ====---------------====\r\nfunction formatSeconds(time) {\r\n  // get time minutes\r\n  const timeMinutes = (() => {\r\n    let minutes = Math.floor(time / 60);\r\n    if (minutes < 10) {\r\n      minutes = '0' + minutes;\r\n    }\r\n\r\n    return minutes;\r\n  })();\r\n\r\n  // get time seconds\r\n  const timeSeconds = (() => {\r\n    let seconds = Math.floor(time % 60);\r\n    if (seconds < 10) {\r\n      seconds = '0' + seconds;\r\n    }\r\n\r\n    return seconds;\r\n  })();\r\n  return `${timeMinutes}:${timeSeconds}`;\r\n}\r\n\r\n// ====---------------====\r\n// Podcast player\r\n// ====---------------====\r\nfunction podcastPlayer() {\r\n  const players = document.querySelectorAll('.audio-player-inner');\r\n\r\n  players.forEach((player) => {\r\n    // ===------ setup ------===\r\n    // elements\r\n    const playerAudio = player.querySelector('audio');\r\n    const timeline = player.querySelector('.audio-player__timeline');\r\n    const durationEl = timeline.querySelector('.duration');\r\n    const currentTimeEl = timeline.querySelector('.currenttime');\r\n    const rangeInputWrap = player.querySelector('.progress-meter__wrapper');\r\n    const rangeInput = player.querySelector('.progress-meter');\r\n    const episodeId = `episode-${player.getAttribute('data-episodeId')}`;\r\n    const episodeProgress = localStorage.getItem(episodeId) || false;\r\n\r\n    // states\r\n    let playState = player.getAttribute('data-state');\r\n    let duration;\r\n    let currentTime;\r\n\r\n    // ===------ Helpers ------===\r\n\r\n    // updates audio element to current time\r\n    function updatePlayerTime(newTime) {\r\n      playerAudio.currentTime = newTime;\r\n    }\r\n\r\n    // update range to current time\r\n    function updateTimelineRange(newTime) {\r\n      rangeInput.value = newTime;\r\n      rangeInputWrap.style.setProperty(\r\n        '--progress',\r\n        (newTime / duration) * 100 + '%'\r\n      );\r\n    }\r\n\r\n    // store episode progress to local storage\r\n    function saveProgress(episodeId, time) {\r\n      // sets and item in local storage using the episode id as the key and the time as the value\r\n      localStorage.setItem(episodeId, time);\r\n    }\r\n\r\n    // Load episode progress from local storage\r\n    function loadProgress(episodeId) {\r\n      // sets and item in local storage using the episode id as the key and the time as the value\r\n      return localStorage.getItem(episodeId);\r\n    }\r\n\r\n    // ===------ Play/Pause ------===\r\n    const playBtn = player.querySelector('.button-play');\r\n    playBtn.addEventListener('click', () => {\r\n      if (playState === 'paused') {\r\n        playerAudio.play();\r\n        playState = 'playing';\r\n        playBtn.querySelector('.play').setAttribute('hidden', '');\r\n        playBtn.querySelector('.pause').removeAttribute('hidden');\r\n      } else {\r\n        playerAudio.pause();\r\n        playState = 'paused';\r\n        playBtn.querySelector('.pause').setAttribute('hidden', '');\r\n        playBtn.querySelector('.play').removeAttribute('hidden');\r\n      }\r\n    });\r\n\r\n    // ===------ Skip forward ------===\r\n    const ffBtn = player.querySelector('.button-ff');\r\n    ffBtn.addEventListener('click', () => {\r\n      playerAudio.currentTime += 30;\r\n    });\r\n\r\n    // ===------ Rewind ------===\r\n    const rwBtn = player.querySelector('.button-rewind');\r\n    rwBtn.addEventListener('click', () => {\r\n      playerAudio.currentTime -= 30;\r\n    });\r\n\r\n    // ===------ Timeline ------===\r\n\r\n    // setup initial timeline\r\n    playerAudio.addEventListener('loadeddata', () => {\r\n      duration = playerAudio.duration;\r\n\r\n      if (episodeProgress) {\r\n        currentTime = episodeProgress;\r\n        playerAudio.currentTime = episodeProgress;\r\n      } else {\r\n        currentTime = playerAudio.currentTime;\r\n      }\r\n\r\n      // ===------ Set total the duration ------===\r\n      durationEl.innerHTML = formatSeconds(duration);\r\n\r\n      // ===------ Set current time ------===\r\n      currentTimeEl.innerHTML = formatSeconds(currentTime);\r\n\r\n      // set range input value and max\r\n      updateTimelineRange(currentTime);\r\n      rangeInput.setAttribute('max', duration);\r\n    });\r\n\r\n    // update timeline while playing\r\n    playerAudio.addEventListener('timeupdate', () => {\r\n      currentTime = playerAudio.currentTime;\r\n      currentTimeEl.innerHTML = formatSeconds(currentTime);\r\n\r\n      // set range input current time\r\n      updateTimelineRange(currentTime);\r\n      saveProgress(episodeId, currentTime);\r\n    });\r\n\r\n    // range input click to change time\r\n    rangeInput.addEventListener('click', (event) => {\r\n      console.log('clicked');\r\n      const newTime = event.target.value;\r\n      updatePlayerTime(newTime);\r\n    });\r\n  });\r\n}\r\nif (document.querySelector('.audio-player')) {\r\n  podcastPlayer();\r\n}\r\n"]}