Skip to content

Commit e970098

Browse files
yasulabyasulab
authored
Merge pull request #1821 from coderdojo-japan/feature/podcast-youtube-embed
ポッドキャスト各エピソードにサムネイルの代わりに YouTube 埋め込みプレイヤーを表示
2 parents 4514d32 + e48c6ff commit e970098

5 files changed

Lines changed: 32 additions & 28 deletions

File tree

‎app/controllers/podcasts_controller.rb‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ def show
2727
@url = request.url
2828
@title = @episode.title.split('-').last.strip
2929
@date = @episode.published_date.strftime("%Y年%-m月%-d日（#{Podcast::WDAY2JAPANESE[@episode.published_date.wday]}）")
30+
@youtube_id = @episode.content.match(Podcast::REGEX_YOUTUBE_ID)[1]
3031
@content = Kramdown::Document.new(
3132
self.convert_shownote(@episode.content),
3233
input: 'GFM').to_html
@@ -45,8 +46,10 @@ def convert_shownote(content)
4546
content.gsub!(/(#+) Shownote/) { shownote }
4647

4748
return content unless content.match?(Podcast::REGEX_YOUTUBE_ID)
49+
youtube_id = content.match(Podcast::REGEX_YOUTUBE_ID)[1]
50+
embed = render_to_string(partial: 'podcasts/youtube_embed', locals: { youtube_id: youtube_id })
51+
content.gsub!(/<a[^>]+>\s*<img[^>]+Cover Photo[^>]*>\s*<\/a>/m, embed)
4852
return content unless content.match?(Podcast::REGEX_TIMESTAMP)
49-
youtube_id = @episode.content.match(Podcast::REGEX_YOUTUBE_ID)[1]
5053
content.gsub!(Podcast::REGEX_TIMESTAMP) do
5154
original_t = $1
5255
parts = original_t.split(':')

‎app/models/podcast.rb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
class Podcast < ApplicationRecord
22
self.table_name = 'podcasts'
33
DIR_PATH = 'public/podcasts'
4-
WDAY2JAPANESE = %w(日 月 火 水 木 金 土)
4+
WDAY2JAPANESE = %w(日 月 火 水 木 金 土)
5+
YOUTUBE_PLAYLIST_ID = 'PL94GDfaSQTmJxxnapafkApHYgQUJ6ABUU'
56
# Match timestamps at the beginning of lines (YouTube format)
67
REGEX_TIMESTAMP = /^((\d{1,2}:)?\d{1,2}:\d{2})/
78
REGEX_YOUTUBE_ID = /watch\?v=((\w)*)/

‎app/views/podcasts/_youtube_embed.html.erb‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div style='position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin-bottom:20px;'>
2+
<iframe src='https://www.youtube.com/embed/<%= youtube_id %>?list=<%= Podcast::YOUTUBE_PLAYLIST_ID %>&rel=0'
3+
style='position:absolute;top:0;left:0;width:100%;height:100%;'
4+
frameborder='0' allowfullscreen loading='lazy'></iframe>
5+
</div>

‎app/views/podcasts/show.html.erb‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,8 @@
1313

1414
h1#title { margin-top: 30px; margin-bottom: 20px; text-align: center; }
1515
.episode h2 { margin-top: 100px; }
16-
.episode-cover {
17-
margin: 30px auto;
18-
@media screen and (min-width: 640px) {
19-
max-width: 70%;
20-
}
21-
}
22-
.episode-cover img { margin-bottom: 20px;}
16+
.episode-cover { margin: 30px auto; }
17+
.episode-cover img { margin-bottom: 20px; }
2318
.episode ul {
2419
padding-left: 0px;
2520
list-style: none;
@@ -45,7 +40,7 @@
4540
<script src="https://apis.google.com/js/platform.js"></script>
4641
<div class="g-ytsubscribe" data-channelid="UCal5GuoCDCMDQe07w69TuJA" data-layout="full" data-count="default"></div>
4742
</div>
48-
43+
4944
<section class="text-center list" style='margin-bottom: 30px;'>
5045
<%= render 'shared/social_buttons' %>
5146
</section>

‎spec/features/podcasts_spec.rb‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
@podcast = create(:podcast)
1212
allow(@podcast).to receive(:exist?) { true }
1313
allow(@podcast).to receive(:exist?).with(offset: -1) { false }
14-
allow(@podcast).to receive(:content) { "title\n収録日: 2019/05/10\n..." }
14+
allow(@podcast).to receive(:content) { "title\n収録日: 2019/05/10\nhttps://www.youtube.com/watch?v=test123\n..." }
1515
allow(Podcast).to receive(:find_by).with(id: @podcast.id.to_s) { @podcast }
1616

1717
visit "/podcasts/#{@podcast.id}"
@@ -26,7 +26,7 @@
2626
scenario 'Load doc file with absolute path' do
2727
@podcast = create(:podcast)
2828
allow(@podcast).to receive(:exist?) { true }
29-
allow(@podcast).to receive(:content) { "title\n収録日: 2019/05/10\n..." }
29+
allow(@podcast).to receive(:content) { "title\n収録日: 2019/05/10\nhttps://www.youtube.com/watch?v=test123\n..." }
3030
allow(Podcast).to receive(:find_by).with(id: @podcast.id.to_s) { @podcast }
3131

3232
visit "/podcasts/#{@podcast.id}"
@@ -40,15 +40,15 @@
4040
scenario 'Show note timestamps are converted to YouTube links' do
4141
@podcast = create(:podcast)
4242
allow(@podcast).to receive(:exist?) { true }
43-
allow(@podcast).to receive(:content) {
43+
allow(@podcast).to receive(:content) {
4444
<<~CONTENT
4545
タイトル
4646
収録日: 2019/05/10
47-
47+
4848
YouTubeリンク: https://www.youtube.com/watch?v=Dd9IYiF0R6E
49-
49+
5050
## Shownote
51-
51+
5252
00:00:00 米国系 IT 企業から CoderDojo へ、233台のノートPC寄贈
5353
00:25:01 AI と遊んでみる回の動画 https://youtu.be/BYpa1CcYtss?t=1425
5454
00:59:14 CASE Shinjuku 利用者と CoderDojo の繋がり
@@ -59,13 +59,13 @@
5959

6060
visit "/podcasts/#{@podcast.id}"
6161
expect(page).to have_http_status(:success)
62-
62+
6363
# タイムスタンプがYouTubeリンクに変換されているか確認
6464
expect(page).to have_link '00:00:00', href: 'https://youtu.be/Dd9IYiF0R6E?t=00h00m00s'
6565
expect(page).to have_link '00:25:01', href: 'https://youtu.be/Dd9IYiF0R6E?t=00h25m01s'
6666
expect(page).to have_link '00:59:14', href: 'https://youtu.be/Dd9IYiF0R6E?t=00h59m14s'
6767
expect(page).to have_link '01:00:57', href: 'https://youtu.be/Dd9IYiF0R6E?t=01h00m57s'
68-
68+
6969
# 既存のURL付きタイムスタンプはそのまま表示されること
7070
expect(page).to have_content 'AI と遊んでみる回の動画 https://youtu.be/BYpa1CcYtss?t=1425'
7171
expect(page).to have_content 'CASE Shinjuku の英語アクセスページ https://case-shinjuku.com/english'
@@ -74,15 +74,15 @@
7474
scenario 'Show note timestamps with mm:ss format are converted to YouTube links' do
7575
@podcast = create(:podcast)
7676
allow(@podcast).to receive(:exist?) { true }
77-
allow(@podcast).to receive(:content) {
77+
allow(@podcast).to receive(:content) {
7878
<<~CONTENT
7979
タイトル
8080
収録日: 2019/05/10
81-
81+
8282
YouTubeリンク: https://www.youtube.com/watch?v=test123
83-
83+
8484
## Shownote
85-
85+
8686
00:30 オープニング
8787
05:45 メインテーマ
8888
59:59 エンディング
@@ -92,7 +92,7 @@
9292

9393
visit "/podcasts/#{@podcast.id}"
9494
expect(page).to have_http_status(:success)
95-
95+
9696
# mm:ss形式のタイムスタンプもYouTubeリンクに変換されているか確認
9797
expect(page).to have_link '00:30', href: 'https://youtu.be/test123?t=00m30s'
9898
expect(page).to have_link '05:45', href: 'https://youtu.be/test123?t=05m45s'
@@ -102,15 +102,15 @@
102102
scenario 'Show note timestamps with m:ss format (single digit minutes) are converted to YouTube links' do
103103
@podcast = create(:podcast)
104104
allow(@podcast).to receive(:exist?) { true }
105-
allow(@podcast).to receive(:content) {
105+
allow(@podcast).to receive(:content) {
106106
<<~CONTENT
107107
タイトル
108108
収録日: 2019/05/10
109-
109+
110110
YouTubeリンク: https://www.youtube.com/watch?v=episode21
111-
111+
112112
## Shownote
113-
113+
114114
0:00 ゲスト自己紹介
115115
0:54 TFabWorks 無償レンタルプログラム
116116
2:10 2019年の年末から動き出した
@@ -121,7 +121,7 @@
121121

122122
visit "/podcasts/#{@podcast.id}"
123123
expect(page).to have_http_status(:success)
124-
124+
125125
# m:ss形式（一桁の分）のタイムスタンプもYouTubeリンクに変換されているか確認
126126
expect(page).to have_link '0:00', href: 'https://youtu.be/episode21?t=0m00s'
127127
expect(page).to have_link '0:54', href: 'https://youtu.be/episode21?t=0m54s'

0 commit comments

Comments
 (0)