From 11b8762f9c815930982599f4ff90c0db60eaf0ca Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 27 Aug 2018 15:59:00 +0200 Subject: [PATCH] Add start at checkbox in share modal --- client/src/app/shared/misc/utils.ts | 13 ++++++++ client/src/app/shared/video/video.model.ts | 16 ++-------- .../modal/video-share.component.html | 17 +++++++--- .../modal/video-share.component.scss | 6 ++++ .../modal/video-share.component.ts | 31 ++++++++++++++++--- .../+video-watch/video-watch.component.ts | 10 ++---- client/src/assets/player/utils.ts | 9 +++--- support/doc/tools.md | 1 + 8 files changed, 67 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 (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 @@ +
+ + +
+
@@ -32,15 +37,17 @@
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).
+
-
- - -
+
+
- Cancel + Close
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) { diff --git a/support/doc/tools.md b/support/doc/tools.md index 2f36d07fd..8d1af2d1f 100644 --- a/support/doc/tools.md +++ b/support/doc/tools.md @@ -4,6 +4,7 @@ - [import-videos.js](#import-videosjs) - [upload.js](#uploadjs) - [Server tools](#server-tools) + - [parse-log](#parse-log) - [create-transcoding-job.js](#create-transcoding-jobjs) - [create-import-video-file-job.js](#create-import-video-file-jobjs) - [prune-storage.js](#prune-storagejs)