tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

[Glitch] Center thumbnails on focus point

Browse Source 
Port the display part of the following commits to glitch-soc:
* 90f12f2e5a
* b170627ceb
* 11697d6894
* 56eb5c3f34
This commit is contained in:
Thibaut Girka 2018-04-14 20:31:47 +02:00
parent f1e25b672a
commit dcc1c10937
2 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/javascript/flavours/glitch/components/media_gallery.js
View File

@ -136,16 +136,21 @@ class Item extends React.PureComponent {
let thumbnail = ''; let thumbnail = '';
if (attachment.get('type') === 'image') { if (attachment.get('type') === 'image') {
const previewUrl = attachment.get('preview_url'); const previewUrl = attachment.get('preview_url');
const previewWidth = attachment.getIn(['meta', 'small', 'width']); const previewWidth = attachment.getIn(['meta', 'small', 'width']);
const originalUrl = attachment.get('url'); const originalUrl = attachment.get('url');
const originalWidth = attachment.getIn(['meta', 'original', 'width']); const originalWidth = attachment.getIn(['meta', 'original', 'width']);
const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number'; const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number';
const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null; const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null;
const sizes = hasSize ? `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw` : null; const sizes = hasSize ? `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw` : null;
const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;
const x = ((focusX / 2) + .5) * 100;
const y = ((focusY / -2) + .5) * 100;
thumbnail = ( thumbnail = (
<a <a
@ -154,7 +159,14 @@ class Item extends React.PureComponent {
onClick={this.handleClick} onClick={this.handleClick}
target='_blank' target='_blank'
> >
<img className={letterbox ? 'letterbox' : null} src={previewUrl} srcSet={srcSet} sizes={sizes} alt={attachment.get('description')} title={attachment.get('description')} /> <img
className={letterbox ? 'letterbox' : null}
src={previewUrl}
srcSet={srcSet}
sizes={sizes}
alt={attachment.get('description')}
title={attachment.get('description')}
style={{ objectPosition: `${x}% ${y}%` }} />
</a> </a>
); );
} else if (attachment.get('type') === 'gifv') { } else if (attachment.get('type') === 'gifv') {
@ -226,7 +238,7 @@ export default class MediaGallery extends React.PureComponent {
} }
handleRef = (node) => { handleRef = (node) => {
if (node && this.isStandaloneEligible()) { if (node /*&& this.isStandaloneEligible()*/) {
// offsetWidth triggers a layout, so only calculate when we need to // offsetWidth triggers a layout, so only calculate when we need to
this.setState({ this.setState({
width: node.offsetWidth, width: node.offsetWidth,

6
app/javascript/flavours/glitch/features/video/index.js
View File

@ -29,7 +29,7 @@ const formatTime = secondsNum => {
return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`; return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`;
}; };
const findElementPosition = el => { export const findElementPosition = el => {
let box; let box;
if (el.getBoundingClientRect && el.parentNode) { if (el.getBoundingClientRect && el.parentNode) {
@ -60,7 +60,7 @@ const findElementPosition = el => {
}; };
}; };
const getPointerPosition = (el, event) => { export const getPointerPosition = (el, event) => {
const position = {}; const position = {};
const box = findElementPosition(el); const box = findElementPosition(el);
const boxW = el.offsetWidth; const boxW = el.offsetWidth;
@ -76,7 +76,7 @@ const getPointerPosition = (el, event) => {
pageY = event.changedTouches[0].pageY; pageY = event.changedTouches[0].pageY;
} }
position.y = Math.max(0, Math.min(1, ((boxY - pageY) + boxH) / boxH)); position.y = Math.max(0, Math.min(1, (pageY - boxY) / boxH));
position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW)); position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW));
return position; return position;