style + ui changes

src/features/control/PlaybackControl.jsx

@@ -1,47 +1,123 @@
 import { Button } from '@chakra-ui/button';
 import style from './PlaybackControl.module.css';
 import Countdown from '../../common/components/countdown/Countdown';
+import { useState } from 'react';
+import { clamp } from '../../app/utils';
+import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
 
 export default function PlaybackControl() {
+  const [time, setTime] = useState(15);
+  const [roll, setRoll] = useState(false);
+
+  const incrementTimer = (amount = 1) => {
+    const t = clamp(time + amount * 60, 0, 3600);
+    setTime(t);
+  };
+
+  const defProps = {
+    colorScheme: 'blackAlpha',
+    variant: 'outline',
+  };
+
+  const smallSize = 50;
+  const midSize = 100;
+  const bigSize = 120;
+
   return (
     <div className={style.mainContainer}>
       <div className={style.timeContainer}>
         <div className={style.timer}>
-          <Countdown time={15} small />
+          <Countdown time={time} small />
         </div>
-        <Button width={50} colorScheme='blackAlpha' className={style.minu1}>
+        {/* <Button
+          width={smallSize}
+          {...defProps}
+          className={style.minu1}
+          disabled={roll}
+          onClick={() => incrementTimer(-1)}
+        >
           -1
         </Button>
-        <Button width={50} colorScheme='blackAlpha' className={style.plus1}>
+        <Button
+          width={smallSize}
+          {...defProps}
+          className={style.plus1}
+          disabled={roll}
+          onClick={() => incrementTimer()}
+        >
           +1
         </Button>
-        <Button width={50} colorScheme='blackAlpha' className={style.minu5}>
+        <Button
+          width={smallSize}
+          {...defProps}
+          className={style.minu5}
+          disabled={roll}
+          onClick={() => incrementTimer(5)}
+        >
           -5
         </Button>
-        <Button width={50} colorScheme='blackAlpha' className={style.plus5}>
+        <Button
+          width={smallSize}
+          {...defProps}
+          className={style.plus5}
+          disabled={roll}
+          onClick={() => incrementTimer(5)}
+        >
           +5
-        </Button>
+        </Button> */}
       </div>
 
       <div className={style.playbackContainer}>
-        <Button width={120} colorScheme='green' className={style.start}>
+        <Button
+          width={bigSize}
+          colorScheme='green'
+          className={style.start}
+          disabled={roll}
+        >
           Start
         </Button>
-        <Button width={120} colorScheme='orange' className={style.pause}>
+        <Button
+          width={bigSize}
+          colorScheme='orange'
+          className={style.pause}
+          disabled={roll}
+        >
           Pause
         </Button>
-        <Button width={120} colorScheme='yellow' className={style.reset}>
+        {/* <Button
+          width={bigSize}
+          colorScheme='yellow'
+          className={style.reset}
+          disabled={roll}
+        >
           Reset
-        </Button>
+        </Button> */}
       </div>
       <div className={style.trackContainer}>
-        <Button width={100} colorScheme='blackAlpha' className={style.prev}>
+        <Button
+          width={bigSize}
+          {...defProps}
+          leftIcon={<ArrowBackIcon />}
+          className={style.prev}
+          disabled={roll}
+        >
           Prev
         </Button>
-        <Button width={100} colorScheme='blackAlpha' className={style.next}>
+        <Button
+          width={bigSize}
+          {...defProps}
+          rightIcon={<ArrowForwardIcon />}
+          className={style.next}
+          disabled={roll}
+        >
           Next
         </Button>
-        <Button width={100} colorScheme='blackAlpha' className={style.reset}>
+        <Button
+          width={bigSize}
+          colorScheme='blue'
+          className={style.reset}
+          onClick={() => setRoll(!roll)}
+        >
           Roll
         </Button>
       </div>

src/features/editors/Editor.jsx

@@ -27,17 +27,17 @@ export default function Editor() {
 
   return (
     <Grid
-      templateRows='60% 40%'
-      templateColumns='repeat(3, 1fr)'
+      templateRows='1fr 1fr 1fr'
+      templateColumns='1fr 25vw 25vw 5vw'
       gap={5}
       className={styles.mainContainer}
     >
-      <GridItem rowSpan={2} colSpan={1}>
+      <GridItem rowSpan={3}>
         <Box className={styles.editor} borderRadius='0.5em'>
-          <Heading style={{ paddingBottom: '0.25em' }}>List Events</Heading>
+          <Heading style={{ paddingBottom: '0.25em' }}>Event List</Heading>
           <NumberedText
             number={1}
-            text={'Select event or click Add Event to create new'}
+            text={'Manage and select event to run'}
           />
           <div className={styles.cornerButtonContainer}>
             <Button
@@ -57,43 +57,37 @@ export default function Editor() {
         </Box>
       </GridItem>
 
-      <GridItem colStart={2} rowSpan={1} colSpan={1}>
-        <Box className={styles.editor} borderRadius='0.5em'>
-          <Heading style={{ paddingBottom: '0.25em' }}>Event Details</Heading>
-          <NumberedText number={2} text={'Edit event info'} />
-          <div className={styles.content}>
-            <EventForm formMode={formMode} setFormMode={setFormMode} />
-          </div>
-        </Box>
-      </GridItem>
-
-      <GridItem colStart={3} rowStart={1} rowSpan={1} colSpan={1}>
+      <GridItem colStart={2} rowStart={2} rowSpan={2} colSpan={2}>
         <Box className={styles.editor} borderRadius='0.5em' overflowX='auto'>
-          <Heading style={{ paddingBottom: '0.25em' }}>Screens</Heading>
-          <NumberedText number={3} text={'Preview layout'} />
+          <Heading style={{ paddingBottom: '0.25em' }}>Preview Displays</Heading>
+          <NumberedText number={4} text={'Realtime screen preview'} />
           <div className={styles.content}>
-            {/* <PreviewContainer data={selectedData} /> */}
+            <PreviewContainer />
           </div>
         </Box>
       </GridItem>
 
-      <GridItem colStart={2} rowStart={2} rowSpan={1} colSpan={1}>
+      <GridItem colStart={2} rowStart={1} rowSpan={1} colSpan={1}>
         <Box className={styles.editor} borderRadius='0.5em'>
-          <Heading style={{ paddingBottom: '0.25em' }}>Screen Messages</Heading>
-          <NumberedText number={3} text={'Show / Hide messages on screens'} />
+          <Heading style={{ paddingBottom: '0.25em' }}>Display Messages</Heading>
+          <NumberedText number={2} text={'Show realtime messages on separate screen types'} />
           <div className={styles.content}></div>
           <MessageForm />
         </Box>
       </GridItem>
 
-      <GridItem colStart={3} rowStart={2} rowSpan={1} colSpan={1}>
+      <GridItem colStart={3} rowStart={1}>
         <Box className={styles.editor} borderRadius='0.5em'>
           <Heading style={{ paddingBottom: '0.25em' }}>Time Control</Heading>
-          <NumberedText number={0} text={'Control Timer'} />
+          <NumberedText number={3} text={'Control Timer'} />
           <div className={styles.content}></div>
           <PlaybackControl />
         </Box>
       </GridItem>
+
+      <GridItem colStart={4} rowSpan={3}>
+        <Box className={styles.editor} borderRadius='0.5em'>S</Box>
+      </GridItem>
     </Grid>
   );
 }

src/features/editors/Editor.module.css

@@ -6,20 +6,27 @@
 
 .editor {
   height: 100%;
-  margin-top: 2.5vh;
+  margin-top: 1.5vh;
   background-color: #fcfcfa;
-  padding: 2em;
+  padding: 1em 1.5em;
 
   display: flex;
   flex-direction: column;
 }
 
 .content {
-  padding-top: 2em;
+  padding-top: 1.5em;
 }
 
-.buttonContainer {
-  padding-top: 2em;
+.cornerButtonContainer {
+  position: relative;
+  top: -4.5em;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.buttonContainer {
+  padding-bottom: 2em;
   display: flex;
   justify-content: flex-end;
 }

src/features/editors/list/EventList.jsx

@@ -3,10 +3,10 @@ import { useContext } from 'react';
 import { EventContext } from '../../../app/context/eventContext';
 import { EventListContext } from '../../../app/context/eventListContext';
 import EventListItem from './EventListItem';
-import { sortByDate } from './listUtils';
+import { sortByDate, sortByNumber } from './listUtils';
 
 export default function EventList(props) {
-  const [events, ] = useContext(EventListContext);
+  const [events] = useContext(EventListContext);
   const [event, setEvent] = useContext(EventContext);
 
   const handleSetSelected = (id) => {
@@ -21,6 +21,7 @@ export default function EventList(props) {
       <Thead>
         <Tr>
           <Th>Event Title</Th>
+          <Th>Event Subtitle</Th>
           <Th>Presenter Name</Th>
           <Th>Time Start</Th>
           <Th>Time End</Th>
@@ -28,7 +29,7 @@ export default function EventList(props) {
         </Tr>
       </Thead>
       <Tbody>
-        {sortByDate(events).map((e) => (
+        {sortByNumber(events).map((e) => (
           <EventListItem
             key={e.id}
             data={e}

src/features/editors/list/EventListItem.jsx

@@ -2,10 +2,11 @@ import { IconButton } from '@chakra-ui/button';
 import { Td, Tr } from '@chakra-ui/table';
 import { format } from 'date-fns';
 import { timeFormat } from '../../../common/dateConfig';
-import { ChevronRightIcon } from '@chakra-ui/icons';
+import { LockIcon, ChevronRightIcon } from '@chakra-ui/icons';
 
 export default function EventListItem(props) {
   const isSelected = props.selectedId === props.data.id;
+  console.log(props);
   return (
     <Tr
       style={
@@ -15,9 +16,24 @@ export default function EventListItem(props) {
       }
     >
       <Td>{props.data.title}</Td>
+      <Td>{props.data.subtitle}</Td>
       <Td>{props.data.presenter}</Td>
-      <Td>{format(props.data.timeStart, timeFormat)}</Td>
-      <Td>{format(props.data.timeEnd, timeFormat)}</Td>
+      <Td>
+        {props.data.timeStart && format(props.data.timeStart, timeFormat)}
+      </Td>
+      <Td>{props.data?.timeEnd && format(props.data?.timeEnd, timeFormat)}</Td>{' '}
+      <Td>{props.data?.timerDuration}</Td>
+      <Td>
+        <IconButton
+          colorScheme='teal'
+          variant={isSelected ? 'solid' : 'outline'}
+          onClick={() => props.setSelected(props.data.id)}
+          disabled={props.disabled}
+          size='sm'
+          aria-label='Select Item'
+          icon={<LockIcon />}
+        />
+      </Td>
       <Td>
         <IconButton
           colorScheme='teal'

src/features/editors/list/listUtils.js

@@ -4,3 +4,10 @@ export const sortByDate = (arr) => {
   };
   return arr.sort(sorter);
 };
+
+export const sortByNumber = (arr) => {
+  const sorter = (a, b) => {
+    return a.order - b.order;
+  };
+  return arr.sort(sorter);
+};

src/features/form/EventForm.jsx

@@ -12,6 +12,8 @@ import styles from './EventForm.module.css';
 import 'react-datepicker/dist/react-datepicker-cssmodules.css';
 import ReactDatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
+import { Wrap } from '@chakra-ui/layout';
+import { Flex } from '@chakra-ui/layout';
 
 const sampleInitialValues = {
   title: '',
@@ -103,16 +105,19 @@ export default function EventForm(props) {
               label='Event Title'
               placeholder='eg. Is the Internet a fad?'
             />
-            <ChakraInput
-              name='subtitle'
-              label='Event Subtitle'
-              placeholder='eg. After tea thoughts'
-            />
-            <ChakraInput
-              name='presenter'
-              label='Presenter Name'
-              placeholder='eg. Duran Duran'
-            />
+            <Flex direction='row'>
+              <ChakraInput
+                name='subtitle'
+                label='Event Subtitle'
+                placeholder='eg. After tea thoughts'
+              />
+              <ChakraInput
+                name='presenter'
+                label='Presenter Name'
+                placeholder='eg. Duran Duran'
+              />
+            </Flex>
+
             {/* <TimeInput name='timeStart' label='Scheduled Start' /> */}
             <ChakraNumberInput
               name='timerDuration'
@@ -123,7 +128,11 @@ export default function EventForm(props) {
               maxW={24}
             />
 
-            <DatePicker />
+            <Flex direction='row'>
+              <TimeInput name='timeStart' label='Scheduled Start' />
+              <TimeInput name='timeEnd' label='Scheduled End' />
+            </Flex>
+
             <div className={styles.buttons}>
               <Button
                 variant='outline'

src/features/viewers/PreviewContainer.jsx

@@ -6,24 +6,27 @@ export default function PreviewContainer() {
   return (
     <div className={styles.previewContainer}>
       <div className={styles.previewItem}>
-        <div className={styles.preview}>
-          <AspectRatio maxW='250' ratio={16/10}>
-            <iframe src='http://localhost:3000/'></iframe>
-          </AspectRatio>
-          {/* <DefaultPresenter data={props.data} /> */}
-        </div>
+        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
+          <iframe src='http://localhost:3000/'></iframe>
+        </AspectRatio>
         <div className={styles.label}>Default Presenter</div>
       </div>
       <div className={styles.previewItem}>
-        <div className={styles.preview}></div>
+        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
+          <iframe src='http://localhost:3000/'></iframe>
+        </AspectRatio>
         <div className={styles.label}>Audience</div>
       </div>
       <div className={styles.previewItem}>
-        <div className={styles.preview}></div>
+        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
+          <iframe src='http://localhost:3000/'></iframe>
+        </AspectRatio>
         <div className={styles.label}>Stage Manager</div>
       </div>
       <div className={styles.previewItem}>
-        <div className={styles.preview}></div>
+        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
+          <iframe src='http://localhost:3000/'></iframe>
+        </AspectRatio>
         <div className={styles.label}>Lower third</div>
       </div>
     </div>

src/features/viewers/PreviewContainer.module.css

@@ -3,19 +3,18 @@
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
+  align-content: center;
   gap: 1em;
 }
 
 .previewItem {
-  width: 47%;
+  width: 45%;
 }
 
 .preview {
-  aspect-ratio: 16 / 9;
-  border-color: #222;
-  background-color: #888;
+  margin: auto;
 }
 
 .label {
-  padding: 0.1em;
+  padding: 0.1em 4em;
 }

src/features/viewers/viewers.css

@@ -1,12 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
 
 .presenter {
-  font-size: 24px;
+  font-size: 1vh;
   height: 100%;
   color: #ffffff;
   display: flex;
   flex-direction: column;
-  padding: 1em;
+  padding-left: 4vh;
 }
 
 .presentationTitle {
@@ -20,7 +20,7 @@
 }
 
 .userMessage {
-  font-size: 10em;
+  font-size: 10vw;
   text-align: center;
 }
 
@@ -38,4 +38,4 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
-}
+}