gecko/toolkit/content/widgets/videocontrols.xml

219 lines
7.6 KiB
XML

<?xml version="1.0"?>
<bindings id="videoContolBindings"
xmlns="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:svg="http://www.w3.org/2000/svg">
<binding id="videoControls">
<resources>
<stylesheet src="chrome://global/skin/media/videocontrols.css"/>
</resources>
<xbl:content xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<spacer flex="1"/>
<hbox id="controlsBackground">
<image id="playButton"
onclick="if (event.button == 0) this.parentNode.parentNode.Utils.togglePause();"/>
<box id="controlsMiddle" flex="1"/>
<image id="muteButton"
onclick="if (event.button == 0) this.parentNode.parentNode.Utils.toggleMute();"/>
</hbox>
</xbl:content>
<implementation implements="nsISecurityCheckedComponent">
<!-- nsISecurityCheckedComponent -->
<method name="canCreateWrapper">
<parameter name="aIID"/>
<body>
return "AllAccess";
</body>
</method>
<method name="canCallMethod">
<parameter name="aIID"/>
<parameter name="aMethodName"/>
<body>
return "AllAccess";
</body>
</method>
<method name="canGetProperty">
<parameter name="aIID"/>
<parameter name="aPropertyName"/>
<body>
return "AllAccess";
</body>
</method>
<method name="canSetProperty">
<parameter name="aIID"/>
<parameter name="aPropertyName"/>
<body>
return "AllAccess";
</body>
</method>
<method name="QueryInterface">
<parameter name="aIID"/>
<body>
<![CDATA[
if (!iid.equals(Components.interfaces.nsISecurityCheckedComponent))
throw Components.results.NS_ERROR_NO_INTERFACE;
return this;
]]>
</body>
</method>
<constructor>
<![CDATA[
this.init();
]]>
</constructor>
<field name="Utils">
<![CDATA[ ({
debug : false,
video : null,
controls : null,
playButton : null,
muteButton : null,
animationSteps : 8,
animationStep : 0,
animationDirection : 1,
animationTimer : null,
handleEvent : function (aEvent) {
this.log("Got " + aEvent.type + " media event");
switch (aEvent.type) {
case "play":
this.playButton.setAttribute("paused", false);
break;
case "pause":
this.playButton.setAttribute("paused", true);
break;
case "volumechange":
this.muteButton.setAttribute("muted", this.video.muted);
break;
default:
this.log("!!! event " + aEvent.type + " not handled!");
}
},
fadeControls : function (self) {
self.log("fadeControls @" + self.animationStep);
self.animationStep += self.animationDirection;
if (self.animationStep <= 0) {
self.animationStep = 0;
clearInterval(self.animationTimer);
self.animationTimer = null;
} else if (self.animationStep >= self.animationSteps) {
self.animationStep = self.animationSteps;
clearInterval(self.animationTimer);
self.animationTimer = null;
}
// XXX might be good to do logarithmic steps, maybe use timer error too (for smoothness)?
self.controls.style.opacity = self.animationStep / self.animationSteps;
},
togglePause : function () {
if (this.video.paused)
this.video.play();
else
this.video.pause();
// We'll handle style changes in the event listener for
// the "play" and "pause" events, same as if content
// script was controlling video playback.
},
toggleMute : function () {
this.video.muted = !this.video.muted;
// We'll handle style changes in the event listener for
// the "volumechange" event, same as if content script was
// controlling volume.
},
isChildNode : function (node) {
while (node) {
if (node == this.controls)
break;
node = node.parentNode;
}
return (node == this);
},
log : function (msg) {
if (this.debug)
dump("videoctl: " + msg + "\n");
}
}) ]]>
</field>
<method name="init">
<body>
<![CDATA[
var video = this.parentNode;
this.Utils.video = video;
this.Utils.controls = this;
this.Utils.playButton = document.getAnonymousElementByAttribute(this, "id", "playButton");
this.Utils.muteButton = document.getAnonymousElementByAttribute(this, "id", "muteButton");
// Set initial state of play/pause button.
this.Utils.playButton.setAttribute("paused", video.paused);
this.style.opacity = 0;
// Use Utils.handleEvent() callback for all media events.
video.addEventListener("play", this.Utils, false);
video.addEventListener("pause", this.Utils, false);
video.addEventListener("volumechange", this.Utils, false);
this.Utils.log("--- videocontrols initialized ---");
]]>
</body>
</method>
</implementation>
<handlers>
<handler event="mouseover">
<![CDATA[
// Ignore events caused by transitions between child nodes.
if (this.Utils.isChildNode(event.relatedTarget))
return;
// Don't show controls unless they're enabled
// XXX sucks that spec defaults to controls=false. :-(
// XXX add support for dynamically hiding controls w/o waiting for mouseout?
if (!this.Utils.video.controls)
return;
this.Utils.animationDirection = 1;
if (!this.Utils.animationTimer)
this.Utils.animationTimer = setInterval(this.Utils.fadeControls, 50, this.Utils);
]]>
</handler>
<handler event="mouseout">
<![CDATA[
// Ignore events caused by transitions between child nodes.
if (this.Utils.isChildNode(event.relatedTarget))
return;
this.Utils.animationDirection = -1;
if (!this.Utils.animationTimer)
this.Utils.animationTimer = setInterval(this.Utils.fadeControls, 50, this.Utils);
]]>
</handler>
</handlers>
</binding>
</bindings>