Add drawer subtitle (ex view count for livestreams)

ui/component/livestreamLayout/index.js

@@ -3,15 +3,20 @@ import { selectClaimForUri, makeSelectTagInClaimOrChannelForUri, selectThumbnail
 import { selectSuperChatsForUri } from 'redux/selectors/comments';
 import LivestreamLayout from './view';
 import { DISABLE_COMMENTS_TAG } from 'constants/tags';
+import { selectViewersForId } from 'redux/selectors/livestream';
 
 const select = (state, props) => {
   const { uri } = props;
 
+  const claim = selectClaimForUri(state, uri);
+  const claimId = claim && claim.claim_id;
+
   return {
-    claim: selectClaimForUri(state, uri),
+    claim,
     thumbnail: selectThumbnailForUri(state, uri),
     chatDisabled: makeSelectTagInClaimOrChannelForUri(uri, DISABLE_COMMENTS_TAG)(state),
     superChats: selectSuperChatsForUri(state, uri),
+    activeViewers: claimId && selectViewersForId(state, claimId),
   };
 };
 

ui/component/livestreamLayout/view.jsx

@@ -35,6 +35,7 @@ type Props = {
   showScheduledInfo: boolean,
   uri: string,
   superChats: Array<Comment>,
+  activeViewers?: number,
 };
 
 export default function LivestreamLayout(props: Props) {
@@ -48,6 +49,7 @@ export default function LivestreamLayout(props: Props) {
     showScheduledInfo,
     uri,
     superChats,
+    activeViewers,
   } = props;
 
   const isMobile = useIsMobile();
@@ -114,8 +116,10 @@ export default function LivestreamLayout(props: Props) {
                   superChats={superChats}
                   chatViewMode={chatViewMode}
                   setChatViewMode={(mode) => setChatViewMode(mode)}
+                  activeViewers={activeViewers}
                 />
               }
+              hasSubtitle={activeViewers}
               actions={
                 <LivestreamMenu
                   noSuperchats={!superChats || superChats.length === 0}
@@ -145,20 +149,23 @@ export default function LivestreamLayout(props: Props) {
 }
 
 const ChatModeSelector = (chatSelectorProps: any) => {
-  const { superChats, chatViewMode, setChatViewMode } = chatSelectorProps;
+  const { superChats, chatViewMode, setChatViewMode, activeViewers } = chatSelectorProps;
   const { superChatsFiatAmount, superChatsLBCAmount } = getTipValues(superChats);
 
+  const titleProps = { chatViewMode, activeViewers };
+
   if (!superChats) {
-    return __('Live Chat');
+    return <ChatDrawerTitle {...titleProps} />;
   }
 
   return (
     <Menu>
       <MenuButton>
-        <span className="swipeable-drawer__title-menu">
-          {chatViewMode === VIEW_MODES.CHAT ? __('Live Chat') : __('HyperChats')}
+        <div className="swipeable-drawer__menu">
+          <ChatDrawerTitle {...titleProps} />
+
           <Icon icon={ICONS.DOWN} />
-        </span>
+        </div>
       </MenuButton>
 
       <MenuList className="menu__list--header">
@@ -176,3 +183,19 @@ const ChatModeSelector = (chatSelectorProps: any) => {
     </Menu>
   );
 };
+
+const ChatDrawerTitle = (titleProps: any) => {
+  const { chatViewMode, activeViewers } = titleProps;
+
+  return (
+    <div className="swipeable-drawer__title-menu">
+      <span className="swipeable-drawer__title">
+        {chatViewMode === VIEW_MODES.CHAT ? __('Live Chat') : __('HyperChats')}
+      </span>
+
+      {activeViewers && (
+        <span className="swipeable-drawer__subtitle">{__('%view_count% viewers', { view_count: activeViewers })}</span>
+      )}
+    </div>
+  );
+};

ui/component/swipeableDrawer/view.jsx

@@ -11,6 +11,7 @@ import { SwipeableDrawer as MUIDrawer } from '@mui/material';
 import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import Button from 'component/button';
+import classnames from 'classnames';
 
 const DRAWER_PULLER_HEIGHT = 42;
 
@@ -20,12 +21,13 @@ type Props = {
   theme: string,
   mobilePlayerDimensions?: { height: number },
   title: any,
+  hasSubtitle?: boolean,
   actions?: any,
   toggleDrawer: () => void,
 };
 
 export default function SwipeableDrawer(props: Props) {
-  const { mobilePlayerDimensions, title, children, open, theme, actions, toggleDrawer } = props;
+  const { mobilePlayerDimensions, title, hasSubtitle, children, open, theme, actions, toggleDrawer } = props;
 
   const [coverHeight, setCoverHeight] = React.useState();
 
@@ -69,7 +71,7 @@ export default function SwipeableDrawer(props: Props) {
         {open && (
           <div className="swipeable-drawer__header" style={{ top: -DRAWER_PULLER_HEIGHT }}>
             <Puller theme={theme} />
-            <HeaderContents title={title} actions={actions} toggleDrawer={toggleDrawer} />
+            <HeaderContents title={title} hasSubtitle={hasSubtitle} actions={actions} toggleDrawer={toggleDrawer} />
           </div>
         )}
 
@@ -122,15 +124,20 @@ const Puller = (pullerProps: PullerProps) => {
 
 type HeaderProps = {
   title: any,
+  hasSubtitle?: boolean,
   actions?: any,
   toggleDrawer: () => void,
 };
 
 const HeaderContents = (headerProps: HeaderProps) => {
-  const { title, actions, toggleDrawer } = headerProps;
+  const { title, hasSubtitle, actions, toggleDrawer } = headerProps;
 
   return (
-    <div className="swipeable-drawer__header-content">
+    <div
+      className={classnames('swipeable-drawer__header-content', {
+        'swipeable-drawer__header--with-subtitle': hasSubtitle,
+      })}
+    >
       {title}
 
       <div className="swipeable-drawer__header-actions">

ui/scss/component/_swipeable-drawer.scss

@@ -10,7 +10,8 @@
     right: 2px !important;
   }
 
-  span {
+  span,
+  svg {
     color: var(--color-text);
   }
 }
@@ -32,7 +33,11 @@
   font-size: var(--font-small);
 }
 
-.swipeable-drawer__title-menu {
+.swipeable-drawer__header--with-subtitle {
+  padding: var(--spacing-xxs);
+}
+
+.swipeable-drawer__menu {
   display: flex;
   align-items: center;
 
@@ -41,6 +46,21 @@
   }
 }
 
+.swipeable-drawer__title-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  .swipeable-drawer__title {
+    font-size: var(--font-xsmall);
+  }
+
+  .swipeable-drawer__subtitle {
+    font-size: var(--font-xxsmall);
+    color: var(--color-text-subtitle);
+  }
+}
+
 .swipeable-drawer__header-actions {
   display: flex;