{!large ? leftHandSideButtonsFragment : null}
- {!large ? (
+ {isViewOnceActive && (
+
+ )}
+ {!isViewOnceActive && !large && (
<>
{!dirty ? micButtonFragment : null}
{editMessageFragment}
{attButton}
- ) : null}
+ )}
= {}): Props => {
inputApi: null,
shouldHidePopovers: null,
linkPreviewResult: null,
+ showViewOnceButton: false,
+ isViewOnceActive: false,
+ onToggleViewOnce: action('onToggleViewOnce'),
};
};
@@ -142,3 +145,30 @@ export function Mentions(): React.JSX.Element {
export function NoFormattingMenu(): React.JSX.Element {
return
;
}
+
+export function ViewOnceButton(): React.JSX.Element {
+ const [isActive, setIsActive] = React.useState(false);
+ const props = useProps();
+
+ return (
+
setIsActive(!isActive)}
+ />
+ );
+}
+
+export function ViewOnceButtonActive(): React.JSX.Element {
+ const props = useProps();
+
+ return (
+
+ );
+}
diff --git a/ts/components/CompositionInput.dom.tsx b/ts/components/CompositionInput.dom.tsx
index be194ad5e7..032cb16c58 100644
--- a/ts/components/CompositionInput.dom.tsx
+++ b/ts/components/CompositionInput.dom.tsx
@@ -83,6 +83,9 @@ import type { EmojiCompletionOptions } from '../quill/emoji/completion.dom.js';
import { useFunEmojiLocalizer } from './fun/useFunEmojiLocalizer.dom.js';
import { MAX_BODY_ATTACHMENT_BYTE_LENGTH } from '../util/longAttachment.std.js';
import type { FunEmojiSelection } from './fun/panels/FunPanelEmojis.dom.js';
+import { AxoSymbol } from '../axo/AxoSymbol.dom.js';
+import { AxoTooltip } from '../axo/AxoTooltip.dom.js';
+import { tw } from '../axo/tw.dom.js';
const log = createLogger('CompositionInput');
@@ -159,6 +162,9 @@ export type Props = Readonly<{
linkPreviewLoading?: boolean;
linkPreviewResult: LinkPreviewForUIType | null;
onCloseLinkPreview?(conversationId: string): unknown;
+ showViewOnceButton: boolean;
+ isViewOnceActive: boolean;
+ onToggleViewOnce: () => void;
}>;
const BASE_CLASS_NAME = 'module-composition-input';
@@ -195,6 +201,9 @@ export function CompositionInput(props: Props): React.ReactElement {
sendCounter,
sortedGroupMembers,
theme,
+ showViewOnceButton,
+ isViewOnceActive,
+ onToggleViewOnce,
} = props;
const [emojiCompletionElement, setEmojiCompletionElement] =
@@ -876,7 +885,7 @@ export function CompositionInput(props: Props): React.ReactElement {
}}
formats={getQuillFormats()}
placeholder={placeholder || i18n('icu:sendMessage')}
- readOnly={disabled}
+ readOnly={disabled || isViewOnceActive}
ref={element => {
if (!element) {
return;
@@ -988,16 +997,22 @@ export function CompositionInput(props: Props): React.ReactElement {
};
}, [isMouseDown]);
+ const isInputEnabled = !disabled && !isViewOnceActive;
+
return (
{({ ref }) => (
{draftEditMessage && (
@@ -1024,6 +1039,11 @@ export function CompositionInput(props: Props): React.ReactElement {
/>
)}
{children}
+ {isViewOnceActive && (
+
+ {i18n('icu:CompositionArea--viewOnceMediaPlaceholder')}
+
+ )}
)}
undefined,
+ isHighQuality: false,
i18n,
imageToBlurHash: input => Promise.resolve(input.toString()),
imageSrc: IMAGE_2,
@@ -55,6 +56,12 @@ Portrait.args = {
imageSrc: IMAGE_4,
};
+export const ViewOnce = Template.bind({});
+ViewOnce.args = {
+ isViewOnce: false,
+ showViewOnceToggle: true,
+};
+
export const Sending = Template.bind({});
Sending.args = {
isSending: true,
diff --git a/ts/components/MediaEditor.dom.tsx b/ts/components/MediaEditor.dom.tsx
index ecfc001a0e..9b79bd7557 100644
--- a/ts/components/MediaEditor.dom.tsx
+++ b/ts/components/MediaEditor.dom.tsx
@@ -44,7 +44,6 @@ import { ContextMenu } from './ContextMenu.dom.js';
import { IMAGE_PNG } from '../types/MIME.std.js';
import { SizeObserver } from '../hooks/useSizeObserver.dom.js';
import { Slider } from './Slider.dom.js';
-import { Spinner } from './Spinner.dom.js';
import { Theme } from '../util/theme.std.js';
import { ThemeType } from '../types/Util.std.js';
import { arrow } from '../util/keyboard.dom.js';
@@ -62,6 +61,9 @@ import type { FunEmojiSelection } from './fun/panels/FunPanelEmojis.dom.js';
import { FunStickerPicker } from './fun/FunStickerPicker.dom.js';
import type { FunStickerSelection } from './fun/panels/FunPanelStickers.dom.js';
import { drop } from '../util/drop.std.js';
+import { MediaQualitySelector } from './MediaQualitySelector.dom.js';
+import { AxoButton } from '../axo/AxoButton.dom.js';
+import { tw } from '../axo/tw.dom.js';
import type { FunTimeStickerStyle } from './fun/constants.dom.js';
import * as Errors from '../types/errors.std.js';
@@ -75,6 +77,8 @@ export type MediaEditorResultType = Readonly<{
blurHash: string;
caption?: string;
captionBodyRanges?: DraftBodyRanges;
+ isViewOnce?: boolean;
+ isHighQuality?: boolean;
}>;
export type PropsType = {
@@ -89,6 +93,9 @@ export type PropsType = {
convertDraftBodyRangesIntoHydrated: (
bodyRanges: DraftBodyRanges | undefined
) => HydratedBodyRangesType | undefined;
+ isHighQuality?: boolean;
+ isViewOnce?: boolean;
+ showViewOnceToggle?: boolean;
} & Pick<
CompositionInputProps,
| 'draftText'
@@ -159,6 +166,9 @@ export function MediaEditor({
isSending,
onClose,
onDone,
+ isHighQuality,
+ isViewOnce,
+ showViewOnceToggle = false,
// CompositionInput
draftText,
@@ -182,6 +192,15 @@ export function MediaEditor({
const [caption, setCaption] = useState(draftText ?? '');
const [captionBodyRanges, setCaptionBodyRanges] =
useState(draftBodyRanges);
+ const [localIsViewOnce, setLocalIsViewOnce] = useState(isViewOnce ?? false);
+ const hasViewOnceChange = localIsViewOnce !== (isViewOnce ?? false);
+ const [localIsHighQuality, setLocalIsHighQuality] = useState(
+ isHighQuality ?? false
+ );
+ const hasHighQualityChange =
+ typeof isHighQuality === 'boolean' && localIsHighQuality !== isHighQuality;
+ const showMediaQualitySelector = typeof isHighQuality === 'boolean';
+ const pickerTheme = ThemeType.dark;
const hydratedBodyRanges = useMemo(
() => convertDraftBodyRangesIntoHydrated(captionBodyRanges ?? undefined),
@@ -209,6 +228,10 @@ export function MediaEditor({
}
}, []);
+ const handleSelectQuality = useCallback((_id: string, isHQ: boolean) => {
+ setLocalIsHighQuality(isHQ);
+ }, []);
+
const handlePickSticker = useCallback(
(_packId: string, _stickerId: number, src: string) => {
async function run() {
@@ -362,8 +385,18 @@ export function MediaEditor({
});
const onTryClose = useCallback(() => {
- confirmDiscardIf(canUndo || isCreatingStory, onClose);
- }, [confirmDiscardIf, canUndo, isCreatingStory, onClose]);
+ confirmDiscardIf(
+ canUndo || isCreatingStory || hasViewOnceChange || hasHighQualityChange,
+ onClose
+ );
+ }, [
+ confirmDiscardIf,
+ canUndo,
+ isCreatingStory,
+ hasViewOnceChange,
+ hasHighQualityChange,
+ onClose,
+ ]);
tryClose.current = onTryClose;
// Keyboard support
@@ -1317,13 +1350,40 @@ export function MediaEditor({
showTimeStickers
onSelectTimeSticker={handlePickTimeSticker}
placement="top"
- theme={ThemeType.dark}
+ theme={pickerTheme}
>
-
+
+
+
+
+
+ {showMediaQualitySelector && (
+
+
+
+ )}
+
-
-
-
-
+ showViewOnceButton={showViewOnceToggle}
+ isViewOnceActive={localIsViewOnce}
+ onToggleViewOnce={() => {
+ const newValue = !localIsViewOnce;
+ setLocalIsViewOnce(newValue);
+ if (newValue) {
+ setEmojiPickerOpen(false);
+ }
+ }}
+ />
-
+ {doneButtonLabel || i18n('icu:save')}
+
)}
diff --git a/ts/components/MediaQualitySelector.dom.tsx b/ts/components/MediaQualitySelector.dom.tsx
index 16a9dfba8e..adce410c53 100644
--- a/ts/components/MediaQualitySelector.dom.tsx
+++ b/ts/components/MediaQualitySelector.dom.tsx
@@ -2,16 +2,11 @@
// SPDX-License-Identifier: AGPL-3.0-only
import type { KeyboardEvent } from 'react';
-import React, { useCallback, useEffect, useState } from 'react';
-import lodash from 'lodash';
-import { createPortal } from 'react-dom';
+import React, { useCallback, useRef, useState } from 'react';
import classNames from 'classnames';
-import { Manager, Popper, Reference } from 'react-popper';
+import { Popover } from 'radix-ui';
import type { LocalizerType } from '../types/Util.std.js';
-import { useRefMerger } from '../hooks/useRefMerger.std.js';
-import { handleOutsideClick } from '../util/handleOutsideClick.dom.js';
-
-const { noop } = lodash;
+import { AxoIconButton } from '../axo/AxoIconButton.dom.js';
export type PropsType = {
conversationId: string;
@@ -26,182 +21,115 @@ export function MediaQualitySelector({
isHighQuality,
onSelectQuality,
}: PropsType): React.JSX.Element {
- const [menuShowing, setMenuShowing] = useState(false);
- const [popperRoot, setPopperRoot] = useState
(null);
- const [focusedOption, setFocusedOption] = useState<0 | 1 | undefined>(
- undefined
+ const [open, setOpen] = useState(false);
+ const standardRef = useRef(null);
+ const highRef = useRef(null);
+
+ const handleOpenAutoFocus = useCallback(
+ (e: Event) => {
+ e.preventDefault();
+ if (isHighQuality) {
+ highRef.current?.focus();
+ } else {
+ standardRef.current?.focus();
+ }
+ },
+ [isHighQuality]
);
- const buttonRef = React.useRef(null);
- const refMerger = useRefMerger();
-
- const handleClick = () => {
- setMenuShowing(true);
- };
-
- const handleKeyDown = (ev: KeyboardEvent) => {
- if (!popperRoot) {
- if (ev.key === 'Enter') {
- setFocusedOption(isHighQuality ? 1 : 0);
- }
- return;
- }
-
+ const handleContentKeyDown = useCallback((ev: KeyboardEvent) => {
if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
- setFocusedOption(oldFocusedOption => (oldFocusedOption === 1 ? 0 : 1));
- ev.stopPropagation();
- ev.preventDefault();
- }
-
- if (ev.key === 'Enter') {
- onSelectQuality(conversationId, Boolean(focusedOption));
- setMenuShowing(false);
- ev.stopPropagation();
- ev.preventDefault();
- }
- };
-
- const handleClose = useCallback(() => {
- setMenuShowing(false);
- setFocusedOption(undefined);
- }, [setMenuShowing]);
-
- useEffect(() => {
- if (menuShowing) {
- const root = document.createElement('div');
- setPopperRoot(root);
- document.body.appendChild(root);
-
- return () => {
- document.body.removeChild(root);
- setPopperRoot(null);
- };
- }
-
- return noop;
- }, [menuShowing, setPopperRoot, handleClose]);
-
- useEffect(() => {
- if (!menuShowing) {
- return noop;
- }
-
- return handleOutsideClick(
- () => {
- handleClose();
- return true;
- },
- {
- containerElements: [popperRoot, buttonRef],
- name: 'MediaQualitySelector',
+ if (document.activeElement === standardRef.current) {
+ highRef.current?.focus();
+ } else {
+ standardRef.current?.focus();
}
- );
- }, [menuShowing, popperRoot, handleClose]);
+ ev.stopPropagation();
+ ev.preventDefault();
+ }
+ }, []);
return (
-
-
- {({ ref }) => (
-
- )}
-
- {menuShowing && popperRoot
- ? createPortal(
-
- {({ ref, style, placement }) => (
-
-
- {i18n('icu:MediaQualitySelector--title')}
-
-
-
-
+ {i18n('icu:MediaQualitySelector--title')}
+
+
+ className="MediaQualitySelector__option"
+ type="button"
+ onClick={() => {
+ onSelectQuality(conversationId, false);
+ setOpen(false);
+ }}
+ >
+
+
+
+ {i18n('icu:MediaQualitySelector--standard-quality-title')}
+
+
+ {i18n(
+ 'icu:MediaQualitySelector--standard-quality-description'
+ )}
+
+