Fix #463 - Fetch and display previews of URLs using OpenGraph tags

Gemfile

@@ -48,6 +48,7 @@ gem 'rails-settings-cached'
 gem 'pg_search'
 gem 'simple-navigation'
 gem 'statsd-instrument'
+gem 'ruby-oembed', require: 'oembed'
 
 gem 'react-rails'
 gem 'browserify-rails'

Gemfile.lock

@@ -334,6 +334,7 @@ GEM
       rainbow (>= 1.99.1, < 3.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (~> 1.0, >= 1.0.1)
+    ruby-oembed (0.10.1)
     ruby-progressbar (1.8.1)
     safe_yaml (1.0.4)
     sass (3.4.22)
@@ -457,6 +458,7 @@ DEPENDENCIES
   rspec-rails
   rspec-sidekiq
   rubocop
+  ruby-oembed
   sass-rails (~> 5.0)
   sdoc (~> 0.4.0)
   sidekiq

app/assets/javascripts/components/actions/cards.jsx

@@ -0,0 +1,40 @@
+import api from '../api';
+
+export const STATUS_CARD_FETCH_REQUEST = 'STATUS_CARD_FETCH_REQUEST';
+export const STATUS_CARD_FETCH_SUCCESS = 'STATUS_CARD_FETCH_SUCCESS';
+export const STATUS_CARD_FETCH_FAIL    = 'STATUS_CARD_FETCH_FAIL';
+
+export function fetchStatusCard(id) {
+  return (dispatch, getState) => {
+    dispatch(fetchStatusCardRequest(id));
+
+    api(getState).get(`/api/v1/statuses/${id}/card`).then(response => {
+      dispatch(fetchStatusCardSuccess(id, response.data));
+    }).catch(error => {
+      dispatch(fetchStatusCardFail(id, error));
+    });
+  };
+};
+
+export function fetchStatusCardRequest(id) {
+  return {
+    type: STATUS_CARD_FETCH_REQUEST,
+    id
+  };
+};
+
+export function fetchStatusCardSuccess(id, card) {
+  return {
+    type: STATUS_CARD_FETCH_SUCCESS,
+    id,
+    card
+  };
+};
+
+export function fetchStatusCardFail(id, error) {
+  return {
+    type: STATUS_CARD_FETCH_FAIL,
+    id,
+    error
+  };
+};

app/assets/javascripts/components/actions/statuses.jsx

@@ -1,6 +1,7 @@
 import api from '../api';
 
 import { deleteFromTimelines } from './timelines';
+import { fetchStatusCard } from './cards';
 
 export const STATUS_FETCH_REQUEST = 'STATUS_FETCH_REQUEST';
 export const STATUS_FETCH_SUCCESS = 'STATUS_FETCH_SUCCESS';
@@ -31,6 +32,7 @@ export function fetchStatus(id) {
     api(getState).get(`/api/v1/statuses/${id}`).then(response => {
       dispatch(fetchStatusSuccess(response.data, skipLoading));
       dispatch(fetchContext(id));
+      dispatch(fetchStatusCard(id));
     }).catch(error => {
       dispatch(fetchStatusFail(id, error, skipLoading));
     });

app/assets/javascripts/components/features/status/components/card.jsx

@@ -0,0 +1,96 @@
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+const outerStyle = {
+  display: 'flex',
+  cursor: 'pointer',
+  fontSize: '14px',
+  border: '1px solid #363c4b',
+  borderRadius: '4px',
+  color: '#616b86',
+  marginTop: '14px',
+  textDecoration: 'none',
+  overflow: 'hidden'
+};
+
+const contentStyle = {
+  flex: '2',
+  padding: '8px',
+  paddingLeft: '14px'
+};
+
+const titleStyle = {
+  display: 'block',
+  fontWeight: '500',
+  marginBottom: '5px',
+  color: '#d9e1e8'
+};
+
+const descriptionStyle = {
+  color: '#d9e1e8'
+};
+
+const imageOuterStyle = {
+  flex: '1',
+  background: '#373b4a'
+};
+
+const imageStyle = {
+  display: 'block',
+  width: '100%',
+  height: 'auto',
+  margin: '0',
+  borderRadius: '4px 0 0 4px'
+};
+
+const hostStyle = {
+  display: 'block',
+  marginTop: '5px',
+  fontSize: '13px'
+};
+
+const getHostname = url => {
+  const parser = document.createElement('a');
+  parser.href = url;
+  return parser.hostname;
+};
+
+const Card = React.createClass({
+  propTypes: {
+    card: ImmutablePropTypes.map
+  },
+
+  mixins: [PureRenderMixin],
+
+  render () {
+    const { card } = this.props;
+
+    if (card === null) {
+      return null;
+    }
+
+    let image = '';
+
+    if (card.get('image')) {
+      image = (
+        <div style={imageOuterStyle}>
+          <img src={card.get('image')} alt={card.get('title')} style={imageStyle} />
+        </div>
+      );
+    }
+
+    return (
+      <a style={outerStyle} href={card.get('url')} className='status-card'>
+        {image}
+
+        <div style={contentStyle}>
+          <strong style={titleStyle}>{card.get('title')}</strong>
+          <p style={descriptionStyle}>{card.get('description')}</p>
+          <span style={hostStyle}>{getHostname(card.get('url'))}</span>
+        </div>
+      </a>
+    );
+  }
+});
+
+export default Card;

app/assets/javascripts/components/features/status/components/detailed_status.jsx

@@ -7,6 +7,7 @@ import MediaGallery from '../../../components/media_gallery';
 import VideoPlayer from '../../../components/video_player';
 import { Link } from 'react-router';
 import { FormattedDate, FormattedNumber } from 'react-intl';
+import CardContainer from '../containers/card_container';
 
 const DetailedStatus = React.createClass({
 
@@ -42,6 +43,8 @@ const DetailedStatus = React.createClass({
       } else {
         media = <MediaGallery sensitive={status.get('sensitive')} media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} />;
       }
+    } else {
+      media = <CardContainer statusId={status.get('id')} />;
     }
 
     if (status.get('application')) {

app/assets/javascripts/components/features/status/containers/card_container.jsx

@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import Card from '../components/card';
+
+const mapStateToProps = (state, { statusId }) => ({
+  card: state.getIn(['cards', statusId], null)
+});
+
+export default connect(mapStateToProps)(Card);

app/assets/javascripts/components/reducers/cards.jsx

@@ -0,0 +1,14 @@
+import { STATUS_CARD_FETCH_SUCCESS } from '../actions/cards';
+
+import Immutable from 'immutable';
+
+const initialState = Immutable.Map();
+
+export default function cards(state = initialState, action) {
+  switch(action.type) {
+  case STATUS_CARD_FETCH_SUCCESS:
+    return state.set(action.id, Immutable.fromJS(action.card));
+  default:
+    return state;
+  }
+};

app/assets/javascripts/components/reducers/index.jsx

@@ -13,6 +13,7 @@ import search from './search';
 import notifications from './notifications';
 import settings from './settings';
 import status_lists from './status_lists';
+import cards from './cards';
 
 export default combineReducers({
   timelines,
@@ -28,5 +29,6 @@ export default combineReducers({
   relationships,
   search,
   notifications,
-  settings
+  settings,
+  cards
 });

app/assets/stylesheets/components.scss

@@ -680,3 +680,9 @@ button.active i.fa-retweet {
   transition-duration: 0.9s;
   background-position: 0 -209px;
 }
+
+.status-card {
+  &:hover {
+    background: #363c4b;
+  }
+}

app/controllers/api/v1/statuses_controller.rb

@@ -3,8 +3,8 @@
 class Api::V1::StatusesController < ApiController
   before_action -> { doorkeeper_authorize! :read }, except: [:create, :destroy, :reblog, :unreblog, :favourite, :unfavourite]
   before_action -> { doorkeeper_authorize! :write }, only:  [:create, :destroy, :reblog, :unreblog, :favourite, :unfavourite]
-  before_action :require_user!, except: [:show, :context, :reblogged_by, :favourited_by]
-  before_action :set_status, only:      [:show, :context, :reblogged_by, :favourited_by]
+  before_action :require_user!, except: [:show, :context, :card, :reblogged_by, :favourited_by]
+  before_action :set_status, only:      [:show, :context, :card, :reblogged_by, :favourited_by]
 
   respond_to :json
 
@@ -21,6 +21,10 @@ def context
     set_counters_maps(statuses)
   end
 
+  def card
+    @card = PreviewCard.find_by!(status: @status)
+  end
+
   def reblogged_by
     results   = @status.reblogs.paginate_by_max_id(DEFAULT_ACCOUNTS_LIMIT, params[:max_id], params[:since_id])
     accounts  = Account.where(id: results.map(&:account_id)).map { |a| [a.id, a] }.to_h

app/models/preview_card.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class PreviewCard < ApplicationRecord
+  IMAGE_MIME_TYPES = ['image/jpeg', 'image/png', 'image/gif'].freeze
+
+  belongs_to :status
+
+  has_attached_file :image, styles: { original: '120x120#' }, convert_options: { all: '-quality 80 -strip' }
+
+  validates :url, presence: true
+  validates_attachment_content_type :image, content_type: IMAGE_MIME_TYPES
+  validates_attachment_size :image, less_than: 1.megabytes
+
+  def save_with_optional_image!
+    save!
+  rescue ActiveRecord::RecordInvalid
+    self.image = nil
+    save!
+  end
+end

app/models/status.rb

@@ -23,6 +23,7 @@ class Status < ApplicationRecord
   has_and_belongs_to_many :tags
 
   has_one :notification, as: :activity, dependent: :destroy
+  has_one :preview_card, dependent: :destroy
 
   validates :account, presence: true
   validates :uri, uniqueness: true, unless: 'local?'

app/services/fetch_link_card_service.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class FetchLinkCardService < BaseService
+  def call(status)
+    # Get first URL
+    url = URI.extract(status.text).reject { |uri| (uri =~ /\Ahttps?:\/\//).nil? }.first
+
+    return if url.nil?
+
+    response = http_client.get(url)
+
+    return if response.code != 200
+
+    page = Nokogiri::HTML(response.to_s)
+    card = PreviewCard.where(status: status).first_or_initialize(status: status, url: url)
+
+    card.title       = meta_property(page, 'og:title') || page.at_xpath('//title')&.content
+    card.description = meta_property(page, 'og:description') || meta_property(page, 'description')
+    card.image       = URI.parse(meta_property(page, 'og:image')) if meta_property(page, 'og:image')
+
+    card.save_with_optional_image!
+  end
+
+  private
+
+  def http_client
+    HTTP.timeout(:per_operation, write: 10, connect: 10, read: 10).follow
+  end
+
+  def meta_property(html, property)
+    html.at_xpath("//meta[@property=\"#{property}\"]")&.attribute('content')&.value || html.at_xpath("//meta[@name=\"#{property}\"]")&.attribute('content')&.value
+  end
+end

app/services/post_status_service.rb

@@ -22,6 +22,7 @@ def call(account, text, in_reply_to = nil, options = {})
     process_mentions_service.call(status)
     process_hashtags_service.call(status)
 
+    LinkCrawlWorker.perform_async(status.id)
     DistributionWorker.perform_async(status.id)
     Pubsubhubbub::DistributionWorker.perform_async(status.stream_entry.id)
 

app/views/api/v1/statuses/card.rabl

@@ -0,0 +1,5 @@
+object @card
+
+attributes :url, :title, :description
+
+node(:image) { |card| card.image? ? full_asset_url(card.image.url(:original)) : nil }

app/workers/link_crawl_worker.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class LinkCrawlWorker
+  include Sidekiq::Worker
+
+  sidekiq_options retry: false
+
+  def perform(status_id)
+    FetchLinkCardService.new.call(Status.find(status_id))
+  rescue ActiveRecord::RecordNotFound
+    true
+  end
+end

config/application.rb

@@ -3,6 +3,7 @@
 require 'rails/all'
 
 require_relative '../app/lib/exceptions'
+require_relative '../lib/statsd_monitor'
 
 # Require the gems listed in Gemfile, including any gems
 # you've limited to :test, :development, or :production.
@@ -30,7 +31,7 @@ class Application < Rails::Application
 
     config.active_job.queue_adapter = :sidekiq
 
-    config.middleware.insert(0, 'StatsDMonitor')
+    config.middleware.insert(0, ::StatsDMonitor)
 
     config.middleware.insert_before 0, Rack::Cors do
       allow do

config/initializers/inflections.rb

@@ -12,4 +12,5 @@
 
 ActiveSupport::Inflector.inflections(:en) do |inflect|
   inflect.acronym 'StatsD'
+  inflect.acronym 'OEmbed'
 end

config/routes.rb

@@ -86,6 +86,7 @@
       resources :statuses, only: [:create, :show, :destroy] do
         member do
           get :context
+          get :card
           get :reblogged_by
           get :favourited_by
 
@@ -146,7 +147,7 @@
   get '/about',      to: 'about#index'
   get '/about/more', to: 'about#more'
   get '/terms',      to: 'about#terms'
-  
+
   root 'home#index'
 
   match '*unmatched_route', via: :all, to: 'application#raise_not_found'