Mastodon
/
Pinafore-Web-Client-Frontend
mirror of https://github.com/nolanlawson/pinafore
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor Media.html

This commit is contained in:
Nolan Lawson 2018-04-20 08:24:25 -07:00
parent e847e54f96
commit d049405b54
1 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
routes/_components/status/Media.html
View File

@ -1,15 +1,14 @@
{{#if media.type === 'video'}} {{#if type === 'video'}}
<button type="button" <button type="button"
class="play-video-button" class="play-video-button"
aria-label="Play video: {{media.description || ''}}" aria-label="Play video: {{description}}"
delegate-key="{{delegateKey}}" delegate-key="{{delegateKey}}"
style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;" style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;">
>
<PlayVideoIcon /> <PlayVideoIcon />
<LazyImage <LazyImage
alt="{{media.description || ''}}" alt="{{description}}"
title="{{media.description || ''}}" title="{{description}}"
src="{{media.preview_url}}" src="{{previewUrl}}"
fallback="{{oneTransparentPixel}}" fallback="{{oneTransparentPixel}}"
width="{{inlineWidth}}" width="{{inlineWidth}}"
height="{{inlineHeight}}" height="{{inlineHeight}}"
@ -20,37 +19,37 @@
{{else}} {{else}}
<button type="button" <button type="button"
class="show-image-button" class="show-image-button"
aria-label="Show image: {{media.description || ''}}" aria-label="Show image: {{description}}"
title="{{media.description || ''}}" title="{{description}}"
delegate-key="{{delegateKey}}" delegate-key="{{delegateKey}}"
on:mouseover="set({mouseover: event})" on:mouseover="set({mouseover: event})"
style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;" style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
> >
{{#if media.type === 'gifv' && $autoplayGifs}} {{#if type === 'gifv' && $autoplayGifs}}
<AutoplayVideo <AutoplayVideo
className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}" className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
ariaLabel="Animated GIF: {{media.description || ''}}" ariaLabel="Animated GIF: {{description}}"
poster="{{media.preview_url}}" poster="{{previewUrl}}"
src="{{media.url}}" src="{{url}}"
width="{{inlineWidth}}" width="{{inlineWidth}}"
height="{{inlineHeight}}" height="{{inlineHeight}}"
/> />
{{elseif media.type === 'gifv' && !$autoplayGifs}} {{elseif type === 'gifv' && !$autoplayGifs}}
<NonAutoplayGifv <NonAutoplayGifv
class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}" class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
label="Animated GIF: {{media.description || ''}}" label="Animated GIF: {{description}}"
poster="{{media.preview_url}}" poster="{{previewUrl}}"
src="{{media.url}}" src="{{url}}"
staticSrc="{{media.preview_url}}" staticSrc="{{previewUrl}}"
width="{{inlineWidth}}" width="{{inlineWidth}}"
height="{{inlineHeight}}" height="{{inlineHeight}}"
playing="{{mouseover}}" playing="{{mouseover}}"
/> />
{{else}} {{else}}
<LazyImage <LazyImage
alt="{{media.description || ''}}" alt="{{description}}"
title="{{media.description || ''}}" title="{{description}}"
src="{{media.preview_url}}" src="{{previewUrl}}"
fallback="{{oneTransparentPixel}}" fallback="{{oneTransparentPixel}}"
width="{{inlineWidth}}" width="{{inlineWidth}}"
height="{{inlineHeight}}" height="{{inlineHeight}}"
@ -112,8 +111,8 @@
oncreate () { oncreate () {
let { delegateKey } = this.get() let { delegateKey } = this.get()
registerClickDelegate(this, delegateKey, () => { registerClickDelegate(this, delegateKey, () => {
let { media } = this.get() let { type } = this.get()
if (media.type === 'video') { if (type === 'video') {
this.onClickPlayVideoButton() this.onClickPlayVideoButton()
} else { } else {
this.onClickShowImageButton() this.onClickShowImageButton()
@ -135,20 +134,24 @@
originalWidth: original => original && original.width, originalWidth: original => original && original.width,
originalHeight: original => original && original.height, originalHeight: original => original && original.height,
noNativeWidthHeight: (smallWidth, smallHeight) => typeof smallWidth !== 'number' || typeof smallHeight !== 'number', noNativeWidthHeight: (smallWidth, smallHeight) => typeof smallWidth !== 'number' || typeof smallHeight !== 'number',
delegateKey: (media, uuid) => `media-${uuid}-${media.id}` 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: { methods: {
async onClickPlayVideoButton () { async onClickPlayVideoButton () {
let { media, modalWidth, modalHeight } = this.get() let { previewUrl, url, modalWidth, modalHeight, description } = this.get()
let dialogs = await importDialogs() let dialogs = await importDialogs()
dialogs.showVideoDialog(media.preview_url, media.url, dialogs.showVideoDialog(previewUrl, url,
modalWidth, modalHeight, media.description) modalWidth, modalHeight, description)
}, },
async onClickShowImageButton () { async onClickShowImageButton () {
let { media, modalWidth, modalHeight } = this.get() let { previewUrl, url, modalWidth, modalHeight, description, type } = this.get()
let dialogs = await importDialogs() let dialogs = await importDialogs()
dialogs.showImageDialog(media.preview_url, media.url, media.type, dialogs.showImageDialog(previewUrl, url, type,
modalWidth, modalHeight, media.description) modalWidth, modalHeight, description)
} }
}, },
data: () => ({ data: () => ({