path: root/client/src/app/videos/+video-watch/modal/video-share.component.html

<ng-template #modal let-hide="close">
  <div class="modal-header">
    <h4 i18n class="modal-title">Share</h4>
    <span class="close" aria-hidden="true" (click)="hide()"></span>
  </div>

  <div class="modal-body">

    <div *ngIf="currentVideoTimestampString" class="start-at">
      <my-peertube-checkbox
        inputName="startAt" [(ngModel)]="startAtCheckbox"
        i18n-labelText [labelText]="getStartCheckboxLabel()"
      ></my-peertube-checkbox>
    </div>

    <div class="form-group">
      <label i18n>URL</label>
      <div class="input-group input-group-sm">
        <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" />
        <div class="input-group-append">
          <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
            <span class="glyphicon glyphicon-copy"></span>
          </button>
        </div>
      </div>
    </div>

    <div class="form-group qr-code-group">
      <label i18n>QR-Code</label>
      <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode>
    </div>

    <div class="form-group">
      <label i18n>Embed</label>
      <div class="input-group input-group-sm">
        <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" />
        <div class="input-group-append">
          <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
            <span class="glyphicon glyphicon-copy"></span>
          </button>
        </div>
      </div>
    </div>

    <div i18n *ngIf="notSecure()" class="alert alert-warning">
      The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
    </div>
  </div>

  <div class="modal-footer inputs">
    <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
  </div>

</ng-template>