From e1b620602de816ba9bf17e0fe9d1135fa0ffc5e1 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 26 Apr 2018 16:48:08 -0400 Subject: [PATCH] Display attachments from disk --- js/views/attachment_view.js | 1 + js/views/conversation_view.js | 33 ++++++++++++++---------- preload.js | 2 ++ ts/components/Lightbox.tsx | 14 +++++----- ts/components/LightboxGallery.tsx | 43 +++++++++++++++++++++++-------- ts/types/Attachment.ts | 12 ++++++--- 6 files changed, 70 insertions(+), 35 deletions(-) diff --git a/js/views/attachment_view.js b/js/views/attachment_view.js index ac6c4f49c..b71a68aa7 100644 --- a/js/views/attachment_view.js +++ b/js/views/attachment_view.js @@ -180,6 +180,7 @@ Signal.Types.AttachmentTS.save({ attachment: this.model, document, + getAbsolutePath: Signal.Migrations.getAbsoluteAttachmentPath, timestamp: this.timestamp, }); }, diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 4a63737f7..86402b0e4 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -282,8 +282,8 @@ if (this.quoteView) { this.quoteView.remove(); } - if (this.lightboxView) { - this.lightboxView.remove(); + if (this.lightboxGalleryView) { + this.lightboxGalleryView.remove(); } if (this.panels && this.panels.length) { for (let i = 0, max = this.panels.length; i < max; i += 1) { @@ -598,6 +598,7 @@ WhisperMessageCollection, }); + // NOTE: Could we show grid previews from disk as well? const loadMessages = Signal.Components.Types.Message .loadWithObjectURL(Signal.Migrations.loadMessage); const media = await loadMessages(rawMedia); @@ -605,30 +606,36 @@ const saveAttachment = async ({ message } = {}) => { const attachment = message.attachments[0]; const timestamp = message.received_at; - Signal.Types.AttachmentTS.save({ attachment, timestamp }); + Signal.Types.AttachmentTS.save({ + attachment, + document, + getAbsolutePath: Signal.Migrations.getAbsoluteAttachmentPath, + timestamp, + }); }; const onItemClick = async ({ message, type }) => { - const loadedMessage = Signal.Components.Types.Message - .withObjectURL(await Signal.Migrations.loadMessage(message)); switch (type) { case 'documents': { - saveAttachment({ message: loadedMessage }); + saveAttachment({ message }); break; } case 'media': { - const attachment = loadedMessage.attachments[0]; - this.lightboxView = new Whisper.ReactWrapperView({ - Component: Signal.Components.Lightbox, + const selectedIndex = media.findIndex(mediaMessage => + mediaMessage.id === message.id); + const { getAbsoluteAttachmentPath } = Signal.Migrations; + this.lightboxGalleryView = new Whisper.ReactWrapperView({ + Component: Signal.Components.LightboxGallery, props: { - objectURL: loadedMessage.objectURL, - contentType: attachment.contentType, - onSave: () => saveAttachment({ message: loadedMessage }), + getAbsoluteAttachmentPath, + messages: media, + onSave: () => saveAttachment({ message }), + selectedIndex, }, onClose: () => Signal.Backbone.Views.Lightbox.hide(), }); - Signal.Backbone.Views.Lightbox.show(this.lightboxView.el); + Signal.Backbone.Views.Lightbox.show(this.lightboxGalleryView.el); break; } diff --git a/preload.js b/preload.js index 60fb78e0b..d25a5b467 100644 --- a/preload.js +++ b/preload.js @@ -166,6 +166,7 @@ window.Signal.Logs = require('./js/modules/logs'); // React components const { Lightbox } = require('./ts/components/Lightbox'); +const { LightboxGallery } = require('./ts/components/LightboxGallery'); const { MediaGallery } = require('./ts/components/conversation/media-gallery/MediaGallery'); const { Quote } = require('./ts/components/conversation/Quote'); @@ -175,6 +176,7 @@ const MediaGalleryMessage = window.Signal.Components = { Lightbox, + LightboxGallery, MediaGallery, Types: { Message: MediaGalleryMessage, diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx index a274b9ba8..7a72ff623 100644 --- a/ts/components/Lightbox.tsx +++ b/ts/components/Lightbox.tsx @@ -117,7 +117,7 @@ export class Lightbox extends React.Component { } public render() { - const { contentType, objectURL } = this.props; + const { contentType, objectURL, onNext, onPrevious, onSave } = this.props; return (
{
- {this.props.onSave ? ( + {onSave ? ( ) : null}
- {this.props.onPrevious ? ( - + {onPrevious ? ( + ) : ( )} - {this.props.onNext ? ( - + {onNext ? ( + ) : ( )} diff --git a/ts/components/LightboxGallery.tsx b/ts/components/LightboxGallery.tsx index a08b6bef3..ae6a822a2 100644 --- a/ts/components/LightboxGallery.tsx +++ b/ts/components/LightboxGallery.tsx @@ -5,18 +5,18 @@ import React from 'react'; import * as MIME from '../types/MIME'; import { Lightbox } from './Lightbox'; +import { Message } from './conversation/media-gallery/types/Message'; interface Item { - objectURL: string; + objectURL?: string; contentType: MIME.MIMEType | undefined; } interface Props { close: () => void; - items: Array; - // onNext?: () => void; - // onPrevious?: () => void; - onSave?: () => void; + getAbsoluteAttachmentPath: (relativePath: string) => string; + messages: Array; + onSave?: ({ message }: { message: Message }) => void; selectedIndex: number; } @@ -24,6 +24,11 @@ interface State { selectedIndex: number; } +const messageToItem = (message: Message): Item => ({ + objectURL: message.attachments[0].path, + contentType: message.attachments[0].contentType, +}); + export class LightboxGallery extends React.Component { public static defaultProps: Partial = { selectedIndex: 0, @@ -38,25 +43,30 @@ export class LightboxGallery extends React.Component { } public render() { - const { close, items, onSave } = this.props; + const { close, getAbsoluteAttachmentPath, messages, onSave } = this.props; const { selectedIndex } = this.state; - const selectedItem: Item = items[selectedIndex]; + const selectedMessage: Message = messages[selectedIndex]; + const selectedItem = messageToItem(selectedMessage); const firstIndex = 0; const onPrevious = selectedIndex > firstIndex ? this.handlePrevious : undefined; - const lastIndex = items.length - 1; + const lastIndex = messages.length - 1; const onNext = selectedIndex < lastIndex ? this.handleNext : undefined; + const objectURL = selectedItem.objectURL + ? getAbsoluteAttachmentPath(selectedItem.objectURL) + : 'images/video.svg'; + return ( ); @@ -72,8 +82,19 @@ export class LightboxGallery extends React.Component { this.setState((prevState, props) => ({ selectedIndex: Math.min( prevState.selectedIndex + 1, - props.items.length - 1 + props.messages.length - 1 ), })); }; + + private handleSave = () => { + const { messages, onSave } = this.props; + if (!onSave) { + return; + } + + const { selectedIndex } = this.state; + const message = messages[selectedIndex]; + onSave({ message }); + }; } diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts index e9b287547..55351a5eb 100644 --- a/ts/types/Attachment.ts +++ b/ts/types/Attachment.ts @@ -47,16 +47,20 @@ export const isVisualMedia = (attachment: Attachment): boolean => { export const save = ({ attachment, document, + getAbsolutePath, timestamp, }: { attachment: Attachment; document: Document; + getAbsolutePath: (relativePath: string) => string; timestamp?: number; }): void => { - const url = arrayBufferToObjectURL({ - data: attachment.data, - type: SAVE_CONTENT_TYPE, - }); + const url = !is.undefined(attachment.path) + ? getAbsolutePath(attachment.path) + : arrayBufferToObjectURL({ + data: attachment.data, + type: SAVE_CONTENT_TYPE, + }); const filename = getSuggestedFilename({ attachment, timestamp }); saveURLAsFile({ url, filename, document }); URL.revokeObjectURL(url);