ATD
/
jitsi-stream-client
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

feat: hacky calculation of video sizes

This commit is contained in:
henne 2020-12-26 22:01:13 +01:00
parent 2c1e3cb78e
commit f7211ebe3b
2 changed files with 34 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -22,9 +22,12 @@
}
video {
display: block;
margin: 0 auto;
margin: 3px;
border: 1px dotted grey;
}
.video-row {
width: 100%;
}
.volume-slider {
text-align: center;
}
@ -60,8 +63,6 @@
<input type="text" id="room-name" placeholder="Room name"/><br />
<input type="text" id="room-password" placeholder="Room Password" /><br />
<input type="checkbox" id="use-local-video" /> Use local Video<br />
<input type="text" id="width" value="624" /> Width of video elements<br />
<input type="text" id="height" value="351" /> Height of video elements<br />
<input type="text" id="cols" value="3" /> Column count<br />
<input type="text" id="rows" value="3" /> Row count<br />
<button disabled id="room-name-button">Connect</button>

36
script.js
View File

@ -34,17 +34,40 @@ let isJoined = false;
* a bit hacky.. but hey, i needed it fast.
*/
function initHtml(rows, cols) {
// calculate video element sizes
let windowHeight = document.body.clientHeight;
let windowWidth = document.body.clientWidth;
console.log(windowHeight);
let margin = 8; // 3px margin on each side, 1px border on each side
let maxWidth = windowWidth / cols - margin
let maxHeight = windowHeight / rows - margin - 0 - 28; // 32 -> size added for nametag; 28px per row for control elements
if(maxWidth/16*9 < maxHeight) {
videoSize.width = maxWidth;
videoSize.height = maxWidth/16*9;
} else {
videoSize.width = maxHeight*16/9;
videoSize.height = maxHeight;
}
// clear video container
let rootElem = $('#video-container')
rootElem.empty();
let elemCounter = 0
let elemCounter = 0 // for the element container id's
// populate video elements
for(let i = 0; i < rows; i++) {
let rowElem = $(document.createElement("div"))
rowElem.addClass("row");
let rowElem = $(document.createElement("div"));
rowElem.addClass("video-row");
for(let j = 0; j < cols; j++) {
let colElem = $(document.createElement("div"))
colElem.addClass(`col-md-${Math.floor(12/cols)} video video-${elemCounter++}`);
let colElem = $(document.createElement("div"));
colElem.addClass(`video video-${elemCounter++}`);
colElem.width(videoSize.width + 2*margin);
colElem.height(videoSize.height + 2*margin + 24);
colElem.css("display", "inline-block");
colElem.append(`
<video autoplay='autoplay'></video>
<video autoplay='autoplay' width="${videoSize.width}" height="${videoSize.height}"></video>
<audio autoplay='autoplay'></audio>
<span class="name"></span>
`)
@ -52,6 +75,7 @@ function initHtml(rows, cols) {
}
rootElem.append(rowElem)
}
// populate audio controls
elemCounter = 0;
for(let i = 0; i < rows; i++) {
let rowElem = $(document.createElement("div"))