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,8 +4,6 @@ packages:
   - automake
   # - gcc
   # - make
-  - nodejs
-  - npm
   - python3-devel
   - virtualenv
 

.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

@@ -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@
@@ -82,7 +82,7 @@ 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
@@ -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

@@ -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
 

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;
+<link href="{{ request.staticdirect('/extlib/plyr/plyr.css') }}" rel="stylesheet">
+<style>
+ video {
+     width: 100%;
  }
-  .vjs-play-progress, .vjs-volume-level {
-    background-color: #86D4B1 !important;
+ .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,8 +16,7 @@
 # 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(
@@ -28,11 +27,11 @@
     <a href="{{ entry_url }}">
         <p class="f-title">{{ media.title }}</p>
     </a>
-  <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() }}"
@@ -51,3 +50,34 @@
     </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

@@ -20,43 +20,40 @@
 
 {% 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;
+    <link href="{{ request.staticdirect('/extlib/plyr/plyr.css') }}" rel="stylesheet">
+    <style>
+     video {
+         width: 100%;
      }
-    .vjs-play-progress, .vjs-volume-level {
-      background-color: #86D4B1 !important;
+     .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">
+    <div class="media_other_container" id="player">
         {% set all_media_path = media.get_all_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" id="video_1">
+               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 %}
@@ -64,7 +61,7 @@
                         {% else %}
                         type="{{ media.media_manager['default_webm_type'] }}"
                         {% endif %}
-            label="{{ each_media_path[0] }}" res="{{ each_media_path[1][1] }}" />
+                        data-res="{{ each_media_path[1][1] }}" />
             {% endfor %}
             {%- for subtitle in media.subtitle_files %}
                 <track src="{{ request.app.public_store.file_url(subtitle.filepath) }}"
@@ -80,6 +77,38 @@
             </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 %}
@@ -88,7 +117,7 @@
         {% if 'original' in media.media_files %}
             <li>
                 <a href="{{ request.app.public_store.file_url(
-                       media.media_files.original) }}">
+                         media.media_files.original) }}" download>
                     {%- trans %}Original file{% endtrans -%}
                 </a>
             </li>
@@ -97,7 +126,7 @@
         {% for name, media in media.media_files|dictsort|list %}
             {% if name.startswith('webm') %}
                 <li>
-          <a href="{{ request.app.public_store.file_url(media) }}">
+                    <a href="{{ request.app.public_store.file_url(media) }}" download>
                         {%- trans %}WebM file (VP8/Vorbis){% endtrans -%}
                         {{ name | replace('webm_', ' ') }}
                     </a>