maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve and finalize video upload (#303)

Browse source
This commit is contained in:
Ben Halpern 2018-05-10 11:57:39 -04:00 • committed by GitHub
parent f1cd542427
commit cd4d5e9fcb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 126 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/controllers/articles_controller.rb
View file

@ -93,7 +93,6 @@ class ArticlesController < ApplicationController
if @article.update(article_params.merge(edited_at: edited_at_date))
handle_org_assignment
handle_hiring_tag
assign_video_attributes
if @article.published
Notification.send_all(@article, "Published") if @article.previous_changes.include?("published")
path = @article.path
@ -101,10 +100,6 @@ class ArticlesController < ApplicationController
Notification.remove_all(@article, "Published")
path = "/#{@article.username}/#{@article.slug}?preview=#{@article.password}"
end
if params[:article][:video]
render action: "video_upload"
return
end
redirect_to (params[:destination] || path)
else
render :edit
@ -186,18 +181,6 @@ class ArticlesController < ApplicationController
:video, :video_code, :video_source_url, :video_thumbnail_url)
end
def assign_video_attributes
if params[:article][:video]
@article.video = params[:article][:video]
@article.video_state = "PROGRESSING"
@article.video_code = @article.video.split("dev-to-input-v0/")[1]
@article.video_source_url = "https://dw71fyauz7yz9.cloudfront.net/#{@article.video_code}/#{@article.video_code}.m3u8"
@article.video_thumbnail_url = "https://dw71fyauz7yz9.cloudfront.net/#{@article.video_code}/thumbs-#{@article.video_code}-00001.png"
@article.save
end
end
def job_opportunity_params
return nil unless params[:article][:job_opportunity].present?
params[:article].require(:job_opportunity).permit(

32
app/controllers/videos_controller.rb Normal file
View file

@ -0,0 +1,32 @@
class VideosController < ApplicationController
before_action :check_video_permission
def new
end
def create
@article = Article.new(body_markdown:"---\ntitle: Unpublished Video ~ #{rand(100000).to_s(26)}\npublished: false\ndescription: \ntags: \n---\n\n",processed_html:"")
@article.user_id = current_user.id
@article.show_comments = true
assign_video_attributes
@article.save!
render action: "js_response"
end
def assign_video_attributes
if params[:article][:video] && current_user.has_role?(:video_permission)
@article.video = params[:article][:video]
@article.video_state = "PROGRESSING"
@article.video_code = @article.video.split("dev-to-input-v0/")[1]
@article.video_source_url = "https://dw71fyauz7yz9.cloudfront.net/#{@article.video_code}/#{@article.video_code}.m3u8"
@article.video_thumbnail_url = "https://dw71fyauz7yz9.cloudfront.net/#{@article.video_code}/thumbs-#{@article.video_code}-00001.png"
end
end
private
def check_video_permission
redirect_to "/enter" unless current_user&.has_role?(:video_permission)
end
end

1
app/helpers/application_helper.rb
View file

@ -22,6 +22,7 @@ module ApplicationHelper
controller_name == "pages" ||
controller_name == "dashboards"||
controller_name == "moderations"||
controller_name == "videos"||
controller_name == "stories" ||
controller_name == "comments" ||
controller_name == "notifications" ||

7
app/models/article.rb
View file

@ -31,6 +31,7 @@ class Article < ApplicationRecord
# validates :description, length: { in: 10..170, if: :published? }
validates :body_markdown, uniqueness: { scope: :user_id }
validate :validate_tag
validate :validate_video
validates :video_state, inclusion: { in: %w(PROGRESSING COMPLETED) }, allow_nil: true
before_validation :evaluate_markdown
@ -380,6 +381,12 @@ class Article < ApplicationRecord
end
end
def validate_video
if published && video_state == "PROGRESSING"
return errors.add(:published, "cannot be set to true if video is still processing")
end
end
def create_slug
if slug.blank? && title.present? && !published
self.slug = title_to_slug + "-temp-slug-#{rand(10_000_000)}"

1
app/models/role.rb
View file

@ -25,6 +25,7 @@ class Role < ApplicationRecord
level_2_member
level_1_member
workshop_pass
video_permission
),
}
scopify

77
app/views/articles/edit.html.erb
View file

