Skip to content
Permalink
Browse files

Added basic controls to play all audio results.

Not displayed when JavaScript is disabled.
  • Loading branch information...
luccioman committed Jan 30, 2019
1 parent 965c752 commit 69f19710528d363488844c79c973df2c7612648d
Showing with 370 additions and 46 deletions.
  1. +23 −0 htroot/env/base.css
  2. +3 −44 htroot/js/yacysearch.js
  3. +294 −0 htroot/js/yacysearchAudio.js
  4. +5 −0 htroot/jslicense.html
  5. +37 −1 htroot/yacysearch.html
  6. +8 −1 htroot/yacysearchitem.html
@@ -1089,6 +1089,29 @@ div#tagcloud {
z-index: 100;
}


/******* yacysearch.html **********
/* Higlight overall audio controls when playing all results */
#audioControls:not([data-current-track="-1"]) {
border-style: solid;
border-color: #1e90ff;
}

#stopAllBtn:hover {
color: red;
}

#playAllBtn:hover .glyphicon-play {
color: #32cd32;
}

#playAllBtn:hover .glyphicon-pause {
color: #ff8c00;
}

/******* yacysearch.html end ***********/

/******* yacysearchtrailer.html **********
Styling for the resource switch button, to avoid overlapping at various screen sizes */

@@ -286,52 +286,11 @@ function toggleMoreTags(button, moreTagsId) {
}
}

/**
* 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 */
if (event.target.error != null && event.target.error.message) {
event.target.title = "Cannot play ("
+ event.target.error.message + ")";
} else {
event.target.title = "Cannot play";
}

/* Apply CSS class marking error for visual feedback*/
event.target.className = "audioError";
}
}

/**
* 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");
if(audioElems != null) {
for (var i = 0; i < audioElems.length; i++) {
var audioElem = audioElems[i];
if (audioElem != event.target && audioElem.pause
&& !audioElem.paused) {
audioElem.pause();
}
}
}
}
}

/**
* Handle a rendering error on a result image thumbnail.
* @param imgElem {HTMLImageElement} the html img element that could not be rendered
*
* @param imgElem
* {HTMLImageElement} the html img element that could not be rendered
*/
function handleResultThumbError(imgElem) {
if (imgElem.parentNode != null && imgElem.parentNode.parentNode != null
@@ -0,0 +1,294 @@
/*
* 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 */

/**
* 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 */
if (event.target.error != null && event.target.error.message) {
event.target.title = "Cannot play ("
+ event.target.error.message + ")";
} else {
event.target.title = "Cannot play";
}

/* 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) {
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++;
}
} else {
/* No other result to play */
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) {
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.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);
}
}
@@ -208,6 +208,11 @@ <h1>YaCy JavaScript files license information</h1>
<td><a href="http://www.gnu.org/licenses/gpl-2.0.html">GNU-GPL-2.0-or-later</a></td>
<td><a href="js/yacysearch.js">yacysearch.js</a></td>
</tr>
<tr>
<td><a href="js/yacysearchAudio.js">yacysearchAudio.js</a></td>
<td><a href="http://www.gnu.org/licenses/gpl-2.0.html">GNU-GPL-2.0-or-later</a></td>
<td><a href="js/yacysearchAudio.js">yacysearchAudio.js</a></td>
</tr>
<tr>
<td><a href="js/yacysort.js" charset="UTF-8">yacysort.js</a></td>
<td><a href="http://www.gnu.org/licenses/gpl-2.0.html">GNU-GPL-2.0-or-later</a></td>

0 comments on commit 69f1971

Please sign in to comment.
You can’t perform that action at this time.