diff options
Diffstat (limited to 'client/src/app/videos/+video-watch/modal/video-share.component.html')
-rw-r--r-- | client/src/app/videos/+video-watch/modal/video-share.component.html | 82 |
1 files changed, 38 insertions, 44 deletions
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html index 74a3a57d4..02f5f0f44 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.html +++ b/client/src/app/videos/+video-watch/modal/video-share.component.html | |||
@@ -1,52 +1,46 @@ | |||
1 | <div bsModal #modal="bs-modal" class="modal" tabindex="-1"> | 1 | <ng-template #modal let-hide="close"> |
2 | <div class="modal-dialog"> | 2 | <div class="modal-header"> |
3 | <div class="modal-content"> | 3 | <h4 i18n class="modal-title">Share</h4> |
4 | 4 | <span class="close" aria-hidden="true" (click)="hide()"></span> | |
5 | <div class="modal-header"> | 5 | </div> |
6 | <span class="close" aria-hidden="true" (click)="hide()"></span> | ||
7 | <h4 i18n class="modal-title">Share</h4> | ||
8 | </div> | ||
9 | |||
10 | <div class="modal-body"> | ||
11 | <div class="form-group"> | ||
12 | <label i18n>URL</label> | ||
13 | <div class="input-group input-group-sm"> | ||
14 | <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" /> | ||
15 | <div class="input-group-btn" placement="bottom right"> | ||
16 | <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search"> | ||
17 | <span class="glyphicon glyphicon-copy"></span> | ||
18 | </button> | ||
19 | </div> | ||
20 | </div> | ||
21 | </div> | ||
22 | 6 | ||
23 | <div class="form-group"> | 7 | <div class="modal-body"> |
24 | <label i18n>Embed</label> | 8 | <div class="form-group"> |
25 | <div class="input-group input-group-sm"> | 9 | <label i18n>URL</label> |
26 | <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" /> | 10 | <div class="input-group input-group-sm"> |
27 | <div class="input-group-btn" placement="bottom right"> | 11 | <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" /> |
28 | <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search"> | 12 | <div class="input-group-append"> |
29 | <span class="glyphicon glyphicon-copy"></span> | 13 | <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> |
30 | </button> | 14 | <span class="glyphicon glyphicon-copy"></span> |
31 | </div> | 15 | </button> |
32 | </div> | ||
33 | </div> | 16 | </div> |
17 | </div> | ||
18 | </div> | ||
34 | 19 | ||
35 | <div i18n *ngIf="notSecure()" class="alert alert-warning"> | 20 | <div class="form-group"> |
36 | 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). | 21 | <label i18n>Embed</label> |
22 | <div class="input-group input-group-sm"> | ||
23 | <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" /> | ||
24 | <div class="input-group-append"> | ||
25 | <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> | ||
26 | <span class="glyphicon glyphicon-copy"></span> | ||
27 | </button> | ||
37 | </div> | 28 | </div> |
29 | </div> | ||
30 | </div> | ||
38 | 31 | ||
39 | <div class="form-group qr-code-group"> | 32 | <div i18n *ngIf="notSecure()" class="alert alert-warning"> |
40 | <label i18n>QR-Code</label> | 33 | 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). |
41 | <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode> | 34 | </div> |
42 | </div> | ||
43 | 35 | ||
44 | <div class="form-group inputs"> | 36 | <div class="form-group qr-code-group"> |
45 | <span i18n class="action-button action-button-cancel" (click)="hide()"> | 37 | <label i18n>QR-Code</label> |
46 | Cancel | 38 | <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode> |
47 | </span> | ||
48 | </div> | ||
49 | </div> | ||
50 | </div> | 39 | </div> |
51 | </div> | 40 | </div> |
52 | </div> | 41 | |
42 | <div class="modal-footer inputs"> | ||
43 | <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span> | ||
44 | </div> | ||
45 | |||
46 | </ng-template> | ||