diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css
deleted file mode 100644
index cec8d780..00000000
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css
+++ /dev/null
@@ -1,1114 +0,0 @@
-.card-header {
-	background-color: var(--ov-primary-color);
-	border-radius: var(--ov-panel-radius) var(--ov-panel-radius) 0px 0px;
-	text-align: center;
-	height: 50px;
-  }
-  .headerLogo{
-	display: flex;
-	flex-direction: row;
-	height: 100%;
-	padding: 10px;
-  }
-
-  .headerTitle {
-	font-size: large;
-	margin: auto;
-  }
-
-  .spinner-container {
-	height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-	margin: auto;
-  }
-
-  ::ng-deep .mat-progress-spinner circle, .mat-spinner circle{
-	 stroke: var(--ov-secondary-color);
-  }
-
-
-  .videoContainer {
-	width: 100%;
-	height: calc(100% - 50px);
-	text-align: center;
-	margin: auto;
-  }
-
-  .videoContainer > div {
-	display: inline;
-  }
-
-  .ovVideoSmall {
-	position: absolute;
-	width: 30%;
-	left: 15px;
-	bottom: 0px;
-  }
-
-  #audio-wave-container {
-	position: absolute;
-    right: 20px;
-	top: 30px;
-  }
-
-  .cameraMessageContainer {
-	height: 100%;
-	width: 100%;
-	text-align: center;
-	border: 2px solid;
-	font-size: large;
-	display: table;
-  }
-  .cameraMessageContainer > span{
-	display: table-cell;
-	vertical-align: middle;
-  }
-  .deviceButton {
-	box-shadow: none;
-	border-radius: var(--ov-buttons-radius);
-	background-color: var(--ov-secondary-color) !important;
-	color: var(--ov-text-color) !important;
-  }
-
-  .rightSection {
-	padding-left: 0 !important;
-	text-align: center;
-  }
-
-  .closeButton {
-	position: absolute;
-	top: 5px;
-	right: 7px;
-	box-shadow: none;
-	background-color: transparent;
-	color: var(--ov-text-color);
-  }
-
-  #header_img {
-	max-width: 150px;
-  }
-
-  #sessionInfo {
-	margin-top: 0;
-  }
-
-  #joinButton {
-	background-color: var(--ov-accent-color);
-	margin: 15px;
-	width: 80%;
-	color: var(--ov-primary-color);
-	font-weight: bold;
-	height: fit-content;
-	margin: auto;
-  }
-
-  #photoButton {
-	margin: 10px;
-	text-align: center;
-  }
-
-
-  #devicesSection {
-	margin: 15px 0px;
-  }
-
-  #avatarSection,
-  #devicesSection {
-	height: fit-content !important;
-	min-height: auto !important;
-  }
-
-  #imgText {
-	display: table;
-  }
-
-  #avatarImg,
-  #imgText {
-	text-align: center;
-	position: absolute;
-	margin: auto;
-	top: 25%;
-	left: 0;
-	right: 0;
-	bottom: 25%;
-  }
-
-  #avatarImg {
-	height: 83%;
-	width: 83%;
-  }
-
-  #optionsContent {
-	position: initial;
-  }
-
-  mat-form-field,
-  #nicknameForm {
-	width: 100%;
-  }
-
-
-.warn-btn {
-	color: var(--ov-text-color);
-	background-color: var(--ov-warn-color) !important;
-}
-
-.active-btn {
-	color: var(--ov-text-color);
-	background-color: var(--ov-tertiary-color) !important;
-}
-
-  mat-card {
-	max-width: 85% !important;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	max-height: 90%;
-	margin: auto;
-	padding: 20px;
-	overflow: auto;
-	border: 2px solid #ffffff;
-	border-right: 4px solid #ffffff;
-  }
-
-  .leftSection {
-	  display: flex;
-	height: 100%;
-  }
-
-  @media only screen and (max-width: 959px) {
-	mat-card {
-	  max-width: 80% !important;
-	  max-height: 80% !important;
-	}
-  }
-
-  ::ng-deep .mat-option-text {
-	color: black !important;
-  }
-
-  ::ng-deep .mat-slider-thumb {
-	visibility: hidden;
-  }
-
-  ::ng-deep .mat-slider-vertical .mat-slider-track-fill,
-  ::ng-deep .mat-slider-vertical .mat-slider-track-background,
-  ::ng-deep .mat-slider-vertical .mat-slider-track-wrapper {
-	width: 10px !important;
-  }
-
-  ::-webkit-scrollbar {
-	width: 8px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-	background: #b8afaf;
-	border-radius: 4px;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-	background: #888888;
-  }
-
-  ::-webkit-scrollbar-track {
-	background: #e1e1e1;
-	border-radius: 4px;
-  }
-
-
-  /*!
-   * Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/)
-   */
-  /*!
-   * Bootstrap v3.4.1 (https://getbootstrap.com/)
-   * Copyright 2011-2019 Twitter, Inc.
-   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
-   */
-  /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-
-
-
-  * {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-  }
-  *:before,
-  *:after {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-  }
-
-
-  .container {
-	padding-right: 15px;
-	padding-left: 15px;
-	margin-right: auto;
-	margin-left: auto;
-  }
-  @media (min-width: 768px) {
-	.container {
-	  width: 750px;
-	}
-  }
-  @media (min-width: 992px) {
-	.container {
-	  width: 970px;
-	}
-  }
-  @media (min-width: 1200px) {
-	.container {
-	  width: 1170px;
-	}
-  }
-  .container-fluid {
-	padding-right: 15px;
-	padding-left: 15px;
-	margin-right: auto;
-	margin-left: auto;
-  }
-  .row {
-	  height: 100%;
-	/* margin-right: -15px;
-	margin-left: -15px; */
-  }
-  .row-no-gutters {
-	margin-right: 0;
-	margin-left: 0;
-  }
-  .row-no-gutters [class*="col-"] {
-	padding-right: 0;
-	padding-left: 0;
-  }
-  .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
-	position: relative;
-	min-height: 1px;
-	padding-right: 15px;
-	padding-left: 15px;
-  }
-  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
-	float: left;
-  }
-  .col-xs-12 {
-	width: 100%;
-  }
-  .col-xs-11 {
-	width: 91.66666667%;
-  }
-  .col-xs-10 {
-	width: 83.33333333%;
-  }
-  .col-xs-9 {
-	width: 75%;
-  }
-  .col-xs-8 {
-	width: 66.66666667%;
-  }
-  .col-xs-7 {
-	width: 58.33333333%;
-  }
-  .col-xs-6 {
-	width: 50%;
-  }
-  .col-xs-5 {
-	width: 41.66666667%;
-  }
-  .col-xs-4 {
-	width: 33.33333333%;
-  }
-  .col-xs-3 {
-	width: 25%;
-  }
-  .col-xs-2 {
-	width: 16.66666667%;
-  }
-  .col-xs-1 {
-	width: 8.33333333%;
-  }
-  .col-xs-pull-12 {
-	right: 100%;
-  }
-  .col-xs-pull-11 {
-	right: 91.66666667%;
-  }
-  .col-xs-pull-10 {
-	right: 83.33333333%;
-  }
-  .col-xs-pull-9 {
-	right: 75%;
-  }
-  .col-xs-pull-8 {
-	right: 66.66666667%;
-  }
-  .col-xs-pull-7 {
-	right: 58.33333333%;
-  }
-  .col-xs-pull-6 {
-	right: 50%;
-  }
-  .col-xs-pull-5 {
-	right: 41.66666667%;
-  }
-  .col-xs-pull-4 {
-	right: 33.33333333%;
-  }
-  .col-xs-pull-3 {
-	right: 25%;
-  }
-  .col-xs-pull-2 {
-	right: 16.66666667%;
-  }
-  .col-xs-pull-1 {
-	right: 8.33333333%;
-  }
-  .col-xs-pull-0 {
-	right: auto;
-  }
-  .col-xs-push-12 {
-	left: 100%;
-  }
-  .col-xs-push-11 {
-	left: 91.66666667%;
-  }
-  .col-xs-push-10 {
-	left: 83.33333333%;
-  }
-  .col-xs-push-9 {
-	left: 75%;
-  }
-  .col-xs-push-8 {
-	left: 66.66666667%;
-  }
-  .col-xs-push-7 {
-	left: 58.33333333%;
-  }
-  .col-xs-push-6 {
-	left: 50%;
-  }
-  .col-xs-push-5 {
-	left: 41.66666667%;
-  }
-  .col-xs-push-4 {
-	left: 33.33333333%;
-  }
-  .col-xs-push-3 {
-	left: 25%;
-  }
-  .col-xs-push-2 {
-	left: 16.66666667%;
-  }
-  .col-xs-push-1 {
-	left: 8.33333333%;
-  }
-  .col-xs-push-0 {
-	left: auto;
-  }
-  .col-xs-offset-12 {
-	margin-left: 100%;
-  }
-  .col-xs-offset-11 {
-	margin-left: 91.66666667%;
-  }
-  .col-xs-offset-10 {
-	margin-left: 83.33333333%;
-  }
-  .col-xs-offset-9 {
-	margin-left: 75%;
-  }
-  .col-xs-offset-8 {
-	margin-left: 66.66666667%;
-  }
-  .col-xs-offset-7 {
-	margin-left: 58.33333333%;
-  }
-  .col-xs-offset-6 {
-	margin-left: 50%;
-  }
-  .col-xs-offset-5 {
-	margin-left: 41.66666667%;
-  }
-  .col-xs-offset-4 {
-	margin-left: 33.33333333%;
-  }
-  .col-xs-offset-3 {
-	margin-left: 25%;
-  }
-  .col-xs-offset-2 {
-	margin-left: 16.66666667%;
-  }
-  .col-xs-offset-1 {
-	margin-left: 8.33333333%;
-  }
-  .col-xs-offset-0 {
-	margin-left: 0%;
-  }
-  @media (min-width: 768px) {
-	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
-	  float: left;
-	}
-	.col-sm-12 {
-	  width: 100%;
-	}
-	.col-sm-11 {
-	  width: 91.66666667%;
-	}
-	.col-sm-10 {
-	  width: 83.33333333%;
-	}
-	.col-sm-9 {
-	  width: 75%;
-	}
-	.col-sm-8 {
-	  width: 66.66666667%;
-	}
-	.col-sm-7 {
-	  width: 58.33333333%;
-	}
-	.col-sm-6 {
-	  width: 50%;
-	}
-	.col-sm-5 {
-	  width: 41.66666667%;
-	}
-	.col-sm-4 {
-	  width: 33.33333333%;
-	}
-	.col-sm-3 {
-	  width: 25%;
-	}
-	.col-sm-2 {
-	  width: 16.66666667%;
-	}
-	.col-sm-1 {
-	  width: 8.33333333%;
-	}
-	.col-sm-pull-12 {
-	  right: 100%;
-	}
-	.col-sm-pull-11 {
-	  right: 91.66666667%;
-	}
-	.col-sm-pull-10 {
-	  right: 83.33333333%;
-	}
-	.col-sm-pull-9 {
-	  right: 75%;
-	}
-	.col-sm-pull-8 {
-	  right: 66.66666667%;
-	}
-	.col-sm-pull-7 {
-	  right: 58.33333333%;
-	}
-	.col-sm-pull-6 {
-	  right: 50%;
-	}
-	.col-sm-pull-5 {
-	  right: 41.66666667%;
-	}
-	.col-sm-pull-4 {
-	  right: 33.33333333%;
-	}
-	.col-sm-pull-3 {
-	  right: 25%;
-	}
-	.col-sm-pull-2 {
-	  right: 16.66666667%;
-	}
-	.col-sm-pull-1 {
-	  right: 8.33333333%;
-	}
-	.col-sm-pull-0 {
-	  right: auto;
-	}
-	.col-sm-push-12 {
-	  left: 100%;
-	}
-	.col-sm-push-11 {
-	  left: 91.66666667%;
-	}
-	.col-sm-push-10 {
-	  left: 83.33333333%;
-	}
-	.col-sm-push-9 {
-	  left: 75%;
-	}
-	.col-sm-push-8 {
-	  left: 66.66666667%;
-	}
-	.col-sm-push-7 {
-	  left: 58.33333333%;
-	}
-	.col-sm-push-6 {
-	  left: 50%;
-	}
-	.col-sm-push-5 {
-	  left: 41.66666667%;
-	}
-	.col-sm-push-4 {
-	  left: 33.33333333%;
-	}
-	.col-sm-push-3 {
-	  left: 25%;
-	}
-	.col-sm-push-2 {
-	  left: 16.66666667%;
-	}
-	.col-sm-push-1 {
-	  left: 8.33333333%;
-	}
-	.col-sm-push-0 {
-	  left: auto;
-	}
-	.col-sm-offset-12 {
-	  margin-left: 100%;
-	}
-	.col-sm-offset-11 {
-	  margin-left: 91.66666667%;
-	}
-	.col-sm-offset-10 {
-	  margin-left: 83.33333333%;
-	}
-	.col-sm-offset-9 {
-	  margin-left: 75%;
-	}
-	.col-sm-offset-8 {
-	  margin-left: 66.66666667%;
-	}
-	.col-sm-offset-7 {
-	  margin-left: 58.33333333%;
-	}
-	.col-sm-offset-6 {
-	  margin-left: 50%;
-	}
-	.col-sm-offset-5 {
-	  margin-left: 41.66666667%;
-	}
-	.col-sm-offset-4 {
-	  margin-left: 33.33333333%;
-	}
-	.col-sm-offset-3 {
-	  margin-left: 25%;
-	}
-	.col-sm-offset-2 {
-	  margin-left: 16.66666667%;
-	}
-	.col-sm-offset-1 {
-	  margin-left: 8.33333333%;
-	}
-	.col-sm-offset-0 {
-	  margin-left: 0%;
-	}
-  }
-  @media (min-width: 992px) {
-	.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
-	  float: left;
-	}
-	.col-md-12 {
-	  width: 100%;
-	}
-	.col-md-11 {
-	  width: 91.66666667%;
-	}
-	.col-md-10 {
-	  width: 83.33333333%;
-	}
-	.col-md-9 {
-	  width: 75%;
-	}
-	.col-md-8 {
-	  width: 66.66666667%;
-	}
-	.col-md-7 {
-	  width: 58.33333333%;
-	}
-	.col-md-6 {
-	  width: 50%;
-	}
-	.col-md-5 {
-	  width: 41.66666667%;
-	}
-	.col-md-4 {
-	  width: 33.33333333%;
-	}
-	.col-md-3 {
-	  width: 25%;
-	}
-	.col-md-2 {
-	  width: 16.66666667%;
-	}
-	.col-md-1 {
-	  width: 8.33333333%;
-	}
-	.col-md-pull-12 {
-	  right: 100%;
-	}
-	.col-md-pull-11 {
-	  right: 91.66666667%;
-	}
-	.col-md-pull-10 {
-	  right: 83.33333333%;
-	}
-	.col-md-pull-9 {
-	  right: 75%;
-	}
-	.col-md-pull-8 {
-	  right: 66.66666667%;
-	}
-	.col-md-pull-7 {
-	  right: 58.33333333%;
-	}
-	.col-md-pull-6 {
-	  right: 50%;
-	}
-	.col-md-pull-5 {
-	  right: 41.66666667%;
-	}
-	.col-md-pull-4 {
-	  right: 33.33333333%;
-	}
-	.col-md-pull-3 {
-	  right: 25%;
-	}
-	.col-md-pull-2 {
-	  right: 16.66666667%;
-	}
-	.col-md-pull-1 {
-	  right: 8.33333333%;
-	}
-	.col-md-pull-0 {
-	  right: auto;
-	}
-	.col-md-push-12 {
-	  left: 100%;
-	}
-	.col-md-push-11 {
-	  left: 91.66666667%;
-	}
-	.col-md-push-10 {
-	  left: 83.33333333%;
-	}
-	.col-md-push-9 {
-	  left: 75%;
-	}
-	.col-md-push-8 {
-	  left: 66.66666667%;
-	}
-	.col-md-push-7 {
-	  left: 58.33333333%;
-	}
-	.col-md-push-6 {
-	  left: 50%;
-	}
-	.col-md-push-5 {
-	  left: 41.66666667%;
-	}
-	.col-md-push-4 {
-	  left: 33.33333333%;
-	}
-	.col-md-push-3 {
-	  left: 25%;
-	}
-	.col-md-push-2 {
-	  left: 16.66666667%;
-	}
-	.col-md-push-1 {
-	  left: 8.33333333%;
-	}
-	.col-md-push-0 {
-	  left: auto;
-	}
-	.col-md-offset-12 {
-	  margin-left: 100%;
-	}
-	.col-md-offset-11 {
-	  margin-left: 91.66666667%;
-	}
-	.col-md-offset-10 {
-	  margin-left: 83.33333333%;
-	}
-	.col-md-offset-9 {
-	  margin-left: 75%;
-	}
-	.col-md-offset-8 {
-	  margin-left: 66.66666667%;
-	}
-	.col-md-offset-7 {
-	  margin-left: 58.33333333%;
-	}
-	.col-md-offset-6 {
-	  margin-left: 50%;
-	}
-	.col-md-offset-5 {
-	  margin-left: 41.66666667%;
-	}
-	.col-md-offset-4 {
-	  margin-left: 33.33333333%;
-	}
-	.col-md-offset-3 {
-	  margin-left: 25%;
-	}
-	.col-md-offset-2 {
-	  margin-left: 16.66666667%;
-	}
-	.col-md-offset-1 {
-	  margin-left: 8.33333333%;
-	}
-	.col-md-offset-0 {
-	  margin-left: 0%;
-	}
-  }
-  @media (min-width: 1200px) {
-	.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
-	  float: left;
-	}
-	.col-lg-12 {
-	  width: 100%;
-	}
-	.col-lg-11 {
-	  width: 91.66666667%;
-	}
-	.col-lg-10 {
-	  width: 83.33333333%;
-	}
-	.col-lg-9 {
-	  width: 75%;
-	}
-	.col-lg-8 {
-	  width: 66.66666667%;
-	}
-	.col-lg-7 {
-	  width: 58.33333333%;
-	}
-	.col-lg-6 {
-	  width: 50%;
-	}
-	.col-lg-5 {
-	  width: 41.66666667%;
-	}
-	.col-lg-4 {
-	  width: 33.33333333%;
-	}
-	.col-lg-3 {
-	  width: 25%;
-	}
-	.col-lg-2 {
-	  width: 16.66666667%;
-	}
-	.col-lg-1 {
-	  width: 8.33333333%;
-	}
-	.col-lg-pull-12 {
-	  right: 100%;
-	}
-	.col-lg-pull-11 {
-	  right: 91.66666667%;
-	}
-	.col-lg-pull-10 {
-	  right: 83.33333333%;
-	}
-	.col-lg-pull-9 {
-	  right: 75%;
-	}
-	.col-lg-pull-8 {
-	  right: 66.66666667%;
-	}
-	.col-lg-pull-7 {
-	  right: 58.33333333%;
-	}
-	.col-lg-pull-6 {
-	  right: 50%;
-	}
-	.col-lg-pull-5 {
-	  right: 41.66666667%;
-	}
-	.col-lg-pull-4 {
-	  right: 33.33333333%;
-	}
-	.col-lg-pull-3 {
-	  right: 25%;
-	}
-	.col-lg-pull-2 {
-	  right: 16.66666667%;
-	}
-	.col-lg-pull-1 {
-	  right: 8.33333333%;
-	}
-	.col-lg-pull-0 {
-	  right: auto;
-	}
-	.col-lg-push-12 {
-	  left: 100%;
-	}
-	.col-lg-push-11 {
-	  left: 91.66666667%;
-	}
-	.col-lg-push-10 {
-	  left: 83.33333333%;
-	}
-	.col-lg-push-9 {
-	  left: 75%;
-	}
-	.col-lg-push-8 {
-	  left: 66.66666667%;
-	}
-	.col-lg-push-7 {
-	  left: 58.33333333%;
-	}
-	.col-lg-push-6 {
-	  left: 50%;
-	}
-	.col-lg-push-5 {
-	  left: 41.66666667%;
-	}
-	.col-lg-push-4 {
-	  left: 33.33333333%;
-	}
-	.col-lg-push-3 {
-	  left: 25%;
-	}
-	.col-lg-push-2 {
-	  left: 16.66666667%;
-	}
-	.col-lg-push-1 {
-	  left: 8.33333333%;
-	}
-	.col-lg-push-0 {
-	  left: auto;
-	}
-	.col-lg-offset-12 {
-	  margin-left: 100%;
-	}
-	.col-lg-offset-11 {
-	  margin-left: 91.66666667%;
-	}
-	.col-lg-offset-10 {
-	  margin-left: 83.33333333%;
-	}
-	.col-lg-offset-9 {
-	  margin-left: 75%;
-	}
-	.col-lg-offset-8 {
-	  margin-left: 66.66666667%;
-	}
-	.col-lg-offset-7 {
-	  margin-left: 58.33333333%;
-	}
-	.col-lg-offset-6 {
-	  margin-left: 50%;
-	}
-	.col-lg-offset-5 {
-	  margin-left: 41.66666667%;
-	}
-	.col-lg-offset-4 {
-	  margin-left: 33.33333333%;
-	}
-	.col-lg-offset-3 {
-	  margin-left: 25%;
-	}
-	.col-lg-offset-2 {
-	  margin-left: 16.66666667%;
-	}
-	.col-lg-offset-1 {
-	  margin-left: 8.33333333%;
-	}
-	.col-lg-offset-0 {
-	  margin-left: 0%;
-	}
-  }
-  .modal-open {
-	overflow: hidden;
-  }
-  .modal {
-	height: 100%;
-	max-width: 100%;
-	background-color: var(--ov-light-color);
-
-  }
-  .modal.fade .modal-dialog {
-	-webkit-transform: translate(0, -25%);
-	-ms-transform: translate(0, -25%);
-	-o-transform: translate(0, -25%);
-	transform: translate(0, -25%);
-	-webkit-transition: -webkit-transform 0.3s ease-out;
-	-o-transition: -o-transform 0.3s ease-out;
-	transition: transform 0.3s ease-out;
-  }
-  .modal.in .modal-dialog {
-	-webkit-transform: translate(0, 0);
-	-ms-transform: translate(0, 0);
-	-o-transform: translate(0, 0);
-	transform: translate(0, 0);
-  }
-  .modal-open .modal {
-	overflow-x: hidden;
-	overflow-y: auto;
-  }
-  .modal-dialog {
-	/* position: relative; */
-	max-width: 900px;
-	margin: 30px;
-	padding: 100px 0;
-	position: absolute;
-	top: 40%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-  }
-  .modal-content {
-	position: relative;
-	background-color: #ffffff;
-	-webkit-background-clip: padding-box;
-	background-clip: padding-box;
-	border: 1px solid #999999;
-	border: 1px solid rgba(0, 0, 0, 0.2);
-	border-radius: var(--ov-panel-radius);
-	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-	outline: 0;
-  }
-  .modal-backdrop {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	z-index: 1040;
-	background-color: #000000;
-  }
-  .modal-backdrop.fade {
-	filter: alpha(opacity=0);
-	opacity: 0;
-  }
-  .modal-backdrop.in {
-	filter: alpha(opacity=50);
-	opacity: 0.5;
-  }
-  .modal-header {
-	/* padding: 15px; */
-	border-bottom: 1px solid #e5e5e5;
-  }
-  .modal-header .close {
-	margin-top: -2px;
-  }
-  .modal-title {
-	margin: 0;
-	line-height: 1.42857143;
-  }
-  .modal-body {
-	height: 310px;
-	position: relative;
-	margin: 15px;
-  }
-  .modal-footer {
-	text-align: center;
-	border-top: 1px solid #e5e5e5;
-	display: flex;
-	height: 60px;
-	width: 100%;
-  }
-  .modal-footer .btn + .btn {
-	margin-bottom: 0;
-	margin-left: 5px;
-  }
-  .modal-footer .btn-group .btn + .btn {
-	margin-left: -1px;
-  }
-  .modal-footer .btn-block + .btn-block {
-	margin-left: 0;
-  }
-  .modal-scrollbar-measure {
-	position: absolute;
-	top: -9999px;
-	width: 50px;
-	height: 50px;
-	overflow: scroll;
-  }
-
-  @media (max-width: 600px) {
-	.modal {
-	  /* position: fixed; */
-	}
-	.headerTitle{
-	  display: none;
-	}
-	.headerLogo {
-	  right: 0;
-	}
-  }
-
-  @media (max-width: 767px) {
-	.row{
-	  height: 100%;
-	}
-	.leftSection {
-	  height: 60%;
-	}
-	.rightSection {
-	  padding-right: 0 !important;
-	}
-	.headerTitle{
-	  font-size: medium;
-	}
-	.modal-content {
-	  max-height: 100%;
-	  height: 100%;
-	}
-	.modal-dialog{
-	  height: calc(100% - 10px);
-	  margin: 5px;
-	  padding: 0;
-	  position: relative;
-	  top: 0;
-	  left: 0;
-	  transform: none;
-	}
-	.modal-body {
-	  padding: 10px 20px;
-	  overflow: auto;
-	  height: calc(97% - 120px);
-
-	  overflow:-moz-scrollbars-vertical;
-	  overflow-x:hidden;
-	  overflow-y:scroll;
-	}
-	.modal {
-	  max-height: 100% ;
-	  padding: 35px;
-	}
-	.videoContainer{
-	  width: 100%;
-	}
-  }
-  @media (min-width: 768px) {
-
-	.row {
-	  /* display: flex !important; */
-	}
-	.modal-dialog {
-	  width: 90%;
-	  margin: 55px auto;
-	}
-	.modal-content {
-	  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-	  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-	}
-	.modal-sm {
-	  width: 300px;
-	}
-  }
-  @media (min-width: 992px) {
-	.modal-lg {
-	  width: 75%;
-	}
-  }
-
-  @media (min-width: 1440px) {
-	.modal-xl {
-	  width: 75%;
-	}
-  }
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html
deleted file mode 100644
index 4d3b7251..00000000
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html
+++ /dev/null
@@ -1,162 +0,0 @@
-<!-- Modal -->
-<div class="modal">
-	<div class="modal-dialog modal-xl">
-		<div class="modal-content cardContainer">
-			<!-- Modal Header -->
-			<div class="modal-header card-header">
-				<div class="headerLogo">
-					<img id="header_img" alt="OpenVidu Logo" src="assets/images/openvidu_logo.png" />
-				</div>
-				<h3 class="headerTitle" *ngIf="sessionId">{{ sessionId }}</h3>
-
-				<button mat-mini-fab (click)="close()" class="closeButton" id="closeButton">
-					<mat-icon matTooltip="Close">close</mat-icon>
-				</button>
-			</div>
-
-			<!-- Modal body -->
-			<div class="modal-body" #bodyCard>
-				<div class="row align-items-center">
-					<div class="col-sm-6 col-md-6 col-lg-6 leftSection">
-						<div class="spinner-container" *ngIf="isLoading">
-							<mat-spinner [diameter]="50"></mat-spinner>
-						</div>
-						<div class="videoContainer" *ngIf="!isLoading">
-							<div *ngFor="let stream of localParticipant | streams">
-								<!-- Only webcam video will be shown if webcamera is available -->
-								<ov-video
-									*ngIf="(stream.type === 'CAMERA' && hasVideoDevices) || stream.type === 'SCREEN'"
-									[streamManager]="stream.streamManager"
-									[ngClass]="{ ovVideoSmall: localParticipant.streams.size > 1 && stream.type === 'CAMERA' }"
-								></ov-video>
-								<div class="cameraMessageContainer" *ngIf="stream.type === 'CAMERA' && !hasVideoDevices">
-									<span *ngIf="!hasVideoDevices && !hasAudioDevices">Oops! Camera and microphone are not available</span>
-									<span *ngIf="!hasVideoDevices && hasAudioDevices">Oops! Camera is not available</span>
-									<span *ngIf="hasVideoDevices && !hasAudioDevices">Oops! Microphone is not available</span>
-								</div>
-								<div id="audio-wave-container" *ngIf="stream.type === 'CAMERA'">
-									<ov-audio-wave [streamManager]="stream.streamManager"></ov-audio-wave>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div class="col-sm-6 col-md-6 col-lg-6 rightSection">
-						<!-- Devices section / Camera-->
-						<div fxLayout="row" fxFill id="devicesSection" *ngIf="hasVideoDevices">
-							<div fxLayout fxFlex>
-								<div class="one" fxFlex="20" fxLayoutAlign="center center">
-									<button
-										mat-mini-fab
-										(click)="toggleCam()"
-										class="deviceButton"
-										id="configCardCameraButton"
-										[class.warn-btn]="isVideoMuted"
-									>
-										<mat-icon *ngIf="!isVideoMuted" matTooltip="Camera Enabled">videocam</mat-icon>
-										<mat-icon *ngIf="isVideoMuted" matTooltip="Camera Disabled">videocam_off</mat-icon>
-									</button>
-								</div>
-								<div class="two" fxFlex="80" fxLayoutAlign="center center">
-									<mat-form-field class="alternate-theme">
-										<mat-label>Camera Options</mat-label>
-										<mat-select [disabled]="isVideoMuted" (selectionChange)="onCameraSelected($event)">
-											<mat-option *ngFor="let camera of cameras" [value]="camera.device">
-												{{ camera.label }}
-											</mat-option>
-										</mat-select>
-									</mat-form-field>
-								</div>
-							</div>
-						</div>
-						<!-- Devices section / Microphone-->
-						<div fxLayout="row" fxFill id="devicesSection" *ngIf="hasAudioDevices">
-							<div fxLayout fxFlex>
-								<div class="one" fxFlex="20" fxLayoutAlign="center center">
-									<button
-										mat-mini-fab
-										(click)="toggleMic()"
-										class="deviceButton"
-										id="configCardMicrophoneButton"
-										[class.warn-btn]="isAudioMuted"
-									>
-										<mat-icon *ngIf="!isAudioMuted" matTooltip="Microphone Enabled">mic</mat-icon>
-										<mat-icon *ngIf="isAudioMuted" matTooltip="Microphone Disabled">mic_off</mat-icon>
-									</button>
-								</div>
-								<div class="two" fxFlex="80" fxLayoutAlign="center center">
-									<mat-form-field class="alternate-theme">
-										<mat-label>Microphone Options</mat-label>
-										<mat-select [disabled]="isAudioMuted" (selectionChange)="onMicrophoneSelected($event)">
-											<mat-option *ngFor="let microphone of microphones" [value]="microphone.device">
-												{{ microphone.label }}
-											</mat-option>
-										</mat-select>
-									</mat-form-field>
-								</div>
-							</div>
-						</div>
-
-						<!-- Devices section / ScreenShare-->
-						<div fxLayout="row" fxFill id="devicesSection">
-							<div fxLayout fxFlex>
-								<div class="one" fxFlex="20" fxLayoutAlign="center center">
-									<button
-										mat-mini-fab
-										(click)="toggleScreenShare()"
-										class="deviceButton"
-										id="configCardScreenButton"
-										[class.active-btn]="screenShareEnabled"
-									>
-										<mat-icon *ngIf="!screenShareEnabled" matTooltip="Enable screen share">screen_share</mat-icon>
-										<mat-icon *ngIf="screenShareEnabled" matTooltip="Disable screen share">screen_share</mat-icon>
-									</button>
-								</div>
-								<div class="two" fxFlex="80" fxLayoutAlign="center center">
-									<mat-form-field class="alternate-theme">
-										<input matInput disabled placeholder="Screen" [ngModel]="screenShareEnabled ? 'Screen' : 'None'" />
-									</mat-form-field>
-								</div>
-							</div>
-						</div>
-						<!-- Devices section / Nickname-->
-						<div fxLayout="row" fxFill id="devicesSection">
-							<div fxLayout fxFlex>
-								<div class="one" fxFlex="20" fxLayoutAlign="center center">
-									<button mat-mini-fab class="deviceButton" disabled>
-										<mat-icon matTooltip="Nickname">person</mat-icon>
-									</button>
-								</div>
-								<div class="two" fxFlex="80" fxLayoutAlign="center center">
-									<form id="nicknameForm" class="alternate-theme">
-										<mat-form-field>
-											<input
-												matInput
-												placeholder="Nickname"
-												[formControl]="nicknameFormControl"
-												[errorStateMatcher]="matcher"
-												(keypress)="eventKeyPress($event)"
-												autocomplete="off"
-											/>
-											<mat-error *ngIf="nicknameFormControl.hasError('required')">
-												Nickname is <strong>required</strong>
-											</mat-error>
-											<mat-error *ngIf="nicknameFormControl.hasError('maxlength')">
-												Nickname is <strong>too long!</strong>
-											</mat-error>
-										</mat-form-field>
-									</form>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- Modal footer -->
-			<div class="modal-footer" style="justify-content: center">
-				<button mat-flat-button (click)="joinSession()" form="nicknameForm" id="joinButton">JOIN</button>
-			</div>
-		</div>
-	</div>
-</div>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.spec.ts
deleted file mode 100644
index e6ac3132..00000000
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.spec.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ActionService } from '../../services/action/action.service';
-import { ActionServiceMock } from '../../services/action/action.service.mock';
-import { DeviceService } from '../../services/device/device.service';
-
-import { DeviceServiceMock } from '../../services/device/device.service.mock';
-import { LocalUserService } from '../../services/local-user/local-user.service';
-import { LocalUserServiceMock } from '../../services/local-user/local-user.service.mock';
-import { LoggerService } from '../../services/logger/logger.service';
-import { LoggerServiceMock } from '../../services/logger/logger.service.mock';
-import { StorageService } from '../../services/storage/storage.service';
-import { WebrtcService } from '../../services/webrtc/webrtc.service';
-import { StorageServiceMock } from '../../services/storage/storage.service.mock';
-
-import { WebrtcServiceMock } from '../../services/webrtc/webrtc.service.mock';
-
-import { UserSettingsComponent } from './user-settings.component';
-
-describe('UserSettingsComponent', () => {
-  let component: UserSettingsComponent;
-  let fixture: ComponentFixture<UserSettingsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ UserSettingsComponent ],
-      providers: [
-        { provide: LoggerService, useClass: LoggerServiceMock },
-          { provide: ActionService, useClass: ActionServiceMock },
-          { provide: LocalUserService, useClass: LocalUserServiceMock },
-          { provide: WebrtcService, useClass: WebrtcServiceMock },
-          { provide: DeviceService, useClass: DeviceServiceMock },
-          { provide: StorageService, useClass: StorageServiceMock }
-        ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(UserSettingsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts
deleted file mode 100644
index e86f486f..00000000
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts
+++ /dev/null
@@ -1,321 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
-import { Subscription } from 'rxjs';
-
-import { OpenViduErrorName } from 'openvidu-browser/lib/OpenViduInternal/Enums/OpenViduError';
-import { Publisher, PublisherProperties } from 'openvidu-browser';
-
-import { ILogger } from '../../models/logger.model';
-import { CustomDevice } from '../../models/device.model';
-import { ScreenType, VideoType } from '../../models/video-type.model';
-
-import { NicknameMatcher } from '../../matchers/nickname.matcher';
-
-import { DeviceService } from '../../services/device/device.service';
-import { LoggerService } from '../../services/logger/logger.service';
-import { StorageService } from '../../services/storage/storage.service';
-import { OpenViduService } from '../../services/openvidu/openvidu.service';
-import { ActionService } from '../../services/action/action.service';
-import { ParticipantService } from '../../services/participant/participant.service';
-import { ParticipantAbstractModel } from '../../models/participant.model';
-
-/**
- * @internal
- */
-@Component({
-	selector: 'ov-user-settings',
-	templateUrl: './user-settings.component.html',
-	styleUrls: ['./user-settings.component.css'],
-	// changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class UserSettingsComponent implements OnInit, OnDestroy {
-	@ViewChild('bodyCard') bodyCard: ElementRef;
-
-	@Input() sessionId: string;
-	@Output() onJoinClicked = new EventEmitter<any>();
-	@Output() onCloseClicked = new EventEmitter<any>();
-
-	cameras: CustomDevice[];
-	microphones: CustomDevice[];
-	cameraSelected: CustomDevice;
-	microphoneSelected: CustomDevice;
-	isVideoMuted: boolean;
-	isAudioMuted: boolean;
-	screenShareEnabled: boolean;
-	localParticipant: ParticipantAbstractModel;
-	columns: number;
-
-	nicknameFormControl = new FormControl('', [Validators.maxLength(20), Validators.required]);
-	matcher = new NicknameMatcher();
-	hasVideoDevices: boolean;
-	hasAudioDevices: boolean;
-	isLoading = true;
-	private log: ILogger;
-	private localParticipantSubscription: Subscription;
-	private screenShareStateSubscription: Subscription;
-
-	constructor(
-		private actionService: ActionService,
-		private deviceSrv: DeviceService,
-		private loggerSrv: LoggerService,
-		private openviduService: OpenViduService,
-		private participantService: ParticipantService,
-		private storageSrv: StorageService
-	) {
-		this.log = this.loggerSrv.get('UserSettingsComponent');
-	}
-
-	@HostListener('window:beforeunload')
-	beforeunloadHandler() {
-		this.close();
-	}
-
-	async ngOnInit() {
-		await this.deviceSrv.initializeDevices();
-
-		this.subscribeToLocalParticipantEvents();
-		this.openviduService.initialize();
-		const nickname = this.storageSrv.getNickname() || this.generateRandomNickname();
-		this.nicknameFormControl.setValue(nickname);
-		this.columns = window.innerWidth > 900 ? 2 : 1;
-		this.setDevicesInfo();
-		if (this.hasAudioDevices || this.hasVideoDevices) {
-			await this.initwebcamPublisher();
-		}
-		this.isLoading = false;
-	}
-
-	ngOnDestroy() {
-		if (this.localParticipantSubscription) {
-			this.localParticipantSubscription.unsubscribe();
-		}
-
-		if (this.screenShareStateSubscription) {
-			this.screenShareStateSubscription.unsubscribe();
-		}
-		this.deviceSrv.clear();
-	}
-
-	async onCameraSelected(event: any) {
-		const videoSource = event?.value;
-		// Is New deviceId different from the old one?
-		if (this.deviceSrv.needUpdateVideoTrack(videoSource)) {
-			const mirror = this.deviceSrv.cameraNeedsMirror(videoSource);
-			//TODO: Uncomment this when replaceTrack issue is fixed
-			// const pp: PublisherProperties = { videoSource, audioSource: false, mirror };
-			// await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
-			// TODO: Remove this when replaceTrack issue is fixed
-			const pp: PublisherProperties = { videoSource, audioSource: this.microphoneSelected.device, mirror };
-			await this.openviduService.republishTrack(pp);
-
-
-			this.cameraSelected = videoSource;
-			this.deviceSrv.setCameraSelected(this.cameraSelected);
-		}
-		if (this.isVideoMuted) {
-			// Publish Webcam video
-			await this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), true);
-			this.isVideoMuted = false;
-		}
-	}
-
-	async onMicrophoneSelected(event: any) {
-		const audioSource = event?.value;
-		// Is New deviceId different than older?
-		if (this.deviceSrv.needUpdateAudioTrack(audioSource)) {
-			//TODO: Uncomment this when replaceTrack issue is fixed
-			// const pp: PublisherProperties = { audioSource, videoSource: false };
-			// await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
-			// TODO: Remove this when replaceTrack issue is fixed
-			const mirror = this.deviceSrv.cameraNeedsMirror(this.cameraSelected.device);
-			const pp: PublisherProperties = { videoSource: this.cameraSelected.device, audioSource, mirror };
-			await this.openviduService.republishTrack(pp);
-
-			this.microphoneSelected = audioSource;
-			this.deviceSrv.setMicSelected(this.microphoneSelected);
-		}
-		if (this.isAudioMuted) {
-			// Enable microphone
-			this.openviduService.publishAudio(this.participantService.getMyCameraPublisher(), true);
-			this.isAudioMuted = true;
-		}
-	}
-
-	async toggleCam() {
-
-		const publish = this.isVideoMuted;
-		await this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publish);
-
-		if (this.participantService.haveICameraAndScreenActive()) {
-			// Cam will not published, disable webcam with screensharing active
-			this.participantService.disableWebcamUser();
-			this.openviduService.publishAudio(this.participantService.getMyScreenPublisher(), publish);
-		} else if (this.participantService.isOnlyMyScreenActive()) {
-			// Cam will be published, enable webcam
-			this.participantService.enableWebcamUser();
-		}
-
-		this.isVideoMuted = !this.isVideoMuted;
-		this.storageSrv.setVideoMuted(this.isVideoMuted);
-	}
-
-	async toggleScreenShare() {
-		// Disabling screenShare
-		if (this.participantService.haveICameraAndScreenActive()) {
-			this.participantService.disableScreenUser();
-			return;
-		}
-
-		// Enabling screenShare
-		if (this.participantService.isOnlyMyCameraActive()) {
-			const willThereBeWebcam = this.participantService.isMyCameraActive() && this.participantService.hasCameraVideoActive();
-			const hasAudio = willThereBeWebcam ? false : this.hasAudioDevices && this.isAudioMuted;
-			const properties: PublisherProperties = {
-				videoSource: ScreenType.SCREEN,
-				audioSource: this.hasAudioDevices ? undefined : null,
-				publishVideo: true,
-				publishAudio: hasAudio,
-				mirror: false
-			};
-			const screenPublisher = await this.openviduService.initPublisher(undefined, properties);
-
-			screenPublisher.on('accessAllowed', (event) => {
-				screenPublisher.stream
-					.getMediaStream()
-					.getVideoTracks()[0]
-					.addEventListener('ended', () => {
-						this.log.d('Clicked native stop button. Stopping screen sharing');
-						this.toggleScreenShare();
-					});
-				this.participantService.activeMyScreenShare(screenPublisher);
-				if (!this.participantService.hasCameraVideoActive()) {
-					this.participantService.disableWebcamUser();
-				}
-			});
-
-			screenPublisher.on('accessDenied', (error: any) => {
-				if (error && error.name === 'SCREEN_SHARING_NOT_SUPPORTED') {
-					this.actionService.openDialog('Error sharing screen', 'Your browser does not support screen sharing');
-				}
-			});
-			return;
-		}
-
-		// Disabling screnShare and enabling webcam
-		this.participantService.enableWebcamUser();
-		this.participantService.disableScreenUser();
-	}
-
-	toggleMic() {
-		const publish = this.isAudioMuted;
-		this.openviduService.publishAudio(this.participantService.getMyCameraPublisher(), publish);
-		this.isAudioMuted = !this.isAudioMuted;
-		this.storageSrv.setAudioMuted(this.isAudioMuted);
-	}
-
-	eventKeyPress(event) {
-		if (event && event.keyCode === 13 && this.nicknameFormControl.valid) {
-			this.joinSession();
-		}
-	}
-
-	onResize(event) {
-		this.columns = event.target.innerWidth > 900 ? 2 : 1;
-	}
-
-	joinSession() {
-		if (this.nicknameFormControl.valid) {
-			const nickname = this.nicknameFormControl.value;
-			this.participantService.setMyNickname(nickname);
-			this.storageSrv.setNickname(nickname);
-			return this.onJoinClicked.emit();
-		}
-		this.scrollToBottom();
-	}
-
-	close() {
-		this.onCloseClicked.emit();
-	}
-
-	private setDevicesInfo() {
-		this.hasVideoDevices = this.deviceSrv.hasVideoDeviceAvailable();
-		this.hasAudioDevices = this.deviceSrv.hasAudioDeviceAvailable();
-		this.microphones = this.deviceSrv.getMicrophones();
-		this.cameras = this.deviceSrv.getCameras();
-		this.cameraSelected = this.deviceSrv.getCameraSelected();
-		this.microphoneSelected = this.deviceSrv.getMicrophoneSelected();
-
-		this.isVideoMuted = this.deviceSrv.isVideoMuted();
-		this.isAudioMuted = this.deviceSrv.isAudioMuted();
-	}
-
-	private scrollToBottom(): void {
-		try {
-			this.bodyCard.nativeElement.scrollTop = this.bodyCard.nativeElement.scrollHeight;
-		} catch (err) {}
-	}
-
-	private subscribeToLocalParticipantEvents() {
-		this.localParticipantSubscription = this.participantService.localParticipantObs.subscribe((p) => {
-			this.localParticipant = p;
-			this.screenShareEnabled = p.isScreenActive();
-		});
-	}
-
-	private async initwebcamPublisher() {
-		const publisher = await this.openviduService.initDefaultPublisher(undefined);
-		if (publisher) {
-			// this.handlePublisherSuccess(publisher);
-			this.handlePublisherError(publisher);
-		}
-	}
-
-	//? After test in Chrome and Firefox, the devices always have labels.
-	//? It's not longer needed
-	// private handlePublisherSuccess(publisher: Publisher) {
-	// 	publisher.once('accessAllowed', async () => {
-	// 		if (this.deviceSrv.areEmptyLabels()) {
-	// 			await this.deviceSrv.forceUpdate();
-	// 			if (this.hasAudioDevices) {
-	// 				const audioLabel = publisher?.stream?.getMediaStream()?.getAudioTracks()[0]?.label;
-	// 				this.deviceSrv.setMicSelected(audioLabel);
-	// 			}
-
-	// 			if (this.hasVideoDevices) {
-	// 				const videoLabel = publisher?.stream?.getMediaStream()?.getVideoTracks()[0]?.label;
-	// 				this.deviceSrv.setCameraSelected(videoLabel);
-	// 			}
-	// 			this.setDevicesInfo();
-	// 		}
-	// 	});
-	// }
-
-	private handlePublisherError(publisher: Publisher) {
-		publisher.once('accessDenied', (e: any) => {
-			let message: string;
-			if (e.name === OpenViduErrorName.DEVICE_ALREADY_IN_USE) {
-				this.log.w('Video device already in use. Disabling video device...');
-				// Allow access to the room with only mic if camera device is already in use
-				this.hasVideoDevices = false;
-				this.deviceSrv.disableVideoDevices();
-				return this.initwebcamPublisher();
-			}
-			if (e.name === OpenViduErrorName.DEVICE_ACCESS_DENIED) {
-				message = 'Access to media devices was not allowed.';
-				this.hasVideoDevices = false;
-				this.hasAudioDevices = false;
-				this.deviceSrv.disableVideoDevices();
-				this.deviceSrv.disableAudioDevices();
-				return this.initwebcamPublisher();
-			} else if (e.name === OpenViduErrorName.NO_INPUT_SOURCE_SET) {
-				message = 'No video or audio devices have been found. Please, connect at least one.';
-			}
-			this.actionService.openDialog(e.name.replace(/_/g, ' '), message, true);
-			this.log.e(e.message);
-		});
-	}
-
-	private generateRandomNickname(): string {
-		return 'OpenVidu_User' + Math.floor(Math.random() * 100);
-	}
-}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
index 28127f7f..ec6ab47c 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
@@ -27,7 +27,6 @@ import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 
-// import { UserSettingsComponent } from './components/user-settings/user-settings.component';
 import { ToolbarComponent } from './components/toolbar/toolbar.component';
 import { VideoComponent } from './components/video/video.component';
 import { ChatPanelComponent } from './components/panel/chat-panel/chat-panel.component';
@@ -70,7 +69,6 @@ import { RecordingActivityComponent } from './components/panel/activities-panel/
 
 @NgModule({
 	declarations: [
-		// UserSettingsComponent,
 		VideoComponent,
 		ToolbarComponent,
 		ChatPanelComponent,
@@ -140,7 +138,6 @@ import { RecordingActivityComponent } from './components/panel/activities-panel/
 	],
 	exports: [
 		VideoconferenceComponent,
-		// UserSettingsComponent,
 		ToolbarComponent,
 		PanelComponent,
 		ParticipantsPanelComponent,