pinafore/routes/_components/status/Media.html

165 lines
5.1 KiB
HTML
Raw Normal View History

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