Add start at checkbox in share modal

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 @@
       </div>
     </div>
 
+    <div class="form-group qr-code-group">
+      <label i18n>QR-Code</label>
+      <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode>
+    </div>
+
     <div class="form-group">
       <label i18n>Embed</label>
       <div class="input-group input-group-sm">
@@ -32,15 +37,17 @@
     <div i18n *ngIf="notSecure()" class="alert alert-warning">
       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).
     </div>
+  </div>
 
-    <div class="form-group qr-code-group">
-      <label i18n>QR-Code</label>
-      <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode>
-    </div>
+  <div *ngIf="currentVideoTimestampString" class="start-at">
+    <my-peertube-checkbox
+      inputName="startAt" [(ngModel)]="startAtCheckbox"
+      i18n-labelText [labelText]="getStartCheckboxLabel()"
+    ></my-peertube-checkbox>
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
+    <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
   </div>
 
 </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 @@
 .qr-code-group {
   text-align: center;
 }
+
+.start-at {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
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 @@
 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
 import { NotificationsService } from 'angular2-notifications'
 import { VideoDetails } from '../../../shared/video/video-details.model'
-import { buildVideoEmbed } from '../../../../assets/player/utils'
+import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { durationToString } from '@app/shared/misc/utils'
 
 @Component({
   selector: 'my-video-share',
@@ -11,9 +12,14 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
   styleUrls: [ './video-share.component.scss' ]
 })
 export class VideoShareComponent {
+  @ViewChild('modal') modal: ElementRef
+
   @Input() video: VideoDetails = null
 
-  @ViewChild('modal') modal: ElementRef
+  startAtCheckbox = false
+  currentVideoTimestampString: string
+
+  private currentVideoTimestamp: number
 
   constructor (
     private modalService: NgbModal,
@@ -23,16 +29,21 @@ export class VideoShareComponent {
     // empty
   }
 
-  show () {
+  show (currentVideoTimestamp?: number) {
+    this.currentVideoTimestamp = Math.floor(currentVideoTimestamp)
+    this.currentVideoTimestampString = durationToString(this.currentVideoTimestamp)
+
     this.modalService.open(this.modal)
   }
 
   getVideoIframeCode () {
-    return buildVideoEmbed(this.video.embedUrl)
+    const embedUrl = buildVideoLink(this.getVideoTimestampIfEnabled(), this.video.embedUrl)
+
+    return buildVideoEmbed(embedUrl)
   }
 
   getVideoUrl () {
-    return window.location.href
+    return buildVideoLink(this.getVideoTimestampIfEnabled())
   }
 
   notSecure () {
@@ -42,4 +53,14 @@ export class VideoShareComponent {
   activateCopiedMessage () {
     this.notificationsService.success(this.i18n('Success'), this.i18n('Copied'))
   }
+
+  getStartCheckboxLabel () {
+    return this.i18n('Start at {{timestamp}}', { timestamp: this.currentVideoTimestampString })
+  }
+
+  private getVideoTimestampIfEnabled () {
+    if (this.startAtCheckbox === true) return this.currentVideoTimestamp
+
+    return undefined
+  }
 }
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 {
   }
 
   showShareModal () {
-    this.videoShareModal.show()
+    const currentTime = this.player ? this.player.currentTime() : undefined
+
+    this.videoShareModal.show(currentTime)
   }
 
   showDownloadModal (event: Event) {
@@ -258,12 +260,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.video.isUnblacklistableBy(this.user)
   }
 
-  getVideoPoster () {
-    if (!this.video) return ''
-
-    return this.video.previewUrl
-  }
-
   getVideoTags () {
     if (!this.video || Array.isArray(this.video.tags) === false) return []