mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Adds debugging information to stories

Browse source
This commit is contained in:
Josh Perez 2022-07-25 14:55:44 -04:00 committed by GitHub
parent badf9d7dda
commit 06476de6c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 1089 additions and 530 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
_locales/en/messages.json
View file

@ -7385,6 +7385,30 @@
"message": "Unmute",
"description": "Aria label for unmuting stories"
},
"StoryDetailsModal__sent-time": {
"message": "Sent $time$",
"description": "Sent timestamp",
"placeholders": {
"time": {
"content": "$1",
"example": "Today 5:33pm"
}
}
},
"StoryDetailsModal__file-size": {
"message": "File size $size$",
"description": "File size description",
"placeholders": {
"size": {
"content": "$1",
"example": "100kb"
}
}
},
"StoryDetailsModal__copy-timestamp": {
"message": "Copy timestamp",
"description": "Context menu item to help debugging"
},
"StoryViewsNRepliesModal__no-replies": {
"message": "No replies yet",
"description": "Placeholder text for when there are no replies"
@ -7421,6 +7445,14 @@
"message": "Go to chat",
"description": "Label for menu item to go to conversation"
},
"StoryListItem__delete": {
"message": "Delete",
"description": "Label for menu item to delete a story"
},
"StoryListItem__info": {
"message": "Info",
"description": "Label for menu item to get a story's information"
},
"StoryListItem__hide-modal--body": {
"message": "Hide story? New story updates from $name$ won’t appear at the top of the stories list anymore.",
"description": "Body for the confirmation dialog for hiding a story"

1
images/icons/v2/copy-outline-24.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m15.95 19.5c-.1179.6977-.4787 1.3312-1.0185 1.7887s-1.2239.7094-1.9315.7113h-7c-.79565 0-1.55871-.3161-2.12132-.8787s-.87868-1.3257-.87868-2.1213v-10c0-.79565.31607-1.55871.87868-2.12132s1.32567-.87868 2.12132-.87868h.5v1.5h-.5c-.39782 0-.77936.15804-1.06066.43934s-.43934.66284-.43934 1.06066v10c0 .3978.15804.7794.43934 1.0607s.66284.4393 1.06066.4393h7c.3091-.0013.6103-.098.8623-.277.2521-.179.4427-.4315.5457-.723zm2.05-16h-7c-.3978 0-.7794.15804-1.06066.43934-.2813.2813-.43934.66284-.43934 1.06066v10c0 .3978.15804.7794.43934 1.0607.28126.2813.66286.4393 1.06066.4393h7c.3978 0 .7794-.158 1.0607-.4393s.4393-.6629.4393-1.0607v-10c0-.39782-.158-.77936-.4393-1.06066s-.6629-.43934-1.0607-.43934zm0-1.5c.7956 0 1.5587.31607 2.1213.87868s.8787 1.32567.8787 2.12132v10c0 .7956-.3161 1.5587-.8787 2.1213s-1.3257.8787-2.1213.8787h-7c-.7956 0-1.55871-.3161-2.12132-.8787s-.87868-1.3257-.87868-2.1213v-10c0-.79565.31607-1.55871.87868-2.12132s1.32572-.87868 2.12132-.87868z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

44
stylesheets/components/ContextMenu.scss
View file

@ -20,50 +20,6 @@
&__button {
@include button-reset();
align-items: center;
border-radius: 16px;
display: flex;
height: 32px;
justify-content: center;
opacity: 0.5;
width: 32px;
&:focus,
&:hover {
opacity: 1;
}
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v2/collapse-down-20.svg',
$color-black
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/collapse-down-20.svg',
$color-white
);
}
content: '';
display: block;
flex-shrink: 0;
height: 24px;
width: 24px;
}
&--active {
opacity: 1;
@include light-theme() {
background-color: $color-gray-05;
}
@include dark-theme() {
background-color: $color-gray-75;
}
}
}
&__option {

52
stylesheets/components/HueSlider.scss
View file

@ -1,30 +1,34 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.HueSlider.Slider {
background-image: linear-gradient(
90deg,
hsl(0, 0%, 0%),
hsl(0, 100%, 50%),
hsl(45, 100%, 50%),
hsl(90, 100%, 50%),
hsl(135, 100%, 50%),
hsl(180, 100%, 50%),
hsl(225, 100%, 50%),
hsl(270, 100%, 50%),
hsl(315, 100%, 50%),
hsl(0, 0%, 100%)
);
border-radius: 4px;
height: 8px;
margin-left: 7px;
width: 280px;
.HueSlider {
&.Slider {
background-image: linear-gradient(
90deg,
hsl(0, 0%, 0%),
hsl(0, 100%, 50%),
hsl(45, 100%, 50%),
hsl(90, 100%, 50%),
hsl(135, 100%, 50%),
hsl(180, 100%, 50%),
hsl(225, 100%, 50%),
hsl(270, 100%, 50%),
hsl(315, 100%, 50%),
hsl(0, 0%, 100%)
);
border-radius: 4px;
height: 8px;
margin-left: 7px;
width: 280px;
}
&__handle.Slider__handle {
border: 7px solid $color-white;
margin-top: -7px;
margin-left: -11px;
height: 22px;
width: 22px;
&__handle {
&.Slider__handle {
border: 7px solid $color-white;
margin-top: -7px;
margin-left: -11px;
height: 22px;
width: 22px;
}
}
}

22
stylesheets/components/MediaEditor.scss
View file

@ -152,7 +152,8 @@
margin-bottom: 22px;
padding: 14px 12px;
&__tool {
&__tool,
&__tool__button {
margin-right: 14px;
}
@ -170,6 +171,7 @@
}
@include button-reset;
display: flex;
margin: 0 8px;
padding: 8px;
@ -179,31 +181,31 @@
padding: 0 6px;
}
&--draw-pen {
&--draw-pen__button {
@include icon('pen-20.svg');
}
&--draw-highlighter {
&--draw-highlighter__button {
@include icon('pen-highlighter-20.svg');
}
&--width-thin {
&--width-thin__button {
@include icon('pen-light-20.svg');
}
&--width-regular {
&--width-regular__button {
@include icon('pen-regular-20.svg');
}
&--width-medium {
&--width-medium__button {
@include icon('pen-medium-20.svg');
}
&--width-heavy {
&--width-heavy__button {
@include icon('pen-heavy-20.svg');
}
&--text-regular {
&--text-regular__button {
@include icon('text-regular-20.svg');
}
&--text-highlight {
&--text-highlight__button {
@include icon('text-highlight-20.svg');
}
&--text-outline {
&--text-outline__button {
@include icon('text-outline-20.svg');
}
&--rotate {

3
stylesheets/components/MessageDetail.scss
View file

@ -28,6 +28,9 @@
min-width: 72px;
}
.module-message-detail__unix-timestamp-menu__button {
}
.module-message-detail__unix-timestamp {
@include light-theme {
color: $color-gray-05;

3
stylesheets/components/MyStories.scss
View file

@ -56,7 +56,7 @@
}
}
&__more {
&__more__button {
align-items: center;
background: $color-gray-65;
border-radius: 100%;
@ -64,7 +64,6 @@
height: 28px;
justify-content: center;
margin-left: 16px;
opacity: 1;
width: 28px;
&::after {

3
stylesheets/components/Stories.scss
View file

@ -21,7 +21,8 @@
width: 380px;
padding-top: calc(14px + var(--title-bar-drag-area-height));
&__settings {
&__settings__button {
margin-left: 24px;
opacity: 1;
position: absolute;
right: 12px;

18
stylesheets/components/StoryCreator.scss
View file

@ -143,21 +143,17 @@
margin-bottom: 22px;
padding: 14px 12px;
&__tool {
&__tool,
&__tool__button {
margin-right: 14px;
}
&__button {
@mixin icon($icon) {
@include svg($icon);
opacity: 1;
height: 20px;
width: 20px;
border-radius: 0;
&::after {
display: none;
}
}
@include button-reset;
@ -173,19 +169,19 @@
&--bg-none {
@include icon('text-effect-off-24.svg');
}
&--font-regular {
&--font-regular__button {
@include icon('font-regular.svg');
}
&--font-bold {
&--font-bold__button {
@include icon('font-bold.svg');
}
&--font-serif {
&--font-serif__button {
@include icon('font-serif.svg');
}
&--font-script {
&--font-script__button {
@include icon('font-script.svg');
}
&--font-condensed {
&--font-condensed__button {
@include icon('font-condensed.svg');
}
}

79
stylesheets/components/StoryDetailsModal.scss Normal file
View file

@ -0,0 +1,79 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.StoryDetailsModal {
min-width: 320px;
overflow: hidden;
&__overlay-container {
align-items: flex-end;
justify-content: flex-end;
}
&__debugger__button {
color: $color-gray-25;
display: block;
font-weight: 600;
height: auto;
width: auto;
&__text {
font-weight: normal;
}
}
&__copy-icon {
@include dark-theme {
@include color-svg(
'../images/icons/v2/copy-outline-24.svg',
$color-white
);
}
@include light-theme {
@include color-svg(
'../images/icons/v2/copy-outline-24.svg',
$color-black
);
}
}
&__contact-container {
border-top: 1px solid $color-gray-75;
}
&__contact-group__header {
@include font-body-1-bold;
align-items: center;
display: flex;
justify-content: space-between;
margin-top: 24px;
padding: 10px 0;
user-select: none;
&:first-child {
margin-top: 0;
}
}
&__contact {
margin-bottom: 8px;
padding: 8px 0;
display: flex;
flex-direction: row;
align-items: center;
&__text {
@include font-body-1;
flex-grow: 1;
margin-left: 10px;
}
&:last-child {
margin-bottom: 0;
}
}
&__status-timestamp {
margin-left: 6px;
}
}

42
stylesheets/components/StoryListItem.scss
View file

@ -2,24 +2,26 @@
// SPDX-License-Identifier: AGPL-3.0-only
.StoryListItem {
@include button-reset;
align-items: center;
border-radius: 10px;
display: flex;
height: 96px;
padding: 0 10px;
width: 100%;
&__button {
@include button-reset;
align-items: center;
border-radius: 10px;
display: flex;
height: 96px;
padding: 0 10px;
width: 100%;
@include keyboard-mode {
&:focus {
@include keyboard-mode {
&:focus {
background: $color-gray-65;
}
}
&:hover {
background: $color-gray-65;
}
}
&:hover {
background: $color-gray-65;
}
&__info {
display: flex;
flex: 1;
@ -107,8 +109,22 @@
@include color-svg('../images/icons/v2/open-24.svg', $color-white);
}
&--delete {
@include color-svg(
'../images/icons/v2/trash-outline-24.svg',
$color-white
);
}
&--hide {
@include color-svg('../images/icons/v2/x-24.svg', $color-white);
}
&--info {
@include color-svg(
'../images/icons/v2/info-outline-24.svg',
$color-white
);
}
}
}

19
stylesheets/components/StoryViewer.scss
View file

@ -146,16 +146,23 @@
}
}
&__more {
@include button-reset;
&__more__button {
display: flex;
justify-content: center;
align-items: center;
height: 24px;
width: 24px;
@include color-svg('../images/icons/v2/more-horiz-24.svg', $color-white);
&::after {
@include color-svg('../images/icons/v2/more-horiz-24.svg', $color-white);
content: '';
height: 20px;
width: 20px;
@include keyboard-mode {
&:focus {
background-color: $color-black;
@include keyboard-mode {
&:focus {
background-color: $color-black;
}
}
}
}

27
stylesheets/components/StoryViewsNRepliesModal.scss
View file

@ -180,6 +180,33 @@
width: 40px;
}
}
&__debugger__button {
color: $color-gray-25;
display: block;
font-weight: 600;
height: auto;
opacity: 1;
width: auto;
&--active {
@include dark-theme {
background: inherit;
}
}
&::after {
display: none;
}
&__text {
font-weight: normal;
}
}
&__copy-icon {
@include color-svg('../images/icons/v2/copy-outline-24.svg', $color-white);
}
}
.Tabs.StoryViewsNRepliesModal__tabs {

3
stylesheets/manifest.scss
View file

@ -108,12 +108,13 @@
@import './components/StagedLinkPreview.scss';
@import './components/Stories.scss';
@import './components/StoryCreator.scss';
@import './components/StoryDetailsModal.scss';
@import './components/StoryImage.scss';
@import './components/StoryListItem.scss';
@import './components/StoryReplyQuote.scss';
@import './components/StoriesSettingsModal.scss';
@import './components/StoryViewsNRepliesModal.scss';
@import './components/StoryViewer.scss';
@import './components/StoryViewsNRepliesModal.scss';
@import './components/SystemMessage.scss';
@import './components/Tabs.scss';
@import './components/TextAttachment.scss';

242
ts/components/ContextMenu.tsx
View file

@ -1,7 +1,7 @@
// Copyright 2018-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { CSSProperties, KeyboardEvent } from 'react';
import type { KeyboardEvent, ReactNode } from 'react';
import type { Options } from '@popperjs/core';
import FocusTrap from 'focus-trap-react';
import React, { useEffect, useState } from 'react';
@ -11,9 +11,10 @@ import { noop } from 'lodash';
import type { Theme } from '../util/theme';
import type { LocalizerType } from '../types/Util';
import { getClassNamesFor } from '../util/getClassNamesFor';
import { themeClassName } from '../util/theme';
type OptionType<T> = {
export type ContextMenuOptionType<T> = {
readonly description?: string;
readonly icon?: string;
readonly label: string;
@ -21,47 +22,53 @@ type OptionType<T> = {
readonly value?: T;
};
export type ContextMenuPropsType<T> = {
readonly focusedIndex?: number;
readonly isMenuShowing: boolean;
readonly menuOptions: ReadonlyArray<OptionType<T>>;
readonly onClose: () => unknown;
export type PropsType<T> = {
readonly children?: ReactNode;
readonly i18n: LocalizerType;
readonly menuOptions: ReadonlyArray<ContextMenuOptionType<T>>;
readonly moduleClassName?: string;
readonly onClick?: () => unknown;
readonly onMenuShowingChanged?: (value: boolean) => unknown;
readonly popperOptions?: Pick<Options, 'placement' | 'strategy'>;
readonly referenceElement: HTMLElement | null;
readonly theme?: Theme;
readonly title?: string;
readonly value?: T;
};
export type PropsType<T> = {
readonly buttonClassName?: string;
readonly buttonStyle?: CSSProperties;
readonly i18n: LocalizerType;
} & Pick<
ContextMenuPropsType<T>,
'menuOptions' | 'popperOptions' | 'theme' | 'title' | 'value'
>;
export function ContextMenuPopper<T>({
export function ContextMenu<T>({
children,
i18n,
menuOptions,
focusedIndex,
isMenuShowing,
moduleClassName,
onClick,
onMenuShowingChanged,
popperOptions,
onClose,
referenceElement,
title,
theme,
title,
value,
}: ContextMenuPropsType<T>): JSX.Element | null {
}: PropsType<T>): JSX.Element {
const [isMenuShowing, setIsMenuShowing] = useState<boolean>(false);
const [focusedIndex, setFocusedIndex] = useState<number | undefined>(
undefined
);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
null
);
const [referenceElement, setReferenceElement] =
useState<HTMLButtonElement | null>(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: 'top-start',
strategy: 'fixed',
...popperOptions,
});
useEffect(() => {
if (onMenuShowingChanged) {
onMenuShowingChanged(isMenuShowing);
}
}, [isMenuShowing, onMenuShowingChanged]);
useEffect(() => {
if (!isMenuShowing) {
return noop;
@ -69,7 +76,7 @@ export function ContextMenuPopper<T>({
const handleOutsideClick = (event: MouseEvent) => {
if (!referenceElement?.contains(event.target as Node)) {
onClose();
setIsMenuShowing(false);
event.stopPropagation();
event.preventDefault();
}
@ -79,92 +86,10 @@ export function ContextMenuPopper<T>({
return () => {
document.removeEventListener('click', handleOutsideClick);
};
}, [isMenuShowing, onClose, referenceElement]);
if (!isMenuShowing) {
return null;
}
return (
<FocusTrap
focusTrapOptions={{
allowOutsideClick: true,
}}
>
<div className={theme ? themeClassName(theme) : undefined}>
<div
className={classNames('ContextMenu__popper', {
'ContextMenu__popper--single-item': menuOptions.length === 1,
})}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
{title && <div className="ContextMenu__title">{title}</div>}
{menuOptions.map((option, index) => (
<button
aria-label={option.label}
className={classNames({
ContextMenu__option: true,
'ContextMenu__option--focused': focusedIndex === index,
})}
key={option.label}
type="button"
onClick={() => {
option.onClick(option.value);
onClose();
}}
>
<div className="ContextMenu__option--container">
{option.icon && (
<div
className={classNames(
'ContextMenu__option--icon',
option.icon
)}
/>
)}
<div>
<div className="ContextMenu__option--title">
{option.label}
</div>
{option.description && (
<div className="ContextMenu__option--description">
{option.description}
</div>
)}
</div>
</div>
{typeof value !== 'undefined' &&
typeof option.value !== 'undefined' &&
value === option.value ? (
<div className="ContextMenu__option--selected" />
) : null}
</button>
))}
</div>
</div>
</FocusTrap>
);
}
export function ContextMenu<T>({
buttonClassName,
buttonStyle,
i18n,
menuOptions,
popperOptions,
theme,
title,
value,
}: PropsType<T>): JSX.Element {
const [menuShowing, setMenuShowing] = useState<boolean>(false);
const [focusedIndex, setFocusedIndex] = useState<number | undefined>(
undefined
);
}, [isMenuShowing, referenceElement]);
const handleKeyDown = (ev: KeyboardEvent) => {
if (!menuShowing) {
if (!isMenuShowing) {
if (ev.key === 'Enter') {
setFocusedIndex(0);
}
@ -194,46 +119,101 @@ export function ContextMenu<T>({
const focusedOption = menuOptions[focusedIndex];
focusedOption.onClick(focusedOption.value);
}
setMenuShowing(false);
setIsMenuShowing(false);
ev.stopPropagation();
ev.preventDefault();
}
};
const handleClick = (ev: KeyboardEvent | React.MouseEvent) => {
setMenuShowing(true);
setIsMenuShowing(true);
ev.stopPropagation();
ev.preventDefault();
};
const [referenceElement, setReferenceElement] =
useState<HTMLButtonElement | null>(null);
const getClassName = getClassNamesFor('ContextMenu', moduleClassName);
return (
<div className={theme ? themeClassName(theme) : undefined}>
<button
aria-label={i18n('ContextMenu--button')}
className={classNames(buttonClassName, {
ContextMenu__button: true,
'ContextMenu__button--active': menuShowing,
})}
onClick={handleClick}
className={classNames(
getClassName('__button'),
isMenuShowing ? getClassName('__button--active') : undefined
)}
onClick={onClick || handleClick}
onContextMenu={handleClick}
onKeyDown={handleKeyDown}
ref={setReferenceElement}
style={buttonStyle}
type="button"
/>
{menuShowing && (
<ContextMenuPopper
focusedIndex={focusedIndex}
isMenuShowing={menuShowing}
menuOptions={menuOptions}
onClose={() => setMenuShowing(false)}
popperOptions={popperOptions}
referenceElement={referenceElement}
title={title}
value={value}
/>
>
{children}
</button>
{isMenuShowing && (
<FocusTrap
focusTrapOptions={{
allowOutsideClick: true,
}}
>
<div className={theme ? themeClassName(theme) : undefined}>
<div
className={classNames(
getClassName('__popper'),
menuOptions.length === 1
? getClassName('__popper--single-item')
: undefined
)}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
{title && <div className={getClassName('__title')}>{title}</div>}
{menuOptions.map((option, index) => (
<button
aria-label={option.label}
className={classNames(
getClassName('__option'),
focusedIndex === index
? getClassName('__option--focused')
: undefined
)}
key={option.label}
type="button"
onClick={() => {
option.onClick(option.value);
setIsMenuShowing(false);
}}
>
<div className={getClassName('__option--container')}>
{option.icon && (
<div
className={classNames(
getClassName('__option--icon'),
option.icon
)}
/>
)}
<div>
<div className={getClassName('__option--title')}>
{option.label}
</div>
{option.description && (
<div className={getClassName('__option--description')}>
{option.description}
</div>
)}
</div>
</div>
{typeof value !== 'undefined' &&
typeof option.value !== 'undefined' &&
value === option.value ? (
<div className={getClassName('__option--selected')} />
) : null}
</button>
))}
</div>
</div>
</FocusTrap>
)}
</div>
);

46
ts/components/MediaEditor.tsx
View file

@ -569,14 +569,6 @@ export const MediaEditor = ({
value={sliderValue}
/>
<ContextMenu
buttonClassName={classNames('MediaEditor__tools__tool', {
'MediaEditor__tools__button--text-regular':
textStyle === TextStyle.Regular,
'MediaEditor__tools__button--text-highlight':
textStyle === TextStyle.Highlight,
'MediaEditor__tools__button--text-outline':
textStyle === TextStyle.Outline,
})}
i18n={i18n}
menuOptions={[
{
@ -598,6 +590,14 @@ export const MediaEditor = ({
value: TextStyle.Outline,
},
]}
moduleClassName={classNames('MediaEditor__tools__tool', {
'MediaEditor__tools__button--text-regular':
textStyle === TextStyle.Regular,
'MediaEditor__tools__button--text-highlight':
textStyle === TextStyle.Highlight,
'MediaEditor__tools__button--text-outline':
textStyle === TextStyle.Outline,
})}
theme={Theme.Dark}
value={textStyle}
/>
@ -628,11 +628,6 @@ export const MediaEditor = ({
value={sliderValue}
/>
<ContextMenu
buttonClassName={classNames('MediaEditor__tools__tool', {
'MediaEditor__tools__button--draw-pen': drawTool === DrawTool.Pen,
'MediaEditor__tools__button--draw-highlighter':
drawTool === DrawTool.Highlighter,
})}
i18n={i18n}
menuOptions={[
{
@ -648,20 +643,15 @@ export const MediaEditor = ({
value: DrawTool.Highlighter,
},
]}
moduleClassName={classNames('MediaEditor__tools__tool', {
'MediaEditor__tools__button--draw-pen': drawTool === DrawTool.Pen,
'MediaEditor__tools__button--draw-highlighter':
drawTool === DrawTool.Highlighter,
})}
theme={Theme.Dark}
value={drawTool}
/>
<ContextMenu
buttonClassName={classNames('MediaEditor__tools__tool', {
'MediaEditor__tools__button--width-thin':
drawWidth === DrawWidth.Thin,
'MediaEditor__tools__button--width-regular':
drawWidth === DrawWidth.Regular,
'MediaEditor__tools__button--width-medium':
drawWidth === DrawWidth.Medium,
'MediaEditor__tools__button--width-heavy':
drawWidth === DrawWidth.Heavy,
})}
i18n={i18n}
menuOptions={[
{
@ -689,6 +679,16 @@ export const MediaEditor = ({
value: DrawWidth.Heavy,
},
]}
moduleClassName={classNames('MediaEditor__tools__tool', {
'MediaEditor__tools__button--width-thin':
drawWidth === DrawWidth.Thin,
'MediaEditor__tools__button--width-regular':
drawWidth === DrawWidth.Regular,
'MediaEditor__tools__button--width-medium':
drawWidth === DrawWidth.Medium,
'MediaEditor__tools__button--width-heavy':
drawWidth === DrawWidth.Heavy,
})}
theme={Theme.Dark}
value={drawWidth}
/>

24
ts/components/MyStories.tsx
View file

@ -83,7 +83,10 @@ export const MyStories = ({
aria-label={i18n('MyStories__story')}
className="MyStories__story__preview"
onClick={() =>
viewStory(story.messageId, StoryViewModeType.Single)
viewStory({
storyId: story.messageId,
storyViewMode: StoryViewModeType.Single,
})
}
type="button"
>
@ -120,9 +123,15 @@ export const MyStories = ({
type="button"
/>
<ContextMenu
buttonClassName="MyStories__story__more"
i18n={i18n}
menuOptions={[
{
icon: 'MyStories__icon--forward',
label: i18n('forward'),
onClick: () => {
onForward(story.messageId);
},
},
{
icon: 'MyStories__icon--save',
label: i18n('save'),
@ -131,10 +140,14 @@ export const MyStories = ({
},
},
{
icon: 'MyStories__icon--forward',
label: i18n('forward'),
icon: 'StoryListItem__icon--info',
label: i18n('StoryListItem__info'),
onClick: () => {
onForward(story.messageId);
viewStory({
storyId: story.messageId,
storyViewMode: StoryViewModeType.Single,
shouldShowDetailsModal: true,
});
},
},
{
@ -145,6 +158,7 @@ export const MyStories = ({
},
},
]}
moduleClassName="MyStories__story__more"
theme={Theme.Dark}
/>
</div>

2
ts/components/MyStoriesButton.tsx
View file

@ -42,7 +42,7 @@ export const MyStoriesButton = ({
<div className="Stories__my-stories">
<button
aria-label={i18n('StoryListItem__label')}
className="StoryListItem"
className="StoryListItem__button"
onClick={onClick}
tabIndex={0}
type="button"

2
ts/components/Stories.tsx
View file

@ -101,12 +101,12 @@ export const Stories = ({
}
}}
onStoriesSettings={showStoriesSettings}
onStoryClicked={viewUserStories}
queueStoryDownload={queueStoryDownload}
showConversation={showConversation}
stories={stories}
toggleHideStories={toggleHideStories}
toggleStoriesView={toggleStoriesView}
viewUserStories={viewUserStories}
/>
)}
</div>

14
ts/components/StoriesPane.tsx
View file

@ -66,12 +66,12 @@ export type PropsType = {
onAddStory: () => unknown;
onMyStoriesClicked: () => unknown;
onStoriesSettings: () => unknown;
onStoryClicked: (conversationId: string) => unknown;
queueStoryDownload: (storyId: string) => unknown;
showConversation: ShowConversationType;
stories: Array<ConversationStoryType>;
toggleHideStories: (conversationId: string) => unknown;
toggleStoriesView: () => unknown;
viewUserStories: (conversationId: string) => unknown;
};
export const StoriesPane = ({
@ -82,12 +82,12 @@ export const StoriesPane = ({
onAddStory,
onMyStoriesClicked,
onStoriesSettings,
onStoryClicked,
queueStoryDownload,
showConversation,
stories,
toggleHideStories,
toggleStoriesView,
viewUserStories,
}: PropsType): JSX.Element => {
const [searchTerm, setSearchTerm] = useState('');
const [isShowingHiddenStories, setIsShowingHiddenStories] = useState(false);
@ -122,7 +122,6 @@ export const StoriesPane = ({
type="button"
/>
<ContextMenu
buttonClassName="Stories__pane__settings"
i18n={i18n}
menuOptions={[
{
@ -130,6 +129,7 @@ export const StoriesPane = ({
label: i18n('StoriesSettings__context-menu'),
},
]}
moduleClassName="Stories__pane__settings"
popperOptions={{
placement: 'bottom',
strategy: 'absolute',
@ -166,9 +166,6 @@ export const StoriesPane = ({
group={story.group}
i18n={i18n}
key={story.storyView.timestamp}
onClick={() => {
onStoryClicked(story.conversationId);
}}
onHideStory={toggleHideStories}
onGoToConversation={conversationId => {
showConversation({ conversationId });
@ -176,6 +173,7 @@ export const StoriesPane = ({
}}
queueStoryDownload={queueStoryDownload}
story={story.storyView}
viewUserStories={viewUserStories}
/>
))}
{Boolean(hiddenStories.length) && (
@ -195,9 +193,6 @@ export const StoriesPane = ({
key={story.storyView.timestamp}
i18n={i18n}
isHidden
onClick={() => {
onStoryClicked(story.conversationId);
}}
onHideStory={toggleHideStories}
onGoToConversation={conversationId => {
showConversation({ conversationId });
@ -205,6 +200,7 @@ export const StoriesPane = ({
}}
queueStoryDownload={queueStoryDownload}
story={story.storyView}
viewUserStories={viewUserStories}
/>
))}
</>

24
ts/components/StoryCreator.tsx
View file

@ -267,18 +267,6 @@ export const StoryCreator = ({
value={sliderValue}
/>
<ContextMenu
buttonClassName={classNames('StoryCreator__tools__tool', {
'StoryCreator__tools__button--font-regular':
textStyle === TextStyle.Regular,
'StoryCreator__tools__button--font-bold':
textStyle === TextStyle.Bold,
'StoryCreator__tools__button--font-serif':
textStyle === TextStyle.Serif,
'StoryCreator__tools__button--font-script':
textStyle === TextStyle.Script,
'StoryCreator__tools__button--font-condensed':
textStyle === TextStyle.Condensed,
})}
i18n={i18n}
menuOptions={[
{
@ -312,6 +300,18 @@ export const StoryCreator = ({
value: TextStyle.Condensed,
},
]}
moduleClassName={classNames('StoryCreator__tools__tool', {
'StoryCreator__tools__button--font-regular':
textStyle === TextStyle.Regular,
'StoryCreator__tools__button--font-bold':
textStyle === TextStyle.Bold,
'StoryCreator__tools__button--font-serif':
textStyle === TextStyle.Serif,
'StoryCreator__tools__button--font-script':
textStyle === TextStyle.Script,
'StoryCreator__tools__button--font-condensed':
textStyle === TextStyle.Condensed,
})}
theme={Theme.Dark}
value={textStyle}
/>

91
ts/components/StoryDetailsModal.stories.tsx Normal file
View file

@ -0,0 +1,91 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { Meta, Story } from '@storybook/react';
import React from 'react';
import casual from 'casual';
import type { PropsType } from './StoryDetailsModal';
import enMessages from '../../_locales/en/messages.json';
import { SendStatus } from '../messages/MessageSendState';
import { StoryDetailsModal } from './StoryDetailsModal';
import { fakeAttachment } from '../test-both/helpers/fakeAttachment';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
import { setupI18n } from '../util/setupI18n';
const i18n = setupI18n('en', enMessages);
export default {
title: 'Components/StoryDetailsModal',
component: StoryDetailsModal,
argTypes: {
getPreferredBadge: { action: true },
i18n: {
defaultValue: i18n,
},
onClose: { action: true },
sender: {
defaultValue: getDefaultConversation(),
},
sendState: {
defaultValue: undefined,
},
size: {
defaultValue: fakeAttachment().size,
},
timestamp: {
defaultValue: Date.now(),
},
},
} as Meta;
const Template: Story<PropsType> = args => <StoryDetailsModal {...args} />;
export const MyStory = Template.bind({});
MyStory.args = {
sendState: [
{
recipient: getDefaultConversation(),
status: SendStatus.Delivered,
updatedAt: casual.unix_time,
},
{
recipient: getDefaultConversation(),
status: SendStatus.Delivered,
updatedAt: casual.unix_time,
},
{
recipient: getDefaultConversation(),
status: SendStatus.Delivered,
updatedAt: casual.unix_time,
},
{
recipient: getDefaultConversation(),
status: SendStatus.Delivered,
updatedAt: casual.unix_time,
},
{
recipient: getDefaultConversation(),
status: SendStatus.Sent,
updatedAt: casual.unix_time,
},
{
recipient: getDefaultConversation(),
status: SendStatus.Viewed,
updatedAt: casual.unix_time,
},
{
recipient: getDefaultConversation(),
status: SendStatus.Viewed,
updatedAt: casual.unix_time,
},
{
recipient: getDefaultConversation(),
status: SendStatus.Viewed,
updatedAt: casual.unix_time,
},
],
};
export const OtherStory = Template.bind({});
OtherStory.args = {};

244
ts/components/StoryDetailsModal.tsx Normal file
View file

@ -0,0 +1,244 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import formatFileSize from 'filesize';
import type { LocalizerType } from '../types/Util';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type { StorySendStateType, StoryViewType } from '../types/Stories';
import { Avatar, AvatarSize } from './Avatar';
import { ContactName } from './conversation/ContactName';
import { ContextMenu } from './ContextMenu';
import { Intl } from './Intl';
import { Modal } from './Modal';
import { SendStatus } from '../messages/MessageSendState';
import { Theme } from '../util/theme';
import { ThemeType } from '../types/Util';
import { Time } from './Time';
import { formatDateTimeLong } from '../util/timestamp';
import { groupBy } from '../util/mapUtil';
export type PropsType = {
getPreferredBadge: PreferredBadgeSelectorType;
i18n: LocalizerType;
onClose: () => unknown;
sender: StoryViewType['sender'];
sendState?: Array<StorySendStateType>;
size?: number;
timestamp: number;
};
const contactSortCollator = new window.Intl.Collator();
function getI18nKey(sendStatus: SendStatus | undefined): string {
if (sendStatus === SendStatus.Failed) {
return 'MessageDetailsHeader--Failed';
}
if (sendStatus === SendStatus.Viewed) {
return 'MessageDetailsHeader--Viewed';
}
if (sendStatus === SendStatus.Read) {
return 'MessageDetailsHeader--Read';
}
if (sendStatus === SendStatus.Delivered) {
return 'MessageDetailsHeader--Delivered';
}
if (sendStatus === SendStatus.Sent) {
return 'MessageDetailsHeader--Sent';
}
if (sendStatus === SendStatus.Pending) {
return 'MessageDetailsHeader--Pending';
}
return 'from';
}
export const StoryDetailsModal = ({
getPreferredBadge,
i18n,
onClose,
sender,
sendState,
size,
timestamp,
}: PropsType): JSX.Element => {
const contactsBySendStatus = sendState
? groupBy(sendState, contact => contact.status)
: undefined;
let content: JSX.Element;
if (contactsBySendStatus) {
content = (
<div className="StoryDetailsModal__contact-container">
{[
SendStatus.Failed,
SendStatus.Viewed,
SendStatus.Read,
SendStatus.Delivered,
SendStatus.Sent,
SendStatus.Pending,
].map(sendStatus => {
const contacts = contactsBySendStatus.get(sendStatus);
if (!contacts) {
return null;
}
const i18nKey = getI18nKey(sendStatus);
const sortedContacts = [...contacts].sort((a, b) =>
contactSortCollator.compare(a.recipient.title, b.recipient.title)
);
return (
<div key={i18nKey} className="StoryDetailsModal__contact-group">
<div className="StoryDetailsModal__contact-group__header">
{i18n(i18nKey)}
</div>
{sortedContacts.map(status => {
const contact = status.recipient;
return (
<div key={contact.id} className="StoryDetailsModal__contact">
<Avatar
acceptedMessageRequest={contact.acceptedMessageRequest}
avatarPath={contact.avatarPath}
badge={getPreferredBadge(contact.badges)}
color={contact.color}
conversationType="direct"
i18n={i18n}
isMe={contact.isMe}
name={contact.profileName}
phoneNumber={contact.phoneNumber}
profileName={contact.profileName}
sharedGroupNames={contact.sharedGroupNames}
size={AvatarSize.THIRTY_SIX}
theme={ThemeType.dark}
title={contact.title}
unblurredAvatarPath={contact.unblurredAvatarPath}
/>
<div className="StoryDetailsModal__contact__text">
<ContactName title={contact.title} />
</div>
{status.updatedAt && (
<Time
className="StoryDetailsModal__status-timestamp"
timestamp={status.updatedAt}
>
{formatDateTimeLong(i18n, status.updatedAt)}
</Time>
)}
</div>
);
})}
</div>
);
})}
</div>
);
} else {
content = (
<div className="StoryDetailsModal__contact-container">
<div className="StoryDetailsModal__contact-group">
<div className="StoryDetailsModal__contact-group__header">
{i18n('sent')}
</div>
<div className="StoryDetailsModal__contact">
<Avatar
acceptedMessageRequest={sender.acceptedMessageRequest}
avatarPath={sender.avatarPath}
badge={getPreferredBadge(sender.badges)}
color={sender.color}
conversationType="direct"
i18n={i18n}
isMe={sender.isMe}
name={sender.profileName}
profileName={sender.profileName}
sharedGroupNames={sender.sharedGroupNames}
size={AvatarSize.THIRTY_SIX}
theme={ThemeType.dark}
title={sender.title}
/>
<div className="StoryDetailsModal__contact__text">
<div className="StoryDetailsModal__contact__name">
<ContactName title={sender.title} />
</div>
</div>
<Time
className="StoryDetailsModal__status-timestamp"
timestamp={timestamp}
>
{formatDateTimeLong(i18n, timestamp)}
</Time>
</div>
</div>
</div>
);
}
return (
<Modal
hasXButton
i18n={i18n}
moduleClassName="StoryDetailsModal"
onClose={onClose}
useFocusTrap={false}
theme={Theme.Dark}
title={
<ContextMenu
i18n={i18n}
menuOptions={[
{
icon: 'StoryDetailsModal__copy-icon',
label: i18n('StoryDetailsModal__copy-timestamp'),
onClick: () => {
window.navigator.clipboard.writeText(String(timestamp));
},
},
]}
moduleClassName="StoryDetailsModal__debugger"
popperOptions={{
placement: 'bottom',
strategy: 'absolute',
}}
theme={Theme.Dark}
>
<div>
<Intl
i18n={i18n}
id="StoryDetailsModal__sent-time"
components={[
<Time
className="StoryDetailsModal__debugger__button__text"
timestamp={timestamp}
>
{formatDateTimeLong(i18n, timestamp)}
</Time>,
]}
/>
</div>
{size && (
<div>
<Intl
i18n={i18n}
id="StoryDetailsModal__file-size"
components={[
<span className="StoryDetailsModal__debugger__button__text">
{formatFileSize(size)}
</span>,
]}
/>
</div>
)}
</ContextMenu>
}
>
{content}
</Modal>
);
};

2
ts/components/StoryListItem.stories.tsx
View file

@ -23,7 +23,6 @@ export default {
i18n: {
defaultValue: i18n,
},
onClick: { action: true },
onGoToConversation: { action: true },
onHideStory: { action: true },
queueStoryDownload: { action: true },
@ -34,6 +33,7 @@ export default {
timestamp: Date.now(),
},
},
viewUserStories: { action: true },
},
} as Meta;

88
ts/components/StoryListItem.tsx
View file

@ -7,7 +7,7 @@ import type { LocalizerType } from '../types/Util';
import type { ConversationStoryType, StoryViewType } from '../types/Stories';
import { Avatar, AvatarSize } from './Avatar';
import { ConfirmationDialog } from './ConfirmationDialog';
import { ContextMenuPopper } from './ContextMenu';
import { ContextMenu } from './ContextMenu';
import { HasStories } from '../types/Stories';
import { MessageTimestamp } from './conversation/MessageTimestamp';
import { StoryImage } from './StoryImage';
@ -15,27 +15,27 @@ import { getAvatarColor } from '../types/Colors';
export type PropsType = Pick<ConversationStoryType, 'group' | 'isHidden'> & {
i18n: LocalizerType;
onClick: () => unknown;
onGoToConversation: (conversationId: string) => unknown;
onHideStory: (conversationId: string) => unknown;
queueStoryDownload: (storyId: string) => unknown;
story: StoryViewType;
viewUserStories: (
conversationId: string,
shouldShowDetailsModal?: boolean
) => unknown;
};
export const StoryListItem = ({
group,
i18n,
isHidden,
onClick,
onGoToConversation,
onHideStory,
queueStoryDownload,
story,
viewUserStories,
}: PropsType): JSX.Element => {
const [hasConfirmHideStory, setHasConfirmHideStory] = useState(false);
const [isShowingContextMenu, setIsShowingContextMenu] = useState(false);
const [referenceElement, setReferenceElement] =
useState<HTMLButtonElement | null>(null);
const {
attachment,
@ -72,21 +72,42 @@ export const StoryListItem = ({
return (
<>
<button
<ContextMenu
aria-label={i18n('StoryListItem__label')}
className={classNames('StoryListItem', {
i18n={i18n}
menuOptions={[
{
icon: 'StoryListItem__icon--hide',
label: isHidden
? i18n('StoryListItem__unhide')
: i18n('StoryListItem__hide'),
onClick: () => {
if (isHidden) {
onHideStory(sender.id);
} else {
setHasConfirmHideStory(true);
}
},
},
{
icon: 'StoryListItem__icon--info',
label: i18n('StoryListItem__info'),
onClick: () => viewUserStories(sender.id, true),
},
{
icon: 'StoryListItem__icon--chat',
label: i18n('StoryListItem__go-to-chat'),
onClick: () => onGoToConversation(sender.id),
},
]}
moduleClassName={classNames('StoryListItem', {
'StoryListItem--hidden': isHidden,
})}
onClick={onClick}
onContextMenu={ev => {
ev.preventDefault();
ev.stopPropagation();
setIsShowingContextMenu(true);
onClick={() => viewUserStories(sender.id)}
popperOptions={{
placement: 'bottom',
strategy: 'absolute',
}}
ref={setReferenceElement}
tabIndex={0}
type="button"
>
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
@ -133,38 +154,7 @@ export const StoryListItem = ({
storyId={story.messageId}
/>
</div>
</button>
<ContextMenuPopper
isMenuShowing={isShowingContextMenu}
menuOptions={[
{
icon: 'StoryListItem__icon--hide',
label: isHidden
? i18n('StoryListItem__unhide')
: i18n('StoryListItem__hide'),
onClick: () => {
if (isHidden) {
onHideStory(sender.id);
} else {
setHasConfirmHideStory(true);
}
},
},
{
icon: 'StoryListItem__icon--chat',
label: i18n('StoryListItem__go-to-chat'),
onClick: () => {
onGoToConversation(sender.id);
},
},
]}
onClose={() => setIsShowingContextMenu(false)}
popperOptions={{
placement: 'bottom',
strategy: 'absolute',
}}
referenceElement={referenceElement}
/>
</ContextMenu>
{hasConfirmHideStory && (
<ConfirmationDialog
actions={[

19
ts/components/StoryViewer.stories.tsx
View file

@ -121,3 +121,22 @@ LongCaption.args = {
}),
},
};
export const YourStory = Template.bind({});
{
const storyView = getFakeStoryView(
'/fixtures/nathan-anderson-316188-unsplash.jpg'
);
YourStory.args = {
story: {
...storyView,
sender: {
...storyView.sender,
isMe: true,
},
sendState: [],
},
};
YourStory.storyName = 'Your story';
}

207
ts/components/StoryViewer.tsx
View file

@ -12,6 +12,7 @@ import React, {
import classNames from 'classnames';
import { useSpring, animated, to } from '@react-spring/web';
import type { BodyRangeType, LocalizerType } from '../types/Util';
import type { ContextMenuOptionType } from './ContextMenu';
import type { ConversationType } from '../state/ducks/conversations';
import type { EmojiPickDataType } from './emoji/EmojiPicker';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
@ -23,13 +24,14 @@ import * as log from '../logging/log';
import { AnimatedEmojiGalore } from './AnimatedEmojiGalore';
import { Avatar, AvatarSize } from './Avatar';
import { ConfirmationDialog } from './ConfirmationDialog';
import { ContextMenuPopper } from './ContextMenu';
import { ContextMenu } from './ContextMenu';
import { Intl } from './Intl';
import { MessageTimestamp } from './conversation/MessageTimestamp';
import { SendStatus } from '../messages/MessageSendState';
import { StoryDetailsModal } from './StoryDetailsModal';
import { StoryViewsNRepliesModal } from './StoryViewsNRepliesModal';
import { StoryImage } from './StoryImage';
import { StoryViewDirectionType, StoryViewModeType } from '../types/Stories';
import { StoryViewsNRepliesModal } from './StoryViewsNRepliesModal';
import { Theme } from '../util/theme';
import { ToastType } from '../state/ducks/toast';
import { getAvatarColor } from '../types/Colors';
@ -40,6 +42,7 @@ import { useEscapeHandling } from '../hooks/useEscapeHandling';
export type PropsType = {
currentIndex: number;
deleteStoryForEveryone: (story: StoryViewType) => unknown;
getPreferredBadge: PreferredBadgeSelectorType;
group?: Pick<
ConversationType,
@ -74,6 +77,7 @@ export type PropsType = {
recentEmojis?: Array<string>;
renderEmojiPicker: (props: RenderEmojiPickerProps) => JSX.Element;
replyState?: ReplyStateType;
shouldShowDetailsModal?: boolean;
showToast: ShowToastActionCreatorType;
skinTone?: number;
story: StoryViewType;
@ -95,6 +99,7 @@ enum Arrow {
export const StoryViewer = ({
currentIndex,
deleteStoryForEveryone,
getPreferredBadge,
group,
hasAllStoriesMuted,
@ -114,6 +119,7 @@ export const StoryViewer = ({
recentEmojis,
renderEmojiPicker,
replyState,
shouldShowDetailsModal,
showToast,
skinTone,
story,
@ -121,12 +127,14 @@ export const StoryViewer = ({
toggleHasAllStoriesMuted,
viewStory,
}: PropsType): JSX.Element => {
const [isShowingContextMenu, setIsShowingContextMenu] =
useState<boolean>(false);
const [storyDuration, setStoryDuration] = useState<number | undefined>();
const [isShowingContextMenu, setIsShowingContextMenu] = useState(false);
const [hasConfirmHideStory, setHasConfirmHideStory] = useState(false);
const [referenceElement, setReferenceElement] =
useState<HTMLButtonElement | null>(null);
const [reactionEmoji, setReactionEmoji] = useState<string | undefined>();
const [confirmDeleteStory, setConfirmDeleteStory] = useState<
StoryViewType | undefined
>();
const { attachment, canReply, isHidden, messageId, sendState, timestamp } =
story;
@ -143,19 +151,25 @@ export const StoryViewer = ({
title,
} = story.sender;
const [hasReplyModal, setHasReplyModal] = useState(false);
const [hasStoryViewsNRepliesModal, setHasStoryViewsNRepliesModal] =
useState(false);
const [hasStoryDetailsModal, setHasStoryDetailsModal] = useState(
Boolean(shouldShowDetailsModal)
);
const onClose = useCallback(() => {
viewStory();
viewStory({
closeViewer: true,
});
}, [viewStory]);
const onEscape = useCallback(() => {
if (hasReplyModal) {
setHasReplyModal(false);
if (hasStoryViewsNRepliesModal) {
setHasStoryViewsNRepliesModal(false);
} else {
onClose();
}
}, [hasReplyModal, onClose]);
}, [hasStoryViewsNRepliesModal, onClose]);
useEscapeHandling(onEscape);
@ -225,11 +239,11 @@ export const StoryViewer = ({
}
if (value === 100) {
viewStory(
story.messageId,
viewStory({
storyId: story.messageId,
storyViewMode,
StoryViewDirectionType.Next
);
viewDirection: StoryViewDirectionType.Next,
});
}
},
},
@ -263,7 +277,8 @@ export const StoryViewer = ({
const shouldPauseViewing =
hasConfirmHideStory ||
hasExpandedCaption ||
hasReplyModal ||
hasStoryDetailsModal ||
hasStoryViewsNRepliesModal ||
isShowingContextMenu ||
pauseStory ||
Boolean(reactionEmoji);
@ -284,15 +299,19 @@ export const StoryViewer = ({
const navigateStories = useCallback(
(ev: KeyboardEvent) => {
if (ev.key === 'ArrowRight') {
viewStory(story.messageId, storyViewMode, StoryViewDirectionType.Next);
viewStory({
storyId: story.messageId,
storyViewMode,
viewDirection: StoryViewDirectionType.Next,
});
ev.preventDefault();
ev.stopPropagation();
} else if (ev.key === 'ArrowLeft') {
viewStory(
story.messageId,
viewStory({
storyId: story.messageId,
storyViewMode,
StoryViewDirectionType.Previous
);
viewDirection: StoryViewDirectionType.Previous,
});
ev.preventDefault();
ev.stopPropagation();
}
@ -357,10 +376,50 @@ export const StoryViewer = ({
const replyCount = replies.length;
const viewCount = views.length;
const shouldShowContextMenu = !sendState;
const hasPrevNextArrows = storyViewMode !== StoryViewModeType.Single;
const contextMenuOptions: ReadonlyArray<ContextMenuOptionType<unknown>> =
sendState
? [
{
icon: 'StoryListItem__icon--info',
label: i18n('StoryListItem__info'),
onClick: () => setHasStoryDetailsModal(true),
},
{
icon: 'StoryListItem__icon--delete',
label: i18n('StoryListItem__delete'),
onClick: () => setConfirmDeleteStory(story),
},
]
: [
{
icon: 'StoryListItem__icon--info',
label: i18n('StoryListItem__info'),
onClick: () => setHasStoryDetailsModal(true),
},
{
icon: 'StoryListItem__icon--hide',
label: isHidden
? i18n('StoryListItem__unhide')
: i18n('StoryListItem__hide'),
onClick: () => {
if (isHidden) {
onHideStory(id);
} else {
setHasConfirmHideStory(true);
}
},
},
{
icon: 'StoryListItem__icon--chat',
label: i18n('StoryListItem__go-to-chat'),
onClick: () => {
onGoToConversation(id);
},
},
];
return (
<FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
<div className="StoryViewer">
@ -379,11 +438,11 @@ export const StoryViewer = ({
}
)}
onClick={() =>
viewStory(
story.messageId,
viewStory({
storyId: story.messageId,
storyViewMode,
StoryViewDirectionType.Previous
)
viewDirection: StoryViewDirectionType.Previous,
})
}
onMouseMove={() => setArrowToShow(Arrow.Left)}
type="button"
@ -519,15 +578,14 @@ export const StoryViewer = ({
onClick={toggleHasAllStoriesMuted}
type="button"
/>
{shouldShowContextMenu && (
<button
aria-label={i18n('MyStories__more')}
className="StoryViewer__more"
onClick={() => setIsShowingContextMenu(true)}
ref={setReferenceElement}
type="button"
/>
)}
<ContextMenu
aria-label={i18n('MyStories__more')}
i18n={i18n}
menuOptions={contextMenuOptions}
moduleClassName="StoryViewer__more"
onMenuShowingChanged={setIsShowingContextMenu}
theme={Theme.Dark}
/>
</div>
</div>
<div className="StoryViewer__progress">
@ -555,14 +613,14 @@ export const StoryViewer = ({
{canReply && (
<button
className="StoryViewer__reply"
onClick={() => setHasReplyModal(true)}
onClick={() => setHasStoryViewsNRepliesModal(true)}
tabIndex={0}
type="button"
>
<>
{viewCount > 0 || replyCount > 0 ? (
{sendState || replyCount > 0 ? (
<span className="StoryViewer__reply__chevron">
{viewCount > 0 &&
{sendState &&
(viewCount === 1 ? (
<Intl
i18n={i18n}
@ -593,7 +651,7 @@ export const StoryViewer = ({
))}
</span>
) : null}
{!viewCount && !replyCount && (
{!sendState && !replyCount && (
<span className="StoryViewer__reply__arrow">
{isGroupStory
? i18n('StoryViewer__reply-group')
@ -615,11 +673,11 @@ export const StoryViewer = ({
}
)}
onClick={() =>
viewStory(
story.messageId,
viewStory({
storyId: story.messageId,
storyViewMode,
StoryViewDirectionType.Next
)
viewDirection: StoryViewDirectionType.Next,
})
}
onMouseMove={() => setArrowToShow(Arrow.Right)}
type="button"
@ -634,51 +692,35 @@ export const StoryViewer = ({
type="button"
/>
</div>
<ContextMenuPopper
isMenuShowing={isShowingContextMenu}
menuOptions={[
{
icon: 'StoryListItem__icon--hide',
label: isHidden
? i18n('StoryListItem__unhide')
: i18n('StoryListItem__hide'),
onClick: () => {
if (isHidden) {
onHideStory(id);
} else {
setHasConfirmHideStory(true);
}
},
},
{
icon: 'StoryListItem__icon--chat',
label: i18n('StoryListItem__go-to-chat'),
onClick: () => {
onGoToConversation(id);
},
},
]}
onClose={() => setIsShowingContextMenu(false)}
referenceElement={referenceElement}
theme={Theme.Dark}
/>
{hasReplyModal && canReply && (
{hasStoryDetailsModal && (
<StoryDetailsModal
getPreferredBadge={getPreferredBadge}
i18n={i18n}
onClose={() => setHasStoryDetailsModal(false)}
sender={story.sender}
sendState={sendState}
size={attachment?.size}
timestamp={timestamp}
/>
)}
{hasStoryViewsNRepliesModal && (
<StoryViewsNRepliesModal
authorTitle={firstName || title}
canReply={Boolean(canReply)}
getPreferredBadge={getPreferredBadge}
i18n={i18n}
isGroupStory={isGroupStory}
isMyStory={isMe}
onClose={() => setHasReplyModal(false)}
onClose={() => setHasStoryViewsNRepliesModal(false)}
onReact={emoji => {
onReactToStory(emoji, story);
setHasReplyModal(false);
setHasStoryViewsNRepliesModal(false);
setReactionEmoji(emoji);
showToast(ToastType.StoryReact);
}}
onReply={(message, mentions, replyTimestamp) => {
if (!isGroupStory) {
setHasReplyModal(false);
setHasStoryViewsNRepliesModal(false);
}
onReplyToStory(message, mentions, replyTimestamp, story);
showToast(ToastType.StoryReply);
@ -712,6 +754,21 @@ export const StoryViewer = ({
{i18n('StoryListItem__hide-modal--body', [String(firstName)])}
</ConfirmationDialog>
)}
{confirmDeleteStory && (
<ConfirmationDialog
actions={[
{
text: i18n('delete'),
action: () => deleteStoryForEveryone(confirmDeleteStory),
style: 'negative',
},
]}
i18n={i18n}
onClose={() => setConfirmDeleteStory(undefined)}
>
{i18n('MyStories__delete')}
</ConfirmationDialog>
)}
</div>
</FocusTrap>
);

147
ts/components/StoryViewsNRepliesModal.stories.tsx
View file

@ -1,8 +1,8 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { Meta, Story } from '@storybook/react';
import React from 'react';
import { action } from '@storybook/addon-actions';
import type { PropsType } from './StoryViewsNRepliesModal';
import * as durations from '../util/durations';
@ -18,35 +18,50 @@ const i18n = setupI18n('en', enMessages);
export default {
title: 'Components/StoryViewsNRepliesModal',
};
function getDefaultProps(): PropsType {
return {
authorTitle: getDefaultConversation().title,
getPreferredBadge: () => undefined,
i18n,
isMyStory: false,
onClose: action('onClose'),
onSetSkinTone: action('onSetSkinTone'),
onReact: action('onReact'),
onReply: action('onReply'),
onTextTooLong: action('onTextTooLong'),
onUseEmoji: action('onUseEmoji'),
preferredReactionEmoji: ['❤️', '👍', '👎', '😂', '😮', '😢'],
renderEmojiPicker: () => <div />,
replies: [],
storyPreviewAttachment: fakeAttachment({
thumbnail: {
contentType: IMAGE_JPEG,
height: 64,
objectUrl: '/fixtures/nathan-anderson-316188-unsplash.jpg',
path: '',
width: 40,
},
}),
views: [],
};
}
component: StoryViewsNRepliesModal,
argTypes: {
authorTitle: {
defaultValue: getDefaultConversation().title,
},
canReply: {
defaultValue: true,
},
getPreferredBadge: { action: true },
i18n: {
defaultValue: i18n,
},
isMyStory: {
defaultValue: false,
},
onClose: { action: true },
onSetSkinTone: { action: true },
onReact: { action: true },
onReply: { action: true },
onTextTooLong: { action: true },
onUseEmoji: { action: true },
preferredReactionEmoji: {
defaultValue: ['❤️', '👍', '👎', '😂', '😮', '😢'],
},
renderEmojiPicker: { action: true },
replies: {
defaultValue: [],
},
storyPreviewAttachment: {
defaultValue: fakeAttachment({
thumbnail: {
contentType: IMAGE_JPEG,
height: 64,
objectUrl: '/fixtures/nathan-anderson-316188-unsplash.jpg',
path: '',
width: 40,
},
}),
},
views: {
defaultValue: [],
},
},
} as Meta;
function getViewsAndReplies() {
const p1 = getDefaultConversation();
@ -107,47 +122,51 @@ function getViewsAndReplies() {
};
}
export const CanReply = (): JSX.Element => (
<StoryViewsNRepliesModal {...getDefaultProps()} />
const Template: Story<PropsType> = args => (
<StoryViewsNRepliesModal {...args} />
);
CanReply.story = {
name: 'Can reply',
export const CanReply = Template.bind({});
CanReply.args = {};
CanReply.storyName = 'Can reply';
export const ViewsOnly = Template.bind({});
ViewsOnly.args = {
isMyStory: true,
views: getViewsAndReplies().views,
};
ViewsOnly.storyName = 'Views only';
export const ViewsOnly = (): JSX.Element => (
<StoryViewsNRepliesModal
{...getDefaultProps()}
isMyStory
views={getViewsAndReplies().views}
/>
);
ViewsOnly.story = {
name: 'Views only',
export const InAGroupNoReplies = Template.bind({});
InAGroupNoReplies.args = {
isGroupStory: true,
};
InAGroupNoReplies.storyName = 'In a group (no replies)';
export const InAGroupNoReplies = (): JSX.Element => (
<StoryViewsNRepliesModal {...getDefaultProps()} isGroupStory />
);
InAGroupNoReplies.story = {
name: 'In a group (no replies)',
};
export const InAGroup = (): JSX.Element => {
export const InAGroup = Template.bind({});
{
const { views, replies } = getViewsAndReplies();
InAGroup.args = {
isGroupStory: true,
replies,
views,
};
}
InAGroup.storyName = 'In a group';
return (
<StoryViewsNRepliesModal
{...getDefaultProps()}
isGroupStory
replies={replies}
views={views}
/>
);
export const CantReply = Template.bind({});
CantReply.args = {
canReply: false,
};
InAGroup.story = {
name: 'In a group',
};
export const InAGroupCantReply = Template.bind({});
{
const { views, replies } = getViewsAndReplies();
InAGroupCantReply.args = {
canReply: false,
isGroupStory: true,
replies,
views,
};
}
InAGroupCantReply.storyName = "In a group (can't reply)";

10
ts/components/StoryViewsNRepliesModal.tsx
View file

@ -34,6 +34,7 @@ enum Tab {
export type PropsType = {
authorTitle: string;
canReply: boolean;
getPreferredBadge: PreferredBadgeSelectorType;
i18n: LocalizerType;
isGroupStory?: boolean;
@ -59,6 +60,7 @@ export type PropsType = {
export const StoryViewsNRepliesModal = ({
authorTitle,
canReply,
getPreferredBadge,
i18n,
isGroupStory,
@ -76,7 +78,7 @@ export const StoryViewsNRepliesModal = ({
skinTone,
storyPreviewAttachment,
views,
}: PropsType): JSX.Element => {
}: PropsType): JSX.Element | null => {
const inputApiRef = useRef<InputApi | undefined>();
const [bottom, setBottom] = useState<HTMLDivElement | null>(null);
const [messageBodyText, setMessageBodyText] = useState('');
@ -117,7 +119,7 @@ export const StoryViewsNRepliesModal = ({
let composerElement: JSX.Element | undefined;
if (!isMyStory) {
if (!isMyStory && canReply) {
composerElement = (
<>
{!isGroupStory && (
@ -373,6 +375,10 @@ export const StoryViewsNRepliesModal = ({
</Tabs>
) : undefined;
if (!tabsElement && !viewsElement && !repliesElement && !composerElement) {
return null;
}
return (
<Modal
i18n={i18n}

5
ts/components/conversation/Message.tsx
View file

@ -1551,7 +1551,10 @@ export class Message extends React.PureComponent<Props, State> {
isViewOnce={false}
moduleClassName="StoryReplyQuote"
onClick={() => {
viewStory(storyReplyContext.storyId, StoryViewModeType.Single);
viewStory({
storyId: storyReplyContext.storyId,
storyViewMode: StoryViewModeType.Single,
});
}}
rawAttachment={storyReplyContext.rawAttachment}
reactionEmoji={storyReplyContext.emoji}

28
ts/components/conversation/MessageDetail.tsx
View file

@ -8,6 +8,7 @@ import { noop } from 'lodash';
import { Avatar, AvatarSize } from '../Avatar';
import { ContactName } from './ContactName';
import { ContextMenu } from '../ContextMenu';
import { Time } from '../Time';
import type {
Props as MessagePropsType,
@ -392,12 +393,27 @@ export class MessageDetail extends React.Component<Props> {
<tr>
<td className="module-message-detail__label">{i18n('sent')}</td>
<td>
<Time timestamp={sentAt}>
{formatDateTimeLong(i18n, sentAt)}
</Time>{' '}
<span className="module-message-detail__unix-timestamp">
({sentAt})
</span>
<ContextMenu
i18n={i18n}
menuOptions={[
{
icon: 'StoryDetailsModal__copy-icon',
label: i18n('StoryDetailsModal__copy-timestamp'),
onClick: () => {
window.navigator.clipboard.writeText(String(sentAt));
},
},
]}
>
<>
<Time timestamp={sentAt}>
{formatDateTimeLong(i18n, sentAt)}
</Time>{' '}
<span className="module-message-detail__unix-timestamp">
({sentAt})
</span>
</>
</ContextMenu>
</td>
</tr>
{receivedAt && message.direction === 'incoming' ? (

33
ts/state/ducks/stories.ts
View file

@ -63,6 +63,7 @@ export type StoryDataType = {
export type SelectedStoryDataType = {
currentIndex: number;
numStories: number;
shouldShowDetailsModal: boolean;
story: StoryDataType;
};
@ -616,7 +617,8 @@ const getSelectedStoryDataForConversationId = (
};
function viewUserStories(
conversationId: string
conversationId: string,
shouldShowDetailsModal = false
): ThunkAction<void, RootStateType, unknown, ViewStoryActionType> {
return (dispatch, getState) => {
const { currentIndex, hasUnread, numStories, storiesByConversationId } =
@ -630,6 +632,7 @@ function viewUserStories(
selectedStoryData: {
currentIndex,
numStories,
shouldShowDetailsModal,
story,
},
storyViewMode: hasUnread
@ -640,19 +643,23 @@ function viewUserStories(
};
}
export type ViewStoryActionCreatorType = (
storyId?: string,
storyViewMode?: StoryViewModeType,
viewDirection?: StoryViewDirectionType
) => unknown;
export type ViewStoryActionCreatorType = (opts: {
closeViewer?: boolean;
storyId?: string;
storyViewMode?: StoryViewModeType;
viewDirection?: StoryViewDirectionType;
shouldShowDetailsModal?: boolean;
}) => unknown;
const viewStory: ViewStoryActionCreatorType = (
const viewStory: ViewStoryActionCreatorType = ({
closeViewer,
shouldShowDetailsModal = false,
storyId,
storyViewMode,
viewDirection
): ThunkAction<void, RootStateType, unknown, ViewStoryActionType> => {
viewDirection,
}): ThunkAction<void, RootStateType, unknown, ViewStoryActionType> => {
return (dispatch, getState) => {
if (!storyId || !storyViewMode) {
if (closeViewer || !storyId || !storyViewMode) {
dispatch({
type: VIEW_STORY,
payload: undefined,
@ -691,6 +698,7 @@ const viewStory: ViewStoryActionCreatorType = (
selectedStoryData: {
currentIndex,
numStories,
shouldShowDetailsModal,
story,
},
storyViewMode,
@ -713,6 +721,7 @@ const viewStory: ViewStoryActionCreatorType = (
selectedStoryData: {
currentIndex: nextIndex,
numStories,
shouldShowDetailsModal: false,
story: nextStory,
},
storyViewMode,
@ -732,6 +741,7 @@ const viewStory: ViewStoryActionCreatorType = (
selectedStoryData: {
currentIndex: nextIndex,
numStories,
shouldShowDetailsModal: false,
story: nextStory,
},
storyViewMode,
@ -759,6 +769,7 @@ const viewStory: ViewStoryActionCreatorType = (
selectedStoryData: {
currentIndex: nextSelectedStoryData.currentIndex,
numStories: nextSelectedStoryData.numStories,
shouldShowDetailsModal: false,
story: unreadStory,
},
storyViewMode,
@ -819,6 +830,7 @@ const viewStory: ViewStoryActionCreatorType = (
selectedStoryData: {
currentIndex: 0,
numStories: nextSelectedStoryData.numStories,
shouldShowDetailsModal: false,
story: nextSelectedStoryData.storiesByConversationId[0],
},
storyViewMode,
@ -855,6 +867,7 @@ const viewStory: ViewStoryActionCreatorType = (
selectedStoryData: {
currentIndex: 0,
numStories: nextSelectedStoryData.numStories,
shouldShowDetailsModal: false,
story: nextSelectedStoryData.storiesByConversationId[0],
},
storyViewMode,

13
ts/state/selectors/stories.ts
View file

@ -101,6 +101,7 @@ export function getStoryView(
const sender = pick(conversationSelector(story.sourceUuid || story.source), [
'acceptedMessageRequest',
'avatarPath',
'badges',
'color',
'firstName',
'hideStory',
@ -132,17 +133,7 @@ export function getStoryView(
innerSendState.push({
...recipientSendState,
recipient: pick(recipient, [
'acceptedMessageRequest',
'avatarPath',
'color',
'id',
'isMe',
'name',
'profileName',
'sharedGroupNames',
'title',
]),
recipient,
});
});

1
ts/state/smart/StoryViewer.tsx
View file

@ -106,6 +106,7 @@ export function SmartStoryViewer(): JSX.Element | null {
recentEmojis={recentEmojis}
renderEmojiPicker={renderEmojiPicker}
replyState={replyState}
shouldShowDetailsModal={selectedStoryData.shouldShowDetailsModal}
showToast={showToast}
skinTone={skinTone}
story={storyView}

14
ts/types/Stories.ts
View file

@ -52,18 +52,7 @@ export type ConversationStoryType = {
export type StorySendStateType = {
isAllowedToReplyToStory?: boolean;
recipient: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'color'
| 'id'
| 'isMe'
| 'name'
| 'profileName'
| 'sharedGroupNames'
| 'title'
>;
recipient: ConversationType;
status: SendStatus;
updatedAt?: number;
};
@ -80,6 +69,7 @@ export type StoryViewType = {
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'badges'
| 'color'
| 'firstName'
| 'id'

15
ts/util/getClassNamesFor.ts
View file

@ -7,11 +7,16 @@ export function getClassNamesFor(
...modules: Array<string | undefined>
): (modifier?: string) => string {
return modifier => {
const cx = modules.map(parentModule =>
parentModule && modifier !== undefined
? `${parentModule}${modifier}`
: undefined
);
if (modifier === undefined) {
return '';
}
const cx = modules
.flatMap(m => (m ? m.split(' ') : undefined))
.map(parentModule =>
parentModule ? `${parentModule}${modifier}` : undefined
);
return classNames(cx);
};
}