You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.5 KiB
106 lines
3.5 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Projector View</title>
|
|
<style>
|
|
body {
|
|
font-family: Futura, sans-serif;
|
|
font-size: 32px;
|
|
background-color: green;
|
|
color: white;
|
|
text-align: center; /* Align text to the left */
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-text-fill-color: white;
|
|
-webkit-text-stroke-color: black;
|
|
-webkit-text-stroke-width: 6.00px;
|
|
paint-order: stroke fill;
|
|
}
|
|
|
|
#container {
|
|
overflow: hidden;
|
|
height: 200px; /* Ensure container is tall enough for 4 lines */
|
|
max-width: 42ch;
|
|
position: relative;
|
|
padding-left: 20px; /* Add some padding to the left */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#content {
|
|
position: absolute;
|
|
top: 0;
|
|
transition: top 0.5s ease; /* Smooth scrolling */
|
|
}
|
|
|
|
.line {
|
|
opacity: 1;
|
|
white-space: normal; /* Allow lines to wrap */
|
|
word-wrap: break-word; /* Break long words if needed */
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.currentLine {
|
|
font-weight: bold;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Ensure there's space for 4 lines to be displayed */
|
|
#container {
|
|
max-height: 400px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id="content"></div>
|
|
</div>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
const socket = io();
|
|
const contentElement = document.getElementById('content');
|
|
let speechLines = [];
|
|
let currentLineIndex = 0;
|
|
|
|
// Display 4 lines (previous, current, next, and an extra one above the current line)
|
|
function updateDisplay() {
|
|
contentElement.innerHTML = ''; // Clear previous lines
|
|
|
|
const start = Math.max(0, currentLineIndex - 2); // Show 2 lines before current
|
|
const end = Math.min(speechLines.length, currentLineIndex + 2); // Show 2 lines after current
|
|
|
|
// Create a new block of lines
|
|
const displayLines = speechLines.slice(start, end).map((line, index) => {
|
|
const div = document.createElement('div');
|
|
div.classList.add('line');
|
|
if (index === 2) div.classList.add('currentLine'); // Highlight the current line
|
|
div.textContent = line;
|
|
return div;
|
|
});
|
|
|
|
displayLines.forEach(div => contentElement.appendChild(div));
|
|
|
|
// Scroll animation based on the height of each line
|
|
const lineHeight = document.querySelector('.line').offsetHeight;
|
|
const previousLinesHeight = (currentLineIndex - start - 1) * lineHeight; // Offset for lines above the current line
|
|
contentElement.style.top = `-${previousLinesHeight}px`;
|
|
}
|
|
|
|
// Receive updates from the server
|
|
socket.on('update_caption', (newPosition) => {
|
|
currentLineIndex = newPosition;
|
|
updateDisplay();
|
|
});
|
|
|
|
// Load the speech when a new client connects
|
|
socket.on('load_speech', (lines) => {
|
|
speechLines = lines;
|
|
currentLineIndex = 0;
|
|
updateDisplay(); // Display the initial lines
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|