diff options
Diffstat (limited to 'src/components/services/content/ServiceWebview.js')
-rw-r--r-- | src/components/services/content/ServiceWebview.js | 65 |
1 files changed, 49 insertions, 16 deletions
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js index 7163209ee..b1a2c0207 100644 --- a/src/components/services/content/ServiceWebview.js +++ b/src/components/services/content/ServiceWebview.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { autorun } from 'mobx'; | 3 | import { autorun } from 'mobx'; |
4 | import { observer } from 'mobx-react'; | 4 | import { observer } from 'mobx-react'; |
@@ -7,7 +7,9 @@ import classnames from 'classnames'; | |||
7 | 7 | ||
8 | import ServiceModel from '../../../models/Service'; | 8 | import ServiceModel from '../../../models/Service'; |
9 | import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl'; | 9 | import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl'; |
10 | import WebviewLoader from '../../ui/WebviewLoader'; | ||
10 | import WebviewCrashHandler from './WebviewCrashHandler'; | 11 | import WebviewCrashHandler from './WebviewCrashHandler'; |
12 | import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler'; | ||
11 | import ServiceDisabled from './ServiceDisabled'; | 13 | import ServiceDisabled from './ServiceDisabled'; |
12 | 14 | ||
13 | export default @observer class ServiceWebview extends Component { | 15 | export default @observer class ServiceWebview extends Component { |
@@ -15,8 +17,10 @@ export default @observer class ServiceWebview extends Component { | |||
15 | service: PropTypes.instanceOf(ServiceModel).isRequired, | 17 | service: PropTypes.instanceOf(ServiceModel).isRequired, |
16 | setWebviewReference: PropTypes.func.isRequired, | 18 | setWebviewReference: PropTypes.func.isRequired, |
17 | reload: PropTypes.func.isRequired, | 19 | reload: PropTypes.func.isRequired, |
20 | edit: PropTypes.func.isRequired, | ||
18 | isAppMuted: PropTypes.bool.isRequired, | 21 | isAppMuted: PropTypes.bool.isRequired, |
19 | enable: PropTypes.func.isRequired, | 22 | enable: PropTypes.func.isRequired, |
23 | isActive: PropTypes.bool, | ||
20 | }; | 24 | }; |
21 | 25 | ||
22 | static defaultProps = { | 26 | static defaultProps = { |
@@ -29,8 +33,12 @@ export default @observer class ServiceWebview extends Component { | |||
29 | statusBarVisible: false, | 33 | statusBarVisible: false, |
30 | }; | 34 | }; |
31 | 35 | ||
36 | autorunDisposer = null; | ||
37 | |||
38 | webview = null; | ||
39 | |||
32 | componentDidMount() { | 40 | componentDidMount() { |
33 | autorun(() => { | 41 | this.autorunDisposer = autorun(() => { |
34 | if (this.props.service.isActive) { | 42 | if (this.props.service.isActive) { |
35 | this.setState({ forceRepaint: true }); | 43 | this.setState({ forceRepaint: true }); |
36 | setTimeout(() => { | 44 | setTimeout(() => { |
@@ -40,6 +48,10 @@ export default @observer class ServiceWebview extends Component { | |||
40 | }); | 48 | }); |
41 | } | 49 | } |
42 | 50 | ||
51 | componentWillUnmount() { | ||
52 | this.autorunDisposer(); | ||
53 | } | ||
54 | |||
43 | updateTargetUrl = (event) => { | 55 | updateTargetUrl = (event) => { |
44 | let visible = true; | 56 | let visible = true; |
45 | if (event.url === '' || event.url === '#') { | 57 | if (event.url === '' || event.url === '#') { |
@@ -51,13 +63,12 @@ export default @observer class ServiceWebview extends Component { | |||
51 | }); | 63 | }); |
52 | } | 64 | } |
53 | 65 | ||
54 | webview = null; | ||
55 | |||
56 | render() { | 66 | render() { |
57 | const { | 67 | const { |
58 | service, | 68 | service, |
59 | setWebviewReference, | 69 | setWebviewReference, |
60 | reload, | 70 | reload, |
71 | edit, | ||
61 | isAppMuted, | 72 | isAppMuted, |
62 | enable, | 73 | enable, |
63 | } = this.props; | 74 | } = this.props; |
@@ -78,25 +89,47 @@ export default @observer class ServiceWebview extends Component { | |||
78 | 89 | ||
79 | return ( | 90 | return ( |
80 | <div className={webviewClasses}> | 91 | <div className={webviewClasses}> |
81 | {service.hasCrashed && ( | 92 | {service.isActive && service.isEnabled && ( |
82 | <WebviewCrashHandler | 93 | <Fragment> |
83 | name={service.recipe.name} | 94 | {service.hasCrashed && ( |
84 | webview={service.webview} | 95 | <WebviewCrashHandler |
85 | reload={reload} | 96 | name={service.recipe.name} |
86 | /> | 97 | webview={service.webview} |
98 | reload={reload} | ||
99 | /> | ||
100 | )} | ||
101 | {service.isEnabled && service.isLoading && service.isFirstLoad && ( | ||
102 | <WebviewLoader | ||
103 | loaded={false} | ||
104 | name={service.name} | ||
105 | /> | ||
106 | )} | ||
107 | {service.isError && ( | ||
108 | <WebviewErrorHandler | ||
109 | name={service.recipe.name} | ||
110 | errorMessage={service.errorMessage} | ||
111 | reload={reload} | ||
112 | edit={edit} | ||
113 | /> | ||
114 | )} | ||
115 | </Fragment> | ||
87 | )} | 116 | )} |
88 | {!service.isEnabled ? ( | 117 | {!service.isEnabled ? ( |
89 | <ServiceDisabled | 118 | <Fragment> |
90 | name={service.recipe.name} | 119 | {service.isActive && ( |
91 | webview={service.webview} | 120 | <ServiceDisabled |
92 | enable={enable} | 121 | name={service.recipe.name} |
93 | /> | 122 | webview={service.webview} |
123 | enable={enable} | ||
124 | /> | ||
125 | )} | ||
126 | </Fragment> | ||
94 | ) : ( | 127 | ) : ( |
95 | <Webview | 128 | <Webview |
96 | ref={(element) => { this.webview = element; }} | 129 | ref={(element) => { this.webview = element; }} |
97 | autosize | 130 | autosize |
98 | src={service.url} | 131 | src={service.url} |
99 | preload="./webview/plugin.js" | 132 | preload="./webview/recipe.js" |
100 | partition={`persist:service-${service.id}`} | 133 | partition={`persist:service-${service.id}`} |
101 | onDidAttach={() => setWebviewReference({ | 134 | onDidAttach={() => setWebviewReference({ |
102 | serviceId: service.id, | 135 | serviceId: service.id, |