$ git clone https://ion.nu/git/webchat
commit 98a32602dc740690eedaf5f91529b1b206a36896
Author: Alicia <...>
Date: Sun Jan 3 01:16:00 2016 +0100
Scale down and/or wrap cams to fit
diff --git a/cams.js b/cams.js
index 597c548..94a46c9 100644
--- a/cams.js
+++ b/cams.js
@@ -87,6 +87,7 @@ function broadcast_success(stream)
};
mediarec.start();
mycam.interval=setInterval(function(){mediarec.requestData();}, 100);
+ adjustcamsizes();
}
function opencam(user)
{
@@ -131,6 +132,7 @@ function opencam(user)
document.getElementById('cams').appendChild(cam.cambox);
cams.push(cam);
showcams();
+ adjustcamsizes();
}
function handlecamdata(user, data)
{
@@ -156,6 +158,7 @@ function closecam(user)
cams.splice(cams.indexOf(cam), 1);
// TODO: check that a video isn't playing
if(cams.length==0){hidecams();}
+ adjustcamsizes();
}
function showcams()
{
@@ -175,6 +178,35 @@ function hidecams()
div=document.getElementById('userlist');
setheightcalc(div, '100% - 30px');
}
+function adjustcamsizes()
+{
+ var maxwidth=document.body.clientWidth;
+ var maxheight=Math.floor(document.body.clientHeight*0.6)-30;
+ var height=maxheight;
+ var width=maxheight/3*4;
+ var rows=1;
+ while(Math.ceil(cams.length/rows)*width>maxwidth)
+ {
+ var scaledwidth=Math.floor(maxwidth/Math.ceil(cams.length/rows));
+ var scaledheight=scaledwidth/4*3;
+ if(scaledheight*rows<maxheight-scaledheight) // If scaling by width leaves as much as a whole row empty, go with rows instead
+ {
+ ++rows;
+ height=maxheight/rows;
+ width=height/3*4;
+ }else{
+ width=scaledwidth;
+ height=scaledheight;
+ }
+ }
+ var i=0;
+ while(i<cams.length)
+ {
+ cams[i].cambox.style.height=height+'px';
+ cams[i].cambox.style.width=width+'px';
+ ++i;
+ }
+}
// Compatibility...
if(navigator.getUserMedia){}
else if(navigator.webkitGetUserMedia){navigator.getUserMedia=navigator.webkitGetUserMedia;}
diff --git a/chat.php b/chat.php
index 4d416af..80fdfd0 100644
--- a/chat.php
+++ b/chat.php
@@ -10,7 +10,7 @@
<script src="cams.js"></script>
<link rel="stylesheet" type="text/css" href="chat.css" />
</head>
-<body onload="init("<?php print($_GET['c']); ?>");" onfocus="unseenmessages=0; document.title='Chat (work in progress)';">
+<body onload="init("<?php print($_GET['c']); ?>");" onfocus="unseenmessages=0; document.title='Chat (work in progress)';" onresize="adjustcamsizes();">
<div style="display:block; height:100%; width:100%;" onclick="handleclick();">
<div class="cams" id="cams">
<div id="videoplayer">