gecko-dev/toolkit/content/widgets/videocontrols.xml

272 lines
7.4 KiB
XML

<?xml version="1.0"?>
<!--
SVG Icons from the BSD Licensed BlueSphere Icon Theme:
http://svgicons.sourceforge.net/
-->
<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">
<content>
<xul:vbox flex="1"/>
<xul:hbox flex="0" pack="center">
<xul:button class="centerplay" flex="0" style="opacity:0.6;" vcattr="center-play" label="Play">
<svg:svg
width="32px"
height="32px"
viewBox="0 0 508 508"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient
cx="220"
cy="220"
r="151"
fx="220"
fy="220"
gradientUnits="userSpaceOnUse"
style="stroke:#000000;stroke-width:1;">
<stop
offset="0"
style="stop-color:#73ffff;stroke:#000000;stroke-width:1;" />
<stop
offset="0.28"
style="stop-color:#2EA6B9;stroke:#000000;stroke-width:1;" />
<stop
offset="1"
style="stop-color:#006b8b;stroke:#000000;stroke-width:1;" />
</radialGradient>
<linearGradient
id="gradient"
x1="0.380952"
y1="0.0859375"
x2="-0.111111"
y2="1.00781"
gradientUnits="objectBoundingBox"
spreadMethod="pad" />
</defs>
<g transform="translate(24,-1.6)">
<path
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#a4c9ee;stroke-width:10.824;stroke-linejoin:round;stroke-opacity:0.701961;"
d="M 338.593 175.32 L 435.492 261.836 L 339.257 355.345 L 338.593 175.32 z "
transform="matrix(1.72603,0,0,1.94683,-397.314,-245.978)"
/>
<path
style="fill:url(#gradient);fill-opacity:0.992157;fill-rule:evenodd;stroke:#0c6671;stroke-width:9.60304;stroke-opacity:0.992157;"
d="M 355.635 183.469 L 437.887 259.936 L 355.817 342.102 L 355.635 183.469 z "
transform="matrix(1.67014,0,0,1.75639,-395.375,-194.413)"
/>
</g>
</svg:svg>
</xul:button>
</xul:hbox>
<xul:vbox flex="2" pack="end">
<xul:hbox flex="0" pack="center" style="opacity:0.6;">
<xul:button class="controlbar" flex="0" vcattr="pause" label="Pause">
<svg:svg
width="32px"
height="32px"
viewBox="0 0 508 508"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient
cx="220"
cy="220"
r="151"
fx="220"
fy="220"
gradientUnits="userSpaceOnUse"
style="stroke:#000000;stroke-width:1;">
<stop
offset="0"
style="stop-color:#73ffff;stroke:#000000;stroke-width:1;" />
<stop
offset="0.28"
style="stop-color:#2EA6B9;stroke:#000000;stroke-width:1;" />
<stop
offset="1"
style="stop-color:#006b8b;stroke:#000000;stroke-width:1;" />
</radialGradient>
<linearGradient
id="gradient"
x1="0.506276"
y1="0.046875"
x2="0.506276"
y2="0.984375"
gradientUnits="objectBoundingBox"
spreadMethod="pad" />
</defs>
<g transform="matrix(0,-1,1,0,-205,520)">
<rect
style="fill-rule:evenodd;stroke:#a4c9ee;stroke-width:16;stroke-opacity:0.701961;"
x="121"
y="297"
width="256"
height="147" />
<rect
style="fill:url(#gradient);fill-rule:evenodd;stroke:#0c6671;stroke-width:14;"
x="135"
y="308"
width="232"
height="125"/>
</g>
<g transform="matrix(0,-1,1,0,-22,520)">
<rect
style="fill-rule:evenodd;stroke:#a4c9ee;stroke-width:16;stroke-opacity:0.701961;"
x="121"
y="297"
width="256"
height="147"/>
<rect
style="fill:url(#gradient);fill-rule:evenodd;stroke:#0c6671;stroke-width:14;"
x="135"
y="308"
width="232"
height="125"/>
</g>
</svg:svg>
</xul:button>
<xul:button class="controlbar" flex="0" vcattr="stop" label="Stop">
<svg:svg
width="32px"
height="32px"
viewBox="0 0 508 508"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient
cx="220"
cy="220"
r="151"
fx="220"
fy="220"
gradientUnits="userSpaceOnUse"
style="stroke:#000000;stroke-width:1;">
<stop
offset="0"
style="stop-color:#73ffff;stroke:#000000;stroke-width:1;" />
<stop
offset="0.2809"
style="stop-color:#2EA6B9;stroke:#000000;stroke-width:1;" />
<stop
offset="1"
style="stop-color:#006b8b;stroke:#000000;stroke-width:1;" />
</radialGradient>
<linearGradient
id="gradient"
x1="0.506276"
y1="0.046875"
x2="0.506276"
y2="0.984375"
gradientUnits="objectBoundingBox"
spreadMethod="pad" />
</defs>
<g transform="matrix(0,-1,1.5,0,-340,497)">
<rect
style="fill-rule:evenodd;stroke:#a4c9ee;stroke-width:16;stroke-opacity:0.701961;"
x="121"
y="297"
width="256"
height="147"/>
<rect
style="fill:url(#gradient);fill-rule:evenodd;stroke:#0c6671;stroke-width:14;"
x="135"
y="308"
width="232"
height="125"/>
</g>
</svg:svg>
</xul:button>
</xul:hbox>
</xul:vbox>
</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>
this.init();
</constructor>
<method name="init">
<body>
<![CDATA[
var self = this;
var video = this.parentNode;
var centerPlay = document.getAnonymousElementByAttribute(this, "vcattr", "center-play");
video.addEventListener("play", function() {
self.setAttribute("class", "playing");
}, false);
video.addEventListener("pause", function() {
self.setAttribute("class", "");
}, false);
video.addEventListener("ended", function() {
self.setAttribute("class", "");
}, false);
centerPlay.addEventListener("click", function() {
video.play();
}, false);
var pause = document.getAnonymousElementByAttribute(this, "vcattr", "pause");
pause.addEventListener("click", function() {
video.pause();
}, false);
var stop = document.getAnonymousElementByAttribute(this, "vcattr", "stop");
stop.addEventListener("click", function() {
video.pause();
video.currentTime = 0.0;
}, false);
]]>
</body>
</method>
<destructor>
</destructor>
</implementation>
</binding>
</bindings>