Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor of including javascript content to brightcove player #49

Merged
merged 1 commit into from
Jan 4, 2017
Merged

Refactor of including javascript content to brightcove player #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions video_xblock/backends/base.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,3 +135,9 @@ def match(cls, href):
return cls.url_re.search(href)
elif isinstance(cls.url_re, basestring):
return re.search(cls.url_re, href, re.I)

def add_js_content(self, path, **context):
"""
Helper for adding javascript code inside <body> section.
"""
return '<script>' + self.render_resource(path, **context) + '</script>'
57 changes: 33 additions & 24 deletions video_xblock/backends/brightcove.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,28 +32,37 @@ def get_frag(self, **context):
frag.add_css_url(
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'
)
frag.add_javascript(
self.render_resource('../static/js/player_state.js', **context)
)
frag.add_javascript(
self.render_resource('../static/js/videojs-tabindex.js', **context)
)
frag.add_javascript(
self.resource_string('../static/js/toggle-button.js')
)
frag.add_javascript(
self.render_resource('../static/js/videojs-transcript.js', **context)
)
frag.add_javascript(self.render_resource(
'../static/js/videojs_event_plugin.js', **context
))
frag.add_javascript(self.resource_string(
'../static/bower_components/videojs-offset/dist/videojs-offset.js'
))
frag.add_javascript(
self.render_resource('../static/js/videojs-speed-handler.js', **context)
)
frag.add_css(self.resource_string(
'../static/css/brightcove.css'
))
frag.add_content(
self.add_js_content('../static/bower_components/videojs-transcript/dist/videojs-transcript.js')
)
frag.add_content(
self.add_js_content('../static/js/player_state.js', **context)
)
frag.add_content(
self.add_js_content('../static/js/videojs-tabindex.js', **context)
)
frag.add_content(
self.add_js_content('../static/js/toggle-button.js')
)
frag.add_content(
self.add_js_content('../static/js/videojs-transcript.js', **context)
)
frag.add_content(
self.add_js_content('../static/js/videojs_event_plugin.js', **context)
)
frag.add_content(
self.add_js_content('../static/bower_components/videojs-offset/dist/videojs-offset.js')
)
frag.add_content(
self.add_js_content('../static/js/videojs-speed-handler.js', **context)
)
frag.add_content(
self.add_js_content('../static/js/brightcove-videojs-init.js', **context)
)
frag.add_css(
self.resource_string('../static/css/brightcove.css')
)
frag.add_css(
self.resource_string('../static/css/transcripts.css')
)
return frag
35 changes: 35 additions & 0 deletions video_xblock/static/css/transcripts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,38 @@
color: #b20610;
font-size: 14px;
}

.display-flex {
display: flex;
}

#transcript {
max-height: 100%;
overflow: scroll;
padding: 0 0 0 20px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
background-color: inherit;
}

.transcript-line {
margin-bottom: 8px;
border: 0;
padding: 0;
color: #0074b5;
line-height: 1.41575em;
}

.transcript-line.is-active {
color: #333;
font-weight: 700;
}

.transcript-line:hover {
text-decoration: underline;
cursor: pointer;
}

.transcript-timestamp {
display: none;
}
19 changes: 2 additions & 17 deletions video_xblock/static/html/brightcove.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div>
<div class="display-flex">
<video data-video-id="{{ video_id }}"
id="{{ video_player_id }}"
data-account="{{ account_id }}"
Expand All @@ -19,20 +19,5 @@
{% endfor %}
</video>
<script src="{{ brightcove_js_url }}"></script>
<script src="https://cdn.rawgit.com/walsh9/videojs-transcript/master/dist/videojs-transcript.min.js"></script>
<script>
var player = videojs('{{ video_player_id }}');
videojs.plugin('xblockEventPlugin', window.xblockEventPlugin);
player.xblockEventPlugin();
videojs.plugin('offset', window.vjsoffset);

player.offset({
"start": {{ start_time }}, // do not use quotes for this properties for correct plugin work
"end": {{ end_time }}
});

videojs.plugin('videoJSSpeedHandler', window.videoJSSpeedHandler);
player.videoJSSpeedHandler();
</script>
<div id="transcript"></div>
</div>
<div id="transcript"></div>
15 changes: 15 additions & 0 deletions video_xblock/static/js/brightcove-videojs-init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
domReady(function(){
window.videojs = videojs;
var player = videojs('{{ video_player_id }}');
videojs.plugin('xblockEventPlugin', window.xblockEventPlugin);
player.xblockEventPlugin();
videojs.plugin('offset', window.vjsoffset);

player.offset({
"start": 0, // do not use quotes for this properties for correct plugin work
"end": 0
});

videojs.plugin('videoJSSpeedHandler', window.videoJSSpeedHandler);
player.videoJSSpeedHandler();
});
34 changes: 20 additions & 14 deletions video_xblock/static/js/videojs-tabindex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,33 +12,39 @@ domReady(function() {

// order tabIndex in player control
var orderTabIndex = function orderTabIndex(_player) {
var controlBarActions = Object.keys(_player.controlBar.childNameIndex_);
var controlBar;
if (_player.tagAttributes.brightcove === undefined){
controlBar = _player.controlBar.childNameIndex_;
} else {
controlBar = _player.controlBar;
};
var controlBarActions = Object.keys(controlBar);
var controlsTabOrder = [
'progressControl',
'playToggle',
'playbackRateMenuButton',
'volumeMenuButton',
'resolutionSwitcher',
'fullscreenToggle',
'captionsButton'
];
var controlsMap = {
'progressControl': _player.controlBar.childNameIndex_.progressControl.seekBar.el_,
'playToggle': _player.controlBar.childNameIndex_.playToggle.el_,
'captionsButton': _player.controlBar.childNameIndex_.captionsButton.el_,
'volumeMenuButton': _player.controlBar.childNameIndex_.volumeMenuButton.volumeBar.el_,
'fullscreenToggle': _player.controlBar.childNameIndex_.fullscreenToggle.el_,
'resolutionSwitcher': _player.controlBar.resolutionSwitcher,
'playbackRateMenuButton': _player.controlBar.childNameIndex_.playbackRateMenuButton.el_
'progressControl': controlBar.progressControl.seekBar.el_,
'playToggle': controlBar.playToggle.el_,
'captionsButton': controlBar.captionsButton.el_,
'volumeMenuButton': controlBar.volumeMenuButton.volumeBar.el_,
'fullscreenToggle': controlBar.fullscreenToggle.el_,
'playbackRateMenuButton': controlBar.playbackRateMenuButton.el_
};

// Swith off tabIndex for volumeMenuButton and free slot for volumeBar
_player.controlBar.childNameIndex_.volumeMenuButton.el_.tabIndex = -1;
// Switch off tabIndex for volumeMenuButton and free slot for volumeBar
controlBar.volumeMenuButton.el_.tabIndex = -1;

controlBarActions.forEach(function(action) {
var el = controlsMap[action] || _player.controlBar.childNameIndex_[action].el_;
var index = controlsTabOrder.indexOf(action);
el.tabIndex = index === -1 ? -1 : index + 1;
var el = controlsMap[action] || controlBar[action].el_;
if (el) {
var index = controlsTabOrder.indexOf(action);
el.tabIndex = index === -1 ? -1 : index + 1;
}
});
};

Expand Down