Skip to content

Commit

Permalink
Merge pull request #104 from fluid-player/FEATURE-3370
Browse files Browse the repository at this point in the history 
Theater mode, download & playback rate
  • Loading branch information
@golikov
golikov committed Mar 28, 2018
2 parents 9a99cb3 + 98d44e4 commit bde2d0e
Show file tree
Hide file tree
Showing 2 changed files with 178 additions and 5 deletions.
55 changes: 50 additions & 5 deletions fluidplayer.css
View file
Expand Up @@ -719,7 +719,8 @@ _:-ms-lang(x),
line-height: 15px;
}

.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_controls_right .fluid_button_video_source .fluid_video_sources_list .fluid_video_source_list_item:hover {
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_controls_right .fluid_button_video_source .fluid_video_sources_list .fluid_video_source_list_item:hover,
.fluid_video_playback_rates_item:hover {
background-color: #3a3a3a;
}

Expand All @@ -741,7 +742,10 @@ _:-ms-lang(x),
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_mute,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_video_source,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_fullscreen,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_fullscreen_exit {
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_fullscreen_exit,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_playback_rate,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_download,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_theatre {
display: inline-block;
text-align: left;
height: 24px;
Expand All @@ -755,12 +759,15 @@ _:-ms-lang(x),
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_mute:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_video_source:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_fullscreen:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_fullscreen_exit:before {
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_fullscreen_exit:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_playback_rate:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_download:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_theatre:before {
background: url('images/fluid_icons.svg') no-repeat;
position: absolute;
height: 24px;
width: 24px;
top: 2px;
top: 1px;
left: 5px;
content: "";
opacity: 0.8;
Expand Down Expand Up @@ -799,13 +806,29 @@ _:-ms-lang(x),
background-position: -122px -19px;
}

.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_playback_rate:before {
background-position: -232px -19px;
}

.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_download:before {
background-position: -194px -18px;
}

.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_theatre:before {
background-position: -195px -56px;
}


.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_video_source:hover:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_fullscreen_exit:hover:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_fullscreen:hover:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_mute:hover:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_volume:hover:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_pause:hover:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_play:hover:before {
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_play:hover:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_playback_rate:hover:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_download:hover:before,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_theatre:hover:before {
opacity: 1;
}

Expand Down Expand Up @@ -878,6 +901,28 @@ _:-ms-lang(x),
transform: translate(-50%);
}

.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_theatre,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_playback_rate,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_video_source,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_download {
float:right;
padding-right:5px;
}

.fluid_video_playback_rates_item {
padding: 9px 25px 9px 25px;
line-height: 15px;
text-align: center;
}

.fluid_theatre_mode {
position: absolute;
float: left;
left: 0;
z-index: 10;
box-shadow: 0px 15px 25px rgba(0,0,0,0.8);
}

.source_button_icon {
background: url('images/fluid_icons.svg') no-repeat;
float: left;
Expand Down
128 changes: 128 additions & 0 deletions fluidplayer.js
View file
Expand Up @@ -1630,7 +1630,10 @@ var fluidPlayerClass = {
'</div>' +
'<div class="fluid_controls_right">' +
' <div id="' + this.videoPlayerId + '_fluid_control_fullscreen" class="fluid_button fluid_button_fullscreen"></div>' +
' <div id="' + this.videoPlayerId + '_fluid_control_theatre" class="fluid_button fluid_button_theatre"></div>' +
' <div id="' + this.videoPlayerId + '_fluid_control_video_source" class="fluid_button fluid_button_video_source"></div>' +
' <div id="' + this.videoPlayerId + '_fluid_control_playback_rate" class="fluid_button fluid_button_playback_rate"></div>' +
' <div id="' + this.videoPlayerId + '_fluid_control_download" class="fluid_button fluid_button_download"></div>' +
' <div id="' + this.videoPlayerId + '_fluid_control_volume_container" class="fluid_control_volume_container fluid_slider">' +
' <div id="' + this.videoPlayerId + '_fluid_control_volume" class="fluid_control_volume">' +
' <div id="' + this.videoPlayerId + '_fluid_control_currentvolume" class="fluid_control_currentvolume">' +
Expand Down Expand Up @@ -2441,6 +2444,15 @@ var fluidPlayerClass = {
document.getElementById(player.videoPlayerId + '_fluid_control_fullscreen').addEventListener('click', function(){
player.fullscreenToggle(player.videoPlayerId);
});

// Theatre mode
if (player.displayOptions.layoutControls.allowTheatre) {
document.getElementById(player.videoPlayerId + '_fluid_control_theatre').addEventListener('click', function () {
player.theatreToggle(player.videoPlayerId);
});
} else {
document.getElementById(player.videoPlayerId + '_fluid_control_theatre').style.display = 'none';
}
},

// Create the time position preview only if the vtt previews aren't enabled
Expand Down Expand Up @@ -2616,6 +2628,10 @@ var fluidPlayerClass = {
player.createTimePositionPreview();

player.initPlayButton();

player.createPlaybackList();

player.createDownload();
},

/**
Expand Down Expand Up @@ -3283,6 +3299,107 @@ var fluidPlayerClass = {
var progressInterval = setInterval(logProgress, 500);
},

createPlaybackList: function() {
var player = this;
var playbackRates = ['x2', 'x1.5', 'x1', 'x0.5'];

if (player.displayOptions.layoutControls.playbackRateEnabled) {
var sourceChangeButton = document.getElementById(player.videoPlayerId + '_fluid_control_playback_rate');

var sourceChangeList = document.createElement('div');
sourceChangeList.id = player.videoPlayerId + '_fluid_control_video_playback_rate';
sourceChangeList.className = 'fluid_video_playback_rates';
sourceChangeList.style.display = 'none';

playbackRates.forEach(function(rate) {
var sourceChangeDiv = document.createElement('div');
sourceChangeDiv.className = 'fluid_video_playback_rates_item';
sourceChangeDiv.innerText = rate;

sourceChangeDiv.addEventListener('click', function(event) {
event.stopPropagation();
playbackRate = this.innerText.replace('x','');
player.setPlaybackSpeed(playbackRate);
player.openCloseVideoPlaybackRate();

});
sourceChangeList.appendChild(sourceChangeDiv);
});

sourceChangeButton.appendChild(sourceChangeList);
sourceChangeButton.addEventListener('click', function() {
player.openCloseVideoPlaybackRate();
});

} else {
// No other video sources
document.getElementById(player.videoPlayerId + '_fluid_control_playback_rate').style.display = 'none';
}
},

openCloseVideoPlaybackRate: function() {
var player = this;
var sourceChangeList = document.getElementById(this.videoPlayerId + '_fluid_control_video_playback_rate');
var sourceChangeListContainer = document.getElementById(this.videoPlayerId + '_fluid_control_playback_rate');

if (player.isCurrentlyPlayingAd) {
sourceChangeList.style.display = 'none';
return;
}

if (sourceChangeList.style.display == 'none') {
sourceChangeList.style.display = 'block';
var mouseOut = function() {
sourceChangeListContainer.removeEventListener('mouseleave', mouseOut);
sourceChangeList.style.display = 'none';
};
sourceChangeListContainer.addEventListener('mouseleave', mouseOut);
} else {
sourceChangeList.style.display = 'none';
}
},

createDownload: function() {
player = this;
var downloadOption = document.getElementById(this.videoPlayerId + '_fluid_control_download');
if (player.displayOptions.layoutControls.allowDownload) {
downloadClick = document.createElement('a');
downloadClick.id = this.videoPlayerId + '_download';
downloadOption.appendChild(downloadClick);

downloadOption.addEventListener('click', function() {
var downloadItem = document.getElementById(player.videoPlayerId + '_download');
downloadItem.download = player.originalSrc;
downloadItem.href = player.originalSrc;
downloadClick.click();
});
} else {
downloadOption.style.display = 'none';
}
},

theatreToggle: function() {
var downloadItem = document.getElementById('fluid_video_wrapper_' + this.videoPlayerId);
if (!player.theatreMode) {
downloadItem.classList.add('fluid_theatre_mode');
lessFullHeight = (screen.height / 100) * 75;
downloadItem.style.width = '100%';
downloadItem.style.height = "75%";
downloadItem.style.maxHeight = lessFullHeight + "px";
player.theatreMode = true;
} else {
downloadItem.classList.remove('fluid_theatre_mode');
if (!player.displayOptions.layoutControls.fillToContainer) {
downloadItem.style.width = player.originalWidth + 'px';
downloadItem.style.height = player.originalHeight + 'px';
} else {
downloadItem.style.width = '100%';
downloadItem.style.height = '100%';
}
player.theatreMode = false;
}
},

init: function(idVideoPlayer, options) {
var player = this;
var videoPlayer = document.getElementById(idVideoPlayer);
Expand Down Expand Up @@ -3320,6 +3437,9 @@ var fluidPlayerClass = {
player.nonLinearVerticalAlign = 'bottom';
player.showTimeOnHover = true;
player.initialAnimationSet = true;
player.theatreMode = false;
player.originalWidth = videoPlayer.offsetWidth;
player.originalHeight = videoPlayer.offsetHeight;

//Default options
player.displayOptions = {
Expand All @@ -3334,6 +3454,9 @@ var fluidPlayerClass = {
autoPlay: false,
mute: false,
keyboardControl: true,
allowDownload: false,
playbackRateEnabled: false,
allowTheatre: true,
logo: {
imageUrl: null,
position: 'top left',
Expand Down Expand Up @@ -3433,5 +3556,10 @@ var fluidPlayerClass = {
if (player.displayOptions.layoutControls.controlBar.autoHide) {
player.linkControlBarUserActivity();
}
},

setPlaybackSpeed: function(speed) {
var videoPlayer = document.getElementById(this.videoPlayerId);
videoPlayer.playbackRate = speed;
}
};

0 comments on commit bde2d0e

Please sign in to comment.