microboard-ui-temp 0.0.3

package/src/features/VideoPlayer/VideoPlayer.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useRef } from "react";
+import { useAppContext } from "features/AppContext";
+import styles from "./VideoPlayer.module.css";
+import { conf, captureFrame, VideoItem } from "microboard-temp";
+import YouTube from "react-youtube";
+
+interface Props {
+	item: VideoItem;
+}
+
+export const VideoPlayer = ({ item }: Props) => {
+	const { board, app } = useAppContext();
+
+	const videoId = conf.getYouTubeId(item.getUrl());
+
+	const videoRef = useRef<HTMLVideoElement>(null);
+	const containerRef = useRef<HTMLDivElement | null>(null);
+	const stopTimeoutRef = useRef<number | null>(null);
+	const timeoutDuration = videoId ? 300 : 10;
+
+	useEffect(() => {
+		containerRef.current?.addEventListener(
+			"wheel",
+			app.controller.onWheel,
+			{
+				capture: true,
+				passive: false,
+			},
+		);
+
+		const video = videoRef.current;
+		if (!video) {
+			return;
+		}
+
+		const handleLoadedMetadata = () => {
+			if (item.getIsStorageUrl()) {
+				video.currentTime = item.getCurrentTime();
+				video.play();
+			}
+		};
+
+		video.addEventListener("loadedmetadata", handleLoadedMetadata);
+
+		return () => {
+			if (videoRef.current) {
+				videoRef.current.removeEventListener(
+					"loadedmetadata",
+					handleLoadedMetadata,
+				);
+			}
+			containerRef.current?.removeEventListener(
+				"wheel",
+				app.controller.onWheel,
+			);
+		};
+	}, []);
+
+	const stopVideo = () => {
+		if (!stopTimeoutRef.current) {
+			const timeoutId = setTimeout(() => {
+				if (videoRef.current) {
+					item.setCurrentTime(videoRef.current.currentTime || 0.1);
+					const currentFrame = captureFrame(
+						item.getCurrentTime(),
+						videoRef.current,
+					);
+					if (currentFrame) {
+						item.setPreviewImage(currentFrame);
+					}
+				}
+				item.setIsPlaying(false);
+			}, timeoutDuration);
+			stopTimeoutRef.current = timeoutId;
+		}
+	};
+
+	const stopYoutubeVideo = event => {
+		if (!stopTimeoutRef.current) {
+			const timeoutId = setTimeout(() => {
+				const currentTime = event.target.getCurrentTime();
+				item.setCurrentTime(currentTime);
+				item.setIsPlaying(false);
+			}, timeoutDuration);
+			stopTimeoutRef.current = timeoutId;
+		}
+	};
+
+	const clearStopTimeout = () => {
+		if (stopTimeoutRef.current) {
+			clearTimeout(stopTimeoutRef.current);
+			stopTimeoutRef.current = null;
+		}
+	};
+
+	const onStateChange = event => {
+		if (event.data === 3) {
+			clearStopTimeout();
+		}
+	};
+
+	const onEnded = () => {
+		clearStopTimeout();
+		item.setCurrentTime(0);
+		item.setIsPlaying(false);
+	};
+
+	const mbr = item.getMbr().getTransformed(board.camera.getMatrix());
+
+	const opts = {
+		width: (mbr.getWidth() > 48 ? mbr.getWidth() : 48).toString(),
+		height: (mbr.getHeight() > 32 ? mbr.getHeight() : 32).toString(),
+		playerVars: {
+			autoplay: 0,
+			controls: 1,
+			modestbranding: 1,
+		},
+	};
+
+	return (
+		<div
+			className={styles.container}
+			style={{
+				left: mbr.left,
+				top: mbr.top,
+				zIndex: board.getZIndex(item),
+			}}
+			ref={containerRef}
+		>
+			{videoId ? (
+				<YouTube
+					videoId={videoId}
+					opts={opts}
+					onReady={event => {
+						event.target.seekTo(item.getCurrentTime());
+						event.target.playVideo();
+					}}
+					onStateChange={onStateChange}
+					onPause={stopYoutubeVideo}
+					onEnd={onEnded}
+				/>
+			) : (
+				<video
+					ref={videoRef}
+					controls
+					width={mbr.getWidth()}
+					height={mbr.getHeight()}
+					onPause={stopVideo}
+					onSeeking={clearStopTimeout}
+					onSeeked={clearStopTimeout}
+					onEnded={onEnded}
+				>
+					<source src={item.getUrl()} type="video/mp4" />
+				</video>
+			)}
+		</div>
+	);
+};

