-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
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
1 parent
25639d0
commit d594ee6
Showing
33 changed files
with
739 additions
and
281 deletions.
There are no files selected for viewing
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
File renamed without changes.
File renamed without changes.
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
126 changes: 126 additions & 0 deletions
126
...rc/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.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,126 @@ | ||
| <div class="modal-header"> | ||
| <h4 i18n class="modal-title">Edit caption "{{ videoCaption.language.label }}"</h4> | ||
|
|
||
| <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()"> | ||
| <my-global-icon iconName="cross"></my-global-icon> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="modal-body"> | ||
|
|
||
| <div class="row"> | ||
|
|
||
| <my-embed *ngIf="publishedVideo" #embed class="col-md-12 col-xl-6 mb-3" [video]="publishedVideo" enableAPI="true"></my-embed> | ||
|
|
||
| <div [ngClass]="publishedVideo ? 'col-xl-6 col-md-12' : ''"> | ||
|
|
||
| <div class="d-flex justify-content-between align-items-center mb-3 ms-2"> | ||
| <my-peertube-checkbox | ||
| inputName="raw-edition" | ||
| [(ngModel)]="rawEdition" (ngModelChange)="onRawEditionSwitch()" | ||
| i18n-labelText labelText="Raw edition" | ||
| ></my-peertube-checkbox> | ||
|
|
||
| <my-button *ngIf="!rawEdition && !segmentToUpdate" i18n-label label="Add a new segment" (click)="addSegmentToEdit()"> | ||
| </my-button> | ||
| </div> | ||
|
|
||
| <div [hidden]="!rawEdition" [formGroup]="form"> | ||
| <textarea | ||
| id="captionFileContent" | ||
| formControlName="captionFileContent" | ||
| i18n-label aria-label="Caption raw content" | ||
| class="form-control caption-raw-textarea fs-7" | ||
| [ngClass]="{ 'input-error': formErrors['captionFileContent'] }" | ||
| #textarea | ||
| > | ||
| </textarea> | ||
|
|
||
| <div *ngIf="formErrors.captionFileContent" class="form-error" role="alert"> | ||
| {{ formErrors.captionFileContent }} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="text-start segments pe-2 ps-2" [hidden]="rawEdition"> | ||
| <div class="pt-1 pb-1 mb-3" *ngFor="let segment of segments"> | ||
| @if (segmentToUpdate === segment) { | ||
| <div role="form"> | ||
| <div class="d-flex flex-wrap "> | ||
| <div> | ||
| <label class="visually-hidden" i18n for="segmentStart">Segment start timestamp</label> | ||
|
|
||
| <my-timestamp-input | ||
| class="me-1" | ||
| inputName="segmentStart" [disableBorder]="false" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999" | ||
| [(ngModel)]="segment.startMs" [parser]="timestampParser" [formatter]="timestampFormatter" | ||
| ></my-timestamp-input> | ||
|
|
||
| <my-button *ngIf="publishedVideo" icon="clock-arrow-down" i18n-title title="Use video current time as start time" (click)="videoTimeForSegmentStart(segment)"> | ||
| </my-button> | ||
| </div> | ||
|
|
||
| <my-global-icon class="d-inline-block ms-2 me-2" iconName="move-right"></my-global-icon> | ||
|
|
||
| <div> | ||
| <label class="visually-hidden" i18n for="segmentEnd">Segment end timestamp</label> | ||
|
|
||
| <my-timestamp-input | ||
| class="me-1" | ||
| inputName="segmentEnd" [disableBorder]="false" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999" | ||
| [(ngModel)]="segment.endMs" [parser]="timestampParser" [formatter]="timestampFormatter" | ||
| ></my-timestamp-input> | ||
|
|
||
| <my-button *ngIf="publishedVideo" icon="clock-arrow-down" i18n-title title="Use video current time as end time" (click)="videoTimeForSegmentEnd(segment)"> | ||
| </my-button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="d-flex mt-2"> | ||
| <div class="form-group w-100"> | ||
| <label class="visually-hidden" i18n for="segment-edition">Segment end timestamp</label> | ||
|
|
||
| <textarea id="segment-edition" name="segment-edition" class="form-control fs-7" [(ngModel)]="segment.text"></textarea> | ||
|
|
||
| <div *ngIf="segmentEditionError" class="form-error" role="alert">{{ segmentEditionError }}</div> | ||
| </div> | ||
|
|
||
| <div class="d-flex flex-column ms-3"> | ||
| <my-button i18n-title title="Save" icon="tick" (click)="onEditionSaved(segment)"></my-button> | ||
| <my-button class="mt-3" i18n-title title="Revert" icon="undo" (click)="onEditionCanceled(segment)"></my-button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| } @else { | ||
| <div class="d-flex"> | ||
| <div | ||
| class="flex-grow-1 segment-text ps-1 pe-1" role="button" tabindex="0" i18n-title title="Jump to this segment" | ||
| (keyup.enter)="onSegmentClick($event, segment)" (click)="onSegmentClick($event, segment)" | ||
| [ngClass]="getSegmentClasses(segment)" | ||
| > | ||
| <strong class="segment-start me-2 d-block">{{ segment.startFormatted }} -> {{ segment.endFormatted }}</strong> | ||
| <span class="segment-text fs-7" [innerHTML]="segment.text | nl2br"></span> | ||
| </div> | ||
|
|
||
| <div class="d-flex flex-column ms-3" [ngClass]="{ 'opacity-0': !!segmentToUpdate }"> | ||
| <my-edit-button i18n-title title="Edit this segment" (click)="updateSegment(segment)"></my-edit-button> | ||
| <my-delete-button class="mt-1" i18n-title title="Delete this segment" (click)="deleteSegment(segment)"></my-delete-button> | ||
| </div> | ||
| </div> | ||
| } | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="modal-footer inputs"> | ||
| <input | ||
| type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button" | ||
| (click)="hide()" (key.enter)="hide()" | ||
| > | ||
|
|
||
| <input | ||
| type="button" i18n-value value="Edit this caption" class="peertube-button orange-button" | ||
| [disabled]="rawEdition && !form.valid" (click)="updateCaption()" | ||
| > | ||
| </div> |
26 changes: 26 additions & 0 deletions
26
...rc/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.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,26 @@ | ||
| @use '_variables' as *; | ||
| @use '_mixins' as *; | ||
|
|
||
| .caption-raw-textarea, | ||
| .segments { | ||
| min-height: 50vh; | ||
| max-height: 50vh; | ||
|
|
||
| overflow: auto; | ||
| } | ||
|
|
||
| .segments textarea { | ||
| min-height: 100px; | ||
| } | ||
|
|
||
| .segment-text { | ||
| &.active, | ||
| &:hover { | ||
| background: pvar(--mainBackgroundHoverColor); | ||
| } | ||
| } | ||
|
|
||
| my-timestamp-input { | ||
| width: 100px; | ||
| display: inline-block; | ||
| } |
Oops, something went wrong.