fix: make inline media changes suggested in #747 (#760)

This commit is contained in:
Nolan Lawson 2018-12-08 09:44:12 -08:00 committed by GitHub
parent 530ad6b35c
commit 34cfaf27b3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 56 additions and 34 deletions

View file

@ -1,8 +1,8 @@
<div class="autoplay-wrapper {$groupedImages ? 'fixed-size': ''}" <div class="autoplay-wrapper {$largeInlineMedia ? '' : 'fixed-size'}"
style="width: {width}px; height: {height}px;" style="width: {width}px; height: {height}px;"
> >
<video <video
class="autoplay-video {$groupedImages ? 'fixed-size': ''}" class="autoplay-video {$largeInlineMedia ? '' : 'fixed-size'}"
aria-label={ariaLabel || ''} aria-label={ariaLabel || ''}
style="{focusStyle} background-image: url({poster}); " style="{focusStyle} background-image: url({poster}); "
{poster} {poster}
@ -46,9 +46,9 @@
</style> </style>
<script> <script>
import { store } from '../_store/store' import { store } from '../_store/store'
const coordsToPercent = coord => (1 + coord) / 2 * 100 import { coordsToPercent } from '../_utils/coordsToPercent'
export default { export default {
data: () => ({ data: () => ({
focus: void 0 focus: void 0

View file

@ -1,5 +1,6 @@
<div class="lazy-image {fillFixSize ? 'fixed-size': ''}" style={computedStyle} > <div class="lazy-image {fillFixSize ? 'fixed-size': ''}" style={computedStyle} >
<img <img
class="{fillFixSize ? 'fixed-size-img': ''}"
aria-hidden={ariaHidden} aria-hidden={ariaHidden}
{alt} {alt}
{title} {title}
@ -18,7 +19,7 @@
display: flex; display: flex;
} }
.fixed-size img { .fixed-size-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -32,9 +33,9 @@
</style> </style>
<script> <script>
import { decodeImage } from '../_utils/decodeImage' import { decodeImage } from '../_utils/decodeImage'
const coordsToPercent = coord => (1 + coord) / 2 * 100 import { coordsToPercent } from '../_utils/coordsToPercent'
export default { export default {
async oncreate () { async oncreate () {
try { try {
await decodeImage(this.refs.node) await decodeImage(this.refs.node)
@ -67,7 +68,7 @@ export default {
if (!focus) return 'background-position: center;' if (!focus) return 'background-position: center;'
return `object-position: ${coordsToPercent(focus.x)}% ${100 - coordsToPercent(focus.y)}%;` return `object-position: ${coordsToPercent(focus.x)}% ${100 - coordsToPercent(focus.y)}%;`
}, },
fillFixSize: ({ forceSize, $groupedImages }) => $groupedImages && !forceSize, fillFixSize: ({ forceSize, $largeInlineMedia }) => !$largeInlineMedia && !forceSize,
displaySrc: ({ error, src, fallback }) => ((error && fallback) || src) displaySrc: ({ error, src, fallback }) => ((error && fallback) || src)
} }
} }

View file

@ -1,4 +1,4 @@
<div class="non-autoplay-gifv {$groupedImages ? 'fixed-size': ''}" <div class="non-autoplay-gifv {$largeInlineMedia ? '' : 'fixed-size'}"
style="width: {width}px; height: {height}px;" style="width: {width}px; height: {height}px;"
on:mouseover="onMouseOver(event)" on:mouseover="onMouseOver(event)"
ref:node ref:node

View file

@ -7,7 +7,7 @@
> >
{#if type === 'gifv'} {#if type === 'gifv'}
<video <video
class="autoplay-video" class="image-modal-dialog-autoplay-video"
aria-label="Animated GIF: {description || ''}" aria-label="Animated GIF: {description || ''}"
style="background-image: url({poster}); " style="background-image: url({poster}); "
{width} {width}
@ -37,7 +37,7 @@
overflow: hidden; overflow: hidden;
} }
.autoplay-video { .image-modal-dialog-autoplay-video {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;

View file

@ -1,6 +1,6 @@
{#if type === 'video'} {#if type === 'video'}
<button type="button" <button type="button"
class="play-video-button {$groupedImages ? 'fixed-size': ''}" class="play-video-button {$largeInlineMedia ? '' : 'fixed-size'}"
aria-label="Play video: {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;">
@ -18,7 +18,7 @@
</button> </button>
{:else} {:else}
<button type="button" <button type="button"
class="show-image-button {$groupedImages ? 'fixed-size': ''}" class="show-image-button {$largeInlineMedia ? '' : 'fixed-size'}"
aria-label="Show image: {description}" aria-label="Show image: {description}"
title={description} title={description}
delegate-key={delegateKey} delegate-key={delegateKey}
@ -103,12 +103,16 @@
computed: { computed: {
focus: ({ meta }) => meta && meta.focus, focus: ({ meta }) => meta && meta.focus,
// width/height to show inline // width/height to show inline
inlineWidth: ({ smallWidth, $groupedImages }) => { inlineWidth: ({ smallWidth, $largeInlineMedia }) => {
if ($groupedImages) return '100%' if (!$largeInlineMedia) {
return '100%'
}
return smallWidth || DEFAULT_MEDIA_WIDTH return smallWidth || DEFAULT_MEDIA_WIDTH
}, },
inlineHeight: ({ smallHeight, $groupedImages }) => { inlineHeight: ({ smallHeight, $largeInlineMedia }) => {
if ($groupedImages) return 'auto' if (!$largeInlineMedia) {
return 'auto'
}
return smallHeight || DEFAULT_MEDIA_HEIGHT return smallHeight || DEFAULT_MEDIA_HEIGHT
}, },
// width/height to show in a modal // width/height to show in a modal

View file

@ -1,10 +1,5 @@
<div class="status-media <div class={computedClass}
{sensitive ? 'status-media-is-sensitive' : ''} style="grid-template-columns: repeat({nCols}, 1fr);" >
{oddCols ? 'odd-cols' : ''}
{twoCols ? 'two-cols' : ''}
{$groupedImages ? 'grouped-images' : ''}
"
style="grid-template-columns: repeat({nCols}, 1fr); " >
{#each mediaAttachments as media} {#each mediaAttachments as media}
<Media {media} {uuid} /> <Media {media} {uuid} />
{/each} {/each}
@ -50,12 +45,20 @@
</style> </style>
<script> <script>
import Media from './Media.html' import Media from './Media.html'
import { classname } from '../../_utils/classname'
export default { export default {
computed: { computed: {
computedClass: ({ sensitive, $largeInlineMedia, oddCols, twoCols }) => classname(
'status-media',
sensitive && 'status-media-is-sensitive',
oddCols && 'odd-cols',
twoCols && 'two-cols',
!$largeInlineMedia && 'grouped-images'
),
nCols: nCols:
({ mediaAttachments, $groupedImages }) => { ({ mediaAttachments, $largeInlineMedia }) => {
return ($groupedImages && mediaAttachments.length > 1) ? 2 : 1 return (!$largeInlineMedia && mediaAttachments.length > 1) ? 2 : 1
}, },
oddCols: oddCols:
({ mediaAttachments }) => { ({ mediaAttachments }) => {

View file

@ -1,6 +1,5 @@
{#if sensitive } {#if sensitive }
<div class="status-sensitive-media-container {sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden'}" <div class={computedClass}>
>
{#if sensitiveShown} {#if sensitiveShown}
<button type="button" <button type="button"
class="status-sensitive-media-button" class="status-sensitive-media-button"
@ -44,6 +43,10 @@
background: none; background: none;
} }
.status-sensitive-media-container.grouped-images {
grid-area: media-grp;
}
.status-sensitive-media-button { .status-sensitive-media-button {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -107,6 +110,10 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.status-sensitive-media-container.grouped-images .svg-wrapper {
border-radius: 6px;
}
.status-sensitive-media-container.status-sensitive-media-shown .svg-wrapper { .status-sensitive-media-container.status-sensitive-media-shown .svg-wrapper {
background: none; background: none;
} }
@ -128,6 +135,7 @@
import MediaAttachments from './MediaAttachments.html' import MediaAttachments from './MediaAttachments.html'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import { registerClickDelegate } from '../../_utils/delegate' import { registerClickDelegate } from '../../_utils/delegate'
import { classname } from '../../_utils/classname'
export default { export default {
oncreate () { oncreate () {
@ -139,6 +147,11 @@
}, },
store: () => store, store: () => store,
computed: { computed: {
computedClass: ({ sensitiveShown, $largeInlineMedia }) => classname(
'status-sensitive-media-container',
sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden',
!$largeInlineMedia && 'grouped-images'
),
mediaAttachments: ({ originalStatus }) => originalStatus.media_attachments, mediaAttachments: ({ originalStatus }) => originalStatus.media_attachments,
sensitiveShown: ({ $sensitivesShown, uuid }) => !!$sensitivesShown[uuid], sensitiveShown: ({ $sensitivesShown, uuid }) => !!$sensitivesShown[uuid],
sensitive: ({ originalStatus, $markMediaAsSensitive, $neverMarkMediaAsSensitive }) => ( sensitive: ({ originalStatus, $markMediaAsSensitive, $neverMarkMediaAsSensitive }) => (

View file

@ -13,6 +13,11 @@
bind:checked="$neverMarkMediaAsSensitive" on:change="onChange(event)"> bind:checked="$neverMarkMediaAsSensitive" on:change="onChange(event)">
<label for="choice-never-mark-media-sensitive">Never mark media as sensitive</label> <label for="choice-never-mark-media-sensitive">Never mark media as sensitive</label>
</div> </div>
<div class="setting-group">
<input type="checkbox" id="choice-large-inline-media"
bind:checked="$largeInlineMedia" on:change="onChange(event)">
<label for="choice-large-inline-media">Show large inline images and videos</label>
</div>
<div class="setting-group"> <div class="setting-group">
<input type="checkbox" id="choice-disable-custom-scrollbars" <input type="checkbox" id="choice-disable-custom-scrollbars"
bind:checked="$disableCustomScrollbars" on:change="onChange(event)"> bind:checked="$disableCustomScrollbars" on:change="onChange(event)">
@ -27,11 +32,6 @@
bind:checked="$autoplayGifs" on:change="onChange(event)"> bind:checked="$autoplayGifs" on:change="onChange(event)">
<label for="choice-autoplay-gif">Autoplay GIFs</label> <label for="choice-autoplay-gif">Autoplay GIFs</label>
</div> </div>
<div class="setting-group">
<input type="checkbox" id="choice-grouped-images"
bind:checked="$groupedImages" on:change="onChange(event)">
<label for="choice-groupes-images">Group images</label>
</div>
<div class="setting-group"> <div class="setting-group">
<input type="checkbox" id="choice-reduce-motion" <input type="checkbox" id="choice-reduce-motion"
bind:checked="$reduceMotion" on:change="onChange(event)"> bind:checked="$reduceMotion" on:change="onChange(event)">

View file

@ -13,7 +13,7 @@ const persistedState = {
disableCustomScrollbars: false, disableCustomScrollbars: false,
disableLongAriaLabels: false, disableLongAriaLabels: false,
disableTapOnStatus: false, disableTapOnStatus: false,
groupedImages: false, largeInlineMedia: false,
instanceNameInSearch: '', instanceNameInSearch: '',
instanceThemes: {}, instanceThemes: {},
loggedInInstances: {}, loggedInInstances: {},

View file

@ -0,0 +1 @@
export const coordsToPercent = coord => (1 + coord) / 2 * 100