this.handleNavRedirect('/import')} />,
89 | ];
90 |
91 | let backBtn;
92 | let titleWidth = '100%';
93 | if (showBack) {
94 | backBtn = (
95 | {
98 | this.setState({ showBack: false });
99 | }}
100 | >
101 |
114 | Back
115 |
116 |
117 | );
118 | titleWidth = `calc(100% - ${navWidth}px)`;
119 | }
120 |
121 | return (
122 |
129 |
130 |
131 | {backBtn}
132 |
151 |
171 |
180 | {redirectTo && }
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
26 |
35 | {platformName}
36 |
37 |
43 |
43 |
49 | {this.game.name}
50 |
57 | {progressBar}
58 |
59 | );
60 | }
61 | }
62 |
63 | ImportListItem.propTypes = {
64 | platform: PropTypes.object.isRequired,
65 | game: PropTypes.object.isRequired,
66 | progress: PropTypes.number,
67 | thumb: PropTypes.oneOfType([
68 | PropTypes.string,
69 | PropTypes.bool,
70 | ]),
71 | onImportClick: PropTypes.func,
72 | steamIsRunning: PropTypes.bool,
73 | };
74 |
75 | ImportListItem.defaultProps = {
76 | progress: 0,
77 | thumb: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=',
78 | onImportClick: () => {},
79 | steamIsRunning: false,
80 | };
81 |
82 | export default ImportListItem;
83 |
--------------------------------------------------------------------------------
/src/js/Components/TopBlur.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import UWPNoise from '../../img/uwp-noise.png';
4 |
5 | const TopBlur = ({ additionalHeight }) => (
6 |
18 | );
19 |
20 | TopBlur.propTypes = {
21 | additionalHeight: PropTypes.number,
22 | };
23 |
24 | TopBlur.defaultProps = {
25 | additionalHeight: 0,
26 | };
27 |
28 | export default TopBlur;
29 |
--------------------------------------------------------------------------------
/src/js/Components/spinner.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { ProgressCircle } from 'react-desktop/windows';
4 |
5 | const Spinner = (props, context) => {
6 | const { theme } = context;
7 | const { text, size, style } = props;
8 |
9 | return (
10 |
24 | );
25 | };
26 |
27 | Spinner.propTypes = {
28 | text: PropTypes.string,
29 | size: PropTypes.number,
30 | style: PropTypes.object,
31 | };
32 |
33 | Spinner.defaultProps = {
34 | text: '',
35 | size: 100,
36 | style: {},
37 | };
38 |
39 | Spinner.contextTypes = { theme: PropTypes.object };
40 | export default Spinner;
41 |
--------------------------------------------------------------------------------
/src/js/Components/toastHandler.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PubSub from 'pubsub-js';
3 | import Toast from 'react-uwp/Toast';
4 | import Icon from 'react-uwp/Icon';
5 |
6 | class ToastHandler extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.close = this.close;
10 | this.state = {
11 | toasts: [],
12 | };
13 | }
14 |
15 | componentDidMount() {
16 | PubSub.subscribe('toast', (message, args) => {
17 | const { toasts } = this.state;
18 | const toast = { toast: args, show: true };
19 | this.close(toast, 3000);
20 | this.setState({
21 | toasts: toasts.concat(toast),
22 | });
23 | });
24 | }
25 |
26 | close(toast, closeDelay) {
27 | const self = this;
28 | setTimeout(() => {
29 | const toasts = self.state.toasts.slice(0);
30 | toasts[toasts.indexOf(toast)].show = false;
31 | self.setState({ toasts });
32 | }, closeDelay);
33 | }
34 |
35 | render() {
36 | const { toasts } = this.state;
37 | return (
38 | <>
39 | {toasts.slice(0).map((x, i) => (
40 | {x.toast.logoNode}}
44 | title={x.toast.title}
45 | showCloseIcon
46 | >
47 | {x.toast.contents}
48 |
49 | ))}
50 |
51 | );
52 | }
53 | }
54 |
55 | export default ToastHandler;
56 |
--------------------------------------------------------------------------------
/src/js/Game.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Redirect } from 'react-router-dom';
4 | import Image from 'react-uwp/Image';
5 | import Button from 'react-uwp/Button';
6 | import PubSub from 'pubsub-js';
7 | import TopBlur from './Components/TopBlur';
8 | import Steam from './Steam';
9 | import heroPlaceholder from '../img/hero_none.png';
10 | import capsuleVerticalPlaceholder from '../img/capsule_vertical_none.png';
11 | import capsulePlaceholder from '../img/capsule_none.png';
12 | import logoPlaceholder from '../img/logo_none.png';
13 |
14 | const { join } = window.require('path');
15 | const fs = window.require('fs');
16 |
17 | class Game extends React.Component {
18 | constructor(props) {
19 | super(props);
20 | this.toSearch = this.toSearch.bind(this);
21 |
22 | const { location } = this.props;
23 |
24 | this.state = {
25 | game: location.state,
26 | toSearch: false,
27 | grid: null,
28 | poster: null,
29 | hero: null,
30 | logo: null,
31 | };
32 |
33 | PubSub.publish('showBack', true);
34 | }
35 |
36 | componentDidMount() {
37 | const { game } = this.state;
38 | const self = this;
39 |
40 | Steam.getSteamPath().then((steamPath) => {
41 | Steam.getLoggedInUser().then((user) => {
42 | const userdataGridPath = join(steamPath, 'userdata', String(user), 'config', 'grid');
43 |
44 | let grid = Steam.getCustomImage('horizontalGrid', userdataGridPath, game.appid);
45 | let poster = Steam.getCustomImage('verticalGrid', userdataGridPath, game.appid);
46 | let hero = Steam.getCustomImage('hero', userdataGridPath, game.appid);
47 | let logo = Steam.getCustomImage('logo', userdataGridPath, game.appid);
48 |
49 | // Find defaults from the cache if it doesn't exist
50 | const librarycachePath = join(steamPath, 'appcache', 'librarycache');
51 |
52 | if (!grid && fs.existsSync(join(librarycachePath, `${game.appid}_header.jpg`))) {
53 | grid = join(librarycachePath, `${game.appid}_header.jpg`);
54 | }
55 |
56 | if (!poster && fs.existsSync(join(librarycachePath, `${game.appid}_library_600x900.jpg`))) {
57 | poster = join(librarycachePath, `${game.appid}_library_600x900.jpg`);
58 | }
59 |
60 | if (!hero && fs.existsSync(join(librarycachePath, `${game.appid}_library_hero.jpg`))) {
61 | hero = join(librarycachePath, `${game.appid}_library_hero.jpg`);
62 | }
63 |
64 | if (!logo && fs.existsSync(join(librarycachePath, `${game.appid}_logo.png`))) {
65 | logo = join(librarycachePath, `${game.appid}_logo.png`);
66 | }
67 |
68 | self.setState({
69 | grid,
70 | poster,
71 | hero,
72 | logo,
73 | });
74 | });
75 | });
76 | }
77 |
78 | toSearch(assetType) {
79 | const { location } = this.props;
80 | this.setState({ toSearch: });
81 | }
82 |
83 | addNoCache(imageURI) {
84 | if (!imageURI) {
85 | return false;
86 | }
87 |
88 | return `${imageURI}?${(new Date().getTime())}`;
89 | }
90 |
91 | render() {
92 | const {
93 | toSearch,
94 | game,
95 | grid,
96 | hero,
97 | poster,
98 | logo,
99 | } = this.state;
100 |
101 | if (toSearch) {
102 | return toSearch;
103 | }
104 |
105 | const { theme } = this.context;
106 | const titleStyle = {
107 | ...theme.typographyStyles.subTitle,
108 | padding: '20px 0px 10px 0',
109 | width: '100%',
110 | };
111 | const buttonStyle = {
112 | padding: 0,
113 | };
114 |
115 | return (
116 | <>
117 |
118 |
128 |
{game.name}
129 |
Hero
130 |
139 |
140 |
141 |
142 |
Vertical Capsule
143 |
152 |
153 |
159 |
Horizontal Capsule
160 |
169 |
170 |
171 |
172 |
Logo
173 |
182 |
183 |
241 | {games.length}
242 | { ' ' }
243 | games imported from
244 | { ' ' }
245 | {platform.name}
246 |
247 | ),
248 | });
249 | }).then(() => {
250 | // Download images
251 | PubSub.publish('toast', {
252 | logoNode: 'Download',
253 | title: 'Downloading Images...',
254 | contents: (Downloading images for imported games...
),
255 | });
256 |
257 | const ids = games.map((x) => encodeURIComponent(x.id));
258 | let posters = [];
259 | let heroes = [];
260 | let logos = [];
261 |
262 | // Get posters
263 | const getPosters = this.SGDB.getGrids({ type: platform.id, id: ids.join(','), dimensions: ['600x900'] }).then((res) => {
264 | posters = this._formatResponse(ids, res);
265 | }).catch((e) => {
266 | log.error('Error getting posters');
267 | console.error(e);
268 | // @todo show an error toast
269 | });
270 |
271 | // Get heroes
272 | const getHeroes = this.SGDB.getHeroes({ type: platform.id, id: ids.join(',') }).then((res) => {
273 | heroes = this._formatResponse(ids, res);
274 | }).catch((e) => {
275 | log.error('Error getting heroes');
276 | console.error(e);
277 | // @todo show an error toast
278 | });
279 |
280 | // Get heroes
281 | const getLogos = this.SGDB.getLogos({ type: platform.id, id: ids.join(',') }).then((res) => {
282 | logos = this._formatResponse(ids, res);
283 | }).catch((e) => {
284 | log.error('Error getting logos');
285 | console.error(e);
286 | // @todo show an error toast
287 | });
288 |
289 | Promise.all([getPosters, getHeroes, getLogos]).then(() => {
290 | const downloadPromises = [];
291 |
292 | games.forEach((game, i) => {
293 | const appId = Steam.generateNewAppId(game.exe, game.name);
294 |
295 | // Take (legacy) grids from when we got them for the ImportList
296 | const savedGrid = platform.grids[platform.games.indexOf(games[i])];
297 |
298 | if (platform.grids[i] && savedGrid) {
299 | const appIdOld = Steam.generateAppId(game.exe, game.name);
300 |
301 | downloadPromises.push(Steam.addAsset('horizontalGrid', appId, savedGrid.url));
302 |
303 | // Old app id is for Big Picture Mode
304 | downloadPromises.push(Steam.addAsset('horizontalGrid', appIdOld, savedGrid.url));
305 | }
306 |
307 | // Download posters
308 | if (posters[i]) {
309 | downloadPromises.push(Steam.addAsset('verticalGrid', appId, posters[i].url));
310 | }
311 |
312 | // Download heroes
313 | if (heroes[i]) {
314 | downloadPromises.push(Steam.addAsset('hero', appId, heroes[i].url));
315 | }
316 |
317 | // Download logos
318 | if (heroes[i]) {
319 | downloadPromises.push(Steam.addAsset('logo', appId, logos[i].url));
320 | }
321 | });
322 |
323 | Promise.all(downloadPromises).then(() => {
324 | PubSub.publish('toast', {
325 | logoNode: 'Download',
326 | title: 'Downloads Complete',
327 | contents: (All Images Downloaded!
),
328 | });
329 | });
330 | });
331 | }).catch((err) => {
332 | log.error('Cannot import while Steam is running');
333 |
334 | if (err.type === 'OpenError') {
335 | PubSub.publish('toast', {
336 | logoNode: 'Error',
337 | title: 'Error Importing',
338 | contents: (
339 |
340 | Cannot import while Steam is running.
341 |
342 | Close Steam and try again.
343 |
344 | ),
345 | });
346 | }
347 | });
348 | });
349 | }
350 |
351 | addGame(game, platform) {
352 | return this.addGames([game], platform);
353 | }
354 |
355 | render() {
356 | const {
357 | isLoaded, loadingText, installedPlatforms, steamIsRunning,
358 | } = this.state;
359 | const { theme } = this.context;
360 |
361 | if (!isLoaded) {
362 | return ();
363 | }
364 |
365 | return (
366 | <>
367 |
377 | {steamIsRunning
378 | && (
379 |
386 |
391 | IncidentTriangle
392 |
393 | SteamGridDB Manager can not import games while Steam is running. Please close Steam.
394 |
395 | )}
396 | {
397 | installedPlatforms.map((platform) => {
398 | if (!platform.error && platform.games.length) {
399 | return (
400 |
401 |
{platform.name}
402 |
409 |
416 |
417 | );
418 | }
419 |
420 | return <>;
421 | })
422 | }
423 |
145 | {items.map((item, i) => (
146 |
176 | ))}
177 |
140 | Steam installation not found.
141 |
142 | );
143 | }
144 |
145 | if (!isLoaded) {
146 | return ;
147 | }
148 |
149 | if (toGame) {
150 | return toGame;
151 | }
152 |
153 | return (
154 |
155 |
156 |
175 |
176 | {Object.keys(items).map((platform) => (
177 |
{item.name}
),
183 | ,
184 | ]}
185 | onItemClick={this.toGame}
186 | />
187 | ))}
188 |
189 |