Skip to content

E
edx-platform
Commit adf0c75d by Valera Rozuvan
Options

Updated all coffee scripts to define and use Alpha version of classes. Added… 

Updated all coffee scripts to define and use Alpha version of classes. Added missing functions for HTML5Video.Player prototype. Now bare bones works without errors. YouTube version also works without errors.
parent 78e9692a
Showing with 48 additions and 56 deletions
common/lib/xmodule/xmodule/js/src/videoalpha/display.coffee
...@@ -9,7 +9,6 @@ class @VideoAlpha ...@@ -9,7 +9,6 @@ class @VideoAlpha
@show_captions = @el.data('show-captions') == "true" @show_captions = @el.data('show-captions') == "true"
window.player = null window.player = null
@el = $("#video_#{@id}") @el = $("#video_#{@id}")
if @parseVideos(@el.data("streams")) is true if @parseVideos(@el.data("streams")) is true
@videoType = "youtube" @videoType = "youtube"
@fetchMetadata() @fetchMetadata()
...@@ -18,25 +17,21 @@ class @VideoAlpha ...@@ -18,25 +17,21 @@ class @VideoAlpha
@videoType = "html5" @videoType = "html5"
@parseVideoSources @el.data("mp4-source"), @el.data("webm-source"), @el.data("ogg-source") @parseVideoSources @el.data("mp4-source"), @el.data("webm-source"), @el.data("ogg-source")
@speeds = ["0.75", "1.0", "1.25", "1.5"] @speeds = ["0.75", "1.0", "1.25", "1.5"]
@videos =
"0.75": ""
"1.0": ""
"1.25": ""
"1.5": ""
@setSpeed($.cookie('video_speed')) @setSpeed($.cookie('video_speed'))
$("#video_#{@id}").data('video', this).addClass('video-load-complete') $("#video_#{@id}").data('video', this).addClass('video-load-complete')
@hide_captions = $.cookie('hide_captions') == 'true' @hide_captions = $.cookie('hide_captions') == 'true'
if ((@videoType is "youtube") and (YT.Player)) or ((@videoType is "html5") and (HTML5Video.Player)) if ((@videoType is "youtube") and (YT.Player)) or ((@videoType is "html5") and (HTML5Video.Player))
console.log 'one'
@embed() @embed()
else else
console.log 'two'
if @videoType is "youtube" if @videoType is "youtube"
console.log 'three'
window.onYouTubePlayerAPIReady = -> window.onYouTubePlayerAPIReady = ->
_this.embed() _this.embed()
else if @videoType is "html5" else if @videoType is "html5"
console.log 'four'
console.log @videoType
console.log HTML5Video.Player
window.onHTML5PlayerAPIReady = -> window.onHTML5PlayerAPIReady = ->
_this.embed() _this.embed()
...@@ -45,10 +40,6 @@ class @VideoAlpha ...@@ -45,10 +40,6 @@ class @VideoAlpha
VideoAlpha::parseVideos = (videos) -> VideoAlpha::parseVideos = (videos) ->
return false if (typeof videos isnt "string") or (videos.length is 0) return false if (typeof videos isnt "string") or (videos.length is 0)
console.log 'We got this far'
console.log videos
@videos = {} @videos = {}
_this = this _this = this
$.each videos.split(/,/), (index, video) -> $.each videos.split(/,/), (index, video) ->
...@@ -63,7 +54,6 @@ class @VideoAlpha ...@@ -63,7 +54,6 @@ class @VideoAlpha
mp4: null mp4: null
webm: null webm: null
ogg: null ogg: null
@html5Sources.mp4 = mp4Source if (typeof mp4Source is "string") and (mp4Source.length > 0) @html5Sources.mp4 = mp4Source if (typeof mp4Source is "string") and (mp4Source.length > 0)
@html5Sources.webm = webmSource if (typeof webmSource is "string") and (webmSource.length > 0) @html5Sources.webm = webmSource if (typeof webmSource is "string") and (webmSource.length > 0)
@html5Sources.ogg = oggSource if (typeof oggSource is "string") and (oggSource.length > 0) @html5Sources.ogg = oggSource if (typeof oggSource is "string") and (oggSource.length > 0)
...@@ -82,7 +72,7 @@ class @VideoAlpha ...@@ -82,7 +72,7 @@ class @VideoAlpha
@speed = "1.0" @speed = "1.0"
embed: -> embed: ->
@player = new VideoPlayer video: this @player = new VideoPlayerAlpha video: this
fetchMetadata: (url) -> fetchMetadata: (url) ->
@metadata = {} @metadata = {}
...@@ -98,7 +88,6 @@ class @VideoAlpha ...@@ -98,7 +88,6 @@ class @VideoAlpha
code: @youtubeId() code: @youtubeId()
currentTime: @player.currentTime currentTime: @player.currentTime
speed: @speed speed: @speed
if @videoType is "youtube" if @videoType is "youtube"
logInfo.code = @youtubeId() logInfo.code = @youtubeId()
else logInfo.code = "html5" if @videoType is "html5" else logInfo.code = "html5" if @videoType is "html5"
......
common/lib/xmodule/xmodule/js/src/videoalpha/display/_subview.coffee
class @Subview class @SubviewAlpha
constructor: (options) -> constructor: (options) ->
$.each options, (key, value) => $.each options, (key, value) =>
@[key] = value @[key] = value
......
common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js
console.log('We are in "html5_video.js" script.');
this.HTML5Video = (function () { this.HTML5Video = (function () {
var HTML5Video = {}; var HTML5Video = {};
...@@ -55,8 +53,6 @@ this.HTML5Video = (function () { ...@@ -55,8 +53,6 @@ this.HTML5Video = (function () {
* } * }
*/ */
function Player(el, config) { function Player(el, config) {
console.log('We are inside HTML5Video.Player constructor.');
if (typeof el === 'string') { if (typeof el === 'string') {
this.el = $(el); this.el = $(el);
} else if ($.isPlainObject(el) === true) { } else if ($.isPlainObject(el) === true) {
...@@ -70,8 +66,6 @@ this.HTML5Video = (function () { ...@@ -70,8 +66,6 @@ this.HTML5Video = (function () {
return; return;
} }
console.log('We got a proper DOM element.');
if ($.isPlainObject(config) === true) { if ($.isPlainObject(config) === true) {
this.config = config; this.config = config;
} else { } else {
...@@ -91,9 +85,6 @@ this.HTML5Video = (function () { ...@@ -91,9 +85,6 @@ this.HTML5Video = (function () {
} }
}; };
} }
console.log('The config is:');
console.log(this.config);
} }
/* /*
...@@ -122,11 +113,11 @@ this.HTML5Video = (function () { ...@@ -122,11 +113,11 @@ this.HTML5Video = (function () {
}; };
/* /*
* The original YouTube API function player.setPlayBackQuality changed (if it was possible) the quality of the * The original YouTube API function player.setPlaybackQuality changed (if it was possible) the quality of the
* played video. In our case, this function will not do anything because we can't change the quality of HTML5 * played video. In our case, this function will not do anything because we can't change the quality of HTML5
* video since we only get one source of video with one quality. * video since we only get one source of video with one quality.
*/ */
Player.prototype.setPlayBackQuality = function (value) { Player.prototype.setPlaybackQuality = function (value) {
}; };
...@@ -134,22 +125,32 @@ this.HTML5Video = (function () { ...@@ -134,22 +125,32 @@ this.HTML5Video = (function () {
}; };
Player.prototype.sekkTo = function () { Player.prototype.seekTo = function () {
}; };
// YouTube API has player.loadVideoById, but since we are working with a video source, we will rename this // YouTube API has player.loadVideoById, but since we are working with a video source, we will rename this
// function accordingly. // function accordingly. However, not to cause conflicts, there will also be a loadVideoById function which
Player.prototype.loadVideoBySource = function () { // will call this function.
Player.prototype.loadVideoBySource = function (source) {
}; };
Player.prototype.loadVideoById = function (id) {
this.loadVideoBySource(id);
}
// YouTube API has player.cueVideoById, but since we are working with a video source, we will rename this // YouTube API has player.cueVideoById, but since we are working with a video source, we will rename this
// function accordingly. // function accordingly. However, not to cause conflicts, there will also be a cueVideoById function which
Player.prototype.cueVideoBySource = function () { // will call this function.
Player.prototype.cueVideoBySource = function (source) {
}; };
Player.prototype.cueVideoById = function (id) {
this.cueVideoBySource(id);
};
Player.prototype.setVolume = function () { Player.prototype.setVolume = function () {
}; };
...@@ -178,6 +179,12 @@ this.HTML5Video = (function () { ...@@ -178,6 +179,12 @@ this.HTML5Video = (function () {
}; };
Player.prototype.getDuration = function () {
// TODO: Return valid video duration.
return 0;
};
return Player; return Player;
}()); }());
...@@ -192,5 +199,3 @@ this.HTML5Video = (function () { ...@@ -192,5 +199,3 @@ this.HTML5Video = (function () {
return HTML5Video; return HTML5Video;
}()); }());
console.log(HTML5Video);
common/lib/xmodule/xmodule/js/src/videoalpha/display/video_caption.coffee
class @VideoCaption extends Subview class @VideoCaptionAlpha extends SubviewAlpha
initialize: -> initialize: ->
@loaded = false @loaded = false
......
common/lib/xmodule/xmodule/js/src/videoalpha/display/video_control.coffee
class @VideoControl extends Subview class @VideoControlAlpha extends SubviewAlpha
bind: -> bind: ->
@$('.video_control').click @togglePlayback @$('.video_control').click @togglePlayback
......
common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.coffee
class @VideoPlayer extends Subview class @VideoPlayerAlpha extends SubviewAlpha
initialize: -> initialize: ->
if @video.videoType is 'youtube' if @video.videoType is 'youtube'
# Define a missing constant of Youtube API # Define a missing constant of Youtube API
...@@ -26,19 +26,17 @@ class @VideoPlayer extends Subview ...@@ -26,19 +26,17 @@ class @VideoPlayer extends Subview
@toggleFullScreen(event) @toggleFullScreen(event)
render: -> render: ->
console.log '1.1' @control = new VideoControlAlpha el: @$('.video-controls')
@control = new VideoControl el: @$('.video-controls') @qualityControl = new VideoQualityControlAlpha el: @$('.secondary-controls')
@qualityControl = new VideoQualityControl el: @$('.secondary-controls') @caption = new VideoCaptionAlpha
@caption = new VideoCaption
el: @el el: @el
youtubeId: @video.youtubeId('1.0') youtubeId: @video.youtubeId('1.0')
currentSpeed: @currentSpeed() currentSpeed: @currentSpeed()
captionAssetPath: @video.caption_asset_path captionAssetPath: @video.caption_asset_path
unless onTouchBasedDevice() unless onTouchBasedDevice()
@volumeControl = new VideoVolumeControl el: @$('.secondary-controls') @volumeControl = new VideoVolumeControlAlpha el: @$('.secondary-controls')
console.log '1.2' @speedControl = new VideoSpeedControlAlpha el: @$('.secondary-controls'), speeds: @video.speeds, currentSpeed: @currentSpeed()
@speedControl = new VideoSpeedControl el: @$('.secondary-controls'), speeds: @video.speeds, currentSpeed: @currentSpeed() @progressSlider = new VideoProgressSliderAlpha el: @$('.slider')
@progressSlider = new VideoProgressSlider el: @$('.slider')
@playerVars = @playerVars =
controls: 0 controls: 0
wmode: 'transparent' wmode: 'transparent'
...@@ -46,15 +44,12 @@ class @VideoPlayer extends Subview ...@@ -46,15 +44,12 @@ class @VideoPlayer extends Subview
showinfo: 0 showinfo: 0
enablejsapi: 1 enablejsapi: 1
modestbranding: 1 modestbranding: 1
console.log '1.3'
if @video.start if @video.start
@playerVars.start = @video.start @playerVars.start = @video.start
@playerVars.wmode = 'window' @playerVars.wmode = 'window'
if @video.end if @video.end
# work in AS3, not HMLT5. but iframe use AS3 # work in AS3, not HMLT5. but iframe use AS3
@playerVars.end = @video.end @playerVars.end = @video.end
console.log '1.4'
if @video.videoType is 'html5' if @video.videoType is 'html5'
@player = new HTML5Video.Player @video.id, @player = new HTML5Video.Player @video.id,
playerVars: @playerVars, playerVars: @playerVars,
...@@ -182,7 +177,10 @@ class @VideoPlayer extends Subview ...@@ -182,7 +177,10 @@ class @VideoPlayer extends Subview
@player.pauseVideo() if @player.pauseVideo @player.pauseVideo() if @player.pauseVideo
duration: -> duration: ->
@video.getDuration() if @video.videoType is "youtube"
return @video.getDuration()
else return @player.getDuration() if @video.videoType is "html5"
0
currentSpeed: -> currentSpeed: ->
@video.speed @video.speed
......
common/lib/xmodule/xmodule/js/src/videoalpha/display/video_progress_slider.coffee
class @VideoProgressSlider extends Subview class @VideoProgressSliderAlpha extends SubviewAlpha
initialize: -> initialize: ->
@buildSlider() unless onTouchBasedDevice() @buildSlider() unless onTouchBasedDevice()
......
common/lib/xmodule/xmodule/js/src/videoalpha/display/video_quality_control.coffee
class @VideoQualityControl extends Subview class @VideoQualityControlAlpha extends SubviewAlpha
initialize: -> initialize: ->
@quality = null; @quality = null;
......
common/lib/xmodule/xmodule/js/src/videoalpha/display/video_speed_control.coffee
class @VideoSpeedControl extends Subview class @VideoSpeedControlAlpha extends SubviewAlpha
bind: -> bind: ->
@$('.video_speeds a').click @changeVideoSpeed @$('.video_speeds a').click @changeVideoSpeed
if onTouchBasedDevice() if onTouchBasedDevice()
......
common/lib/xmodule/xmodule/js/src/videoalpha/display/video_volume_control.coffee
class @VideoVolumeControl extends Subview class @VideoVolumeControlAlpha extends SubviewAlpha
initialize: -> initialize: ->
@currentVolume = 100 @currentVolume = 100
......
lms/templates/videoalpha.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<h2> ${display_name} </h2> <h2> ${display_name} </h2>
% endif % endif
<!-- data-streams="0.75:WL7anegEjsU,1.0:NUmLa2vBBLo,1.25:TygItMr4wY4,1.5:kctQ6liQdAE"--> <!-- data-streams="0.75:aHUgdwyxTF0,1.0:yJzQiemCIuY,1.25:ELCdMiV1tCQ,1.5:-7gIpfrQdAI"-->
%if settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']: %if settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
<div id="stub_out_video_for_testing"></div> <div id="stub_out_video_for_testing"></div>
......
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