pinafore/routes/_components/status/Media.html

168 lines
5.6 KiB
HTML
Raw Normal View History

2018-02-05 03:56:06 +00:00
{{#if media.type === 'video'}}
<button type="button"
class="play-video-button"
aria-label="Play video: {{media.description || ''}}"
2018-03-15 15:59:30 +00:00
delegate-key="{{delegateKey}}"
style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
>
2018-03-10 19:28:30 +00:00
<PlayVideoIcon />
2018-03-14 06:07:30 +00:00
<LazyImage
alt="{{media.description || ''}}"
title="{{media.description || ''}}"
2018-03-14 06:07:30 +00:00
src="{{media.preview_url}}"
fallback="{{oneTransparentPixel}}"
width="{{inlineWidth}}"
height="{{inlineHeight}}"
background="var(--loading-bg)"
className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
2018-02-05 03:56:06 +00:00
/>
</button>
{{else}}
<button type="button"
class="show-image-button"
aria-label="Show image: {{media.description || ''}}"
title="{{media.description || ''}}"
2018-03-15 15:59:30 +00:00
delegate-key="{{delegateKey}}"
2018-02-05 03:56:06 +00:00
on:mouseover="set({mouseover: event})"
style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
2018-02-05 03:56:06 +00:00
>
{{#if media.type === 'gifv' && $autoplayGifs}}
2018-03-31 17:45:11 +00:00
<AutoplayVideo
className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
ariaLabel="Animated GIF: {{media.description || ''}}"
2018-02-05 03:56:06 +00:00
poster="{{media.preview_url}}"
src="{{media.url}}"
width="{{inlineWidth}}"
height="{{inlineHeight}}"
/>
{{elseif media.type === 'gifv' && !$autoplayGifs}}
<NonAutoplayGifv
class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
label="Animated GIF: {{media.description || ''}}"
poster="{{media.preview_url}}"
src="{{media.url}}"
staticSrc="{{media.preview_url}}"
width="{{inlineWidth}}"
height="{{inlineHeight}}"
playing="{{mouseover}}"
/>
{{else}}
2018-03-14 06:07:30 +00:00
<LazyImage
alt="{{media.description || ''}}"
title="{{media.description || ''}}"
2018-03-14 06:07:30 +00:00
src="{{media.preview_url}}"
fallback="{{oneTransparentPixel}}"
width="{{inlineWidth}}"
height="{{inlineHeight}}"
background="var(--loading-bg)"
className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
2018-02-05 03:56:06 +00:00
/>
{{/if}}
</button>
{{/if}}
2018-01-20 23:37:40 +00:00
<style>
2018-02-05 03:56:06 +00:00
:global(.status-media video, .status-media img) {
2018-01-20 23:37:40 +00:00
object-fit: cover;
}
2018-03-14 06:07:30 +00:00
:global(.no-native-width-height) {
2018-02-05 03:56:06 +00:00
background-color: var(--mask-bg);
2018-01-31 06:40:40 +00:00
}
.play-video-button {
margin: 0;
padding: 0;
border-radius: 0;
border: none;
background: none;
position: relative;
}
.show-image-button {
margin: 0;
padding: 0;
border-radius: 0;
border: none;
background: none;
cursor: zoom-in;
}
2018-02-05 03:56:06 +00:00
2018-03-14 06:07:30 +00:00
:global(.status-media video, .status-media img, .status-media .lazy-image,
.status-media .show-image-button, .status-media .non-autoplay-gifv,
.status-media .play-video-button) {
2018-02-05 03:56:06 +00:00
max-width: calc(100vw - 40px);
}
2018-01-31 06:40:40 +00:00
@media (max-width: 767px) {
2018-03-14 06:07:30 +00:00
:global(.status-media video, .status-media img, .status-media .lazy-image,
.status-media .show-image-button, .status-media .non-autoplay-gifv,
.status-media .play-video-button) {
2018-01-31 06:40:40 +00:00
max-width: calc(100vw - 20px);
}
}
2018-01-20 23:37:40 +00:00
</style>
<script>
2018-04-20 04:38:01 +00:00
import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT, ONE_TRANSPARENT_PIXEL } from '../../_static/media'
2018-02-15 06:02:54 +00:00
import { importDialogs } from '../../_utils/asyncModules'
2018-02-05 00:34:54 +00:00
import { mouseover } from '../../_utils/events'
2018-02-02 02:48:59 +00:00
import NonAutoplayGifv from '../NonAutoplayGifv.html'
2018-03-10 19:28:30 +00:00
import PlayVideoIcon from '../PlayVideoIcon.html'
import { store } from '../../_store/store'
2018-03-14 06:07:30 +00:00
import LazyImage from '../LazyImage.html'
2018-03-31 17:45:11 +00:00
import AutoplayVideo from '../AutoplayVideo.html'
import { registerClickDelegate } from '../../_utils/delegate'
2018-01-20 23:37:40 +00:00
export default {
2018-04-20 04:38:01 +00:00
oncreate () {
let { delegateKey } = this.get()
registerClickDelegate(this, delegateKey, () => {
let { media } = this.get()
if (media.type === 'video') {
2018-03-15 15:59:30 +00:00
this.onClickPlayVideoButton()
} else {
this.onClickShowImageButton()
}
})
},
2018-01-20 23:37:40 +00:00
computed: {
2018-02-05 03:56:06 +00:00
// width/height to show inline
inlineWidth: smallWidth => smallWidth || DEFAULT_MEDIA_WIDTH,
inlineHeight: smallHeight => smallHeight || DEFAULT_MEDIA_HEIGHT,
// width/height to show in a modal
modalWidth: (originalWidth, inlineWidth) => originalWidth || inlineWidth,
modalHeight: (originalHeight, inlineHeight) => originalHeight || inlineHeight,
meta: media => media.meta,
small: meta => meta && meta.small,
original: meta => meta && meta.original,
smallWidth: small => small && small.width,
smallHeight: small => small && small.height,
originalWidth: original => original && original.width,
originalHeight: original => original && original.height,
2018-03-15 15:59:30 +00:00
noNativeWidthHeight: (smallWidth, smallHeight) => typeof smallWidth !== 'number' || typeof smallHeight !== 'number',
delegateKey: (media, uuid) => `media-${uuid}-${media.id}`
},
methods: {
2018-04-20 04:38:01 +00:00
async onClickPlayVideoButton () {
let { media, modalWidth, modalHeight } = this.get()
2018-02-15 06:02:54 +00:00
let dialogs = await importDialogs()
dialogs.showVideoDialog(media.preview_url, media.url,
modalWidth, modalHeight, media.description)
},
2018-04-20 04:38:01 +00:00
async onClickShowImageButton () {
let { media, modalWidth, modalHeight } = this.get()
2018-02-15 06:02:54 +00:00
let dialogs = await importDialogs()
dialogs.showImageDialog(media.preview_url, media.url, media.type,
modalWidth, modalHeight, media.description)
}
2018-01-23 05:47:29 +00:00
},
2018-02-12 06:59:33 +00:00
data: () => ({
oneTransparentPixel: ONE_TRANSPARENT_PIXEL
2018-02-12 06:59:33 +00:00
}),
store: () => store,
2018-01-23 05:47:29 +00:00
events: {
2018-02-05 00:34:54 +00:00
mouseover
2018-02-02 02:48:59 +00:00
},
components: {
2018-03-10 19:28:30 +00:00
NonAutoplayGifv,
2018-03-14 06:07:30 +00:00
PlayVideoIcon,
2018-03-31 17:45:11 +00:00
LazyImage,
AutoplayVideo
2018-01-20 23:37:40 +00:00
}
}
</script>