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

.bowerrc

@@ -1,3 +0,0 @@
-{"directory": "extlib/",
- "analytics": false
-}

.builds/debian-10-sqlite.yml

@@ -2,8 +2,6 @@ image: debian/buster
 packages:
   # Install bootstrap and configure dependencies.
   - automake
-  - nodejs
-  - npm
   - python3-dev
   - virtualenv
 

.builds/debian-11-sqlite.yml

@@ -2,8 +2,6 @@ image: debian/bullseye
 packages:
   # Install bootstrap and configure dependencies.
   - automake
-  - nodejs
-  - npm
   - python3-dev
   - virtualenv
 
@@ -71,4 +69,3 @@ tasks:
 
       # Build the documentation.
       cd docs && make html
-

.builds/fedora-33-sqlite.yml

@@ -4,11 +4,9 @@ packages:
   - automake
   # - gcc
   # - make
-  - nodejs
-  - npm
   - python3-devel
   - virtualenv
-  
+
   # Install make and runtime dependencies.
   # - findutils
   - python3-lxml
@@ -34,7 +32,7 @@ packages:
   - python3-gobject
   - python3-gstreamer1
   -  gstreamer1-plugin-openh264
-  
+
   # # Install raw image dependencies.
   # - libexiv2-dev
   # - libboost-python-dev
@@ -47,7 +45,7 @@ packages:
 
   # Install OpenID dependencies.
   - python3-openid
-  
+
 tasks:
   - core: |
       cd mediagoblin

.builds/ubuntu-20.04.yml

@@ -2,8 +2,6 @@ image: ubuntu/20.04
 packages:
   # Install bootstrap and configure dependencies.
   - automake
-  - nodejs
-  - npm
   - python3-dev
   - virtualenv
 
@@ -69,4 +67,3 @@ tasks:
 
       # Build the documentation.
       cd docs && make html
-

.dockerignore

@@ -5,7 +5,6 @@
 bin
 lib
 lib64
-node_modules
 user_dev
 .tox
 dist

.gitignore

@@ -29,7 +29,6 @@
 /.eggs/
 /env
 /mediagoblin.ini
-/node_modules/
 /pip-selfcheck.json
 
 # pyconfigure/automake generated files
@@ -62,8 +61,6 @@ venv*
 # extlib things
 /extlib/jquery/
 /extlib/leaflet/
-/extlib/video.js/
-/extlib/videojs-resolution-switcher
 
 # Mac files
 .DS_Store

.gitmodules

@@ -1,9 +1,15 @@
+[submodule "extlib/jquery"]
+	path = extlib/jquery
+	url = https://github.com/jquery/jquery
+[submodule "extlib/leaflet"]
+	path = extlib/leaflet
+	url = https://github.com/Leaflet/Leaflet
 [submodule "extlib/pdf.js"]
 	path = extlib/pdf.js
 	url = https://github.com/mozilla/pdf.js.git
-[submodule "extlib/skeleton"]
-	path = extlib/skeleton
-	url = https://github.com/dhg/Skeleton.git
 [submodule "extlib/sandyseventiesspeedboat"]
 	path = extlib/sandyseventiesspeedboat
 	url = https://github.com/jpope777/sandyseventiesspeedboat-mg.git
+[submodule "extlib/skeleton"]
+	path = extlib/skeleton
+	url = https://github.com/dhg/Skeleton.git

Dockerfile-debian-11-sqlite

@@ -59,8 +59,6 @@ FROM debian:bullseye
 RUN apt-get update && apt-get install -y \
 automake \
 git \
-nodejs \
-npm \
 python3-dev \
 virtualenv
 

Dockerfile-fedora-33-sqlite

@@ -15,8 +15,6 @@ automake \
 gcc \
 git-core \
 make \
-nodejs \
-npm \
 python3-devel \
 virtualenv
 

MANIFEST.in

@@ -23,5 +23,4 @@ include COPYING AUTHORS
 include lazyserver.sh lazystarter.sh lazycelery.sh runtests.sh
 include configure.ac configure install-sh
 include Makefile.in
-include bower.json
 include mediagoblin/static/metadata/rdfa11.jsonld

Makefile.in

@@ -9,11 +9,11 @@
 # without any warranty.
 
 # List whatever files you want to include in your source distribution here.
-# You can include whole directories but note that *everything* under that 
+# You can include whole directories but note that *everything* under that
 # directory will be included
 DISTFILES = PKG-INFO Makefile.in configure setup.py install-sh
 
-DESTDIR = 
+DESTDIR =
 VPATH = @srcdir@
 PACKAGE_BUGREPORT = @PACKAGE_BUGREPORT@
 PACKAGE_NAME = @PACKAGE_NAME@
@@ -46,7 +46,7 @@ pkgdatadir = $(datadir)/@PACKAGE_NAME@
 pkgincludedir = $(includedir)/@PACKAGE_NAME@
 PYTHONPATH = $(pythondir)$(PATH_SEPARATOR)$(DESTDIR)$(pythondir)
 
