Batchcast

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_116":-5,"_20":117,"_22":118,"_119":120,"_121":122,"_25":123,"_24":-5,"_124":-5,"_125":-5,"_126":53,"_127":128,"_129":44,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","g","name","batchcast","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":70,"_71":72,"_73":37,"_74":44,"_75":44,"_76":-5,"_77":78,"_79":80,"_81":-5,"_82":-5,"_83":-5,"_84":-5,"_85":86,"_87":86,"_88":89,"_90":89,"_91":89,"_92":86,"_93":86,"_94":95,"_96":97,"_98":99,"_100":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":14,"_18":55},"id","89eb27f8-445c-11f0-b816-76b3cceeab13","main.tsx","fileId","95ac735e-4451-11f0-9281-76b3cceeab13","parentId","branchId","95aa28a6-4451-11f0-9281-76b3cceeab13","branchVersion",5,"latest",true,"createdAt",["D",1749382468990],4,"fileType","http","content","/**\n * This val serves a frontend-only user interface for Batchcast, a service for\n * controlling multiple Chromecast devices simultaneously.\n * The application logic is entirely on the client-side, interacting with a\n * user-provided backend REST API. This val only serves the static HTML, CSS,\n * and JavaScript files.\n */\nimport { serve } from \"https://esm.town/v/g/serveUtils\";\nimport { Hono } from \"npm:hono\";\n\nfunction html() {\n /*\n \n \n \n \n \n \n Batchcast\n \n \n \n \n \n\n

✖

Connect to the backend service to begin.

\n\n

Found Devices

\n \n

\n\n

Controlled Devices

\n \n

\n\n

Media Controller

\n \n \n \n

\n \n \n \n \n

