openvidu-recording: Add styles
This commit is contained in:
juancarmore
parent
44bd20eb96
commit
f4577851ad
@ -214,7 +214,7 @@ async function updateRecordingInfo(isRecording) {
|
||||
} else {
|
||||
recordingButton.disabled = false;
|
||||
recordingButton.innerText = "Start Recording";
|
||||
recordingButton.className = "btn btn-success";
|
||||
recordingButton.className = "btn btn-primary";
|
||||
recordingText.hidden = true;
|
||||
}
|
||||
|
||||
@ -304,35 +304,37 @@ function showRecordingList(recordings) {
|
||||
const recordingsList = document.getElementById("recording-list");
|
||||
|
||||
if (recordings.length === 0) {
|
||||
recordingsList.innerHTML = "There are no recordings available";
|
||||
recordingsList.innerHTML = "<span>There are no recordings available</span>";
|
||||
} else {
|
||||
recordingsList.innerHTML = "";
|
||||
}
|
||||
|
||||
recordings.forEach((recording) => {
|
||||
const recordingName = recording.name;
|
||||
const recordingDuration = secondsToHms(recording.duration);
|
||||
const recordingSize = formatBytes(recording.size);
|
||||
const recordingDate = new Date(recording.startedAt).toLocaleString();
|
||||
|
||||
const recordingContainer = document.createElement("div");
|
||||
recordingContainer.className = "recording-container";
|
||||
recordingContainer.id = recording.name;
|
||||
recordingContainer.id = recordingName;
|
||||
|
||||
const recordingName = document.createElement("p");
|
||||
recordingName.innerText = `${recording.name} - ${recording.duration} - ${recording.size} - ${new Date(
|
||||
recording.startedAt
|
||||
).toLocaleString()}`;
|
||||
recordingContainer.append(recordingName);
|
||||
|
||||
const playButton = document.createElement("button");
|
||||
playButton.innerText = "Play";
|
||||
playButton.className = "btn btn-primary";
|
||||
playButton.onclick = () => displayRecording(recording.name);
|
||||
recordingContainer.append(playButton);
|
||||
|
||||
const deleteButton = document.createElement("button");
|
||||
deleteButton.innerText = "Delete";
|
||||
deleteButton.className = "btn btn-danger";
|
||||
deleteButton.onclick = async () => {
|
||||
await deleteRecording(recording.name);
|
||||
};
|
||||
recordingContainer.append(deleteButton);
|
||||
recordingContainer.innerHTML = `
|
||||
<i class="fa-solid fa-file-video"></i>
|
||||
<div class="recording-info">
|
||||
<p class="recording-name">${recordingName}</p>
|
||||
<p class="recording-details">${recordingDuration} | ${recordingSize}</p>
|
||||
<p class="recording-date">${recordingDate}</p>
|
||||
</div>
|
||||
<div class="recording-actions">
|
||||
<button title="Play" class="icon-button" onclick="displayRecording('${recordingName}')">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</button>
|
||||
<button title="Delete" class="icon-button delete-button" onclick="deleteRecording('${recordingName}')">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
recordingsList.append(recordingContainer);
|
||||
});
|
||||
@ -353,3 +355,27 @@ function displayRecording(recordingName) {
|
||||
|
||||
recordingVideo.src = `/recordings/${recordingName}`;
|
||||
}
|
||||
|
||||
function secondsToHms(seconds) {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = Math.floor((seconds % 3600) % 60);
|
||||
|
||||
const hDisplay = h > 0 ? h + "h " : "";
|
||||
const mDisplay = m > 0 ? m + "m " : "";
|
||||
const sDisplay = s + "s";
|
||||
return hDisplay + mDisplay + sDisplay;
|
||||
}
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (bytes === 0) {
|
||||
return "0Bytes";
|
||||
}
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ["Bytes", "KB", "MB", "GB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
const decimals = i < 2 ? 0 : 1;
|
||||
|
||||
return (bytes / Math.pow(k, i)).toFixed(decimals) + sizes[i];
|
||||
}
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
<div id="room" hidden>
|
||||
<div id="room-header">
|
||||
<h2 id="room-title"></h2>
|
||||
<button class="btn btn-info" id="open-recordings-dialog" onclick="openRecordingsDialog()">
|
||||
<button class="btn btn-primary" id="open-recordings-dialog" onclick="openRecordingsDialog()">
|
||||
Recordings
|
||||
</button>
|
||||
<button class="btn btn-danger" id="leave-room-button" onclick="leaveRoom()">Leave Room</button>
|
||||
@ -83,15 +83,13 @@
|
||||
<div id="layout-container"></div>
|
||||
<dialog id="recordings-dialog">
|
||||
<h2>Recordings</h2>
|
||||
<div id="recording-text" hidden>Room is being recorded</div>
|
||||
<button class="btn btn-success" id="recording-button" onclick="manageRecording()">
|
||||
Start Recording
|
||||
</button>
|
||||
<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>
|
||||
<div id="recording-video-container"></div>
|
||||
<div id="recording-list"></div>
|
||||
<button class="btn btn-danger" id="close-recordings-dialog" onclick="closeRecordingsDialog()">
|
||||
Close
|
||||
</button>
|
||||
<button class="btn btn-secondary" id="close-recordings-dialog" onclick="closeRecordingsDialog()">Close</button>
|
||||
</dialog>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -143,6 +143,10 @@ main {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#open-recordings-dialog {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
#layout-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
@ -182,6 +186,134 @@ 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-dialog h2 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
#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-list {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#recording-list span {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.recording-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
background-color: #f4f4f4;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.fa-file-video {
|
||||
font-size: 30px;
|
||||
color: #333;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.recording-info {
|
||||
flex-grow: 1;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.recording-info p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.recording-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.recording-details,
|
||||
.recording-date {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.recording-date {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.recording-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #333;
|
||||
margin-left: 10px;
|
||||
padding: 4px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
#close-recordings-dialog {
|
||||
float: right;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user