1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import PropTypes from 'prop-types';
import { autorun, observable } from 'mobx';
import WebControls from '../components/WebControls';
import ServicesStore from '../../../stores/ServicesStore';
import Service from '../../../models/Service';
const URL_EVENTS = [
'load-commit',
// 'dom-ready',
'will-navigate',
'did-navigate',
'did-navigate-in-page',
];
@inject('stores', 'actions') @observer
class WebControlsScreen extends Component {
@observable url = '';
@observable canGoBack = false;
@observable canGoForward = false;
webview = null;
autorunDisposer = null;
componentDidMount() {
const { service } = this.props;
this.autorunDisposer = autorun(() => {
if (service.isAttached) {
this.webview = service.webview;
URL_EVENTS.forEach((event) => {
this.webview.addEventListener(event, (e) => {
if (!e.isMainFrame) return;
this.url = e.url;
this.canGoBack = this.webview.canGoBack();
this.canGoForward = this.webview.canGoForward();
});
});
}
});
}
componentWillUnmount() {
this.autorunDisposer();
}
goHome() {
const { reloadActive } = this.props.actions.service;
if (!this.webview) return;
reloadActive();
}
reload() {
if (!this.webview) return;
this.webview.reload();
}
goBack() {
if (!this.webview) return;
this.webview.goBack();
}
goForward() {
if (!this.webview) return;
this.webview.goForward();
}
navigate(newUrl) {
if (!this.webview) return;
let url = newUrl;
try {
url = new URL(url).toString();
} catch (err) {
// eslint-disable-next-line no-useless-escape
if (url.match(/^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,1}\.(xn--)?([a-z0-9\-]{1,61}|[a-z0-9-]{1,30}\.[a-z]{2,})$/)) {
url = `http://${url}`;
} else {
url = `https://www.google.com/search?query=${url}`;
}
}
this.webview.loadURL(url);
this.url = url;
}
render() {
return (
<WebControls
goHome={() => this.goHome()}
reload={() => this.reload()}
canGoBack={this.canGoBack}
goBack={() => this.goBack()}
canGoForward={this.canGoForward}
goForward={() => this.goForward()}
navigate={url => this.navigate(url)}
url={this.url}
/>
);
}
}
export default WebControlsScreen;
WebControlsScreen.wrappedComponent.propTypes = {
service: PropTypes.instanceOf(Service).isRequired,
stores: PropTypes.shape({
services: PropTypes.instanceOf(ServicesStore).isRequired,
}).isRequired,
actions: PropTypes.shape({
service: PropTypes.shape({
reloadActive: PropTypes.func.isRequired,
}).isRequired,
}).isRequired,
};
|