From ad5294b3a09bbb48ac3472f3f6a531eaf0ffa387 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Tue, 2 Jul 2024 21:29:08 +0200
Subject: [PATCH] [mirotalksfu] - fix, add refresh video files

---
 public/css/Room.css     | 13 ++++++++++++-
 public/js/Room.js       |  6 +++++-
 public/js/RoomClient.js |  4 ++--
 public/views/Room.html  |  7 +++++--
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/public/css/Room.css b/public/css/Room.css
index 726c2f85..c9d1ab60 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -342,6 +342,7 @@ body {
 }
 
 #extraInfo {
+    margin-left: 5px;
     max-height: 400px;
 }
 
@@ -440,7 +441,7 @@ th {
 }
 
 #rtmpStreamURL,
-#rtmp-url {
+#rtmpLiveUrl {
     margin-top: 5px;
     padding: 10px;
     width: 100%;
@@ -449,6 +450,16 @@ th {
     background: var(--select-bg) !important;
 }
 
+#refreshVideoFiles {
+    float: right;
+    cursor: pointer;
+    border-radius: 5px;
+    background: var(--body-bg) !important;
+}
+#refreshVideoFiles:hover {
+    background: var(--select-bg) !important;
+}
+
 .input-container button {
     flex: 1;
     width: 20px;
diff --git a/public/js/Room.js b/public/js/Room.js
index e0b41391..2f854600 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -300,6 +300,7 @@ function initClient() {
             'Prioritize h.264 with AAC or h.264 with Opus codecs over VP8 with Opus or VP9 with Opus codecs',
             'right',
         );
+        setTippy('refreshVideoFiles', 'Refresh', 'left');
         setTippy('switchServerRecording', 'The recording will be stored on the server rather than locally', 'right');
         setTippy('whiteboardGhostButton', 'Toggle transparent background', 'bottom');
         setTippy('wbBackgroundColorEl', 'Background color', 'bottom');
@@ -1490,6 +1491,9 @@ function handleButtons() {
         rc.getRTMP();
         rc.openTab(e, 'tabRTMPStreaming');
     };
+    refreshVideoFiles.onclick = () => {
+        rc.getRTMP();
+    };
     tabAspectBtn.onclick = (e) => {
         rc.openTab(e, 'tabAspect');
     };
@@ -1715,7 +1719,7 @@ function handleButtons() {
         rc.closeProducer(RoomClient.mediaType.screen);
     };
     copyRtmpUrlButton.onclick = () => {
-        rc.copyRTMPUrl(rtmpStreamURL.value);
+        rc.copyRTMPUrl(rtmpLiveUrl.value);
     };
     startRtmpButton.onclick = () => {
         if (rc.selectedRtmpFilename == '') {
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index f43419b6..3f526706 100644
--- a/public/js/RoomClient.js
+++ b/public/js/RoomClient.js
@@ -7596,7 +7596,7 @@ class RoomClient {
     }
 
     cleanRTMPUrl() {
-        const rtmpUrl = rc.getId('rtmp-url');
+        const rtmpUrl = rc.getId('rtmpLiveUrl');
         rtmpUrl.value = '';
     }
 
@@ -7622,7 +7622,7 @@ class RoomClient {
             );
         }
 
-        const rtmpUrl = rc.getId('rtmp-url');
+        const rtmpUrl = rc.getId('rtmpLiveUrl');
         rtmpUrl.value = filterXSS(rtmp);
 
         Swal.fire({
diff --git a/public/views/Room.html b/public/views/Room.html
index d8dc8a20..dbb76e78 100644
--- a/public/views/Room.html
+++ b/public/views/Room.html
@@ -828,6 +828,7 @@ <h1>Loading</h1>
                                 </tr>
                             </table>
                         </div>
+                        <hr />
                         <div id="roomRecordingServer" class="hidden">
                             <table class="settingsTable">
                                 <tr>
@@ -948,7 +949,7 @@ <h1>Loading</h1>
                         <div id="rtmpUrlLive">
                             <div class="input-container">
                                 <input
-                                    id="rtmp-url"
+                                    id="rtmpLiveUrl"
                                     type="text"
                                     value=""
                                     placeholder="rtmp://server:port/app/streamKey"
@@ -960,7 +961,9 @@ <h1>Loading</h1>
                                 <table class="file-table">
                                     <thead>
                                         <tr>
-                                            <th>Video Files:</th>
+                                            <th>
+                                                Video Files: <i id="refreshVideoFiles" class="fa-solid fa-rotate"></i>
+                                            </th>
                                         </tr>
                                     </thead>
                                     <tbody id="file-list">