mirror of https://github.com/Ombi-app/Ombi
feat(plex): Rework the Plex Settings page (#4805)
Jamie
2 years ago
committed by
GitHub
parent
46920032ba
commit
1b8c47f316
@ -0,0 +1,7 @@
|
||||
import { IPlexServer } from "../../../../interfaces";
|
||||
|
||||
export interface PlexServerDialogData {
|
||||
server: IPlexServer;
|
||||
deleted?: boolean;
|
||||
closed?: boolean;
|
||||
}
|
||||
@ -1,2 +1,3 @@
|
||||
export * from './PlexSyncType';
|
||||
export * from './PlexCreds';
|
||||
export * from './PlexCreds';
|
||||
export * from './PlexServerDialogData';
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in new issue