]>
Commit | Line | Data |
---|---|---|
5f46d28c C |
1 | <ng-container [formGroup]="form"> |
2 | ||
3 | <div class="form-row mt-5"> | |
4 | <div class="form-group col-12 col-lg-4 col-xl-3"> | |
5 | <div i18n class="inner-form-title">LIVE</div> | |
6 | <div i18n class="inner-form-description"> | |
7 | Enable users of your instance to stream live. | |
8 | </div> | |
9 | </div> | |
10 | ||
11 | <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> | |
12 | ||
13 | <ng-container formGroupName="live"> | |
14 | ||
15 | <div class="form-group"> | |
16 | <my-peertube-checkbox inputName="liveEnabled" formControlName="enabled"> | |
17 | <ng-template ptTemplate="label"> | |
18 | <ng-container i18n>Allow live streaming</ng-container> | |
19 | </ng-template> | |
20 | ||
21 | <ng-container ngProjectAs="description"> | |
22 | <div i18n>⚠️ Enabling live streaming requires trust in your users and extra moderation work</div> | |
23 | <div i18n>If enabled, your server needs to accept incoming TCP traffic on port {{ getLiveRTMPPort() }}</div> | |
24 | </ng-container> | |
25 | ||
26 | <ng-container ngProjectAs="extra"> | |
27 | ||
28 | <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }"> | |
29 | <my-peertube-checkbox | |
30 | inputName="liveAllowReplay" formControlName="allowReplay" | |
31 | i18n-labelText labelText="Allow your users to automatically publish a replay of their live" | |
32 | > | |
33 | <ng-container ngProjectAs="description" i18n> | |
34 | If the user quota is reached, PeerTube will automatically terminate the live streaming | |
35 | </ng-container> | |
36 | </my-peertube-checkbox> | |
37 | </div> | |
38 | ||
39 | <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }"> | |
40 | <label i18n for="liveMaxInstanceLives">Max simultaneous lives created on your instance <span class="text-muted">(-1 for "unlimited")</span></label> | |
41 | <div class="number-with-unit"> | |
42 | <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" /> | |
43 | <span i18n>{form.value['live']['maxInstanceLives'], plural, =1 {live} other {lives}}</span> | |
44 | </div> | |
45 | </div> | |
46 | ||
47 | <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }"> | |
48 | <label i18n for="liveMaxUserLives">Max simultaneous lives created per user <span class="text-muted">(-1 for "unlimited")</span></label> | |
49 | <div class="number-with-unit"> | |
50 | <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" /> | |
51 | <span i18n>{form.value['live']['maxUserLives'], plural, =1 {live} other {lives}}</span> | |
52 | </div> | |
53 | </div> | |
54 | ||
55 | <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }"> | |
56 | <label i18n for="liveMaxDuration">Max live duration</label> | |
57 | ||
58 | <my-select-options | |
59 | labelForId="liveMaxDuration" [items]="liveMaxDurationOptions" formControlName="maxDuration" | |
60 | bindLabel="label" bindValue="value" [clearable]="false" [searchable]="true" | |
61 | ></my-select-options> | |
62 | </div> | |
63 | ||
64 | </ng-container> | |
65 | </my-peertube-checkbox> | |
66 | </div> | |
67 | </ng-container> | |
68 | </div> | |
69 | </div> | |
70 | ||
71 | <div class="form-row"> <!-- transcoding live streams grid --> | |
72 | <div class="form-group col-12 col-lg-4 col-xl-3"> | |
73 | <div i18n class="inner-form-title">TRANSCODING</div> | |
74 | <div i18n class="inner-form-description"> | |
75 | Same as VOD transcoding, transcoding live streams so that they are in a streamable form that any device can play. Requires a beefy CPU, and then some. | |
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="live"> | |
82 | <ng-container formGroupName="transcoding"> | |
83 | ||
84 | <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }"> | |
85 | <my-peertube-checkbox | |
86 | inputName="liveTranscodingEnabled" formControlName="enabled" | |
87 | > | |
88 | <ng-template ptTemplate="label"> | |
89 | <ng-container i18n>Transcoding enabled for live streams</ng-container> | |
90 | </ng-template> | |
91 | </my-peertube-checkbox> | |
92 | </div> | |
93 | ||
94 | <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }"> | |
95 | <label i18n for="liveTranscodingThreads">Live resolutions to generate</label> | |
96 | ||
97 | <div class="ml-2 mt-2 d-flex flex-column"> | |
98 | <ng-container formGroupName="resolutions"> | |
99 | <div class="form-group" *ngFor="let resolution of liveResolutions"> | |
100 | <my-peertube-checkbox | |
101 | [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id" | |
102 | labelText="{{resolution.label}}" | |
103 | > | |
104 | <ng-template *ngIf="resolution.description" ptTemplate="help"> | |
105 | <div [innerHTML]="resolution.description"></div> | |
106 | </ng-template> | |
107 | </my-peertube-checkbox> | |
108 | </div> | |
109 | </ng-container> | |
110 | </div> | |
111 | </div> | |
112 | ||
113 | <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }"> | |
114 | <label i18n for="liveTranscodingThreads">Live transcoding threads</label> | |
115 | <span class="text-muted ml-1"> | |
116 | <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding</ng-container> | |
117 | <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding</ng-container> | |
118 | </span> | |
119 | ||
120 | <my-select-custom-value | |
121 | id="liveTranscodingThreads" | |
122 | [items]="transcodingThreadOptions" | |
123 | formControlName="threads" | |
124 | [clearable]="false" | |
125 | ></my-select-custom-value> | |
126 | <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div> | |
127 | </div> | |
128 | ||
129 | <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }"> | |
130 | <label i18n for="liveTranscodingProfile">Live transcoding profile</label> | |
131 | <span class="text-muted ml-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span> | |
132 | ||
133 | <my-select-options | |
134 | id="liveTranscodingProfile" | |
135 | formControlName="profile" | |
136 | [items]="getAvailableTranscodingProfile()" | |
137 | [clearable]="false" | |
138 | > | |
139 | <ng-template ng-option-tmp let-item="item" let-index="index"> | |
140 | {{ item }} | |
141 | <ng-container *ngIf="item === 'default'"> | |
142 | <br> | |
143 | <span class="text-muted" i18n>x264, targeting maximum device compatibility</span> | |
144 | </ng-container> | |
145 | </ng-template> | |
146 | </my-select-options> | |
147 | <div *ngIf="formErrors.live.transcoding.profile" class="form-error">{{ formErrors.live.transcoding.profile }}</div> | |
148 | </div> | |
149 | ||
150 | </ng-container> | |
151 | </ng-container> | |
152 | ||
153 | </div> | |
154 | </div> | |
155 | </ng-container> |