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 ++++++++-- .../app/videos/+video-watch/video-watch.component.ts | 19 ++++++++++++++----- .../src/app/videos/+video-watch/video-watch.module.ts | 4 +--- 5 files changed, 37 insertions(+), 18 deletions(-) (limited to 'client/src/app/videos/+video-watch') 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: [ -- cgit v1.2.3