client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html

   1 <ng-container [formGroup]="form">
   2   <div class="form-row mt-5"> <!-- appearance grid -->
   3     <div class="form-group col-12 col-lg-4 col-xl-3">
   4       <div i18n class="inner-form-title">APPEARANCE</div>
   5       <div i18n class="inner-form-description">
   6         Use <a routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or <a routerLink="/admin/config/edit-custom" fragment="advanced-configuration">add slight customizations</a>.
   7       </div>
   8     </div>
   9
  10     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  11
  12       <ng-container formGroupName="theme">
  13         <div class="form-group">
  14           <label i18n for="themeDefault">Theme</label>
  15
  16           <div class="peertube-select-container">
  17             <select formControlName="default" id="themeDefault" class="form-control">
  18               <option i18n value="default">default</option>
  19
  20               <option *ngFor="let theme of getAvailableThemes()" [value]="theme">{{ theme }}</option>
  21             </select>
  22           </div>
  23         </div>
  24       </ng-container>
  25
  26       <div class="form-group" formGroupName="instance">
  27         <label i18n for="instanceDefaultClientRoute">Landing page</label>
  28
  29         <div class="peertube-select-container">
  30           <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute" class="form-control">
  31             <option i18n value="/videos/overview">Discover videos</option>
  32
  33             <optgroup i18n-label label="Trending pages">
  34               <option i18n value="/videos/trending">Default trending page</option>
  35               <option i18n value="/videos/trending?alg=best" [disabled]="!doesTrendingVideosAlgorithmsEnabledInclude('best')">Best videos</option>
  36               <option i18n value="/videos/trending?alg=hot" [disabled]="!doesTrendingVideosAlgorithmsEnabledInclude('hot')">Hot videos</option>
  37               <option i18n value="/videos/trending?alg=most-viewed" [disabled]="!doesTrendingVideosAlgorithmsEnabledInclude('most-viewed')">Most viewed videos</option>
  38               <option i18n value="/videos/trending?alg=most-liked" [disabled]="!doesTrendingVideosAlgorithmsEnabledInclude('most-liked')">Most liked videos</option>
  39             </optgroup>
  40
  41             <option i18n value="/videos/recently-added">Recently added videos</option>
  42             <option i18n value="/videos/local">Local videos</option>
  43           </select>
  44         </div>
  45
  46         <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
  47       </div>
  48
  49       <div class="form-group" formGroupName="trending">
  50         <ng-container formGroupName="videos">
  51           <ng-container formGroupName="algorithms">
  52             <label i18n for="trendingVideosAlgorithmsDefault">Default trending page</label>
  53
  54             <div class="peertube-select-container">
  55               <select id="trendingVideosAlgorithmsDefault" formControlName="default" class="form-control">
  56                 <option i18n value="best">Best videos</option>
  57                 <option i18n value="hot">Hot videos</option>
  58                 <option i18n value="most-viewed">Most viewed videos</option>
  59                 <option i18n value="most-liked">Most liked videos</option>
  60               </select>
  61             </div>
  62
  63             <div *ngIf="formErrors.trending.videos.algorithms.default" class="form-error">{{ formErrors.trending.videos.algorithms.default }}</div>
  64           </ng-container>
  65         </ng-container>
  66       </div>
  67
  68     </div>
  69   </div>
  70
  71   <div class="form-row mt-4"> <!-- broadcast grid -->
  72     <div class="form-group col-12 col-lg-4 col-xl-3">
  73       <div i18n class="inner-form-title">BROADCAST MESSAGE</div>
  74       <div i18n class="inner-for-description">
  75         Display a message on your instance
  76       </div>
  77     </div>
  78
  79     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  80
  81       <ng-container formGroupName="broadcastMessage">
  82
  83         <div class="form-group">
  84           <my-peertube-checkbox
  85             inputName="broadcastMessageEnabled" formControlName="enabled"
  86             i18n-labelText labelText="Enable broadcast message"
  87           ></my-peertube-checkbox>
  88         </div>
  89
  90         <div class="form-group">
  91           <my-peertube-checkbox
  92             inputName="broadcastMessageDismissable" formControlName="dismissable"
  93             i18n-labelText labelText="Allow users to dismiss the broadcast message "
  94           ></my-peertube-checkbox>
  95         </div>
  96
  97         <div class="form-group">
  98           <label i18n for="broadcastMessageLevel">Broadcast message level</label>
  99
 100           <div class="peertube-select-container">
 101             <select id="broadcastMessageLevel" formControlName="level" class="form-control">
 102               <option value="info">info</option>
 103               <option value="warning">warning</option>
 104               <option value="error">error</option>
 105             </select>
 106           </div>
 107
 108           <div *ngIf="formErrors.broadcastMessage.level" class="form-error">{{ formErrors.broadcastMessage.level }}</div>
 109         </div>
 110
 111         <div class="form-group">
 112           <label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
 113
 114           <my-markdown-textarea
 115             name="broadcastMessageMessage" formControlName="message" textareaMaxWidth="500px"
 116             [classes]="{ 'input-error': formErrors['broadcastMessage.message'] }"
 117           ></my-markdown-textarea>
 118
 119           <div *ngIf="formErrors.broadcastMessage.message" class="form-error">{{ formErrors.broadcastMessage.message }}</div>
 120         </div>
 121
 122       </ng-container>
 123
 124     </div>
 125   </div>
 126
 127   <div class="form-row mt-4"> <!-- new users grid -->
 128     <div class="form-group col-12 col-lg-4 col-xl-3">
 129       <div i18n class="inner-form-title">NEW USERS</div>
 130       <div i18n class="inner-for-description">
 131         Manage <a routerLink="/admin/users">users</a> to set their quota individually.
 132       </div>
 133     </div>
 134
 135     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 136
 137       <ng-container formGroupName="signup">
 138         <div class="form-group">
 139           <my-peertube-checkbox
 140             inputName="signupEnabled" formControlName="enabled"
 141             i18n-labelText labelText="Enable Signup"
 142           >
 143             <ng-container ngProjectAs="description">
 144               <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
 145
 146               <div class="alert alert-info alert-signup" *ngIf="signupAlertMessage">{{ signupAlertMessage }}</div>
 147             </ng-container>
 148
 149             <ng-container ngProjectAs="extra">
 150               <my-peertube-checkbox [ngClass]="getDisabledSignupClass()"
 151                 inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
 152                 i18n-labelText labelText="Signup requires email verification"
 153               ></my-peertube-checkbox>
 154
 155               <div [ngClass]="getDisabledSignupClass()" class="mt-3">
 156                 <label i18n for="signupLimit">Signup limit</label>
 157
 158                 <div class="number-with-unit">
 159                   <input
 160                     type="number" min="-1" id="signupLimit" class="form-control"
 161                     formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
 162                   >
 163                   <span i18n>{form.value['signup']['limit'], plural, =1 {user} other {users}}</span>
 164                 </div>
 165
 166                 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
 167
 168                 <small i18n *ngIf="hasUnlimitedSignup()" class="text-muted">Signup won't be limited to a fixed number of users.</small>
 169               </div>
 170             </ng-container>
 171           </my-peertube-checkbox>
 172         </div>
 173       </ng-container>
 174
 175       <ng-container formGroupName="user">
 176         <div class="form-group">
 177           <label i18n for="userVideoQuota">Default video quota per user</label>
 178
 179           <my-select-custom-value
 180             id="userVideoQuota"
 181             [items]="getVideoQuotaOptions()"
 182             formControlName="videoQuota"
 183             i18n-inputSuffix inputSuffix="bytes" inputType="number"
 184             [clearable]="false"
 185           ></my-select-custom-value>
 186
 187           <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
 188         </div>
 189
 190         <div class="form-group">
 191           <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
 192
 193           <my-select-custom-value
 194             id="userVideoQuotaDaily"
 195             [items]="getVideoQuotaDailyOptions()"
 196             formControlName="videoQuotaDaily"
 197             i18n-inputSuffix inputSuffix="bytes" inputType="number"
 198             [clearable]="false"
 199           ></my-select-custom-value>
 200
 201           <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
 202         </div>
 203       </ng-container>
 204
 205     </div>
 206   </div>
 207
 208   <div class="form-row mt-4"> <!-- videos grid -->
 209     <div class="form-group col-12 col-lg-4 col-xl-3">
 210       <div i18n class="inner-form-title">VIDEOS</div>
 211     </div>
 212
 213     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 214
 215       <ng-container formGroupName="import">
 216
 217         <ng-container formGroupName="videos">
 218
 219           <div class="form-group mt-4">
 220             <label i18n for="importConcurrency">Import jobs concurrency</label>
 221             <span i18n class="text-muted ml-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
 222
 223             <div class="number-with-unit">
 224               <input type="number" name="importConcurrency" formControlName="concurrency" />
 225               <span i18n>jobs in parallel</span>
 226             </div>
 227
 228             <div *ngIf="formErrors.import.concurrency" class="form-error">{{ formErrors.import.concurrency }}</div>
 229           </div>
 230
 231           <div class="form-group" formGroupName="http">
 232             <my-peertube-checkbox
 233               inputName="importVideosHttpEnabled" formControlName="enabled"
 234               i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)"
 235             ></my-peertube-checkbox>
 236           </div>
 237
 238           <div class="form-group" formGroupName="torrent">
 239             <my-peertube-checkbox
 240               inputName="importVideosTorrentEnabled" formControlName="enabled"
 241               i18n-labelText labelText="Allow import with a torrent file or a magnet URI"
 242             ></my-peertube-checkbox>
 243           </div>
 244
 245         </ng-container>
 246       </ng-container>
 247
 248       <ng-container formGroupName="autoBlacklist">
 249         <ng-container formGroupName="videos">
 250           <ng-container formGroupName="ofUsers">
 251
 252             <div class="form-group">
 253               <my-peertube-checkbox
 254                 inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
 255                 i18n-labelText labelText="Block new videos automatically"
 256               >
 257               <ng-container ngProjectAs="description">
 258                 <span i18n>Unless a user is marked as trusted, their videos will stay private until a moderator reviews them.</span>
 259               </ng-container>
 260             </my-peertube-checkbox>
 261             </div>
 262
 263           </ng-container>
 264         </ng-container>
 265       </ng-container>
 266
 267     </div>
 268   </div>
 269
 270   <div class="form-row mt-4"> <!-- search grid -->
 271     <div class="form-group col-12 col-lg-4 col-xl-3">
 272       <div i18n class="inner-form-title">SEARCH</div>
 273     </div>
 274
 275     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 276
 277       <ng-container formGroupName="search">
 278         <ng-container formGroupName="remoteUri">
 279
 280           <div class="form-group">
 281             <my-peertube-checkbox
 282               inputName="searchRemoteUriUsers" formControlName="users"
 283               i18n-labelText labelText="Allow users to do remote URI/handle search"
 284             >
 285               <ng-container ngProjectAs="description">
 286                 <span i18n>Allow <strong>your users</strong> to look up remote videos/actors that may not be federated with your instance</span>
 287               </ng-container>
 288             </my-peertube-checkbox>
 289           </div>
 290
 291           <div class="form-group">
 292             <my-peertube-checkbox
 293               inputName="searchRemoteUriAnonymous" formControlName="anonymous"
 294               i18n-labelText labelText="Allow anonymous to do remote URI/handle search"
 295             >
 296               <ng-container ngProjectAs="description">
 297                 <span i18n>Allow <strong>anonymous users</strong> to look up remote videos/actors that may not be federated with your instance</span>
 298               </ng-container>
 299             </my-peertube-checkbox>
 300           </div>
 301
 302         </ng-container>
 303
 304         <ng-container formGroupName="searchIndex">
 305           <div class="form-group">
 306             <my-peertube-checkbox
 307               inputName="searchIndexEnabled" formControlName="enabled"
 308               i18n-labelText labelText="Enable global search"
 309             >
 310               <ng-container ngProjectAs="description">
 311                 <p i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</p>
 312
 313                 <span i18n>
 314                   You should only use moderated search indexes in production, or <a href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
 315                 </span>
 316               </ng-container>
 317
 318               <ng-container ngProjectAs="extra">
 319                 <div [ngClass]="getDisabledSearchIndexClass()">
 320                   <label i18n for="searchIndexUrl">Search index URL</label>
 321
 322                   <input
 323                     type="text"  id="searchIndexUrl" class="form-control"
 324                     formControlName="url" [ngClass]="{ 'input-error': formErrors['search.searchIndex.url'] }"
 325                   >
 326
 327                   <div *ngIf="formErrors.search.searchIndex.url" class="form-error">{{ formErrors.search.searchIndex.url }}</div>
 328                 </div>
 329
 330                 <div class="mt-3">
 331                   <my-peertube-checkbox [ngClass]="getDisabledSearchIndexClass()"
 332                     inputName="searchIndexDisableLocalSearch" formControlName="disableLocalSearch"
 333                     i18n-labelText labelText="Disable local search in search bar"
 334                   ></my-peertube-checkbox>
 335                 </div>
 336
 337                 <div class="mt-3">
 338                   <my-peertube-checkbox [ngClass]="getDisabledSearchIndexClass()"
 339                     inputName="searchIndexIsDefaultSearch" formControlName="isDefaultSearch"
 340                     i18n-labelText labelText="Search bar uses the global search index by default"
 341                   >
 342                     <ng-container ngProjectAs="description">
 343                       <span i18n>Otherwise the local search stays used by default</span>
 344                     </ng-container>
 345                   </my-peertube-checkbox>
 346                 </div>
 347
 348               </ng-container>
 349             </my-peertube-checkbox>
 350           </div>
 351
 352         </ng-container>
 353
 354       </ng-container>
 355
 356     </div>
 357   </div>
 358
 359   <div class="form-row mt-4"> <!-- federation grid -->
 360     <div class="form-group col-12 col-lg-4 col-xl-3">
 361       <div i18n class="inner-form-title">FEDERATION</div>
 362       <div i18n class="inner-form-description">
 363         Manage <a routerLink="/admin/follows">relations</a> with other instances.
 364       </div>
 365     </div>
 366
 367     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 368
 369       <ng-container formGroupName="followers">
 370         <ng-container formGroupName="instance">
 371
 372           <div class="form-group">
 373             <my-peertube-checkbox
 374               inputName="followersInstanceEnabled" formControlName="enabled"
 375               i18n-labelText labelText="Other instances can follow yours"
 376             ></my-peertube-checkbox>
 377           </div>
 378
 379           <div class="form-group">
 380             <my-peertube-checkbox
 381               inputName="followersInstanceManualApproval" formControlName="manualApproval"
 382               i18n-labelText labelText="Manually approve new instance followers"
 383             ></my-peertube-checkbox>
 384           </div>
 385         </ng-container>
 386       </ng-container>
 387
 388       <ng-container formGroupName="followings">
 389         <ng-container formGroupName="instance">
 390
 391           <ng-container formGroupName="autoFollowBack">
 392             <div class="form-group">
 393               <my-peertube-checkbox
 394                 inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
 395                 i18n-labelText labelText="Automatically follow back instances"
 396               >
 397                 <ng-container ngProjectAs="description">
 398                   <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
 399                 </ng-container>
 400               </my-peertube-checkbox>
 401             </div>
 402           </ng-container>
 403
 404           <ng-container formGroupName="autoFollowIndex">
 405             <div class="form-group">
 406               <my-peertube-checkbox
 407                 inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
 408                 i18n-labelText labelText="Automatically follow instances of a public index"
 409               >
 410                 <ng-container ngProjectAs="description">
 411                   <p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p>
 412
 413                   <span i18n>
 414                     See <a href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferer" target="_blank">the documentation</a> for more information about the expected URL
 415                   </span>
 416                 </ng-container>
 417
 418                 <ng-container ngProjectAs="extra">
 419                   <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
 420                     <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
 421                     <input
 422                       type="text" id="followingsInstanceAutoFollowIndexUrl" class="form-control"
 423                       formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
 424                     >
 425                     <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
 426                   </div>
 427                 </ng-container>
 428               </my-peertube-checkbox>
 429             </div>
 430
 431           </ng-container>
 432         </ng-container>
 433       </ng-container>
 434
 435     </div>
 436   </div>
 437
 438   <div class="form-row mt-4"> <!-- administrators grid -->
 439     <div class="form-group col-12 col-lg-4 col-xl-3">
 440       <div i18n class="inner-form-title">ADMINISTRATORS</div>
 441     </div>
 442
 443     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 444
 445       <div class="form-group" formGroupName="admin">
 446         <label i18n for="adminEmail">Admin email</label>
 447
 448         <input
 449           type="text" id="adminEmail" class="form-control"
 450           formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
 451         >
 452
 453         <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
 454       </div>
 455
 456       <div class="form-group" formGroupName="contactForm">
 457         <my-peertube-checkbox
 458           inputName="enableContactForm" formControlName="enabled"
 459           i18n-labelText labelText="Enable contact form"
 460         ></my-peertube-checkbox>
 461       </div>
 462
 463     </div>
 464   </div>
 465
 466   <div class="form-row mt-4"> <!-- Twitter grid -->
 467     <div class="form-group col-12 col-lg-4 col-xl-3">
 468       <div i18n class="inner-form-title">TWITTER</div>
 469       <div i18n class="inner-form-description">
 470         Provide the Twitter account representing your instance to improve link previews.
 471         If you don't have a Twitter account, just leave the default value.
 472       </div>
 473     </div>
 474
 475     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 476
 477       <ng-container formGroupName="services">
 478         <ng-container formGroupName="twitter">
 479
 480           <div class="form-group">
 481             <label i18n for="signupLimit">Your Twitter username</label>
 482
 483             <input
 484               type="text" id="servicesTwitterUsername" class="form-control"
 485               formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
 486             >
 487
 488             <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
 489           </div>
 490
 491           <div class="form-group">
 492             <my-peertube-checkbox inputName="servicesTwitterWhitelisted" formControlName="whitelisted">
 493               <ng-template ptTemplate="label">
 494                 <ng-container i18n>Instance allowed by Twitter</ng-container>
 495               </ng-template>
 496
 497               <ng-template ptTemplate="help">
 498                 <ng-container i18n>
 499                   If your instance is explicitly allowed by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
 500                   If the instance is not, we use an image link card that will redirect to your PeerTube instance.<br /><br />
 501                   Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on
 502                   <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
 503                   to see if you instance is allowed.
 504                 </ng-container>
 505               </ng-template>
 506             </my-peertube-checkbox>
 507           </div>
 508
 509         </ng-container>
 510       </ng-container>
 511
 512     </div>
 513   </div>
 514 </ng-container>