Move privacy concerns in a dedicated component

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'

client/src/app/+videos/+video-watch/shared/information/index.ts

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

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

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

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

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

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

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

@@ -261,21 +261,7 @@
     ></my-recommended-videos>
   </div>
 
-  <div class="row privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
+  <my-privacy-concerns></my-privacy-concerns>
-    <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>
 </div>
 
 <ng-container *ngIf="video !== null">

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

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 {
+import { cleanupVideoWatch, getStoredTheater, getStoredVideoWatchHistory } from '../../../assets/player/peertube-player-local-storage'
-  cleanupVideoWatch,
-  getStoredP2PEnabled,
-  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
 

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,