Add start at checkbox in share modal

7 files changed, 66 insertions, 36 deletions

diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 018271efe..c8b7ebc67 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -51,6 +51,18 @@ function dateToHuman (date: string) {
   return datePipe.transform(date, 'medium')
 }
 
+function durationToString (duration: number) {
+  const hours = Math.floor(duration / 3600)
+  const minutes = Math.floor((duration % 3600) / 60)
+  const seconds = duration % 60
+
+  const minutesPadding = minutes >= 10 ? '' : '0'
+  const secondsPadding = seconds >= 10 ? '' : '0'
+  const displayedHours = hours > 0 ? hours.toString() + ':' : ''
+
+  return displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
+}
+
 function immutableAssign <A, B> (target: A, source: B) {
   return Object.assign({}, target, source)
 }
@@ -114,6 +126,7 @@ function sortBy (obj: any[], key1: string, key2?: string) {
 
 export {
   sortBy,
+  durationToString,
   objectToUrlEncoded,
   getParameterByName,
   populateAsyncUserVideoChannels,
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index d80c10459..80794faa6 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -2,7 +2,7 @@ import { User } from '../'
 import { Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 import { VideoConstant } from '../../../../../shared/models/videos/video-constant.model'
-import { getAbsoluteAPIUrl } from '../misc/utils'
+import { durationToString, getAbsoluteAPIUrl } from '../misc/utils'
 import { peertubeTranslate, ServerConfig } from '../../../../../shared/models'
 import { Actor } from '@app/shared/actor/actor.model'
 import { VideoScheduleUpdate } from '../../../../../shared/models/videos/video-schedule-update.model'
@@ -70,18 +70,6 @@ export class Video implements VideoServerModel {
     return '/videos/watch/' + videoUUID
   }
 
-  private static createDurationString (duration: number) {
-    const hours = Math.floor(duration / 3600)
-    const minutes = Math.floor((duration % 3600) / 60)
-    const seconds = duration % 60
-
-    const minutesPadding = minutes >= 10 ? '' : '0'
-    const secondsPadding = seconds >= 10 ? '' : '0'
-    const displayedHours = hours > 0 ? hours.toString() + ':' : ''
-
-    return displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
-  }
-
   constructor (hash: VideoServerModel, translations = {}) {
     const absoluteAPIUrl = getAbsoluteAPIUrl()
 
@@ -95,7 +83,7 @@ export class Video implements VideoServerModel {
     this.state = hash.state
     this.description = hash.description
     this.duration = hash.duration
-    this.durationLabel = Video.createDurationString(hash.duration)
+    this.durationLabel = durationToString(hash.duration)
     this.id = hash.id
     this.uuid = hash.uuid
     this.isLocal = hash.isLocal
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 []
 
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts
index c02e19929..cf4f60f55 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -23,9 +23,8 @@ function isMobile () {
   return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 }
 
-function buildVideoLink (time?: number) {
-  const baseEmbedPath = window.location.pathname.replace('/embed/', '/watch/')
-  const baseEmbedURL = window.location.origin + baseEmbedPath
+function buildVideoLink (time?: number, url?: string) {
+  if (!url) url = window.location.origin + window.location.pathname.replace('/embed/', '/watch/')
 
   if (time) {
     const timeInt = Math.floor(time)
@@ -33,10 +32,10 @@ function buildVideoLink (time?: number) {
     const params = new URLSearchParams(window.location.search)
     params.set('start', secondsToTime(timeInt))
 
-    return baseEmbedURL + '?' + params.toString()
+    return url + '?' + params.toString()
   }
 
-  return baseEmbedURL
+  return url
 }
 
 function timeToInt (time: number | string) {