diff --git a/app/helpers/media_component_helper.rb b/app/helpers/media_component_helper.rb new file mode 100644 index 000000000..a57d0b4b6 --- /dev/null +++ b/app/helpers/media_component_helper.rb @@ -0,0 +1,111 @@ +# frozen_string_literal: true + +module MediaComponentHelper + def render_video_component(status, **options) + video = status.ordered_media_attachments.first + + meta = video.file.meta || {} + + component_params = { + sensitive: sensitive_viewer?(status, current_account), + src: full_asset_url(video.file.url(:original)), + preview: full_asset_url(video.thumbnail.present? ? video.thumbnail.url : video.file.url(:small)), + alt: video.description, + blurhash: video.blurhash, + frameRate: meta.dig('original', 'frame_rate'), + inline: true, + media: [ + serialize_media_attachment(video), + ].as_json, + }.merge(**options) + + react_component :video, component_params do + render partial: 'statuses/attachment_list', locals: { attachments: status.ordered_media_attachments } + end + end + + def render_audio_component(status, **options) + audio = status.ordered_media_attachments.first + + meta = audio.file.meta || {} + + component_params = { + src: full_asset_url(audio.file.url(:original)), + poster: full_asset_url(audio.thumbnail.present? ? audio.thumbnail.url : status.account.avatar_static_url), + alt: audio.description, + backgroundColor: meta.dig('colors', 'background'), + foregroundColor: meta.dig('colors', 'foreground'), + accentColor: meta.dig('colors', 'accent'), + duration: meta.dig('original', 'duration'), + }.merge(**options) + + react_component :audio, component_params do + render partial: 'statuses/attachment_list', locals: { attachments: status.ordered_media_attachments } + end + end + + def render_media_gallery_component(status, **options) + component_params = { + sensitive: sensitive_viewer?(status, current_account), + autoplay: prefers_autoplay?, + media: status.ordered_media_attachments.map { |a| serialize_media_attachment(a).as_json }, + }.merge(**options) + + react_component :media_gallery, component_params do + render partial: 'statuses/attachment_list', locals: { attachments: status.ordered_media_attachments } + end + end + + def render_card_component(status, **options) + component_params = { + sensitive: sensitive_viewer?(status, current_account), + card: serialize_status_card(status).as_json, + }.merge(**options) + + react_component :card, component_params + end + + def render_poll_component(status, **options) + component_params = { + disabled: true, + poll: serialize_status_poll(status).as_json, + }.merge(**options) + + react_component :poll, component_params do + render partial: 'statuses/poll', locals: { status: status, poll: status.preloadable_poll, autoplay: prefers_autoplay? } + end + end + + private + + def serialize_media_attachment(attachment) + ActiveModelSerializers::SerializableResource.new( + attachment, + serializer: REST::MediaAttachmentSerializer + ) + end + + def serialize_status_card(status) + ActiveModelSerializers::SerializableResource.new( + status.preview_card, + serializer: REST::PreviewCardSerializer + ) + end + + def serialize_status_poll(status) + ActiveModelSerializers::SerializableResource.new( + status.preloadable_poll, + serializer: REST::PollSerializer, + scope: current_user, + scope_name: :current_user + ) + end + + def sensitive_viewer?(status, account) + if !account.nil? && account.id == status.account_id + status.sensitive + else + status.account.sensitized? || status.sensitive + end + end +end diff --git a/app/helpers/react_component_helper.rb b/app/helpers/react_component_helper.rb new file mode 100644 index 000000000..fc08de13d --- /dev/null +++ b/app/helpers/react_component_helper.rb @@ -0,0 +1,23 @@ +# frozen_string_literal: true + +module ReactComponentHelper + def react_component(name, props = {}, &block) + data = { component: name.to_s.camelcase, props: Oj.dump(props) } + if block.nil? + div_tag_with_data(data) + else + content_tag(:div, data: data, &block) + end + end + + def react_admin_component(name, props = {}) + data = { 'admin-component': name.to_s.camelcase, props: Oj.dump({ locale: I18n.locale }.merge(props)) } + div_tag_with_data(data) + end + + private + + def div_tag_with_data(data) + content_tag(:div, nil, data: data) + end +end diff --git a/app/helpers/statuses_helper.rb b/app/helpers/statuses_helper.rb index e670571d2..9f8759367 100644 --- a/app/helpers/statuses_helper.rb +++ b/app/helpers/statuses_helper.rb @@ -105,93 +105,10 @@ module StatusesHelper end end - def sensitized?(status, account) - if !account.nil? && account.id == status.account_id - status.sensitive - else - status.account.sensitized? || status.sensitive - end - end - def embedded_view? params[:controller] == EMBEDDED_CONTROLLER && params[:action] == EMBEDDED_ACTION end - def render_video_component(status, **options) - video = status.ordered_media_attachments.first - - meta = video.file.meta || {} - - component_params = { - sensitive: sensitized?(status, current_account), - src: full_asset_url(video.file.url(:original)), - preview: full_asset_url(video.thumbnail.present? ? video.thumbnail.url : video.file.url(:small)), - alt: video.description, - blurhash: video.blurhash, - frameRate: meta.dig('original', 'frame_rate'), - inline: true, - media: [ - ActiveModelSerializers::SerializableResource.new(video, serializer: REST::MediaAttachmentSerializer), - ].as_json, - }.merge(**options) - - react_component :video, component_params do - render partial: 'statuses/attachment_list', locals: { attachments: status.ordered_media_attachments } - end - end - - def render_audio_component(status, **options) - audio = status.ordered_media_attachments.first - - meta = audio.file.meta || {} - - component_params = { - src: full_asset_url(audio.file.url(:original)), - poster: full_asset_url(audio.thumbnail.present? ? audio.thumbnail.url : status.account.avatar_static_url), - alt: audio.description, - backgroundColor: meta.dig('colors', 'background'), - foregroundColor: meta.dig('colors', 'foreground'), - accentColor: meta.dig('colors', 'accent'), - duration: meta.dig('original', 'duration'), - }.merge(**options) - - react_component :audio, component_params do - render partial: 'statuses/attachment_list', locals: { attachments: status.ordered_media_attachments } - end - end - - def render_media_gallery_component(status, **options) - component_params = { - sensitive: sensitized?(status, current_account), - autoplay: prefers_autoplay?, - media: status.ordered_media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }, - }.merge(**options) - - react_component :media_gallery, component_params do - render partial: 'statuses/attachment_list', locals: { attachments: status.ordered_media_attachments } - end - end - - def render_card_component(status, **options) - component_params = { - sensitive: sensitized?(status, current_account), - card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json, - }.merge(**options) - - react_component :card, component_params - end - - def render_poll_component(status, **options) - component_params = { - disabled: true, - poll: ActiveModelSerializers::SerializableResource.new(status.preloadable_poll, serializer: REST::PollSerializer, scope: current_user, scope_name: :current_user).as_json, - }.merge(**options) - - react_component :poll, component_params do - render partial: 'statuses/poll', locals: { status: status, poll: status.preloadable_poll, autoplay: prefers_autoplay? } - end - end - def prefers_autoplay? ActiveModel::Type::Boolean.new.cast(params[:autoplay]) || current_user&.setting_auto_play_gif end diff --git a/spec/helpers/media_component_helper_spec.rb b/spec/helpers/media_component_helper_spec.rb new file mode 100644 index 000000000..71a9af6f3 --- /dev/null +++ b/spec/helpers/media_component_helper_spec.rb @@ -0,0 +1,86 @@ +# frozen_string_literal: true + +require 'rails_helper' + +describe MediaComponentHelper do + describe 'render_video_component' do + let(:media) { Fabricate(:media_attachment, type: :video, status: Fabricate(:status)) } + let(:result) { helper.render_video_component(media.status) } + + before do + without_partial_double_verification do + allow(helper).to receive(:current_account).and_return(media.account) + end + end + + it 'renders a react component for the video' do + expect(parsed_html.div['data-component']).to eq('Video') + end + end + + describe 'render_audio_component' do + let(:media) { Fabricate(:media_attachment, type: :audio, status: Fabricate(:status)) } + let(:result) { helper.render_audio_component(media.status) } + + before do + without_partial_double_verification do + allow(helper).to receive(:current_account).and_return(media.account) + end + end + + it 'renders a react component for the audio' do + expect(parsed_html.div['data-component']).to eq('Audio') + end + end + + describe 'render_media_gallery_component' do + let(:media) { Fabricate(:media_attachment, type: :audio, status: Fabricate(:status)) } + let(:result) { helper.render_media_gallery_component(media.status) } + + before do + without_partial_double_verification do + allow(helper).to receive(:current_account).and_return(media.account) + end + end + + it 'renders a react component for the media gallery' do + expect(parsed_html.div['data-component']).to eq('MediaGallery') + end + end + + describe 'render_card_component' do + let(:status) { Fabricate(:status, preview_cards: [Fabricate(:preview_card)]) } + let(:result) { helper.render_card_component(status) } + + before do + without_partial_double_verification do + allow(helper).to receive(:current_account).and_return(status.account) + end + end + + it 'returns the correct react component markup' do + expect(parsed_html.div['data-component']).to eq('Card') + end + end + + describe 'render_poll_component' do + let(:status) { Fabricate(:status, poll: Fabricate(:poll)) } + let(:result) { helper.render_poll_component(status) } + + before do + without_partial_double_verification do + allow(helper).to receive(:current_account).and_return(status.account) + end + end + + it 'returns the correct react component markup' do + expect(parsed_html.div['data-component']).to eq('Poll') + end + end + + private + + def parsed_html + Nokogiri::Slop(result) + end +end diff --git a/spec/helpers/react_component_helper_spec.rb b/spec/helpers/react_component_helper_spec.rb new file mode 100644 index 000000000..3f133bff9 --- /dev/null +++ b/spec/helpers/react_component_helper_spec.rb @@ -0,0 +1,45 @@ +# frozen_string_literal: true + +require 'rails_helper' + +describe ReactComponentHelper do + describe 'react_component' do + context 'with no block passed in' do + let(:result) { helper.react_component('name', { one: :two }) } + + it 'returns a tag with data attributes' do + expect(parsed_html.div['data-component']).to eq('Name') + expect(parsed_html.div['data-props']).to eq('{"one":"two"}') + end + end + + context 'with a block passed in' do + let(:result) do + helper.react_component('name', { one: :two }) do + helper.content_tag(:nav, 'ok') + end + end + + it 'returns a tag with data attributes' do + expect(parsed_html.div['data-component']).to eq('Name') + expect(parsed_html.div['data-props']).to eq('{"one":"two"}') + expect(parsed_html.div.nav.content).to eq('ok') + end + end + end + + describe 'react_admin_component' do + let(:result) { helper.react_admin_component('name', { one: :two }) } + + it 'returns a tag with data attributes' do + expect(parsed_html.div['data-admin-component']).to eq('Name') + expect(parsed_html.div['data-props']).to eq('{"locale":"en","one":"two"}') + end + end + + private + + def parsed_html + Nokogiri::Slop(result) + end +end diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb index de15cb785..26fc3d9fd 100644 --- a/spec/rails_helper.rb +++ b/spec/rails_helper.rb @@ -43,6 +43,7 @@ RSpec.configure do |config| config.filter_rails_from_backtrace! config.include Devise::Test::ControllerHelpers, type: :controller + config.include Devise::Test::ControllerHelpers, type: :helper config.include Devise::Test::ControllerHelpers, type: :view config.include Devise::Test::IntegrationHelpers, type: :feature config.include Paperclip::Shoulda::Matchers