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

9 files changed, 229 insertions, 137 deletions

diff --git a/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_head.html b/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_head.html
index 495382f5..a984be58 100644
--- a/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_head.html
+++ b/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_head.html
@@ -1,23 +1,25 @@
-<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;
-  }
+<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>
diff --git a/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_primary.html b/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_primary.html
index 58d8c549..5de6a6cc 100644
--- a/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_primary.html
+++ b/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_primary.html
@@ -16,38 +16,68 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #}
 
-{% from "archivalook/utils/display_featured.html" import
-    possibly_shortened_description %}
+{% from "archivalook/utils/display_featured.html" import possibly_shortened_description %}
 
 {%- set media = feature.media_entry %}
 {%- set display_media = request.app.public_store.file_url(
-             media.get_display_media()[1]) %}
+    media.get_display_media()[1]) %}
 {%- set entry_url = media.url_for_self(request.urlgen) %}
 
 <div class="primary-feature">
-  <a href="{{ entry_url }}">
-    <p class="f-title">{{ media.title }}</p>
-  </a>
-  <div class="f-display">
-    {%- set display_type, display_path = media.get_display_media() %}
-    <video controls
-           {% if global_config['plugins']['mediagoblin.media_types.video']['auto_play'] %}autoplay{% endif %}
-           preload="metadata" class="video-js vjs-default-skin">
-      <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 %} />
-      <div class="no_html5">
-          {%- trans -%}Sorry, this video will not work because
-          your web browser does not support HTML5
-          video.{%- endtrans -%}<br/>
-          {%- trans -%}You can get a modern web browser that
-          can play this video at <a href="http://getfirefox.com">
-          http://getfirefox.com</a>!{%- endtrans -%}
-      </div>
-    </video>
-  </div>
-  {{ possibly_shortened_description(request, feature.media_entry) }}
+    <a href="{{ entry_url }}">
+        <p class="f-title">{{ media.title }}</p>
+    </a>
+    <div class="f-display" id="player">
+        {%- set display_type, display_path = media.get_display_media() %}
+        <video controls playsinline
+               {% if global_config['plugins']['mediagoblin.media_types.video']['auto_play'] %}autoplay{% endif %}
+               preload="metadata" id="js-video-player">
+            <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 %} />
+            <div class="no_html5">
+                {%- trans -%}Sorry, this video will not work because
+                your web browser does not support HTML5
+                video.{%- endtrans -%}<br/>
+                {%- trans -%}You can get a modern web browser that
+                can play this video at <a href="http://getfirefox.com">
+                http://getfirefox.com</a>!{%- endtrans -%}
+            </div>
+        </video>
+    </div>
+    {{ possibly_shortened_description(request, feature.media_entry) }}
 </div>
+
+<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>
diff --git a/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_secondary.html b/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_secondary.html
index 0d3a1adc..cb881b43 100644
--- a/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_secondary.html
+++ b/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_secondary.html
@@ -28,11 +28,11 @@
 {%- else -%}
 <div class="secondary-feature aligned-left">
 {%- endif %}
-  <div class="f-display">
+<div class="f-display" id="player">
     {%- set display_type, display_path = media.get_display_media() %}
-    <video controls
+    <video controls playsinline
            {% if global_config['plugins']['mediagoblin.media_types.video']['auto_play'] %}autoplay{% endif %}
-           preload="metadata" class="video-js vjs-default-skin">
+           preload="metadata" id="js-video-player">
       <source src="{{ request.app.public_store.file_url(display_path) }}"
               {% if media.media_data %}
                 type="{{ media.media_data.source_type() }}"
@@ -54,3 +54,35 @@
     <p class="f-title">{{ media.title }}</p>
   </a>
 </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>
diff --git a/mediagoblin/static/extlib/leaflet b/mediagoblin/static/extlib/leaflet
index b47e2b1b..8e6520e9 120000
--- a/mediagoblin/static/extlib/leaflet
+++ b/mediagoblin/static/extlib/leaflet
@@ -1 +1 @@
-../../../extlib/leaflet/dist/
\ No newline at end of file
+../../../extlib/leaflet/dist
\ No newline at end of file
diff --git a/mediagoblin/static/extlib/plyr b/mediagoblin/static/extlib/plyr
new file mode 120000
index 00000000..a1ed42f8
--- /dev/null
+++ b/mediagoblin/static/extlib/plyr
@@ -0,0 +1 @@
+../../../extlib/plyr
\ No newline at end of file
diff --git a/mediagoblin/static/extlib/skeleton b/mediagoblin/static/extlib/skeleton
index 737bfce4..c2da6713 120000
--- a/mediagoblin/static/extlib/skeleton
+++ b/mediagoblin/static/extlib/skeleton
@@ -1 +1 @@
-../../../extlib/skeleton/
\ No newline at end of file
+../../../extlib/skeleton
\ No newline at end of file
diff --git a/mediagoblin/static/extlib/video-js b/mediagoblin/static/extlib/video-js
deleted file mode 120000
index c13a7532..00000000
--- a/mediagoblin/static/extlib/video-js
+++ /dev/null
@@ -1 +0,0 @@
-../../../extlib/video.js/dist/
\ No newline at end of file
diff --git a/mediagoblin/static/extlib/videojs-resolution-switcher b/mediagoblin/static/extlib/videojs-resolution-switcher
deleted file mode 120000
index ace672d9..00000000
--- a/mediagoblin/static/extlib/videojs-resolution-switcher
+++ /dev/null
@@ -1 +0,0 @@
-../../../extlib/videojs-resolution-switcher/lib/
\ No newline at end of file
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 %}