Fix video forwarding

This commit is contained in:
Josh Perez 2021-12-02 20:05:32 -05:00 committed by GitHub
parent 97d9069876
commit 13de35bea2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 41 additions and 44 deletions

View file

@ -8,7 +8,7 @@ import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';
import enMessages from '../../_locales/en/messages.json';
import type { AttachmentDraftType } from '../types/Attachment';
import type { AttachmentType } from '../types/Attachment';
import type { PropsType } from './ForwardMessageModal';
import { ForwardMessageModal } from './ForwardMessageModal';
import { IMAGE_JPEG, VIDEO_MP4, stringToMIMEType } from '../types/MIME';
@ -16,9 +16,9 @@ import { getDefaultConversation } from '../test-both/helpers/getDefaultConversat
import { setupI18n } from '../util/setupI18n';
import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
const createDraftAttachment = (
props: Partial<AttachmentDraftType> = {}
): AttachmentDraftType => ({
const createAttachment = (
props: Partial<AttachmentType> = {}
): AttachmentType => ({
pending: false,
path: 'fileName.jpg',
contentType: stringToMIMEType(
@ -83,7 +83,7 @@ story.add('link preview', () => {
date: Date.now(),
domain: 'https://www.signal.org',
url: 'signal.org',
image: createDraftAttachment({
image: createAttachment({
url: '/fixtures/kitten-4-112-112.jpg',
contentType: IMAGE_JPEG,
}),
@ -101,15 +101,15 @@ story.add('media attachments', () => {
<ForwardMessageModal
{...useProps({
attachments: [
createDraftAttachment({
createAttachment({
pending: true,
}),
createDraftAttachment({
createAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
}),
createDraftAttachment({
createAttachment({
contentType: VIDEO_MP4,
fileName: 'pixabay-Soap-Bubble-7141.mp4',
url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',

View file

@ -16,7 +16,7 @@ import { animated } from '@react-spring/web';
import classNames from 'classnames';
import { AttachmentList } from './conversation/AttachmentList';
import type { AttachmentDraftType } from '../types/Attachment';
import type { AttachmentType } from '../types/Attachment';
import { Button } from './Button';
import type { InputApi } from './CompositionInput';
import { CompositionInput } from './CompositionInput';
@ -39,12 +39,12 @@ import { filterAndSortConversationsByRecent } from '../util/filterAndSortConvers
import { useAnimated } from '../hooks/useAnimated';
export type DataPropsType = {
attachments?: Array<AttachmentDraftType>;
attachments?: Array<AttachmentType>;
candidateConversations: ReadonlyArray<ConversationType>;
doForwardMessage: (
selectedContacts: Array<string>,
messageBody?: string,
attachments?: Array<AttachmentDraftType>,
attachments?: Array<AttachmentType>,
linkPreview?: LinkPreviewType
) => void;
getPreferredBadge: PreferredBadgeSelectorType;
@ -102,7 +102,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
filterAndSortConversationsByRecent(candidateConversations, '')
);
const [attachmentsToForward, setAttachmentsToForward] = useState<
Array<AttachmentDraftType>
Array<AttachmentType>
>(attachments || []);
const [isEditingMessage, setIsEditingMessage] = useState(false);
const [messageBodyText, setMessageBodyText] = useState(messageBody || '');
@ -325,7 +325,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
<AttachmentList
attachments={attachmentsToForward}
i18n={i18n}
onCloseAttachment={(attachment: AttachmentDraftType) => {
onCloseAttachment={(attachment: AttachmentType) => {
const newAttachments = attachmentsToForward.filter(
currentAttachment => currentAttachment !== attachment
);

View file

@ -6,6 +6,7 @@ import * as React from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import type { AttachmentDraftType } from '../../types/Attachment';
import type { Props } from './AttachmentList';
import { AttachmentList } from './AttachmentList';
import {
@ -24,7 +25,9 @@ const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/AttachmentList', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
const createProps = (
overrideProps: Partial<Props<AttachmentDraftType>> = {}
): Props<AttachmentDraftType> => ({
attachments: overrideProps.attachments || [],
i18n,
onAddAttachment: action('onAddAttachment'),

View file

@ -7,7 +7,10 @@ import { Image } from './Image';
import { StagedGenericAttachment } from './StagedGenericAttachment';
import { StagedPlaceholderAttachment } from './StagedPlaceholderAttachment';
import type { LocalizerType } from '../../types/Util';
import type { AttachmentDraftType } from '../../types/Attachment';
import type {
AttachmentType,
AttachmentDraftType,
} from '../../types/Attachment';
import {
areAllAttachmentsVisual,
canDisplayImage,
@ -15,14 +18,14 @@ import {
isVideoAttachment,
} from '../../types/Attachment';
export type Props = Readonly<{
attachments: ReadonlyArray<AttachmentDraftType>;
export type Props<T extends AttachmentType | AttachmentDraftType> = Readonly<{
attachments: ReadonlyArray<T>;
canEditImages?: boolean;
i18n: LocalizerType;
onAddAttachment?: () => void;
onClickAttachment?: (attachment: AttachmentDraftType) => void;
onClickAttachment?: (attachment: T) => void;
onClose?: () => void;
onCloseAttachment: (attachment: AttachmentDraftType) => void;
onCloseAttachment: (attachment: T) => void;
}>;
const IMAGE_WIDTH = 120;
@ -32,15 +35,21 @@ const IMAGE_HEIGHT = 120;
const BLANK_VIDEO_THUMBNAIL =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQAAAAA3bvkkAAAACklEQVR42mNiAAAABgADm78GJQAAAABJRU5ErkJggg==';
function getUrl(attachment: AttachmentDraftType): string | undefined {
function getUrl(
attachment: AttachmentType | AttachmentDraftType
): string | undefined {
if (attachment.pending) {
return undefined;
}
if ('screenshot' in attachment) {
return attachment.screenshot?.url || attachment.url;
}
return attachment.url;
}
export const AttachmentList = ({
export const AttachmentList = <T extends AttachmentType | AttachmentDraftType>({
attachments,
canEditImages,
i18n,
@ -48,7 +57,7 @@ export const AttachmentList = ({
onClickAttachment,
onCloseAttachment,
onClose,
}: Props): JSX.Element | null => {
}: Props<T>): JSX.Element | null => {
if (!attachments.length) {
return null;
}