Merge pull request #163 from longmaba/feat/webcam-preview-floating-overlay

feat(launch): add draggable floating webcam preview overlay

biome.json

@@ -8,7 +8,8 @@
 		"formatWithErrors": true,
 		"lineEnding": "lf",
 		"lineWidth": 100,
-		"attributePosition": "auto"
+		"attributePosition": "auto",
+		"indentWidth": 4
 	},
 	"linter": {
 		"enabled": true,
@@ -92,7 +93,14 @@
 				"useGetterReturn": "error"
 			}
 		},
-		"includes": ["**", "**/dist", "**/.eslintrc.cjs", "**", "**/dist", "**/.eslintrc.cjs"]
+		"includes": [
+			"**",
+			"**/dist",
+			"**/.eslintrc.cjs",
+			"**",
+			"**/dist",
+			"**/.eslintrc.cjs"
+		]
 	},
 	"javascript": { "formatter": { "quoteStyle": "double" } },
 	"overrides": [
@@ -162,4 +170,3 @@
 		"actions": { "source": { "organizeImports": "on" } }
 	}
 }
-

src/components/launch/LaunchWindow.module.css

@@ -321,6 +321,40 @@
 	animation: blink 1.2s ease-in-out infinite;
 }
 
+.recordingWebcamPreview {
+	position: fixed;
+	right: 32px;
+	bottom: 120px;
+	height: 288px;
+	width: 288px;
+	overflow: hidden;
+	border-radius: 24px;
+	background: rgba(22, 22, 30, 0.95);
+	border: 1px solid rgba(255, 255, 255, 0.12);
+	box-shadow:
+		0 10px 24px rgba(0, 0, 0, 0.28),
+		inset 0 1px 0 rgba(255, 255, 255, 0.08);
+	cursor: grab;
+	touch-action: none;
+	user-select: none;
+	will-change: transform;
+	z-index: 120;
+}
+
+.recordingWebcamPreview:active {
+	cursor: grabbing;
+}
+
+.recordingWebcamPreviewVideo {
+	display: block;
+	height: 100%;
+	width: 100%;
+	object-fit: cover;
+	border-radius: inherit;
+	overflow: hidden;
+	transform: translateZ(0);
+}
+
 @keyframes blink {
 	0%,
 	100% {

src/i18n/locales/en/launch.json

@@ -27,6 +27,8 @@
 		"noMicrophonesFound": "No microphones found",
 		"webcam": "Webcam",
 		"turnOffWebcam": "Turn Off Webcam",
+		"hideFloatingWebcamPreview": "Hide Floating Preview",
+		"showFloatingWebcamPreview": "Show Floating Preview",
 		"selectWebcamToEnable": "Select a webcam to enable",
 		"noWebcamsFound": "No webcams found",
 		"recordingsFolder": "Recordings Path",

src/i18n/locales/es/launch.json

@@ -27,6 +27,8 @@
 		"noMicrophonesFound": "No se encontraron micrófonos",
 		"webcam": "Cámara",
 		"turnOffWebcam": "Desactivar cámara",
+		"hideFloatingWebcamPreview": "Ocultar vista flotante",
+		"showFloatingWebcamPreview": "Mostrar vista flotante",
 		"selectWebcamToEnable": "Selecciona una cámara para activar",
 		"noWebcamsFound": "No se encontraron cámaras",
 		"recordingsFolder": "Carpeta de grabaciones",

src/i18n/locales/zh-CN/launch.json

@@ -27,6 +27,8 @@
 		"noMicrophonesFound": "未找到麦克风",
 		"webcam": "摄像头",
 		"turnOffWebcam": "关闭摄像头",
+		"hideFloatingWebcamPreview": "隐藏悬浮预览",
+		"showFloatingWebcamPreview": "显示悬浮预览",
 		"selectWebcamToEnable": "选择一个摄像头以启用",
 		"noWebcamsFound": "未找到摄像头",
 		"recordingsFolder": "录制文件夹",