-<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
- <div class="modal-dialog">
- <div class="modal-content">
+<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-header">
- <span class="close" aria-hidden="true" (click)="hide()"></span>
- <h4 class="modal-title">Share</h4>
- </div>
+ <div class="modal-body">
+ <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)">
+
+ <ngb-tab i18n-title title="URL" id="url">
+ <ng-template ngbTabContent>
- <div class="modal-body">
- <div class="form-group">
- <label>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-btn" placement="bottom right">
- <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
- <span class="glyphicon glyphicon-copy"></span>
- </button>
+ <div class="tab-content">
+ <div class="input-group">
+ <input #urlInput (click)="urlInput.select()" type="text" class="form-control 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>
- <div class="form-group">
- <label>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-btn" placement="bottom right">
- <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
- <span class="glyphicon glyphicon-copy"></span>
- </button>
+ </ng-template>
+ </ngb-tab>
+
+ <ngb-tab i18n-title title="QR-Code" id="qrcode">
+ <ng-template ngbTabContent>
+ <div class="tab-content">
+ <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode>
+ </div>
+ </ng-template>
+ </ngb-tab>
+
+ <ngb-tab i18n-title title="Embed" id="embed">
+ <ng-template ngbTabContent>
+ <div class="tab-content">
+ <div class="input-group">
+ <input #shareInput (click)="shareInput.select()" type="text" class="form-control 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 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>
+ </ng-template>
+ </ngb-tab>
+
+ </ngb-tabset>
+
+ <div class="filters">
+ <div>
+ <div class="form-group start-at">
+ <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="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 *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">
+ <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
+ </select>
+ </div>
</div>
+ </div>
+
+ <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
+ [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
+
+ <ng-container *ngIf="isAdvancedCustomizationCollapsed">
+ <span class="glyphicon glyphicon-menu-down"></span>
+
+ <ng-container i18n>
+ More customization
+ </ng-container>
+ </ng-container>
+
+ <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
+ <span class="glyphicon glyphicon-menu-up"></span>
- <div class="form-group inputs">
- <span class="action-button action-button-cancel" (click)="hide()">
- Cancel
- </span>
+ <ng-container i18n>
+ Less customization
+ </ng-container>
+ </ng-container>
+ </div>
+
+ <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
+ <div>
+ <div class="form-group stop-at">
+ <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">
+ <my-peertube-checkbox
+ inputName="loop" [(ngModel)]="customizations.loop"
+ i18n-labelText labelText="Loop"
+ ></my-peertube-checkbox>
+ </div>
</div>
+
+ <ng-container *ngIf="isInEmbedTab()">
+ <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="warningTitle" [(ngModel)]="customizations.warningTitle"
+ i18n-labelText labelText="Display privacy warning"
+ ></my-peertube-checkbox>
+ </div>
+
+ <div class="form-group">
+ <my-peertube-checkbox
+ inputName="controls" [(ngModel)]="customizations.controls"
+ i18n-labelText labelText="Display player controls"
+ ></my-peertube-checkbox>
+ </div>
+ </ng-container>
</div>
</div>
</div>
-</div>
+
+ <div class="modal-footer inputs">
+ <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
+ </div>
+
+</ng-template>
projects / oweals / peertube.git / blobdiff