Implement the new unified grid layout
Here I've implemented an MVP for the new unified grid layout, which scales smoothly up to arbitrarily many participants. It doesn't yet have a special 1:1 layout, so in spotlight mode and 1:1s, we will still fall back to the legacy grid systems. Things that happened along the way: - The part of VideoTile that is common to both spotlight and grid tiles, I refactored into MediaView - VideoTile renamed to GridTile - Added SpotlightTile for the new, glassy spotlight designs - NewVideoGrid renamed to Grid, and refactored to be even more generic - I extracted the media name logic into a custom React hook - Deleted the BigGrid experiment
This commit is contained in:
Robin
183
src/tile/MediaView.module.css
Normal file
183
src/tile/MediaView.module.css
Normal file
@@ -0,0 +1,183 @@
|
||||
/*
|
||||
Copyright 2022-2024 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.media {
|
||||
container-name: mediaView;
|
||||
container-type: size;
|
||||
border-radius: var(--media-view-border-radius);
|
||||
}
|
||||
|
||||
.media video {
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
object-fit: contain;
|
||||
background-color: var(--cpd-color-bg-subtle-primary);
|
||||
/* This transform is a no-op, but it forces Firefox to use a different
|
||||
rendering path, one that actually clips the corners of <video> elements into
|
||||
the intended rounded shape. We can remove this if Firefox stops being broken. */
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.media.mirror video {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.media[data-video-fit="cover"] video {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.media[data-video-fit="contain"] video {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.media.videoMuted video {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bg {
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
border-radius: inherit;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.media.videoMuted .avatar {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
/* CSS makes us put a condition here, even though all we want to do is
|
||||
unconditionally select the container so we can use cqmin units */
|
||||
@container mediaView (width > 0) {
|
||||
.avatar {
|
||||
/* Half of the smallest dimension of the tile */
|
||||
inline-size: 50cqmin;
|
||||
block-size: 50cqmin;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar > img {
|
||||
/* To make avatars scale smoothly with their tiles during animations, we
|
||||
override the styles set on the element */
|
||||
inline-size: 100% !important;
|
||||
block-size: 100% !important;
|
||||
}
|
||||
|
||||
.fg {
|
||||
position: absolute;
|
||||
inset: var(
|
||||
--media-view-fg-inset,
|
||||
calc(var(--media-view-border-radius) - var(--cpd-space-3x))
|
||||
);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-template-areas: ". button2" "nameTag button1";
|
||||
gap: var(--cpd-space-1x);
|
||||
place-items: start;
|
||||
}
|
||||
|
||||
.nameTag {
|
||||
grid-area: nameTag;
|
||||
padding: var(--cpd-space-1x);
|
||||
padding-block: var(--cpd-space-1x);
|
||||
color: var(--cpd-color-text-primary);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--cpd-radius-pill-effect);
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--small-drop-shadow);
|
||||
box-sizing: border-box;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
.nameTag > svg,
|
||||
.nameTag > span {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nameTag > .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-inline: var(--cpd-space-2x);
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.errorIcon {
|
||||
display: block;
|
||||
color: var(--cpd-color-icon-critical-primary);
|
||||
}
|
||||
|
||||
.fg > button {
|
||||
appearance: none;
|
||||
border: none;
|
||||
border-radius: var(--cpd-radius-pill-effect);
|
||||
padding: var(--cpd-space-1x);
|
||||
background: var(--cpd-color-bg-action-primary-rest);
|
||||
box-shadow: var(--small-drop-shadow);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity ease 0.15s;
|
||||
}
|
||||
|
||||
.fg:has(:focus-visible) > button,
|
||||
.fg > button[data-enabled="true"],
|
||||
.fg > button[data-state="open"] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (hover) {
|
||||
.fg:hover > button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fg > button:hover {
|
||||
background: var(--cpd-color-bg-action-primary-hovered);
|
||||
}
|
||||
}
|
||||
|
||||
.fg > button:active {
|
||||
background: var(--cpd-color-bg-action-primary-pressed) !important;
|
||||
}
|
||||
|
||||
.fg > button[data-state="open"] {
|
||||
background: var(--cpd-color-bg-action-primary-pressed);
|
||||
}
|
||||
|
||||
.fg > button > svg {
|
||||
display: block;
|
||||
color: var(--cpd-color-icon-on-solid-primary);
|
||||
}
|
||||
|
||||
.fg > button:first-of-type {
|
||||
grid-area: button1;
|
||||
}
|
||||
|
||||
.fg > button:nth-of-type(2) {
|
||||
grid-area: button2;
|
||||
}
|
||||
Reference in New Issue
Block a user