|
|
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Speaker View</title>
- <style>
- body {
- font-family: Arial, sans-serif;
- padding: 20px;
- background-color: white;
- }
-
- .line {
- font-size: 20px;
- margin: 5px 0;
- }
-
- .currentLine {
- background-color: yellow;
- }
- </style>
- </head>
- <body>
- <h1>Speaker View</h1>
- <div id="speech"></div>
-
- <script src="/socket.io/socket.io.js"></script>
- <script>
- const socket = io();
- const speechDiv = document.getElementById('speech');
- let speechLines = [];
- let currentLineIndex = 0;
-
- // Render the speech and highlight the current line
- function renderSpeech() {
- speechDiv.innerHTML = '';
- speechLines.forEach((line, index) => {
- const div = document.createElement('div');
- div.classList.add('line');
- if (index === currentLineIndex) {
- div.classList.add('currentLine');
- }
- div.textContent = line;
- div.onclick = () => updatePosition(index); // Allow clicking to select a line
- speechDiv.appendChild(div);
- });
- }
-
- // Send updated position to the server
- function updatePosition(newPosition) {
- currentLineIndex = newPosition;
- socket.emit('update_position', currentLineIndex);
- renderSpeech();
- }
-
- // Listen for speech text and load it
- socket.on('load_speech', (lines) => {
- speechLines = lines;
- currentLineIndex = 0;
- renderSpeech();
- });
-
- // Add keyboard navigation
- document.addEventListener('keydown', (event) => {
- if (event.key === 'ArrowDown' && currentLineIndex < speechLines.length - 1) {
- updatePosition(currentLineIndex + 1);
- } else if (event.key === 'ArrowUp' && currentLineIndex > 0) {
- updatePosition(currentLineIndex - 1);
- }
- });
- </script>
- </body>
- </html>
|
