Добавлена работа с сокетами

src/pages/main.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, {useState, useCallback, useRef} from 'react';
 import { getFeatures } from '@ijl/cli';
 
 import logo from '../assets/logo-white.svg';
@@ -19,6 +19,7 @@ import {
     StartInput,
     StartLabel,
 } from './style';
+import {socket} from "../socket";
 
 const keyboardFeature = getFeatures('hub-video-start')?.keyboard;
 
@@ -65,11 +66,21 @@ const Input = ({ onStart }) => {
 }
 
 const Start = () => {
+    const socketRef = useRef({ sent: false })
+
+    const handleCheck = () => {
+        if (!socketRef.current.sent) {
+            socket.emit('play')
+            socketRef.current.sent = true
+        }
+    }
+
     return (
         <StartWrapper>
             <StartInput
                 id="check"
                 type="checkbox"
+                onChange={handleCheck}
             />
             <StartLabel
                 htmlFor='check'

src/socket.ts

@@ -0,0 +1,8 @@
+import {getConfigValue} from "@ijl/cli";
+import {io} from "socket.io-client";
+
+export const socket = io(getConfigValue('hub-video-start.socket.url'), { path: getConfigValue('hub-video-start.socket.path')});
+socket.on("connect", () => {
+    console.log('Socket connected', socket.id)
+})
+