{{#if media.type === 'video'}} <button type="button" class="play-video-button" aria-label="Play video: {{media.description || ''}}" delegate-key="{{delegateKey}}" style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;" > <PlayVideoIcon /> <LazyImage alt="{{media.description}}" src="{{media.preview_url}}" fallback="{{oneTransparentPixel}}" width="{{inlineWidth}}" height="{{inlineHeight}}" background="var(--loading-bg)" className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}" /> </button> {{else}} <button type="button" class="show-image-button" aria-label="Show image: {{media.description || ''}}" delegate-key="{{delegateKey}}" on:mouseover="set({mouseover: event})" style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;" > {{#if media.type === 'gifv' && $autoplayGifs}} <AutoplayVideo className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}" ariaLabel="Animated GIF: {{media.description || ''}}" 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}} <LazyImage alt="{{media.description}}" src="{{media.preview_url}}" fallback="{{oneTransparentPixel}}" width="{{inlineWidth}}" height="{{inlineHeight}}" background="var(--loading-bg)" className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}" /> {{/if}} </button> {{/if}} <style> :global(.status-media video, .status-media img) { object-fit: cover; } :global(.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; } .show-image-button { margin: 0; padding: 0; border-radius: 0; border: none; background: none; cursor: zoom-in; } :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) { max-width: calc(100vw - 40px); } @media (max-width: 767px) { :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) { max-width: calc(100vw - 20px); } } </style> <script> import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT } from '../../_static/media' import { importDialogs } from '../../_utils/asyncModules' import { mouseover } from '../../_utils/events' import NonAutoplayGifv from '../NonAutoplayGifv.html' import PlayVideoIcon from '../PlayVideoIcon.html' import { ONE_TRANSPARENT_PIXEL } from '../../_static/media' import { store } from '../../_store/store' import LazyImage from '../LazyImage.html' import AutoplayVideo from '../AutoplayVideo.html' import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate' export default { oncreate() { registerClickDelegate(this.get('delegateKey'), () => { if (this.get('media').type === 'video') { this.onClickPlayVideoButton() } else { this.onClickShowImageButton() } }) }, ondestroy() { unregisterClickDelegate(this.get('delegateKey')) }, 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', delegateKey: (media) => `media-${media.id}` }, methods: { async onClickPlayVideoButton() { let media = this.get('media') let width = this.get('modalWidth') let height = this.get('modalHeight') let dialogs = await importDialogs() dialogs.showVideoDialog(media.preview_url, media.url, width, height, media.description) }, async onClickShowImageButton() { let media = this.get('media') let width = this.get('modalWidth') let height = this.get('modalHeight') let dialogs = await importDialogs() dialogs.showImageDialog(media.preview_url, media.url, media.type, width, height, media.description) } }, data: () => ({ oneTransparentPixel: ONE_TRANSPARENT_PIXEL }), store: () => store, events: { mouseover }, components: { NonAutoplayGifv, PlayVideoIcon, LazyImage, AutoplayVideo } } </script>