{spoilerButton}
@@ -197,7 +197,7 @@ const VideoPlayer = React.createClass({
{spoilerButton}
{muteButton}
-
+
);
}
diff --git a/app/assets/javascripts/components/features/status/components/detailed_status.jsx b/app/assets/javascripts/components/features/status/components/detailed_status.jsx
index caa46ff3c5..6238729533 100644
--- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx
+++ b/app/assets/javascripts/components/features/status/components/detailed_status.jsx
@@ -38,7 +38,7 @@ const DetailedStatus = React.createClass({
let applicationLink = '';
if (status.get('media_attachments').size > 0) {
- if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
+ if (status.getIn(['media_attachments', 0, 'type']) === 'video' || (status.get('media_attachments').size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'gifv')) {
media =
;
} else {
media =
;
diff --git a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx
index d8301b20f8..e3c4281b93 100644
--- a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx
+++ b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx
@@ -9,6 +9,7 @@ import ImageLoader from 'react-imageloader';
import LoadingIndicator from '../../../components/loading_indicator';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
+import ExtendedVideoPlayer from '../../../components/extended_video_player';
const mapStateToProps = state => ({
media: state.getIn(['modal', 'media']),
@@ -131,27 +132,34 @@ const Modal = React.createClass({
return null;
}
- const url = media.get(index).get('url');
+ const attachment = media.get(index);
+ const url = attachment.get('url');
- let leftNav, rightNav;
+ let leftNav, rightNav, content;
- leftNav = rightNav = '';
+ leftNav = rightNav = content = '';
if (media.size > 1) {
leftNav =
;
rightNav =
;
}
- return (
-
- {leftNav}
-
+ if (attachment.get('type') === 'image') {
+ content = (
+ );
+ } else if (attachment.get('type') === 'gifv') {
+ content = ;
+ }
+ return (
+
+ {leftNav}
+ {content}
{rightNav}
);
diff --git a/app/assets/stylesheets/stream_entries.scss b/app/assets/stylesheets/stream_entries.scss
index 3b2e88f6dc..b9a9a1da3e 100644
--- a/app/assets/stylesheets/stream_entries.scss
+++ b/app/assets/stylesheets/stream_entries.scss
@@ -104,8 +104,12 @@
overflow: hidden;
width: 100%;
box-sizing: border-box;
- height: 110px;
- display: flex;
+ position: relative;
+
+ .status__attachments__inner {
+ display: flex;
+ height: 214px;
+ }
}
}
@@ -184,8 +188,12 @@
overflow: hidden;
width: 100%;
box-sizing: border-box;
- height: 300px;
- display: flex;
+ position: relative;
+
+ .status__attachments__inner {
+ display: flex;
+ height: 360px;
+ }
}
.video-player {
@@ -231,11 +239,19 @@
text-decoration: none;
cursor: zoom-in;
}
+
+ video {
+ position: relative;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ top: 50%;
+ transform: translateY(-50%);
+ }
}
.video-item {
- max-width: 196px;
-
a {
cursor: pointer;
}
@@ -258,6 +274,9 @@
width: 100%;
height: 100%;
cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
display: flex;
align-items: center;
justify-content: center;
diff --git a/app/models/media_attachment.rb b/app/models/media_attachment.rb
index 6925f9b0d7..620a92dbc3 100644
--- a/app/models/media_attachment.rb
+++ b/app/models/media_attachment.rb
@@ -1,15 +1,32 @@
# frozen_string_literal: true
class MediaAttachment < ApplicationRecord
+ self.inheritance_column = nil
+
+ enum type: [:image, :gifv, :video]
+
IMAGE_MIME_TYPES = ['image/jpeg', 'image/png', 'image/gif'].freeze
VIDEO_MIME_TYPES = ['video/webm', 'video/mp4'].freeze
+ IMAGE_STYLES = { original: '1280x1280>', small: '400x400>' }.freeze
+ VIDEO_STYLES = {
+ small: {
+ convert_options: {
+ output: {
+ vf: 'scale=\'min(400\, iw):min(400\, ih)\':force_original_aspect_ratio=decrease',
+ },
+ },
+ format: 'png',
+ time: 0,
+ },
+ }.freeze
+
belongs_to :account, inverse_of: :media_attachments
belongs_to :status, inverse_of: :media_attachments
has_attached_file :file,
- styles: -> (f) { file_styles f },
- processors: -> (f) { f.video? ? [:transcoder] : [:thumbnail] },
+ styles: ->(f) { file_styles f },
+ processors: ->(f) { file_processors f },
convert_options: { all: '-quality 90 -strip' }
validates_attachment_content_type :file, content_type: IMAGE_MIME_TYPES + VIDEO_MIME_TYPES
validates_attachment_size :file, less_than: 8.megabytes
@@ -27,45 +44,45 @@ class MediaAttachment < ApplicationRecord
self.file = URI.parse(url)
end
- def image?
- IMAGE_MIME_TYPES.include? file_content_type
- end
-
- def video?
- VIDEO_MIME_TYPES.include? file_content_type
- end
-
- def type
- image? ? 'image' : 'video'
- end
-
def to_param
shortcode
end
before_create :set_shortcode
+ before_post_process :set_type
class << self
private
def file_styles(f)
- if f.instance.image?
+ if f.instance.file_content_type == 'image/gif'
{
- original: '1280x1280>',
- small: '400x400>',
- }
- else
- {
- small: {
+ small: IMAGE_STYLES[:small],
+ original: {
+ format: 'webm',
convert_options: {
output: {
- vf: 'scale=\'min(400\, iw):min(400\, ih)\':force_original_aspect_ratio=decrease',
+ 'c:v' => 'libvpx',
+ 'crf' => 6,
+ 'b:v' => '500K',
},
},
- format: 'png',
- time: 1,
},
}
+ elsif IMAGE_MIME_TYPES.include? f.instance.file_content_type
+ IMAGE_STYLES
+ else
+ VIDEO_STYLES
+ end
+ end
+
+ def file_processors(f)
+ if f.file_content_type == 'image/gif'
+ [:gif_transcoder]
+ elsif VIDEO_MIME_TYPES.include? f.file_content_type
+ [:transcoder]
+ else
+ [:thumbnail]
end
end
end
@@ -80,4 +97,8 @@ class MediaAttachment < ApplicationRecord
break if MediaAttachment.find_by(shortcode: shortcode).nil?
end
end
+
+ def set_type
+ self.type = VIDEO_MIME_TYPES.include?(file_content_type) ? :video : :image
+ end
end
diff --git a/app/views/api/v1/media/create.rabl b/app/views/api/v1/media/create.rabl
index 0b42e6e3d0..916217cbde 100644
--- a/app/views/api/v1/media/create.rabl
+++ b/app/views/api/v1/media/create.rabl
@@ -1,5 +1,5 @@
object @media
attribute :id, :type
-node(:url) { |media| full_asset_url(media.file.url( :original)) }
-node(:preview_url) { |media| full_asset_url(media.file.url( :small)) }
+node(:url) { |media| full_asset_url(media.file.url(:original)) }
+node(:preview_url) { |media| full_asset_url(media.file.url(:small)) }
node(:text_url) { |media| medium_url(media) }
diff --git a/app/views/stream_entries/_detailed_status.html.haml b/app/views/stream_entries/_detailed_status.html.haml
index 6c1c1ce848..8c0456b1fe 100644
--- a/app/views/stream_entries/_detailed_status.html.haml
+++ b/app/views/stream_entries/_detailed_status.html.haml
@@ -22,9 +22,9 @@
.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', class: "u-#{media.video? ? 'video' : 'photo'}"
+ .status__attachments__inner
+ - status.media_attachments.each do |media|
+ = render partial: 'stream_entries/media', locals: { media: media }
%div.detailed-status__meta
%data.dt-published{ value: status.created_at.to_time.iso8601 }
diff --git a/app/views/stream_entries/_media.html.haml b/app/views/stream_entries/_media.html.haml
new file mode 100644
index 0000000000..cd7faa7002
--- /dev/null
+++ b/app/views/stream_entries/_media.html.haml
@@ -0,0 +1,4 @@
+.media-item
+ = link_to media.remote_url.blank? ? media.file.url(:original) : media.remote_url, style: media.image? ? "background-image: url(#{media.file.url(:original)})" : "", target: '_blank', rel: 'noopener', class: "u-#{media.video? || media.gifv? ? 'video' : 'photo'}" do
+ - unless media.image?
+ %video{ src: media.file.url(:original), autoplay: true, loop: true }/
diff --git a/app/views/stream_entries/_simple_status.html.haml b/app/views/stream_entries/_simple_status.html.haml
index 52ad392201..cb2c976ce4 100644
--- a/app/views/stream_entries/_simple_status.html.haml
+++ b/app/views/stream_entries/_simple_status.html.haml
@@ -22,11 +22,12 @@
- 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', class: 'u-video' do
- .video-item__play
- = fa_icon('play')
+ .status__attachments__inner
+ .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', class: 'u-video' 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', class: "u-#{media.video? ? 'video' : 'photo'}"
+ .status__attachments__inner
+ - status.media_attachments.each do |media|
+ = render partial: 'stream_entries/media', locals: { media: media }
diff --git a/config/application.rb b/config/application.rb
index 1ea65619ca..30ed608c5e 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -2,12 +2,13 @@ require_relative 'boot'
require 'rails/all'
-require_relative '../app/lib/exceptions'
-
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
+require_relative '../app/lib/exceptions'
+require_relative '../lib/paperclip/gif_transcoder'
+
Dotenv::Railtie.load
module Mastodon
diff --git a/db/migrate/20170304202101_add_type_to_media_attachments.rb b/db/migrate/20170304202101_add_type_to_media_attachments.rb
new file mode 100644
index 0000000000..5140799580
--- /dev/null
+++ b/db/migrate/20170304202101_add_type_to_media_attachments.rb
@@ -0,0 +1,12 @@
+class AddTypeToMediaAttachments < ActiveRecord::Migration[5.0]
+ def up
+ add_column :media_attachments, :type, :integer, default: 0, null: false
+
+ MediaAttachment.where(file_content_type: MediaAttachment::IMAGE_MIME_TYPES).update_all(type: MediaAttachment.types[:image])
+ MediaAttachment.where(file_content_type: MediaAttachment::VIDEO_MIME_TYPES).update_all(type: MediaAttachment.types[:video])
+ end
+
+ def down
+ remove_column :media_attachments, :type
+ end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 8cc3bd8e35..4ec85ef2bf 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
#
# It's strongly recommended that you check this file into your version control system.
-ActiveRecord::Schema.define(version: 20170303212857) do
+ActiveRecord::Schema.define(version: 20170304202101) do
# These are extensions that must be enabled in order to support this database
enable_extension "plpgsql"
@@ -98,6 +98,7 @@ ActiveRecord::Schema.define(version: 20170303212857) do
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.string "shortcode"
+ t.integer "type", default: 0, null: false
t.index ["shortcode"], name: "index_media_attachments_on_shortcode", unique: true, using: :btree
t.index ["status_id"], name: "index_media_attachments_on_status_id", using: :btree
end
diff --git a/lib/paperclip/gif_transcoder.rb b/lib/paperclip/gif_transcoder.rb
new file mode 100644
index 0000000000..33d2c4a019
--- /dev/null
+++ b/lib/paperclip/gif_transcoder.rb
@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Paperclip
+ # This transcoder is only to be used for the MediaAttachment model
+ # to convert animated gifs to webm
+ class GifTranscoder < Paperclip::Processor
+ def make
+ num_frames = identify('-format %n :file', file: file.path).to_i
+
+ return file unless options[:style] == :original && num_frames > 1
+
+ final_file = Paperclip::Transcoder.make(file, options, attachment)
+
+ attachment.instance.file_file_name = 'media.webm'
+ attachment.instance.file_content_type = 'video/webm'
+ attachment.instance.type = MediaAttachment.types[:gifv]
+
+ final_file
+ end
+ end
+end