path: root/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html

<div class="video" [ngClass]="{ playing: playing }">
  <a [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()">
    <div class="position">
      <my-global-icon *ngIf="playing" iconName="play"></my-global-icon>
      <ng-container *ngIf="!playing">{{ position }}</ng-container>
    </div>

    <my-video-thumbnail
      [video]="video" [nsfw]="isVideoBlur(video)"
      [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
    ></my-video-thumbnail>

    <div class="video-info">
      <a tabindex="-1" class="video-info-name"
         [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
         [attr.title]="video.name"
      >{{ video.name }}</a>

      <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
      <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ video.byAccount }}</span>

      <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video) }}</span>
    </div>
  </a>

  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()"
       autoClose="outside">
    <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>

    <div ngbDropdownMenu>
      <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, video)">
        <my-global-icon iconName="edit"></my-global-icon>
        <ng-container i18n>Edit starts/stops at</ng-container>
      </div>

      <div class="timestamp-options" *ngIf="displayTimestampOptions">
        <div>
          <my-peertube-checkbox
            inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
            i18n-labelText labelText="Start at"
          ></my-peertube-checkbox>

          <my-timestamp-input
            [timestamp]="timestampOptions.startTimestamp"
            [maxTimestamp]="video.duration"
            [disabled]="!timestampOptions.startTimestampEnabled"
            [(ngModel)]="timestampOptions.startTimestamp"
          ></my-timestamp-input>
        </div>

        <div>
          <my-peertube-checkbox
            inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
            i18n-labelText labelText="Stop at"
          ></my-peertube-checkbox>

          <my-timestamp-input
            [timestamp]="timestampOptions.stopTimestamp"
            [maxTimestamp]="video.duration"
            [disabled]="!timestampOptions.stopTimestampEnabled"
            [(ngModel)]="timestampOptions.stopTimestamp"
          ></my-timestamp-input>
        </div>

        <input type="submit" i18n-value value="Save" (click)="updateTimestamps(video)">
      </div>

      <span class="dropdown-item" (click)="removeFromPlaylist(video)">
            <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
          </span>
    </div>
  </div>
</div>