-EXTLIB_INSTALLS = extlib/jquery extlib/video.js extlib/leaflet
+EXTLIB_INSTALLS = extlib/jquery extlib/leaflet
 
 # pkgpythondir = @pkgpythondir@
 # pkgpyexecdir = @pkgpyexecdir@
@@ -75,14 +75,14 @@ else
 maybe_venved =
 maybe_venved_python = $(PYTHON)
 # No need for commands to build virtualenv as a dependency!
-maybe_venv_dep = 
+maybe_venv_dep =
 # Nor to clean up!
-maybe_venv_clean = 
+maybe_venv_clean =
 endif
 
 .PHONY: all install uninstall distclean info install-html html \
 install-pdf pdf install-dvi dvi install-ps ps clean dist check \
-installdirs i18n virtualenv docs extlib
+installdirs i18n virtualenv docs
 
 # update postgresql
 
@@ -95,11 +95,6 @@ else
 	cd docs && make html
 endif
 
-# In the future we may provide more options than just npm/bower here
-# eg, we may support guix updating.
-extlib:
-	./devtools/update_extlib.sh
-
 develop: $(maybe_venv_dep) i18n mediagoblin.ini
 
 # NEVER clobber a user's mediagoblin.ini once they've defined it
@@ -131,16 +126,16 @@ clean-virtualenv:
 	rm -rf ./include/
 endif
 
-# setup.py doesn't (yet) support an uninstall command, so until it does, you 
+# setup.py doesn't (yet) support an uninstall command, so until it does, you
 # must manually remove everything that was installed here. The following example
-# should remove a basic package installed via setup.py, but please double- and 
+# should remove a basic package installed via setup.py, but please double- and
 # triple-check it so that you don't remove something you shouldn't!
 # Be sure to remove any extra files you install, such as binaries or documentation!
-# 
-# uninstall: 
+#
+# uninstall:
 # 	rm -rvf $(pkgpythondir)
 # 	rm -v $(pythondir)/$(PACKAGE_DISTNAME)-*.egg-info
-# 
+#
 
 # We don't know what this does yet.
 # Originally:
@@ -163,7 +158,6 @@ distclean: $(maybe_venv_clean)
 	rm -rvf $(srcdir)/autom4te.cache
 	rm -vf $(srcdir)/aclocal.m4
 	rm -rf $(EXTLIB_INSTALLS)
-	rm -rf node_modules
 	rm -vf $(srcdir)/Makefile
 
 check:

bower.json

@@ -1,20 +0,0 @@
-{
-  "name": "mediagoblin-extlib",
-  "description": "External libraries used by GNU MediaGoblin",
-  "author": "MediaGoblin team <devel@mediagoblin.org>",
-  "private": true,
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "extlib/",
-    "test",
-    "tests"
-  ],
-  "dependencies": {
-    "jquery": "~2.1.3",
-    "video.js": "~5.20.1",
-    "videojs-resolution-switcher": "~0.4.2",
-    "leaflet": "~0.7.3"
-  }
-}

devtools/update_extlib.sh

@@ -1,41 +0,0 @@
-#!/bin/sh
-
-# GNU MediaGoblin -- federated, autonomous media hosting
-# Copyright (C) 2015 GNU MediaGoblin Contributors.  See AUTHORS.
-#
-# This program is free software: you can redistribute it and/or modify
-# it under the terms of the GNU Affero General Public License as published by
-# the Free Software Foundation, either version 3 of the License, or
-# (at your option) any later version.
-#
-# This program is distributed in the hope that it will be useful,
-# but WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-# GNU Affero General Public License for more details.
-#
-# You should have received a copy of the GNU Affero General Public License
-# along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-
-set -e
-
-# Make sure we have npm available
-
-if ! which npm > /dev/null 2>&1; then
-    echo "Can't find npm, no way to install extlib :(";
-    exit 1;
-fi
-
-# Install bower if need be
-if which bower > /dev/null 2>&1; then
-    BOWER=`which bower`;
-elif [ -f ./node_modules/.bin/bower ]; then
-    BOWER="./node_modules/.bin/bower";
-else
-    echo "Bower not found, installing via npm!";
-    npm install bower;
-    BOWER="./node_modules/.bin/bower";
-fi
-
-# Do package/file installs
-$BOWER install

docs/source/siteadmin/deploying.rst

@@ -42,10 +42,10 @@ alternative deployment options.
     Throughout the documentation we use the ``sudo`` command to indicate that
     an instruction requires elevated user privileges to run. You can issue
     these commands as the ``root`` user if you prefer.
-    
+
     If you need help configuring ``sudo``, see the
     `Debian wiki <https://wiki.debian.org/sudo/>`_ or the
