List upcoming sessions from DVR API.

src/components/MainMenu.js

@@ -7,14 +7,29 @@ import { Archive, History, OndemandVideo, Podcasts, Quiz, StackedBarChart } from
 import { Button } from "./Button";
 import { useFileContext } from "./FileLoaderContext";
 import { URLBox } from "./URLBox";
+import { SessionsPanel } from './SessionsPanel';
 
 const MenuButton = styled(Button)`
 
   background-color: black;
-  flex-basis: 21%;
+  color: white;
 
-  margin-bottom: 1em;
+  display: flex;
+  align-items: center;
 
+  & > svg {
+    max-width: 64px;
+    margin-right: 1.5em;
+    color: ${props => props.theme.site.highlightColor};
+  }
+
+  &:hover > svg {
+    color: black;
+  }
+
+  &:not(:first-child) {
+    margin-top: 0.5em;
+  }
 `;
 
 const MenuContainer = styled.div`
@@ -25,8 +40,16 @@ const MenuContainer = styled.div`
   min-width: 600px;
 
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  grid-gap: 3vw;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-gap: 1vw;
+
+  height: 70vh;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
 `;
 
 export const MainMenu = () => {
@@ -55,43 +78,45 @@ export const MainMenu = () => {
   return (
     <MenuContainer>
       <URLBox />
-      <MenuButton
-        onClick={() => history.push('/hosted')}
-      >
-        <Podcasts />
-        Hosted events
-      </MenuButton>
-      <MenuButton
-        onClick={() => history.push('/services')}
-      >
-        <History />
-        Recent sessions
-      </MenuButton>
-      <MenuButton
-        onClick={() => history.push('/archive')}
-      >
-        <Archive />
-        Replay archive
-      </MenuButton>
-      <MenuButton
-        onClick={() => history.push('faq')}
-      >
-        <Quiz />
-        FAQ
-      </MenuButton>
-      <MenuButton
-        onClick={loadReplay}
-      >
-        <OndemandVideo />
-        Load replay file
-      </MenuButton>
-      <MenuButton
-        onClick={loadAnalysis}
-      >
-        <StackedBarChart />
-        Load analysis file
-      </MenuButton>
-
+      <SessionsPanel />
+      <ButtonContainer>
+        <MenuButton
+          onClick={() => history.push('/hosted')}
+        >
+          <Podcasts />
+          Hosted events
+        </MenuButton>
+        <MenuButton
+          onClick={() => history.push('/services')}
+        >
+          <History />
+          Recent sessions
+        </MenuButton>
+        <MenuButton
+          onClick={() => history.push('/archive')}
+        >
+          <Archive />
+          Replay archive
+        </MenuButton>
+        <MenuButton
+          onClick={() => history.push('faq')}
+        >
+          <Quiz />
+          FAQ
+        </MenuButton>
+        <MenuButton
+          onClick={loadReplay}
+        >
+          <OndemandVideo />
+          Load replay file
+        </MenuButton>
+        <MenuButton
+          onClick={loadAnalysis}
+        >
+          <StackedBarChart />
+          Load analysis file
+        </MenuButton>
+      </ButtonContainer>
     </MenuContainer>
   );
 };

src/components/SessionsPanel.js

@@ -0,0 +1,157 @@
+import { dayjs } from '@timing71/common';
+import styled from "styled-components";
+import { PlayArrow } from "@styled-icons/material-sharp";
+import { Timer } from "@styled-icons/material-outlined";
+
+import { useUpcomingQuery } from '../modules/replay';
+import { raceday } from '../modules/archive';
+import { Logo } from './Logo';
+
+const Inner = styled.div`
+  background-color: #202020;
+  border: 1px solid ${props => props.theme.site.highlightColor};
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+`;
+
+const Header = styled.h3`
+  margin: 0;
+  padding: 0.5em;
+
+  border-bottom: 1px solid ${props => props.theme.site.highlightColor};
+  background-color: black;
+  border-radius: 4px 4px 0 0;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const SessionsList = styled.div`
+  flex: 1 0;
+  overflow-y: auto;
+  min-height: 0;
+`;
+
+const Loading = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+
+  color: ${ props => props.theme.site.highlightColor };
+`;
+
+const SessionInner = styled.a`
+  margin: 0.5em;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  grid-auto-flow: column;
+
+  background-color: ${ props => props.$live ? 'green' : 'black'};
+  color: white;
+  border: 2px solid black;
+  border-radius: 4px;
+
+  cursor: pointer;
+
+  text-decoration: none;
+  font-family: ${props => props.theme.site.headingFont};
+
+  & > svg {
+    grid-row: 1 / span 2;
+    align-self: center;
+    margin: 0 0.5em;
+    height: 32px;
+    color: ${ props => props.$live ? 'white' : '#808080' };
+  }
+
+  & h4.title {
+    padding: 0.5em;
+    margin: 0;
+  }
+
+  & span {
+    background-color: #202020;
+    padding: 0.5em;
+    border-bottom-left-radius: 1px;
+  }
+
+  &:hover {
+    background-color: ${ props => props.$live ? '#009900' : '#202020'};
+    color: white;
+
+    & span {
+      background-color: #303030;
+    }
+  }
+`;
+
+const Session = ({ session: { description, source, start, started } }) => {
+  return (
+    <SessionInner
+      $live={started}
+      href={source}
+      rel="noreferrer"
+      target="_blank"
+    >
+      <h4 className="title">
+        {description}
+      </h4>
+      <span>
+        {dayjs(start).format('D MMM YYYY HH:mm')}
+      </span>
+      { started ? <PlayArrow /> : <Timer /> }
+    </SessionInner>
+  );
+};
+
+export const SessionsPanel = () => {
+
+  const sessions = useUpcomingQuery();
+
+  return (
+    <Inner>
+      <Header>
+        Upcoming events
+        <a
+          href="https://raceday.watch/"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <img
+            alt='RaceDay.watch'
+            src={raceday}
+          />
+        </a>
+      </Header>
+      <SessionsList>
+        {
+          sessions.isLoading && (
+            <Loading>
+              <Logo
+                $spin
+                size='5vw'
+              />
+              Loading...
+            </Loading>
+          )
+        }
+        {
+          sessions.isSuccess && sessions.data.items.map(
+            s => (
+              <Session
+                key={s.sessionID}
+                session={s}
+              />
+            )
+          )
+        }
+      </SessionsList>
+    </Inner>
+  );
+};

src/components/URLBox.js

@@ -10,7 +10,7 @@ import { Autocomplete } from "./Autocomplete";
 
 const Wrapper = styled.div`
 
-  grid-column: 1 / span 4;
+  grid-column: 1 / span 2;
 
   background-color: black;
 

src/modules/archive/index.js

@@ -1 +1,2 @@
 export * from './components';
+export { default as raceday } from './img/raceday.png';

src/modules/replay/api.js

@@ -0,0 +1,24 @@
+import { useQuery } from "react-query";
+
+export const API_ROOT = process.env.DVR_API_ROOT || 'https://dvr.timing71.org';
+
+const fetchQuery = async (url) => {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error('Network response was not ok');
+  }
+  return response.json();
+};
+
+export const useUpcomingQuery = (limit=10) => {
+
+  let queryString = `${API_ROOT}/sessions?perPage=${limit}`;
+
+  return useQuery(
+    ['upcomingSessions', limit],
+    () => fetchQuery(queryString),
+    {
+      refetchInterval: 60000
+    }
+  );
+};

src/modules/replay/index.js

@@ -1,2 +1,3 @@
 export { PlaybackControls } from './components/PlaybackControls';
 export { ReplayProvider } from './components/ReplayProvider';
+export { useUpcomingQuery } from './api';