Chocobozzz/PeerTube

<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>