var LazyLoadInit = require('./modules/lazyload-init');
var HomeMenu = require('./modules/home-menu');
var Audio = require('./modules/audio');
+var Video = require('./modules/video');
//
// Init all the modules
window[LazyLoadInit] = new LazyLoadInit();
window[HomeMenu] = new HomeMenu();
window[Audio] = new Audio();
+window[Video] = new Video();
//
var first = playlist.find('li a').attr('data-src');
playlist.find('li').first().addClass('playing');
- that.setTitle(as[i], playlist.find('li a').text());
+ that.setTitle(as[i], playlist.find('li:first-child a').text());
as[i].load(first);
playlist.find('li').bind('click', function(e) {
--- /dev/null
+var Video = function() {
+
+ this.player = null;
+
+ //
+ // Init
+ //
+ this.init();
+
+};
+
+Video.prototype.init = function() {
+
+ var that = this;
+
+ that.player = videojs('video-js-playlist', {
+ aspectRatio:"905:520"
+ });
+
+ var playlist = [];
+ $('.video-playlist li a').each(function(idx) {
+
+ var elem = $(this);
+
+ var srcs = elem.attr('data-src').split(',');
+ var mimes = elem.attr('data-mime').split(',');
+ var obj = {
+ sources: [],
+ poster: elem.attr('data-poster')
+ };
+
+ for(var i=0; i<srcs.length; i++) {
+ obj.sources.push({
+ src: srcs[i],
+ type: mimes[i]
+ });
+ }
+
+ playlist.push(obj);
+
+ elem.click(function(e) {
+ e.preventDefault();
+
+ $('.video-playlist li').removeClass('playing');
+ $(this).parent().addClass('playing');
+ that.player.playlist.currentItem($(this).parent().index());
+ that.player.play();
+
+ return false;
+ });
+
+ });
+ console.log(playlist);
+
+ that.player.playlist(playlist);
+
+};
+
+Video.prototype.open = function(e) {
+
+
+
+}
+
+module.exports = Video;
// Medias
@import "medias/audio-playlist";
+@import "medias/video-playlist";
// Boxes
@import 'boxes/article-box';
--- /dev/null
+$module: ".video-playlist";
+
+#{$module} {
+
+ margin-top: 0;
+ padding: 0;
+ background: $color-black-light;
+ list-style-type: none;
+
+ &__item {
+
+ @include padding(0.25 1);
+ @include font-size(xs);
+ @include typeface(sans-serif);
+ @include transition(all 0.25s ease-in-out);
+ color: white;
+
+ &.playing {
+
+ background: $color-main;
+ color: $color-black-light;
+
+ >a {
+ color: $color-black-light;
+ }
+
+ }
+
+ >a {
+
+ @include transition(all 0.25s ease-in-out);
+ color: white;
+
+ }
+
+ }
+
+}
</div>
</li>
<li class="home__menu-item">
- <a href="#" title="{% trans "Media" %}">{% trans "Medias" %}</a>
+ <a href="{% url 'organization-playlist-list' %}" title="{% trans "Media" %}">{% trans "Medias" %}</a>
<div class="home__shutter">
<div class="home__shutter-content">
<div class="container-fluid tal">
{% include "media/inc/playlist_shutter.html" %}
</div>
- <div><a href="{% url 'organization-playlist-list' %}" title="">{% trans 'See more media >' %}</a></div>
</div>
</div>
</li>
<li class="audio-playlist__item">
{% with media.media as media %}
{% for transcoded in media.transcoded.all %}
- <a href="#" data-src="{{ transcoded.url }}">{{ media.title }}</a>
+ {% if transcoded.mime_type == "audio/mp4" or transcoded.mime_type == "audio/mp3" %}
+ <a href="#" data-src="{{ transcoded.url }}">{{ media.title }}</a>
+ {% endif %}
{% endfor %}
{% endwith %}
</li>
{% load mezzanine_tags keyword_tags i18n organization_tags %}
+
+<div class="col-xs-3">
+ <div class="home__shutter-item">
+ <h2><a href="{% url 'organization-playlist-list' %}" title="">{% trans 'Audios' %}</a></h2>
+ <p>{% trans 'View all the audio medias' %}</p>
+ <a href="{% url 'organization-playlist-list' %}" title="">{% trans 'See all audios >' %}</a>
+ </div>
+</div>
+
+<div class="col-xs-3">
+ <div class="home__shutter-item">
+ <h2><a href="{% url 'organization-playlist-list' %}" title="">{% trans 'Videos' %}</a></h2>
+ <p>{% trans 'View all the video medias' %}</p>
+ <a href="{% url 'organization-playlist-list' %}" title="">{% trans 'See all videos >' %}</a>
+ </div>
+</div>
+
+
{% for media in home.dynamic_content_home_media.all|slice:":3" %}
<div class="col-xs-3">
<div class="home__shutter-item">
- <h2>{{ media.content_object.title }}</h2>
+ <h2><a href="{{ media.content_object.get_absolute_url }}" title="">{{ media.content_object.title }}</a></h2>
+
{% if media.content_object.description %}
<p>{{ media.content_object.description|truncatechars:100 }}</p>
{% endif %}
- {% if media.content_object.poster_url %}
- <img src="{% thumbnail media.content_object.poster_url 203 140 %}">
- {% endif %}
- {% if media.content_type.model == 'video' %}
- <a href="{# media.content_object.get_absolute_url #}" title="">{% trans 'See the video' %}</a>
- {% elif media.content_type.model == 'audio' %}
- <a href="{# media.content_object.get_absolute_url #}" title="">{% trans 'Hear the sound' %}</a>
+
+ {% comment %}
+ {% if media.content_object.poster_url %}
+ <img src="{% thumbnail media.content_object.poster_url 203 140 %}">
+ {% endif %}
+ {% endcomment %}
+
+ {% if media.content_object.type == 'video' %}
+ <a href="{{ media.content_object.get_absolute_url }}" title="">{% trans 'See the video' %}</a>
+ {% elif media.content_object.type == 'audio' %}
+ <a href="{{ media.content_object.get_absolute_url }}" title="">{% trans 'Hear the sound' %}</a>
{% endif %}
</div>
</div>
{% load mezzanine_tags keyword_tags i18n organization_tags %}
+<div class="embed-responsive">
+ <video controls id="video-js-playlist" class="video-js vjs-ircam-skin" data-title="{{ media.title }}" {% if media.poster_url %}poster="{{ media.poster_url }}"{% endif %}>
+ {% for transcoded in media.transcoded.all %}
+ <source src="{{ transcoded.url }}" type="{{ transcoded.mime_type }}" />
+ {% endfor %}
+ Your browser does not support the video tag.
+ </video>
+</div>
{% for media in playlist.medias.all %}
{% with media.media as media %}
{% if forloop.first %}
- <div class="embed-responsive">
- <video width="100%" poster="{{ media.poster_url }}" controls data-title="{{ media.title }}" preload="none">
- {% for transcoded in media.transcoded.all %}
- <source src="{{ transcoded.url }}" type="{{ transcoded.mime_type }}" />
- {% endfor %}
- </video>
- </div>
- <ol>
- {% else %}
- <li><a href="#" data-src="{{ media.url }}">>{{ media.title }}</a></li>
+ <ol class="video-playlist">
{% endif %}
+ {% spaceless %}
+ <li class="video-playlist__item{% if forloop.first %} playing{% endif %}"><a href="#" data-poster="{{media.poster_url }}" data-src="{% for transcoded in media.transcoded.all %}{% if forloop.first %}{% else %},{% endif %}{{ transcoded.url }}{% if forloop.last %}{% endif %}{% endfor %}" data-mime="{% for transcoded in media.transcoded.all %}{% if forloop.first %}{% else %},{% endif %}{{ transcoded.mime_type }}{% if forloop.last %}{% endif %}{% endfor %}">{{ media.title }}</a></li>
+ {% endspaceless %}
{% if forloop.last %}
</ol>
{% endif %}
{% endmetablock %}{% endblock %}
{% block page_class %}
- person
+ playlist
{% endblock %}
{% block breadcrumb_menu %}
{{ block.super }}
- <li class="breadcrumb__item active">{% trans "Media" %}</li>
+ <li class="breadcrumb__item">
+ <a class="breadcrumb__link" href="{% url 'organization-playlist-list' %}" title="{% trans "Media" %}">{% trans "Media" %}</a>
+ </li>
+ <li class="breadcrumb__item active">{{ playlist.title }}</li>
{% endblock %}
{% block page_title %}
{% endeditable %}
{% endblock %}
+{% block page_sidebar %}
+
+ <div class="page__meta" data-sticky data-sticky-parent="row" data-sticky-offset="100" data-sticky-detach-at="971">
+ {% editable playlist.publish_date %}
+ <div class="page__meta-date">
+ {{ playlist.publish_date|date:"DATE_FORMAT" }}
+ </div>
+ {% endeditable %}
+
+ <div class="page__meta-separator">
+
+ </div>
+
+ <div class="page__meta-text">
+ <strong>{{playlist.type}}</strong>
+ </div>
+
+ {% with playlist as object %}
+ {% include "includes/share_buttons.html" %}
+ {% endwith %}
+ </div>
+
+{% endblock %}
+
{% block page_content %}
+
{% with playlist.type as type %}
{% with "media/inc/playlist_"|add:type|add:"_detail.html" as template %}
{% include template %}
{{ playlist.content|safe }}
</div>
- {% with playlist as object %}
- {% include "includes/share_buttons.html" %}
- {% endwith %}
-
{% endblock %}
{% endwith %}
<br>
{% endfor %}
-
{% endblock %}
projects / mezzo.git / commitdiff