I'm in the middle of refactoring, and am thinking of changing the design entirely.
Here's what I plan to do:
Remove scrolling
I'm going to remove scrolling and the on/off switch in favor of a simple button that toggles the state. This way the user has full, deliberate control over where the player is.
My messing around with the scrolling toggle has proven it to be irritating. It has to go.
Change the way the player moves
I'm also going to change the way the move happens. Currently, it takes too many steps, and uses a lot of styling, physically moving the player, its controls, and the container to the bottom right quadrant of the screen. This is the cause of several bugs in the script, and also needs to go.
After some testing, I've come up with a mechanism that simply creates a floating div (currently sized at 480x640, but I may shrink it.), and pops the video element out of the player and into the floating div. This pauses the video, so the switch would also entail checking if the video is paused (video.paused) and unpausing otherwise, so as to retain the video's state. By setting the video's size to auto, it will inherit the size of the floating div, removing the need to use over-complicated styling.
Remove the player controls
I also plan to move only the video. When the video moves, the controls will stay where they are. Think about it: how many times have you ever used the controls while the player is in mini mode? Probably never, excepting the occasional pause.
What I will do is re-enable video.controls, which YouTube sets to false so it can create its own controls. I will also set an onclick event that will toggle play/pause. I've already tested all of this and the only difficulty I'm having is with YouTube constantly setting the controls to false. I'm sure I'll iron that out pretty easily, though.
So far, the most difficult part of this might be adding the actual button to the page. There are a lot of layers, and finding a good place to insert something like a button is never a trivial task.
The point of all this is to dramatically simplify the design. Simpler is easier to maintain, and tends to be more stable with less moving parts.
Anyways, I thought I'd just give an update since I forked this about a week ago and haven't updated it at all.
Updates
I'm in the middle of refactoring, and am thinking of changing the design entirely.
Here's what I plan to do:
Remove scrolling
I'm going to remove scrolling and the on/off switch in favor of a simple button that toggles the state. This way the user has full, deliberate control over where the player is.
My messing around with the scrolling toggle has proven it to be irritating. It has to go.
Change the way the player moves
I'm also going to change the way the move happens. Currently, it takes too many steps, and uses a lot of styling, physically moving the player, its controls, and the container to the bottom right quadrant of the screen. This is the cause of several bugs in the script, and also needs to go.
After some testing, I've come up with a mechanism that simply creates a floating div (currently sized at
480x640, but I may shrink it.), and pops the video element out of the player and into the floating div. This pauses the video, so the switch would also entail checking if the video is paused (video.paused) and unpausing otherwise, so as to retain the video's state. By setting the video's size to auto, it will inherit the size of the floating div, removing the need to use over-complicated styling.Remove the player controls
I also plan to move only the video. When the video moves, the controls will stay where they are. Think about it: how many times have you ever used the controls while the player is in mini mode? Probably never, excepting the occasional pause.
What I will do is re-enable
video.controls, which YouTube sets to false so it can create its own controls. I will also set an onclick event that will toggle play/pause. I've already tested all of this and the only difficulty I'm having is with YouTube constantly setting the controls to false. I'm sure I'll iron that out pretty easily, though.So far, the most difficult part of this might be adding the actual button to the page. There are a lot of layers, and finding a good place to insert something like a button is never a trivial task.
The point of all this is to dramatically simplify the design. Simpler is easier to maintain, and tends to be more stable with less moving parts.
Anyways, I thought I'd just give an update since I forked this about a week ago and haven't updated it at all.
-Braden