diff --git a/client/package.json b/client/package.json index f7e504174..5144e1cdd 100644 --- a/client/package.json +++ b/client/package.json @@ -3,29 +3,29 @@ "version": "1.9.7", "private": true, "dependencies": { - "@chakra-ui/react": "^2.4.1", - "@dnd-kit/core": "^6.0.5", + "@chakra-ui/react": "^2.4.5", + "@dnd-kit/core": "^6.0.6", "@dnd-kit/sortable": "^7.0.1", - "@dnd-kit/utilities": "^3.2.0", + "@dnd-kit/utilities": "^3.2.1", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@react-icons/all-files": "^4.1.0", - "@sentry/react": "^7.24.1", + "@sentry/react": "^7.28.1", "@sentry/tracing": "^7.24.1", "@tanstack/react-query": "^4.18.0", "@tanstack/react-query-devtools": "^4.18.0", - "autosize": "^5.0.1", + "autosize": "^5.0.2", "axios": "^1.2.0", "color": "^4.2.3", "csv-stringify": "^6.2.3", - "framer-motion": "^7.5.3", + "framer-motion": "^8.0.2", "jotai": "^1.10.0", "luxon": "^3.1.0", - "react": "^18.1.0", + "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", - "react-dom": "^18.1.0", + "react-dom": "^18.2.0", "react-fast-compare": "^3.2.0", - "react-qr-code": "^2.0.5", + "react-qr-code": "^2.0.11", "react-router-dom": "^6.3.0", "react-table": "^7.7.0", "socket.io-client": "^4.5.4", @@ -53,40 +53,38 @@ ] }, "devDependencies": { - "@sentry/vite-plugin": "^0.2.4", + "@sentry/vite-plugin": "^0.3.0", "@tanstack/eslint-plugin-query": "^4.15.1", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", - "@testing-library/react-hooks": "^8.0.0", "@testing-library/user-event": "^14.1.1", "@types/color": "^3.0.3", - "@types/node": "^18.7.16", - "@types/react": "^18.0.21", - "@types/react-beautiful-dnd": "^13.1.2", - "@types/react-dom": "^18.0.6", - "@typescript-eslint/eslint-plugin": "^5.37.0", - "@typescript-eslint/parser": "^5.37.0", - "@vitejs/plugin-react": "^2.2.0", + "@types/node": "^18.11.18", + "@types/react": "^18.0.26", + "@types/react-beautiful-dnd": "^13.1.3", + "@types/react-dom": "^18.0.10", + "@typescript-eslint/eslint-plugin": "^5.47.1", + "@typescript-eslint/parser": "^5.47.1", + "@vitejs/plugin-react": "^3.0.0", "eslint": "^8.25.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.0.4", - "eslint-plugin-react": "^7.31.8", + "eslint-plugin-jest": "^27.1.7", + "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-simple-import-sort": "^7.0.0", - "eslint-plugin-testing-library": "^5.6.4", - "jsdom": "^20.0.0", - "prettier": "^2.7.1", + "eslint-plugin-simple-import-sort": "^8.0.0", + "eslint-plugin-testing-library": "^5.9.1", + "jsdom": "^20.0.3", + "prettier": "^2.8.1", "prop-types": "^15.8.1", - "react-test-renderer": "^18.1.0", - "sass": "^1.51.0", - "stylelint": "^14.9.1", - "stylelint-config-prettier": "^9.0.3", - "stylelint-config-standard-scss": "^4.0.0", + "sass": "^1.57.1", + "stylelint": "^14.16.0", + "stylelint-config-prettier": "^9.0.4", + "stylelint-config-standard-scss": "^6.1.0", "typescript": "^4.8.3", - "vite": "^3.2.4", - "vite-plugin-svgr": "^2.2.2", - "vite-tsconfig-paths": "^3.6.0", - "vitest": "^0.25.3" + "vite": "^4.0.3", + "vite-plugin-svgr": "^2.4.0", + "vite-tsconfig-paths": "^4.0.3", + "vitest": "^0.26.2" }, "resolutions": { "**/@types/react": "18.0.21" diff --git a/client/src/AppRouter.tsx b/client/src/AppRouter.tsx index 140abca37..f87cfe14d 100644 --- a/client/src/AppRouter.tsx +++ b/client/src/AppRouter.tsx @@ -15,7 +15,6 @@ const Countdown = lazy(() => import('features/viewers/countdown/Countdown')); const Backstage = lazy(() => import('features/viewers/backstage/Backstage')); const Public = lazy(() => import('features/viewers/public/Public')); const Lower = lazy(() => import('features/viewers/lower-thirds/LowerWrapper')); -const Pip = lazy(() => import('features/viewers/picture-in-picture/Pip')); const StudioClock = lazy(() => import('features/viewers/studio/StudioClock')); const STimer = withSocket(TimerView); @@ -25,7 +24,6 @@ const SCountdown = withSocket(Countdown); const SBackstage = withSocket(Backstage); const SPublic = withSocket(Public); const SLowerThird = withSocket(Lower); -const SPip = withSocket(Pip); const SStudio = withSocket(StudioClock); const FeatureWrapper = lazy(() => import('features/FeatureWrapper')); @@ -70,7 +68,6 @@ export default function AppRouter() { } /> } /> - } /> } /> {/*/!* Lower cannot have fallback *!/*/} } /> diff --git a/client/src/common/components/countdown/TimerDisplay.jsx b/client/src/common/components/countdown/TimerDisplay.jsx deleted file mode 100644 index 8fa4b428a..000000000 --- a/client/src/common/components/countdown/TimerDisplay.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import { memo } from 'react'; -import { formatDisplay } from 'common/utils/dateConfig'; -import PropTypes from 'prop-types'; - -import './TimerDisplay.scss'; - -const TimerDisplay = ({ time, small, isNegative, hideZeroHours }) => { - - const display = - (time === null || typeof time === 'undefined' || isNaN(time)) - ? '-- : -- : --' - : formatDisplay(time, hideZeroHours); - - const classes = `timer ${small ? 'timer--small' : ''} ${isNegative ? 'timer--finished' : ''}`; - - return
{display}
; -}; - -export default memo(TimerDisplay); - -TimerDisplay.propTypes = { - time: PropTypes.number, - small: PropTypes.bool, - isNegative: PropTypes.bool, - hideZeroHours: PropTypes.bool, -}; diff --git a/client/src/common/components/countdown/TimerDisplay.scss b/client/src/common/components/countdown/TimerDisplay.scss deleted file mode 100644 index fd3739c02..000000000 --- a/client/src/common/components/countdown/TimerDisplay.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use '../../../theme/viewerDefs' as *; - -.timer { - font-family: var(--font-family-override, $ontime-font-family); - color: var(--timer-color-override, $viewer-color); - font-size: 21vw; - line-height: 21vw; - text-align: center; - letter-spacing: 1vw; - - &--small { - font-size: 3.75em; - line-height: 0.9; - text-align: center; - letter-spacing: 0.1em; - font-weight: 600; - } - - &--finished { - color: $timer-finished-color; - } -} diff --git a/client/src/common/components/errorBoundary/ErrorBoundary.module.scss b/client/src/common/components/errorBoundary/ErrorBoundary.module.scss index afde83608..71182baf6 100644 --- a/client/src/common/components/errorBoundary/ErrorBoundary.module.scss +++ b/client/src/common/components/errorBoundary/ErrorBoundary.module.scss @@ -1,4 +1,4 @@ -@use '../../../theme/main' as *; +@use '../../../theme/v2Styles' as *; .errorContainer { width: 100%; @@ -9,17 +9,17 @@ color: white; .error { - color: $ontime-pink; + color: $error-red; font-weight: 600; } .report { - text-decoration: underline $ontime-pink; + text-decoration: underline $error-red; cursor: pointer; } .report:hover { - color: $ontime-pink; + color: $error-red; } .report:active { diff --git a/client/src/common/components/myProgressBar/MyProgressBar.jsx b/client/src/common/components/myProgressBar/MyProgressBar.jsx deleted file mode 100644 index fd9141a78..000000000 --- a/client/src/common/components/myProgressBar/MyProgressBar.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import { clamp } from 'common/utils/math'; -import PropTypes from 'prop-types'; - -import styles from './MyProgressBar.module.scss'; - -export default function MyProgressBar(props) { - const { now, complete, showElapsed } = props; - - let percentComplete = showElapsed ? 0 : 100; - - if (now != null && complete != null) { - percentComplete = showElapsed - ? clamp(100 - (now * 100) / complete, 0, 100) - : clamp((now * 100) / complete, 0, 100); - } - - return ( -
-
-
- ); -} - -MyProgressBar.propTypes = { - now: PropTypes.number, - complete: PropTypes.number, - showElapsed: PropTypes.bool, -} diff --git a/client/src/common/components/myProgressBar/MyProgressBar.module.scss b/client/src/common/components/myProgressBar/MyProgressBar.module.scss deleted file mode 100644 index deef4b350..000000000 --- a/client/src/common/components/myProgressBar/MyProgressBar.module.scss +++ /dev/null @@ -1,24 +0,0 @@ -@use '../../../theme/main' as *; - -.progress, -.progressCountdown { - height: 2vh; - border-radius: 4px; -} - -.progress { - background-color: $bg-gray-900; -} - -.progressCountdown { - background-color: $ontime-pink; -} - -.progressBar { - width: 100%; - height: 2vh; - background-color: $title-white; - border-radius: 4px; - transition: 1s linear; - transition-property: width; -} diff --git a/client/src/common/components/navigation-menu/NavigationMenu.tsx b/client/src/common/components/navigation-menu/NavigationMenu.tsx index b74fcaebb..bb67c069f 100644 --- a/client/src/common/components/navigation-menu/NavigationMenu.tsx +++ b/client/src/common/components/navigation-menu/NavigationMenu.tsx @@ -1,4 +1,4 @@ -import { KeyboardEvent, useEffect, useState } from 'react'; +import { KeyboardEvent, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { Link, useLocation } from 'react-router-dom'; import { IoApps } from '@react-icons/all-files/io5/IoApps'; @@ -10,6 +10,7 @@ import { useAtom } from 'jotai'; import { navigatorConstants } from '../../../viewerConfig'; import { mirrorViewersAtom } from '../../atoms/ViewerSettings'; +import useClickOutside from '../../hooks/useClickOutside'; import useFullscreen from '../../hooks/useFullscreen'; import { useKeyDown } from '../../hooks/useKeyDown'; @@ -22,6 +23,8 @@ export default function NavigationMenu() { const [isMirrored, setMirrored] = useAtom(mirrorViewersAtom); const [showButton, setShowButton] = useState(false); const [showMenu, setShowMenu] = useState(false); + const menuRef = useRef(null); + useClickOutside(menuRef, () => setShowMenu(false)); const toggleMenu = () => setShowMenu((prev) => !prev); useKeyDown(toggleMenu, ' '); @@ -49,7 +52,7 @@ export default function NavigationMenu() { const handleMirror = () => setMirrored((prev) => !prev); return createPortal( -