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

View file

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

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;"
on:mouseover="onMouseOver(event)"
ref:node

View file

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

View file

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

View file

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

View file

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

View file

@ -13,6 +13,11 @@
bind:checked="$neverMarkMediaAsSensitive" on:change="onChange(event)">
<label for="choice-never-mark-media-sensitive">Never mark media as sensitive</label>
</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">
<input type="checkbox" id="choice-disable-custom-scrollbars"
bind:checked="$disableCustomScrollbars" on:change="onChange(event)">
@ -27,11 +32,6 @@
bind:checked="$autoplayGifs" on:change="onChange(event)">
<label for="choice-autoplay-gif">Autoplay GIFs</label>
</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">
<input type="checkbox" id="choice-reduce-motion"
bind:checked="$reduceMotion" on:change="onChange(event)">

View file

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

View file

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