package/src/features/VideoPlayer/index.ts

@@ -0,0 +1,2 @@
+export { VideoPlayer } from "./VideoPlayer.tsx";
+export { VideoCanvasControls } from "./VideoCanvasControls.tsx";

package/src/features/ViewModeGuard.tsx

@@ -0,0 +1,62 @@
+import type { ViewMode } from "App/Connection";
+import type { InterfaceType } from "microboard-temp";
+import { useAppSubscription } from "App/useBoardSubscription";
+import { isIframe } from "shared/lib/isIframe";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import React, { useEffect, type ReactNode } from "react";
+import { useAppContext } from "./AppContext";
+
+type Props = {
+	iframe?: boolean;
+	fallback?: ReactNode;
+	mode?: ViewMode | ViewMode[];
+	children?: ReactNode | ((interfaceType: InterfaceType) => ReactNode);
+	callback?: () => void;
+	fallbackCb?: () => void;
+	shouldLog?: boolean;
+};
+
+export function ViewModeGuard({
+	children,
+	iframe,
+	fallback,
+	mode = "edit",
+	callback,
+	fallbackCb,
+}: Props) {
+	const { board } = useAppContext();
+	const forceUpdate = useForceUpdate();
+	useAppSubscription({
+		subjects: ["board"],
+		observer: forceUpdate,
+	});
+
+	const interfaceType = board.getInterfaceType();
+
+	const shouldUseFallback =
+		((!Array.isArray(mode) && interfaceType !== mode) ||
+			(Array.isArray(mode) && !mode.includes(interfaceType))) &&
+		(!iframe || isIframe());
+
+	useEffect(() => {
+		if (shouldUseFallback && fallbackCb) {
+			fallbackCb();
+		}
+
+		if (callback) {
+			callback();
+		}
+	}, [shouldUseFallback, fallbackCb, callback]);
+
+	if (shouldUseFallback) {
+		return <>{fallback}</>;
+	}
+
+	return (
+		<>
+			{typeof children === "function"
+				? children(interfaceType)
+				: children}
+		</>
+	);
+}

package/src/features/WalletLoginButton/WalletLoginButton.module.css

@@ -0,0 +1,7 @@
+.btn {
+	max-width: 252px;
+	width: 100%;
+	margin: 0 auto;
+	position: relative;
+	font-weight: 500;
+}

package/src/features/WalletLoginButton/WalletLoginButton.tsx

