From 402424ac3e3506f272af537c2d7f266950a1afb5 Mon Sep 17 00:00:00 2001
From: juancarmore <juancar_more2@hotmail.com>
Date: Fri, 30 Aug 2024 12:22:49 +0200
Subject: [PATCH] openvidu-recording: Refactor layout to show recordings below
 participant videos instead of opening a dialog box

---
 .../openvidu-recording-node/public/index.html |  27 +++--
 .../openvidu-recording-node/public/styles.css | 104 +++++++++++-------
 2 files changed, 79 insertions(+), 52 deletions(-)

diff --git a/advanced-features/openvidu-recording-node/public/index.html b/advanced-features/openvidu-recording-node/public/index.html
index 659565d4..cff48977 100644
--- a/advanced-features/openvidu-recording-node/public/index.html
+++ b/advanced-features/openvidu-recording-node/public/index.html
@@ -70,27 +70,34 @@
                         <button id="join-button" class="btn btn-lg btn-success" type="submit">Join!</button>
                     </form>
                 </div>
+                <a href="/recordings.html" target="_blank" class="btn btn-primary">View all recordings</a>
             </div>
 
             <div id="room" hidden>
+                <div id="recording-text" hidden><span>Room is being recorded</span></div>
                 <div id="room-header">
                     <h2 id="room-title"></h2>
-                    <button class="btn btn-primary" id="open-recordings-dialog" onclick="openRecordingsDialog()">
-                        Recordings
+                    <button class="btn btn-primary" id="recording-button" onclick="manageRecording()">
+                        Start Recording
                     </button>
                     <button class="btn btn-danger" id="leave-room-button" onclick="leaveRoom()">Leave Room</button>
                 </div>
                 <div id="layout-container"></div>
-                <dialog id="recordings-dialog">
-                    <h2>Recordings</h2>
-                    <div id="recording-controls">
-                        <button class="btn btn-primary" id="recording-button" onclick="manageRecording()">Start Recording</button>
-                        <div id="recording-text" hidden>Room is being recorded</div>
+                <div id="recordings">
+                    <div id="recording-header">
+                        <h3>Session Recordings</h3>
+                        <a href="/recordings.html" target="_blank" class="btn btn-sm btn-primary"
+                            >View all recordings</a
+                        >
                     </div>
-                    <div id="recording-video-container"></div>
                     <div id="recording-list"></div>
-                    <button class="btn btn-secondary" id="close-recordings-dialog" onclick="closeRecordingsDialog()">Close</button>
-                </dialog>
+                    <dialog id="recording-video-dialog">
+                        <video id="recording-video" autoplay controls></video>
+                        <button class="btn btn-secondary" id="close-recording-video-dialog" onclick="closeRecording()">
+                            Close
+                        </button>
+                    </dialog>
+                </div>
             </div>
         </main>
 
diff --git a/advanced-features/openvidu-recording-node/public/styles.css b/advanced-features/openvidu-recording-node/public/styles.css
index b6ad89b9..ece61bd7 100644
--- a/advanced-features/openvidu-recording-node/public/styles.css
+++ b/advanced-features/openvidu-recording-node/public/styles.css
@@ -55,6 +55,7 @@ main {
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    gap: 20px;
     height: 100%;
 }
 
@@ -127,8 +128,26 @@ main {
     align-items: center;
 }
 
+#recording-text {
+    width: 100%;
+    max-width: 1000px;
+}
+
+#recording-text span {
+    background-color: #ffeb3b;
+    color: #333;
+    border-radius: 5px;
+    padding: 0 5px;
+    font-weight: bold;
+    font-style: italic;
+    float: right;
+    margin-bottom: 10px;
+}
+
 #room-header {
     display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
     justify-content: space-between;
     align-items: center;
     width: 100%;
@@ -143,10 +162,6 @@ main {
     margin: 0;
 }
 
-#open-recordings-dialog {
-    margin: 0 10px;
-}
-
 #layout-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -186,51 +201,40 @@ main {
     border-bottom-right-radius: 4px;
 }
 
-#recordings-dialog {
-    width: 500px;
-    max-width: 90%;
-    border: none;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    padding: 20px;
-    background-color: #fff;
+#recordings {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    max-width: 1000px;
 }
 
-#recordings-dialog h2 {
-    margin-bottom: 15px;
+#recording-header {
+    margin: 15px 0;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 3fr 1fr;
+    align-items: center;
+    gap: 10px;
+}
+
+#recording-header h3 {
+    margin: 0;
+    text-align: center;
     font-size: 30px;
     font-weight: bold;
-    text-align: center;
     color: #444;
+    grid-column-start: 2;
 }
 
-#recording-controls {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-}
-
-#recording-text {
-    background-color: #ffeb3b;
-    color: #333;
-    border-radius: 5px;
-    margin-left: 20px;
-    padding: 0 5px;
-    font-weight: bold;
-    font-style: italic;
-}
-
-#recording-video-container {
-    margin-bottom: 15px;
-}
-
-#recording-video {
-    width: 100%;
-    border-radius: 5px;
+#recording-header a {
+    margin-left: auto;
 }
 
 #recording-list {
-    margin-bottom: 15px;
+    width: 600px;
+    max-width: 100%;
 }
 
 #recording-list span {
@@ -238,9 +242,9 @@ main {
     font-weight: bold;
     font-style: italic;
     color: #333;
-    text-align: center;
     display: block;
     margin: 0;
+    text-align: center;
 }
 
 .recording-container {
@@ -273,7 +277,7 @@ main {
     font-weight: bold;
 }
 
-.recording-details,
+.recording-size,
 .recording-date {
     color: #777;
 }
@@ -310,7 +314,23 @@ main {
     color: #d9534f;
 }
 
-#close-recordings-dialog {
+#recording-video-dialog {
+    width: 500px;
+    max-width: 90%;
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    padding: 20px;
+    background-color: #fff;
+}
+
+#recording-video {
+    width: 100%;
+    border-radius: 5px;
+}
+
+#close-recording-video-dialog {
+    margin-top: 10px;
     float: right;
 }