From 7aa1764ffd84bece6302d0456461df2c4e484d34 Mon Sep 17 00:00:00 2001 From: Martti Malmi Date: Wed, 11 Aug 2021 11:30:59 +0300 Subject: [PATCH] fix safari logout, move menu to its own file, fix pm webtorrent --- src/js/Main.js | 63 +------------------------- src/js/Session.js | 25 ++++++++-- src/js/components/ChatMessageForm.js | 31 ++++--------- src/js/components/Menu.js | 68 ++++++++++++++++++++++++++++ src/js/views/Chat.js | 2 - 5 files changed, 100 insertions(+), 89 deletions(-) create mode 100644 src/js/components/Menu.js diff --git a/src/js/Main.js b/src/js/Main.js index 9d622d9a..785a93a4 100644 --- a/src/js/Main.js +++ b/src/js/Main.js @@ -1,6 +1,5 @@ import Component from './BaseComponent'; import { Router } from 'preact-router'; -import { Link } from 'preact-router/match'; import {Helmet} from "react-helmet"; import Helpers from './Helpers.js'; @@ -8,7 +7,6 @@ import { html } from 'htm/preact'; import QRScanner from './QRScanner.js'; import PeerManager from './PeerManager.js'; import Session from './Session.js'; -import { translate as t } from './Translation.js'; import Settings from './views/Settings.js'; import LogoutConfirmation from './views/LogoutConfirmation.js'; @@ -27,14 +25,12 @@ import Explorer from './views/Explorer.js'; import Contacts from './views/Contacts.js'; import Torrent from './views/Torrent.js'; +import Menu from './components/Menu.js'; import VideoCall from './components/VideoCall.js'; -import Identicon from './components/Identicon.js'; import MediaPlayer from './components/MediaPlayer.js'; import Footer from './components/Footer.js'; import State from './State.js'; -import Icons from './Icons.js'; -import logo from '../assets/img/icon128.png'; import logoType from '../assets/img/iris_logotype.png'; import '../css/style.css'; @@ -50,63 +46,6 @@ PeerManager.init(); Helpers.checkColorScheme(); -const APPLICATIONS = [ // TODO: move editable shortcuts to localState gun - {url: '/', text: t('home'), icon: Icons.home}, - {url: '/media', text: t('media'), icon: Icons.play}, - {url: '/chat', text: t('messages'), icon: Icons.chat}, - {url: '/store', text: t('market'), icon: Icons.store}, - {url: '/contacts', text: t('contacts'), icon: Icons.user}, - {url: '/settings', text: t('settings'), icon: Icons.settings}, - {url: '/explorer', text: t('explorer'), icon: Icons.folder}, - {url: '/about', text: t('about')}, -]; - -class Menu extends Component { - componentDidMount() { - State.local.get('unseenTotal').on(this.inject()); - } - - menuLinkClicked() { - State.local.get('toggleMenu').put(false); - State.local.get('scrollUp').put(true); - } - - render() { - const pub = Session.getPubKey(); - return html` -
- ${Helpers.isElectron ? html`
` : html` - this.menuLinkClicked()} class="hidden-xs" tabindex="0" class="logo"> - - - - `} -
- <${Link} onClick=${() => this.menuLinkClicked()} activeClassName="active" href="/profile/${pub}"> - <${Identicon} str=${pub} width=40/> - - -

-
- ${APPLICATIONS.map(a => { - if (a.url) { - return html` - <${a.native ? 'a' : Link} onClick=${() => this.menuLinkClicked()} activeClassName="active" href=${a.url}> - - ${a.text === t('messages') && this.state.unseenTotal ? html`${this.state.unseenTotal}`: ''} - ${a.icon || Icons.circle} - - ${a.text} - `; - } - return html`

`; - - })} -
- `; - } -} - class Main extends Component { componentDidMount() { State.local.get('loggedIn').on(this.inject()); diff --git a/src/js/Session.js b/src/js/Session.js index 02b6d67c..c8a0da20 100644 --- a/src/js/Session.js +++ b/src/js/Session.js @@ -226,8 +226,25 @@ async function createChatLink() { } function clearIndexedDB() { - window.indexedDB.deleteDatabase('State.local'); - window.indexedDB.deleteDatabase('radata'); + return new Promise(resolve => { + const r1 = window.indexedDB.deleteDatabase('State.local'); + const r2 = window.indexedDB.deleteDatabase('radata'); + let r1done; + let r2done; + const check = () => { + r1done && r2done && resolve(); + } + r1.onerror = r2.onerror = e => console.error(e); + //r1.onblocked = r2.onblocked = e => console.error('blocked', e); + r1.onsuccess = () => { + r1done = true; + check(); + } + r2.onsuccess = () => { + r2done = true; + check(); + } + }); } function getMyChatLink() { @@ -252,7 +269,7 @@ async function logOut() { } } } - await clearIndexedDB(); + clearIndexedDB(); localStorage.clear(); route('/'); location.reload(); @@ -277,6 +294,8 @@ function init(options = {}) { login(JSON.parse(localStorageKey)); } else if (options.autologin) { loginAsNewUser(name); + } else { + clearIndexedDB(); } } diff --git a/src/js/components/ChatMessageForm.js b/src/js/components/ChatMessageForm.js index 6d1a91bc..0760396e 100644 --- a/src/js/components/ChatMessageForm.js +++ b/src/js/components/ChatMessageForm.js @@ -2,6 +2,7 @@ import { Component } from 'preact'; import Helpers from '../Helpers.js'; import { html } from 'htm/preact'; import { translate as t } from '../Translation.js'; +import Torrent from './Torrent'; import State from '../State.js'; import Session from '../Session.js'; import iris from 'iris-lib'; @@ -30,12 +31,12 @@ class ChatMessageForm extends Component { } } - componentDidUpdate(prevProps, prevState) { + componentDidUpdate() { if (!iris.util.isMobile && this.props.autofocus !== false) { $(this.base).find(".new-msg").focus(); } - if (this.state.torrentId && this.state.torrentId !== prevState.torrentId) { - this.downloadWebtorrent(this.state.torrentId); + if ($('#attachment-preview:visible').length) { + $('#attachment-preview').append($('#webtorrent')); } } @@ -69,30 +70,13 @@ class ChatMessageForm extends Component { this.picker.pickerVisible ? this.picker.hidePicker() : this.picker.showPicker(event.target); } - async downloadWebtorrent(torrentId) { - function onTorrent(torrent) { - // Torrents can contain many files. Let's use the .mp4 file - let file = torrent.files.find((file) => { - return file.name.endsWith('.mp4') - }) - // Stream the file in the browser - file.appendTo('#webtorrent', {autoplay: true, muted: true}) - } - const client = await Helpers.getWebTorrentClient(); - const existing = client.get(torrentId); - if (existing) { - onTorrent(existing); - } else { - client.add(torrentId, onTorrent); - } - } - onMsgTextPaste(event) { const pasted = (event.clipboardData || window.clipboardData).getData('text'); const magnetRegex = /^magnet:\?xt=urn:btih:*/; if (pasted !== this.state.torrentId && pasted.indexOf('.torrent') > -1 || pasted.match(magnetRegex)) { event.preventDefault(); this.setState({torrentId: pasted}); + this.openAttachmentsPreview(); } } @@ -160,6 +144,7 @@ class ChatMessageForm extends Component { Session.channels[this.props.activeChat].attachments = null; } Helpers.scrollToMessageListBottom(); + this.setState({torrentId:null}); } async webPush(msg) { @@ -206,7 +191,9 @@ class ChatMessageForm extends Component { this.openAttachmentsPreview()}/> this.onMsgTextPaste(e)} onInput=${e => this.onMsgTextInput(e)} class="new-msg" type="text" placeholder="${t('type_a_message')}" autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="off"/> ${submitButton} -
+
+ ${this.state.torrentId ? html`<${Torrent} preview=${true} torrentId=${this.state.torrentId}/>` : ''} +
`; } diff --git a/src/js/components/Menu.js b/src/js/components/Menu.js new file mode 100644 index 00000000..015e82cc --- /dev/null +++ b/src/js/components/Menu.js @@ -0,0 +1,68 @@ +import Component from "../BaseComponent"; +import State from "../State"; +import Session from "../Session"; +import {html} from "htm/preact"; +import Helpers from "../Helpers"; +import logo from "../../assets/img/icon128.png"; +import logoType from "../../assets/img/iris_logotype.png"; +import {Link} from "preact-router/match"; +import Identicon from "./Identicon"; +import {translate as t} from "../Translation"; +import Icons from "../Icons"; + +const APPLICATIONS = [ // TODO: move editable shortcuts to localState gun + {url: '/', text: t('home'), icon: Icons.home}, + {url: '/media', text: t('media'), icon: Icons.play}, + {url: '/chat', text: t('messages'), icon: Icons.chat}, + {url: '/store', text: t('market'), icon: Icons.store}, + {url: '/contacts', text: t('contacts'), icon: Icons.user}, + {url: '/settings', text: t('settings'), icon: Icons.settings}, + {url: '/explorer', text: t('explorer'), icon: Icons.folder}, + {url: '/about', text: t('about')}, +]; + +export default class Menu extends Component { + componentDidMount() { + State.local.get('unseenTotal').on(this.inject()); + } + + menuLinkClicked() { + State.local.get('toggleMenu').put(false); + State.local.get('scrollUp').put(true); + } + + render() { + const pub = Session.getPubKey(); + return html` +
+ ${Helpers.isElectron ? html`
` : html` + this.menuLinkClicked()} class="hidden-xs" tabindex="0" class="logo"> + + + + `} +
+ <${Link} onClick=${() => this.menuLinkClicked()} activeClassName="active" href="/profile/${pub}"> + <${Identicon} str=${pub} width=40/> + + +

+
+ ${APPLICATIONS.map(a => { + if (a.url) { + return html` + <${a.native ? 'a' : Link} onClick=${() => this.menuLinkClicked()} activeClassName="active" href=${a.url}> + + ${a.text === t('messages') && this.state.unseenTotal ? html`${this.state.unseenTotal}`: ''} + ${a.icon || Icons.circle} + + ${a.text} + `; + } + return html`

`; + + })} +
+ `; + } +} \ No newline at end of file diff --git a/src/js/views/Chat.js b/src/js/views/Chat.js index 4e1f0abc..a1b2f1f1 100644 --- a/src/js/views/Chat.js +++ b/src/js/views/Chat.js @@ -261,9 +261,7 @@ class Chat extends View { ${this.props.id && this.props.id.length > 20 ? html`
this.onMessageViewScroll(e)}>
-
${msgListContent} -
` : html`<${NewChat}/>`