Move privacy concerns in a dedicated component

6 files changed, 142 insertions, 1 deletions

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