Converted input placeholders to mat-label

Various style improvements

Updated translations

src/app/app.component.html

@@ -6,7 +6,7 @@
                     <button #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player'" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
                     <button (click)="goBack()" *ngIf="router.url.split(';')[0] === '/player'" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
                 </div>
-                <div class="flex-column" style="text-align: center; margin-top: 5px;">
+                <div class="flex-column" style="text-align: center; justify-content: center;">
                     <div style="font-size: 22px; text-shadow: #141414 0.25px 0.25px 1px;">
                         {{topBarTitle}}
                     </div>

src/app/components/login/login.component.html

@@ -3,29 +3,34 @@
         <mat-tab label="Login" i18n-label="Login">
             <div style="margin-top: 10px;">
                 <mat-form-field style="width: 100%">
-                    <input [(ngModel)]="loginUsernameInput" matInput placeholder="User name" i18n-placeholder="User name">
+                    <mat-label i18n="User name">User name</mat-label>
+                    <input [(ngModel)]="loginUsernameInput" matInput>
                 </mat-form-field>
             </div>
             <div>
                 <mat-form-field style="width: 100%">
-                    <input [(ngModel)]="loginPasswordInput" (keyup.enter)="login()" type="password" matInput placeholder="Password" i18n-placeholder="Password">
+                    <mat-label i18n="Password">Password</mat-label>
+                    <input [(ngModel)]="loginPasswordInput" (keyup.enter)="login()" type="password" matInput>
                 </mat-form-field>
             </div>
         </mat-tab>
         <mat-tab *ngIf="registrationEnabled" label="Register" i18n-label="Register">
             <div style="margin-top: 10px;">
                 <mat-form-field style="width: 100%">
-                    <input [(ngModel)]="registrationUsernameInput" matInput placeholder="User name" i18n-placeholder="User name">
+                    <mat-label i18n="User name">User name</mat-label>
+                    <input [(ngModel)]="registrationUsernameInput" matInput>
                 </mat-form-field>
             </div>
             <div>
                 <mat-form-field style="width: 100%">
-                    <input [(ngModel)]="registrationPasswordInput" (click)="register()" type="password" matInput placeholder="Password" i18n-placeholder="Password">
+                    <mat-label i18n="Password">Password</mat-label>
+                    <input [(ngModel)]="registrationPasswordInput" (click)="register()" type="password" matInput>
                 </mat-form-field>
             </div>
             <div>
                 <mat-form-field style="width: 100%">
-                    <input [(ngModel)]="registrationPasswordConfirmationInput" (click)="register()" type="password" matInput placeholder="Confirm Password" i18n-placeholder="Confirm Password">
+                    <mat-label i18n="Confirm Password">Confirm Password</mat-label>
+                    <input [(ngModel)]="registrationPasswordConfirmationInput" (click)="register()" type="password" matInput>
                 </mat-form-field>
             </div>
         </mat-tab>

src/app/components/manage-user/manage-user.component.html

@@ -5,7 +5,8 @@
 
     <div>
         <mat-form-field style="margin-right: 15px;">
-            <input matInput [(ngModel)]="newPasswordInput" type="password" placeholder="New password" i18n-placeholder="New password placeholder">
+            <mat-label i18n="New password">New password</mat-label>
+            <input matInput [(ngModel)]="newPasswordInput" type="password">
         </mat-form-field>
         <button mat-raised-button color="accent" (click)="setNewPassword()" [disabled]="newPasswordInput.length === 0"><ng-container i18n="Set new password">Set new password</ng-container></button>
     </div>

src/app/components/modify-users/modify-users.component.html

@@ -4,7 +4,8 @@
         <div class="table table-responsive pb-4 pt-4">
         <div class="example-header">
             <mat-form-field appearance="outline">
-                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" i18n-placeholder="search field description">
+                <mat-label i18n="Search">Search</mat-label>
+                <input matInput (keyup)="applyFilter($event.target.value)">
             </mat-form-field>
         </div>
         

src/app/components/recent-videos/recent-videos.component.html

@@ -22,7 +22,8 @@
         </div>
         <div class="col-12 order-3 col-sm-4 order-sm-3 d-flex justify-content-center">
             <mat-form-field appearance="outline" [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
-                <input (focus)="searchIsFocused = true" (blur)="searchIsFocused = false" class="search-input" type="text" placeholder="Search" i18n-placeholder="Files search placeholder" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
+                <mat-label i18n="Search">Search</mat-label>
+                <input (focus)="searchIsFocused = true" (blur)="searchIsFocused = false" class="search-input" type="text" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
                 <mat-icon matSuffix>search</mat-icon>
             </mat-form-field>
         </div>

src/app/create-playlist/create-playlist.component.html

@@ -7,7 +7,8 @@
         <div *ngIf="create_mode || playlist">
             <div>
                 <mat-form-field color="accent">
-                    <input [(ngModel)]="name" matInput placeholder="Name" i18n-placeholder="Playlist name placeholder" type="text" required aria-required [ngModelOptions]="{standalone: true}">
+                    <mat-label i18n="Playlist name">Name</mat-label>
+                    <input [(ngModel)]="name" matInput type="text" required aria-required [ngModelOptions]="{standalone: true}">
                 </mat-form-field>
             </div>
             <app-recent-videos [selectMode]="true" [defaultSelected]="preselected_files" [customHeader]="'Select files'" (fileSelectionEmitter)="fileSelectionChanged($event)" [selectedIndex]="create_mode ? 1 : 0"></app-recent-videos>

src/app/dialogs/add-user-dialog/add-user-dialog.component.html

@@ -3,12 +3,14 @@
 <mat-dialog-content>
     <div>
         <mat-form-field>
-            <input matInput placeholder="User name" i18n-placeholder="User name placeholder" [(ngModel)]="usernameInput">
+            <mat-label i18n="User name">User name</mat-label>
+            <input matInput [(ngModel)]="usernameInput">
         </mat-form-field>
     </div>
     <div>
         <mat-form-field>
-            <input matInput placeholder="Password" i18n-placeholder="Password placeholder" [(ngModel)]="passwordInput" type="password">
+            <mat-label i18n="Password">Password</mat-label>
+            <input matInput [(ngModel)]="passwordInput" type="password">
         </mat-form-field>
     </div>
 </mat-dialog-content>

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.html

@@ -25,7 +25,7 @@
                         <mat-autocomplete #autochip="matAutocomplete">
                             <mat-option *ngFor="let arg of filteredChipOptions | async" [value]="arg.key">
                                 <span [innerHTML]="arg.key | highlight : chipCtrl.value"></span>
-                                <button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
+                                <button class="info-autocomplete-icon" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
                             </mat-option>
                         </mat-autocomplete>
                     </mat-card-content>
@@ -38,12 +38,13 @@
                         <form >
                             <div>
                                 <mat-form-field style="width: 75%" color="accent">
-                                    <input matInput placeholder="Arg" [matAutocomplete]="auto" [formControl]="stateCtrl">
+                                    <mat-label i18n="Arg">Arg</mat-label>
+                                    <input matInput [matAutocomplete]="auto" [formControl]="stateCtrl">
                                 </mat-form-field>
                                 <mat-autocomplete #auto="matAutocomplete">
                                     <mat-option *ngFor="let arg of filteredOptions | async" [value]="arg.key">
                                         <span [innerHTML]="arg.key | highlight : stateCtrl.value"></span>
-                                        <button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
+                                        <button class="info-autocomplete-icon" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
                                     </mat-option>
                                 </mat-autocomplete>
 
@@ -68,7 +69,8 @@
                             </div>
                             <div *ngIf="secondArgEnabled">
                                 <mat-form-field style="width: 75%" color="accent">
-                                    <input [ngModelOptions]="{standalone: true}" matInput [disabled]="!secondArgEnabled" placeholder="Arg value" i18n-placeholder="Arg value placeholder" [(ngModel)]="secondArg">
+                                    <mat-label i18n="Arg value">Arg value</mat-label>
+                                    <input [ngModelOptions]="{standalone: true}" matInput [disabled]="!secondArgEnabled" [(ngModel)]="secondArg">
                                 </mat-form-field>
                             </div>
                         </form>

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.scss

@@ -1,3 +1,17 @@
 .info-menu-icon {
     float: right;
+}
+
+.info-autocomplete-icon {
+    float: right;
+    position: relative;
+    top: -12px;
+}
+
+::ng-deep.mat-menu-panel {
+    max-width: none !important;
+}
+
+::ng-deep.mdc-list-item__primary-text {
+    width: 100%;
 }

src/app/dialogs/edit-category-dialog/edit-category-dialog.component.html

@@ -2,7 +2,8 @@
 
 <mat-dialog-content style="max-height: 50vh">
     <mat-form-field style="width: 250px; margin-bottom: 5px;">
-        <input matInput placeholder="Name" i18n-placeholder="Name" [(ngModel)]="category['name']" required>
+        <mat-label i18n="Category name">Name</mat-label>
+        <input matInput [(ngModel)]="category['name']" required>
     </mat-form-field>
 
     <mat-divider></mat-divider>
@@ -41,7 +42,8 @@
     <mat-divider></mat-divider>
 
     <mat-form-field style="width: 250px; margin-top: 10px;">
-        <input matInput [(ngModel)]="category['custom_output']" placeholder="Custom file output" i18n-placeholder="Category custom file output placeholder">
+        <mat-label i18n="Custom file output">Custom file output</mat-label>
+        <input matInput [(ngModel)]="category['custom_output']">
         <mat-hint>
             <a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
             <ng-container i18n="Custom output template documentation link">Documentation</ng-container></a>.

src/app/dialogs/set-default-admin-dialog/set-default-admin-dialog.component.html

@@ -7,7 +7,8 @@
     <div style="position: relative">
         <div>
             <mat-form-field color="accent">
-                <input type="password" (keyup.enter)="create()" matInput [(ngModel)]="input" placeholder="Password" i18n-placeholder="Password">
+                <mat-label i18n="Password">Password</mat-label>
+                <input type="password" (keyup.enter)="create()" matInput [(ngModel)]="input">
             </mat-form-field>
         </div>
     </div>

src/app/dialogs/share-media-dialog/share-media-dialog.component.html

@@ -11,7 +11,8 @@
         <div>
             <mat-checkbox style="margin-right: 15px;" (change)="useTimestampChanged()" [(ngModel)]="timestamp_enabled"><ng-container i18n="Use timestamp">Use timestamp</ng-container></mat-checkbox>
             <mat-form-field>
-                <input matInput type="number" [(ngModel)]="current_timestamp" [disabled]="!timestamp_enabled" (change)="timestampInputChanged($event)" placeholder="Seconds" i18n-placeholder="Seconds">
+                <mat-label i18n="Seconds">Seconds</mat-label>
+                <input matInput type="number" [(ngModel)]="current_timestamp" [disabled]="!timestamp_enabled" (change)="timestampInputChanged($event)">
             </mat-form-field>
         </div>
         <div>

src/app/dialogs/video-info-dialog/video-info-dialog.component.html

@@ -5,16 +5,19 @@
         <button style="position: absolute; right: 16px; top: 8px;" mat-icon-button (click)="editing = !editing"><mat-icon>edit</mat-icon></button>
     </div>
     <mat-form-field class="info-field">
-        <input [(ngModel)]="new_file.title" matInput placeholder="Name" i18n-placeholder="Name" [disabled]="!editing">
+        <mat-label i18n="Name">Name</mat-label>
+        <input [(ngModel)]="new_file.title" matInput [disabled]="!editing">
     </mat-form-field>
     <mat-form-field class="info-field">
-        <input [(ngModel)]="new_file.url" matInput placeholder="URL" i18n-placeholder="URL" [disabled]="!editing">
+        <mat-label i18n="URL">URL</mat-label>
+        <input [(ngModel)]="new_file.url" matInput [disabled]="!editing">
         <button mat-icon-button matSuffix (click)="window.open(new_file.url, '_blank')">
             <mat-icon>link</mat-icon>
         </button>
     </mat-form-field>
     <mat-form-field class="info-field">
-        <input [(ngModel)]="new_file.uploader" matInput placeholder="Uploader" i18n-placeholder="Uploader" [disabled]="!editing">
+        <mat-label i18n="Uploader">Uploader</mat-label>
+        <input [(ngModel)]="new_file.uploader" matInput [disabled]="!editing">
     </mat-form-field>
     <mat-form-field class="info-field">
         <mat-label i18n="Upload date">Upload date</mat-label>
@@ -23,10 +26,12 @@
         <mat-datepicker #picker></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="info-field">
-        <input [(ngModel)]="new_file.thumbnailPath" matInput placeholder="Thumbnail path" i18n-placeholder="Thumbnail path" [disabled]="!editing">
+        <mat-label i18n="Thumbnail path">Thumbnail path</mat-label>
+        <input [(ngModel)]="new_file.thumbnailPath" matInput [disabled]="!editing">
     </mat-form-field>
     <mat-form-field class="info-field">
-        <input [(ngModel)]="new_file.thumbnailURL" matInput placeholder="Thumbnail URL" i18n-placeholder="Thumbnail URL" [disabled]="!editing || new_file.thumbnailPath">
+        <mat-label i18n="Thumbnail URL">Thumbnail URL</mat-label>
+        <input [(ngModel)]="new_file.thumbnailURL" matInput [disabled]="!editing || new_file.thumbnailPath">
     </mat-form-field>
     <mat-form-field *ngIf="initialized && postsService.categories" class="info-field">
         <mat-select placeholder="Category" i18n-placeholder="Category" [value]="category" (selectionChange)="categoryChanged($event)" [compareWith]="categoryComparisonFunction" [disabled]="!editing">
@@ -39,10 +44,12 @@
         </mat-select>
     </mat-form-field>
     <mat-form-field class="info-field">
-        <input type="number" [(ngModel)]="new_file.view_count" matInput placeholder="View count" i18n-placeholder="View count" [disabled]="!editing">
+        <mat-label i18n="View count">View count</mat-label>
+        <input type="number" [(ngModel)]="new_file.view_count" matInput [disabled]="!editing">
     </mat-form-field>
     <mat-form-field class="info-field">
-        <input type="number" [(ngModel)]="new_file.local_view_count" matInput placeholder="Local view count" i18n-placeholder="Local view count" [disabled]="!editing">
+        <mat-label i18n="Local view count">Local view count</mat-label>
+        <input type="number" [(ngModel)]="new_file.local_view_count" matInput [disabled]="!editing">
     </mat-form-field>
 
     <mat-divider style="margin-bottom: 16px;"></mat-divider>

src/app/main/main.component.css

@@ -132,7 +132,8 @@ mat-form-field.mat-mdc-form-field {
     margin-left: 5px;
     margin-top: -6px;
     margin-bottom: -5px;
-    top: -5px;
+    position: relative;
+    top: 6px;
 }
 
 .border-radius-both {

src/app/main/main.component.html

@@ -117,7 +117,8 @@
                             </ng-container>
                         </mat-checkbox>
                         <mat-form-field color="accent" style="margin-bottom: 42px;" class="advanced-input">
-                            <input [(ngModel)]="customArgs" [ngModelOptions]="{standalone: true}" [disabled]="!customArgsEnabled" matInput (ngModelChange)="argsChanged()" placeholder="Custom args" i18n-placeholder="Custom args placeholder">
+                            <mat-label i18n="Custom args">Custom args</mat-label>
+                            <input [(ngModel)]="customArgs" [ngModelOptions]="{standalone: true}" [disabled]="!customArgsEnabled" matInput (ngModelChange)="argsChanged()">
                             <mat-hint>
                                 <ng-container i18n="Custom Args input hint">
                                     No need to include URL, just everything after. Args are delimited using two commas like so: ,,
@@ -132,7 +133,8 @@
                             </ng-container>
                         </mat-checkbox>
                         <mat-form-field style="margin-bottom: 42px;" color="accent" class="advanced-input">
-                            <input [(ngModel)]="customOutput" [ngModelOptions]="{standalone: true}" [disabled]="!customOutputEnabled" matInput (ngModelChange)="argsChanged()" placeholder="Custom output" i18n-placeholder="Custom output placeholder">
+                            <mat-label i18n="Custom output">Custom output</mat-label>
+                            <input [(ngModel)]="customOutput" [ngModelOptions]="{standalone: true}" [disabled]="!customOutputEnabled" matInput (ngModelChange)="argsChanged()">
                             <mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
                                 <ng-container i18n="Youtube-dl output template documentation link">Documentation</ng-container></a>.
                                 <ng-container i18n="Custom Output input hint">Path is relative to the config download path. Don't include extension.</ng-container>
@@ -146,12 +148,14 @@
                             </ng-container>
                         </mat-checkbox>
                         <mat-form-field *ngIf="youtubeAuthEnabled" color="accent" class="advanced-input">
-                            <input [(ngModel)]="youtubeUsername" [ngModelOptions]="{standalone: true}" matInput (ngModelChange)="argsChanged()" placeholder="Username" i18n-placeholder="YT Username placeholder">
+                            <mat-label i18n="Username">Username</mat-label>
+                            <input [(ngModel)]="youtubeUsername" [ngModelOptions]="{standalone: true}" matInput (ngModelChange)="argsChanged()">
                         </mat-form-field>
                     </div>
                     <div *ngIf="!youtubeAuthDisabledOverride" class="col-12 col-sm-6 mt-3">
-                        <mat-form-field *ngIf="youtubeAuthEnabled" style="margin-top: 31px;" color="accent" class="advanced-input">
+                        <mat-form-field *ngIf="youtubeAuthEnabled" style="margin-top: 40px;" color="accent" class="advanced-input">
-                            <input [(ngModel)]="youtubePassword" type="password" [ngModelOptions]="{standalone: true}" matInput (ngModelChange)="argsChanged()" placeholder="Password" i18n-placeholder="YT Password placeholder">
+                            <mat-label i18n="Password">Password</mat-label>
+                            <input [(ngModel)]="youtubePassword" type="password" [ngModelOptions]="{standalone: true}" matInput (ngModelChange)="argsChanged()">
                         </mat-form-field>
                     </div>
                     <div class="col-12 col-sm-6 mt-3">
@@ -161,12 +165,14 @@
                             </ng-container>
                         </mat-checkbox>
                         <mat-form-field *ngIf="cropFile" color="accent" class="advanced-input">
-                            <input [(ngModel)]="cropFileStart" type="number" [ngModelOptions]="{standalone: true}" matInput placeholder="Crop from (seconds)" i18n-placeholder="Crop from placeholder">
+                            <mat-label i18n="Crop from (seconds)">Crop from (seconds)</mat-label>
+                            <input [(ngModel)]="cropFileStart" type="number" [ngModelOptions]="{standalone: true}" matInput>
                         </mat-form-field>
                     </div>
                     <div class="col-12 col-sm-6 mt-3">
-                        <mat-form-field *ngIf="cropFile" style="margin-top: 31px;" color="accent" class="advanced-input">
+                        <mat-form-field *ngIf="cropFile" style="margin-top: 40px;" color="accent" class="advanced-input">
-                            <input [(ngModel)]="cropFileEnd" type="number" [ngModelOptions]="{standalone: true}" matInput placeholder="Crop to (seconds)" i18n-placeholder="Crop to placeholder">
+                            <mat-label i18n="Crop to (seconds)">Crop to (seconds)</mat-label>
+                            <input [(ngModel)]="cropFileEnd" type="number" [ngModelOptions]="{standalone: true}" matInput>
                         </mat-form-field>
                     </div>
                 </div>

src/app/settings/settings.component.html

@@ -7,13 +7,15 @@
                 <div class="row">
                     <div class="col-12 mt-3">
                         <mat-form-field class="text-field" color="accent">
-                            <input [(ngModel)]="new_config['Host']['url']" matInput placeholder="URL" i18n-placeholder="URL input placeholder" required>
+                            <mat-label i18n="URL">URL</mat-label>
+                            <input [(ngModel)]="new_config['Host']['url']" matInput required>
                             <mat-hint><ng-container i18n="URL setting input hint">URL this app will be accessed from, without the port.</ng-container></mat-hint>
                         </mat-form-field>
                     </div>
                     <div class="col-12 mb-4 mt-3">
                         <mat-form-field class="text-field" color="accent">
-                            <input [(ngModel)]="new_config['Host']['port']" matInput placeholder="Port" i18n-placeholder="Port input placeholder" required>
+                            <mat-label i18n="Port">Port</mat-label>
+                            <input [(ngModel)]="new_config['Host']['port']" matInput required>
                             <mat-hint><ng-container i18n="Port setting input hint">The desired port. Default is 17442.</ng-container></mat-hint>
                         </mat-form-field>
                     </div>
@@ -27,7 +29,8 @@
                     </div>
                     <div class="col-12 mt-3 mb-4">
                         <mat-form-field class="text-field">
-                            <input [disabled]="!new_config['Advanced']['multi_user_mode']" [(ngModel)]="new_config['Users']['base_path']" matInput placeholder="Users base path" i18n-placeholder="Users base path placeholder" required>
+                            <mat-label i18n="Users base path">Users base path</mat-label>
+                            <input [disabled]="!new_config['Advanced']['multi_user_mode']" [(ngModel)]="new_config['Users']['base_path']" matInput required>
                             <mat-hint><ng-container i18n="Users base path hint">Base path for users and their downloaded videos.</ng-container></mat-hint>
                         </mat-form-field>
                     </div>
@@ -41,13 +44,15 @@
                     </div>
                     <div class="col-12 mt-2 mb-3">
                         <mat-form-field class="text-field" color="accent">
-                            <input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_base_path']" matInput placeholder="Subscriptions base path" i18n-placeholder="Subscriptions base path input setting placeholder">
+                            <mat-label i18n="Subscriptions base path">Subscriptions base path</mat-label>
+                            <input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_base_path']" matInput>
                             <mat-hint><ng-container i18n="Subscriptions base path setting input hint">Base path for videos from your subscribed channels and playlists. It is relative to YTDL-Material's root folder.</ng-container></mat-hint>
                         </mat-form-field>
                     </div>
                     <div class="col-12 mt-4">
                         <mat-form-field class="text-field" color="accent">
-                            <input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_check_interval']" matInput placeholder="Check interval" i18n-placeholder="Check interval input setting placeholder">
+                            <mat-label i18n="Check interval">Check interval</mat-label>
+                            <input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_check_interval']" matInput>
                             <mat-hint><ng-container i18n="Check interval setting input hint">Unit is seconds, only include numbers.</ng-container></mat-hint>
                         </mat-form-field>
                     </div>
@@ -100,21 +105,24 @@
                 <div class="row">
                     <div class="col-12 mt-3">
                         <mat-form-field class="text-field" color="accent">
-                            <input matInput [(ngModel)]="new_config['Downloader']['path-audio']" placeholder="Audio folder path" i18n-placeholder="Audio folder path input placeholder" required>
+                            <mat-label i18n="Audio folder path">Audio folder path</mat-label>
+                            <input matInput [(ngModel)]="new_config['Downloader']['path-audio']" required>
                             <mat-hint><ng-container i18n="Aduio path setting input hint">Path for audio only downloads. It is relative to YTDL-Material's root folder.</ng-container></mat-hint>
                         </mat-form-field>
                     </div>
 
                     <div class="col-12 mt-3">
                         <mat-form-field class="text-field" color="accent">
-                            <input matInput [(ngModel)]="new_config['Downloader']['path-video']" placeholder="Video folder path" i18n-placeholder="Video folder path input placeholder" required>
+                            <mat-label i18n="Video folder path">Video folder path</mat-label>
+                            <input matInput [(ngModel)]="new_config['Downloader']['path-video']" required>
                             <mat-hint><ng-container i18n="Video path setting input hint">Path for video downloads. It is relative to YTDL-Material's root folder.</ng-container></mat-hint>
                         </mat-form-field>
                     </div>
 
                     <div class="col-12 mt-3 mb-1">
                         <mat-form-field class="text-field" color="accent">
-                            <input matInput [(ngModel)]="new_config['Downloader']['default_file_output']" matInput placeholder="Default file output" i18n-placeholder="Default file output placeholder">
+                            <mat-label i18n="Default file output">Default file output</mat-label>
+                            <input matInput [(ngModel)]="new_config['Downloader']['default_file_output']" matInput>
                             <mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
                                 <ng-container i18n="Youtube-dl output template documentation link">Documentation</ng-container></a>.
                                 <ng-container i18n="Custom Output input hint">Path is relative to the above download paths. Don't include extension.</ng-container>
@@ -124,7 +132,8 @@
 
                     <div class="col-12 mt-4 mb-5">
                         <mat-form-field class="text-field" style="margin-right: 12px;" color="accent">
-                            <textarea matInput [(ngModel)]="new_config['Downloader']['custom_args']" placeholder="Global custom args" i18n-placeholder="Custom args input placeholder"></textarea>
+                            <mat-label i18n="Global custom args">Global custom args</mat-label>
+                            <textarea matInput [(ngModel)]="new_config['Downloader']['custom_args']"></textarea>
                             <mat-hint><ng-container i18n="Custom args setting input hint">Global custom args for downloads on the home page. (Set args for subscriptions for each subscriptions separately!) Args are delimited using two commas like so: ,,</ng-container></mat-hint>
                             <button class="args-edit-button" (click)="openArgsModifierDialog()" mat-icon-button><mat-icon>edit</mat-icon></button>
                         </mat-form-field>
@@ -174,13 +183,15 @@
                 <div class="row">
                     <div class="col-12 mt-3 mb-4">
                         <mat-form-field class="text-field" color="accent">
-                            <input type="number" [(ngModel)]="new_config['Downloader']['max_concurrent_downloads']" matInput placeholder="Max concurrent downloads" i18n-placeholder="Max concurrent downloads">
+                            <mat-label i18n="Max concurrent downloads">Max concurrent downloads</mat-label>
+                            <input type="number" [(ngModel)]="new_config['Downloader']['max_concurrent_downloads']" matInput>
                             <mat-hint><ng-container i18n="Max concurrent downloads input hint">Limits the amount of downloads that can be simultaneously downloaded. Use -1 for no limit.</ng-container></mat-hint>
                         </mat-form-field>
                     </div>
                     <div class="col-12 mt-2 mb-4">
                         <mat-form-field class="text-field" color="accent">
-                            <input [(ngModel)]="new_config['Downloader']['download_rate_limit']" matInput placeholder="Download rate limit" i18n-placeholder="Download rate limit input placeholder">
+                            <mat-label i18n="Download rate limit">Download rate limit</mat-label>
+                            <input [(ngModel)]="new_config['Downloader']['download_rate_limit']" matInput>
                             <mat-hint><ng-container i18n="Download rate limit input hint">Rate limits your downloads to the specified amount. Ex: 200K</ng-container></mat-hint>
                         </mat-form-field>
                     </div>
@@ -203,7 +214,8 @@
                 <div class="row">
                     <div class="col-12 mt-3">
                         <mat-form-field class="text-field" color="accent">
-                            <input [(ngModel)]="new_config['Extra']['title_top']" matInput placeholder="Top title" i18n-placeholder="Top title input placeholder" required>
+                            <mat-label i18n="Top title">Top title</mat-label>
+                            <input [(ngModel)]="new_config['Extra']['title_top']" matInput required>
                             <mat-hint></mat-hint>
                         </mat-form-field>
                     </div>
@@ -233,7 +245,8 @@
                     <div class="col-12 mb-3">
                         <div class="enable-api-key-div">
                             <mat-form-field class="text-field" color="accent">
-                                <input [disabled]="!new_config['API']['use_API_key']" [(ngModel)]="new_config['API']['API_key']" matInput placeholder="Public API Key" i18n-placeholder="Public API Key setting placeholder" required>
+                                <mat-label i18n="Public API Key">Public API Key</mat-label>
+                                <input [disabled]="!new_config['API']['use_API_key']" [(ngModel)]="new_config['API']['API_key']" matInput required>
                                 <mat-hint><a target="_blank" href="https://youtubedl-material.stoplight.io/docs/youtubedl-material/Public%20API%20v1.yaml"><ng-container i18n="View API docs setting hint">View documentation</ng-container></a></mat-hint>
                             </mat-form-field>
                         </div>
@@ -251,7 +264,8 @@
                     </div>
                     <div class="col-12 mb-2">
                         <mat-form-field class="text-field" color="accent">
-                            <input [disabled]="!new_config['API']['use_youtube_API']" [(ngModel)]="new_config['API']['youtube_API_key']" matInput placeholder="Youtube API Key" i18n-placeholder="Youtube API Key setting placeholder" required>
+                            <mat-label i18n="Youtube API Key">Youtube API Key</mat-label>
+                            <input [disabled]="!new_config['API']['use_youtube_API']" [(ngModel)]="new_config['API']['youtube_API_key']" matInput required>
                             <mat-hint><a target="_blank" href="https://developers.google.com/youtube/v3/getting-started"><ng-container i18n="Youtube API Key setting hint">Generating a key is easy!</ng-container></a></mat-hint>
                         </mat-form-field>
                     </div>
@@ -263,13 +277,15 @@
                     </div>
                     <div class="col-12">
                         <mat-form-field class="text-field" color="accent">
-                            <input [disabled]="!new_config['API']['use_twitch_API']" [(ngModel)]="new_config['API']['twitch_client_ID']" matInput placeholder="Twitch Client ID" i18n-placeholder="Twitch Client ID setting placeholder" required>
+                            <mat-label i18n="Twitch Client ID">Twitch Client ID</mat-label>
+                            <input [disabled]="!new_config['API']['use_twitch_API']" [(ngModel)]="new_config['API']['twitch_client_ID']" matInput required>
                             <mat-hint><a target="_blank" href="https://dev.twitch.tv/docs/api/"><ng-container i18n="Twitch Client ID setting hint">Generating an ID/secret is easy!</ng-container></a></mat-hint>
                         </mat-form-field>
                     </div>
                     <div class="col-12 mt-2">
                         <mat-form-field class="text-field" color="accent">
-                            <input [disabled]="!new_config['API']['use_twitch_API']" [(ngModel)]="new_config['API']['twitch_client_secret']" matInput placeholder="Twitch Client Secret" i18n-placeholder="Twitch Client Secret setting placeholder" required>
+                            <mat-label i18n="Twitch Client Secret">Twitch Client Secret</mat-label>
+                            <input [disabled]="!new_config['API']['use_twitch_API']" [(ngModel)]="new_config['API']['twitch_client_secret']" matInput required>
                         </mat-form-field>
                     </div>
                     <div class="col-12 mt-2">
@@ -322,7 +338,8 @@
                             </mat-list>
 
                             <mat-form-field style="width: 100%; margin-top: 15px; margin-bottom: 10px" color="accent">
-                                <input [(ngModel)]="new_config['Database']['mongodb_connection_string']" matInput placeholder="MongoDB Connection String" i18n-placeholder="MongoDB Connection String" required>
+                                <mat-label i18n="MongoDB Connection String">MongoDB Connection String</mat-label>
+                                <input [(ngModel)]="new_config['Database']['mongodb_connection_string']" matInput required>
                                 <mat-hint><ng-container i18n="MongoDB Connection String setting hint AKA preamble">Example:</ng-container>&nbsp;mongodb://127.0.0.1:27017/?compressors=zlib<br>Docker: mongodb://&lt;container name&gt;:27017/?compressors=zlib</mat-hint>
                             </mat-form-field>
 
@@ -440,7 +457,8 @@
                 </div>
                 <mat-divider></mat-divider>
                 <mat-form-field style="margin-top: 15px;">
-                    <mat-select [(ngModel)]="new_config['Users']['auth_method']" placeholder="Auth method" i18n-placeholder="Auth method select">
+                    <mat-input i18n="Auth method">Auth method</mat-input>
+                    <mat-select [(ngModel)]="new_config['Users']['auth_method']">
                         <mat-option value="internal">
                             <ng-container i18n="Internal auth method">Internal</ng-container>
                         </mat-option>
@@ -452,27 +470,32 @@
                 <div *ngIf="new_config['Users']['auth_method'] === 'ldap'">
                     <div>
                         <mat-form-field>
-                            <input matInput i18n-placeholder="LDAP URL" placeholder="LDAP URL" [(ngModel)]="new_config['Users']['ldap_config']['url']">
+                            <mat-input i18n="LDAP URL">LDAP URL</mat-input>
+                            <input matInput [(ngModel)]="new_config['Users']['ldap_config']['url']">
                         </mat-form-field>
                     </div>
                     <div>
                         <mat-form-field>
-                            <input matInput i18n-placeholder="Bind DN" placeholder="Bind DN" [(ngModel)]="new_config['Users']['ldap_config']['bindDN']">
+                            <mat-input i18n="Bind DN">Bind DN</mat-input>
+                            <input matInput [(ngModel)]="new_config['Users']['ldap_config']['bindDN']">
                         </mat-form-field>
                     </div>
                     <div>
                         <mat-form-field>
-                            <input matInput i18n-placeholder="Bind Credentials" placeholder="Bind Credentials" [(ngModel)]="new_config['Users']['ldap_config']['bindCredentials']">
+                            <mat-input i18n="Bind Credentials">Bind Credentials</mat-input>
+                            <input matInput [(ngModel)]="new_config['Users']['ldap_config']['bindCredentials']">
                         </mat-form-field>
                     </div>
                     <div>
                         <mat-form-field>
-                            <input matInput i18n-placeholder="Search Base" placeholder="Search Base" [(ngModel)]="new_config['Users']['ldap_config']['searchBase']">
+                            <mat-input i18n="Search Base">Search Base</mat-input>
+                            <input matInput [(ngModel)]="new_config['Users']['ldap_config']['searchBase']">
                         </mat-form-field>
                     </div>
                     <div>
                         <mat-form-field>
-                            <input matInput i18n-placeholder="Search Filter" placeholder="Search Filter" [(ngModel)]="new_config['Users']['ldap_config']['searchFilter']">
+                            <mat-input i18n="Search Filter">Search Filter</mat-input>
+                            <input matInput [(ngModel)]="new_config['Users']['ldap_config']['searchFilter']">
                         </mat-form-field>
                     </div>
                 </div>