manually add local images + updated readme

SteamGridDB · Nov 7, 2017 · 34c543f · 34c543f
1 parent c0b3caa
commit 34c543f
Show file tree

Hide file tree

Showing 16 changed files with 126 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,12 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
-## 2.2.5 - 2017-11-xx
+## 2.2.5 - 2017-11-07
 
 ### Added
 
 * Image and icon indexes will now persist from **previously** generated list. This means that if your newly generated list overwrites apps with the **same** `APPID`, you should see previously selected images/icons.
+* Local images with `png`, `tga`, `jpg` and `jpeg` extensions can now be added to image pool manually in preview page.
 
 ### Fixed
 
@@ -17,6 +18,7 @@ All notable changes to this project will be documented in this file.
 ### Changed
 
 * Fuzzy parser will now look for `..., The...` segment first. Before it looked for it after no matches were found. That, however, sometimes returned false positives which resulted in `..., The...` segment replacement being skipped. Click [here](https://regex101.com/r/o2DCJ7/2) to see how it does it.
+* Changed image size from `cover` to `contain` in preview menu, because Steam seems to be doing it for non-standard images.
 
 ## 2.2.4 - 2017-10-27
 

diff --git a/README.md b/README.md
@@ -18,19 +18,16 @@ All script must be run using `npm run` command. For example, `npm run watch:rend
 
 |Script|Function|
 |---|---|
+|`postinstall`|Recompiles native apps to match Electron's NodeJS version if needed|
+|`start`|Launches compiled app|
 |`watch:main`|Compiles Electron app and watches for changes|
 |`watch:renderer`|Compiles a renderer for an Electron app and watches for changes|
 |`build:main`|Compiles Electron app in production mode|
 |`build:renderer`|Compiles a renderer for an Electron app in production mode|
 |`build:dist`|Runs `build:main` and `build:renderer`|
 |`build:win`|Compiles an executable installer for Windows|
 |`build:linux`|Compiles a `deb` package and `AppImage` for linux|
-|`start`|Launches compiled app|
-|`docker:create`|Create docker image|
-|`docker:bash`|Allows to access bash in created image|
-|`docker:remove`|Removes docker image and everything related to it|
-|`docker:npm-install`|Runs `npm install` in docker|
-|`docker:build`|Runs `build:win` and `build:linux` in docker|
+|`build:mac`|Compiles a `dmg` package for MacOS|
 
 ## Debugging an app
 
@@ -61,26 +58,11 @@ npm run build:dist
 npm run build:linux
 ```
 
-### For docker
-
-To create docker image and install dependencies:
-
-```
-npm run docker:create
-npm run docker:npm-install
-```
+### For MacOS
 
-Then, scripts must be run in this order:
+Scripts must be run in this order:
 
 ```
 npm run build:dist
-npm run docker:build
-```
-
-## Windows terminal
-
-Some commands will require unix-like terminal, therefore if some commands don't work you'll need to set `npm` to use `powershell` or similar terminals for running scripts. This requires `npm > 5.1.x`. Terminal can be set using this command:
-
-```
-npm config set script-shell C:/Windows/System32/WindowsPowerShell/v1.0/powershell.exe
+npm run build:mac
 ```
diff --git a/src/lang/english/langData.ts b/src/lang/english/langData.ts
@@ -12,6 +12,7 @@ export const EnglishLang: languageContainer = {
                 filter: 'Filter app titles',
                 by: 'by',
                 refreshImages: 'Refresh images',
+                addLocalImages: 'Add local images',
                 retryDownload: 'Retry download',
                 generateAppList: 'Generate app list',
                 saveAppList: 'Save app list',

diff --git a/src/lib/image-providers/console-grid.worker.ts b/src/lib/image-providers/console-grid.worker.ts
@@ -38,7 +38,7 @@ class ConsoleGridProvider extends GenericProvider {
             }, '').then((response) => {
                  if (response && response.length > 0 && response.length < 64) {
                     this.proxy.image({
-                        imageProvider: this.proxy.providerName,
+                        imageProvider: 'ConsoleGrid',
                         imageUrl: response,
                         loadStatus: 'notStarted'
                     });

diff --git a/src/lib/image-providers/generic-provider.ts b/src/lib/image-providers/generic-provider.ts
@@ -117,12 +117,12 @@ export class ProviderProxy {
     timeout(timeInSeconds: number) {
         if (!this._manager.timedOut) {
             this._manager.timeout(timeInSeconds * 1000);
-            this._manager.postMessage('timeout', { provider: this.providerName, time: timeInSeconds, id: this._id });
+            this._manager.postMessage('timeout', { provider: this.providerName as ImageContent["imageProvider"], time: timeInSeconds, id: this._id });
         }
     }
 
     error(error: number | string, url?: string) {
-        this._manager.postMessage('error', { error: error, title: this._title, provider: this.providerName, id: this._id, url: url });
+        this._manager.postMessage('error', { error: error, title: this._title, provider: this.providerName as ImageContent["imageProvider"], id: this._id, url: url });
     }
 
     image(content: ImageContent) {

diff --git a/src/lib/image-providers/retrogaming-cloud.worker.ts b/src/lib/image-providers/retrogaming-cloud.worker.ts
@@ -23,7 +23,7 @@ class RetrogamingCloudProvider extends GenericProvider {
                             promises.push(this.retrieveMediaData(listData[i].id));
                         if (listData[i].most_popular_media_url && (listData[i].most_popular_media_url as string).length > 0) {
                             this.proxy.image({
-                                imageProvider: this.proxy.providerName,
+                                imageProvider: 'retrogaming.cloud',
                                 imageUrl: listData[i].most_popular_media_url,
                                 imageUploader: listData[i].most_popular_media_created_by_name || undefined,
                                 loadStatus: 'notStarted'
@@ -56,7 +56,7 @@ class RetrogamingCloudProvider extends GenericProvider {
                 for (let i = 0; i < results.length; i++) {
                     if (results[i].url) {
                         this.proxy.image({
-                            imageProvider: this.proxy.providerName,
+                            imageProvider: 'retrogaming.cloud',
                             imageUrl: results[i].url,
                             imageUploader: results[i].created_by ? results[i].created_by.name : undefined,
                             loadStatus: 'notStarted'

diff --git a/src/lib/image-providers/steamgriddb.worker.ts b/src/lib/image-providers/steamgriddb.worker.ts
@@ -17,7 +17,7 @@ class SteamGridDbProvider extends GenericProvider {
             if (response !== null && response['data'] !== undefined) {
                 for (let i = 0; i < response['data'].length; i++) {
                     this.proxy.image({
-                        imageProvider: this.proxy.providerName,
+                        imageProvider: 'SteamGridDB',
                         imageUrl: response['data'][i].grid_url,
                         imageUploader: response['data'][i].author,
                         loadStatus: 'notStarted'

diff --git a/src/models/image-providers.model.ts b/src/models/image-providers.model.ts
@@ -9,13 +9,13 @@ export interface ProviderImageData {
 
 export interface ProviderErrorData {
     title: string,
-    provider: string,
+    provider: ImageContent["imageProvider"],
     error: number | string,
     url?: string
 }
 
 export interface ProviderTimeoutData {
-    provider: string,
+    provider: ImageContent["imageProvider"],
     time: number
 }
 

diff --git a/src/models/language.model.ts b/src/models/language.model.ts
@@ -9,6 +9,7 @@ export interface languageStruct {
             filter: string,
             by: string,
             refreshImages: string,
+            addLocalImages: string,
             retryDownload: string,
             generateAppList: string,
             saveAppList: string,

diff --git a/src/models/preview.model.ts b/src/models/preview.model.ts
@@ -3,7 +3,7 @@ import { Observable, BehaviorSubject } from "rxjs";
 export type ImageDownloadStatus = 'notStarted' | 'downloading' | 'done' | 'failed';
 
 export interface ImageContent {
-    imageProvider: string,
+    imageProvider: 'SteamGridDB' | 'retrogaming.cloud' | 'ConsoleGrid' | 'Steam' | 'LocalStorage',
     imageUploader?: string,
     imageUrl: string,
     loadStatus: ImageDownloadStatus

diff --git a/src/renderer/components/preview.component.ts b/src/renderer/components/preview.component.ts
@@ -3,7 +3,9 @@ import { Subscription } from 'rxjs';
 import { PreviewService, SettingsService, ImageProviderService } from "../services";
 import { PreviewData, PreviewDataApp, PreviewVariables, AppSettings, ImageContent } from "../../models";
 import { APP } from '../../variables';
+import { url } from '../../lib';
 import * as _ from 'lodash';
+import * as path from 'path';
 
 @Component({
     selector: 'preview',
@@ -19,7 +21,7 @@ export class PreviewComponent implements OnDestroy {
     private filterValue: string = '';
     private scrollingEntries: boolean = false;
 
-    constructor(private previewService: PreviewService, private settingsService: SettingsService, private imageProviderService: ImageProviderService, private changeDetectionRef: ChangeDetectorRef, private renderer: Renderer2, private elementRef: ElementRef) {       
+    constructor(private previewService: PreviewService, private settingsService: SettingsService, private imageProviderService: ImageProviderService, private changeDetectionRef: ChangeDetectorRef, private renderer: Renderer2, private elementRef: ElementRef) {
         this.previewData = this.previewService.getPreviewData();
         this.previewVariables = this.previewService.getPreviewVariables();
         this.subscriptions.add(this.previewService.getPreviewDataChange().subscribe(_.debounce(() => {
@@ -70,7 +72,7 @@ export class PreviewComponent implements OnDestroy {
         }
     }
 
-    private loadImage(app: PreviewDataApp){
+    private loadImage(app: PreviewDataApp) {
         this.previewService.loadImage(app);
     }
 
@@ -96,6 +98,24 @@ export class PreviewComponent implements OnDestroy {
         return this.getImagePool(app.imagePool).content.length + (app.steamImage ? 1 : 0);
     }
 
+    private addLocalImages(app: PreviewDataApp, event: Event) {
+        let target = event.target as HTMLInputElement;
+        if (target.files) {
+            let extRegex = /png|tga|jpg|jpeg/i;
+            for (let i = 0; i < target.files.length; i++) {
+                if (extRegex.test(path.extname(target.files[i].path))) {
+                    let imageUrl = url.encodeFile(target.files[i].path);
+                    this.previewService.addUniqueImage(app.imagePool, {
+                        imageProvider: 'LocalStorage',
+                        imageUrl,
+                        loadStatus: 'done'
+                    });
+                }
+            }
+            target.value = null;
+        }
+    }
+
     private get lang() {
         return APP.lang.preview.component;
     }

diff --git a/src/renderer/services/preview.service.ts b/src/renderer/services/preview.service.ts
@@ -693,8 +693,12 @@ export class PreviewService {
             this.previewDataChanged.next();
     }
 
-    private addUniqueImage(imageKey: string, content: ImageContent) {
-        if (this.appImages[imageKey].content.findIndex((item) => item.imageUrl === content.imageUrl) === -1) {
+    isImageUnique(imageKey: string, imageUrl: string) {
+        return this.appImages[imageKey].content.findIndex((item) => item.imageUrl === imageUrl) === -1;
+    }
+
+    addUniqueImage(imageKey: string, content: ImageContent) {
+        if (this.isImageUnique(imageKey, content.imageUrl)) {
             this.appImages[imageKey].content.push(content);
             return this.appImages[imageKey].content[this.appImages[imageKey].content.length - 1];
         }

diff --git a/src/renderer/styles/preview.component.scss b/src/renderer/styles/preview.component.scss
@@ -171,7 +171,7 @@ $image-ratio: 430/920;
 						}
 
 						&.imageLoaded {
-							background-size: cover;
+							background-size: contain;
 						}
 
 						> div {
@@ -308,6 +308,10 @@ $image-ratio: 430/920;
 										height: calc(var(--row-height) * 0.5);
 										padding: 0.2em;
 									}
+
+									> .separator {
+										flex: 1 1 auto;
+									}
 								}
 							}
 						}

diff --git a/src/renderer/svg-components/add-images.component.ts b/src/renderer/svg-components/add-images.component.ts
@@ -0,0 +1,68 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'svg[add-images]',
+    template: `
+        <svg:g>
+            <svg:g>
+                <svg:path d="M311.3,108.74c-15.304,0-27.752,12.444-27.752,27.752c0.004,15.3,12.452,27.744,27.752,27.744s27.752-12.44,27.752-27.744
+                    C339.052,121.188,326.604,108.74,311.3,108.74z"/>
+            </svg:g>
+        </svg:g>
+        <svg:g>
+            <svg:g>
+                <svg:path d="M252.164,286.1c-49.992,0-90.508,40.52-90.508,90.5c0,49.984,40.516,90.508,90.508,90.508s90.512-40.524,90.512-90.508
+                    C342.676,326.62,302.156,286.1,252.164,286.1z M303.148,387.328h-39.336v40.344c0,6.476-5.336,11.744-11.812,11.744
+                    s-11.812-5.264-11.812-11.744v-40.344h-39.172c-6.476,0-11.748-5.336-11.748-11.812s5.268-11.812,11.748-11.812h39.172v-38.168
+                    c0-6.472,5.336-11.744,11.812-11.744s11.812,5.268,11.812,11.744v38.168h39.336c6.476,0,11.748,5.336,11.748,11.812
+                    S309.624,387.328,303.148,387.328z"/>
+            </svg:g>
+        </svg:g>
+        <svg:g>
+            <svg:g>
+                <svg:path d="M484.356,36.892H19.976C9.12,36.892,0,46.56,0,57.416v299.496c0,10.86,9.12,18.6,19.976,18.6h118.056
+                    c0-63,51.2-114.124,114.132-114.124c62.936,0,114.136,51.124,114.136,114.124h118.056c10.856,0,19.644-7.744,19.644-18.6V57.416
+                    C504,46.56,495.212,36.892,484.356,36.892z M391.5,172.552l-74.456,74.472L203.712,133.708c-1.54-1.54-4.024-1.54-5.564,0
+                    l-71.884,71.88l-32.816-32.812c-1.536-1.54-4.172-1.54-5.708,0l-52.304,52.16V72.328H468.56v171.748l-71.5-71.524
+                    C395.52,171.012,393.04,171.012,391.5,172.552z"/>
+            </svg:g>
+        </svg:g>
+        <svg:rect x="0" y="0" width="100%" height="100%" fill="transparent">
+            <svg:title>{{title}}</svg:title>
+        </svg:rect>
+    `,
+    host: {
+        viewBox: "0 0 509.25 509.25",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        '[class.hover]': 'hover',
+        '[class.active]': 'active'
+    },
+    styles: [`
+        :host{
+            height: 1em;
+            vertical-align: middle;
+            background-color: var(--select-image-alert-background, transparent);
+        }
+        path{ 
+            fill: var(--color-image-alert);
+        }
+        :host(.hover):hover{
+            background-color: var(--select-image-alert-background-hover, transparent);
+        }
+        :host(.active):active{
+            background-color: var(--select-image-alert-background-active, transparent);
+        }
+        :host(.hover):hover path{
+            fill: var(--color-image-alert-hover);
+        }
+        :host(.active):active path{
+            fill: var(--color-image-alert-active);
+        }
+    `]
+})
+export class AddImagesComponent {
+    @Input() title: string;
+    @Input() hover: boolean;
+    @Input() active: boolean;
+}
diff --git a/src/renderer/svg-components/index.ts b/src/renderer/svg-components/index.ts
@@ -3,4 +3,5 @@ export * from './select-arrow-left.component';
 export * from './select-arrow-right.component';
 export * from './select-arrow-down.component';
 export * from './refresh-images.component';
-export * from './image-alert.component';
+export * from './image-alert.component';
+export * from './add-images.component';
diff --git a/src/renderer/templates/preview.component.html b/src/renderer/templates/preview.component.html
@@ -56,6 +56,9 @@
                                                     {{app.configurationTitle + (app.steamCategories.length > 0 ? ' (' + app.steamCategories.join(', ') + ')' : '')}}
                                                 </div>
                                                 <div class="appButtons">
+                                                    <svg class="button" [title]="lang.addLocalImages" add-images hover="true" active="true" (click)="fileInput.click()"></svg>
+                                                    <input style="display: none;" #fileInput multiple type="file" accept=".png, .jpeg, .jpg, .tga" (change)="addLocalImages(app, $event)"/>
+                                                    <span class="separator"></span>
                                                     <svg class="button" *ngIf="!getImagePool(app.imagePool).retrieving" (click)="refreshImages(app)" [title]="lang.refreshImages" refresh-images hover="true" active="true"></svg>
                                                     <svg class="button" *ngIf="image != undefined && image.loadStatus === 'failed'" (click)="loadImage(app)" [title]="lang.retryDownload" image-alert hover="true" active="true"></svg>
                                                 </div>