imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #6454 from SimonBrandner/feature/image-view-load-anim/18186

Browse source 
* Give lightbox a background load animation
* Extends IMediaEventContent by thumbnail info
* Give image view panel a loading animation
* Initial implementation of loading animation
* Take panel height into account
* Update animation speed
* Add some null guards
* Fix animation issues
* Move animations into _animations
* Where does that magic number come from?
* Remove awaiting setState()
* Use CSS var in JS
* Handle prefers-reduced-motion
* More prefers-reduced-motion friendliness

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Dariusz Niemczyk 2021-09-21 18:05:13 +02:00 • committed by GitHub
commit 7bd3535b9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 149 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/views/rooms/LinkPreviewWidget.tsx
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { createRef } from 'react';
import React, { ComponentProps, createRef } from 'react';
import { AllHtmlEntities } from 'html-entities';
import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
import { IPreviewUrlResponse } from 'matrix-js-sdk/src/client';
@ -36,6 +36,7 @@ interface IProps {
@replaceableComponent("views.rooms.LinkPreviewWidget")
export default class LinkPreviewWidget extends React.Component<IProps> {
private readonly description = createRef<HTMLDivElement>();
private image = createRef<HTMLImageElement>();
componentDidMount() {
if (this.description.current) {
@ -59,7 +60,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
src = mediaFromMxc(src).srcHttp;
}
const params = {
const params: Omit<ComponentProps<typeof ImageView>, "onFinished"> = {
src: src,
width: p["og:image:width"],
height: p["og:image:height"],
@ -68,6 +69,17 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
link: this.props.link,
};
if (this.image.current) {
const clientRect = this.image.current.getBoundingClientRect();
params.thumbnailInfo = {
width: clientRect.width,
height: clientRect.height,
positionX: clientRect.x,
positionY: clientRect.y,
};
}
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
};
@ -100,7 +112,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
let img;
if (image) {
img = <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>
<img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={image} onClick={this.onImageClick} />
<img ref={this.image} style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={image} onClick={this.onImageClick} />
</div>;
}