You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
407 lines
14 KiB
407 lines
14 KiB
/*
|
|
* Copyright (C) 2019 by luccioman; https://github.com/luccioman
|
|
*
|
|
* This file is part of YaCy.
|
|
*
|
|
* YaCy is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 2 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* YaCy is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with YaCy. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
/* Functions dedicated to control playing of YaCy audio search results */
|
|
|
|
/**
|
|
* Show elements that are only useful when JavaScript is enabled
|
|
*/
|
|
function showJSAudioControls() {
|
|
var audioElems = document.getElementsByTagName("audio");
|
|
var audioControls = document.getElementById("audioControls");
|
|
if(audioElems != null && audioElems.length > 0 && audioControls != null && audioControls.className.indexOf("hidden") >= 0) {
|
|
audioControls.className = audioControls.className.replace("hidden", "");
|
|
}
|
|
|
|
var expandAudioButtons = document.getElementsByClassName("expandAudiosBtn");
|
|
if(expandAudioButtons != null) {
|
|
for(var i = 0; i < expandAudioButtons.length; i++) {
|
|
expandAudioButtons[i].className = expandAudioButtons[i].className.replace("hidden", "");
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle embedded audio result load error.
|
|
*
|
|
* @param event
|
|
* {ErrorEvent} the error event triggered
|
|
*/
|
|
function handleAudioLoadError(event) {
|
|
if (event != null && event.target != null) {
|
|
/* Fill the title attribute to provide some feedback about the error without need for looking at the console */
|
|
var titleAddition;
|
|
if (event.target.error != null && event.target.error.message) {
|
|
titleAddition = " - Cannot play ("
|
|
+ event.target.error.message + ")";
|
|
} else {
|
|
titleAddition = " - Cannot play";
|
|
}
|
|
if(event.target.title == null || event.target.title.indexOf(titleAddition) < 0) {
|
|
event.target.title += titleAddition;
|
|
}
|
|
|
|
/* Apply CSS class marking error for visual feedback*/
|
|
event.target.className = "audioError";
|
|
|
|
/* Start playing the next audio result when "Play all" is running */
|
|
var playerElem = document.getElementById("audioControls");
|
|
var currentPlayAllTrack = playerElem != null ? parseInt(playerElem
|
|
.getAttribute("data-current-track")) : -1;
|
|
if(!isNaN(currentPlayAllTrack) && currentPlayAllTrack >= 0) {
|
|
/* Currently playing all audio results */
|
|
playAllNext(playerElem);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle embedded audio result 'playing' event : pauses any other currently
|
|
* playing audio.
|
|
*
|
|
* @param event
|
|
* {Event} a 'playing' event
|
|
*/
|
|
function handleAudioPlaying(event) {
|
|
if (event != null && event.target != null) {
|
|
var audioElems = document.getElementsByTagName("audio");
|
|
var playerElem = document.getElementById("audioControls");
|
|
var currentPlayAllTrack = playerElem != null ? parseInt(playerElem
|
|
.getAttribute("data-current-track")) : -1;
|
|
if (audioElems != null) {
|
|
for (var i = 0; i < audioElems.length; i++) {
|
|
var audioElem = audioElems[i];
|
|
|
|
if (audioElem == event.target) {
|
|
if (!isNaN(currentPlayAllTrack) && currentPlayAllTrack >= 0) {
|
|
if(currentPlayAllTrack == i) {
|
|
/* Starting or resuming play of the currently selected "Play all" track */
|
|
updatePlayAllButton(true);
|
|
} else {
|
|
/* Playing here a single result while "Play all" was running on a different track */
|
|
|
|
/* "Play all" is interrupted */
|
|
updatePlayAllButton(false);
|
|
|
|
/* Update the current play all track index */
|
|
playerElem.setAttribute("data-current-track", -1);
|
|
}
|
|
}
|
|
} else if (audioElem.pause && !audioElem.paused) {
|
|
audioElem.pause();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle embedded audio result 'pause' event.
|
|
*
|
|
* @param event
|
|
* {Event} a 'pause' event
|
|
*/
|
|
function handleAudioPause(event) {
|
|
if(event != null && event.target != null && event.target.error == null) {
|
|
var playerElem = document.getElementById("audioControls");
|
|
var currentPlayAllTrack = playerElem != null ? parseInt(playerElem
|
|
.getAttribute("data-current-track")) : -1;
|
|
if(!isNaN(currentPlayAllTrack) && currentPlayAllTrack >= 0) {
|
|
/* Currently playing all audio results */
|
|
var audioElems = document.getElementsByTagName("audio");
|
|
if(audioElems != null) {
|
|
for(var i = 0; i < audioElems.length; i++) {
|
|
if(audioElems[i] == event.target && currentPlayAllTrack == i) {
|
|
/* Update the "Play all" button icon to reflect the new status.
|
|
* Do not update when pausing another track that may be already paused. */
|
|
updatePlayAllButton(false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle embedded audio result 'ended' event : start playing the next audio
|
|
* result when the "Play all" button is pressed.
|
|
*
|
|
* @param event
|
|
* {Event} a 'playing' event
|
|
*/
|
|
function handleAudioEnded(event) {
|
|
if (event != null && event.target != null) {
|
|
/* Start playing the next audio result when "Play all" is pressed */
|
|
var playerElem = document.getElementById("audioControls");
|
|
var currentPlayAllTrack = playerElem != null ? parseInt(playerElem
|
|
.getAttribute("data-current-track")) : -1;
|
|
if(!isNaN(currentPlayAllTrack) && currentPlayAllTrack >= 0) {
|
|
/* Currently playing all audio results */
|
|
playAllNext(playerElem);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Start playing the next audio result when one is available and update the
|
|
* "Play all" button.
|
|
*
|
|
* @param playerElem
|
|
* the player container element
|
|
*/
|
|
function playAllNext(playerElem) {
|
|
if (playerElem == null) {
|
|
return;
|
|
}
|
|
var audioElems = document.getElementsByTagName("audio");
|
|
if (audioElems == null) {
|
|
/* No more audio elements ? */
|
|
playerElem.setAttribute("data-current-track", -1);
|
|
updatePlayAllButton(false);
|
|
} else {
|
|
var currentTrack = parseInt(playerElem.getAttribute("data-current-track"));
|
|
var nextTrack;
|
|
if (isNaN(currentTrack) || currentTrack < 0
|
|
|| currentTrack >= audioElems.length) {
|
|
nextTrack = 0;
|
|
} else {
|
|
nextTrack = currentTrack + 1;
|
|
}
|
|
if (nextTrack < audioElems.length) {
|
|
while (nextTrack < audioElems.length) {
|
|
var audioElem = audioElems[nextTrack];
|
|
if (audioElem != null && audioElem.error == null
|
|
&& audioElem.play && audioElem.className.indexOf("hidden") < 0) {
|
|
if(audioElem.currentTime > 0) {
|
|
audioElem.currentTime = 0;
|
|
}
|
|
audioElem.play();
|
|
updatePlayAllButton(true);
|
|
playerElem.setAttribute("data-current-track", nextTrack);
|
|
break;
|
|
}
|
|
/* Go to the next element when not playable */
|
|
nextTrack++;
|
|
}
|
|
if(nextTrack >= audioElems.length) {
|
|
/* No other result to play */
|
|
if (currentTrack >= 0 && currentTrack < audioElems.length
|
|
&& !audioElems[currentTrack].paused
|
|
&& audioElems[currentTrack].pause) {
|
|
audioElems[currentTrack].pause();
|
|
}
|
|
playerElem.setAttribute("data-current-track", -1);
|
|
updatePlayAllButton(false);
|
|
}
|
|
} else {
|
|
/* No other result to play */
|
|
if (currentTrack >= 0 && currentTrack < audioElems.length
|
|
&& !audioElems[currentTrack].paused
|
|
&& audioElems[currentTrack].pause) {
|
|
audioElems[currentTrack].pause();
|
|
}
|
|
playerElem.setAttribute("data-current-track", -1);
|
|
updatePlayAllButton(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Update the "Play all" button
|
|
* @param playing when true the new status becomes playing all, otherwise it becomes paused
|
|
*/
|
|
function updatePlayAllButton(playing) {
|
|
var playAllIcon = document.getElementById("playAllIcon");
|
|
if (playAllIcon != null) {
|
|
if(playing) {
|
|
if(playAllIcon.className != "glyphicon glyphicon-pause") {
|
|
playAllIcon.className = "glyphicon glyphicon-pause";
|
|
}
|
|
} else if(playAllIcon.className != "glyphicon glyphicon-play") {
|
|
playAllIcon.className = "glyphicon glyphicon-play";
|
|
}
|
|
}
|
|
var playAllBtn = document.getElementById("playAllBtn");
|
|
if(playAllBtn != null) {
|
|
if(playing) {
|
|
var pauseTitle = playAllBtn.getAttribute("data-pause-title");
|
|
if(pauseTitle != null && playAllBtn.title != pauseTitle) {
|
|
playAllBtn.title = pauseTitle;
|
|
}
|
|
} else {
|
|
var playAllTitle = playAllBtn.getAttribute("data-playAll-title");
|
|
if(playAllTitle != null && playAllBtn.title != playAllTitle) {
|
|
playAllBtn.title = playAllTitle;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Handle a click on the "Play all" button.
|
|
*/
|
|
function handlePlayAllBtnClick() {
|
|
var audioElems = document.getElementsByTagName("audio");
|
|
var playerElem = document.getElementById("audioControls");
|
|
var playAllIcon = document.getElementById("playAllIcon");
|
|
if (playerElem != null && audioElems != null && playAllIcon != null) {
|
|
if (playAllIcon.className == "glyphicon glyphicon-play" && audioElems.length > 0) {
|
|
var currentTrack = parseInt(playerElem
|
|
.getAttribute("data-current-track"));
|
|
if (isNaN(currentTrack) || currentTrack < 0
|
|
|| currentTrack >= audioElems.length) {
|
|
/* Start a new play of all audio results */
|
|
currentTrack = 0;
|
|
/* Reset all times */
|
|
for (var j = 0; j < audioElems.length; j++) {
|
|
var elem = audioElems[j];
|
|
if (elem.paused && elem.currentTime > 0) {
|
|
elem.currentTime = 0;
|
|
}
|
|
}
|
|
}
|
|
while (currentTrack < audioElems.length) {
|
|
var currentAudioElem = audioElems[currentTrack];
|
|
if (currentAudioElem != null && currentAudioElem.error == null
|
|
&& currentAudioElem.play && currentAudioElem.className.indexOf("hidden") < 0) {
|
|
currentAudioElem.play();
|
|
updatePlayAllButton(true);
|
|
break;
|
|
}
|
|
/* Go to the next element when not playable */
|
|
currentTrack++;
|
|
}
|
|
playerElem.setAttribute("data-current-track", currentTrack);
|
|
} else {
|
|
/* Pause any running track */
|
|
for (var i = 0; i < audioElems.length; i++) {
|
|
var audioElem = audioElems[i];
|
|
if (audioElem.pause && !audioElem.paused) {
|
|
audioElem.pause();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle a click on the "Stop all" button.
|
|
*/
|
|
function handleStopAllBtnClick() {
|
|
/* Stop all audio elements */
|
|
var audioElems = document.getElementsByTagName("audio");
|
|
if (audioElems != null) {
|
|
for (var i = 0; i < audioElems.length; i++) {
|
|
var audioElem = audioElems[i];
|
|
if (audioElem.pause && !audioElem.paused) {
|
|
audioElem.pause();
|
|
if(audioElem.currentTime > 0) {
|
|
audioElem.currentTime = 0;
|
|
}
|
|
} else if(audioElem.paused && audioElem.currentTime > 0) {
|
|
audioElem.currentTime = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
updatePlayAllButton(false);
|
|
|
|
/* Update the current track index */
|
|
var playerElem = document.getElementById("audioControls");
|
|
if (playerElem != null) {
|
|
playerElem.setAttribute("data-current-track", -1);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Toggle visibility on a list of audio elements beyond the initial limit of elements to display.
|
|
* @param {HTMLButtonElement} button the button used to expand the audio elements
|
|
* @param {String} expandableAudiosId the id of the container of audio elements which visibility has to be toggled
|
|
* @param {String} hiddenCountId the id of the element containing the number of hidden elements when expandable audios are collapsed
|
|
* @param {String} evenMoreCountId the id of the eventual element containing the number of hidden elements remaining when audios are expanded
|
|
*/
|
|
function toggleExpandableAudios(button, expandableAudiosId, hiddenCountId, evenMoreCountId) {
|
|
var expandableAudiosContainer = document.getElementById(expandableAudiosId);
|
|
var hiddenCountElem = document.getElementById(hiddenCountId);
|
|
var evenMoreElem = document.getElementById(evenMoreCountId);
|
|
if(button != null && expandableAudiosContainer != null) {
|
|
var childrenAudioElems = expandableAudiosContainer.getElementsByTagName("audio");
|
|
var playerElem = document.getElementById("audioControls");
|
|
var playAllIcon = document.getElementById("playAllIcon");
|
|
var currentPlayAllTrack = playerElem != null ? parseInt(playerElem
|
|
.getAttribute("data-current-track")) : -1;
|
|
if(button.getAttribute("aria-expanded") == "true") {
|
|
var currentPlayAllAudioElem = null;
|
|
if(!isNaN(currentPlayAllTrack) && currentPlayAllTrack >= 0) {
|
|
/* Currently playing all audio results */
|
|
var audioElems = document.getElementsByTagName("audio");
|
|
if(audioElems != null && audioElems.length > currentPlayAllTrack) {
|
|
currentPlayAllAudioElem = audioElems[currentPlayAllTrack];
|
|
}
|
|
}
|
|
/* Additionnaly we modify the aria-expanded state for improved accessiblity */
|
|
button.setAttribute("aria-expanded", "false");
|
|
button.title = button.getAttribute("data-title-collapsed");
|
|
expandableAudiosContainer.className += " hidden";
|
|
if(hiddenCountElem != null) {
|
|
hiddenCountElem.className = hiddenCountElem.className.replace("hidden", "");
|
|
}
|
|
if(evenMoreElem != null) {
|
|
evenMoreElem.className += " hidden";
|
|
}
|
|
var hidingPlayAll = false;
|
|
for(var i = 0; i < childrenAudioElems.length; i++) {
|
|
var audioElem = childrenAudioElems[i];
|
|
if(currentPlayAllAudioElem == audioElem) {
|
|
/* Playing all results, and the currently playing element will be hidden*/
|
|
hidingPlayAll = true;
|
|
} else if (audioElem.pause && !audioElem.paused) {
|
|
/* Pause this as it will be hidden */
|
|
audioElem.pause();
|
|
}
|
|
audioElem.className += " hidden";
|
|
}
|
|
if(hidingPlayAll) {
|
|
if (playAllIcon.className == "glyphicon glyphicon-play") {
|
|
/* Stop playing all */
|
|
updatePlayAllButton(false);
|
|
playerElem.setAttribute("data-current-track", -1);
|
|
} else {
|
|
/* Continue playing all to an element that is not hidden */
|
|
playAllNext(playerElem);
|
|
}
|
|
}
|
|
} else {
|
|
/* Additionnaly we modify the aria-expanded state for improved accessiblity */
|
|
button.setAttribute("aria-expanded", "true");
|
|
button.title = button.getAttribute("data-title-expanded");
|
|
expandableAudiosContainer.className = expandableAudiosContainer.className.replace("hidden", "");
|
|
if(hiddenCountElem != null) {
|
|
hiddenCountElem.className += " hidden";
|
|
}
|
|
if(evenMoreElem != null) {
|
|
evenMoreElem.className = evenMoreElem.className.replace("hidden", "");
|
|
}
|
|
for(var j = 0; j < childrenAudioElems.length; j++) {
|
|
childrenAudioElems[j].className = childrenAudioElems[j].className.replace("hidden", "");
|
|
}
|
|
}
|
|
}
|
|
} |