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