<div class="peertube-select-container">
<select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
+ <option i18n value="undefined" disabled>Policy for sensitive videos</option>
<option i18n value="do_not_list">Do not list</option>
<option i18n value="blur">Blur thumbnails</option>
<option i18n value="display">Display</option>
<label i18n for="userVideoQuota">Default video quota per user</label>
<div class="peertube-select-container">
<select id="userVideoQuota" formControlName="videoQuota" class="form-control">
- <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
+ <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
{{ videoQuotaOption.label }}
</option>
</select>
<label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
<div class="peertube-select-container">
<select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
- <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
+ <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
{{ videoQuotaDailyOption.label }}
</option>
</select>
<div class="form-group">
<my-peertube-checkbox
inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
- i18n-labelText labelText="Automatically follow instances of the public index"
+ i18n-labelText labelText="Automatically follow instances of a public index"
>
<ng-container ngProjectAs="description">
- <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
+ <p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p>
+
+ <span i18n>
+ You should only follow indexes you trust, or <a href="https://framagit.org/framasoft/peertube/instances-peertube#peertube-auto-follow">host your own</a>.
+ </span>
</ng-container>
<ng-container ngProjectAs="extra">
</my-peertube-checkbox>
</div>
- <div class="form-group">
-
- <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
- <label i18n for="transcodingThreads">Transcoding threads</label>
- <div class="peertube-select-container">
- <select id="transcodingThreads" formControlName="threads" class="form-control">
- <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
- {{ transcodingThreadOption.label }}
- </option>
- </select>
- </div>
- <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
+ <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+ <label i18n for="transcodingThreads">Transcoding threads</label>
+ <div class="peertube-select-container">
+ <select id="transcodingThreads" formControlName="threads" class="form-control">
+ <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
+ {{ transcodingThreadOption.label }}
+ </option>
+ </select>
</div>
-
+ <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
</div>
<div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
export class ConfigService {
private static BASE_APPLICATION_URL = environment.apiUrl + '/api/v1/config'
- videoQuotaOptions: { value: number, label: string }[] = []
- videoQuotaDailyOptions: { value: number, label: string }[] = []
+ videoQuotaOptions: { value: number, label: string, disabled?: boolean }[] = []
+ videoQuotaDailyOptions: { value: number, label: string, disabled?: boolean }[] = []
constructor (
private authHttp: HttpClient,
private i18n: I18n
) {
this.videoQuotaOptions = [
+ { value: undefined, label: 'Default quota', disabled: true },
{ value: -1, label: this.i18n('Unlimited') },
- { value: 0, label: '0' },
+ { value: undefined, label: '─────', disabled: true },
+ { value: 0, label: this.i18n('None - no upload possible') },
{ value: 100 * 1024 * 1024, label: this.i18n('100MB') },
{ value: 500 * 1024 * 1024, label: this.i18n('500MB') },
{ value: 1024 * 1024 * 1024, label: this.i18n('1GB') },
]
this.videoQuotaDailyOptions = [
+ { value: undefined, label: 'Default daily upload limit', disabled: true },
{ value: -1, label: this.i18n('Unlimited') },
- { value: 0, label: '0' },
+ { value: undefined, label: '─────', disabled: true },
+ { value: 0, label: this.i18n('None - no upload possible') },
{ value: 10 * 1024 * 1024, label: this.i18n('10MB') },
{ value: 50 * 1024 * 1024, label: this.i18n('50MB') },
{ value: 100 * 1024 * 1024, label: this.i18n('100MB') },
<label for="displayType" i18n>Display</label>
<div class="peertube-select-container">
- <select id="displayType" name="displayType" [(ngModel)]="displayType" (ngModelChange)="onDisplayTypeChanged()">
- <option value="my-videos">My videos duplicated by remote instances</option>
- <option value="remote-videos">Remote videos duplicated by my instance</option>
+ <select id="displayType" name="displayType" [(ngModel)]="displayType" (ngModelChange)="onDisplayTypeChanged()" class="form-control">
+ <option value="my-videos" i18n>My videos duplicated by remote instances</option>
+ <option value="remote-videos" i18n>Remote videos duplicated by my instance</option>
</select>
</div>
</div>
<th i18n pSortableColumn="name">Video name <p-sortIcon field="name"></p-sortIcon></th>
<th i18n>Video URL</th>
<th i18n *ngIf="isDisplayingRemoteVideos()">Total size</th>
- <th></th>
+ <th style="width: 80px;"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-expanded="expanded" let-redundancy>
<tr>
- <td class="expand-cell">
+ <td>
<span class="expander" i18n-ngbTooltip ngbTooltip="List redundancies" [pRowToggler]="redundancy">
<i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
</span>
<ng-template pTemplate="rowexpansion" let-redundancy>
<tr *ngIf="redundancy.redundancies.files.length !== 0">
- <td [attr.colspan]="getColspan()">
+ <td class="expand-cell" [attr.colspan]="getColspan()">
<div *ngFor="let file of redundancy.redundancies.files" class="expansion-block">
<my-video-redundancy-information [redundancyElement]="file"></my-video-redundancy-information>
</div>
</tr>
<tr *ngIf="redundancy.redundancies.streamingPlaylists.length !== 0">
- <td [attr.colspan]="getColspan()">
+ <td class="expand-cell" [attr.colspan]="getColspan()">
<div *ngFor="let playlist of redundancy.redundancies.streamingPlaylists">
<my-video-redundancy-information [redundancyElement]="playlist"></my-video-redundancy-information>
</div>
}
getColspan () {
- if (this.isDisplayingRemoteVideos()) return 3
+ if (this.isDisplayingRemoteVideos()) return 5
- return 2
+ return 4
}
isDisplayingRemoteVideos () {
<p-table
[value]="blockedAccounts" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
+ [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+ currentPageReportTemplate="Showing {first} to {last} of {totalRecords} muted accounts"
>
<ng-template pTemplate="header">
<tr>
<th i18n>Account</th>
<th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+ <th></th> <!-- column for action buttons -->
</tr>
</ng-template>
<p-table
[value]="blockedServers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
+ [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+ currentPageReportTemplate="Showing {first} to {last} of {totalRecords} muted instances"
>
<ng-template pTemplate="header">
<tr>
<th i18n>Instance</th>
<th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
- <th></th>
+ <th></th> <!-- column for action buttons -->
</tr>
</ng-template>
<div class="modal-body">
<form novalidate [formGroup]="form" (ngSubmit)="banUser()">
<div class="form-group">
- <textarea formControlName="moderationComment" [ngClass]="{ 'input-error': formErrors['moderationComment'] }">
+ <textarea
+ formControlName="moderationComment" ngbAutofocus i18-placeholder placeholder="Comment this report…"
+ [ngClass]="{ 'input-error': formErrors['moderationComment'] }" class="form-control">
</textarea>
<div *ngIf="formErrors.moderationComment" class="form-error">
{{ formErrors.moderationComment }}
ngOnInit () {
this.buildForm({
- moderationComment: this.videoAbuseValidatorsService.VIDEO_ABUSE_REASON
+ moderationComment: this.videoAbuseValidatorsService.VIDEO_ABUSE_MODERATION_COMMENT
})
}
<p-table
[value]="videoAbuses" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+ [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+ currentPageReportTemplate="Showing {first} to {last} of {totalRecords} reports"
>
<ng-template pTemplate="header">
- <tr>
- <th style="width: 40px"></th>
+ <tr> <!-- header -->
+ <th style="width: 40px;"></th>
<th i18n>Reporter</th>
- <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+ <th style="width: 200px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
<th i18n>Video</th>
<th i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
<th style="width: 120px;"></th>
<ng-template pTemplate="body" let-expanded="expanded" let-videoAbuse>
<tr>
-
- <td class="expand-cell">
- <span class="expander" i18n-ngbTooltip ngbTooltip="More information" [pRowToggler]="videoAbuse">
+ <td class="c-hand" [pRowToggler]="videoAbuse" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
+ <span class="expander">
<i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
</span>
</td>
<td>{{ videoAbuse.createdAt }}</td>
<td>
- <a [href]="getVideoUrl(videoAbuse)" i18n-title title="Go to the video" target="_blank" rel="noopener noreferrer">
+ <a [href]="getVideoUrl(videoAbuse)" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
{{ videoAbuse.video.name }}
</a>
</td>
<p-table
[value]="blacklist" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+ [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+ currentPageReportTemplate="Showing {first} to {last} of {totalRecords} blacklisted videos"
>
<ng-template pTemplate="header">
<tr>
<th style="width: 40px"></th>
- <th i18n pSortableColumn="name">Video name <p-sortIcon field="name"></p-sortIcon></th>
- <th i18n>Sensitive</th>
- <th i18n>Unfederated</th>
- <th i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
+ <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
+ <th style="width: 120px;" i18n>Sensitive</th>
+ <th style="width: 120px;" i18n>Unfederated</th>
+ <th style="width: 200px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
<th style="width: 120px;"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-videoBlacklist let-expanded="expanded">
<tr>
-
- <td class="expand-cell">
- <span *ngIf="videoBlacklist.reason" class="expander" i18n-ngbTooltip ngbTooltip="More information" [pRowToggler]="videoBlacklist">
+ <td *ngIf="!videoBlacklist.reason"></td>
+ <td *ngIf="videoBlacklist.reason" class="expand-cell c-hand" [pRowToggler]="videoBlacklist" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
+ <span class="expander">
<i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
</span>
</td>
<div class="select-filter-block">
<label for="jobType" i18n>Job type</label>
<div class="peertube-select-container">
- <select id="jobType" name="jobType" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()">
+ <select id="jobType" name="jobType" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()" class="form-control">
<option *ngFor="let jobType of jobTypes" [value]="jobType">{{ jobType }}</option>
</select>
</div>
<div class="select-filter-block">
<label for="jobState" i18n>Job state</label>
<div class="peertube-select-container">
- <select id="jobState" name="jobState" [(ngModel)]="jobState" (ngModelChange)="onJobStateOrTypeChanged()">
+ <select id="jobState" name="jobState" [(ngModel)]="jobState" (ngModelChange)="onJobStateOrTypeChanged()" class="form-control">
<option *ngFor="let state of jobStates" [value]="state">{{ state }}</option>
</select>
</div>
<div class="header">
<div class="peertube-select-container">
- <select [(ngModel)]="logType" (ngModelChange)="refresh()">
+ <select [(ngModel)]="logType" (ngModelChange)="refresh()" class="form-control">
<option *ngFor="let logTypeChoice of logTypeChoices" [value]="logTypeChoice.id">{{ logTypeChoice.label }}</option>
</select>
</div>
<div class="peertube-select-container">
- <select [(ngModel)]="startDate" (ngModelChange)="refresh()">
+ <select [(ngModel)]="startDate" (ngModelChange)="refresh()" class="form-control">
<option *ngFor="let timeChoice of timeChoices" [value]="timeChoice.id">{{ timeChoice.label }}</option>
</select>
</div>
<div class="peertube-select-container" *ngIf="!isAuditLog()">
- <select [(ngModel)]="level" (ngModelChange)="refresh()">
+ <select [(ngModel)]="level" (ngModelChange)="refresh()" class="form-control">
<option *ngFor="let levelChoice of levelChoices" [value]="levelChoice.id">{{ levelChoice.label }}</option>
</select>
</div>
<label i18n for="videoQuota">Video quota</label>
<div class="peertube-select-container">
<select id="videoQuota" formControlName="videoQuota" class="form-control">
- <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
+ <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
{{ videoQuotaOption.label }}
</option>
</select>
<label i18n for="videoQuotaDaily">Daily video quota</label>
<div class="peertube-select-container">
<select id="videoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
- <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
+ <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
{{ videoQuotaDailyOption.label }}
</option>
</select>
import { ScreenService } from '@app/shared/misc/screen.service'
export abstract class UserEdit extends FormReactive implements OnInit {
- videoQuotaOptions: { value: string, label: string }[] = []
- videoQuotaDailyOptions: { value: string, label: string }[] = []
+ videoQuotaOptions: { value: string, label: string, disabled?: boolean }[] = []
+ videoQuotaDailyOptions: { value: string, label: string, disabled?: boolean }[] = []
username: string
user: User
protected buildQuotaOptions () {
// These are used by a HTML select, so convert key into strings
this.videoQuotaOptions = this.configService
- .videoQuotaOptions.map(q => ({ value: q.value.toString(), label: q.label }))
+ .videoQuotaOptions.map(q => ({ value: q.value?.toString(), label: q.label, disabled: q.disabled }))
this.videoQuotaDailyOptions = this.configService
- .videoQuotaDailyOptions.map(q => ({ value: q.value.toString(), label: q.label }))
+ .videoQuotaDailyOptions.map(q => ({ value: q.value?.toString(), label: q.label, disabled: q.disabled }))
+
+ console.log(
+ this.videoQuotaOptions,
+ this.videoQuotaDailyOptions
+ )
}
}
[value]="users" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
[(selection)]="selectedUsers"
+ [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+ currentPageReportTemplate="Showing {first} to {last} of {totalRecords} users"
>
<ng-template pTemplate="caption">
<div class="caption">
@include peertube-input-text(250px);
}
}
+
+p-tableCheckbox {
+ position: relative;
+ top: -2.5px;
+}
<tr>
<th i18n>Account</th>
<th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+ <th></th> <!-- column for action buttons -->
</tr>
</ng-template>
<tr>
<th i18n>Instance</th>
<th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
- <th></th>
+ <th></th> <!-- column for action buttons -->
</tr>
</ng-template>
<div class="peertube-select-container">
<select id="nsfwPolicy" formControlName="nsfwPolicy" class="form-control">
+ <option i18n value="undefined" disabled>Policy for sensitive videos</option>
<option i18n value="do_not_list">Do not list</option>
<option i18n value="blur">Blur thumbnails</option>
<option i18n value="display">Display</option>
+@import 'variables';
+
p-inputmask {
::ng-deep input {
width: 80px;
font-size: 15px;
border: none;
+
+ &:focus-within,
+ &:focus {
+ box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+ }
}
}
import { Component, ElementRef, Input, ViewChild } from '@angular/core'
import { VideoDetails } from '../../../shared/video/video-details.model'
import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
-import { NgbModal, NgbNavChangeEvent, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { VideoCaption } from '@shared/models'
import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
}
/* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
-.dropdown:not(.btn-group) {
+.dropdown:not(.btn-group):not(.dropdown-root):not(.action-dropdown) {
z-index: z(dropdown) !important;
&.list-overflow-menu,
}
.dropdown-menu {
- z-index: z(dropdown) !important;
border-radius: 3px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
font-size: 15px;
.modal-dialog {
text-align: left;
- vertical-align: middle;
- min-width: 500px;
- width: 40vw;
- max-width: 900px;
+
+ &:not(.modal-lg):not(.modal-xl) {
+ min-width: 500px;
+ width: 40vw;
+ max-width: 900px;
+ }
}
}
height: max-content;
}
+// focus box-shadow for primeng
+.ui-inputtext:enabled:focus:not(.ui-state-error) {
+ box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
+}
+
// data table customizations
p-table {
.ui-table-caption {
justify-content: center;
align-items: center;
+ .ui-dropdown {
+ position: absolute;
+ left: 0;
+ }
+
+ .ui-paginator-current {
+ position: absolute;
+ right: 0;
+ }
+
.ui-paginator-first,
.ui-paginator-prev,
.ui-paginator-next,
font-size: 13px;
top: -1px;
+ &.focus-within,
+ &:focus {
+ box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+ }
+
&.ui-state-disabled:hover {
background-color: #fff !important;
}
.ui-paginator-pages {
height: auto !important;
+ .ui-paginator-page {
+ &.focus-within,
+ &:focus {
+ box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
+ }
+ }
+
a {
color: var(--mainForegroundColor) !important;
font-weight: $font-semibold !important;
color: #fff !important;
background-color: var(--mainColor) !important;
}
-
- &.focus-within,
- &:focus {
- box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
- }
}
}
}