neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
juancarmore 2024-08-30 12:22:49 +02:00
parent 7937ed09df
commit 402424ac3e
2 changed files with 79 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
advanced-features/openvidu-recording-node/public/index.html
View File

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

104
advanced-features/openvidu-recording-node/public/styles.css
View File

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