Show streamTitle in header if set. Closes #2720

web/components/common/ContentHeader/ContentHeader.tsx

@@ -8,21 +8,13 @@ import styles from './ContentHeader.module.scss';
 
 export type ContentHeaderProps = {
   name: string;
-  title: string;
   summary: string;
   tags: string[];
   links: SocialLink[];
   logo: string;
 };
 
-export const ContentHeader: FC<ContentHeaderProps> = ({
+export const ContentHeader: FC<ContentHeaderProps> = ({ name, summary, logo, tags, links }) => (
-  name,
-  title,
-  summary,
-  logo,
-  tags,
-  links,
-}) => (
   <div className={styles.root}>
     <div className={styles.logoTitleSection}>
       <div className={styles.logo}>
@@ -31,7 +23,7 @@ export const ContentHeader: FC<ContentHeaderProps> = ({
       <div className={styles.titleSection}>
         <h2 className={cn(styles.title, styles.row, 'header-title')}>{name}</h2>
         <h3 className={cn(styles.subtitle, styles.row, 'header-subtitle')}>
-          <Linkify>{title || summary}</Linkify>
+          <Linkify>{summary}</Linkify>
         </h3>
         <div className={cn(styles.tagList, styles.row)}>
           {tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}

web/components/layouts/Main/Main.tsx

@@ -12,6 +12,7 @@ import {
   clientConfigStateAtom,
   fatalErrorStateAtom,
   appStateAtom,
+  serverStatusState,
 } from '../../stores/ClientConfigStore';
 import { Content } from '../../ui/Content/Content';
 import { Header } from '../../ui/Header/Header';
@@ -25,6 +26,7 @@ import styles from './Main.module.scss';
 import { PushNotificationServiceWorker } from '../../workers/PushNotificationServiceWorker/PushNotificationServiceWorker';
 import { AppStateOptions } from '../../stores/application-state';
 import { Noscript } from '../../ui/Noscript/Noscript';
+import { ServerStatus } from '../../../interfaces/server-status.model';
 
 const lockBodyStyle = `
 body {
@@ -46,7 +48,8 @@ const FatalErrorStateModal = dynamic(
 
 export const Main: FC = () => {
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
-  const { name, title, customStyles } = clientConfig;
+  const clientStatus = useRecoilValue<ServerStatus>(serverStatusState);
+  const { name, customStyles } = clientConfig;
   const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
   const fatalError = useRecoilValue<DisplayableError>(fatalErrorStateAtom);
   const appState = useRecoilValue<AppStateOptions>(appStateAtom);
@@ -54,12 +57,14 @@ export const Main: FC = () => {
   const layoutRef = useRef<HTMLDivElement>(null);
   const { chatDisabled } = clientConfig;
   const { videoAvailable } = appState;
+  const { online, streamTitle } = clientStatus;
 
   useEffect(() => {
     setupNoLinkReferrer(layoutRef.current);
   }, []);
 
   const isProduction = process.env.NODE_ENV === 'production';
+  const headerText = online ? streamTitle || name : name;
 
   return (
     <>
@@ -143,7 +148,7 @@ export const Main: FC = () => {
 
       <Layout ref={layoutRef} className={styles.layout}>
         <Header
-          name={title || name}
+          name={headerText}
           chatAvailable={isChatAvailable}
           chatDisabled={chatDisabled}
           online={videoAvailable}

web/components/ui/Content/Content.tsx

@@ -277,7 +277,6 @@ export const Content: FC = () => {
           {isMobile ? (
             <MobileContent
               name={name}
-              streamTitle={streamTitle}
               summary={summary}
               tags={tags}
               socialHandles={socialHandles}
@@ -298,7 +297,6 @@ export const Content: FC = () => {
           ) : (
             <DesktopContent
               name={name}
-              streamTitle={streamTitle}
               summary={summary}
               tags={tags}
               socialHandles={socialHandles}

web/components/ui/Content/DesktopContent.tsx

@@ -8,7 +8,6 @@ import { ContentHeader } from '../../common/ContentHeader/ContentHeader';
 
 export type DesktopContentProps = {
   name: string;
-  streamTitle: string;
   summary: string;
   tags: string[];
   socialHandles: SocialLink[];
@@ -35,7 +34,6 @@ const FollowerCollection = dynamic(
 
 export const DesktopContent: FC<DesktopContentProps> = ({
   name,
-  streamTitle,
   summary,
   tags,
   socialHandles,
@@ -65,7 +63,6 @@ export const DesktopContent: FC<DesktopContentProps> = ({
       <div className={styles.lowerHalf} id="skip-to-content">
         <ContentHeader
           name={name}
-          title={streamTitle}
           summary={summary}
           tags={tags}
           links={socialHandles}

web/components/ui/Content/MobileContent.tsx

@@ -12,7 +12,6 @@ import { ExternalAction } from '../../../interfaces/external-action';
 
 export type MobileContentProps = {
   name: string;
-  streamTitle: string;
   summary: string;
   tags: string[];
   socialHandles: SocialLink[];
@@ -56,7 +55,6 @@ const ChatContainer = dynamic(
 
 export const MobileContent: FC<MobileContentProps> = ({
   name,
-  streamTitle,
   summary,
   tags,
   socialHandles,
@@ -87,14 +85,7 @@ export const MobileContent: FC<MobileContentProps> = ({
 
   const aboutTabContent = (
     <>
-      <ContentHeader
+      <ContentHeader name={name} summary={summary} tags={tags} links={socialHandles} logo="/logo" />
-        name={name}
-        title={streamTitle}
-        summary={summary}
-        tags={tags}
-        links={socialHandles}
-        logo="/logo"
-      />
       <div className={styles.bottomPageContentContainer}>
         <CustomPageContent content={extraPageContent} />
       </div>

web/components/ui/Header/Header.tsx

@@ -22,12 +22,7 @@ export type HeaderComponentProps = {
   online: boolean;
 };
 
-export const Header: FC<HeaderComponentProps> = ({
+export const Header: FC<HeaderComponentProps> = ({ name, chatAvailable, chatDisabled, online }) => (
-  name = 'Your stream title',
-  chatAvailable,
-  chatDisabled,
-  online,
-}) => (
   <header className={cn([`${styles.header}`], 'global-header')}>
     {online ? (
       <Link href="#player" className={styles.skipLink}>

web/pages/embed/chat/readwrite/index.tsx

@@ -7,30 +7,36 @@ import {
   visibleChatMessagesSelector,
   clientConfigStateAtom,
   appStateAtom,
+  serverStatusState,
 } from '../../../../components/stores/ClientConfigStore';
 import Header from '../../../../components/ui/Header/Header';
 import { ClientConfig } from '../../../../interfaces/client-config.model';
 import { AppStateOptions } from '../../../../components/stores/application-state';
+import { ServerStatus } from '../../../../interfaces/server-status.model';
 
 export default function ReadWriteChatEmbed() {
   const currentUser = useRecoilValue(currentUserAtom);
   const messages = useRecoilValue<ChatMessage[]>(visibleChatMessagesSelector);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
+  const clientStatus = useRecoilValue<ServerStatus>(serverStatusState);
+
   const appState = useRecoilValue<AppStateOptions>(appStateAtom);
 
   const { name, chatDisabled } = clientConfig;
   const { videoAvailable } = appState;
+  const { streamTitle, online } = clientStatus;
 
   if (!currentUser) {
     return null;
   }
 
-  const { id, displayName, isModerator } = currentUser;
+  const headerText = online ? streamTitle || name : name;
 
+  const { id, displayName, isModerator } = currentUser;
   return (
     <div>
       <ClientConfigStore />
-      <Header name={name} chatAvailable chatDisabled={chatDisabled} online={videoAvailable} />
+      <Header name={headerText} chatAvailable chatDisabled={chatDisabled} online={videoAvailable} />
       <ChatContainer
         messages={messages}
         usernameToHighlight={displayName}