]>
Commit | Line | Data |
---|---|---|
63347a0f C |
1 | <ng-template #modal let-hide="close"> |
2 | <div class="modal-header"> | |
3 | <h4 i18n class="modal-title">Share</h4> | |
457bb213 | 4 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> |
63347a0f | 5 | </div> |
cf02fbfb | 6 | |
3a1fed11 | 7 | |
63347a0f | 8 | <div class="modal-body"> |
3a1fed11 C |
9 | <div class="playlist" *ngIf="hasPlaylist()"> |
10 | <div class="title-page title-page-single" i18n>Share the playlist</div> | |
2f4c784a | 11 | |
3a1fed11 | 12 | <my-input-readonly-copy [value]="getPlaylistUrl()"></my-input-readonly-copy> |
2f4c784a | 13 | |
3a1fed11 | 14 | <div class="filters"> |
2f4c784a | 15 | |
3a1fed11 | 16 | <div class="form-group"> |
2f4c784a | 17 | <my-peertube-checkbox |
3a1fed11 C |
18 | inputName="includeVideoInPlaylist" [(ngModel)]="includeVideoInPlaylist" |
19 | i18n-labelText labelText="Share the playlist at this video position" | |
2f4c784a | 20 | ></my-peertube-checkbox> |
cf02fbfb | 21 | </div> |
2c8d4697 | 22 | |
63347a0f | 23 | </div> |
3a1fed11 | 24 | </div> |
5f0805d3 | 25 | |
2f4c784a | 26 | |
3a1fed11 C |
27 | <div class="video"> |
28 | <div class="title-page title-page-single" *ngIf="hasPlaylist()" i18n>Share the video</div> | |
2f4c784a | 29 | |
3a1fed11 | 30 | <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)"> |
2f4c784a | 31 | |
3a1fed11 C |
32 | <ngb-tab i18n-title title="URL" id="url"> |
33 | <ng-template ngbTabContent> | |
2f4c784a | 34 | |
3a1fed11 C |
35 | <div class="tab-content"> |
36 | <my-input-readonly-copy [value]="getVideoUrl()"></my-input-readonly-copy> | |
37 | </div> | |
38 | ||
39 | </ng-template> | |
40 | </ngb-tab> | |
41 | ||
42 | <ngb-tab i18n-title title="QR-Code" id="qrcode"> | |
43 | <ng-template ngbTabContent> | |
44 | <div class="tab-content"> | |
45 | <qrcode [qrdata]="getVideoUrl()" size="256" level="Q"></qrcode> | |
46 | </div> | |
47 | </ng-template> | |
48 | </ngb-tab> | |
2f4c784a | 49 | |
3a1fed11 C |
50 | <ngb-tab i18n-title title="Embed" id="embed"> |
51 | <ng-template ngbTabContent> | |
52 | <div class="tab-content"> | |
53 | <my-input-readonly-copy [value]="getVideoIframeCode()"></my-input-readonly-copy> | |
54 | ||
55 | <div i18n *ngIf="notSecure()" class="alert alert-warning"> | |
56 | 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). | |
57 | </div> | |
58 | </div> | |
59 | </ng-template> | |
60 | </ngb-tab> | |
61 | ||
62 | </ngb-tabset> | |
63 | ||
64 | <div class="filters"> | |
2f4c784a | 65 | <div> |
3a1fed11 | 66 | <div class="form-group start-at"> |
2f4c784a | 67 | <my-peertube-checkbox |
3a1fed11 C |
68 | inputName="startAt" [(ngModel)]="customizations.startAtCheckbox" |
69 | i18n-labelText labelText="Start at" | |
2f4c784a C |
70 | ></my-peertube-checkbox> |
71 | ||
72 | <my-timestamp-input | |
3a1fed11 | 73 | [timestamp]="customizations.startAt" |
2f4c784a | 74 | [maxTimestamp]="video.duration" |
3a1fed11 C |
75 | [disabled]="!customizations.startAtCheckbox" |
76 | [(ngModel)]="customizations.startAt" | |
2f4c784a C |
77 | > |
78 | </my-timestamp-input> | |
79 | </div> | |
80 | ||
3a1fed11 | 81 | <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block"> |
2f4c784a | 82 | <my-peertube-checkbox |
3a1fed11 C |
83 | inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox" |
84 | i18n-labelText labelText="Auto select subtitle" | |
2f4c784a | 85 | ></my-peertube-checkbox> |
2f4c784a | 86 | |
3a1fed11 C |
87 | <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }"> |
88 | <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox"> | |
89 | <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option> | |
90 | </select> | |
91 | </div> | |
2f4c784a | 92 | </div> |
3a1fed11 | 93 | </div> |
2f4c784a | 94 | |
3a1fed11 C |
95 | <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button" |
96 | [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"> | |
97 | ||
98 | <ng-container *ngIf="isAdvancedCustomizationCollapsed"> | |
99 | <span class="glyphicon glyphicon-menu-down"></span> | |
100 | ||
101 | <ng-container i18n> | |
102 | More customization | |
103 | </ng-container> | |
104 | </ng-container> | |
105 | ||
106 | <ng-container *ngIf="!isAdvancedCustomizationCollapsed"> | |
107 | <span class="glyphicon glyphicon-menu-up"></span> | |
108 | ||
109 | <ng-container i18n> | |
110 | Less customization | |
111 | </ng-container> | |
112 | </ng-container> | |
2f4c784a C |
113 | </div> |
114 | ||
3a1fed11 C |
115 | <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed"> |
116 | <div> | |
117 | <div class="form-group stop-at"> | |
118 | <my-peertube-checkbox | |
119 | inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox" | |
120 | i18n-labelText labelText="Stop at" | |
121 | ></my-peertube-checkbox> | |
122 | ||
123 | <my-timestamp-input | |
124 | [timestamp]="customizations.stopAt" | |
125 | [maxTimestamp]="video.duration" | |
126 | [disabled]="!customizations.stopAtCheckbox" | |
127 | [(ngModel)]="customizations.stopAt" | |
128 | > | |
129 | </my-timestamp-input> | |
130 | </div> | |
2f4c784a | 131 | |
3a1fed11 C |
132 | <div class="form-group"> |
133 | <my-peertube-checkbox | |
134 | inputName="autoplay" [(ngModel)]="customizations.autoplay" | |
135 | i18n-labelText labelText="Autoplay" | |
136 | ></my-peertube-checkbox> | |
137 | </div> | |
2f4c784a | 138 | |
3a1fed11 C |
139 | <div class="form-group"> |
140 | <my-peertube-checkbox | |
141 | inputName="muted" [(ngModel)]="customizations.muted" | |
142 | i18n-labelText labelText="Muted" | |
143 | ></my-peertube-checkbox> | |
144 | </div> | |
145 | ||
146 | <div class="form-group"> | |
147 | <my-peertube-checkbox | |
148 | inputName="loop" [(ngModel)]="customizations.loop" | |
149 | i18n-labelText labelText="Loop" | |
150 | ></my-peertube-checkbox> | |
151 | </div> | |
2f4c784a | 152 | </div> |
3a1fed11 C |
153 | |
154 | <ng-container *ngIf="isInEmbedTab()"> | |
155 | <div class="form-group"> | |
156 | <my-peertube-checkbox | |
157 | inputName="title" [(ngModel)]="customizations.title" | |
158 | i18n-labelText labelText="Display video title" | |
159 | ></my-peertube-checkbox> | |
160 | </div> | |
161 | ||
162 | <div class="form-group"> | |
163 | <my-peertube-checkbox | |
164 | inputName="warningTitle" [(ngModel)]="customizations.warningTitle" | |
165 | i18n-labelText labelText="Display privacy warning" | |
166 | ></my-peertube-checkbox> | |
167 | </div> | |
168 | ||
169 | <div class="form-group"> | |
170 | <my-peertube-checkbox | |
171 | inputName="controls" [(ngModel)]="customizations.controls" | |
172 | i18n-labelText labelText="Display player controls" | |
173 | ></my-peertube-checkbox> | |
174 | </div> | |
175 | </ng-container> | |
176 | </div> | |
2f4c784a | 177 | </div> |
63347a0f | 178 | </div> |
11b8762f | 179 | </div> |
4503cb2a | 180 | |
63347a0f | 181 | <div class="modal-footer inputs"> |
11b8762f | 182 | <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span> |
63347a0f C |
183 | </div> |
184 | ||
185 | </ng-template> |