diff --git a/client/src/app/shared/forms/input-readonly-copy.component.html b/client/src/app/shared/forms/input-readonly-copy.component.html new file mode 100644 index 000000000..27571b63f --- /dev/null +++ b/client/src/app/shared/forms/input-readonly-copy.component.html @@ -0,0 +1,9 @@ +
+ + +
+ +
+
diff --git a/client/src/app/shared/forms/input-readonly-copy.component.scss b/client/src/app/shared/forms/input-readonly-copy.component.scss new file mode 100644 index 000000000..8dc4f113c --- /dev/null +++ b/client/src/app/shared/forms/input-readonly-copy.component.scss @@ -0,0 +1,3 @@ +input.readonly { + font-size: 15px; +} diff --git a/client/src/app/shared/forms/input-readonly-copy.component.ts b/client/src/app/shared/forms/input-readonly-copy.component.ts new file mode 100644 index 000000000..7528fb7a1 --- /dev/null +++ b/client/src/app/shared/forms/input-readonly-copy.component.ts @@ -0,0 +1,21 @@ +import { Component, Input } from '@angular/core' +import { Notifier } from '@app/core' +import { I18n } from '@ngx-translate/i18n-polyfill' + +@Component({ + selector: 'my-input-readonly-copy', + templateUrl: './input-readonly-copy.component.html', + styleUrls: [ './input-readonly-copy.component.scss' ] +}) +export class InputReadonlyCopyComponent { + @Input() value = '' + + constructor ( + private notifier: Notifier, + private i18n: I18n + ) { } + + activateCopiedMessage () { + this.notifier.success(this.i18n('Copied')) + } +} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 8cbb15bfa..29ddf7b81 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -95,6 +95,7 @@ import { ClipboardModule } from 'ngx-clipboard' import { FollowService } from '@app/shared/instance/follow.service' import { MultiSelectModule } from 'primeng/multiselect' import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.component' +import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-copy.component' @NgModule({ imports: [ @@ -155,6 +156,7 @@ import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.co ReactiveFileComponent, PeertubeCheckboxComponent, TimestampInputComponent, + InputReadonlyCopyComponent, SubscribeButtonComponent, RemoteSubscribeComponent, @@ -220,6 +222,7 @@ import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.co InfiniteScrollerDirective, TextareaAutoResizeDirective, HelpComponent, + InputReadonlyCopyComponent, ReactiveFileComponent, PeertubeCheckboxComponent, 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 @@ +
- +
+
Share the playlist
- - + -
-
- -
- -
-
-
+
- - - - - -
- -
- - - - - -
-
- -
- -
-
- -
- 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). -
-
- - - - - -
-
-
+
- - -
-
- - -
- -
-
+
-
- - +
+
Share the video
- - More customization - - + - - + + - - Less customization - - -
+
+ +
-
+ + + + + +
+ +
+ + + + + +
+ + +
+ 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). +
+
+ + + + + +
-
+
-
+
-
-
- -
- -
- +
+ +
- -
- +
+ + + + + + More customization + + + + + + + + Less customization + + +
+ +
+
+
+ + + + +
+ +
+ +
+ +
+ +
+ +
+ +
-
- -
+ +
+ +
-
- -
- +
+ +
+ +
+ +
+ +
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 c48abf9e0..8b5952da6 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 @@ -1,6 +1,18 @@ @import '_mixins'; @import '_variables'; +my-input-readonly-copy { + width: 100%; +} + +.title-page.title-page-single { + margin-top: 0; +} + +.playlist { + margin-bottom: 50px; +} + .peertube-select-container { @include peertube-select-container(200px); } @@ -25,10 +37,6 @@ margin-top: 20px; } -input.readonly { - font-size: 15px; -} - .filters { margin-top: 30px; padding-top: 30px; 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 f45afccfb..a9a7a0eab 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 @@ -5,6 +5,7 @@ import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils import { I18n } from '@ngx-translate/i18n-polyfill' import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap' import { VideoCaption } from '@shared/models' +import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' type Customizations = { startAtCheckbox: boolean @@ -34,18 +35,16 @@ export class VideoShareComponent { @Input() video: VideoDetails = null @Input() videoCaptions: VideoCaption[] = [] + @Input() playlist: VideoPlaylist = null activeId: 'url' | 'qrcode' | 'embed' customizations: Customizations isAdvancedCustomizationCollapsed = true + includeVideoInPlaylist = false private currentVideoTimestamp: number - constructor ( - private modalService: NgbModal, - private notifier: Notifier, - private i18n: I18n - ) { } + constructor (private modalService: NgbModal) { } show (currentVideoTimestamp?: number) { this.currentVideoTimestamp = currentVideoTimestamp @@ -86,17 +85,22 @@ export class VideoShareComponent { } getVideoUrl () { - const options = this.getOptions() + const baseUrl = window.location.origin + '/videos/watch/' + this.video.uuid + const options = this.getOptions(baseUrl) return buildVideoLink(options) } - notSecure () { - return window.location.protocol === 'http:' + getPlaylistUrl () { + const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid + + if (!this.includeVideoInPlaylist) return base + + return base + '?videoId=' + this.video.uuid } - activateCopiedMessage () { - this.notifier.success(this.i18n('Copied')) + notSecure () { + return window.location.protocol === 'http:' } onTabChange (event: NgbTabChangeEvent) { @@ -107,6 +111,10 @@ export class VideoShareComponent { return this.activeId === 'embed' } + hasPlaylist () { + return !!this.playlist + } + private getOptions (baseUrl?: string) { return { baseUrl, diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 38ad4e948..5b2e91bc5 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -224,5 +224,5 @@ - + diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts index 777abb568..629634985 100644 --- a/client/src/assets/player/utils.ts +++ b/client/src/assets/player/utils.ts @@ -51,6 +51,8 @@ function buildVideoLink (options: { : window.location.origin + window.location.pathname.replace('/embed/', '/watch/') const params = new URLSearchParams(window.location.search) + // Remove this unused parameter when we are on a playlist page + params.delete('videoId') if (options.startTime) { const startTimeInt = Math.floor(options.startTime)