Subtitle interface using attachments

[mediagoblin.git] / mediagoblin / templates / mediagoblin / media_displays / video.html

{#
# GNU MediaGoblin -- federated, autonomous media hosting
# Copyright (C) 2011, 2012 MediaGoblin contributors.  See AUTHORS.
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program.  If not, see <http://www.gnu.org/licenses/>.
#}

{% extends 'mediagoblin/user_pages/media.html' %}

{% block mediagoblin_head -%}
  {{ super() }}
  <script type="text/javascript" src="{{
     request.staticdirect('/extlib/video-js/video.js') }}"></script>
  {# Sadly commented out till we can get the mediagoblin skin ported over
   # to the newest video.js release ;\  #}
  {#
     <link href="{{ request.staticdirect('/css/vjs-mg-skin.css') }}"
           rel="stylesheet">
  #}
  <link href="{{
          request.staticdirect('/extlib/video-js/video-js.css') }}"
        rel="stylesheet">

  <style type="text/css">
    .vjs-default-skin .vjs-big-play-button
    {
      top: 50%;
      left: 50%;
      margin: -1.5em auto auto -2em;
    }
    .vjs-play-progress, .vjs-volume-level {
      background-color: #86D4B1 !important;
    }
  </style>
{%- endblock %}

{% block mediagoblin_media %}
<div class="media_other_container">
  {% set display_type, display_path = media.get_display_media() %}

  <video controls
         {% if global_config['plugins']['mediagoblin.media_types.video']['auto_play'] %}autoplay{% endif %}
         preload="auto" class="video-js vjs-default-skin"
         data-setup='{"height": {{ media.media_data.height }},
                      "width": {{ media.media_data.width }} }'>
    <source src="{{ request.app.public_store.file_url(display_path) }}"
            {% if media.media_data %}
              type="{{ media.media_data.source_type() }}"
            {% else %}
              type="{{ media.media_manager['default_webm_type'] }}"
            {% endif %} />
    {%- for attachment in media.attachment_files %}
            <track src="{{ request.app.public_store.file_url(attachment.filepath) }}"
              label = "{{- attachment.name -}}" kind="subtitles" >
    {%- endfor %}
    <div class="no_html5">
      {%- trans -%}Sorry, this video will not work because
      your web browser does not support HTML5 
      video.{%- endtrans -%}<br/>
      {%- trans -%}
      We recommend you install a <a href="https://libreplanet.org/wiki/Libre_Browsers_Libre_Formats">freedom-respecting browser which supports free formats</a>!
      {%- endtrans -%}
    </div>
  </video>
</div>
{% endblock %}

{% block mediagoblin_sidebar %}
  <h3>{% trans %}Download{% endtrans %}</h3>
  <ul>
    {% if 'original' in media.media_files %}
      <li>
        <a href="{{ request.app.public_store.file_url(
                       media.media_files.original) }}">
          {%- trans %}Original file{% endtrans -%}
        </a>
      </li>
    {% endif %}
    {% if 'webm_video' in media.media_files %}
      <li>
        <a href="{{ request.app.public_store.file_url(
                       media.media_files.webm_video) }}">
          {%- trans %}WebM file (VP8/Vorbis){% endtrans -%}
        </a>
      </li>
    {% endif %}
  </ul>
{% endblock %}