diff --git a/src/components/InjectedComponents/AdditionalPostBox.tsx b/src/components/InjectedComponents/AdditionalPostBox.tsx index 50a2e8d77a6e..b7d7bbf3a850 100644 --- a/src/components/InjectedComponents/AdditionalPostBox.tsx +++ b/src/components/InjectedComponents/AdditionalPostBox.tsx @@ -11,15 +11,18 @@ import Button from '@material-ui/core/Button/Button' import { withStylesTyped, MaskbookLightTheme } from '../../utils/theme' import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider' import { useAsync } from '../../utils/AsyncComponent' -import { CryptoService } from '../../extension/content-script/rpc' +import { CryptoService, PeopleService } from '../../extension/content-script/rpc' import { Person } from '../../extension/background-script/PeopleService' import { usePeople } from '../DataSource/PeopleRef' import { SelectPeopleUI } from './SelectPeople' import { CustomPasteEventId } from '../../utils/Names' import { sleep } from '../../utils/utils' +import { myUsername, getUsername } from '../../extension/content-script/injections/LiveSelectors' interface Props { avatar?: string + nickname?: string + username?: string encrypted: string onCombinationChange(people: Person[], text: string): void onRequestPost(text: string): void @@ -34,6 +37,9 @@ const _AdditionalPostBox = withStylesTyped({ padding: 12, boxSizing: 'border-box', }, + innerInput: { + minHeight: '3em', + }, // todo: theme grayArea: { background: '#f5f6f7', padding: 8, wordBreak: 'break-all' }, typo: { lineHeight: '28.5px' }, @@ -60,7 +66,7 @@ const _AdditionalPostBox = withStylesTyped({ undefined )} { setText(e.currentTarget.value) @@ -68,12 +74,14 @@ const _AdditionalPostBox = withStylesTyped({ }} fullWidth multiline - placeholder="What's your mind? Encrypt with Maskbook" + placeholder={`${ + props.nickname ? `Hey ${props.nickname}, w` : 'W' + }hat's your mind? Encrypt with Maskbook`} /> x.username !== props.username)} onSetSelected={p => { selectPeople(p) props.onCombinationChange(p, text) @@ -121,13 +129,24 @@ export function AdditionalPostBox() { const [people, setPeople] = React.useState([]) const [encrypted, setEncrypted] = React.useState('') const publisherToken = React.useRef() + const [avatar, setAvatar] = React.useState('') useAsync(() => CryptoService.encryptTo(text, people), [text, people]).then(data => { const [str, pub] = data setEncrypted(str) publisherToken.current = pub }) + let nickname + { + const link = myUsername.evaluateOnce()[0] + if (link) nickname = link.innerText + } + const username = getUsername() + useAsync(() => PeopleService.queryAvatar(username || ''), []).then(setAvatar) return ( { if (!publisherToken.current) return const element = document.querySelector('.notranslate')! @@ -136,6 +155,8 @@ export function AdditionalPostBox() { selectElementContents(element) await sleep(100) document.dispatchEvent(new CustomEvent(CustomPasteEventId, { detail: text })) + navigator.clipboard.writeText(text) + // Prevent Custom Paste failed, this will cause service not available to user. CryptoService.publishPostAESKey(publisherToken.current) }} encrypted={publisherToken.current ? encrypted || '' : ''} diff --git a/src/extension/background-script/PeopleService.ts b/src/extension/background-script/PeopleService.ts index ced3c27f8bb1..6e7fe9e25c29 100644 --- a/src/extension/background-script/PeopleService.ts +++ b/src/extension/background-script/PeopleService.ts @@ -49,6 +49,7 @@ const Impl = { getAllPeople, uploadProvePostUrl, storeAvatar, + queryAvatar, getMyPrivateKey, storeKey: storeKeyService, } diff --git a/src/extension/content-script/injections/LiveSelectors.ts b/src/extension/content-script/injections/LiveSelectors.ts index e34b9130b122..5bfd6d92ddbc 100644 --- a/src/extension/content-script/injections/LiveSelectors.ts +++ b/src/extension/content-script/injections/LiveSelectors.ts @@ -3,3 +3,12 @@ import { LiveSelector } from '@holoflows/kit/es/DOM/LiveSelector' export const myUsername = new LiveSelector().querySelector( `[aria-label="Facebook"][role="navigation"] [data-click="profile_icon"] a`, ) +export function getUsername(link?: HTMLAnchorElement | null) { + // tslint:disable-next-line: no-parameter-reassignment + if (link === undefined) link = myUsername.evaluateOnce()[0] + if (link === null) return undefined + const url = link.href + const after = url.split('https://www.facebook.com/')[1] + if (after.match('profile.php')) return after.match(/id=(?\d+)/)!.groups!.id + else return after.split('?')[0] +} diff --git a/src/extension/content-script/injections/Posts.tsx b/src/extension/content-script/injections/Posts.tsx index 725bc3ad1a7f..2d45932af59e 100644 --- a/src/extension/content-script/injections/Posts.tsx +++ b/src/extension/content-script/injections/Posts.tsx @@ -4,13 +4,7 @@ import { LiveSelector, MutationObserverWatcher } from '@holoflows/kit' import { DecryptPost } from '../../../components/InjectedComponents/DecryptedPost' import { AddToKeyStore } from '../../../components/InjectedComponents/AddToKeyStore' import { PeopleService } from '../rpc' -import { myUsername } from './LiveSelectors' - -function getUsername(url: string) { - const after = url.split('https://www.facebook.com/')[1] - if (after.match('profile.php')) return after.match(/id=(?\d+)/)!.groups!.id - else return after.split('?')[0] -} +import { getUsername } from './LiveSelectors' const posts = new LiveSelector().querySelectorAll('.userContent').filter((x: HTMLElement | null) => { while (x) { @@ -30,13 +24,7 @@ const PostInspector = (props: { post: string; postBy: string; postId: string; ne if (type.encryptedPost) { props.needZip() - return ( - getUsername(x.href))[0]!} - postBy={postBy} - /> - ) + return } else if (type.provePost) { PeopleService.uploadProvePostUrl(postBy, postId) return @@ -46,7 +34,7 @@ const PostInspector = (props: { post: string; postBy: string; postId: string; ne new MutationObserverWatcher(posts) .useNodeForeach((node, key, realNode) => { // Get author - const postBy = getUsername(node.current.previousElementSibling!.querySelector('a')!.href) + const postBy = getUsername(node.current.previousElementSibling!.querySelector('a'))! // Save author's avatar try { const avatar = node.current.previousElementSibling!.querySelector('img')!