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

@@ -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>

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>

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>";}?>

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
 }

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>