aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-08-27 15:59:00 +0200
committerChocobozzz <me@florianbigard.com>2018-08-27 16:04:06 +0200
commit11b8762f9c815930982599f4ff90c0db60eaf0ca (patch)
treebfca3003c619559284e00fe804d080e66c3ede12 /client/src/app/videos
parentc9d5c64f98c1f1fe7950de60c58edeaf3ace070d (diff)
downloadPeerTube-11b8762f9c815930982599f4ff90c0db60eaf0ca.tar.gz
PeerTube-11b8762f9c815930982599f4ff90c0db60eaf0ca.tar.zst
PeerTube-11b8762f9c815930982599f4ff90c0db60eaf0ca.zip
Add start at checkbox in share modal
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.html17
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.scss6
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.ts31
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts10
4 files changed, 47 insertions, 17 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 02f5f0f44..a20c320a4 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
@@ -17,6 +17,11 @@
17 </div> 17 </div>
18 </div> 18 </div>
19 19
20 <div class="form-group qr-code-group">
21 <label i18n>QR-Code</label>
22 <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode>
23 </div>
24
20 <div class="form-group"> 25 <div class="form-group">
21 <label i18n>Embed</label> 26 <label i18n>Embed</label>
22 <div class="input-group input-group-sm"> 27 <div class="input-group input-group-sm">
@@ -32,15 +37,17 @@
32 <div i18n *ngIf="notSecure()" class="alert alert-warning"> 37 <div i18n *ngIf="notSecure()" class="alert alert-warning">
33 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). 38 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).
34 </div> 39 </div>
40 </div>
35 41
36 <div class="form-group qr-code-group"> 42 <div *ngIf="currentVideoTimestampString" class="start-at">
37 <label i18n>QR-Code</label> 43 <my-peertube-checkbox
38 <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode> 44 inputName="startAt" [(ngModel)]="startAtCheckbox"
39 </div> 45 i18n-labelText [labelText]="getStartCheckboxLabel()"
46 ></my-peertube-checkbox>
40 </div> 47 </div>
41 48
42 <div class="modal-footer inputs"> 49 <div class="modal-footer inputs">
43 <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span> 50 <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
44 </div> 51 </div>
45 52
46</ng-template> 53</ng-template>
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss
index a9e9b8498..4c07bce89 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.scss
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss
@@ -12,3 +12,9 @@
12.qr-code-group { 12.qr-code-group {
13 text-align: center; 13 text-align: center;
14} 14}
15
16.start-at {
17 display: flex;
18 justify-content: center;
19 margin-top: 10px;
20}
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
index 14f557f9a..71d6f5633 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@@ -1,9 +1,10 @@
1import { Component, ElementRef, Input, ViewChild } from '@angular/core' 1import { Component, ElementRef, Input, ViewChild } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications' 2import { NotificationsService } from 'angular2-notifications'
3import { VideoDetails } from '../../../shared/video/video-details.model' 3import { VideoDetails } from '../../../shared/video/video-details.model'
4import { buildVideoEmbed } from '../../../../assets/player/utils' 4import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
5import { I18n } from '@ngx-translate/i18n-polyfill' 5import { I18n } from '@ngx-translate/i18n-polyfill'
6import { NgbModal } from '@ng-bootstrap/ng-bootstrap' 6import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
7import { durationToString } from '@app/shared/misc/utils'
7 8
8@Component({ 9@Component({
9 selector: 'my-video-share', 10 selector: 'my-video-share',
@@ -11,9 +12,14 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
11 styleUrls: [ './video-share.component.scss' ] 12 styleUrls: [ './video-share.component.scss' ]
12}) 13})
13export class VideoShareComponent { 14export class VideoShareComponent {
15 @ViewChild('modal') modal: ElementRef
16
14 @Input() video: VideoDetails = null 17 @Input() video: VideoDetails = null
15 18
16 @ViewChild('modal') modal: ElementRef 19 startAtCheckbox = false
20 currentVideoTimestampString: string
21
22 private currentVideoTimestamp: number
17 23
18 constructor ( 24 constructor (
19 private modalService: NgbModal, 25 private modalService: NgbModal,
@@ -23,16 +29,21 @@ export class VideoShareComponent {
23 // empty 29 // empty
24 } 30 }
25 31
26 show () { 32 show (currentVideoTimestamp?: number) {
33 this.currentVideoTimestamp = Math.floor(currentVideoTimestamp)
34 this.currentVideoTimestampString = durationToString(this.currentVideoTimestamp)
35
27 this.modalService.open(this.modal) 36 this.modalService.open(this.modal)
28 } 37 }
29 38
30 getVideoIframeCode () { 39 getVideoIframeCode () {
31 return buildVideoEmbed(this.video.embedUrl) 40 const embedUrl = buildVideoLink(this.getVideoTimestampIfEnabled(), this.video.embedUrl)
41
42 return buildVideoEmbed(embedUrl)
32 } 43 }
33 44
34 getVideoUrl () { 45 getVideoUrl () {
35 return window.location.href 46 return buildVideoLink(this.getVideoTimestampIfEnabled())
36 } 47 }
37 48
38 notSecure () { 49 notSecure () {
@@ -42,4 +53,14 @@ export class VideoShareComponent {
42 activateCopiedMessage () { 53 activateCopiedMessage () {
43 this.notificationsService.success(this.i18n('Success'), this.i18n('Copied')) 54 this.notificationsService.success(this.i18n('Success'), this.i18n('Copied'))
44 } 55 }
56
57 getStartCheckboxLabel () {
58 return this.i18n('Start at {{timestamp}}', { timestamp: this.currentVideoTimestampString })
59 }
60
61 private getVideoTimestampIfEnabled () {
62 if (this.startAtCheckbox === true) return this.currentVideoTimestamp
63
64 return undefined
65 }
45} 66}
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 0909b13f5..d838ebe79 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -204,7 +204,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
204 } 204 }
205 205
206 showShareModal () { 206 showShareModal () {
207 this.videoShareModal.show() 207 const currentTime = this.player ? this.player.currentTime() : undefined
208
209 this.videoShareModal.show(currentTime)
208 } 210 }
209 211
210 showDownloadModal (event: Event) { 212 showDownloadModal (event: Event) {
@@ -258,12 +260,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
258 return this.video.isUnblacklistableBy(this.user) 260 return this.video.isUnblacklistableBy(this.user)
259 } 261 }
260 262
261 getVideoPoster () {
262 if (!this.video) return ''
263
264 return this.video.previewUrl
265 }
266
267 getVideoTags () { 263 getVideoTags () {
268 if (!this.video || Array.isArray(this.video.tags) === false) return [] 264 if (!this.video || Array.isArray(this.video.tags) === false) return []
269 265