pepepper/fluxer
1
0
Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-07 19:22:14 +09:00
Code Issues Packages Projects Releases Wiki Activity

feat(app): drop the compact attachments media size preference (#1872)

Browse Source
This commit is contained in:
Hampus
2026-08-24 12:35:28 +02:00
committed by GitHub
parent eda29c0e34
commit 844952db51
18 changed files with 62 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fluxer_api/src/api/channel/services/message/MessageValidationService.ts
+2 -6
View File
@@ -160,12 +160,8 @@ export class MessageValidationService {
}
}
calculateMessageFlags(data: {flags?: number; favorite_meme_id?: bigint | null}): number {
let flags = data.flags ? data.flags & SENDABLE_MESSAGE_FLAGS : 0;
if (data.favorite_meme_id) {
flags |= MessageFlags.COMPACT_ATTACHMENTS;
}
return flags;
calculateMessageFlags(data: {flags?: number}): number {
return data.flags ? data.flags & SENDABLE_MESSAGE_FLAGS : 0;
}
validateTotalAttachmentSize(
fluxer_app/src/features/accessibility/state/Accessibility.ts
-31
View File
@@ -23,7 +23,6 @@ import {
ChannelTypingIndicatorMode as ProtoChannelTypingIndicatorMode,
DmMessagePreviewMode as ProtoDmMessagePreviewMode,
HdrDisplayMode as ProtoHdrDisplayMode,
MediaDimensionSize as ProtoMediaDimensionSize,
} from '@fluxer/schema/src/gen/fluxer/user/preferences/v1/accessibility_pb';
import {makeAutoObservable, reaction, runInAction} from 'mobx';
@@ -513,11 +512,6 @@ export enum GuildChannelPresenceIndicatorMode {
HIDDEN = 2,
}
export enum MediaDimensionSize {
SMALL = 'small',
LARGE = 'large',
}
export enum DMMessagePreviewMode {
ALL = 0,
UNREAD_ONLY = 1,
@@ -582,8 +576,6 @@ export interface AccessibilitySettings {
showCustomEmojisInExpressionAutocomplete: boolean;
showStickersInExpressionAutocomplete: boolean;
showMemesInExpressionAutocomplete: boolean;
attachmentMediaDimensionSize: MediaDimensionSize;
embedMediaDimensionSize: MediaDimensionSize;
voiceChannelJoinRequiresDoubleClick: boolean;
customThemeCss: string | null;
customThemeCssSyncAcrossDevices: boolean;
@@ -631,15 +623,6 @@ const DM_PREVIEW_FROM_PROTO: Record<ProtoDmMessagePreviewMode, DMMessagePreviewM
[ProtoDmMessagePreviewMode.UNREAD_ONLY]: DMMessagePreviewMode.UNREAD_ONLY,
[ProtoDmMessagePreviewMode.NONE]: DMMessagePreviewMode.NONE,
};
const MEDIA_DIMENSION_TO_PROTO: Record<MediaDimensionSize, ProtoMediaDimensionSize> = {
[MediaDimensionSize.SMALL]: ProtoMediaDimensionSize.SMALL,
[MediaDimensionSize.LARGE]: ProtoMediaDimensionSize.LARGE,
};
const MEDIA_DIMENSION_FROM_PROTO: Record<ProtoMediaDimensionSize, MediaDimensionSize> = {
[ProtoMediaDimensionSize.UNSPECIFIED]: MediaDimensionSize.SMALL,
[ProtoMediaDimensionSize.SMALL]: MediaDimensionSize.SMALL,
[ProtoMediaDimensionSize.LARGE]: MediaDimensionSize.LARGE,
};
const HDR_TO_PROTO: Record<HdrDisplayMode, ProtoHdrDisplayMode> = {
[HdrDisplayMode.FULL]: ProtoHdrDisplayMode.FULL,
[HdrDisplayMode.STANDARD]: ProtoHdrDisplayMode.STANDARD,
@@ -697,8 +680,6 @@ class Accessibility {
showCustomEmojisInExpressionAutocomplete = true;
showStickersInExpressionAutocomplete = true;
showMemesInExpressionAutocomplete = true;
attachmentMediaDimensionSize = MediaDimensionSize.LARGE;
embedMediaDimensionSize = MediaDimensionSize.SMALL;
voiceChannelJoinRequiresDoubleClick = false;
systemReducedMotion = false;
customThemeCss: string | null = null;
@@ -811,8 +792,6 @@ class Accessibility {
'showCustomEmojisInExpressionAutocomplete',
'showStickersInExpressionAutocomplete',
'showMemesInExpressionAutocomplete',
'attachmentMediaDimensionSize',
'embedMediaDimensionSize',
'voiceChannelJoinRequiresDoubleClick',
'customThemeCssSyncAcrossDevices',
'showFavorites',
@@ -871,8 +850,6 @@ class Accessibility {
showCustomEmojisInAutocomplete: s.showCustomEmojisInExpressionAutocomplete,
showStickersInAutocomplete: s.showStickersInExpressionAutocomplete,
showMemesInAutocomplete: s.showMemesInExpressionAutocomplete,
attachmentMediaDimensionSize: MEDIA_DIMENSION_TO_PROTO[s.attachmentMediaDimensionSize],
embedMediaDimensionSize: MEDIA_DIMENSION_TO_PROTO[s.embedMediaDimensionSize],
voiceChannelJoinRequiresDoubleClick: s.voiceChannelJoinRequiresDoubleClick,
customThemeCss: s.customThemeCssSyncAcrossDevices ? (s.customThemeCss ?? '') : (s.serverCustomThemeCss ?? ''),
showFavorites: s.showFavorites,
@@ -948,8 +925,6 @@ class Accessibility {
if (m.showStickersInAutocomplete !== undefined)
s.showStickersInExpressionAutocomplete = m.showStickersInAutocomplete;
if (m.showMemesInAutocomplete !== undefined) s.showMemesInExpressionAutocomplete = m.showMemesInAutocomplete;
s.attachmentMediaDimensionSize = MEDIA_DIMENSION_FROM_PROTO[m.attachmentMediaDimensionSize];
s.embedMediaDimensionSize = MEDIA_DIMENSION_FROM_PROTO[m.embedMediaDimensionSize];
if (m.voiceChannelJoinRequiresDoubleClick !== undefined)
s.voiceChannelJoinRequiresDoubleClick = m.voiceChannelJoinRequiresDoubleClick;
if (m.customThemeCss !== undefined) {
@@ -1278,10 +1253,6 @@ class Accessibility {
this.showStickersInExpressionAutocomplete = validated.showStickersInExpressionAutocomplete;
if (validated.showMemesInExpressionAutocomplete !== undefined)
this.showMemesInExpressionAutocomplete = validated.showMemesInExpressionAutocomplete;
if (validated.attachmentMediaDimensionSize !== undefined)
this.attachmentMediaDimensionSize = validated.attachmentMediaDimensionSize;
if (validated.embedMediaDimensionSize !== undefined)
this.embedMediaDimensionSize = validated.embedMediaDimensionSize;
if (validated.voiceChannelJoinRequiresDoubleClick !== undefined)
this.voiceChannelJoinRequiresDoubleClick = validated.voiceChannelJoinRequiresDoubleClick;
if (hasCustomThemeCssUpdate) {
@@ -1390,8 +1361,6 @@ class Accessibility {
data.showStickersInExpressionAutocomplete ?? this.showStickersInExpressionAutocomplete,
showMemesInExpressionAutocomplete:
data.showMemesInExpressionAutocomplete ?? this.showMemesInExpressionAutocomplete,
attachmentMediaDimensionSize: data.attachmentMediaDimensionSize ?? this.attachmentMediaDimensionSize,
embedMediaDimensionSize: data.embedMediaDimensionSize ?? this.embedMediaDimensionSize,
voiceChannelJoinRequiresDoubleClick:
data.voiceChannelJoinRequiresDoubleClick ?? this.voiceChannelJoinRequiresDoubleClick,
customThemeCss: data.customThemeCss !== undefined ? data.customThemeCss : this.customThemeCss,
fluxer_app/src/features/channel/components/embeds/attachments/Attachment.tsx
+2 -2
View File
@@ -106,7 +106,7 @@ const VideoAttachment: FC<AttachmentMediaProps & {message?: Message; isPreview?:
const embedUrl = attachment.url ?? '';
const proxyUrl = attachment.proxy_url ?? embedUrl;
const nsfw = attachment.nsfw || (attachment.flags & MessageAttachmentFlags.CONTAINS_EXPLICIT_MEDIA) !== 0;
const attachmentDimensions = getAttachmentMediaDimensions(message);
const attachmentDimensions = getAttachmentMediaDimensions();
const videoLayoutConstraints = getInlineVideoLayoutConstraints(attachmentDimensions);
return (
<FocusRing
@@ -250,7 +250,7 @@ const AttachmentMedia: FC<AttachmentMediaProps & {message?: Message; isPreview?:
/>
);
}
const attachmentDimensions = getAttachmentMediaDimensions(message);
const attachmentDimensions = getAttachmentMediaDimensions();
const mediaCalculator = createCalculator({
maxWidth: attachmentDimensions.maxWidth,
maxHeight: attachmentDimensions.maxHeight,
fluxer_app/src/features/channel/components/embeds/attachments/AttachmentGridItem.tsx
+1 -1
View File
@@ -128,7 +128,7 @@ export const AttachmentGridItem: FC<AttachmentGridItemProps> = observer(
) : (
node
);
const mosaicDimensions = getMosaicMediaDimensions(message);
const mosaicDimensions = getMosaicMediaDimensions();
const maxMosaicWidth = mosaicDimensions.maxWidth;
let targetWidth = maxMosaicWidth;
let targetHeight = maxMosaicWidth;
fluxer_app/src/features/channel/components/embeds/attachments/AttachmentMosaic.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ const AttachmentMosaicComponent: FC<AttachmentMosaicProps> = observer(
({attachments, message, hideExpiryFootnote, isPreview, snapshotIndex, onDelete}) => {
const {i18n} = useLingui();
const mediaAttachments = useMemo(() => attachments.filter(isMediaAttachment), [attachments]);
const mosaicDimensions = getMosaicMediaDimensions(message);
const mosaicDimensions = getMosaicMediaDimensions();
const mosaicStyle: AttachmentMosaicStyle = {
'--attachment-media-max-height': remFromPx(mosaicDimensions.maxHeight),
'--attachment-media-max-width': remFromPx(mosaicDimensions.maxWidth),
fluxer_app/src/features/channel/components/embeds/attachments/AttachmentSingleMedia.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export const AttachmentSingleMedia: FC<AttachmentSingleMediaProps> = observer(
);
const naturalWidth = attachment.width!;
const naturalHeight = attachment.height!;
const attachmentDimensions = getAttachmentMediaDimensions(message);
const attachmentDimensions = getAttachmentMediaDimensions();
const videoLayoutConstraints = getInlineVideoLayoutConstraints(attachmentDimensions);
const standaloneMediaCalculator = createCalculator({
maxWidth: attachmentDimensions.maxWidth,
fluxer_app/src/features/messaging/commands/ScheduledMessageCommands.tsx
+1 -2
View File
@@ -133,13 +133,12 @@ function claimScheduleAttachments(params: ScheduleMessageParams, nonce: string):
params.content,
params.messageReference,
params.replyMentioning,
params.favoriteMemeId,
);
}
async function prepareScheduledMessage(params: ScheduleMessageParams): Promise<PreparedScheduledMessage> {
const nonce = SnowflakeUtils.fromTimestamp(Date.now());
const normalized = normalizeMessageContent(params.content, params.favoriteMemeId);
const normalized = normalizeMessageContent(params.content);
claimScheduleAttachments(params, nonce);
let attachments: Array<ApiAttachmentMetadata> | undefined;
let files: Array<File> | undefined;
fluxer_app/src/features/messaging/hooks/useMessageSubmission.tsx
-1
View File
@@ -105,7 +105,6 @@ export const useMessageSubmission = ({channel, referencedMessage, replyingMessag
content,
messageReference,
replyingMessage?.mentioning,
favoriteMemeId,
),
{
formatMultipleFileLabel: (count) => formatUploadingAttachmentSummary(i18n, count),
fluxer_app/src/features/messaging/utils/MediaDimensionConfig.ts
+43 -24
View File
@@ -1,36 +1,55 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import Accessibility, {MediaDimensionSize} from '@app/features/accessibility/state/Accessibility';
import type {Message} from '@app/features/messaging/models/MessagingMessage';
import {fitMediaWithinBounds} from '@app/features/ui/utils/DimensionUtils';
import type {MediaDimensions} from '@app/lib/branded-types';
import {MessageFlags} from '@fluxer/constants/src/ChannelConstants';
interface MediaDimensionConstraints extends MediaDimensions {}
const DIMENSION_PRESETS = {
SMALL: {
maxWidth: 400,
maxHeight: 300,
},
LARGE: {
maxWidth: 550,
maxHeight: 400,
},
} as const;
export const ATTACHMENT_MAX_WIDTH = 550;
export const ATTACHMENT_MAX_HEIGHT = 350;
export const EMBED_MAX_WIDTH = 400;
export const EMBED_MAX_HEIGHT = 300;
export const EMBED_TALL_MAX_HEIGHT = 450;
export const MIN_USEFUL_MEDIA_SIZE = 40;
export function getAttachmentMediaDimensions(message?: Message): MediaDimensionConstraints {
if (message && (message.flags & MessageFlags.COMPACT_ATTACHMENTS) !== 0) {
return DIMENSION_PRESETS.SMALL;
}
const size = Accessibility.attachmentMediaDimensionSize;
return size === MediaDimensionSize.SMALL ? DIMENSION_PRESETS.SMALL : DIMENSION_PRESETS.LARGE;
const ATTACHMENT_DIMENSIONS: MediaDimensionConstraints = {
maxWidth: ATTACHMENT_MAX_WIDTH,
maxHeight: ATTACHMENT_MAX_HEIGHT,
};
const EMBED_DIMENSIONS: MediaDimensionConstraints = {
maxWidth: EMBED_MAX_WIDTH,
maxHeight: EMBED_MAX_HEIGHT,
};
const EMBED_TALL_DIMENSIONS: MediaDimensionConstraints = {
maxWidth: EMBED_MAX_WIDTH,
maxHeight: EMBED_TALL_MAX_HEIGHT,
};
export function getAttachmentMediaDimensions(): MediaDimensionConstraints {
return ATTACHMENT_DIMENSIONS;
}
export function getEmbedMediaDimensions(): MediaDimensionConstraints {
const size = Accessibility.embedMediaDimensionSize;
return size === MediaDimensionSize.SMALL ? DIMENSION_PRESETS.SMALL : DIMENSION_PRESETS.LARGE;
export function getEmbedMediaDimensions(isTallMedia = false): MediaDimensionConstraints {
return isTallMedia ? EMBED_TALL_DIMENSIONS : EMBED_DIMENSIONS;
}
export function getMosaicMediaDimensions(message?: Message): MediaDimensionConstraints {
return getAttachmentMediaDimensions(message);
export function getMosaicMediaDimensions(): MediaDimensionConstraints {
return ATTACHMENT_DIMENSIONS;
}
export function isUsefulVisualMediaSize(
naturalWidth: number,
naturalHeight: number,
constraints: MediaDimensionConstraints = ATTACHMENT_DIMENSIONS,
): boolean {
if (!(naturalWidth > 0) || !(naturalHeight > 0)) return false;
const fitted = fitMediaWithinBounds({
width: naturalWidth,
height: naturalHeight,
maxWidth: constraints.maxWidth,
maxHeight: constraints.maxHeight,
});
return fitted.width >= MIN_USEFUL_MEDIA_SIZE && fitted.height >= MIN_USEFUL_MEDIA_SIZE;
}
fluxer_app/src/features/messaging/utils/MessageRequestUtils.ts
+3 -6
View File
@@ -74,12 +74,12 @@ export interface NormalizedMessageContent {
flags: number;
}
export function normalizeMessageContent(content: string, favoriteMemeId?: string): NormalizedMessageContent {
export function normalizeMessageContent(content: string): NormalizedMessageContent {
const withoutSilent = removeSilentFlag(content);
const converted = applyOutgoingEmoticonConversion(withoutSilent);
const sanitized = maybeSanitizeOutgoingMessage(converted);
const normalizedContent = hasVisibleMessageContent(sanitized) ? sanitized : '';
const flags = getMessageFlags(content, favoriteMemeId);
const flags = getMessageFlags(content);
return {content: normalizedContent, flags};
}
@@ -130,14 +130,11 @@ const removeSilentFlag = (content: string): string => {
const applyOutgoingEmoticonConversion = (content: string): string => {
return ChatInputSettings.convertEmoticons ? convertEmoticonsToEmoji(content) : content;
};
const getMessageFlags = (content: string, favoriteMemeId?: string): number => {
const getMessageFlags = (content: string): number => {
let flags = 0;
if (isSilentMessage(content)) {
flags |= MessageFlags.SUPPRESS_NOTIFICATIONS;
}
if (favoriteMemeId) {
flags |= MessageFlags.COMPACT_ATTACHMENTS;
}
return flags;
};
const shouldIncludeAllowedMentions = (allowedMentions?: AllowedMentions): boolean => {
fluxer_app/src/features/messaging/utils/MessageSubmitUtils.ts
+2 -3
View File
@@ -40,7 +40,7 @@ export function createUploadingAttachments(
}
export function createOptimisticMessage(data: MessageSubmitData, attachments: Array<MessageAttachment>): Message {
const normalized = normalizeMessageContent(data.content, data.favoriteMemeId);
const normalized = normalizeMessageContent(data.content);
const content = normalized.content;
const flags = normalized.flags;
return new Message({
@@ -77,14 +77,13 @@ export function claimMessageAttachments(
content: string,
messageReference?: MessageReference,
replyMentioning?: boolean,
favoriteMemeId?: string,
): Array<{
filename: string;
file: {
size: number;
};
}> {
const normalized = normalizeMessageContent(content, favoriteMemeId);
const normalized = normalizeMessageContent(content);
const allowedMentions: AllowedMentions = {replied_user: replyMentioning ?? true};
return CloudUpload.claimAttachmentsForMessage(channelId, nonce, undefined, {
content: normalized.content,
fluxer_app/src/features/user/components/modals/tabs/ChatSettingsTab.tsx
-5
View File
@@ -2,9 +2,7 @@
import {SettingsSection} from '@app/features/app/components/dialogs/shared/SettingsSection';
import {SettingsTabContainer, SettingsTabContent} from '@app/features/app/components/dialogs/shared/SettingsTabLayout';
import {MEDIA_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors';
import {InputTabContent} from '@app/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabInputTab';
import {MediaTabContent} from '@app/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabMediaTab';
import {DisplayTabContent} from '@app/features/user/components/modals/tabs/chat_settings_tab/DisplayTab';
import {msg} from '@lingui/core/macro';
import {useLingui} from '@lingui/react/macro';
@@ -30,9 +28,6 @@ const ChatSettingsTab: React.FC = observer(() => {
<SettingsSection id="input" title={i18n._(INPUT_DESCRIPTOR)} data-flx="user.chat-settings-tab.input">
<InputTabContent data-flx="user.chat-settings-tab.input-tab-content" />
</SettingsSection>
<SettingsSection id="media" title={i18n._(MEDIA_DESCRIPTOR)} data-flx="user.chat-settings-tab.media">
<MediaTabContent data-flx="user.chat-settings-tab.media-tab-content" />
</SettingsSection>
</SettingsTabContent>
</SettingsTabContainer>
);
fluxer_app/src/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabInline.tsx
-9
View File
@@ -1,10 +1,8 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import {SettingsSection} from '@app/features/app/components/dialogs/shared/SettingsSection';
import {MEDIA_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors';
import styles from '@app/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabInline.module.css';
import {InputTabContent} from '@app/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabInputTab';
import {MediaTabContent} from '@app/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabMediaTab';
import {DisplayTabContent} from '@app/features/user/components/modals/tabs/chat_settings_tab/DisplayTab';
import {msg} from '@lingui/core/macro';
import {useLingui} from '@lingui/react/macro';
@@ -37,13 +35,6 @@ export const ChatSettingsInlineContent: React.FC = observer(() => {
>
<InputTabContent data-flx="user.chat-settings-tab.inline.chat-settings-inline-content.input-tab-content" />
</SettingsSection>
<SettingsSection
id="media"
title={i18n._(MEDIA_DESCRIPTOR)}
data-flx="user.chat-settings-tab.inline.chat-settings-inline-content.media"
>
<MediaTabContent data-flx="user.chat-settings-tab.inline.chat-settings-inline-content.media-tab-content" />
</SettingsSection>
</div>
);
});
fluxer_app/src/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabMediaTab.module.css
-137
View File
@@ -1,137 +0,0 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */
.sectionContent {
margin-top: 0.5rem;
}
.radioSections {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.radioSection {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.radioLabelContainer {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.radioLabel {
display: block;
font-weight: 500;
font-size: 0.875rem;
color: var(--text-primary);
}
.previewContainer {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.previewWrapper {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: stretch;
gap: 0.35rem;
max-width: 28rem;
width: 20rem;
}
.previewBox {
position: relative;
display: flex;
aspect-ratio: 16 / 9;
width: 100%;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 0.25rem;
background-color: var(--background-tertiary);
}
.previewIcon {
height: 4rem;
width: 4rem;
color: var(--text-tertiary);
}
.gifIndicator {
position: absolute;
top: 0.5rem;
left: 0.5rem;
z-index: 10;
border-radius: 0.25rem;
background-color: rgba(0, 0, 0, 0.6);
padding: 0.125rem 0.375rem;
font-weight: 600;
font-size: 0.8125rem;
line-height: 1.1;
color: white;
}
.actionButtons {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 10;
display: flex;
gap: 0.25rem;
}
.actionButton {
display: flex;
height: 2rem;
width: 2rem;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
border: 0.0625rem solid var(--background-modifier-accent);
background-color: var(--background-primary);
box-shadow:
0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1),
0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06);
cursor: pointer;
}
.actionButtonIcon {
color: var(--text-primary);
}
.suppressButton {
position: absolute;
top: 0.25rem;
right: -2rem;
display: flex;
height: 1.5rem;
width: 1.5rem;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
background: transparent;
border: none;
color: var(--text-tertiary);
transition:
background-color 0.15s,
color 0.15s;
cursor: pointer;
padding: 0;
}
.suppressButton:hover {
color: var(--status-danger);
}
.expiryFootnotePreview {
width: 100%;
}
fluxer_app/src/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabMediaTab.tsx
-101
View File
@@ -1,101 +0,0 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import * as AccessibilityCommands from '@app/features/accessibility/commands/AccessibilityCommands';
import Accessibility, {MediaDimensionSize} from '@app/features/accessibility/state/Accessibility';
import type {RadioOption} from '@app/features/ui/radio_group/RadioGroup';
import {RadioGroup} from '@app/features/ui/radio_group/RadioGroup';
import styles from '@app/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabMediaTab.module.css';
import {msg} from '@lingui/core/macro';
import {Trans, useLingui} from '@lingui/react/macro';
import {observer} from 'mobx-react-lite';
import type React from 'react';
import {useMemo} from 'react';
const COMPACT_400X300_DESCRIPTOR = msg({
message: 'Compact (400x300)',
comment: 'Short label in the media tab. Keep it concise.',
});
const SMALLER_MEDIA_SIZE_DESCRIPTOR = msg({
message: 'Smaller media size',
comment: 'Short label in the media tab. Keep it concise.',
});
const COMFORTABLE_550X400_DESCRIPTOR = msg({
message: 'Comfortable (550x400)',
comment: 'Short label in the media tab. Keep it concise.',
});
const LARGER_MEDIA_SIZE_WITH_MORE_DETAIL_DESCRIPTOR = msg({
message: 'Larger media size with more detail',
comment: 'Description text in the media tab.',
});
const SELECT_MEDIA_SIZE_FOR_EMBEDDED_CONTENT_FROM_LINKS_DESCRIPTOR = msg({
message: 'Select media size for embedded content from links',
comment: 'Button or menu action label in the media tab. Keep it concise.',
});
const SELECT_MEDIA_SIZE_FOR_UPLOADED_ATTACHMENTS_DESCRIPTOR = msg({
message: 'Select media size for uploaded attachments',
comment: 'Button or menu action label in the media tab. Keep it concise.',
});
export const MediaTabContent: React.FC = observer(() => {
const {i18n} = useLingui();
const {embedMediaDimensionSize, attachmentMediaDimensionSize} = Accessibility;
const mediaSizeOptions = useMemo(
(): ReadonlyArray<RadioOption<MediaDimensionSize>> => [
{
value: MediaDimensionSize.SMALL,
name: i18n._(COMPACT_400X300_DESCRIPTOR),
desc: i18n._(SMALLER_MEDIA_SIZE_DESCRIPTOR),
},
{
value: MediaDimensionSize.LARGE,
name: i18n._(COMFORTABLE_550X400_DESCRIPTOR),
desc: i18n._(LARGER_MEDIA_SIZE_WITH_MORE_DETAIL_DESCRIPTOR),
},
],
[i18n.locale],
);
return (
<div className={styles.radioSections} data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-sections">
<div className={styles.radioSection} data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-section">
<div
className={styles.radioLabelContainer}
data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-label-container"
>
<div className={styles.radioLabel} data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-label">
<Trans>Media from links (embeds)</Trans>
</div>
</div>
<RadioGroup
options={mediaSizeOptions}
value={embedMediaDimensionSize}
onChange={(value) => AccessibilityCommands.update({embedMediaDimensionSize: value})}
aria-label={i18n._(SELECT_MEDIA_SIZE_FOR_EMBEDDED_CONTENT_FROM_LINKS_DESCRIPTOR)}
data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-group.update"
/>
</div>
<div
className={styles.radioSection}
data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-section--2"
>
<div
className={styles.radioLabelContainer}
data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-label-container--2"
>
<div
className={styles.radioLabel}
data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-label--2"
>
<Trans>Uploaded attachments</Trans>
</div>
</div>
<RadioGroup
options={mediaSizeOptions}
value={attachmentMediaDimensionSize}
onChange={(value) => AccessibilityCommands.update({attachmentMediaDimensionSize: value})}
aria-label={i18n._(SELECT_MEDIA_SIZE_FOR_UPLOADED_ATTACHMENTS_DESCRIPTOR)}
data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-group.update--2"
/>
</div>
</div>
);
});
packages/constants/src/ChannelConstants.ts
+1 -6
View File
@@ -93,19 +93,14 @@ export const MessageFlags = {
SUPPRESS_EMBEDS: 1 << 2,
SUPPRESS_NOTIFICATIONS: 1 << 12,
VOICE_MESSAGE: 1 << 13,
COMPACT_ATTACHMENTS: 1 << 17,
} as const;
export const MessageFlagsDescriptions: Record<keyof typeof MessageFlags, string> = {
SUPPRESS_EMBEDS: 'Do not include embeds when serialising this message',
SUPPRESS_NOTIFICATIONS: 'This message will not trigger push or desktop notifications',
VOICE_MESSAGE: 'This message is a voice message',
COMPACT_ATTACHMENTS: 'Display attachments in a compact format',
};
export const SENDABLE_MESSAGE_FLAGS =
MessageFlags.SUPPRESS_EMBEDS |
MessageFlags.SUPPRESS_NOTIFICATIONS |
MessageFlags.COMPACT_ATTACHMENTS |
MessageFlags.VOICE_MESSAGE;
MessageFlags.SUPPRESS_EMBEDS | MessageFlags.SUPPRESS_NOTIFICATIONS | MessageFlags.VOICE_MESSAGE;
export const MessageAttachmentFlags = {
IS_SPOILER: 1 << 3,
CONTAINS_EXPLICIT_MEDIA: 1 << 4,
packages/schema/proto/fluxer/user/preferences/v1/accessibility.proto
+2 -8
View File
@@ -54,8 +54,8 @@ message AccessibilitySettings {
optional bool show_stickers_in_autocomplete = 40;
optional bool show_memes_in_autocomplete = 41;
MediaDimensionSize attachment_media_dimension_size = 42;
MediaDimensionSize embed_media_dimension_size = 43;
reserved 42, 43;
reserved "attachment_media_dimension_size", "embed_media_dimension_size";
optional bool voice_channel_join_requires_double_click = 44;
optional string custom_theme_css = 45;
@@ -93,12 +93,6 @@ enum ChannelTypingIndicatorMode {
CHANNEL_TYPING_INDICATOR_MODE_HIDDEN = 3;
}
enum MediaDimensionSize {
MEDIA_DIMENSION_SIZE_UNSPECIFIED = 0;
MEDIA_DIMENSION_SIZE_SMALL = 1;
MEDIA_DIMENSION_SIZE_LARGE = 2;
}
enum DmMessagePreviewMode {
DM_MESSAGE_PREVIEW_MODE_UNSPECIFIED = 0;
DM_MESSAGE_PREVIEW_MODE_ALL = 1;
packages/schema/src/gen/fluxer/user/preferences/v1/accessibility_pb.ts
+3 -39
View File
File diff suppressed because one or more lines are too long