Skip to content

Commit

Permalink
ENH: Use more modern default js media player – plyr.js
Browse files Browse the repository at this point in the history 
MINOR: Remove file-types that are now unsupported by iTunes
  • Loading branch information
Luke Edwards committed Jan 18, 2017
1 parent afc067f commit bae0dc1
Show file tree
Hide file tree
Showing 24 changed files with 187 additions and 597 deletions.
4 changes: 1 addition & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ A module for adding a podcast or multiple podcasts to your SilverStripe site. Wi

## Third Party

The podcast page uses [mediaelement.js](http://mediaelementjs.com/) to support cross browser playing of HTML5 `<audio>` and `<video>` elements. Not all browsers support all video/audio codecs, so it may not play in some browsers – although there is a link provided for each episode to be downloaded just in case.

Mediaelement.js was the best solution I could find for supporting single video/audio files over multiple browsers, but feel free to edit the module to use your own solution.
The podcast page uses [plyr.js](https://plyr.io/) to support cross browser playing of HTML5 `<audio>` and `<video>` elements. Not all browsers support all video/audio codecs, so it may not play in some browsers – although there is a link provided for each episode to be downloaded just in case.

## Contact
Feel free to email me at <[email protected]> with any suggestions, comments or to say thanks. Log any issues on the [GitHub repository](https://github.com/lukereative/silverstripe-podcast) or feel free to issue a pull request with a fix.
53 changes: 10 additions & 43 deletions code/dataobjects/PodcastEpisode.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,24 +65,13 @@ public function getCMSFields()
->setFolderName('podcast/episodes')
->getValidator()->setAllowedExtensions(array(
'pdf',
'zip',
'doc',
'docx',
'xls',
'xlsx',
'ppt',
'pptx',
'epub',
'mp3',
'wav',
'm4a',
'm4v',
'mpeg',
'mpg',
'mp4',
'mpe',
'mov',
'avi',
'3gp',
));

$fields->fieldByName('Root.Main.EpisodeImage')
Expand Down Expand Up @@ -146,29 +135,23 @@ public function episodeThumb()
*/
public function getMime()
{
// return an empty string if there's no file
if (!$this->EpisodeFileID) {
return '';
}

$filename = $this->EpisodeFile()->getFilename();
$filename = explode('.', $filename);

$mime_types = array(
'pdf' => 'application/pdf',
'zip' => 'application/zip',
'doc' => 'application/msword',
'docx' => 'application/msword',
'xls' => 'application/vnd.ms-excel',
'xlsx' => 'application/vnd.ms-excel',
'ppt' => 'application/vnd.ms-powerpoint',
'pptx' => 'application/vnd.ms-powerpoint',
'epub' => 'document/x-epub',
'mp3' => 'audio/mpeg',
'wav' => 'audio/x-wav',
'm4a' => 'audio/x-m4a',
'm4v' => 'video/x-m4v',
'mpeg' => 'video/mpeg',
'mpg' => 'video/mpeg',
'mp4' => 'video/mpeg',
'mpe' => 'video/mpeg',
'mp4' => 'video/mp4',
'mov' => 'video/quicktime',
'avi' => 'video/x-msvideo',
'3gp' => 'video/3gpp',
);

$extension = strtolower(end($filename));
Expand All @@ -182,28 +165,12 @@ public function getMime()
*/
public function getType()
{
// return an empty string if there's no file
if (!$this->EpisodeFileID) {
return '';
}
$mime = explode('/', $this->getMime());

$mime_types = array(
'mp3' => 'audio'
,'wav' => 'audio'
,'m4a' => 'audio'
,'m4v' => 'video'
,'mpeg' => 'video'
,'mpg' => 'video'
,'mp4' => 'video'
,'mpe' => 'video'
,'mov' => 'video'
,'avi' => 'video'
,'3gp' => 'video'
);

$extension = strtolower($this->EpisodeFile()->getExtension());

return $mime_types[$extension];
return $mime[0];
}

public function getTags()
Expand Down
40 changes: 20 additions & 20 deletions css/podcast-page.css
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
.PodcastPage .podcast-episodes {
margin: 0;
list-style: none;
.PodcastPage .podcast__episode__list {
margin: 0;

list-style: none;
}

.PodcastPage .episode {
padding: 1em 0;

border-bottom: 1px solid #333;
overflow: hidden;
}
padding: 1em 0;

.PodcastPage .episode:last-child {
border-bottom: none;
border-bottom: 1px solid #333;
overflow: hidden;
}

.PodcastPage .episode-details {
display: block;

margin-bottom: 1em;
.PodcastPage .episode__image {
float: left;
margin-right: 1em;
}

.PodcastPage .episode-media {
float: left;
.PodcastPage li:last-child .episode {
border-bottom: none;
}

.PodcastPage .episode-pagination {
text-align: center;
}
.PodcastPage .episode__info {
overflow: hidden;

margin-bottom: 1em;
}
.PodcastPage .podcast__pagination {
text-align: center;
}
7 changes: 4 additions & 3 deletions javascript/podcast-page.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
$(document).ready( function(){
mejs.$('video, audio').mediaelementplayer();
});
$(document).ready( function(){
plyr.setup({iconUrl: '/podcast/thirdparty/plyr/plyr.svg'});
plyr.loadSprite('/podcast/thirdparty/plyr/plyr.svg');
});
6 changes: 3 additions & 3 deletions templates/Includes/PodcastRequirements.ss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<%-- Adds the requirements for the Podcast and Episode Page in the correct order --%>
<% require javascript('framework/thirdparty/jquery/jquery.js') %>
<% require javascript('podcast/thirdparty/mediaelement/mediaelement-and-player.min.js') %>
<% require javascript('podcast/thirdparty/plyr/plyr.js') %>
<% require javascript('podcast/javascript/podcast-page.js') %>
<% require css('podcast/thirdparty/mediaelement/mediaelementplayer.min.css') %>
<% require css('podcast/css/podcast-page.css') %>
<% require css('podcast/thirdparty/plyr/plyr.css') %>
<% require css('podcast/css/podcast-page.css') %>
123 changes: 80 additions & 43 deletions templates/Layout/PodcastPage.ss
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,81 @@
<% include PodcastRequirements %>
<div class="podcast">
<header class="podcast-details">
<% if $PodcastTitle %><h1>$PodcastTitle</h1><% end_if %>
<% if $PodcastImage %><% with PodcastImage.setWidth(200) %><img src="$URL" alt="$Title" class="left"><% end_with %><% end_if %>
<% if $Subtitle %><h2>$Subtitle</h2><% end_if %>
<% if $Summary %><p>$Summary</p><% end_if %>
</header>
<ol class="podcast-episodes">
<% loop $paginatedPodcastEpisodes %>
<li class="episode">
<% if $EpisodeTitle %><a href="$EpisodeLink"><h3>$EpisodeTitle</h3></a><% end_if %>
<% if $EpisodeImage %><% with EpisodeImage.setWidth(75) %><img src="$URL" alt="$Title" class="left"><% end_with %><% end_if %>
<% if $EpisodeSubtitle %><h4>$EpisodeSubtitle</h4><% end_if %>
<% if $EpisodeDate || $EpisodeFile %>
<div class="episode-details">
<% if $EpisodeDate %><time datetime="$EpisodeDate.Rfc822">$EpisodeDate.Nice</time><% else %><time datetime="$Created.Rfc822">$Created.Nice</time><% end_if %><% if $getType == 'audio' || $getType == 'video' %><% if EpisodeDate %>, <% end_if %>
<a href="$EpisodeFile.Link">Download</a> $EpisodeFile.getSize<% end_if %>
</div>
<% end_if %>
<% if $EpisodeFile %>
<div class="episode-media">
<% if $getType == 'audio' %><audio src="$EpisodeFile.Link" preload="none" controls></audio>
<% else_if $getType == 'video' %><video src="$EpisodeFile.Link" preload="none" controls width="360"></video>
<% else %><a href="$EpisodeFile.Link">Download $EpisodeFile.Name</a>
<% end_if %>
</div>
<%end_if %>
</li>
<% end_loop %>
</ol>
<footer class="episode-pagination">
<% if $paginatedPodcastEpisodes.MoreThanOnePage %>
<% if $paginatedPodcastEpisodes.NotFirstPage %><a href="$paginatedPodcastEpisodes.PrevLink" class="prev" title="Previous Page">◀</a><% end_if %>
<% loop $paginatedPodcastEpisodes.PaginationSummary(5) %>
<% if $CurrentBool %>$PageNum
<% else_if $Link %><a href="$Link" title="Page $PageNum">$PageNum</a>
<% else %>…
<% end_if %>
<% end_loop %>
<% if $paginatedPodcastEpisodes.NotLastPage %><a href="$paginatedPodcastEpisodes.NextLink" class="next" title="Next Page">▶</a><% end_if %>
<% end_if %>
</footer>
</div>
<section class="PodcastPage">
<div class="section__image">
<h1 class="section__title">$Title</h1>
<% if $Subtitle %><h2 class="podcast__subtitle">$Subtitle</h2><% end_if %>
</div>
<div class="section__content">
<ol class="podcast__episode__list">
<% loop $paginatedPodcastEpisodes %>
<li>
<article class="episode">
<figure class="episode__image">
<% if $EpisodeImage %>
<% with EpisodeImage.setWidth(200) %>
<img src="$URL" alt="$Title">
<% end_with %>
<% end_if %>
</figure>
<div class="episode__info">
<header class="episode__heading">
<% if $EpisodeTitle %>
<a href="$EpisodeLink"><h2 class="episode__title">$EpisodeTitle</h2></a>
<% end_if %>
<% if $EpisodeSubtitle %>
<h3 class="episode__subtitle">$EpisodeSubtitle</h3>
<% end_if %>
<% if $EpisodeAuthor %>
<h4 class="episode__author">$EpisodeAuthor</h4>
<% end_if %>
</header>
<% if $EpisodeDate || $EpisodeFile %>
<footer class="episode__details">
<% if $EpisodeDate %>
<time datetime="$EpisodeDate.Rfc822" class="episode__date">$EpisodeDate.Format('l jS M')</time>
<% else %>
<time datetime="$Created.Rfc822" class="episode__date">$Created.Format('l jS M')</time>
<% end_if %>
<% if $getType == 'audio' || $getType == 'video' %>
<% if EpisodeDate %>, <% end_if %>
<a href="$EpisodeFile.Link" class="episode__download" download>Download</a> <sub class="episode__download__size">$EpisodeFile.getSize</sub>
<% end_if %>
</footer>
<% end_if %>
<% if $EpisodeFile %>
<div class="episode__media">
<% if $getType == 'audio' %>
<div class="plyr">
<audio controls>
<source src="$EpisodeFile.Link" type="$Mime">
</audio>
</div>
<% else_if $getType == 'video' %>
<div class="plyr">
<video controls>
<source src="$EpisodeFile.Link" type="$Mime">
</video>
</div>
<% else %>
<a href="$EpisodeFile.Link" class="episode__download">Download $EpisodeFile.Name</a> <sub class="episode__download__size">$EpisodeFile.getSize</sub>
<% end_if %>
</div>
<% end_if %>
</div>
</article>
</li>
<% end_loop %>
</ol>
<footer class="pagination podcast__pagination">
<% if $paginatedPodcastEpisodes.MoreThanOnePage %>
<% if $paginatedPodcastEpisodes.NotFirstPage %><a href="$paginatedPodcastEpisodes.PrevLink" class="pag pag--prev" title="Previous Page">◀︎</a><% end_if %>
<% loop $paginatedPodcastEpisodes.PaginationSummary(5) %>
<% if $CurrentBool %><span class="pag pag--current">$PageNum</span>
<% else_if $Link %><a href="$Link" title="Page $PageNum" class="pag pag--number">$PageNum</a>
<% else %><span class="pag pag--elip">…</span>
<% end_if %>
<% end_loop %>
<% if $paginatedPodcastEpisodes.NotLastPage %><a href="$paginatedPodcastEpisodes.NextLink" class="pag pag--next" title="Next Page">▶</a><% end_if %>
<% end_if %>
</footer>
</div>
</section>
89 changes: 65 additions & 24 deletions templates/Layout/PodcastPage_episode.ss
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,67 @@
<% include PodcastRequirements %>
<div class="PodcastEpisode">
<% with PodcastEpisode %><% if not $BlockEpisode %>
<% if $EpisodeTitle %><h1>$EpisodeTitle</h1><% end_if %>
<% if $EpisodeImage %><% with EpisodeImage.setWidth(200) %><img src="$URL" alt="$Title" class="left"><% end_with %><% end_if %>
<% if $EpisodeSubtitle %><h2>$EpisodeSubtitle</h2><% end_if %>
<% if $EpisodeDate || $EpisodeFile %>
<div class="episode-details">
<% if $EpisodeDate %><time datetime="$EpisodeDate.Rfc822">$EpisodeDate.Nice</time><% else %><time datetime="$Created.Rfc822">$Created.Nice</time><% end_if %><% if $getType == 'audio' || $getType == 'video' %><% if EpisodeDate %>, <% end_if %>
<a href="$EpisodeFile.Link">Download</a> $EpisodeFile.getSize<% end_if %>
</div>
<% end_if %>
<% if EpisodeSummary %><p>$EpisodeSummary</p><% end_if %>
<% if $EpisodeFile %>
<div class="episode-media">
<% if $getType == 'audio' %><audio src="$EpisodeFile.Link" preload="none" controls></audio>
<% else_if $getType == 'video' %><video src="$EpisodeFile.Link" preload="none" controls width="360"></video>
<% else %><a href="$EpisodeFile.Link">Download $EpisodeFile.Name</a>
<% end_if %>
</div>
<%end_if %>
<% else %>
<h2>This episode has been blocked by the podcast manager.</h2>
<p>Please return to the main <a href="$Top.Link">podcast page</a>.</p>
<% with $PodcastEpisode %><% if not $BlockEpisode %>
<article class="episode">
<div class="episode__info">
<figure class="episode__image">
<% if $EpisodeImage %>
<% with EpisodeImage.setWidth(200) %>
<img src="$URL" alt="$Title">
<% end_with %>
<% end_if %>
</figure>
<div class="episode__info">
<header class="episode__heading">
<% if $EpisodeTitle %>
<h1 class="episode__title">$EpisodeTitle</h1>
<% end_if %>
<% if $EpisodeSubtitle %>
<h2 class="episode__subtitle">$EpisodeSubtitle</h2>
<% end_if %>
<% if $EpisodeAuthor %>
<h3 class="episode__author">$EpisodeAuthor</h2>
<% end_if %>
</header>
<% if EpisodeSummary %>
<section class="episode__summary">
$EpisodeSummary
</section>
<% end_if %>
<% if $EpisodeDate || $EpisodeFile %>
<footer class="episode__details">
<% if $EpisodeDate %>
<time datetime="$EpisodeDate.Rfc822" class="episode__date">$EpisodeDate.Format('l jS M')</time>
<% else %>
<time datetime="$Created.Rfc822" class="episode__date">$Created.Format('l jS M')</time>
<% end_if %>
<% if $getType == 'audio' || $getType == 'video' %>
<% if EpisodeDate %>, <% end_if %>
<a href="$EpisodeFile.Link" class="episode__download" download>Download</a> <sub class="episode__download__size">$EpisodeFile.getSize</sub>
<% end_if %>
</footer>
<% end_if %>
</div>
<% if $EpisodeFile %>
<div class="episode__media">
<% if $getType == 'audio' %>
<div class="plyr">
<audio controls>
<source src="$EpisodeFile.Link" type="$Mime">
</audio>
</div>
<% else_if $getType == 'video' %>
<div class="plyr">
<video controls>
<source src="$EpisodeFile.Link" type="$Mime">
</video>
</div>
<% else %>
<a href="$EpisodeFile.Link" class="episode__download">Download $EpisodeFile.Name</a> <sub class="episode__download__size">$EpisodeFile.getSize</sub>
<% end_if %>
</div>
<% end_if %>
</div>
</article>
<% else %>
<h2>This episode has been blocked by the podcast manager.</h2>
<p>Please return to the main <a href="$Top.Link">podcast page</a>.</p>
<% end_if %><% end_with %>
</div>
Binary file removed thirdparty/mediaelement/background.png
View file
Binary file not shown.
Binary file removed thirdparty/mediaelement/bigplay.png
View file
Binary file not shown.
1 change: 0 additions & 1 deletion thirdparty/mediaelement/bigplay.svg
View file

This file was deleted.

Binary file removed thirdparty/mediaelement/controls-ted.png
View file
Binary file not shown.
Binary file removed thirdparty/mediaelement/controls-wmp-bg.png
View file
Binary file not shown.
Binary file removed thirdparty/mediaelement/controls-wmp.png
View file
Binary file not shown.
Binary file removed thirdparty/mediaelement/controls.png
View file
Binary file not shown.
Loading

0 comments on commit bae0dc1

Please sign in to comment.