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.
74 lines
2.2 KiB
74 lines
2.2 KiB
<!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>
|