Skip to content

Commit

Permalink
FLUID-4554: Redesign of the videoPlayer to work with new model. Capti…
Browse files Browse the repository at this point in the history 
…on controls do not work. Need code cleaning.
  • Loading branch information
@anvk
anvk committed Feb 17, 2012
1 parent a779a67 commit 38c74f4
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 127 deletions.
100 changes: 52 additions & 48 deletions js/VideoPlayer.js
View file
Expand Up @@ -107,7 +107,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
applier: "{videoPlayer}.applier",
events: {
onMediaReady: "{videoPlayer}.events.onMediaReady"
}
},
sources: "{videoPlayer}.options.video.sources"
}
},
controllers: {
Expand Down Expand Up @@ -136,7 +137,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
displayCaptions: "{videoPlayer}.model.displayCaptions"
},
applier: "{videoPlayer}.applier",
captions: "{videoPlayer}.options.captions"
captions: "{videoPlayer}.options.video.captions"
}
},
browserCompatibility: {
Expand Down Expand Up @@ -206,28 +207,31 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
keyBindings: defaultKeys,
produceTree: "fluid.videoPlayer.produceTree",
controls: "custom",
video: {
sources: [],
captions: []
},
model: {
states: {
play: false,
currentTime: 0,
totalTime: 0,
displayCaptions: true,
fullscreen: false,
volume: 60,
muted: false,
canPlay: false
//states: {
// play: false,
// currentTime: 0,
// totalTime: 0,
// displayCaptions: true,
// fullscreen: false,
// volume: 60,
// muted: false,
// canPlay: false
//},
currentTracks: {
captions: []
},
video: {
sources: null
},
captions: {
selection: "none",
choices: [],
names: [],
show: false,
sources: null,
currentTrack: undefined
}
currentTime: 0,
totalTime: 0,
displayCaptions: true,
fullscreen: false,
volume: 60,
muted: false,
canPlay: false
},
templates: {
videoPlayer: {
Expand All @@ -248,17 +252,17 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
key: that.options.keyBindings.fullscreen.key,
activateHandler: function () {
that.applier.fireChangeRequest({
path: "states.fullscreen",
value: !that.model.states.fullscreen
path: "fullscreen",
value: !that.model.fullscreen
});
}
}, {
modifier: that.options.keyBindings.captions.modifier,
key: that.options.keyBindings.captions.key,
activateHandler: function () {
that.applier.fireChangeRequest({
path: "states.displayCaptions",
value: !that.model.states.displayCaptions
path: "displayCaptions",
value: !that.model.displayCaptions
});
}
}, {
Expand Down Expand Up @@ -300,8 +304,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
};

var bindVideoPlayerModel = function (that) {
that.applier.modelChanged.addListener("states.fullscreen", that.fullscreen);
that.applier.modelChanged.addListener("states.canPlay", function () {
that.applier.modelChanged.addListener("fullscreen", that.fullscreen);
that.applier.modelChanged.addListener("canPlay", function () {
that.events.onViewReady.fire();
});
};
Expand All @@ -319,7 +323,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
}
}]
};
} else if (that.canRenderMedia(that.model.video.sources)) {
} else if (that.canRenderMedia(that.options.video.sources)) {
// Keep the selector to render "fluid.videoPlayer.media"
that.options.selectorsToIgnore.push("video");
}
Expand All @@ -334,17 +338,17 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt

