|
|
- <!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>
|
