// Component for instantiated flow player controlBar // http://flowplayer.org/plugins/flash/controlbar.html function _smFlowPlayerControlBar () { } _smFlowPlayerControlBar.prototype = { // configuration variables and default values flowPlayer : null, flowPlayerComponent : null, flowPlayerControls : null, flowPlayerConfiguration : null, initialize : function (flowPlayerComponent) { //this.flowPlayerComponent.fp.getControls() //It turns out, that we need to treat fp and the controls as //private variables, as when the fp gets 'refreshed', it destroys the component //this.flowPlayer = flowPlayerComponent.fp; //this.flowPlayerControls = this.flowPlayer.getControls(); this.flowPlayerComponent = flowPlayerComponent; this.flowPlayerConfiguration = this.flowPlayerComponent.configuration; if (typeof this.flowPlayerConfiguration.plugins == 'undefined') this.flowPlayerConfiguration.plugins = {}; if (typeof this.flowPlayerConfiguration.plugins.controls == 'undefined') this.flowPlayerConfiguration.plugins.controls = {}; if (typeof this.flowPlayerConfiguration.plugins.controls.playerStyle == 'undefined') this.flowPlayerConfiguration.plugins.controls.playerStyle = "static"; //Retrieve previous ControlBar Skin,Opacity and Background Alpha Selection if (typeof this.flowPlayerConfiguration.plugins.controls.playerSkin == 'undefined') this.flowPlayerConfiguration.plugins.controls.playerSkin = 1; else if (this.flowPlayerConfiguration.plugins.controls.playerSkin == 2) $('#skin2').attr('checked','checked'); else if (this.flowPlayerConfiguration.plugins.controls.playerSkin == 3) $('#skin3').attr('checked','checked'); if (typeof this.flowPlayerConfiguration.plugins.controls.opacity == 'undefined') this.flowPlayerConfiguration.plugins.controls.opacity = 1; else $("#select_controlBarOpacity").val(this.flowPlayerConfiguration.plugins.controls.opacity); //Retrieve cBar Bg alpha selection if color is rgba if (this.flowPlayerConfiguration.plugins.controls.backgroundColor[0]=="r") $("#select_controlBarAlpha").val(this.flowPlayerConfiguration.plugins.controls.backgroundColor.substring(5,this.flowPlayerConfiguration.plugins.controls.backgroundColor.length).replace(')','').split(',')[3]); //Moves the screen up to avoid cbar overlapping if (typeof this.flowPlayerConfiguration.screen == 'undefined') this.flowPlayerConfiguration.screen = {}; if (typeof this.flowPlayerConfiguration.screen.bottom == 'undefined') { if (this.flowPlayerConfiguration.plugins.controls.playerStyle == "floating") this.flowPlayerConfiguration.screen.bottom = 0; else { this.flowPlayerConfiguration.screen.bottom = this.flowPlayerConfiguration.plugins.controls.height/2; this.flowPlayerComponent.displayFlowPlayer(); } } }, // note these following methods do not store any changed state in the flowPlayerConfiguration... at least not yet hide : function() { this.flowPlayerComponent.fp.getControls().hide(); }, show : function() { this.flowPlayerComponent.fp.getControls().show(); }, locateUpFromBottomWithWidth : function(upFromBottom, newWidth) { this.flowPlayerComponent.fp.getControls().animate({ bottom: upFromBottom, width: newWidth }); }, locateDownFromTopWithWidth : function(downFromTop, newWidth) { this.flowPlayerComponent.fp.getControls().animate({ top: downFromTop, width: newWidth }); }, animate : function(details) { this.flowPlayerComponent.fp.getControls().animate(details); }, css : function(details) { this.flowPlayerComponent.fp.getControls().css(details); }, disable : function(details) { this.flowPlayerComponent.fp.getControls().enable({ all: false }); }, enable : function(details) { this.flowPlayerComponent.fp.getControls().enable({ all: true }); }, //// core control methods: call as setControlVisibleState({play: true}); setControlEnabledState : function(json) { if (this.isValid(json) == false) return; this.flowPlayerComponent.fp.getControls().enable(json); // we are not currently tracking button enable states in the configuration (not even sure if we can }, toggleControlVisibleState : function(control) { this.setControlVisibleState({ control: !this.flowPlayerConfiguration.plugins.controls[control] }); }, setControlVisibleState : function(json) { if (this.isValid(json) == false) return; this.flowPlayerComponent.fp.getControls().setWidgets(json); // replaced the following line: //this.flowPlayerConfiguration.plugins.controls[this.getKey(json)] = this.getValue(json); // with this: this.setControls(json); }, setControlColor : function(json) { if (this.isValid(json) == false) return; this.flowPlayerComponent.fp.getControls().css(json); // replaced the following line: // this.flowPlayerConfiguration.plugins.controls[this.getKey(json)] = this.getValue(json); // with this: this.setControls(json); }, setControls: function (json) { for (var i in json) this.flowPlayerConfiguration.plugins.controls[i] = json[i]; }, setControlGradient : function(json) { this.setControlColor(json) }, setLayout : function(layoutType, leftEdge, pixelWidth, display) { this.flowPlayerConfiguration.plugins.controls.playerStyle = layoutType; // We need to removed some behaviour regarding the edge and width of the player control bar if (layoutType == "static") { delete this.flowPlayerConfiguration.plugins.controls.left; //this.setControlColor({ width: '100%', bottom: 0, borderRadius: 0 }); //this.flowPlayerConfiguration.plugins.controls['autoHide'] = 'never'; this.setControls({ width: '100%', bottom: 0, left: 0, borderRadius: 0, autoHide: 'never'}); this.flowPlayerConfiguration.screen.bottom=this.flowPlayerConfiguration.plugins.controls.height/2; } else if (layoutType == "floating") { delete this.flowPlayerConfiguration.plugins.controls.left; //this.setControlColor({ width: '80%', bottom: 20, borderRadius: 8 }); this.setControls({ width: '80%', bottom: 20, borderRadius: 8, "autoHide":{"hideStyle":'fade',"hideDelay":4000,"hideDuration":400,"enabled":true,"mouseOutDelay":500,"fullscreenOnly":false}}); this.flowPlayerConfiguration.screen.bottom=0; //this.flowPlayerConfiguration.plugins.controls['hideDelay'] = 4000; //this.flowPlayerConfiguration.plugins.controls['autoHide'] = 'always'; // XXX: changing autoHide to never fixes a bug where sometimes, when changing to floating layout, the // control bar disappears and both flowplayer and javascript malfunction } else if (layoutType == "playlist") { //this.setControlColor({ width: pixelWidth, left: leftEdge, bottom: 0, borderRadius: 0 }); this.setControls({ width: pixelWidth, left: leftEdge, bottom: 0, borderRadius: 0, autoHide: 'never' }); //this.flowPlayerConfiguration.plugins.controls['autoHide'] = 'never'; this.flowPlayerConfiguration.screen.bottom=this.flowPlayerConfiguration.plugins.controls.height/2; } if (typeof display == 'undefined' || display) this.flowPlayerComponent.displayFlowPlayer(); }, getLayout : function () { return this.flowPlayerConfiguration.plugins.controls.playerStyle; }, setControlFade : function(controlFade, display) { if (controlFade) { this.flowPlayerConfiguration.plugins.controls['autoHide'] = 'always'; this.flowPlayerConfiguration.plugins.controls['hideDelay'] = 4000; } else { this.flowPlayerConfiguration.plugins.controls['autoHide'] = 'never'; } if (typeof display == 'undefined' || display) this.flowPlayerComponent.displayFlowPlayer(); }, // specific enable / disable button methods enablePlayButton : function () { this.setControlEnabledState({ play: true }); }, disablePlayButton : function () { this.setControlEnabledState({ play: false }); }, enableVolumeControl : function () { this.setControlEnabledState({ volume: true }); }, disableVolumeControl : function () { this.setControlEnabledState({ volume: false }); }, enableElapsedTime : function () { this.setControlEnabledState({ time: true }); }, disableElapsedTime : function () { this.setControlEnabledState({ time: false }); }, enableTotalTime : function () { this.setControlEnabledState({ duration: true }); }, disableTotalTime : function () { this.setControlEnabledState({ duration: false }); }, enableStopButton : function () { this.setControlEnabledState({ stop: true }); }, disableStopButton : function () { this.setControlEnabledState({ stop: false }); }, enableFullscreenButton : function () { this.setControlEnabledState({ fullscreen: true }); }, disableFullscreenButton : function () { this.setControlEnabledState({ fullscreen: false }); }, enableMuteButton : function () { this.setControlEnabledState({ mute: true }); }, disableMuteButton : function () { this.setControlEnabledState({ mute: false }); }, enableScrubber : function () { this.setControlEnabledState({ scrubber: true }); }, disableScrubber : function () { this.setControlEnabledState({ scrubber: false }); }, // specific show / hide button methods showPlayButton : function () { this.setControlVisibleState({ play: true }); }, hidePlayButton : function () { this.setControlVisibleState({ play: false }); }, showVolumeControl : function () { this.setControlVisibleState({ volume: true }); }, hideVolumeControl : function () { this.setControlVisibleState({ volume: false }); }, showElapsedTime : function () { this.setControlVisibleState({ time: true }); }, hideElapsedTime : function () { this.setControlVisibleState({ time: false }); }, showTotalTime : function () { this.setControlVisibleState({ duration: true }); }, hideTotalTime : function () { this.setControlVisibleState({ duration: false }); }, showStopButton : function () { this.setControlVisibleState({ stop: true }); }, hideStopButton : function () { this.setControlVisibleState({ stop: false }); }, showMuteButton : function () { this.setControlVisibleState({ mute: true }); }, hideMuteButton : function () { this.setControlVisibleState({ mute: false }); }, showScrubber : function () { this.setControlVisibleState({ scrubber: true }); }, hideScrubber : function () { this.setControlVisibleState({ scrubber: false }); }, // color methods setButtonColor : function (color) { this.setControlColor({ buttonColor: color }); }, setButtonOverColor : function (color) { this.setControlColor({ buttonOverColor: color }); }, setBackgroundColor : function (color) { this.setControlColor({ backgroundColor: color }); }, setElapsedTimeColor : function (color) { this.setControlColor({ timeColor: color }); }, setTotalTimeColor : function (color) { this.setControlColor({ durationColor: color }); }, setProgressBarColor : function (color) { this.setControlColor({ progressColor: color }); }, setLoadingBarColor : function (color) { this.setControlColor({ bufferColor: color }); }, setScrubberColor : function (color) { this.setControlColor({ sliderColor: color }); }, setVolumeControlColor : function (color) { this.setControlColor({ volumeSliderColor: color }); }, setTimeBackgroundColor : function (color) { this.setControlColor({ timeBgColor: color }); }, // size/layout methods setControlBarHeight : function (height) { this.setControlColor({ height: height }); }, setControlBarBottom : function (bottom) { this.setControlColor({ bottom: bottom }); }, setControlBarWidth : function (width) { this.setControlColor({ width: width }); }, setControlBarBorderRadius : function (borderRadius) { this.setControlColor({ borderRadius: borderRadius }); }, // gradient method(s) setBackgroundGradient : function (color) { this.setControlGradient({ backgroundGradient: gradient }); }, // support methods: isValid : function(json) { for (var i in json) { if (typeof i == 'undefined') return false; if (typeof json[i] == 'undefined') return false; } return true; }, // likely no longer need getKey or getValue getKey : function(json) { for (var i in json) return i; return; }, getValue : function(json) { for (var i in json) return json[i]; return; } };