feat: allow rotating viewer (#220)

* feat: allow viewer mirroring

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "1.8.5",
+  "version": "1.9.0",
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^2.3.2",

client/src/common/atoms/ViewerSettings.ts

@@ -0,0 +1,3 @@
+import { atomWithStorage } from 'jotai/utils';
+
+export const mirrorViewersAtom = atomWithStorage('ontime-viewers-mirrorViewers', false);

client/src/common/components/nav/NavLogo.jsx

@@ -4,10 +4,13 @@ import { IconButton } from '@chakra-ui/button';
 import { Image } from '@chakra-ui/react';
 import { IoContract } from '@react-icons/all-files/io5/IoContract';
 import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
+import { IoSync } from '@react-icons/all-files/io5/IoSync';
 import navlogo from 'assets/images/logos/LOGO-72.png';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useAtom } from 'jotai';
 import PropTypes from 'prop-types';
 
+import { mirrorViewersAtom } from '../../atoms/ViewerSettings';
 import useFullscreen from '../../hooks/useFullscreen';
 
 import navigatorConstants from './navigatorConstants';
@@ -26,6 +29,7 @@ export default function NavLogo(props) {
   const { isHidden } = props;
   const [showNav, setShowNav] = useState(false);
   const { isFullScreen, toggleFullScreen } = useFullscreen();
+  const [isMirrored, setMirrored] = useAtom(mirrorViewersAtom);
 
   const handleClick = useCallback(() => {
     setShowNav((prev) => !prev);
@@ -57,6 +61,8 @@ export default function NavLogo(props) {
     tabIndex: 0,
   };
 
+  console.log('debug', isMirrored)
+
   return (
     <motion.div
       initial={{ opacity: showNav ? 0.5 : baseOpacity }}
@@ -75,6 +81,12 @@ export default function NavLogo(props) {
               exit={{ opacity: 0, scaleX: 0 }}
               className={style.actions}
             >
+              <IconButton
+                aria-label='Mirror screen'
+                icon={<IoSync />}
+                onClick={() => setMirrored((prev) => !prev)}
+                {...navButtonStyle}
+              />
               <IconButton
                 aria-label='Toggle Fullscreen'
                 icon={isFullScreen ? <IoContract /> : <IoExpand />}

client/src/features/viewers/backstage/Backstage.jsx

@@ -5,9 +5,11 @@ import Paginator from 'common/components/paginator/Paginator';
 import TitleSide from 'common/components/title-side/TitleSide';
 import { formatDisplay } from 'common/utils/dateConfig';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useAtom } from 'jotai';
 import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
+import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { getEventsWithDelay } from '../../../common/utils/eventsManager';
 import { formatTime } from '../../../common/utils/time';
@@ -26,6 +28,7 @@ export default function Backstage(props) {
   const [filteredEvents, setFilteredEvents] = useState(null);
   const [pageNumber, setPageNumber] = useState(0);
   const [currentPage, setCurrentPage] = useState(0);
+  const [isMirrored] = useAtom(mirrorViewersAtom);
 
   // Set window title
   useEffect(() => {
@@ -58,7 +61,7 @@ export default function Backstage(props) {
   const clock = formatTime(time.clock, formatOptions);
 
   return (
-    <div className='backstage'>
+    <div className={`backstage ${isMirrored ? 'mirror' : ''}`}>
       <NavLogo />
 
       <div className='event-title'>{general.title}</div>

client/src/features/viewers/clock/Clock.tsx

@@ -1,13 +1,12 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { useAtom } from 'jotai';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
+import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
 import NavLogo from '../../../common/components/nav/NavLogo';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
-import {
+import { TimeManager, ViewSettings } from '../../../common/models/OntimeTypes';
-  TimeManager,
-  ViewSettings,
-} from '../../../common/models/OntimeTypes';
 import { OverridableOptions } from '../../../common/models/ViewTypes';
 import { formatTime } from '../../../common/utils/time';
 
@@ -27,6 +26,7 @@ export default function Clock(props: ClockProps) {
   const { time, viewSettings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [searchParams] = useSearchParams();
+  const [isMirrored] = useAtom(mirrorViewersAtom);
 
   useEffect(() => {
     document.title = 'ontime - Clock';
@@ -127,7 +127,7 @@ export default function Clock(props: ClockProps) {
 
   return (
     <div
-      className='clock-view'
+      className={`clock-view ${isMirrored ? 'mirror' : ''}`}
       style={{
         backgroundColor: userOptions.keyColour,
         color: userOptions.textColour,

client/src/features/viewers/countdown/Countdown.jsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
+import { useAtom } from 'jotai';
 import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
+import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
 import NavLogo from '../../../common/components/nav/NavLogo';
 import Empty from '../../../common/components/state/Empty';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
@@ -23,6 +25,7 @@ export default function Countdown(props) {
   const { backstageEvents, time, selectedId, viewSettings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [searchParams] = useSearchParams();
+  const [isMirrored] = useAtom(mirrorViewersAtom);
 
   const [follow, setFollow] = useState(null);
   const [runningTimer, setRunningTimer] = useState(0);
@@ -90,7 +93,7 @@ export default function Countdown(props) {
       : formatTime(follow.timeEnd + delay, formatOptions);
 
   return (
-    <div className='countdown'>
+    <div className={`countdown ${isMirrored ? 'mirror' : ''}`}>
       <NavLogo />
       {follow === null ? (
         <div className='event-select'>
@@ -139,7 +142,7 @@ export default function Countdown(props) {
           >
             {formatDisplay(
               isSelected ? runningTimer : runningTimer + millisToSeconds(delay),
-              isSelected || time.waiting
+              isSelected || time.waiting,
             )}
           </span>
           <div className='title'>{follow?.title || 'Untitled Event'}</div>

client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -1,7 +1,9 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { useAtom } from 'jotai';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
+import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
 import NavLogo from '../../../common/components/nav/NavLogo';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import {
@@ -24,6 +26,7 @@ export default function MinimalTimer(props: MinimalTimerProps) {
   const { pres, time, viewSettings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [searchParams] = useSearchParams();
+  const [isMirrored] = useAtom(mirrorViewersAtom);
 
   useEffect(() => {
     document.title = 'ontime - Minimal Timer';
@@ -131,9 +134,11 @@ export default function MinimalTimer(props: MinimalTimerProps) {
   const clean = timer.replace('/:/g', '');
   const showFinished = time.isNegative && !userOptions?.hideOvertime;
 
+  const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''}`;
+
   return (
     <div
-      className={showFinished ? 'minimal-timer minimal-timer--finished' : 'minimal-timer'}
+      className={showFinished ? `${baseClasses} minimal-timer--finished` : baseClasses}
       style={{
         backgroundColor: userOptions.keyColour,
         color: userOptions.textColour,

client/src/features/viewers/picture-in-picture/Pip.jsx

@@ -12,6 +12,8 @@ import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet
 import { formatTime } from '../../../common/utils/time';
 
 import './Pip.scss';
+import { useAtom } from 'jotai';
+import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
 
 const formatOptions = {
   showSeconds: true,
@@ -25,6 +27,7 @@ export default function Pip(props) {
   const [filteredEvents, setFilteredEvents] = useState(null);
   const [pageNumber, setPageNumber] = useState(0);
   const [currentPage, setCurrentPage] = useState(0);
+  const [isMirrored] = useAtom(mirrorViewersAtom);
 
   // Set window title
   useEffect(() => {
@@ -65,7 +68,7 @@ export default function Pip(props) {
   const clock = formatTime(time.clock, formatOptions);
 
   return (
-    <div className='pip'>
+    <div className={`pip ${isMirrored ? 'mirror' : ''}`}>
       <NavLogo />
 
       <div className='event-title'>{general.title}</div>

client/src/features/viewers/public/Public.jsx

@@ -4,9 +4,11 @@ import NavLogo from 'common/components/nav/NavLogo';
 import Paginator from 'common/components/paginator/Paginator';
 import TitleSide from 'common/components/title-side/TitleSide';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useAtom } from 'jotai';
 import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
+import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { formatTime } from '../../../common/utils/time';
 import { titleVariants } from '../common/animation';
@@ -23,6 +25,7 @@ export default function Public(props) {
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [pageNumber, setPageNumber] = useState(0);
   const [currentPage, setCurrentPage] = useState(0);
+  const [isMirrored] = useAtom(mirrorViewersAtom);
 
   // Set window title
   useEffect(() => {
@@ -40,7 +43,7 @@ export default function Public(props) {
   const clock = formatTime(time.clock, formatOptions);
 
   return (
-    <div className='public-screen'>
+    <div className={`public-screen ${isMirrored ? 'mirror' : ''}`}>
       <NavLogo />
 
       <div className='event-title'>{general.title}</div>

client/src/features/viewers/studio/StudioClock.jsx

@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react';
+import { useAtom } from 'jotai';
 import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
+import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
 import NavLogo from '../../../common/components/nav/NavLogo';
 import useFitText from '../../../common/hooks/useFitText';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
@@ -28,6 +30,7 @@ export default function StudioClock(props) {
   const { fontSize: titleFontSize, ref: titleRef } = useFitText({ maxFontSize: 500 });
 
   const [schedule, setSchedule] = useState([]);
+  const [isMirrored] = useAtom(mirrorViewersAtom);
 
   const activeIndicators = [...Array(12).keys()];
   const secondsIndicators = [...Array(60).keys()];
@@ -48,13 +51,13 @@ export default function StudioClock(props) {
       showEnd: false,
     });
     setSchedule(formatted);
-  }, [backstageEvents, nextId, selectedId] );
+  }, [backstageEvents, nextId, selectedId]);
 
   const clock = formatTime(time.clock, formatOptions);
   const [, , secondsNow] = stringFromMillis(time.clock).split(':');
 
   return (
-    <div className='studio-clock'>
+    <div className={`studio-clock ${isMirrored ? 'mirror' : ''}`}>
       <NavLogo />
       <div className='clock-container'>
         <div className='studio-timer'>{clock}</div>
@@ -65,7 +68,8 @@ export default function StudioClock(props) {
         >
           {title.titleNext}
         </div>
-        <div className={time.isNegative ? 'next-countdown' : 'next-countdown next-countdown--overtime'}>
+        <div
+          className={time.isNegative ? 'next-countdown' : 'next-countdown next-countdown--overtime'}>
           {selectedId != null && formatDisplay(time.running)}
         </div>
         <div className='clock-indicators'>

client/src/features/viewers/timer/Timer.jsx

@@ -5,9 +5,11 @@ import MyProgressBar from 'common/components/myProgressBar/MyProgressBar';
 import NavLogo from 'common/components/nav/NavLogo';
 import TitleCard from 'common/components/title-card/TitleCard';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useAtom } from 'jotai';
 import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
+import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { formatTime } from '../../../common/utils/time';
 
@@ -23,6 +25,7 @@ export default function Timer(props) {
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [elapsed, setElapsed] = useState(true);
   const [searchParams] = useSearchParams();
+  const [isMirrored] = useAtom(mirrorViewersAtom);
 
   useEffect(() => {
     document.title = 'ontime - Timer';
@@ -64,9 +67,10 @@ export default function Timer(props) {
       y: 500,
     },
   };
+  const baseClasses = `stage-timer ${isMirrored ? 'mirror' : ''}`;
 
   return (
-    <div className={time.finished ? 'stage-timer stage-timer--finished' : 'stage-timer'}>
+    <div className={time.finished ? `${baseClasses} stage-timer--finished` : baseClasses}>
       <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
         <div className='message'>{pres.text}</div>
       </div>

client/src/theme/_viewerCommon.scss

@@ -0,0 +1,3 @@
+.mirror {
+  transform: rotate(180deg);
+}

client/src/theme/_viewerDefs.scss

@@ -1,4 +1,5 @@
 @use 'main' as *;
+@use 'viewerCommon' as *;
 
 // General styling
 $accent-color: $ontime-pink; // --accent-color-override

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "1.8.5",
+  "version": "1.9.0",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",