fix(virtual-background) keep selected state on dialog
This commit is contained in:
parent
bf3726cb93
commit
7ca04ccb0f
|
@ -18,6 +18,8 @@ export const BACKGROUND_ENABLED = 'BACKGROUND_ENABLED';
|
|||
* type: SET_VIRTUAL_BACKGROUND,
|
||||
* virtualSource: string,
|
||||
* blurValue: number,
|
||||
* backgroundType: string,
|
||||
* selectedThumbnail: string
|
||||
* }}
|
||||
*/
|
||||
export const SET_VIRTUAL_BACKGROUND = 'SET_VIRTUAL_BACKGROUND';
|
||||
|
|
|
@ -50,7 +50,8 @@ export function setVirtualBackground(options: Object) {
|
|||
type: SET_VIRTUAL_BACKGROUND,
|
||||
virtualSource: options?.url,
|
||||
blurValue: options?.blurValue,
|
||||
backgroundType: options?.backgroundType
|
||||
backgroundType: options?.backgroundType,
|
||||
selectedThumbnail: options?.selectedThumbnail
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -20,24 +20,29 @@ import logger from '../logger';
|
|||
const backgroundsLimit = 25;
|
||||
const images = [
|
||||
{
|
||||
id: 1,
|
||||
id: '1',
|
||||
src: 'images/virtual-background/background-1.jpg'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
id: '2',
|
||||
src: 'images/virtual-background/background-2.jpg'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
id: '3',
|
||||
src: 'images/virtual-background/background-3.jpg'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
id: '4',
|
||||
src: 'images/virtual-background/background-4.jpg'
|
||||
}
|
||||
];
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* Returns the selected thumbnail identifier.
|
||||
*/
|
||||
_selectedThumbnail: string,
|
||||
|
||||
/**
|
||||
* The redux {@code dispatch} function.
|
||||
*/
|
||||
|
@ -54,7 +59,7 @@ type Props = {
|
|||
*
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
function VirtualBackground({ dispatch, t }: Props) {
|
||||
function VirtualBackground({ _selectedThumbnail, dispatch, t }: Props) {
|
||||
const localImages = jitsiLocalStorage.getItem('virtualBackgrounds');
|
||||
const [ storedImages, setStoredImages ] = useState((localImages && JSON.parse(localImages)) || []);
|
||||
const [ loading, isloading ] = useState(false);
|
||||
|
@ -78,15 +83,14 @@ function VirtualBackground({ dispatch, t }: Props) {
|
|||
}
|
||||
}, [ storedImages ]);
|
||||
|
||||
const [ selected, setSelected ] = useState('');
|
||||
const enableBlur = async (blurValue, selection) => {
|
||||
isloading(true);
|
||||
setSelected(selection);
|
||||
await dispatch(
|
||||
toggleBackgroundEffect({
|
||||
backgroundType: 'blur',
|
||||
enabled: true,
|
||||
blurValue
|
||||
blurValue,
|
||||
selectedThumbnail: selection
|
||||
})
|
||||
);
|
||||
isloading(false);
|
||||
|
@ -94,10 +98,10 @@ function VirtualBackground({ dispatch, t }: Props) {
|
|||
|
||||
const removeBackground = async () => {
|
||||
isloading(true);
|
||||
setSelected('none');
|
||||
await dispatch(
|
||||
toggleBackgroundEffect({
|
||||
enabled: false
|
||||
enabled: false,
|
||||
selectedThumbnail: 'none'
|
||||
})
|
||||
);
|
||||
isloading(false);
|
||||
|
@ -105,12 +109,12 @@ function VirtualBackground({ dispatch, t }: Props) {
|
|||
|
||||
const setUploadedImageBackground = async image => {
|
||||
isloading(true);
|
||||
setSelected(image.id);
|
||||
await dispatch(
|
||||
toggleBackgroundEffect({
|
||||
backgroundType: 'image',
|
||||
enabled: true,
|
||||
url: image.src
|
||||
url: image.src,
|
||||
selectedThumbnail: image.id
|
||||
})
|
||||
);
|
||||
isloading(false);
|
||||
|
@ -118,14 +122,14 @@ function VirtualBackground({ dispatch, t }: Props) {
|
|||
|
||||
const setImageBackground = async image => {
|
||||
isloading(true);
|
||||
setSelected(image.id);
|
||||
const url = await toDataURL(image.src);
|
||||
|
||||
await dispatch(
|
||||
toggleBackgroundEffect({
|
||||
backgroundType: 'image',
|
||||
enabled: true,
|
||||
url
|
||||
url,
|
||||
selectedThumbnail: image.id
|
||||
})
|
||||
);
|
||||
isloading(false);
|
||||
|
@ -137,12 +141,13 @@ function VirtualBackground({ dispatch, t }: Props) {
|
|||
reader.readAsDataURL(imageFile[0]);
|
||||
reader.onload = async () => {
|
||||
const url = await resizeImage(reader.result);
|
||||
const uuId = uuid.v4();
|
||||
|
||||
isloading(true);
|
||||
setStoredImages([
|
||||
...storedImages,
|
||||
{
|
||||
id: uuid.v4(),
|
||||
id: uuId,
|
||||
src: url
|
||||
}
|
||||
]);
|
||||
|
@ -150,7 +155,8 @@ function VirtualBackground({ dispatch, t }: Props) {
|
|||
toggleBackgroundEffect({
|
||||
backgroundType: 'image',
|
||||
enabled: true,
|
||||
url
|
||||
url,
|
||||
selectedThumbnail: uuId
|
||||
})
|
||||
);
|
||||
isloading(false);
|
||||
|
@ -181,7 +187,8 @@ function VirtualBackground({ dispatch, t }: Props) {
|
|||
content = { t('virtualBackground.removeBackground') }
|
||||
position = { 'top' }>
|
||||
<div
|
||||
className = { selected === 'none' ? 'none-selected' : 'virtual-background-none' }
|
||||
className = { _selectedThumbnail === 'none'
|
||||
? 'none-selected' : 'virtual-background-none' }
|
||||
onClick = { removeBackground }>
|
||||
{t('virtualBackground.none')}
|
||||
</div>
|
||||
|
@ -190,7 +197,7 @@ function VirtualBackground({ dispatch, t }: Props) {
|
|||
content = { t('virtualBackground.slightBlur') }
|
||||
position = { 'top' }>
|
||||
<Icon
|
||||
className = { selected === 'slight-blur' ? 'blur-selected' : '' }
|
||||
className = { _selectedThumbnail === 'slight-blur' ? 'blur-selected' : '' }
|
||||
onClick = { () => enableBlur(8, 'slight-blur') }
|
||||
size = { 50 }
|
||||
src = { IconBlurBackground } />
|
||||
|
@ -199,14 +206,14 @@ function VirtualBackground({ dispatch, t }: Props) {
|
|||
content = { t('virtualBackground.blur') }
|
||||
position = { 'top' }>
|
||||
<Icon
|
||||
className = { selected === 'blur' ? 'blur-selected' : '' }
|
||||
className = { _selectedThumbnail === 'blur' ? 'blur-selected' : '' }
|
||||
onClick = { () => enableBlur(25, 'blur') }
|
||||
size = { 50 }
|
||||
src = { IconBlurBackground } />
|
||||
</Tooltip>
|
||||
{images.map((image, index) => (
|
||||
<img
|
||||
className = { selected === image.id ? 'thumbnail-selected' : 'thumbnail' }
|
||||
className = { _selectedThumbnail === image.id ? 'thumbnail-selected' : 'thumbnail' }
|
||||
key = { index }
|
||||
onClick = { () => setImageBackground(image) }
|
||||
onError = { event => event.target.style.display = 'none' }
|
||||
|
@ -235,7 +242,7 @@ function VirtualBackground({ dispatch, t }: Props) {
|
|||
className = { 'thumbnail-container' }
|
||||
key = { index }>
|
||||
<img
|
||||
className = { selected === image.id ? 'thumbnail-selected' : 'thumbnail' }
|
||||
className = { _selectedThumbnail === image.id ? 'thumbnail-selected' : 'thumbnail' }
|
||||
onClick = { () => setUploadedImageBackground(image) }
|
||||
onError = { event => event.target.style.display = 'none' }
|
||||
src = { image.src } />
|
||||
|
@ -253,4 +260,20 @@ function VirtualBackground({ dispatch, t }: Props) {
|
|||
);
|
||||
}
|
||||
|
||||
export default translate(connect()(VirtualBackground));
|
||||
/**
|
||||
* Maps (parts of) the redux state to the associated props for the
|
||||
* {@code VirtualBackground} component.
|
||||
*
|
||||
* @param {Object} state - The Redux state.
|
||||
* @private
|
||||
* @returns {{
|
||||
* _selectedThumbnail: string
|
||||
* }}
|
||||
*/
|
||||
function _mapStateToProps(state): Object {
|
||||
return {
|
||||
_selectedThumbnail: state['features/virtual-background'].selectedThumbnail
|
||||
};
|
||||
}
|
||||
|
||||
export default translate(connect(_mapStateToProps)(VirtualBackground));
|
||||
|
|
|
@ -23,7 +23,7 @@ PersistenceRegistry.register(STORE_NAME, true);
|
|||
* specified action.
|
||||
*/
|
||||
ReducerRegistry.register(STORE_NAME, (state = {}, action) => {
|
||||
const { virtualSource, backgroundEffectEnabled, blurValue, backgroundType } = action;
|
||||
const { virtualSource, backgroundEffectEnabled, blurValue, backgroundType, selectedThumbnail } = action;
|
||||
|
||||
switch (action.type) {
|
||||
case SET_VIRTUAL_BACKGROUND: {
|
||||
|
@ -31,7 +31,8 @@ ReducerRegistry.register(STORE_NAME, (state = {}, action) => {
|
|||
...state,
|
||||
virtualSource,
|
||||
blurValue,
|
||||
backgroundType
|
||||
backgroundType,
|
||||
selectedThumbnail
|
||||
};
|
||||
}
|
||||
case BACKGROUND_ENABLED: {
|
||||
|
|
Loading…
Reference in New Issue