Include distribution list name on sent stories

stylesheets/components/StoryViewer.scss

@@ -56,13 +56,33 @@
   &__meta {
     bottom: 0;
     left: 50%;
+    min-width: 284px;
     padding: 0 16px;
     position: absolute;
     transform: translateX(-50%);
-    min-width: 284px;
     width: 56.25vh;
     z-index: $z-index-story-meta;
 
+    &__list {
+      @include font-body-2;
+      align-items: center;
+      display: flex;
+      color: $color-white-alpha-80;
+      margin-left: 8px;
+
+      &::before {
+        @include color-svg(
+          '../images/icons/v2/lock-solid-24.svg',
+          $color-white-alpha-80
+        );
+        content: '';
+        display: block;
+        height: 14px;
+        margin-right: 6px;
+        width: 14px;
+      }
+    }
+
     &--group-avatar {
       margin-left: -8px;
     }
@@ -82,6 +102,12 @@
     &__playback-bar {
       display: flex;
       justify-content: space-between;
+      user-select: none;
+
+      &__container {
+        align-items: center;
+        display: flex;
+      }
     }
 
     &__playback-controls {

ts/components/StoryViewer.stories.tsx

@@ -147,6 +147,7 @@ export const YourStory = Template.bind({});
   );
 
   YourStory.args = {
+    distributionListName: 'Close Friends',
     story: {
       ...storyView,
       sender: {

ts/components/StoryViewer.tsx

@@ -44,6 +44,7 @@ import { useEscapeHandling } from '../hooks/useEscapeHandling';
 export type PropsType = {
   currentIndex: number;
   deleteStoryForEveryone: (story: StoryViewType) => unknown;
+  distributionListName?: string;
   getPreferredBadge: PreferredBadgeSelectorType;
   group?: Pick<
     ConversationType,
@@ -104,6 +105,7 @@ enum Arrow {
 export const StoryViewer = ({
   currentIndex,
   deleteStoryForEveryone,
+  distributionListName,
   getPreferredBadge,
   group,
   hasActiveCall,
@@ -572,7 +574,7 @@ export const StoryViewer = ({
               </div>
             )}
             <div className="StoryViewer__meta__playback-bar">
-              <div>
+              <div className="StoryViewer__meta__playback-bar__container">
                 <Avatar
                   acceptedMessageRequest={acceptedMessageRequest}
                   avatarPath={avatarPath}
@@ -604,20 +606,27 @@ export const StoryViewer = ({
                     title={group.title}
                   />
                 )}
-                <div className="StoryViewer__meta--title">
+                <div>
-                  {(group &&
+                  <div className="StoryViewer__meta--title">
-                    i18n('Stories__from-to-group', {
+                    {(group &&
-                      name: isMe ? i18n('you') : title,
+                      i18n('Stories__from-to-group', {
-                      group: group.title,
+                        name: isMe ? i18n('you') : title,
-                    })) ||
+                        group: group.title,
-                    (isMe ? i18n('you') : title)}
+                      })) ||
+                      (isMe ? i18n('you') : title)}
+                  </div>
+                  <MessageTimestamp
+                    i18n={i18n}
+                    isRelativeTime
+                    module="StoryViewer__meta--timestamp"
+                    timestamp={timestamp}
+                  />
+                  {distributionListName && (
+                    <div className="StoryViewer__meta__list">
+                      {distributionListName}
+                    </div>
+                  )}
                 </div>
-                <MessageTimestamp
-                  i18n={i18n}
-                  isRelativeTime
-                  module="StoryViewer__meta--timestamp"
-                  timestamp={timestamp}
-                />
               </div>
               <div className="StoryViewer__meta__playback-controls">
                 <button

ts/state/selectors/stories.ts

@@ -11,6 +11,7 @@ import type {
   ConversationStoryType,
   MyStoryType,
   ReplyStateType,
+  StoryDistributionListWithMembersDataType,
   StorySendStateType,
   StoryViewType,
 } from '../../types/Stories';
@@ -463,12 +464,19 @@ export const getHasStoriesSelector = createSelector(
 export const getStoryByIdSelector = createSelector(
   getStoriesState,
   getUserConversationId,
-  ({ stories }, ourConversationId) =>
+  getDistributionListSelector,
+  ({ stories }, ourConversationId, distributionListSelector) =>
     (
       conversationSelector: GetConversationByIdType,
       messageId: string
     ):
-      | { conversationStory: ConversationStoryType; storyView: StoryViewType }
+      | {
+          conversationStory: ConversationStoryType;
+          distributionList:
+            | Pick<StoryDistributionListWithMembersDataType, 'id' | 'name'>
+            | undefined;
+          storyView: StoryViewType;
+        }
       | undefined => {
       const story = stories.find(item => item.messageId === messageId);
 
@@ -476,12 +484,25 @@ export const getStoryByIdSelector = createSelector(
         return;
       }
 
+      let distributionList:
+        | Pick<StoryDistributionListWithMembersDataType, 'id' | 'name'>
+        | undefined;
+      if (story.storyDistributionListId) {
+        distributionList =
+          story.storyDistributionListId === MY_STORIES_ID
+            ? { id: MY_STORIES_ID, name: MY_STORIES_ID }
+            : distributionListSelector(
+                story.storyDistributionListId.toLowerCase()
+              );
+      }
+
       return {
         conversationStory: getConversationStory(
           conversationSelector,
           ourConversationId,
           story
         ),
+        distributionList,
         storyView: getStoryView(conversationSelector, ourConversationId, story),
       };
     }

ts/state/smart/StoryViewer.tsx

@@ -67,7 +67,7 @@ export function SmartStoryViewer(): JSX.Element | null {
     storyInfo,
     'StoryViewer: selected story does not exist in stories'
   );
-  const { conversationStory, storyView } = storyInfo;
+  const { conversationStory, distributionList, storyView } = storyInfo;
 
   const recentEmojis = useRecentEmojis();
   const skinTone = useSelector<StateType, number>(getEmojiSkinTone);
@@ -84,6 +84,7 @@ export function SmartStoryViewer(): JSX.Element | null {
   return (
     <StoryViewer
       currentIndex={selectedStoryData.currentIndex}
+      distributionListName={distributionList?.name}
       getPreferredBadge={getPreferredBadge}
       group={conversationStory.group}
       hasActiveCall={hasActiveCall}