You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.1 KiB
TypeScript
98 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import { isEmpty } from 'lodash';
|
|
|
|
import { useDisableDrag } from '../../../../../hooks/useDisableDrag';
|
|
import { useEncryptedFileFetch } from '../../../../../hooks/useEncryptedFileFetch';
|
|
|
|
import { icons } from '../../../../icon';
|
|
import { QuoteIcon } from './QuoteIconContainer';
|
|
|
|
const StyledQuoteImage = styled.div`
|
|
flex: initial;
|
|
min-width: 54px;
|
|
width: 54px;
|
|
max-height: 54px;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
`;
|
|
|
|
const StyledPlayButton = styled.div`
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
height: 32px;
|
|
width: 32px;
|
|
border-radius: 50%;
|
|
background-color: var(--chat-buttons-background-color);
|
|
|
|
padding-left: 3px;
|
|
|
|
&:hover {
|
|
background-color: var(--chat-buttons-background-hover-color);
|
|
}
|
|
}
|
|
|
|
svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: var(--chat-buttons-icon-color);
|
|
}
|
|
`;
|
|
|
|
export const QuoteImage = (props: {
|
|
url: string;
|
|
contentType: string;
|
|
showPlayButton?: boolean;
|
|
imageBroken: boolean;
|
|
handleImageErrorBound: () => void;
|
|
}) => {
|
|
const { url, contentType, showPlayButton, imageBroken, handleImageErrorBound } = props;
|
|
|
|
const disableDrag = useDisableDrag();
|
|
|
|
const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType, false);
|
|
const srcData = !loading ? urlToLoad : '';
|
|
|
|
return !isEmpty(srcData) && !imageBroken ? (
|
|
<StyledQuoteImage>
|
|
<img
|
|
src={srcData}
|
|
alt={window.i18n('quoteThumbnailAlt')}
|
|
onDragStart={disableDrag}
|
|
onError={handleImageErrorBound}
|
|
/>
|
|
{showPlayButton && (
|
|
<StyledPlayButton>
|
|
<div>
|
|
<svg viewBox={icons.play.viewBox}>
|
|
<path d={icons.play.path} />
|
|
</svg>
|
|
</div>
|
|
</StyledPlayButton>
|
|
)}
|
|
</StyledQuoteImage>
|
|
) : (
|
|
<QuoteIcon icon={showPlayButton ? 'movie' : 'image'} />
|
|
);
|
|
};
|