diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-19 15:21:09 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-19 09:51:09 +0000 |
commit | a051331680b21f20201a47601d69505a4cfa9e40 (patch) | |
tree | f98dd4bc668c9814d58c0e49170aeeb19c2fe1de /src/components/services/content/ServiceView.js | |
parent | 6.2.1-nightly.46 [skip ci] (diff) | |
download | ferdium-app-a051331680b21f20201a47601d69505a4cfa9e40.tar.gz ferdium-app-a051331680b21f20201a47601d69505a4cfa9e40.tar.zst ferdium-app-a051331680b21f20201a47601d69505a4cfa9e40.zip |
Transform service components to ts (#778)
Diffstat (limited to 'src/components/services/content/ServiceView.js')
-rw-r--r-- | src/components/services/content/ServiceView.js | 190 |
1 files changed, 0 insertions, 190 deletions
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js deleted file mode 100644 index cae16ef49..000000000 --- a/src/components/services/content/ServiceView.js +++ /dev/null | |||
@@ -1,190 +0,0 @@ | |||
1 | /* eslint-disable react/jsx-no-useless-fragment */ | ||
2 | import { Component } from 'react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { autorun } from 'mobx'; | ||
5 | import { observer, inject } from 'mobx-react'; | ||
6 | import classnames from 'classnames'; | ||
7 | import TopBarProgress from 'react-topbar-progress-indicator'; | ||
8 | |||
9 | import ServiceModel from '../../../models/Service'; | ||
10 | import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl'; | ||
11 | import WebviewLoader from '../../ui/WebviewLoader'; | ||
12 | import WebviewCrashHandler from './WebviewCrashHandler'; | ||
13 | import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler'; | ||
14 | import ServiceDisabled from './ServiceDisabled'; | ||
15 | import ServiceWebview from './ServiceWebview'; | ||
16 | import SettingsStore from '../../../stores/SettingsStore'; | ||
17 | import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen'; | ||
18 | import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config'; | ||
19 | |||
20 | class ServiceView extends Component { | ||
21 | static propTypes = { | ||
22 | service: PropTypes.instanceOf(ServiceModel).isRequired, | ||
23 | setWebviewReference: PropTypes.func.isRequired, | ||
24 | detachService: PropTypes.func.isRequired, | ||
25 | reload: PropTypes.func.isRequired, | ||
26 | edit: PropTypes.func.isRequired, | ||
27 | enable: PropTypes.func.isRequired, | ||
28 | isActive: PropTypes.bool, | ||
29 | stores: PropTypes.shape({ | ||
30 | settings: PropTypes.instanceOf(SettingsStore).isRequired, | ||
31 | }).isRequired, | ||
32 | isSpellcheckerEnabled: PropTypes.bool.isRequired, | ||
33 | }; | ||
34 | |||
35 | static defaultProps = { | ||
36 | isActive: false, | ||
37 | }; | ||
38 | |||
39 | state = { | ||
40 | forceRepaint: false, | ||
41 | targetUrl: '', | ||
42 | statusBarVisible: false, | ||
43 | }; | ||
44 | |||
45 | hibernationTimer = null; | ||
46 | |||
47 | autorunDisposer = null; | ||
48 | |||
49 | forceRepaintTimeout = null; | ||
50 | |||
51 | componentDidMount() { | ||
52 | this.autorunDisposer = autorun(() => { | ||
53 | if (this.props.service.isActive) { | ||
54 | this.setState({ forceRepaint: true }); | ||
55 | this.forceRepaintTimeout = setTimeout(() => { | ||
56 | this.setState({ forceRepaint: false }); | ||
57 | }, 100); | ||
58 | } | ||
59 | }); | ||
60 | } | ||
61 | |||
62 | componentWillUnmount() { | ||
63 | this.autorunDisposer(); | ||
64 | clearTimeout(this.forceRepaintTimeout); | ||
65 | clearTimeout(this.hibernationTimer); | ||
66 | } | ||
67 | |||
68 | render() { | ||
69 | const { | ||
70 | detachService, | ||
71 | service, | ||
72 | setWebviewReference, | ||
73 | reload, | ||
74 | edit, | ||
75 | enable, | ||
76 | stores, | ||
77 | isSpellcheckerEnabled, | ||
78 | } = this.props; | ||
79 | |||
80 | const { navigationBarBehaviour, navigationBarManualActive } = | ||
81 | stores.settings.app; | ||
82 | |||
83 | const showNavBar = | ||
84 | navigationBarBehaviour === 'always' || | ||
85 | (navigationBarBehaviour === 'custom' && | ||
86 | service.recipe.id === CUSTOM_WEBSITE_RECIPE_ID) || | ||
87 | navigationBarManualActive; | ||
88 | |||
89 | const webviewClasses = classnames({ | ||
90 | services__webview: true, | ||
91 | 'services__webview-wrapper': true, | ||
92 | 'is-active': service.isActive, | ||
93 | 'services__webview--force-repaint': this.state.forceRepaint, | ||
94 | }); | ||
95 | |||
96 | let statusBar = null; | ||
97 | if (this.state.statusBarVisible) { | ||
98 | statusBar = <StatusBarTargetUrl text={this.state.targetUrl} />; | ||
99 | } | ||
100 | |||
101 | return ( | ||
102 | <div | ||
103 | className={webviewClasses} | ||
104 | data-name={service.name} | ||
105 | style={{ order: service.order }} | ||
106 | > | ||
107 | {service.isActive && service.isEnabled && ( | ||
108 | <> | ||
109 | {service.hasCrashed && ( | ||
110 | <WebviewCrashHandler | ||
111 | name={service.recipe.name} | ||
112 | webview={service.webview} | ||
113 | reload={reload} | ||
114 | /> | ||
115 | )} | ||
116 | {service.isEnabled && | ||
117 | service.isLoading && | ||
118 | service.isFirstLoad && | ||
119 | !service.isHibernating && | ||
120 | !service.isServiceAccessRestricted && ( | ||
121 | <WebviewLoader loaded={false} name={service.name} /> | ||
122 | )} | ||
123 | {service.isProgressbarEnabled && | ||
124 | service.isLoadingPage && | ||
125 | !service.isFirstLoad && <TopBarProgress />} | ||
126 | {service.isError && ( | ||
127 | <WebviewErrorHandler | ||
128 | name={service.recipe.name} | ||
129 | errorMessage={service.errorMessage} | ||
130 | reload={reload} | ||
131 | edit={edit} | ||
132 | /> | ||
133 | )} | ||
134 | </> | ||
135 | )} | ||
136 | {!service.isEnabled ? ( | ||
137 | <> | ||
138 | {service.isActive && ( | ||
139 | <ServiceDisabled | ||
140 | name={service.name !== '' ? service.name : service.recipe.name} | ||
141 | webview={service.webview} | ||
142 | enable={enable} | ||
143 | /> | ||
144 | )} | ||
145 | </> | ||
146 | ) : ( | ||
147 | <> | ||
148 | {!service.isHibernating ? ( | ||
149 | <> | ||
150 | {showNavBar && <WebControlsScreen service={service} />} | ||
151 | <ServiceWebview | ||
152 | service={service} | ||
153 | setWebviewReference={setWebviewReference} | ||
154 | detachService={detachService} | ||
155 | isSpellcheckerEnabled={isSpellcheckerEnabled} | ||
156 | /> | ||
157 | </> | ||
158 | ) : ( | ||
159 | <div | ||
160 | style={{ | ||
161 | display: 'flex', | ||
162 | flexDirection: 'column', | ||
163 | justifyContent: 'center', | ||
164 | alignItems: 'center', | ||
165 | textAlign: 'center', | ||
166 | }} | ||
167 | > | ||
168 | <span | ||
169 | role="img" | ||
170 | aria-label="Sleeping Emoji" | ||
171 | style={{ fontSize: 42 }} | ||
172 | > | ||
173 | 😴 | ||
174 | </span> | ||
175 | <br /> | ||
176 | <br /> | ||
177 | This service is currently hibernating. | ||
178 | <br /> | ||
179 | Try switching services or reloading Ferdium. | ||
180 | </div> | ||
181 | )} | ||
182 | </> | ||
183 | )} | ||
184 | {statusBar} | ||
185 | </div> | ||
186 | ); | ||
187 | } | ||
188 | } | ||
189 | |||
190 | export default inject('stores', 'actions')(observer(ServiceView)); | ||