forks/peertube
1
0
Fork 0
Code Releases Activity

Move privacy concerns in a dedicated component

Browse source
This commit is contained in:
Chocobozzz 2021-06-29 17:25:19 +02:00
parent 911186dae4
commit 6ebdd12f88
No known key found for this signature in database
GPG key ID: 583A612D890159BE
10 changed files with 150 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/src/app/+videos/+video-watch/shared/index.ts
View file

@ -1,4 +1,5 @@
export * from './comment'
export * from './information'
export * from './metadata'
export * from './playlist'
export * from './recommendations'

1
client/src/app/+videos/+video-watch/shared/information/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './privacy-concerns.component'

15
client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html Normal file
View file

@ -0,0 +1,15 @@
<div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
<div class="privacy-concerns-text">
<span class="mr-2">
<strong i18n>Friendly Reminder: </strong>
<ng-container i18n>
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.
</ng-container>
</span>
<a i18n i18n-title title="Get more information" target="_blank" rel="noopener noreferrer" href="/about/peertube#privacy">More information</a>
</div>
<div i18n class="privacy-concerns-button privacy-concerns-okay" (click)="acceptedPrivacyConcern()">
OK
</div>
</div>

80
client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss Normal file
View file

@ -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;
}
}

45
client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.ts Normal file
View file

@ -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
}
}

1
client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
View file

@ -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',

16
client/src/app/+videos/+video-watch/video-watch.component.html
View file

@ -261,21 +261,7 @@
></my-recommended-videos>
</div>
<div class="row privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
<div class="privacy-concerns-text">
<span class="mr-2">
<strong i18n>Friendly Reminder: </strong>
<ng-container i18n>
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.
</ng-container>
</span>
<a i18n i18n-title title="Get more information" target="_blank" rel="noopener noreferrer" href="/about/peertube#privacy">More information</a>
</div>
<div i18n class="privacy-concerns-button privacy-concerns-okay" (click)="acceptedPrivacyConcern()">
OK
</div>
</div>
<my-privacy-concerns></my-privacy-concerns>
</div>
<ng-container *ngIf="video !== null">

86
client/src/app/+videos/+video-watch/video-watch.component.scss
View file

@ -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) {

44
client/src/app/+videos/+video-watch/video-watch.component.ts
View file

@ -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

4
client/src/app/+videos/+video-watch/video-watch.module.ts
View file

@ -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,