Ticket #5443: 0006-Theater-mode-for-mediagoblin.patch

File 0006-Theater-mode-for-mediagoblin.patch, 8.3 KB (added by Saksham Agrawal, 6 years ago)
  • new file mediagoblin/static/css/theater.css

    From 05c9aeb2662a91da4b642973c3db1f4cf3eeca87 Mon Sep 17 00:00:00 2001
    From: saksham1115 <saksham115@gmail.com>
    Date: Mon, 21 Mar 2016 16:46:09 +0530
    Subject: [PATCH 6/6] Theater mode for mediagoblin
    
    ---
     mediagoblin/static/css/theater.css                 | 12 ++++
     mediagoblin/static/js/theater.js                   | 68 ++++++++++++++++++++++
     mediagoblin/templates/mediagoblin/base.html        |  4 +-
     .../mediagoblin/media_displays/video.html          | 18 ++++--
     .../templates/mediagoblin/user_pages/media.html    |  6 +-
     5 files changed, 99 insertions(+), 9 deletions(-)
     create mode 100644 mediagoblin/static/css/theater.css
     create mode 100644 mediagoblin/static/js/theater.js
    
    diff --git a/mediagoblin/static/css/theater.css b/mediagoblin/static/css/theater.css
    new file mode 100644
    index 0000000..6b5006f
    - +  
     1.vjs-default-skin .vjs-control.vjs-toggle-button {
     2        display: block;
     3    font-size: 1.5em;
     4        line-height: 2;
     5        position: relative;
     6        top: 0;
     7        float:right;
     8    left: 10px;
     9        height: 100%;
     10        text-align: center;
     11        cursor: pointer;
     12        }
  • new file mediagoblin/static/js/theater.js

    diff --git a/mediagoblin/static/js/theater.js b/mediagoblin/static/js/theater.js
    new file mode 100644
    index 0000000..ad1ea61
    - +  
     1function Theatertoggle() {
     2    var toggle = false;
     3    videojs.toggle = videojs.Button.extend({
     4        init: function(player, options) {
     5            videojs.Button.call(this, player, options);
     6            this.on('click', this.onClick);
     7        }
     8    });
     9
     10    function hide(elements) {
     11        elements = elements.length ? elements : [elements];
     12        for (var index = 0; index < elements.length; index++) {
     13            console.log(elements[index]);
     14        }
     15    }
     16    videojs.toggle.prototype.onClick = function() {
     17        if (toggle) {
     18            //        $(".container").css("opacity",0.5);
     19            var sidebar = document.getElementById("TheaterToggle_2");
     20            var video_div = document.getElementById("TheaterToggle_1")
     21            var comments = document.getElementById("TheaterToggle_3");
     22            video_div.style.width = "100%";
     23            comments.style.display = "inline-block";
     24            video_div.appendChild(sidebar);
     25            sidebar.style.cssFloat = "right";
     26            toggle = false;
     27            hide(document.getElementById('wrap'));
     28            console.log("1");
     29        } else {
     30            var sidebar = document.getElementById("TheaterToggle_2");
     31            var comments = document.getElementById("TheaterToggle_3");
     32            var video_div = document.getElementById("TheaterToggle_1");
     33            var clear = document.getElementById("clear");
     34            $("#TheaterToggle_2").appendTo('#mediagoblin_content');
     35            $("#TheaterToggle_2").insertAfter("#TheaterToggle_1");
     36            video_div.style.width = "";
     37            comments.style.display = "";
     38            sidebar.style.cssFloat = "";
     39            toggle = true;
     40            console.log('2');
     41        }
     42
     43    };
     44    var createToggleButton = function() {
     45        var props = {
     46            className: 'vjs-toggle-button vjs-control',
     47            innerHTML: '<div class="vjs-control-content">' + ('[__]') + '</div>',
     48            role: 'button',
     49            tabIndex: 0
     50        };
     51
     52        return videojs.Component.prototype.createEl(null, props);
     53    };
     54    videojs.plugin('toggle', function() {
     55        var options = {
     56            'el': createToggleButton()
     57        };
     58        toggle = new videojs.toggle(this, options);
     59        this.controlBar.el().appendChild(toggle.el());
     60    });
     61    var vid = videojs("video1", {
     62        plugins: {
     63            toggle: {}
     64        }
     65    });
     66
     67}
     68Theatertoggle();
     69 No newline at end of file
  • mediagoblin/templates/mediagoblin/base.html

    diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html
    index 9b0b716..fc4df64 100644
    a b  
    7272              <div class="row foot">
    7373              <div class="header_left">
    7474                {%- include "mediagoblin/bits/logo.html" -%}
    75                 {% template_hook("header_left") %}
     75    {% template_hook("header_left") %}
    7676                {% block mediagoblin_header_title %}{% endblock %}
    7777              </div>
    7878              <div class="header_right">
     
    190190        {% endblock %}
    191191        <div class="container">
    192192          {% include 'mediagoblin/bits/above_content.html' %}
    193           <div class="mediagoblin_content">
     193          <div class="mediagoblin_content" id="mediagoblin_content">
    194194            {% include "mediagoblin/utils/messages.html" %}
    195195            {% block mediagoblin_content %}
    196196            {% endblock mediagoblin_content %}
  • mediagoblin/templates/mediagoblin/media_displays/video.html

    diff --git a/mediagoblin/templates/mediagoblin/media_displays/video.html b/mediagoblin/templates/mediagoblin/media_displays/video.html
    index 5aac352..a36c886 100644
    a b  
    3131  <link href="{{
    3232          request.staticdirect('/extlib/video-js/video-js.css') }}"
    3333        rel="stylesheet">
    34 
     34  <link href="{{
     35          request.staticdirect('/extlib/video-js/video-js.css') }}"
     36          rel="stylesheet">
     37          <link href="{{
     38                  request.staticdirect('/css/theater.css') }}"
     39                  rel="stylesheet">
    3540  <style type="text/css">
    3641    .vjs-default-skin .vjs-big-play-button
    3742    {
     
    4954<div class="media_other_container">
    5055  {% set display_type, display_path = media.get_display_media() %}
    5156
    52   <video controls
     57  <video id="video1"  controls
    5358         {% if global_config['plugins']['mediagoblin.media_types.video']['auto_play'] %}autoplay{% endif %}
    5459         preload="auto" class="video-js vjs-default-skin"
    5560         data-setup='{"height": {{ media.media_data.height }},
    56                       "width": {{ media.media_data.width }} }'>
     61                      "width": {{ media.media_data.width }} }' >
    5762    <source src="{{ request.app.public_store.file_url(display_path) }}"
    5863            {% if media.media_data %}
    5964              type="{{ media.media_data.source_type() }}"
    6065            {% else %}
    6166              type="{{ media.media_manager['default_webm_type'] }}"
    6267            {% endif %} />
     68
     69    <track kind="captions" src="{{
     70      request.staticdirect('/subtitles/test.srt') }}" label="test">
    6371    <div class="no_html5">
    6472      {%- trans -%}Sorry, this video will not work because
    65       your web browser does not support HTML5 
     73      your web browser does not support HTML5
    6674      video.{%- endtrans -%}<br/>
    6775      {%- trans -%}
    6876      We recommend you install a <a href="https://libreplanet.org/wiki/Libre_Browsers_Libre_Formats">freedom-respecting browser which supports free formats</a>!
     
    7078    </div>
    7179  </video>
    7280</div>
     81<script type="text/javascript" src="{{
     82  request.staticdirect('/js/theater.js') }}"></script>
    7383{% endblock %}
    7484
    7585{% block mediagoblin_sidebar %}
  • mediagoblin/templates/mediagoblin/user_pages/media.html

    diff --git a/mediagoblin/templates/mediagoblin/user_pages/media.html b/mediagoblin/templates/mediagoblin/user_pages/media.html
    index 37e1db8..07e1b3e 100644
    a b  
    5151    {% include "mediagoblin/utils/prev_next.html" %}
    5252  </div>
    5353</div>
    54   <div class="media_pane eleven columns">
     54  <div class="media_pane eleven columns" id="TheaterToggle_1">
    5555    {% block mediagoblin_media %}
    5656      <div class="media_image_container">
    5757        {% set display_media = request.app.public_store.file_url(
     
    9898    {% endautoescape %}
    9999    </div>
    100100    {% if request.user and request.user.has_privilege('commenter') %}
    101     <div class="media_comments">
     101    <div class="media_comments" id="TheaterToggle_3">
    102102      {% if app_config['allow_comments'] %}
    103103        <a
    104104          {% if not request.user %}
     
    180180    </div>
    181181
    182182
    183   <div class="five columns media_sidebar">
     183  <div class="five columns media_sidebar" id="TheaterToggle_2">
    184184    <h3>{% trans %}Added{% endtrans %}</h3>
    185185    <p><span title="{{ media.created.strftime("%I:%M%p %Y-%m-%d") }}">
    186186        {%- trans formatted_time=timesince(media.created) -%}