data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: remove intrinsicsize in favor of width/height (#1690)

Browse source
This commit is contained in:
Nolan Lawson 2019-12-24 10:47:27 -08:00 committed by GitHub
parent f5bb8a0b14
commit 21a300bd4c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/routes/_components/dialog/components/MediaFocalPointEditor.html
View file

@ -4,7 +4,8 @@
> >
<div class="media-focal-point-image-container" ref:container> <div class="media-focal-point-image-container" ref:container>
<img <img
{intrinsicsize} width={intrinsicWidth}
height={intrinsicHeight}
class="media-focal-point-image" class="media-focal-point-image"
src={previewSrc} src={previewSrc}
alt={shortName} alt={shortName}
@ -229,14 +230,10 @@
// so fall back to the description if it was provided // so fall back to the description if it was provided
get(mediaItem, ['file', 'name']) || get(mediaItem, ['description']) || 'media' get(mediaItem, ['file', 'name']) || get(mediaItem, ['description']) || 'media'
), ),
intrinsicsize: ({ mediaItem }) => { // intrinsic width/height to avoid layout shifting https://chromestatus.com/feature/5695266130755584
const width = get(mediaItem, ['data', 'meta', 'original', 'width']) // note pleroma does not give us intrinsic width/height
const height = get(mediaItem, ['data', 'meta', 'original', 'height']) intrinsicWidth: ({ mediaItem }) => get(mediaItem, ['data', 'meta', 'original', 'width']),
if (width && height) { intrinsicHeight: ({ mediaItem }) => get(mediaItem, ['data', 'meta', 'original', 'height']),
return `${width} x ${height}`
}
return '' // pleroma does not give us original width/height
},
scale: ({ nativeWidth, nativeHeight, containerWidth, containerHeight }) => ( scale: ({ nativeWidth, nativeHeight, containerWidth, containerHeight }) => (
intrinsicScale(containerWidth, containerHeight, nativeWidth, nativeHeight) intrinsicScale(containerWidth, containerHeight, nativeWidth, nativeHeight)
), ),

21
src/routes/_components/dialog/components/MediaInDialog.html
View file

@ -5,7 +5,8 @@
src={url} src={url}
{poster} {poster}
controls controls
{intrinsicsize} width={intrinsicWidth}
height={intrinsicHeight}
ref:player ref:player
/> />
{:elseif type === 'audio'} {:elseif type === 'audio'}
@ -29,7 +30,8 @@
loop loop
webkit-playsinline webkit-playsinline
playsinline playsinline
{intrinsicsize} width={intrinsicWidth}
height={intrinsicHeight}
/> />
{:else} {:else}
<img <img
@ -37,7 +39,8 @@
alt={description} alt={description}
title={description} title={description}
src={url} src={url}
{intrinsicsize} width={intrinsicWidth}
height={intrinsicHeight}
/> />
{/if} {/if}
<style> <style>
@ -78,14 +81,10 @@
description: ({ media }) => media.description || '', description: ({ media }) => media.description || '',
poster: ({ media }) => media.preview_url, poster: ({ media }) => media.preview_url,
static_url: ({ media }) => media.static_url, static_url: ({ media }) => media.static_url,
intrinsicsize: ({ media }) => { // intrinsic width/height to avoid layout shifting https://chromestatus.com/feature/5695266130755584
const width = get(media, ['meta', 'original', 'width']) // note pleroma does not give us intrinsic width/height
const height = get(media, ['meta', 'original', 'height']) intrinsicWidth: ({ media }) => get(media, ['meta', 'original', 'width']),
if (width && height) { intrinsicHeight: ({ media }) => get(media, ['meta', 'original', 'height'])
return `${width} x ${height}`
}
return '' // pleroma does not give us original width/height
}
}, },
ondestroy () { ondestroy () {
const player = this.refs.player const player = this.refs.player