From b0326ccd1eb499c779481e89874e876fc6bde830 Mon Sep 17 00:00:00 2001
From: Cat <carinasadres@gmail.com>
Date: Tue, 20 Dec 2016 16:57:56 +0100
Subject: [PATCH] LSP: thumbnailing; currently disabled

---
 CMakeLists.txt                      |  6 +++
 embed/test.html                     |  1 +
 embed/wrappers/img.js               | 22 ++++++++++
 lsp/main.css                        |  7 ++++
 lsp/minified.js                     | 15 +++----
 lsp/mist.js                         | 62 +++++++++++++++++++++++++----
 src/output/output_http_internal.cpp |  6 +++
 7 files changed, 105 insertions(+), 14 deletions(-)
 create mode 100644 embed/wrappers/img.js

diff --git a/CMakeLists.txt b/CMakeLists.txt
index 0d898d53..fb5ba476 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -165,6 +165,7 @@ set(libSources
   ${SOURCE_DIR}/lib/util.cpp
   ${SOURCE_DIR}/lib/vorbis.cpp
 )
+
 ########################################
 # MistLib - Build                      #
 ########################################
@@ -319,6 +320,7 @@ add_executable(MistOutHTTP
   generated/polytrope.js.h
   generated/dashjs.js.h
   generated/videojs.js.h
+  generated/img.js.h
   generated/playerdash.js.h
   generated/playervideo.js.h
   generated/core.js.h
@@ -418,6 +420,10 @@ add_custom_command(OUTPUT generated/videojs.js.h
   COMMAND ./sourcery ${SOURCE_DIR}/embed/wrappers/videojs.js video_js generated/videojs.js.h
   DEPENDS sourcery ${SOURCE_DIR}/embed/wrappers/videojs.js
 )
+add_custom_command(OUTPUT generated/img.js.h
+  COMMAND ./sourcery ${SOURCE_DIR}/embed/wrappers/img.js img_js generated/img.js.h
+  DEPENDS sourcery ${SOURCE_DIR}/embed/wrappers/img.js
+)
 add_custom_command(OUTPUT generated/playerdash.js.h
   COMMAND ./sourcery ${SOURCE_DIR}/embed/players/dash.js playerdash_js generated/playerdash.js.h
   DEPENDS sourcery ${SOURCE_DIR}/embed/players/dash.js
diff --git a/embed/test.html b/embed/test.html
index e3309ae4..ec097278 100644
--- a/embed/test.html
+++ b/embed/test.html
@@ -31,6 +31,7 @@
     <script src=wrappers/videojs.js></script>
     <script src=wrappers/dashjs.js></script>
     <script src=wrappers/flash_strobe.js></script>
+    <script src=wrappers/img.js></script>
     <script src=wrappers/silverlight.js></script>
     <script src=wrappers/polytrope.js></script>
     
diff --git a/embed/wrappers/img.js b/embed/wrappers/img.js
new file mode 100644
index 00000000..7485dc41
--- /dev/null
+++ b/embed/wrappers/img.js
@@ -0,0 +1,22 @@
+mistplayers.img = {
+  name: 'HTML img tag',
+  mimes: ['html5/image/jpeg'],
+  priority: Object.keys(mistplayers).length + 1,
+  isMimeSupported: function (mimetype) {
+    return (this.mimes.indexOf(mimetype) == -1 ? false : true);
+  },
+  isBrowserSupported: function (mimetype,source,options,streaminfo) {
+    //only use this if we are sure we just want an image
+    if ((options.forceType) || (options.forceSource) || (options.forcePlayer)) { return true; }
+    return false;
+  },
+  player: function(){}
+};
+var p = mistplayers.img.player;
+p.prototype = new MistPlayer();
+p.prototype.build = function (options) {
+  var ele = this.element('img');
+  ele.src = options.src;
+  ele.style.display = 'block';
+  return ele;
+}
diff --git a/lsp/main.css b/lsp/main.css
index 03317178..5b5f1f02 100644
--- a/lsp/main.css
+++ b/lsp/main.css
@@ -792,6 +792,13 @@ button.return:before {
   background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmcyIiBoZWlnaHQ9IjQ1IiB3aWR0aD0iNDUiPjxkZWZzIGlkPSJkZWZzNCIgLz48bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNyI+PHJkZjpSREY+PGNjOldvcmsgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwMDcuMzYyMikiIGlkPSJsYXllcjEiPjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KDEuMDE0MTgyNywtMC41ODU1Mzg2NywwLjU4NTUzODY3LDEuMDE0MTgyNywtMC40ODQxOTgzMSwxMDIyLjg4OTMpIiBkPSJNIDEwLjMxMjUsLTYuMzQzNzUgQSAyLjk0MTYxODYsMi45NDE2MTg2IDAgMCAwIDcuOTA2MjUsLTQuODc1IGwgLTE0LjEyNSwyNC41IGEgMi45NDE2MTg2LDIuOTQxNjE4NiAwIDAgMCAyLjU2MjUsNC40MDYyNSBsIDI4LjI4MTI1LDAgQSAyLjk0MTYxODYsMi45NDE2MTg2IDAgMCAwIDI3LjE1NjI1LDE5LjYyNSBMIDEzLC00Ljg3NSBhIDIuOTQxNjE4NiwyLjk0MTYxODYgMCAwIDAgLTIuNjg3NSwtMS40Njg3NSB6IiBpZD0icGF0aDM4MDkiIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW9wYWNpdHk6MSIgLz48L2c+PC9zdmc+");
   background-repeat: no-repeat;
   background-position: center center;
+  line-height: 100px;
+}
+.preview_icons .image img {
+  max-width: 200px;
+  max-height: 100px;
+  min-width: 0px;
+  vertical-align: middle;
 }
 .preview_icons .image.folder {
   background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiAgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2ZXJzaW9uPSIxLjEiICBpZD0ic3ZnMiIgIHZpZXdCb3g9IjAgMCA0NSA0NSIgIGhlaWdodD0iNDUiICB3aWR0aD0iNDUiPiA8ZGVmcyAgIGlkPSJkZWZzNCIgLz4gPG1ldGFkYXRhICAgaWQ9Im1ldGFkYXRhNyI+ICA8cmRmOlJERj4gICA8Y2M6V29yayAgICAgcmRmOmFib3V0PSIiPiAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgPGRjOnR5cGUgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4gICA8L2NjOldvcms+ICA8L3JkZjpSREY+IDwvbWV0YWRhdGE+IDxnICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTAwNy4zNjIyKSIgICBpZD0ibGF5ZXIxIj4gIDxwYXRoICAgIGlkPSJyZWN0NDE0NyIgICAgZD0ibSAyNi41MDAwMDEsMTAxNC4yOTk3IC01LjMzMzMzNCw1LjkyNzEgLTE4LjY2NjY2NywwIDAsMjkuNjM1NCAyNCwwIDE2LDAgYyAwLC0xMS44NTQyIDAsLTIzLjcwODMgMCwtMzUuNTYyNSB6IiAgICBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjEiIC8+IDwvZz48L3N2Zz4=");
diff --git a/lsp/minified.js b/lsp/minified.js
index d2304f92..8ebabd65 100644
--- a/lsp/minified.js
+++ b/lsp/minified.js
@@ -76,13 +76,14 @@ type:"password",validate:["required",function(a,b){return a!=$(".match_password"
 delete mist.user.rawpassword}}]}]));break;case "Account created":UI.elements.menu.addClass("hide");c.append($("<p>").text("Your account has been created succesfully.")).append(UI.buildUI([{type:"text",text:"Would you like to enable all (currently) available protocols with their default settings?"},{type:"buttons",buttons:[{label:"Enable protocols",type:"save","function":function(){if(mist.data.config.protocols)c.append("Unable to enable all protocols as protocol settings already exist.<br>");else{c.append("Retrieving available protocols..<br>");
 mist.send(function(a){var b=[],d;for(d in a.capabilities.connectors)if(a.capabilities.connectors[d].required)c.append('Could not enable protocol "'+d+'" because it has required settings.<br>');else{b.push({connector:d});c.append('Enabled protocol "'+d+'".<br>')}c.append("Saving protocol settings..<br>");mist.send(function(){c.append("Protocols enabled. Redirecting..");setTimeout(function(){UI.navto("Overview")},5E3)},{config:{protocols:b}})},{capabilities:true})}}},{label:"Skip",type:"cancel","function":function(){UI.navto("Overview")}}]}]));
 break;case "Overview":var f=$("<span>").text("Loading.."),q=$("<span>"),p=$("<span>").addClass("logs"),l=$("<span>"),u=$("<span>"),h=$("<span>"),i=$("<span>");c.append(UI.buildUI([{type:"help",help:"You can find most basic information about your MistServer here.<br>You can also set the debug level and force a save to the config.json file that MistServer uses to save your settings. "},{type:"span",label:"Version",pointer:{main:mist.data.config,index:"version"}},{type:"span",label:"Version check",value:f,
-LTSonly:!0},{type:"span",label:"Server time",value:u},{type:"span",label:"Configured streams",value:mist.data.streams?Object.keys(mist.data.streams).length:0},{type:"span",label:"Active streams",value:q},{type:"span",label:"Current connections",value:l},{type:"span",label:"Enabled protocols",value:h},{type:"span",label:"Disabled protocols",value:i},{type:"span",label:"Recent problems",value:p},$("<br>"),{type:"str",label:"Human readable name",pointer:{main:mist.data.config,index:"name"},help:"You can name your MistServer here for personal use. You'll still need to set host name within your network yourself."},
-{type:"debug",label:"Debug level",pointer:{main:mist.data.config,index:"debug"},help:"You can set the amount of debug information MistServer saves in the log. A full reboot of MistServer is required before some components of MistServer can post debug information."},{type:"checkbox",label:"Force configurations save",pointer:{main:mist.data,index:"save"},help:"Tick the box in order to force an immediate save to the config.json MistServer uses to save your settings. Saving will otherwise happen upon closing MistServer. Don't forget to press save after ticking the box."},
-{type:"buttons",buttons:[{type:"save",label:"Save","function":function(){var a={config:mist.data.config};if(mist.data.save)a.save=mist.data.save;mist.send(function(){UI.navto("Overview")},a)}}]}]));if(mist.data.LTS){var k=function(){var a=mist.stored.get().update||{};"uptodate"in a?a.error?f.addClass("red").text(a.error):a.uptodate?f.text("Your version is up to date.").addClass("green"):f.addClass("red").text("Version outdated!").append($("<button>").text("Update").css({"font-size":"1em","margin-left":"1em"}).click(function(){if(confirm("Are you sure you want to execute a rolling update?")){f.addClass("orange").removeClass("red").text("Rolling update command sent..");
-mist.stored.del("update");mist.send(function(){UI.navto("Overview")},{autoupdate:true})}})):f.text("Unknown")};if(!mist.stored.get().update||36E5<(new Date).getTime()-mist.stored.get().update.lastchecked){var j=mist.stored.get().update||{};j.lastchecked=(new Date).getTime();mist.send(function(a){mist.stored.set("update",$.extend(true,j,a.update));k()},{checkupdate:!0})}else k()}else f.text("");g=function(){var a={totals:{fields:["clients"],start:-10},active_streams:true};if(!("cabailities"in mist.data))a.capabilities=
-true;mist.send(function(){ga()},a)};var ga=function(){q.text("active_streams"in mist.data?mist.data.active_streams?mist.data.active_streams.length:0:"?");if("totals"in mist.data&&"all_streams"in mist.data.totals)var a=mist.data.totals.all_streams.all_protocols.clients,a=a.length?UI.format.number(a[a.length-1][1]):0;else a="Loading..";l.text(a);u.text(UI.format.dateTime(mist.data.config.time,"long"));p.html("");var a=0,b;for(b in mist.data.log){var c=mist.data.log[b];if(["FAIL","ERROR"].indexOf(c[1])>
--1){a++;var d=$("<span>").addClass("content").addClass("red"),e=c[2].split("|");for(b in e)d.append($("<span>").text(e[b]));p.append($("<div>").append($("<span>").append(UI.format.time(c[0]))).append(d));if(a==5)break}}a==0&&p.html("None.");a=[];c=[];for(b in mist.data.config.protocols){d=mist.data.config.protocols[b];a.indexOf(d.connector)>-1||a.push(d.connector)}h.text(a.length?a.join(", "):"None.");if("capabilities"in mist.data){for(b in mist.data.capabilities.connectors)a.indexOf(b)==-1&&c.push(b);
-i.text(c.length?c.join(", "):"None.")}else i.text("Loading..")};g();ga();UI.interval.set(g,3E4);break;case "Protocols":if("undefined"==typeof mist.data.capabilities){mist.send(function(){UI.navto(a)},{capabilities:!0});c.append("Loading..");return}var z=$("<tbody>");c.append(UI.buildUI([{type:"help",help:"You can find an overview of all the protocols and their relevant information here. You can add, edit or delete protocols."}])).append($("<button>").text("Delete all protocols").click(function(){if(confirm("Are you sure you want to delete all currently configured protocols?")){mist.data.config.protocols=
+LTSonly:!0},{type:"span",label:"Server time",value:u},{type:"span",label:"Licensed to","default":"unknown",pointer:{main:mist.data.config.license,index:"user"},LTSonly:!0},{type:"span",label:"Configured streams",value:mist.data.streams?Object.keys(mist.data.streams).length:0},{type:"span",label:"Active streams",value:q},{type:"span",label:"Current connections",value:l},{type:"span",label:"Enabled protocols",value:h},{type:"span",label:"Disabled protocols",value:i},{type:"span",label:"Recent problems",
+value:p},$("<br>"),{type:"str",label:"Human readable name",pointer:{main:mist.data.config,index:"name"},help:"You can name your MistServer here for personal use. You'll still need to set host name within your network yourself."},{type:"debug",label:"Debug level",pointer:{main:mist.data.config,index:"debug"},help:"You can set the amount of debug information MistServer saves in the log. A full reboot of MistServer is required before some components of MistServer can post debug information."},{type:"checkbox",
+label:"Force configurations save",pointer:{main:mist.data,index:"save"},help:"Tick the box in order to force an immediate save to the config.json MistServer uses to save your settings. Saving will otherwise happen upon closing MistServer. Don't forget to press save after ticking the box."},{type:"buttons",buttons:[{type:"save",label:"Save","function":function(){var a={config:mist.data.config};if(mist.data.save)a.save=mist.data.save;mist.send(function(){UI.navto("Overview")},a)}}]}]));if(mist.data.LTS){var k=
+function(a){"uptodate"in a?a.error?f.addClass("red").text(a.error):a.uptodate?f.text("Your version is up to date.").addClass("green"):f.addClass("red").text("Version outdated!").append($("<button>").text("Update").css({"font-size":"1em","margin-left":"1em"}).click(function(){if(confirm("Are you sure you want to execute a rolling update?")){f.addClass("orange").removeClass("red").text("Rolling update command sent..");mist.stored.del("update");mist.send(function(){UI.navto("Overview")},{autoupdate:true})}})):
+f.text("Unknown")};if(!mist.stored.get().update||36E5<(new Date).getTime()-mist.stored.get().update.lastchecked){var j={};j.lastchecked=(new Date).getTime();mist.send(function(a){mist.stored.set("update",j);k(a.update)},{checkupdate:!0})}else mist.send(function(a){k(a.update)},{update:!0})}else f.text("");g=function(){var a={totals:{fields:["clients"],start:-10},active_streams:true};if(!("cabailities"in mist.data))a.capabilities=true;mist.send(function(){ga()},a)};var ga=function(){q.text("active_streams"in
+mist.data?mist.data.active_streams?mist.data.active_streams.length:0:"?");if("totals"in mist.data&&"all_streams"in mist.data.totals)var a=mist.data.totals.all_streams.all_protocols.clients,a=a.length?UI.format.number(a[a.length-1][1]):0;else a="Loading..";l.text(a);u.text(UI.format.dateTime(mist.data.config.time,"long"));p.html("");var a=0,b;for(b in mist.data.log){var c=mist.data.log[b];if(["FAIL","ERROR"].indexOf(c[1])>-1){a++;var d=$("<span>").addClass("content").addClass("red"),e=c[2].split("|");
+for(b in e)d.append($("<span>").text(e[b]));p.append($("<div>").append($("<span>").append(UI.format.time(c[0]))).append(d));if(a==5)break}}a==0&&p.html("None.");a=[];c=[];for(b in mist.data.config.protocols){d=mist.data.config.protocols[b];a.indexOf(d.connector)>-1||a.push(d.connector)}h.text(a.length?a.join(", "):"None.");if("capabilities"in mist.data){for(b in mist.data.capabilities.connectors)a.indexOf(b)==-1&&c.push(b);i.text(c.length?c.join(", "):"None.")}else i.text("Loading..")};g();ga();UI.interval.set(g,
+3E4);break;case "Protocols":if("undefined"==typeof mist.data.capabilities){mist.send(function(){UI.navto(a)},{capabilities:!0});c.append("Loading..");return}var z=$("<tbody>");c.append(UI.buildUI([{type:"help",help:"You can find an overview of all the protocols and their relevant information here. You can add, edit or delete protocols."}])).append($("<button>").text("Delete all protocols").click(function(){if(confirm("Are you sure you want to delete all currently configured protocols?")){mist.data.config.protocols=
 [];mist.send(function(){UI.navto("Protocols")},{config:mist.data.config})}})).append($("<button>").text("Enable default protocols").click(function(){var a=Object.keys(mist.data.capabilities.connectors),b;for(b in mist.data.config.protocols){var c=a.indexOf(mist.data.config.protocols[b].connector);c>-1&&a.splice(c,1)}var d=[];for(b in a)(!("required"in mist.data.capabilities.connectors[a[b]])||Object.keys(mist.data.capabilities.connectors[a[b]].required).length==0)&&d.push(a[b]);c="Click OK to enable disabled protocols with their default settings:\n  ";
 c=d.length?c+d.join(", "):c+"None.";if(d.length!=a.length){a=a.filter(function(a){return d.indexOf(a)<0});c=c+("\n\nThe following protocols can only be set manually:\n  "+a.join(", "))}if(confirm(c)&&d.length){for(b in d)mist.data.config.protocols.push({connector:d[b]});mist.send(function(){UI.navto("Protocols")},{config:mist.data.config})}})).append("<br>").append($("<button>").text("New protocol").click(function(){UI.navto("Edit Protocol")}).css("clear","both")).append($("<table>").html($("<thead>").html($("<tr>").html($("<th>").text("Protocol")).append($("<th>").text("Status")).append($("<th>").text("Settings")).append($("<th>")))).append(z));
 var K=function(){function a(b){var c=mist.data.capabilities.connectors[b.connector];if(!c)return"";var d=[],e=["required","optional"],g;for(g in e)for(var t in c[e[g]])b[t]&&b[t]!=""?d.push(t+": "+b[t]):c[e[g]][t]["default"]&&d.push(t+": "+c[e[g]][t]["default"]);return $("<span>").addClass("description").text(d.join(", "))}z.html("");for(var b in mist.data.config.protocols){var c=mist.data.config.protocols[b];z.append($("<tr>").data("index",b).append($("<td>").text(c.connector)).append($("<td>").html(UI.format.status(c))).append($("<td>").html(a(c))).append($("<td>").css("text-align",
diff --git a/lsp/mist.js b/lsp/mist.js
index 9faebce8..e021e0ad 100644
--- a/lsp/mist.js
+++ b/lsp/mist.js
@@ -1388,7 +1388,6 @@ var UI = {
               
               break;
             case 'coords':
-              //TODO
               break;
           }
         }
@@ -2067,6 +2066,15 @@ var UI = {
             type: 'span',
             label: 'Server time',
             value: $servertime
+          },{
+            type: 'span',
+            label: 'Licensed to',
+            'default': 'unknown',
+            pointer: {
+              main: mist.data.config.license,
+              index: 'user'
+            },
+            LTSonly: true
           },{
             type: 'span',
             label: 'Configured streams',
@@ -2133,8 +2141,7 @@ var UI = {
           }
         ]));
         if (mist.data.LTS) {
-          function update_update() {
-            var info = mist.stored.get().update || {};
+          function update_update(info) {
             if (!('uptodate' in info)) {
               $versioncheck.text('Unknown');
               return;
@@ -2163,15 +2170,17 @@ var UI = {
           }
           
           if ((!mist.stored.get().update) || ((new Date()).getTime()-mist.stored.get().update.lastchecked > 3600e3)) {
-            var update = mist.stored.get().update || {};
+            var update = {};
             update.lastchecked = (new Date()).getTime();
             mist.send(function(d){
-              mist.stored.set('update',$.extend(true,update,d.update));
-              update_update();
+              mist.stored.set('update',update);
+              update_update(d.update);
             },{checkupdate: true});
           }
           else {
-            update_update();
+            mist.send(function(d){
+              update_update(d.update);
+            },{update: true});
           }
         }
         else {
@@ -2620,6 +2629,33 @@ var UI = {
                 $main.append(
                   $('<span>').addClass('description').text('Choose a stream below.')
                 ).append($shortcuts);
+                
+                //if there is a JPG output, add actual thumnails \o/
+                var thumbnails = false;
+                ///\todo activate this code when the backend is ready
+                /*
+                if (UI.findOutput('JPG')) {
+                  var jpgport = false;
+                  //find the http port and make sure JPG is enabled
+                  for (var i in mist.data.config.protocols) {
+                    var protocol = mist.data.config.protocols[i];
+                    if ((protocol.connector == 'HTTP') || (protocol.connector == 'HTTP.exe')) {
+                      jpgport = (protocol.port ? ':'+protocol.port : ':8080');
+                    }
+                    if ((protocol.connector == 'JPG') || (protocol.connector == 'JPG.exe')) {
+                      thumbnails = true;
+                    }
+                  }
+                  if ((thumbnails) && (jpgport)) {
+                    //now we get to use it as a magical function wheee!
+                    jpgport = parseURL(mist.user.host).host+jpgport;
+                    thumbnails = function(streamname) {
+                      return 'http://'+jpgport+'/'+encodeURIComponent(streamname)+'.jpg';
+                    }
+                  }
+                }
+                */
+                
                 for (var i in select) {
                   var streamname = select[i];
                   var source = '';
@@ -2649,6 +2685,17 @@ var UI = {
                     UI.navto('Embed',$(this).closest('div').attr('data-stream'));
                   });
                   var $image = $('<span>').addClass('image');
+                  
+                  if ((thumbnails) && (folders.indexOf(streamname) == -1)) {
+                    //there is a JPG output and this isn't a folder
+                    $image.append(
+                      $('<img>').attr('src',thumbnails(streamname)).error(function(){
+                        $(this).hide();
+                      })
+                    );
+                  }
+                  
+                  //its a wildcard stream
                   if (streamname.indexOf('+') > -1) {
                     var streambits = streamname.split('+');
                     source = mist.data.streams[streambits[0]].source+streambits[1];
@@ -2658,6 +2705,7 @@ var UI = {
                   }
                   else {
                     source = mist.data.streams[streamname].source;
+                    //its a folder stream
                     if (folders.indexOf(streamname) > -1) {
                       $preview = '';
                       $embed = '';
diff --git a/src/output/output_http_internal.cpp b/src/output/output_http_internal.cpp
index 0f6fcb7d..43d2247a 100644
--- a/src/output/output_http_internal.cpp
+++ b/src/output/output_http_internal.cpp
@@ -89,6 +89,7 @@ namespace Mist {
     //capa["optional"]["wrappers"]["allowed"].append("polytrope"); //currently borked
     capa["optional"]["wrappers"]["allowed"].append("flash_strobe");
     capa["optional"]["wrappers"]["allowed"].append("silverlight");
+    capa["optional"]["wrappers"]["allowed"].append("img");
     capa["optional"]["wrappers"]["option"] = "--wrappers";
     capa["optional"]["wrappers"]["short"] = "w";
     cfg->addConnectorOptions(8080, capa);
@@ -577,6 +578,11 @@ namespace Mist {
           response.append((char*)video_js, (size_t)video_js_len);
           used = true;
         }
+        if (it->asStringRef() == "img"){
+          #include "img.js.h"
+          response.append((char*)img, (size_t)img_len);
+          used = true;
+        }
         if (!used) {
           WARN_MSG("Unknown player type: %s",it->asStringRef().c_str());
         }