From d3217560a611b94f888ecf3de93b428a7521d4de Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Fri, 28 Feb 2020 13:52:21 +0100 Subject: Add visitor settings, rework logged-in dropdown (#2514) * Add visitor settings, rework logged-in dropdown * Make user dropdown P2P switch functional * Fix lint * Fix unnecessary notification when user logs out * Simplify visitor settings code and remove unnecessary icons * Catch parsing errors and reindent menu styles --- .../+video-watch/video-watch-playlist.component.ts | 7 +++++-- .../videos/+video-watch/video-watch.component.html | 15 +++++++++------ .../videos/+video-watch/video-watch.component.scss | 10 ++++++++-- .../videos/+video-watch/video-watch.component.ts | 19 ++++++++++++++----- .../app/videos/+video-watch/video-watch.module.ts | 4 +--- .../recommended-videos.component.html | 2 +- .../recommended-videos.component.scss | 22 ---------------------- .../recommended-videos.component.ts | 20 ++++++++++++-------- .../app/videos/video-list/video-local.component.ts | 4 ++++ .../video-list/video-most-liked.component.ts | 4 ++++ .../video-list/video-recently-added.component.ts | 4 ++++ .../videos/video-list/video-trending.component.ts | 4 ++++ .../video-user-subscriptions.component.ts | 4 ++++ 13 files changed, 70 insertions(+), 49 deletions(-) (limited to 'client/src/app/videos') diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts index c5ed36000..827c34d41 100644 --- a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts +++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts @@ -9,6 +9,7 @@ import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist. import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model' import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage' import { I18n } from '@ngx-translate/i18n-polyfill' +import { SessionStorageService, LocalStorageService } from '@app/shared/misc/storage.service' @Component({ selector: 'my-video-watch-playlist', @@ -42,16 +43,18 @@ export class VideoWatchPlaylistComponent { private notifier: Notifier, private i18n: I18n, private videoPlaylist: VideoPlaylistService, + private localStorageService: LocalStorageService, + private sessionStorageService: SessionStorageService, private router: Router ) { // defaults to true this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn() ? this.auth.getUser().autoPlayNextVideoPlaylist - : peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false' + : this.localStorageService.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false' this.setAutoPlayNextVideoPlaylistSwitchText() // defaults to false - this.loopPlaylist = peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' + this.loopPlaylist = this.sessionStorageService.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' this.setLoopPlaylistSwitchText() } 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 cfa0432ad..585acd7a8 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -257,15 +257,18 @@
- Friendly Reminder: - - the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers. - + + Help your peers + and activate the sharing system to improve the experience for everyone. + More information
-
- OK +
+ No thanks +
+
+ Activate
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index ae79c2ff6..10e129ac5 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -443,6 +443,7 @@ my-video-comments { // If the view is not expanded, take into account the menu .privacy-concerns { + z-index: z(dropdown) + 1; width: calc(100% - #{$menu-width}); } @@ -488,11 +489,11 @@ my-video-comments { } } - .privacy-concerns-okay { - background-color: var(--mainColor); + .privacy-concerns-button { padding: 5px 8px 5px 7px; margin-left: auto; border-radius: 3px; + white-space: nowrap; cursor: pointer; transition: background-color 0.3s; font-weight: $font-semibold; @@ -501,6 +502,11 @@ my-video-comments { background-color: #000; } } + + .privacy-concerns-okay { + background-color: var(--mainColor); + margin-left: 10px; + } } @media screen and (max-width: 1600px) { 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 ee3deb5e9..9ba14316c 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -2,7 +2,7 @@ import { catchError } from 'rxjs/operators' import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { RedirectService } from '@app/core/routing/redirect.service' -import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage' +import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage' import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' import { MetaService } from '@ngx-meta/core' import { AuthUser, Notifier, ServerService } from '@app/core' @@ -10,7 +10,7 @@ import { forkJoin, Observable, Subscription } from 'rxjs' import { Hotkey, HotkeysService } from 'angular2-hotkeys' import { ServerConfig, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared' import { AuthService, ConfirmService } from '../../core' -import { RestExtractor } from '../../shared' +import { RestExtractor, UserService } from '../../shared' import { VideoDetails } from '../../shared/video/video-details.model' import { VideoService } from '../../shared/video/video.service' import { VideoShareComponent } from './modal/video-share.component' @@ -35,7 +35,6 @@ import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watc import { getStoredP2PEnabled, getStoredTheater } from '../../../assets/player/peertube-player-local-storage' import { HooksService } from '@app/core/plugins/hooks.service' import { PlatformLocation } from '@angular/common' -import { RecommendedVideosComponent } from '../recommendations/recommended-videos.component' import { scrollToTop, isXPercentInViewport } from '@app/shared/misc/utils' @Component({ @@ -95,6 +94,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private confirmService: ConfirmService, private metaService: MetaService, private authService: AuthService, + private userService: UserService, private serverService: ServerService, private restExtractor: RestExtractor, private notifier: Notifier, @@ -118,6 +118,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.authService.getUser() } + get anonymousUser () { + return this.userService.getAnonymousUser() + } + async ngOnInit () { this.serverConfig = this.serverService.getTmpConfig() @@ -266,6 +270,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.redirectService.redirectToHomepage() } + declinedPrivacyConcern () { + peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'false') + this.hasAlreadyAcceptedPrivacyConcern = false + } + acceptedPrivacyConcern () { peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true') this.hasAlreadyAcceptedPrivacyConcern = true @@ -290,7 +299,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { isAutoPlayEnabled () { return ( (this.user && this.user.autoPlayNextVideo) || - peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' + this.anonymousUser.autoPlayNextVideo ) } @@ -302,7 +311,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { isPlaylistAutoPlayEnabled () { return ( (this.user && this.user.autoPlayNextVideoPlaylist) || - peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' + this.anonymousUser.autoPlayNextVideoPlaylist ) } diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts index 5fa50ecbb..9b445269d 100644 --- a/client/src/app/videos/+video-watch/video-watch.module.ts +++ b/client/src/app/videos/+video-watch/video-watch.module.ts @@ -12,7 +12,6 @@ import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module' import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component' import { QRCodeModule } from 'angularx-qrcode' -import { InputSwitchModule } from 'primeng/inputswitch' import { TimestampRouteTransformerDirective } from '@app/shared/angular/timestamp-route-transformer.directive' @NgModule({ @@ -21,8 +20,7 @@ import { TimestampRouteTransformerDirective } from '@app/shared/angular/timestam SharedModule, NgbTooltipModule, QRCodeModule, - RecommendationsModule, - InputSwitchModule + RecommendationsModule ], declarations: [ diff --git a/client/src/app/videos/recommendations/recommended-videos.component.html b/client/src/app/videos/recommendations/recommended-videos.component.html index 4548c7d80..74f9ed2a5 100644 --- a/client/src/app/videos/recommendations/recommended-videos.component.html +++ b/client/src/app/videos/recommendations/recommended-videos.component.html @@ -8,7 +8,7 @@ [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto" > AUTOPLAY - + diff --git a/client/src/app/videos/recommendations/recommended-videos.component.scss b/client/src/app/videos/recommendations/recommended-videos.component.scss index 1ab0c47ff..cde62f87f 100644 --- a/client/src/app/videos/recommendations/recommended-videos.component.scss +++ b/client/src/app/videos/recommendations/recommended-videos.component.scss @@ -25,25 +25,3 @@ font-weight: 600; } } - -/* p-inputSwitch styles to reduce the switch size */ - -::ng-deep { - p-inputswitch { - height: 20px; - } - - .ui-inputswitch { - width: 2.5em !important; - height: 1.45em !important; - - .ui-inputswitch-slider::before { - height: 1em !important; - width: 1em !important; - } - } - - .ui-inputswitch-checked .ui-inputswitch-slider::before { - transform: translateX(1em) !important; - } -} diff --git a/client/src/app/videos/recommendations/recommended-videos.component.ts b/client/src/app/videos/recommendations/recommended-videos.component.ts index ada6d3433..d4b4c929b 100644 --- a/client/src/app/videos/recommendations/recommended-videos.component.ts +++ b/client/src/app/videos/recommendations/recommended-videos.component.ts @@ -7,8 +7,8 @@ import { RecommendedVideosStore } from '@app/videos/recommendations/recommended- import { User } from '@app/shared' import { AuthService, Notifier } from '@app/core' import { UserService } from '@app/shared/users/user.service' -import { peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage' import { I18n } from '@ngx-translate/i18n-polyfill' +import { SessionStorageService } from '@app/shared/misc/storage.service' @Component({ selector: 'my-recommended-videos', @@ -16,8 +16,6 @@ import { I18n } from '@ngx-translate/i18n-polyfill' styleUrls: [ './recommended-videos.component.scss' ] }) export class RecommendedVideosComponent implements OnChanges { - static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO = 'auto_play_next_video' - @Input() inputRecommendation: RecommendationInfo @Input() user: User @Input() playlist: VideoPlaylist @@ -34,15 +32,21 @@ export class RecommendedVideosComponent implements OnChanges { private authService: AuthService, private notifier: Notifier, private i18n: I18n, - private store: RecommendedVideosStore + private store: RecommendedVideosStore, + private sessionStorageService: SessionStorageService ) { this.videos$ = this.store.recommendations$ this.hasVideos$ = this.store.hasRecommendations$ this.videos$.subscribe(videos => this.gotRecommendations.emit(videos)) - this.autoPlayNextVideo = this.authService.isLoggedIn() - ? this.authService.getUser().autoPlayNextVideo - : peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false + if (this.authService.isLoggedIn()) { + this.autoPlayNextVideo = this.authService.getUser().autoPlayNextVideo + } else { + this.autoPlayNextVideo = this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false + this.sessionStorageService.watch([User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO]).subscribe( + () => this.autoPlayNextVideo = this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' + ) + } this.autoPlayNextVideoTooltip = this.i18n('When active, the next video is automatically played after the current one.') } @@ -58,7 +62,7 @@ export class RecommendedVideosComponent implements OnChanges { } switchAutoPlayNextVideo () { - peertubeSessionStorage.setItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString()) + this.sessionStorageService.setItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString()) if (this.authService.isLoggedIn()) { const details = { diff --git a/client/src/app/videos/video-list/video-local.component.ts b/client/src/app/videos/video-list/video-local.component.ts index 59f65f95c..757b0e498 100644 --- a/client/src/app/videos/video-list/video-local.component.ts +++ b/client/src/app/videos/video-list/video-local.component.ts @@ -11,6 +11,8 @@ import { ScreenService } from '@app/shared/misc/screen.service' import { UserRight } from '../../../../../shared/models/users' import { Notifier, ServerService } from '@app/core' import { HooksService } from '@app/core/plugins/hooks.service' +import { UserService } from '@app/shared' +import { LocalStorageService } from '@app/shared/misc/storage.service' @Component({ selector: 'my-videos-local', @@ -31,7 +33,9 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On protected route: ActivatedRoute, protected notifier: Notifier, protected authService: AuthService, + protected userService: UserService, protected screenService: ScreenService, + protected storageService: LocalStorageService, private videoService: VideoService, private hooks: HooksService ) { diff --git a/client/src/app/videos/video-list/video-most-liked.component.ts b/client/src/app/videos/video-list/video-most-liked.component.ts index 6ff7a1e0e..b69fad05f 100644 --- a/client/src/app/videos/video-list/video-most-liked.component.ts +++ b/client/src/app/videos/video-list/video-most-liked.component.ts @@ -9,6 +9,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { ScreenService } from '@app/shared/misc/screen.service' import { Notifier, ServerService } from '@app/core' import { HooksService } from '@app/core/plugins/hooks.service' +import { UserService } from '@app/shared' +import { LocalStorageService } from '@app/shared/misc/storage.service' @Component({ selector: 'my-videos-most-liked', @@ -28,7 +30,9 @@ export class VideoMostLikedComponent extends AbstractVideoList implements OnInit protected route: ActivatedRoute, protected notifier: Notifier, protected authService: AuthService, + protected userService: UserService, protected screenService: ScreenService, + protected storageService: LocalStorageService, private videoService: VideoService, private hooks: HooksService ) { diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts index 7568f4536..c1ddd4fd4 100644 --- a/client/src/app/videos/video-list/video-recently-added.component.ts +++ b/client/src/app/videos/video-list/video-recently-added.component.ts @@ -9,6 +9,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { ScreenService } from '@app/shared/misc/screen.service' import { Notifier, ServerService } from '@app/core' import { HooksService } from '@app/core/plugins/hooks.service' +import { UserService } from '@app/shared' +import { LocalStorageService } from '@app/shared/misc/storage.service' @Component({ selector: 'my-videos-recently-added', @@ -29,7 +31,9 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On protected router: Router, protected notifier: Notifier, protected authService: AuthService, + protected userService: UserService, protected screenService: ScreenService, + protected storageService: LocalStorageService, private videoService: VideoService, private hooks: HooksService ) { diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts index e29830b5b..fbe052277 100644 --- a/client/src/app/videos/video-list/video-trending.component.ts +++ b/client/src/app/videos/video-list/video-trending.component.ts @@ -9,6 +9,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { ScreenService } from '@app/shared/misc/screen.service' import { Notifier, ServerService } from '@app/core' import { HooksService } from '@app/core/plugins/hooks.service' +import { UserService } from '@app/shared' +import { LocalStorageService } from '@app/shared/misc/storage.service' @Component({ selector: 'my-videos-trending', @@ -28,7 +30,9 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, protected route: ActivatedRoute, protected notifier: Notifier, protected authService: AuthService, + protected userService: UserService, protected screenService: ScreenService, + protected storageService: LocalStorageService, private videoService: VideoService, private hooks: HooksService ) { diff --git a/client/src/app/videos/video-list/video-user-subscriptions.component.ts b/client/src/app/videos/video-list/video-user-subscriptions.component.ts index cf0b15054..036fd8dcb 100644 --- a/client/src/app/videos/video-list/video-user-subscriptions.component.ts +++ b/client/src/app/videos/video-list/video-user-subscriptions.component.ts @@ -10,6 +10,8 @@ import { ScreenService } from '@app/shared/misc/screen.service' import { OwnerDisplayType } from '@app/shared/video/video-miniature.component' import { Notifier, ServerService } from '@app/core' import { HooksService } from '@app/core/plugins/hooks.service' +import { UserService } from '@app/shared' +import { LocalStorageService } from '@app/shared/misc/storage.service' @Component({ selector: 'my-videos-user-subscriptions', @@ -29,7 +31,9 @@ export class VideoUserSubscriptionsComponent extends AbstractVideoList implement protected route: ActivatedRoute, protected notifier: Notifier, protected authService: AuthService, + protected userService: UserService, protected screenService: ScreenService, + protected storageService: LocalStorageService, private videoService: VideoService, private hooks: HooksService ) { -- cgit v1.2.3