Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fine grain control of when to show the range.

Browse Source 
Also moved all static styling to SCSS.
This commit is contained in:
Valera Rozuvan
2013-10-18 12:49:06 +03:00
parent d0fbd502fb
commit 0d580d009a
2 changed files with 61 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
common/lib/xmodule/xmodule/css/video/display.scss
View File

@@ -139,6 +139,24 @@ div.video {
box-shadow: inset 0 1px 0 #999;
}
div.ui-corner-all.slider-range {
background-color: #1e91d3;
/* We add opacity so that we can discern the amount of video that has
* been played. The progress will advance as a gray-shaded area. When
* it will overlap with the range, you will see a different shade of
* the range for part that has been played, and for part that is
* still to be played.
*
* For CSS opacity, different browsers are handled differently.
*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
a.ui-slider-handle {
background: $pink url(../images/slider-handle.png) center center no-repeat;
background-size: 50%;

73
common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js
View File

@@ -86,8 +86,6 @@ function () {
// ***************************************************************
function buildSlider(state) {
console.log('state = ', state);
state.videoProgressSlider.slider = state.videoProgressSlider.el
.slider({
range: 'min',
@@ -101,37 +99,52 @@ function () {
}
function updateStartEndTimeRegion(params) {
var left, width;
var left, width, start, end;
if (this.config.end && params.duration) {
left = parseInt(100 * (this.config.start / params.duration), 10);
width = parseInt(
100 * (
(this.config.end - this.config.start) / params.duration
),
10
);
// We must have a duration in order to determine the area of range.
// It also must be non-zero.
if (!params.duration) {
return;
}
if (!this.videoProgressSlider.sliderRange) {
this.videoProgressSlider.sliderRange = $('<div />')
.addClass('ui-slider-range')
.addClass('ui-widget-header')
.addClass('ui-corner-all')
.css({
left: left + '%',
width: width + '%',
'background-color': 'blue'
});
// If the range spans the entire length of video, we don't do anything.
if (!this.config.start && !this.config.end) {
return;
}
this.videoProgressSlider.sliderProgress
.after(this.videoProgressSlider.sliderRange);
} else {
this.videoProgressSlider.sliderRange
.css({
left: left + '%',
width: width + '%'
});
}
start = this.config.start;
// If end is set to null, then we set it to the end of the video. We
// know that start is not a the beginning, therefore we must build a
// range.
if (!this.config.end) {
end = params.duration;
} else {
end = this.config.end;
}
left = parseInt(100 * (start / params.duration), 10);
width = parseInt(100 * ((end - start) / params.duration), 10);
if (!this.videoProgressSlider.sliderRange) {
this.videoProgressSlider.sliderRange = $('<div />')
.addClass('ui-slider-range')
.addClass('ui-widget-header')
.addClass('ui-corner-all')
.addClass('slider-range')
.css({
left: left + '%',
width: width + '%'
});
this.videoProgressSlider.sliderProgress
.after(this.videoProgressSlider.sliderRange);
} else {
this.videoProgressSlider.sliderRange
.css({
left: left + '%',
width: width + '%'
});
}
}