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
--- /dev/null
+++ b/mediagoblin/static/css/theater.css
@@ -0,0 +1,12 @@
+.vjs-default-skin .vjs-control.vjs-toggle-button {
+        display: block;
+    font-size: 1.5em;
+        line-height: 2;
+        position: relative;
+        top: 0;
+        float:right;
+    left: 10px;
+        height: 100%;
+        text-align: center;
+        cursor: pointer;
+        }
diff --git a/mediagoblin/static/js/theater.js b/mediagoblin/static/js/theater.js
new file mode 100644
index 0000000..ad1ea61
--- /dev/null
+++ b/mediagoblin/static/js/theater.js
@@ -0,0 +1,68 @@
+function Theatertoggle() {
+    var toggle = false;
+    videojs.toggle = videojs.Button.extend({
+        init: function(player, options) {
+            videojs.Button.call(this, player, options);
+            this.on('click', this.onClick);
+        }
+    });
+
+    function hide(elements) {
+        elements = elements.length ? elements : [elements];
+        for (var index = 0; index < elements.length; index++) {
+            console.log(elements[index]);
+        }
+    }
+    videojs.toggle.prototype.onClick = function() {
+        if (toggle) {
+            //        $(".container").css("opacity",0.5);
+            var sidebar = document.getElementById("TheaterToggle_2");
+            var video_div = document.getElementById("TheaterToggle_1")
+            var comments = document.getElementById("TheaterToggle_3");
+            video_div.style.width = "100%";
+            comments.style.display = "inline-block";
+            video_div.appendChild(sidebar);
+            sidebar.style.cssFloat = "right";
+            toggle = false;
+            hide(document.getElementById('wrap'));
+            console.log("1");
+        } else {
+            var sidebar = document.getElementById("TheaterToggle_2");
+            var comments = document.getElementById("TheaterToggle_3");
+            var video_div = document.getElementById("TheaterToggle_1");
+            var clear = document.getElementById("clear");
+            $("#TheaterToggle_2").appendTo('#mediagoblin_content');
+            $("#TheaterToggle_2").insertAfter("#TheaterToggle_1");
+            video_div.style.width = "";
+            comments.style.display = "";
+            sidebar.style.cssFloat = "";
+            toggle = true;
+            console.log('2');
+        }
+
+    };
+    var createToggleButton = function() {
+        var props = {
+            className: 'vjs-toggle-button vjs-control',
+            innerHTML: '<div class="vjs-control-content">' + ('[__]') + '</div>',
+            role: 'button',
+            tabIndex: 0
+        };
+
+        return videojs.Component.prototype.createEl(null, props);
+    };
+    videojs.plugin('toggle', function() {
+        var options = {
+            'el': createToggleButton()
+        };
+        toggle = new videojs.toggle(this, options);
+        this.controlBar.el().appendChild(toggle.el());
+    });
+    var vid = videojs("video1", {
+        plugins: {
+            toggle: {}
+        }
+    });
+
+}
+Theatertoggle();
\ No newline at end of file
diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html
index 9b0b716..fc4df64 100644
--- a/mediagoblin/templates/mediagoblin/base.html
+++ b/mediagoblin/templates/mediagoblin/base.html
@@ -72,7 +72,7 @@
               <div class="row foot">
               <div class="header_left">
                 {%- include "mediagoblin/bits/logo.html" -%}
-		{% template_hook("header_left") %}
+    {% template_hook("header_left") %}
                 {% block mediagoblin_header_title %}{% endblock %}
               </div>
               <div class="header_right">
@@ -190,7 +190,7 @@
         {% endblock %}
         <div class="container">
           {% include 'mediagoblin/bits/above_content.html' %}
-          <div class="mediagoblin_content">
+          <div class="mediagoblin_content" id="mediagoblin_content">
             {% include "mediagoblin/utils/messages.html" %}
             {% block mediagoblin_content %}
             {% endblock mediagoblin_content %}
diff --git a/mediagoblin/templates/mediagoblin/media_displays/video.html b/mediagoblin/templates/mediagoblin/media_displays/video.html
index 5aac352..a36c886 100644
--- a/mediagoblin/templates/mediagoblin/media_displays/video.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/video.html
@@ -31,7 +31,12 @@
   <link href="{{
           request.staticdirect('/extlib/video-js/video-js.css') }}"
         rel="stylesheet">
-
+  <link href="{{
+          request.staticdirect('/extlib/video-js/video-js.css') }}"
+          rel="stylesheet">
+          <link href="{{
+                  request.staticdirect('/css/theater.css') }}"
+                  rel="stylesheet">
   <style type="text/css">
     .vjs-default-skin .vjs-big-play-button
     {
@@ -49,20 +54,23 @@
 <div class="media_other_container">
   {% set display_type, display_path = media.get_display_media() %}
 
-  <video controls
+  <video id="video1"  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 }} }'>
+                      "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 %} />
+
+    <track kind="captions" src="{{
+      request.staticdirect('/subtitles/test.srt') }}" label="test">
     <div class="no_html5">
       {%- trans -%}Sorry, this video will not work because
-      your web browser does not support HTML5 
+      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>!
@@ -70,6 +78,8 @@
     </div>
   </video>
 </div>
+<script type="text/javascript" src="{{
+  request.staticdirect('/js/theater.js') }}"></script>
 {% endblock %}
 
 {% block mediagoblin_sidebar %}
diff --git a/mediagoblin/templates/mediagoblin/user_pages/media.html b/mediagoblin/templates/mediagoblin/user_pages/media.html
index 37e1db8..07e1b3e 100644
--- a/mediagoblin/templates/mediagoblin/user_pages/media.html
+++ b/mediagoblin/templates/mediagoblin/user_pages/media.html
@@ -51,7 +51,7 @@
     {% include "mediagoblin/utils/prev_next.html" %}
   </div>
 </div>
-  <div class="media_pane eleven columns">
+  <div class="media_pane eleven columns" id="TheaterToggle_1">
     {% block mediagoblin_media %}
       <div class="media_image_container">
         {% set display_media = request.app.public_store.file_url(
@@ -98,7 +98,7 @@
     {% endautoescape %}
     </div>
     {% if request.user and request.user.has_privilege('commenter') %}
-    <div class="media_comments">
+    <div class="media_comments" id="TheaterToggle_3">
       {% if app_config['allow_comments'] %}
         <a
           {% if not request.user %}
@@ -180,7 +180,7 @@
     </div>
 
 
-  <div class="five columns media_sidebar">
+  <div class="five columns media_sidebar" id="TheaterToggle_2">
     <h3>{% trans %}Added{% endtrans %}</h3>
     <p><span title="{{ media.created.strftime("%I:%M%p %Y-%m-%d") }}">
         {%- trans formatted_time=timesince(media.created) -%}
-- 
1.9.1