fix(captions): Lift captions upper when invite box is shown & fix icon
This commit is contained in:
Vlad Piersec
Дамян Минков
parent
dfd33521bf
commit
3426290bf2
|
|
@ -1,10 +1,11 @@
|
|||
.transcription-subtitles{
|
||||
bottom: 10%;
|
||||
.transcription-subtitles {
|
||||
bottom: $newToolbarSize + 40px;
|
||||
font-size: 16px;
|
||||
font-weight: 1000;
|
||||
left: 50%;
|
||||
max-width: 50vw;
|
||||
opacity: 0.80;
|
||||
overflow-wrap: break-word;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
text-shadow: 0px 0px 1px rgba(0,0,0,0.3),
|
||||
|
|
@ -14,6 +15,11 @@
|
|||
transform: translateX(-50%);
|
||||
z-index: $subtitlesZ;
|
||||
|
||||
&.lifted {
|
||||
// Lift subtitle above toolbar+invite box.
|
||||
bottom: $newToolbarSize + 112px + 40px;
|
||||
}
|
||||
|
||||
span {
|
||||
background: black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.66671 3.66665H18.3334V18.3333H3.66671V3.66665ZM1.83337 3.66665C1.83337 2.65412 2.65419 1.83331 3.66671 1.83331H18.3334C19.3459 1.83331 20.1667 2.65412 20.1667 3.66665V18.3333C20.1667 19.3458 19.3459 20.1666 18.3334 20.1666H3.66671C2.65419 20.1666 1.83337 19.3458 1.83337 18.3333V3.66665ZM6.87046 13.9461C7.31535 14.1924 7.82776 14.3156 8.40771 14.3156C8.74932 14.3156 9.08298 14.2719 9.40871 14.1845C9.73443 14.0891 10.0204 13.962 10.2667 13.8031C10.4018 13.7237 10.4971 13.6363 10.5527 13.541C10.6163 13.4377 10.648 13.3185 10.648 13.1835C10.648 13.0166 10.6043 12.8776 10.517 12.7664C10.4296 12.6552 10.3223 12.5996 10.1952 12.5996C10.1078 12.5996 10.0204 12.6194 9.93304 12.6591C9.84565 12.6909 9.74237 12.7426 9.62321 12.8141C9.43254 12.9173 9.25776 13.0008 9.09887 13.0643C8.94793 13.1199 8.77315 13.1477 8.57454 13.1477C8.08198 13.1477 7.70065 12.9888 7.43054 12.6711C7.16837 12.3453 7.03729 11.8846 7.03729 11.2887C7.03729 10.685 7.16837 10.2242 7.43054 9.9064C7.70065 9.58067 8.08198 9.41781 8.57454 9.41781C8.7811 9.41781 8.96382 9.44959 9.12271 9.51315C9.2816 9.56876 9.44843 9.6482 9.62321 9.75148C9.71854 9.80709 9.81387 9.85476 9.90921 9.89448C10.0045 9.9342 10.0959 9.95406 10.1833 9.95406C10.3183 9.95406 10.4256 9.90242 10.505 9.79915C10.5924 9.68792 10.6361 9.54492 10.6361 9.37015C10.6361 9.11592 10.509 8.9054 10.2548 8.73856C10.0165 8.58762 9.7384 8.46845 9.42062 8.38106C9.11079 8.29367 8.80096 8.24998 8.49112 8.24998C7.90323 8.24998 7.38287 8.37709 6.93004 8.63131C6.47721 8.88554 6.12368 9.24701 5.86946 9.71573C5.62318 10.1765 5.50004 10.7088 5.50004 11.3126C5.50004 11.9163 5.61921 12.4446 5.85754 12.8975C6.09587 13.3503 6.43351 13.6999 6.87046 13.9461ZM12.6891 13.9461C13.134 14.1924 13.6464 14.3156 14.2264 14.3156C14.568 14.3156 14.9017 14.2719 15.2274 14.1845C15.5531 14.0891 15.8391 13.962 16.0854 13.8031C16.2204 13.7237 16.3158 13.6363 16.3714 13.541C16.4349 13.4377 16.4667 13.3185 16.4667 13.1835C16.4667 13.0166 16.423 12.8776 16.3356 12.7664C16.2483 12.6552 16.141 12.5996 16.0139 12.5996C15.9265 12.5996 15.8391 12.6194 15.7517 12.6591C15.6643 12.6909 15.5611 12.7426 15.4419 12.8141C15.2512 12.9173 15.0764 13.0008 14.9176 13.0643C14.7666 13.1199 14.5918 13.1477 14.3932 13.1477C13.9007 13.1477 13.5193 12.9888 13.2492 12.6711C12.9871 12.3453 12.856 11.8846 12.856 11.2887C12.856 10.685 12.9871 10.2242 13.2492 9.9064C13.5193 9.58067 13.9007 9.41781 14.3932 9.41781C14.5998 9.41781 14.7825 9.44959 14.9414 9.51315C15.1003 9.56876 15.2671 9.6482 15.4419 9.75148C15.5372 9.80709 15.6326 9.85476 15.7279 9.89448C15.8232 9.9342 15.9146 9.95406 16.002 9.95406C16.137 9.95406 16.2443 9.90242 16.3237 9.79915C16.4111 9.68792 16.4548 9.54492 16.4548 9.37015C16.4548 9.11592 16.3277 8.9054 16.0735 8.73856C15.8351 8.58762 15.5571 8.46845 15.2393 8.38106C14.9295 8.29367 14.6196 8.24998 14.3098 8.24998C13.7219 8.24998 13.2016 8.37709 12.7487 8.63131C12.2959 8.88554 11.9424 9.24701 11.6881 9.71573C11.4419 10.1765 11.3187 10.7088 11.3187 11.3126C11.3187 11.9163 11.4379 12.4446 11.6762 12.8975C11.9146 13.3503 12.2522 13.6999 12.6891 13.9461Z" />
|
||||
</svg>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.33335 3.33335H16.6667V16.6667H3.33335V3.33335ZM1.66669 3.33335C1.66669 2.41288 2.41288 1.66669 3.33335 1.66669H16.6667C17.5872 1.66669 18.3334 2.41288 18.3334 3.33335V16.6667C18.3334 17.5872 17.5872 18.3334 16.6667 18.3334H3.33335C2.41288 18.3334 1.66669 17.5872 1.66669 16.6667V3.33335ZM6.24585 12.6784C6.6503 12.9022 7.11613 13.0142 7.64335 13.0142C7.95391 13.0142 8.25724 12.9745 8.55335 12.895C8.84946 12.8084 9.10946 12.6928 9.33335 12.5484C9.45613 12.4761 9.5428 12.3967 9.59335 12.31C9.65113 12.2161 9.68002 12.1078 9.68002 11.985C9.68002 11.8334 9.6403 11.707 9.56085 11.6059C9.48141 11.5047 9.38391 11.4542 9.26835 11.4542C9.18891 11.4542 9.10946 11.4722 9.03002 11.5084C8.95058 11.5372 8.85669 11.5842 8.74835 11.6492C8.57502 11.7431 8.41613 11.8189 8.27169 11.8767C8.13446 11.9272 7.97558 11.9525 7.79502 11.9525C7.34724 11.9525 7.00058 11.8081 6.75502 11.5192C6.51669 11.2231 6.39752 10.8042 6.39752 10.2625C6.39752 9.71363 6.51669 9.29474 6.75502 9.00585C7.00058 8.70974 7.34724 8.56169 7.79502 8.56169C7.9828 8.56169 8.14891 8.59058 8.29335 8.64835C8.4378 8.69891 8.58946 8.77113 8.74835 8.86502C8.83502 8.91558 8.92169 8.95891 9.00835 8.99502C9.09502 9.03113 9.17808 9.04919 9.25752 9.04919C9.3803 9.04919 9.4778 9.00224 9.55002 8.90835C9.62946 8.80724 9.66919 8.67724 9.66919 8.51835C9.66919 8.28724 9.55363 8.09585 9.32252 7.94419C9.10585 7.80696 8.85308 7.69863 8.56419 7.61919C8.28252 7.53974 8.00085 7.50002 7.71919 7.50002C7.18474 7.50002 6.71169 7.61558 6.30002 7.84669C5.88835 8.0778 5.56696 8.40641 5.33585 8.83252C5.11196 9.25141 5.00002 9.7353 5.00002 10.2842C5.00002 10.8331 5.10835 11.3134 5.32502 11.725C5.54169 12.1367 5.84863 12.4545 6.24585 12.6784ZM11.5356 12.6784C11.94 12.9022 12.4058 13.0142 12.9331 13.0142C13.2436 13.0142 13.547 12.9745 13.8431 12.895C14.1392 12.8084 14.3992 12.6928 14.6231 12.5484C14.7458 12.4761 14.8325 12.3967 14.8831 12.31C14.9408 12.2161 14.9697 12.1078 14.9697 11.985C14.9697 11.8334 14.93 11.707 14.8506 11.6059C14.7711 11.5047 14.6736 11.4542 14.5581 11.4542C14.4786 11.4542 14.3992 11.4722 14.3197 11.5084C14.2403 11.5372 14.1464 11.5842 14.0381 11.6492C13.8647 11.7431 13.7058 11.8189 13.5614 11.8767C13.4242 11.9272 13.2653 11.9525 13.0847 11.9525C12.637 11.9525 12.2903 11.8081 12.0447 11.5192C11.8064 11.2231 11.6872 10.8042 11.6872 10.2625C11.6872 9.71363 11.8064 9.29474 12.0447 9.00585C12.2903 8.70974 12.637 8.56169 13.0847 8.56169C13.2725 8.56169 13.4386 8.59058 13.5831 8.64835C13.7275 8.69891 13.8792 8.77113 14.0381 8.86502C14.1247 8.91558 14.2114 8.95891 14.2981 8.99502C14.3847 9.03113 14.4678 9.04919 14.5472 9.04919C14.67 9.04919 14.7675 9.00224 14.8397 8.90835C14.9192 8.80724 14.9589 8.67724 14.9589 8.51835C14.9589 8.28724 14.8433 8.09585 14.6122 7.94419C14.3956 7.80696 14.1428 7.69863 13.8539 7.61919C13.5722 7.53974 13.2906 7.50002 13.0089 7.50002C12.4745 7.50002 12.0014 7.61558 11.5897 7.84669C11.1781 8.0778 10.8567 8.40641 10.6256 8.83252C10.4017 9.25141 10.2897 9.7353 10.2897 10.2842C10.2897 10.8331 10.3981 11.3134 10.6147 11.725C10.8314 12.1367 11.1383 12.4545 11.5356 12.6784Z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.1 KiB |
|
|
@ -7,9 +7,17 @@ import { connect } from '../../base/redux';
|
|||
import {
|
||||
_abstractMapStateToProps,
|
||||
AbstractCaptions,
|
||||
type AbstractCaptionsProps as Props
|
||||
type AbstractCaptionsProps
|
||||
} from './AbstractCaptions';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* Whether the subtitles container is lifted above the invite box.
|
||||
*/
|
||||
_isLifted: boolean
|
||||
} & AbstractCaptionsProps;
|
||||
|
||||
/**
|
||||
* React {@code Component} which can display speech-to-text results from
|
||||
* Jigasi as subtitles.
|
||||
|
|
@ -45,12 +53,30 @@ class Captions
|
|||
*/
|
||||
_renderSubtitlesContainer(
|
||||
paragraphs: Array<React$Element<*>>): React$Element<*> {
|
||||
|
||||
const className = this.props._isLifted ? 'transcription-subtitles lifted' : 'transcription-subtitles';
|
||||
|
||||
return (
|
||||
<div className = 'transcription-subtitles' >
|
||||
<div className = { className } >
|
||||
{ paragraphs }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(_abstractMapStateToProps)(Captions);
|
||||
/**
|
||||
* Maps (parts of) the redux state to the associated {@code }'s
|
||||
* props.
|
||||
*
|
||||
* @param {Object} state - The redux state.
|
||||
* @private
|
||||
* @returns {Object}
|
||||
*/
|
||||
function mapStateToProps(state) {
|
||||
return {
|
||||
..._abstractMapStateToProps(state),
|
||||
_isLifted: state['features/base/participants'].length < 2
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(Captions);
|
||||
|
|
|
|||
Loading…
Reference in New Issue