From 6ebdd12f8806edd7076e89c8ea3bcfaf5658b2b6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 29 Jun 2021 17:25:19 +0200 Subject: Move privacy concerns in a dedicated component --- .../src/app/+videos/+video-watch/shared/index.ts | 1 + .../+video-watch/shared/information/index.ts | 1 + .../information/privacy-concerns.component.html | 15 ++++ .../information/privacy-concerns.component.scss | 80 ++++++++++++++++++++ .../information/privacy-concerns.component.ts | 45 +++++++++++ .../shared/metadata/video-description.component.ts | 1 - .../+video-watch/video-watch.component.html | 16 +--- .../+video-watch/video-watch.component.scss | 86 ---------------------- .../+videos/+video-watch/video-watch.component.ts | 44 +---------- .../app/+videos/+video-watch/video-watch.module.ts | 4 +- 10 files changed, 150 insertions(+), 143 deletions(-) create mode 100644 client/src/app/+videos/+video-watch/shared/information/index.ts create mode 100644 client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html create mode 100644 client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss create mode 100644 client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.ts (limited to 'client') diff --git a/client/src/app/+videos/+video-watch/shared/index.ts b/client/src/app/+videos/+video-watch/shared/index.ts index a6c2d75ad..6c5ff7e9b 100644 --- a/client/src/app/+videos/+video-watch/shared/index.ts +++ b/client/src/app/+videos/+video-watch/shared/index.ts @@ -1,4 +1,5 @@ export * from './comment' +export * from './information' export * from './metadata' export * from './playlist' export * from './recommendations' diff --git a/client/src/app/+videos/+video-watch/shared/information/index.ts b/client/src/app/+videos/+video-watch/shared/information/index.ts new file mode 100644 index 000000000..4c9920765 --- /dev/null +++ b/client/src/app/+videos/+video-watch/shared/information/index.ts @@ -0,0 +1 @@ +export * from './privacy-concerns.component' diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html new file mode 100644 index 000000000..efad5a2b8 --- /dev/null +++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html @@ -0,0 +1,15 @@ +
+
+ + 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. + + + More information +
+ +
+ OK +
+
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss new file mode 100644 index 000000000..b42be318f --- /dev/null +++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss @@ -0,0 +1,80 @@ +@use '_variables' as *; +@use '_mixins' as *; + +.privacy-concerns { + position: fixed; + bottom: 0; + + width: calc(100% - #{$menu-width}); + z-index: z(privacymsg); + + padding: 5px 15px; + + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; + background-color: rgba(0, 0, 0, 0.9); + color: #fff; +} + +// If the view is expanded +:host-context(.expanded) { + .privacy-concerns { + width: 100%; + } +} + +// Or if we are in the small view +@media screen and (max-width: $small-view) { + .privacy-concerns { + width: 100%; + } +} + +.privacy-concerns-text { + margin: 0 5px; +} + +a { + @include disable-default-a-behaviour; + + color: pvar(--mainColor); + transition: color 0.3s; + + &:hover { + color: #fff; + } +} + +.privacy-concerns-button { + @include margin-left(auto); + + padding: 5px 8px 5px 7px; + border-radius: 3px; + white-space: nowrap; + cursor: pointer; + transition: background-color 0.3s; + font-weight: $font-semibold; + + &:hover { + background-color: #000; + } +} + +.privacy-concerns-okay { + @include margin-left(10px); + + background-color: pvar(--mainColor); +} + +@media screen and (max-width: 1300px) { + .privacy-concerns { + font-size: 12px; + padding: 2px 5px; + } + + .privacy-concerns-text { + margin: 0; + } +} diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.ts b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.ts new file mode 100644 index 000000000..ef5c8ed87 --- /dev/null +++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.ts @@ -0,0 +1,45 @@ +import { Component, OnInit } from '@angular/core' +import { ServerService } from '@app/core' +import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' +import { HTMLServerConfig } from '@shared/models' +import { getStoredP2PEnabled } from '../../../../../assets/player/peertube-player-local-storage' +import { isWebRTCDisabled } from '../../../../../assets/player/utils' + +@Component({ + selector: 'my-privacy-concerns', + templateUrl: './privacy-concerns.component.html', + styleUrls: [ './privacy-concerns.component.scss' ] +}) +export class PrivacyConcernsComponent implements OnInit { + private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' + + hasAlreadyAcceptedPrivacyConcern = false + + private serverConfig: HTMLServerConfig + + constructor ( + private serverService: ServerService + ) { } + + async ngOnInit () { + this.serverConfig = this.serverService.getHTMLConfig() + if ( + isWebRTCDisabled() || + this.serverConfig.tracker.enabled === false || + getStoredP2PEnabled() === false || + peertubeLocalStorage.getItem(PrivacyConcernsComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' + ) { + this.hasAlreadyAcceptedPrivacyConcern = true + } + } + + declinedPrivacyConcern () { + peertubeLocalStorage.setItem(PrivacyConcernsComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'false') + this.hasAlreadyAcceptedPrivacyConcern = false + } + + acceptedPrivacyConcern () { + peertubeLocalStorage.setItem(PrivacyConcernsComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true') + this.hasAlreadyAcceptedPrivacyConcern = true + } +} diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts index 2ea3b206f..b554567d9 100644 --- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts +++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts @@ -2,7 +2,6 @@ import { Component, EventEmitter, Inject, Input, LOCALE_ID, OnChanges, Output } import { MarkdownService, Notifier } from '@app/core' import { VideoDetails, VideoService } from '@app/shared/shared-main' - @Component({ selector: 'my-video-description', templateUrl: './video-description.component.html', 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 40efa7b35..2380d5a98 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.html +++ b/client/src/app/+videos/+video-watch/video-watch.component.html @@ -261,21 +261,7 @@ > -
-
- - 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. - - - More information -
- -
- OK -
-
+ 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 f25f3bf31..e075fc57e 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss @@ -364,94 +364,12 @@ my-video-comments { margin-bottom: 20px; } -// If the view is not expanded, take into account the menu -.privacy-concerns { - z-index: z(dropdown) + 1; - width: calc(100% - #{$menu-width}); -} - -@media screen and (max-width: $small-view) { - .privacy-concerns { - @include margin-left($menu-width - 15px); // Menu is absolute - } -} - -:host-context(.expanded) { - .privacy-concerns { - @include margin-left(-15px); - - width: 100%; - } -} - -.privacy-concerns { - position: fixed; - bottom: 0; - z-index: z(privacymsg); - - padding: 5px 15px; - - display: flex; - flex-wrap: nowrap; - align-items: center; - justify-content: space-between; - background-color: rgba(0, 0, 0, 0.9); - color: #fff; - - .privacy-concerns-text { - margin: 0 5px; - } - - a { - @include disable-default-a-behaviour; - - color: pvar(--mainColor); - transition: color 0.3s; - - &:hover { - color: #fff; - } - } - - .privacy-concerns-button { - @include margin-left(auto); - - padding: 5px 8px 5px 7px; - border-radius: 3px; - white-space: nowrap; - cursor: pointer; - transition: background-color 0.3s; - font-weight: $font-semibold; - - &:hover { - background-color: #000; - } - } - - .privacy-concerns-okay { - @include margin-left(10px); - - background-color: pvar(--mainColor); - } -} - @media screen and (max-width: 1600px) { .video-bottom .video-info .video-attributes .video-attribute { margin-bottom: 5px; } } -@media screen and (max-width: 1300px) { - .privacy-concerns { - font-size: 12px; - padding: 2px 5px; - - .privacy-concerns-text { - margin: 0; - } - } -} - // Use the same breakpoint than in the typescript component to display the other video miniatures as row @media screen and (max-width: 1100px) { #video-wrapper { @@ -489,10 +407,6 @@ my-video-comments { } } } - - .privacy-concerns { - width: 100%; - } } @media screen and (max-width: 450px) { 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 9bc82d667..5a0109e64 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts @@ -26,7 +26,6 @@ import { SupportModalComponent } from '@app/shared/shared-support-modal' import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature' import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' -import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' import { HTMLServerConfig, @@ -37,12 +36,7 @@ import { VideoPrivacy, VideoState } from '@shared/models' -import { - cleanupVideoWatch, - getStoredP2PEnabled, - getStoredTheater, - getStoredVideoWatchHistory -} from '../../../assets/player/peertube-player-local-storage' +import { cleanupVideoWatch, getStoredTheater, getStoredVideoWatchHistory } from '../../../assets/player/peertube-player-local-storage' import { CustomizationOptions, P2PMediaLoaderOptions, @@ -51,7 +45,7 @@ import { PlayerMode, videojs } from '../../../assets/player/peertube-player-manager' -import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils' +import { timeToInt } from '../../../assets/player/utils' import { environment } from '../../../environments/environment' import { VideoWatchPlaylistComponent } from './shared' @@ -63,8 +57,6 @@ type URLOptions = CustomizationOptions & { playerMode: PlayerMode } styleUrls: [ './video-watch.component.scss' ] }) export class VideoWatchComponent implements OnInit, OnDestroy { - private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' - @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent @ViewChild('videoShareModal') videoShareModal: VideoShareComponent @ViewChild('supportModal') supportModal: SupportModalComponent @@ -84,15 +76,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { playlistPosition: number playlist: VideoPlaylist = null - descriptionLoading = false - completeDescriptionShown = false - completeVideoDescription: string - shortVideoDescription: string - videoHTMLDescription = '' - likesBarTooltipText = '' - hasAlreadyAcceptedPrivacyConcern = false remoteServerDown = false tooltipSupport = '' @@ -159,6 +144,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } async ngOnInit () { + this.serverConfig = this.serverService.getHTMLConfig() + // Hide the tooltips for unlogged users in mobile view, this adds confusion with the popover if (this.user || !this.screenService.isInMobileView()) { this.tooltipSupport = $localize`Support options for this video` @@ -167,16 +154,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { PeertubePlayerManager.initState() - this.serverConfig = this.serverService.getHTMLConfig() - if ( - isWebRTCDisabled() || - this.serverConfig.tracker.enabled === false || - getStoredP2PEnabled() === false || - peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' - ) { - this.hasAlreadyAcceptedPrivacyConcern = true - } - this.paramsSub = this.route.params.subscribe(routeParams => { const videoId = routeParams[ 'videoId' ] if (videoId) this.loadVideo(videoId) @@ -272,16 +249,6 @@ 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 - } - isVideoToTranscode () { return this.video && this.video.state.id === VideoState.TO_TRANSCODE } @@ -486,9 +453,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { // Re init attributes this.playerPlaceholderImgSrc = undefined - this.descriptionLoading = false - this.completeDescriptionShown = false - this.completeVideoDescription = undefined this.remoteServerDown = false this.currentTime = undefined 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 f4484f1fe..c1f40d785 100644 --- a/client/src/app/+videos/+video-watch/video-watch.module.ts +++ b/client/src/app/+videos/+video-watch/video-watch.module.ts @@ -18,7 +18,8 @@ import { VideoAvatarChannelComponent, VideoDescriptionComponent, VideoRateComponent, - VideoWatchPlaylistComponent + VideoWatchPlaylistComponent, + PrivacyConcernsComponent } from './shared' import { VideoCommentAddComponent } from './shared/comment/video-comment-add.component' import { VideoCommentComponent } from './shared/comment/video-comment.component' @@ -51,6 +52,7 @@ import { VideoWatchComponent } from './video-watch.component' VideoWatchPlaylistComponent, VideoRateComponent, VideoDescriptionComponent, + PrivacyConcernsComponent, VideoCommentsComponent, VideoCommentAddComponent, -- cgit v1.2.3