From 1079d1cee4a1389a6b697ae7e08a1c6835adcd52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs?= <heckyel@hyperbola.info>
Date: Mon, 28 Feb 2022 07:51:38 +0800
Subject: Add plyr as player default and remove NodeJS, npm and videojs

---
 .../archivalook/feature_displays/video_head.html   | 46 ++++++------
 .../feature_displays/video_primary.html            | 86 +++++++++++++++-------
 .../feature_displays/video_secondary.html          | 38 +++++++++-
 3 files changed, 117 insertions(+), 53 deletions(-)

(limited to 'mediagoblin/plugins/archivalook/templates')

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>
-- 
cgit v1.2.3