LSP: improved preview player position

lsp/main.css

@@ -745,6 +745,16 @@ body:not(.helpme) .input_container .ih_balloon {
   max-width: 28em;
   font-size: 0.5em;
 }
+.video_container {
+  max-width: 90%;
+  max-width: calc(100vw - 22em);
+  max-height: 90vh;
+  max-height: calc(100vh - 15em);
+  overflow: hidden;
+}
+video {
+  min-width: auto;
+}
   
 @font-face {
   font-family: FuturaICGLight;

lsp/minified.js

@@ -104,15 +104,15 @@ C++);0==C&&mist.send(function(){var b=[],c;for(c in mist.data.active_streams){va
 mist.data.config.protocols[q],"HTTP"==r.connector||"HTTP.exe"==r.connector)l=r.port?":"+r.port:":8080";var E={},r=$("<span>").hide();E["Embed urls"]=r;d.append(r);e=mist.user.host;b=document.createElement("a");b.href=e;e=b.protocol+"//";b=b.hostname;var I=e+b+l+"/",x={autoplay:!0},L=function(a){var b=["div"],d='\n   <script src="'+I+"embed_"+c+'.js"><\/script>\n';a.autoplay||b.push("data-noautoplay");a.forceprotocol&&a.forceprotocol!=""&&b.push('data-forcetype="'+a.forceprotocol+'"');a.urlappend&&
 a.urlappend!=""&&b.push('data-urlappend="'+a.urlappend.replace(/\"/g,'\\"')+'"');return"<"+b.join(" ")+">"+d+"</div>"},X=$("<span>");r.append($("<h3>").text("Embed urls")).append(UI.buildUI([{label:"Embedable script",type:"str",value:I+"embed_"+c+".js",readonly:!0},{label:"Stream info script",type:"str",value:I+"info_"+c+".js",readonly:!0},{label:"Autodetect player",type:"str",value:I+c+".html",readonly:!0,qrcode:!0},$("<h3>").text("Embed code"),{label:"Embed code",type:"textarea",value:L(x),rows:4,
 readonly:!0,classes:["embed_code"]},$("<h4>").text("Embed code options").css("margin-top",0),{label:"Autoplay",type:"checkbox",value:!0,pointer:{main:x,index:"autoplay"},"function":function(){x.autoplay=$(this).getval();$(".embed_code").setval(L(x))}},{label:"Force protocol",type:"select",select:[["","Automatic"]],pointer:{main:x,index:"protocol"},classes:["embed_code_forceprotocol"],"function":function(){x.forceprotocol=$(this).getval();$(".embed_code").setval(L(x))}},{label:"Video URL addition",
-type:"str",pointer:{main:x,index:"urlappend"},help:"The embed script will append this string to the video url, useful for sending through params.",classes:["embed_code_forceprotocol"],"function":function(){x.urlappend=$(this).getval();$(".embed_code").setval(L(x))}},$("<h3>").text("Protocol stream urls"),X]));l=$("<span>").append($("<h3>").text("Meta information")).hide();E["Meta information"]=l;var O=$("<span>");l.append(O);d.append(l);l=$("<span>").hide();E.Preview=l;d.append(l);var A=$("<div>").css("float",
+type:"str",pointer:{main:x,index:"urlappend"},help:"The embed script will append this string to the video url, useful for sending through params.",classes:["embed_code_forceprotocol"],"function":function(){x.urlappend=$(this).getval();$(".embed_code").setval(L(x))}},$("<h3>").text("Protocol stream urls"),X]));l=$("<span>").append($("<h3>").text("Meta information")).hide();E["Meta information"]=l;var O=$("<span>");l.append(O);d.append(l);l=$("<span>").hide();E.Preview=l;d.append(l);var A=$("<div>").css({"float":"left",
-"left").css("margin-right","1em").attr("data-forcesupportcheck",""),Y=$("<div>").css("float","left");l.append(A).append(Y);mist.stored.get().autoplay||A.attr("data-noautoplay","");var M=function(){A.text("Loading..");var a=document.createElement("script");a.src=I+"embed_"+c+".js";a.onerror=function(){A.html('Error loading "'+a.src+'".<br>').append($("<button>").text("Try again").click(function(){M()}))};a.onload=function(){if(typeof mistvideo[c].error!="undefined")A.html(mistvideo[c].error+"<br>").append($("<button>").text("Try again").click(function(){M()}));
+"margin-right":"1em",width:"100%"}).attr("data-forcesupportcheck",""),Y=$("<div>").css("float","left");l.append(A).append(Y);mist.stored.get().autoplay||A.attr("data-noautoplay","");var M=function(){A.text("Loading..");var a=document.createElement("script");a.src=I+"embed_"+c+".js";a.onerror=function(){A.html('Error loading "'+a.src+'".<br>').append($("<button>").text("Try again").click(function(){M()}))};a.onload=function(){if(typeof mistvideo[c].error!="undefined")A.html(mistvideo[c].error+"<br>").append($("<button>").text("Try again").click(function(){M()}));
 else{var a=mistvideo[c],b=UI.buildUI([{label:"Protocol stream url",type:"str",readonly:true,value:a.embedded?a.embedded.url:"",qrcode:true},{label:"Autoplay (from now on)",type:"checkbox",value:mist.stored.get().autoplay,"function":function(){mist.stored.set("autoplay",$(this).getval()?1:0)}}]);b.find(".help_container").remove();A.append(b);var d=$("<table>").css("font-size","0.9em").html($("<thead>").html($("<tr>").html($("<th>")).append($("<th>").text("Type")).append($("<th>").text("Priority")).append($("<th>").text("Simul. tracks")).append($("<th>").html("Your browser<br>support"))));
 Y.html(d);b=$("<tbody>");d.append(b);var d=$(".embed_code_forceprotocol"),e=[];d.find(".clear").remove();for(var g in a.source){var f=a.source[g],h=f.type.split("/"),i=h[0];i.length<6&&(i=i.toUpperCase());switch(h.length){case 1:break;case 2:i=UI.format.capital(h[0])+" v"+h[1];if(h[0]=="flash")switch(h[1]){case "7":i="Progressive ("+i+")";break;case "10":i="RTMP ("+i+")";break;case "11":i="HDS ("+i+")"}break;case 3:switch(h[2]){case "vnd.apple.mpegurl":i=i+" HLS";break;case "vnd.ms-ss":i=i+" Smooth";
 break;case "mp2t":i=i+" TS";break;default:h[2].length<6&&(h[2]=h[2].toUpperCase());i=i+(" "+h[2]);h[1]!="video"&&(i=i+(" ("+h[1]+")"))}break;default:i=f.type}i=UI.format.capital(i);d.append($("<option>").text(i).val(f.type).addClass("clear"));e.push({label:i,type:"str",value:f.url,readonly:true,qrcode:true});h=$("<tr>");b.append(h);h.html($("<td>").html($("<input>").attr("type","radio").attr("name","protocolforce").change(function(){A.attr("data-forcetype",$(this).val()).html("Loading embed..");M()}).val(f.type))).append($("<td>").text(i)).append($("<td>").text(f.priority)).append($("<td>").text(f.simul_tracks+
 "/"+f.total_matches)).append($("<td>").text(f.browser_support?"yes":"no"));if(a.embedded&&a.embedded.type==f.type){h.css("outline","1px solid rgba(0,0,0,0.5)");h.find("input[type=radio]").prop("checked",true)}}X.html(UI.buildUI(e));var j;if(c in mistvideo)j=mistvideo[c].meta;if(j){a=[];a.push({label:"Type",type:"span",value:j.live?"Live":"Pre-recorded (VoD)"});"format"in j&&a.push({label:"Format",type:"span",value:j.format});j.live&&a.push({label:"Buffer window",type:"span",value:UI.format.addUnit(j.buffer_window,
 "ms")});b={vheader:"Audio",labels:["Codec","Duration","Peak bitrate","Channels","Samplerate"],content:[]};g={vheader:"Video",labels:["Codec","Duration","Peak bitrate","Size","Framerate"],content:[]};d=Object.keys(j.tracks);d.sort(function(a,b){a=a.split("_").pop();b=b.split("_").pop();return a-b});for(var l in d){e=d[l];f=j.tracks[e];switch(f.type){case "audio":b.content.push({header:"Track "+e.split("_").pop(),body:[f.codec,UI.format.duration((f.lastms-f.firstms)/1E3)+"<br><span class=description>"+
 UI.format.duration(f.firstms/1E3)+" to "+UI.format.duration(f.lastms/1E3)+"</span>",UI.format.bytes(f.bps,1),f.channels,UI.format.addUnit(UI.format.number(f.rate),"Hz")]});break;case "video":g.content.push({header:"Track "+e.split("_").pop(),body:[f.codec,UI.format.duration((f.lastms-f.firstms)/1E3)+"<br><span class=description>"+UI.format.duration(f.firstms/1E3)+" to "+UI.format.duration(f.lastms/1E3)+"</span>",UI.format.bytes(f.bps,1),UI.format.addUnit(f.width,"x ")+UI.format.addUnit(f.height,"px"),
-UI.format.addUnit(UI.format.number(f.fpks/1E3),"fps")]})}}j=UI.buildVheaderTable(b).css("width","auto");l=UI.buildVheaderTable(g).css("width","auto");a.push($("<span>").text("Tracks:"));a.push($("<div>").css({display:"flex","flex-flow":"row wrap","justify-content":"center","font-size":"0.9em"}).append(j).append(l));O.html(UI.buildUI(a))}else O.html("No meta information available.")}};A.html("")[0].appendChild(a)};M();var P=UI.elements.secondary_menu;P.html("").append($("<a>").addClass("button").text("Choose stream").click(function(){UI.navto("Preview")})).append($("<span>").addClass("separator"));
+UI.format.addUnit(UI.format.number(f.fpks/1E3),"fps")]})}}j=UI.buildVheaderTable(b).css("width","auto");l=UI.buildVheaderTable(g).css("width","auto");a.push($("<span>").text("Tracks:"));a.push($("<div>").css({display:"flex","flex-flow":"row wrap","justify-content":"center","font-size":"0.9em"}).append(j).append(l));O.html(UI.buildUI(a))}else O.html("No meta information available.")}};var b=$("<div>").addClass("video_container");A.html(b);b[0].appendChild(a)};M();var P=UI.elements.secondary_menu;P.html("").append($("<a>").addClass("button").text("Choose stream").click(function(){UI.navto("Preview")})).append($("<span>").addClass("separator"));
 l=["Preview","Embed urls","Meta information"];v=l[0];for(q in l)r=$("<a>").addClass("button").text(l[q]).click(function(){P.find(".active").removeClass("active");$(this).addClass("active");for(q in E)E[q].hide();E[$(this).text()].show()}),P.append(r),l[q]==v&&(r.addClass("active"),E[v].show());break;case "Push":var z=$("<div>").text("Loading..");d.append(z);mist.send(function(a){function b(a,c){var d=$("<span>");a.length>=4&&a[2]!=a[3]?d.append($("<span>").text(a[2])).append($("<span>").html("&#187").addClass("unit").css("margin",
 "0 0.5em")).append($("<span>").text(a[3])):d.append($("<span>").text(a[2]));return $("<tr>").append($("<td>").text(a[1])).append($("<td>").append(d.children())).append($("<td>").append($("<button>").text(c=="Automatic"?"Remove":"Stop").click(function(){if(confirm("Are you sure you want to "+$(this).text().toLowerCase()+" this push?\n"+a[1]+" to "+a[2])){var b=$(this).closest("tr");b.html($("<td colspan=99>").html($("<span>").addClass("red").text(c=="Automatic"?"Removing..":"Stopping..")));c=="Automatic"?
 mist.send(function(){b.remove()},{push_auto_remove:{stream:a[1],target:a[2]}}):mist.send(function(){function c(){setTimeout(function(){mist.send(function(d){var e=false;if("push_list"in d&&d.push_list&&d.push_list.length){var e=true,f;for(f in d.push_list)if(d.push_list[f][0]==a[0]){e=false;break}}else e=true;e?b.remove():c()},{push_list:1})},1E3)}c()},{push_stop:[a[0]]})}})))}z.html("");var c=a.push_settings;c||(c={});z.append(UI.buildUI([{type:"help",help:"You can push streams to files or other servers, allowing them to broadcast your stream as well."},
@@ -152,7 +152,7 @@ aa();d.append(UI.buildUI([{type:"help",help:"You can find general server statist
 delete l.statistics;delete l.totals;delete l.clients;delete l.capabilities;l=JSON.stringify(l);l="Version: "+mist.data.config.version+"\n\nConfig:\n"+l;o={};d.append(UI.buildUI([{type:"help",help:"You can use this form to email MistServer support if you're having difficulties.<br>A copy of your server config file will automatically be included."},{type:"str",label:"Your name",validate:["required"],pointer:{main:o,index:"name"},value:mist.user.name},{type:"email",label:"Your email address",validate:["required"],
 pointer:{main:o,index:"email"}},{type:"hidden",value:"Integrated Help",pointer:{main:o,index:"subject"}},{type:"hidden",value:"-",pointer:{main:o,index:"company"}},{type:"textarea",rows:20,label:"Your message",validate:["required"],pointer:{main:o,index:"message"}},{type:"textarea",rows:20,label:"Your config file",readonly:!0,value:l,pointer:{main:o,index:"configfile"}},{type:"buttons",buttons:[{type:"save",label:"Send","function":function(a){$(a).text("Sending..");$.ajax({type:"POST",url:"http://mistserver.org/contact?skin=plain",
 data:o,success:function(a){a=$("<span>").html(a);a.find("script").remove();d.html(a[0].innerHTML)}})}}]}]));break;case "Disconnect":mist.user.password="";delete mist.user.authstring;delete mist.user.loggedin;UI.navto("Login");break;default:d.append($("<p>").text("This tab does not exist."))}}};"origin"in location||(location.origin=location.protocol+"//"+location.hostname+(location.port?":"+location.port:""));
-var mist={data:{},user:{name:"",password:"",host:location.origin+location.pathname.replace(/\/+$/,"")+"/api"},send:function(a,c,e){var c=c||{},e=e||{},e=$.extend(true,{timeout:30,sendData:c},e),b={authorize:{password:mist.user.authstring?MD5(MD5(mist.user.password)+mist.user.authstring):"",username:mist.user.name}};$.extend(true,b,c);log("Send",$.extend(true,{},c));b={url:mist.user.host,type:"POST",data:{command:JSON.stringify(b)},dataType:"jsonp",crossDomain:true,timeout:e.timeout*1E3,async:true,
+var mist={data:{},user:{name:"",password:"",host:location.origin+location.pathname.replace(/\/+$/,"")+"/api"},send:function(a,c,e){var c=c||{},e=e||{},e=$.extend(true,{timeOut:3E4,sendData:c},e),b={authorize:{password:mist.user.authstring?MD5(MD5(mist.user.password)+mist.user.authstring):"",username:mist.user.name}};$.extend(true,b,c);log("Send",$.extend(true,{},c));b={url:mist.user.host,type:"POST",data:{command:JSON.stringify(b)},dataType:"jsonp",crossDomain:true,timeout:e.timeout*1E3,async:true,
 error:function(b,d){delete mist.user.loggedin;if(!e.hide){switch(d){case "timeout":d=$("<i>").text("The connection timed out. ");break;case "abort":d=$("<i>").text("The connection was aborted. ");break;default:d=$("<i>").text(d+". ").css("text-transform","capitalize")}$("#message").addClass("red").text("An error occurred while attempting to communicate with MistServer:").append($("<br>")).append(d).append($("<a>").text("Send server request again").click(function(){mist.send(a,c,e)}))}UI.navto("Login")},
 success:function(b){log("Receive",$.extend(true,{},b),"as reply to",e.sendData);delete mist.user.loggedin;switch(b.authorize.status){case "OK":if("streams"in b)if(b.streams)if("incomplete list"in b.streams){delete b.streams["incomplete list"];$.extend(mist.data.streams,b.streams)}else mist.data.streams=b.streams;else mist.data.streams={};var d=$.extend({},b),f=["config","capabilities","ui_settings","LTS","active_streams","browse","log","totals"],p;for(p in d)f.indexOf(p)==-1&&delete d[p];$.extend(true,
 mist.data,d);mist.user.loggedin=true;UI.elements.connection.status.text("Connected").removeClass("red").addClass("green");UI.elements.connection.user_and_host.text(mist.user.name+" @ "+mist.user.host);UI.elements.connection.msg.removeClass("red").text("Last communication with the server at "+UI.format.time((new Date).getTime()/1E3));b.LTS&&UI.elements.menu.find(".LTSonly").removeClass("LTSonly");if(b.log){d=b.log[b.log.length-1];UI.elements.connection.msg.append($("<br>")).append("Last log entry: "+

lsp/mist.js

@@ -2994,7 +2994,11 @@ var UI = {
         var $preview = $('<span>').hide();
         tabs['Preview'] = $preview;
         $main.append($preview);
-        var $video = $('<div>').css('float','left').css('margin-right','1em').attr('data-forcesupportcheck','');
+        var $video = $('<div>').css({
+          'float': 'left',
+          'margin-right': '1em',
+          'width': '100%'
+        }).attr('data-forcesupportcheck','');
         var $protocols = $('<div>').css('float','left');
         $preview.append($video).append($protocols);
         
@@ -3159,7 +3163,9 @@ var UI = {
             //meta information
             buildTrackinfo();
           };
-          $video.html('')[0].appendChild(script);
+          var $c = $('<div>').addClass('video_container')
+          $video.html($c);
+          $c[0].appendChild(script);
         }
         loadVideo();
         
@@ -4327,7 +4333,7 @@ var mist = {
     sendData = sendData || {};
     opts = opts || {};
     opts = $.extend(true,{
-      timeout: 30,
+      timeOut: 30e3,
       sendData: sendData
     },opts);
     var data = {