@@ -0,0 +1,77 @@
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { injected } from "@wagmi/connectors";
+import { useAccount } from "App/useAccount";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "shared/ui-lib/Icon";
+import { notify } from "shared/ui-lib/Toast";
+import { Tooltip } from "shared/ui-lib/Tooltip";
+import { UiButton } from "shared/ui-lib/UiButton";
+import {
+	useConnect,
+	useDisconnect,
+	useSignMessage,
+	useAccount as useWalletAccount,
+} from "wagmi";
+import styles from "./WalletLoginButton.module.css";
+
+interface WalletLoginButtonProps {}
+
+const WalletLoginButton: React.FC<WalletLoginButtonProps> = () => {
+	const { t } = useTranslation();
+	const { address } = useWalletAccount();
+	const account = useAccount();
+	const { connectAsync, error } = useConnect();
+	const { disconnectAsync } = useDisconnect();
+	const { signMessageAsync } = useSignMessage();
+
+	const handleLogin = async (): Promise<void> => {
+		try {
+			const res = await connectAsync({ connector: injected() });
+			if (!res) {
+				throw new Error("Failed connecting wallet");
+			}
+
+			const nonce = await account.getNonce(res.accounts[0]);
+			if (!nonce) {
+				throw new Error("Failed to fetch nonce");
+			}
+
+			const signature = await signMessageAsync({ message: nonce });
+			await account.verifySignature(res.accounts[0], signature);
+		} catch (err) {
+			console.error(err);
+			notify({
+				variant: "error",
+				header: t("auth.signinNotifyError.title"),
+				body: t("auth.signinNotifyError.crypto"),
+			});
+			disconnectAsync();
+		}
+	};
+
+	return (
+		<ConnectButton.Custom>
+			{() => (
+				<UiButton
+					variant="primary"
+					onClick={handleLogin}
+					className={styles.btn}
+					size="lg"
+				>
+					<Icon iconName={"CryptoIcon"} />
+					{t("auth.cryptoSignIn")}
+					{!address && (
+						<Tooltip
+							tooltip={t("auth.connectWallet")}
+							tooltipPosition="top"
+							tooltipAlign="left"
+						/>
+					)}
+				</UiButton>
+			)}
+		</ConnectButton.Custom>
+	);
+};
+
+export default WalletLoginButton;

package/src/features/WalletLoginButton/index.ts

@@ -0,0 +1 @@
+export { default as WalletLoginButton } from "./WalletLoginButton";

package/src/features/Widgets/Navbar/Navbar.css

