diff options
Diffstat (limited to 'client/src/app/+my-account')
9 files changed, 124 insertions, 13 deletions
diff --git a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html new file mode 100644 index 000000000..5e2323b91 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html | |||
@@ -0,0 +1,33 @@ | |||
1 | <ng-template #modal let-close="close" let-dismiss="dismiss"> | ||
2 | <div class="modal-header"> | ||
3 | <h4 i18n class="modal-title">Live information</h4> | ||
4 | |||
5 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon> | ||
6 | </div> | ||
7 | |||
8 | <div class="modal-body"> | ||
9 | <div class="form-group"> | ||
10 | <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label> | ||
11 | <my-input-readonly-copy id="liveVideoRTMPUrl" [value]="rtmpUrl"></my-input-readonly-copy> | ||
12 | </div> | ||
13 | |||
14 | <div class="form-group"> | ||
15 | <label for="liveVideoStreamKey" i18n>Live stream key</label> | ||
16 | <my-input-readonly-copy id="liveVideoStreamKey" [value]="streamKey"></my-input-readonly-copy> | ||
17 | </div> | ||
18 | </div> | ||
19 | |||
20 | <div class="modal-footer"> | ||
21 | <div class="form-group inputs"> | ||
22 | <input | ||
23 | type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel" | ||
24 | (click)="dismiss()" | ||
25 | > | ||
26 | |||
27 | <my-edit-button | ||
28 | i18n-label label="Update live settings" | ||
29 | [routerLink]="[ '/videos', 'update', video.uuid ]" (click)="dismiss()" | ||
30 | ></my-edit-button> | ||
31 | </div> | ||
32 | </div> | ||
33 | </ng-template> | ||
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss index a79fec179..a79fec179 100644 --- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss +++ b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss | |||
diff --git a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts new file mode 100644 index 000000000..a5885a8e7 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts | |||
@@ -0,0 +1,40 @@ | |||
1 | import { Component, ElementRef, ViewChild } from '@angular/core' | ||
2 | import { LiveVideoService, Video } from '@app/shared/shared-main' | ||
3 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | ||
4 | |||
5 | @Component({ | ||
6 | selector: 'my-live-stream-information', | ||
7 | templateUrl: './live-stream-information.component.html', | ||
8 | styleUrls: [ './live-stream-information.component.scss' ] | ||
9 | }) | ||
10 | export class LiveStreamInformationComponent { | ||
11 | @ViewChild('modal', { static: true }) modal: ElementRef | ||
12 | |||
13 | video: Video | ||
14 | rtmpUrl = '' | ||
15 | streamKey = '' | ||
16 | |||
17 | constructor ( | ||
18 | private modalService: NgbModal, | ||
19 | private liveVideoService: LiveVideoService | ||
20 | ) { } | ||
21 | |||
22 | show (video: Video) { | ||
23 | this.video = video | ||
24 | this.rtmpUrl = '' | ||
25 | this.streamKey = '' | ||
26 | |||
27 | this.loadLiveInfo(video) | ||
28 | |||
29 | this.modalService | ||
30 | .open(this.modal, { centered: true }) | ||
31 | } | ||
32 | |||
33 | private loadLiveInfo (video: Video) { | ||
34 | this.liveVideoService.getVideoLive(video.id) | ||
35 | .subscribe(live => { | ||
36 | this.rtmpUrl = live.rtmpUrl | ||
37 | this.streamKey = live.streamKey | ||
38 | }) | ||
39 | } | ||
40 | } | ||
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html index 9d809d2bf..c7c5a0b69 100644 --- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html +++ b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html | |||
@@ -16,7 +16,7 @@ | |||
16 | </div> | 16 | </div> |
17 | </div> | 17 | </div> |
18 | 18 | ||
19 | <div class="modal-footer inputs"> | 19 | <div class="modal-footer"> |
20 | <div class="form-group inputs"> | 20 | <div class="form-group inputs"> |
21 | <input | 21 | <input |
22 | type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" | 22 | type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" |
diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss new file mode 100644 index 000000000..a79fec179 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss | |||
@@ -0,0 +1,10 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | p-autocomplete { | ||
5 | display: block; | ||
6 | } | ||
7 | |||
8 | .form-group { | ||
9 | margin: 20px 0; | ||
10 | } \ No newline at end of file | ||
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts index 84237dee1..84237dee1 100644 --- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts +++ b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts | |||
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html index f2ed0ac99..aa5b284e7 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html | |||
@@ -34,18 +34,13 @@ | |||
34 | 34 | ||
35 | <ng-template ptTemplate="rowButtons" let-video> | 35 | <ng-template ptTemplate="rowButtons" let-video> |
36 | <div class="action-button"> | 36 | <div class="action-button"> |
37 | <my-delete-button label (click)="deleteVideo(video)"></my-delete-button> | ||
38 | |||
39 | <my-edit-button label [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button> | 37 | <my-edit-button label [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button> |
40 | 38 | ||
41 | <my-button i18n-label label="Change ownership" | 39 | <my-action-dropdown [actions]="videoActions" [entry]="{ video: video }"></my-action-dropdown> |
42 | className="action-button-change-ownership grey-button" | ||
43 | icon="ownership-change" | ||
44 | (click)="changeOwnership($event, video)" | ||
45 | ></my-button> | ||
46 | </div> | 40 | </div> |
47 | </ng-template> | 41 | </ng-template> |
48 | </my-videos-selection> | 42 | </my-videos-selection> |
49 | 43 | ||
50 | 44 | ||
51 | <my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership> | 45 | <my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership> |
46 | <my-live-stream-information #liveStreamInformationModal></my-live-stream-information> | ||
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts index 46a02a41a..7a3019239 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts | |||
@@ -5,10 +5,11 @@ import { ActivatedRoute, Router } from '@angular/router' | |||
5 | import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core' | 5 | import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core' |
6 | import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' | 6 | import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' |
7 | import { immutableAssign } from '@app/helpers' | 7 | import { immutableAssign } from '@app/helpers' |
8 | import { Video, VideoService } from '@app/shared/shared-main' | 8 | import { DropdownAction, Video, VideoService } from '@app/shared/shared-main' |
9 | import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' | 9 | import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' |
10 | import { VideoSortField } from '@shared/models' | 10 | import { VideoSortField } from '@shared/models' |
11 | import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component' | 11 | import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component' |
12 | import { LiveStreamInformationComponent } from './modals/live-stream-information.component' | ||
12 | 13 | ||
13 | @Component({ | 14 | @Component({ |
14 | selector: 'my-account-videos', | 15 | selector: 'my-account-videos', |
@@ -18,6 +19,7 @@ import { VideoChangeOwnershipComponent } from './video-change-ownership/video-ch | |||
18 | export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { | 19 | export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { |
19 | @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent | 20 | @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent |
20 | @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent | 21 | @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent |
22 | @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent | ||
21 | 23 | ||
22 | titlePage: string | 24 | titlePage: string |
23 | selection: SelectionType = {} | 25 | selection: SelectionType = {} |
@@ -37,6 +39,8 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { | |||
37 | } | 39 | } |
38 | ownerDisplayType: OwnerDisplayType = 'videoChannel' | 40 | ownerDisplayType: OwnerDisplayType = 'videoChannel' |
39 | 41 | ||
42 | videoActions: DropdownAction<{ video: Video }>[] = [] | ||
43 | |||
40 | videos: Video[] = [] | 44 | videos: Video[] = [] |
41 | videosSearch: string | 45 | videosSearch: string |
42 | videosSearchChanged = new Subject<string>() | 46 | videosSearchChanged = new Subject<string>() |
@@ -56,6 +60,8 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { | |||
56 | } | 60 | } |
57 | 61 | ||
58 | ngOnInit () { | 62 | ngOnInit () { |
63 | this.buildActions() | ||
64 | |||
59 | this.videosSearchChanged | 65 | this.videosSearchChanged |
60 | .pipe(debounceTime(500)) | 66 | .pipe(debounceTime(500)) |
61 | .subscribe(() => { | 67 | .subscribe(() => { |
@@ -138,12 +144,36 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { | |||
138 | ) | 144 | ) |
139 | } | 145 | } |
140 | 146 | ||
141 | changeOwnership (event: Event, video: Video) { | 147 | changeOwnership (video: Video) { |
142 | event.preventDefault() | ||
143 | this.videoChangeOwnershipModal.show(video) | 148 | this.videoChangeOwnershipModal.show(video) |
144 | } | 149 | } |
145 | 150 | ||
151 | displayLiveInformation (video: Video) { | ||
152 | this.liveStreamInformationModal.show(video) | ||
153 | } | ||
154 | |||
146 | private removeVideoFromArray (id: number) { | 155 | private removeVideoFromArray (id: number) { |
147 | this.videos = this.videos.filter(v => v.id !== id) | 156 | this.videos = this.videos.filter(v => v.id !== id) |
148 | } | 157 | } |
158 | |||
159 | private buildActions () { | ||
160 | this.videoActions = [ | ||
161 | { | ||
162 | label: $localize`Display live information`, | ||
163 | handler: ({ video }) => this.displayLiveInformation(video), | ||
164 | isDisplayed: ({ video }) => video.isLive, | ||
165 | iconName: 'live' | ||
166 | }, | ||
167 | { | ||
168 | label: $localize`Change ownership`, | ||
169 | handler: ({ video }) => this.changeOwnership(video), | ||
170 | iconName: 'ownership-change' | ||
171 | }, | ||
172 | { | ||
173 | label: $localize`Delete`, | ||
174 | handler: ({ video }) => this.deleteVideo(video), | ||
175 | iconName: 'delete' | ||
176 | } | ||
177 | ] | ||
178 | } | ||
149 | } | 179 | } |
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts index 5f7ed4d2f..6b8baff52 100644 --- a/client/src/app/+my-account/my-account.module.ts +++ b/client/src/app/+my-account/my-account.module.ts | |||
@@ -34,7 +34,8 @@ import { MyAccountVideoPlaylistElementsComponent } from './my-account-video-play | |||
34 | import { MyAccountVideoPlaylistUpdateComponent } from './my-account-video-playlists/my-account-video-playlist-update.component' | 34 | import { MyAccountVideoPlaylistUpdateComponent } from './my-account-video-playlists/my-account-video-playlist-update.component' |
35 | import { MyAccountVideoPlaylistsComponent } from './my-account-video-playlists/my-account-video-playlists.component' | 35 | import { MyAccountVideoPlaylistsComponent } from './my-account-video-playlists/my-account-video-playlists.component' |
36 | import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component' | 36 | import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component' |
37 | import { VideoChangeOwnershipComponent } from './my-account-videos/video-change-ownership/video-change-ownership.component' | 37 | import { VideoChangeOwnershipComponent } from './my-account-videos/modals/video-change-ownership.component' |
38 | import { LiveStreamInformationComponent } from './my-account-videos/modals/live-stream-information.component' | ||
38 | import { MyAccountComponent } from './my-account.component' | 39 | import { MyAccountComponent } from './my-account.component' |
39 | 40 | ||
40 | @NgModule({ | 41 | @NgModule({ |
@@ -68,6 +69,8 @@ import { MyAccountComponent } from './my-account.component' | |||
68 | MyAccountVideosComponent, | 69 | MyAccountVideosComponent, |
69 | 70 | ||
70 | VideoChangeOwnershipComponent, | 71 | VideoChangeOwnershipComponent, |
72 | LiveStreamInformationComponent, | ||
73 | |||
71 | MyAccountOwnershipComponent, | 74 | MyAccountOwnershipComponent, |
72 | MyAccountAcceptOwnershipComponent, | 75 | MyAccountAcceptOwnershipComponent, |
73 | MyAccountVideoImportsComponent, | 76 | MyAccountVideoImportsComponent, |