Merge pull request #516 from SStan-prog/scott-stanfel-patch-9

add stream links to homepage and schedule page

2024/src/components/RoomLegend.tsx

@@ -16,11 +16,25 @@ const Box = styled.div`
     gap: 1em;
   }
 `
+
+const RoomBoxContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1em;
+
+  ${({ theme }) => theme.breakpoints.mobile} {
+    align-items: flex-start;
+    gap: 0;
+  }
+`
+
 const RoomBox = styled(InlineLink)<{ disabled: boolean }>`
   flex: 1;
   display: flex;
   flex-direction: row;
   align-items: center;
+
   ${({ disabled }) =>
     disabled
       ? `
@@ -66,10 +80,32 @@ const SubText = styled.span`
   margin-top: -0.1rem;
   font-family: ${({ theme }) => theme.fonts.text};
 `
+
+const StreamLink = styled.a<{ track: Rooms }>`
+  display: block;
+  font-size: 1.6rem;
+  margin-top: 1rem;
+  text-align: left;
+  font-family: ${({ theme }) => theme.fonts.text};
+
+  color: ${({ theme }) => theme.colors.text};
+  text-decoration-color: ${({ track, theme }) =>
+    theme.colors[`room${track}Border`]};
+
+  &:hover {
+    color: ${({ track, theme }) => theme.colors[`room${track}Border`]};
+  }
+
+  @media print {
+    display: none;
+  }
+`
+
 const TextBox = styled.div`
   display: flex;
   flex-direction: column;
   justify-items: center;
+  align-items: center;
 `
 
 type RoomProps = {
@@ -78,22 +114,42 @@ type RoomProps = {
 }
 
 export const Room = ({ track, "selected-track": selectedTrack }: RoomProps) => {
+  function getTrackLink(track: Rooms) {
+    switch (track) {
+      case "A":
+        return "https://youtube.com/live/ew1zmA7y9q8"
+      case "B":
+        return "https://youtube.com/live/2BXwigWGjWQ"
+      case "C":
+        return "https://youtube.com/live/E3yTtaGr7V8"
+      case "D":
+        return "https://youtube.com/live/5Wt0r5vHOwQ"
+    }
+  }
+
   const { t } = useTranslation()
   return (
-    <RoomBox
-      to={
-        selectedTrack && selectedTrack === track
-          ? "/schedule"
-          : `/schedule/${track}`
-      }
-      disabled={!!selectedTrack && track != selectedTrack}
-    >
-      <Circle track={track} />
-      <TextBox>
-        <Text>{t(`room${track}`)}</Text>
-        <SubText>{t(`room${track}Sub`)}</SubText>
-      </TextBox>
-    </RoomBox>
+    <RoomBoxContainer>
+      <RoomBox
+        to={
+          selectedTrack && selectedTrack === track
+            ? "/schedule"
+            : `/schedule/${track}`
+        }
+        disabled={!!selectedTrack && track != selectedTrack}
+      >
+        <Circle track={track} />
+        <TextBox>
+          <Text>{t(`room${track}`)}</Text>
+          <SubText>{t(`room${track}Sub`)}</SubText>
+          <SubText></SubText>
+        </TextBox>
+      </RoomBox>
+
+      <StreamLink track={track} href={getTrackLink(track)} target="_blank">
+        {t("viewStream")}
+      </StreamLink>
+    </RoomBoxContainer>
   )
 }
 
@@ -106,3 +162,4 @@ export const RoomLegend = (props: RoomLegendProps) => (
     ))}
   </Box>
 )
+

2024/src/components/StreamLinks.tsx

@@ -0,0 +1,71 @@
+import React from "react"
+import { useTranslation } from "react-i18next"
+
+import styled from "styled-components"
+
+const Container = styled.div`
+  width: 100%;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px 20px;
+  justify-content: center;
+`
+
+const Button = styled.a`
+  display: block;
+  height: min-content;
+
+  color: #000000;
+  font-weight: bold;
+  font-family: ${({ theme }) => theme.fonts.text};
+  padding: 20px 30px 20px 30px;
+  text-decoration: none;
+  border: solid 2px;
+
+  transition: transform 0.2s ease-in-out;
+  &:hover {
+    transform: scale(1.05);
+  }
+`
+
+const ButtonA = styled(Button)`
+  background-color: ${({ theme }) => theme.colors.roomA};
+  border-color: ${({ theme }) => theme.colors.roomABorder};
+`
+const ButtonB = styled(Button)`
+  background-color: ${({ theme }) => theme.colors.roomB};
+  border-color: ${({ theme }) => theme.colors.roomBBorder};
+`
+
+const ButtonC = styled(Button)`
+  background-color: ${({ theme }) => theme.colors.roomC};
+  border-color: ${({ theme }) => theme.colors.roomCBorder};
+`
+
+const ButtonD = styled(Button)`
+  background-color: ${({ theme }) => theme.colors.roomD};
+  border-color: ${({ theme }) => theme.colors.roomDBorder};
+`
+
+export const StreamLinks = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Container>
+      <ButtonA href="https://youtube.com/live/ew1zmA7y9q8" target="_blank">
+        {t("streamLinks.trackA")}
+      </ButtonA>
+      <ButtonB href="https://youtube.com/live/2BXwigWGjWQ" target="_blank">
+        {t("streamLinks.trackB")}
+      </ButtonB>
+      <ButtonC href="https://youtube.com/live/E3yTtaGr7V8" target="_blank">
+        {t("streamLinks.trackC")}
+      </ButtonC>
+      <ButtonD href="https://youtube.com/live/5Wt0r5vHOwQ" target="_blank">
+        {t("streamLinks.trackD")}
+      </ButtonD>
+    </Container>
+  )
+}
+

2024/src/components/Title.tsx

@@ -33,5 +33,26 @@ const H2 = styled.h2`
 export function Title(props: Props) {
   const { children, heading = "h1" } = props
 
-  return heading === "h1" ? <H1>{children}</H1> : <H2>{children}</H2>
+  const processedChildren = React.Children.map(children, child => {
+    if (typeof child === "string") {
+      return child.split("<br/>").map((text, i, array) =>
+        i === array.length - 1 ? (
+          text
+        ) : (
+          <>
+            {text}
+            <br />
+          </>
+        ),
+      )
+    }
+    return child
+  })
+
+  return heading === "h1" ? (
+    <H1>{processedChildren}</H1>
+  ) : (
+    <H2>{processedChildren}</H2>
+  )
 }
+

2024/src/i18n/en.ts

@@ -61,6 +61,12 @@ export const en = {
     callForSponsors: "Call For Sponsors",
     becomeASponsor: "Become a sponsor",
     sponsors: "Sponsors",
+    "streamLinks.title": "View track live streams",
+    "streamLinks.trackA": "Track A",
+    "streamLinks.trackB": "Track B",
+    "streamLinks.trackC": "Track C",
+    "streamLinks.trackD": "Track D",
+    "viewStream": "View stream",
     "sponsor.premium": "Premium Sponsor",
     "sponsor.sponsor": "Sponsor",
     openMobileMenu: "Open Navigation Menu",

2024/src/i18n/ja.ts

@@ -47,6 +47,12 @@ export const ja: {
     moreDetails: "詳細",
     "specified-commercial-transactions-act": "特定商取引法に基づく表示",
     "code-of-conduct": "行動規範",
+    "streamLinks.title": "トラックの<br/>ライブ配信を見る",
+    "streamLinks.trackA": "トラックA",
+    "streamLinks.trackB": "トラックB",
+    "streamLinks.trackC": "トラックC",
+    "streamLinks.trackD": "トラックD",
+    "viewStream": "ライブ配信を見る",
     // @ts-expect-error It's not defined in en.ts
     Japanese: "日本語",
     English: "英語",

2024/src/pages/index.tsx

@@ -7,6 +7,7 @@ import { SEO } from "../components/Seo"
 import { Hero } from "../components/Hero"
 import { Title } from "../components/Title"
 import { SpeakerList } from "../components/SpeakerList"
+import { StreamLinks } from "../components/StreamLinks"
 import { SponsorList } from "../components/SponsorList"
 import { LinkButton } from "../components/LinkButton"
 import { Card as _Card } from "../components/Card"
@@ -206,6 +207,18 @@ export default function IndexPage() {
     Date.now() > new Date(site.siteMetadata.sponsorDeadline).getTime()
 
   const parts = [
+    {
+      subTitle: t("streamLinks.title"),
+      available: true,
+      render: () => (
+        <>
+          <div style={{ marginBottom: "1em" }}>
+            <StreamLinks />
+          </div>
+        </>
+      ),
+    },
+
     {
       subTitle: t("speakers"),
       available: featuredSpeakers.length,

2024/src/templates/schedule.tsx

@@ -459,6 +459,7 @@ export default function SchedulePage({
               <RoomLegendBox>
                 <RoomLegend selected-track={selectedTrack} />
               </RoomLegendBox>
+
               <Grid
                 starts-at={startsAt}
                 ends-at={endsAt}