Resolve Audio Bug and Broadcast disconnect

README.md

@@ -4,7 +4,7 @@
 **Requires at least:** 5.0.0   
 **Tested up to:** 5.5.1   
 **Requires PHP:** 7.1   
-**Stable tag:** 2.0.4  
+**Stable tag:** 2.0.5
 **License:** CC BY-ND 4.0   
 **License URI:** https://creativecommons.org/licenses/by-nd/4.0  
 **GitHub:** https://github.com/AgoraIO/Agora-Word-Press  

public/css/chat-fab.css

@@ -21,7 +21,7 @@
   position: absolute;
   bottom: 0;
   right: 0;
-  margin: 0 20px 25px 0;
+  margin: 0 10px 5px 0;
   font-size: 32px;
   text-shadow: 2px 2px 4px #000;
 }

public/css/wp-agora-styles.css

@@ -206,6 +206,7 @@
 
 .agora.agora-audience .screen-users-1 .user {
   height: 65vh;
+  background-color: transparent;
 }
 
 /* screeen with 2 users */
@@ -695,6 +696,7 @@
 
 #watch-live-closed {
   margin: 100px auto;
+  background-color: transparent;
 }
 
 /*
@@ -706,6 +708,7 @@
   position: absolute;
   z-index: 1031;
 }
+.agora .fabs .fas { cursor: pointer; }
 
 .agora .fabs .chat {
   position: absolute;

public/views/wp-agora-io-audience.php

@@ -41,12 +41,13 @@
           </div>
           <div id="watch-live-closed" class="overlay user" style="display: none">
             <div id="overlay-container">
-              <button id="watch-live--btn" type="button" class="room-title">
+              <div id="finished-btn" class="room-title">
                 <?php if($buttonIcon) { ?>
                   <i id="watch-live-icon" class="fas fa-broadcast-tower"></i>
                 <?php } ?>
-                <span>The Live Stream has finished</span>
-              </button>
+                <span id="txt-finished" style="display:none"><?php _e('The Live Stream has finished', 'agoraio'); ?></span>
+                <span id="txt-waiting"><?php _e('Waiting for broadcast connection...', 'agoraio'); ?></span>
+              </div>
             </div>
           </div>
 
@@ -66,7 +67,7 @@
     window.agoraCurrentRole = 'audience';
     window.agoraMode = 'audience';
     window.remoteStreams = {};
-
+    var WAIT_FOR_RECONNECT_TIMEOUT = 15000; // 10 Seconds!
 
 
     window.addEventListener('load', function() {
@@ -96,8 +97,15 @@ function finishVideoScreen() {
         jQuery(".remote-stream-container").hide();
         jQuery("#full-screen-video").hide();
         jQuery("#watch-live-closed").show();
-        agoraLeaveChannel();
+
+        function waitUntilClose() {
+          jQuery('#txt-waiting').hide();
+          jQuery('#txt-finished').show();
+
+          agoraLeaveChannel();
+        }
         exitBtn.hide();
+        window.waitingClose = setTimeout(waitUntilClose, WAIT_FOR_RECONNECT_TIMEOUT)
       }
 
       // Due to broswer restrictions on auto-playing video, 
@@ -126,6 +134,10 @@ function finishVideoScreen() {
         const stream = evt.stream;
         const streamId = stream.getId();
         window.remoteStreams[streamId] = stream;
+        if (window.waitingClose) {
+          clearTimeout(window.waitingClose)
+          window.waitingClose = null;
+        }
 
         AgoraRTC.Logger.info('New stream added: ' + streamId);
         AgoraRTC.Logger.info('Subscribing to remote stream:' + streamId);
@@ -187,14 +199,18 @@ function finishVideoScreen() {
           return false;
         }
 
-        // debugger;
         const streamId = evt.stream.getId(); // the the stream id
         evt.stream.isPlaying() && evt.stream.stop(); // stop the stream
 
         if(window.remoteStreams[streamId] !== undefined) {
-          window.remoteStreams[streamId].isPlaying() && window.remoteStreams[streamId].stop(); // stop playing the feed
+          window.remoteStreams[streamId].isPlaying() && window.remoteStreams[streamId].stop(); //stop playing the feed
+
           delete window.remoteStreams[streamId]; // remove stream from list
           const remoteContainerID = '#' + streamId + '_container';
+          jQuery(remoteContainerID).empty().remove();
+
+          const usersCount = Object.keys(window.remoteStreams).length;
+          window.AGORA_UTILS.updateUsersCounter(usersCount);
         }
 
         if (window.screenshareClients[streamId]) {

readme.txt

@@ -4,7 +4,7 @@ Tags: live streaming, video streaming, video call, video conference
 Requires at least: 5.0
 Tested up to: 5.5.1
 Requires PHP: 7.1
-Stable tag: 2.0.4
+Stable tag: 2.0.5
 Donate link:
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -152,7 +152,10 @@ Version 2.0.3
 Resolves an issue with certain frameworks not enquing the RTM SDK correctly in full screen template. 
 
 Version 2.0.4
-Resolves an issue with certain frameworks not enquing the RTC SDK correctly in audience client. 
+Resolves an issue with certain frameworks not enquing the RTC SDK correctly in audience client.
+
+Version 2.0.5
+Add a waiting time before total disconnect on Audience views and wait for broadcaster reconnection.
 
 == Frequently Asked Questions ==
 #1.  Why don't my project credentials (App ID and App Certificate) get saved when I input them on the Settings tab? 

wp-agora-io.php

@@ -11,7 +11,7 @@
  * Plugin Name:       WP Agora.io
  * Plugin URI:        https://github.com/digitallysavvy/Agora-Word-Press/
  * Description:       Integrate the Agora Communication and Streaming platform directly into your wordpress content. This plugin let you create channels and manage their settings directly into WP.
- * Version:           2.0.4
+ * Version:           2.0.5
  * Author:            Agora.io
  * Author URI:        https://www.agora.io
  * License:           GPL-2.0+
@@ -28,7 +28,7 @@
 /**
  * Currently plugin version based on SemVer - https://semver.org
  */
-define( 'WP_AGORA_IO_VERSION', '2.0.4' );
+define( 'WP_AGORA_IO_VERSION', '2.0.5' );
 
 /**
  * The code that runs during plugin activation.