aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/+video-watch/modal/video-share.component.html
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-12-05 10:05:00 +0100
committerChocobozzz <me@florianbigard.com>2019-12-05 10:05:00 +0100
commit3a1fed11c52705002cbf2a17294509fb5a89237c (patch)
tree9140310efbd9ba7f1b7254e3fd580e84322792a7 /client/src/app/videos/+video-watch/modal/video-share.component.html
parent689a4f6946e47ddf4871fd43bbd1284a4dc79e68 (diff)
downloadPeerTube-3a1fed11c52705002cbf2a17294509fb5a89237c.tar.gz
PeerTube-3a1fed11c52705002cbf2a17294509fb5a89237c.tar.zst
PeerTube-3a1fed11c52705002cbf2a17294509fb5a89237c.zip
Support playlists in share modal
Diffstat (limited to 'client/src/app/videos/+video-watch/modal/video-share.component.html')
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.html261
1 files changed, 135 insertions, 126 deletions
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index e0be9f265..549a9f30e 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -4,167 +4,176 @@
4 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> 4 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
5 </div> 5 </div>
6 6
7
7 <div class="modal-body"> 8 <div class="modal-body">
8 <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)"> 9 <div class="playlist" *ngIf="hasPlaylist()">
9 10 <div class="title-page title-page-single" i18n>Share the playlist</div>
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 11
24 </ng-template> 12 <my-input-readonly-copy [value]="getPlaylistUrl()"></my-input-readonly-copy>
25 </ngb-tab>
26 13
27 <ngb-tab i18n-title title="QR-Code" id="qrcode"> 14 <div class="filters">
28 <ng-template ngbTabContent>
29 <div class="tab-content">
30 <qrcode [qrdata]="getVideoUrl()" size="256" level="Q"></qrcode>
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 15
47 <div i18n *ngIf="notSecure()" class="alert alert-warning"> 16 <div class="form-group">
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>
55
56 <div class="filters">
57 <div>
58 <div class="form-group start-at">
59 <my-peertube-checkbox 17 <my-peertube-checkbox
60 inputName="startAt" [(ngModel)]="customizations.startAtCheckbox" 18 inputName="includeVideoInPlaylist" [(ngModel)]="includeVideoInPlaylist"
61 i18n-labelText labelText="Start at" 19 i18n-labelText labelText="Share the playlist at this video position"
62 ></my-peertube-checkbox> 20 ></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>
71 </div> 21 </div>
72 22
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>
78
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>
84 </div>
85 </div> 23 </div>
24 </div>
86 25
87 <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
88 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
89 26
90 <ng-container *ngIf="isAdvancedCustomizationCollapsed"> 27 <div class="video">
91 <span class="glyphicon glyphicon-menu-down"></span> 28 <div class="title-page title-page-single" *ngIf="hasPlaylist()" i18n>Share the video</div>
92 29
93 <ng-container i18n> 30 <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)">
94 More customization
95 </ng-container>
96 </ng-container>
97 31
98 <ng-container *ngIf="!isAdvancedCustomizationCollapsed"> 32 <ngb-tab i18n-title title="URL" id="url">
99 <span class="glyphicon glyphicon-menu-up"></span> 33 <ng-template ngbTabContent>
100 34
101 <ng-container i18n> 35 <div class="tab-content">
102 Less customization 36 <my-input-readonly-copy [value]="getVideoUrl()"></my-input-readonly-copy>
103 </ng-container> 37 </div>
104 </ng-container> 38
105 </div> 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>
106 49
107 <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed"> 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">
108 <div> 65 <div>
109 <div class="form-group stop-at"> 66 <div class="form-group start-at">
110 <my-peertube-checkbox 67 <my-peertube-checkbox
111 inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox" 68 inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
112 i18n-labelText labelText="Stop at" 69 i18n-labelText labelText="Start at"
113 ></my-peertube-checkbox> 70 ></my-peertube-checkbox>
114 71
115 <my-timestamp-input 72 <my-timestamp-input
116 [timestamp]="customizations.stopAt" 73 [timestamp]="customizations.startAt"
117 [maxTimestamp]="video.duration" 74 [maxTimestamp]="video.duration"
118 [disabled]="!customizations.stopAtCheckbox" 75 [disabled]="!customizations.startAtCheckbox"
119 [(ngModel)]="customizations.stopAt" 76 [(ngModel)]="customizations.startAt"
120 > 77 >
121 </my-timestamp-input> 78 </my-timestamp-input>
122 </div> 79 </div>
123 80
124 <div class="form-group"> 81 <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
125 <my-peertube-checkbox 82 <my-peertube-checkbox
126 inputName="autoplay" [(ngModel)]="customizations.autoplay" 83 inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
127 i18n-labelText labelText="Autoplay" 84 i18n-labelText labelText="Auto select subtitle"
128 ></my-peertube-checkbox> 85 ></my-peertube-checkbox>
129 </div>
130 86
131 <div class="form-group"> 87 <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
132 <my-peertube-checkbox 88 <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox">
133 inputName="muted" [(ngModel)]="customizations.muted" 89 <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
134 i18n-labelText labelText="Muted" 90 </select>
135 ></my-peertube-checkbox> 91 </div>
136 </div> 92 </div>
93 </div>
137 94
138 <div class="form-group"> 95 <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
139 <my-peertube-checkbox 96 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
140 inputName="loop" [(ngModel)]="customizations.loop" 97
141 i18n-labelText labelText="Loop" 98 <ng-container *ngIf="isAdvancedCustomizationCollapsed">
142 ></my-peertube-checkbox> 99 <span class="glyphicon glyphicon-menu-down"></span>
143 </div> 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>
144 </div> 113 </div>
145 114
146 <ng-container *ngIf="isInEmbedTab()"> 115 <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
147 <div class="form-group"> 116 <div>
148 <my-peertube-checkbox 117 <div class="form-group stop-at">
149 inputName="title" [(ngModel)]="customizations.title" 118 <my-peertube-checkbox
150 i18n-labelText labelText="Display video title" 119 inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
151 ></my-peertube-checkbox> 120 i18n-labelText labelText="Stop at"
152 </div> 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>
153 131
154 <div class="form-group"> 132 <div class="form-group">
155 <my-peertube-checkbox 133 <my-peertube-checkbox
156 inputName="warningTitle" [(ngModel)]="customizations.warningTitle" 134 inputName="autoplay" [(ngModel)]="customizations.autoplay"
157 i18n-labelText labelText="Display privacy warning" 135 i18n-labelText labelText="Autoplay"
158 ></my-peertube-checkbox> 136 ></my-peertube-checkbox>
159 </div> 137 </div>
160 138
161 <div class="form-group"> 139 <div class="form-group">
162 <my-peertube-checkbox 140 <my-peertube-checkbox
163 inputName="controls" [(ngModel)]="customizations.controls" 141 inputName="muted" [(ngModel)]="customizations.muted"
164 i18n-labelText labelText="Display player controls" 142 i18n-labelText labelText="Muted"
165 ></my-peertube-checkbox> 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>
166 </div> 152 </div>
167 </ng-container> 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>
168 </div> 177 </div>
169 </div> 178 </div>
170 </div> 179 </div>
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-05 10:22:01 +0000