openvidu-recording: Refactor layout to show recordings below participant videos instead of opening a dialog box

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()">
+                    <button class="btn btn-primary" id="recording-button" onclick="manageRecording()">
-                        Recordings
+                        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">
+                <div id="recordings">
-                    <h2>Recordings</h2>
+                    <div id="recording-header">
-                    <div id="recording-controls">
+                        <h3>Session Recordings</h3>
-                        <button class="btn btn-primary" id="recording-button" onclick="manageRecording()">Start Recording</button>
+                        <a href="/recordings.html" target="_blank" class="btn btn-sm btn-primary"
-                        <div id="recording-text" hidden>Room is being recorded</div>
+                            >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 id="recording-video-dialog">
-                </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>
 

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 {
+#recordings {
-    width: 500px;
+    display: flex;
-    max-width: 90%;
+    flex-direction: column;
-    border: none;
+    justify-content: center;
-    border-radius: 8px;
+    align-items: center;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    width: 100%;
-    padding: 20px;
+    max-width: 1000px;
-    background-color: #fff;
 }
 
-#recordings-dialog h2 {
+#recording-header {
-    margin-bottom: 15px;
+    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 {
+#recording-header a {
-    display: flex;
+    margin-left: auto;
-    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-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;
 }