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 | 192 |
1 files changed, 153 insertions, 39 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 955b2b80c..82e59d04d 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 | |||
@@ -5,53 +5,167 @@ | |||
5 | </div> | 5 | </div> |
6 | 6 | ||
7 | <div class="modal-body"> | 7 | <div class="modal-body"> |
8 | <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)"> | ||
8 | 9 | ||
9 | <div class="start-at"> | 10 | <ngb-tab i18n-title title="URL" id="url"> |
10 | <my-peertube-checkbox | 11 | <ng-template ngbTabContent> |
11 | inputName="startAt" [(ngModel)]="startAtCheckbox" | 12 | |
12 | i18n-labelText labelText="Start at" | 13 | <div class="tab-content"> |
13 | ></my-peertube-checkbox> | 14 | <div class="input-group"> |
14 | 15 | <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getVideoUrl()" /> | |
15 | <my-timestamp-input | 16 | <div class="input-group-append"> |
16 | [timestamp]="currentVideoTimestamp" | 17 | <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> |
17 | [maxTimestamp]="video.duration" | 18 | <span class="glyphicon glyphicon-copy"></span> |
18 | [disabled]="!startAtCheckbox" | 19 | </button> |
19 | [(ngModel)]="currentVideoTimestamp" | 20 | </div> |
20 | > | 21 | </div> |
21 | </my-timestamp-input> | 22 | </div> |
22 | </div> | 23 | |
24 | </ng-template> | ||
25 | </ngb-tab> | ||
26 | |||
27 | <ngb-tab i18n-title title="QR-Code" id="qrcode"> | ||
28 | <ng-template ngbTabContent> | ||
29 | <div class="tab-content"> | ||
30 | <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode> | ||
31 | </div> | ||
32 | </ng-template> | ||
33 | </ngb-tab> | ||
34 | |||
35 | <ngb-tab i18n-title title="Embed" id="embed"> | ||
36 | <ng-template ngbTabContent> | ||
37 | <div class="tab-content"> | ||
38 | <div class="input-group"> | ||
39 | <input #shareInput (click)="shareInput.select()" type="text" class="form-control readonly" readonly [value]="getVideoIframeCode()" /> | ||
40 | <div class="input-group-append"> | ||
41 | <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> | ||
42 | <span class="glyphicon glyphicon-copy"></span> | ||
43 | </button> | ||
44 | </div> | ||
45 | </div> | ||
46 | |||
47 | <div i18n *ngIf="notSecure()" class="alert alert-warning"> | ||
48 | 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). | ||
49 | </div> | ||
50 | </div> | ||
51 | </ng-template> | ||
52 | </ngb-tab> | ||
53 | |||
54 | </ngb-tabset> | ||
23 | 55 | ||
24 | <div class="form-group"> | 56 | <div class="filters"> |
25 | <label i18n>URL</label> | 57 | <div> |
26 | <div class="input-group input-group-sm"> | 58 | <div class="form-group start-at"> |
27 | <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" /> | 59 | <my-peertube-checkbox |
28 | <div class="input-group-append"> | 60 | inputName="startAt" [(ngModel)]="customizations.startAtCheckbox" |
29 | <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> | 61 | i18n-labelText labelText="Start at" |
30 | <span class="glyphicon glyphicon-copy"></span> | 62 | ></my-peertube-checkbox> |
31 | </button> | 63 | |
64 | <my-timestamp-input | ||
65 | [timestamp]="customizations.startAt" | ||
66 | [maxTimestamp]="video.duration" | ||
67 | [disabled]="!customizations.startAtCheckbox" | ||
68 | [(ngModel)]="customizations.startAt" | ||
69 | > | ||
70 | </my-timestamp-input> | ||
32 | </div> | 71 | </div> |
33 | </div> | ||
34 | </div> | ||
35 | 72 | ||
36 | <div class="form-group qr-code-group"> | 73 | <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block"> |
37 | <label i18n>QR-Code</label> | 74 | <my-peertube-checkbox |
38 | <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode> | 75 | inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox" |
39 | </div> | 76 | i18n-labelText labelText="Auto select subtitle" |
77 | ></my-peertube-checkbox> | ||
40 | 78 | ||
41 | <div class="form-group"> | 79 | <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }"> |
42 | <label i18n>Embed</label> | 80 | <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox"> |
43 | <div class="input-group input-group-sm"> | 81 | <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option> |
44 | <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" /> | 82 | </select> |
45 | <div class="input-group-append"> | 83 | </div> |
46 | <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> | ||
47 | <span class="glyphicon glyphicon-copy"></span> | ||
48 | </button> | ||
49 | </div> | 84 | </div> |
50 | </div> | 85 | </div> |
51 | </div> | ||
52 | 86 | ||
53 | <div i18n *ngIf="notSecure()" class="alert alert-warning"> | 87 | <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button" |
54 | 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). | 88 | [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"> |
89 | |||
90 | <ng-container *ngIf="isAdvancedCustomizationCollapsed"> | ||
91 | <span class="glyphicon glyphicon-menu-down"></span> | ||
92 | |||
93 | <ng-container i18n> | ||
94 | More customization | ||
95 | </ng-container> | ||
96 | </ng-container> | ||
97 | |||
98 | <ng-container *ngIf="!isAdvancedCustomizationCollapsed"> | ||
99 | <span class="glyphicon glyphicon-menu-up"></span> | ||
100 | |||
101 | <ng-container i18n> | ||
102 | Less customization | ||
103 | </ng-container> | ||
104 | </ng-container> | ||
105 | </div> | ||
106 | |||
107 | <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed"> | ||
108 | <div> | ||
109 | <div class="form-group stop-at"> | ||
110 | <my-peertube-checkbox | ||
111 | inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox" | ||
112 | i18n-labelText labelText="Stop at" | ||
113 | ></my-peertube-checkbox> | ||
114 | |||
115 | <my-timestamp-input | ||
116 | [timestamp]="customizations.stopAt" | ||
117 | [maxTimestamp]="video.duration" | ||
118 | [disabled]="!customizations.stopAtCheckbox" | ||
119 | [(ngModel)]="customizations.stopAt" | ||
120 | > | ||
121 | </my-timestamp-input> | ||
122 | </div> | ||
123 | |||
124 | <div class="form-group"> | ||
125 | <my-peertube-checkbox | ||
126 | inputName="autoplay" [(ngModel)]="customizations.autoplay" | ||
127 | i18n-labelText labelText="Autoplay" | ||
128 | ></my-peertube-checkbox> | ||
129 | </div> | ||
130 | |||
131 | <div class="form-group"> | ||
132 | <my-peertube-checkbox | ||
133 | inputName="muted" [(ngModel)]="customizations.muted" | ||
134 | i18n-labelText labelText="Muted" | ||
135 | ></my-peertube-checkbox> | ||
136 | </div> | ||
137 | |||
138 | <div class="form-group"> | ||
139 | <my-peertube-checkbox | ||
140 | inputName="loop" [(ngModel)]="customizations.loop" | ||
141 | i18n-labelText labelText="Loop" | ||
142 | ></my-peertube-checkbox> | ||
143 | </div> | ||
144 | </div> | ||
145 | |||
146 | <ng-container *ngIf="isInEmbedTab()"> | ||
147 | <div class="form-group"> | ||
148 | <my-peertube-checkbox | ||
149 | inputName="title" [(ngModel)]="customizations.title" | ||
150 | i18n-labelText labelText="Display video title" | ||
151 | ></my-peertube-checkbox> | ||
152 | </div> | ||
153 | |||
154 | <div class="form-group"> | ||
155 | <my-peertube-checkbox | ||
156 | inputName="warningTitle" [(ngModel)]="customizations.warningTitle" | ||
157 | i18n-labelText labelText="Display privacy warning" | ||
158 | ></my-peertube-checkbox> | ||
159 | </div> | ||
160 | |||
161 | <div class="form-group"> | ||
162 | <my-peertube-checkbox | ||
163 | inputName="controls" [(ngModel)]="customizations.controls" | ||
164 | i18n-labelText labelText="Display player controls" | ||
165 | ></my-peertube-checkbox> | ||
166 | </div> | ||
167 | </ng-container> | ||
168 | </div> | ||
55 | </div> | 169 | </div> |
56 | </div> | 170 | </div> |
57 | 171 | ||