@ -1,64 +1,37 @@
<% title "Edit Article - DEV" %>
<% if params[:beta_form] %>
<%= render 'react_form' %>
<% else %>
<% if @article.body_html && @article.body_html.size > 10 %>
<%= render 'inline_form' %>
<% else %>
<%= render 'articles/markdown_form' %>
<% end %>
<% end %>
<% if @user.has_role?(:super_admin) %>
<center>
<%= stylesheet_link_tag 's3_direct_upload', media: 'all' %>
<% if @article.video.present? %>
<div style="text-align:center;padding-top:100px;margin:auto;max-width:880px">
<% if @article.video_state == "PROGRESSING" %>
<h2>Video Transcoding In Progress</h2>
<img src="https://media.giphy.com/media/xf20D8HzvTQzu/giphy.gif" />
<br/><br/><br/><br/>
<h1 style="color:#062144">⏳ Video Transcoding In Progress ⏳</h1>
<img src="https://media.giphy.com/media/xf20D8HzvTQzu/giphy.gif" style="border-radius:12px" />
<div style="max-width:376px;margin:18px auto 0px;font-size:0.8em;">
<p>
You'll get an email when it's finished. Contact <a href="mailto:ben@dev.to">ben@dev.to</a> if the email never comes, or if anything else is broken. 😱
</p>
<p>
This is an unpublished article with a video. Publish it as usual when the video is done processing.
</p>
</div>
<% elsif @article.video_state == "COMPLETED" %>
<h2>Video uploaded - <%= @article.video_code %></h2>
<%= render "articles/video_player", meta_tags: false, article: @article %>
<h2>Thumbnail:</h2>
<img style="max-width:100%" src="<%= cloudinary(@article.video_thumbnail_url, 880) %>" />
<h2>Change thumbnail:</h2>
<h2>Change preview image:</h2>
<%= form_for(@article) do |f| %>
<%= f.text_field :video_thumbnail_url, placeholder: "New Thumbnail URL" %>
<%= f.submit %>
<% end %>
<br/>Video is in beta ❤️<br/><br/><br/>
<% else %>
<h2>Upload Video 📹</h2>
<%= s3_uploader_form callback_url: "/articles/#{@article.id}",
callback_method: "PUT",
callback_param: "article[video]",
key: "video-upload__#{SecureRandom.hex}",
key_starts_with: "video-upload__",
acl: "public-read",
max_file_size: 500.megabytes,
id: "s3-uploader",
class: "upload-form",
data: {:key => :val} do %>
<%= file_field_tag :file %>
<script id="template-upload" type="text/x-tmpl">
<div id="file-{%=o.unique_id%}" class="upload">
{%=o.name%}
<div class="progress"><div class="bar" style="width: 0%"></div></div>
<br/><br/><br/>
</div>
</script>
<% end %>
</center>
<br/><br/><br/>
<% end %>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<%= javascript_include_tag 's3_direct_upload' %>
<script>
setTimeout(function(){
$("#s3-uploader").S3Uploader({
additional_data: {authenticity_token:"<%= form_authenticity_token %>"}
})
}, 1000)
</script>
<% end %>
</div>
<% end %>
<% if params[:beta_form] %>
<%= render 'react_form' %>
<% else %>
<% if @article.body_html && @article.body_html.size > 10 %>
<%= render 'inline_form' %>
<% else %>
<%= render 'articles/markdown_form' %>
<% end %>
<% end %>

3
app/views/articles/show.html.erb
View file

@ -69,6 +69,9 @@
data-live="<%= @article.live_now %>"
data-path="<%= @article.path %>"
>
<% if @article.video_state == "PROGRESSING" %>
<h1 style="text-align:center;">⏳ Video Transcoding In Progress ⏳</h1>
<% end %>
<section itemscope itemtype="http://schema.org/Article" itemprop="mainEntityOfPage">
<meta itemprop="url" content="https://dev.to<%=@article.path%>">
<meta itemprop="image" content="<%= cloud_social_image(@article) %>">

1
app/views/articles/video_upload.js.erb
View file

@ -1 +0,0 @@
location.reload();

5
app/views/dashboards/show.html.erb
View file

@ -57,6 +57,11 @@
<img src="<%= asset_path('bar-chart-white.svg') %>" /><span id="dashboard-analytics">...</span>
</div>
<% end %>
<% if current_user.has_role?(:video_permission) %>
<a class="cta" style="display:block;text-align:center;font-size:1.8em;border-radius:3px;margin:20px auto;padding: 10px 20px; max-width: 400px;background:#4e57ef;color:white" href="/videos/new" data-no-instant>
Upload a Video (beta ❤️)
</a>
<% end %>
<% @articles.each do |article| %>
<div class="single-article">
<a href="<%= article.current_state_path %>">

1
app/views/videos/js_response.js.erb Normal file
View file

@ -0,0 +1 @@
window.location.href = "<%= @article.path %>/edit"

48
app/views/videos/new.html.erb Normal file
View file

@ -0,0 +1,48 @@
<style>
form.upload-form{
background:#fdf9f3;
max-width: 590px;
margin:20px auto;
padding: 40px 10px;
border: 2px solid #4e57ef;
box-shadow: 4px 5px 0px #4e57ef;
}
</style>
<center style="margin-top:200px">
<%= stylesheet_link_tag 's3_direct_upload', media: 'all' %>
<h1>🎥 Upload Video File 🙌</h1>
<%= s3_uploader_form callback_url: "/videos",
callback_method: "POST",
callback_param: "article[video]",
key: "video-upload__#{SecureRandom.hex}",
key_starts_with: "video-upload__",
acl: "public-read",
max_file_size: 500.megabytes,
id: "s3-uploader",
class: "upload-form",
data: {:key => :val} do %>
<%= file_field_tag :file %>
<script id="template-upload" type="text/x-tmpl">
<div id="file-{%=o.unique_id%}" class="upload">
{%=o.name%}
<div class="progress"><div class="bar" style="width: 0%"></div></div>
<br/><br/><br/>
</div>
</script>
<% end %>
<div style="margin:50px auto;max-width:80%;font-size:0.86em;">
<p>
Video is beta. Max 500mb, email <a href="mailto:ben@dev.to">ben@dev.to</a> if you have any problems.
</p>
</div>
</center>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<%= javascript_include_tag 's3_direct_upload' %>
<script>
setTimeout(function(){
$("#s3-uploader").S3Uploader({
additional_data: {authenticity_token:"<%= form_authenticity_token %>"}
})
}, 1000)
</script>

2
config/initializers/reserved_words.rb
View file

@ -14,6 +14,8 @@
"features",
"privacy",
"terms",
"videos",
"video_states",
"latest",
"contact",
"merch",

1
config/routes.rb
View file

@ -92,6 +92,7 @@ Rails.application.routes.draw do
resources :buffered_articles, only: [:index]
resources :events, only: [:index, :show]
resources :additional_content_boxes, only: [:index]
resources :videos, only: [:create, :new]
resources :video_states, only: [:create]
get "/notifications/:username" => "notifications#index"
patch "/onboarding_update" => "users#onboarding_update"