wip add watermark

Author: mickel8

broadcaster/assets/css/app.css

@@ -83,3 +83,34 @@ summary {
   color: #606060;
   padding: 10px 0px;
 }
+
+.a-watermark {
+  pointer-events: none;
+}
+
+
+
+.w {
+  position: relative;
+}
+
+.w:before {
+  content: " ";
+  background-color: red;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  right: 10px;
+  top: 10px;
+  background: url("swm_logo.svg");
+  max-width: 15%;
+  background-repeat: no-repeat;
+  max-height: 15%;
+  opacity: 0.9;
+  pointer-events: all;
+}
+
+.w:hover:before {
+  transform: scale(1.1);
+  transition: all 0.2s linear;
+}

broadcaster/assets/js/home.js

@@ -74,14 +74,31 @@ async function connectInput(id) {
   whepClient.onstream = (stream) => {
     console.log(`[${id}]: Creating new video element`);
 
+
+    const w = document.createElement('div');
+    w.className = 'w'
+
     const videoPlayer = document.createElement('video');
     videoPlayer.srcObject = stream;
     videoPlayer.autoplay = true;
     videoPlayer.controls = true;
     videoPlayer.muted = true;
     videoPlayer.className = 'rounded-xl w-full h-full object-cover bg-black';
 
-    videoPlayerGrid.appendChild(videoPlayer);
+    w.appendChild(videoPlayer);
+
+    // const a = document.createElement('a');
+    // a.appendChild(w);
+    // a.href = "https://swmansion.com"
+    // a.className = 'a-watermark';
+
+    const watermark = document.createElement('div');
+    watermark.style = 'position: absolute; width: 20px; height: 20px; background-color: red;'
+    const p = document.createElement('div');
+    p.style = 'position: relative; display: inline-block;';
+    p.appendChild(videoPlayer);
+    p.appendChild(watermark);
+    videoPlayerGrid.appendChild(p);
     inputData.videoPlayer = videoPlayer;
     updateVideoGrid();
     statusMessage.classList.add('hidden');

broadcaster/assets/package.json

@@ -20,4 +20,4 @@
     "globals": "^15.8.0",
     "prettier": "^3.3.3"
   }
-}
+}