@twab/visualization 0.2.2 → 0.9.0

package/dist/visualization.umd.js

@@ -10289,130 +10289,12 @@ module.exports = toPlainObject;
 
 /***/ }),
 
-/***/ 7202:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-var map = {
-	"./1x1.svg": 9685,
-	"./2x1.svg": 5496,
-	"./3x1.svg": 7823,
-	"./3x2.svg": 7022,
-	"./4x1.svg": 6809,
-	"./4x2.svg": 4389,
-	"./5x1.svg": 9668,
-	"./5x2.svg": 8243,
-	"./6x1.svg": 3108,
-	"./6x2.svg": 9145
-};
-
-
-function webpackContext(req) {
-	var id = webpackContextResolve(req);
-	return __webpack_require__(id);
-}
-function webpackContextResolve(req) {
-	if(!__webpack_require__.o(map, req)) {
-		var e = new Error("Cannot find module '" + req + "'");
-		e.code = 'MODULE_NOT_FOUND';
-		throw e;
-	}
-	return map[req];
-}
-webpackContext.keys = function webpackContextKeys() {
-	return Object.keys(map);
-};
-webpackContext.resolve = webpackContextResolve;
-module.exports = webpackContext;
-webpackContext.id = 7202;
-
-/***/ }),
-
 /***/ 9583:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
 module.exports = __webpack_require__.p + "img/dummy.ec1ab0d6.svg";
 
-/***/ }),
-
-/***/ 9685:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-"use strict";
-module.exports = __webpack_require__.p + "img/1x1.f865594b.svg";
-
-/***/ }),
-
-/***/ 5496:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-"use strict";
-module.exports = __webpack_require__.p + "img/2x1.6bc80fec.svg";
-
-/***/ }),
-
-/***/ 7823:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-"use strict";
-module.exports = __webpack_require__.p + "img/3x1.8fe1c055.svg";
-
-/***/ }),
-
-/***/ 7022:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-"use strict";
-module.exports = __webpack_require__.p + "img/3x2.f5153612.svg";
-
-/***/ }),
-
-/***/ 6809:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-"use strict";
-module.exports = __webpack_require__.p + "img/4x1.22f434b0.svg";
-
-/***/ }),
-
-/***/ 4389:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-"use strict";
-module.exports = __webpack_require__.p + "img/4x2.3810a721.svg";
-
-/***/ }),
-
-/***/ 9668:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-"use strict";
-module.exports = __webpack_require__.p + "img/5x1.c0878e49.svg";
-
-/***/ }),
-
-/***/ 8243:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-"use strict";
-module.exports = __webpack_require__.p + "img/5x2.b70b5289.svg";
-
-/***/ }),
-
-/***/ 3108:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-"use strict";
-module.exports = __webpack_require__.p + "img/6x1.28b9840c.svg";
-
-/***/ }),
-
-/***/ 9145:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-"use strict";
-module.exports = __webpack_require__.p + "img/6x2.6b117ba7.svg";
-
 /***/ })
 
 /******/ 	});