-    `Fedora Project wiki <https://fedoraproject.org/wiki/Configuring_Sudo/>`_. 
+    `Fedora Project wiki <https://fedoraproject.org/wiki/Configuring_Sudo/>`_.
 
 
 Prepare System
@@ -63,7 +63,6 @@ MediaGoblin has the following core dependencies:
 - `Python Imaging Library <http://www.pythonware.com/products/pil/>`_
   (PIL or Pillow)
 - `virtualenv <http://www.virtualenv.org/>`_
-- `Node.js <https://nodejs.org>`_
 
 These instructions have been tested on Debian 11 and Fedora 33. These
 instructions should approximately translate to recent Debian
@@ -76,11 +75,11 @@ Issue the following commands:
 
     # Debian 11
     sudo apt update
-    sudo apt install automake git nodejs npm python3-dev \
+    sudo apt install automake git python3-dev \
     python3-gst-1.0 python3-lxml python3-pil virtualenv
 
     # Fedora 33
-    sudo dnf install automake gcc git-core make nodejs npm \
+    sudo dnf install automake gcc git-core make \
     libffi-devel python3-devel python3-lxml python3-pillow \
     virtualenv
 
@@ -169,7 +168,7 @@ MediaGoblin does not require special permissions or elevated
 access to run. As such, the preferred way to run MediaGoblin is to
 create a dedicated, unprivileged system user for the sole purpose of running
 MediaGoblin. Running MediaGoblin processes under an unprivileged system user
-helps to keep it more secure. 
+helps to keep it more secure.
 
 The following command will create a system account with a username of
 ``mediagoblin``.
@@ -191,10 +190,10 @@ read the media files that users upload (images, videos, etc.)
 Many operating systems will automatically create a group
 ``mediagoblin`` to go with the new user ``mediagoblin``, but just to
 be sure::
-  
+
     sudo groupadd --force mediagoblin
     sudo usermod --append --groups mediagoblin mediagoblin
-       
+
 No password will be assigned to this account, and you will not be able
 to log in as this user. To switch to this account, enter::
 
@@ -209,7 +208,7 @@ Create a MediaGoblin Directory
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 You should create a working directory for MediaGoblin. This document
-assumes your local git repository will be located at 
+assumes your local git repository will be located at
 ``/srv/mediagoblin.example.org/mediagoblin/``.
 Substitute your preferred local deployment path as needed.
 
@@ -489,7 +488,7 @@ created::
     sudo find /opt/mediagoblin.example.org/mediagoblin/bin -type f -exec chmod 750 {} \;
 
 .. note::
-   
+
    If you see an Nginx placeholder page, you may need to remove the
    Nginx default configuration, or explictly set a ``server_name``
    directive in the Nginx config.

extlib/jquery

@@ -0,0 +1 @@
+Subproject commit 683ceb8ff067ac53a7cb464ba1ec3f88e353e3f5

extlib/leaflet

@@ -0,0 +1 @@
+Subproject commit 8a5fdfc6e3db2807b8f0dd617474e4ab2949142b

extlib/plyr/build-instructions.md

@@ -0,0 +1,23 @@
+# Build steps for Plyr (3.6.8)
+
+Tested on Hyperbola GNU with Linux-libre.
+
+First install npm (node package manager).
+
+Clone the repo to a location of your choosing:
+```
+git clone https://git.sr.ht/~heckyel/plyr
+cd plyr
+```
+
+Install Plyr's dependencies:
+```
+npm install
+```
+
+Build with npm:
+```
+npm run build
+```
+
+plyr.js and other files will be in the `dist` directory.

guix-env.scm

@@ -52,12 +52,6 @@
 ;;;   ./configure --without-virtualenv
 ;;;   make
 ;;;
-;;; The devtools/update_extlib.sh script won't run on Guix due to missing
-;;; "/usr/bin/env", so again for first time setup only, run:
-;;;
-;;;   node node_modules/.bin/bower install
-;;;   ./devtools/update_extlib.sh
-;;;
 ;;; For first time setup only with a regular `guix environment` or an
 ;;; `environment --pure`, but required EACH TIME you start an `environment
 ;;; --container` (because the generated profile goes away, breaking the links in

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>

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>

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>

mediagoblin/static/extlib/leaflet

@@ -1 +1 @@
-../../../extlib/leaflet/dist/
+../../../extlib/leaflet/dist

mediagoblin/static/extlib/plyr

@@ -0,0 +1 @@
+../../../extlib/plyr

mediagoblin/static/extlib/skeleton

@@ -1 +1 @@
-../../../extlib/skeleton/
+../../../extlib/skeleton

mediagoblin/static/extlib/video-js

@@ -1 +0,0 @@
-../../../extlib/video.js/dist/

mediagoblin/static/extlib/videojs-resolution-switcher

@@ -1 +0,0 @@
-../../../extlib/videojs-resolution-switcher/lib/

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 %}