Feature/Webpack & Container 2.0

.eslintrc.json

@@ -1,7 +1,8 @@
 {
   "env": {
     "es6": true,
-    "node": true
+    "node": true,
+    "browser": true
   },
   "globals": {
     "browser": true,
@@ -14,7 +15,9 @@
     "after": true,
     "describe": true,
     "it": true,
-    "beforeEach": true
+    "beforeEach": true,
+    "$": true,
+    "jQuery": true
   },
   "parserOptions": {
     "ecmaVersion": 2018,

app/public/css/embed.css

@@ -1 +1,329 @@
-@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?dfjxtz');src:url('../fonts/icomoon.eot?#iefixdfjxtz') format('embedded-opentype'),url('../fonts/icomoon.woff?dfjxtz') format('woff'),url('../fonts/icomoon.ttf?dfjxtz') format('truetype'),url('../fonts/icomoon.svg?dfjxtz#icomoon') format('svg');font-weight:normal;font-style:normal}[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-captions-off:before{content:"\e600"}.icon-captions:before{content:"\e601"}.icon-close:before{content:"\e602"}.icon-help:before{content:"\e603"}.icon-music-off:before{content:"\e604"}.icon-music:before{content:"\e605"}.icon-sfx-off:before{content:"\e606"}.icon-sfx:before{content:"\e607"}.icon-sound-off:before{content:"\e608"}.icon-sound:before{content:"\e609"}.icon-vo-off:before{content:"\e60a"}.icon-vo:before{content:"\e60b"}.icon-gear:before{content:"\e60c"}.icon-play:before{content:"\ea1c"}.icon-pause:before{content:"\ea1d"}*{-webkit-tap-highlight-color:rgba(0,0,0,0)}body{-webkit-touch-callout:none;-webkit-text-size-adjust:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#000;font-family:'Open Sans',sans-serif;font-weight:lighter;font-size:12px;height:200%;margin:0;padding:0;color:white;width:100%;text-align:left;position:absolute;overflow:hidden}.drop-down{position:absolute;display:none;padding:1px 1px 1px 0;background:#222;height:auto;width:324px;padding:10px;margin-left:1px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.drop-down.on{display:block}.drop-down .form-group{font-size:12px;color:#ccc}.drop-down .form-group .btn{font-weight:normal}.drop-down .form-group .btn .label{font-size:16px}.drop-down .form-group .btn .icon{font-size:20px}.drop-down .form-title{font-size:16px;text-align:left;color:#ccc;margin:5px 0 15px}.drop-down .form-title .close{color:#fff}@media screen and (max-width:500px){.drop-down{width:100%;margin-left:0;position:fixed;top:40px;bottom:0;left:0;right:0;overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}}.touch .drop-down{width:100%;margin-left:0;position:fixed;top:40px;bottom:0;left:0;right:0;overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}#pausedScreen{z-index:2;position:absolute;left:0;top:0;bottom:0;width:100%;height:0;overflow:hidden;background-color:transparent}.no-touch #pausedScreen{-webkit-transition:background-color .4s;-moz-transition:background-color .4s;-ms-transition:background-color .4s;transition:background-color .4s}#pausedScreen .container{display:none;position:absolute;top:50%;text-align:center;margin-top:-45px;height:90px;width:100%}#pausedScreen .container h2{margin:0 0 .5em;font-size:180%;font-weight:300}.paused #pausedScreen{height:auto;background-color:rgba(0,0,0,0.6)}.paused #pausedScreen .container{display:block}.loading #pausedScreen .container{display:none}@media screen and (max-width:500px){#pausedScreen h2{font-size:150%}}#frame{position:fixed;z-index:1;width:100%;height:100%;background:#222;top:0;left:0}#frame.show-controls .controls{display:block}#frame.show-controls #pausedScreen{top:40px}#frame.show-controls .appWrapper{top:40px}#frame .controls{display:none;position:absolute;right:0;height:40px;z-index:3;font-size:0;width:325px}#frame .controls .btn.main{outline:none;cursor:pointer;border-radius:0;border:0;display:inline-block;height:100%;font-size:24px;width:20%;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:1px solid rgba(0,0,0,0.6);margin:0;padding:0}#frame .controls .btn.main.drop-handle{margin-left:0;padding:0 7px;border-left:1px solid rgba(0,0,0,0.1);width:10%}#frame .controls .btn.main.drop-handle .arrow-down{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;display:inline-block;margin-bottom:7px}#frame .controls .btn.main.drop-handle.disabled{border-left-color:#777}#frame .controls .btn.main.drop-handle.disabled .arrow-down{border-top-color:#999}#frame .controls .btn.main .glyphicon{font-size:20px}#frame .controls .btn.main .icon{width:26px;display:inline-block;font-size:100%;margin:0}#frame .controls .unpaused .off,#frame .controls .unmuted .off{display:none !important}#frame .controls .paused .on,#frame .controls .muted .on{display:none !important}@media screen and (max-width:500px){#frame .controls{width:100%;float:none}}#appTitle{display:none;position:absolute;top:5px;left:15px;color:#fff;font-size:160%}.show-title #appTitle{display:block}@media screen and (max-width:500px){#appTitle{display:none !important}}.appWrapper{position:absolute;top:0;bottom:0;right:0;left:0;z-index:0;background:#000}#appContainer{position:absolute;width:100%;height:100%;z-index:0}
+@font-face {
+  font-family: 'icomoon';
+  src: url(../fonts/icomoon.eot);
+  src: url(../fonts/icomoon.eot?#iefixdfjxtz) format('embedded-opentype'), url(../fonts/icomoon.woff) format('woff'), url(../fonts/icomoon.ttf) format('truetype'), url(../fonts/icomoon.svg#icomoon) format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+[class^="icon-"],
+[class*=" icon-"] {
+  font-family: 'icomoon';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-captions-off:before {
+  content: "\e600";
+}
+.icon-captions:before {
+  content: "\e601";
+}
+.icon-close:before {
+  content: "\e602";
+}
+.icon-help:before {
+  content: "\e603";
+}
+.icon-music-off:before {
+  content: "\e604";
+}
+.icon-music:before {
+  content: "\e605";
+}
+.icon-sfx-off:before {
+  content: "\e606";
+}
+.icon-sfx:before {
+  content: "\e607";
+}
+.icon-sound-off:before {
+  content: "\e608";
+}
+.icon-sound:before {
+  content: "\e609";
+}
+.icon-vo-off:before {
+  content: "\e60a";
+}
+.icon-vo:before {
+  content: "\e60b";
+}
+.icon-gear:before {
+  content: "\e60c";
+}
+.icon-play:before {
+  content: "\ea1c";
+}
+.icon-pause:before {
+  content: "\ea1d";
+}
+* {
+  /* make transparent link selection, adjust last value opacity 0 to 1.0 */
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  /* prevent callout to copy image, etc when tap to hold */
+  -webkit-touch-callout: none;
+  /* prevent webkit from resizing text to fit */
+  -webkit-text-size-adjust: none;
+  /* prevent copy paste, to allow, change 'none' to 'text' */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: #000;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: lighter;
+  font-size: 12px;
+  height: 200%;
+  margin: 0px;
+  padding: 0px;
+  color: white;
+  width: 100%;
+  text-align: left;
+  position: absolute;
+  overflow: hidden;
+}
+.drop-down {
+  position: absolute;
+  display: none;
+  padding: 1px 1px 1px 0;
+  background: #222;
+  height: auto;
+  width: 324px;
+  padding: 10px;
+  margin-left: 1px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+.drop-down.on {
+  display: block;
+}
+.drop-down .form-group {
+  font-size: 12px;
+  color: #ccc;
+}
+.drop-down .form-group .btn {
+  font-weight: normal;
+}
+.drop-down .form-group .btn .label {
+  font-size: 16px;
+}
+.drop-down .form-group .btn .icon {
+  font-size: 20px;
+}
+.drop-down .form-title {
+  font-size: 16px;
+  text-align: left;
+  color: #ccc;
+  margin: 5px 0 15px;
+}
+.drop-down .form-title .close {
+  color: #fff;
+}
+@media screen and (max-width: 500px) {
+  .drop-down {
+    width: 100%;
+    margin-left: 0;
+    position: fixed;
+    top: 40px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+.touch .drop-down {
+  width: 100%;
+  margin-left: 0;
+  position: fixed;
+  top: 40px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+#pausedScreen {
+  z-index: 2;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  background-color: transparent;
+}
+.no-touch #pausedScreen {
+  -webkit-transition: background-color 0.4s;
+  -moz-transition: background-color 0.4s;
+  -ms-transition: background-color 0.4s;
+  transition: background-color 0.4s;
+}
+#pausedScreen .container {
+  display: none;
+  position: absolute;
+  top: 50%;
+  text-align: center;
+  margin-top: -45px;
+  height: 90px;
+  width: 100%;
+}
+#pausedScreen .container h2 {
+  margin: 0 0 0.5em;
+  font-size: 180%;
+  font-weight: 300;
+}
+.paused #pausedScreen {
+  height: auto;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.paused #pausedScreen .container {
+  display: block;
+}
+.loading #pausedScreen .container {
+  display: none;
+}
+@media screen and (max-width: 500px) {
+  #pausedScreen h2 {
+    font-size: 150%;
+  }
+}
+#frame {
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background: #222;
+  top: 0;
+  left: 0;
+}
+#frame.show-controls .controls {
+  display: block;
+}
+#frame.show-controls #pausedScreen {
+  top: 40px;
+}
+#frame.show-controls .appWrapper {
+  top: 40px;
+}
+#frame .controls {
+  display: none;
+  position: absolute;
+  right: 0;
+  height: 40px;
+  z-index: 3;
+  font-size: 0;
+  width: 325px;
+}
+#frame .controls .btn.main {
+  outline: none;
+  cursor: pointer;
+  border-radius: 0;
+  border: 0;
+  display: inline-block;
+  height: 100%;
+  font-size: 24px;
+  width: 20%;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-left: 1px solid rgba(0, 0, 0, 0.6);
+  margin: 0;
+  padding: 0;
+}
+#frame .controls .btn.main.drop-handle {
+  margin-left: 0;
+  padding: 0 7px;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  width: 10%;
+}
+#frame .controls .btn.main.drop-handle .arrow-down {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #fff;
+  display: inline-block;
+  margin-bottom: 7px;
+}
+#frame .controls .btn.main.drop-handle.disabled {
+  border-left-color: #777;
+}
+#frame .controls .btn.main.drop-handle.disabled .arrow-down {
+  border-top-color: #999;
+}
+#frame .controls .btn.main .glyphicon {
+  font-size: 20px;
+}
+#frame .controls .btn.main .icon {
+  width: 26px;
+  display: inline-block;
+  font-size: 100%;
+  margin: 0;
+}
+#frame .controls .unpaused .off,
+#frame .controls .unmuted .off {
+  display: none !important;
+}
+#frame .controls .paused .on,
+#frame .controls .muted .on {
+  display: none !important;
+}
+@media screen and (max-width: 500px) {
+  #frame .controls {
+    width: 100%;
+    float: none;
+  }
+}
+#appTitle {
+  display: none;
+  position: absolute;
+  top: 5px;
+  left: 15px;
+  color: #fff;
+  font-size: 160%;
+}
+.show-title #appTitle {
+  display: block;
+}
+@media screen and (max-width: 500px) {
+  #appTitle {
+    display: none !important;
+  }
+}
+.appWrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 0;
+  background: #000;
+}
+#appContainer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+.volume-slider {
+  margin: 1rem 0;
+}
+.volume-slider.--disabled {
+  display: none;
+}
+