diff options
author | Chocobozzz <me@florianbigard.com> | 2019-06-12 12:40:24 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-06-12 16:44:15 +0200 |
commit | 2f4c784a92ac50cacef07f4925e284b4041422f4 (patch) | |
tree | 159e744c68c5f5cd8054b5f63eb389553e13bf56 /client/src/app/videos/+video-watch/modal/video-share.component.ts | |
parent | 011e1e6b37e15a44624b2d0e50263e16382060d2 (diff) | |
download | PeerTube-2f4c784a92ac50cacef07f4925e284b4041422f4.tar.gz PeerTube-2f4c784a92ac50cacef07f4925e284b4041422f4.tar.zst PeerTube-2f4c784a92ac50cacef07f4925e284b4041422f4.zip |
Add params to share modal
Diffstat (limited to 'client/src/app/videos/+video-watch/modal/video-share.component.ts')
-rw-r--r-- | client/src/app/videos/+video-watch/modal/video-share.component.ts | 91 |
1 files changed, 81 insertions, 10 deletions
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 6565d7f88..eaaf6b902 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 | |||
@@ -3,8 +3,26 @@ import { Notifier } from '@app/core' | |||
3 | import { VideoDetails } from '../../../shared/video/video-details.model' | 3 | import { VideoDetails } from '../../../shared/video/video-details.model' |
4 | import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils' | 4 | import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils' |
5 | import { I18n } from '@ngx-translate/i18n-polyfill' | 5 | import { I18n } from '@ngx-translate/i18n-polyfill' |
6 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | 6 | import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap' |
7 | import { durationToString } from '@app/shared/misc/utils' | 7 | import { VideoCaption } from '@shared/models' |
8 | |||
9 | type Customizations = { | ||
10 | startAtCheckbox: boolean | ||
11 | startAt: number | ||
12 | |||
13 | stopAtCheckbox: boolean | ||
14 | stopAt: number | ||
15 | |||
16 | subtitleCheckbox: boolean | ||
17 | subtitle: string | ||
18 | |||
19 | loop: boolean | ||
20 | autoplay: boolean | ||
21 | muted: boolean | ||
22 | title: boolean | ||
23 | warningTitle: boolean | ||
24 | controls: boolean | ||
25 | } | ||
8 | 26 | ||
9 | @Component({ | 27 | @Component({ |
10 | selector: 'my-video-share', | 28 | selector: 'my-video-share', |
@@ -15,9 +33,13 @@ export class VideoShareComponent { | |||
15 | @ViewChild('modal') modal: ElementRef | 33 | @ViewChild('modal') modal: ElementRef |
16 | 34 | ||
17 | @Input() video: VideoDetails = null | 35 | @Input() video: VideoDetails = null |
36 | @Input() videoCaptions: VideoCaption[] = [] | ||
18 | 37 | ||
19 | currentVideoTimestamp: number | 38 | activeId: 'url' | 'qrcode' | 'embed' |
20 | startAtCheckbox = false | 39 | customizations: Customizations |
40 | isAdvancedCustomizationCollapsed = true | ||
41 | |||
42 | private currentVideoTimestamp: number | ||
21 | 43 | ||
22 | constructor ( | 44 | constructor ( |
23 | private modalService: NgbModal, | 45 | private modalService: NgbModal, |
@@ -26,19 +48,47 @@ export class VideoShareComponent { | |||
26 | ) { } | 48 | ) { } |
27 | 49 | ||
28 | show (currentVideoTimestamp?: number) { | 50 | show (currentVideoTimestamp?: number) { |
29 | this.currentVideoTimestamp = currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0 | 51 | this.currentVideoTimestamp = currentVideoTimestamp |
52 | |||
53 | let subtitle: string | ||
54 | if (this.videoCaptions.length !== 0) { | ||
55 | subtitle = this.videoCaptions[0].language.id | ||
56 | } | ||
57 | |||
58 | this.customizations = { | ||
59 | startAtCheckbox: false, | ||
60 | startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0, | ||
61 | |||
62 | stopAtCheckbox: false, | ||
63 | stopAt: this.video.duration, | ||
64 | |||
65 | subtitleCheckbox: false, | ||
66 | subtitle, | ||
67 | |||
68 | loop: false, | ||
69 | autoplay: false, | ||
70 | muted: false, | ||
71 | |||
72 | // Embed options | ||
73 | title: true, | ||
74 | warningTitle: true, | ||
75 | controls: true | ||
76 | } | ||
30 | 77 | ||
31 | this.modalService.open(this.modal) | 78 | this.modalService.open(this.modal) |
32 | } | 79 | } |
33 | 80 | ||
34 | getVideoIframeCode () { | 81 | getVideoIframeCode () { |
35 | const embedUrl = buildVideoLink(this.getVideoTimestampIfEnabled(), this.video.embedUrl) | 82 | const options = this.getOptions(this.video.embedUrl) |
36 | 83 | ||
84 | const embedUrl = buildVideoLink(options) | ||
37 | return buildVideoEmbed(embedUrl) | 85 | return buildVideoEmbed(embedUrl) |
38 | } | 86 | } |
39 | 87 | ||
40 | getVideoUrl () { | 88 | getVideoUrl () { |
41 | return buildVideoLink(this.getVideoTimestampIfEnabled()) | 89 | const options = this.getOptions() |
90 | |||
91 | return buildVideoLink(options) | ||
42 | } | 92 | } |
43 | 93 | ||
44 | notSecure () { | 94 | notSecure () { |
@@ -49,9 +99,30 @@ export class VideoShareComponent { | |||
49 | this.notifier.success(this.i18n('Copied')) | 99 | this.notifier.success(this.i18n('Copied')) |
50 | } | 100 | } |
51 | 101 | ||
52 | private getVideoTimestampIfEnabled () { | 102 | onTabChange (event: NgbTabChangeEvent) { |
53 | if (this.startAtCheckbox === true) return this.currentVideoTimestamp | 103 | this.activeId = event.nextId as any |
104 | } | ||
105 | |||
106 | isInEmbedTab () { | ||
107 | return this.activeId === 'embed' | ||
108 | } | ||
109 | |||
110 | private getOptions (baseUrl?: string) { | ||
111 | return { | ||
112 | baseUrl, | ||
113 | |||
114 | startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined, | ||
115 | stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined, | ||
116 | |||
117 | subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined, | ||
118 | |||
119 | loop: this.customizations.loop, | ||
120 | autoplay: this.customizations.autoplay, | ||
121 | muted: this.customizations.muted, | ||
54 | 122 | ||
55 | return undefined | 123 | title: this.customizations.title, |
124 | warningTitle: this.customizations.warningTitle, | ||
125 | controls: this.customizations.controls | ||
126 | } | ||
56 | } | 127 | } |
57 | } | 128 | } |