diff --git a/resources/css/app.css b/resources/css/app.css index 7e63c88..3d2f3b0 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -45,6 +45,14 @@ html.meet-room-page { box-shadow: 0 0 0 2px rgb(52 211 153 / 0.9); } +.meet-room-page .meet-stage-spotlight:has(.meet-tile-speaking) { + box-shadow: 0 0 0 2px rgb(52 211 153 / 0.9); +} + +.meet-room-page .meet-stage-spotlight .meet-tile-speaking { + box-shadow: none; +} + .meet-room-page #meet-stage:not(.meet-stage) #meet-stage-spotlight, .meet-room-page #meet-stage:not(.meet-stage) #meet-audience-strip { display: none; @@ -63,13 +71,34 @@ html.meet-room-page { min-height: 0; display: flex; flex-direction: column; + isolation: isolate; + border-radius: 0.75rem; + overflow: hidden; } .meet-room-page .meet-stage--plenary .meet-stage-spotlight-tile { height: 100%; width: 100%; max-height: 100%; + min-height: 0; aspect-ratio: auto; + border-radius: 0; +} + +.meet-room-page .meet-stage-spotlight-tile [data-tile-body] { + overflow: hidden; + border-top-left-radius: 0.75rem; + border-top-right-radius: 0.75rem; +} + +.meet-room-page .meet-stage-spotlight-tile [data-tile-footer] { + border-bottom-left-radius: 0.75rem; + border-bottom-right-radius: 0.75rem; +} + +.meet-room-page .meet-stage-spotlight-tile [data-tile-stage] video { + border-top-left-radius: 0.75rem; + border-top-right-radius: 0.75rem; } .meet-room-page [data-participant-tile] { @@ -99,6 +128,14 @@ html.meet-room-page { border-top: 1px solid rgb(30 41 59 / 0.8); } +.meet-room-page .meet-audience-strip:empty { + display: none; + min-height: 0; + margin-top: 0; + padding: 0; + border-top: 0; +} + .meet-room-page .meet-stage--panel #meet-stage-spotlight, .meet-room-page .meet-stage--panel #meet-audience-strip { display: none; diff --git a/resources/js/meet-room.js b/resources/js/meet-room.js index 664b5ad..5d26ee1 100644 --- a/resources/js/meet-room.js +++ b/resources/js/meet-room.js @@ -836,8 +836,12 @@ function meetRoom() { target.appendChild(tile); } - tile.classList.toggle('meet-stage-spotlight-tile', target === spotlight); + const isSpotlightTile = target === spotlight; + + tile.classList.toggle('meet-stage-spotlight-tile', isSpotlightTile); tile.classList.toggle('meet-stage-panel-tile', target === grid && this.stageLayout === 'panel'); + tile.classList.toggle('aspect-video', !isSpotlightTile && !this.audioOnly); + tile.classList.toggle('rounded-xl', !isSpotlightTile && !this.audioOnly); } else { tile.remove(); } @@ -1129,9 +1133,12 @@ function meetRoom() { container.appendChild(tile); } - tile.classList.toggle('meet-stage-spotlight-tile', container.id === 'meet-stage-spotlight'); + const isSpotlightTile = container.id === 'meet-stage-spotlight'; + + tile.classList.toggle('meet-stage-spotlight-tile', isSpotlightTile); tile.classList.toggle('meet-stage-panel-tile', container.id === 'video-grid' && this.stageLayout === 'panel'); - tile.classList.toggle('aspect-video', container.id !== 'meet-stage-spotlight' && !this.audioOnly); + tile.classList.toggle('aspect-video', !isSpotlightTile && !this.audioOnly); + tile.classList.toggle('rounded-xl', !isSpotlightTile && !this.audioOnly); this.updateTileAvatarCircle(tile, participant); tile.querySelector('[data-tile-name]').textContent = this.displayNameForParticipant(participant);