diff options
Diffstat (limited to 'mediagoblin/plugins')
3 files changed, 117 insertions, 53 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> |