mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-16 12:10:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Blurhash support (#701)

Browse source 
* Generate blurhash client side

* Make blurhash generation faster

* Simple blurhash display support

* Make image display simpler

* Support non square images

* Don't attach video blurhash to thumbnail

* Add video display support

* Ignore alt tag missing warning

Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>
This commit is contained in:
ginnyTheCat 2022-08-06 05:56:26 +02:00 • committed by GitHub
parent edace32213
commit 04f910ee03
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 110 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/app/molecules/media/Media.jsx
View file

@ -4,6 +4,7 @@ import './Media.scss';
import encrypt from 'browser-encrypt-attachment';
import { BlurhashCanvas } from 'react-blurhash';
import Text from '../../atoms/text/Text';
import IconButton from '../../atoms/button/IconButton';
import Spinner from '../../atoms/spinner/Spinner';
@ -154,7 +155,7 @@ File.propTypes = {
};
function Image({
name, width, height, link, file, type,
name, width, height, link, file, type, blurhash,
}) {
const [url, setUrl] = useState(null);
@ -175,6 +176,7 @@ function Image({
<div className="file-container">
<FileHeader name={name} link={url || link} type={type} external />
<div style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }} className="image-container">
{ blurhash && <BlurhashCanvas hash={blurhash} punch={1} />}
{ url !== null && <img src={url || link} alt={name} />}
</div>
</div>
@ -185,6 +187,7 @@ Image.defaultProps = {
width: null,
height: null,
type: '',
blurhash: '',
};
Image.propTypes = {
name: PropTypes.string.isRequired,
@ -193,6 +196,7 @@ Image.propTypes = {
link: PropTypes.string.isRequired,
file: PropTypes.shape({}),
type: PropTypes.string,
blurhash: PropTypes.string,
};
function Sticker({
@ -278,8 +282,8 @@ Audio.propTypes = {
};
function Video({
name, link, thumbnail,
width, height, file, type, thumbnailFile, thumbnailType,
name, link, thumbnail, thumbnailFile, thumbnailType,
width, height, file, type, blurhash,
}) {
const [isLoading, setIsLoading] = useState(false);
const [url, setUrl] = useState(null);
@ -315,10 +319,14 @@ function Video({
<div
style={{
height: width !== null ? getNativeHeight(width, height) : 'unset',
backgroundImage: thumbUrl === null ? 'none' : `url(${thumbUrl}`,
}}
className="video-container"
>
{ url === null && blurhash && <BlurhashCanvas hash={blurhash} punch={1} />}
{ url === null && thumbUrl !== null && (
/* eslint-disable-next-line jsx-a11y/alt-text */
<img src={thumbUrl} />
)}
{ url === null && isLoading && <Spinner size="small" /> }
{ url === null && !isLoading && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
{ url !== null && (
@ -336,20 +344,22 @@ Video.defaultProps = {
height: null,
file: null,
thumbnail: null,
type: '',
thumbnailType: null,
thumbnailFile: null,
type: '',
blurhash: null,
};
Video.propTypes = {
name: PropTypes.string.isRequired,
link: PropTypes.string.isRequired,
thumbnail: PropTypes.string,
thumbnailFile: PropTypes.shape({}),
thumbnailType: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
file: PropTypes.shape({}),
type: PropTypes.string,
thumbnailFile: PropTypes.shape({}),
thumbnailType: PropTypes.string,
blurhash: PropTypes.string,
};
export {