ポッドキャスト一覧ページを YouTube embed + ボタンに刷新

- Spotify プレイヤーを YouTube embed に置換
- YouTube / Podcast ボタンを追加
- #DojoCast ツイートボタンを削除
- 📻 これまでの収録 セクションに margin-top を追加
- Podcast#youtube_id メソッドを追加（REGEX_YOUTUBE_ID を改善）
- YOUTUBE_PLAYLIST_ID 定数を追加

Author: yasulab

app/controllers/podcasts_controller.rb

@@ -27,7 +27,7 @@ def show
     @url     = request.url
     @title   = @episode.title.split('-').last.strip
     @date    = @episode.published_date.strftime("%Y年%-m月%-d日（#{Podcast::WDAY2JAPANESE[@episode.published_date.wday]}）")
-    @youtube_id = @episode.content.match(Podcast::REGEX_YOUTUBE_ID)[1]
+    @youtube_id = @episode.youtube_id
     @content = Kramdown::Document.new(
                                   self.convert_shownote(@episode.content),
                                   input: 'GFM').to_html

app/models/podcast.rb

@@ -5,7 +5,7 @@ class Podcast < ApplicationRecord
   YOUTUBE_PLAYLIST_ID  = 'PL94GDfaSQTmJxxnapafkApHYgQUJ6ABUU'
   # Match timestamps at the beginning of lines (YouTube format)
   REGEX_TIMESTAMP  = /^((\d{1,2}:)?\d{1,2}:\d{2})/
-  REGEX_YOUTUBE_ID = /watch\?v=((\w)*)/
+  REGEX_YOUTUBE_ID = /watch\?v=([\w-]+)/
 
   validates :title,          presence: true
   validates :content_size,   presence: true
@@ -34,4 +34,8 @@ def cover
   def content
     exist? ? File.read(path) : ''
   end
+
+  def youtube_id
+    content.match(REGEX_YOUTUBE_ID)[1]
+  end
 end

app/views/podcasts/index.html.erb

@@ -19,22 +19,22 @@
     <h3 id="live" style="text-align: center; padding-top: 70px;">🎙
       最新エピソードを聴く</h3>
 
-    <div class="container" style="line-height: 1.9em; margin-bottom: -100px;">
+    <div class="container" style="line-height: 1.9em; margin-bottom: 100px;">
       <section class="doc" style="padding: 30px 0px 0px 0px;">
-	<% if @episodes.first %>
-	  <iframe class="lazyload" src="https://creators.spotify.com/pod/profile/coderdojo-japan/embed/episodes/<%= @episodes.first.permalink %>" width="100%px" scrolling="no" frameborder="yes"></iframe>
-	<% end %>
-	<br>
+	<%= render 'podcasts/youtube_embed', youtube_id: @episodes.first.youtube_id %>
+	<div class='btn-cover'>
+	  <a class='btn-blue' href='https://www.youtube.com/watch?v=<%= @episodes.first.youtube_id %>&list=<%= Podcast::YOUTUBE_PLAYLIST_ID %>' target='_blank'>
+	    <i class='fa fa-youtube'></i> YouTube で聴く
+	  </a>
+	  <a class='btn-blue' href='<%= @episodes.first.permalink_url %>' target='_blank'>
+	    <i class='fas fa-podcast'></i> Podcast で聴く
+	  </a>
+	</div>
       </section>
     </div>
 
-    <p style="text-align: center; padding-top: 120px; padding-bottom: 30px;">
-      <a href="https://twitter.com/intent/tweet?button_hashtag=DojoCast&hashtags=CoderDojo"
-       class="twitter-hashtag-button" data-size="large" data-lang="ja"
-       data-text="" data-show-count="false">#DojoCast でツイートする</a>
-    </p>
 
-    <h3 id="episodes" style="text-align: center; padding-top: 70px;padding-bottom: 10px;">📻 これまでの収録</h3>
+    <h3 id="episodes" style="text-align: center; padding-top: 70px; padding-bottom: 10px; margin-top: 50px;">📻 これまでの収録</h3>
     <ul style="font-size: 120%">
       <% @episodes.each do |episode| %>
 	<li><%= link_to episode.title, podcast_path(episode) %></li>
@@ -43,7 +43,7 @@
   </section>
 
   <br>
-  
+
   <section class="introduction text-center list" style="margin-bottom: 30px;">
     <%= render 'shared/social_buttons' %>
   </section>

spec/features/podcasts_spec.rb

@@ -3,6 +3,11 @@
 RSpec.feature 'Podcasts', type: :feature do
   describe 'GET documents' do
     scenario 'Podcast index should be exist' do
+      @podcast = create(:podcast)
+      allow(@podcast).to receive(:exist?) { true }
+      allow(@podcast).to receive(:content) { "title\nhttps://www.youtube.com/watch?v=test123\n" }
+      allow(Podcast).to  receive(:order).and_return([@podcast].reverse)
+
       visit '/podcasts'
       expect(page).to have_http_status(:success)
     end
@@ -13,6 +18,7 @@
       allow(@podcast).to receive(:exist?).with(offset: -1) { false }
       allow(@podcast).to receive(:content) { "title\n収録日: 2019/05/10\nhttps://www.youtube.com/watch?v=test123\n..." }
       allow(Podcast).to  receive(:find_by).with(id: @podcast.id.to_s) { @podcast }
+      allow(Podcast).to  receive(:order).and_return([@podcast].reverse)
 
       visit "/podcasts/#{@podcast.id}"
       expect(page).to have_http_status(:success)
@@ -28,6 +34,7 @@
       allow(@podcast).to receive(:exist?) { true }
       allow(@podcast).to receive(:content) { "title\n収録日: 2019/05/10\nhttps://www.youtube.com/watch?v=test123\n..." }
       allow(Podcast).to  receive(:find_by).with(id: @podcast.id.to_s) { @podcast }
+      allow(Podcast).to  receive(:order).and_return([@podcast].reverse)
 
       visit  "/podcasts/#{@podcast.id}"
       target = 'DojoCast'