New feat : Redesigned audio player (#279)
* New audio player * New style * Readd vertical bar * Improve appearance safari * Improve layout * Improve alignement of bottom elements * Align
This commit is contained in:
Alexandre
+23
-10
@@ -136,8 +136,8 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isse
|
||||
<a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"><img style="width: unset !important; display: inline; height: 1em; cursor: pointer;" title="Wikipedia" src="images/wiki.png" width="25"></a>
|
||||
<img style="width: unset !important;display: inline;height: 1em;cursor:pointer" title="View species stats" onclick="generateMiniGraph(this, '<?php echo $comnamegraph; ?>')" width=25 src="images/chart.svg">
|
||||
<br>Confidence: <?php echo $percent = round((float)round($mostrecent['Confidence'],2) * 100 ) . '%';?><br></div><br>
|
||||
<video style="margin-top:10px" onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
|
||||
</form>
|
||||
<div class='custom-audio-player' data-audio-src="<?php echo $filename; ?>" data-image-src="<?php echo $filename.".png";?>"></div>
|
||||
</td></form>
|
||||
</tr>
|
||||
</table> <?php break;
|
||||
}
|
||||
@@ -496,6 +496,9 @@ function loadDetectionIfNewExists(previous_detection_identifier=undefined) {
|
||||
loadLeftChart();
|
||||
loadFiveMostRecentDetections();
|
||||
refreshTopTen();
|
||||
|
||||
// Now that new HTML is inserted, re-run player init:
|
||||
initCustomAudioPlayers();
|
||||
}
|
||||
}
|
||||
xhttp.open("GET", "overview.php?ajax_detections=true&previous_detection_identifier="+previous_detection_identifier, true);
|
||||
@@ -534,15 +537,24 @@ function refreshTopTen() {
|
||||
}
|
||||
function refreshDetection() {
|
||||
if (!document.hidden) {
|
||||
var videoelement = document.getElementsByTagName("video")[0];
|
||||
if(typeof videoelement !== "undefined") {
|
||||
// don't refresh the detection if the user is playing the previous one's audio, wait until they're finished
|
||||
if(!!(videoelement.currentTime > 0 && !videoelement.paused && !videoelement.ended && videoelement.readyState > 2) == false) {
|
||||
loadDetectionIfNewExists(videoelement.title);
|
||||
}
|
||||
} else{
|
||||
// image or audio didn't load for some reason, force a refresh in 5 seconds
|
||||
const audioPlayers = document.querySelectorAll(".custom-audio-player");
|
||||
// If no custom-audio-player elements are found, refresh
|
||||
if (audioPlayers.length === 0) {
|
||||
loadDetectionIfNewExists();
|
||||
return;
|
||||
}
|
||||
// Check if any custom audio player is currently playing
|
||||
let isPlaying = false;
|
||||
audioPlayers.forEach((player) => {
|
||||
const audioEl = player.querySelector("audio");
|
||||
if (audioEl && audioEl.currentTime > 0 && !audioEl.paused && !audioEl.ended && audioEl.readyState > 2) {
|
||||
isPlaying = true;
|
||||
}
|
||||
});
|
||||
// If none are playing, refresh detections
|
||||
if (!isPlaying) {
|
||||
const currentIdentifier = audioPlayers[0]?.dataset.audioSrc || undefined;
|
||||
loadDetectionIfNewExists(currentIdentifier);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -613,6 +625,7 @@ startAutoRefresh();
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
<script src="static/custom-audio-player.js"></script>
|
||||
<script>
|
||||
function generateMiniGraph(elem, comname, days = 30) {
|
||||
|
||||
|
||||
+22
-23
@@ -189,6 +189,7 @@ if (get_included_files()[0] === __FILE__) {
|
||||
}
|
||||
|
||||
?>
|
||||
<script src="static/custom-audio-player.js"></script>
|
||||
<script>
|
||||
|
||||
function deleteDetection(filename,copylink=false) {
|
||||
@@ -242,32 +243,30 @@ function toggleShiftFreq(filename, shiftAction, elem) {
|
||||
elem.setAttribute("src","images/unshift.svg");
|
||||
elem.setAttribute("title", "This file has been shifted down in frequency.");
|
||||
elem.setAttribute("onclick", elem.getAttribute("onclick").replace("shift","unshift"));
|
||||
console.log("shifted freqs of " + filename);
|
||||
video=elem.parentNode.getElementsByTagName("video");
|
||||
if (video.length > 0) {
|
||||
video[0].setAttribute("title", video[0].getAttribute("title").replace("/By_Date/","/By_Date/shifted/"));
|
||||
source = video[0].getElementsByTagName("source")[0];
|
||||
source.setAttribute("src", source.getAttribute("src").replace("/By_Date/","/By_Date/shifted/"));
|
||||
video[0].load();
|
||||
} else {
|
||||
atag=elem.parentNode.getElementsByTagName("a")[0];
|
||||
atag.setAttribute("href", atag.getAttribute("href").replace("/By_Date/","/By_Date/shifted/"));
|
||||
console.log("shifted freqs of " + filename);
|
||||
const audioDiv = elem.parentNode.querySelector(".custom-audio-player");
|
||||
if (audioDiv) {
|
||||
audioDiv.setAttribute("data-audio-src", audioDiv.getAttribute("data-audio-src").replace("/By_Date/", "/By_Date/shifted/"));
|
||||
} else {
|
||||
const atag = elem.parentNode.querySelector("a");
|
||||
if (atag) {
|
||||
atag.setAttribute("href", atag.getAttribute("href").replace("/By_Date/", "/By_Date/shifted/"));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
elem.setAttribute("src","images/shift.svg");
|
||||
elem.setAttribute("title", "This file is not shifted in frequency.");
|
||||
elem.setAttribute("onclick", elem.getAttribute("onclick").replace("unshift","shift"));
|
||||
console.log("unshifted freqs of " + filename);
|
||||
video=elem.parentNode.getElementsByTagName("video");
|
||||
if (video.length > 0) {
|
||||
video[0].setAttribute("title", video[0].getAttribute("title").replace("/By_Date/shifted/","/By_Date/"));
|
||||
source = video[0].getElementsByTagName("source")[0];
|
||||
source.setAttribute("src", source.getAttribute("src").replace("/By_Date/shifted/","/By_Date/"));
|
||||
video[0].load();
|
||||
} else {
|
||||
atag=elem.parentNode.getElementsByTagName("a")[0];
|
||||
atag.setAttribute("href", atag.getAttribute("href").replace("/By_Date/shifted/","/By_Date/"));
|
||||
const audioDiv = elem.parentNode.querySelector(".custom-audio-player");
|
||||
if (audioDiv) {
|
||||
audioDiv.setAttribute("data-audio-src", audioDiv.getAttribute("data-audio-src").replace("/By_Date/shifted/", "/By_Date/"));
|
||||
} else {
|
||||
const atag = elem.parentNode.querySelector("a");
|
||||
if (atag) {
|
||||
atag.setAttribute("href", atag.getAttribute("href").replace("/By_Date/shifted/", "/By_Date/"));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -629,8 +628,8 @@ echo "<table>
|
||||
break;
|
||||
}
|
||||
|
||||
if($num_rows < 100){
|
||||
$imageelem = "<video onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster=\"$filename_png\" preload=\"none\" title=\"$filename\"><source src=\"$filename\"></video>";
|
||||
if($iter < 100){
|
||||
$imageelem = "<div class='custom-audio-player' data-audio-src=\"$filename\" data-image-src=\"$filename_png\"></div>";
|
||||
} else {
|
||||
$imageelem = "<a href=\"$filename\"><img src=\"$filename_png\"></a>";
|
||||
}
|
||||
@@ -756,8 +755,8 @@ echo "<table>
|
||||
<img style='cursor:pointer;right:45px' onclick='toggleLock(\"".$filename_formatted."\",\"".$type."\", this)' class=\"copyimage\" width=25 title=\"".$title."\" src=\"".$imageicon."\">
|
||||
<img style='cursor:pointer' onclick='toggleShiftFreq(\"".$filename_formatted."\",\"".$shiftAction."\", this)' class=\"copyimage\" width=25 title=\"".$shiftTitle."\" src=\"".$shiftImageIcon."\">$date $time<br>$values<br>
|
||||
|
||||
<video onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster=\"$filename_png\" preload=\"none\" title=\"$filename\"><source src=\"$filename\"></video></td>
|
||||
</tr>";
|
||||
<div class='custom-audio-player' data-audio-src='$filename' data-image-src='$filename_png'></div>
|
||||
</td></tr>";
|
||||
|
||||
}echo "</table>";}
|
||||
echo "</div>";
|
||||
|
||||
@@ -244,7 +244,7 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" ) {
|
||||
<a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"><img style=";cursor:pointer;float:unset;display:inline" title="Wikipedia" src="images/wiki.png" width="20"></a>
|
||||
<img style=";cursor:pointer;float:unset;display:inline" title="View species stats" onclick="generateMiniGraph(this, '<?php echo $comnamegraph; ?>')" width=20 src="images/chart.svg"><br>
|
||||
<b>Confidence:</b> <?php echo round((float)round($todaytable['Confidence'],2) * 100 ) . '%';?><br></div><br>
|
||||
<video onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source preload="none" src="<?php echo $filename;?>"></video>
|
||||
<div class='custom-audio-player' data-audio-src="<?php echo $filename; ?>" data-image-src="<?php echo $filename.".png";?>"></div>
|
||||
</td>
|
||||
<?php } else { //legacy mode ?>
|
||||
<tr class="relative" id="<?php echo $iterations; ?>">
|
||||
@@ -511,7 +511,8 @@ function loadDetections(detections_limit, element=undefined) {
|
||||
} else {
|
||||
document.getElementById("detections_table").innerHTML= this.responseText;
|
||||
}
|
||||
|
||||
// Reinitialize custom audio players for newly loaded elements
|
||||
initCustomAudioPlayers();
|
||||
}
|
||||
if(searchterm != ""){
|
||||
xhttp.open("GET", "todays_detections.php?ajax_detections=true&display_limit="+detections_limit+"&searchterm="+searchterm, true);
|
||||
@@ -560,6 +561,7 @@ window.addEventListener("load", function(){
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="static/custom-audio-player.js"></script>
|
||||
<script>
|
||||
function generateMiniGraph(elem, comname) {
|
||||
// Make an AJAX call to fetch the number of detections for the bird species
|
||||
|
||||
Reference in New Issue
Block a user