Improve look of toolbar
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
parent
85dfb3c1e5
commit
bd25b7f3b7
2 changed files with 34 additions and 40 deletions
|
@ -54,6 +54,15 @@ export const VideoTile = forwardRef(
|
|||
ref={ref}
|
||||
{...rest}
|
||||
>
|
||||
{showOptions && (
|
||||
<div className={classNames(styles.toolbar)}>
|
||||
<AudioButton
|
||||
className={styles.button}
|
||||
volume={localVolume}
|
||||
onPress={onOptionsPress}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{(videoMuted || noVideo) && (
|
||||
<>
|
||||
<div className={styles.videoMutedOverlay} />
|
||||
|
@ -66,30 +75,14 @@ export const VideoTile = forwardRef(
|
|||
</div>
|
||||
) : (
|
||||
(showName || audioMuted || (videoMuted && !noVideo)) && (
|
||||
<div
|
||||
className={classNames(
|
||||
styles.infoBubble,
|
||||
styles.memberName,
|
||||
styles.infoBubbleIcon
|
||||
)}
|
||||
>
|
||||
<div className={classNames(styles.infoBubble, styles.memberName)}>
|
||||
{audioMuted && !(videoMuted && !noVideo) && <MicMutedIcon />}
|
||||
{videoMuted && !noVideo && <VideoMutedIcon />}
|
||||
{showName && <span title={name}>{name}</span>}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{showOptions && (
|
||||
<div
|
||||
className={classNames(
|
||||
styles.infoBubble,
|
||||
styles.button,
|
||||
styles.audioButton
|
||||
)}
|
||||
>
|
||||
<AudioButton volume={localVolume} onPress={onOptionsPress} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<video ref={mediaRef} playsInline disablePictureInPicture />
|
||||
</animated.div>
|
||||
);
|
||||
|
|
|
@ -49,6 +49,7 @@
|
|||
height: 24px;
|
||||
padding: 0 8px;
|
||||
color: var(--primary-content);
|
||||
background-color: var(--background-85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
@ -59,38 +60,36 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.infoBubbleIcon {
|
||||
background-color: var(--background-85);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.videoTile:not(.isLocal):hover::before {
|
||||
content: "";
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: calc(
|
||||
16px + 20px + 16px
|
||||
); /* top padding + button size + buttom padding */
|
||||
height: 42px;
|
||||
|
||||
color: var(--primary-content);
|
||||
background-color: var(--background-85);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.videoTile:hover .button {
|
||||
display: initial;
|
||||
.videoTile:not(.isLocal):not(:hover) .toolbar {
|
||||
//display: none;
|
||||
}
|
||||
|
||||
.button button svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
.button {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.audioButton {
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
.button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.memberName {
|
||||
|
@ -130,7 +129,9 @@
|
|||
|
||||
.presenterLabel {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
top: calc(
|
||||
16px + 20px + 16px + 20px
|
||||
); /* top padding + button size + buttom padding + top padding */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #17191c;
|
||||
|
|
Loading…
Reference in a new issue