From c64cf59165218bdca732eb6df58f31cff239a7b3 Mon Sep 17 00:00:00 2001 From: Marquis Kurt Date: Fri, 5 Apr 2019 12:44:03 -0400 Subject: [PATCH] Update composer with media attachment support --- README.md | 4 +- package-lock.json | 6 +- package.json | 2 +- .../ComposeMediaAttachment.styles.tsx | 17 ++++ .../ComposeMediaAttachment.tsx | 81 +++++++++++++++++++ .../ComposeMediaAttachment/index.tsx | 5 ++ src/pages/Compose.styles.tsx | 10 +++ src/pages/Compose.tsx | 51 +++++++++++- 8 files changed, 170 insertions(+), 6 deletions(-) create mode 100644 src/components/ComposeMediaAttachment/ComposeMediaAttachment.styles.tsx create mode 100644 src/components/ComposeMediaAttachment/ComposeMediaAttachment.tsx create mode 100644 src/components/ComposeMediaAttachment/index.tsx diff --git a/README.md b/README.md index acdadf7..67f6014 100644 --- a/README.md +++ b/README.md @@ -16,4 +16,6 @@ The 1.0 redesign of Hyperspace acts differently from the current classic version - **Pages over panels**. Hyperspace 1.0 uses `react-router-dom` to link components of the app via URLs instead of individual components. This means that one could visit the corresponding URL instead of needing to open a set of panels or buttons to do so. - **Material design**. Hyperspace 1.0 uses Material Design to create a UI that scales across device types. The library used for the UI, `material-ui`, natively supports a dark mode and themes, making Hyperspace 1.0 more customizable in nature. -- **Less intrusive by nature.** Hyperspace 1.0 pushes notifications when the window isn't in focus versus all the time, and the snackbar (toast) notifications are displayed more often when something is happening or when an error occurs. Timelines also no longer keep pushing posts during streaming, letting anyone read the timeline and still be able to get updates with a non-intrusive `View (x) new posts` chip at the top. \ No newline at end of file +- **Less intrusive by nature.** Hyperspace 1.0 pushes notifications when the window isn't in focus versus all the time, and the snackbar (toast) notifications are displayed more often when something is happening or when an error occurs. Timelines also no longer keep pushing posts during streaming, letting anyone read the timeline and still be able to get updates with a non-intrusive `View (x) new posts` chip at the top. + +This is a growing list and new things will be added over time. \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a15e750..760b67a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17943,9 +17943,9 @@ } }, "typescript": { - "version": "3.3.4000", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.4000.tgz", - "integrity": "sha512-jjOcCZvpkl2+z7JFn0yBOoLQyLoIkNZAs/fYJkUG6VKy6zLPHJGfQJYFHzibB6GJaF/8QrcECtlQ5cpvRHSMEA==", + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.4.1.tgz", + "integrity": "sha512-3NSMb2VzDQm8oBTLH6Nj55VVtUEpe/rgkIzMir0qVoLyjDZlnMBva0U6vDiV3IH+sl/Yu6oP5QwsAQtHPmDd2Q==", "dev": true }, "ua-parser-js": { diff --git a/package.json b/package.json index 0df107d..5b0d67f 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "react-router-dom": "^5.0.0", "react-scripts": "2.1.8", "react-swipeable-views": "^0.13.1", - "typescript": "3.3.4000", + "typescript": "3.4.1", "notistack": "^0.5.1", "react-web-share-api": "^0.0.2", "query-string": "^6.4.2", diff --git a/src/components/ComposeMediaAttachment/ComposeMediaAttachment.styles.tsx b/src/components/ComposeMediaAttachment/ComposeMediaAttachment.styles.tsx new file mode 100644 index 0000000..7f8ba0b --- /dev/null +++ b/src/components/ComposeMediaAttachment/ComposeMediaAttachment.styles.tsx @@ -0,0 +1,17 @@ +import {Theme, createStyles} from '@material-ui/core'; + +export const styles = (theme: Theme) => createStyles({ + attachmentArea: { + height: 175, + width: 268, + backgroundColor: theme.palette.primary.light, + color: theme.palette.common.white + }, + attachmentBar: { + marginLeft: 0 + }, + attachmentText: { + backgroundColor: theme.palette.background.paper, + opacity: 0.5 + } +}); \ No newline at end of file diff --git a/src/components/ComposeMediaAttachment/ComposeMediaAttachment.tsx b/src/components/ComposeMediaAttachment/ComposeMediaAttachment.tsx new file mode 100644 index 0000000..ee5f403 --- /dev/null +++ b/src/components/ComposeMediaAttachment/ComposeMediaAttachment.tsx @@ -0,0 +1,81 @@ +import React, { Component } from 'react'; +import {GridListTile, GridListTileBar, TextField, withStyles, IconButton} from '@material-ui/core'; +import {styles} from './ComposeMediaAttachment.styles'; +import {withSnackbar, withSnackbarProps} from 'notistack'; +import Mastodon from 'megalodon'; +import { Attachment } from '../../types/Attachment'; +import DeleteIcon from '@material-ui/icons/Delete'; + +interface IComposeMediaAttachmentProps extends withSnackbarProps { + classes: any; + client: Mastodon; + attachment: Attachment; + onDeleteCallback: any; + onAttachmentUpdate: any; +} + +interface IComposeMediaAttachmentState { + attachment: Attachment; +} + +class ComposeMediaAttachment extends Component { + + client: Mastodon; + + constructor(props: IComposeMediaAttachmentProps) { + super(props); + + this.client = this.props.client; + + this.state = { + attachment: this.props.attachment + } + } + + updateAttachmentText(text: string) { + this.client.put(`/media/${this.state.attachment.id}`, { description: text }).then((resp: any) => { + this.props.onAttachmentUpdate(resp.data); + this.props.enqueueSnackbar("Description updated.") + }).catch((err: Error) => { + this.props.enqueueSnackbar("Couldn't update description: " + err.name); + }) + } + + render() { + const { classes, attachment } = this.props; + return ( + + { + attachment.type === "image" || attachment.type === "gifv"? + {attachment.description?: + attachment.type === "video"? +