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

tweak and simplify media appearance

Browse source
This commit is contained in:
Nolan Lawson 2018-02-01 18:29:29 -08:00
parent 137d6fed8f
commit 0b6bb6354b
1 changed files with 8 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
routes/_components/status/Media.html
View file

@ -1,7 +1,6 @@
<div class="status-media {{sensitive ? 'status-media-is-sensitive' : ''}}" <div class="status-media {{sensitive ? 'status-media-is-sensitive' : ''}}"
style="grid-template-columns: repeat(auto-fit, minmax({{minMediaWidth}}px, 1fr));" > style="grid-template-columns: repeat(auto-fit, minmax({{maxMediaWidth}}px, 1fr));" >
{{#each mediaAttachments as media}} {{#each mediaAttachments as media}}
<div class="status-media-container {{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}">
{{#if media.type === 'video'}} {{#if media.type === 'video'}}
<button type="button" <button type="button"
class="play-video-button" class="play-video-button"
@ -15,10 +14,13 @@
<img alt="{{media.description || ''}}" <img alt="{{media.description || ''}}"
src="{{media.preview_url}}" src="{{media.preview_url}}"
width="{{getSmallWidth(media)}}" width="{{getSmallWidth(media)}}"
height="{{getSmallHeight(media)}}" /> height="{{getSmallHeight(media)}}"
class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
/>
</button> </button>
{{elseif media.type === 'gifv'}} {{elseif media.type === 'gifv'}}
<video <video
class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
aria-label="Animated GIF: {{media.description || ''}}" aria-label="Animated GIF: {{media.description || ''}}"
poster="{{media.preview_url}}" poster="{{media.preview_url}}"
src="{{media.url}}" src="{{media.url}}"
@ -30,7 +32,7 @@
playsinline playsinline
/> />
{{else}} {{else}}
<img class="{{!imageLoaded ? 'image-loading' : ''}} {{imageError ? 'image-error' : ''}}" <img class="{{!imageLoaded ? 'image-loading' : ''}} {{imageError ? 'image-error' : ''}} {{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
on:imgLoad="set({imageLoaded: true})" on:imgLoad="set({imageLoaded: true})"
on:imgLoadError="set({imageError: true})" on:imgLoadError="set({imageError: true})"
alt="{{media.description || ''}}" alt="{{media.description || ''}}"
@ -38,7 +40,6 @@
width="{{getSmallWidth(media)}}" width="{{getSmallWidth(media)}}"
height="{{getSmallHeight(media)}}"/> height="{{getSmallHeight(media)}}"/>
{{/if}} {{/if}}
</div>
{{/each}} {{/each}}
</div> </div>
<style> <style>
@ -52,20 +53,10 @@
grid-row-gap: 10px; grid-row-gap: 10px;
margin: 10px 0; margin: 10px 0;
} }
.status-media.status-media-is-sensitive { .status-media.status-media-is-sensitive {
margin: 0; margin: 0;
} }
.no-native-width-height {
.status-media-container {
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.no-native-width-height img, .no-native-width-height video {
background-color: var(--mask-bg); background-color: var(--mask-bg);
} }
.status-media img.image-loading, .status-media img.image-error { .status-media img.image-loading, .status-media img.image-error {
@ -74,7 +65,6 @@
.status-media { .status-media {
overflow: hidden; overflow: hidden;
} }
.status-media video, .status-media img { .status-media video, .status-media img {
object-fit: cover; object-fit: cover;
} }
@ -128,7 +118,7 @@
hasNoNativeWidthHeight: media => !(media && media.meta && media.meta.small && typeof media.meta.small.width === 'number' && typeof media.meta.small.height === 'number'), hasNoNativeWidthHeight: media => !(media && media.meta && media.meta.small && typeof media.meta.small.width === 'number' && typeof media.meta.small.height === 'number'),
}, },
computed: { computed: {
minMediaWidth: (mediaAttachments) => Math.min.apply(Math, mediaAttachments.map(media => media.meta && media.meta.small && typeof media.meta.small.width === 'number' ? media.meta.small.width : DEFAULT_MEDIA_WIDTH)) maxMediaWidth: (mediaAttachments) => Math.max.apply(Math, mediaAttachments.map(media => media.meta && media.meta.small && typeof media.meta.small.width === 'number' ? media.meta.small.width : DEFAULT_MEDIA_WIDTH))
}, },
methods: { methods: {
async onClickPlayVideoButton(media, width, height, description) { async onClickPlayVideoButton(media, width, height, description) {