gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-29 10:53:39 +00:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

Initial implementation of tab control to play a GIF

Browse Source
This commit is contained in:
lamemakes 2023-10-06 00:41:27 -04:00
parent c676bc91e9
commit 9e61e8cd42
2 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/javascript/mastodon/components/media_gallery.jsx
View File

@ -42,18 +42,27 @@ class Item extends PureComponent {
state = {
loaded: false,
keyPlay: false,
};
handlePlay = (e) => {
e.target.play();
}
handlePause = (e) => {
e.target.pause();
e.target.currentTime = 0;
}
handleMouseEnter = (e) => {
if (this.hoverToPlay()) {
e.target.play();
this.handlePlay(e);
}
};
handleMouseLeave = (e) => {
if (this.hoverToPlay()) {
e.target.pause();
e.target.currentTime = 0;
this.handlePause(e);
}
};
@ -71,8 +80,7 @@ class Item extends PureComponent {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
if (this.hoverToPlay()) {
e.target.pause();
e.target.currentTime = 0;
this.handlePause(e)
}
e.preventDefault();
onClick(index);
@ -81,6 +89,21 @@ class Item extends PureComponent {
e.stopPropagation();
};
handleKeyPress = (e) => {
const child = e.target.children[0]
if (e.code === "Space" || e.code === "Enter"){
this.keyPlay = !this.keyPlay;
if (this.keyPlay) {
this.handlePlay({target: child});
} else {
this.handlePause({target: child});
}
} else if (e.code === "Tab"){
this.keyPlay = false;
this.handlePause({target: child});
}
}
handleImageLoad = () => {
this.setState({ loaded: true });
};
@ -162,8 +185,9 @@ class Item extends PureComponent {
badges.push(<span key='gif' className='media-gallery__gifv__label'>GIF</span>);
thumbnail = (
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })} tabIndex={autoPlay ? '-1' : '0'} onKeyDown={this.handleKeyPress}>
<video
tabIndex='-1'
className='media-gallery__item-gifv-thumbnail'
aria-label={description}
title={description}

8
app/javascript/styles/mastodon/components.scss
View File

@ -6296,7 +6296,8 @@ a.status-card {
.media-gallery {
box-sizing: border-box;
margin-top: 8px;
overflow: hidden;
// overflow: hidden;
border-radius: 8px;
position: relative;
width: 100%;
@ -6363,6 +6364,11 @@ a.status-card {
overflow: hidden;
position: relative;
width: 100%;
&:focus-visible {
outline: $ui-button-icon-focus-outline;
outline-offset: -2px;
}
}
.media-gallery__item-gifv-thumbnail {