Skip to content

Commit

Permalink
Superawesome switchable player
Browse files Browse the repository at this point in the history 
Closes #12
Touches #13
  • Loading branch information
@t2t2
t2t2 committed Apr 21, 2015
1 parent 7e0cfa8 commit c8eb216
Show file tree
Hide file tree
Showing 6 changed files with 221 additions and 7 deletions.
45 changes: 45 additions & 0 deletions assets/javascript/player.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
$(function () {
$('[data-crtv-podcast="player"]').each(function () {
var $container = $(this);
var $embed = $container.find('[data-crtv-podcast-player]');
var $releases = $container.find('.crtv-podcast-releases');

$releases.find('[data-crtv-podcast-player-item]').on('click', function () {
var $target = $(this);
if ($target.parent().hasClass('active')) return false;

var $embedEl;
switch ($target.data('crtv-podcast-player-type')) {
case 'audio':
$embedEl = $('<div>').addClass('crtv-embed-audio').css({
backgroundImage: "url('" + $container.data('crtv-podcast-player-poster') + "')"
}).append(
$('<audio>').attr({
controls: 'controls',
src: $target.data('crtv-podcast-player-item')
})
);
console.log($embedEl);
break;
case 'video':
$embedEl = $('<video>').attr({
controls: 'controls',
poster: $container.data('crtv-podcast-player-poster'),
src: $target.data('crtv-podcast-player-item')
});
break;
default:
$embedEl = $('<iframe>').attr({
frameborder: 0,
src: $target.data('crtv-podcast-player-item')
});
break;
}
$embed.empty().append($embedEl);
$releases.find('.active').removeClass('active');
$target.parent().addClass('active');

return false;
});
});
});
67 changes: 67 additions & 0 deletions assets/stylesheet/player.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
.crtv-embed-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}

