Skip to content

E
edx-platform
Commit c8a436eb by Reda Lemeden
Options

Merge pull request #6 from MITx/kf-captions 

Added some styles to make videos more cohesive
parents ceb8d4bf 34627fb0
Showing with 214 additions and 33 deletions
static/js/video_player.js
......@@ -352,6 +352,8 @@ function updateytplayerInfo() {
}
if (player_state == 1){
update_captions(getCurrentTime());
handle = $('.ui-slider-handle', $('#slider'));
handle.qtip('option', 'content.text', '' + format_time(getCurrentTime()));
}
// updateHTML("videoduration", getDuration());
// updateHTML("videotime", getCurrentTime());
......@@ -420,7 +422,7 @@ function stop() {
function getPlayerState() {
if (ytplayer) {
return ytplayer.getPlayerState();
return ytplayer.getPlayerState();
}
}
......
templates/main.html
......@@ -107,6 +107,7 @@
<script type="text/javascript" src="${ settings.LIB_URL }jquery.treeview.js"></script>
<script type="text/javascript" src="/static/js/jquery.leanModal.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.qtip.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/js/video_player.js"></script>
<script type="text/javascript" src="/static/js/schematic.js"></script>
......
templates/sass/application.scss
......@@ -4,7 +4,7 @@
@import "base/reset", "base/font-face";
@import "base/variables", "base/functions", "base/extends", "base/base";
@import "layout/layout", "layout/header", "layout/footer", "layout/calculator", "layout/leanmodal";
@import "plugins/jquery-ui-1.8.16.custom";
@import "plugins/jquery-ui-1.8.16.custom", "plugins/jquery.qtip.min";
// pages
@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier";
......
templates/sass/courseware/_courseware.scss
......@@ -175,6 +175,7 @@ div.course-wrapper {
}
div.staff_info {
@include clearfix();
white-space: pre-wrap;
border-top: 1px solid #ccc;
padding-top: lh();
......
templates/sass/courseware/_video.scss
section.course-content {
div.video-subtitles {
padding: 6px lh();
margin: 0 (-(lh()));
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
background: #f3f3f3;
position: relative;
@include clearfix();
div.video-wrapper {
float: left;
......@@ -56,6 +62,7 @@ section.course-content {
background: #333;
position: relative;
border: 1px solid #000;
border-top: 0;
color: #ccc;
div#slider {
......@@ -64,25 +71,77 @@ section.course-content {
@include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
background: #c2c2c2;
border: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
height: 14px;
height: 7px;
@include transition();
div.ui-widget-header {
background: #777;
@include box-shadow(inset 0 1px 0 #999);
}
.ui-tooltip.qtip .ui-tooltip-content {
background: $mit-red;
border: 1px solid darken($mit-red, 20%);
@include border-radius(2px);
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
color: #fff;
font: bold 12px $body-font-family;
margin-bottom: 6px;
padding: 4px;
text-align: center;
-webkit-font-smoothing: antialiased;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
overflow: visible;
&::after {
content: " ";
width: 7px;
height: 7px;
display: block;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -3px;
@include transform(rotate(45deg));
background: $mit-red;
border-right: 1px solid darken($mit-red, 20%);
border-bottom: 1px solid darken($mit-red, 20%);
}
}
a.ui-slider-handle {
@include border-radius(20px);
@include border-radius(15px);
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
background: $mit-red url(/static/images/slider-handle.png) center center no-repeat;
border: 1px solid darken($mit-red, 20%);
cursor: pointer;
height: 20px;
margin-left: -10px;
height: 15px;
margin-left: -7px;
top: -4px;
width: 20px;
width: 15px;
@include transition();
@include background-size(50%);
&:focus, &:hover {
background-color: lighten($mit-red, 10%);
outline: none;
}
}
&:hover {
height: 14px;
margin-top: -7px;
a.ui-slider-handle {
@include border-radius(20px);
height: 20px;
margin-left: -10px;
top: -4px;
width: 20px;
}
}
}
ul.vcr {
......@@ -100,9 +159,10 @@ section.course-content {
display: block;
cursor: pointer;
height: 14px;
padding: lh(.75) lh();
padding: lh(.75);
text-indent: -9999px;
width: 14px;
@include transition();
&.play {
background: url('/static/images/play-icon.png') center center no-repeat;
......@@ -123,7 +183,7 @@ section.course-content {
}
div#vidtime {
padding-left: lh();
padding-left: lh(.75);
font-weight: bold;
line-height: 46px; //height of play pause buttons
-webkit-font-smoothing: antialiased;
......@@ -135,38 +195,68 @@ section.course-content {
float: right;
div.speeds {
border-right: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
float: left;
line-height: 46px; //height of play pause buttons
margin-right: 0;
-webkit-font-smoothing: antialiased;
opacity: .7;
position: relative;
@include transition();
width: 110px;
cursor: pointer;
-webkit-font-smoothing: antialiased;
h3 {
@include inline-block();
padding: 0 lh(.5);
padding: 0 lh(.25) 0 lh(.5);
font-weight: normal;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
color: #999;
}
p.active {
@include inline-block();
padding: 0 lh(.5) 0 0;
margin-bottom: 0;
font-weight: bold;
}
// fix for now
ol#video_speeds {
background-color: #444;
border: 1px solid #000;
border-top: 0;
@include box-shadow(inset 1px 0 0 #555);
@include inline-block();
padding-right: lh(.5);
left: -1px;
position: absolute;
top: 48px;
width: 100%;
z-index: 10;
li {
cursor: pointer;
border-bottom: 1px solid #000;
@include box-shadow( 0 1px 0 #555);
color: #fff;
@include inline-block();
cursor: pointer;
padding: 0 lh(.5);
&.active {
font-weight: bold;
}
&:last-child {
border-bottom: 0;
margin-top: 0;
@include box-shadow(none);
}
&:hover {
color: #aaa;
background-color: #666;
}
}
}
......@@ -180,20 +270,52 @@ section.course-content {
a.hide-subtitles {
float: left;
display: block;
padding-right: lh(.5);
padding: 0 lh(.5);
margin-left: 0;
color: #797979;
padding-left: 50px;
line-height: 46px; //height of play pause buttons
width: 30px;
text-indent: -9999px;
font-weight: 800;
background: url('/static/images/cc.png') 16px center no-repeat;
background: url('/static/images/cc.png') center no-repeat;
-webkit-font-smoothing: antialiased;
@include transition();
opacity: 1;
position: relative;
&:after {
text-indent: 0;
position: absolute;
top: 0;
right: -40px;
content: "turn off";
display: block;
width: 70px;
opacity: 0;
visibility: hidden;
@include transition();
}
&:hover {
color: #fff;
text-decoration: none;
background-color: #444;
padding-right: 80px;
background-position: 11px center;
&:after {
right: 0;
opacity: 1;
visibility: visible;
}
}
&.off {
opacity: .7;
&:after {
content: "turn on";
}
}
}
}
......@@ -203,19 +325,21 @@ section.course-content {
ol.subtitles {
float: left;
width: flex-grid(3, 9);
height: 530px;
padding-top: 10px;
max-height: 460px;
overflow: hidden;
li {
margin-bottom: 0px;
cursor: pointer;
border: 0;
padding: 0;
color: #666;
cursor: pointer;
margin-bottom: 0px;
padding: 0;
@include transition(all, .5s, ease-in);
&.current {
background-color: #f3f3f3;
color: #333;
font-weight: 700;
}
&:hover {
......@@ -246,3 +370,9 @@ section.course-content {
}
}
}
div.course-wrapper.closed section.course-content div.video-subtitles {
ol.subtitles {
max-height: 577px;
}
}
templates/sass/plugins/_jquery.qtip.min.scss 0 → 100644
.ui-tooltip,.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;}.ui-tooltip-fluid{display:block;visibility:hidden;position:static!important;float:left!important;}.ui-tooltip-content{position:relative;padding:5px 9px;overflow:hidden;border:1px solid #000001;text-align:left;word-wrap:break-word;overflow:hidden;}.ui-tooltip-titlebar{position:relative;min-height:14px;padding:5px 35px 5px 10px;overflow:hidden;border:1px solid #000001;border-width:1px 1px 0;font-weight:bold;}.ui-tooltip-titlebar+.ui-tooltip-content{border-top-width:0!important;}/*!Default close button class */ .ui-tooltip-titlebar .ui-state-default{position:absolute;right:4px;top:50%;margin-top:-9px;cursor:pointer;outline:medium none;border-width:1px;border-style:solid;}* html .ui-tooltip-titlebar .ui-state-default{top:16px;}.ui-tooltip-titlebar .ui-icon,.ui-tooltip-icon .ui-icon{display:block;text-indent:-1000em;}.ui-tooltip-icon,.ui-tooltip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.ui-tooltip-icon .ui-icon{width:18px;height:14px;text-align:center;text-indent:0;font:normal bold 10px/13px Tahoma,sans-serif;color:inherit;background:transparent none no-repeat -100em -100em;}/*!Default tooltip style */ .ui-tooltip-default .ui-tooltip-titlebar,.ui-tooltip-default .ui-tooltip-content{border-color:#F1D031;background-color:#FFFFA3;color:#555;}.ui-tooltip-default .ui-tooltip-titlebar{background-color:#FFEF93;}.ui-tooltip-default .ui-tooltip-icon{border-color:#CCC;background:#F1F1F1;color:#777;}.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{border-color:#AAA;color:#111;}
\ No newline at end of file
templates/video.html
......@@ -29,10 +29,11 @@
<div class="secondary-controls">
<div class="speeds">
<h3>Speed</h3>
<p class="active"></p>
<ol id="video_speeds"></ol>
</div>
<a href="#" class="hide-subtitles">turn off</a>
<a href="#" class="hide-subtitles">Captions</a>
</div>
</section>
</section>
......@@ -54,7 +55,7 @@
<li id="stt_p5"><div id="std_p5" onclick="title_seek( 5);"></div></li>
<li id="stt_p6"><div id="std_p7" onclick="title_seek( 6);"></div></li>
<li id="stt_p6"><div id="std_p7" onclick="title_seek( 7);"></div></li>
<!-- <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li> -->
<li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li>
</ol>
</div>
......@@ -65,10 +66,15 @@
$('.hide-subtitles').click(function() {
$('div.video-subtitles').toggleClass('closed');
var link_text = $('.hide-subtitles').text();
$(this).text((link_text == 'turn off') ? 'turn on' : 'turn off');
$(this).toggleClass("off");
return false;
});
$("ol#video_speeds").hide();
$("div.speeds").click(function() {
$("ol#video_speeds").slideToggle(150);
});
});
</script>
</%block>
templates/video_init.js
......@@ -20,9 +20,47 @@ if (swfobject.hasFlashPlayerVersion("10.1")){
// Make sure the callback is called once API ready, YT seems to be buggy
loadHTML5Video();
}
var captions=0;
$("#slider").slider({slide:function(event,ui){seek_slide('slide',event.originalEvent,ui.value);},
stop:function(event,ui){seek_slide('stop',event.originalEvent,ui.value);}});
/* Cache a reference to our slider element */
var slider = $('#slider')
.slider({
range: "min",
slide: function(event,ui) {
var slider_time = format_time(ui.value)
seek_slide('slide',event.originalEvent,ui.value);
handle.qtip('option', 'content.text', '' + slider_time);
},
stop:function(event,ui){seek_slide('stop',event.originalEvent,ui.value);}
}),
/* Grab and cache the newly created slider handle */
handle = $('.ui-slider-handle', slider);
/*
* Selector needs changing here to match your elements.
*
* Notice the second argument to the $() constructor, which tells
* jQuery to use that as the top-level element to seareh down from.
*/
handle.qtip({
content: '' + slider.slider('option', 'value'), // Use the current value of the slider
position: {
my: 'bottom center',
at: 'top center',
container: handle // Stick it inside the handle element so it keeps the position synched up
},
hide: {
delay: 700 // Give it a longer delay so it doesn't hide frequently as we move the handle
},
style: {
classes: 'ui-tooltip-slider',
widget: true // Make it Themeroller compatible
}
});
function good() {
window['console'].log(ytplayer.getCurrentTime());
......@@ -37,7 +75,8 @@ function add_speed(key, stream) {
var id = 'speed_' + stream;
if (key == video_speed) {
$("#video_speeds").append(' <li class=active id="'+id+'">'+key+'x</li>');
$("#video_speeds").append(' <li class="active" id="'+id+'">'+key+'x</li>');
$("p.active").text(key + 'x');
} else {
$("#video_speeds").append(' <li id="'+id+'">'+key+'x</li>');
}
......@@ -46,6 +85,8 @@ function add_speed(key, stream) {
change_video_speed(key, stream);
$(this).siblings().removeClass("active");
$(this).addClass("active");
var active = $(this).text();
$("p.active").text(active);
});
}
......@@ -89,8 +130,6 @@ $(document).ready(function() {
});
function toggleVideo(){
if ($("#video_control").hasClass("play")){
play();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment