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

Add a stories toggle to Preferences

Browse source
This commit is contained in:
Josh Perez 2022-07-19 20:47:05 -04:00 committed by GitHub
parent 4d67c6b056
commit 0d2e6493f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 199 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_locales/en/messages.json
View file

@ -7169,6 +7169,14 @@
"message": "Sending reaction...",
"description": "Toast message"
},
"Stories__settings-toggle--title": {
"message": "Share & View Stories",
"description": "Select box title for the stories on/off toggle"
},
"Stories__settings-toggle--description": {
"message": "You will no longer be able to share or view Stories when this option is turned off.",
"description": "Select box description for the stories on/off toggle"
},
"StoryViewer__pause": {
"message": "Pause",
"description": "Aria label for pausing a story"

168
ts/components/Preferences.stories.tsx
View file

@ -1,16 +1,17 @@
// Copyright 2021 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 enMessages from '../../_locales/en/messages.json';
import type { PropsType } from './Preferences';
import type { PropsDataType, PropsType } from './Preferences';
import { Preferences } from './Preferences';
import { setupI18n } from '../util/setupI18n';
import { DEFAULT_CONVERSATION_COLOR } from '../types/Colors';
import { PhoneNumberSharingMode } from '../util/phoneNumberSharingMode';
import { PhoneNumberDiscoverability } from '../util/phoneNumberDiscoverability';
import { objectMap } from '../util/objectMap';
const i18n = setupI18n('en', enMessages);
@ -42,7 +43,7 @@ const availableSpeakers = [
},
];
const createProps = (): PropsType => ({
const getDefaultArgs = (): PropsDataType => ({
availableCameras: [
{
deviceId:
@ -73,6 +74,7 @@ const createProps = (): PropsType => ({
hasCallNotifications: true,
hasCallRingtoneNotification: false,
hasCountMutedConversations: false,
hasCustomTitleBar: true,
hasHideMenuBar: false,
hasIncomingCallNotifications: true,
hasLinkPreviews: true,
@ -85,38 +87,9 @@ const createProps = (): PropsType => ({
hasReadReceipts: true,
hasRelayCalls: false,
hasSpellCheck: true,
hasStoriesEnabled: true,
hasTypingIndicators: true,
lastSyncTime: Date.now(),
notificationContent: 'name',
selectedCamera:
'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c',
selectedMicrophone: availableMicrophones[0],
selectedSpeaker: availableSpeakers[1],
themeSetting: 'system',
universalExpireTimer: 3600,
whoCanFindMe: PhoneNumberDiscoverability.Discoverable,
whoCanSeeMe: PhoneNumberSharingMode.Everybody,
zoomFactor: 1,
addCustomColor: action('addCustomColor'),
closeSettings: action('closeSettings'),
doDeleteAllData: action('doDeleteAllData'),
doneRendering: action('doneRendering'),
editCustomColor: action('editCustomColor'),
getConversationsWithCustomColor: () => Promise.resolve([]),
initialSpellCheckSetting: true,
makeSyncRequest: () => {
action('makeSyncRequest');
return Promise.resolve();
},
removeCustomColor: action('removeCustomColor'),
removeCustomColorOnConversations: action('removeCustomColorOnConversations'),
resetAllChatColors: action('resetAllChatColors'),
resetDefaultChatColor: action('resetDefaultChatColor'),
setGlobalDefaultConversationColor: action(
'setGlobalDefaultConversationColor'
),
isAudioNotificationsSupported: true,
isAutoDownloadUpdatesSupported: true,
isAutoLaunchSupported: true,
@ -125,62 +98,95 @@ const createProps = (): PropsType => ({
isPhoneNumberSharingSupported: false,
isSyncSupported: true,
isSystemTraySupported: true,
lastSyncTime: Date.now(),
notificationContent: 'name',
selectedCamera:
'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c',
selectedMicrophone: availableMicrophones[0],
selectedSpeaker: availableSpeakers[1],
shouldShowStoriesSettings: true,
themeSetting: 'system',
universalExpireTimer: 3600,
whoCanFindMe: PhoneNumberDiscoverability.Discoverable,
whoCanSeeMe: PhoneNumberSharingMode.Everybody,
zoomFactor: 1,
});
onAudioNotificationsChange: action('onAudioNotificationsChange'),
onAutoDownloadUpdateChange: action('onAutoDownloadUpdateChange'),
onAutoLaunchChange: action('onAutoLaunchChange'),
onCallNotificationsChange: action('onCallNotificationsChange'),
onCallRingtoneNotificationChange: action('onCallRingtoneNotificationChange'),
onCountMutedConversationsChange: action('onCountMutedConversationsChange'),
onHideMenuBarChange: action('onHideMenuBarChange'),
onIncomingCallNotificationsChange: action(
'onIncomingCallNotificationsChange'
),
onLastSyncTimeChange: action('onLastSyncTimeChange'),
onMediaCameraPermissionsChange: action('onMediaCameraPermissionsChange'),
onMediaPermissionsChange: action('onMediaPermissionsChange'),
onMinimizeToAndStartInSystemTrayChange: action(
'onMinimizeToAndStartInSystemTrayChange'
),
onMinimizeToSystemTrayChange: action('onMinimizeToSystemTrayChange'),
onNotificationAttentionChange: action('onNotificationAttentionChange'),
onNotificationContentChange: action('onNotificationContentChange'),
onNotificationsChange: action('onNotificationsChange'),
onRelayCallsChange: action('onRelayCallsChange'),
onSelectedCameraChange: action('onSelectedCameraChange'),
onSelectedMicrophoneChange: action('onSelectedMicrophoneChange'),
onSelectedSpeakerChange: action('onSelectedSpeakerChange'),
onSpellCheckChange: action('onSpellCheckChange'),
onThemeChange: action('onThemeChange'),
onUniversalExpireTimerChange: action('onUniversalExpireTimerChange'),
onZoomFactorChange: action('onZoomFactorChange'),
i18n,
executeMenuRole: action('executeMenuRole'),
hasCustomTitleBar: true,
const defaultArgTypes: Record<string, { defaultValue: unknown }> = {};
objectMap(getDefaultArgs(), (key, defaultValue) => {
defaultArgTypes[key] = { defaultValue };
});
export default {
title: 'Components/Preferences',
component: Preferences,
argTypes: {
// ...defaultArgTypes,
i18n: {
defaultValue: i18n,
},
addCustomColor: { action: true },
closeSettings: { action: true },
doDeleteAllData: { action: true },
doneRendering: { action: true },
editCustomColor: { action: true },
executeMenuRole: { action: true },
getConversationsWithCustomColor: { action: true },
makeSyncRequest: { action: true },
onAudioNotificationsChange: { action: true },
onAutoDownloadUpdateChange: { action: true },
onAutoLaunchChange: { action: true },
onCallNotificationsChange: { action: true },
onCallRingtoneNotificationChange: { action: true },
onCountMutedConversationsChange: { action: true },
onHasStoriesEnabledChanged: { action: true },
onHideMenuBarChange: { action: true },
onIncomingCallNotificationsChange: { action: true },
onLastSyncTimeChange: { action: true },
onMediaCameraPermissionsChange: { action: true },
onMediaPermissionsChange: { action: true },
onMinimizeToAndStartInSystemTrayChange: { action: true },
onMinimizeToSystemTrayChange: { action: true },
onNotificationAttentionChange: { action: true },
onNotificationContentChange: { action: true },
onNotificationsChange: { action: true },
onRelayCallsChange: { action: true },
onSelectedCameraChange: { action: true },
onSelectedMicrophoneChange: { action: true },
onSelectedSpeakerChange: { action: true },
onSpellCheckChange: { action: true },
onThemeChange: { action: true },
onUniversalExpireTimerChange: { action: true },
onZoomFactorChange: { action: true },
removeCustomColor: { action: true },
removeCustomColorOnConversations: { action: true },
resetAllChatColors: { action: true },
resetDefaultChatColor: { action: true },
setGlobalDefaultConversationColor: { action: true },
},
} as Meta;
const Template: Story<PropsType> = args => <Preferences {...args} />;
export const _Preferences = Template.bind({});
_Preferences.args = getDefaultArgs();
export const Blocked1 = Template.bind({});
Blocked1.args = {
blockedCount: 1,
};
export const _Preferences = (): JSX.Element => (
<Preferences {...createProps()} />
);
export const Blocked1 = (): JSX.Element => (
<Preferences {...createProps()} blockedCount={1} />
);
export const BlockedMany = (): JSX.Element => (
<Preferences {...createProps()} blockedCount={55} />
);
export const CustomUniversalExpireTimer = (): JSX.Element => (
<Preferences {...createProps()} universalExpireTimer={9000} />
);
export const BlockedMany = Template.bind({});
BlockedMany.args = {
blockedCount: 55,
};
export const CustomUniversalExpireTimer = Template.bind({});
CustomUniversalExpireTimer.args = {
universalExpireTimer: 9000,
};
CustomUniversalExpireTimer.story = {
name: 'Custom universalExpireTimer',
};

84
ts/components/Preferences.tsx
View file

@ -44,7 +44,7 @@ import { useTheme } from '../hooks/useTheme';
type CheckboxChangeHandlerType = (value: boolean) => unknown;
type SelectChangeHandlerType<T = string | number> = (value: T) => unknown;
export type PropsType = {
export type PropsDataType = {
// Settings
blockedCount: number;
customColors: Record<string, CustomColorType>;
@ -68,6 +68,7 @@ export type PropsType = {
hasReadReceipts: boolean;
hasRelayCalls?: boolean;
hasSpellCheck: boolean;
hasStoriesEnabled: boolean;
hasTypingIndicators: boolean;
lastSyncTime?: number;
notificationContent: NotificationSettingType;
@ -80,16 +81,37 @@ export type PropsType = {
whoCanSeeMe: PhoneNumberSharingMode;
zoomFactor: ZoomFactorType;
// Other props
hasCustomTitleBar: boolean;
initialSpellCheckSetting: boolean;
shouldShowStoriesSettings: boolean;
// Limited support features
isAudioNotificationsSupported: boolean;
isAutoDownloadUpdatesSupported: boolean;
isAutoLaunchSupported: boolean;
isHideMenuBarSupported: boolean;
isNotificationAttentionSupported: boolean;
isPhoneNumberSharingSupported: boolean;
isSyncSupported: boolean;
isSystemTraySupported: boolean;
availableCameras: Array<
Pick<MediaDeviceInfo, 'deviceId' | 'groupId' | 'kind' | 'label'>
>;
} & Omit<MediaDeviceSettings, 'availableCameras'>;
type PropsFunctionType = {
// Other props
addCustomColor: (color: CustomColorType) => unknown;
closeSettings: () => unknown;
doDeleteAllData: () => unknown;
doneRendering: () => unknown;
editCustomColor: (colorId: string, color: CustomColorType) => unknown;
executeMenuRole: ExecuteMenuRoleType;
getConversationsWithCustomColor: (
colorId: string
) => Promise<Array<ConversationType>>;
initialSpellCheckSetting: boolean;
makeSyncRequest: () => unknown;
removeCustomColor: (colorId: string) => unknown;
removeCustomColorOnConversations: (colorId: string) => unknown;
@ -102,18 +124,6 @@ export type PropsType = {
value: CustomColorType;
}
) => unknown;
hasCustomTitleBar: boolean;
executeMenuRole: ExecuteMenuRoleType;
// Limited support features
isAudioNotificationsSupported: boolean;
isAutoDownloadUpdatesSupported: boolean;
isAutoLaunchSupported: boolean;
isHideMenuBarSupported: boolean;
isNotificationAttentionSupported: boolean;
isPhoneNumberSharingSupported: boolean;
isSyncSupported: boolean;
isSystemTraySupported: boolean;
// Change handlers
onAudioNotificationsChange: CheckboxChangeHandlerType;
@ -122,6 +132,7 @@ export type PropsType = {
onCallNotificationsChange: CheckboxChangeHandlerType;
onCallRingtoneNotificationChange: CheckboxChangeHandlerType;
onCountMutedConversationsChange: CheckboxChangeHandlerType;
onHasStoriesEnabledChanged: SelectChangeHandlerType<boolean>;
onHideMenuBarChange: CheckboxChangeHandlerType;
onIncomingCallNotificationsChange: CheckboxChangeHandlerType;
onLastSyncTimeChange: (time: number) => unknown;
@ -141,13 +152,11 @@ export type PropsType = {
onUniversalExpireTimerChange: SelectChangeHandlerType<number>;
onZoomFactorChange: SelectChangeHandlerType<ZoomFactorType>;
availableCameras: Array<
Pick<MediaDeviceInfo, 'deviceId' | 'groupId' | 'kind' | 'label'>
>;
// Localization
i18n: LocalizerType;
} & Omit<MediaDeviceSettings, 'availableCameras'>;
};
export type PropsType = PropsDataType & PropsFunctionType;
enum Page {
// Accessible through left nav
@ -218,6 +227,7 @@ export const Preferences = ({
hasReadReceipts,
hasRelayCalls,
hasSpellCheck,
hasStoriesEnabled,
hasTypingIndicators,
i18n,
initialSpellCheckSetting,
@ -239,6 +249,7 @@ export const Preferences = ({
onCallNotificationsChange,
onCallRingtoneNotificationChange,
onCountMutedConversationsChange,
onHasStoriesEnabledChanged,
onHideMenuBarChange,
onIncomingCallNotificationsChange,
onLastSyncTimeChange,
@ -265,12 +276,14 @@ export const Preferences = ({
selectedMicrophone,
selectedSpeaker,
setGlobalDefaultConversationColor,
shouldShowStoriesSettings,
themeSetting,
universalExpireTimer = 0,
whoCanFindMe,
whoCanSeeMe,
zoomFactor,
}: PropsType): JSX.Element => {
const storiesId = useUniqueId();
const themeSelectId = useUniqueId();
const zoomSelectId = useUniqueId();
@ -947,6 +960,39 @@ export const Preferences = ({
}
/>
</SettingsRow>
{shouldShowStoriesSettings && (
<SettingsRow title={i18n('Stories__title')}>
<Control
left={
<label htmlFor={storiesId}>
<div>{i18n('Stories__settings-toggle--title')}</div>
<div className="Preferences__description">
{i18n('Stories__settings-toggle--description')}
</div>
</label>
}
right={
<Select
id={storiesId}
onChange={value => {
onHasStoriesEnabledChanged(value === 'true');
}}
options={[
{
text: i18n('on'),
value: 'true',
},
{
text: i18n('off'),
value: 'false',
},
]}
value={String(hasStoriesEnabled)}
/>
}
/>
</SettingsRow>
)}
<SettingsRow>
<Control
left={

2
ts/main/settingsChannel.ts
View file

@ -61,6 +61,7 @@ export class SettingsChannel extends EventEmitter {
this.installCallback('isPrimary');
this.installCallback('syncRequest');
this.installCallback('isPhoneNumberSharingEnabled');
this.installCallback('shouldShowStoriesSettings');
// Getters only. These are set by the primary device
this.installSetting('blockedCount', { setter: false });
@ -103,6 +104,7 @@ export class SettingsChannel extends EventEmitter {
this.installSetting('lastSyncTime');
this.installSetting('universalExpireTimer');
this.installSetting('hasStoriesEnabled');
this.installSetting('zoomFactor');
installPermissionsHandler({ session, userConfig });

8
ts/state/selectors/items.ts
View file

@ -64,10 +64,12 @@ export const getUsernamesEnabled = createSelector(
);
export const getStoriesEnabled = createSelector(
getItems,
getRemoteConfig,
(remoteConfig: ConfigMapType): boolean =>
isRemoteConfigFlagEnabled(remoteConfig, 'desktop.internalUser') ||
isRemoteConfigFlagEnabled(remoteConfig, 'desktop.stories')
(state: ItemsStateType, remoteConfig: ConfigMapType): boolean =>
state.hasStoriesEnabled !== false &&
(isRemoteConfigFlagEnabled(remoteConfig, 'desktop.internalUser') ||
isRemoteConfigFlagEnabled(remoteConfig, 'desktop.stories'))
);
export const getDefaultConversationColor = createSelector(

1
ts/types/Storage.d.ts vendored
View file

@ -65,6 +65,7 @@ export type StorageAccessType = {
customColors: CustomColorsItemType;
device_name: string;
hasRegisterSupportForUnauthenticatedDelivery: boolean;
hasStoriesEnabled: boolean;
identityKeyMap: IdentityKeyMap;
lastHeartbeat: number;
lastStartup: number;

10
ts/util/createIPCEvents.tsx
View file

@ -4,6 +4,7 @@
import { webFrame } from 'electron';
import type { AudioDevice } from 'ringrtc';
import * as React from 'react';
import * as RemoteConfig from '../RemoteConfig';
import type { ZoomFactorType } from '../types/Storage.d';
import type {
@ -47,6 +48,7 @@ export type IPCEventsValuesType = {
callRingtoneNotification: boolean;
callSystemNotification: boolean;
countMutedConversations: boolean;
hasStoriesEnabled: boolean;
hideMenuBar: boolean | undefined;
incomingCallNotification: boolean;
lastSyncTime: number | undefined;
@ -111,6 +113,7 @@ export type IPCEventsCallbacksType = {
color: ConversationColorType,
customColor?: { id: string; value: CustomColorType }
) => void;
shouldShowStoriesSettings: () => boolean;
getDefaultConversationColor: () => DefaultConversationColorType;
persistZoomFactor: (factor: number) => Promise<void>;
};
@ -175,6 +178,10 @@ export function createIPCEvents(
webFrame.setZoomFactor(zoomFactor);
},
getHasStoriesEnabled: () => window.storage.get('hasStoriesEnabled', true),
setHasStoriesEnabled: (value: boolean) =>
window.storage.put('hasStoriesEnabled', value),
getPreferredAudioInputDevice: () =>
window.storage.get('preferred-audio-input-device'),
setPreferredAudioInputDevice: device =>
@ -331,6 +338,9 @@ export function createIPCEvents(
isPhoneNumberSharingEnabled: () => isPhoneNumberSharingEnabled(),
isPrimary: () => window.textsecure.storage.user.getDeviceId() === 1,
shouldShowStoriesSettings: () =>
RemoteConfig.isEnabled('desktop.internalUser') ||
RemoteConfig.isEnabled('desktop.stories'),
syncRequest: () =>
new Promise<void>((resolve, reject) => {
const FIVE_MINUTES = 5 * durations.MINUTE;

13
ts/windows/preload.ts
View file

@ -39,23 +39,26 @@ installSetting('typingIndicatorSetting', {
setter: false,
});
installCallback('isPhoneNumberSharingEnabled');
installCallback('isPrimary');
installCallback('shouldShowStoriesSettings');
installCallback('syncRequest');
installSetting('alwaysRelayCalls');
installSetting('audioNotification');
installSetting('autoDownloadUpdate');
installSetting('autoLaunch');
installSetting('countMutedConversations');
installSetting('callRingtoneNotification');
installSetting('callSystemNotification');
installSetting('countMutedConversations');
installSetting('deviceName');
installSetting('hasStoriesEnabled');
installSetting('hideMenuBar');
installSetting('incomingCallNotification');
installCallback('isPhoneNumberSharingEnabled');
installCallback('isPrimary');
installCallback('syncRequest');
installSetting('lastSyncTime');
installSetting('notificationDrawAttention');
installSetting('notificationSetting');
installSetting('spellCheck');
installSetting('lastSyncTime');
installSetting('systemTraySetting');
installSetting('themeSetting');
installSetting('universalExpireTimer');

15
ts/windows/settings/preload.ts
View file

@ -50,6 +50,7 @@ const settingSystemTraySetting = createSetting('systemTraySetting');
const settingLastSyncTime = createSetting('lastSyncTime');
const settingHasStoriesEnabled = createSetting('hasStoriesEnabled');
const settingZoomFactor = createSetting('zoomFactor');
// Getters only.
@ -84,6 +85,9 @@ const ipcGetCustomColors = createCallback('getCustomColors');
const ipcIsSyncNotSupported = createCallback('isPrimary');
const ipcMakeSyncRequest = createCallback('syncRequest');
const ipcPNP = createCallback('isPhoneNumberSharingEnabled');
const ipcShouldShowStoriesSettings = createCallback(
'shouldShowStoriesSettings'
);
// ChatColorPicker redux hookups
// The redux actions update over IPC through a preferences re-render
@ -146,6 +150,7 @@ const renderPreferences = async () => {
hasReadReceipts,
hasRelayCalls,
hasSpellCheck,
hasStoriesEnabled,
hasTypingIndicators,
isPhoneNumberSharingSupported,
lastSyncTime,
@ -162,8 +167,9 @@ const renderPreferences = async () => {
availableIODevices,
customColors,
isSyncNotSupported,
defaultConversationColor,
isSyncNotSupported,
shouldShowStoriesSettings,
} = await awaitObject({
blockedCount: settingBlockedCount.getValue(),
deviceName: settingDeviceName.getValue(),
@ -182,6 +188,7 @@ const renderPreferences = async () => {
hasReadReceipts: settingReadReceipts.getValue(),
hasRelayCalls: settingRelayCalls.getValue(),
hasSpellCheck: settingSpellCheck.getValue(),
hasStoriesEnabled: settingHasStoriesEnabled.getValue(),
hasTypingIndicators: settingTypingIndicators.getValue(),
isPhoneNumberSharingSupported: ipcPNP(),
lastSyncTime: settingLastSyncTime.getValue(),
@ -199,8 +206,9 @@ const renderPreferences = async () => {
// Callbacks
availableIODevices: ipcGetAvailableIODevices(),
customColors: ipcGetCustomColors(),
isSyncNotSupported: ipcIsSyncNotSupported(),
defaultConversationColor: ipcGetDefaultConversationColor(),
isSyncNotSupported: ipcIsSyncNotSupported(),
shouldShowStoriesSettings: ipcShouldShowStoriesSettings(),
});
const { availableCameras, availableMicrophones, availableSpeakers } =
@ -236,6 +244,7 @@ const renderPreferences = async () => {
hasReadReceipts,
hasRelayCalls,
hasSpellCheck,
hasStoriesEnabled,
hasTypingIndicators,
lastSyncTime,
notificationContent,
@ -263,6 +272,7 @@ const renderPreferences = async () => {
resetAllChatColors: ipcResetAllChatColors,
resetDefaultChatColor: ipcResetDefaultChatColor,
setGlobalDefaultConversationColor: ipcSetGlobalDefaultConversationColor,
shouldShowStoriesSettings,
// Limited support features
isAudioNotificationsSupported: Settings.isAudioNotificationSupported(),
@ -287,6 +297,7 @@ const renderPreferences = async () => {
onCountMutedConversationsChange: reRender(
settingCountMutedConversations.setValue
),
onHasStoriesEnabledChanged: reRender(settingHasStoriesEnabled.setValue),
onHideMenuBarChange: reRender(settingHideMenuBar.setValue),
onIncomingCallNotificationsChange: reRender(
settingIncomingCallNotification.setValue