heckyel/mediagoblin
0
0
Fork 0
Code Issues Pull Requests Releases Activity

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

Browse Source
This commit is contained in:
Jesús
2022-02-28 07:51:38 +08:00
parent 958aea0821
commit 1079d1cee4
43 changed files with 36068 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_head.html
View File

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

86
mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_primary.html
View File

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

38
mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_secondary.html
View File

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

2
mediagoblin/static/extlib/leaflet
View File

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

1
mediagoblin/static/extlib/plyr Symbolic link
View File

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

2
mediagoblin/static/extlib/skeleton
View File

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

1
mediagoblin/static/extlib/video-js
View File

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

1
mediagoblin/static/extlib/videojs-resolution-switcher
View File

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

189
mediagoblin/templates/mediagoblin/media_displays/video.html
View File

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