fluid.videoPlayer.preInit = function (that) {
// build the 'choices' from the caption list provided
fluid.each(that.options.model.captions.sources, function (value, key) {
that.options.model.captions.choices.push(key);
that.options.model.captions.names.push(key);
});
//fluid.each(that.options.video.captions, function (value, key) {
// that.options.video.captions.choices.push(key);
// that.options.video.captions.names.push(key);
//});
// add the 'turn captions off' option
that.options.model.captions.choices.push("none");
that.options.model.captions.names.push(that.options.strings.captionsOff);
//that.options.video.captions.choices.push("none");
//that.options.video.captions.names.push(that.options.strings.captionsOff);

that.fullscreen = function () {
var video = that.locate("video");
if (that.model.states.fullscreen === true) {
if (that.model.fullscreen === true) {
that.container.css({
// TODO: This doesn't actually do full-screen, it simply tries to maximise
// to the current window size. (FLUID-4570)
Expand All @@ -371,39 +375,39 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt

that.play = function (ev) {
that.applier.fireChangeRequest({
"path": "states.play",
"value": !that.model.states.play
"path": "play",
"value": !that.model.play
});
};

that.incrVolume = function () {
if (that.model.states.volume < 100) {
var newVol = (that.model.states.volume + 10) / 100.0;
if (that.model.volume < 100) {
var newVol = (that.model.volume + 10) / 100.0;
that.events.onVolumeChange.fire(newVol <= 1 ? newVol : 1);
}
};

that.decrVolume = function () {
if (that.model.states.volume > 0) {
var newVol = (that.model.states.volume - 10) / 100.0;
if (that.model.volume > 0) {
var newVol = (that.model.volume - 10) / 100.0;
that.events.onVolumeChange.fire(newVol >= 0 ? newVol : 0);
}
};

that.incrTime = function () {
that.events.onStartScrub.fire();
if (that.model.states.currentTime < that.model.states.totalTime) {
var newVol = that.model.states.currentTime + that.model.states.totalTime * 0.05;
that.events.onScrub.fire(newVol <= that.model.states.totalTime ? newVol : that.model.states.totalTime);
if (that.model.currentTime < that.model.totalTime) {
var newVol = that.model.currentTime + that.model.totalTime * 0.05;
that.events.onScrub.fire(newVol <= that.model.totalTime ? newVol : that.model.totalTime);
}
that.events.afterScrub.fire();
};

that.decrTime = function () {
that.events.onStartScrub.fire();

if (that.model.states.currentTime > 0) {
var newVol = that.model.states.currentTime - that.model.states.totalTime * 0.05;
if (that.model.currentTime > 0) {
var newVol = that.model.currentTime - that.model.totalTime * 0.05;
that.events.onScrub.fire(newVol >= 0 ? newVol : 0);
}
that.events.afterScrub.fire();
Expand Down Expand Up @@ -444,7 +448,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
if (!fetchFailed) {
that.events.onTemplateReady.fire();

if (that.canRenderMedia(that.model.video.sources)) {
if (that.canRenderMedia(that.options.video.sources)) {
that.events.onCreateMediaReady.fire();
}
if (that.canRenderControllers(that.options.controls)) {
Expand Down
76 changes: 36 additions & 40 deletions js/VideoPlayer_controllers.js
View file
Expand Up @@ -29,9 +29,9 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
//add all the modelChanged listener to the applier
// TODO: Privacy is inherited. Consider making this public
var bindControllerModel = function (that) {
that.applier.modelChanged.addListener("states.canPlay", function () {
that.locate("play").attr("disabled", !that.model.states.canPlay);
that.locate("fullscreen").attr("disabled", !that.model.states.canPlay);
that.applier.modelChanged.addListener("canPlay", function () {
that.locate("play").attr("disabled", !that.model.canPlay);
that.locate("fullscreen").attr("disabled", !that.model.canPlay);
});
};

Expand Down Expand Up @@ -86,7 +86,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
release: "Pause"
},
model: "{controllers}.model",
modelPath: "states.play",
modelPath: "play",
applier: "{controllers}.applier"
}
},
Expand All @@ -106,7 +106,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
release: "Exit full screen mode"
},
model: "{controllers}.model",
modelPath: "states.fullscreen",
modelPath: "fullscreen",
applier: "{controllers}.applier"
}
}
Expand Down Expand Up @@ -152,7 +152,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
//change the text of the selected time
var updateTime = function (that, element) {
var time = that.locate(element);
time.text(fluid.videoPlayer.formatTime(that.model.states[element]));
time.text(fluid.videoPlayer.formatTime(that.model[element]));
};

// TODO: Privacy is inherited. Consider making this public
Expand All @@ -175,16 +175,16 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
// TODO: This function is inherited. Consider making this public
var bindScrubberModel = function (that) {
// Setup the scrubber when we know the duration of the video.
that.applier.modelChanged.addListener("states.startTime", that.updateMin);
that.applier.modelChanged.addListener("states.startTime", that.updateMax);
that.applier.modelChanged.addListener("states.totalTime", that.updateMax);
that.applier.modelChanged.addListener("startTime", that.updateMin);
that.applier.modelChanged.addListener("startTime", that.updateMax);
that.applier.modelChanged.addListener("totalTime", that.updateMax);

// Bind to the video's timeupdate event so we can programmatically update the slider.
that.applier.modelChanged.addListener("states.currentTime", that.updateCurrent);
that.applier.modelChanged.addListener("currentTime", that.updateCurrent);

that.applier.modelChanged.addListener("states.canPlay", function () {
that.applier.modelChanged.addListener("canPlay", function () {
var scrubber = that.locate("scrubber");
if (that.model.states.canPlay === true) {
if (that.model.canPlay === true) {
scrubber.slider("enable");
} else {
scrubber.slider("disable");
Expand Down Expand Up @@ -239,30 +239,30 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
// TODO: these methods should be public functions, since people might like to alter them
// (inherited code)
that.updateMin = function () {
var startTime = that.model.states.startTime || 0;
var startTime = that.model.startTime || 0;
var scrubber = that.locate("scrubber");
scrubber.slider("option", "min", startTime + that.model.states.currentTime);
scrubber.slider("option", "min", startTime + that.model.currentTime);
that.locate("handle").attr({
"aria-valuemin": startTime + that.model.states.currentTime
"aria-valuemin": startTime + that.model.currentTime
});
};

that.updateMax = function () {
updateTime(that, "totalTime");
var scrubber = that.locate("scrubber");
scrubber.slider("option", "max", that.model.states.totalTime);
scrubber.slider("option", "max", that.model.totalTime);
that.locate("handle").attr({
"aria-valuemax": that.model.states.totalTime
"aria-valuemax": that.model.totalTime
});
};

that.updateCurrent = function () {
updateTime(that, "currentTime");
var scrubber = that.locate("scrubber");
scrubber.slider("value", that.model.states.currentTime);
scrubber.slider("value", that.model.currentTime);
that.locate("handle").attr({
"aria-valuenow": that.model.states.totalTime,
"aria-valuetext": fluid.videoPlayer.formatTime(that.model.states.currentTime) + " of " + fluid.videoPlayer.formatTime(that.model.states.totalTime)
"aria-valuenow": that.model.totalTime,
"aria-valuetext": fluid.videoPlayer.formatTime(that.model.currentTime) + " of " + fluid.videoPlayer.formatTime(that.model.totalTime)
});
};
};
Expand Down Expand Up @@ -294,9 +294,9 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt

// TODO: Privacy is inherited. Consider making this public
var bindVolumeModel = function (that) {
that.applier.modelChanged.addListener("states.volume", that.updateVolume);
that.applier.modelChanged.addListener("states.canPlay", function () {
that.locate("mute").attr("disabled", !that.model.states.canPlay);
that.applier.modelChanged.addListener("volume", that.updateVolume);
that.applier.modelChanged.addListener("canPlay", function () {
that.locate("mute").attr("disabled", !that.model.canPlay);
});
};

Expand All @@ -307,17 +307,17 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
volumeControl.slider({
orientation: "vertical",
range: "min",
min: that.model.states.minVolume,
max: that.model.states.maxVolume,
value: that.model.states.volume
min: that.model.minVolume,
max: that.model.maxVolume,
value: that.model.volume
});
// TODO: This in inherited. Do we need to add aria to sliders ourselves?
that.locate("handle").attr({
"aria-label": that.options.strings.volume,
"aria-valuemin": that.model.states.minVolume,
"aria-valuemax": that.model.states.maxVolume,
"aria-valuenow": that.model.states.volume,
"aria-valuetext": that.model.states.volume + "%",
"aria-valuemin": that.model.minVolume,
"aria-valuemax": that.model.maxVolume,
"aria-valuenow": that.model.volume,
"aria-valuetext": that.model.volume + "%",
"role": "slider"
});

Expand Down Expand Up @@ -353,14 +353,10 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
onChange: null
},
model: {
// TODO: the 'states' is to mimic the videoPlayer model layout
// Ideally, the volumeControls should operate without requiring that knowledge.
states: {
muted: false,
volume: 50,
minVolume: 0,
maxVolume: 100
}
muted: false,
volume: 50,
minVolume: 0,
maxVolume: 100
},
selectors: {
mute: ".flc-videoPlayer-mute",
Expand Down Expand Up @@ -392,7 +388,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
release: "Un-mute"
},
model: "{volumeControls}.model",
modelPath: "states.muted",
modelPath: "muted",
applier: "{volumeControls}.applier"
}
}
Expand All @@ -410,7 +406,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
};

that.updateVolume = function () {
var volume = that.model.states.volume;
var volume = that.model.volume;
var volumeControl = that.locate("volumeControl");
volumeControl.slider("value", volume);
that.locate("handle").attr({
Expand Down

0 comments on commit 38c74f4

Please sign in to comment.