player.html.haml 1.7 KB

12345678910111213141516171819
  1. - content_for :header_tags do
  2. = render_initial_state
  3. = javascript_pack_tag 'public', crossorigin: 'anonymous'
  4. :ruby
  5. meta = @media_attachment.file.meta || {}
  6. - if @media_attachment.video?
  7. = react_component :video, src: @media_attachment.file.url(:original), preview: @media_attachment.thumbnail.present? ? @media_attachment.thumbnail.url : @media_attachment.file.url(:small), frameRate: meta.dig('original', 'frame_rate'), blurhash: @media_attachment.blurhash, width: 670, height: 380, editable: true, detailed: true, inline: true, alt: @media_attachment.description, media: [ActiveModelSerializers::SerializableResource.new(@media_attachment, serializer: REST::MediaAttachmentSerializer)].as_json do
  8. %video{ controls: 'controls' }
  9. %source{ src: @media_attachment.file.url(:original) }
  10. - elsif @media_attachment.gifv?
  11. = react_component :media_gallery, height: 380, standalone: true, autoplay: true, media: [ActiveModelSerializers::SerializableResource.new(@media_attachment, serializer: REST::MediaAttachmentSerializer).as_json] do
  12. %video{ autoplay: 'autoplay', muted: 'muted', loop: 'loop' }
  13. %source{ src: @media_attachment.file.url(:original) }
  14. - elsif @media_attachment.audio?
  15. = react_component :audio, src: @media_attachment.file.url(:original), poster: @media_attachment.thumbnail.present? ? @media_attachment.thumbnail.url : @media_attachment.account.avatar_static_url, backgroundColor: meta.dig('colors', 'background'), foregroundColor: meta.dig('colors', 'foreground'), accentColor: meta.dig('colors', 'accent'), width: 670, height: 380, fullscreen: true, alt: @media_attachment.description, duration: meta.dig(:original, :duration) do
  16. %audio{ controls: 'controls' }
  17. %source{ src: @media_attachment.file.url(:original) }