-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* added blurhash dep * send blurhash from client * added blurhash to server side * added blurhash to headers * added hash to files headers part ii * move custom header name to shared * added server side test to make sure blurhash is being stored with the file * move blurhash logic to common components logic * wip: moving a lot of stuff around and breaking up image component to parts * added logic for loading blurhash client-side using header values * reorder some stuff, added http to files context for example * added resize files test * tweak sizes of the blurs * removed custom blurhash header * renamed util to blurhash * fixed some loading states to not show alt text, updated stories to show blurhash and removed styling on container * remove http from filescontext * pass blurhash to image component * improved usability of the component by passing in wrapper props and allowing consumers to set an image size the same way they can for EuiImage * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * removed all traces of blurhash field from file saved object * create special file image metadata type * rename blurhash files and return full image metadata * refactor blurhash in upload state to image metadata factory * finish refactor of blurhash file * pass back the original image size to the metadata * more refactoring and added some comments to the metadata type * pass metadata type through to endpoint * pass metadata type through on client side * wip * updated files example to pass through shape of metadata * some final touches * updated comment * make default size original * rename common -> util * update import path after refactor * update style overrides for the blurhash story * MyImage -> Img * fix type lints Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit dbbf3ad) Co-authored-by: Jean-Louis Leysens <[email protected]>
- Loading branch information
1 parent
40b007e
commit 15a5982
Showing
34 changed files
with
551 additions
and
94 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
x-pack/plugins/files/public/components/image/components/blurhash.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
| import { decode } from 'blurhash'; | ||
| import React, { useRef, useEffect } from 'react'; | ||
| import type { FunctionComponent } from 'react'; | ||
| import { useEuiTheme } from '@elastic/eui'; | ||
| import { css } from '@emotion/react'; | ||
| import { fitToBox } from '../../util'; | ||
|
|
||
| interface Props { | ||
| visible: boolean; | ||
| hash: string; | ||
| width: number; | ||
| height: number; | ||
| isContainerWidth: boolean; | ||
| } | ||
|
|
||
| export const Blurhash: FunctionComponent<Props> = ({ | ||
| visible, | ||
| hash, | ||
| width, | ||
| height, | ||
| isContainerWidth, | ||
| }) => { | ||
| const ref = useRef<null | HTMLImageElement>(null); | ||
| const { euiTheme } = useEuiTheme(); | ||
| useEffect(() => { | ||
| try { | ||
| const { width: blurWidth, height: blurHeight } = fitToBox(width, height); | ||
| const canvas = document.createElement('canvas'); | ||
| canvas.width = blurWidth; | ||
| canvas.height = blurHeight; | ||
| const ctx = canvas.getContext('2d')!; | ||
| const imageData = ctx.createImageData(blurWidth, blurHeight); | ||
| imageData.data.set(decode(hash, blurWidth, blurHeight)); | ||
| ctx.putImageData(imageData, 0, 0); | ||
| ref.current!.src = canvas.toDataURL(); | ||
| } catch (e) { | ||
| // eslint-disable-next-line no-console | ||
| console.error(e); | ||
| } | ||
| }, [hash, width, height]); | ||
| return ( | ||
| <img | ||
| alt="" | ||
| css={css` | ||
| top: 0; | ||
| width: ${isContainerWidth ? '100%' : width + 'px'}; | ||
| z-index: -1; | ||
| position: ${visible ? 'unset' : 'absolute'}; | ||
| opacity: ${visible ? 1 : 0}; | ||
| transition: opacity ${euiTheme.animation.extraFast}; | ||
| `} | ||
| ref={ref} | ||
| /> | ||
| ); | ||
| }; |
50 changes: 50 additions & 0 deletions
50
x-pack/plugins/files/public/components/image/components/img.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
| import React from 'react'; | ||
| import type { ImgHTMLAttributes, MutableRefObject } from 'react'; | ||
| import type { EuiImageSize } from '@elastic/eui/src/components/image/image_types'; | ||
| import { useEuiTheme } from '@elastic/eui'; | ||
| import { css } from '@emotion/react'; | ||
| import { sizes } from '../styles'; | ||
|
|
||
| export interface Props extends ImgHTMLAttributes<HTMLImageElement> { | ||
| hidden: boolean; | ||
| size?: EuiImageSize; | ||
| observerRef: (el: null | HTMLImageElement) => void; | ||
| } | ||
|
|
||
| export const Img = React.forwardRef<HTMLImageElement, Props>( | ||
| ({ observerRef, src, hidden, size, ...rest }, ref) => { | ||
| const { euiTheme } = useEuiTheme(); | ||
| const styles = [ | ||
| css` | ||
| transition: opacity ${euiTheme.animation.extraFast}; | ||
| `, | ||
| hidden | ||
| ? css` | ||
| visibility: hidden; | ||
| ` | ||
| : undefined, | ||
| size ? sizes[size] : undefined, | ||
| ]; | ||
| return ( | ||
| <img | ||
| alt="" | ||
| css={styles} | ||
| {...rest} | ||
| src={src} | ||
| ref={(element) => { | ||
| observerRef(element); | ||
| if (ref) { | ||
| if (typeof ref === 'function') ref(element); | ||
| else (ref as MutableRefObject<HTMLImageElement | null>).current = element; | ||
| } | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
| ); |
10 changes: 10 additions & 0 deletions
10
x-pack/plugins/files/public/components/image/components/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| export { Img } from './img'; | ||
| export type { Props as ImgProps } from './img'; | ||
| export { Blurhash } from './blurhash'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.