From: vijeth-aradhya <vijthaaa@gmail.com>
Date: Sun, 16 Jul 2017 15:44:25 +0000 (+0530)
Subject: Modify video template to accomodate multiple resolutions
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=f6ba0e561bfb62991d70a4c002edf142d9d7540c;p=mediagoblin.git

Modify video template to accomodate multiple resolutions

Add required JS/CSS plugin files.
Add JS file to fire up the plugin.
Modify video tag accordingly.
---

diff --git a/mediagoblin/templates/mediagoblin/media_displays/video.html b/mediagoblin/templates/mediagoblin/media_displays/video.html
index 5aac3529..4ba3d1d5 100644
--- a/mediagoblin/templates/mediagoblin/media_displays/video.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/video.html
@@ -22,44 +22,31 @@
   {{ super() }}
   <script type="text/javascript" src="{{
      request.staticdirect('/extlib/video-js/video.js') }}"></script>
+  <script type="text/javascript" src="{{
+     request.staticdirect('/extlib/videojs-resolution-switcher/videojs-resolution-switcher.js') }}">
+     </script>
+  <script type="text/javascript"
+          src="{{ request.staticdirect('/js/change-video-resolution.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">
+  <link href="{{
+          request.staticdirect('/extlib/videojs-resolution-switcher/videojs-resolution-switcher.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() %}
+  {% set all_media_path = media.get_all_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 %} />
+  <video id="video_1" class="video-js vjs-default-skin">
+    {% for each_media_path in all_media_path %}
+    <source src="{{ request.app.public_store.file_url(each_media_path[2]) }}" type="video/webm"
+            label="{{ each_media_path[0] }}" res="{{ each_media_path[1][1] }}" />
+    {% endfor %}
     <div class="no_html5">
       {%- trans -%}Sorry, this video will not work because
       your web browser does not support HTML5