diff --git a/broadcaster/assets/css/app.css b/broadcaster/assets/css/app.css index 9c5f210..3ef4b33 100644 --- a/broadcaster/assets/css/app.css +++ b/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; +} \ No newline at end of file diff --git a/broadcaster/assets/js/home.js b/broadcaster/assets/js/home.js index cd031ca..8aac09f 100644 --- a/broadcaster/assets/js/home.js +++ b/broadcaster/assets/js/home.js @@ -74,6 +74,10 @@ 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; @@ -81,7 +85,20 @@ async function connectInput(id) { 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'); diff --git a/broadcaster/assets/package.json b/broadcaster/assets/package.json index ca89371..35269dc 100644 --- a/broadcaster/assets/package.json +++ b/broadcaster/assets/package.json @@ -20,4 +20,4 @@ "globals": "^15.8.0", "prettier": "^3.3.3" } -} +} \ No newline at end of file