@@ -0,0 +1,148 @@
+.NavbarWrapper {
+	display: flex;
+	height: 64px;
+	align-items: center;
+	justify-content: space-between;
+
+	max-width: 1280px;
+
+	padding: 0 120px;
+
+	font-family: "Manrope", Arial;
+}
+
+.NavbarWrapper .Logo {
+	height: 48px;
+
+	display: flex;
+	align-items: center;
+
+	gap: 4px;
+
+	font-size: 16px;
+	font-weight: 500;
+	text-decoration: none;
+	color: rgb(20, 21, 26);
+
+	margin: 0;
+}
+
+.NavbarWrapper .Logo:visited {
+	color: rgb(20, 21, 26);
+}
+
+.NavbarWrapper .Link {
+	padding: 6px 10px;
+
+	height: 32px;
+
+	font-size: 14px;
+	font-weight: 500;
+	background-color: #924fe8;
+
+	border-radius: 10px;
+
+	color: white;
+	text-decoration: none;
+}
+
+.NavbarWrapper .Link:hover {
+	background-color: #1f2228;
+	color: white;
+}
+
+.NavbarWrapper .Link:active {
+	background-color: #1f2228;
+	color: white;
+
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+.NavbarWrapper .LinkActive {
+	/* display: none; */
+	padding: 6px 10px;
+	box-sizing: border-box;
+
+	height: 32px;
+	border: 1px solid transparent;
+	border-radius: 10px;
+
+	font-size: 14px;
+	font-weight: 500;
+
+	/* background-color: rgba(10, 15, 41, 0.04); */
+	background-color: white;
+
+	border: 1px solid #dee0e3;
+
+	color: #14151a;
+	text-decoration: none;
+}
+
+.NavbarWrapper .LinkActive:hover {
+	/* background-color: rgba(10, 15, 41, 0.08); */
+	background-color: #f7f7f8;
+	color: #14151a;
+	/* border: 1px solid transparent; */
+}
+
+.NavbarWrapper .LinkActive:active {
+	/* background-color: rgba(10, 15, 41, 0.08); */
+	background-color: white;
+	border: 1px solid rgb(183, 138, 240);
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+@media (max-width: 640px) {
+	.NavbarWrapper {
+		max-width: 100%;
+		padding: 0 30px;
+		height: auto;
+	}
+
+	.NavbarWrapper .Link,
+	.NavbarWrapper .LinkActive {
+		width: 100%;
+		box-sizing: border-box;
+		margin-bottom: 5px;
+	}
+}
+
+.Links {
+	display: flex;
+	gap: 16px;
+}
+
+.Link.Back {
+	padding: 0 120px;
+	gap: 4px;
+	color: var(--icon-base-secondary);
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+}
+
+@media screen and (max-width: 1280px) {
+	.NavbarWrapper {
+		padding: 0 16px;
+		max-width: 100%;
+	}
+	.Link.Back {
+		padding: 0 16px;
+	}
+}
+
+@media screen and (max-width: 640px) {
+	.NavbarWrapper .Link,
+	.NavbarWrapper .LinkActive {
+		/* display: none; */
+	}
+
+	.NavbarWrapper {
+		border-bottom: 1px solid #dee0e3;
+	}
+
+	.NavbarWrapper .Links {
+		display: none;
+	}
+}

package/src/features/Widgets/Navbar/Navbar.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { LeadIcon } from "./lead-icon";
+import { useTranslation } from "react-i18next";
+import { NavLink, useLocation } from "react-router-dom";
+import "./Navbar.css";
+import { isIframe } from "shared/lib/isIframe";
+import { LAST_BOARD_KEY_QS } from "App/App";
+import { Icon } from "shared/ui-lib/Icon";
+
+const loginVisibleRoutes = ["/auth/verify", "/auth/sign-up"];
+const signUpVisibleRoutes = [
+	"/auth/sign-in",
+	"/auth/forgot-password",
+	"/auth/restore-password",
+];
+
+export const Navbar: React.FC = () => {
+	const { t } = useTranslation();
+	const location = useLocation();
+
+	const isLoginVisible = loginVisibleRoutes.includes(location.pathname);
+	const isSignUpVisible = signUpVisibleRoutes.includes(location.pathname);
+	const lastBoardLink = localStorage.getItem(LAST_BOARD_KEY_QS);
+	const backToSelect =
+		new URLSearchParams(location.search).get("backToSelect") === "true";
+
+	return (
+		<>
+			<header className="NavbarWrapper">
+				<a
+					className="Logo"
+					target={isIframe() ? "_blank" : "_top"}
+					href="https://microboard.ru"
+					rel="noreferrer"
+				>
+					<LeadIcon width={20} height={20} />
+					<span>Microboard</span>
+				</a>
+				<div>
+					{isLoginVisible && (
+						<NavLink
+							to={`/auth/sign-in${location.search}`}
+							className={"Link"}
+						>
+							{t("auth.signIn")}
+						</NavLink>
+					)}
+					{isSignUpVisible && (
+						<NavLink
+							to={`/auth/sign-up${location.search}`}
+							className={"Link"}
+						>
+							{t("auth.signUpForFree")}
+						</NavLink>
+					)}
+				</div>
+			</header>
+			{(lastBoardLink || backToSelect) && (
+				<NavLink
+					to={
+						!backToSelect
+							? `/boards/${lastBoardLink}`
+							: "/selectBoard"
+					}
+					className={"Link Back"}
+				>
+					<Icon width={20} height={20} iconName="ArrowLeft1" />{" "}
+					{!backToSelect
+						? t("auth.backToBoard")
+						: t("auth.backToBoardSelection")}
+				</NavLink>
+			)}
+		</>
+	);
+};

package/src/features/Widgets/Navbar/lead-icon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface Props {
+	width?: number;
+	height?: number;
+}
+
+export const LeadIcon: React.FC<Props> = ({ width = 20, height = 20 }) => {
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M12.0118 2.04402C15.2239 2.90472 17.21 6.05727 16.682 9.27093L21.049 10.4411C21.7332 10.6244 22.1394 11.3277 21.956 12.012C21.0953 15.2242 17.9426 17.2103 14.7289 16.6822L13.5589 21.049C13.3755 21.7333 12.6722 22.1393 11.988 21.956C8.77579 21.0953 6.78975 17.9427 7.31772 14.7291L2.95099 13.559C2.26674 13.3757 1.86068 12.6724 2.04402 11.9882C2.90471 8.77602 6.05716 6.78999 9.27077 7.31789L10.4409 2.95099C10.6242 2.26674 11.3275 1.86068 12.0118 2.04402ZM13.3604 10.8829C12.609 10.1315 11.3909 10.1315 10.6395 10.8829C9.88817 11.6343 9.88817 12.8525 10.6395 13.6038C11.3909 14.3552 12.609 14.3552 13.3604 13.6038C14.1117 12.8525 14.1117 11.6342 13.3604 10.8829Z"
+				fill="#8041FF"
+			/>
+		</svg>
+	);
+};

package/src/features/Widgets/form-notifications/password-changed.module.css

@@ -0,0 +1,39 @@
+.requested {
+	width: 500px;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+
+	/* padding-bottom: 40px; */
+}
+
+.requestedIcon {
+	padding-top: 40px;
+}
+
+.backToLogin {
+	margin-top: 32px;
+}
+
+.resetPassword {
+	text-align: center;
+	font-weight: 600;
+	font-size: 48px;
+	margin: 0;
+	padding: 0;
+
+	line-height: 56px;
+}
+
+@media screen and (max-width: 640px) {
+	.requested {
+		width: 100%;
+	}
+
+	.resetPassword {
+		font-size: 30px;
+		line-height: 36px;
+	}
+}

package/src/features/Widgets/form-notifications/password-changed.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import styles from "./password-changed.module.css";
+import { useTranslation } from "react-i18next";
+
+export const PasswordChanged: React.FC = () => {
+	const { t } = useTranslation();
+	return (
+		<div className={styles.requested}>
+			<div className={styles.requestedIcon}>
+				<svg
+					width="60"
+					height="60"
+					viewBox="0 0 60 60"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M30 55C16.1925 55 5 43.8075 5 30C5 16.1925 16.1925 5 30 5C43.8075 5 55 16.1925 55 30C55 43.8075 43.8075 55 30 55ZM30 50C35.3043 50 40.3914 47.8929 44.1421 44.1421C47.8929 40.3914 50 35.3043 50 30C50 24.6957 47.8929 19.6086 44.1421 15.8579C40.3914 12.1071 35.3043 10 30 10C24.6957 10 19.6086 12.1071 15.8579 15.8579C12.1071 19.6086 10 24.6957 10 30C10 35.3043 12.1071 40.3914 15.8579 44.1421C19.6086 47.8929 24.6957 50 30 50V50ZM27.5075 40L16.9 29.3925L20.435 25.8575L27.5075 32.93L41.6475 18.7875L45.185 22.3225L27.5075 40Z"
+						fill="#26BD6C"
+					/>
+				</svg>
+			</div>
+			<h1 className={styles.resetPassword}>
+				{t("profile.passwordChanged")}
+			</h1>
+		</div>
+	);
+};

package/src/features/ZoomPanel/ZoomPanel.module.css

@@ -0,0 +1,32 @@
+.panel {
+	position: absolute;
+	bottom: var(--absolute-position-panel-padding);
+	right: var(--absolute-position-panel-padding);
+}
+
+.zoom {
+	font-weight: 500;
+	font-size: 1.6rem;
+	min-width: 65px;
+}
+
+.defaultPosition {
+	bottom: var(--absolute-position-panel-padding) !important;
+	right: var(--absolute-position-panel-padding) !important;
+}
+
+@media screen and (max-width: 1200px) {
+	.tableHide {
+		display: none;
+	}
+
+	.zoomToFit {
+		border-radius: var(--radius);
+	}
+}
+
+@media screen and (max-width: 550px) {
+	.panel {
+		bottom: calc(var(--absolute-position-panel-padding) * 2 + 48px);
+	}
+}