archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Videoplayer small improvements

Browse Source 
* Disable volume change on scroll
* Add L key shortcut to toggle loop
* Minor style fixes (missing font family)
This commit is contained in:
Pablo Vazquez 2018-09-07 11:49:22 +02:00
parent 9bcd6cec89
commit 95c1f913c6
2 changed files with 61 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/styles/plugins/_videoplayer.sass
View File

@ -1,5 +1,5 @@
$videoplayer-controls-color: white $videoplayer-controls-color: white
$videoplayer-background-color: $black $videoplayer-background-color: darken($primary, 10%)
.video-js .video-js
.vjs-big-play-button:before, .vjs-control:before, .vjs-modal-dialog .vjs-big-play-button:before, .vjs-control:before, .vjs-modal-dialog
@ -30,7 +30,6 @@ $videoplayer-background-color: $black
font-weight: normal font-weight: normal
font-style: normal font-style: normal
.vjs-icon-play .vjs-icon-play
font-family: VideoJS font-family: VideoJS
font-weight: normal font-weight: normal
@ -285,7 +284,6 @@ $videoplayer-background-color: $black
line-height: 1 line-height: 1
font-weight: normal font-weight: normal
font-style: normal font-style: normal
font-family: Arial, Helvetica, sans-serif
-webkit-user-select: none -webkit-user-select: none
-moz-user-select: none -moz-user-select: none
-ms-user-select: none -ms-user-select: none
@ -712,8 +710,8 @@ body.vjs-full-window
z-index: 1 z-index: 1
.vjs-time-tooltip .vjs-time-tooltip
background-color: $videoplayer-background-color
color: $videoplayer-controls-color color: $videoplayer-controls-color
background-color: $videoplayer-background-color
z-index: 1 z-index: 1
&:after &:after
@ -735,9 +733,9 @@ body.vjs-full-window
.vjs-time-tooltip .vjs-time-tooltip
background-color: $videoplayer-controls-color background-color: $videoplayer-controls-color
border-radius: 3px border-radius: $border-radius
color: $videoplayer-background-color color: $videoplayer-background-color
font-family: $font-body font-family: $font-family-base
font-size: 1.2em font-size: 1.2em
font-weight: bold font-weight: bold
padding: 5px 8px padding: 5px 8px
@ -1041,7 +1039,6 @@ video::-webkit-media-text-track-display
&:before &:before
color: $videoplayer-controls-color color: $videoplayer-controls-color
content: 'X' content: 'X'
font-family: Arial, Helvetica, sans-serif
font-size: 4em font-size: 4em
left: 0 left: 0
line-height: 1 line-height: 1

49
src/templates/nodes/custom/asset/video/view_embed.pug
View File

@ -52,7 +52,6 @@ script(type="text/javascript").
{% if node.video_sources %} {% if node.video_sources %}
var videoPlayer = document.getElementById('videoplayer'); var videoPlayer = document.getElementById('videoplayer');
var options = { var options = {
controlBar: { controlBar: {
volumePanel: { inline: false } volumePanel: { inline: false }
@ -65,19 +64,22 @@ script(type="text/javascript").
'eventCategory' : '{{ node.project }}', 'eventCategory' : '{{ node.project }}',
'eventsToTrack' : ['start', 'error', 'percentsPlayed'] 'eventsToTrack' : ['start', 'error', 'percentsPlayed']
}); });
this.hotkeys();
this.rememberVolumePlugin();
{% if current_user.is_authenticated %} this.hotkeys({
let fetch_progress_url = '{{ url_for("users_api.get_video_progress", video_id=node._id) }}'; enableVolumeScroll: false,
let report_url = '{{ url_for("users_api.set_video_progress", video_id=node._id) }}'; customKeys: {
this.progressPlugin({ KeyL: {
'report_url': report_url, key: function(event) {
'fetch_progress_url': fetch_progress_url, return (event.which === 76);
}); },
{% endif %} handler: function(player, options, event) {
videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton);
}
}
}
}); });
// Generic utility to add-buttons to the player.
function addVideoPlayerButton(data) { function addVideoPlayerButton(data) {
var controlBar, var controlBar,
@ -96,6 +98,7 @@ script(type="text/javascript").
return newButton; return newButton;
} }
// Video loop stuff. TODO: Move it to video_plugins.js
var videoPlayerLoopButton = addVideoPlayerButton({ var videoPlayerLoopButton = addVideoPlayerButton({
player: videoPlayer, player: videoPlayer,
class: 'vjs-loop-button', class: 'vjs-loop-button',
@ -103,17 +106,33 @@ script(type="text/javascript").
title: 'Loop' title: 'Loop'
}); });
videoPlayerLoopButton.onclick = function() { function videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton) {
if (videoPlayer.loop){ if (videoPlayer.loop){
videoPlayer.loop = false; videoPlayer.loop = false;
$(this).removeClass('vjs-control-active'); $(videoPlayerLoopButton).removeClass('vjs-control-active');
} else { } else {
videoPlayer.loop = true; videoPlayer.loop = true;
$(this).addClass('vjs-control-active'); $(videoPlayerLoopButton).addClass('vjs-control-active');
} }
}
videoPlayerLoopButton.onclick = function() {
videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton);
}; };
this.rememberVolumePlugin();
{% if current_user.is_authenticated %}
let fetch_progress_url = '{{ url_for("users_api.get_video_progress", video_id=node._id) }}';
let report_url = '{{ url_for("users_api.set_video_progress", video_id=node._id) }}';
this.progressPlugin({
'report_url': report_url,
'fetch_progress_url': fetch_progress_url,
});
{% endif %}
});
{% endif %} // if node.video_sources {% endif %} // if node.video_sources
| {% endblock node_scripts %} | {% endblock node_scripts %}