pinafore/routes/_components/status/Media.html

147 lines
4.8 KiB
HTML
Raw Normal View History

2018-01-21 21:34:35 +01:00
<div class="status-media {{sensitive ? 'status-media-is-sensitive' : ''}}"
2018-02-02 03:29:29 +01:00
style="grid-template-columns: repeat(auto-fit, minmax({{maxMediaWidth}}px, 1fr));" >
2018-01-21 00:37:40 +01:00
{{#each mediaAttachments as media}}
{{#if media.type === 'video'}}
<button type="button"
class="play-video-button"
2018-01-21 19:53:15 +01:00
aria-label="Play video: {{media.description || ''}}"
2018-01-21 19:32:18 +01:00
on:click="onClickPlayVideoButton(media, getSmallWidth(media), getSmallHeight(media), media.description)">
<div class="svg-wrapper">
<svg>
<use xlink:href="#fa-play-circle" />
</svg>
</div>
2018-01-21 19:32:18 +01:00
<img alt="{{media.description || ''}}"
2018-01-21 05:47:18 +01:00
src="{{media.preview_url}}"
width="{{getSmallWidth(media)}}"
2018-02-02 03:29:29 +01:00
height="{{getSmallHeight(media)}}"
class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
/>
</button>
2018-02-02 03:48:59 +01:00
{{elseif media.type === 'gifv' && $autoplayGifs}}
<video
2018-02-02 03:29:29 +01:00
class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
2018-01-21 19:32:18 +01:00
aria-label="Animated GIF: {{media.description || ''}}"
2018-01-21 01:18:28 +01:00
poster="{{media.preview_url}}"
src="{{media.url}}"
width="{{getSmallWidth(media)}}"
height="{{getSmallHeight(media)}}"
autoplay
muted
loop
playsinline
2018-02-02 03:48:59 +01:00
/>
{{elseif media.type === 'gifv' && !$autoplayGifs}}
<NonAutoplayGifv
class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
label="Animated GIF: {{media.description || ''}}"
poster="{{media.preview_url}}"
src="{{media.url}}"
staticSrc="{{media.preview_url}}"
width="{{getSmallWidth(media)}}"
height="{{getSmallHeight(media)}}"
/>
2018-01-21 00:37:40 +01:00
{{else}}
2018-02-02 03:29:29 +01:00
<img class="{{!imageLoaded ? 'image-loading' : ''}} {{imageError ? 'image-error' : ''}} {{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
2018-01-23 06:47:29 +01:00
on:imgLoad="set({imageLoaded: true})"
on:imgLoadError="set({imageError: true})"
alt="{{media.description || ''}}"
2018-01-21 19:32:18 +01:00
src="{{media.preview_url}}"
2018-01-21 00:37:40 +01:00
width="{{getSmallWidth(media)}}"
height="{{getSmallHeight(media)}}"/>
{{/if}}
{{/each}}
</div>
<style>
.status-media {
grid-area: status-media;
display: grid;
align-items: center;
justify-content: center;
justify-items: center;
grid-column-gap: 10px;
grid-row-gap: 10px;
2018-01-21 21:34:35 +01:00
margin: 10px 0;
}
.status-media.status-media-is-sensitive {
margin: 0;
2018-01-21 00:37:40 +01:00
}
2018-02-02 03:29:29 +01:00
.no-native-width-height {
2018-01-21 00:37:40 +01:00
background-color: var(--mask-bg);
}
2018-01-23 06:47:29 +01:00
.status-media img.image-loading, .status-media img.image-error {
background: var(--loading-bg);
}
2018-01-21 00:37:40 +01:00
.status-media {
overflow: hidden;
}
.status-media video, .status-media img {
object-fit: cover;
}
2018-01-31 07:40:40 +01:00
.status-media, .status-media video, .status-media img {
max-width: calc(100vw - 40px);
}
.play-video-button {
margin: 0;
padding: 0;
position: relative;
border-radius: 0;
border: none;
background: none;
}
.play-video-button .svg-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 40;
pointer-events: none;
}
.play-video-button svg {
width: 72px;
height: 72px;
fill: var(--mask-svg-fill);
border-radius: 100%;
background: var(--mask-opaque-bg);
}
2018-01-31 07:40:40 +01:00
@media (max-width: 767px) {
.status-media, .status-media video, .status-media img {
max-width: calc(100vw - 20px);
}
}
2018-01-21 00:37:40 +01:00
</style>
<script>
const DEFAULT_MEDIA_WIDTH = 300
const DEFAULT_MEDIA_HEIGHT = 200
2018-01-28 01:35:44 +01:00
import { imgLoad, imgLoadError } from '../../_utils/events'
import { showVideoDialog } from '../../_utils/showVideoDialog'
2018-02-02 03:48:59 +01:00
import NonAutoplayGifv from '../NonAutoplayGifv.html'
2018-01-21 00:37:40 +01:00
export default {
helpers: {
getSmallWidth: media => media.meta && media.meta.small && typeof media.meta.small.width === 'number' ? media.meta.small.width : DEFAULT_MEDIA_WIDTH,
getSmallHeight: media => media.meta && media.meta.small && typeof media.meta.small.height === 'number' ? media.meta.small.height : DEFAULT_MEDIA_HEIGHT,
hasNoNativeWidthHeight: media => !(media && media.meta && media.meta.small && typeof media.meta.small.width === 'number' && typeof media.meta.small.height === 'number'),
},
computed: {
2018-02-02 03:29:29 +01:00
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: {
2018-01-21 19:32:18 +01:00
async onClickPlayVideoButton(media, width, height, description) {
showVideoDialog(media.preview_url, media.url, width, height, description)
}
2018-01-23 06:47:29 +01:00
},
events: {
imgLoad,
imgLoadError
2018-02-02 03:48:59 +01:00
},
components: {
NonAutoplayGifv
2018-01-21 00:37:40 +01:00
}
}
</script>