\n \n \n */\n}\n\nfunction css() {\n /*\n :root {\n --bg-color: #1a1a1a;\n --card-bg: #2b2b2b;\n --primary-color: #007bff;\n --text-color: #f0f0f0;\n --border-color: #444;\n --status-connected: #28a745;\n --status-disconnected: #dc3545;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n background-color: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n }\n\n .hidden {\n display: none !important;\n }\n\n nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n background-color: var(--card-bg);\n border-bottom: 1px solid var(--border-color);\n flex-wrap: wrap;\n gap: 1rem;\n }\n\n nav h1 {\n font-size: 1.5rem;\n white-space: nowrap;\n }\n\n .connect-container {\n display: flex;\n gap: 0.5rem;\n }\n\n #hostInput {\n padding: 0.5rem;\n border: 1px solid var(--border-color);\n background-color: var(--bg-color);\n color: var(--text-color);\n border-radius: 4px;\n min-width: 150px;\n }\n\n button {\n padding: 0.5rem 1rem;\n border: none;\n background-color: var(--primary-color);\n color: white;\n cursor: pointer;\n border-radius: 4px;\n font-weight: bold;\n transition: background-color 0.2s;\n }\n\n button:hover {\n background-color: #0056b3;\n }\n\n button:disabled {\n background-color: #555;\n cursor: not-allowed;\n }\n\n .status-indicator {\n padding: 0.5rem 1rem;\n border-radius: 4px;\n font-weight: bold;\n color: white;\n }\n\n .status-indicator.connected {\n background-color: var(--status-connected);\n }\n\n .status-indicator.disconnected {\n background-color: var(--status-disconnected);\n }\n\n main {\n padding: 2rem;\n }\n\n #initial-message {\n text-align: center;\n margin-top: 10vh;\n color: #888;\n }\n #initial-message .icon {\n font-size: 4rem;\n line-height: 1;\n }\n\n #app-grid {\n display: grid;\n grid-template-areas:\n \"found\"\n \"list\"\n \"controller\";\n gap: 2rem;\n }\n\n @media (min-width: 900px) {\n #app-grid {\n grid-template-columns: 1fr 1fr;\n grid-template-areas:\n \"found list\"\n \"controller controller\";\n }\n }\n\n .device-section {\n background: var(--card-bg);\n border-radius: 8px;\n padding: 1rem;\n border: 1px solid var(--border-color);\n grid-area: var(--grid-area);\n }\n .device-section:nth-child(1) { --grid-area: found; }\n .device-section:nth-child(2) { --grid-area: list; }\n\n .section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n border-bottom: 1px solid var(--border-color);\n padding-bottom: 0.5rem;\n }\n\n .device-list {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n min-height: 100px;\n }\n\n .device-card {\n background-color: #3a3a3a;\n padding: 1rem;\n border-radius: 6px;\n cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n flex-grow: 1;\n min-width: 180px;\n }\n\n .device-card:hover {\n transform: translateY(-3px);\n box-shadow: 0 4px 10px rgba(0,0,0,0.3);\n }\n\n .device-card .name {\n font-weight: bold;\n font-size: 1.1rem;\n }\n\n .device-card .details {\n font-size: 0.8rem;\n color: #ccc;\n margin-top: 0.5rem;\n }\n\n #media-controller {\n grid-area: controller;\n background: var(--card-bg);\n border-radius: 8px;\n padding: 1.5rem;\n border: 1px solid var(--border-color);\n }\n\n #media-controller h2 {\n margin-bottom: 1rem;\n }\n\n .control-group {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-bottom: 1rem;\n }\n\n .control-group input {\n flex-grow: 1;\n padding: 0.5rem;\n border: 1px solid var(--border-color);\n background-color: var(--bg-color);\n color: var(--text-color);\n border-radius: 4px;\n min-width: 200px;\n }\n\n .control-buttons {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n }\n\n .control-buttons button {\n flex-grow: 1;\n }\n\n main.disconnected {\n opacity: 0.5;\n pointer-events: none;\n }\n */\n}\n\nfunction js() {\n /*\n document.addEventListener(\"DOMContentLoaded\", () => {\n // --- STATE ---\n const PORT = 8081;\n let apiBase = \"\";\n let services = [];\n let list = []; // Array of host strings\n let statusInterval;\n let servicesInterval;\n let isConnected = false;\n\n // --- DOM ELEMENTS ---\n const hostInput = document.getElementById(\"hostInput\");\n const connectBtn = document.getElementById(\"connectBtn\");\n const statusEl = document.getElementById(\"status\");\n const initialMessage = document.getElementById(\"initial-message\");\n const appGrid = document.getElementById(\"app-grid\");\n const mainContent = document.getElementById(\"main-content\");\n const foundDevicesEl = document.getElementById(\"found-devices\");\n const listDevicesEl = document.getElementById(\"list-devices\");\n const addAllBtn = document.getElementById(\"addAllBtn\");\n const removeAllBtn = document.getElementById(\"removeAllBtn\");\n\n // Media Controls\n const mediaUrlInput = document.getElementById(\"mediaUrl\");\n const mediaTypeInput = document.getElementById(\"mediaType\");\n const sendMediaBtn = document.getElementById(\"sendMediaBtn\");\n const playBtn = document.getElementById(\"playBtn\");\n const pauseBtn = document.getElementById(\"pauseBtn\");\n const stopBtn = document.getElementById(\"stopBtn\");\n const closeBtn = document.getElementById(\"closeBtn\");\n const allControlButtons = [sendMediaBtn, playBtn, pauseBtn, stopBtn, closeBtn, addAllBtn, removeAllBtn];\n\n // --- API HELPERS ---\n const apiCall = (endpoint, options = {}) => {\n if (!apiBase) return Promise.reject(\"API base not set\");\n return fetch(`${apiBase}${endpoint}`, options);\n };\n\n const getStatus = () => apiCall(\"/status\");\n const getServices = () => apiCall(\"/services\").then(res => res.ok ? res.json() : Promise.reject(res));\n const getList = () => apiCall(\"/list\").then(res => res.ok ? res.json() : Promise.reject(res));\n const updateList = (hosts) => apiCall(\"/list\", { method: \"PUT\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(hosts) });\n const deleteFromList = (hosts) => apiCall(\"/list\", { method: \"DELETE\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(hosts) });\n\n const postCommand = (endpoint, body = {}) => apiCall(endpoint, { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(body) });\n const sendMedia = (contentId, contentType) => postCommand(\"/media\", { contentId, contentType });\n const stopPlayback = () => postCommand(\"/stop\");\n const closeConnection = () => postCommand(\"/close\");\n const pausePlayback = () => postCommand(\"/pause\");\n const playPlayback = () => postCommand(\"/play\");\n\n // --- RENDER LOGIC ---\n const render = () => {\n renderStatus();\n renderDeviceLists();\n };\n\n const renderStatus = () => {\n if (isConnected) {\n statusEl.textContent = \"Connected\";\n statusEl.className = \"status-indicator connected\";\n initialMessage.classList.add(\"hidden\");\n appGrid.classList.remove(\"hidden\");\n mainContent.classList.remove(\"disconnected\");\n allControlButtons.forEach(btn => btn.disabled = false);\n } else {\n statusEl.textContent = \"Disconnected\";\n statusEl.className = \"status-indicator disconnected\";\n appGrid.classList.add(\"hidden\");\n initialMessage.classList.remove(\"hidden\");\n mainContent.classList.add(\"disconnected\");\n allControlButtons.forEach(btn => btn.disabled = true);\n }\n };\n\n const findIPv4 = (addresses) => {\n if (!addresses || addresses.length === 0) return 'N/A';\n // Simple check for IPv4 format\n return addresses.find(addr => /^\\d{1,3}(\\.\\d{1,3}){3}$/.test(addr)) || addresses[0];\n };\n\n const createDeviceCard = (device) => {\n const card = document.createElement(\"div\");\n card.className = \"device-card\";\n card.dataset.host = device.host;\n\n const name = device.txt?.fn || device.name;\n const model = device.txt?.rmodel || 'Unknown brand';\n const address = findIPv4(device.addresses);\n\n card.innerHTML = `\n

${name}

\n ${model}
\n ${address}\n

\n `;\n return card;\n };\n\n const renderDeviceLists = () => {\n foundDevicesEl.innerHTML = \"\";\n listDevicesEl.innerHTML = \"\";\n\n const listSet = new Set(list);\n\n services.forEach(device => {\n const card = createDeviceCard(device);\n if (listSet.has(device.host)) {\n card.addEventListener(\"click\", () => handleRemoveDevice(device.host));\n listDevicesEl.appendChild(card);\n } else {\n card.addEventListener(\"click\", () => handleAddDevice(device.host));\n foundDevicesEl.appendChild(card);\n }\n });\n };\n\n // --- EVENT HANDLERS & LOGIC ---\n const handleConnect = async () => {\n const host = hostInput.value.trim();\n if (!host) return;\n\n // Stop existing intervals if reconnecting\n if(statusInterval) clearInterval(statusInterval);\n if(servicesInterval) clearInterval(servicesInterval);\n\n apiBase = `http://${host}:${PORT}`;\n hostInput.disabled = true;\n connectBtn.disabled = true;\n connectBtn.textContent = \"Connecting...\";\n\n try {\n await getStatus(); // Initial check\n isConnected = true;\n list = await getList(); // Fetch initial list\n startPolling();\n render();\n } catch (error) {\n console.error(\"Connection failed:\", error);\n isConnected = false;\n render();\n } finally {\n hostInput.disabled = false;\n connectBtn.disabled = false;\n connectBtn.textContent = \"Connect\";\n }\n };\n\n const pollStatus = async () => {\n try {\n await getStatus();\n if (!isConnected) { // Reconnected\n isConnected = true;\n list = await getList();\n startServicesPolling();\n render();\n }\n } catch (e) {\n if (isConnected) { // Disconnected\n isConnected = false;\n stopServicesPolling();\n render();\n }\n }\n };\n\n const pollServices = async () => {\n if(!isConnected) return;\n try {\n const newServices = await getServices();\n // Simple check to see if services changed to avoid re-render\n if(JSON.stringify(services) !== JSON.stringify(newServices)) {\n services = newServices;\n render();\n }\n } catch(e) {\n console.error(\"Failed to fetch services\", e);\n // Status poll will handle disconnect\n }\n };\n\n const startPolling = () => {\n // Poll status more frequently\n statusInterval = setInterval(pollStatus, 2000);\n // Poll services less frequently\n startServicesPolling();\n };\n\n const startServicesPolling = () => {\n pollServices(); // Initial fetch\n if (!servicesInterval) {\n servicesInterval = setInterval(pollServices, 5000);\n }\n };\n\n const stopServicesPolling = () => {\n if(servicesInterval) {\n clearInterval(servicesInterval);\n servicesInterval = null;\n }\n };\n\n const handleAddDevice = async (host) => {\n if (list.includes(host)) return;\n const newList = [...list, host];\n try {\n await updateList(newList);\n list = newList;\n render();\n } catch (e) { console.error(\"Failed to add device\", e); }\n };\n\n const handleRemoveDevice = async (host) => {\n if (!list.includes(host)) return;\n try {\n await deleteFromList([host]);\n list = list.filter(h => h !== host);\n render();\n } catch (e) { console.error(\"Failed to remove device\", e); }\n };\n\n const handleAddAll = async () => {\n const listSet = new Set(list);\n const toAdd = services.filter(s => !listSet.has(s.host)).map(s => s.host);\n if (toAdd.length === 0) return;\n const newList = [...list, ...toAdd];\n try {\n await updateList(newList);\n list = newList;\n render();\n } catch (e) { console.error(\"Failed to add all devices\", e); }\n };\n\n const handleRemoveAll = async () => {\n if(list.length === 0) return;\n try {\n await deleteFromList(list);\n list = [];\n render();\n } catch (e) { console.error(\"Failed to remove all devices\", e); }\n };\n\n const handleSendMedia = () => {\n const url = mediaUrlInput.value.trim();\n const type = mediaTypeInput.value.trim();\n if (!url || !type) {\n alert(\"Please provide both Media URL and Content-Type.\");\n return;\n }\n sendMedia(url, type).catch(e => console.error(\"Failed to send media\", e));\n };\n\n // --- INITIALIZATION ---\n connectBtn.addEventListener(\"click\", handleConnect);\n addAllBtn.addEventListener(\"click\", handleAddAll);\n removeAllBtn.addEventListener(\"click\", handleRemoveAll);\n\n sendMediaBtn.addEventListener(\"click\", handleSendMedia);\n playBtn.addEventListener(\"click\", () => playPlayback().catch(e => console.error(e)));\n pauseBtn.addEventListener(\"click\", () => pausePlayback().catch(e => console.error(e)));\n stopBtn.addEventListener(\"click\", () => stopPlayback().catch(e => console.error(e)));\n closeBtn.addEventListener(\"click\", () => closeConnection().catch(e => console.error(e)));\n\n render(); // Initial render for disconnected state\n });\n */\n}\n\nconst app = new Hono();\napp.get(\"/\", serve(html, \"text/html\"));\napp.get(\"/styles.css\", serve(css, \"text/css\"));\napp.get(\"/main.js\", serve(js, \"text/javascript\"));\n\nexport default app.fetch;","deleted",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":14,"_58":59,"_18":60},["D",1749382468990],"children",[],[35],"95a9bf2e-4451-11f0-9281-76b3cceeab13",["D",1749377764242],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8609861-8129-44ab-cbda-12ed9d44f600/square512?exp=1789556399&sig=dda542a1f62e43d187bcca0acdf5552e77509ceaa95ee752f1994319c2323233","userId","8d6857d3-cf1c-4e98-a094-0e379c10badf","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","4f4797d6-1767-45ca-8dc5-5113174ca1c1","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_115":111},"org",{"_11":12,"_109":-5,"_110":111,"_71":72,"_112":113,"_114":53},"branch",{"_17":42,"_13":16,"_33":40,"_101":61,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":14,"_108":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJqRlBqSjdFTUlTVmVORmpObmFqZmJLVWh5VCJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":149,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":70,"_71":72,"_73":37,"_74":44,"_75":44,"_76":-5,"_77":78,"_79":80,"_81":-5,"_82":-5,"_83":-5,"_84":-5,"_85":86,"_87":86,"_88":89,"_90":89,"_91":89,"_92":86,"_93":86,"_94":150,"_96":151,"_98":152,"_100":53},[146],"files",[146],"counts",{"_136":78,"_137":138,"_139":78,"_31":140,"_141":142},[134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":14,"_18":135},[35],"pulls","branches",1,"forks",{"_143":78,"_145":78},"connections",{"_143":78,"_144":78},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":14,"_58":147,"_18":148},[],[35],["D",1749377764242],{"_11":12,"_115":111},{"_11":12,"_109":-5,"_110":111,"_71":72,"_112":113,"_114":53},{"_17":42,"_13":16,"_33":40,"_101":61,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":14,"_108":12},"ctx",{"_94":-5,"_131":186,"_187":188,"_189":190,"_191":53,"_192":53,"_193":53,"_194":44,"_195":-5,"_196":-7,"_197":-7,"_198":78,"_199":53,"_200":53,"_201":-5,"_202":53,"_203":53,"_204":53,"_205":-5},"ENV",{"_157":158,"_159":160,"_161":16,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code