if (typeof MistSkins == "undefined") { var MistSkins = {}; }
if ((typeof mistoptions != "undefined") && ("host" in mistoptions)) { var misthost = MistUtil.http.url.sanitizeHost(mistoptions.host); } else { var misthost = ".."; }
MistSkins["default"] = {
structure: {
main: {
if: function(){
return (!!this.info.hasVideo && (this.source.type.split("/")[1] != "audio"));
},
then: { //use this substructure when there is video
type: "placeholder",
classes: ["mistvideo"],
children: [{
type: "hoverWindow",
mode: "pos",
style: {position: "relative"},
transition: {
hide: "left: 0; right: 0; bottom: -43px;",
show: "bottom: 0;",
viewport: "left:0; right: 0; top: -1000px; bottom: 0;"
},
button: {type: "videocontainer"},
children: [{type: "loading"},{type: "error"}],
window: {type: "controls"}
}]
},
else: { //use this subsctructure for audio only
type: "container",
classes: ["mistvideo"],
style: {overflow: "visible"},
children: [
{
type: "controls",
classes: ["mistvideo-novideo"],
style: {width: "480px"}
},
{type: "loading"},
{type: "error"},
{
if: function(){
return (this.options.controls == "stock");
},
then: { //show the video element if its controls will be used
type: "video",
style: { position: "absolute" }
},
else: { //hide the video element
type: "video",
style: {
position: "absolute",
display: "none"
}
}
}
],
}
},
videocontainer: {
type: "container",
children: [
{type: "videobackground", alwaysDisplay: false, delay: 5 },
{type: "video"}
]
},
controls: {
if: function(){
return !!(this.player && this.player.api && this.player.api.play)
},
then: { //use this subsctructure for players that have an api with at least a play function available
type: "container",
classes: ["mistvideo-column"],
children: [
{
type: "progress",
classes: ["mistvideo-pointer"]
},
{
type: "container",
classes: ["mistvideo-main","mistvideo-padding","mistvideo-row","mistvideo-background"],
children: [
{
type: "play",
classes: ["mistvideo-pointer"]
},
{type: "currentTime"},
{
if: function(){
//show the total time if the player size is larger than 300px
if (("size" in this) && (this.size.width > 300) || ((!this.info.hasVideo || (this.source.type.split("/")[1] == "audio")))) {
return true;
}
return false;
},
then: {type: "totalTime"}
},
{
type: "container",
classes: ["mistvideo-align-right"],
children: [
{
type: "container",
children: [
{
type: "container",
classes: ["mistvideo-volume_container"],
children: [{
type: "volume",
mode: "horizontal",
size: {height: 22},
classes: ["mistvideo-pointer"]
}]
},
{
type: "speaker",
classes: ["mistvideo-pointer"],
style: {"margin-left": "-2px"}
}
]
},
{
if: function(){
//show the fullscreen and loop buttons here if the player size is larger than 300px
if (("size" in this) && (this.size.width > 300) || ((!this.info.hasVideo || (this.source.type.split("/")[1] == "audio")))) {
return true;
}
return false;
},
then: {
type: "container",
children: [{
type: "loop",
classes: ["mistvideo-pointer"]
},
{
type: "fullscreen",
classes: ["mistvideo-pointer"]
}]
}
},
{
type: "hoverWindow",
mode: "pos",
transition: {
hide: "right: -1000px; bottom: 44px;",
show: "right: 5px;",
viewport: "right: 0; left: 0; bottom: 0; top: -1000px"
},
button: {type: "settings", classes: ["mistvideo-pointer"]},
window: {type: "submenu"}
}
]}
]
}
]
},
else: { //use this subsctructure for players that don't have an api with at least a play function available
if: function() { return !!(this.player && this.player.api); },
then: { //use this subsctructure if some sort of api does exist
type: "hoverWindow",
mode: "pos",
transition: {
hide: "right: -1000px; bottom: 44px;",
show: "right: 2.5px;",
viewport: "right: 0; left: -1000px; bottom: 0; top: -1000px"
},
style: { right: "5px", left: "auto" },
button: {
type: "settings",
classes: ["mistvideo-background","mistvideo-padding"],
},
window: { type: "submenu" }
}
}
},
submenu: {
type: "container",
style: {
"width": "80%",
"maxWidth": "25em",
"zIndex": 2
},
classes: ["mistvideo-padding","mistvideo-column","mistvideo-background"],
children: [
{type: "tracks"},
{
if: function(){
//only show the fullscreen and loop buttons here if the player size is less than 200px
if (("size" in this) && (this.size.width <= 300)) {
return true;
}
return false;
},
then: {
type: "container",
classes: ["mistvideo-center"],
children: [{
type: "loop",
classes: ["mistvideo-pointer"]
},
{
type: "fullscreen",
classes: ["mistvideo-pointer"]
}]
}
}
]
},
placeholder: {
type: "container",
classes: ["mistvideo","mistvideo-delay-display"],
children: [
{type: "placeholder"},
{type: "loading"},
{type: "error"}
]
},
secondaryVideo: function(switchThese){
return {
type: "hoverWindow",
classes: ["mistvideo"],
mode: "pos",
transition: {
hide: "left: 10px; bottom: -40px;",
show: "bottom: 10px;",
viewport: "left: 0; right: 0; top: 0; bottom: 0"
},
button: {
type: "container",
children: [{type: "videocontainer"}]
},
window: {
type: "switchVideo",
classes: ["mistvideo-controls","mistvideo-padding","mistvideo-background","mistvideo-pointer"],
containers: switchThese
}
};
}
},
css: {
skin: misthost+"/skins/default.css"
},
icons: {
blueprints: {
play: {
size: 45,
svg: '<path d="M6.26004984594 3.0550109625C5.27445051914 3.68940862462 4.67905105702 4.78142391497 4.67968264562 5.95354422781C4.67968264562 5.95354422781 4.70004942312 39.0717540916 4.70004942312 39.0717540916C4.70302341604 40.3033886636 5.36331656075 41.439734231 6.43188211452 42.0521884912C7.50044766829 42.6646427515 8.81469531629 42.6600161659 9.87892235656 42.0400537716C9.87892235656 42.0400537716 38.5612768409 25.4802882606 38.5612768409 25.4802882606C39.6181165777 24.8606067582 40.2663250096 23.7262617523 40.2636734301 22.5011460995C40.2610218505 21.2760304467 39.6079092743 20.1445019555 38.5483970356 19.5294009803C38.5483970356 19.5294009803 9.84567577375 2.9709566275 9.84567577375 2.9709566275C8.72898008118 2.32550764609 7.34527425735 2.35794451351 6.26004984594 3.0550109625C6.26004984594 3.0550109625 6.26004984594 3.0550109625 6.26004984594 3.0550109625" class="fill" />'
},
largeplay: {
size: 45,
svg: '<path d="M6.26004984594 3.0550109625C5.27445051914 3.68940862462 4.67905105702 4.78142391497 4.67968264562 5.95354422781C4.67968264562 5.95354422781 4.70004942312 39.0717540916 4.70004942312 39.0717540916C4.70302341604 40.3033886636 5.36331656075 41.439734231 6.43188211452 42.0521884912C7.50044766829 42.6646427515 8.81469531629 42.6600161659 9.87892235656 42.0400537716C9.87892235656 42.0400537716 38.5612768409 25.4802882606 38.5612768409 25.4802882606C39.6181165777 24.8606067582 40.2663250096 23.7262617523 40.2636734301 22.5011460995C40.2610218505 21.2760304467 39.6079092743 20.1445019555 38.5483970356 19.5294009803C38.5483970356 19.5294009803 9.84567577375 2.9709566275 9.84567577375 2.9709566275C8.72898008118 2.32550764609 7.34527425735 2.35794451351 6.26004984594 3.0550109625C6.26004984594 3.0550109625 6.26004984594 3.0550109625 6.26004984594 3.0550109625" class="stroke" />'
},
pause: {
size: 45,
svg: '<g><path d="m 7.5,38.531275 a 4.0011916,4.0011916 0 0 0 3.749999,3.96873 l 2.2812501,0 a 4.0011916,4.0011916 0 0 0 3.96875,-3.75003 l 0,-32.28123 a 4.0011916,4.0011916 0 0 0 -3.75,-3.96875 l -2.2812501,0 a 4.0011916,4.0011916 0 0 0 -3.968749,3.75 l 0,32.28128 z" class="fill" /><path d="m 27.5,38.531275 a 4.0011916,4.0011916 0 0 0 3.75,3.9687 l 2.28125,0 a 4.0011916,4.0011916 0 0 0 3.96875,-3.75 l 0,-32.28126 a 4.0011916,4.0011916 0 0 0 -3.75,-3.96875 l -2.28125,0 a 4.0011916,4.0011916 0 0 0 -3.96875,3.75 l 0,32.28131 z" class="fill" /></g>'
},
speaker: {
size: 45,
svg: '<path d="m 32.737813,5.2037363 c -1.832447,-1.10124 -4.200687,-0.8622 -5.771871,0.77112 0,0 -7.738819,8.0443797 -7.738819,8.0443797 0,0 -3.417976,0 -3.417976,0 -1.953668,0 -3.54696,1.65618 -3.54696,3.68694 0,0 0,9.58644 0,9.58644 0,2.03094 1.593292,3.68712 3.54696,3.68712 0,0 3.417976,0 3.417976,0 0,0 7.738819,8.04474 7.738819,8.04474 1.572104,1.63404 3.938942,1.8747 5.771871,0.77076 0,0 0,-34.5914997 0,-34.5914997 z" class="stroke semiFill toggle" />'
},
volume: {
size: {width:100, height:45},
svg: function(){
var uid = MistUtil.createUnique();
return '<defs><mask id="'+uid+'"><path d="m6.202 33.254 86.029-28.394c2.6348-0.86966 4.7433 0.77359 4.7433 3.3092v28.617c0 1.9819-1.6122 3.5773-3.6147 3.5773h-86.75c-4.3249 0-5.0634-5.5287-0.40598-7.1098" fill="#fff" /></mask></defs><rect mask="url(#'+uid+')" class="slider horizontal semiFill" width="100%" height="100%" /><path d="m6.202 33.254 86.029-28.394c2.6348-0.86966 4.7433 0.77359 4.7433 3.3092v28.617c0 1.9819-1.6122 3.5773-3.6147 3.5773h-86.75c-4.3249 0-5.0634-5.5287-0.40598-7.1098" class="stroke" /><rect x="0" y="0" width="100%" height="100%" fill="rgba(0,0,0,0.001)"/>'; //rectangle added because Edge won't trigger mouse events above transparent areas
}
},
muted: {
size: 45,
svg: '<g class="stroke" stroke-linecap="round" vector-effect="none" stroke-width="2"><path d="m25.587 5.2036c-1.8324-1.1012-4.2007-0.8622-5.7719 0.77112 0 0-7.7388 8.0444-7.7388 8.0444h-3.418c-1.9537 0-3.547 1.6562-3.547 3.6869v9.5864c0 2.0309 1.5933 3.6871 3.547 3.6871h3.418s7.7388 8.0447 7.7388 8.0447c1.5721 1.634 3.9389 1.8747 5.7719 0.77076v-34.591 z" /><path d="m30.032 27.86 9.8517-9.8517"/><path d="m30.032 18.008 9.8517 9.8517"/></g>'
},
fullscreen: {
size: 45,
svg: '<path d="m2.5 10.928v8.5898l4.9023-2.8008 9.6172 5.7832-9.6172 5.7832-4.9023-2.8008v8.5898h15.031l-4.9004-2.8008 9.8691-5.6387 9.8691 5.6387-4.9004 2.8008h15.031v-8.5898l-4.9023 2.8008-9.6172-5.7832 9.6172-5.7832 4.9023 2.8008v-8.5898h-15.033l4.9023 2.8008-9.8691 5.6387-9.8691-5.6387 4.9023-2.8008z" class="fill">'
},
loop: {
size: 45,
svg: '<path d="M 21.279283,3.749797 A 18.750203,18.750203 0 0 0 8.0304417,9.2511582 L 12.740779,13.961496 A 12.083464,12.083464 0 0 1 21.279283,10.416536 12.083464,12.083464 0 0 1 33.362748,22.5 12.083464,12.083464 0 0 1 21.279283,34.583464 12.083464,12.083464 0 0 1 12.740779,31.038504 l 3.063185,-3.063185 H 4.9705135 V 38.80877 L 8.0304417,35.748842 A 18.750203,18.750203 0 0 0 21.279283,41.250203 18.750203,18.750203 0 0 0 40.029486,22.5 18.750203,18.750203 0 0 0 21.279283,3.749797 Z" class="stroke semiFill toggle" />'
},
settings: {
size: 45,
svg: '<path d="m24.139 3.834-1.4785 4.3223c-1.1018 0.0088-2.2727 0.13204-3.2031 0.33594l-2.3281-3.9473c-1.4974 0.45304-2.9327 1.091-4.2715 1.9004l1.3457 4.3672c-0.87808 0.62225-1.685 1.3403-2.4023 2.1426l-4.1953-1.8223c-0.9476 1.2456-1.7358 2.6055-2.3457 4.0469l3.6523 2.7383c-0.34895 1.0215-0.58154 2.0787-0.69336 3.1523l-4.4531 0.98828c-0.00716 0.14696-0.011931 0.29432-0.015625 0.44141 0.00628 1.4179 0.17336 2.8307 0.49805 4.2109l4.5703 0.070312c0.32171 1.0271 0.75826 2.0138 1.3008 2.9434l-3.0391 3.4355c0.89502 1.2828 1.9464 2.4492 3.1309 3.4707l3.7363-2.6289c0.86307 0.64582 1.7958 1.192 2.7812 1.6289l-0.43555 4.541c1.4754 0.52082 3.0099 0.85458 4.5684 0.99414l1.4766-4.3223c0.05369 3e-3 0.10838 0.005313 0.16211 0.007812 1.024-0.0061 2.0436-0.12048 3.043-0.34375l2.3281 3.9473c1.4974-0.45304 2.9327-1.091 4.2715-1.9004l-1.3457-4.3672c0.87808-0.62225 1.685-1.3403 2.4023-2.1426l4.1953 1.8223c0.9476-1.2456 1.7358-2.6055 2.3457-4.0469l-3.6523-2.7383c0.34895-1.0215 0.58154-2.0787 0.69336-3.1523l4.4531-0.98828c0.0072-0.14698 0.011925-0.29432 0.015625-0.44141-0.0062-1.4179-0.17336-2.8307-0.49805-4.2109l-4.5703-0.070312c-0.32171-1.0271-0.75826-2.0138-1.3008-2.9434l3.0391-3.4355c-0.89502-1.2828-1.9464-2.4492-3.1309-3.4707l-3.7363 2.6289c-0.86307-0.64582-1.7958-1.192-2.7812-1.6289l0.43555-4.541c-1.4754-0.52082-3.0099-0.85457-4.5684-0.99414zm-1.6387 7.8789a10.786 10.786 0 0 1 10.787 10.787 10.786 10.786 0 0 1-10.787 10.787 10.786 10.786 0 0 1-10.787-10.787 10.786 10.786 0 0 1 10.787-10.787z" class="fill"/>'
},
loading: {
size: 100,
svg: '<path d="m49.998 8.7797e-4c-0.060547 0.0018431-0.12109 0.0037961-0.18164 0.0058593-0.1251 0.0015881-0.25012 0.0061465-0.375 0.013672h-0.001954c-27.388 0.30599-49.432 22.59-49.439 49.98 0.020074 2.6488 0.25061 5.292 0.68945 7.904 3.8792-24.231 24.77-42.065 49.311-42.096v-0.0058582h0.001954c4.3638 3.0803e-4 7.9013-3.5366 7.9021-7.9002 1.474e-4 -2.0958-0.83235-4.106-2.3144-5.5879-1.482-1.482-3.492-2.3145-5.5879-2.3144-6.5007e-4 -7.9369e-8 -0.0013001-7.9369e-8 -0.001954 0" class="semiFill spin"></path>'
},
timeout: {
size: 25,
svg: function(options){
if ((!options) || (!options.delay)) {
options = {delay: 10};
}
var delay = options.delay;
var uid = MistUtil.createUnique();
return '<defs><mask id="'+uid+'"><rect x="0" y="0" width="25" height="25" fill="#fff"/><rect x="-5" y="-5" width="17.5" height="35" fill="#000" transform="rotate(180,12.5,12.5)"><animateTransform attributeName="transform" type="rotate" from="0,12.5,12.5" to="180,12.5,12.5" begin="DOMNodeInsertedIntoDocument" dur="'+(delay/2)+'s" repeatCount="1"/></rect><rect x="0" y="0" width="12.5" height="25" fill="#fff"/><rect x="-5" y="-5" width="17.5" height="35" fill="#000" transform="rotate(360,12.5,12.5)"><animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="DOMNodeInsertedIntoDocument" dur="'+(delay)+'s" calcMode="discrete" repeatCount="1" /><animateTransform attributeName="transform" type="rotate" from="180,12.5,12.5" to="360,12.5,12.5" begin="DOMNodeInsertedIntoDocument+'+(delay/2)+'s" dur="'+(delay/2)+'s" repeatCount="1"/></rect><circle cx="12.5" cy="12.5" r="8" fill="#000"/></mask></defs><circle cx="12.5" cy="12.5" r="12.5" class="fill" mask="url(#'+uid+')"/>';
}
},
popout: {
size: 45,
svg: '<path d="m24.721 11.075c-12.96 0.049575-32.113 15.432-10.336 28.834-7.6763-7.9825-2.4795-21.824 10.336-22.19v5.5368l15.276-8.862-15.276-8.86v5.5419z" class="stroke fill"/>'
},
switchvideo: {
size: 45,
svg: '<path d="m8.4925 18.786c-3.9578 1.504-6.4432 3.632-6.4434 5.9982 2.183e-4 4.1354 7.5562 7.5509 17.399 8.1467v4.7777l10.718-6.2573-10.718-6.2529v4.5717c-6.9764-0.4712-12.229-2.5226-12.227-4.9859 6.693e-4 -0.72127 0.45868-1.4051 1.2714-2.0267zm28.015 0v3.9715c0.81164 0.62126 1.2685 1.3059 1.2692 2.0267-0.0014 1.4217-1.791 2.75-4.8021 3.6968-2.0515 0.82484-0.93693 3.7696 1.2249 2.9659 5.3088-1.8593 8.7426-3.8616 8.7514-6.6627-1.26e-4 -2.3662-2.4856-4.4942-6.4434-5.9982z" class="fill"/><rect rect x="10.166" y="7.7911" width="24.668" height="15.432" class="stroke"/>'
}
}
},
blueprints: {
container: function(){
var container = document.createElement("div");
return container;
},
video: function(){
var MistVideo = this;
//disable right click
MistUtil.event.addListener(MistVideo.video,"contextmenu",function(e){
e.preventDefault();
//also do something useful
//show submenu
MistVideo.container.setAttribute("data-show-submenu","");
MistVideo.container.removeAttribute("data-hide-submenu");
MistVideo.container.removeAttribute("data-hidecursor");
//onmouseout, hide submenu
var f = function(){
MistVideo.container.removeAttribute("data-show-submenu");
MistVideo.container.removeEventListener("mouseout",f);
}
MistUtil.event.addListener(MistVideo.container,"mouseout",f);
});
//hide the cursor after some time
MistVideo.video.hideTimer = false;
MistVideo.video.hideCursor = function(){
if (this.hideTimer) { clearTimeout(this.hideTimer); }
this.hideTimer = MistVideo.timers.start(function(){
MistVideo.container.setAttribute("data-hidecursor","");
var controlsContainer = MistVideo.container.querySelector(".mistvideo-controls");
if (controlsContainer) { controlsContainer.parentNode.setAttribute("data-hidecursor",""); }
},3e3);
};
MistUtil.event.addListener(MistVideo.video,"mousemove",function(){
MistVideo.container.removeAttribute("data-hidecursor");
var controlsContainer = MistVideo.container.querySelector(".mistvideo-controls");
if (controlsContainer) { controlsContainer.parentNode.removeAttribute("data-hidecursor"); }
MistVideo.video.hideCursor();
});
MistUtil.event.addListener(MistVideo.video,"mouseout",function(){
//stop the timer if no longer over the video element
if (MistVideo.video.hideTimer) { MistVideo.timers.stop(MistVideo.video.hideTimer); }
});
//improve autoplay behaviour
if (MistVideo.options.autoplay) {
//because Mist doesn't send data instantly (but real time), it can take a little while before canplaythrough is fired. Rather than wait, we can just start playing at the canplay event
var canplay = MistUtil.event.addListener(MistVideo.video,"canplay",function(){
if (MistVideo.player.api && MistVideo.player.api.paused) {
var promise = MistVideo.player.api.play();
if (promise) {
promise.catch(function(e){
if (MistVideo.destroyed) { return; }
MistVideo.log("Autoplay failed. Retrying with muted audio..");
//play has failed
if (MistVideo.info.hasVideo) {
//try again with sound muted
MistVideo.player.api.muted = true;
//safari doesn't send this event themselves..
MistUtil.event.send("volumechange",null,MistVideo.video);
var promise = MistVideo.player.api.play();
if (promise) {
promise.then(function(){
if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "success"; }
}).then(function(){
if (MistVideo.destroyed) { return; }
MistVideo.log("Autoplay worked! Video will be unmuted on mouseover if the page has been interacted with.");
if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "muted"; }
//show large "muted" icon
var largeMutedButton = MistVideo.skin.icons.build("muted",100);
MistUtil.class.add(largeMutedButton,"mistvideo-pointer");
MistVideo.container.appendChild(largeMutedButton);
MistUtil.event.addListener(largeMutedButton,"click",function(){
MistVideo.player.api.muted = false;
MistVideo.container.removeChild(largeMutedButton);
});
//listen for page interactions
var interacted = false;
var i = function(){
interacted = true;
document.body.removeEventListener("click",i);
};
MistUtil.event.addListener(document.body,"click",i,MistVideo.video);
//turn sound back on on mouseover
var f = function(){
if (interacted) {
MistVideo.player.api.muted = false;
MistVideo.video.removeEventListener("mouseenter",f);
MistVideo.log("Re-enabled sound");
}
};
MistUtil.event.addListener(MistVideo.video,"mouseenter",f);
//remove all the things when unmuted
var fu = function(){
if (!MistVideo.video.muted) {
if (largeMutedButton.parentNode) {
MistVideo.container.removeChild(largeMutedButton);
}
MistVideo.video.removeEventListener("volumechange",fu);
document.body.removeEventListener("click",i);
MistVideo.video.removeEventListener("mouseenter",f);
}
}
MistUtil.event.addListener(MistVideo.video,"volumechange",fu);
}).catch(function(){
if (MistVideo.destroyed) { return; }
MistVideo.log("Autoplay failed even with muted video. Unmuting and showing play button.");
//wait 5 seconds and then pause the download
MistVideo.timers.start(function(){
if (MistVideo.player.api.paused) {
//don't question it
//if the video is paused, also request the player api to pause
//for example, for mews, this would pause the download
MistVideo.player.api.pause();
if (MistVideo.monitor) { MistVideo.monitor.destroy(); }
}
},5e3);
if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "failed"; }
MistVideo.player.api.muted = false;
//play has failed
//show large centered play button
var largePlayButton = MistVideo.skin.icons.build("largeplay",150);
MistUtil.class.add(largePlayButton,"mistvideo-pointer");
MistVideo.container.appendChild(largePlayButton);
//start playing on click
MistUtil.event.addListener(largePlayButton,"click",function(){
if (MistVideo.player.api.paused) {
MistVideo.player.api.play();
}
});
//remove large button on play
var f = function (){
MistVideo.container.removeChild(largePlayButton);
MistVideo.video.removeEventListener("play",f);
};
MistUtil.event.addListener(MistVideo.video,"play",f);
});
}
}
else if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "failed"; }
});
}
}
else if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "success"; }
MistUtil.event.removeListener(canplay); //only fire once
});
}
return this.video;
},
videocontainer: function(){
return this.UI.buildStructure(this.skin.structure.videocontainer);
},
secondaryVideo: function(o){
if (!o) { o = {}; }
if (!o.options) { o.options = {}; }
var MistVideo = this;
if (!("secondary" in MistVideo)) {
MistVideo.secondary = [];
}
var options = MistUtil.object.extend({},MistVideo.options);
options = MistUtil.object.extend(options,o.options);
MistVideo.secondary.push(options);
var pointer = {
primary: MistVideo,
secondary: false
};
options.target = document.createElement("div");
delete options.container;
var mvo = {};
options.MistVideoObject = mvo;
MistUtil.event.addListener(options.target,"initialized",function(){
var mv = mvo.reference;
//options.callback = function(mv){
options.MistVideo = mv; //tell the main video we exist
pointer.secondary = mv;
mv.player.api.muted = true; //disable sound
mv.player.api.loop = false; //disable looping, master will do that for us
//as all event listeners are tied to the video element (not the container), events don't bubble up and disturb higher players
//prevent clicks on the control container from bubbling down to underlying elements
var controlContainers = options.target.querySelectorAll(".mistvideo-controls");
for (var i = 0; i < controlContainers.length; i++) {
MistUtil.event.addListener(controlContainers[i],"click",function(e){
e.stopPropagation();
});
}
//ensure the state of the main player is copied
MistUtil.event.addListener(MistVideo.video,"play",function(){
if (mv.player.api.paused) { mv.player.api.play(); }
},options.target);
MistUtil.event.addListener(MistVideo.video,"pause",function(e){
if (!mv.player.api.paused) { mv.player.api.pause(); }
},options.target);
MistUtil.event.addListener(MistVideo.video,"seeking",function(){
mv.player.api.currentTime = this.currentTime;
},options.target);
MistUtil.event.addListener(MistVideo.video,"timeupdate",function(){
if (mv.player.api.pausedesync) { return; }
//sync
var desync = this.currentTime - mv.player.api.currentTime;
var adesync = Math.abs(desync);
if (adesync > 30) {
mv.player.api.pausedesync = true;
mv.player.api.currentTime = this.currentTime;
mv.log("Re-syncing with main video by seeking (desync: "+desync+"s)");
}
else if (adesync > 0.01) {
var rate = 0.1;
if (adesync < 1) {
rate = 0.05;
}
rate = 1 + rate * Math.sign(desync);
if (rate != mv.player.api.playbackRate) {
mv.log("Re-syncing by changing the playback rate (desync: "+Math.round(desync*1e3)+"ms, rate: "+rate+")");
}
mv.player.api.playbackRate = rate;
}
else if (mv.player.api.playbackRate != 1) {
mv.player.api.playbackRate = 1;
mv.log("Sync with main video achieved (desync: "+Math.round(desync*1e3)+"ms)");
}
},options.target);
MistUtil.event.addListener(mv.video,"seeked",function(){
//don't attempt to correct sync if we're already seeking
mv.player.api.pausedesync = false;
});
});
options.skin = MistUtil.object.extend({},MistVideo.skin,true);
options.skin.structure.main = MistUtil.object.extend({},MistVideo.skin.structure.secondaryVideo(pointer));
mistPlay(MistVideo.stream,options);
return options.target;
},
switchVideo: function(options){
var container = document.createElement("div");
container.appendChild(this.skin.icons.build("switchvideo"));
MistUtil.event.addListener(container,"click",function(){
var primary = options.containers.primary;
var secondary = options.containers.secondary;
function findVideo(startAt,matchTarget) {
if (startAt.video.currentTarget == matchTarget) {
return startAt.video;
}
if (startAt.secondary) {
for (var i = 0; i < startAt.secondary.length; i++) {
var result = findVideo(startAt.secondary[i].MistVideo,matchTarget);
if (result) { return result; }
}
}
return false;
}
//find video element in primary/secondary containers
var pv = findVideo(primary,primary.options.target);
var sv = findVideo(primary,secondary.options.target);
//prevent pausing the primary
var playit = !pv.paused;
//switch them
var place = document.createElement("div");
sv.parentElement.insertBefore(place,sv);
pv.parentElement.insertBefore(sv,pv);
place.parentElement.insertBefore(pv,place);
place.parentElement.removeChild(place);
if (playit) {
try {
pv.play();
sv.play();
} catch(e) {}
}
var tmp = {
width: pv.style.width,
height: pv.style.height,
currentTarget: pv.currentTarget
};/*
pv.style.width = sv.style.width;
pv.style.height = sv.style.height;
sv.style.width = tmp.width;
sv.style.height = tmp.height;*/
pv.currentTarget = sv.currentTarget;
sv.currentTarget = tmp.currentTarget;
primary.player.resizeAll();
});
return container;
},
controls: function(){
if ((this.options.controls) && (this.options.controls != "stock")) {
MistUtil.class.add(this.container,"hasControls");
var container = this.UI.buildStructure(this.skin.structure.controls);
if (MistUtil.isTouchDevice() && this.size && (this.size.width > 300)) {
container.style.zoom = 1.5;
}
return container;
}
},
submenu: function(){
return this.UI.buildStructure(this.skin.structure.submenu);
},
hoverWindow: function(options){
//rewrite to a container with specific classes and continue the buildStructure call
var structure = {
type: "container",
classes: ("classes" in options ? options.classes : []),
children: ("children" in options ? options.children : [])
};
structure.classes.push("hover_window_container");
if (!("classes" in options.window)) { options.window.classes = []; }
options.window.classes.push("inner_window");
options.window.classes.push("mistvideo-container");
options.window = {
type: "container",
classes: ["outer_window"],
children: [options.window]
};
if (!("classes" in options.button)) { options.button.classes = []; }
options.button.classes.push("pointer");
switch (options.mode) {
case "left":
structure.classes.push("horizontal");
structure.children = [options.window,options.button];
break;
case "right":
structure.classes.push("horizontal");
structure.children = [options.button,options.window];
break;
case "top":
structure.classes.push("vertical");
structure.children = [options.button,options.window];
break;
case "bottom":
structure.classes.push("vertical");
structure.children = [options.window,options.button];
break;
case "pos":
structure.children = [options.button,options.window];
if (!("classes" in options.window)) { options.window.classes = []; }
break;
default:
throw "Unsupported mode for structure type hoverWindow";
break;
}
if ("transition" in options) {
if (!("css" in structure)) { structure.css = []; }
structure.css.push(
".hover_window_container:hover > .outer_window:not([data-hidecursor]) > .inner_window { "+options.transition.show+" }\n"+
".hover_window_container > .outer_window { "+options.transition.viewport+" }\n"+
".hover_window_container > .outer_window > .inner_window { "+options.transition.hide+" }"
);
}
structure.classes.push(options.mode);
return this.UI.buildStructure(structure);
},
draggable: function(options){
var container = this.skin.blueprints.container(options);
var MistVideo = this;
var button = this.skin.icons.build("fullscreen",16);
MistUtil.class.remove(button,"fullscreen");
MistUtil.class.add(button,"draggable-icon");
container.appendChild(button);
button.style.alignSelf = "flex-end";
button.style.position = "absolute";
button.style.cursor = "move";
var offset = {};
var move = function(e){
container.style.left = (e.clientX - offset.x)+"px";
container.style.top = (e.clientY - offset.y)+"px";
};
var stop = function(e){
window.removeEventListener("mousemove",move);
window.removeEventListener("click",stop);
MistUtil.event.addListener(button,"click",start);
};
var start = function(e){
e.stopPropagation();
button.removeEventListener("click",start);
offset.x = MistVideo.container.getBoundingClientRect().left - (container.getBoundingClientRect().left - e.clientX);
offset.y = MistVideo.container.getBoundingClientRect().top - (container.getBoundingClientRect().top - e.clientY);
container.style.position = "absolute";
container.style.right = "auto";
container.style.bottom = "auto";
MistVideo.container.appendChild(container);
move(e);
//container.style.resize = "both";
MistUtil.event.addListener(window,"mousemove",move,container);
MistUtil.event.addListener(window,"click",stop,container);
};
MistUtil.event.addListener(button,"click",start);
return container;
},
progress: function(){
//the outer container is div.progress, which contains div.bar and multiple div.buffer-s
var margincontainer = document.createElement("div");
var container = document.createElement("div");
margincontainer.appendChild(container);
container.kids = {};
container.kids.bar = document.createElement("div");
container.kids.bar.className = "bar";
container.appendChild(container.kids.bar);
var video = this.video;
var MistVideo = this;
var first = Infinity;
if (MistVideo.info && MistVideo.info.meta && MistVideo.info.meta.tracks) {
for (var i in MistVideo.info.meta.tracks) {
if (MistVideo.info.meta.tracks[i].firstms*1e-3 < first) {
first = MistVideo.info.meta.tracks[i].firstms*1e-3;
}
}
}
if (first == Infinity) {
first = 0;
}
function firsts() {
if (MistVideo.player.api.duration < first) { return 0; }
return first;
}
function getBufferWindow() {
var buffer_window = MistVideo.info.meta.buffer_window;
if (typeof buffer_window == "undefined") {
//for some reason, buffer_window is not defined (liveDVR?)
//just assume we can seek in our own buffer
if (MistVideo.player && MistVideo.player.api && MistVideo.player.api.buffered && MistVideo.player.api.buffered.length) {
buffer_window = (MistVideo.player.api.duration - MistVideo.player.api.buffered.start(0))*1e3;
}
else {
//no buffer of our own either? we'll just assume we have a minute
buffer_window = 60e3;
}
}
return buffer_window *= 1e-3;
}
//these functions update the states
container.updateBar = function(currentTime){
if (this.kids.bar) {
if (!isFinite(MistVideo.player.api.duration)) { this.kids.bar.style.display = "none"; return; }
else { this.kids.bar.style.display = ""; }
w = Math.min(1,Math.max(0,this.time2perc(currentTime)));
this.kids.bar.style.width = w*100+"%";
}
};
container.time2perc = function(time) {
if (!isFinite(MistVideo.player.api.duration)) { return 0; }
var result = 0;
if (MistVideo.info.type == "live") {
var buffer_window = getBufferWindow();
result = (time - MistVideo.player.api.duration + buffer_window) / buffer_window;
}
else {
result = (time - firsts()) / (MistVideo.player.api.duration - firsts());
}
return Math.min(1,Math.max(0,result));
}
container.buildBuffer = function(start,end){
var buffer = document.createElement("div");
buffer.className = "buffer";
buffer.style.left = (this.time2perc(start)*100)+"%";
buffer.style.width = ((this.time2perc(end) - this.time2perc(start))*100)+"%";
return buffer;
};
container.updateBuffers = function(buffers){
//clear old buffer-divs
var old = this.querySelectorAll(".buffer");
for (var i = 0; i < old.length; i++) {
this.removeChild(old[i]);
}
//add new buffer-divs
if (buffers) {
for (var i = 0; i < buffers.length; i++) {
this.appendChild(this.buildBuffer(
buffers.start(i),
buffers.end(i)
));
}
}
};
//obey video states
var lastBufferUpdate = 0;
var bufferTimer = false;
MistUtil.event.addListener(video,"progress",function(){
function updateBuffers(){
//limit fire to once per second
if (new Date().getTime() - lastBufferUpdate > 1e3) {
container.updateBuffers(MistVideo.player.api.buffered);
lastBufferUpdate = new Date().getTime();
}
else if (!bufferTimer) {
bufferTimer = MistVideo.timers.start(function(){
updateBuffers();
bufferTimer = false;
},1e3);
}
}
updateBuffers();
},container);
var lastBarUpdate = 0;
var barTimer = false;
MistUtil.event.addListener(video,"timeupdate",function(){
function updateBar(){
//console.log(video.currentTime,"timeupdate");
//limit fire to once per 0.2 second
if ((new Date().getTime() - lastBarUpdate > 200) && (!dragging)) {
container.updateBar(MistVideo.player.api.currentTime);
lastBarUpdate = new Date().getTime();
}
else if (!barTimer) {
barTimer = MistVideo.timers.start(function(){
updateBar();
barTimer = false;
},1e3);
}
}
updateBar();
},container);
MistUtil.event.addListener(video,"seeking",function(){
container.updateBar(MistVideo.player.api.currentTime);
},container);
//control video states
container.getPos = function(e){
var perc = MistUtil.getPos(this,e);
if (MistVideo.info.type == "live") {
//live mode: seek in DVR window
var bufferWindow = getBufferWindow();
//assuming the "right" part or the progressbar is at true live
return (perc-1) * bufferWindow + MistVideo.player.api.duration;
}
else {
//VOD mode
if (!isFinite(MistVideo.player.api.duration)) { return false; }
return perc * (MistVideo.player.api.duration - firsts()) + firsts();
}
};
//seeking
container.seek = function(e){
var pos = this.getPos(e);
MistVideo.player.api.currentTime = pos;
};
MistUtil.event.addListener(margincontainer,"mouseup",function(e){
if (e.which != 1) { return;} //only respond to left mouse clicks
container.seek(e);
});
//hovering
var tooltip = MistVideo.UI.buildStructure({type:"tooltip"});
tooltip.style.opacity = 0;
container.appendChild(tooltip);
MistUtil.event.addListener(margincontainer,"mouseout",function(){
if (!dragging) { tooltip.style.opacity = 0; }
});
container.moveTooltip = function(e){
var secs = this.getPos(e);
if (secs === false) {
//the tooltip isn't going to make sense
tooltip.style.opacity = 0;
return;
}
if (MistVideo.options.useDateTime && MistVideo.info && MistVideo.info.unixoffset) {
tooltip.setText(MistUtil.format.ago(new Date(MistVideo.info.unixoffset + secs*1e3)));
}
else {
tooltip.setText(MistUtil.format.time(secs));
}
tooltip.style.opacity = 1;
var perc = MistUtil.getPos(this,e);// e.clientX - this.getBoundingClientRect().left;
var pos = {bottom:20};
//if the cursor is on the left side of the progress bar, show tooltip on the right of the cursor, otherwise, show it on the left side
if (perc > 0.5) {
pos.right = (1-perc)*100+"%";
tooltip.triangle.setMode("bottom","right");
}
else {
pos.left = perc*100+"%";
tooltip.triangle.setMode("bottom","left");
}
tooltip.setPos(pos);
};
MistUtil.event.addListener(margincontainer,"mousemove",function(e){
container.moveTooltip(e);
});
//TODO for live seeking, maybe show a tooltip at start and end with the apprioprate times as well?
//dragging
var dragging = false;
MistUtil.event.addListener(margincontainer,"mousedown",function(e){
if (e.which != 1) { return;} //only respond to left mouse clicks
dragging = true;
container.updateBar(container.getPos(e));
var moveListener = MistUtil.event.addListener(document,"mousemove",function(e){
container.updateBar(container.getPos(e));
container.moveTooltip(e);
},container);
var upListener = MistUtil.event.addListener(document,"mouseup",function(e){
if (e.which != 1) { return;} //only respond to left mouse clicks
dragging = false;
//remove mousemove and up
MistUtil.event.removeListener(moveListener);
MistUtil.event.removeListener(upListener);
tooltip.style.opacity = 0;
//trigger seek
if ((!e.path) || (MistUtil.array.indexOf(e.path,margincontainer) < 0)) { //it's not already triggered by onmouseup
container.seek(e);
}
},container);
});
return margincontainer;
},
play: function(){
var MistVideo = this;
var button = document.createElement("div");
button.appendChild(this.skin.icons.build("play"));
button.appendChild(this.skin.icons.build("pause"));
button.setState = function(state){
this.setAttribute("data-state",state);
};
button.setState("paused");
var video = this.video;
//obey video states
MistUtil.event.addListener(video,"playing",function(){
button.setState("playing");
MistVideo.options.autoplay = true;
},button);
MistUtil.event.addListener(video,"pause",function(){
button.setState("paused");
},button);
MistUtil.event.addListener(video,"paused",function(){
button.setState("paused");
},button);
MistUtil.event.addListener(video,"ended",function(){
button.setState("paused");
},button);
//control video states
MistUtil.event.addListener(button,"click",function(){
if (MistVideo.player.api.error) { MistVideo.player.api.load(); }
if (MistVideo.player.api.paused) {
MistVideo.player.api.play();
}
else {
MistVideo.player.api.pause();
MistVideo.options.autoplay = false;
}
});
//toggle play/pause on click on video container
if (MistVideo.player.api) {
MistUtil.event.addListener(MistVideo.video,"click",function(){
if (MistVideo.player.api.paused) { MistVideo.player.api.play(); }
else if (!MistUtil.isTouchDevice()) {
MistVideo.player.api.pause();
MistVideo.options.autoplay = false;
}
},button);
}
return button;
},
speaker: function(){
if (!this.player.api || !("muted" in this.player.api)) { return false; }
var hasaudio = false;
var tracks = this.info.meta.tracks;
for (var i in tracks) {
if (tracks[i].type == "audio") { hasaudio = true; break; }
}
if (!hasaudio) { return false; }
var button = this.skin.icons.build("speaker");
var MistVideo = this;
var video = this.video;
//obey video states
if ((!MistVideo.player.api.volume) || (MistVideo.player.api.muted)) {
MistUtil.class.add(button,"off");
}
MistUtil.event.addListener(video,"volumechange",function(){
if ((MistVideo.player.api.volume) && (!MistVideo.player.api.muted)) {
MistUtil.class.remove(button,"off");
}
else {
MistUtil.class.add(button,"off");
}
},button);
//control video states
MistUtil.event.addListener(button,"click",function(e){
MistVideo.player.api.muted = !MistVideo.player.api.muted;
});
return button;
},
volume: function(options){
if (!this.player.api || !("volume" in this.player.api)) { return false; }
var hasaudio = false;
var tracks = this.info.meta.tracks;
for (var i in tracks) {
if (tracks[i].type == "audio") { hasaudio = true; break; }
}
if (!hasaudio) { return false; }
var container = document.createElement("div");
var button = this.skin.icons.build("volume",("size" in options ? options.size : false));
container.appendChild(button);
var MistVideo = this;
button.mode = ("mode" in options ? options.mode : "vertical");
if (button.mode == "vertical") { button.style.transform = "rotate(90deg)"; } //TODO do this properly
//pad values with this amount (to allow for line thickness)
button.margin = {
start: 0.15,
end: 0.1
};
var video = this.video;
//obey video states
button.set = function(perc){
perc = 100 - 100 * Math.pow(1 - perc/100,2); //transform back from quadratic
//add padding
if ((perc != 100) && (perc != 0)) {
perc = this.addPadding(perc/100) * 100;
}
var sliders = button.querySelectorAll(".slider");
for (var i = 0; i < sliders.length; i++) {
sliders[i].setAttribute(button.mode == "vertical" ? "height" : "width",perc+"%");
}
}
MistUtil.event.addListener(video,"volumechange",function(){
button.set(MistVideo.player.api.muted ? 0 : (MistVideo.player.api.volume*100));
},button);
//apply initial video state
button.set(MistVideo.player.api.muted ? 0 : (MistVideo.player.api.volume*100));
//apply stored volume
var initevent = MistUtil.event.addListener(video,"loadedmetadata",function(){
if (('localStorage' in window) && (localStorage != null) && ('mistVolume' in localStorage)) {
MistVideo.player.api.volume = localStorage['mistVolume'];
}
MistUtil.event.removeListener(initevent);
});
button.addPadding = function(actual){
return actual * (1 - (this.margin.start + this.margin.end)) + this.margin.start;
}
button.removePadding = function(padded){
var val = (padded - this.margin.start) / (1 - (this.margin.start + this.margin.end));
val = Math.max(val,0);
val = Math.min(val,1);
return val;
}
//control video states
button.getPos = function(e){
return this.addPadding(MistUtil.getPos(this,e));
};
//set volume
button.setVolume = function(e){
MistVideo.player.api.muted = false;
var val = this.removePadding(MistUtil.getPos(this,e));
val = 1 - Math.pow((1-val),0.5); //transform to quadratic range between 0 and 1
MistVideo.player.api.volume = val;
try {
localStorage["mistVolume"] = MistVideo.player.api.volume;
}
catch (e) {}
};
MistUtil.event.addListener(button,"mouseup",function(e){
if (e.which != 1) { return;} //only respond to left mouse clicks
button.setVolume(e);
});
//hovering
var tooltip = MistVideo.UI.buildStructure({type:"tooltip"});
tooltip.style.opacity = 0;
tooltip.triangle.setMode("bottom","right");
container.style.position = "relative";
container.appendChild(tooltip);
MistUtil.event.addListener(button,"mouseover",function(){
tooltip.style.opacity = 1;
});
MistUtil.event.addListener(button,"mouseout",function(){
if (!dragging) { tooltip.style.opacity = 0; }
});
button.moveTooltip = function(e){
tooltip.style.opacity = 1;
var pos = MistUtil.getPos(this,e);
tooltip.setText(Math.round(this.removePadding(pos)*100)+"%");
tooltip.setPos({
bottom: 46,
right: 100*(1-pos)+"%"
});
};
MistUtil.event.addListener(button,"mousemove",function(e){
button.moveTooltip(e);
});
//dragging
var dragging = false;
MistUtil.event.addListener(button,"mousedown",function(e){
if (e.which != 1) { return;} //only respond to left mouse clicks
dragging = true;
//button.set(button.getPos(e)*100);
button.setVolume(e);
tooltip.style.opacity = 1;
var moveListener = MistUtil.event.addListener(document,"mousemove",function(e){
//button.set(button.getPos(e)*100);
button.setVolume(e);
button.moveTooltip(e);
},button);
var upListener = MistUtil.event.addListener(document,"mouseup",function(e){
if (e.which != 1) { return;} //only respond to left mouse clicks
dragging = false;
//remove mousemove and up
MistUtil.event.removeListener(moveListener);
MistUtil.event.removeListener(upListener);
tooltip.style.opacity = 0;
//trigger volumechange
if ((!e.path) || (MistUtil.array.indexOf(e.path,button) < 0)) { //it's not already triggered by onmouseup
button.setVolume(e);
}
},button);
});
return container;
},
currentTime: function(){
var MistVideo = this;
var container = document.createElement("div");
var text = document.createTextNode("");
container.appendChild(text);
var video = MistVideo.player.api;
var formatTime = MistUtil.format.time;
container.set = function(){
var v = MistVideo.player.api.currentTime;
var t;
if (MistVideo.options.useDateTime && MistVideo.info && MistVideo.info.unixoffset) {
var d = new Date(MistVideo.info.unixoffset + v*1e3);
t = MistUtil.format.ago(d);
container.setAttribute("title",MistUtil.format.ago(d,34560e6));
}
else {
t = formatTime(v);
container.setAttribute("title",t);
}
text.nodeValue = t;
};
container.set();
MistUtil.event.addListener(MistVideo.video,"timeupdate",function(){
container.set();
},container);
MistUtil.event.addListener(MistVideo.video,"seeking",function(){
container.set();
},container);
return container;
},
totalTime: function(){
var MistVideo = this;
var container = document.createElement("div");
var text = document.createTextNode("");
container.appendChild(text);
var video = this.player.api;
if (MistVideo.info.type == "live") {
text.nodeValue = "live";
container.className = "live";
}
else {
container.set = function(duration){
if (isNaN(duration) || !isFinite(duration)) {
this.style.display = "none";
return;
}
this.style.display = "";
if (MistVideo.options.useDateTime && MistVideo.info && MistVideo.info.unixoffset) {
var t = new Date(duration*1e3 + MistVideo.info.unixoffset)
text.nodeValue = MistUtil.format.ago(t);
container.setAttribute("title",MistUtil.format.ago(t,34560e6)); //format as if more than a year ago
}
else {
text.nodeValue = MistUtil.format.time(duration);
container.setAttribute("title",text.nodeValue);
}
};
MistUtil.event.addListener(MistVideo.video,"durationchange",function(){
var v = MistVideo.player.api.duration;
container.set(v);
},container);
}
return container;
},
playername: function(){
if (!this.playerName || !(this.playerName in mistplayers)) { return; }
var container = document.createElement("span");
container.appendChild(document.createTextNode(mistplayers[this.playerName].name));
return container;
},
mimetype: function(){
if (!this.source) { return; }
var a = document.createElement("a");
a.href = this.source.url;
a.target = "_blank";
a.title = a.href+" ("+this.source.type+")";
a.appendChild(document.createTextNode(MistUtil.format.mime2human(this.source.type)));
return a;
},
logo: function(options){
if ("element" in options) {
return options.element;
}
if ("src" in options) {
var img = document.createElement("img");
img.src = options.src;
return img;
}
},
settings: function(){
var MistVideo = this;
var button = this.skin.icons.build("settings");
var touchmode = (typeof document.ontouchstart != "undefined");
MistUtil.event.addListener(button,"click",function(){
if (MistVideo.container.hasAttribute("data-show-submenu")) {
if (touchmode) {
MistVideo.container.setAttribute("data-hide-submenu",""); //don't show even when hovering
}
MistVideo.container.removeAttribute("data-show-submenu");
}
else {
MistVideo.container.setAttribute("data-show-submenu","");
MistVideo.container.removeAttribute("data-hide-submenu");
}
});
return button;
},
loop: function(){
if ((!("loop" in this.player.api)) || (this.info.type == "live")) { return; }
var MistVideo = this;
var button = this.skin.icons.build("loop");
var video = this.video;
var api = this.player.api;
button.set = function(){
if (api.loop) {
MistUtil.class.remove(this,"off");
}
else {
MistUtil.class.add(this,"off");
}
};
MistUtil.event.addListener(button,"click",function(e){
api.loop = !api.loop;
this.set();
});
button.set();
return button;
},
fullscreen: function(){
if ((!("setSize" in this.player)) || (!this.info.hasVideo) || (this.source.type.split("/")[1] == "audio")) { return; }
var MistVideo = this;
//determine which functions to use..
var requestfuncs = ["requestFullscreen","webkitRequestFullscreen","mozRequestFullScreen","msRequestFullscreen","webkitEnterFullscreen"];
var fullscreenableElements = [function(){ return MistVideo.container;},function(){ return MistVideo.video;}]; //if the functions are not available on the container div, try them again on the video element (for iphone)
var funcs = false;
main:
for (var j in fullscreenableElements) {
for (var i in requestfuncs) {
if (requestfuncs[i] in fullscreenableElements[j]()) {
funcs = {};
funcs.request = function(){ return funcs.fullscreenableElement()[requestfuncs[i]](); }
var cancelfuncs = ["exitFullscreen","webkitCancelFullScreen","mozCancelFullScreen","msExitFullscreen","webkitExitFullscreen"];
var elementfuncs = ["fullscreenElement","webkitFullscreenElement","mozFullScreenElement","msFullscreenElement","webkitFullscreenElement"];
var eventname = ["fullscreenchange","webkitfullscreenchange","mozfullscreenchange","MSFullscreenChange","webkitfullscreenchange"];
funcs.cancel = function() { return document[cancelfuncs[i]](); };
funcs.element = function() { return document[elementfuncs[i]]; };
funcs.event = eventname[i];
funcs.fullscreenableElement = fullscreenableElements[j];
break main; //break to the main loop
}
}
}
if (!funcs) {
//fake fullscreen mode!
funcs = {
event: "fakefullscreenchange",
fullscreenableElement: function (){ return MistVideo.container; },
};
var keydownfunc = function(e){
switch (e.key) {
case "Escape": {
funcs.cancel();
break;
}
}
};
funcs.request = function(){
funcs.element = function(){ return MistVideo.container; };
MistUtil.event.send(funcs.event,null,document);
document.addEventListener("keydown",keydownfunc);
return true;
}
funcs.cancel = function(){
funcs.element = function(){ return null; }
document.removeEventListener("keydown",keydownfunc);
MistUtil.event.send(funcs.event,null,document);
return true;
}
funcs.element = function(){ return null; }
}
var button = this.skin.icons.build("fullscreen");
function onclick(){
if (funcs.element()) {
funcs.cancel();
}
else {
funcs.request();
}
}
MistUtil.event.addListener(button,"click",onclick);
MistUtil.event.addListener(MistVideo.video,"dblclick",onclick);
MistUtil.event.addListener(document,funcs.event,function() {
if (funcs.element() == funcs.fullscreenableElement()) {
MistVideo.container.setAttribute("data-fullscreen","");
}
else if (MistVideo.container.hasAttribute("data-fullscreen")) {
MistVideo.container.removeAttribute("data-fullscreen");
}
MistVideo.player.resizeAll();
},button);
return button;
},
tracks: function(){
if ((!this.info) || (!this.video)) { return; }
var MistVideo = this;
var table = document.createElement("table");
function build(tracks) {
//empty table
MistUtil.empty(table);
tracks = MistUtil.tracks.parse(tracks);
var selections = {};
var checkboxes = {};
function changeToTracks(type,value){
if (value) { MistVideo.log("User selected "+type+" track with id "+value); }
else {
MistVideo.log("User selected automatic track selection for "+type);
MistUtil.event.send("trackSetToAuto",type,MistVideo.video);
}
if (!MistVideo.options.setTracks) { MistVideo.options.setTracks = {}; }
MistVideo.options.setTracks[type] = value;
if ((value === true) && selections[type]) {
MistUtil.event.send("change",null,selections[type]);
}
if ("setTrack" in MistVideo.player.api) {
return MistVideo.player.api.setTrack(type,value);
}
else {
//gather what tracks we should use
var usetracks = {};
for (var i in selections) {
if ((i == "subtitle") || (selections[i].value == "")) { continue; } //subtitle tracks are handled seperately
usetracks[i] = selections[i].value;
}
if (value != ""){ usetracks[type] = value; }
//use setTracks
if ("setTracks" in MistVideo.player.api) {
return MistVideo.player.api.setTracks(usetracks);
}
//use setSource
if ("setSource" in MistVideo.player.api) {
return MistVideo.player.api.setSource(
MistUtil.http.url.addParam(MistVideo.source.url,usetracks)
);
}
}
}
//sort the tracks to ["audio","video",..,"subtitle",..etc]
var tracktypes = MistUtil.object.keys(tracks,function(keya,keyb){
function order(value) {
switch (value) {
case "audio": return "aaaaaaa";
case "video": return "aaaaaab";
default: return value;
}
}
if (order(keya) > order(keyb)) { return 1; }
if (order(keya) < order(keyb)) { return -1; }
return 0;
});
for (var j in tracktypes) {
var type = tracktypes[j];
var t = tracks[type];
if (type == "subtitle") {
if ((!("player" in MistVideo)) || (!("api" in MistVideo.player)) || (!("setSubtitle" in MistVideo.player.api))) {
//this player does not support adding subtitles, don't show track selection in the interface
MistVideo.log("Subtitle selection was disabled as this player does not support it.");
continue;
}
//check if the VTT output is available
var subtitleSource = false;
for (var i in MistVideo.info.source) {
var source = MistVideo.info.source[i];
//this is a subtitle source, and it's the same protocol (HTTP/HTTPS) as the video source
if ((source.type == "html5/text/vtt") && (MistUtil.http.url.split(source.url).protocol == MistUtil.http.url.split(MistVideo.source.url).protocol.replace(/^ws/,"http"))) {
subtitleSource = source.url.replace(/.srt$/,".vtt");
break;
}
}
if (!subtitleSource) {
//if we can't find a subtitle output, don't show track selection in the interface
MistVideo.log("Subtitle selection was disabled as an SRT source could not be found.");
continue;
}
//also add the option to disable subtitles
t[""] = { trackid: "", different: { none:"None" } };
}
var tr = document.createElement("tr");
tr.title = "The current "+type+" track";
table.appendChild(tr);
if ("decodingIssues" in MistVideo.skin.blueprints) { //this is dev mode
var cell = document.createElement("td");
tr.appendChild(cell);
if (type != "subtitle") {
var checkbox = document.createElement("input");
checkbox.setAttribute("type","checkbox");
checkbox.setAttribute("checked","");
checkbox.setAttribute("title","Whether or not to play "+type);
checkbox.trackType = type;
cell.appendChild(checkbox);
checkboxes[type] = checkbox;
if (MistVideo.options.setTracks && (MistVideo.options.setTracks[type])) {
if (MistVideo.options.setTracks[type] == "none") {
checkbox.checked = false;
}
else {
checkbox.checked = true;
}
}
MistUtil.event.addListener(checkbox,"change",function(){
//make sure at least one checkbox is checked
var n = 0;
for (var i in checkboxes) {
if (checkboxes[i].checked) {
n++;
}
}
if (n == 0) {
for (var i in checkboxes) {
if (i == this.trackType) { continue; }
if (!checkboxes[i].checked) {
checkboxes[i].checked = true;
changeToTracks(i,true);
break;
}
}
}
var value = "none";
if (this.checked) {
if (this.trackType in selections) {
value = selections[this.trackType].value;
}
else {
value = "auto";
}
}
else {
value = "none";
}
changeToTracks(this.trackType,(this.checked ? value : "none"));
});
MistUtil.event.addListener(MistVideo.video,"playerUpdate_trackChanged",function(e){
if (e.message.type != type) { return; }
if (e.message.value == "none") { this.checked = false; }
else { this.checked = true; }
},select);
}
}
var header = document.createElement("td");
tr.appendChild(header);
header.appendChild(document.createTextNode(MistUtil.format.ucFirst(type)+":"));
var cell = document.createElement("td");
tr.appendChild(cell);
var trackkeys = MistUtil.object.keys(t);
//var determine the display info for the tracks
function orderValues(trackinfoobj) {
var order = {
trackid: 0,
language: 1,
width: 2,
bps: 3,
fpks: 4,
channels: 5,
codec: 6,
rate: 7
};
return MistUtil.object.values(trackinfoobj,function(keya,keyb,valuea,valueb){
if (order[keya] > order[keyb]) { return 1; }
if (order[keya] < order[keyb]) { return -1; }
return 0;
});
}
//there is more than one track of this type, and the player supports switching tracks
if ((trackkeys.length > 1) && ("player" in MistVideo) && ("api" in MistVideo.player) && (("setTrack" in MistVideo.player.api) || ("setTracks" in MistVideo.player.api) || ("setSource" in MistVideo.player.api))) {
//show a select box
var select = document.createElement("select");
select.title = "Select another "+type+" track";
selections[type] = select;
select.trackType = type;
cell.appendChild(select);
if (type != "subtitle") {
var option = document.createElement("option");
select.appendChild(option);
option.value = "";
option.appendChild(document.createTextNode("Automatic"));
}
//display properties that are the same for all tracks
var same = orderValues(t[MistUtil.object.keys(t)[0]].same);
if (same.length) {
var span = document.createElement("span");
span.className = "mistvideo-description";
cell.appendChild(span);
cell.appendChild(document.createTextNode(same.join(" ")));
}
//add options to the select
function n(str) {
if (str == "") { return -1; }
return Number(str);
}
var options = MistUtil.object.keys(t,function(a,b){
return n(a) - n(b);
}); //sort them
for (var i in options) {
var track = t[options[i]];
var option = document.createElement("option");
select.appendChild(option);
option.value = ("idx" in track ? track.idx : track.trackid);
if (MistUtil.object.keys(track.different).length) {
option.appendChild(document.createTextNode(orderValues(track.different).join(" ")));
}
else {
//all the tracks are the same as far as the metadata is concerned, just show a track number
option.appendChild(document.createTextNode("Track "+(Number(i)+1)));
}
}
MistUtil.event.addListener(MistVideo.video,"playerUpdate_trackChanged",function(e){
if ((e.message.type != type) || (e.message.trackid == "none")) { return; }
select.value = e.message.trackid;
MistVideo.log("Player selected "+type+" track with id "+e.message.trackid);
},select);
if (type == "subtitle") {
MistUtil.event.addListener(select,"change",function(){
try {
localStorage["mistSubtitleLanguage"] = t[this.value].lang;
}
catch (e) {}
if (this.value != "") {
//gather metadata for this subtitle track here
var trackinfo = MistUtil.object.extend({},t[this.value]);
trackinfo.label = orderValues(trackinfo.describe).join(" ");
trackinfo.src = MistUtil.http.url.addParam(subtitleSource,{track:this.value});
MistVideo.player.api.setSubtitle(trackinfo);
}
else {
MistVideo.player.api.setSubtitle();
}
});
//load last used language if available
if (("localStorage" in window) && (localStorage != null) && ("mistSubtitleLanguage" in localStorage)) {
for (var i in t) {
if (t[i].lang == localStorage["mistSubtitleLanguage"]) {
select.value = i;
//trigger onchange
var e = document.createEvent("Event");
e.initEvent("change");
select.dispatchEvent(e);
break;
}
}
}
}
else {
MistUtil.event.addListener(select,"change",function(){
if (this.trackType in checkboxes) { //this is dev mode
checkboxes[this.trackType].checked = true;
}
if (!changeToTracks(this.trackType,this.value)) {
//trackchange failed, reset select to old value
}
});
//set to the track that plays by default
/*
if (MistVideo.info.type == "live") {
//for live, the default track is the highest index
select.value = MistUtil.object.keys(t).pop();
}
else {
//for vod, the default track is the lowest index
select.value = MistUtil.object.keys(t).shift();
}
*/
}
}
else {
//show as text
var span = document.createElement("span");
span.className = "mistvideo-description";
cell.appendChild(span);
span.appendChild(document.createTextNode(orderValues(t[trackkeys[0]].same).join(" ")));
}
}
}
build(this.info.meta.tracks);
MistUtil.event.addListener(MistVideo.video,"metaUpdate_tracks",function(e){
//reconstruct track selection interface
build(e.message.meta.tracks);
},table);
return table;
},
text: function(options){
var container = document.createElement("span");
container.appendChild(document.createTextNode(options.text));
return container;
},
placeholder: function(){
var placeholder = document.createElement("div");
var size = this.calcSize();
placeholder.style.width = size.width+"px";
placeholder.style.height = size.height+"px";
if (this.options.poster) placeholder.style.background = "url('"+this.options.poster+"') no-repeat 50%/contain";
return placeholder;
},
timeout: function(options){
if (!"function" in options) { return; }
var delay = ("delay" in options ? options.delay : 5);
var icon = this.skin.icons.build("timeout",false,{delay:delay});
icon.timeout = this.timers.start(function(){
options.function();
},delay*1e3);
return icon;
},
polling: function(){
var div = document.createElement("div");
var icon = this.skin.icons.build("loading");
div.appendChild(icon);
return div;
},
loading: function(){
var MistVideo = this;
var icon = this.skin.icons.build("loading",50);
if (("player" in MistVideo) && (MistVideo.player.api)) {
var timer = false;
function addIcon(e){
MistVideo.container.setAttribute("data-loading",e.type);
checkIfOk();
}
function removeIcon(){
MistVideo.container.removeAttribute("data-loading");
if (timer) { MistVideo.timers.stop(timer); }
timer = false;
}
function checkIfOk(){
if (!timer) {
//if everything is playing fine, remove the icon
timer = MistVideo.timers.start(function(){
timer = false;
if ((MistVideo.monitor.vars) && (MistVideo.monitor.vars.score >= 0.999)) { //it's playing just fine
removeIcon();
}
else {
checkIfOk();
}
},1e3);
}
}
//add loading icon
var events = ["waiting","seeking","stalled"];
for (var i in events) {
MistUtil.event.addListener(MistVideo.video,events[i],function(e){
if ((!this.paused) && ("container" in MistVideo)) {
addIcon(e);
}
},icon);
}
//remove loading icon
var events = ["seeked","playing","canplay","paused","ended"];
for (var i in events) {
MistUtil.event.addListener(MistVideo.video,events[i],function(e){
if ("container" in MistVideo) {
removeIcon();
}
},icon);
}
MistUtil.event.addListener(MistVideo.video,"progress",function(e){
if (("container" in MistVideo) && ("monitor" in MistVideo) && ("vars" in MistVideo.monitor) && ("score" in MistVideo.monitor.vars) && (MistVideo.monitor.vars.score > 0.99)) {
removeIcon();
}
},icon);
}
return icon;
},
error: function(){
var MistVideo = this;
var container = document.createElement("div");
container.message = function(message,details,options){
MistUtil.empty(this);
var message_container = document.createElement("div");
message_container.className = "message";
this.appendChild(message_container);
if (!options.polling && !options.passive && !options.hideTitle) {
var header = document.createElement("h3");
message_container.appendChild(header);
header.appendChild(document.createTextNode("The player has encountered a problem"));
}
var p = document.createElement("p");
message_container.appendChild(p);
message_container.update = function(message){
MistUtil.empty(p);
//p.appendChild(document.createTextNode(message));
p.innerHTML = message; //allow custom html messages (configured in MI/HTTP/nostreamtext)
};
if (message) {
if (MistVideo.info.on_error) {
message = MistVideo.info.on_error.replace(/\<error>/,message);
}
message_container.update(message);
var d = document.createElement("p");
d.className = "details mistvideo-description";
message_container.appendChild(d);
if (details) {
d.appendChild(document.createTextNode(details));
}
else if ("decodingIssues" in MistVideo.skin.blueprints) { //dev mode
if (("player" in MistVideo) && ("api" in MistVideo.player) && (MistVideo.video)) {
details = [];
if (typeof MistVideo.state != "undefined") {
details.push(["Stream state:",MistVideo.state]);
}
if (typeof MistVideo.player.api.currentTime != "undefined") {
details.push(["Current video time:",MistUtil.format.time(MistVideo.player.api.currentTime)]);
}
if (("video" in MistVideo) && ("getVideoPlaybackQuality" in MistVideo.video)) {
var data = MistVideo.video.getVideoPlaybackQuality();
if (("droppedVideoFrames" in data) && ("totalVideoFrames" in data) && (data.totalVideoFrames)) {
details.push(["Frames dropped/total:",MistUtil.format.number(data.droppedVideoFrames)+"/"+MistUtil.format.number(data.totalVideoFrames)]);
}
if (("corruptedVideoFrames" in data) && (data.corruptedVideoFrames)) {
details.push(["Corrupted frames:",MistUtil.format.number(data.corruptedVideoFrames)]);
}
}
var networkstates = {
0: ["NETWORK EMPTY:","not yet initialized"],
1: ["NETWORK IDLE:","resource selected, but not in use"],
2: ["NETWORK LOADING:","data is being downloaded"],
3: ["NETWORK NO SOURCE:","could not locate source"]
};
details.push(networkstates[MistVideo.video.networkState]);
var readystates = {
0: ["HAVE NOTHING:","no information about ready state"],
1: ["HAVE METADATA:","metadata has been loaded"],
2: ["HAVE CURRENT DATA:","data for the current playback position is available, but not for the next frame"],
3: ["HAVE FUTURE DATA:","data for current and next frame is available"],
4: ["HAVE ENOUGH DATA:","can start playing"]
};
details.push(readystates[MistVideo.video.readyState]);
if (!options.passive) {
var table = document.createElement("table")
for (var i in details) {
var tr = document.createElement("tr");
table.appendChild(tr);
for (var j in details[i]) {
var td = document.createElement("td");
tr.appendChild(td);
td.appendChild(document.createTextNode(details[i][j]));
}
}
d.appendChild(table);
}
}
var c = document.createElement("div");
c.className = "mistvideo-container mistvideo-column";
c.style.textAlign = "left";
c.style.marginBottom = "1em";
message_container.appendChild(c);
var s = MistVideo.UI.buildStructure({type:"forcePlayer"});
if (s) { c.appendChild(s); }
var s = MistVideo.UI.buildStructure({type:"forceType"});
if (s) { c.appendChild(s); }
}
}
return message_container;
};
var countdown = false;
var showingError = false;
var since = false;
var message_global;
var ignoreThese = {};
//add control functions to overall MistVideo object
this.showError = function(message,options){
if (!options) {
options = {
softReload: !!(MistVideo.player && MistVideo.player.api && MistVideo.player.api.load),
reload: true,
nextCombo: !!MistVideo.info,
polling: false,
passive: false
};
}
var identifyer = (options.type ? options.type : message);
if (identifyer in ignoreThese) { return; }
if (options.reload === true) {
if ((MistVideo.options.reloadDelay) && (!isNaN(Number(MistVideo.options.reloadDelay)))) {
options.reload = Number(MistVideo.options.reloadDelay);
}
else {
options.reload = 10;
}
}
if (options.passive) {
if (showingError === true) { return; }
if (showingError) {
//only update the text, not the buttons or their countdowns
message_global.update(message);
since = (new Date()).getTime();
return;
}
container.setAttribute("data-passive","");
}
else {
container.removeAttribute("data-passive");
}
if (showingError) { container.clear(); } //stop any countdowns still running
showingError = (options.passive ? "passive" : true);
since = (new Date()).getTime();
var event = this.log(message,"error");
var message_container = container.message(message,false,options);
message_global = message_container;
var button_container = document.createElement("div");
button_container.className = "mistvideo-buttoncontainer";
message_container.appendChild(button_container);
MistUtil.empty(button_container);
if (options.softReload) {
var obj = {
type: "button",
label: "Reload video",
onclick: function(){
MistVideo.player.api.load();
}
};
if (!isNaN(options.softReload+"")) { obj.delay = options.softReload; }
button_container.appendChild(MistVideo.UI.buildStructure(obj));
}
if (options.reload) {
var obj = {
type: "button",
label: "Reload player",
onclick: function(){
MistVideo.reload("Reloading because reload button was clicked.");
}
};
if (!isNaN(options.reload+"")) { obj.delay = options.reload; }
button_container.appendChild(MistVideo.UI.buildStructure(obj));
}
if (options.nextCombo) {
var obj = {
type: "button",
label: "Next source",
onclick: function(){
MistVideo.nextCombo();
}
};
if (!isNaN(options.nextCombo+"")) { obj.delay = options.nextCombo; }
button_container.appendChild(MistVideo.UI.buildStructure(obj));
}
if (options.ignore) {
var obj = {
type: "button",
label: "Ignore",
onclick: function(){
this.clearError();
ignoreThese[identifyer] = true;
//stop showing this error
}
};
if (!isNaN(options.ignore+"")) { obj.delay = options.ignore; }
button_container.appendChild(MistVideo.UI.buildStructure(obj));
}
if (options.polling) {
button_container.appendChild(MistVideo.UI.buildStructure({type:"polling"}));
}
MistUtil.class.add(container,"show");
if ("container" in MistVideo) {
MistVideo.container.removeAttribute("data-loading");
}
if (event.defaultPrevented) {
container.clear();
}
};
container.clear = function(){
var countdowns = container.querySelectorAll("svg.icon.timeout");
for (var i = 0; i < countdowns.length; i++) {
MistVideo.timers.stop(countdowns[i].timeout);
}
MistUtil.empty(container);
MistUtil.class.remove(container,"show");
showingError = false;
};
this.clearError = container.clear;
//listener to clear error window
if ("video" in MistVideo) {
var events = ["timeupdate","playing","canplay"];//,"progress"];
for (var i in events) {
MistUtil.event.addListener(MistVideo.video,events[i],function(e){
if (!showingError) { return; }
if (e.type == "timeupdate") {
if (MistVideo.player.api.currentTime == 0) { return; }
if (((new Date()).getTime() - since) < 2e3) { return; }
}
MistVideo.log("Removing error window because of "+e.type+" event");
container.clear();
},container);
}
}
return container;
},
tooltip: function(){
var container = document.createElement("div");
var textNode = document.createTextNode("");
container.appendChild(textNode);
container.setText = function(text){
textNode.nodeValue = text;
};
var triangle = document.createElement("div");
container.triangle = triangle;
triangle.className = "triangle";
container.appendChild(triangle);
triangle.setMode = function(primary,secondary){
if (!primary) { primary = "bottom"; }
if (!secondary) { secondary = "left"; }
//reset styles
var sides = ["bottom","top","right","left"];
for (var i in sides) {
this.style[sides[i]] = ""; //bottom
var cap = MistUtil.format.ucFirst(sides[i]);
this.style["border"+cap] = ""; //borderBottom
this.style["border"+cap+"Color"] = ""; //borderBottomColor
}
var opposite = {
top: "bottom",
bottom: "top",
left: "right",
right: "left"
};
//set styles
this.style[primary] = "-10px"; //bottom
this.style["border"+MistUtil.format.ucFirst(opposite[primary])] = "none"; //borderTop
this.style["border"+MistUtil.format.ucFirst(primary)+"Color"] = "transparent"; //borderBottomColor
this.style[secondary] = 0; //left
this.style["border"+MistUtil.format.ucFirst(opposite[secondary])] = "none"; //borderRight
};
container.setPos = function(pos){
//also apply the "other" values, to reset if direction mode is switched
var set = {
left: "auto",
right: "auto",
top: "auto",
bottom: "auto"
};
MistUtil.object.extend(set,pos);
for (var i in set) {
if (!isNaN(set[i])) { set[i] += "px"; } //add px if the value is a number
this.style[i] = set[i];
}
};
return container;
},
button: function(options){ //label,onclick,timeout){
var button = document.createElement("button");
var MistVideo = this;
if (options.onclick) {
MistUtil.event.addListener(button,"click",function(){
options.onclick.call(MistVideo,arguments);
});
if (options.delay) {
var countdown = this.UI.buildStructure({
type: "timeout",
delay: options.delay,
function: options.onclick
});
if (countdown) {
button.appendChild(countdown);
}
}
}
button.appendChild(document.createTextNode(options.label));
return button;
},
videobackground: function(options) {
/* options.alwaysDisplay : if true, always draw the video on the canvas */
/* options.delay : delay of the draw timeout in seconds */
if (!options) { options = {}; }
if (!options.delay) { options.delay = 5; }
var ele = document.createElement("div");
var MistVideo = this;
var canvasses = [];
for (var n = 0; n < 2; n++) {
var c = document.createElement("canvas");
c._context = c.getContext("2d");
ele.appendChild(c);
canvasses.push(c);
}
var index = 0;
var drawing = false;
function draw() {
//only draw if the element is visible, don't waste cpu
if (options.alwaysDisplay || (MistVideo.video.videoWidth/MistVideo.video.videoHeight != ele.clientWidth / ele.clientHeight)) {
canvasses[index].removeAttribute("data-front"); //put last one behind again
//console.log(new Date().toLocaleTimeString(),"draw");
index++;
if (index >= canvasses.length) { index = 0; }
var c = canvasses[index];
var ctx = c._context;
c.width = MistVideo.video.videoWidth;
c.height = MistVideo.video.videoHeight;
ctx.drawImage(MistVideo.video,0,0);
c.setAttribute("data-front","");
}
if (!MistVideo.player.api.paused) {
MistVideo.timers.start(function(){
draw();
},options.delay * 1e3);
}
else {
drawing = false;
}
}
MistUtil.event.addListener(MistVideo.video,"playing",function(){
if (!drawing) {
draw();
drawing = true;
}
});
return ele;
}
},
colors: {
fill: "#fff",
semiFill: "rgba(255,255,255,0.5)",
stroke: "#fff",
strokeWidth: 1.5,
background: "rgba(0,0,0,0.8)",
progressBackground: "#333",
accent: "#0f0"
}
};
MistSkins.dev = {
structure: MistUtil.object.extend({},MistSkins["default"].structure,true),
blueprints: {
timeout: function(){
//don't use countdowns on buttons unless MistVideo.options.reloadDelay is set
if (this.options.reloadDelay !== false) {
return MistSkins.default.blueprints.timeout.apply(this,arguments);
}
return false;
},
log: function(){
var container = document.createElement("div");
container.appendChild(document.createTextNode("Logs"));
var logsc = document.createElement("div");//scroll this
logsc.className = "logs";
container.appendChild(logsc);
var logs = document.createElement("table");
logsc.appendChild(logs);
var MistVideo = this;
var lastmessage = {message: false};
var count = false;
var scroll = true;
function addMessage(time,message,data) {
if (!data) { data = {}; }
if (lastmessage.message == message) {
count++;
lastmessage.counter.nodeValue = count;
if ((count == 2) && (lastmessage.counter.parentElement)) {
lastmessage.counter.parentElement.style.display = "";
}
return;
}
count = 1;
var entry = document.createElement("tr");
entry.className = "entry";
if ((data.type) && (data.type != "log")) {
MistUtil.class.add(entry,"type-"+data.type);
message = MistUtil.format.ucFirst(data.type)+": "+message;
}
logs.appendChild(entry);
var timestamp = document.createElement("td");
timestamp.className = "timestamp";
entry.appendChild(timestamp);
var stamp = time.toLocaleTimeString(); //get current time in local format
//add miliseconds
var t = stamp.split(" ");
t[0] += "."+("00"+time.getMilliseconds()).slice(-3);
//t = t.join(" ");
timestamp.appendChild(document.createTextNode(t[0]));
if ("currentTime" in data) {
timestamp.title = "Video playback time: "+MistUtil.format.time(data.currentTime,{ms:true});
}
var td = document.createElement("td");
entry.appendChild(td);
var msg = document.createElement("span");
msg.className = "message";
td.appendChild(msg);
msg.appendChild(document.createTextNode(message));
var counter = document.createElement("span");
counter.style.display = "none";
counter.className = "counter";
td.appendChild(counter);
var countnode = document.createTextNode(count);
counter.appendChild(countnode);
if (scroll) { logsc.scrollTop = logsc.scrollHeight; }
lastmessage = {message: message, counter: countnode};
}
MistUtil.event.addListener(logsc,"scroll",function(){
//console.log(logsc.scrollTop + logsc.clientHeight,logsc.scrollHeight);
if (logsc.scrollTop + logsc.clientHeight >= logsc.scrollHeight - 5) {
scroll = true;
}
else {
scroll = false;
}
//console.log(scroll);
})
//add previously generated log messages
for (var i in MistVideo.logs) {
addMessage(MistVideo.logs[i].time,MistVideo.logs[i].message,MistVideo.logs[i].data);
}
MistUtil.event.addListener(MistVideo.options.target,"log",function(e){
if (!e.message) { return; }
var data = {};
if (MistVideo.player && MistVideo.player.api && ("currentTime" in MistVideo.player.api)) {
data.currentTime = MistVideo.player.api.currentTime;
}
addMessage(new Date(),e.message,data);
},container);
MistUtil.event.addListener(MistVideo.options.target,"error",function(e){
if (!e.message) { return; }
var data = {type:"error"};
if (MistVideo.player && MistVideo.player.api && ("currentTime" in MistVideo.player.api)) {
data.currentTime = MistVideo.player.api.currentTime;
}
addMessage(new Date(),e.message,data);
},container);
return container;
},
decodingIssues: function(){
if (!this.player) { return; }
var MistVideo = this;
var container = document.createElement("div");
function buildItem(options){
var label = document.createElement("label");
container.appendChild(label);
label.style.display = "none";
var text = document.createElement("span");
label.appendChild(text);
text.appendChild(document.createTextNode(options.name+":"));
text.className = "mistvideo-description";
var valuec = document.createElement("span");
label.appendChild(valuec);
var value = document.createTextNode((options.value ? options.value : ""));
valuec.appendChild(value);
var ele = document.createElement("span");
valuec.appendChild(ele);
label.set = function(val){
if (val !== 0) { this.style.display = ""; }
if (typeof val == "object") {
try {
if (val instanceof Promise) {
val.then(function(val){
label.set(val)
},function(){});
return;
}
}
catch (e) {}
if ("val" in val) {
value.nodeValue = val.val;
valuec.className = "value";
}
//is there a graph already?
if (ele.children.length) {
var graph = ele.children[0];
return graph.addData(val);
}
else {
//create a graph
var graph = MistUtil.createGraph({x:[val.x],y:[val.y]},val.options);
//it's (probably) a DOM element, insert it
ele.style.display = "";
MistUtil.empty(ele);
return ele.appendChild(graph);
}
}
return value.nodeValue = val;
};
container.appendChild(label);
updates.push(function(){
var result = options.function();
label.set(result);
});
}
if (MistVideo.player.api) {
var videovalues = {
"Playback score": function(){
if ("monitor" in MistVideo) {
if (("vars" in MistVideo.monitor) && ("score" in MistVideo.monitor.vars)) {
if (MistVideo.monitor.vars.values.length) {
var last = MistVideo.monitor.vars.values[MistVideo.monitor.vars.values.length - 1];
if ("score" in last) {
var score = Math.min(1,Math.max(0,last.score));
return {
x: last.clock,
y: Math.min(1,Math.max(0,last.score)),
options: {
y: {
min: 0,
max: 1
},
x: {
count: 10
}
},
val: Math.round(Math.min(1,Math.max(0,MistVideo.monitor.vars.score))*100)+"%"
};
}
}
}
return 0;
}
},
"Corrupted frames": function(){
if ((MistVideo.player.api) && ("getVideoPlaybackQuality" in MistVideo.player.api)) {
var r = MistVideo.player.api.getVideoPlaybackQuality();
if (r) {
if (r.corruptedVideoFrames) {
return {
val: MistUtil.format.number(r.corruptedVideoFrames),
x: (new Date()).getTime()*1e-3,
y: r.corruptedVideoFrames,
options: {
x: { count: 10 }
}
};
}
return 0;
}
}
},
"Dropped frames": function(){
if (MistVideo.player.api) {
if ("getVideoPlaybackQuality" in MistVideo.player.api) {
var r = MistVideo.player.api.getVideoPlaybackQuality();
if (r) {
if (r.droppedVideoFrames) {
return MistUtil.format.number(r.droppedVideoFrames);
/* show a graph: return {
val: MistUtil.format.number(r.droppedVideoFrames),
x: (new Date()).getTime()*1e-3,
y: r.droppedVideoFrames,
options: {
x: { count: 10 },
differentiate: true,
reverseGradient: true
}
};*/
}
return 0;
}
}
if ("webkitDroppedFrameCount" in MistVideo.player.api) {
return MistVideo.player.api.webkitDroppedFrameCount;
}
}
},
"Total frames": function(){
if ((MistVideo.player.api) && ("getVideoPlaybackQuality" in MistVideo.player.api)) {
var r = MistVideo.player.api.getVideoPlaybackQuality();
if (r) { return MistUtil.format.number(r.totalVideoFrames); }
}
},
"Decoded audio": function(){
if (MistVideo.player.api) {
return MistUtil.format.bytes(MistVideo.player.api.webkitAudioDecodedByteCount);
}
},
"Decoded video": function(){
if (MistVideo.player.api) {
return MistUtil.format.bytes(MistVideo.player.api.webkitVideoDecodedByteCount);
}
},
"Negative acknowledgements": function(){
if (MistVideo.player.api) {
return MistUtil.format.number(MistVideo.player.api.nackCount);
}
},
"Picture losses": function(){
return MistUtil.format.number(MistVideo.player.api.pliCount);
},
"Packets lost": function(){
return MistUtil.format.number(MistVideo.player.api.packetsLost);
},
"Packets received": function(){
return MistUtil.format.number(MistVideo.player.api.packetsReceived);
},
"Bytes received": function(){
if (MistVideo.player.api) {
return MistUtil.format.bytes(MistVideo.player.api.bytesReceived);
}
},
"Local latency [ms]": function(){
if ((MistVideo.player.api) && ("getLatency" in MistVideo.player.api)) {
var p = MistVideo.player.api.getLatency();
if (p) {
return new Promise(function(resolve,reject) {
p.then(function(result){
var r = [];
for (var i in result) {
if (result[i]) {
r.push(i[0]+":"+Math.round(result[i]*1e3));
}
}
if (r.length) { resolve(r.join(" ")); }
else { resolve(); }
},reject)
});
}
return new Promise(function(resolve,reject){resolve();},function(){});
}
},
"Current bitrate": function(){
if (MistVideo.player.monitor && ("currentBps" in MistVideo.player.monitor)) {
var out = MistUtil.format.bits(MistVideo.player.monitor.currentBps);
return out ? out+"ps" : out;
}
if (MistVideo.player.api && "currentBps" in MistVideo.player.api) {
var out = MistUtil.format.bits(MistVideo.player.api.currentBps());
return out ? out+"ps" : out;
}
},
"Framerate in": function(){
if (MistVideo.player.api && "framerate_in" in MistVideo.player.api) {
return MistUtil.format.number(MistVideo.player.api.framerate_in());
}
},
"Framerate out": function(){
if (MistVideo.player.api && "framerate_out" in MistVideo.player.api) {
return MistUtil.format.number(MistVideo.player.api.framerate_out());
}
}
};
var updates = [];
for (var i in videovalues) {
if (typeof videovalues[i]() == "undefined") { continue; }
buildItem({
name: i,
function: videovalues[i]
});
}
container.update = function(){
for (var i in updates) {
updates[i]();
}
MistVideo.timers.start(function(){
container.update();
},1e3);
};
container.update();
}
return container;
},
forcePlayer: function(){
var container = document.createElement("label");
container.title = "Reload MistVideo and use the selected player";
var MistVideo = this;
var s = document.createElement("span");
container.appendChild(s);
s.appendChild(document.createTextNode("Force player: "));
var select = document.createElement("select");
container.appendChild(select);
var option = document.createElement("option");
select.appendChild(option);
option.value = "";
option.appendChild(document.createTextNode("Automatic"));
for (var i in mistplayers) {
var option = document.createElement("option");
select.appendChild(option);
option.value = i;
option.appendChild(document.createTextNode(mistplayers[i].name));
}
if (this.options.forcePlayer) { select.value = this.options.forcePlayer; }
MistUtil.event.addListener(select,"change",function(){
MistVideo.options.forcePlayer = (this.value == "" ? false : this.value);
if (MistVideo.options.forcePlayer != MistVideo.playerName) { //only reload if there is a change
MistVideo.reload("Reloading to force player.");
}
});
return container;
},
forceType: function(){
if (!this.info) { return; }
var container = document.createElement("label");
container.title = "Reload MistVideo and use the selected protocol";
var MistVideo = this;
var s = document.createElement("span");
container.appendChild(s);
s.appendChild(document.createTextNode("Force protocol: "));
var select = document.createElement("select");
container.appendChild(select);
var option = document.createElement("option");
select.appendChild(option);
option.value = "";
option.appendChild(document.createTextNode("Automatic"));
var sofar = {};
for (var i in MistVideo.info.source) {
var source = MistVideo.info.source[i];
//skip doubles
if (source.type in sofar) { continue; }
sofar[source.type] = 1;
var option = document.createElement("option");
select.appendChild(option);
option.value = source.type;
option.appendChild(document.createTextNode(MistUtil.format.mime2human(source.type)));
}
if (this.options.forceType) { select.value = this.options.forceType; }
MistUtil.event.addListener(select,"change",function(){
MistVideo.options.forceType = (this.value == "" ? false : this.value);
if ((!MistVideo.source) || (MistVideo.options.forceType != MistVideo.source.type)) { //only reload if there is a change
MistVideo.reload("Reloading to force new type.");
}
});
return container;
},
forceSource: function(){
var container = document.createElement("label");
container.title = "Reload MistVideo and use the selected source";
var MistVideo = this;
var s = document.createElement("span");
container.appendChild(s);
s.appendChild(document.createTextNode("Force source: "));
var select = document.createElement("select");
container.appendChild(select);
var option = document.createElement("option");
select.appendChild(option);
option.value = "";
option.appendChild(document.createTextNode("Automatic"));
for (var i in MistVideo.info.source) {
var source = MistVideo.info.source[i];
var option = document.createElement("option");
select.appendChild(option);
option.value = i;
option.appendChild(document.createTextNode(source.url+" ("+MistUtil.format.mime2human(source.type)+")"));
}
if (this.options.forceSource) { select.value = this.options.forceSource; }
MistUtil.event.addListener(select,"change",function(){
MistVideo.options.forceSource = (this.value == "" ? false : this.value);
if (MistVideo.options.forceSource != MistVideo.source.index) { //only reload if there is a change
MistVideo.reload("Reloading to force new source.");
}
});
return container;
}
}
};
//MistSkins.dev.css = MistUtil.object.extend(MistSkins["default"].css);
MistSkins.dev.css = {skin: misthost+"/skins/dev.css"};
//prepend dev tools to settings window
MistSkins.dev.structure.submenu = MistUtil.object.extend({},MistSkins["default"].structure.submenu,true);
MistSkins.dev.structure.submenu.type = "draggable";
MistSkins.dev.structure.submenu.style.width = "25em";
MistSkins.dev.structure.submenu.children.unshift({
type: "container",
style: { flexShrink: 1 },
classes: ["mistvideo-column"],
children: [
{
if: function(){
return (this.playerName && this.source)
},
then: {
type: "container",
classes: ["mistvideo-description"],
style: { display: "block" },
children: [
{type: "playername", style: { display: "inline" }},
{type: "text", text: "is playing", style: {margin: "0 0.2em"}},
{type: "mimetype"}
]
}
},
{type:"log"},
{type:"decodingIssues"},
{
type: "container",
classes: ["mistvideo-column","mistvideo-devcontrols"],
style: {"font-size":"0.9em"},
children: [
{
type: "text",
text: "Player control"
},{
type: "container",
classes: ["mistvideo-devbuttons"],
style: {"flex-wrap": "wrap"},
children: [
{
type: "button",
title: "Build MistVideo again",
label: "MistVideo.reload();",
onclick: function(){
this.reload("Dev-reload button clicked.");
}
},{
type: "button",
title: "Switch to the next available player and source combination",
label: "MistVideo.nextCombo();",
onclick: function(){
this.nextCombo();
}
}
]
},
{type:"forcePlayer"},
{type:"forceType"}//,
//{type:"forceSource"}
]
}
]
});
// a skin has a structure
// a skin has formatting rules
// a skin has blueprints that build element types
function MistSkin(MistVideo) {
MistVideo.skin = this;
this.applySkinOptions = function(skinOptions) {
if ((typeof skinOptions == "string") && (skinOptions in MistSkins)) { skinOptions = MistUtil.object.extend({},MistSkins[skinOptions],true); }
var skinParent;
if (("inherit" in skinOptions) && (skinOptions.inherit) && (skinOptions.inherit in MistSkins)) {
skinParent = this.applySkinOptions(skinOptions.inherit);
}
else {
skinParent = MistSkins.default;
}
//structure should be shallow extended
this.structure = MistUtil.object.extend({},skinParent.structure);
if (skinOptions && ("structure" in skinOptions)) {
MistUtil.object.extend(this.structure,skinOptions.structure);
}
//blueprints should be shallow extended
this.blueprints = MistUtil.object.extend({},skinParent.blueprints);
if (skinOptions && ("blueprints" in skinOptions)) {
MistUtil.object.extend(this.blueprints,skinOptions.blueprints);
}
//icons should be shallow extended
this.icons = MistUtil.object.extend({},skinParent.icons,true);
if (skinOptions && ("icons" in skinOptions)) {
MistUtil.object.extend(this.icons.blueprints,skinOptions.icons);
}
this.icons.build = function(type,size,options){
if (!size) { size = 22; }
//return an svg
var d = this.blueprints[type];
var svg;
if (typeof d.svg == "function") {
svg = d.svg.call(MistVideo,options);
}
else {
svg = d.svg;
}
if (typeof size != "object") {
size = {
height: size,
width: size
};
}
if (typeof d.size != "object") {
d.size = {
height: d.size,
width: d.size
};
}
if ((!("width" in size) && ("height" in size)) || (!("height" in size) && ("width" in size))) {
if ("width" in size) {
size.height = size.width * d.size.height / d.size.width;
}
if ("height" in size) {
size.width = size.height * d.size.width / d.size.height;
}
}
var str = "";
str += '<svg viewBox="0 0 '+d.size.width+' '+d.size.height+'"'+("width" in size ? ' width="'+size.width+'"' : "")+("height" in size ? ' height="'+size.height+'"' : "")+' class="mist icon '+type+'">';
str += '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100%" width="100%">';
str += svg;
str += '</svg>';
str += '</svg>';
var container = document.createElement("div");
container.innerHTML = str;
return container.firstChild;
}
//colors should be deep extended
this.colors = MistUtil.object.extend({},skinParent.colors);
if (skinOptions && ("colors" in skinOptions)) {
MistUtil.object.extend(this.colors,skinOptions.colors,true);
}
//apply "general" css and skin specific css to structure
this.css = MistUtil.object.extend({},skinParent.css);
if (skinOptions && ("css" in skinOptions)) {
MistUtil.object.extend(this.css,skinOptions.css);
}
return this;
}
this.applySkinOptions("skin" in MistVideo.options ? MistVideo.options.skin : "default");
//load css
var styles = [];
for (var i in this.css) {
if (typeof this.css[i] == "string") {
var a = MistUtil.css.load(MistVideo.urlappend(this.css[i]),this.colors);
styles.push(a);
}
}
this.css = styles; //overwrite
return;
}