diff --git a/src/pages/main.tsx b/src/pages/main.tsx
index f5d8fd9..f941e5f 100644
--- a/src/pages/main.tsx
+++ b/src/pages/main.tsx
@@ -18,8 +18,12 @@ import {
StartI,
StartInput,
StartLabel,
+ HalfLine,
+ HideGroup,
+ Circle,
+ LineSvg,
} from './style';
-import {socket} from "../socket";
+import { socket } from "../socket";
const keyboardFeature = getFeatures('hub-video-start')?.keyboard;
@@ -65,18 +69,112 @@ const Input = ({ onStart }) => {
)
}
+export const Line = ({ hide, reverse, speed, delay, radius, progress, width, color }) => (
+
+
+
+
+
+)
+
+Line.defaultProps = {
+ reverse: false
+}
+
const Start = () => {
- const socketRef = useRef({ sent: false })
+ // const socketRef = useRef({ sent: false });
+ const [sended, setSend] = useState(false);
const handleCheck = () => {
- if (!socketRef.current.sent) {
+ // if (!socketRef.current.sent) {
+ if (!sended) {
socket.emit('play')
- socketRef.current.sent = true
+ // socketRef.current.sent = true
+ setSend(true)
}
}
return (
+
+
+
+
+
+
+
{
return (
- {!showStart && setShowStart(true)} />}
- {showStart && }
+
+ {/* {!showStart && setShowStart(true)} />}
+ {showStart && } */}
);
};
diff --git a/src/pages/style.ts b/src/pages/style.ts
index 9551d20..8a9005a 100644
--- a/src/pages/style.ts
+++ b/src/pages/style.ts
@@ -1,5 +1,5 @@
import styled from '@emotion/styled';
-import { keyframes } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
export const MainWrapper = styled.main`
display: flex;
@@ -49,7 +49,7 @@ export const IconButton = styled.button`
const reveal = keyframes`
0% {
- transform: scale(0.1, 0.1)
+ transform: scale(0.1, 0.1);
}
100% {
@@ -147,7 +147,6 @@ export const StartI = styled.i`
color: white;
margin: -35% 0 0 -35%;
border-radius: 50%;
- /* background: linear-gradient(#cbc7bc, #d2cbc3); */
background: linear-gradient(#22a037, #98e221);
box-shadow:
0 -2px 5px rgba(255,255,255,0.05),
@@ -158,3 +157,86 @@ export const StartI = styled.i`
justify-content: center;
font-style: normal;
`;
+
+// const LineRotation = keyframes
+//`
+// 0% {
+// transform: translate(-50%, -100%) rotate(0);
+// }
+
+// 100% {
+// transform: translate(-50%, -100%) rotate(1turn);
+// }
+// `;
+
+
+// type LineProps = {
+// radius: number;
+// width: number;
+
+// }
+
+// export const HalfLine = styled.div(({
+// radius,
+// width,
+// }) =>css`
+// transform-origin: 50% 100%;
+// animation: ${LineRotation} 3s linear infinite;
+// width: ${radius * 2}px;
+// height: ${radius}px;
+// border-top-left-radius: ${radius}px;
+// border-top-right-radius: ${radius}px;
+// border: ${width}px solid gray;
+// border-bottom: 0;
+// position: absolute;
+// top: 50%;
+// left: 50%;
+// transform: translate(-50%, -100%);
+// `);
+
+const LineRotation = keyframes`
+ 0% {
+ transform: translate(-50%, -50%) rotate(0);
+ }
+
+ 100% {
+ transform: translate(-50%, -50%) rotate(1turn);
+ }
+`;
+
+const LineHideAnimation = keyframes`
+ 0% {
+ /* transform: scale(1); */
+ opacity: 1;
+ }
+
+ 100% {
+ /* transform: scale(0); */
+ opacity: 0;
+ }
+`;
+
+export const LineSvg = styled.svg<{ animationSpeed: number; delay: number; reverse: boolean }>`
+ animation: ${LineRotation} ${({ animationSpeed }) => animationSpeed}s linear infinite${({ reverse }) => reverse ? ' reverse' : ''};
+ animation-delay: -${({ delay }) => delay}s;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 50% 50%;
+ transform: translate(-50%, -100%);
+`;
+
+export const HideGroup = styled.g<{ hide: boolean; delay: number; }>`
+ animation: ${({ hide }) => hide ? css`${LineHideAnimation} 3s ease-in forwards`: ''};
+ transform-origin: 50% 50%;
+ animation-delay: ${({ delay }) => delay / 10}s;
+`;
+export const Circle = styled.circle<{ circumference: number; percent: number }>`
+ transition: 0.35s stroke-dashoffset;
+ transform: rotate(-90deg);
+ transform-origin: 50% 50%;
+ stroke-dasharray: ${({ circumference }) => `${circumference} ${circumference}`};
+ stroke-dashoffset: ${({ circumference, percent }) => circumference - percent / 100 * circumference};
+`;
+
+
diff --git a/src/socket.ts b/src/socket.ts
index 40897c1..74a3c17 100644
--- a/src/socket.ts
+++ b/src/socket.ts
@@ -1,5 +1,5 @@
-import {getConfigValue} from "@ijl/cli";
-import {io} from "socket.io-client";
+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", () => {