Describe user video settings checkboxes, put emphasis on p2p

Also improve more info links about p2p and privacy in PeerTube,
present in the privacy concern notice and in the video settings.

client/src/app/+about/about-peertube/about-peertube.component.html

@@ -65,8 +65,11 @@
   <div class="privacy-contributors">
     <my-about-peertube-contributors></my-about-peertube-contributors>
 
-    <div class="p2p-privacy">
-      <h3 i18n class="section-title">P2P & Privacy</h3>
+    <div class="p2p-privacy">     
+      <h3 class="section-title">
+        <div class="anchor" id="privacy"></div> <!-- privacy anchor -->
+        <ng-container i18n>P2P & Privacy</ng-container>
+      </h3>
 
       <p i18n>
         PeerTube uses the BitTorrent protocol to share bandwidth between users by default to help lower the load on the server,
@@ -95,7 +98,7 @@
         <li i18n>
           For each request sent, the tracker returns random peers at a limited number.
           For instance, if there are 1000 peers in the swarm and the tracker sends only 20 peers for each request, there must be at least 50
-          requests sent to know every peers in the swarm
+          requests sent to know every peer in the swarm
         </li>
 
         <li i18n>

client/src/app/+about/about-peertube/about-peertube.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core'
+import { Component, AfterViewChecked } from '@angular/core'
+import { ViewportScroller } from '@angular/common'
 
 @Component({
   selector: 'my-about-peertube',
@@ -6,5 +7,12 @@ import { Component } from '@angular/core'
   styleUrls: [ './about-peertube.component.scss' ]
 })
 
-export class AboutPeertubeComponent {
+export class AboutPeertubeComponent implements AfterViewChecked {
+  constructor (
+    private viewportScroller: ViewportScroller
+  ) {}
+
+  ngAfterViewChecked () {
+    if (window.location.hash) this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
+  }
 }

client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html

@@ -1,5 +1,5 @@
 <div class="delete-me">
-  <p i18n>Once you delete your account, there is no going back.</p>
+  <p i18n>Once you delete your account, there is no going back. You will be asked to confirm this action.</p>
 
   <button (click)="deleteMe()" i18n>Delete your account</button>
-</div>
+</div>

client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss

@@ -7,5 +7,6 @@
   button {
     @include peertube-button;
     @include grey-button;
+    @include disable-outline;
   }
 }

client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts

@@ -24,7 +24,7 @@ export class MyAccountDangerZoneComponent {
 
   async deleteMe () {
     const res = await this.confirmService.confirmWithInput(
-      this.i18n('Are you sure you want to delete your account? This will delete all your data, including channels, videos etc.'),
+      this.i18n('Are you sure you want to delete your account? This will delete all your data, including channels, videos and comments. Content cached by other servers and other third-parties might make longer to be deleted.'),
       this.i18n('Type your username to confirm'),
       this.user.username,
       this.i18n('Delete your account'),

client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html

@@ -39,23 +39,35 @@
 
   <div class="form-group">
     <my-peertube-checkbox
-      inputName="webTorrentEnabled" formControlName="webTorrentEnabled"
-      i18n-labelText labelText="Use P2P to exchange parts of the video with others"
-    ></my-peertube-checkbox>
+      inputName="webTorrentEnabled" formControlName="webTorrentEnabled" [recommended]="true"
+      i18n-labelText labelText="Help share videos being played"
+    >
+      <ng-container ngProjectAs="description">
+        <span i18n>The <a routerLink="/about/peertube" fragment="privacy">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
+      </ng-container>
+    </my-peertube-checkbox>
   </div>
 
   <div class="form-group">
     <my-peertube-checkbox
       inputName="autoPlayVideo" formControlName="autoPlayVideo"
-      i18n-labelText labelText="Automatically plays video"
-    ></my-peertube-checkbox>
+      i18n-labelText labelText="Automatically play videos"
+    >
+      <ng-container ngProjectAs="description">
+        <span i18n>When on a video page, directly start playing the video.</span>
+      </ng-container>
+    </my-peertube-checkbox>
   </div>
 
   <div class="form-group">
     <my-peertube-checkbox
       inputName="autoPlayNextVideo" formControlName="autoPlayNextVideo"
-      i18n-labelText labelText="Automatically starts playing next video"
-    ></my-peertube-checkbox>
+      i18n-labelText labelText="Automatically start playing the next video"
+    >
+      <ng-container ngProjectAs="description">
+        <span i18n>When a video ends, follow up with the next suggested video.</span>
+      </ng-container>
+    </my-peertube-checkbox>
   </div>
 
   <input *ngIf="!reactiveUpdate" type="submit" i18n-value value="Save" [disabled]="!form.valid">

client/src/app/shared/forms/peertube-checkbox.component.html

@@ -29,6 +29,8 @@
         <ng-template *ngTemplateOutlet="helpTemplate"></ng-template>
       </ng-template>
     </my-help>
+
+    <div *ngIf="recommended" class="recommended" i18n>Recommended</div>
   </div>
 
   <div class="ml-4 d-flex flex-column">

client/src/app/shared/forms/peertube-checkbox.component.scss

@@ -34,4 +34,19 @@
   .wrapper:empty {
     display: none;
   }
+
+  .recommended {
+    margin-left: .5rem;
+    align-self: baseline;
+    display: inline-block;
+    padding: 4px 6px;
+    cursor: default;
+    border-radius: 3px;
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 500;
+    color: var(--inputPlaceholderColor);
+    background-color: rgba(217,225,232,.1);
+    border: 1px solid rgba(217,225,232,.5);
+  }
 }

client/src/app/shared/forms/peertube-checkbox.component.ts

@@ -21,6 +21,7 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor, AfterCon
   @Input() labelInnerHTML: string
   @Input() helpPlacement = 'top auto'
   @Input() disabled = false
+  @Input() recommended = false
 
   @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'label' | 'help'>>
 

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

@@ -263,7 +263,7 @@
           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">More information</a>
+      <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()">