]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/+videos/+video-watch/modal/video-share.component.html
Lazy load all routes
[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / +video-watch / modal / video-share.component.html
CommitLineData
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
45c6bcf3 30 <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeId">
2f4c784a 31
45c6bcf3
C
32 <ng-container ngbNavItem="url">
33 <a ngbNavLink i18n>URL</a>
2f4c784a 34
45c6bcf3
C
35 <ng-template ngbNavContent>
36 <div class="nav-content">
3a1fed11
C
37 <my-input-readonly-copy [value]="getVideoUrl()"></my-input-readonly-copy>
38 </div>
3a1fed11 39 </ng-template>
45c6bcf3
C
40 </ng-container>
41
42 <ng-container ngbNavItem="qrcode">
43 <a ngbNavLink i18n>QR-Code</a>
3a1fed11 44
45c6bcf3
C
45 <ng-template ngbNavContent>
46 <div class="nav-content">
be27ef3b 47 <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode>
3a1fed11
C
48 </div>
49 </ng-template>
45c6bcf3
C
50 </ng-container>
51
52 <ng-container ngbNavItem="embed">
53 <a ngbNavLink i18n>Embed</a>
2f4c784a 54
45c6bcf3
C
55 <ng-template ngbNavContent>
56 <div class="nav-content">
3a1fed11
C
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>
45c6bcf3
C
64 </ng-container>
65
66 </div>
3a1fed11 67
45c6bcf3 68 <div [ngbNavOutlet]="nav"></div>
3a1fed11
C
69
70 <div class="filters">
2f4c784a 71 <div>
3a1fed11 72 <div class="form-group start-at">
2f4c784a 73 <my-peertube-checkbox
3a1fed11
C
74 inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
75 i18n-labelText labelText="Start at"
2f4c784a
C
76 ></my-peertube-checkbox>
77
78 <my-timestamp-input
3a1fed11 79 [timestamp]="customizations.startAt"
2f4c784a 80 [maxTimestamp]="video.duration"
3a1fed11
C
81 [disabled]="!customizations.startAtCheckbox"
82 [(ngModel)]="customizations.startAt"
2f4c784a
C
83 >
84 </my-timestamp-input>
85 </div>
86
3a1fed11 87 <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
2f4c784a 88 <my-peertube-checkbox
3a1fed11
C
89 inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
90 i18n-labelText labelText="Auto select subtitle"
2f4c784a 91 ></my-peertube-checkbox>
2f4c784a 92
3a1fed11
C
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>
2f4c784a 98 </div>
3a1fed11 99 </div>
2f4c784a 100
3a1fed11
C
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>
2f4c784a 117
3a1fed11
C
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>
2f4c784a 124
3a1fed11
C
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>
2f4c784a 138 </div>
3a1fed11
C
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>
de702865
RK
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>
2f4c784a 183 </div>
63347a0f 184 </div>
11b8762f 185 </div>
4503cb2a 186
63347a0f 187</ng-template>