better indication of non-autoplay gifs

This commit is contained in:
Nolan Lawson 2018-03-10 11:28:30 -08:00
parent b3263e528f
commit d4e48ac6fa
4 changed files with 42 additions and 28 deletions

View file

@ -26,15 +26,21 @@
on:imgLoadError="set({imageError: true})"
/>
{{/if}}
<PlayVideoIcon className="{{playing ? 'hidden' : ''}}"/>
</div>
<style>
.non-autoplay-gifv {
cursor: zoom-in;
position: relative;
}
:global(.non-autoplay-gifv .play-video-icon) {
transition: opacity 0.2s linear;
}
</style>
<script>
import { mouseover } from '../_utils/events'
import { imgLoad, imgLoadError } from '../_utils/events'
import PlayVideoIcon from './PlayVideoIcon.html'
import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
export default {
@ -50,6 +56,9 @@
},
data: () => ({
oneTransparentPixel: ONE_TRANSPARENT_PIXEL
})
}),
components: {
PlayVideoIcon
}
}
</script>

View file

@ -0,0 +1,26 @@
<div class="play-video-icon {{className || ''}}">
<svg>
<use xlink:href="#fa-play-circle" />
</svg>
</div>
<style>
.play-video-icon {
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-icon svg {
width: 72px;
height: 72px;
fill: var(--mask-svg-fill);
border-radius: 100%;
background: var(--mask-opaque-bg);
}
</style>

View file

@ -5,11 +5,7 @@
on:click="onClickPlayVideoButton()"
style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
>
<div class="svg-wrapper">
<svg>
<use xlink:href="#fa-play-circle" />
</svg>
</div>
<PlayVideoIcon />
<img alt="{{media.description || ''}}"
src="{{imageError ? oneTransparentPixel : media.preview_url}}"
width="{{inlineWidth}}"
@ -81,25 +77,6 @@
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;
@ -124,6 +101,7 @@
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'
export default {
@ -168,7 +146,8 @@
mouseover
},
components: {
NonAutoplayGifv
NonAutoplayGifv,
PlayVideoIcon
}
}
</script>

View file

@ -1,7 +1,6 @@
import { foobarRole } from '../roles'
import {
getFirstVisibleStatus, getNthReplyButton, getNthStatus, getUrl, homeNavButton, notificationsNavButton,
postStatusButton, scrollContainerToTop, showMoreButton, sleep
getNthStatus, scrollContainerToTop, showMoreButton, sleep
} from '../utils'
import { postAsAdmin } from '../serverActions'
@ -20,6 +19,7 @@ test('new incoming toots show a button if scrolled down', async t => {
.hover(getNthStatus(0))
.hover(getNthStatus(2))
.hover(getNthStatus(4))
await sleep(1000)
await postAsAdmin('hello my ragtime gal')
await postAsAdmin('send me a kiss by wire')
await sleep(4000)