Add an option to provide responsive embed (#5690)

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-share-modal / video-share.component.html

<ng-template #modal let-hide="close">
  <div class="modal-header">
    <h4 i18n class="modal-title">Share</h4>
    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
  </div>


  <div class="modal-body">

    <div class="playlist" *ngIf="playlist">
      <h5 i18n *ngIf="video">Share the playlist</h5>

      <div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
        <div i18n>This playlist is private so you won't be able to share it with external users</div>

        <a i18n class="peertube-button-link orange-button" [routerLink]="[ '/my-library/video-playlists/update', playlist.uuid ]" target="_blank" rel="noopener noreferrer">
          Update playlist privacy
        </a>
      </div>

      <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activePlaylistId">

        <ng-container ngbNavItem="url">
          <a ngbNavLink i18n>URL</a>

          <ng-template ngbNavContent>
            <div class="nav-content">
              <my-input-text [value]="playlistUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
            </div>
          </ng-template>
        </ng-container>

        <ng-container ngbNavItem="qrcode">
          <a ngbNavLink i18n>QR-Code</a>

          <ng-template ngbNavContent>
            <div class="nav-content">
              <qrcode [qrdata]="playlistUrl" [width]="256" level="Q"></qrcode>
            </div>
          </ng-template>
        </ng-container>

        <ng-container ngbNavItem="embed">
          <a ngbNavLink i18n>Embed</a>

          <ng-template ngbNavContent>
            <div class="nav-content">
              <my-input-text
                [value]="customizations.onlyEmbedUrl ? playlistEmbedUrl : playlistEmbedHTML" (change)="onUpdate()"
                [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
              ></my-input-text>

              <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 class="embed" [innerHTML]="playlistEmbedSafeHTML"></div>
            </div>
          </ng-template>
        </ng-container>

      </div>

      <div [ngbNavOutlet]="nav"></div>

      <div class="filters">

        <div class="form-group" *ngIf="video">
          <my-peertube-checkbox
            inputName="includeVideoInPlaylist" [(ngModel)]="customizations.includeVideoInPlaylist"
            i18n-labelText labelText="Share the playlist at this video position"
          ></my-peertube-checkbox>
        </div>

        <ng-container *ngIf="isInPlaylistEmbedTab()">
          <div class="form-group">
            <my-peertube-checkbox
              inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
              i18n-labelText labelText="Only display embed URL"
            ></my-peertube-checkbox>
          </div>

          <div class="form-group">
            <my-peertube-checkbox
              inputName="responsive" [(ngModel)]="customizations.responsive"
              i18n-labelText labelText="Responsive embed"
            ></my-peertube-checkbox>
          </div>
        </ng-container>

        <my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder>
      </div>
    </div>


    <div class="video" *ngIf="video">
      <h5 *ngIf="playlist" i18n>Share the video</h5>

      <div *ngIf="isPrivateVideo()" class="alert-private alert alert-warning">
        <div i18n>This video is private so you won't be able to share it with external users</div>

        <a i18n class="peertube-button-link orange-button" [routerLink]="[ '/videos/', 'update', video.shortUUID ]" target="_blank" rel="noopener noreferrer">
          Update video privacy
        </a>
      </div>

      <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeVideoId">

        <ng-container ngbNavItem="url">
          <a ngbNavLink i18n>URL</a>

          <ng-template ngbNavContent>
            <div class="nav-content">
              <my-input-text [value]="videoUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
            </div>
          </ng-template>
        </ng-container>

        <ng-container ngbNavItem="qrcode">
          <a ngbNavLink i18n>QR-Code</a>

          <ng-template ngbNavContent>
            <div class="nav-content">
              <qrcode [qrdata]="videoUrl" [width]="256" level="Q"></qrcode>
            </div>
          </ng-template>
        </ng-container>

        <ng-container ngbNavItem="embed">
          <a ngbNavLink i18n>Embed</a>

          <ng-template ngbNavContent>
            <div class="nav-content">
              <my-input-text
                [value]="customizations.onlyEmbedUrl ? videoEmbedUrl : videoEmbedHTML" (ngModelChange)="onUpdate()"
                [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
              ></my-input-text>

              <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 class="embed" [innerHTML]="videoEmbedSafeHTML"></div>
            </div>
          </ng-template>
        </ng-container>

      </div>

      <div [ngbNavOutlet]="nav"></div>

      <div class="filters">
        <div>
          <div class="form-group start-at" *ngIf="!video.isLive">
            <my-peertube-checkbox
              inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
              i18n-labelText labelText="Start at"
            ></my-peertube-checkbox>

            <my-timestamp-input
              [timestamp]="customizations.startAt"
              [maxTimestamp]="video.duration"
              [disabled]="!customizations.startAtCheckbox"
              [(ngModel)]="customizations.startAt"
            >
            </my-timestamp-input>
          </div>

          <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
            <my-peertube-checkbox
              inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
              i18n-labelText labelText="Auto select subtitle"
            ></my-peertube-checkbox>

            <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
              <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
                <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
              </select>
            </div>
          </div>

          <div class="form-group" *ngIf="isInVideoEmbedTab()">
            <my-peertube-checkbox
              inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
              i18n-labelText labelText="Only display embed URL"
            ></my-peertube-checkbox>
          </div>

          <my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder>
        </div>

        <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
          <div>
            <div class="form-group stop-at" *ngIf="!video.isLive">
              <my-peertube-checkbox
                inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
                i18n-labelText labelText="Stop at"
              ></my-peertube-checkbox>

              <my-timestamp-input
                [timestamp]="customizations.stopAt"
                [maxTimestamp]="video.duration"
                [disabled]="!customizations.stopAtCheckbox"
                [(ngModel)]="customizations.stopAt"
              >
              </my-timestamp-input>
            </div>

            <div class="form-group">
              <my-peertube-checkbox
                inputName="autoplay" [(ngModel)]="customizations.autoplay"
                i18n-labelText labelText="Autoplay"
              ></my-peertube-checkbox>
            </div>

            <div class="form-group">
              <my-peertube-checkbox
                inputName="muted" [(ngModel)]="customizations.muted"
                i18n-labelText labelText="Muted"
              ></my-peertube-checkbox>
            </div>

            <div class="form-group" *ngIf="!video.isLive">
              <my-peertube-checkbox
                inputName="loop" [(ngModel)]="customizations.loop"
                i18n-labelText labelText="Loop"
              ></my-peertube-checkbox>
            </div>

            <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
              <my-peertube-checkbox
                inputName="originUrl" [(ngModel)]="customizations.originUrl"
                i18n-labelText labelText="Use origin instance URL"
              ></my-peertube-checkbox>
            </div>
          </div>

          <ng-container *ngIf="isInVideoEmbedTab()">
            <div class="form-group">
              <my-peertube-checkbox
                inputName="responsive" [(ngModel)]="customizations.responsive"
                i18n-labelText labelText="Responsive embed"
              ></my-peertube-checkbox>
            </div>

            <div class="form-group">
              <my-peertube-checkbox
                inputName="title" [(ngModel)]="customizations.title"
                i18n-labelText labelText="Display video title"
              ></my-peertube-checkbox>
            </div>

            <div class="form-group">
              <my-peertube-checkbox
                inputName="embedP2P" [(ngModel)]="customizations.embedP2P"
                i18n-labelText labelText="P2P"
              ></my-peertube-checkbox>
            </div>

            <div class="form-group">
              <my-peertube-checkbox
                inputName="warningTitle" [(ngModel)]="customizations.warningTitle"
                i18n-labelText labelText="Display privacy warning" [disabled]="!customizations.embedP2P"
              ></my-peertube-checkbox>
            </div>

            <div class="form-group">
              <my-peertube-checkbox
                inputName="controlBar" [(ngModel)]="customizations.controlBar"
                i18n-labelText labelText="Display player control bar"
              ></my-peertube-checkbox>
            </div>

            <div class="form-group">
              <my-peertube-checkbox
                inputName="peertubeLink" [(ngModel)]="customizations.peertubeLink"
                i18n-labelText labelText="Display PeerTube button link"
              ></my-peertube-checkbox>
            </div>
          </ng-container>
        </div>

        <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
             [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">

          <ng-container *ngIf="isAdvancedCustomizationCollapsed">
            <span class="chevron-down"></span>

            <ng-container i18n>
              More customization
            </ng-container>
          </ng-container>

          <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
            <span class="chevron-up"></span>

            <ng-container i18n>
              Less customization
            </ng-container>
          </ng-container>
        </div>
      </div>
    </div>
  </div>

</ng-template>