Skip to content
Permalink
Browse files

Render additional embedded audios from links on extended audio search

  • Loading branch information...
luccioman committed Feb 8, 2019
1 parent d167b14 commit c617ea58a0158fc5659774eedccb0b6f465f1f4b
Showing with 306 additions and 30 deletions.
  1. +16 −0 htroot/env/base.css
  2. +118 −5 htroot/js/yacysearchAudio.js
  3. +1 −6 htroot/yacysearch.html
  4. +42 −7 htroot/yacysearchitem.html
  5. +129 −12 htroot/yacysearchitem.java
@@ -1110,6 +1110,22 @@ div#tagcloud {
color: #ff8c00;
}

.embeddedAudios {
/* Remove bootstrap ul bottom margin so that there is no interval with the expandable list */
margin-bottom: 0px;
}

/* Button to expand/collapse audio results beyond the initial number of elements display limit */
.expandAudiosBtn[aria-expanded="true"] .glyphicon:before {
/* Repeated same char as in the glyphicon-chevron-left class */
content: "\e079\e079";
}

.expandAudiosBtn[aria-expanded="false"] .glyphicon:before {
/* Repeated same char as in the glyphicon-chevron-right class */
content: "\e080\e080";
}

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

/******* yacysearchtrailer.html **********
@@ -19,6 +19,24 @@

/* 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.
*
@@ -28,11 +46,15 @@
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) {
event.target.title = "Cannot play ("
titleAddition = " - Cannot play ("
+ event.target.error.message + ")";
} else {
event.target.title = "Cannot play";
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*/
@@ -165,7 +187,7 @@ function playAllNext(playerElem) {
while (nextTrack < audioElems.length) {
var audioElem = audioElems[nextTrack];
if (audioElem != null && audioElem.error == null
&& audioElem.play) {
&& audioElem.play && audioElem.className.indexOf("hidden") < 0) {
if(audioElem.currentTime > 0) {
audioElem.currentTime = 0;
}
@@ -177,8 +199,23 @@ function playAllNext(playerElem) {
/* 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);
}
@@ -224,7 +261,7 @@ function handlePlayAllBtnClick() {
var audioElems = document.getElementsByTagName("audio");
var playerElem = document.getElementById("audioControls");
var playAllIcon = document.getElementById("playAllIcon");
if (playerElem != null && audioElems != null) {
if (playerElem != null && audioElems != null && playAllIcon != null) {
if (playAllIcon.className == "glyphicon glyphicon-play" && audioElems.length > 0) {
var currentTrack = parseInt(playerElem
.getAttribute("data-current-track"));
@@ -243,7 +280,7 @@ function handlePlayAllBtnClick() {
while (currentTrack < audioElems.length) {
var currentAudioElem = audioElems[currentTrack];
if (currentAudioElem != null && currentAudioElem.error == null
&& currentAudioElem.play) {
&& currentAudioElem.play && currentAudioElem.className.indexOf("hidden") < 0) {
currentAudioElem.play();
updatePlayAllButton(true);
break;
@@ -291,4 +328,80 @@ function handleStopAllBtnClick() {
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", "");
}
}
}
}
@@ -29,12 +29,7 @@
#(resultTable)#::::
#(embed)#::
/* Show the overall audio play control buttons only when JavaScript is enabled as they are useless without it */
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", "");
}
showJSAudioControls();
#(/embed)#
#(/resultTable)#
@@ -65,13 +65,48 @@ <h4 class="linktitle">
<tr class="#(col)#TableCellLight::TableCellDark#(/col)#">
<td>#[name]#</td>
<td><a href="#[href]#" target="#[target]#" #(noreferrer)#::rel="noreferrer"#(/noreferrer)#>#[hrefshort]#</a>
<td class="text-center">#(embed)#::<audio src="#[href]#"
preload="none" controls="controls"
onplaying="handleAudioPlaying(event)"
onpause="handleAudioPause(event)"
onerror="handleAudioLoadError(event)"
onended="handleAudioEnded(event)">Not supported
</audio>#(/embed)#
<td class="text-center">#(embed)#::#(list)#::<ul class="embeddedAudios list-unstyled">#(/list)#
#{audioSources}#
#(list)#::<li>#(/list)#
<audio src="#[href]#"
title="#[title]#"
preload="none" controls="controls"
onplaying="handleAudioPlaying(event)"
onpause="handleAudioPause(event)"
onerror="handleAudioLoadError(event)"
onended="handleAudioEnded(event)">Not supported
</audio>
#(list)#::</li>#(/list)#
#{/audioSources}#
#(list)#::</ul>#(/list)#
#(moreAudios)#::
<ul id="expandableAudios_#[urlhash]#" class="list-unstyled hidden">
#{audioSources}#<li>
<audio src="#[href]#"
title="#[title]#"
class="hidden"
preload="none" controls="controls"
onplaying="handleAudioPlaying(event)"
onpause="handleAudioPause(event)"
onerror="handleAudioLoadError(event)"
onended="handleAudioEnded(event)">Not supported
</audio></li>#{/audioSources}#
</ul>
<ul class="list-unstyled">
<li>
<span id="hiddenCount_#[urlhash]#">#[hiddenCount]# more...</span>
<button class="expandAudiosBtn btn btn-default btn-xs hidden" type="button"
aria-controls="expandableAudios_#[urlhash]#" aria-expanded="false"
title="Show #[expandableCount]# more"
data-title-collapsed="Show #[expandableCount]# more"
data-title-expanded="Show only the first #[firstLimit]#"
onclick="toggleExpandableAudios(this, 'expandableAudios_#[urlhash]#', 'hiddenCount_#[urlhash]#', 'evenMoreCount_#[urlhash]#')">
<span class="glyphicon"></span>
</button>
#(evenMore)#<span id="evenMoreCount_#[urlhash]#" class="hidden">#[count]# more...</span>#(/evenMore)#
</li>
</ul>
#(/moreAudios)##(/embed)#
</td>
</tr>#(/item)#
::

0 comments on commit c617ea5

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