mirror of
https://github.com/vector-im/element-call.git
synced 2026-03-07 05:47:03 +00:00
1897210a60
* Initial support for Hand Raise feature Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Refactored to use reaction and redaction events Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Replacing button svg with raised hand emoji Signed-off-by: Milton Moura <miltonmoura@gmail.com> * SpotlightTile should not duplicate the raised hand Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Update src/room/useRaisedHands.tsx Element Call recently changed to AGPL-3.0 * Use relations to load existing reactions when joining the call Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Links to sha commit of matrix-js-sdk that exposes the call membership event id and refactors some async code Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Removing RaiseHand.svg * Check for reaction & redaction capabilities in widget mode Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Fix failing GridTile test Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Center align hand raise. * Add support for displaying the duration of a raised hand. * Add a sound for when a hand is raised. * Refactor raised hand indicator and add tests. * lint * Refactor into own files. * Redact the right thing. * Tidy up useEffect * Lint tests * Remove extra layer * Add better sound. (woosh) * Add a small mode for spotlight * Fix timestamp calculation on relaod. * Fix call border resizing video * lint * Fix and update tests * Allow timer to be configurable. * Add preferences tab for choosing to enable timer. * Drop border from raised hand icon * Handle cases when a new member event happens. * Prevent infinite loop * Major refactor to support various state problems. * Tidy up and finish test rewrites * Add some explanation comments. * Even more comments. * Use proper duration formatter * Remove rerender * Fix redactions not working because they pick up events in transit. * More tidying * Use deferred value * linting * Add tests for cases where we got a reaction from someone else. * Be even less brittle. * Transpose border to GridTile. * lint --------- Signed-off-by: Milton Moura <miltonmoura@gmail.com> Co-authored-by: fkwp <fkwp@users.noreply.github.com> Co-authored-by: Half-Shot <will@half-shot.uk> Co-authored-by: Will Hunt <github@half-shot.uk>
83 lines
1.9 KiB
CSS
83 lines
1.9 KiB
CSS
/*
|
|
Copyright 2022-2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
.tile {
|
|
--media-view-border-radius: var(--cpd-space-4x);
|
|
transition: outline-color ease 0.15s;
|
|
outline: var(--cpd-border-width-2) solid rgb(0 0 0 / 0);
|
|
}
|
|
|
|
/* Use a pseudo-element to create the expressive speaking border, since CSS
|
|
borders don't support gradients */
|
|
.tile::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1; /* Put it below the outline */
|
|
opacity: 0; /* Hidden unless speaking */
|
|
transition: opacity ease 0.15s;
|
|
inset: calc(-1 * var(--cpd-border-width-4));
|
|
border-radius: var(--cpd-space-5x);
|
|
background-blend-mode: overlay, normal;
|
|
}
|
|
|
|
.tile.speaking {
|
|
/* !important because speaking border should take priority over hover */
|
|
outline: var(--cpd-border-width-1) solid var(--cpd-color-bg-canvas-default) !important;
|
|
}
|
|
|
|
.tile.speaking::before {
|
|
background: linear-gradient(
|
|
119deg,
|
|
rgba(13, 92, 189, 0.7) 0%,
|
|
rgba(13, 189, 168, 0.7) 100%
|
|
),
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(13, 92, 189, 0.9) 0%,
|
|
rgba(13, 189, 168, 0.9) 100%
|
|
);
|
|
opacity: 1;
|
|
}
|
|
|
|
.tile.handRaised {
|
|
/* !important because hand raised border should take priority over hover */
|
|
outline: var(--cpd-border-width-2) solid var(--cpd-color-bg-canvas-default) !important;
|
|
}
|
|
|
|
.tile.handRaised::before {
|
|
background: linear-gradient(
|
|
119deg,
|
|
var(--cpd-color-yellow-1200) 0%,
|
|
var(--cpd-color-yellow-900) 100%
|
|
),
|
|
linear-gradient(
|
|
180deg,
|
|
var(--cpd-color-yellow-1200) 0%,
|
|
var(--cpd-color-yellow-900) 100%
|
|
);
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.tile:hover {
|
|
outline: var(--cpd-border-width-2) solid
|
|
var(--cpd-color-border-interactive-hovered);
|
|
}
|
|
}
|
|
|
|
.muteIcon[data-muted="true"] {
|
|
color: var(--cpd-color-icon-secondary);
|
|
}
|
|
|
|
.muteIcon[data-muted="false"] {
|
|
color: var(--cpd-color-icon-primary);
|
|
}
|
|
|
|
.volumeSlider {
|
|
width: 100%;
|
|
}
|