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

fix gifv video

Browse source
This commit is contained in:
Nolan Lawson 2018-01-20 16:18:28 -08:00
parent 9264f85505
commit 8951b1ba48
1 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
routes/_components/Media.html
View file

@ -1,17 +1,26 @@
<div class="status-media" style="grid-template-columns: repeat(auto-fit, minmax({{minMediaWidth}}px, 1fr));"> <div class="status-media" style="grid-template-columns: repeat(auto-fit, minmax({{minMediaWidth}}px, 1fr));">
{{#each mediaAttachments as media}} {{#each mediaAttachments as media}}
<div class="status-media-container"> <div class="status-media-container {{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}">
{{#if media.type === 'video'}} {{#if media.type === 'video'}}
<video class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}" <video poster="{{media.preview_url}}"
poster="{{media.preview_url}}"
src="{{media.url}}" src="{{media.url}}"
width="{{getSmallWidth(media)}}" width="{{getSmallWidth(media)}}"
height="{{getSmallHeight(media)}}" height="{{getSmallHeight(media)}}"
controls controls
/> />
{{elseif media.type === 'gifv'}}
<video
poster="{{media.preview_url}}"
src="{{media.url}}"
width="{{getSmallWidth(media)}}"
height="{{getSmallHeight(media)}}"
autoplay
muted
loop
playsinline
/>
{{else}} {{else}}
<img class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}" <img src="{{media.preview_url}}"
src="{{media.preview_url}}"
alt="{{media.description || ''}}" alt="{{media.description || ''}}"
width="{{getSmallWidth(media)}}" width="{{getSmallWidth(media)}}"
height="{{getSmallHeight(media)}}"/> height="{{getSmallHeight(media)}}"/>
@ -38,7 +47,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.status-media .no-native-width-height { .no-native-width-height img, .no-native-width-height video {
background-color: var(--mask-bg); background-color: var(--mask-bg);
} }
.status-media { .status-media {