MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2024-11-13 13:49:19 +08:00
Code Issues Releases Wiki Activity

responsive captions

Browse Source
This commit is contained in:
ian ramzy 2020-03-31 11:51:36 -04:00
parent 117463879d
commit ec88f5efe6
3 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/chat.html
View File

@ -38,7 +38,7 @@
gtag("config", "UA-162048272-1");
</script>
</head>
<body onresize="rePositionLocalVideo()">
<body onresize="windowResized()">
<div id="header">
<a href="/">
<img src="/images/logo.svg" alt="Neon" width="48" height="48" />

5
public/css/chat.css
View File

@ -112,9 +112,10 @@ a {
}
#remote-video-text {
box-sizing: border-box;
/*padding: 0;*/
margin: 0;
width: 60vw;
width: 65vw;
position: absolute;
top: calc(80%);
left: 20vw;
@ -124,7 +125,7 @@ a {
color: white;
font-family: "Heebo", sans-serif;
font-size: 40px;
font-size: 1rem;
/*white-space: nowrap;*/
font-weight: bold;
text-align: left;

21
public/js/chat.js
View File

@ -16,6 +16,8 @@ const isWebRTCSupported =
// Element vars
const chatInput = document.querySelector(".compose input");
const pipVideo = document.getElementById("remote-video");
const remoteVideo = $("#remote-video");
const captionText = $("#remote-video-text");
var VideoChat = {
connected: false,
@ -290,12 +292,24 @@ function chatRoomFull() {
}
function rePositionLocalVideo() {
var bounds = $("#remote-video").position();
var bounds = remoteVideo.position();
bounds.top += 10;
bounds.left += 10;
$("#moveable").css(bounds);
}
function rePositionCaptions() {
var bounds = remoteVideo.position();
bounds.top -= 10;
bounds.top = bounds.top + remoteVideo.height() - 1 * captionText.height();
captionText.css(bounds);
}
function windowResized() {
rePositionLocalVideo();
rePositionCaptions();
}
//
// Fullscreen
//
@ -548,11 +562,12 @@ function recieveCaptions(captions) {
$("#caption-text").text("Start Live Caption");
return;
}
if (captions.length > 100) {
$("#remote-video-text").text(captions.substr(captions.length - 199));
if (captions.length > 299) {
$("#remote-video-text").text(captions.substr(captions.length - 299));
} else {
$("#remote-video-text").text(captions);
}
rePositionCaptions();
}
//