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-background-color: $black
$videoplayer-background-color: darken($primary, 10%)
.video-js
.vjs-big-play-button:before, .vjs-control:before, .vjs-modal-dialog
@ -30,7 +30,6 @@ $videoplayer-background-color: $black
font-weight: normal
font-style: normal
.vjs-icon-play
font-family: VideoJS
font-weight: normal
@ -285,7 +284,6 @@ $videoplayer-background-color: $black
line-height: 1
font-weight: normal
font-style: normal
font-family: Arial, Helvetica, sans-serif
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
@ -712,8 +710,8 @@ body.vjs-full-window
z-index: 1
.vjs-time-tooltip
background-color: $videoplayer-background-color
color: $videoplayer-controls-color
background-color: $videoplayer-background-color
z-index: 1
&:after
@ -735,9 +733,9 @@ body.vjs-full-window
.vjs-time-tooltip
background-color: $videoplayer-controls-color
border-radius: 3px
border-radius: $border-radius
color: $videoplayer-background-color
font-family: $font-body
font-family: $font-family-base
font-size: 1.2em
font-weight: bold
padding: 5px 8px
@ -1041,7 +1039,6 @@ video::-webkit-media-text-track-display
&:before
color: $videoplayer-controls-color
content: 'X'
font-family: Arial, Helvetica, sans-serif
font-size: 4em
left: 0
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 %}
var videoPlayer = document.getElementById('videoplayer');
var options = {
controlBar: {
volumePanel: { inline: false }
@ -65,19 +64,22 @@ script(type="text/javascript").
'eventCategory' : '{{ node.project }}',
'eventsToTrack' : ['start', 'error', 'percentsPlayed']
});
this.hotkeys();
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 %}
this.hotkeys({
enableVolumeScroll: false,
customKeys: {
KeyL: {
key: function(event) {
return (event.which === 76);
},
handler: function(player, options, event) {
videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton);
}
}
}
});
// Generic utility to add-buttons to the player.
function addVideoPlayerButton(data) {
var controlBar,
@ -96,6 +98,7 @@ script(type="text/javascript").
return newButton;
}
// Video loop stuff. TODO: Move it to video_plugins.js
var videoPlayerLoopButton = addVideoPlayerButton({
player: videoPlayer,
class: 'vjs-loop-button',
@ -103,17 +106,33 @@ script(type="text/javascript").
title: 'Loop'
});
videoPlayerLoopButton.onclick = function() {
function videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton) {
if (videoPlayer.loop){
videoPlayer.loop = false;
$(this).removeClass('vjs-control-active');
$(videoPlayerLoopButton).removeClass('vjs-control-active');
} else {
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
| {% endblock node_scripts %}