Merge pull request #6 from irohalab/font-fix

add font selector for ConvertAction
irohalab · Jan 16, 2023 · d9610cc · d9610cc
2 parents 64897fc + c2a271b
commit d9610cc
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mira-ui",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

diff --git a/src/app/admin/bangumi-detail/video-processs-rule/action-editor/action-editor.component.ts b/src/app/admin/bangumi-detail/video-processs-rule/action-editor/action-editor.component.ts
@@ -43,6 +43,9 @@ export class ActionEditorComponent implements OnInit, AfterViewInit {
     @Input()
     editMode = false;
 
+    @Input()
+    fontList: string[] = [];
+
     allowZoom = false;
 
     selectedActionId: string;
@@ -51,7 +54,7 @@ export class ActionEditorComponent implements OnInit, AfterViewInit {
     selectedLinkIndex: number = -1;
 
     readonly nodeHeightDict: {[key: string]: number} = {
-        [ActionType.Convert]: 80,
+        [ActionType.Convert]: 120,
         [ActionType.Extract]: 120
     }
 
@@ -126,7 +129,10 @@ export class ActionEditorComponent implements OnInit, AfterViewInit {
         node.meta.allowInput = action.upstreamActionIds.length < this.getMaxUpstreamByActionType(action.type);
         node.meta.allowOutput = action.downstreamIds.length < 1; // currently only 1 output per action is allowed;
     }
-
+    updateFontName(fontName: string) {
+        (this.actions[this.selectedActionId] as ConvertAction).forceFontName = fontName;
+        this.updateNode();
+    }
     selectLink(event: Event, linkId: string): void {
         event.preventDefault();
         event.stopPropagation();

diff --git a/src/app/admin/bangumi-detail/video-processs-rule/action-editor/action-editor.html b/src/app/admin/bangumi-detail/video-processs-rule/action-editor/action-editor.html
@@ -18,6 +18,7 @@
                         <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="font"><xhtml:span class="property-name">forceFontName:</xhtml:span>{{node.data.forceFontName}}</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">
@@ -121,6 +122,17 @@ <h5 class="ui header">Action: {{nodes[selectedNodeIndex].label}}</h5>
                         </div>
                     </div>
                 </div>
+                <div class="field" *ngIf="fontList.length > 0">
+                    <label>Font Name</label>
+                    <div class="ui selection dropdown" uiDropdown="click">
+                        <i class="dropdown icon"></i>
+                        <div class="text default" *ngIf="!$any(actions[selectedActionId]).forceFontName">Select Profile</div>
+                        <div class="text" *ngIf="$any(actions[selectedActionId]).forceFontName">{{$any(actions[selectedActionId]).forceFontName}}</div>
+                        <div class="menu">
+                            <div class="item" *ngFor="let font of fontList" (click)="updateFontName(font)">{{font}}</div>
+                        </div>
+                    </div>
+                </div>
                 <div class="field" *ngIf="$any(actions[selectedActionId]).profile === eProfileType.SoundOnly">
                     <input type="text"
                            [(ngModel)]="$any(actions[selectedActionId]).profileExtraData"

diff --git a/...tail/video-processs-rule/video-process-rule-editor/video-process-rule-editor.component.ts b/...tail/video-processs-rule/video-process-rule-editor/video-process-rule-editor.component.ts
@@ -45,6 +45,7 @@ export class VideoProcessRuleEditorComponent implements OnInit, OnDestroy {
     eActionType = ActionType;
 
     eProfileType = ProfileType;
+    fontList: string[];
 
     @ViewChild(ActionEditorComponent) _actionEditor!: ActionEditorComponent;
 
@@ -60,6 +61,10 @@ export class VideoProcessRuleEditorComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit(): void {
+        this._subscription.add(
+            this._videoProcessRuleService.listFonts()
+                .subscribe(fonts => this.fontList = fonts)
+        );
         if (this.rule) {
             this.basicInfoForm = this._fb.group({
                 name: [this.rule.name],

diff --git a/...ngumi-detail/video-processs-rule/video-process-rule-editor/video-process-rule-editor.html b/...ngumi-detail/video-processs-rule/video-process-rule-editor/video-process-rule-editor.html
@@ -21,7 +21,7 @@ <h4>Edit Rule</h4>
         </form>
     </section>
     <section class="action-section">
-        <action-editor [actions]="actions" [editMode]="true"></action-editor>
+        <action-editor [actions]="actions" [editMode]="true" [fontList]="fontList"></action-editor>
     </section>
     <div class="footer">
         <button class="ui button primary" (click)="save()">Save</button>

diff --git a/src/app/admin/bangumi-detail/video-processs-rule/video-process-rule.service.ts b/src/app/admin/bangumi-detail/video-processs-rule/video-process-rule.service.ts
@@ -31,7 +31,7 @@ export class VideoProcessRuleService extends BaseService {
             method: 'POST',
             url: '/rule',
             body: rule
-        }
+        };
         return this.sendRequest<{data: VideoProcessRule}>(reqData)
             .pipe(
                 map(res => res.data)
@@ -54,7 +54,7 @@ export class VideoProcessRuleService extends BaseService {
             method: 'PUT',
             url: `/rule/${rule.id}`,
             body: rule
-        }
+        };
         return this.sendRequest<{data: VideoProcessRule}>(reqData)
             .pipe(
                 map(res => res.data)
@@ -65,7 +65,7 @@ export class VideoProcessRuleService extends BaseService {
         const reqData: ReqData = {
             method: 'DELETE',
             url: `/rule/${ruleId}`
-        }
+        };
         return this.sendRequest<any>(reqData);
     }
 
@@ -74,7 +74,15 @@ export class VideoProcessRuleService extends BaseService {
             method: 'POST',
             url: '/rule/condition',
             body: {condition: condition}
-        }
+        };
         return this.sendRequest<any>(reqData);
     }
+
+    public listFonts(): Observable<string[]> {
+        const reqData: ReqData = {
+            method: 'GET',
+            url: '/rule/font'
+        };
+        return this.sendRequest<{data: string[]}>(reqData).pipe(map(res => res.data));
+    }
 }
diff --git a/src/app/admin/video-process-job-detail/vertex-info-panel/vertex-info-panel.html b/src/app/admin/video-process-job-detail/vertex-info-panel/vertex-info-panel.html
@@ -34,7 +34,11 @@
                 <td>profileExtraData</td>
                 <td>{{$any(vertex.action).profileExtraData}}</td>
             </tr>
-            <tr *ngIf="vertex.actionType === eActionType.Extract">
+            <tr *ngIf="vertex.actionType === eActionType.Convert">
+                <td>forceFontName</td>
+                <td colspan="3">{{$any(vertex.action).forceFontName}}</td>
+            </tr>
+            <tr *ngIf="vertex.actionType === eActionType.Extract && ($any(vertex.action).extractorId==='Default' || $any(vertex.action).extractorId==='File')">
                 <td>extractFrom</td>
                 <td>{{$any(vertex.action).extractFrom}}</td>
                 <td>extractTarget</td>
@@ -46,10 +50,20 @@
                 <td>extractorId</td>
                 <td>{{$any(vertex.action).extractorId}}</td>
             </tr>
-            <tr *ngIf="vertex.actionType === eActionType.Extract">
+            <tr *ngIf="vertex.actionType === eActionType.Extract && $any(vertex.action).extractorId==='Default'">
                 <td>extractRegex</td>
                 <td colspan="3">{{$any(vertex.action).extractRegex || 'N/A'}}</td>
             </tr>
+            <tr *ngIf="vertex.actionType === eActionType.Extract && ($any(vertex.action).extractorId==='Subtitle' || $any(vertex.action).extractorId==='Audio')">
+                <td>extraData.propertyName</td>
+                <td>{{$any(vertex.action).extraData.propertyName}}</td>
+                <td>extraData.propertyValueRegex</td>
+                <td>{{$any(vertex.action).extraData.propertyValueRegex}}</td>
+            </tr>
+            <tr *ngIf="vertex.actionType === eActionType.Extract && $any(vertex.action).extractorId==='Audio'">
+                <td>extraData.selectDefault</td>
+                <td colspan="3">{{$any(vertex.action).extraData.selectDefault}}</td>
+            </tr>
             </tbody>
         </table>
     </div>

diff --git a/src/app/entity/ConvertAction.ts b/src/app/entity/ConvertAction.ts
@@ -5,6 +5,7 @@ export class ConvertAction extends Action {
     profile: string;
     profileExtraData: any;
     type = ActionType.Convert;
+    forceFontName: string;
     // below properties will not be serialized.
     videoFilePath?: string;
     audioFilePath?: string;