cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

tweak and simplify media appearance

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' : ''}}"
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}}
<div class="status-media-container {{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}">
{{#if media.type === 'video'}}
<button type="button"
class="play-video-button"
@ -15,10 +14,13 @@
<img alt="{{media.description || ''}}"
src="{{media.preview_url}}"
width="{{getSmallWidth(media)}}"
height="{{getSmallHeight(media)}}" />
height="{{getSmallHeight(media)}}"
class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
/>
</button>
{{elseif media.type === 'gifv'}}
<video
class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
aria-label="Animated GIF: {{media.description || ''}}"
poster="{{media.preview_url}}"
src="{{media.url}}"
@ -30,7 +32,7 @@
playsinline
/>
{{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:imgLoadError="set({imageError: true})"
alt="{{media.description || ''}}"
@ -38,7 +40,6 @@
width="{{getSmallWidth(media)}}"
height="{{getSmallHeight(media)}}"/>
{{/if}}
</div>
{{/each}}
</div>
<style>
@ -52,20 +53,10 @@
grid-row-gap: 10px;
margin: 10px 0;
}
.status-media.status-media-is-sensitive {
margin: 0;
}
.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 {
.no-native-width-height {
background-color: var(--mask-bg);
}
.status-media img.image-loading, .status-media img.image-error {
@ -74,7 +65,6 @@
.status-media {
overflow: hidden;
}
.status-media video, .status-media img {
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'),
},
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: {
async onClickPlayVideoButton(media, width, height, description) {