Introduce new UI and behavior for playing audio attachments in
conversations. Previously, playback stopped unexpectedly during window
resizes and scrolling through the messages due to the row height
recomputation in `react-virtualized`.
With this commit we introduce `<GlobalAudioContext/>` instance that
wraps whole conversation and provides an `<audio/>` element that
doesn't get re-rendered (or destroyed) whenever `react-virtualized`
recomputes messages. The audio players (with a freshly designed UI) now
share this global `<audio/>` instance and manage access to it using
`audioPlayer.owner` state from the redux.
New UI computes on the fly, caches, and displays waveforms for each
audio attachment. Storybook had to be slightly modified to accomodate
testing of Android bubbles by introducing the new knob for
`authorColor`.
Also:
- visually distinguish any reference we couldn't verify on receipt
- show toast on quote click if we can't scroll to message
- toast visuals redesigned to match rest of app
Also:
- New schema version 8 with video/image thumbnails, screenshots, sizes
- Upgrade messages not at current schema version when loading messages
to show in conversation
- New MessageDetail react component
- New ConversationHeader react component
Note that substantial changes will be required for the updated Android
mockups, putting the quotation into the text box next to the attachment
preview.
But only if it doesn't have an error.
Also: reformatted message template in legacy_templates.js to match what
is in background.html for easier diffing.
- A new design for the import flow. It features:
- Icons at the top of every screen
- Gray background, blue buttons, thinner text
- Simpler copy
- A new design for the install flow. It features:
- Immediate entry into the QR code screen
- Animated dots to show that we're loading the QR code from the server
- Fewer screens: 1) QR 2) device name 3) sync-in-progress
- When not set up, the app opens directly into the install screen, which has been streamlined. The `--import` command-line argument will cause the app to open directly into the import flow.
- Support for two different flavors of builds - the normal build will open into the standard registration flow, and the import flavor will be exactly the same except during setup it will open directly into the import flow.
- A new design for the (dev-only) standalone registration view
- When these install sequences are active, the OS File menu has entries to allow you to switch the method of setup you'd like to use. These go away as soon as the first step is taken in any of these flows.
- The device name (chosen on initial setup) is now shown in the settings panel
- At the end of a light import, we hand off to the normal device link screen, starting at the QR code. On a full import, we remove the sensitive encryption information in the export to prevent conflicts on multiple imports.
- `Whisper.Backup.exportToDirectory()` takes an options object so you can tell it to do a light export.
- `Whisper.Backup.importFromDirectory()` takes an options object so you can force it to load only the light components found on disk. It also returns an object so you can tell whether a given import was a full import or light import.
- On start of import, we build a list of all the ids present in the messages, conversations, and groups stores in IndexedDB. This can take some time if a lot of data is in the database already, but it makes the subsequent deduplicated import very fast.
- Disappearing messages are now excluded when exporting
- Remove some TODOs in the tests
This commit adds a badge to the tray icon that displays the number of
unread messages, if there is any. It is implemented by providing
alternative versions of the icon, that replace the default image when a
message is received.
The badge is rendered graphically as a red circle containing the number
of unread messages. Since a different icon file is needed for each
possible number of unread messages, but this number is clearly
unbounded, only the numbers from 1 to 9 are provided. If there are 10 or
more unread messages, a single badge (depicted as "9+") is used.
Resolves#1917
* Add emoji button and popup panel
This integrates a simple third party emoji panel with a few css overrides to
correct some relative paths and colors.
The trickiest thing about this is ensuring we don't break the layout, which is
acheived through precise control over the panel's height, and prodigious calls
to updateMessageFieldSize.
// FREEBIE
* Don't close emoji panel on click, do close on send
To better facilitate multiple emoji entry.
// FREEBIE
* Make panel emojis bigger and higher resolution
// FREEBIE
* Move paperclip button to the right of the microphone
This makes our bottom-bar button arrangement more comfortable and consistent
with Android.
// FREEBIE
* Move emoji picker padding to inner container
* Insert emojis at cursor position
Don't just append to the end like a n00b! Also handle selected text correctly.
https://stackoverflow.com/questions/11076975
// FREEBIE
* A few visual tweaks to reduce visual complexity of emoji panel
- No gray buffer on the right side of the emoji panel
- No gray buffer between message compose text box and emoji window
- The scroll bar for the emojis is the same as our normal scrollbars
Either icon-gen or local scaling of images was producing a corrupted and
glitchy .icns file. With this module, we need only provide a 1024px
image and it handles the scaling and generation of all other icon
assets.
// FREEBIE
Move these to where the build expects them to be.
In theory electron-builder should generate these from a build/icon.icns
but that doesn't seem to be working.
// FREEBIE
`npm run icon-gen` builds icon files from png files in the images
directory, outputting to build/icon.{ico,icns} (the expected location
for electron-builder).
// FREEBIE
A good bit of CSS was required to keep the text color changing along
with the text it is nestled within.
Also: took this opportunity to increase the contrast of the number and
verified section right under the contact name in the group members view.
FREEBIE
Add names and sizes for all attachments except images, and (as with
arbitrary attachments), clicking on the text will open a save dialog.
In the absence of a filename, choose something that makes sense.
Display different icons for different media types, including distinct icons
for voice notes and audio files.
In iOS theme, audio, video, voice, and files are all encapsulated in bubbles.
Closes#804Closes#842Closes#836
// FREEBIE
Make arbitrary files look nicer and display the filename.
If an audio or video element fails to load for any reason, timeout after
a few seconds and render it as an arbitrary file. Also short circuit to
this treatment for common audio and video file types that we know are
going to fail, e.g., proprietary formats from apple.
// FREEBIE
* Fixes hourglasses
* Fix delivered status icon
* Other changes aiming for more consistency of visual structure
between light and dark themes.
* Restores left pane header focus/transition effect.
Use emojijs for replacing unicode with image tags for display. We were
already using it to replace colons with unicode. Additionally it has
a companion data repo that is kept up to date with images from all
the common image sets.
// FREEBIE
* Refactor options.js into a view
* Break up install flow into a series of screens
* Remove bootstrap
* Make installer window static size, mostly to facilitate positioning
// FREEBIE
The 19 and 38 px versions were used when we had a browser extension (not
packaged app) with a browser action button, but no more.
The big one was never used.
This reverts commit 31e7d285e3.
This seemed like a nice feature, but the popup bubble isn't very
conducive to nontrivial user inputs, e.g. file inputs.
Fixes#211
Rather than opening the inbox in its own window, let it appear as a
browser action popup by default, but allow promotion to its own window
if requested.
Closes#173
Previously, in the event of a failed websocket auth, we would attempt to
reconnect once a second ad infinitum. This changeset ensures that we
only reconnect automatically if the socket closed 'normally' as
indicated by the code on the socket's CloseEvent. Otherwise, show a
'Websocket closed' error on the inbox view.
Ideally we would show a more contextual error (ie, 'Unauthorized'), but
unfortunately the actual server response code is not available to our
code. It can be observed in the console output from the background page,
but programmatically, we only receive the WebSocket CloseEvent codes
listed here:
https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent#Status_codes
The websocket error message is displayed by a normally-hidden but ever
present socket status element. Clicking this element will immediately
refresh the background page, which will try again to open the websocket
connection.
When first intalling, users will no longer be presented with the option
to register as a standalone client.
For developer convenience, the standalone form can still be found at
chrome-extension://.../register.html
Closes#159
Render the entire conversation from a template, because some parts of it
must be rendered conditionally if it is a group vs private conversation.
Also apply some style fixes and restore lost functionality:
* Make conversation title bar fixed.
* Widens message bubbles.
* Unhide message list.
* Restore attachment rendering.
* Restore message sending and attachment file selection.
* Style attachments file input as a paperclip.
* Style send button like on Android and make it a submit input.
