mirror of
https://github.com/nolanlawson/pinafore
synced 2024-12-13 10:48:19 +01:00
164 lines
5.0 KiB
HTML
164 lines
5.0 KiB
HTML
{{#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 || ''}}"
|
|
src="{{media.preview_url}}"
|
|
width="{{inlineWidth}}"
|
|
height="{{inlineHeight}}"
|
|
/>
|
|
{{/if}}
|
|
</button>
|
|
{{/if}}
|
|
<style>
|
|
:global(.status-media img.image-loading, .status-media img.image-error) {
|
|
background: var(--loading-bg);
|
|
}
|
|
:global(.status-media video, .status-media img) {
|
|
object-fit: cover;
|
|
}
|
|
.no-native-width-height {
|
|
background-color: var(--mask-bg);
|
|
}
|
|
.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;
|
|
}
|
|
|
|
:global(.status-media video, .status-media img) {
|
|
max-width: calc(100vw - 40px);
|
|
}
|
|
@media (max-width: 767px) {
|
|
:global(.status-media video, .status-media img) {
|
|
max-width: calc(100vw - 20px);
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT } from '../../_static/media'
|
|
import { imgLoad, imgLoadError } from '../../_utils/events'
|
|
import { showVideoDialog } from '../dialog/showVideoDialog'
|
|
import { showImageDialog } from '../dialog/showImageDialog'
|
|
import { mouseover } from '../../_utils/events'
|
|
import NonAutoplayGifv from '../NonAutoplayGifv.html'
|
|
|
|
export default {
|
|
computed: {
|
|
// 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: {
|
|
onClickPlayVideoButton() {
|
|
let media = this.get('media')
|
|
let width = this.get('modalWidth')
|
|
let height = this.get('modalHeight')
|
|
showVideoDialog(media.preview_url, media.url, width, height, media.description)
|
|
},
|
|
onClickShowImageButton() {
|
|
let media = this.get('media')
|
|
let width = this.get('modalWidth')
|
|
let height = this.get('modalHeight')
|
|
showImageDialog(media.preview_url, media.url, media.type, width, height, media.description)
|
|
}
|
|
},
|
|
events: {
|
|
imgLoad,
|
|
imgLoadError,
|
|
mouseover
|
|
},
|
|
components: {
|
|
NonAutoplayGifv
|
|
}
|
|
}
|
|
</script> |