-
-
Notifications
You must be signed in to change notification settings - Fork 396
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
433 additions
and
105 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
src/Ombi/ClientApp/src/app/settings/plex/components/models/PlexServerDialogData.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { IPlexServer } from "../../../../interfaces"; | ||
|
||
export interface PlexServerDialogData { | ||
server: IPlexServer; | ||
deleted?: boolean; | ||
closed?: boolean; | ||
} |
3 changes: 2 additions & 1 deletion
3
src/Ombi/ClientApp/src/app/settings/plex/components/models/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
export * from './PlexSyncType'; | ||
export * from './PlexCreds'; | ||
export * from './PlexCreds'; | ||
export * from './PlexServerDialogData'; |
121 changes: 121 additions & 0 deletions
121
...App/src/app/settings/plex/components/plex-server-dialog/plex-server-dialog.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
<h1 mat-dialog-title>Server Configuration</h1> | ||
<mat-dialog-content> | ||
<h2>Connection</h2> | ||
|
||
|
||
<mat-form-field appearance="outline" floatLabel=auto> | ||
<mat-label>Server Name</mat-label> | ||
<input matInput placeholder="Server Name" name="name" [(ngModel)]="this.data.server.name" value="{{this.data.server.name}}"> | ||
</mat-form-field> | ||
|
||
<div class="row"> | ||
<mat-form-field class="col-md-6 col-12" appearance="outline" floatLabel=auto> | ||
<mat-label>Hostname / IP</mat-label> | ||
<input matInput placeholder="Hostname or IP" name="ip" [(ngModel)]="this.data.server.ip" value="{{this.data.server.ip}}" | ||
#serverHostnameIpControl="ngModel" required> | ||
<mat-error *ngIf="serverHostnameIpControl.hasError('required')">Must be specified.</mat-error> | ||
</mat-form-field> | ||
|
||
<mat-form-field class="col-md-4 col-7" appearance="outline" floatLabel=auto> | ||
<mat-label>Port</mat-label> | ||
<input matInput placeholder="Port" name="port" [(ngModel)]="this.data.server.port" value="{{this.data.server.port}}" | ||
#serverPortControl="ngModel" required pattern="^[0-9]*$"> | ||
<mat-error *ngIf="serverPortControl.hasError('required')">Must be specified.</mat-error> | ||
<mat-error *ngIf="serverPortControl.hasError('pattern')">Must be a number.</mat-error> | ||
</mat-form-field> | ||
|
||
<mat-slide-toggle class="col-md-2 col-5 mt-3" id="ssl" name="ssl" [(ngModel)]="this.data.server.ssl" [checked]="this.data.server.ssl"> | ||
SSL | ||
</mat-slide-toggle> | ||
</div> | ||
|
||
<mat-form-field appearance="outline" floatLabel=auto> | ||
<mat-label>Plex Authorization Token</mat-label> | ||
<input matInput placeholder="Plex Authorization Token" name="authToken" [(ngModel)]="this.data.server.plexAuthToken" value="{{this.data.server.plexAuthToken}}" | ||
#serverApiKeyControl="ngModel" required> | ||
<mat-error *ngIf="serverApiKeyControl.hasError('required')">Must be specified.</mat-error> | ||
</mat-form-field> | ||
|
||
<mat-form-field appearance="outline" floatLabel=auto> | ||
<mat-label>Machine Identifier</mat-label> | ||
<input matInput placeholder="Machine Identifier" name="MachineIdentifier" [(ngModel)]="this.data.server.machineIdentifier" value="{{this.data.server.machineIdentifier}}" | ||
#serverApiKeyControl="ngModel" required> | ||
<mat-error *ngIf="serverApiKeyControl.hasError('required')">Must be specified.</mat-error> | ||
</mat-form-field> | ||
|
||
<mat-form-field appearance="outline" floatLabel=auto> | ||
<mat-label>Externally Facing Hostname</mat-label> | ||
<input matInput placeholder="e.g. https://emby.this.data.server.com/" name="serverHostname" name="hostname" | ||
[(ngModel)]="this.data.server.serverHostname" value="{{this.data.server.serverHostname}}" > | ||
<mat-hint> | ||
This will be the external address that users will navigate to when they press the 'View On Plex' button | ||
<br> | ||
<span *ngIf="this.data.server.serverHostname">Current URL: "{{this.data.server.serverHostname}}/web/app#!/server/{{this.data.server.machineIdentifier}}/details?key=%2flibrary%2Fmetadata%2F53334"</span> | ||
<span *ngIf="!this.data.server.serverHostname">Current URL: "https://app.plex.tv/web/app#!/server/{{this.data.server.machineIdentifier}}/details?key=%2flibrary%2Fmetadata%2F53334"</span> | ||
|
||
</mat-hint> | ||
</mat-form-field> | ||
|
||
<mat-form-field appearance="outline" floatLabel=auto> | ||
<mat-label>Episode Batch Size</mat-label> | ||
<input matInput placeholder="150" name="MachineIdentifier" [(ngModel)]="this.data.server.episodeBatchSize" value="{{this.data.server.episodeBatchSize}}"> | ||
<mat-hint> | ||
150 by default, you shouldn't need to change this, this sets how many episodes we request from Plex at a single time. | ||
</mat-hint> | ||
</mat-form-field> | ||
|
||
<h2>Libraries</h2> | ||
<div> | ||
<button mat-raised-button (click)="loadLibraries()" | ||
class="mat-focus-indicator mat-stroked-button mat-button-base">Load Libraries | ||
<i class="fas fa-film"></i> | ||
</button> | ||
</div> | ||
<div *ngIf="this.data.server.plexSelectedLibraries && this.data.server.plexSelectedLibraries.length > 0"> | ||
<label>Please select the libraries for Ombi to monitor. If nothing is selected, Ombi will monitor all | ||
libraries.</label> | ||
<div *ngFor="let lib of this.data.server.plexSelectedLibraries"> | ||
<div class="md-form-field"> | ||
<div class="checkbox"> | ||
<mat-slide-toggle [(ngModel)]="lib.enabled" [checked]="lib.enabled" | ||
for="{{lib.title}}">{{lib.title}}</mat-slide-toggle> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
</mat-dialog-content> | ||
|
||
<mat-dialog-actions align=end> | ||
<button style="margin: .5em 0 0 .5em;" align-middle mat-stroked-button color="accent" | ||
(click)="testPlex()"> | ||
<span style="display: flex; align-items: baseline; white-space: pre-wrap;"> | ||
<i class="fas fa-vial"></i> | ||
<span> Test</span> | ||
</span> | ||
</button> | ||
|
||
<button style="margin: .5em 0 0 .5em;" align-middle mat-stroked-button color="warn" | ||
(click)="delete()"> | ||
<span style="display: flex; align-items: baseline; white-space: pre-wrap;"> | ||
<i class="fas fa-trash"></i> | ||
<span> Delete</span> | ||
</span> | ||
</button> | ||
|
||
<button style="margin: .5em 0 0 0.5em;" mat-stroked-button color="basic" (click)="cancel()"> | ||
<span style="display: flex; align-items: baseline; white-space: pre-wrap;"> | ||
<i class="fas fa-times"></i> | ||
<span> Cancel</span> | ||
</span> | ||
</button> | ||
|
||
|
||
<button style="margin: .5em 0 0 .5em;" mat-stroked-button color="accent" | ||
(click)="save()"> | ||
<span style="display: flex; align-items: baseline; white-space: pre-wrap;"> | ||
<i style="vertical-align: text-top;" class="fas fa-check"></i> | ||
<span> Save</span> | ||
</span> | ||
</button> | ||
</mat-dialog-actions> |
27 changes: 27 additions & 0 deletions
27
...App/src/app/settings/plex/components/plex-server-dialog/plex-server-dialog.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
@media (max-width: 978px) { | ||
::ng-deep .mat-dialog-container { | ||
overflow: unset; | ||
display: flex; | ||
flex-direction: column; | ||
|
||
.mat-dialog-content{ | ||
max-height: unset; | ||
} | ||
|
||
.mat-dialog-actions{ | ||
min-height: unset; | ||
} | ||
|
||
emby-server-dialog-component { | ||
display: flex; | ||
flex-direction: column; | ||
min-height: 1px; | ||
} | ||
} | ||
} | ||
|
||
::ng-deep mat-form-field .mat-form-field { | ||
&-subscript-wrapper { | ||
position: static; | ||
} | ||
} |
79 changes: 79 additions & 0 deletions
79
...ntApp/src/app/settings/plex/components/plex-server-dialog/plex-server-dialog.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
import { Component, Inject } from "@angular/core"; | ||
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog"; | ||
|
||
import { | ||
PlexService, | ||
NotificationService, | ||
TesterService, | ||
} from "../../../../services"; | ||
import { take } from "rxjs"; | ||
import { IPlexLibrariesSettings } from "../../../../interfaces"; | ||
import { PlexServerDialogData } from "../models"; | ||
|
||
@Component({ | ||
selector: "plex-server-dialog-component", | ||
templateUrl: "plex-server-dialog.component.html", | ||
styleUrls: ["plex-server-dialog.component.scss"], | ||
}) | ||
export class PlexServerDialogComponent { | ||
|
||
|
||
public password: string; | ||
public username: string; | ||
|
||
constructor( | ||
private dialogRef: MatDialogRef<PlexServerDialogData>, | ||
@Inject(MAT_DIALOG_DATA) public data: PlexServerDialogData, | ||
private notificationService: NotificationService, | ||
private testerService: TesterService, | ||
private plexService: PlexService | ||
) { | ||
} | ||
|
||
|
||
public cancel() { | ||
this.dialogRef.close({closed: true}); | ||
} | ||
|
||
public testPlex() { | ||
this.testerService.plexTest(this.data.server).pipe(take(1)) | ||
.subscribe(x => { | ||
if (x === true) { | ||
this.notificationService.success(`Successfully connected to the Plex server ${this.data.server.name}!`); | ||
} else { | ||
this.notificationService.error(`We could not connect to the Plex server ${this.data.server.name}!`); | ||
} | ||
}); | ||
} | ||
|
||
public delete() { | ||
this.dialogRef.close({deleted: true}); | ||
} | ||
|
||
public save() { | ||
this.dialogRef.close({server: this.data.server}); | ||
} | ||
|
||
public loadLibraries() { | ||
if (this.data.server.ip == null) { | ||
this.notificationService.error("Plex is not yet configured correctly"); | ||
return; | ||
} | ||
this.plexService.getLibraries(this.data.server).subscribe(x => { | ||
this.data.server.plexSelectedLibraries = []; | ||
if (x.successful) { | ||
x.data.mediaContainer.directory.forEach((item) => { | ||
const lib: IPlexLibrariesSettings = { | ||
key: item.key, | ||
title: item.title, | ||
enabled: false, | ||
}; | ||
this.data.server.plexSelectedLibraries.push(lib); | ||
}); | ||
} else { | ||
this.notificationService.error(x.message); | ||
} | ||
}); | ||
} | ||
|
||
} |
Oops, something went wrong.