From 6cc5b822f5ca7df9b267ac2b5d24e2aac2dc0325 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 10 Jul 2020 22:09:28 +0200 Subject: [PATCH] Fix audio and video items in account gallery in web UI (#14282) * Fix audio and video items in account gallery in web UI - Fix audio items not using thumbnails - Fix video items not using custom thumbnails - Fix video items autoplaying like GIFs * Change audio and video items in account gallery to autoplay when opened in web UI * Fix code style issue --- .../account_gallery/components/media_item.js | 114 +++++++++--------- .../features/account_gallery/index.js | 4 +- .../mastodon/features/audio/index.js | 14 ++- .../features/ui/components/audio_modal.js | 18 ++- app/javascript/mastodon/selectors/index.js | 5 +- 5 files changed, 91 insertions(+), 64 deletions(-) diff --git a/app/javascript/mastodon/features/account_gallery/components/media_item.js b/app/javascript/mastodon/features/account_gallery/components/media_item.js index 9eb4ed0d3e..c9a7af7f77 100644 --- a/app/javascript/mastodon/features/account_gallery/components/media_item.js +++ b/app/javascript/mastodon/features/account_gallery/components/media_item.js @@ -61,57 +61,9 @@ export default class MediaItem extends ImmutablePureComponent { const width = `${Math.floor((displayWidth - 4) / 3) - 4}px`; const height = width; const status = attachment.get('status'); - const title = status.get('spoiler_text') || attachment.get('description'); + const title = status.get('spoiler_text') || attachment.get('description'); - let thumbnail = ''; - let icon; - - if (attachment.get('type') === 'unknown') { - // Skip - } else if (attachment.get('type') === 'audio') { - thumbnail = ( - - - - ); - } else if (attachment.get('type') === 'image') { - const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0; - const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0; - const x = ((focusX / 2) + .5) * 100; - const y = ((focusY / -2) + .5) * 100; - - thumbnail = ( - {attachment.get('description')} - ); - } else if (['gifv', 'video'].indexOf(attachment.get('type')) !== -1) { - const autoPlay = !isIOS() && autoPlayGif; - const label = attachment.get('type') === 'video' ? : 'GIF'; - - thumbnail = ( -
-
- ); - } + let thumbnail, label, icon, content; if (!visible) { icon = ( @@ -119,6 +71,60 @@ export default class MediaItem extends ImmutablePureComponent { ); + } else { + if (['audio', 'video'].includes(attachment.get('type'))) { + content = ( + {attachment.get('description')} + ); + + if (attachment.get('type') === 'audio') { + label = ; + } else { + label = ; + } + } else if (attachment.get('type') === 'image') { + const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0; + const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0; + const x = ((focusX / 2) + .5) * 100; + const y = ((focusY / -2) + .5) * 100; + + content = ( + {attachment.get('description')} + ); + } else if (attachment.get('type') === 'gifv') { + content = ( +