Adjusting public display of statuses to look similar to logged-in UI,

fix #361 with rich OEmbed display via iframe, fix #237 by hiding sensitive
content behind a spoiler on public pages

6 files changed, 71 insertions, 25 deletions

diff --git a/app/views/api/oembed/show.json.rabl b/app/views/api/oembed/show.json.rabl
index 2bec9165e..f33b70ee5 100644
--- a/app/views/api/oembed/show.json.rabl
+++ b/app/views/api/oembed/show.json.rabl
@@ -9,6 +9,6 @@ node(:author_url) { |entry| account_url(entry.account) }
 node(:provider_name) { Rails.configuration.x.local_domain }
 node(:provider_url) { root_url }
 node(:cache_age) { 86_400 }
-node(:html) { |entry| "<div style=\"position: relative; height: 0; overflow: hidden; padding-top: 30px; padding-bottom: 56.25%\"><iframe src=\"#{embed_account_stream_entry_url(entry.account, entry)}\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden\" frameborder=\"0\" width=\"#{@width}\" scrolling=\"no\"></iframe></div>" }
+node(:html) { |entry| "<iframe src=\"#{embed_account_stream_entry_url(entry.account, entry)}\" style=\"width: 100%; overflow: hidden\" frameborder=\"0\" width=\"#{@width}\" height=\"#{@height}\" scrolling=\"no\"></iframe>" }
 node(:width) { @width }
 node(:height) { nil }
diff --git a/app/views/stream_entries/_content_spoiler.html.haml b/app/views/stream_entries/_content_spoiler.html.haml
new file mode 100644
index 000000000..d80ea46a0
--- /dev/null
+++ b/app/views/stream_entries/_content_spoiler.html.haml
@@ -0,0 +1,3 @@
+.media-spoiler
+  %span= t('stream_entries.sensitive_content')
+  %span= t('stream_entries.click_to_show')
diff --git a/app/views/stream_entries/_detailed_status.html.haml b/app/views/stream_entries/_detailed_status.html.haml
new file mode 100644
index 000000000..94451d3bd
--- /dev/null
+++ b/app/views/stream_entries/_detailed_status.html.haml
@@ -0,0 +1,36 @@
+.detailed-status.light
+  = link_to TagManager.instance.url_for(status.account), class: 'detailed-status__display-name', target: @external_links ? '_blank' : nil, rel: 'noopener' do
+    %div
+      %div.avatar
+        = image_tag status.account.avatar.url(:original), width: 48, height: 48, alt: ''
+    %span.display-name
+      %strong= display_name(status.account)
+      %span= acct(status.account)
+
+  .status__content= Formatter.instance.format(status)
+
+  - unless status.media_attachments.empty?
+    - if status.media_attachments.first.video?
+      .video-player
+        - if status.sensitive?
+          = render partial: 'stream_entries/content_spoiler'
+        %video{ src: status.media_attachments.first.file.url(:original), loop: true }
+    - else
+      .detailed-status__attachments
+        - if status.sensitive?
+          = render partial: 'stream_entries/content_spoiler'
+        - status.media_attachments.each do |media|
+          .media-item
+            = link_to '', (media.remote_url.blank? ? media.file.url(:original) : media.remote_url), style: "background-image: url(#{media.file.url(:original)})", target: '_blank', rel: 'noopener'
+
+  %div.detailed-status__meta
+    = link_to TagManager.instance.url_for(status), class: 'detailed-status__datetime', target: @external_links ? '_blank' : nil, rel: 'noopener' do
+      %span= l(status.created_at)
+    ·
+    %span
+      = fa_icon('retweet')
+      %span= status.reblogs.count
+    ·
+    %span
+      = fa_icon('star')
+      %span= status.favourites.count
diff --git a/app/views/stream_entries/_simple_status.html.haml b/app/views/stream_entries/_simple_status.html.haml
new file mode 100644
index 000000000..da3bc0ccb
--- /dev/null
+++ b/app/views/stream_entries/_simple_status.html.haml
@@ -0,0 +1,28 @@
+.status.light
+  .status__header
+    .status__meta
+      = link_to time_ago_in_words(status.created_at), TagManager.instance.url_for(status), class: 'status__relative-time', title: l(status.created_at), target: @external_links ? '_blank' : nil, rel: 'noopener'
+
+    = link_to TagManager.instance.url_for(status.account), class: 'status__display-name', target: @external_links ? '_blank' : nil, rel: 'noopener' do
+      .status__avatar
+        %div
+          = image_tag status.account.avatar(:original), width: 48, height: 48, alt: ''
+      %span.display-name
+        %strong= display_name(status.account)
+        %span= acct(status.account)
+
+  .status__content= Formatter.instance.format(status)
+
+  - unless status.media_attachments.empty?
+    .status__attachments
+      - if status.sensitive?
+        = render partial: 'stream_entries/content_spoiler'
+      - if status.media_attachments.first.video?
+        .video-item
+          = link_to (status.media_attachments.first.remote_url.blank? ? status.media_attachments.first.file.url(:original) : status.media_attachments.first.remote_url), style: "background-image: url(#{status.media_attachments.first.file.url(:small)})", target: '_blank', rel: 'noopener' do
+            .video-item__play
+              = fa_icon('play')
+      - else
+        - status.media_attachments.each do |media|
+          .media-item
+            = link_to '', (media.remote_url.blank? ? media.file.url(:original) : media.remote_url), style: "background-image: url(#{media.file.url(:original)})", target: '_blank', rel: 'noopener'
diff --git a/app/views/stream_entries/_status.html.haml b/app/views/stream_entries/_status.html.haml
index 8169b8178..67cb06a83 100644
--- a/app/views/stream_entries/_status.html.haml
+++ b/app/views/stream_entries/_status.html.haml
@@ -1,7 +1,7 @@
 - include_threads ||= false
 - is_predecessor  ||= false
 - is_successor    ||= false
