@beterdichtbij/component-library 0.72.7 → 0.73.0-beta.0

package/dist/scss/templates/_video-call-template.scss

@@ -1,226 +1,289 @@
-.video-call-template {
-	$small-text: .8rem;
-
-	.bd-conversation-card {
-		margin-bottom: 20px;
-	}
-
-	.incoming,
-	.outgoing {
-		.card {
-			padding: 20px;
-			row-gap: 20px;
-		}
-
-		&__video {
-			display: block;
-		}
-
-		&__screenshare {
-			display: none;
-		}
-
-		&__video,
-		&__screenshare {
-			justify-content: center;
-			align-items: center;
-			width: 100%;
-			border-radius: 4px;
-			background-color: $color-bg;
-			overflow: hidden;
-			font-size: 0;
-
-			div {
-				width: 100%;
-				height: 100%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-				video {
-					width: 100%;
-					object-fit: contain !important;
-				}
-			}
-		}
-
-		&__available-cameras-count {
-			font-size: $small-text;
-			margin: 0;
-		}
-	}
-
-	.incoming {
-		&--loading,
-		&--declined,
-		&--hangup {
-			.card {
-				justify-content: center;
-				align-items: center;
-			}
-		}
-
-		.card {
-			height: 680px;
-
-			@include media-breakpoint-down(sm) {
-				height: unset;
-			}
-
-			button {
-				width: fit-content;
-			}
-
-			.permissions-denied__audio,
-			.permissions-denied__video {
-				display: flex;
-				gap: 16px;
-				align-items: baseline;
-				justify-content: center;
-			}
-		}
-
-		&__video,
-		&__screenshare {
-			height: 580px;
-
-			@include media-breakpoint-down(sm) {
-				height: 200px;
-			}
-		}
-
-		&__settings {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			gap: 8px;
-		}
-	}
-
-	.side {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		gap: 20px;
-	}
-
-	.outgoing {
-		margin-bottom: 20px;
-
-		&__video {
-			height: 200px;
-		}
-
-		.permissions-denied__video {
-			display: flex;
-			align-items: center;
-			flex-direction: column;
-		}
-	}
-
-	.settings {
-		border: 1px solid $gray;
-		padding: 20px;
-		border-radius: 8px;
-		margin-top: 20px;
-
-		p {
-			color: hsla(221, 13%, 48%, 1);
-
-			&:last-of-type {
-				margin-bottom: 0;
-			}
-		}
-
-		&__status {
-			border-bottom: 2px solid $gray;
-			padding-bottom: 20px;
-
-			&-text {
-				margin-bottom: 8px;
-			}
-
-			&-detail {
-				margin-bottom: 16px;
-				font-size: $small-text;
-				line-height: 21px;
-			}
-		}
-
-		&__signal {
-			display: flex;
-			align-items: center;
-			padding: 20px 0;
-			gap: 12px;
-			border-bottom: 1px solid $gray;
-
-			&.weak {
-				.indicator li:nth-child(1) {
-					background-color: $danger;
-				}
-			}
-
-			&.steady {
-				.indicator li:nth-child(1),
-				.indicator li:nth-child(2) {
-					background-color: $warning;
-				}
-			}
-
-			&.strong {
-				.indicator li {
-					background-color: $success;
-				}
-			}
-
-			.indicator {
-				list-style: none;
-				display: flex;
-				align-items: flex-end;
-				margin: 0;
-				padding: 0;
-				gap: 2px;
-
-				li {
-					width: 6px;
-					border-radius: 1.6px;
-					background-color: $gray;
-
-					&:nth-child(1) {
-						height: 7px;
-					}
-
-					&:nth-child(2) {
-						height: 13px;
-					}
-
-					&:nth-child(3) {
-						height: 20px;
-					}
-				}
-			}
-
-			p {
-				margin-bottom: 0;
-				line-height: 20px;
-			}
-		}
-
-		&__help {
-			padding-top: 20px;
-
-			p {
-				font-size: $small-text;
-				line-height: 21px;
-
-				&:last-of-type {
-					margin-bottom: 0;
-				}
-
-				b {
-					font-weight: 600;
-				}
-			}
-		}
-	}
+.video-call-template {
+	$small-text: .8rem;
+
+	.bd-conversation-card {
+		margin-bottom: 20px;
+	}
+
+	.bd-btn {
+		display: flex;
+		gap: 8px;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.incoming,
+	.outgoing {
+		.card {
+			padding: 20px;
+			row-gap: 20px;
+		}
+
+		&__video {
+			display: block;
+		}
+
+		&__screenshare {
+			display: none;
+		}
+
+		&__video,
+		&__screenshare {
+			justify-content: center;
+			align-items: center;
+			width: 100%;
+			border-radius: 4px;
+			background-color: $color-bg;
+			overflow: hidden;
+			font-size: 0;
+
+			div {
+				width: 100%;
+				height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+				video {
+					width: 100%;
+					object-fit: contain !important;
+				}
+			}
+		}
+
+		&__available-cameras-count {
+			font-size: $small-text;
+			margin: 0;
+		}
+	}
+
+	.incoming {
+		&--loading,
+		&--declined,
+		&--hangup {
+			.card {
+				justify-content: center;
+				align-items: center;
+			}
+		}
+
+		.card {
+			height: 680px;
+
+			@include media-breakpoint-down(sm) {
+				height: unset;
+			}
+
+			button {
+				width: fit-content;
+			}
+
+			.permissions-denied__audio,
+			.permissions-denied__video {
+				display: flex;
+				gap: 16px;
+				align-items: baseline;
+				justify-content: center;
+			}
+		}
+
+		&__video,
+		&__screenshare {
+			height: 580px;
+
+			@include media-breakpoint-down(sm) {
+				height: 200px;
+			}
+		}
+
+		&__settings {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			gap: 8px;
+		}
+	}
+
+	.side {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		gap: 20px;
+	}
+
+	.outgoing {
+		margin-bottom: 20px;
+
+		&__video {
+			height: 200px;
+		}
+
+		&__controls {
+			display: flex;
+			gap: 10px;
+			justify-content: center;
+
+			.bd-btn {
+				border-radius: 50%;
+				width: 56px;
+				height: 56px;
+
+				&.blur-button {
+					&.off {
+						border: 2px solid $gray-500;
+						background: $gray-200;
+
+						.icon-participant {
+							path {
+								fill: $gray-700;
+							}
+						}
+
+						.icon-blur {
+							circle {
+								fill: $gray-700;
+							}
+						}
+					}
+
+					.icon {
+						position: absolute;
+						width: auto;
+						height: auto;
+					}
+				}
+			}
+		}
+
+		.share-button {
+			background: none;
+			color: $primary;
+			border: 2px solid $primary;
+
+			path {
+				fill: $primary;
+			}
+
+			&.btn-danger {
+				color: $danger;
+				border: 2px solid $danger;
+
+				path {
+					fill: $danger;
+				}
+			}
+		}
+
+		.permissions-denied__video {
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+		}
+	}
+
+	.settings {
+		border: 1px solid $gray;
+		padding: 20px;
+		border-radius: 8px;
+		margin-top: 20px;
+
+		p {
+			color: hsla(221, 13%, 48%, 1);
+
+			&:last-of-type {
+				margin-bottom: 0;
+			}
+		}
+
+		&__status {
+			border-bottom: 2px solid $gray;
+			padding-bottom: 20px;
+
+			&-text {
+				margin-bottom: 8px;
+			}
+
+			&-detail {
+				margin-bottom: 16px;
+				font-size: $small-text;
+				line-height: 21px;
+			}
+		}
+
+		&__signal {
+			display: flex;
+			align-items: center;
+			padding: 20px 0;
+			gap: 12px;
+			border-bottom: 1px solid $gray;
+
+			&.weak {
+				.indicator li:nth-child(1) {
+					background-color: $danger;
+				}
+			}
+
+			&.steady {
+				.indicator li:nth-child(1),
+				.indicator li:nth-child(2) {
+					background-color: $warning;
+				}
+			}
+
+			&.strong {
+				.indicator li {
+					background-color: $success;
+				}
+			}
+
+			.indicator {
+				list-style: none;
+				display: flex;
+				align-items: flex-end;
+				margin: 0;
+				padding: 0;
+				gap: 2px;
+
+				li {
+					width: 6px;
+					border-radius: 1.6px;
+					background-color: $gray;
+
+					&:nth-child(1) {
+						height: 7px;
+					}
+
+					&:nth-child(2) {
+						height: 13px;
+					}
+
+					&:nth-child(3) {
+						height: 20px;
+					}
+				}
+			}
+
+			p {
+				margin-bottom: 0;
+				line-height: 20px;
+			}
+		}
+
+		&__help {
+			padding-top: 20px;
+
+			p {
+				font-size: $small-text;
+				line-height: 21px;
+
+				&:last-of-type {
+					margin-bottom: 0;
+				}
+
+				b {
+					font-weight: 600;
+				}
+			}
+		}
+	}
 }

package/dist/stores/SessionTimeOutStore.ts

@@ -1,47 +1,47 @@
-import { defineStore } from 'pinia';
-import dayjs from 'dayjs';
-import { ref } from 'vue';
-
-export const useSessionTimeOutStore = defineStore('SessionTimeOutStore', () => {
-  const threshold = ref(null)
-  const warningThreshold = ref(null);
-  const time: any = ref(dayjs());
-  const taskId = ref(null);
-
-  const SetDefaultSessionTimeOutValues = (ServerDefaultValues : any) => {
-    threshold.value = ServerDefaultValues.TimeOutSessionInMinutes;
-    warningThreshold.value = ServerDefaultValues.TimeOutSessionShowWarning;
-    SetNewTime();
-  }
-
-  const SetNewTime = () => {
-    time.value = dayjs();
-  }
-
-  const SetTaskId = (id : any) => {
-    taskId.value = id;
-  }
-
-  const ClearSessionTimeOut = () =>  {
-    if (taskId.value) {
-      clearInterval(taskId.value);
-    }
-    threshold.value = null
-    warningThreshold.value = null;
-    time.value = null;
-    taskId.value = null;
-  }
-
-  const GetTime = () => time.value;
-
-  return {
-    SetDefaultSessionTimeOutValues,
-    SetTaskId,
-    ClearSessionTimeOut,
-    threshold,
-    warningThreshold,
-    taskId,
-    GetTime,
-    SetNewTime
-  }
+import { defineStore } from 'pinia';
+import dayjs from 'dayjs';
+import { ref } from 'vue';
+
+export const useSessionTimeOutStore = defineStore('SessionTimeOutStore', () => {
+  const threshold = ref(null)
+  const warningThreshold = ref(null);
+  const time: any = ref(dayjs());
+  const taskId = ref(null);
+
+  const SetDefaultSessionTimeOutValues = (ServerDefaultValues : any) => {
+    threshold.value = ServerDefaultValues.TimeOutSessionInMinutes;
+    warningThreshold.value = ServerDefaultValues.TimeOutSessionShowWarning;
+    SetNewTime();
+  }
+
+  const SetNewTime = () => {
+    time.value = dayjs();
+  }
+
+  const SetTaskId = (id : any) => {
+    taskId.value = id;
+  }
+
+  const ClearSessionTimeOut = () =>  {
+    if (taskId.value) {
+      clearInterval(taskId.value);
+    }
+    threshold.value = null
+    warningThreshold.value = null;
+    time.value = null;
+    taskId.value = null;
+  }
+
+  const GetTime = () => time.value;
+
+  return {
+    SetDefaultSessionTimeOutValues,
+    SetTaskId,
+    ClearSessionTimeOut,
+    threshold,
+    warningThreshold,
+    taskId,
+    GetTime,
+    SetNewTime
+  }
 })