maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Open a page in a new tab w/o warning when playing a podcast #2958 (#3499)

Browse source
This commit is contained in:
Anna Buianova 2019-07-18 16:51:08 +03:00 • committed by Mac Siri
parent 33302d9a0d
commit 445bb0952c
1 changed files with 141 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

232
app/assets/javascripts/initializers/initializePodcastPlayback.js
View file

@ -9,7 +9,6 @@
*/
function initializePodcastPlayback() {
function getById(name) {
return document.getElementById(name);
}
@ -19,17 +18,17 @@ function initializePodcastPlayback() {
}
function audioExistAndIsPlaying() {
return getById("audio") && !getById("audio").paused;
return getById('audio') && !getById('audio').paused;
}
function recordExist() {
return getById(`record-${window.activeEpisode}`)
return getById(`record-${window.activeEpisode}`);
}
function spinPodcastRecord(customMessage) {
if (audioExistAndIsPlaying() && recordExist()) {
getById(`record-${window.activeEpisode}`).classList.add("playing");
changeStatusMessage(customMessage ? customMessage : 'playing');
getById(`record-${window.activeEpisode}`).classList.add('playing');
changeStatusMessage(customMessage || 'playing');
}
}
@ -45,36 +44,51 @@ function initializePodcastPlayback() {
var podcastLiquidTagrecords = getByClass('podcastliquidtag__record');
if (podcastPageRecords.length > 0) {
return podcastPageRecords;
} else {
return podcastLiquidTagrecords;
}
return podcastLiquidTagrecords;
}
function applyOnclickToPodcastBar(audio) {
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 = audio.volume*100;
getById('volumeslider').onchange = function(e) { audio.volume = e.target.value/100 };
getById('speed').onclick = function() { changePlaybackRate(audio) };
getById('closebutt').onclick = function() { terminatePodcastBar(audio) };
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 = audio.volume * 100;
getById('volumeslider').onchange = function(e) {
audio.volume = e.target.value / 100;
};
getById('speed').onclick = function() {
changePlaybackRate(audio);
};
getById('closebutt').onclick = function() {
terminatePodcastBar(audio);
};
}
function podcastBarAlreadyExistAndPlayingTargetEpisode(episodeSlug) {
return getById('audiocontent').innerHTML.indexOf(`${episodeSlug}`) !== -1
return getById('audiocontent').innerHTML.indexOf(`${episodeSlug}`) !== -1;
}
function updateProgressListener(audio) {
return function (e) {
return function(e) {
updateProgress(e, audio);
}
};
}
function loadAndPlayNewPodcast(episodeSlug) {
getById('audiocontent').innerHTML = getById(`hidden-audio-${episodeSlug}`).innerHTML;
getById('audiocontent').innerHTML = getById(
`hidden-audio-${episodeSlug}`,
).innerHTML;
var audio = getById('audio');
audio.addEventListener("timeupdate", updateProgressListener(audio), false);
audio.addEventListener('timeupdate', updateProgressListener(audio), false);
audio.load();
playPause(audio);
applyOnclickToPodcastBar(audio);
@ -82,10 +96,10 @@ function initializePodcastPlayback() {
function findAndApplyOnclickToRecords() {
var records = findRecords();
Array.prototype.forEach.call(records, function (record) {
Array.prototype.forEach.call(records, function(record) {
var episodeSlug = record.getAttribute('data-episode');
var podcastSlug = record.getAttribute('data-podcast');
record.onclick = function () {
record.onclick = function() {
if (podcastBarAlreadyExistAndPlayingTargetEpisode(episodeSlug)) {
var audio = getById('audio');
if (audio) {
@ -95,8 +109,8 @@ function initializePodcastPlayback() {
stopRotatingActivePodcastIfExist();
loadAndPlayNewPodcast(episodeSlug);
}
}
})
};
});
}
function changePlaybackRate(audio) {
@ -104,70 +118,85 @@ function initializePodcastPlayback() {
var speed = parseFloat(el.getAttribute('data-speed'));
if (speed == 2) {
el.setAttribute('data-speed', 0.5);
el.innerHTML = '0.5x'
audio.playbackRate = 0.5
el.innerHTML = '0.5x';
audio.playbackRate = 0.5;
} else {
el.setAttribute('data-speed', speed+0.5);
el.innerHTML = speed+0.5+"x"
audio.playbackRate = speed+0.5
el.setAttribute('data-speed', speed + 0.5);
el.innerHTML = speed + 0.5 + 'x';
audio.playbackRate = speed + 0.5;
}
}
function changeStatusMessage(message) {
if(getById(`status-message-${window.activeEpisode}`)) {
if (getById(`status-message-${window.activeEpisode}`)) {
getById(`status-message-${window.activeEpisode}`).innerHTML = message;
} else if (message === 'loading' && document.querySelector('.status-message')) {
} else if (
message === 'loading' &&
document.querySelector('.status-message')
) {
document.querySelector('.status-message').innerHTML = message;
} else {
}
}
function applyOnbeforeUnloadWarning() {
var message = 'You are currently playing a podcast. Are you sure you want to leave?'
var message =
'You are currently playing a podcast. Are you sure you want to leave?';
window.onclick = function(event) {
if (event.target.tagName === 'A' && !event.target.href.includes('https://dev.to')) {
if (
event.target.tagName === 'A' &&
!event.target.href.includes('https://dev.to') &&
!event.ctrlKey &&
!event.metaKey
) {
event.preventDefault();
if (window.confirm(message)) { window.location = event.target.href; }
if (window.confirm(message)) {
window.location = event.target.href;
}
}
}
window.onbeforeunload = function () {
};
window.onbeforeunload = function() {
return message;
};
}
function startPodcastBar() {
getById('barPlayPause').classList.add("playing");
getById('progressBar').classList.add("playing");
getById('animated-bars').classList.add("playing");
getById('barPlayPause').classList.add('playing');
getById('progressBar').classList.add('playing');
getById('animated-bars').classList.add('playing');
}
function startAudioPlayback(audio) {
audio.play().then(function () {
spinPodcastRecord();
startPodcastBar();
applyOnbeforeUnloadWarning();
}, function () {
// Handle any pause() failures.
}).catch(function (error) {
audio.play();
setTimeout(function() {
spinPodcastRecord('loading');
startPodcastBar();
applyOnbeforeUnloadWarning();
}, 300);
})
audio
.play()
.then(
function() {
spinPodcastRecord();
startPodcastBar();
applyOnbeforeUnloadWarning();
},
function() {
// Handle any pause() failures.
},
)
.catch(function(error) {
audio.play();
setTimeout(function() {
spinPodcastRecord('loading');
startPodcastBar();
applyOnbeforeUnloadWarning();
}, 300);
});
}
function removeOnbeforeUnloadWarning() {
window.onbeforeunload = function(){
window.onbeforeunload = function() {
return null;
};
}
function pausePodcastBar() {
getById('barPlayPause').classList.remove("playing");
getById('animated-bars').classList.remove("playing");
getById('barPlayPause').classList.remove('playing');
getById('animated-bars').classList.remove('playing');
}
function pauseAudioPlayback(audio) {
@ -182,10 +211,24 @@ function initializePodcastPlayback() {
window.activeEpisode = audio.getAttribute('data-episode');
window.activePodcast = audio.getAttribute('data-podcast');
if (audio.paused) {
ga('send', 'event', 'click', 'play podcast', `${window.activePodcast} ${window.activeEpisode}`, null);
ga(
'send',
'event',
'click',
'play podcast',
`${window.activePodcast} ${window.activeEpisode}`,
null,
);
startAudioPlayback(audio);
} else {
ga('send', 'event', 'click', 'pause podcast', `${window.activePodcast} ${window.activeEpisode}`, null);
ga(
'send',
'event',
'click',
'pause podcast',
`${window.activePodcast} ${window.activeEpisode}`,
null,
);
pauseAudioPlayback(audio);
}
}
@ -193,57 +236,64 @@ function initializePodcastPlayback() {
function muteUnmute(audio) {
if (audio.muted) {
audio.muted = false;
getById('mutebutt').classList.add("hidden");
getById('volumeindicator').classList.add("showing");
getById('mutebutt').classList.remove("showing");
getById('volumeindicator').classList.remove("hidden");
getById('mutebutt').classList.add('hidden');
getById('volumeindicator').classList.add('showing');
getById('mutebutt').classList.remove('showing');
getById('volumeindicator').classList.remove('hidden');
} else {
audio.muted = true;
getById('mutebutt').classList.add("showing");
getById('volumeindicator').classList.add("hidden");
getById('mutebutt').classList.remove("hidden");
getById('volumeindicator').classList.remove("showing");
getById('mutebutt').classList.add('showing');
getById('volumeindicator').classList.add('hidden');
getById('mutebutt').classList.remove('hidden');
getById('volumeindicator').classList.remove('showing');
}
}
function updateProgress(e,audio) {
var progress = getById("progress");
var buffer = getById("buffer");
var time = getById("time");
var value = 0;
var bufferValue = 0;
if (audio.currentTime > 0) {
value = Math.floor((100.0 / audio.duration) * audio.currentTime);
bufferValue = (audio.buffered.end(audio.buffered.length-1)/ audio.duration)*100;
}
progress.style.width = value + "%";
buffer.style.width = bufferValue + "%";
time.innerHTML = readableDuration(audio.currentTime)+" / "+readableDuration(audio.duration);
function updateProgress(e, audio) {
var progress = getById('progress');
var buffer = getById('buffer');
var time = getById('time');
var value = 0;
var bufferValue = 0;
if (audio.currentTime > 0) {
value = Math.floor((100.0 / audio.duration) * audio.currentTime);
bufferValue =
(audio.buffered.end(audio.buffered.length - 1) / audio.duration) * 100;
}
progress.style.width = value + '%';
buffer.style.width = bufferValue + '%';
time.innerHTML =
readableDuration(audio.currentTime) +
' / ' +
readableDuration(audio.duration);
}
function goToTime(e, audio) {
var progress = getById("progress");
if(e.clientX > 128) {
var percent = (e.clientX-128)/(window.innerWidth-133);
var progress = getById('progress');
if (e.clientX > 128) {
var percent = (e.clientX - 128) / (window.innerWidth - 133);
var duration = audio.duration;
audio.currentTime = duration*percent; // jumps to 29th secs
time.innerHTML = readableDuration(audio.currentTime)+" / "+readableDuration(audio.duration);
progress.style.width = (percent*100.0) + "%";
audio.currentTime = duration * percent; // jumps to 29th secs
time.innerHTML =
readableDuration(audio.currentTime) +
' / ' +
readableDuration(audio.duration);
progress.style.width = percent * 100.0 + '%';
}
}
function readableDuration(seconds) {
var sec = Math.floor( seconds );
var min = Math.floor( sec / 60 );
var sec = Math.floor(seconds);
var min = Math.floor(sec / 60);
min = min >= 10 ? min : '0' + min;
sec = Math.floor( sec % 60 );
sec = Math.floor(sec % 60);
sec = sec >= 10 ? sec : '0' + sec;
return min + ':' + sec;
}
function terminatePodcastBar(audio) {
event.stopPropagation();
audio.removeEventListener("timeupdate", updateProgressListener, false);
audio.removeEventListener('timeupdate', updateProgressListener, false);
getById('audiocontent').innerHTML = '';
stopRotatingActivePodcastIfExist();
removeOnbeforeUnloadWarning();