.crtv-embed-responsive iframe,
.crtv-embed-responsive object,
.crtv-embed-responsive embed,
.crtv-embed-responsive video,
.crtv-embed-responsive .crtv-embed-audio {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.crtv-embed-audio {
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.crtv-embed-audio audio {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}

/*
* Switching
*/

.crtv-podcast-releases {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.crtv-podcast-release {
display: flex;
flex-grow: 1;
border: 1px solid #ADADAD;
}
.crtv-podcast-release:not(:last-child) {
border-right: none;
}
.crtv-podcast-release a {
color: #333333;
padding: 0.3em 1em;
}
.crtv-podcast-release .crtv-podcast-release-switch {
flex-grow: 1;
}
.crtv-podcast-release.active {
border-color: #204D74;
background: #337AB7;
color: #ffffff;
}
.crtv-podcast-release.active a {
color: #ffffff;
}
25 changes: 23 additions & 2 deletions components/Episode.php
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<?php namespace CosmicRadioTV\Podcast\Components;

use Cms\Classes\ComponentBase;
use CosmicRadioTV\Podcast\Models\Release;
use CosmicRadioTV\Podcast\Models\Show;
use CosmicRadioTV\Podcast\Models;
use CosmicRadioTV\Podcast\Models\Episode as EpisodeModel;
use CosmicRadioTV\Podcast\Models\ReleaseType;
use CosmicRadioTV\Podcast\Classes\VideoUrlParser;
use Illuminate\Database\Eloquent\Collection;
use Illuminate\Database\Eloquent\ModelNotFoundException;
use Request;

Expand All @@ -20,6 +22,11 @@ class Episode extends ComponentBase
public $playerRelease;
public $playerYoutubeEmbedUrl;

/**
* @var Collection|Release[]
*/
public $releases;

/**
* @var Show The show being displayed
*/
Expand Down Expand Up @@ -130,6 +137,9 @@ public function onRun()
return $this->controller->run('404');
}

$this->addCss('/plugins/cosmicradiotv/podcast/assets/stylesheet/player.css');
$this->addJs('/plugins/cosmicradiotv/podcast/assets/javascript/player.js');


// Get the release to be used in the player (based on conditions set for the component)
if (!empty($this->episode)) {
Expand Down Expand Up @@ -184,8 +194,19 @@ public function setState()
->getQuery()
->where('published', true)
->where('slug', $this->property('episodeSlug'))
->with(['releases', 'releases.release_type', 'image', 'tags', 'show'])
->firstOrFail();

$this->releases = Collection::make($this->episode->releases); // Creates a copy
$this->releases->sort(function(Release $a, Release $b) {
// Order: Youtube > (rest) > Video > Audio
$ratings = [
'youtube' => 1,
'video' => 8,
'audio' => 9
];
$aRating = $ratings[$a->release_type->type] ?: 7;
$bRating = $ratings[$b->release_type->type] ?: 7;

return $aRating - $bRating;
});
}
}
2 changes: 1 addition & 1 deletion components/episode/default.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<h2>{{__SELF__.show.name}}</h2>
<h3>{{ __SELF__.episode.title }}</h3>


{% partial __SELF__~"::player" %}


</div>
Expand Down
57 changes: 57 additions & 0 deletions components/episode/player.htm
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
{%if __SELF__.releases.count %}
<div class="crtv-podcast-player-container"
data-crtv-podcast="player"
data-crtv-podcast-player-poster="{{ __SELF__.episode.image ? __SELF__.episode.image.path : (__SELF__.show.image ? __SELF__.show.image.path : null) }}">

<div class="crtv-embed-responsive" data-crtv-podcast-player>
{% if __SELF__.releases.first.release_type.type == 'audio' %}

<div class="crtv-embed-audio" style="background-image: url('{{ __SELF__.episode.image ? __SELF__.episode.image.path : (__SELF__.show.image ? __SELF__.show.image.path : null) }}');">
<audio src="{{ __SELF__.releases.first.embed_url }}" controls></audio>
</div>

{% elseif __SELF__.releases.first.release_type.type == 'video' %}

<video src="{{ __SELF__.releases.first.embed_url }}"
controls
poster="{{ __SELF__.episode.image ? __SELF__.episode.image.path : (__SELF__.show.image ? __SELF__.show.image.path : null) }}">
</video>

{% else %}

<iframe src="{{ __SELF__.releases.first.embed_url }}" frameborder="0"></iframe>

{% endif %}
</div>

<ul class="crtv-podcast-releases">

{% for release in __SELF__.releases %}

<li class="crtv-podcast-release {%if loop.index == 1 %}active{% endif %}">
<a class="crtv-podcast-release-switch"
href="{{ release.url }}"
title="Switch To"
data-crtv-podcast-player-item="{{ release.embed_url }}"
data-crtv-podcast-player-type="{{ release.release_type.type }}">
{{ release.release_type.name }}
</a>
{% if release.release_type.type in ['audio', 'video'] %}
<a href="{{ release.url }}" title="Download" class="crtv-podcast-release-link">
<i class="icon-download-alt"></i>
</a>
{% else %}
<a href="{{ release.url }}" title="Go to" class="crtv-podcast-release-link">
<i class="icon-external-link"></i>
</a>
{% endif %}
</li>

{% endfor %}

</ul>

</div>
{% else %}

{% endif %}
32 changes: 28 additions & 4 deletions models/Release.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
* @property Carbon $created_at Show creation time
* @property Carbon $updated_at Show update time
* @property-read Episode $episode Episode
* @property-read ReleaseType $type Release type
* @method \October\Rain\Database\Relations\BelongsTo episode()
* @method \October\Rain\Database\Relations\BelongsTo type()
* @property-read ReleaseType $release_type Release type
* @method \October\Rain\Database\Relations\BelongsTo episode()
* @method \October\Rain\Database\Relations\BelongsTo release_type()
*/
class Release extends Model
{
Expand All @@ -45,8 +45,32 @@ class Release extends Model
*/

public $belongsTo = [
'episode' => ['CosmicRadioTV\Podcast\Models\Episode'],
'episode' => ['CosmicRadioTV\Podcast\Models\Episode'],
'release_type' => ['CosmicRadioTV\Podcast\Models\ReleaseType'],
];

/**
* Generates URL from release type that can be used in embed
*/
public function getEmbedUrlAttribute()
{
switch ($this->release_type->type) {
case 'audio':
case 'video':
return $this->url;
break;
case 'youtube':
// http://stackoverflow.com/a/8260383
if (preg_match('/.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/', $this->url, $matches)) {
return 'https://youtube.com/embed/' . $matches[1];
} else {
return $this->url;
}
break;
default:
return $this->url;
break;
}
}

}

0 comments on commit c8eb216

Please sign in to comment.