Add global setting for sent media quality

_locales/en/messages.json

@@ -63,6 +63,18 @@
     "message": "Membership is pending",
     "description": "Shown below the group name when selecting a group to invite a contact to, when the group item is disabled"
   },
+  "Preferences__sent-media-quality": {
+    "message": "Sent media quality",
+    "description": "Title for the sent media quality setting"
+  },
+  "sentMediaQualityStandard": {
+    "message": "Standard",
+    "description": "Label text for standard media quality option"
+  },
+  "sentMediaQualityHigh": {
+    "message": "High",
+    "description": "Label text for high media quality option"
+  },
   "softwareAcknowledgments": {
     "message": "Software Acknowledgments",
     "description": "Shown in the about box for the link to software acknowledgments"

ts/components/Preferences.stories.tsx

@@ -107,6 +107,7 @@ const getDefaultArgs = (): PropsDataType => ({
   selectedMicrophone: availableMicrophones[0],
   selectedSpeaker: availableSpeakers[1],
   shouldShowStoriesSettings: true,
+  sentMediaQualitySetting: 'standard',
   themeSetting: 'system',
   universalExpireTimer: DurationInSeconds.HOUR,
   whoCanFindMe: PhoneNumberDiscoverability.Discoverable,
@@ -158,6 +159,7 @@ export default {
     onSelectedCameraChange: { action: true },
     onSelectedMicrophoneChange: { action: true },
     onSelectedSpeakerChange: { action: true },
+    onSentMediaQualityChange: { action: true },
     onSpellCheckChange: { action: true },
     onThemeChange: { action: true },
     onUniversalExpireTimerChange: { action: true },

ts/components/Preferences.tsx

@@ -9,8 +9,9 @@ import type { AudioDevice } from 'ringrtc';
 
 import type { MediaDeviceSettings } from '../types/Calling';
 import type {
-  ZoomFactorType,
   NotificationSettingType,
+  SentMediaQualitySettingType,
+  ZoomFactorType,
 } from '../types/Storage.d';
 import type { ThemeSettingType } from '../types/StorageUIKeys';
 import { Button, ButtonVariant } from './Button';
@@ -24,7 +25,11 @@ import type {
   DefaultConversationColorType,
 } from '../types/Colors';
 import { DisappearingTimeDialog } from './DisappearingTimeDialog';
-import type { LocalizerType, ThemeType } from '../types/Util';
+import type {
+  LocalizerType,
+  SentMediaQualityType,
+  ThemeType,
+} from '../types/Util';
 import { PhoneNumberDiscoverability } from '../util/phoneNumberDiscoverability';
 import { PhoneNumberSharingMode } from '../util/phoneNumberSharingMode';
 import { Select } from './Select';
@@ -76,6 +81,7 @@ export type PropsDataType = {
   selectedCamera?: string;
   selectedMicrophone?: AudioDevice;
   selectedSpeaker?: AudioDevice;
+  sentMediaQualitySetting: SentMediaQualitySettingType;
   themeSetting: ThemeSettingType;
   universalExpireTimer: DurationInSeconds;
   whoCanFindMe: PhoneNumberDiscoverability;
@@ -149,6 +155,7 @@ type PropsFunctionType = {
   onSelectedCameraChange: SelectChangeHandlerType<string | undefined>;
   onSelectedMicrophoneChange: SelectChangeHandlerType<AudioDevice | undefined>;
   onSelectedSpeakerChange: SelectChangeHandlerType<AudioDevice | undefined>;
+  onSentMediaQualityChange: SelectChangeHandlerType<SentMediaQualityType>;
   onSpellCheckChange: CheckboxChangeHandlerType;
   onThemeChange: SelectChangeHandlerType<ThemeType>;
   onUniversalExpireTimerChange: SelectChangeHandlerType<number>;
@@ -267,6 +274,7 @@ export function Preferences({
   onSelectedCameraChange,
   onSelectedMicrophoneChange,
   onSelectedSpeakerChange,
+  onSentMediaQualityChange,
   onSpellCheckChange,
   onThemeChange,
   onUniversalExpireTimerChange,
@@ -278,6 +286,7 @@ export function Preferences({
   selectedCamera,
   selectedMicrophone,
   selectedSpeaker,
+  sentMediaQualitySetting,
   setGlobalDefaultConversationColor,
   shouldShowStoriesSettings,
   themeSetting,
@@ -535,6 +544,25 @@ export function Preferences({
             name="linkPreviews"
             onChange={noop}
           />
+          <Control
+            left={i18n('Preferences__sent-media-quality')}
+            right={
+              <Select
+                onChange={onSentMediaQualityChange}
+                options={[
+                  {
+                    text: i18n('sentMediaQualityStandard'),
+                    value: 'standard',
+                  },
+                  {
+                    text: i18n('sentMediaQualityHigh'),
+                    value: 'high',
+                  },
+                ]}
+                value={sentMediaQualitySetting}
+              />
+            }
+          />
         </SettingsRow>
         {isSyncSupported && (
           <SettingsRow>

ts/main/settingsChannel.ts

@@ -85,6 +85,7 @@ export class SettingsChannel extends EventEmitter {
     this.installSetting('audioNotification');
     this.installSetting('countMutedConversations');
 
+    this.installSetting('sentMediaQualitySetting');
     this.installSetting('spellCheck', {
       isEphemeral: true,
     });

ts/state/ducks/composer.ts

@@ -36,7 +36,7 @@ export type ComposerStateType = {
   linkPreviewLoading: boolean;
   linkPreviewResult?: LinkPreviewType;
   quotedMessage?: Pick<MessageAttributesType, 'conversationId' | 'quote'>;
-  shouldSendHighQualityAttachments: boolean;
+  shouldSendHighQualityAttachments?: boolean;
 };
 
 // Actions
@@ -287,7 +287,6 @@ export function getEmptyState(): ComposerStateType {
   return {
     attachments: [],
     linkPreviewLoading: false,
-    shouldSendHighQualityAttachments: false,
   };
 }
 
@@ -306,7 +305,7 @@ export function reducer(
       attachments,
       ...(attachments.length
         ? {}
-        : { shouldSendHighQualityAttachments: false }),
+        : { shouldSendHighQualityAttachments: undefined }),
     };
   }
 

ts/state/smart/CompositionArea.tsx

@@ -93,7 +93,10 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
     // MediaEditor
     imageToBlurHash,
     // MediaQualitySelector
-    shouldSendHighQualityAttachments,
+    shouldSendHighQualityAttachments:
+      shouldSendHighQualityAttachments !== undefined
+        ? shouldSendHighQualityAttachments
+        : window.storage.get('sent-media-quality') === 'high',
     // StagedLinkPreview
     linkPreviewLoading,
     linkPreviewResult,

ts/test-both/state/ducks/composer_test.ts

@@ -82,7 +82,7 @@ describe('both/state/ducks/composer', () => {
       assert.deepEqual(state.attachments, attachments);
 
       assert.deepEqual(state.attachments, attachments);
-      assert.isFalse(state.shouldSendHighQualityAttachments);
+      assert.isUndefined(state.shouldSendHighQualityAttachments);
     });
 
     it('does not update redux if the conversation is not selected', () => {
@@ -122,7 +122,7 @@ describe('both/state/ducks/composer', () => {
       const { setMediaQualitySetting } = actions;
       const state = getEmptyState();
 
-      assert.isFalse(state.shouldSendHighQualityAttachments);
+      assert.isUndefined(state.shouldSendHighQualityAttachments);
 
       const nextState = reducer(state, setMediaQualitySetting(true));
 

ts/types/Storage.d.ts

@@ -30,6 +30,8 @@ export type SerializedCertificateType = {
 
 export type ZoomFactorType = 0.75 | 1 | 1.25 | 1.5 | 2 | number;
 
+export type SentMediaQualitySettingType = 'standard' | 'high';
+
 export type NotificationSettingType = 'message' | 'name' | 'count' | 'off';
 
 export type IdentityKeyMap = Record<
@@ -57,6 +59,7 @@ export type StorageAccessType = {
   'notification-draw-attention': boolean;
   'notification-setting': NotificationSettingType;
   'read-receipt-setting': boolean;
+  'sent-media-quality': SentMediaQualitySettingType;
   'spell-check': boolean;
   'theme-setting': ThemeSettingType;
   attachmentMigration_isComplete: boolean;

ts/types/Util.ts

@@ -53,6 +53,11 @@ export type LocalizerType = {
   getLocale(): string;
 };
 
+export enum SentMediaQualityType {
+  'standard' = 'standard',
+  'high' = 'high',
+}
+
 export enum ThemeType {
   'light' = 'light',
   'dark' = 'dark',

ts/util/createIPCEvents.tsx

@@ -45,6 +45,7 @@ import { lookupConversationWithoutUuid } from './lookupConversationWithoutUuid';
 import * as log from '../logging/log';
 import { deleteAllMyStories } from './deleteAllMyStories';
 
+type SentMediaQualityType = 'standard' | 'high';
 type ThemeType = 'light' | 'dark' | 'system';
 type NotificationSettingType = 'message' | 'name' | 'count' | 'off';
 
@@ -65,6 +66,7 @@ export type IPCEventsValuesType = {
   preferredAudioInputDevice: AudioDevice | undefined;
   preferredAudioOutputDevice: AudioDevice | undefined;
   preferredVideoInputDevice: string | undefined;
+  sentMediaQualitySetting: SentMediaQualityType;
   spellCheck: boolean;
   systemTraySetting: SystemTraySetting;
   themeSetting: ThemeType;
@@ -298,6 +300,10 @@ export function createIPCEvents(
       window.storage.get('auto-download-update', true),
     setAutoDownloadUpdate: value =>
       window.storage.put('auto-download-update', value),
+    getSentMediaQualitySetting: () =>
+      window.storage.get('sent-media-quality', 'standard'),
+    setSentMediaQualitySetting: value =>
+      window.storage.put('sent-media-quality', value),
     getThemeSetting: () => window.storage.get('theme-setting', 'system'),
     setThemeSetting: value => {
       const promise = window.storage.put('theme-setting', value);

ts/views/conversation_view.tsx

@@ -2563,9 +2563,15 @@ export class ConversationView extends window.Backbone.View<ConversationModel> {
         ).filter(isNotNil);
       }
 
+      const shouldSendHighQualityAttachments = window.reduxStore
+        ? window.reduxStore.getState().composer.shouldSendHighQualityAttachments
+        : undefined;
+
       const sendHQImages =
-        window.reduxStore &&
-        window.reduxStore.getState().composer.shouldSendHighQualityAttachments;
+        shouldSendHighQualityAttachments !== undefined
+          ? shouldSendHighQualityAttachments
+          : window.storage.get('sent-media-quality') === 'high';
+
       const sendDelta = Date.now() - this.sendStart;
 
       log.info('Send pre-checks took', sendDelta, 'milliseconds');

ts/windows/preload.ts

@@ -61,6 +61,7 @@ installSetting('notificationDrawAttention');
 installSetting('notificationSetting');
 installSetting('spellCheck');
 installSetting('systemTraySetting');
+installSetting('sentMediaQualitySetting');
 installSetting('themeSetting');
 installSetting('universalExpireTimer');
 installSetting('zoomFactor');

ts/windows/settings/preload.ts

@@ -43,6 +43,7 @@ const settingNotificationDrawAttention = createSetting(
 const settingNotificationSetting = createSetting('notificationSetting');
 const settingRelayCalls = createSetting('alwaysRelayCalls');
 const settingSpellCheck = createSetting('spellCheck');
+const settingSentMediaQuality = createSetting('sentMediaQualitySetting');
 const settingTheme = createSetting('themeSetting');
 const settingSystemTraySetting = createSetting('systemTraySetting');
 
@@ -157,6 +158,7 @@ const renderPreferences = async () => {
     selectedCamera,
     selectedMicrophone,
     selectedSpeaker,
+    sentMediaQualitySetting,
     systemTraySetting,
     themeSetting,
     universalExpireTimer,
@@ -195,6 +197,7 @@ const renderPreferences = async () => {
     selectedCamera: settingVideoInput.getValue(),
     selectedMicrophone: settingAudioInput.getValue(),
     selectedSpeaker: settingAudioOutput.getValue(),
+    sentMediaQualitySetting: settingSentMediaQuality.getValue(),
     systemTraySetting: settingSystemTraySetting.getValue(),
     themeSetting: settingTheme.getValue(),
     universalExpireTimer: settingUniversalExpireTimer.getValue(),
@@ -254,6 +257,7 @@ const renderPreferences = async () => {
     selectedCamera,
     selectedMicrophone,
     selectedSpeaker,
+    sentMediaQualitySetting,
     themeSetting,
     universalExpireTimer: DurationInSeconds.fromSeconds(universalExpireTimer),
     whoCanFindMe,
@@ -350,6 +354,7 @@ const renderPreferences = async () => {
     onSelectedCameraChange: reRender(settingVideoInput.setValue),
     onSelectedMicrophoneChange: reRender(settingAudioInput.setValue),
     onSelectedSpeakerChange: reRender(settingAudioOutput.setValue),
+    onSentMediaQualityChange: reRender(settingSentMediaQuality.setValue),
     onSpellCheckChange: reRender(settingSpellCheck.setValue),
     onThemeChange: reRender(settingTheme.setValue),
     onUniversalExpireTimerChange: (newValue: number): Promise<void> => {