Pinafore-Web-Client-Frontend/routes/_components/status/Media.html

168 lines
5.3 KiB
HTML
Raw Normal View History

2018-02-05 04:56:06 +01:00
{{#if media.type === 'video'}}
<button type="button"
class="play-video-button"
aria-label="Play video: {{media.description || ''}}"
on:click="onClickPlayVideoButton()">
<div class="svg-wrapper">
<svg>
<use xlink:href="#fa-play-circle" />
</svg>
</div>
<img alt="{{media.description || ''}}"
src="{{media.preview_url}}"
width="{{inlineWidth}}"
height="{{inlineHeight}}"
class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
/>
</button>
{{else}}
<button type="button"
class="show-image-button"
aria-label="Show image: {{media.description || ''}}"
on:click="onClickShowImageButton()"
on:mouseover="set({mouseover: event})"
>
{{#if media.type === 'gifv' && $autoplayGifs}}
<video
class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
aria-label="Animated GIF: {{media.description || ''}}"
poster="{{media.preview_url}}"
src="{{media.url}}"
width="{{inlineWidth}}"
height="{{inlineHeight}}"
autoplay
muted
loop
playsinline
/>
{{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}}
<img class="{{!imageLoaded ? 'image-loading' : ''}} {{imageError ? 'image-error' : ''}} {{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
on:imgLoad="set({imageLoaded: true})"
on:imgLoadError="set({imageError: true})"
alt="{{media.description || ''}}"
2018-02-12 07:59:33 +01:00
src="{{imageError ? oneTransparentPixel : media.preview_url}}"
2018-02-05 04:56:06 +01:00
width="{{inlineWidth}}"
height="{{inlineHeight}}"
/>
{{/if}}
</button>
{{/if}}
2018-01-21 00:37:40 +01:00
<style>
2018-02-05 04:56:06 +01:00
:global(.status-media img.image-loading, .status-media img.image-error) {
2018-01-23 06:47:29 +01:00
background: var(--loading-bg);
}
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;
}
2018-02-05 04:56:06 +01:00
.no-native-width-height {
background-color: var(--mask-bg);
2018-01-31 07:40:40 +01:00
}
.play-video-button {
margin: 0;
padding: 0;
border-radius: 0;
border: none;
background: none;
position: relative;
}
.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);
}
.show-image-button {
margin: 0;
padding: 0;
border-radius: 0;
border: none;
background: none;
cursor: zoom-in;
}
2018-02-05 04:56:06 +01:00
:global(.status-media video, .status-media img) {
max-width: calc(100vw - 40px);
}
2018-01-31 07:40:40 +01:00
@media (max-width: 767px) {
2018-02-05 04:56:06 +01:00
:global(.status-media video, .status-media img) {
2018-01-31 07:40:40 +01:00
max-width: calc(100vw - 20px);
}
}
2018-01-21 00:37:40 +01:00
</style>
<script>
2018-02-05 04:56:06 +01:00
import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT } from '../../_static/media'
2018-01-28 01:35:44 +01:00
import { imgLoad, imgLoadError } from '../../_utils/events'
2018-02-15 07:02:54 +01:00
import { importDialogs } from '../../_utils/asyncModules'
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-01-21 00:37:40 +01:00
export default {
computed: {
2018-02-05 04:56:06 +01: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,
noNativeWidthHeight: (smallWidth, smallHeight) => typeof smallWidth !== 'number' || typeof smallHeight !== 'number'
},
methods: {
2018-02-15 07:02:54 +01:00
async onClickPlayVideoButton() {
2018-02-05 04:56:06 +01:00
let media = this.get('media')
let width = this.get('modalWidth')
let height = this.get('modalHeight')
2018-02-15 07:02:54 +01:00
let dialogs = await importDialogs()
dialogs.showVideoDialog(media.preview_url, media.url, width, height, media.description)
},
2018-02-15 07:02:54 +01:00
async onClickShowImageButton() {
2018-02-05 04:56:06 +01:00
let media = this.get('media')
let width = this.get('modalWidth')
let height = this.get('modalHeight')
2018-02-15 07:02:54 +01:00
let dialogs = await importDialogs()
dialogs.showImageDialog(media.preview_url, media.url, media.type, width, height, media.description)
}
2018-01-23 06:47:29 +01:00
},
2018-02-12 07:59:33 +01:00
data: () => ({
oneTransparentPixel: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
}),
2018-01-23 06:47:29 +01:00
events: {
imgLoad,
2018-02-05 01:34:54 +01:00
imgLoadError,
mouseover
2018-02-02 03:48:59 +01:00
},
components: {
NonAutoplayGifv
2018-01-21 00:37:40 +01:00
}
}
</script>