]>
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 | <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)"> | |
31 | ||
32 | <ngb-tab i18n-title title="URL" id="url"> | |
33 | <ng-template ngbTabContent> | |
34 | ||
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> | |
49 | ||
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"> | |
65 | <div> | |
66 | <div class="form-group start-at"> | |
67 | <my-peertube-checkbox | |
68 | inputName="startAt" [(ngModel)]="customizations.startAtCheckbox" | |
69 | i18n-labelText labelText="Start at" | |
70 | ></my-peertube-checkbox> | |
71 | ||
72 | <my-timestamp-input | |
73 | [timestamp]="customizations.startAt" | |
74 | [maxTimestamp]="video.duration" | |
75 | [disabled]="!customizations.startAtCheckbox" | |
76 | [(ngModel)]="customizations.startAt" | |
77 | > | |
78 | </my-timestamp-input> | |
79 | </div> | |
80 | ||
81 | <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block"> | |
82 | <my-peertube-checkbox | |
83 | inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox" | |
84 | i18n-labelText labelText="Auto select subtitle" | |
85 | ></my-peertube-checkbox> | |
86 | ||
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> | |
92 | </div> | |
93 | </div> | |
94 | ||
95 | <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed"> | |
96 | <div> | |
97 | <div class="form-group stop-at"> | |
98 | <my-peertube-checkbox | |
99 | inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox" | |
100 | i18n-labelText labelText="Stop at" | |
101 | ></my-peertube-checkbox> | |
102 | ||
103 | <my-timestamp-input | |
104 | [timestamp]="customizations.stopAt" | |
105 | [maxTimestamp]="video.duration" | |
106 | [disabled]="!customizations.stopAtCheckbox" | |
107 | [(ngModel)]="customizations.stopAt" | |
108 | > | |
109 | </my-timestamp-input> | |
110 | </div> | |
111 | ||
112 | <div class="form-group"> | |
113 | <my-peertube-checkbox | |
114 | inputName="autoplay" [(ngModel)]="customizations.autoplay" | |
115 | i18n-labelText labelText="Autoplay" | |
116 | ></my-peertube-checkbox> | |
117 | </div> | |
118 | ||
119 | <div class="form-group"> | |
120 | <my-peertube-checkbox | |
121 | inputName="muted" [(ngModel)]="customizations.muted" | |
122 | i18n-labelText labelText="Muted" | |
123 | ></my-peertube-checkbox> | |
124 | </div> | |
125 | ||
126 | <div class="form-group"> | |
127 | <my-peertube-checkbox | |
128 | inputName="loop" [(ngModel)]="customizations.loop" | |
129 | i18n-labelText labelText="Loop" | |
130 | ></my-peertube-checkbox> | |
131 | </div> | |
132 | </div> | |
133 | ||
134 | <ng-container *ngIf="isInEmbedTab()"> | |
135 | <div class="form-group"> | |
136 | <my-peertube-checkbox | |
137 | inputName="title" [(ngModel)]="customizations.title" | |
138 | i18n-labelText labelText="Display video title" | |
139 | ></my-peertube-checkbox> | |
140 | </div> | |
141 | ||
142 | <div class="form-group"> | |
143 | <my-peertube-checkbox | |
144 | inputName="warningTitle" [(ngModel)]="customizations.warningTitle" | |
145 | i18n-labelText labelText="Display privacy warning" | |
146 | ></my-peertube-checkbox> | |
147 | </div> | |
148 | ||
149 | <div class="form-group"> | |
150 | <my-peertube-checkbox | |
151 | inputName="controls" [(ngModel)]="customizations.controls" | |
152 | i18n-labelText labelText="Display player controls" | |
153 | ></my-peertube-checkbox> | |
154 | </div> | |
155 | </ng-container> | |
156 | </div> | |
157 | ||
158 | <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button" | |
159 | [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"> | |
160 | ||
161 | <ng-container *ngIf="isAdvancedCustomizationCollapsed"> | |
162 | <span class="glyphicon glyphicon-menu-down"></span> | |
163 | ||
164 | <ng-container i18n> | |
165 | More customization | |
166 | </ng-container> | |
167 | </ng-container> | |
168 | ||
169 | <ng-container *ngIf="!isAdvancedCustomizationCollapsed"> | |
170 | <span class="glyphicon glyphicon-menu-up"></span> | |
171 | ||
172 | <ng-container i18n> | |
173 | Less customization | |
174 | </ng-container> | |
175 | </ng-container> | |
176 | </div> | |
177 | </div> | |
178 | </div> | |
179 | </div> | |
180 | ||
181 | </ng-template> |