From 6b03f1ff47dd9c1d00be6c4f22c1192b859cb270 Mon Sep 17 00:00:00 2001
From: ehpersonal38 <103586016+ehpersonal38@users.noreply.github.com>
Date: Fri, 15 Apr 2022 09:41:13 -0400
Subject: [PATCH] QOL improvements to live stream

If a user starts playing a recording while the live stream is already playing, the live stream volume will be set to 0 until the recording is finished playing. Prevents overlapping audio.

Open to feedback/suggestions. Thanks!
---
 homepage/views.php            | 15 +++++++++++++++
 scripts/overview.php          |  2 +-
 scripts/play.php              |  2 +-
 scripts/stats.php             |  4 ++--
 scripts/todays_detections.php |  2 +-
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/homepage/views.php b/homepage/views.php
index 10a356a..6f18786 100644
--- a/homepage/views.php
+++ b/homepage/views.php
@@ -184,6 +184,21 @@ function myFunction() {
     x.className = "topnav";
   }
 }
+function setLiveStreamVolume(vol) {
+  var audioelement =  window.parent.document.getElementsByTagName("audio")[0];
+  if (typeof(audioelement) != 'undefined' && audioelement != null)
+  {
+    audioelement.volume = vol
+  }
+}
+window.onbeforeunload = function(event) {
+  // if the user is playing a video and then navigates away mid-play, the live stream audio should be unmuted again
+  var audioelement =  window.parent.document.getElementsByTagName("audio")[0];
+  if (typeof(audioelement) != 'undefined' && audioelement != null)
+  {
+    audioelement.volume = 1
+  }
+}
 </script>
 </div>
 </body>
diff --git a/scripts/overview.php b/scripts/overview.php
index 49657af..00991ee 100644
--- a/scripts/overview.php
+++ b/scripts/overview.php
@@ -122,7 +122,7 @@ if (file_exists('./Charts/'.$chart)) {
         <button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?>: </button>
         <a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"/><i><?php echo $mostrecent['Sci_Name'];?></i></a>
         <br>Confidence: <?php echo $mostrecent['Confidence'];?><br>
-        <video controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
+        <video 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>
   </tr>
 </table>
diff --git a/scripts/play.php b/scripts/play.php
index 8efb947..e9d385b 100644
--- a/scripts/play.php
+++ b/scripts/play.php
@@ -145,7 +145,7 @@ if(isset($_POST['species'])){
       $confidence = $results['Confidence'];
       echo "<tr>
         <td>$date $time<br>$confidence<br>
-        <video controls poster=\"$filename.png\" preload=\"none\" title=\"$filename\"><source src=\"$filename\"></video></td>
+        <video onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster=\"$filename.png\" preload=\"none\" title=\"$filename\"><source src=\"$filename\"></video></td>
         </tr>";
 
     }echo "</table>";}?>
diff --git a/scripts/stats.php b/scripts/stats.php
index eaed49f..e2ff7fb 100644
--- a/scripts/stats.php
+++ b/scripts/stats.php
@@ -95,7 +95,7 @@ while($results=$result3->fetchArray(SQLITE3_ASSOC)){
   <b>Max Confidence: </b>$maxconf<br>
   <b>Best Recording: </b>$date $time<br>
   <a href=\"https://allaboutbirds.org/guide/$comname\" target=\"top\"/>All About Birds</a><br>
-  <video controls poster=\"$filename.png\" title=\"$filename\"><source src=\"$filename\"></video></td>
+  <video onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster=\"$filename.png\" title=\"$filename\"><source src=\"$filename\"></video></td>
   </tr>
     </table>
   <p>Loading Images from <a href=\"https://commons.wikimedia.org/w/index.php?search=$linkname&title=Special:MediaSearch&go=Go&type=image\" target=\"_blank\">Wikimedia Commons</a></p>", '6096');
@@ -127,7 +127,7 @@ $filename = "/By_Date/".$results['Date']."/".$comname."/".$results['File_Name'];
       <td><input type="hidden" name="view" value="Species Stats">
         <button type="submit" name="species" value="<?php echo $results['Com_Name'];?>"><?php echo $results['Com_Name'];?></button><br><b>Occurrences:</b> <?php echo $results['COUNT(*)'];?><br>
       <b>Max Confidence:</b> <?php echo $results['MAX(Confidence)'];?><br>
-      <b>Best Recording:</b> <?php echo $results['Date']." ".$results['Time'];?><br><video controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>" type="audio/mp3"></video></td>
+      <b>Best Recording:</b> <?php echo $results['Date']." ".$results['Time'];?><br><video 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;?>" type="audio/mp3"></video></td>
       </tr>
 <?php
 }
diff --git a/scripts/todays_detections.php b/scripts/todays_detections.php
index 46c576f..d1cce8f 100644
--- a/scripts/todays_detections.php
+++ b/scripts/todays_detections.php
@@ -126,7 +126,7 @@ $sciname = preg_replace('/ /', '_', $todaytable['Sci_Name']);
       <b><a class="a2" href="https://allaboutbirds.org/guide/<?php echo $comname;?>" target="top"><?php echo $todaytable['Com_Name'];?></a></b><br>
       <a class="a2" href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="top"><i><?php echo $todaytable['Sci_Name'];?></i></a><br>
       <b>Confidence:</b> <?php echo $todaytable['Confidence'];?><br>
-      <video controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source preload="none" src="<?php echo $filename;?>"></video>
+      <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>
       </td>
 <?php }?>
       </tr>