-- centered          = include_threads && !is_predecessor && !is_successor
+- centered        ||= include_threads && !is_predecessor && !is_successor
 
 - if status.reply? && include_threads
   = render partial: 'status', collection: @ancestors, as: :status, locals: { is_predecessor: true }
@@ -13,28 +13,7 @@
       Shared by
       = link_to display_name(status.account), TagManager.instance.url_for(status.account), class: 'name'
 
-  .entry__container
-    .avatar
-      = image_tag avatar_for_status_url(status)
-
-    .entry__container__container
-      .header
-        .header__left
-          = link_to TagManager.instance.url_for(proper_status(status).account), class: 'name' do
-            %strong= display_name(proper_status(status).account)
-            = "@#{proper_status(status).account.acct}"
-
-        .header__right
-          = link_to TagManager.instance.url_for(proper_status(status)), class: 'time' do
-            %span{ title: proper_status(status).created_at }
-              = relative_time(proper_status(status).created_at)
-
-      .content= Formatter.instance.format(proper_status(status))
-
-      - if (status.reblog? ? status.reblog : status).media_attachments.size > 0
-        %ul.media-attachments
-          - (status.reblog? ? status.reblog : status).media_attachments.each do |media|
-            %li.transparent-background= link_to '', media.file.url( :original), style: "background-image: url(#{media.file.url( :small)})", target: '_blank'
+  = render partial: centered ? 'stream_entries/detailed_status' : 'stream_entries/simple_status', locals: { status: proper_status(status) }
 
 - if include_threads
   = render partial: 'status', collection: @descendants, as: :status, locals: { is_successor: true }
diff --git a/app/views/stream_entries/embed.html.haml b/app/views/stream_entries/embed.html.haml
index 4a733d428..fd07fdd91 100644
--- a/app/views/stream_entries/embed.html.haml
+++ b/app/views/stream_entries/embed.html.haml
@@ -1,2 +1,2 @@
 .activity-stream.activity-stream-headless
-  = render partial: @type, locals: { @type.to_sym => @stream_entry.activity }
+  = render partial: @type, locals: { @type.to_sym => @stream_entry.activity, centered: true }