575 lines
17 KiB
JavaScript
575 lines
17 KiB
JavaScript
/**
|
|
* This script hunts for podcast's "Record" for both the podcast_episode's
|
|
* show page and an article page containing podcast liquid tag. It handles
|
|
* playback and makes sure the record will spin when the podcast is currently
|
|
* playing.
|
|
*
|
|
* The media is initialized (once) and the "state" is stored using localStorage.
|
|
* When playback is the website's responsability it's run using the `audio` HTML
|
|
* element. The iOS/Android apps uses a bridging strategy that sends messages
|
|
* using webkit messageHandlers and receives incoming messages through the
|
|
* `contentaudio` element, which allows for native audio playback.
|
|
*
|
|
* The high level functions are the following:
|
|
* - spinPodcastRecord()
|
|
* - findAndApplyOnclickToRecords()
|
|
* - initializeMedia()
|
|
* - currentAudioState()
|
|
* - saveMediaState()
|
|
*
|
|
* The following are useful eslint disables for this file in particular. Because
|
|
* of the way it's wrapped around its own function (own context) we don't have
|
|
* the problem of using a method before it's defined:
|
|
*/
|
|
|
|
/* eslint no-use-before-define: 0 */
|
|
/* eslint no-param-reassign: 0 */
|
|
|
|
import ahoy from 'ahoy.js';
|
|
|
|
export function initializePodcastPlayback() {
|
|
let deviceType = 'web';
|
|
|
|
function getById(name) {
|
|
return document.getElementById(name);
|
|
}
|
|
|
|
function getByClass(name) {
|
|
return document.getElementsByClassName(name);
|
|
}
|
|
|
|
function newAudioState() {
|
|
const audio = getById('audio');
|
|
window.activeEpisode = audio?.dataset?.episode;
|
|
window.activePodcast = audio?.dataset?.podcast;
|
|
|
|
return {
|
|
html: getById('audiocontent').innerHTML,
|
|
currentTime: 0,
|
|
playing: false,
|
|
muted: false,
|
|
volume: 1,
|
|
duration: 1,
|
|
updated: new Date().getTime(),
|
|
playbackName: audio?.dataset?.episode,
|
|
};
|
|
}
|
|
|
|
function currentAudioState() {
|
|
try {
|
|
const currentState = JSON.parse(
|
|
localStorage.getItem('media_playback_state_v3'),
|
|
);
|
|
if (!currentState) {
|
|
return newAudioState();
|
|
}
|
|
return currentState;
|
|
} catch (e) {
|
|
return newAudioState();
|
|
}
|
|
}
|
|
|
|
function audioExistAndIsPlaying() {
|
|
return getById('audio') && currentAudioState().playing;
|
|
}
|
|
|
|
function recordExist() {
|
|
return getById(`record-${window.activeEpisode}`);
|
|
}
|
|
|
|
function spinPodcastRecord(customMessage) {
|
|
if (audioExistAndIsPlaying() && recordExist()) {
|
|
const podcastPlaybackButton = getById(`record-${window.activeEpisode}`);
|
|
podcastPlaybackButton.classList.add('playing');
|
|
podcastPlaybackButton.setAttribute('aria-pressed', 'true');
|
|
changeStatusMessage(customMessage);
|
|
} else {
|
|
stopRotatingActivePodcastIfExist();
|
|
}
|
|
}
|
|
|
|
function stopRotatingActivePodcastIfExist() {
|
|
if (window.activeEpisode && getById(`record-${window.activeEpisode}`)) {
|
|
const podcastPlaybackButton = getById(`record-${window.activeEpisode}`);
|
|
podcastPlaybackButton.classList.remove('playing');
|
|
podcastPlaybackButton.setAttribute('aria-pressed', 'false');
|
|
window.activeEpisode = undefined;
|
|
}
|
|
}
|
|
|
|
function findRecords() {
|
|
const podcastPageRecords = getByClass('record-wrapper');
|
|
const podcastLiquidTagrecords = getByClass('podcastliquidtag__record');
|
|
if (podcastPageRecords.length > 0) {
|
|
return podcastPageRecords;
|
|
}
|
|
return podcastLiquidTagrecords;
|
|
}
|
|
|
|
function saveMediaState(state) {
|
|
const currentState = state || currentAudioState();
|
|
const newState = newAudioState();
|
|
newState.currentTime = currentState.currentTime;
|
|
newState.playing = currentState.playing;
|
|
newState.muted = currentState.muted;
|
|
newState.volume = currentState.volume;
|
|
newState.duration = currentState.duration;
|
|
localStorage.setItem('media_playback_state_v3', JSON.stringify(newState));
|
|
return newState;
|
|
}
|
|
|
|
function applyOnclickToPodcastBar(audio) {
|
|
const currentState = currentAudioState();
|
|
getById('barPlayPause').onclick = function () {
|
|
playPause(audio);
|
|
};
|
|
getById('mutebutt').onclick = function () {
|
|
muteUnmute(audio);
|
|
};
|
|
getById('volbutt').onclick = function () {
|
|
muteUnmute(audio);
|
|
};
|
|
getById('bufferwrapper').onclick = function (e) {
|
|
goToTime(e, audio);
|
|
};
|
|
getById('volumeslider').value = currentState.volume * 100;
|
|
getById('volumeslider').onchange = function (e) {
|
|
updateVolume(e, audio);
|
|
};
|
|
getById('speed').onclick = function () {
|
|
changePlaybackRate(audio);
|
|
};
|
|
getById('closebutt').onclick = function () {
|
|
terminatePodcastBar(audio);
|
|
};
|
|
}
|
|
|
|
function podcastBarAlreadyExistAndPlayingTargetEpisode(episodeSlug) {
|
|
return getById('audiocontent').innerHTML.indexOf(`${episodeSlug}`) !== -1;
|
|
}
|
|
|
|
function updateProgressListener(audio) {
|
|
return () => {
|
|
let bufferValue = 0;
|
|
if (audio.currentTime > 0) {
|
|
const bufferEnd = audio.buffered.end(audio.buffered.length - 1);
|
|
bufferValue = (bufferEnd / audio.duration) * 100;
|
|
}
|
|
updateProgress(audio.currentTime, audio.duration, bufferValue);
|
|
};
|
|
}
|
|
|
|
function loadAudio(audio) {
|
|
if (window.Forem.Runtime.podcastMessage) {
|
|
window.Forem.Runtime.podcastMessage({
|
|
action: 'load',
|
|
url: audio.getElementsByTagName('source')[0].src,
|
|
});
|
|
} else {
|
|
audio.load();
|
|
}
|
|
}
|
|
|
|
function loadAndPlayNewPodcast(episodeSlug) {
|
|
getById('audiocontent').innerHTML = getById(
|
|
`hidden-audio-${episodeSlug}`,
|
|
).innerHTML;
|
|
const audio = getById('audio');
|
|
audio.addEventListener('timeupdate', updateProgressListener(audio), false);
|
|
loadAudio(audio);
|
|
playPause(audio);
|
|
applyOnclickToPodcastBar(audio);
|
|
}
|
|
|
|
function findAndApplyOnclickToRecords() {
|
|
const records = findRecords();
|
|
Array.prototype.forEach.call(records, (record) => {
|
|
const episodeSlug = record.getAttribute('data-episode');
|
|
const togglePodcastState = () => {
|
|
if (podcastBarAlreadyExistAndPlayingTargetEpisode(episodeSlug)) {
|
|
const audio = getById('audio');
|
|
if (audio) {
|
|
playPause(audio);
|
|
}
|
|
} else {
|
|
stopRotatingActivePodcastIfExist();
|
|
loadAndPlayNewPodcast(episodeSlug);
|
|
}
|
|
};
|
|
record.addEventListener('click', togglePodcastState);
|
|
});
|
|
}
|
|
|
|
function changePlaybackRate(audio) {
|
|
const currentState = currentAudioState();
|
|
const el = getById('speed');
|
|
const speed = parseFloat(el.getAttribute('data-speed'));
|
|
if (speed === 2) {
|
|
el.setAttribute('data-speed', 0.5);
|
|
el.innerHTML = '0.5x';
|
|
currentState.playbackRate = 0.5;
|
|
} else {
|
|
el.setAttribute('data-speed', speed + 0.5);
|
|
el.innerHTML = `${speed + 0.5}x`;
|
|
currentState.playbackRate = speed + 0.5;
|
|
}
|
|
saveMediaState(currentState);
|
|
|
|
if (window.Forem.Runtime.podcastMessage) {
|
|
window.Forem.Runtime.podcastMessage({
|
|
action: 'rate',
|
|
rate: currentState.playbackRate.toString(),
|
|
});
|
|
} else {
|
|
audio.playbackRate = currentState.playbackRate;
|
|
}
|
|
}
|
|
|
|
function changeStatusMessage(message) {
|
|
const currentState = currentAudioState();
|
|
const statusBox = getById(`status-message-${currentState.playbackName}`);
|
|
if (statusBox) {
|
|
if (message) {
|
|
statusBox.classList.add('showing');
|
|
statusBox.innerHTML = message;
|
|
} else {
|
|
statusBox.classList.remove('showing');
|
|
}
|
|
} else if (
|
|
message === 'initializing...' &&
|
|
getByClass('status-message')[0]
|
|
) {
|
|
getByClass('status-message')[0].innerHTML = message;
|
|
}
|
|
}
|
|
|
|
function startPodcastBar() {
|
|
getById('barPlayPause').classList.add('playing');
|
|
getById('progressBar').classList.add('playing');
|
|
getById('animated-bars').classList.add('playing');
|
|
}
|
|
|
|
function pausePodcastBar() {
|
|
getById('barPlayPause').classList.remove('playing');
|
|
getById('animated-bars').classList.remove('playing');
|
|
}
|
|
|
|
function playAudio(audio) {
|
|
return new Promise((resolve, reject) => {
|
|
const currentState = currentAudioState();
|
|
if (window.Forem.Runtime.podcastMessage) {
|
|
window.Forem.Runtime.podcastMessage({
|
|
action: 'play',
|
|
url: audio.getElementsByTagName('source')[0].src,
|
|
seconds: currentState.currentTime.toString(),
|
|
});
|
|
setPlaying(true);
|
|
resolve();
|
|
} else {
|
|
audio.currentTime = currentState.currentTime;
|
|
audio
|
|
.play()
|
|
.then(() => {
|
|
setPlaying(true);
|
|
resolve();
|
|
})
|
|
.catch(() => {
|
|
setPlaying(false);
|
|
reject();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function fetchMetadataString() {
|
|
let episodeContainer = getByClass('podcast-episode-container')[0];
|
|
if (episodeContainer === undefined) {
|
|
episodeContainer = getByClass('podcastliquidtag')[0];
|
|
}
|
|
return episodeContainer.dataset.meta;
|
|
}
|
|
|
|
function sendMetadataMessage() {
|
|
if (window.Forem.Runtime.podcastMessage) {
|
|
try {
|
|
const metadata = JSON.parse(fetchMetadataString());
|
|
window.Forem.Runtime.podcastMessage({
|
|
action: 'metadata',
|
|
episodeName: metadata.episodeName,
|
|
podcastName: metadata.podcastName,
|
|
podcastImageUrl: metadata.podcastImageUrl,
|
|
});
|
|
} catch (e) {
|
|
console.log('Unable to load Podcast Episode metadata', e); // eslint-disable-line no-console
|
|
}
|
|
}
|
|
}
|
|
|
|
function startAudioPlayback(audio) {
|
|
sendMetadataMessage();
|
|
|
|
playAudio(audio)
|
|
.then(() => {
|
|
spinPodcastRecord();
|
|
startPodcastBar();
|
|
})
|
|
.catch(() => {
|
|
playAudio(audio);
|
|
setTimeout(() => {
|
|
spinPodcastRecord('initializing...');
|
|
startPodcastBar();
|
|
}, 5);
|
|
});
|
|
}
|
|
|
|
function pauseAudioPlayback(audio) {
|
|
if (window.Forem.Runtime.podcastMessage) {
|
|
window.Forem.Runtime.podcastMessage({ action: 'pause' });
|
|
} else {
|
|
audio.pause();
|
|
}
|
|
setPlaying(false);
|
|
stopRotatingActivePodcastIfExist();
|
|
pausePodcastBar();
|
|
}
|
|
|
|
function ahoyMessage(action) {
|
|
const properties = {
|
|
action,
|
|
episode: window.activeEpisode,
|
|
podcast: window.activePodcast,
|
|
deviceType,
|
|
};
|
|
ahoy.track('Podcast Player Streaming', properties);
|
|
}
|
|
|
|
function playPause(audio) {
|
|
let currentState = currentAudioState();
|
|
if (currentState.playbackName != getById('audio').dataset.episode) {
|
|
currentState = newAudioState();
|
|
saveMediaState(currentState);
|
|
}
|
|
|
|
if (!currentState.playing) {
|
|
ahoyMessage('play');
|
|
changeStatusMessage(null);
|
|
startAudioPlayback(audio);
|
|
} else {
|
|
ahoyMessage('pause');
|
|
pauseAudioPlayback(audio);
|
|
changeStatusMessage(null);
|
|
}
|
|
spinPodcastRecord();
|
|
}
|
|
|
|
function muteUnmute(audio) {
|
|
const currentState = currentAudioState();
|
|
getById('mutebutt').classList.add(
|
|
currentState.muted ? 'hidden' : 'showing',
|
|
);
|
|
getById('volumeindicator').classList.add(
|
|
currentState.muted ? 'showing' : 'hidden',
|
|
);
|
|
getById('mutebutt').classList.remove(
|
|
currentState.muted ? 'showing' : 'hidden',
|
|
);
|
|
getById('volumeindicator').classList.remove(
|
|
currentState.muted ? 'hidden' : 'showing',
|
|
);
|
|
|
|
currentState.muted = !currentState.muted;
|
|
if (window.Forem.Runtime.podcastMessage) {
|
|
window.Forem.Runtime.podcastMessage({
|
|
action: 'muted',
|
|
muted: currentState.muted.toString(),
|
|
});
|
|
} else {
|
|
audio.muted = currentState.muted;
|
|
}
|
|
saveMediaState(currentState);
|
|
}
|
|
|
|
function updateVolume(e, audio) {
|
|
const currentState = currentAudioState();
|
|
currentState.volume = e.target.value / 100;
|
|
if (window.Forem.Runtime.podcastMessage) {
|
|
window.Forem.Runtime.podcastMessage({
|
|
action: 'volume',
|
|
volume: currentState.volume,
|
|
});
|
|
} else {
|
|
audio.volume = currentState.volume;
|
|
}
|
|
saveMediaState(currentState);
|
|
}
|
|
|
|
function updateProgress(currentTime, duration, bufferValue) {
|
|
const progress = getById('progress');
|
|
const buffer = getById('buffer');
|
|
const time = getById('time');
|
|
let value = 0;
|
|
const firstDecimal = currentTime - Math.floor(currentTime);
|
|
if (currentTime > 0) {
|
|
value = Math.floor((100.0 / duration) * currentTime);
|
|
if (firstDecimal < 0.4) {
|
|
// Rewrite to mediaState storage every few beats.
|
|
const currentState = currentAudioState();
|
|
currentState.duration = duration;
|
|
currentState.currentTime = currentTime;
|
|
saveMediaState(currentState);
|
|
}
|
|
}
|
|
if (progress && time && currentTime > 0) {
|
|
progress.style.width = `${value}%`;
|
|
buffer.style.width = `${bufferValue}%`;
|
|
time.innerHTML = `${readableDuration(currentTime)} / ${readableDuration(
|
|
duration,
|
|
)}`;
|
|
}
|
|
}
|
|
|
|
function goToTime(e, audio) {
|
|
const currentState = currentAudioState();
|
|
const progress = getById('progress');
|
|
const time = getById('time');
|
|
if (e.clientX > 128) {
|
|
const percent = (e.clientX - 128) / (window.innerWidth - 133);
|
|
currentState.currentTime = currentState.duration * percent; // jumps to 29th secs
|
|
|
|
if (window.Forem.Runtime.podcastMessage) {
|
|
window.Forem.Runtime.podcastMessage({
|
|
action: 'seek',
|
|
seconds: currentState.currentTime.toString(),
|
|
});
|
|
} else {
|
|
audio.currentTime = currentState.currentTime;
|
|
}
|
|
|
|
const currentTime = readableDuration(currentState.currentTime);
|
|
const duration = readableDuration(currentState.duration);
|
|
time.innerHTML = `${currentTime} / ${duration}`;
|
|
progress.style.width = `${percent * 100.0}%`;
|
|
}
|
|
}
|
|
|
|
function readableDuration(seconds) {
|
|
let sec = Math.floor(seconds);
|
|
let min = Math.floor(sec / 60);
|
|
min = min >= 10 ? min : `0${min}`;
|
|
sec = Math.floor(sec % 60);
|
|
sec = sec >= 10 ? sec : `0${sec}`;
|
|
return `${min}:${sec}`;
|
|
}
|
|
|
|
function terminatePodcastBar(audio) {
|
|
audio.removeEventListener(
|
|
'timeupdate',
|
|
updateProgressListener(audio),
|
|
false,
|
|
);
|
|
getById('audiocontent').innerHTML = '';
|
|
stopRotatingActivePodcastIfExist();
|
|
saveMediaState(newAudioState());
|
|
if (window.Forem.Runtime.podcastMessage) {
|
|
window.Forem.Runtime.podcastMessage({ action: 'terminate' });
|
|
}
|
|
}
|
|
|
|
function handlePodcastMessages(event) {
|
|
const message = JSON.parse(event.detail);
|
|
if (message.namespace !== 'podcast') {
|
|
return;
|
|
}
|
|
|
|
const currentState = currentAudioState();
|
|
switch (message.action) {
|
|
case 'init':
|
|
getById('time').innerHTML = 'initializing...';
|
|
currentState.currentTime = 0;
|
|
break;
|
|
case 'play':
|
|
ahoyMessage('play');
|
|
spinPodcastRecord();
|
|
startPodcastBar();
|
|
break;
|
|
case 'pause':
|
|
ahoyMessage('pause');
|
|
setPlaying(false);
|
|
stopRotatingActivePodcastIfExist();
|
|
pausePodcastBar();
|
|
break;
|
|
case 'tick':
|
|
currentState.currentTime = message.currentTime;
|
|
currentState.duration = message.duration;
|
|
updateProgress(currentState.currentTime, currentState.duration, 100);
|
|
break;
|
|
default:
|
|
console.log('Unrecognized message: ', message); // eslint-disable-line no-console
|
|
}
|
|
|
|
saveMediaState(currentState);
|
|
}
|
|
|
|
// When window.Forem.Runtime.podcastMessage is undefined we need to execute web logic
|
|
function initRuntime() {
|
|
if (window.Forem.Runtime.isNativeIOS('podcast')) {
|
|
deviceType = 'iOS';
|
|
} else if (window.Forem.Runtime.isNativeAndroid('podcastMessage')) {
|
|
deviceType = 'Android';
|
|
}
|
|
|
|
if (deviceType !== 'web') {
|
|
window.Forem.Runtime.podcastMessage = (msg) => {
|
|
window.ForemMobile.injectNativeMessage('podcast', msg);
|
|
};
|
|
}
|
|
}
|
|
|
|
function initializeMedia() {
|
|
const currentState = currentAudioState();
|
|
document.getElementById('audiocontent').innerHTML = currentState.html;
|
|
const audio = getById('audio');
|
|
if (audio === undefined || audio === null) {
|
|
window.Forem.audioInitialized = false;
|
|
return;
|
|
}
|
|
if (window.Forem.Runtime.podcastMessage) {
|
|
audio.currentTime = currentState.currentTime || 0;
|
|
}
|
|
loadAudio(audio);
|
|
if (currentState.playing) {
|
|
playAudio(audio).catch(() => {
|
|
pausePodcastBar();
|
|
});
|
|
}
|
|
setTimeout(() => {
|
|
audio.addEventListener(
|
|
'timeupdate',
|
|
updateProgressListener(audio),
|
|
false,
|
|
);
|
|
document.addEventListener('ForemMobile', handlePodcastMessages);
|
|
}, 500);
|
|
applyOnclickToPodcastBar(audio);
|
|
}
|
|
|
|
function setPlaying(playing) {
|
|
const currentState = currentAudioState();
|
|
currentState.playing = playing;
|
|
saveMediaState(currentState);
|
|
}
|
|
|
|
initRuntime();
|
|
spinPodcastRecord();
|
|
findAndApplyOnclickToRecords();
|
|
if (!window.Forem.audioInitialized) {
|
|
window.Forem.audioInitialized = true;
|
|
initializeMedia();
|
|
}
|
|
const audio = getById('audio');
|
|
const audioContent = getById('audiocontent');
|
|
if (audio && audioContent && audioContent.innerHTML.length < 25) {
|
|
// audio not already loaded
|
|
loadAudio(audio);
|
|
}
|
|
}
|