fullscreen

This commit is contained in:
Primakov Alexandr Alexandrovich 2022-11-29 21:36:30 +03:00
parent 4420c697ad
commit 8405acb27d
3 changed files with 45 additions and 2 deletions

View File

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

View File

@ -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)} />}

View File

@ -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;
`;