]>
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 | |
63347a0f | 7 | <div class="modal-body"> |
2f4c784a | 8 | <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)"> |
dcbc29d5 | 9 | |
2f4c784a C |
10 | <ngb-tab i18n-title title="URL" id="url"> |
11 | <ng-template ngbTabContent> | |
12 | ||
13 | <div class="tab-content"> | |
14 | <div class="input-group"> | |
15 | <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getVideoUrl()" /> | |
16 | <div class="input-group-append"> | |
17 | <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> | |
18 | <span class="glyphicon glyphicon-copy"></span> | |
19 | </button> | |
20 | </div> | |
21 | </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"> | |
f36da21e | 30 | <qrcode [qrdata]="getVideoUrl()" size="256" level="Q"></qrcode> |
2f4c784a C |
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> | |
dcbc29d5 | 55 | |
2f4c784a C |
56 | <div class="filters"> |
57 | <div> | |
58 | <div class="form-group start-at"> | |
59 | <my-peertube-checkbox | |
60 | inputName="startAt" [(ngModel)]="customizations.startAtCheckbox" | |
61 | i18n-labelText labelText="Start at" | |
62 | ></my-peertube-checkbox> | |
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> | |
cf02fbfb | 71 | </div> |
2c8d4697 | 72 | |
2f4c784a C |
73 | <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block"> |
74 | <my-peertube-checkbox | |
75 | inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox" | |
76 | i18n-labelText labelText="Auto select subtitle" | |
77 | ></my-peertube-checkbox> | |
11b8762f | 78 | |
2f4c784a C |
79 | <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }"> |
80 | <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox"> | |
81 | <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option> | |
82 | </select> | |
83 | </div> | |
2c8d4697 | 84 | </div> |
63347a0f | 85 | </div> |
5f0805d3 | 86 | |
2f4c784a C |
87 | <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button" |
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> | |
63347a0f | 169 | </div> |
11b8762f | 170 | </div> |
4503cb2a | 171 | |
63347a0f | 172 | <div class="modal-footer inputs"> |
11b8762f | 173 | <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span> |
63347a0f C |
174 | </div> |
175 | ||
176 | </ng-template> |