@@ -10541,7 +10423,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/Visualization.vue?vue&type=template&id=50ffcc14&scoped=true&
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/Visualization.vue?vue&type=template&id=b542f254&scoped=true&
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -10553,7 +10435,7 @@ var render = function render() {
     on: {
       "click": _vm.framesClicked
     }
-  }, [_vm.active && _vm.canInsertTime ? _c('GlobalEvents', {
+  }, [_vm.active && _vm.canInsertTime && _vm.settingsClosed ? _c('GlobalEvents', {
     on: {
       "keydown": [function ($event) {
         if (!$event.type.indexOf('key') && $event.keyCode !== 45) return null;
@@ -10563,7 +10445,7 @@ var render = function render() {
         return _vm.insertTime.apply(null, arguments);
       }]
     }
-  }) : _vm._e(), _vm.active ? _c('GlobalEvents', {
+  }) : _vm._e(), _vm.active && _vm.settingsClosed ? _c('GlobalEvents', {
     on: {
       "keydown": [function ($event) {
         if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"])) return null;
@@ -10575,6 +10457,11 @@ var render = function render() {
         if ('button' in $event && $event.button !== 2) return null;
         $event.preventDefault();
         return _vm.arrowRight.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "page-down", undefined, $event.key, undefined)) return null;
+        if (!$event.shiftKey) return null;
+        $event.preventDefault();
+        return _vm.nextLoopActivate.apply(null, arguments);
       }, function ($event) {
         if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "page-down", undefined, $event.key, undefined)) return null;
         $event.preventDefault();
@@ -10583,6 +10470,11 @@ var render = function render() {
         if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "page-up", undefined, $event.key, undefined)) return null;
         $event.preventDefault();
         return _vm.prev.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "page-up", undefined, $event.key, undefined)) return null;
+        if (!$event.shiftKey) return null;
+        $event.preventDefault();
+        return _vm.prevLoopActivate.apply(null, arguments);
       }, function ($event) {
         if (!$event.type.indexOf('key') && $event.keyCode !== 83) return null;
         $event.preventDefault();
@@ -10611,6 +10503,21 @@ var render = function render() {
         if (!$event.type.indexOf('key') && $event.keyCode !== 76) return null;
         $event.preventDefault();
         _vm.dialogs.frames = true;
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 49 && $event.keyCode !== 97) return null;
+        return (() => _vm.secondsPerFrame = 1).apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 50 && $event.keyCode !== 98) return null;
+        return (() => _vm.secondsPerFrame = 2).apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 51 && $event.keyCode !== 99) return null;
+        return (() => _vm.secondsPerFrame = 3).apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 52 && $event.keyCode !== 100) return null;
+        return (() => _vm.secondsPerFrame = 4).apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 53 && $event.keyCode !== 101) return null;
+        return (() => _vm.secondsPerFrame = 5).apply(null, arguments);
       }]
     }
   }) : _vm._e(), _vm.prevLoop || _vm.nextLoop ? _c('GlobalEvents', {
@@ -10800,8 +10707,8 @@ var render = function render() {
 };
 var staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Frame.vue?vue&type=template&id=50ccd370&scoped=true&
-var Framevue_type_template_id_50ccd370_scoped_true_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Frame.vue?vue&type=template&id=5c1173af&scoped=true&
+var Framevue_type_template_id_5c1173af_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -10813,11 +10720,11 @@ var Framevue_type_template_id_50ccd370_scoped_true_render = function render() {
       active: _vm.active
     },
     style: {
-      height: `${_vm.maxHeight}px`,
+      maxHeight: `${_vm.maxHeight}px`,
       width: '100%',
       position: 'relative'
     }
-  }, [_vm.active && _vm.activeTab ? _c('GlobalEvents', {
+  }, [_vm.active && _vm.activeTab && _vm.parentComponent.settingsClosed ? _c('GlobalEvents', {
     on: {
       "keydown": [function ($event) {
         if (!$event.type.indexOf('key') && $event.keyCode !== 32) return null;
@@ -10830,6 +10737,10 @@ var Framevue_type_template_id_50ccd370_scoped_true_render = function render() {
       }, function ($event) {
         if (!$event.type.indexOf('key') && $event.keyCode !== 79) return null;
         return _vm.toogleDetailFrame.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 13) return null;
+        $event.preventDefault();
+        return _vm.jumpFrameToStart.apply(null, arguments);
       }]
     }
   }) : _vm._e(), _vm.showFrame ? _c('GlobalEvents', {
@@ -10864,8 +10775,8 @@ var Framevue_type_template_id_50ccd370_scoped_true_render = function render() {
       'frame-content': _vm.frame.title === -1 || _vm.videoStatus !== _vm.Status.stopped
     },
     style: {
-      height: `${_vm.height}px`,
-      width: `${_vm.width}px`,
+      maxHeight: `${_vm.height}px`,
+      maxWidth: `${_vm.width}px`,
       color: 'white'
     },
     on: {
@@ -10875,14 +10786,22 @@ var Framevue_type_template_id_50ccd370_scoped_true_render = function render() {
     class: {
       'dummy-frame': _vm.frame.title === -1
     },
+    staticStyle: {
+      "width": "100%",
+      "height": "100%"
+    },
     domProps: {
       "innerHTML": _vm._s(_vm.frame.image)
     }
   }) : _vm._e(), _vm.videoStatus !== _vm.Status.stopped && !_vm.videoIsLoading ? _c('video', {
     ref: "videoPlayer",
+    staticStyle: {
+      "width": "100%",
+      "aspect-ratio": "11/9"
+    },
     attrs: {
-      "height": `${_vm.height}px`,
-      "width": `${_vm.width}px`,
+      "maxHeight": `${_vm.height}px`,
+      "maxWidth": `${_vm.width}px`,
       "src": _vm.videoUrlString,
       "preload": "none",
       "autoplay": ""
@@ -10909,7 +10828,7 @@ var Framevue_type_template_id_50ccd370_scoped_true_render = function render() {
     }
   })], 1);
 };
-var Framevue_type_template_id_50ccd370_scoped_true_staticRenderFns = [];
+var Framevue_type_template_id_5c1173af_scoped_true_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/vue-loading-twa/lib/vue-loading-twa.min.js
 var vue_loading_twa_min = __webpack_require__(3396);
@@ -10988,7 +10907,8 @@ const Status = Object.freeze({
       videoUrlString: '',
       parentComponent: null,
       videoIsLoading: false,
-      currentBlock: null
+      currentBlock: null,
+      lastTimeEnterPressed: null
     };
   },
   created() {
@@ -11002,6 +10922,15 @@ const Status = Object.freeze({
     }
   },
   methods: {
+    jumpFrameToStart() {
+      if (this.active) {
+        const currentTime = new Date().getTime();
+        if (currentTime - this.lastTimeEnterPressed <= 500) {
+          this.parentComponent.changeHour(this.parentComponent.convertToAudienceTime(this.frame.time));
+        }
+        this.lastTimeEnterPressed = currentTime;
+      }
+    },
     changeSettings(value) {
       this.videoCurrentTime = value;
     },
@@ -11118,10 +11047,10 @@ const Status = Object.freeze({
 });
 ;// CONCATENATED MODULE: ./src/components/Frame.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_Framevue_type_script_lang_js_ = (Framevue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Frame.vue?vue&type=style&index=0&id=50ccd370&prod&scoped=true&lang=css&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Frame.vue?vue&type=style&index=0&id=5c1173af&prod&scoped=true&lang=css&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/Frame.vue?vue&type=style&index=0&id=50ccd370&prod&scoped=true&lang=css&
+;// CONCATENATED MODULE: ./src/components/Frame.vue?vue&type=style&index=0&id=5c1173af&prod&scoped=true&lang=css&
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -11232,11 +11161,11 @@ function normalizeComponent(
 
 var component = normalizeComponent(
   components_Framevue_type_script_lang_js_,
-  Framevue_type_template_id_50ccd370_scoped_true_render,
-  Framevue_type_template_id_50ccd370_scoped_true_staticRenderFns,
+  Framevue_type_template_id_5c1173af_scoped_true_render,
+  Framevue_type_template_id_5c1173af_scoped_true_staticRenderFns,
   false,
   null,
-  "50ccd370",
+  "5c1173af",
   null
   
 )
@@ -14517,9 +14446,9 @@ FramesManager.prototype.getSmallBlock = async function (time, channel, split) {
       delete this.requests[requestId];
       return true;
     }
-    throw 'Request blocked by another equal request occurring';
+    console.error(`Frames Manager (GetSmallBlock): Request blocked by another equal request occurring`);
+    return false;
   } catch (err) {
-    console.log(err);
     console.error(`Frames Manager (GetSmallBlock): ${err}`);
     delete this.requests[requestId];
     return false;
@@ -14554,9 +14483,10 @@ FramesManager.prototype.getBlock = async function (time, channel, split, directi
       delete this.requests[requestId];
       return true;
     }
-    throw 'Request blocked by another equal request occurring';
+    console.error(`Frames Manager (GetBlock ${direction}): Request blocked by another equal request occurring`);
+    return false;
   } catch (err) {
-    console.error(`Frames Manager (GetBlock): ${err}`);
+    console.error(`Frames Manager (GetBlock ${direction}): ${err}`);
     delete this.requests[requestId];
     return false;
   }
@@ -14576,7 +14506,6 @@ FramesManager.prototype.checkFramesBackward = function () {
   return this.currentPosition < Enum.MinBlockSizesBack[this.currentStep];
 };
 FramesManager.prototype.orderFramesBlock = function (images) {
-  images = images.filter(image => image.time >= this.firstFrameTime);
   if (this.buffer.length > 0) {
     const bufferFistTime = this.buffer[0].time;
     const bufferLastTime = this.buffer[this.buffer.length - 1].time;
@@ -14723,17 +14652,16 @@ FramesInterface.prototype.loadNextFrames = async function () {
 };
 FramesInterface.prototype.loadPrevFrames = async function () {
   this.framesManager.previous();
+  console.log(this.framesManager.currentTime, this.firstFrameTime);
+  if (this.framesManager.currentTime < this.firstFrameTime) {
+    await this.framesManager.goTo(this.firstFrameTime);
+    await this.loadFrames();
+    return;
+  }
   let prev = (await this.framesManager.getPrevImages()) || [];
   prev = await this.constructImagesComponent(prev);
-  if (this.firstFrameTime === this.framesManager.currentTime) {
-    let next = (await this.framesManager.getNextImages()) || [];
-    let current = (await this.framesManager.getCurrentImages()) || [];
-    this.frames.next = next;
-    this.frames.current = current;
-  } else {
-    this.frames.next = this.frames.current;
-    this.frames.current = this.frames.prev;
-  }
+  this.frames.next = this.frames.current;
+  this.frames.current = this.frames.prev;
   this.frames.prev = prev;
 };
 FramesInterface.prototype.constructImagesComponent = async function (array) {
@@ -14741,7 +14669,7 @@ FramesInterface.prototype.constructImagesComponent = async function (array) {
   for (let frame of array) {
     const image = document.createElement('img');
     image.src = frame.title === -1 ? __webpack_require__(9583) : `${sessionStorage.getItem('base_url')}frames/${frame.title}${server == 'alternative' ? '?server=alt' : ''}`;
-    image.style.width = frame.title === -1 ? '80%' : '100%';
+    image.style.maxWidth = frame.title === -1 ? '80%' : '100%';
     image.style.contain = 'true';
     Semaphor.push(new Promise(resolve => {
       image.addEventListener('load', () => {
@@ -14819,12 +14747,15 @@ FramesInterface.prototype.getVideoRequestByUrl = function (url_path, t) {
   return url + 'StreamFromVideo?url=' + url_path + params + '#t=' + t;
 };
 /* harmony default export */ var utils_FramesInterface = (FramesInterface);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Commands.vue?vue&type=template&id=781eccb8&
-var Commandsvue_type_template_id_781eccb8_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Commands.vue?vue&type=template&id=156a7328&
+var Commandsvue_type_template_id_156a7328_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
     staticClass: "visualization-col pa-0",
+    staticStyle: {
+      "border-top-right-radius": "6px"
+    },
     attrs: {
       "id": "command-bar"
     }
@@ -14862,7 +14793,7 @@ var Commandsvue_type_template_id_781eccb8_render = function render() {
     staticClass: "visualization-divider"
   })]);
 };
-var Commandsvue_type_template_id_781eccb8_staticRenderFns = [];
+var Commandsvue_type_template_id_156a7328_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Commands.vue?vue&type=script&lang=js&
 /* harmony default export */ var Commandsvue_type_script_lang_js_ = ({
@@ -15009,8 +14940,8 @@ var Commandsvue_type_template_id_781eccb8_staticRenderFns = [];
 ;
 var Commands_component = normalizeComponent(
   components_Commandsvue_type_script_lang_js_,
-  Commandsvue_type_template_id_781eccb8_render,
-  Commandsvue_type_template_id_781eccb8_staticRenderFns,
+  Commandsvue_type_template_id_156a7328_render,
+  Commandsvue_type_template_id_156a7328_staticRenderFns,
   false,
   null,
   null,
@@ -15019,15 +14950,13 @@ var Commands_component = normalizeComponent(
 )
 
 /* harmony default export */ var Commands = (Commands_component.exports);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Infos.vue?vue&type=template&id=441ca26a&
-var Infosvue_type_template_id_441ca26a_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Infos.vue?vue&type=template&id=363c35bb&
+var Infosvue_type_template_id_363c35bb_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
     staticClass: "visualization-row visualization-justify-center visualization-align-center",
-    staticStyle: {
-      "padding": "4px"
-    },
+    style: !_vm.commandsShow ? 'border-top-right-radius: 6px; padding: 4px' : 'padding: 4px',
     attrs: {
       "id": "info-bar"
     }
@@ -15136,7 +15065,7 @@ var Infosvue_type_template_id_441ca26a_render = function render() {
     }
   })], 1)]);
 };
-var Infosvue_type_template_id_441ca26a_staticRenderFns = [];
+var Infosvue_type_template_id_363c35bb_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Infos.vue?vue&type=script&lang=js&
 /* harmony default export */ var Infosvue_type_script_lang_js_ = ({
@@ -15231,8 +15160,8 @@ var Infosvue_type_template_id_441ca26a_staticRenderFns = [];
 ;
 var Infos_component = normalizeComponent(
   components_Infosvue_type_script_lang_js_,
-  Infosvue_type_template_id_441ca26a_render,
-  Infosvue_type_template_id_441ca26a_staticRenderFns,
+  Infosvue_type_template_id_363c35bb_render,
+  Infosvue_type_template_id_363c35bb_staticRenderFns,
   false,
   null,
   null,
@@ -15379,11 +15308,21 @@ var VideoProgress_component = normalizeComponent(
 )
 
 /* harmony default export */ var VideoProgress = (VideoProgress_component.exports);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Settings.vue?vue&type=template&id=ace6f9c6&scoped=true&
-var Settingsvue_type_template_id_ace6f9c6_scoped_true_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Settings.vue?vue&type=template&id=bf2f3c16&scoped=true&
+var Settingsvue_type_template_id_bf2f3c16_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _c('div', [_c('dialog', {
+  return _c('div', [_vm.dialogsVisibility.frames ? _c('GlobalEvents', {
+    on: {
+      "keydown": [function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 37) return null;
+        return _vm.prevFormat.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 39) return null;
+        return _vm.nextFormat.apply(null, arguments);
+      }]
+    }
+  }) : _vm._e(), _c('dialog', {
     ref: "frames"
   }, [_c('div', {
     staticClass: "visualization-row",
@@ -15407,7 +15346,7 @@ var Settingsvue_type_template_id_ace6f9c6_scoped_true_render = function render()
     }, [_c('img', {
       style: _vm.framesValue !== item.value ? 'filter: grayscale(1)' : '',
       attrs: {
-        "src": __webpack_require__(7202)("./" + item.text + ".svg"),
+        "src": item.image,
         "width": "100%"
       },
       on: {
@@ -15567,11 +15506,53 @@ var Settingsvue_type_template_id_ace6f9c6_scoped_true_render = function render()
     }
   }, [_vm._v("Ok")])])])], 1);
 };
-var Settingsvue_type_template_id_ace6f9c6_scoped_true_staticRenderFns = [];
+var Settingsvue_type_template_id_bf2f3c16_scoped_true_staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./src/assets/grid/1x1.svg
+var _1x1_namespaceObject = __webpack_require__.p + "img/1x1.f865594b.svg";
+;// CONCATENATED MODULE: ./src/assets/grid/2x1.svg
+var _2x1_namespaceObject = __webpack_require__.p + "img/2x1.6bc80fec.svg";
+;// CONCATENATED MODULE: ./src/assets/grid/3x1.svg
+var _3x1_namespaceObject = __webpack_require__.p + "img/3x1.8fe1c055.svg";
+;// CONCATENATED MODULE: ./src/assets/grid/3x2.svg
+var _3x2_namespaceObject = __webpack_require__.p + "img/3x2.f5153612.svg";
+;// CONCATENATED MODULE: ./src/assets/grid/4x1.svg
+var _4x1_namespaceObject = __webpack_require__.p + "img/4x1.22f434b0.svg";
+;// CONCATENATED MODULE: ./src/assets/grid/4x2.svg
+var _4x2_namespaceObject = __webpack_require__.p + "img/4x2.3810a721.svg";
+;// CONCATENATED MODULE: ./src/assets/grid/5x1.svg
+var _5x1_namespaceObject = __webpack_require__.p + "img/5x1.c0878e49.svg";
+;// CONCATENATED MODULE: ./src/assets/grid/5x2.svg
+var _5x2_namespaceObject = __webpack_require__.p + "img/5x2.b70b5289.svg";
+;// CONCATENATED MODULE: ./src/assets/grid/6x1.svg
+var _6x1_namespaceObject = __webpack_require__.p + "img/6x1.28b9840c.svg";
+;// CONCATENATED MODULE: ./src/assets/grid/6x2.svg
+var _6x2_namespaceObject = __webpack_require__.p + "img/6x2.6b117ba7.svg";
+;// CONCATENATED MODULE: ./src/assets/grid/index.js
+
+
+
+
+
 
-;// CONCATENATED MODULE: ./src/components/Settings.vue?vue&type=template&id=ace6f9c6&scoped=true&
 
+
+
+
+/* harmony default export */ var grid = ({
+  '1x1': _1x1_namespaceObject,
+  '2x1': _2x1_namespaceObject,
+  '3x1': _3x1_namespaceObject,
+  '3x2': _3x2_namespaceObject,
+  '4x1': _4x1_namespaceObject,
+  '4x2': _4x2_namespaceObject,
+  '5x1': _5x1_namespaceObject,
+  '5x2': _5x2_namespaceObject,
+  '6x1': _6x1_namespaceObject,
+  '6x2': _6x2_namespaceObject
+});
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Settings.vue?vue&type=script&lang=js&
+
 /* harmony default export */ var Settingsvue_type_script_lang_js_ = ({
   props: {
     dialogsVisibility: {
@@ -15606,31 +15587,40 @@ var Settingsvue_type_template_id_ace6f9c6_scoped_true_staticRenderFns = [];
       },
       items: [{
         text: '2x1',
-        value: 1
+        value: 1,
+        image: grid['2x1']
       }, {
         text: '3x1',
-        value: 2
+        value: 2,
+        image: grid['3x1']
       }, {
         text: '3x2',
-        value: 3
+        value: 3,
+        image: grid['3x2']
       }, {
         text: '4x1',
-        value: 4
+        value: 4,
+        image: grid['4x1']
       }, {
         text: '4x2',
-        value: 5
+        value: 5,
+        image: grid['4x2']
       }, {
         text: '5x1',
-        value: 6
+        value: 6,
+        image: grid['5x1']
       }, {
         text: '5x2',
-        value: 7
+        value: 7,
+        image: grid['5x2']
       }, {
         text: '6x1',
-        value: 8
+        value: 8,
+        image: grid['6x1']
       }, {
         text: '6x2',
-        value: 9
+        value: 9,
+        image: grid['6x2']
       }],
       // NEW
       goToValue: ''
@@ -15666,6 +15656,16 @@ var Settingsvue_type_template_id_ace6f9c6_scoped_true_staticRenderFns = [];
     }
   },
   methods: {
+    prevFormat() {
+      if (this.items.find(format => format.value === this.framesValue - 1)) {
+        this.framesValue--;
+      }
+    },
+    nextFormat() {
+      if (this.items.find(format => format.value === this.framesValue + 1)) {
+        this.framesValue++;
+      }
+    },
     changePlaybackRate() {
       let direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
       if (direction === 1) {
@@ -15712,10 +15712,10 @@ var Settingsvue_type_template_id_ace6f9c6_scoped_true_staticRenderFns = [];
 });
 ;// CONCATENATED MODULE: ./src/components/Settings.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_Settingsvue_type_script_lang_js_ = (Settingsvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Settings.vue?vue&type=style&index=0&id=ace6f9c6&prod&scoped=true&lang=css&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Settings.vue?vue&type=style&index=0&id=bf2f3c16&prod&scoped=true&lang=css&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/Settings.vue?vue&type=style&index=0&id=ace6f9c6&prod&scoped=true&lang=css&
+;// CONCATENATED MODULE: ./src/components/Settings.vue?vue&type=style&index=0&id=bf2f3c16&prod&scoped=true&lang=css&
 
 ;// CONCATENATED MODULE: ./src/components/Settings.vue
 
@@ -15728,11 +15728,11 @@ var Settingsvue_type_template_id_ace6f9c6_scoped_true_staticRenderFns = [];
 
 var Settings_component = normalizeComponent(
   components_Settingsvue_type_script_lang_js_,
-  Settingsvue_type_template_id_ace6f9c6_scoped_true_render,
-  Settingsvue_type_template_id_ace6f9c6_scoped_true_staticRenderFns,
+  Settingsvue_type_template_id_bf2f3c16_scoped_true_render,
+  Settingsvue_type_template_id_bf2f3c16_scoped_true_staticRenderFns,
   false,
   null,
-  "ace6f9c6",
+  "bf2f3c16",
   null
   
 )
@@ -15777,9 +15777,16 @@ const Positions = Object.freeze({
       type: Boolean,
       default: false
     },
+    jumpOnInsert: {
+      type: Boolean,
+      default: false
+    },
     framesFormat: {
       type: [Number, String],
       default: 6
+    },
+    size: {
+      type: Number
     }
   },
   components: {
@@ -15873,7 +15880,9 @@ const Positions = Object.freeze({
     this.framesPerRow = storedOnDb.framesPerRow;
     this.numberOfRows = storedOnDb.numberOfRows;
     await this.createFramesInterface();
-    this.resize(500);
+    if (this.size) {
+      this.resize(this.size, true);
+    }
   },
   methods: {
     framesClicked(e) {
@@ -15942,14 +15951,19 @@ const Positions = Object.freeze({
     changePlayPause(status) {
       this.paused = !status;
     },
-    //eslint-disable-next-line
-    resize(height) {
+    resize() {
+      let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.lastHeight;
+      let dynamic = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (this.numberOfRows === 2 && dynamic) {
+        height *= 1.5;
+      }
       this.lastHeight = height;
       if (this.$refs.frames) {
         for (let frame of this.$refs.frames) {
           frame.resize(height);
         }
       }
+      this.$emit('resized');
     },
     async goToFirstFrame() {
       let frames = this.$refs.frames;
@@ -16340,6 +16354,9 @@ const Positions = Object.freeze({
         hour_end: this.hourEndSelected ? this.convertToAudienceTime(this.hourEndSelected, '') : null,
         force: false
       });
+      if (this.jumpOnInsert) {
+        this.changeHour(this.convertToAudienceTime((this.hourEndSelected || this.hourIniSelected) + 1));
+      }
       this.hourIniSelected = null;
       this.hourEndSelected = null;
       this.canInsertTime = false;
@@ -16385,13 +16402,16 @@ const Positions = Object.freeze({
     }
   },
   computed: {
+    sizeComputed() {
+      return this.size;
+    },
+    settingsClosed() {
+      return !Object.values(this.dialogs).find(v => v);
+    },
     startAudienceSeconds() {
       const t = this.startAudienceTime.match(/.{1,2}/g);
       return parseInt(t[0] * 3600 + t[1] * 60 + t[2]);
     },
-    user() {
-      return this.$store.state.user;
-    },
     loadingArray() {
       return Array.from(Array(this.numberOfRows * this.framesPerRow).keys());
     },
@@ -16422,25 +16442,25 @@ const Positions = Object.freeze({
       if (value) {
         this.stopPlayingBar();
       }
+    },
+    channel() {
+      this.updatingChannel = new Promise((resolve, reject) => {
+        try {
+          this.createFramesInterface();
+          resolve(true);
+        } catch (err) {
+          reject(err);
+        }
+      });
     }
-    // channel() {
-    //   this.updatingChannel = new Promise((resolve, reject) => {
-    //     try {
-    //       this.createFramesInterface()
-    //       resolve(true)
-    //     } catch (err) {
-    //       reject(err)
-    //     }
-    //   })
-    // },
   }
 });
 ;// CONCATENATED MODULE: ./src/Visualization.vue?vue&type=script&lang=js&
  /* harmony default export */ var src_Visualizationvue_type_script_lang_js_ = (Visualizationvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/Visualization.vue?vue&type=style&index=0&id=50ffcc14&prod&scoped=true&lang=css&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/Visualization.vue?vue&type=style&index=0&id=b542f254&prod&scoped=true&lang=css&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/Visualization.vue?vue&type=style&index=0&id=50ffcc14&prod&scoped=true&lang=css&
+;// CONCATENATED MODULE: ./src/Visualization.vue?vue&type=style&index=0&id=b542f254&prod&scoped=true&lang=css&
 
 ;// CONCATENATED MODULE: ./src/Visualization.vue
 
@@ -16457,7 +16477,7 @@ var Visualization_component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "50ffcc14",
+  "b542f254",
   null
   
 )