fullscreen

ijl.config.js

@@ -17,6 +17,11 @@ module.exports = {
                 "on": true,
                 "value": "true",
                 "key": "keyboard"
+            },
+            "fullScreen": {
+                "on": true,
+                "value": "true",
+                "key": "fullScreen"
             }
         },
     },

src/pages/main.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useCallback, useRef} from 'react';
+import React, {useState, useCallback, useRef, useMemo} from 'react';
 import { getFeatures } from '@ijl/cli';
 
 import logo from '../assets/logo-white.svg';
@@ -24,17 +24,21 @@ import {
     LineSvg,
     Svg,
     CircleDiv,
+    FullScreenButton,
+    InputHolder,
 } from './style';
 import { socket } from "../socket";
 
 const keyboardFeature = getFeatures('hub-video-start')?.keyboard;
+const fullScreenFeature = getFeatures('hub-video-start')?.fullScreen;
 
 const Input = ({ onStart }) => {
     const [value, setValue] = useState('');
-    const [inFocuse, setInfocuse] = useState(false);
+    const [inFocuse, setInfocuse] = useState(true);
     const handleChange = useCallback(event => {
         setValue(event.target.value.toUpperCase())
     }, [setValue]);
+    const inputRef = useRef<HTMLInputElement>(null);
 
     const handleSubmit = useCallback((event) => {
         event.preventDefault();
@@ -56,9 +60,16 @@ const Input = ({ onStart }) => {
                         value={value}
                         onChange={handleChange}
                         onFocus={() => setInfocuse(true)}
+                        ref={inputRef}
+                        onClick={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            inputRef.current.blur();
+                        }}
                         id="input"
                         autoComplete="off"
                     />
+                    <InputHolder onClick={() => setInfocuse(true)} />
                     <IconButton type="submit">
                         <ArrowImg src={arrow} />
                     </IconButton>
@@ -204,9 +215,23 @@ const Start = () => {
 
 export const MainPage = () => {
     const [showStart, setShowStart] = useState(false);
+    const [isFull, setFull] = useState(false);
+
+    const handleFullScreen = useCallback(() => {
+        const elem = document.documentElement;
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen();
+        } else if (elem.webkitRequestFullscreen) { /* Safari */
+            elem.webkitRequestFullscreen();
+        } else if (elem.msRequestFullscreen) { /* IE11 */
+            elem.msRequestFullscreen();
+        }
+        setFull(true);
+    }, []);
 
     return (
         <MainWrapper>
+            {fullScreenFeature && !isFull && <FullScreenButton onClick={handleFullScreen}>На весь экран</FullScreenButton>}
             <LogoImg src={logo} />
             {/* <Start /> */}
             {!showStart && <Input onStart={() => setShowStart(true)} />}

src/pages/style.ts

@@ -276,4 +276,17 @@ export const Circle = styled.circle<{ circumference: number; percent: number }>`
     stroke-dashoffset: ${({ circumference, percent }) => circumference - percent / 100 * circumference};
 `;
 
+export const FullScreenButton = styled.button`
+    padding: 24px;
+    position: absolute;
+    top: 50px;
+    right: 50px;
+`;
 
+export const InputHolder = styled.div`
+    background-color: rgba(0, 0, 0, .0);
+    width: calc(100% - 70px);
+    height: 100%;
+    right: 70px;
+    position: absolute;
+`;