Also: - Fix Mastodon logo not showing up in status embeds - Fix blurhash not being used in status embeds - Fix blurhash not being used in admin UI - Fix autoplay param not working correctly on status embedsmaster^2
@@ -23,6 +23,7 @@ class Item extends React.PureComponent { | |||||
onClick: PropTypes.func.isRequired, | onClick: PropTypes.func.isRequired, | ||||
displayWidth: PropTypes.number, | displayWidth: PropTypes.number, | ||||
visible: PropTypes.bool.isRequired, | visible: PropTypes.bool.isRequired, | ||||
autoplay: PropTypes.bool, | |||||
}; | }; | ||||
static defaultProps = { | static defaultProps = { | ||||
@@ -48,9 +49,13 @@ class Item extends React.PureComponent { | |||||
} | } | ||||
} | } | ||||
getAutoPlay() { | |||||
return this.props.autoplay || autoPlayGif; | |||||
} | |||||
hoverToPlay () { | hoverToPlay () { | ||||
const { attachment } = this.props; | const { attachment } = this.props; | ||||
return !autoPlayGif && attachment.get('type') === 'gifv'; | |||||
return !this.getAutoPlay() && attachment.get('type') === 'gifv'; | |||||
} | } | ||||
handleClick = (e) => { | handleClick = (e) => { | ||||
@@ -201,7 +206,7 @@ class Item extends React.PureComponent { | |||||
</a> | </a> | ||||
); | ); | ||||
} else if (attachment.get('type') === 'gifv') { | } else if (attachment.get('type') === 'gifv') { | ||||
const autoPlay = !isIOS() && autoPlayGif; | |||||
const autoPlay = !isIOS() && this.getAutoPlay(); | |||||
thumbnail = ( | thumbnail = ( | ||||
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}> | <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}> | ||||
@@ -248,6 +253,7 @@ class MediaGallery extends React.PureComponent { | |||||
defaultWidth: PropTypes.number, | defaultWidth: PropTypes.number, | ||||
cacheWidth: PropTypes.func, | cacheWidth: PropTypes.func, | ||||
visible: PropTypes.bool, | visible: PropTypes.bool, | ||||
autoplay: PropTypes.bool, | |||||
onToggleVisibility: PropTypes.func, | onToggleVisibility: PropTypes.func, | ||||
}; | }; | ||||
@@ -297,7 +303,7 @@ class MediaGallery extends React.PureComponent { | |||||
} | } | ||||
render () { | render () { | ||||
const { media, intl, sensitive, height, defaultWidth, standalone } = this.props; | |||||
const { media, intl, sensitive, height, defaultWidth, standalone, autoplay } = this.props; | |||||
const { visible } = this.state; | const { visible } = this.state; | ||||
const width = this.state.width || defaultWidth; | const width = this.state.width || defaultWidth; | ||||
@@ -320,9 +326,9 @@ class MediaGallery extends React.PureComponent { | |||||
const uncached = media.every(attachment => attachment.get('type') === 'unknown'); | const uncached = media.every(attachment => attachment.get('type') === 'unknown'); | ||||
if (standalone && this.isFullSizeEligible()) { | if (standalone && this.isFullSizeEligible()) { | ||||
children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />; | |||||
children = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />; | |||||
} else { | } else { | ||||
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} visible={visible || uncached} />); | |||||
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} visible={visible || uncached} />); | |||||
} | } | ||||
if (uncached) { | if (uncached) { | ||||
@@ -14,9 +14,12 @@ | |||||
- unless status.proper.media_attachments.empty? | - unless status.proper.media_attachments.empty? | ||||
- if status.proper.media_attachments.first.video? | - if status.proper.media_attachments.first.video? | ||||
- video = status.proper.media_attachments.first | - video = status.proper.media_attachments.first | ||||
= react_component :video, src: video.file.url(:original), preview: video.file.url(:small), sensitive: !current_account&.user&.show_all_media? && status.proper.sensitive? || current_account&.user&.hide_all_media?, width: 610, height: 343, inline: true, alt: video.description | |||||
= react_component :video, src: video.file.url(:original), preview: video.file.url(:small), blurhash: video.blurhash, sensitive: status.proper.sensitive?, visible: false, width: 610, height: 343, inline: true, alt: video.description | |||||
- elsif status.media_attachments.first.audio? | |||||
- audio = status.proper.media_attachments.first | |||||
= react_component :audio, src: audio.file.url(:original), height: 110, alt: audio.description, duration: audio.file.meta.dig(:original, :duration) | |||||
- else | - else | ||||
= react_component :media_gallery, height: 343, sensitive: !current_account&.user&.show_all_media? && status.proper.sensitive? || current_account&.user&.hide_all_media?, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.proper.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } | |||||
= react_component :media_gallery, height: 343, sensitive: status.proper.sensitive?, visible: false, media: status.proper.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } | |||||
.detailed-status__meta | .detailed-status__meta | ||||
= link_to ActivityPub::TagManager.instance.url_for(status), class: 'detailed-status__datetime', target: stream_link_target, rel: 'noopener noreferrer' do | = link_to ActivityPub::TagManager.instance.url_for(status), class: 'detailed-status__datetime', target: stream_link_target, rel: 'noopener noreferrer' do | ||||
@@ -1,4 +1,5 @@ | |||||
- content_for :header_tags do | - content_for :header_tags do | ||||
= render_initial_state | |||||
= javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous' | = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous' | ||||
- content_for :content do | - content_for :content do | ||||
@@ -14,6 +14,10 @@ | |||||
= stylesheet_pack_tag Setting.default_settings['theme'], media: 'all' | = stylesheet_pack_tag Setting.default_settings['theme'], media: 'all' | ||||
= javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous' | = javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous' | ||||
= javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous' | = javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous' | ||||
= render_initial_state | |||||
= javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous' | = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous' | ||||
%body.embed | %body.embed | ||||
= yield | = yield | ||||
%div{ style: 'display: none'} | |||||
= render file: Rails.root.join('app', 'javascript', 'images', 'logo_transparent.svg') |
@@ -29,14 +29,14 @@ | |||||
- if !status.media_attachments.empty? | - if !status.media_attachments.empty? | ||||
- if status.media_attachments.first.video? | - if status.media_attachments.first.video? | ||||
- video = status.media_attachments.first | - video = status.media_attachments.first | ||||
= react_component :video, src: video.file.url(:original), preview: video.file.url(:small), blurhash: video.blurhash, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, width: 670, height: 380, detailed: true, inline: true, alt: video.description do | |||||
= react_component :video, src: video.file.url(:original), preview: video.file.url(:small), blurhash: video.blurhash, sensitive: status.sensitive?, width: 670, height: 380, detailed: true, inline: true, alt: video.description do | |||||
= render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | ||||
- elsif status.media_attachments.first.audio? | - elsif status.media_attachments.first.audio? | ||||
- audio = status.media_attachments.first | - audio = status.media_attachments.first | ||||
= react_component :audio, src: audio.file.url(:original), height: 130, alt: audio.description, preload: true, duration: audio.file.meta.dig(:original, :duration) do | = react_component :audio, src: audio.file.url(:original), height: 130, alt: audio.description, preload: true, duration: audio.file.meta.dig(:original, :duration) do | ||||
= render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | ||||
- else | - else | ||||
= react_component :media_gallery, height: 380, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, standalone: true, 'autoPlayGif': current_account&.user&.setting_auto_play_gif || autoplay, 'reduceMotion': current_account&.user&.setting_reduce_motion, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } do | |||||
= react_component :media_gallery, height: 380, sensitive: status.sensitive?, standalone: true, autoplay: autoplay, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } do | |||||
= render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | ||||
- elsif status.preview_card | - elsif status.preview_card | ||||
= react_component :card, 'maxDescription': 160, card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json | = react_component :card, 'maxDescription': 160, card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json | ||||
@@ -33,14 +33,14 @@ | |||||
- if !status.media_attachments.empty? | - if !status.media_attachments.empty? | ||||
- if status.media_attachments.first.video? | - if status.media_attachments.first.video? | ||||
- video = status.media_attachments.first | - video = status.media_attachments.first | ||||
= react_component :video, src: video.file.url(:original), preview: video.file.url(:small), blurhash: video.blurhash, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, width: 610, height: 343, inline: true, alt: video.description do | |||||
= react_component :video, src: video.file.url(:original), preview: video.file.url(:small), blurhash: video.blurhash, sensitive: status.sensitive?, width: 610, height: 343, inline: true, alt: video.description do | |||||
= render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | ||||
- elsif status.media_attachments.first.audio? | - elsif status.media_attachments.first.audio? | ||||
- audio = status.media_attachments.first | - audio = status.media_attachments.first | ||||
= react_component :audio, src: audio.file.url(:original), height: 110, alt: audio.description, duration: audio.file.meta.dig(:original, :duration) do | = react_component :audio, src: audio.file.url(:original), height: 110, alt: audio.description, duration: audio.file.meta.dig(:original, :duration) do | ||||
= render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | ||||
- else | - else | ||||
= react_component :media_gallery, height: 343, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, 'autoPlayGif': current_account&.user&.setting_auto_play_gif || autoplay, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } do | |||||
= react_component :media_gallery, height: 343, sensitive: status.sensitive?, autoplay: autoplay, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } do | |||||
= render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | ||||
- elsif status.preview_card | - elsif status.preview_card | ||||
= react_component :card, 'maxDescription': 160, card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json | = react_component :card, 'maxDescription': 160, card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json | ||||