Include distribution list name on sent stories

This commit is contained in:
Josh Perez 2022-09-22 14:56:49 -04:00 committed by GitHub
parent 94ef800e33
commit d911439f0f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 76 additions and 18 deletions

View file

@ -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 {

View file

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

View file

@ -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,6 +606,7 @@ export const StoryViewer = ({
title={group.title}
/>
)}
<div>
<div className="StoryViewer__meta--title">
{(group &&
i18n('Stories__from-to-group', {
@ -618,6 +621,12 @@ export const StoryViewer = ({
module="StoryViewer__meta--timestamp"
timestamp={timestamp}
/>
{distributionListName && (
<div className="StoryViewer__meta__list">
{distributionListName}
</div>
)}
</div>
</div>
<div className="StoryViewer__meta__playback-controls">
<button

View file

@ -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),
};
}

View file

@ -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}