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.

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

Don't force sliders to get evaluated on load #1122

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
7 changes: 7 additions & 0 deletions src/css/video-js.less
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,7 @@ fonts to show/hide properly.
top: 0;
left: 0;
height: 0.5em;
width: 100%;

background: @slider-bar-color
url(@slider-bar-pattern)
Expand All @@ -311,6 +312,10 @@ fonts to show/hide properly.
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
width: 0.5em;
height: 0.5em;
/* Assumes volume starts at 1.0. If you change the size of the
handle relative to the volume bar, you'll need to update this value
too. */
left: 90%;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be possible and make sense to use ems here to make the units consistent?
e.g. the clearest I think would be right: -0.5em;, but I guess left is how js updates the position, yeah? So maybe left: 4.5em?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The JS ends up using percent units and I didn't want to risk introducing a placement issue when fonts are scaled up or something. Something like left: 4.5em can be made to work, so if you would prefer the units to be consistent with a slight danger of breakage, I can make that change.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The volume bar is 5em, so 4.5em/5.0em = 0.9, so I don't think there should be any difference in placement? On one side it feels a little weird that JS would then switch to percentages, but the percentage doesn't directly map to the volume percentage anyway, since we have to account for the handle width. Using ems makes the mental math easier and would make it possible to do some auto-calculations with .less vars. So that's the way I'd lean if you're cool with it.

}

.vjs-default-skin .vjs-volume-handle:before {
Expand Down Expand Up @@ -368,6 +373,8 @@ fonts to show/hide properly.
height: 100%;
margin: 0;
padding: 0;
/* updated by javascript during playback */
width: 0;
/* Needed for IE6 *///
left: 0;
top: 0;
Expand Down
1 change: 0 additions & 1 deletion src/js/control-bar/volume-control.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ vjs.VolumeBar = vjs.Slider.extend({
vjs.Slider.call(this, player, options);
player.on('volumechange', vjs.bind(this, this.updateARIAAttributes));
player.ready(vjs.bind(this, this.updateARIAAttributes));
setTimeout(vjs.bind(this, this.update), 0); // update when elements is in DOM
}
});

Expand Down
7 changes: 1 addition & 6 deletions src/js/slider.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ vjs.Slider = vjs.Component.extend({
this.bar = this.getChild(this.options_['barName']);
this.handle = this.getChild(this.options_['handleName']);

player.on(this.playerEvent, vjs.bind(this, this.update));

this.on('mousedown', this.onMouseDown);
this.on('touchstart', this.onMouseDown);
this.on('focus', this.onFocus);
Expand All @@ -26,10 +24,7 @@ vjs.Slider = vjs.Component.extend({

this.player_.on('controlsvisible', vjs.bind(this, this.update));

// This is actually to fix the volume handle position. http://twitter.com/#!/gerritvanaaken/status/159046254519787520
// this.player_.one('timeupdate', vjs.bind(this, this.update));

player.ready(vjs.bind(this, this.update));
player.on(this.playerEvent, vjs.bind(this, this.update));

this.boundEvents = {};
}
Expand Down