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

routes/_components/AutoplayVideo.html

@@ -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

routes/_components/LazyImage.html

@@ -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)
     }
   }

routes/_components/NonAutoplayGifv.html

@@ -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

routes/_components/dialog/components/ImageDialog.html

@@ -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;

routes/_components/status/Media.html

@@ -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 }) => {
+      inlineWidth: ({ smallWidth, $largeInlineMedia }) => {
-        if ($groupedImages) return '100%'
+        if (!$largeInlineMedia) {
+          return '100%'
+        }
         return smallWidth || DEFAULT_MEDIA_WIDTH
       },
-      inlineHeight: ({ smallHeight, $groupedImages }) => {
+      inlineHeight: ({ smallHeight, $largeInlineMedia }) => {
-        if ($groupedImages) return 'auto'
+        if (!$largeInlineMedia) {
+          return 'auto'
+        }
         return smallHeight || DEFAULT_MEDIA_HEIGHT
       },
       // width/height to show in a modal

routes/_components/status/MediaAttachments.html

@@ -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}
     <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 }) => {
+        ({ mediaAttachments, $largeInlineMedia }) => {
-          return ($groupedImages && mediaAttachments.length > 1) ? 2 : 1
+          return (!$largeInlineMedia && mediaAttachments.length > 1) ? 2 : 1
         },
       oddCols:
         ({ mediaAttachments }) => {

routes/_components/status/StatusMediaAttachments.html

@@ -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 }) => (

routes/_pages/settings/general.html

@@ -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)">

routes/_store/store.js

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

routes/_utils/coordsToPercent.js

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