mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
Improve layout
This commit is contained in:
@@ -52,10 +52,6 @@
|
|||||||
gap: 24px;
|
gap: 24px;
|
||||||
min-height: 400px;
|
min-height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.screen-share-tile {
|
|
||||||
min-height: 60vh;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.call-header {
|
.call-header {
|
||||||
@@ -155,7 +151,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.screen-share-tile {
|
.screen-share-tile {
|
||||||
min-height: 150px;
|
// min-height removed to allow dynamic sizing based on video content
|
||||||
|
|
||||||
.screen-share-video {
|
.screen-share-video {
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
@@ -307,18 +303,84 @@
|
|||||||
.call-content {
|
.call-content {
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow: hidden;
|
||||||
|
|
||||||
.video-tiles-grid {
|
// Reduce padding when screen share is active to maximize space
|
||||||
|
&.with-screen-share {
|
||||||
|
padding: 12px;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default layout (no screen share): tiles in grid
|
||||||
|
.screen-share-area {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-tiles-sidebar {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
min-height: 300px;
|
flex: 1;
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Layout with screen share: screen share on left, video tiles on right
|
||||||
|
&.with-screen-share {
|
||||||
|
.screen-share-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 4; // Give 4x more space than sidebar
|
||||||
|
min-width: 0;
|
||||||
|
max-width: 80vw; // Limit screen share to 80% of viewport width
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
position: relative;
|
||||||
|
// Ensure no padding/margin that could create blank space
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-tiles-sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-template-columns: none;
|
||||||
|
flex: 1; // Give 1x space (4:1 ratio = 80:20)
|
||||||
|
min-width: 250px; // Ensure minimum 300px width
|
||||||
|
max-width: 20%; // Cap at 20% of container
|
||||||
|
flex-shrink: 0;
|
||||||
|
gap: 16px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
// Custom scrollbar
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: rgba($color-dark-surface-variant, 0.3);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba($color-dark-primary, 0.5);
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba($color-dark-primary, 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-tile {
|
||||||
|
min-height: 168px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-tile {
|
.video-tile {
|
||||||
@@ -326,7 +388,6 @@
|
|||||||
background: rgba($color-dark-surface-variant, 0.5);
|
background: rgba($color-dark-surface-variant, 0.5);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
aspect-ratio: 4 / 3;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -391,24 +452,40 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.screen-share-tile {
|
.screen-share-tile {
|
||||||
aspect-ratio: 16 / 9;
|
position: relative;
|
||||||
min-height: 480px;
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
border: 2px solid rgba($color-dark-primary, 0.6);
|
border: 2px solid rgba($color-dark-primary, 0.6);
|
||||||
|
border-radius: 12px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background: rgba(0, 0, 0, 0.95);
|
||||||
|
display: inline-block;
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
// Constrain to available space but size to content
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
|
||||||
.screen-share-video {
|
.screen-share-video {
|
||||||
width: 100%;
|
width: auto;
|
||||||
height: 100%;
|
height: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
display: block;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
background: rgba(0, 0, 0, 0.95);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile-label {
|
.tile-label {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 12px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
background: rgba($color-dark-primary, 0.9);
|
background: rgba($color-dark-primary, 0.9);
|
||||||
color: $color-dark-on-primary;
|
color: $color-dark-on-primary;
|
||||||
|
border-radius: 8px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -239,34 +239,37 @@ export function CallWindow() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="call-content">
|
<div className={`call-content ${(call.isSharingScreen || call.isRemoteScreenSharing) ? "with-screen-share" : ""}`}>
|
||||||
{/* Screen share tiles - larger and more prominent */}
|
{/* Main screen share area - takes most space when active */}
|
||||||
{/* Always render but hide when not in use to keep refs valid */}
|
<div className="screen-share-area">
|
||||||
<div
|
{/* Local screen share */}
|
||||||
className="video-tile screen-share-tile local-screen-share"
|
<div
|
||||||
style={{ display: call.isSharingScreen ? "flex" : "none" }}>
|
className="video-tile screen-share-tile local-screen-share"
|
||||||
<video
|
style={{ display: call.isSharingScreen ? "flex" : "none" }}>
|
||||||
ref={localScreenShareRef}
|
<video
|
||||||
className="video-element screen-share-video"
|
ref={localScreenShareRef}
|
||||||
autoPlay
|
className="video-element screen-share-video"
|
||||||
playsInline
|
autoPlay
|
||||||
muted />
|
playsInline
|
||||||
<div className="tile-label">Your Screen</div>
|
muted />
|
||||||
</div>
|
<div className="tile-label">Your Screen</div>
|
||||||
|
</div>
|
||||||
<div
|
|
||||||
className="video-tile screen-share-tile remote-screen-share"
|
{/* Remote screen share */}
|
||||||
style={{ display: call.isRemoteScreenSharing ? "flex" : "none" }}>
|
<div
|
||||||
<video
|
className="video-tile screen-share-tile remote-screen-share"
|
||||||
ref={remoteScreenShareRef}
|
style={{ display: call.isRemoteScreenSharing ? "flex" : "none" }}>
|
||||||
className="video-element screen-share-video"
|
<video
|
||||||
autoPlay
|
ref={remoteScreenShareRef}
|
||||||
playsInline />
|
className="video-element screen-share-video"
|
||||||
<div className="tile-label">{remoteUsername}'s Screen</div>
|
autoPlay
|
||||||
|
playsInline />
|
||||||
|
<div className="tile-label">{remoteUsername}'s Screen</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Video tiles grid */}
|
{/* Video tiles sidebar - appears on right when screen share is active */}
|
||||||
<div className="video-tiles-grid">
|
<div className="video-tiles-sidebar">
|
||||||
{/* Local video tile */}
|
{/* Local video tile */}
|
||||||
<div className="video-tile local-video">
|
<div className="video-tile local-video">
|
||||||
<video
|
<video
|
||||||
|
|||||||
Reference in New Issue
Block a user