]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
Fix admin config form for auto follow
[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / config / edit-custom-config / edit-custom-config.component.html
index 5e7ab03cd9ee53c071c55419225732b2d630406d..e5340234b121450dc1ebc86a89093a796bcb9d82 100644 (file)
@@ -30,7 +30,7 @@
           <div class="form-group">
             <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
             <my-markdown-textarea
-              id="instanceDescription" formControlName="description" textareaWidth="500px" [previewColumn]="true"
+              name="instanceDescription" formControlName="description" textareaWidth="500px" [previewColumn]="true"
               [classes]="{ 'input-error': formErrors['instance.description'] }"
             ></my-markdown-textarea>
             <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
           <div class="form-group">
             <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
             <my-markdown-textarea
-              id="instanceTerms" formControlName="terms" textareaWidth="500px" [previewColumn]="true"
+              name="instanceTerms" formControlName="terms" textareaWidth="500px" [previewColumn]="true"
               [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
             ></my-markdown-textarea>
             <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
           <div class="form-group">
             <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
             <my-markdown-textarea
-              id="instanceCodeOfConduct" formControlName="codeOfConduct" textareaWidth="500px" [previewColumn]="true"
+              name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaWidth="500px" [previewColumn]="true"
               [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
             ></my-markdown-textarea>
             <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
             <div class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
 
             <my-markdown-textarea
-              id="instanceModerationInformation" formControlName="moderationInformation" textareaWidth="500px" [previewColumn]="true"
+              name="instanceModerationInformation" formControlName="moderationInformation" textareaWidth="500px" [previewColumn]="true"
               [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
             ></my-markdown-textarea>
             <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
             <div class="label-small-info">A single person? A non-profit? A company?</div>
 
             <my-markdown-textarea
-              id="instanceAdministrator" formControlName="administrator" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
+              name="instanceAdministrator" formControlName="administrator" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
               [classes]="{ 'input-error': formErrors['instance.administrator'] }"
             ></my-markdown-textarea>
 
 
           <div class="form-group">
             <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label>
-            <div class="label-small-info">With you own funds? With users donations? Advertising?</div>
+            <div class="label-small-info">With your own funds? With users donations? Advertising?</div>
 
             <textarea
               id="instanceBusinessModel" formControlName="businessModel" class="small"
             <div class="label-small-info">2vCore 2GB RAM/or directly the link to the server you rent etc</div>
 
             <my-markdown-textarea
-              id="instanceHardwareInformation" formControlName="hardwareInformation" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
+              name="instanceHardwareInformation" formControlName="hardwareInformation" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
               [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
             ></my-markdown-textarea>
 
             <my-peertube-checkbox
               inputName="signupEnabled" formControlName="enabled"
               i18n-labelText labelText="Signup enabled"
-            ></my-peertube-checkbox>
-          </div>
-
-          <div class="form-group">
-            <my-peertube-checkbox *ngIf="isSignupEnabled()"
-              inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
-              i18n-labelText labelText="Signup requires email verification"
-            ></my-peertube-checkbox>
-          </div>
-
-          <div *ngIf="isSignupEnabled()" class="form-group">
-            <label i18n for="signupLimit">Signup limit</label>
-            <input
-              type="text" id="signupLimit"
-              formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
             >
-            <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
+              <ng-container ngProjectAs="extra">
+                <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }"
+                  inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
+                  i18n-labelText labelText="Signup requires email verification"
+                ></my-peertube-checkbox>
+
+                <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
+                  <label i18n for="signupLimit">Signup limit</label>
+                  <input
+                    type="text" id="signupLimit"
+                    formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
+                  >
+                  <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
+                </div>
+              </ng-container>
+            </my-peertube-checkbox>
           </div>
         </ng-container>
 
             <div class="form-group" formGroupName="http">
               <my-peertube-checkbox
                 inputName="importVideosHttpEnabled" formControlName="enabled"
-                i18n-labelText labelText="Video import with HTTP URL (i.e. YouTube) enabled"
+                i18n-labelText labelText="Allow import with HTTP URL (i.e. YouTube)"
               ></my-peertube-checkbox>
             </div>
 
             <div class="form-group" formGroupName="torrent">
               <my-peertube-checkbox
                 inputName="importVideosTorrentEnabled" formControlName="enabled"
-                i18n-labelText labelText="Video import with a torrent file or a magnet URI enabled"
+                i18n-labelText labelText="Allow import with a torrent file or a magnet URI"
               ></my-peertube-checkbox>
             </div>
 
               <div class="form-group">
                 <my-peertube-checkbox
                   inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
-                  i18n-labelText labelText="New videos of users automatically blacklisted enabled"
-                ></my-peertube-checkbox>
+                  i18n-labelText labelText="Blacklist new videos automatically"
+                >
+                <ng-container ngProjectAs="description">
+                  <span i18n>Videos of regular users will stay private until a moderator reviews them. Can be overriden per user.</span>
+                </ng-container>
+              </my-peertube-checkbox>
               </div>
 
             </ng-container>
             <div class="form-group">
               <my-peertube-checkbox
                 inputName="followersInstanceManualApproval" formControlName="manualApproval"
-                i18n-labelText labelText="Manually approve new instance follower"
+                i18n-labelText labelText="Manually approve new instance followers"
               ></my-peertube-checkbox>
             </div>
           </ng-container>
                 <my-peertube-checkbox
                   inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
                   i18n-labelText labelText="Automatically follow other instances that follow you"
-                ></my-peertube-checkbox>
+                >
+                  <ng-container ngProjectAs="description">
+                    <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
+                  </ng-container>
+                </my-peertube-checkbox>
               </div>
             </ng-container>
 
               <div class="form-group">
                 <my-peertube-checkbox
                   inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
-                  i18n-labelText labelText="Automatically follow instance of the public index (below)"
-                ></my-peertube-checkbox>
-              </div>
-
-              <div class="form-group">
-                <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
-                <input
-                  type="text" id="followingsInstanceAutoFollowIndexUrl"
-                  formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
+                  i18n-labelText labelText="Automatically follow instances of the public index"
                 >
-                <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
+                  <ng-container ngProjectAs="description">
+                    <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
+                  </ng-container>
+
+                  <ng-container ngProjectAs="extra">
+                    <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
+                      <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
+                      <input
+                        type="text" id="followingsInstanceAutoFollowIndexUrl"
+                        formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
+                      >
+                      <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
+                    </div>
+                  </ng-container>
+                </my-peertube-checkbox>
               </div>
 
             </ng-container>
               </my-peertube-checkbox>
             </div>
 
+            <ng-container formGroupName="webtorrent">
+              <div class="form-group" >
+                <my-peertube-checkbox
+                  inputName="transcodingWebTorrentEnabled" formControlName="enabled"
+                  i18n-labelText labelText="WebTorrent support enabled"
+                >
+                  <ng-template ptTemplate="help">
+                    <ng-container i18n>
+                      <strong>Experimental, we suggest you to not disable webtorrent support for now</strong>
+
+                      <p>If you also enabled HLS support, it will multiply videos storage by 2</p>
+
+                      <br />
+
+                      <strong>If disabled, breaks federation with PeerTube instances < 2.1</strong>
+                    </ng-container>
+                  </ng-template>
+                </my-peertube-checkbox>
+              </div>
+            </ng-container>
+
+            <ng-container formGroupName="hls">
+              <div class="form-group" >
+                <my-peertube-checkbox
+                  inputName="transcodingHlsEnabled" formControlName="enabled"
+                  i18n-labelText labelText="HLS support enabled"
+                >
+                  <ng-template ptTemplate="help">
+                    <ng-container i18n>
+                      <strong>Requires ffmpeg >= 4.1</strong>
+
+                      <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:</p>
+                      <ul>
+                        <li>Resolution change is smoother</li>
+                        <li>Faster playback in particular with long videos</li>
+                        <li>More stable playback (less bugs/infinite loading)</li>
+                      </ul>
+
+                      <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
+                    </ng-container>
+                  </ng-template>
+                </my-peertube-checkbox>
+              </div>
+            </ng-container>
+
             <div class="form-group">
               <label i18n for="transcodingThreads">Transcoding threads</label>
               <div class="peertube-select-container">
                 <my-peertube-checkbox
                   [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
                   i18n-labelText labelText="Resolution {{resolution.label}} enabled"
-                ></my-peertube-checkbox>
+                >
+                  <ng-template *ngIf="resolution.description" ptTemplate="help">
+                    <div [innerHTML]="resolution.description"></div>
+                  </ng-template>
+                </my-peertube-checkbox>
               </div>
             </ng-container>