diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 9846d0e1e..d1204ddff 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2572,5 +2572,8 @@ }, "next": { "message": "Next" + }, + "description": { + "message": "Description" } } diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index e5ae36612..fc5984518 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -213,7 +213,6 @@ this.showSafetyNumber(); }, onShowAllMedia: async () => { - await this.showAllMedia(); this.updateHeader(); }, onShowGroupMembers: async () => { @@ -901,150 +900,6 @@ el[0].scrollIntoView(); }, - async showAllMedia() { - // We fetch more documents than media as they don’t require to be loaded - // into memory right away. Revisit this once we have infinite scrolling: - const DEFAULT_MEDIA_FETCH_COUNT = 50; - const DEFAULT_DOCUMENTS_FETCH_COUNT = 150; - - const conversationId = this.model.get('id'); - - const getProps = async () => { - const rawMedia = await Signal.Data.getMessagesWithVisualMediaAttachments( - conversationId, - { - limit: DEFAULT_MEDIA_FETCH_COUNT, - MessageCollection: Whisper.MessageCollection, - } - ); - const rawDocuments = await Signal.Data.getMessagesWithFileAttachments( - conversationId, - { - limit: DEFAULT_DOCUMENTS_FETCH_COUNT, - MessageCollection: Whisper.MessageCollection, - } - ); - - // First we upgrade these messages to ensure that they have thumbnails - for (let max = rawMedia.length, i = 0; i < max; i += 1) { - const message = rawMedia[i]; - const { schemaVersion } = message; - - if (schemaVersion < Message.VERSION_NEEDED_FOR_DISPLAY) { - // Yep, we really do want to wait for each of these - // eslint-disable-next-line no-await-in-loop - rawMedia[i] = await upgradeMessageSchema(message); - // eslint-disable-next-line no-await-in-loop - await window.Signal.Data.saveMessage(rawMedia[i], { - Message: Whisper.Message, - }); - } - } - - const media = _.flatten( - rawMedia.map(message => { - const { attachments } = message; - return (attachments || []) - .filter( - attachment => - attachment.thumbnail && - !attachment.pending && - !attachment.error - ) - .map((attachment, index) => { - const { thumbnail } = attachment; - - return { - objectURL: getAbsoluteAttachmentPath(attachment.path), - thumbnailObjectUrl: thumbnail - ? getAbsoluteAttachmentPath(thumbnail.path) - : null, - contentType: attachment.contentType, - index, - attachment, - message, - }; - }); - }) - ); - - // Unlike visual media, only one non-image attachment is supported - const documents = rawDocuments.map(message => { - const attachments = message.attachments || []; - const attachment = attachments[0]; - return { - contentType: attachment.contentType, - index: 0, - attachment, - message, - }; - }); - - const saveAttachment = async ({ attachment, message } = {}) => { - const timestamp = message.received_at; - Signal.Types.Attachment.save({ - attachment, - document, - getAbsolutePath: getAbsoluteAttachmentPath, - timestamp, - }); - }; - - const onItemClick = async ({ message, attachment, type }) => { - switch (type) { - case 'documents': { - saveAttachment({ message, attachment }); - break; - } - - case 'media': { - const selectedIndex = media.findIndex( - mediaMessage => mediaMessage.attachment.path === attachment.path - ); - this.lightboxGalleryView = new Whisper.ReactWrapperView({ - className: 'lightbox-wrapper', - Component: Signal.Components.LightboxGallery, - props: { - media, - onSave: saveAttachment, - selectedIndex, - }, - onClose: () => Signal.Backbone.Views.Lightbox.hide(), - }); - Signal.Backbone.Views.Lightbox.show(this.lightboxGalleryView.el); - break; - } - - default: - throw new TypeError(`Unknown attachment type: '${type}'`); - } - }; - - return { - documents, - media, - onItemClick, - }; - }; - - const view = new Whisper.ReactWrapperView({ - className: 'panel-wrapper', - Component: Signal.Components.MediaGallery, - props: await getProps(), - onClose: () => { - this.stopListening(this.model.messageCollection, 'remove', update); - this.resetPanel(); - }, - }); - - const update = async () => { - view.update(await getProps()); - }; - - this.listenTo(this.model.messageCollection, 'remove', update); - - this.listenBack(view); - }, scrollToBottom() { // If we're above the last seen indicator, we should scroll there instead diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss new file mode 100644 index 000000000..fc32ed73f --- /dev/null +++ b/stylesheets/_session_group_panel.scss @@ -0,0 +1,125 @@ +.group-settings { + display: flex; + flex-direction: column; + height: 100vh; + width: 277px; + flex-shrink: 0; + border: 1px solid #2f2f2f; + background-color: $session-shade-4; + align-items: center; + + &-header { + margin-top: $session-margin-lg; + width: -webkit-fill-available; + display: flex; + flex-direction: row; + flex-shrink: 0; + + .module-avatar { + margin: auto; + } + + .session-icon-button { + margin: 0 $session-margin-md; + } + } + + h2 { + word-break: break-word; + } + + .description { + margin: $session-margin-md 0; + border: 1px solid $session-shade-6; + background-color: $session-shade-1; + min-height: 4rem; + width: inherit; + color: $session-color-white; + text-align: center; + } + + + &-item { + display: flex; + align-items: center; + background-color: $session-shade-1; + min-height: 3rem; + font-size: 0.8rem; + color: $session-color-white; + width: -webkit-fill-available; + padding: 0 $session-margin-md; + border-bottom: 1px solid $session-shade-6; + border-top: 1px solid $session-shade-6; + transition: $session-transition-duration; + cursor: pointer; + + &:hover { + @include session-dark-background-hover; + } + + } + + // no double border (top and bottom) between two elements + &-item + &-item { + border-top: none; + } + + // bottom button + .session-button.square-outline.danger { + margin-top: auto; + width: 100%; + border: none; + height: 3.5rem; + background-color: black; + flex-shrink: 0; + } + + .module-empty-state { + text-align: center; + } + + .module-attachment-section__items { + justify-content: space-evenly; + } + + .module-media { + &-gallery { + &__tab-container { + padding-top: 1rem; + } + + &__tab { + color: white; + font-weight: bold; + font-size: 0.9rem; + padding: 0.6rem; + opacity: 0.8; + + &--active { + border-bottom: none; + opacity: 1; + + &:after { + content: ""; /* This is necessary for the pseudo element to work. */ + display: block; + margin: 0 auto; + width: 70%; + padding-top: 8px; + border-bottom: 4px solid $session-color-green; + } + } + } + + &__content { + padding: $session-margin-xs; + + .module-media-grid-item__image, + .module-media-grid-item { + height: 80px; + width: 80px; + margin-right: 0; + } + } + } + } +} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index fdde245d2..41e7db815 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -29,6 +29,7 @@ @import 'session_theme'; @import 'session_left_pane'; @import 'session_theme_dark_left_pane'; +@import 'session_group_panel'; // Installer @import 'options'; diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index bc4394b05..22925fb4c 100644 --- a/ts/components/Avatar.tsx +++ b/ts/components/Avatar.tsx @@ -9,7 +9,6 @@ interface Props { avatarPath?: string; color?: string; conversationType: 'group' | 'direct'; - i18n: LocalizerType; noteToSelf?: boolean; name?: string; phoneNumber?: string; @@ -17,6 +16,7 @@ interface Props { size: number; borderColor?: string; borderWidth?: number; + i18n?: LocalizerType; onAvatarClick?: () => void; } @@ -66,7 +66,6 @@ export class Avatar extends React.PureComponent { public renderImage() { const { avatarPath, - i18n, name, phoneNumber, profileName, @@ -89,7 +88,7 @@ export class Avatar extends React.PureComponent { {i18n('contactAvatarAlt', ); diff --git a/ts/components/conversation/media-gallery/AttachmentSection.tsx b/ts/components/conversation/media-gallery/AttachmentSection.tsx index d350363fc..bfab7fbf6 100644 --- a/ts/components/conversation/media-gallery/AttachmentSection.tsx +++ b/ts/components/conversation/media-gallery/AttachmentSection.tsx @@ -9,7 +9,6 @@ import { LocalizerType } from '../../../types/Util'; interface Props { i18n: LocalizerType; - header?: string; type: 'media' | 'documents'; mediaItems: Array; onItemClick?: (event: ItemClickEvent) => void; @@ -17,11 +16,9 @@ interface Props { export class AttachmentSection extends React.Component { public render() { - const { header } = this.props; return (
-

{header}

{this.renderItems()}
diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx index 4a8ade4b3..fc0a45ace 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.tsx +++ b/ts/components/conversation/media-gallery/MediaGallery.tsx @@ -1,20 +1,15 @@ import React from 'react'; import classNames from 'classnames'; -import moment from 'moment'; - import { AttachmentSection } from './AttachmentSection'; import { EmptyState } from './EmptyState'; -import { groupMediaItemsByDate } from './groupMediaItemsByDate'; import { ItemClickEvent } from './types/ItemClickEvent'; import { missingCaseError } from '../../../util/missingCaseError'; -import { LocalizerType } from '../../../types/Util'; import { MediaItemType } from '../../LightboxGallery'; interface Props { documents: Array; - i18n: LocalizerType; media: Array; onItemClick?: (event: ItemClickEvent) => void; } @@ -23,7 +18,6 @@ interface State { selectedTab: 'media' | 'documents'; } -const MONTH_FORMAT = 'MMMM YYYY'; interface TabSelectEvent { type: 'media' | 'documents'; @@ -96,7 +90,7 @@ export class MediaGallery extends React.Component { }; private renderSections() { - const { i18n, media, documents, onItemClick } = this.props; + const { media, documents, onItemClick } = this.props; const { selectedTab } = this.state; const mediaItems = selectedTab === 'media' ? media : documents; @@ -106,10 +100,10 @@ export class MediaGallery extends React.Component { const label = (() => { switch (type) { case 'media': - return i18n('mediaEmptyState'); + return window.i18n('mediaEmptyState'); case 'documents': - return i18n('documentsEmptyState'); + return window.i18n('documentsEmptyState'); default: throw missingCaseError(type); @@ -119,28 +113,16 @@ export class MediaGallery extends React.Component { return ; } - const now = Date.now(); - const sections = groupMediaItemsByDate(now, mediaItems).map(section => { - const first = section.mediaItems[0]; - const { message } = first; - const date = moment(message.received_at); - const header = - section.type === 'yearMonth' - ? date.format(MONTH_FORMAT) - : i18n(section.type); - - return ( - + - ); - }); - - return
{sections}
; + /> +
+ ); } } diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index 2dd7096cb..d055bb605 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -111,7 +111,6 @@ export class LeftPaneMessageSection extends React.Component { } const conversations = this.getCurrentConversations(); - if (!conversations) { throw new Error( 'render: must provided conversations if no search results are provided' @@ -120,7 +119,7 @@ export class LeftPaneMessageSection extends React.Component { const length = conversations.length; const listKey = 0; - + // Note: conversations is not a known prop for List, but it is required to ensure that // it re-renders when our conversation data changes. Otherwise it would just render // on startup and scroll. diff --git a/ts/components/session/SessionChannelSettings.tsx b/ts/components/session/SessionChannelSettings.tsx new file mode 100644 index 000000000..dccb9dfd2 --- /dev/null +++ b/ts/components/session/SessionChannelSettings.tsx @@ -0,0 +1,204 @@ +import React from 'react'; +import { SessionIconButton, SessionIconSize, SessionIconType } from './icon'; +import { Avatar } from '../Avatar'; +import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton'; +import { MediaGallery } from '../conversation/media-gallery/MediaGallery'; +import _ from 'lodash'; + + +interface Props { + channelPubKey: string; + channelName: string; + memberCount: number; + description: string; + + onHidePanel: () => void; + onAddPeopleToGroup: () => void; + onLeaveGroup: () => void; +} + +export class SessionChannelSettings extends React.Component { + + public constructor(props: Props) { + super(props); + + this.state = { + documents: Array(), + media: Array(), + onItemClick: undefined, + }; + } + + public componentWillMount() { + this.getMediaGalleryProps().then(({ documents, media, onItemClick }) => { + this.setState({ + documents, + media, + onItemClick, + }); + }).ignore(); + } + + public async getMediaGalleryProps() { + // We fetch more documents than media as they don’t require to be loaded + // into memory right away. Revisit this once we have infinite scrolling: + const DEFAULT_MEDIA_FETCH_COUNT = 50; + const DEFAULT_DOCUMENTS_FETCH_COUNT = 150; + const conversationId = this.props.channelPubKey; + const rawMedia = await window.Signal.Data.getMessagesWithVisualMediaAttachments( + conversationId, + { + limit: DEFAULT_MEDIA_FETCH_COUNT, + MessageCollection: window.Whisper.MessageCollection, + } + ); + const rawDocuments = await window.Signal.Data.getMessagesWithFileAttachments( + conversationId, + { + limit: DEFAULT_DOCUMENTS_FETCH_COUNT, + MessageCollection: window.Whisper.MessageCollection, + } + ); + + // First we upgrade these messages to ensure that they have thumbnails + const max = rawMedia.length; + for (let i = 0; i < max; i += 1) { + const message = rawMedia[i]; + const { schemaVersion } = message; + + if (schemaVersion < message.VERSION_NEEDED_FOR_DISPLAY) { + // Yep, we really do want to wait for each of these + // eslint-disable-next-line no-await-in-loop + rawMedia[i] = await window.Signal.Migrations.upgradeMessageSchema(message); + // eslint-disable-next-line no-await-in-loop + await window.Signal.Data.saveMessage(rawMedia[i], { + Message: window.Whisper.Message, + }); + } + } + + // tslint:disable-next-line: underscore-consistent-invocation + const media = _.flatten( + rawMedia.map((message: { attachments: any }) => { + const { attachments } = message; + + return (attachments || []) + .filter( + (attachment: { thumbnail: any; pending: any; error: any }) => + attachment.thumbnail && + !attachment.pending && + !attachment.error + ) + .map((attachment: { path?: any; contentType?: any; thumbnail?: any }, index: any) => { + const { thumbnail } = attachment; + + return { + objectURL: window.Signal.Migrations.getAbsoluteAttachmentPath(attachment.path), + thumbnailObjectUrl: thumbnail + ? window.Signal.Migrations.getAbsoluteAttachmentPath(thumbnail.path) + : null, + contentType: attachment.contentType, + index, + attachment, + message, + }; + + }); + }) + ); + + // Unlike visual media, only one non-image attachment is supported + const documents = rawDocuments.map((message: { attachments: Array }) => { + const attachments = message.attachments || []; + const attachment = attachments[0]; + + return { + contentType: attachment.contentType, + index: 0, + attachment, + message, + }; + }); + + const saveAttachment = async ({ attachment, message }: any = {}) => { + const timestamp = message.received_at; + window.Signal.Types.Attachment.save({ + attachment, + document, + getAbsolutePath: window.Signal.Migrations.getAbsoluteAttachmentPath, + timestamp, + }); + }; + + const onItemClick = async ({ message, attachment, type } : any) => { + switch (type) { + case 'documents': + case 'media': { + saveAttachment({ message, attachment }).ignore(); + break; + } + + /*case 'media': { + const selectedIndex = media.findIndex( + mediaMessage => mediaMessage.attachment.path === attachment.path + ); + this.lightboxGalleryView = new Whisper.ReactWrapperView({ + className: 'lightbox-wrapper', + Component: Signal.Components.LightboxGallery, + props: { + media, + onSave: saveAttachment, + selectedIndex, + }, + onClose: () => Signal.Backbone.Views.Lightbox.hide(), + }); + Signal.Backbone.Views.Lightbox.show(this.lightboxGalleryView.el); + break; + }*/ + + default: + throw new TypeError(`Unknown attachment type: '${type}'`); + } + }; + + return { + documents, + media, + onItemClick, + }; + } + + + public render() { + const { memberCount, channelName } = this.props; + const { documents, media, onItemClick} = this.state; + + return ( +
+ {this.renderHeader()} +

{channelName}

+
{window.i18n('members', memberCount)}
+ + +
{window.i18n('notifications')}
+
{window.i18n('disappearingMessages')}
+ + + + +
); + } + + + private renderHeader() { + const { channelPubKey } = this.props; + + return ( +
+ + + +
+ ); + } +}