Skip to content

Commit

Permalink
Merge pull request #3 from irohalab/add-three-extractors
Browse files Browse the repository at this point in the history 
Add 3 extractors, update UI, bump version
  • Loading branch information
@EverettSummer
EverettSummer authored Jan 14, 2023
2 parents a84c254 + 883638a commit 98679dc
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 15 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mira-ui",
"version": "2.0.2",
"version": "2.1.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
Expand Down
12 changes: 12 additions & 0 deletions src/app/admin/bangumi-detail/video-processs-rule/action-editor/action-editor.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ export class ActionEditorComponent implements OnInit, AfterViewInit {
@Input()
editMode = false;

allowZoom = false;

selectedActionId: string;
selectedNodeIndex: number = -1;
selectedLinkId: string;
Expand All @@ -58,6 +60,8 @@ export class ActionEditorComponent implements OnInit, AfterViewInit {
[ActionType.Extract]: 'envelope outline open'
}

readonly extractorIdList: string[] = ['Default', 'File', 'Subtitle', 'Audio'];

linkMode = LinkMode.None;

@ViewChild('actionEditorContainer') actionEditorContainer: ElementRef;
Expand All @@ -69,6 +73,9 @@ export class ActionEditorComponent implements OnInit, AfterViewInit {
}

ngOnInit(): void {
if (this.editMode) {
this.allowZoom = true;
}
if (this.actions) {
this.edges = [];
this.nodes = Object.keys(this.actions).map(actionId => {
Expand Down Expand Up @@ -226,6 +233,11 @@ export class ActionEditorComponent implements OnInit, AfterViewInit {
}
}

updateActionExtractorId(extractorId: string): void {
(this.actions[this.selectedActionId] as ExtractAction).extractorId = extractorId;
this.updateNode();
}

updateActionProfile(profile: string): void {
(this.actions[this.selectedActionId] as ConvertAction).profile = profile;
this.updateNode();
Expand Down
65 changes: 55 additions & 10 deletions src/app/admin/bangumi-detail/video-processs-rule/action-editor/action-editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,32 @@

<ng-template #nodeTemplate let-node>
<svg:g class="node">
<svg:foreignObject width="160" [attr.height]="nodeHeightDict[node.data.type]">
<svg:foreignObject width="200" [attr.height]="nodeHeightDict[node.data.type]">
<xhtml:div class="action-card" [ngClass]="node.data.type" (click)="selectNode(node.id, $event, node.meta)">
<xhtml:div class="action-label"><xhtml:i class="icon" [ngClass]="nodeIconClassDict[node.data.type]"></xhtml:i>{{node.label}}</xhtml:div>
<xhtml:div *ngIf="node.data.type === eActionType.Convert" class="action-properties">
<xhtml:div class="convert-profile"><xhtml:span class="property-name">profile:</xhtml:span>{{node.data.profile}}</xhtml:div>
<xhtml:div class="profile-extra"><xhtml:span class="property-name">profileExtraData:</xhtml:span>{{node.data.profileExtraData}}</xhtml:div>
</xhtml:div>
<xhtml:div *ngIf="node.data.type === eActionType.Extract" class="action-properties">
<xhtml:div class="extract-source"><xhtml:span class="property-name">extractFrom:</xhtml:span>{{node.data.extractFrom}}</xhtml:div>
<xhtml:div class="extract-target"><xhtml:span class="property-name">extractTarget:</xhtml:span>{{node.data.extractTarget}}</xhtml:div>
<xhtml:div class="outputExtname"><xhtml:span class="property-name">outputExtname:</xhtml:span>{{node.data.outputExtname}}</xhtml:div>
<xhtml:div class="outputExtname"><xhtml:span class="property-name">extractRegex:</xhtml:span>{{node.data.extractRegex}}</xhtml:div>
<xhtml:div class="extractor-id"><xhtml:span class="property-name">extractorId:</xhtml:span>{{node.data.extractorId}}</xhtml:div>
<xhtml:div class="extract-source" *ngIf="!!node.data.extractFrom"><xhtml:span class="property-name">extractFrom:</xhtml:span>{{node.data.extractFrom}}</xhtml:div>
<xhtml:div class="extract-target" *ngIf="!!node.data.extractTarget"><xhtml:span class="property-name">extractTarget:</xhtml:span>{{node.data.extractTarget}}</xhtml:div>
<xhtml:div class="outputExtname" *ngIf="!!node.data.outputExtname"><xhtml:span class="property-name">outputExtname:</xhtml:span>{{node.data.outputExtname}}</xhtml:div>
<xhtml:div class="extractRegex" *ngIf="!!node.data.extractRegex"><xhtml:span class="property-name">extractRegex:</xhtml:span>{{node.data.extractRegex}}</xhtml:div>
<xhtml:div class="extraData" *ngIf="!!node.data.extraData && !!node.data.extraData.propertyName">
<xhtml:span class="property-name">extraData.propertyName:</xhtml:span>{{node.data.extraData.propertyName}}</xhtml:div>
<xhtml:div class="extraData" *ngIf="!!node.data.extraData && !!node.data.extraData.propertyValueRegex">
<xhtml:span class="property-name">extraData.propertyValueRegex:</xhtml:span>{{node.data.extraData.propertyValueRegex}}</xhtml:div>
<xhtml:div class="extraData" *ngIf="!!node.data.extraData && node.data.extractorId === 'Audio'">
<xhtml:span class="property-name">extraData.selectDefault:</xhtml:span>{{node.data.extraData.selectDefault}}</xhtml:div>
</xhtml:div>
</xhtml:div>
</svg:foreignObject>
<svg:rect width="160" [attr.height]="nodeHeightDict[node.data.type]"
<svg:rect width="200" [attr.height]="nodeHeightDict[node.data.type]"
fill="#ffffff" fill-opacity="0.4" *ngIf="node.meta.disabled"></svg:rect>
<g
transform="translate(158, 0)"
transform="translate(198, 0)"
*ngIf="selectedActionId === node.id && linkMode == eLinkMode.None && node.meta.allowInput"
(click)="addUpstreamAction($event)">
<ellipse
Expand All @@ -51,7 +58,7 @@
y="5" ></rect>
</g>
<g
transform="translate(158, 60)"
transform="translate(198, 60)"
*ngIf="selectedActionId === node.id && linkMode == eLinkMode.None && node.meta.allowOutput"
(click)="addDownstreamAction($event)">
<ellipse
Expand Down Expand Up @@ -125,6 +132,17 @@ <h5 class="ui header">Action: {{nodes[selectedNodeIndex].label}}</h5>
</div>
<div class="ui mini form" *ngIf="actions[selectedActionId].type === eActionType.Extract">
<div class="field">
<label>extractorId</label>
<div class="ui selection dropdown" uiDropdown="click">
<i class="dropdown icon"></i>
<div class="text default" *ngIf="!$any(actions[selectedActionId]).extractorId">Select ExtractorId</div>
<div class="text" *ngIf="$any(actions[selectedActionId]).extractorId">{{$any(actions[selectedActionId]).extractorId}}</div>
<div class="menu">
<div class="item" *ngFor="let extractorId of extractorIdList" (click)="updateActionExtractorId(extractorId)">{{extractorId}}</div>
</div>
</div>
</div>
<div class="field" *ngIf="$any(actions[selectedActionId]).extractorId === 'Default' || $any(actions[selectedActionId]).extractorId === 'File'">
<label>extractFrom</label>
<div class="ui selection dropdown" uiDropdown="click">
<i class="dropdown icon"></i>
Expand All @@ -136,7 +154,7 @@ <h5 class="ui header">Action: {{nodes[selectedNodeIndex].label}}</h5>
</div>
</div>
</div>
<div class="field">
<div class="field" *ngIf="$any(actions[selectedActionId]).extractorId === 'Default' || $any(actions[selectedActionId]).extractorId === 'File'">
<label>extractTarget</label>
<div class="ui selection dropdown" uiDropdown="click">
<i class="dropdown icon"></i>
Expand All @@ -159,7 +177,7 @@ <h5 class="ui header">Action: {{nodes[selectedNodeIndex].label}}</h5>
name="outputExtname"
placeholder="extension name of output"/>
</div>
<div class="field">
<div class="field" *ngIf="$any(actions[selectedActionId]).extractorId === 'Default'">
<label>extractRegex</label>
<input type="text"
[(ngModel)]="$any(actions[selectedActionId]).extractRegex"
Expand All @@ -168,6 +186,33 @@ <h5 class="ui header">Action: {{nodes[selectedNodeIndex].label}}</h5>
name="extractRegex"
placeholder="regex to match file/track"/>
</div>
<div class="field" *ngIf="$any(actions[selectedActionId]).extractorId === 'Subtitle' || $any(actions[selectedActionId]).extractorId === 'Audio'">
<label>extraData.propertyName</label>
<input type="text"
[(ngModel)]="$any(actions[selectedActionId]).extraData.propertyName"
(ngModelChange)="updateNode()"
[ngModelOptions]="{updateOn: 'blur'}"
name="propertyName"
placeholder="property name of the stream info to match"/>
</div>
<div class="field" *ngIf="$any(actions[selectedActionId]).extractorId === 'Subtitle' || $any(actions[selectedActionId]).extractorId === 'Audio'">
<label>extraData.propertyValueRegex</label>
<input type="text"
[(ngModel)]="$any(actions[selectedActionId]).extraData.propertyValueRegex"
(ngModelChange)="updateNode()"
[ngModelOptions]="{updateOn: 'blur'}"
name="propertyValueRegex"
placeholder="regular expression of the property of stream info"/>
</div>
<div class="field" *ngIf="$any(actions[selectedActionId]).extractorId === 'Audio'">
<label>extraData.selectDefault</label>
<input type="text"
[(ngModel)]="$any(actions[selectedActionId]).extraData.selectDefault"
(ngModelChange)="updateNode()"
[ngModelOptions]="{updateOn: 'blur'}"
name="selectDefault"
placeholder="if select the default stream"/>
</div>
<!-- extractorId is not supported currently -->
<button class="ui icon button" (click)="removeSelectedNode()"><i class="trash alternate icon"></i></button>
</div>
Expand Down
14 changes: 10 additions & 4 deletions src/app/admin/video-process-job-detail/vertex-graph/vertex-graph.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,16 @@
<xhtml:div class="profile-extra"><xhtml:span class="property-name">profileExtraData:</xhtml:span>{{node.data.action.profileExtraData}}</xhtml:div>
</xhtml:div>
<xhtml:div *ngIf="node.data.actionType === eActionType.Extract" class="action-properties">
<xhtml:div class="extract-source"><xhtml:span class="property-name">extractFrom:</xhtml:span>{{node.data.action.extractFrom}}</xhtml:div>
<xhtml:div class="extract-target"><xhtml:span class="property-name">extractTarget:</xhtml:span>{{node.data.action.extractTarget}}</xhtml:div>
<xhtml:div class="outputExtname"><xhtml:span class="property-name">outputExtname:</xhtml:span>{{node.data.action.outputExtname}}</xhtml:div>
<xhtml:div class="outputExtname"><xhtml:span class="property-name">extractRegex:</xhtml:span>{{node.data.action.extractRegex}}</xhtml:div>
<xhtml:div class="extract-source" *ngIf="!!node.data.action.extractFrom"><xhtml:span class="property-name">extractFrom:</xhtml:span>{{node.data.action.extractFrom}}</xhtml:div>
<xhtml:div class="extract-target" *ngIf="!!node.data.action.extractTarget"><xhtml:span class="property-name">extractTarget:</xhtml:span>{{node.data.action.extractTarget}}</xhtml:div>
<xhtml:div class="outputExtname" *ngIf="!!node.data.action.outputExtname"><xhtml:span class="property-name">outputExtname:</xhtml:span>{{node.data.action.outputExtname}}</xhtml:div>
<xhtml:div class="extractRegex" *ngIf="!!node.data.action.extractRegex"><xhtml:span class="property-name">extractRegex:</xhtml:span>{{node.data.action.extractRegex}}</xhtml:div>
<xhtml:div class="extraData" *ngIf="!!node.data.action.extraData && !!node.data.action.extraData.propertyName">
<xhtml:span class="property-name">extraData.propertyName:</xhtml:span>{{node.data.action.extraData.propertyName}}</xhtml:div>
<xhtml:div class="extraData" *ngIf="!!node.data.action.extraData && !!node.data.action.extraData.propertyValueRegex">
<xhtml:span class="property-name">extraData.propertyValueRegex:</xhtml:span>{{node.data.action.extraData.propertyValueRegex}}</xhtml:div>
<xhtml:div class="extraData" *ngIf="!!node.data.action.extraData && node.data.action.extractorId === 'Audio'">
<xhtml:span class="property-name">extraData.selectDefault:</xhtml:span>{{node.data.action.extraData.selectDefault}}</xhtml:div>
</xhtml:div>
</xhtml:div>
</svg:foreignObject>
Expand Down
1 change: 1 addition & 0 deletions src/app/entity/ExtractAction.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@ export class ExtractAction extends Action {
public outputExtname: string;
public extractRegex: string;
public extractorId = 'Default';
public extraData: any = {};
}

0 comments on commit 98679dc

Please sign in to comment.