Add plyr as player default and remove NodeJS, npm and videojs

1 files changed, 109 insertions, 80 deletions

diff --git a/mediagoblin/templates/mediagoblin/media_displays/video.html b/mediagoblin/templates/mediagoblin/media_displays/video.html
index e378fc90..2d8d776a 100644
--- a/mediagoblin/templates/mediagoblin/media_displays/video.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/video.html
@@ -19,92 +19,121 @@
 {% extends 'mediagoblin/user_pages/media.html' %}
 
 {% block mediagoblin_head -%}
-  {{ 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('/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>
-
+    {{ super() }}
+    <link href="{{ request.staticdirect('/extlib/plyr/plyr.css') }}" rel="stylesheet">
+    <style>
+     video {
+         width: 100%;
+     }
+     .responsive-container {
+         display: inline;
+     }
+     /* plyr fix */
+     .plyr:-moz-full-screen video {
+         max-height: initial;
+     }
+     .plyr:-webkit-full-screen video {
+         max-height: initial;
+     }
+     .plyr:-ms-fullscreen video {
+         max-height: initial;
+     }
+     .plyr:fullscreen video {
+         max-height: initial;
+     }
+     .plyr video {
+         max-height: 360px;
+     }
+    </style>
 {%- endblock %}
 
 {% block mediagoblin_media %}
-<div class="media_other_container">
-  {% set all_media_path = media.get_all_media() %}
+    <div class="media_other_container" id="player">
+        {% set all_media_path = media.get_all_media() %}
 
-  <video controls
-         {% if global_config['plugins']['mediagoblin.media_types.video']['auto_play'] %}autoplay{% endif %}
-         preload="metadata" class="video-js vjs-default-skin" id="video_1">
-    {% for each_media_path in all_media_path %}
-    <source src="{{ request.app.public_store.file_url(each_media_path[2]) }}"
-            {% if media.media_data %}
-              type="{{ media.media_data.source_type() }}"
-            {% else %}
-              type="{{ media.media_manager['default_webm_type'] }}"
-            {% endif %}
-            label="{{ each_media_path[0] }}" res="{{ each_media_path[1][1] }}" />
-    {% endfor %}
-    {%- for subtitle in media.subtitle_files %}
-    <track src="{{ request.app.public_store.file_url(subtitle.filepath) }}"
-      label="{{ subtitle.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 -%}
+        <video controls playsinline
+               {% if global_config['plugins']['mediagoblin.media_types.video']['auto_play'] %}autoplay{% endif %}
+               preload="metadata" id="js-video-player">
+            {% for each_media_path in all_media_path %}
+                <source src="{{ request.app.public_store.file_url(each_media_path[2]) }}"
+                        {% if media.media_data %}
+                        type="{{ media.media_data.source_type() }}"
+                        {% else %}
+                        type="{{ media.media_manager['default_webm_type'] }}"
+                        {% endif %}
+                        data-res="{{ each_media_path[1][1] }}" />
+            {% endfor %}
+            {%- for subtitle in media.subtitle_files %}
+                <track src="{{ request.app.public_store.file_url(subtitle.filepath) }}"
+                       label="{{ subtitle.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>
-  </video>
-</div>
+
+    <!-- Plyr -->
+    <script src="{{ request.staticdirect('/extlib/plyr/plyr.js') }}"></script>
+    <script>
+     /* Fix plyr: If I set height on video element, fullscreen is broken */
+     let fluid_player = document.getElementById('player');
+     fluid_player.classList.add('responsive-container');
+     /* Playing */
+     const videoPlayer = new Plyr(document.getElementById('js-video-player'), {
+         disableContextMenu: false,
+         captions: {
+             active: true,
+         },
+         controls: [
+             'play-large',
+             'play',
+             'progress',
+             'current-time',
+             'duration',
+             'mute',
+             'volume',
+             'captions',
+             'settings',
+             'pip',
+             'airplay',
+             'fullscreen'
+         ],
+         iconUrl: "{{ request.staticdirect('/extlib/plyr/plyr.svg') }}",
+         blankVideo: "{{ request.staticdirect('/extlib/plyr/blank.webm') }}",
+         debug: false
+     });
+    </script>
 {% 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 %}
-    {# Sorting will be wrong for resolutions >= 1000p as it's alphanumeric. #}
-    {% for name, media in media.media_files|dictsort|list %}
-      {% if name.startswith('webm') %}
-        <li>
-          <a href="{{ request.app.public_store.file_url(media) }}">
-            {%- trans %}WebM file (VP8/Vorbis){% endtrans -%}
-            {{ name | replace('webm_', ' ') }}
-          </a>
-        </li>
-      {% endif %}
-    {% endfor %}
-    {% if 'webm_video' in media.media_files %}
-    {% endif %}
-  </ul>
+    <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) }}" download>
+                    {%- trans %}Original file{% endtrans -%}
+                </a>
+            </li>
+        {% endif %}
+        {# Sorting will be wrong for resolutions >= 1000p as it's alphanumeric. #}
+        {% for name, media in media.media_files|dictsort|list %}
+            {% if name.startswith('webm') %}
+                <li>
+                    <a href="{{ request.app.public_store.file_url(media) }}" download>
+                        {%- trans %}WebM file (VP8/Vorbis){% endtrans -%}
+                        {{ name | replace('webm_', ' ') }}
+                    </a>
+                </li>
+            {% endif %}
+        {% endfor %}
+        {% if 'webm_video' in media.media_files %}
+        {% endif %}
+    </ul>
 {% endblock %}