mastodon/app/views/media/player.html.haml

- content_for :header_tags do
  = render_initial_state
  = javascript_pack_tag 'common', crossorigin: 'anonymous'
  - if @theme
    - if @theme[:supported_locales].include? I18n.locale.to_s
      = preload_pack_asset "locales/#{@theme[:flavour]}/#{I18n.locale}-json.js"
    - elsif @theme[:supported_locales].include? 'en'
      = preload_pack_asset "locales/#{@theme[:flavour]}/en-json.js"
  = render partial: 'layouts/theme', object: @theme

:ruby
  meta = @media_attachment.file.meta || {}

- if @media_attachment.video?
  = react_component :video,
                    alt: @media_attachment.description,
                    blurhash: @media_attachment.blurhash,
                    detailed: true,
                    editable: true,
                    frameRate: meta.dig('original', 'frame_rate'),
                    height: 380,
                    inline: true,
                    media: [ActiveModelSerializers::SerializableResource.new(@media_attachment, serializer: REST::MediaAttachmentSerializer)].as_json,
                    preview: @media_attachment.thumbnail.present? ? @media_attachment.thumbnail.url : @media_attachment.file.url(:small),
                    src: @media_attachment.file.url(:original),
                    width: 670 do
    %video{ controls: 'controls' }
      %source{ src: @media_attachment.file.url(:original) }
- elsif @media_attachment.gifv?
  = react_component :media_gallery,
                    autoplay: true,
                    height: 380,
                    media: [ActiveModelSerializers::SerializableResource.new(@media_attachment, serializer: REST::MediaAttachmentSerializer).as_json],
                    standalone: true do
    %video{ autoplay: 'autoplay', muted: 'muted', loop: 'loop' }
      %source{ src: @media_attachment.file.url(:original) }
- elsif @media_attachment.audio?
  = react_component :audio,
                    accentColor: meta.dig('colors', 'accent'),
                    alt: @media_attachment.description,
                    backgroundColor: meta.dig('colors', 'background'),
                    duration: meta.dig(:original, :duration),
                    foregroundColor: meta.dig('colors', 'foreground'),
                    fullscreen: true,
                    height: 380,
                    poster: @media_attachment.thumbnail.present? ? @media_attachment.thumbnail.url : @media_attachment.account.avatar_static_url,
                    src: @media_attachment.file.url(:original),
                    width: 670 do
    %audio{ controls: 'controls' }
      %source{ src: @media_attachment.file.url(:original) }