var LightSliderPageInit = require('./modules/lightsliderpage-init');
var LightSliderHomeInit = require('./modules/lightsliderhome-init');
var HomeMenu = require('./modules/home-menu');
+var Audio = require('./modules/audio');
//
// Init all the modules
window[LightSliderPageInit] = new LightSliderPageInit();
window[LightSliderHomeInit] = new LightSliderHomeInit();
window[HomeMenu] = new HomeMenu();
+window[Audio] = new Audio();
--- /dev/null
+var Audio = function() {
+
+ //
+ // Init
+ //
+ this.init();
+
+ this.audios = [];
+ this.playlists = [];
+
+};
+
+Audio.prototype.init = function() {
+
+ var that = this,
+ as, i, playlist;
+
+ audiojs.events.ready(function() {
+
+ as = audiojs.createAll();
+
+ for(i = 0; i<as.length; i++) {
+
+ playlist = $(as[i].element).parent().next('.audio-playlist');
+
+ //
+ // Future refs
+ //
+ that.audios.push(as[i]);
+ that.playlists.push(playlist[0]);
+
+ //
+ // Set the trackEnded function
+ //
+ as[i].settings.trackEnded = function() {
+
+ var idx, next, playlist;
+
+ idx = that.audios.indexOf(this);
+ playlist = that.playlists[idx];
+
+ var next = playlist.find('li.playing').next();
+ if (!next.length) next = playlist.find('li').first();
+ next.addClass('playing').siblings().removeClass('playing');
+ this.load($('a', next).attr('data-src'));
+ this.play();
+
+ };
+
+ //
+ // Load the first audio
+ //
+ var first = playlist.find('li a').attr('data-src');
+ playlist.find('li').first().addClass('playing');
+ as[i].load(first);
+
+ playlist.find('li').bind('click', function(e) {
+
+ var idx = that.playlists.indexOf($(this).parent().get(0));
+
+ e.preventDefault();
+ $(this).addClass('playing').siblings().removeClass('playing');
+ that.audios[idx].load($('a', this).attr('data-src'));
+ that.audios[idx].play();
+
+ });
+
+ }
+
+ });
+
+};
+
+module.exports = Audio;
breakpoint: 752,
settings: {
autoWidth: false,
+ adaptiveHeight: true,
item: 1
}
}
- ]
+ ],
+ onBeforeSlide: function(el) {
+ $(el).find('video').each(function(i) {
+ this.pause();
+ });
+ }
}
};
element = that.elements[i];
totalWidth = 0;
- element.$element.find('li').each(function() {
- totalWidth += $(this).find('img').get(0).naturalWidth;
+ element.$element.find('li.slider-page__slide').each(function() {
+
+ var img = $(this).find('img').get(0);
+
+ if(img) {
+ totalWidth += img.naturalWidth;
+ } else {
+ totalWidth += 905;
+ }
+
});
if(totalWidth > windowWidth) {
// Grid system
$breakpoints: (
- xxs: 0,
+ xxs: 0px,
xs: 752px,
sm: 972px,
md: 1072px,
@import "navs/nav-tree";
@import "sidebar";
+// Medias
+@import "medias/audio-playlist";
+
// Boxes
@import 'boxes/article-box';
@import 'boxes/page-box';
--- /dev/null
+$module: ".audio-playlist";
+
+#{$module} {
+
+ &__item {
+
+ &.playing {
+ color: red;
+ }
+
+ >a {
+
+
+
+ }
+
+ }
+
+}
}
+ &__video {
+
+ margin-bottom: 5px;
+ @include fluid-aspect(905 520);
+ width: 905px;
+
+ @include mq($until: xs) {
+
+ width: 100%;
+
+ }
+
+ }
+
}
@import "slick";
@import "lightslider";
@import "pushy";
+@import "audiojs";
+@import "videojs";
--- /dev/null
+.audiojs .play-pause {
+ width: 37px;
+}
--- /dev/null
+/*
+ Player Skin Designer for Video.js
+ http://videojs.com
+
+ To customize the player skin edit
+ the CSS below. Click "details"
+ below to add comments or questions.
+ This file uses some SCSS. Learn more
+ at http://sass-lang.com/guide)
+
+ This designer can be linked to at:
+ http://codepen.io/heff/pen/EarCt/left/?editors=010
+*/
+
+// The following are SCSS variables to automate some of the values.
+// But don't feel limited by them. Change/replace whatever you want.
+
+// The color of icons, text, and the big play button border.
+// Try changing to #0f0
+$primary-foreground-color: $color-main; // #fff default
+
+// The default color of control backgrounds is mostly black but with a little
+// bit of blue so it can still be seen on all-black video frames, which are common.
+// Try changing to #900
+$primary-background-color: #000000; // #2B333F default
+
+// Try changing to true
+$center-big-play-button: true; // true default
+
+.video-js {
+ /* The base font size controls the size of everything, not just text.
+ All dimensions use em-based sizes so that the scale along with the font size.
+ Try increasing it to 15px and see what happens. */
+ font-size: 10px;
+
+ /* The main font color changes the ICON COLORS as well as the text */
+ color: $primary-foreground-color;
+}
+
+/* The "Big Play Button" is the play button that shows before the video plays.
+ To center it set the align values to center and middle. The typical location
+ of the button is the center, but there is trend towards moving it to a corner
+ where it gets out of the way of valuable content in the poster image.*/
+.vjs-ircam-skin .vjs-big-play-button {
+ /* The font size is what makes the big play button...big.
+ All width/height values use ems, which are a multiple of the font size.
+ If the .video-js font-size is 10px, then 3em equals 30px.*/
+ font-size: 3em;
+
+ /* We're using SCSS vars here because the values are used in multiple places.
+ Now that font size is set, the following em values will be a multiple of the
+ new font size. If the font-size is 3em (30px), then setting any of
+ the following values to 3em would equal 30px. 3 * font-size. */
+ $big-play-width: 3em;
+ /* 1.5em = 45px default */
+ $big-play-height: 3em;
+
+ line-height: $big-play-height;
+ height: $big-play-height;
+ width: $big-play-width;
+
+ /* 0.06666em = 2px default */
+ border: 0.06666em solid $primary-foreground-color;
+ /* 0.3em = 9px default */
+ border-radius: $big-play-width;
+
+ @if $center-big-play-button {
+ /* Align center */
+ left: 50%;
+ top: 50%;
+ margin-left: -($big-play-width / 2);
+ margin-top: -($big-play-height / 2);
+ } @else {
+ /* Align top left. 0.5em = 15px default */
+ left: 0.5em;
+ top: 0.5em;
+ }
+}
+
+/* The default color of control backgrounds is mostly black but with a little
+ bit of blue so it can still be seen on all-black video frames, which are common. */
+.video-js .vjs-control-bar,
+.video-js .vjs-big-play-button,
+.video-js .vjs-menu-button .vjs-menu-content {
+ /* IE8 - has no alpha support */
+ background-color: $primary-background-color;
+ /* Opacity: 1.0 = 100%, 0.0 = 0% */
+ background-color: rgba($primary-background-color, 0.7);
+}
+
+// Make a slightly lighter version of the main background
+// for the slider background.
+$slider-bg-color: lighten($primary-background-color, 33%);
+
+/* Slider - used for Volume bar and Progress bar */
+.video-js .vjs-slider {
+ background-color: $slider-bg-color;
+ background-color: rgba($slider-bg-color, 0.5);
+}
+
+/* The slider bar color is used for the progress bar and the volume bar
+ (the first two can be removed after a fix that's coming) */
+.video-js .vjs-volume-level,
+.video-js .vjs-play-progress,
+.video-js .vjs-slider-bar {
+ background: $primary-foreground-color;
+}
+
+/* The main progress bar also has a bar that shows how much has been loaded. */
+.video-js .vjs-load-progress {
+ /* For IE8 we'll lighten the color */
+ background: ligthen($slider-bg-color, 25%);
+ /* Otherwise we'll rely on stacked opacities */
+ background: rgba($slider-bg-color, 0.5);
+}
+
+/* The load progress bar also has internal divs that represent
+ smaller disconnected loaded time ranges */
+.video-js .vjs-load-progress div {
+ /* For IE8 we'll lighten the color */
+ background: ligthen($slider-bg-color, 50%);
+ /* Otherwise we'll rely on stacked opacities */
+ background: rgba($slider-bg-color, 0.75);
+}
<link rel="stylesheet" href="{% static "vendors/font-awesome/css/font-awesome.css" %}">
<link rel="stylesheet" href="{% static "vendors/lightslider/dist/css/lightslider.css" %}">
<link rel="stylesheet" href="{% static "vendors/pushy/css/pushy.css" %}">
+ <link rel="stylesheet" href="{% static "vendors/video.js/dist/video-js.css" %}">
<link rel="stylesheet" href="{% static "css/index.min.css" %}">
{% endcompress %}
-{% for audio in audios %}
- {# audio.title #}<br>
- {# audio.open_source_mime_type #}<br>
- {# audio.closed_source_mime_type #}<br>
- {# audio.category #}<br>
- {# audio.media_id #}<br>
- {# audio.open_source_url #}<br>
- {# audio.closed_source_url #}<br>
- {# audio.poster_url #}<br>
-
- <audio controls>
- <source src="{{ audio.open_source_url }}" type="{{ audio.open_source_mime_type }}">
- <source src="{{ audio.closed_source_mime_type }}" type="{{ audio.closed_source_url }}">
- Your browser does not support the audio element.
- </audio>
-{% endfor %}
+{% if audios %}
+
+ <audio preload="true"></audio>
+ <ol class="audio-playlist">
+
+ {% for audio in audios %}
+
+ <li class="audio-playlist__item">
+ <a href="#" data-src="{{ audio.open_source_url }}">{{ audio.title }}</a>
+ </li>
+
+ {% comment %}
+
+ {# audio.title #}<br>
+ {# audio.open_source_mime_type #}<br>
+ {# audio.closed_source_mime_type #}<br>
+ {# audio.category #}<br>
+ {# audio.media_id #}<br>
+ {# audio.open_source_url #}<br>
+ {# audio.closed_source_url #}<br>
+ {# audio.poster_url #}<br>
+ <audio>
+ <source src="{{ audio.open_source_url }}" type="{{ audio.open_source_mime_type }}">
+ <source src="{{ audio.closed_source_mime_type }}" type="{{ audio.closed_source_url }}">
+ Your browser does not support the audio element.
+ </audio>
+
+ {% endcomment %}
+
+ {% endfor %}
+
+ </ol>
+
+{% endif %}
{% for image in slider_images %}
<li class="slider-page__slide">
<div class="slider-page__wrapper">
- <img title="{{ image.title }}" alt="{{ image.title }} {{ image.description }} {{ image.credits }}" class="slider-page__img" src="{{ MEDIA_URL}}{% thumbnail image.file 0 520 %}" alt="" /><br />
+ <img title="{{ image.title }}" alt="{{ image.title }} {{ image.description }} {{ image.credits }}" class="slider-page__img" src="{{ MEDIA_URL}}{% thumbnail image.file 0 520 %}" alt="" />
<div class="slider-page__caption">
{{ image.title }}
{% if image.description %}
</div>
</li>
{% endfor %}
+ {% for video in videos %}
+ <li class="slider-page__slide">
+ <div class="slider-page__wrapper">
+ <div class="slider-page__video">
+ <video controls class="video-js vjs-ircam-skin" data-setup='{"aspectRatio":"905:520"}' {% if video.poster_url %}poster="{{ video.poster_url }}"{% endif %}>
+ <source src="{{ video.closed_source_url }}" type="{{ video.closed_source_mime_type }}">
+ <source src="{{ video.open_source_url }}" type="{{ video.open_source_mime_type }}">
+ Your browser does not support the video tag.
+ </video>
+ </div>
+ <div class="slider-page__caption">
+ {{ video.title }}
+ </div>
+ </div>
+ </li>
+ {% endfor %}
</ul>
</div>
<script src="{% static "vendors/lightslider/dist/js/lightslider.js" %}"></script>
<script src="{% static "vendors/imagesloaded/imagesloaded.pkgd.js" %}"></script>
<script src="{% static "vendors/pushy/js/pushy.js" %}"></script>
+ <script src="{% static "vendors/video.js/dist/video.js" %}"></script>
+ <script src="{% static "vendors/videojs-playlist/dist/videojs-playlist.js" %}"></script>
+ <script src="{% static "vendors/audiojs/audiojs/audio.js" %}"></script>
<script src="{% static "js/index.min.js" %}"></script>
{% block extra_js %}{% endblock %}
{% editable_loader %}
{% block page_slider %}
{% with page.custompage.images.all|get_type:'page_slider' as slider_images %}
+ {% with page.custompage.videos.all as videos %}
{% if slider_images %}
{% include 'core/inc/slider.html' %}
{% endif %}
{% endwith %}
-{% endblock %}
-
-{% block page_video %}
- {% with page.custompage.videos.all as videos %}
- {% if videos %}
- {% include 'core/inc/video.html' %}
- {% endif %}
- {% endwith %}
+ {% endwith %}
{% endblock %}
{% block page_sub_content %}
{% block page_slider %}
{% with page.departmentpage.images.all|get_type:'page_slider' as slider_images %}
+{% with page.departmentpage.videos.all as videos %}
{% if slider_images %}
{% include 'core/inc/slider.html' %}
{% endif %}
{% endwith %}
-{% endblock %}
-
-{% block page_video %}
- {% with page.departmentpage.videos.all as videos %}
- {% if videos %}
- {% include 'core/inc/video.html' %}
- {% endif %}
- {% endwith %}
+{% endwith %}
{% endblock %}
{% block page_sub_content %}
</div>
</div>
- {% block page_audio %}
- {% endblock %}
{% block page_slider %}
{% endblock %}
- {% block page_video %}
+ {% block page_audio %}
{% endblock %}
{% block page_sub_content %}
{% endblock %}
{% block page_slider %}
{% with page.teampage.images.all|get_type:'page_slider' as slider_images %}
+ {% with page.teampage.videos.all as videos %}
{% if slider_images %}
{% include 'core/inc/slider.html' %}
{% endif %}
{% endwith %}
-{% endblock %}
-
-{% block page_video %}
- {% with page.teampage.videos.all as videos %}
- {% if videos %}
- {% include 'core/inc/video.html' %}
- {% endif %}
{% endwith %}
{% endblock %}
projects / mezzo.git / commitdiff