From 11658d8653c7caadddfb0e3fe27272107c2e87b1 Mon Sep 17 00:00:00 2001 From: "Renato \"Lond\" Cerqueira" Date: Thu, 30 Aug 2018 23:14:01 +0200 Subject: Add animate custom emoji param to embed pages (#8507) * Add animate custom emoji param to embed pages * Rename param, use it for avatars and gifs * Fix issues pointed by codeclimate and breaking test * Ignore brakeman warning --- app/views/stream_entries/_detailed_status.html.haml | 11 +++++++---- app/views/stream_entries/_simple_status.html.haml | 11 +++++++---- app/views/stream_entries/_status.html.haml | 7 ++++--- app/views/stream_entries/embed.html.haml | 2 +- 4 files changed, 19 insertions(+), 12 deletions(-) (limited to 'app/views') diff --git a/app/views/stream_entries/_detailed_status.html.haml b/app/views/stream_entries/_detailed_status.html.haml index 7843005c1..6251cdd1a 100644 --- a/app/views/stream_entries/_detailed_status.html.haml +++ b/app/views/stream_entries/_detailed_status.html.haml @@ -1,10 +1,13 @@ .detailed-status.detailed-status--flex = link_to TagManager.instance.url_for(status.account), class: 'detailed-status__display-name p-author h-card', target: stream_link_target, rel: 'noopener' do .detailed-status__display-avatar - = image_tag status.account.avatar.url(:original), width: 48, height: 48, alt: '', class: 'account__avatar u-photo' + - if current_account&.user&.setting_auto_play_gif || autoplay + = image_tag status.account.avatar.url(:original), width: 48, height: 48, alt: '', class: 'account__avatar u-photo' + - else + = image_tag status.account.avatar.url(:static), width: 48, height: 48, alt: '', class: 'account__avatar u-photo' %span.display-name %bdi - %strong.display-name__html.p-name.emojify= display_name(status.account, custom_emojify: true) + %strong.display-name__html.p-name.emojify= display_name(status.account, custom_emojify: true, autoplay: autoplay) %span.display-name__account = acct(status.account) = fa_icon('lock') if status.account.locked? @@ -16,14 +19,14 @@ %p{ style: 'margin-bottom: 0' }< %span.p-summary> #{Formatter.instance.format_spoiler(status)}  %a.status__content__spoiler-link{ href: '#' }= t('statuses.show_more') - .e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status, custom_emojify: true) + .e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status, custom_emojify: true, autoplay: autoplay) - if !status.media_attachments.empty? - if status.media_attachments.first.video? - video = status.media_attachments.first = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), sensitive: status.sensitive? && !current_account&.user&.setting_display_sensitive_media, width: 670, height: 380, detailed: true, inline: true, alt: video.description - else - = react_component :media_gallery, height: 380, sensitive: status.sensitive? && !current_account&.user&.setting_display_sensitive_media, standalone: true, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, 'reduceMotion': current_account&.user&.setting_reduce_motion, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } + = react_component :media_gallery, height: 380, sensitive: status.sensitive? && !current_account&.user&.setting_display_sensitive_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 } - elsif status.preview_cards.first = react_component :card, 'maxDescription': 160, card: ActiveModelSerializers::SerializableResource.new(status.preview_cards.first, serializer: REST::PreviewCardSerializer).as_json diff --git a/app/views/stream_entries/_simple_status.html.haml b/app/views/stream_entries/_simple_status.html.haml index 875795f2a..1d596d4e0 100644 --- a/app/views/stream_entries/_simple_status.html.haml +++ b/app/views/stream_entries/_simple_status.html.haml @@ -7,10 +7,13 @@ = link_to TagManager.instance.url_for(status.account), class: 'status__display-name p-author h-card', target: stream_link_target, rel: 'noopener' do .status__avatar %div - = image_tag status.account.avatar(:original), width: 48, height: 48, alt: '', class: 'u-photo account__avatar' + - if current_account&.user&.setting_auto_play_gif || autoplay + = image_tag status.account.avatar(:original), width: 48, height: 48, alt: '', class: 'u-photo account__avatar' + - else + = image_tag status.account.avatar(:static), width: 48, height: 48, alt: '', class: 'u-photo account__avatar' %span.display-name %bdi - %strong.display-name__html.p-name.emojify= display_name(status.account, custom_emojify: true) + %strong.display-name__html.p-name.emojify= display_name(status.account, custom_emojify: true, autoplay: autoplay) %span.display-name__account = acct(status.account) = fa_icon('lock') if status.account.locked? @@ -19,14 +22,14 @@ %p{ style: 'margin-bottom: 0' }< %span.p-summary> #{Formatter.instance.format_spoiler(status)}  %a.status__content__spoiler-link{ href: '#' }= t('statuses.show_more') - .e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status, custom_emojify: true) + .e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status, custom_emojify: true, autoplay: autoplay) - unless status.media_attachments.empty? - if status.media_attachments.first.video? - video = status.media_attachments.first = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), sensitive: status.sensitive? && !current_account&.user&.setting_display_sensitive_media, width: 610, height: 343, inline: true, alt: video.description - else - = react_component :media_gallery, height: 343, sensitive: status.sensitive? && !current_account&.user&.setting_display_sensitive_media, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } + = react_component :media_gallery, height: 343, sensitive: status.sensitive? && !current_account&.user&.setting_display_sensitive_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 } .status__action-bar .status__action-bar__counter diff --git a/app/views/stream_entries/_status.html.haml b/app/views/stream_entries/_status.html.haml index 92003a48f..83887cd87 100644 --- a/app/views/stream_entries/_status.html.haml +++ b/app/views/stream_entries/_status.html.haml @@ -5,6 +5,7 @@ is_successor ||= false direct_reply_id ||= false parent_id ||= false + autoplay ||= current_account&.user&.setting_auto_play_gif is_direct_parent = direct_reply_id == status.id is_direct_child = parent_id == status.in_reply_to_id centered ||= include_threads && !is_predecessor && !is_successor @@ -18,7 +19,7 @@ .entry{ class: entry_classes } = link_to_more TagManager.instance.url_for(@next_ancestor) - = render partial: 'stream_entries/status', collection: @ancestors, as: :status, locals: { is_predecessor: true, direct_reply_id: status.in_reply_to_id } + = render partial: 'stream_entries/status', collection: @ancestors, as: :status, locals: { is_predecessor: true, direct_reply_id: status.in_reply_to_id }, autoplay: autoplay .entry{ class: entry_classes } @@ -38,14 +39,14 @@ %span = t('stream_entries.pinned') - = render (centered ? 'stream_entries/detailed_status' : 'stream_entries/simple_status'), status: status.proper + = render (centered ? 'stream_entries/detailed_status' : 'stream_entries/simple_status'), status: status.proper, autoplay: autoplay - if include_threads - if @since_descendant_thread_id .entry{ class: entry_classes } = link_to_more short_account_status_url(status.account.username, status, max_descendant_thread_id: @since_descendant_thread_id + 1) - @descendant_threads.each do |thread| - = render partial: 'stream_entries/status', collection: thread[:statuses], as: :status, locals: { is_successor: true, parent_id: status.id } + = render partial: 'stream_entries/status', collection: thread[:statuses], as: :status, locals: { is_successor: true, parent_id: status.id }, autoplay: autoplay - if thread[:next_status] .entry{ class: entry_classes } diff --git a/app/views/stream_entries/embed.html.haml b/app/views/stream_entries/embed.html.haml index d20c1e93e..4871c101e 100644 --- a/app/views/stream_entries/embed.html.haml +++ b/app/views/stream_entries/embed.html.haml @@ -1,3 +1,3 @@ - cache @stream_entry.activity do .activity-stream.activity-stream--headless - = render "stream_entries/#{@type}", @type.to_sym => @stream_entry.activity, centered: true + = render "stream_entries/#{@type}", @type.to_sym => @stream_entry.activity, centered: true, autoplay: @autoplay -- cgit From 1bfe735d574fdbb01b1aea07db6c69fb3a32b90f Mon Sep 17 00:00:00 2001 From: M Somerville Date: Thu, 30 Aug 2018 22:53:30 +0100 Subject: Inactive header in main profile to match column. (#8520) --- app/javascript/styles/mastodon/containers.scss | 21 +++++++++++++++++++++ app/views/accounts/_header.html.haml | 2 +- 2 files changed, 22 insertions(+), 1 deletion(-) (limited to 'app/views') diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 8ecedd2cb..2c2ce5d3b 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -345,6 +345,23 @@ margin-bottom: 10px; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + &.inactive { + opacity: 0.5; + + .public-account-header__image, + .avatar { + filter: grayscale(100%); + } + + .logo-button { + background-color: $secondary-text-color; + + svg path:last-child { + fill: $secondary-text-color; + } + } + } + &__image { border-radius: 4px 4px 0 0; overflow: hidden; @@ -582,6 +599,10 @@ border-bottom: 4px solid $highlight-text-color; opacity: 1; } + + &.inactive::after { + border-bottom-color: $secondary-text-color; + } } &:hover { diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml index f09beff98..95e55a1b0 100644 --- a/app/views/accounts/_header.html.haml +++ b/app/views/accounts/_header.html.haml @@ -1,4 +1,4 @@ -.public-account-header +.public-account-header{:class => ("inactive" if account.moved?)} .public-account-header__image = image_tag account.header.url, class: 'parallax' .public-account-header__bar -- cgit From fe56d26f7b5bf6718bb5b8c28a7daaa45fd302ee Mon Sep 17 00:00:00 2001 From: "Renato \"Lond\" Cerqueira" Date: Fri, 31 Aug 2018 15:16:59 +0200 Subject: Fix autoplay issue with spoiler tag (#8540) Add tests to avoid similar issues in the future --- app/lib/formatter.rb | 2 +- .../stream_entries/_detailed_status.html.haml | 2 +- app/views/stream_entries/_simple_status.html.haml | 2 +- spec/lib/formatter_spec.rb | 23 ++++++++++++++++++++++ 4 files changed, 26 insertions(+), 3 deletions(-) (limited to 'app/views') diff --git a/app/lib/formatter.rb b/app/lib/formatter.rb index 0b4690394..8b694536c 100644 --- a/app/lib/formatter.rb +++ b/app/lib/formatter.rb @@ -61,7 +61,7 @@ class Formatter Sanitize.fragment(html, config) end - def format_spoiler(status) + def format_spoiler(status, **options) html = encode(status.spoiler_text) html = encode_custom_emojis(html, status.emojis, options[:autoplay]) html.html_safe # rubocop:disable Rails/OutputSafety diff --git a/app/views/stream_entries/_detailed_status.html.haml b/app/views/stream_entries/_detailed_status.html.haml index 6251cdd1a..bf5f614a1 100644 --- a/app/views/stream_entries/_detailed_status.html.haml +++ b/app/views/stream_entries/_detailed_status.html.haml @@ -17,7 +17,7 @@ .status__content.emojify< - if status.spoiler_text? %p{ style: 'margin-bottom: 0' }< - %span.p-summary> #{Formatter.instance.format_spoiler(status)}  + %span.p-summary> #{Formatter.instance.format_spoiler(status, autoplay: autoplay)}  %a.status__content__spoiler-link{ href: '#' }= t('statuses.show_more') .e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status, custom_emojify: true, autoplay: autoplay) diff --git a/app/views/stream_entries/_simple_status.html.haml b/app/views/stream_entries/_simple_status.html.haml index 1d596d4e0..e147596f6 100644 --- a/app/views/stream_entries/_simple_status.html.haml +++ b/app/views/stream_entries/_simple_status.html.haml @@ -20,7 +20,7 @@ .status__content.emojify< - if status.spoiler_text? %p{ style: 'margin-bottom: 0' }< - %span.p-summary> #{Formatter.instance.format_spoiler(status)}  + %span.p-summary> #{Formatter.instance.format_spoiler(status, autoplay: autoplay)}  %a.status__content__spoiler-link{ href: '#' }= t('statuses.show_more') .e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status, custom_emojify: true, autoplay: autoplay) diff --git a/spec/lib/formatter_spec.rb b/spec/lib/formatter_spec.rb index d60d24bf6..0c2248cae 100644 --- a/spec/lib/formatter_spec.rb +++ b/spec/lib/formatter_spec.rb @@ -170,6 +170,29 @@ RSpec.describe Formatter do end end + + describe '#format_spoiler' do + subject { Formatter.instance.format_spoiler(status) } + + context 'given a post containing plain text' do + let(:status) { Fabricate(:status, text: 'text', spoiler_text: 'Secret!', uri: nil) } + + it 'Returns the spoiler text' do + is_expected.to eq 'Secret!' + end + end + + context 'given a post with an emoji shortcode at the start' do + let!(:emoji) { Fabricate(:custom_emoji) } + let(:status) { Fabricate(:status, text: 'text', spoiler_text: ':coolcat: Secret!', uri: nil) } + let(:text) { ':coolcat: Beep boop' } + + it 'converts the shortcode to an image tag' do + is_expected.to match(/