HyperSpaceOut/OBS-overlay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: convert ES modules to classic scripts for file:// compatibility

Browse Source 
Browsers block ES module imports over the file:// protocol due to CORS.
Users opening the overlay by double-clicking the HTML file saw all JS
fail to load. Replace import/export with a window.OBS global namespace
and classic <script> tags so the overlay works without a local server.

Made-with: Cursor
This commit is contained in:
cottongin
2026-03-20 22:20:12 -04:00
parent a8b7df48a6
commit fa7363bc78
7 changed files with 54 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
optimized-controls.html
View File

@@ -806,17 +806,19 @@
<button id="toggle-display-btn">Hide Display</button>
<button id="show-controls-btn">Show Controls</button>
<script type="module">
import { OverlayManager } from './js/state-manager.js';
import { WebSocketClient } from './js/websocket-client.js';
import { RoomCodeDisplay } from './js/room-code-display.js';
import { AudioController } from './js/audio-controller.js';
import { PlayerList } from './js/player-list.js';
import { initControls, initConnectionStatusHandler } from './js/controls.js';
<script src="js/state-manager.js"></script>
<script src="js/websocket-client.js"></script>
<script src="js/room-code-display.js"></script>
<script src="js/audio-controller.js"></script>
<script src="js/player-list.js"></script>
<script src="js/controls.js"></script>
<script>
(function () {
var O = window.OBS;
const manager = new OverlayManager();
var manager = new O.OverlayManager();
const roomCodeDisplay = new RoomCodeDisplay();
var roomCodeDisplay = new O.RoomCodeDisplay();
roomCodeDisplay.init(
{
header: document.getElementById('header'),
@@ -857,7 +859,7 @@
);
manager.registerComponent('roomCode', roomCodeDisplay);
const audioController = new AudioController();
var audioController = new O.AudioController();
audioController.init(
document.getElementById('theme-sound'),
{
@@ -868,7 +870,7 @@
);
manager.registerComponent('audio', audioController);
const playerList = new PlayerList();
var playerList = new O.PlayerList();
playerList.init(
document.getElementById('player-list-container'),
{
@@ -887,33 +889,34 @@
);
manager.registerComponent('playerList', playerList);
const statusHandler = initConnectionStatusHandler();
const wsClient = new WebSocketClient({
var statusHandler = O.initConnectionStatusHandler();
var wsClient = new O.WebSocketClient({
onStatusChange: statusHandler,
onEvent: (type, data) => manager.handleEvent(type, data),
onSessionSubscribed: (sessionId) => {
onEvent: function (type, data) { manager.handleEvent(type, data); },
onSessionSubscribed: function (sessionId) {
console.log('[Overlay] Subscribed to session:', sessionId);
},
});
initControls(manager, wsClient, {
O.initControls(manager, wsClient, {
roomCode: roomCodeDisplay,
audio: audioController,
playerList: playerList,
});
const savedUrl = localStorage.getItem('jackbox-api-url');
const savedKey = localStorage.getItem('jackbox-api-key');
const apiUrlInput = document.getElementById('api-url-input');
const apiKeyInput = document.getElementById('api-key-input');
var savedUrl = localStorage.getItem('jackbox-api-url');
var savedKey = localStorage.getItem('jackbox-api-key');
var apiUrlInput = document.getElementById('api-url-input');
var apiKeyInput = document.getElementById('api-key-input');
if (savedUrl && apiUrlInput) apiUrlInput.value = savedUrl;
if (savedKey && apiKeyInput) apiKeyInput.value = savedKey;
if (savedUrl && savedKey) {
setTimeout(() => wsClient.connect(savedUrl, savedKey), 500);
setTimeout(function () { wsClient.connect(savedUrl, savedKey); }, 500);
}
window.__overlay = { manager, wsClient, roomCodeDisplay, audioController, playerList };
window.__overlay = { manager: manager, wsClient: wsClient, roomCodeDisplay: roomCodeDisplay, audioController: audioController, playerList: playerList };
})();
</script>
</body>
</html>