mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-13 13:49:19 +08:00
responsive captions
This commit is contained in:
parent
117463879d
commit
ec88f5efe6
@ -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" />
|
||||
|
@ -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;
|
||||
|
@ -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();
|
||||
}
|
||||
|
||||
//
|
||||
|
Loading…
Reference in New Issue
Block a user