@twab/visualization 0.9.2 → 0.9.4

package/dist/visualization.common.95.js

@@ -0,0 +1,3125 @@
+"use strict";
+((typeof self !== 'undefined' ? self : this)["webpackChunk_twab_visualization"] = (typeof self !== 'undefined' ? self : this)["webpackChunk_twab_visualization"] || []).push([[95],{
+
+/***/ 6095:
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": function() { return /* binding */ Visualization; }
+});
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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=38edcc3f&scoped=true&
+var render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "visualization-row",
+    attrs: {
+      "id": "visualization-container"
+    },
+    on: {
+      "click": _vm.framesClicked
+    }
+  }, [_vm.active && _vm.canInsertTime && _vm.settingsClosed ? _c('GlobalEvents', {
+    on: {
+      "keydown": [function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 45) return null;
+        return _vm.insertTime.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 46) return null;
+        return _vm.insertTime.apply(null, arguments);
+      }]
+    }
+  }) : _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;
+        if ('button' in $event && $event.button !== 0) return null;
+        $event.preventDefault();
+        return _vm.arrowLeft.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "right", 39, $event.key, ["Right", "ArrowRight"])) return null;
+        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();
+        return _vm.next.apply(null, arguments);
+      }, function ($event) {
+        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();
+        return _vm.setHourIni.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 69) return null;
+        $event.preventDefault();
+        return _vm.setHourEnd.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 36) return null;
+        $event.preventDefault();
+        return _vm.goToFirstFrame.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 35) return null;
+        $event.preventDefault();
+        return _vm.goToLastFrame.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 71) return null;
+        $event.preventDefault();
+        _vm.dialogs.goTo = true;
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 73) return null;
+        $event.preventDefault();
+        _vm.dialogs.secondsPerFrame = true;
+      }, function ($event) {
+        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', {
+    on: {
+      "keydown": _vm.breakLoop,
+      "click": _vm.breakLoop
+    }
+  }) : _vm._e(), _vm.active ? _c('settings', {
+    attrs: {
+      "dialogs-visibility": _vm.dialogs,
+      "playback-rate": _vm.playbackRate,
+      "seconds-per-frame": _vm.secondsPerFrame,
+      "frames-per-row": _vm.framesPerRow,
+      "number-of-rows": _vm.numberOfRows
+    },
+    on: {
+      "change-playback-rate": value => _vm.playbackRate = value,
+      "change-go-to": _vm.changeHour,
+      "change-seconds-per-frame": value => _vm.secondsPerFrame = value,
+      "set-frames-selection": _vm.setFrameSelection,
+      "close": dialog => _vm.dialogs[dialog] = false
+    }
+  }) : _vm._e(), _c('div', {
+    class: {
+      'visualization-card': true,
+      'active-tab': _vm.active
+    },
+    staticStyle: {
+      "width": "100%",
+      "padding": "0"
+    }
+  }, [_c('command-bar', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.commandBarShow,
+      expression: "commandBarShow"
+    }],
+    attrs: {
+      "video-playing": _vm.videoPlaying,
+      "video-paused": _vm.paused,
+      "insert-time": _vm.canInsertTime,
+      "hour-ini-selected": !!_vm.hourIniSelected,
+      "hour-end-selected": !!_vm.hourEndSelected
+    },
+    on: {
+      "prev-loop-activate": _vm.prevLoopActivate,
+      "next-loop-activate": _vm.nextLoopActivate,
+      "prev": _vm.prev,
+      "next": _vm.next,
+      "go-to": function ($event) {
+        _vm.dialogs.goTo = true;
+      },
+      "open-frame-selection": function ($event) {
+        _vm.dialogs.frames = true;
+      },
+      "open-frames-per-second": function ($event) {
+        _vm.dialogs.secondsPerFrame = true;
+      },
+      "open-blocks": _vm.openBlocks,
+      "open-playback-rate": function ($event) {
+        _vm.dialogs.playbackRate = true;
+      },
+      "play-or-pause": _vm.playOrPause,
+      "stop-playing": _vm.stopPlayingBar,
+      "set-hour-ini": _vm.setHourIni,
+      "set-hour-end": _vm.setHourEnd,
+      "insert-time": _vm.insertTime
+    }
+  }), _vm.videoProgressBar ? _c('video-progress', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.videoPlaying,
+      expression: "videoPlaying"
+    }],
+    attrs: {
+      "video-time": _vm.videoTime
+    }
+  }) : _vm._e(), _c('info-bar', {
+    attrs: {
+      "playback-rate": _vm.playbackRate,
+      "seconds-per-frame": _vm.secondsPerFrame,
+      "commands-show": _vm.commandBarShow,
+      "cache": _vm.useCache,
+      "block-start-time": _vm.blockStartTime,
+      "video-total-duration": _vm.videoSliderTotalDuration,
+      "alternative-server": _vm.alternativeServer,
+      "frames-per-row": _vm.framesPerRow,
+      "number-of-rows": _vm.numberOfRows,
+      "hour-ini": _vm.hourIniSelected,
+      "hour-end": _vm.hourEndSelected
+    },
+    on: {
+      "toogle-commands-visibility": function ($event) {
+        _vm.commandBarShow = !_vm.commandBarShow;
+      },
+      "toogle-cache": function ($event) {
+        _vm.useCache = !_vm.useCache;
+      },
+      "change-server": _vm.changeServerClick
+    }
+  }), _vm._l(_vm.numberOfRows, function (rowNumber) {
+    return _c('div', {
+      key: 'row-' + rowNumber,
+      staticClass: "visualization-row",
+      staticStyle: {
+        "padding": "12px"
+      },
+      attrs: {
+        "id": 'row-' + rowNumber
+      }
+    }, [_vm._l(_vm.previousFrames, function (frame, frameNumber) {
+      return _c('div', {
+        key: _vm.numberOfRows + '-' + _vm.framesPerRow + '-' + _vm.getIndex(rowNumber, frameNumber, _vm.Positions.previous),
+        staticStyle: {
+          "display": "none"
+        }
+      }, [_c('span', {
+        domProps: {
+          "innerHTML": _vm._s(frame.img)
+        }
+      })]);
+    }), _vm._l(_vm.nextFrames, function (frame, frameNumber) {
+      return _c('div', {
+        key: _vm.numberOfRows + '-' + _vm.framesPerRow + '-' + _vm.getIndex(rowNumber, frameNumber, _vm.Positions.next),
+        staticStyle: {
+          "display": "none"
+        }
+      }, [_c('span', {
+        domProps: {
+          "innerHTML": _vm._s(frame.img)
+        }
+      })]);
+    }), _vm._l(_vm.frames.slice(_vm.framesPerRow * (rowNumber - 1), _vm.framesPerRow * rowNumber), function (frame, frameNumber) {
+      return _c('div', {
+        key: 'row-' + rowNumber + '-frame-' + frameNumber,
+        staticClass: "visualization-col",
+        class: {
+          loaderImg: !!frame.img
+        },
+        attrs: {
+          "id": `frame-${_vm.getIndex(rowNumber, frameNumber, _vm.Positions.current)}`
+        },
+        on: {
+          "click": function ($event) {
+            frame.time ? _vm.selectFrame(_vm.getIndex(rowNumber, frameNumber, _vm.Positions.current), frame) : null;
+          }
+        }
+      }, [_c('span', {
+        staticStyle: {
+          "padding-left": "4px"
+        },
+        attrs: {
+          "id": _vm.activeFrame ? 'aa' : 0
+        }
+      }, [_c('b', [_vm._v(" " + _vm._s(_vm.getAudienceTime(frame.time, rowNumber, frameNumber, _vm.Positions.current)) + " ")])]), _c('frame', {
+        ref: "frames",
+        refInFor: true,
+        staticStyle: {
+          "margin": "0 auto"
+        },
+        attrs: {
+          "frame": frame,
+          "index": _vm.getIndex(rowNumber, frameNumber, _vm.Positions.current),
+          "grid-settings": {
+            numberOfRows: _vm.numberOfRows,
+            framesPerRow: _vm.framesPerRow
+          },
+          "initialTime": frame.time === _vm.hourIniSelected,
+          "endTime": frame.time === _vm.hourEndSelected,
+          "betweenTime": frame.time > _vm.hourIniSelected && frame.time < _vm.hourEndSelected,
+          "active": _vm.getIndex(rowNumber, frameNumber, _vm.Positions.current) === _vm.activeFrame,
+          "activeTab": _vm.active,
+          "videoUrl": _vm.fInterface ? _vm.fInterface.getVideoUrl(frame) : '',
+          "playback-rate": _vm.playbackRate
+        },
+        on: {
+          "startPlaying": _vm.startPlaying,
+          "stopPlaying": _vm.stopPlaying,
+          "playPauseStatus": _vm.changePlayPause,
+          "updateSlider": _vm.updateSlider
+        }
+      })], 1);
+    })], 2);
+  })], 2)], 1);
+};
+var staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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=20a23fbe&scoped=true&
+var Framevue_type_template_id_20a23fbe_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    class: {
+      'frame-container': true,
+      'initial-time': _vm.initialTime,
+      'end-time': _vm.endTime,
+      'between-time': _vm.betweenTime,
+      active: _vm.active
+    },
+    style: {
+      maxHeight: `${_vm.maxHeight}px`,
+      width: '100%',
+      position: 'relative'
+    }
+  }, [_vm.active && _vm.activeTab && _vm.parentComponent.settingsClosed ? _c('GlobalEvents', {
+    on: {
+      "keydown": [function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 32) return null;
+        $event.preventDefault();
+        return _vm.playOrPause.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 27) return null;
+        $event.preventDefault();
+        return _vm.stop.apply(null, arguments);
+      }, 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', {
+    on: {
+      "keydown": [function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 27) return null;
+        $event.preventDefault();
+        return _vm.toogleDetailFrame.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 13) return null;
+        $event.preventDefault();
+        return _vm.toogleDetailFrame.apply(null, arguments);
+      }]
+    }
+  }) : _vm._e(), _c('vue-loading', {
+    staticStyle: {
+      "z-index": "0"
+    },
+    attrs: {
+      "active": (!_vm.frame.image || !_vm.frame.time) && _vm.frame.title !== -1 || _vm.loading || _vm.videoIsLoading,
+      "spinner": "ring",
+      "color": "#1565c0",
+      "background-color": "#ededed",
+      "text": _vm.videoIsLoading ? _vm.$('infoBar.createVideo') : ''
+    }
+  }), _c('div', {
+    staticStyle: {
+      "background-color": "black"
+    }
+  }, [!_vm.loading ? _c('div', {
+    class: {
+      'frame-content': _vm.frame.title === -1 || _vm.videoStatus !== _vm.Status.stopped
+    },
+    style: {
+      maxHeight: `${_vm.height}px`,
+      maxWidth: `${_vm.width}px`,
+      color: 'white'
+    },
+    on: {
+      "dblclick": _vm.playOrPause
+    }
+  }, [_vm.frame.image && _vm.videoStatus === _vm.Status.stopped ? _c('div', {
+    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: {
+      "maxHeight": `${_vm.height}px`,
+      "maxWidth": `${_vm.width}px`,
+      "src": _vm.videoUrlString,
+      "preload": "none",
+      "autoplay": ""
+    },
+    on: {
+      "timeupdate": _vm.updateTimeLabel,
+      "ended": _vm.videoEnded,
+      "click": _vm.playOrPause
+    }
+  }) : _vm._e(), _c('div', {
+    staticClass: "overlay"
+  })]) : _vm._e()]), _c('dialog', {
+    ref: "imageDetailsDialog",
+    class: {
+      'dummy-frame': _vm.frame.title === -1
+    },
+    staticStyle: {
+      "width": "100vh",
+      "border": "none",
+      "background": "none"
+    },
+    domProps: {
+      "innerHTML": _vm._s(_vm.frame.image)
+    }
+  })], 1);
+};
+var Framevue_type_template_id_20a23fbe_scoped_true_staticRenderFns = [];
+
+// EXTERNAL MODULE: ./node_modules/vue-loading-twa/lib/vue-loading-twa.min.js
+var vue_loading_twa_min = __webpack_require__(3093);
+var vue_loading_twa_min_default = /*#__PURE__*/__webpack_require__.n(vue_loading_twa_min);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Frame.vue?vue&type=script&lang=js&
+
+const Status = Object.freeze({
+  stopped: 0,
+  playing: 1,
+  paused: 2
+});
+/* harmony default export */ var Framevue_type_script_lang_js_ = ({
+  components: {
+    VueLoading: (vue_loading_twa_min_default())
+  },
+  name: 'frame-component',
+  props: {
+    frame: {
+      type: [Object, Number],
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    gridSettings: {
+      type: Object,
+      required: true
+    },
+    initialTime: {
+      type: Boolean,
+      default: false
+    },
+    endTime: {
+      type: Boolean,
+      default: false
+    },
+    betweenTime: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    activeTab: {
+      type: Boolean,
+      default: false
+    },
+    videoUrl: {
+      type: [String, Promise],
+      required: true
+    },
+    playbackRate: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      Status,
+      aspectRatio: 11 / 9,
+      width: 0,
+      height: 0,
+      maxWidth: 0,
+      fullMaxWidth: 0,
+      maxHeight: 0,
+      showFrame: false,
+      videoStatus: Status.stopped,
+      videoStartTime: null,
+      videoCurrentTime: null,
+      videoUrlString: '',
+      parentComponent: null,
+      videoIsLoading: false,
+      currentBlock: null,
+      lastTimeEnterPressed: null
+    };
+  },
+  created() {
+    this.parentComponent = this.$parent;
+  },
+  watch: {
+    playbackRate(val) {
+      if (this.videoStatus === Status.playing || this.videoStatus === Status.paused) {
+        this.$refs.videoPlayer.playbackRate = val;
+      }
+    }
+  },
+  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;
+    },
+    toogleDetailFrame() {
+      if (this.showFrame) {
+        this.$refs.imageDetailsDialog.close();
+      } else {
+        this.$refs.imageDetailsDialog.showModal();
+      }
+      this.showFrame = !this.showFrame;
+    },
+    getMaxWidth() {
+      const commandBarSize = document.getElementById('command-bar');
+      return commandBarSize?.clientWidth;
+    },
+    resize(height) {
+      const commandBarSize = document.getElementById('command-bar');
+      const infoBarSize = document.getElementById('info-bar');
+      this.fullMaxWidth = commandBarSize?.clientWidth;
+      this.maxWidth = (commandBarSize?.clientWidth - this.gridSettings.framesPerRow * 10) / this.gridSettings.framesPerRow;
+      const heightAvailable = height - commandBarSize?.offsetHeight - infoBarSize?.offsetHeight - 47 * this.gridSettings.numberOfRows;
+      this.maxHeight = this.gridSettings.numberOfRows === 2 ? (heightAvailable - 12) / 2 : heightAvailable;
+      this.maxHeight = this.maxHeight >= 75 ? this.maxHeight : 75;
+      if (this.maxWidth / this.aspectRatio > this.maxHeight) {
+        this.height = this.maxHeight;
+        this.width = this.maxHeight * this.aspectRatio;
+      } else {
+        this.width = this.maxWidth;
+        this.height = this.maxWidth / this.aspectRatio;
+      }
+      this.maxHeight = this.height;
+    },
+    async playOrPause() {
+      switch (this.videoStatus) {
+        case Status.stopped:
+          this.videoIsLoading = true;
+          try {
+            this.videoUrlString = await this.videoUrl;
+            const blockInfo = await this.parentComponent.fInterface?.getVideoStartTime(this.frame);
+            this.videoStartTime = blockInfo.start;
+            this.videoUrlString = this.parentComponent.fInterface.getVideoRequestByUrl(blockInfo.url, this.frame.number);
+          } catch (error) {
+            console.log(error);
+          }
+          this.videoIsLoading = false;
+          this.videoStatus = Status.playing;
+          this.$nextTick(() => {
+            this.$refs.videoPlayer.onloadedmetadata = e => {
+              this.$refs.videoPlayer.playbackRate = this.playbackRate;
+              // * atualizar slider
+              this.$emit('updateSlider', this.videoStartTime, this.frame.time);
+              //*
+              this.$emit('startPlaying', this.frame, e.target.duration);
+              this.$emit('playPauseStatus', true);
+            };
+          });
+          break;
+        case Status.paused:
+          this.$refs.videoPlayer.play();
+          this.$refs.videoPlayer.playbackRate = this.playbackRate;
+          this.videoStatus = Status.playing;
+          this.$emit('playPauseStatus', true);
+          break;
+        case Status.playing:
+          this.$refs.videoPlayer.pause();
+          this.videoStatus = Status.paused;
+          this.$emit('playPauseStatus', false);
+          break;
+      }
+    },
+    stop() {
+      let jump = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      if (this.videoStatus === Status.playing || this.videoStatus === Status.paused) {
+        if (jump) {
+          this.parentComponent.changeHour(this.parentComponent.convertToAudienceTime(parseInt(this.videoCurrentTime)));
+        }
+        this.videoStatus = Status.stopped;
+        this.videoUrlString = null;
+        this.videoCurrentTime = null;
+        this.videoStartTime = null;
+      }
+      this.$emit('stopPlaying');
+    },
+    //eslint-disable-next-line
+    videoJumpTo(time) {
+      this.videoCurrentTime = this.videoStartTime + time;
+      this.$refs.videoPlayer.currentTime = time;
+    },
+    async videoJumpToTimeStamp(time) {
+      let frame = {
+        time: time
+      };
+      if (!time) return;
+      if (!(this.currentBlock && time >= this.currentBlock.start && time <= this.currentBlock.end)) {
+        this.currentBlock = await this.parentComponent.fInterface?.getBlockInfo(frame);
+        this.videoStartTime = this.currentBlock.start;
+        this.videoUrlString = this.parentComponent.fInterface.getVideoUrlForTime(this.videoStartTime);
+      }
+      this.videoCurrentTime = time - this.videoStartTime;
+      this.$refs.videoPlayer.currentTime = this.videoCurrentTime;
+    },
+    updateTimeLabel(e) {
+      this.videoCurrentTime = this.videoStartTime + e.target.currentTime;
+      this.parentComponent.updateVideoTime(this.index, this.videoCurrentTime);
+      this.parentComponent.updateVideoStatus(e.target.currentTime);
+    },
+    async videoEnded() {
+      this.videoStartTime = await this.parentComponent.fInterface?.getNextVideoStartTime(this.frame.time);
+      this.videoUrlString = this.parentComponent.fInterface.getVideoUrlForTime(this.videoStartTime);
+      //  * Ao acabar o vídeo tenho de mandar atualizar slider
+      // * aqui o video current time tambem vai ser o videoStartTime
+      this.$emit('updateSlider', this.videoStartTime, this.videoStartTime);
+    }
+  }
+});
+;// 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-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Frame.vue?vue&type=style&index=0&id=20a23fbe&prod&scoped=true&lang=css&
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/components/Frame.vue?vue&type=style&index=0&id=20a23fbe&prod&scoped=true&lang=css&
+
+// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
+var componentNormalizer = __webpack_require__(1001);
+;// CONCATENATED MODULE: ./src/components/Frame.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var component = (0,componentNormalizer/* default */.Z)(
+  components_Framevue_type_script_lang_js_,
+  Framevue_type_template_id_20a23fbe_scoped_true_render,
+  Framevue_type_template_id_20a23fbe_scoped_true_staticRenderFns,
+  false,
+  null,
+  "20a23fbe",
+  null
+  
+)
+
+/* harmony default export */ var Frame = (component.exports);
+// EXTERNAL MODULE: ./node_modules/axios/lib/axios.js + 40 modules
+var axios = __webpack_require__(4161);
+;// CONCATENATED MODULE: ./src/services/FramesService.js
+
+const Api = axios/* default */.Z.create({
+  //baseURL: process.env.VUE_APP_FRAMES_SERVER,
+  baseURL: sessionStorage.getItem('base_url')
+});
+Api.interceptors.request.use(config => {
+  config.params = config.params || {};
+  config.params.Client = sessionStorage.getItem('client') || 'UNKNOWN';
+  if (sessionStorage.getItem('server') === 'alternative') {
+    config.params.BlockPathConfig = 'AlernativeTvConfig';
+  }
+  return config;
+});
+/* harmony default export */ var FramesService = ({
+  getBlockRequest() {
+    let {
+      direction,
+      channel,
+      split,
+      time,
+      quality,
+      factor,
+      useCache = true,
+      signal
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return Api.get(`Get${direction}FramesBlockInFiles`, {
+      params: {
+        Channel: channel,
+        Split: split,
+        UseCache: useCache,
+        Time: time,
+        Step: 0,
+        JpegQuality: quality,
+        JpegSizeFactor: factor
+      },
+      signal
+    });
+  },
+  getSmallBlockRequest() {
+    let {
+      channel,
+      split,
+      time,
+      quality,
+      factor,
+      size,
+      useCache = true,
+      signal
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return Api.get('GetSmallFramesBlockInFiles', {
+      params: {
+        Channel: channel,
+        Split: split,
+        UseCache: useCache,
+        Time: time,
+        Step: 0,
+        JpegQuality: quality,
+        JpegSizeFactor: factor,
+        Size: size
+      },
+      signal
+    });
+  },
+  getFileInfoRequest() {
+    let {
+      direction,
+      channel,
+      split,
+      time,
+      step,
+      signal
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return Api.get(`Get${direction}BlockFileInformation`, {
+      params: {
+        Channel: channel,
+        Split: split,
+        Time: time,
+        Step: step
+      },
+      signal
+    });
+  },
+  getNextAvailableBlock() {
+    let {
+      channel,
+      time,
+      signal
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    // process.env.VUE_APP_NEXT_AVAILABLE_BLOCK
+
+    return Api.get(`GetPreviousAvailableBlockFileInformation`, {
+      params: {
+        Channel: channel,
+        Split: 1,
+        Time: time,
+        Step: 0
+      },
+      signal
+    });
+  }
+
+  //   getVideoRequestQuery(direction, channel, split, time, step) {
+  //     return (
+  //       this.serverUrl +
+  //       'Get' + direction + 'Video' +
+  //       '?Client=' +
+  //       client +
+  //       '&Channel=' +
+  //       channel +
+  //       '&Split=' +
+  //       split +
+  //       '&Time=' +
+  //       time +
+  //       '&Step=' +
+  //       step +
+  //       this.serverUrlExtraParams
+  //     )
+  //   }
+
+  //   getVideoRequestByTime(channel, time) {
+  //     return (
+  //       this.serverUrl +
+  //       'GetVideo?channel=' +
+  //       channel +
+  //       '&time=' +
+  //       time +
+  //       this.serverUrlExtraParams
+  //     )
+  //   }
+});
+;// CONCATENATED MODULE: ./src/utils/Enum.js
+/* harmony default export */ var Enum = ({
+  MinBlockSizes: Object.freeze({
+    1: 3600,
+    2: 3600,
+    3: 3600,
+    4: 3600,
+    5: 3600
+  }),
+  MinBlockSizesBack: Object.freeze({
+    1: 1800,
+    2: 1800,
+    3: 1800,
+    4: 1800,
+    5: 1800
+  }),
+  Direction: Object.freeze({
+    Next: 'Next',
+    Previous: 'Previous',
+    Self: ''
+  }),
+  JpegQuality: Object.freeze({
+    LowestQuality: '1',
+    LowQuality: '25',
+    MediumQuality: '50',
+    HighQuality: '75',
+    HighestQuality: '100'
+  }),
+  ResponseStatus: Object.freeze({
+    Ok: 1,
+    UnknownError: -1,
+    VideoBlockNotFound: -2,
+    InvalidRequest: -3,
+    ClientNotAllowed: -4,
+    AuthenticationProblem: -5
+  }),
+  StepsQuality: Object.freeze({
+    1: '50',
+    // 50 -> MediumQuality of JpegQuality
+    2: '50',
+    // 50 -> MediumQuality of JpegQuality
+    3: '50',
+    // 50 -> MediumQuality of JpegQuality
+    4: '50',
+    // 50 -> MediumQuality of JpegQuality
+    5: '50' // 50 -> MediumQuality of JpegQuality
+  }),
+
+  SizeQuality: Object.freeze({
+    1: '100'
+  }),
+  // 100 -> HighestQuality of JpegQuality
+
+  StepsFactor: Object.freeze({
+    1: 1,
+    2: 1,
+    3: 1,
+    4: 1,
+    5: 1
+  }),
+  SmallBlockSize: Object.freeze({
+    1: 1,
+    2: 1,
+    3: 1,
+    4: 1,
+    5: 1
+  })
+});
+;// CONCATENATED MODULE: ./src/utils/FramesManager.js
+
+
+function FramesManager(channel, size, currentTime, startAudienceTime) {
+  let useCache = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  this.channel = channel;
+  this.size = size;
+  this.currentTime = currentTime;
+  this.useCache = useCache;
+  this.startAudienceTime = startAudienceTime;
+  this.firstFrameTime = currentTime;
+  this.buffer = [];
+  this.requests = {};
+  this.currentStep = 1;
+  this.currentPosition = 0;
+  this.smallBlockSizeFactor = 2;
+  this.startCheckingQualityStep = 1;
+  this.startCheckingQualitySize = 1;
+  this.numberOfSmallBlocksCheck = 3;
+}
+FramesManager.prototype.goTo = async function (time) {
+  this.cancelAllPendingRequests();
+  this.currentTime = time || this.currentTime;
+  const frameIndex = this.findFrameIndexByTime(this.currentTime);
+  if (frameIndex >= 0) {
+    this.currentPosition = frameIndex;
+  } else {
+    this.buffer = [];
+    await this.getSmallBlock(this.currentTime, this.channel, 1);
+  }
+};
+FramesManager.prototype.getSmallBlock = async function (time, channel, split) {
+  let add = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  const requestId = `smallBlock_${time}`;
+  try {
+    if (!this.requests[requestId]) {
+      this.requests[requestId] = new AbortController();
+      let response = (await FramesService.getSmallBlockRequest({
+        channel,
+        split,
+        time,
+        size: this.size * 15,
+        quality: Enum.StepsQuality[this.currentStep],
+        factor: Enum.StepsFactor[this.currentStep],
+        signal: this.requests[requestId].signal
+      })).data;
+      if (!this.requests[requestId]) {
+        throw 'Response not needed anymore';
+      }
+      if (response.status !== Enum.ResponseStatus.Ok) {
+        await this.getBlock(time, channel, split, Enum.Direction.Previous, true);
+        await this.getBlock(time, channel, split, Enum.Direction.Next, true);
+        throw response?.message || 'Unknown error';
+      }
+      response = response.data;
+      const images = response.frames;
+      this.requests[`block_${Enum.Direction.Next}_${response.end}`] = true;
+      this.getBlock(time, this.channel, 1, Enum.Direction.Self, true, true);
+      if (!add) {
+        const firstFrameTime = images[0].time;
+        const lastFrameTime = images[images.length - 1].time;
+        if (lastFrameTime === response.end) {
+          await this.getSmallBlock(lastFrameTime + 1, this.channel, 1, true);
+        } else if (this.timestampToTimeString(firstFrameTime) !== this.startAudienceTime && firstFrameTime === response.start) {
+          await this.getSmallBlock(firstFrameTime - this.currentStep * this.size, this.channel, 1, true);
+        }
+      }
+      this.orderFramesBlock(images);
+      this.currentPosition = this.findFrameIndexByTime(this.currentTime);
+      delete this.requests[`block_${Enum.Direction.Next}_${response.end}`];
+      delete this.requests[requestId];
+      return true;
+    }
+    console.error(`Frames Manager (GetSmallBlock): Request blocked by another equal request occurring`);
+    return false;
+  } catch (err) {
+    console.error(`Frames Manager (GetSmallBlock): ${err}`);
+    delete this.requests[requestId];
+    return false;
+  }
+};
+FramesManager.prototype.getBlock = async function (time, channel, split, direction, checkMinBlock) {
+  let substituition = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  const requestId = `block_${direction}_${time}`;
+  try {
+    if (!this.requests[requestId]) {
+      this.requests[requestId] = new AbortController();
+      let response = (await FramesService.getBlockRequest({
+        direction,
+        channel,
+        split,
+        time,
+        quality: Enum.StepsQuality[this.currentStep],
+        factor: Enum.StepsFactor[this.currentStep],
+        signal: this.requests[requestId].signal
+      })).data;
+      if (!this.requests[requestId]) {
+        throw 'Response not needed anymore';
+      }
+      if (response.status !== Enum.ResponseStatus.Ok) {
+        throw response?.message || 'Unknown error';
+      }
+      this.orderFramesBlock(response.data.frames);
+      this.currentPosition = this.findFrameIndexByTime(this.currentTime);
+      if (checkMinBlock) {
+        await this.checkMinBlockSize(!substituition);
+      }
+      delete this.requests[requestId];
+      return true;
+    }
+    console.error(`Frames Manager (GetBlock ${direction}): Request blocked by another equal request occurring`);
+    return false;
+  } catch (err) {
+    console.error(`Frames Manager (GetBlock ${direction}): ${err}`);
+    delete this.requests[requestId];
+    return false;
+  }
+};
+FramesManager.prototype.checkMinBlockSize = async function (checkMinBlock) {
+  if (this.checkFramesBackward()) {
+    await this.getBlock(this.buffer.length === 0 ? this.currentTime : this.buffer[0].time, this.channel, 1, Enum.Direction[this.buffer.length === 0 ? 'Self' : 'Previous'], checkMinBlock, (this.buffer[0]?.number || 0) !== 0);
+  }
+  if (this.checkFramesForward()) {
+    await this.getBlock(this.buffer.length === 0 ? this.currentTime : this.buffer[this.buffer.length - 1].time, this.channel, 1, Enum.Direction[this.buffer.length === 0 ? 'Self' : 'Next'], checkMinBlock);
+  }
+};
+FramesManager.prototype.checkFramesForward = function () {
+  return this.buffer.length - this.currentPosition < Enum.MinBlockSizes[this.currentStep] * (this.size / 6);
+};
+FramesManager.prototype.checkFramesBackward = function () {
+  return this.currentPosition < Enum.MinBlockSizesBack[this.currentStep];
+};
+FramesManager.prototype.orderFramesBlock = function (images) {
+  if (this.buffer.length > 0) {
+    const bufferFistTime = this.buffer[0].time;
+    const bufferLastTime = this.buffer[this.buffer.length - 1].time;
+    const beforeImages = images.filter(image => image.time < bufferFistTime);
+    const afterImages = images.filter(image => image.time > bufferLastTime);
+    this.buffer = [...beforeImages, ...this.buffer, ...afterImages];
+  } else {
+    this.buffer = images;
+  }
+};
+FramesManager.prototype.findFrameIndexByTime = function (time) {
+  return this.buffer.findIndex(frame => frame.time === time);
+};
+FramesManager.prototype.cancelAllPendingRequests = function () {
+  for (const request in this.requests) {
+    const value = this.requests[request];
+    if (typeof value === 'object' && 'signal' in value) {
+      value.abort();
+    }
+    delete this.requests[request];
+  }
+};
+FramesManager.prototype.timestampToTimeString = function (timestamp) {
+  return new Date(timestamp * 1000).toISOString().substring(11, 19).replace(/:/g, '');
+};
+FramesManager.prototype.getPrevImages = function () {
+  if (this.timestampToTimeString(this.currentTime) === this.startAudienceTime) {
+    return null;
+  }
+  return this.getBufferSlice(this.currentPosition - this.size * this.currentStep, this.currentPosition);
+};
+FramesManager.prototype.getCurrentImages = function () {
+  return this.getBufferSlice(this.currentPosition, this.currentPosition + this.size * this.currentStep);
+};
+FramesManager.prototype.getNextImages = function () {
+  return this.getBufferSlice(this.currentPosition + this.size * this.currentStep, this.currentPosition + this.size * 2 * this.currentStep);
+};
+FramesManager.prototype.getBufferSlice = function (start, end) {
+  let slice = this.buffer.slice(start, end);
+  if (this.currentStep !== 1) {
+    slice = slice.filter((f, i) => i % this.currentStep === 0);
+  }
+  if (slice.length < this.size) {
+    return null;
+  }
+  return slice;
+};
+FramesManager.prototype.next = function () {
+  const newPosition = this.currentPosition + this.currentStep * this.size;
+  this.currentPosition = newPosition < this.buffer.length ? newPosition : this.currentPosition;
+  this.currentTime = this.buffer[this.currentPosition]?.time || this.currentTime;
+  this.checkMinBlockSize(true);
+};
+FramesManager.prototype.previous = function () {
+  const newPosition = this.currentPosition - this.size * this.currentStep;
+  this.currentPosition = newPosition > 0 ? newPosition : 0;
+  this.currentTime = this.buffer[this.currentPosition]?.time || this.currentTime;
+  this.checkMinBlockSize(true);
+};
+FramesManager.prototype.getFileInfo = async function (time, step) {
+  if (time) {
+    let response = (await FramesService.getFileInfoRequest({
+      direction: Enum.Direction.Self,
+      channel: this.channel,
+      split: this.currentStep,
+      time: time,
+      step: step
+    })).data;
+    if (response.status == Enum.ResponseStatus.Ok) {
+      return response.data;
+    } else {
+      return null;
+    }
+  } else {
+    return null;
+  }
+};
+FramesManager.prototype.getNextFileInfo = async function (time, step) {
+  let response = (await FramesService.getFileInfoRequest({
+    direction: Enum.Direction.Next,
+    channel: this.channel,
+    split: this.currentStep,
+    time: time,
+    step: step
+  })).data;
+  if (response.status == Enum.ResponseStatus.Ok) {
+    return response.data;
+  } else {
+    return null;
+  }
+};
+/* harmony default export */ var utils_FramesManager = (FramesManager);
+;// CONCATENATED MODULE: ./src/utils/FramesInterface.js
+
+const server = sessionStorage.getItem('server');
+function getServerUrlWithParams() {
+  return {
+    url: sessionStorage.getItem('base_url'),
+    params: server === 'alternative' ? '&BlockPathConfig=AlernativeTvConfig' : ''
+  };
+}
+function FramesInterface(channel, numberOfRows, framesPerRow, currentTime, startAudienceTime) {
+  let useCache = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
+  this.channel = channel;
+  this.numberOfRows = numberOfRows;
+  this.framesPerRow = framesPerRow;
+  this.currentTime = currentTime;
+  this.firstFrameTime = currentTime;
+  this.startAudienceTime = startAudienceTime;
+  this.useCache = useCache;
+}
+FramesInterface.prototype.init = async function () {
+  this.framesManager = await new utils_FramesManager(this.channel, this.numberOfRows * this.framesPerRow, this.currentTime, this.startAudienceTime, this.useCache);
+  await this.framesManager.goTo();
+  await this.loadFrames();
+};
+FramesInterface.prototype.initLight = async function () {
+  this.framesManager = await new utils_FramesManager(this.channel, this.numberOfRows * this.framesPerRow, this.currentTime, this.startAudienceTime, this.useCache);
+};
+FramesInterface.prototype.changeTime = async function (time) {
+  await this.framesManager.goTo(time);
+  await this.loadFrames();
+};
+FramesInterface.prototype.loadFrames = async function () {
+  let prev = (await this.framesManager.getPrevImages()) || [];
+  let next = (await this.framesManager.getNextImages()) || [];
+  let current = (await this.framesManager.getCurrentImages()) || [];
+  prev = await this.constructImagesComponent(prev);
+  current = await this.constructImagesComponent(current);
+  next = await this.constructImagesComponent(next);
+  this.frames = {
+    prev,
+    current,
+    next
+  };
+};
+FramesInterface.prototype.loadNextFrames = async function () {
+  this.framesManager.next();
+  let next = (await this.framesManager.getNextImages()) || [];
+  next = await this.constructImagesComponent(next);
+  this.frames.prev = this.frames.current;
+  this.frames.current = this.frames.next;
+  this.frames.next = next;
+};
+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);
+  this.frames.next = this.frames.current;
+  this.frames.current = this.frames.prev;
+  this.frames.prev = prev;
+};
+FramesInterface.prototype.constructImagesComponent = async function (array) {
+  const Semaphor = [];
+  for (let frame of array) {
+    const image = document.createElement('img');
+    image.src = frame.title === -1 ? __webpack_require__(9890) : `${sessionStorage.getItem('base_url')}frames/${frame.title}${server == 'alternative' ? '?server=alt' : ''}`;
+    image.style.maxWidth = frame.title === -1 ? '80%' : '100%';
+    image.style.contain = 'true';
+    Semaphor.push(new Promise(resolve => {
+      image.addEventListener('load', () => {
+        resolve();
+      });
+    }));
+    frame['image'] = image.outerHTML;
+  }
+  await Promise.all(Semaphor);
+  return array;
+};
+FramesInterface.prototype.getFrames = function (position) {
+  const positions = ['prev', 'current', 'next'];
+  const images = this.frames[positions[position]];
+  if (images && images.length > 0) {
+    return images;
+  }
+  return Array.from(Array(this.numberOfRows * this.framesPerRow).keys());
+};
+FramesInterface.prototype.getCurrentTime = function () {
+  return this.framesManager.currentTime;
+};
+FramesInterface.prototype.getVideoUrl = function (frame) {
+  let {
+    url,
+    params
+  } = getServerUrlWithParams();
+  return url + 'GetVideo?Client=' + sessionStorage.getItem('client') + '&Channel=' + this.channel + '&Time=' + frame.time + params + '#t=' + frame.number;
+};
+FramesInterface.prototype.getVideoUrlForTime = function (time) {
+  let {
+    url,
+    params
+  } = getServerUrlWithParams();
+  return url + 'GetVideo?Client=' + sessionStorage.getItem('client') + '&Channel=' + this.channel + '&Time=' + time + params;
+};
+FramesInterface.prototype.getVideoStartTime = async function (frame) {
+  try {
+    const block = await this.framesManager.getFileInfo(frame.time, 0);
+    return block;
+  } catch (err) {
+    console.log(err);
+  }
+};
+FramesInterface.prototype.getBlockInfo = async function (frame) {
+  try {
+    const block = await this.framesManager.getFileInfo(frame.time, 0);
+    return block;
+  } catch (err) {
+    console.log(err);
+  }
+};
+FramesInterface.prototype.getNextVideoStartTime = async function (time) {
+  try {
+    const block = await this.framesManager.getNextFileInfo(time, 0);
+    return block.start;
+  } catch (err) {
+    console.log(err);
+  }
+};
+FramesInterface.prototype.setCurrentStep = function (step) {
+  this.framesManager.currentStep = step;
+};
+FramesInterface.prototype.changeSize = async function (numberOfRows, framesPerRow) {
+  this.numberOfRows = numberOfRows;
+  this.framesPerRow = framesPerRow;
+  this.framesManager.size = this.numberOfRows * this.framesPerRow;
+  await this.loadFrames();
+};
+FramesInterface.prototype.getVideoRequestByUrl = function (url_path, t) {
+  const {
+    url,
+    params
+  } = getServerUrlWithParams();
+  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-40.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=28a1997b&
+var Commandsvue_type_template_id_28a1997b_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"
+    }
+  }, [_vm.commandBarShow ? _c('div', {
+    staticClass: "visualization-row visualization-justify-center"
+  }, _vm._l(_vm.commandBarBtns, function (btn, index) {
+    return _c('div', {
+      key: 'command-btn-' + index
+    }, [!btn ? _c('hr', {
+      staticClass: "visualization-divider vertical",
+      staticStyle: {
+        "margin": "0 4px"
+      }
+    }) : _vm._e(), btn && (btn.condition ? btn.condition() : true) ? _c('button', {
+      directives: [{
+        name: "tooltip",
+        rawName: "v-tooltip",
+        value: btn.text && typeof btn.text === 'function' ? btn.text() : btn.text,
+        expression: "\n          btn.text && typeof btn.text === 'function' ? btn.text() : btn.text\n        "
+      }],
+      staticClass: "command-bar-btn",
+      style: {
+        color: btn.color && typeof btn.color === 'function' ? btn.color() : 'black'
+      },
+      on: {
+        "click": btn.fnc
+      }
+    }, [_c('font-awesome-icon', {
+      attrs: {
+        "id": btn.id,
+        "icon": 'fa-solid ' + (btn.icon && typeof btn.icon === 'function' ? btn.icon() : btn.icon)
+      }
+    })], 1) : _vm._e()]);
+  }), 0) : _vm._e(), _c('hr', {
+    staticClass: "visualization-divider"
+  })]);
+};
+var Commandsvue_type_template_id_28a1997b_staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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_ = ({
+  props: {
+    videoPlaying: {
+      type: Boolean,
+      default: false
+    },
+    videoPaused: {
+      type: Boolean,
+      default: false
+    },
+    insertTime: {
+      type: Boolean,
+      default: false
+    },
+    hourIniSelected: {
+      type: Boolean,
+      default: false
+    },
+    hourEndSelected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      commandBarShow: true,
+      commandBarBtns: [{
+        fnc: () => this.$emit('prev-loop-activate'),
+        icon: 'fa-backward',
+        text: 'Fast Backward',
+        id: 'Fast Backward'
+      }, {
+        fnc: () => this.$emit('prev'),
+        icon: 'fa-step-backward',
+        text: 'Step Backward',
+        id: 'Step Backward'
+      }, {
+        fnc: () => this.$emit('go-to'),
+        icon: 'fa-clock',
+        text: this.$i18n.t('infoBar.setHour'),
+        id: 'Definir Hora'
+      }, {
+        fnc: () => this.$emit('next'),
+        icon: 'fa-step-forward',
+        text: 'Step Forward',
+        id: 'Step Forward'
+      }, {
+        fnc: () => this.$emit('next-loop-activate'),
+        icon: 'fa-forward',
+        text: 'Fast Forward',
+        id: 'Fast Forward'
+      }, {
+        fnc: () => this.$emit('play-or-pause'),
+        icon: () => {
+          return this.videoPlaying && !this.videoPaused ? 'fa-pause' : 'fa-play';
+        },
+        text: () => {
+          return this.videoPlaying && !this.videoPaused ? 'Pause' : 'Play';
+        },
+        id: 'playOrPause'
+      }, {
+        fnc: () => this.$emit('stop-playing'),
+        icon: 'fa-stop',
+        text: 'Stop',
+        id: 'Stop'
+      }, null, {
+        fnc: () => this.$emit('open-frame-selection'),
+        icon: 'fa-border-all',
+        text: this.$i18n.t('infoBar.gridForm'),
+        id: 'Formato da grelha'
+      }, {
+        fnc: () => this.$emit('open-frames-per-second'),
+        icon: 'fa-sliders-h',
+        text: this.$i18n.t('infoBar.secondImage'),
+        id: 'Segundos por Imagem'
+      },
+      // {
+      //   fnc: () => this.$emit('open-blocks'),
+      //   icon: 'fa-cut',
+      //   text: 'Escolher intervalo de blocos',
+      //   id: 'Escolher intervalo de blocos',
+      // },
+      {
+        fnc: () => this.$emit('open-playback-rate'),
+        icon: 'fa-tachometer-alt',
+        text: this.$i18n.t('infoBar.chooseVelocity'),
+        id: 'Escolher velocidade de reprodução'
+      },
+      // {
+      //   fnc: () => this.$emit('insert-time-force'),
+      //   icon: 'fa-arrow-turn-down',
+      //   text: 'Recuperar Notícia',
+      //   id: 'Recuperar Notícia',
+      //   condition: () => {
+      //     return this.insertTime
+      //   },
+      // },
+      null, {
+        fnc: () => this.$emit('set-hour-ini'),
+        icon: 'fa-hourglass-start',
+        text: this.$i18n.t('form.inicialHour'),
+        id: 'Hora Inicial',
+        color: () => {
+          return this.hourIniSelected ? 'var(--visualization-start)' : 'black';
+        }
+      }, {
+        fnc: () => this.$emit('insert-time'),
+        icon: 'fa-arrow-circle-down',
+        text: this.$i18n.t('infoBar.insert'),
+        id: 'insert',
+        condition: () => {
+          return this.insertTime;
+        }
+      }, {
+        fnc: () => this.$emit('set-hour-end'),
+        icon: 'fa-hourglass-end',
+        text: this.$i18n.t('form.endHour'),
+        id: 'Hora Final',
+        color: () => {
+          return this.hourEndSelected ? 'var(--visualization-end)' : 'black';
+        }
+      }
+      // {
+      //   fnc: () => this.$emit('check-available-block'),
+      //   icon: 'fa-video',
+      //   text: 'Próximo bloco disponível',
+      //   id: 'Próximo bloco disponível',
+      // },
+      ]
+    };
+  }
+});
+;// CONCATENATED MODULE: ./src/components/Commands.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_Commandsvue_type_script_lang_js_ = (Commandsvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./src/components/Commands.vue
+
+
+
+
+
+/* normalize component */
+;
+var Commands_component = (0,componentNormalizer/* default */.Z)(
+  components_Commandsvue_type_script_lang_js_,
+  Commandsvue_type_template_id_28a1997b_render,
+  Commandsvue_type_template_id_28a1997b_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* 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-40.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=68da7f95&
+var Infosvue_type_template_id_68da7f95_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "visualization-row visualization-justify-center visualization-align-center",
+    style: !_vm.commandsShow ? 'border-top-right-radius: 6px; padding: 4px' : 'padding: 4px',
+    attrs: {
+      "id": "info-bar"
+    }
+  }, [_c('span', [_vm._v(" " + _vm._s(_vm.playbackRate) + "x ")]), _c('hr', {
+    staticClass: "visualization-divider vertical",
+    staticStyle: {
+      "margin": "0 8px"
+    }
+  }), _c('span', [_vm._v(" " + _vm._s(_vm.$t('infoBar.selected', {
+    seconds: _vm.hourEnd && _vm.hourIni ? _vm.hourEnd - _vm.hourIni + 1 : 0,
+    hour_ini: _vm.convertToAudienceTime(_vm.hourIni),
+    hour_end: _vm.convertToAudienceTime(_vm.hourEnd)
+  })) + " ")]), _c('hr', {
+    staticClass: "visualization-divider vertical",
+    staticStyle: {
+      "margin": "0 8px"
+    }
+  }), _c('span', [_vm._v(" " + _vm._s(_vm.$t('infoBar.interval', {
+    seconds: _vm.secondsPerFrame
+  })) + " ")]), _c('hr', {
+    staticClass: "visualization-divider vertical",
+    staticStyle: {
+      "margin": "0 8px"
+    }
+  }), _c('span', [_vm._v(" " + _vm._s(_vm.$t('infoBar.block', {
+    time1: _vm.convertToAudienceTime(_vm.blockStartTime),
+    time2: _vm.convertToAudienceTime(_vm.blockTotalTime)
+  })) + " ")]), _c('hr', {
+    staticClass: "visualization-divider vertical",
+    staticStyle: {
+      "margin": "0 8px"
+    }
+  }), _vm._v(" " + _vm._s(_vm.framesPerRow * _vm.numberOfRows) + " "), _c('hr', {
+    staticClass: "visualization-divider vertical",
+    staticStyle: {
+      "margin": "0 8px"
+    }
+  }), _vm._v(" " + _vm._s(_vm.framesPerRow + '*' + _vm.numberOfRows) + " "), _vm.alternativeServer || !_vm.cache ? _c('span', {
+    staticClass: "visualization-divider vertical",
+    staticStyle: {
+      "margin": "0 8px"
+    }
+  }) : _vm._e(), _vm.alternativeServer ? _c('span', [_c('v-icon', {
+    attrs: {
+      "color": "error",
+      "small": "",
+      "left": ""
+    }
+  }, [_vm._v("fa-exclamation-triangle")]), _c('strong', [_vm._v(_vm._s(_vm.$t('infoBar.alternativeServer')))])], 1) : _vm._e(), _vm.alternativeServer && !_vm.cache ? _c('span', {
+    staticClass: "visualization-divider vertical",
+    staticStyle: {
+      "margin": "0 8px"
+    }
+  }) : _vm._e(), !_vm.cache ? _c('span', [_c('v-icon', {
+    attrs: {
+      "color": "warning",
+      "small": "",
+      "left": ""
+    }
+  }, [_vm._v("fa-exclamation-circle")]), _c('strong', [_vm._v(_vm._s(_vm.$t('infoBar.notUsingCache')))])], 1) : _vm._e(), _c('div', {
+    staticClass: "settings-container"
+  }, [_c('font-awesome-icon', {
+    directives: [{
+      name: "tooltip",
+      rawName: "v-tooltip",
+      value: _vm.alternativeServer ? _vm.$t('infoBar.changeServer') : _vm.$t('infoBar.changeServer'),
+      expression: "\n        alternativeServer\n          ? $t('infoBar.changeServer')\n          : $t('infoBar.changeServer')\n      "
+    }],
+    attrs: {
+      "icon": "fa-solid fa-server"
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('change-server');
+      }
+    }
+  }), _c('font-awesome-icon', {
+    directives: [{
+      name: "tooltip",
+      rawName: "v-tooltip",
+      value: _vm.commandsShow ? _vm.$t('moduletelentry.hideButtons') : _vm.$t('moduletelentry.showButtons'),
+      expression: "\n        commandsShow\n          ? $t('moduletelentry.hideButtons')\n          : $t('moduletelentry.showButtons')\n      "
+    }],
+    attrs: {
+      "icon": _vm.commandsShow ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('toogle-commands-visibility');
+      }
+    }
+  }), _c('font-awesome-icon', {
+    directives: [{
+      name: "tooltip",
+      rawName: "v-tooltip",
+      value: _vm.cache ? _vm.$t('infoBar.disableCache') : _vm.$t('infoBar.activateCache'),
+      expression: "\n        cache ? $t('infoBar.disableCache') : $t('infoBar.activateCache')\n      "
+    }],
+    attrs: {
+      "icon": _vm.cache ? 'fa-solid fa-ban' : 'fa-solid fa-sync'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('toogle-cache');
+      }
+    }
+  })], 1)]);
+};
+var Infosvue_type_template_id_68da7f95_staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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_ = ({
+  props: {
+    playbackRate: {
+      type: Number,
+      required: true
+    },
+    secondsPerFrame: {
+      type: Number,
+      required: true
+    },
+    commandsShow: {
+      type: Boolean,
+      required: true
+    },
+    cache: {
+      type: Boolean,
+      required: true
+    },
+    blockStartTime: {
+      type: Number,
+      required: true
+    },
+    videoTotalDuration: {
+      type: Number,
+      required: true
+    },
+    alternativeServer: {
+      type: Boolean,
+      required: true
+    },
+    framesPerRow: {
+      type: Number,
+      required: true
+    },
+    numberOfRows: {
+      type: Number,
+      required: true
+    },
+    hourIni: {
+      type: [Number, Boolean]
+    },
+    hourEnd: {
+      type: [Number, Boolean]
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    blockTotalTime() {
+      return this.videoTotalDuration + this.blockStartTime;
+    }
+  },
+  methods: {
+    convertToAudienceTime(time) {
+      let separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ':';
+      const d = this.getDateParts();
+      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000;
+      let hour = this.dateInUtc(time * 1000).toTimeString().split(' ')[0].split(':').map(Number);
+      if (time > limit && time <= limit + this.startAudienceSeconds) {
+        hour[0] = 24 + hour[0];
+      }
+      return hour.map(part => part > 9 ? part.toString() : '0' + part).join(separator);
+    },
+    getDateParts() {
+      let date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.date;
+      const d = new Date(date);
+      return {
+        year: d.getFullYear(),
+        month: d.getMonth(),
+        day: d.getDate()
+      };
+    },
+    dateInUtc(miliSeconds) {
+      var date = new Date(miliSeconds);
+      var utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+      return utc;
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/components/Infos.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_Infosvue_type_script_lang_js_ = (Infosvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./src/components/Infos.vue
+
+
+
+
+
+/* normalize component */
+;
+var Infos_component = (0,componentNormalizer/* default */.Z)(
+  components_Infosvue_type_script_lang_js_,
+  Infosvue_type_template_id_68da7f95_render,
+  Infosvue_type_template_id_68da7f95_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var Infos = (Infos_component.exports);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/VideoProgress.vue?vue&type=template&id=7fe6f244&scoped=true&
+var VideoProgressvue_type_template_id_7fe6f244_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', [_c('div', {
+    staticClass: "visualization-row",
+    attrs: {
+      "id": "progress"
+    },
+    on: {
+      "mousedown": _vm.progressMouseDown
+    }
+  }, [_c('span', {
+    staticClass: "progressLabel"
+  }, [_vm._v(" " + _vm._s(_vm.convertToAudienceTime(_vm.videoTime)) + " ")]), _c('span', {
+    staticClass: "progressBar"
+  })]), _c('hr', {
+    staticClass: "visualization-divider"
+  })]);
+};
+var VideoProgressvue_type_template_id_7fe6f244_scoped_true_staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/VideoProgress.vue?vue&type=script&lang=js&
+/* harmony default export */ var VideoProgressvue_type_script_lang_js_ = ({
+  props: {
+    videoTime: {
+      type: Number,
+      required: true
+    }
+  },
+  methods: {
+    progressMouseDown(e) {
+      this.progressVideoDrag = true;
+      const array = this.$refs.frames.filter(fc => fc.videoStatus === fc.Status.playing);
+      if (array.length === 1) {
+        const frame = array[0];
+        frame.playOrPause();
+      }
+      this.updateProgress(e);
+      window.addEventListener('mouseup', this.progressMouseUp);
+      window.addEventListener('mousemove', this.progressMouseMove);
+    },
+    progressMouseUp(e) {
+      if (this.progressVideoDrag) {
+        const array = this.$refs.frames.filter(fc => fc.videoStatus === fc.Status.paused);
+        if (array.length === 1) {
+          const frame = array[0];
+          frame.playOrPause();
+        }
+        this.updateProgress(e);
+      }
+      window.removeEventListener('mouseup', this.progressMouseUp);
+      window.removeEventListener('mousemove', this.progressMouseMove);
+      this.progressVideoDrag = false;
+    },
+    progressMouseMove(e) {
+      if (this.progressVideoDrag) {
+        this.updateProgress(e);
+      }
+    },
+    updateProgress(e, time) {
+      let percentage;
+      const element = document.getElementById('progress');
+      const elementBar = element.getElementsByClassName('progressBar')[0];
+      let frames = this.$refs.frames.filter(fc => fc.videoStatus === fc.Status.playing || fc.videoStatus === fc.Status.paused);
+      let frame = frames.length === 1 ? frames[0] : null;
+      if (time && frame) {
+        let timeInSeconds = frame.videoCurrentTime - this.sliderStartTime;
+        percentage = timeInSeconds / this.videoSliderTotalDuration * 100;
+      } else if (e) {
+        const rect = element.getBoundingClientRect();
+        const max = Math.round(rect.width);
+        const pos = e.pageX - Math.round(rect.left);
+        percentage = pos / max * 100 <= 100 ? pos / max * 100 : 100;
+        if (frame) {
+          let targetInSeconds = this.videoSliderTotalDuration * (percentage / 100);
+          let timeStampToJump = parseInt(this.sliderStartTime + targetInSeconds);
+          frame.videoJumpToTimeStamp(timeStampToJump);
+        }
+      } else {
+        percentage = 0;
+      }
+      elementBar.style.width = `${percentage}%`;
+    },
+    getDateParts() {
+      let date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.date;
+      const d = new Date(date);
+      return {
+        year: d.getFullYear(),
+        month: d.getMonth(),
+        day: d.getDate()
+      };
+    },
+    dateInUtc(miliSeconds) {
+      var date = new Date(miliSeconds);
+      var utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+      return utc;
+    },
+    convertToAudienceTime(time) {
+      let separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ':';
+      const d = this.getDateParts();
+      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000;
+      let hour = this.dateInUtc(time * 1000).toTimeString().split(' ')[0].split(':').map(Number);
+      if (time > limit && time <= limit + this.startAudienceSeconds) {
+        hour[0] = 24 + hour[0];
+      }
+      return hour.map(part => part > 9 ? part.toString() : '0' + part).join(separator);
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/components/VideoProgress.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_VideoProgressvue_type_script_lang_js_ = (VideoProgressvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/VideoProgress.vue?vue&type=style&index=0&id=7fe6f244&prod&scoped=true&lang=css&
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/components/VideoProgress.vue?vue&type=style&index=0&id=7fe6f244&prod&scoped=true&lang=css&
+
+;// CONCATENATED MODULE: ./src/components/VideoProgress.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var VideoProgress_component = (0,componentNormalizer/* default */.Z)(
+  components_VideoProgressvue_type_script_lang_js_,
+  VideoProgressvue_type_template_id_7fe6f244_scoped_true_render,
+  VideoProgressvue_type_template_id_7fe6f244_scoped_true_staticRenderFns,
+  false,
+  null,
+  "7fe6f244",
+  null
+  
+)
+
+/* 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-40.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=9f47e4d0&scoped=true&
+var Settingsvue_type_template_id_9f47e4d0_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  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",
+    staticStyle: {
+      "padding": "5px",
+      "font-weight": "bold",
+      "background-color": "var(--visualization-primary)",
+      "border-color": "var(--visualization-primary)",
+      "height": "40px",
+      "color": "white",
+      "display": "flex",
+      "justify-content": "center",
+      "padding-top": "10px"
+    }
+  }, [_vm._v(" " + _vm._s(_vm.$t('infoBar.gridForm')) + " ")]), _c('div', {
+    staticClass: "visualization-row",
+    staticStyle: {
+      "justify-content": "center"
+    }
+  }, _vm._l(_vm.items, function (item, index) {
+    return _c('div', {
+      key: index,
+      staticClass: "visualization-col",
+      staticStyle: {
+        "min-width": "200px",
+        "max-width": "200px"
+      }
+    }, [_c('img', {
+      style: _vm.framesValue !== item.value ? 'filter: grayscale(1)' : '',
+      attrs: {
+        "src": item.image,
+        "width": "100%"
+      },
+      on: {
+        "click": () => _vm.framesValue = item.value
+      }
+    })]);
+  }), 0), _c('div', {
+    staticClass: "visualization-divider"
+  }), _c('div', {
+    staticClass: "visualization-row",
+    staticStyle: {
+      "display": "flex",
+      "justify-content": "center",
+      "margin-top": "10px",
+      "margin-bottom": "10px"
+    }
+  }, [_c('button', {
+    staticStyle: {
+      "border-radius": "4px",
+      "height": "35px",
+      "width": "70px",
+      "background-color": "var(--visualization-primary)",
+      "border-color": "var(--visualization-primary)",
+      "color": "white"
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('close', 'frames');
+      }
+    }
+  }, [_vm._v(" Ok ")])])]), _c('dialog', {
+    ref: "secondsPerFrame"
+  }, [_c('div', {
+    staticClass: "visualization-row",
+    staticStyle: {
+      "padding": "5px",
+      "font-weight": "bold",
+      "background-color": "var(--visualization-primary)",
+      "border-color": "var(--visualization-primary)",
+      "height": "40px",
+      "color": "white",
+      "display": "flex",
+      "justify-content": "center",
+      "padding-top": "10px"
+    }
+  }, [_vm._v(" " + _vm._s(_vm.$t('infoBar.secondImage')) + " ")]), _c('div', {
+    staticClass: "visualization-row",
+    staticStyle: {
+      "margin": "25px",
+      "height": "20px"
+    }
+  }, [_c('input', {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.secondsPerFrameValue,
+      expression: "secondsPerFrameValue"
+    }],
+    ref: "secondsPerFrameInput",
+    staticStyle: {
+      "height": "30px",
+      "width": "300px"
+    },
+    attrs: {
+      "type": "range",
+      "step": "1",
+      "max": "5",
+      "min": "1"
+    },
+    domProps: {
+      "value": _vm.secondsPerFrameValue
+    },
+    on: {
+      "__r": function ($event) {
+        _vm.secondsPerFrameValue = $event.target.value;
+      }
+    }
+  }), _c('span', {
+    staticStyle: {
+      "padding-left": "20px",
+      "font-size": "16px"
+    }
+  }, [_vm._v(" " + _vm._s(_vm.secondsPerFrame + ' s'))])]), _c('div', {
+    staticClass: "visualization-divider",
+    staticStyle: {
+      "margin": "10px"
+    }
+  }), _c('div', {
+    staticClass: "visualization-row",
+    staticStyle: {
+      "display": "flex",
+      "justify-content": "center",
+      "margin-top": "10px"
+    }
+  }, [_c('button', {
+    staticStyle: {
+      "border-radius": "4px",
+      "height": "35px",
+      "width": "70px",
+      "background-color": "var(--visualization-primary)",
+      "border-color": "var(--visualization-primary)",
+      "color": "white",
+      "margin-bottom": "8px"
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('close', 'secondsPerFrame');
+      }
+    }
+  }, [_vm._v(" Ok ")])])]), _c('dialog', {
+    ref: "goTo"
+  }, [_c('div', {
+    staticStyle: {
+      "padding": "5px",
+      "font-weight": "bold",
+      "background-color": "var(--visualization-primary)",
+      "border-color": "var(--visualization-primary)",
+      "height": "35px",
+      "color": "white",
+      "display": "flex",
+      "justify-content": "center",
+      "padding-top": "8px"
+    }
+  }, [_vm._v(" " + _vm._s(_vm.$t('infoBar.goTo')) + " ")]), _c('div', {
+    staticClass: "visualization-row",
+    staticStyle: {
+      "margin": "25px",
+      "height": "20px"
+    }
+  }, [_c('input', {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.goToValue,
+      expression: "goToValue"
+    }, {
+      name: "mask",
+      rawName: "v-mask",
+      value: '##:##:##',
+      expression: "'##:##:##'"
+    }],
+    staticStyle: {
+      "height": "30px",
+      "width": "300px",
+      "border": "0.1px solid #c2c9d6",
+      "border-radius": "3px",
+      "padding": "5px"
+    },
+    attrs: {
+      "type": "text",
+      "placeholder": "hh:mm:ss"
+    },
+    domProps: {
+      "value": _vm.goToValue
+    },
+    on: {
+      "input": function ($event) {
+        if ($event.target.composing) return;
+        _vm.goToValue = $event.target.value;
+      }
+    }
+  })]), _c('div', {
+    staticClass: "visualization-divider",
+    staticStyle: {
+      "margin-top": "40px"
+    }
+  }), _c('div', {
+    staticClass: "visualization-row",
+    staticStyle: {
+      "display": "flex",
+      "justify-content": "center",
+      "margin-top": "10px",
+      "margin-bottom": "10px"
+    }
+  }, [_c('button', {
+    staticStyle: {
+      "border-radius": "4px",
+      "height": "35px",
+      "width": "70px",
+      "background-color": "var(--visualization-primary)",
+      "border-color": "var(--visualization-primary)",
+      "color": "white"
+    },
+    on: {
+      "click": () => {
+        _vm.$emit('close', 'goTo');
+        _vm.$emit('change-go-to', _vm.goToValue);
+        _vm.goToValue = '';
+      }
+    }
+  }, [_vm._v(" Ok ")])])]), _c('GlobalEvents', {
+    on: {
+      "keydown": [function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 107) return null;
+        return _vm.changePlaybackRate(1);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 109) return null;
+        return _vm.changePlaybackRate(-1);
+      }]
+    }
+  }), _c('dialog', {
+    ref: "playbackRate"
+  }, [_c('div', {
+    staticClass: "visualization-row",
+    staticStyle: {
+      "padding": "5px",
+      "font-weight": "bold",
+      "background-color": "var(--visualization-primary)",
+      "border-color": "var(--visualization-primary)",
+      "height": "35px",
+      "color": "white",
+      "display": "flex",
+      "justify-content": "center",
+      "padding-top": "8px"
+    }
+  }, [_vm._v(" " + _vm._s(_vm.$t('infoBar.playbackSpeed')) + " ")]), _c('div', {
+    staticClass: "visualization-row",
+    staticStyle: {
+      "margin": "25px",
+      "height": "20px",
+      "width": "380px"
+    }
+  }, [_c('input', {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.playbackRateValue,
+      expression: "playbackRateValue"
+    }],
+    ref: "playbackRateInput",
+    staticStyle: {
+      "height": "30px",
+      "width": "300px"
+    },
+    attrs: {
+      "type": "range",
+      "step": "0.25",
+      "max": "3",
+      "min": "1"
+    },
+    domProps: {
+      "value": _vm.playbackRateValue
+    },
+    on: {
+      "__r": function ($event) {
+        _vm.playbackRateValue = $event.target.value;
+      }
+    }
+  }), _c('span', {
+    staticStyle: {
+      "padding-left": "20px",
+      "padding-right": "20px",
+      "font-size": "16px"
+    }
+  }, [_vm._v(_vm._s(_vm.playbackRate + 'x'))])]), _c('div', {
+    staticClass: "visualization-divider",
+    staticStyle: {
+      "margin-top": "40px"
+    }
+  }), _c('div', {
+    staticClass: "visualization-row",
+    staticStyle: {
+      "display": "flex",
+      "justify-content": "center",
+      "margin-top": "10px",
+      "margin-bottom": "10px"
+    }
+  }, [_c('button', {
+    staticStyle: {
+      "border-radius": "4px",
+      "height": "35px",
+      "width": "70px",
+      "background-color": "var(--visualization-primary)",
+      "border-color": "var(--visualization-primary)",
+      "color": "white"
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('close', 'playbackRate');
+      }
+    }
+  }, [_vm._v(" Ok ")])])])], 1);
+};
+var Settingsvue_type_template_id_9f47e4d0_scoped_true_staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./src/assets/grid/1x1.svg
+var _1x1_namespaceObject = "data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0ExTlRndU1pQXhPRE11TmlJZ0lIaHRiRzV6T25ZOUltaDBkSEJ6T2k4dmRtVmpkR0V1YVc4dmJtRnVieUkrUEhCaGRHZ2daRDBpVFRVMU9DNHlJREIyT1RBdU1XZ3RPRGd1TTJNdE1TNDVJREF0TVM0NUlEQXRNUzQ1TFRFdU9WWXhMamhqTUMweExqZ2dNQzB4TGpnZ01TNDRMVEV1T0dnNE9DNDBlbTB0TkRZNElERTRNeTQxU0RCV09UVXVNV013TFRFdU55QXdMVEV1TnlBeExqY3RNUzQzYURnMkxqZGpNUzQ0SURBZ01TNDRJREFnTVM0NElERXVPSFk0T0M0emVtMDVNeTQySURCSU9UTXVObFk1TlM0ell6QXRNUzQ1SURBdE1TNDVJREV1T1MweExqbElNVGd5WXpFdU9DQXdJREV1T0NBd0lERXVPQ0F4TGpoMk9EZ3VNM3B0TWpnd0xqa2dNR2d0T1RBdU1sWTVOUzR4WXpBdE1TNDNJREF0TVM0M0lERXVOaTB4TGpkSU5EWXpZekV1TmlBd0lERXVOaUF3SURFdU5pQXhMamQyTmpJdU1td3VNU0F5Tmk0eWVtMDVNeTQxTFRrd2RqZzVZekFnTGprdExqSWdNUzR4TFRFdU1TQXhMakZJTkRZNFZqazFMakpqTUMweExqY2dNQzB4TGpjZ01TNDNMVEV1TjJnNE9DNDFlbTB0TWpnd0xqa2dPVEJvTFRrd1ZqazBMamxqTUMwdU9TNHhMVEV1TlNBeExqSXRNUzQxU0RJM05tTXVPU0F3SURFdU1pNHpJREV1TWlBeExqSnNMakVnT0RndU9YcHRPVE11TmlBd2FDMDVNRlk1TlM0eFl6QXRNUzQzSURBdE1TNDNJREV1TnkweExqZG9PRFl1TldNeExqZ2dNQ0F4TGpnZ01DQXhMamdnTVM0NGRqZzRMak42SWlCbWFXeHNQU0lqWTJKalltTmlJaTgrUEhCaGRHZ2daRDBpVFRBZ05EVXVNVll4TGpWRE1DQXVNeTR6SURBZ01TNDBJREJvT0RjdU0yTXhMaklnTUNBeExqVXVNeUF4TGpRZ01TNDFkamczTGpGak1DQXhMakl0TGpNZ01TNDFMVEV1TlNBeExqVklNUzQwWXkweExqTWdNQzB4TGpVdExqUXRNUzQxTFRFdU5rd3dJRFExTGpGNklpQm1hV3hzUFNJak1UVTJOV013SWk4K1BIQmhkR2dnWkQwaVRUa3pMallnTkRRdU9WWXhMalZqTUMweExqWWdNQzB4TGpZZ01TNDJMVEV1Tm1nNE55NHhZekV1TlNBd0lERXVOU0F3SURFdU5TQXhMaloyT0RZdU9HTXdJREV1TmlBd0lERXVOaTB4TGpZZ01TNDJTRGsxTGpSakxURXVPQ0F3TFRFdU9DQXdMVEV1T0MweExqaFdORFF1T1hwdE1qZ3dMamt1TWxZeExqWmpNQzB4TGpZZ01DMHhMallnTVM0MkxURXVObWc0Tnk0eFl6RXVOU0F3SURFdU5TQXdJREV1TlNBeExqWjJPRFl1TjJNd0lERXVPQ0F3SURFdU9DMHhMamdnTVM0NGFDMDROaTQzWXkweExqY2dNQzB4TGpjZ01DMHhMamN0TVM0M1ZqUTFMakY2YlMweE5ESXVNU0EwTlVneE9EbGpMVEV1TmlBd0xURXVOaUF3TFRFdU5pMHhMalYyTFRnM1l6QXRNUzQySURBdE1TNDJJREV1TmkweExqWm9PRFl1T0dNeExqWWdNQ0F4TGpZZ01DQXhMallnTVM0MWRqZzNZekFnTVM0MklEQWdNUzQyTFRFdU5pQXhMalpvTFRRekxqUjZiVFE0TGpVdE5EVXVNbFl4TGpWak1DMHhMallnTUMweExqWWdNUzQyTFRFdU5tZzROaTQ0WXpFdU5pQXdJREV1TmlBd0lERXVOaUF4TGpWMk9EZGpNQ0F4TGpZZ01DQXhMall0TVM0MklERXVObWd0T0RZdU9HTXRNUzQySURBdE1TNDJJREF0TVM0MkxURXVObFkwTkM0NWVpSWdabWxzYkQwaUkyTmlZMkpqWWlJdlBqd3ZjM1puUGc9PSI=";
+;// CONCATENATED MODULE: ./src/assets/grid/2x1.svg
+var _2x1_namespaceObject = "data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0ExTlRndU1pQXhPRE11TmlJZ0lIaHRiRzV6T25ZOUltaDBkSEJ6T2k4dmRtVmpkR0V1YVc4dmJtRnVieUkrUEhCaGRHZ2daRDBpVFRJM055NHpJREU0TXk0MWFDMDVNQzR5VmprMExqSmpNQzB1Tmk0eUxTNDVMamd0TGpsb09EY3VOMk14SURBZ01TNDJJREFnTVM0MklERXVNMnd1TVNBNE9DNDVlazAxTlRndU1pQXdkamt3TGpGb0xUZzRMak5qTFRFdU9TQXdMVEV1T1NBd0xURXVPUzB4TGpsV01TNDRZekF0TVM0NElEQXRNUzQ0SURFdU9DMHhMamhvT0RndU5IcHRMVFEyT0NBeE9ETXVOVWd3VmprMUxqRmpNQzB4TGpjZ01DMHhMamNnTVM0M0xURXVOMmc0Tmk0M1l6RXVPQ0F3SURFdU9DQXdJREV1T0NBeExqaDJPRGd1TTNwdE9UTXVOaUF3U0RrekxqWldPVFV1TTJNd0xURXVPU0F3TFRFdU9TQXhMamt0TVM0NVNERTRNbU14TGpnZ01DQXhMamdnTUNBeExqZ2dNUzQ0ZGpnNExqTjZiVEk0TUM0NUlEQm9MVGt3TGpKV09UVXVNV013TFRFdU55QXdMVEV1TnlBeExqWXRNUzQzU0RRMk0yTXhMallnTUNBeExqWWdNQ0F4TGpZZ01TNDNkall4TGpKc0xqRWdNamN1TW5wdE9UTXVOUzA1TUhZNE9XTXdJQzQ1TFM0eUlERXVNUzB4TGpFZ01TNHhTRFEyT0ZZNU5TNHlZekF0TVM0M0lEQXRNUzQzSURFdU55MHhMamRvT0RndU5YcHRMVEU0Tnk0eElEa3dhQzA1TUM0eVZqazBMalpqTUMweExqRXVOQzB4TGpVZ01TNDFMVEV1Tld3MkxqZ3VNMmc0TUM0eVl6RXVNU0F3SURFdU5TNHlJREV1TlNBeExqUnNMaklnTmpFdU9TNDFJREkxTGpGak1DQXVOeTR4SURFdU15MHVOU0F4TGpkNklpQm1hV3hzUFNJalkySmpZbU5pSWk4K1BIQmhkR2dnWkQwaVRURTRNeTQ0SURRMUxqRjJORE11TldNd0lERXVNUzB1TWlBeExqWXRNUzQxSURFdU5rZzVOV010TVM0eUlEQXRNUzQwTFM0MExURXVOQzB4TGpWV01TNDFRemt6TGpZdU1pQTVOQ0F3SURrMUxqRWdNR2c0Tnk0ell6RXVNaUF3SURFdU5DNDBJREV1TkNBeExqVjJORE11Tm5wTk5EVXVNU0F3YURRekxqZGpNUzR4SURBZ01TNDBMaklnTVM0MElERXVOSFk0Tnk0ell6QWdNUzR4TFM0MElERXVOQzB4TGpRZ01TNDBTREV1TkdNdE1TNHhJREF0TVM0ekxTNHpMVEV1TXkweExqTk1NQ0F4TGpORE1DQXVNaTR6SURBZ01TNHpJREJvTkRNdU9Ib2lJR1pwYkd3OUlpTXhOVFkxWXpBaUx6NDhjR0YwYUNCa1BTSk5OREU1TGpZZ09UQXVNV2d0TkRNdU5XTXRNUzQySURBdE1TNDJJREF0TVM0MkxURXVObFl4TGpaak1DMHhMallnTUMweExqWWdNUzQyTFRFdU5tZzROeTR4WXpFdU5TQXdJREV1TlNBd0lERXVOU0F4TGpaMk9EWXVOMk13SURFdU9DQXdJREV1T0MweExqZ2dNUzQ0YUMwME15NHplazB5TnpjdU15QTBOQzQ1ZGpRekxqVmpNQ0F4TGpjZ01DQXhMamN0TVM0MklERXVOMmd0T0RZdU9HTXRNUzQySURBdE1TNDJJREF0TVM0MkxURXVObll0T0Rkak1DMHhMalVnTUMweExqVWdNUzQyTFRFdU5XZzROaTQ0WXpFdU5pQXdJREV1TmlBd0lERXVOaUF4TGpaMk5ETXVNM3B0T1RNdU5pNHpkalF6TGpKak1DQXhMamNnTUNBeExqY3RNUzQySURFdU4yZ3RPRFl1T0dNdE1TNDJJREF0TVM0MklEQXRNUzQyTFRFdU5uWXRPRGRqTUMweExqVWdNQzB4TGpVZ01TNDJMVEV1TldnNE5pNDRZekV1TmlBd0lERXVOaUF3SURFdU5pQXhMaloyTkRNdU5ub2lJR1pwYkd3OUlpTmpZbU5pWTJJaUx6NDhMM04yWno0PSI=";
+;// CONCATENATED MODULE: ./src/assets/grid/3x1.svg
+var _3x1_namespaceObject = "data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0ExTlRndU1pQXhPRE11TmlJZ0lIaHRiRzV6T25ZOUltaDBkSEJ6T2k4dmRtVmpkR0V1YVc4dmJtRnVieUkrUEhCaGRHZ2daRDBpVFRJM055NHpJREU0TXk0MWFDMDVNQzR5VmprMExqSmpNQzB1Tmk0eUxTNDVMamd0TGpsb09EY3VPR014SURBZ01TNDJJREFnTVM0MklERXVNM1k0T0M0NWVrMDFOVGd1TWlBd2Rqa3dMakZvTFRnNExqTmpMVEV1T1NBd0xURXVPU0F3TFRFdU9TMHhMamxXTVM0NFl6QXRNUzQ0SURBdE1TNDRJREV1T0MweExqaG9PRGd1TkhwdExUUTJPQ0F4T0RNdU5VZ3dWamsxTGpGak1DMHhMamNnTUMweExqY2dNUzQzTFRFdU4yZzROaTQzWXpFdU9DQXdJREV1T0NBd0lERXVPQ0F4TGpoMk9EZ3VNM3B0T1RNdU5pQXdTRGt6TGpaV09UVXVNMk13TFRFdU9TQXdMVEV1T1NBeExqa3RNUzQ1U0RFNE1tTXhMamdnTUNBeExqZ2dNQ0F4TGpnZ01TNDRkamc0TGpONmJUSTRNQzQ1SURCb0xUa3dMakpXT1RVdU1XTXdMVEV1TnlBd0xURXVOeUF4TGpZdE1TNDNTRFEyTTJNeExqWWdNQ0F4TGpZZ01DQXhMallnTVM0M1ZqRTFOMnd1TVNBeU5pNDFlbTA1TXk0MUxUa3dkamc1WXpBZ0xqa3RMaklnTVM0eExURXVNU0F4TGpGSU5EWTRWamsxTGpKak1DMHhMamNnTUMweExqY2dNUzQzTFRFdU4yZzRPQzQxZW0wdE1UZzNMakVnT1RCb0xUa3dMakpXT1RRdU5tTXdMVEV1TVM0MExURXVOU0F4TGpVdE1TNDFiRFl1T0M0emFEZ3dMakpqTVM0eElEQWdNUzQxTGpJZ01TNDFJREV1Tkd3dU1pQTJNUzQ1TGpVZ01qVXVNV013SUM0M0xqRWdNUzR6TFM0MUlERXVOM29pSUdacGJHdzlJaU5qWW1OaVkySWlMejQ4Y0dGMGFDQmtQU0pOTkRVdU1TQTVNQzR4U0RFdU5HTXRNUzR4SURBdE1TNDFMUzR6TFRFdU5TMHhMalJNTUNBeExqVkRNQ0F1TXk0eklEQWdNUzQxSURCb09EY3VNMk14TGpJZ01DQXhMalF1TkNBeExqUWdNUzQxZGpnM0xqRmpNQ0F4TGpJdExqTWdNUzQxTFRFdU5TQXhMalZJTkRVdU1YcE5NVE00TGpnZ01HZzBNeTQxWXpFdU1TQXdJREV1TlM0eklERXVOU0F4TGpSMk9EY3VNbU13SURFdU1pMHVNeUF4TGpRdE1TNDFJREV1TkVnNU5TNHhZeTB4TGpJZ01DMHhMalV0TGpNdE1TNDFMVEV1TlZZeExqUkRPVE11Tmk0eUlEazBJREFnT1RVdU1TQXdhRFF6TGpkNklpQm1hV3hzUFNJak1UVTJOV013SWk4K1BIQmhkR2dnWkQwaVRUTTNOQzQxSURRMUxqRldNUzQyWXpBdE1TNDJJREF0TVM0MklERXVOaTB4TGpab09EY3VNV014TGpZZ01DQXhMallnTUNBeExqWWdNUzQyZGpnMkxqaGpNQ0F4TGpjZ01DQXhMamN0TVM0M0lERXVOMmd0T0RZdU9XTXRNUzQySURBdE1TNDJJREF0TVM0MkxURXVOV3d0TGpFdE5ETXVOWG9pSUdacGJHdzlJaU5qWW1OaVkySWlMejQ4Y0dGMGFDQmtQU0pOTWpjM0xqTWdORFV1TVhZME15NDFZekFnTVM0MUlEQWdNUzQxTFRFdU5pQXhMalZvTFRnMkxqbGpMVEV1TlNBd0xURXVOU0F3TFRFdU5TMHhMalpXTVM0Mll6QXRNUzR5TGpJdE1TNDJJREV1TlMweExqVklNamMyWXpFdU1pQXdJREV1TkM0MElERXVOQ0F4TGpWc0xTNHhJRFF6TGpWNklpQm1hV3hzUFNJak1UVTJOV013SWk4K1BIQmhkR2dnWkQwaVRUTTNNQzQ1SURRMUxqSjJORE11TW1Nd0lERXVOeUF3SURFdU55MHhMallnTVM0M2FDMDROaTQ0WXkweExqWWdNQzB4TGpZZ01DMHhMall0TVM0MmRpMDROMk13TFRFdU5TQXdMVEV1TlNBeExqWXRNUzQxYURnMkxqaGpNUzQySURBZ01TNDJJREFnTVM0MklERXVOblkwTXk0MmVpSWdabWxzYkQwaUkyTmlZMkpqWWlJdlBqd3ZjM1puUGc9PSI=";
+;// CONCATENATED MODULE: ./src/assets/grid/3x2.svg
+var _3x2_namespaceObject = "data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0ExTlRndU1pQXhPRE11TmlJZ0lIaHRiRzV6T25ZOUltaDBkSEJ6T2k4dmRtVmpkR0V1YVc4dmJtRnVieUkrUEhCaGRHZ2daRDBpVFRJM055NHpJREU0TXk0MWFDMDVNQzR5VmprMVl6QXRNUzQySURBdE1TNDJJREV1TmkweExqWm9PRFl1T1dNeExqY2dNQ0F4TGpjZ01DQXhMamNnTVM0M2RqZzRMalI2SWlCbWFXeHNQU0lqTVRVMk5XTXdJaTgrUEhCaGRHZ2daRDBpVFRVMU9DNHlJREIyT1RBdU1XZ3RPRGd1TTJNdE1TNDVJREF0TVM0NUlEQXRNUzQ1TFRFdU9WWXhMamhqTUMweExqZ2dNQzB4TGpnZ01TNDRMVEV1T0dnNE9DNDBlaUlnWm1sc2JEMGlJMk5pWTJKallpSXZQanh3WVhSb0lHUTlJazA1TUM0eUlERTRNeTQxU0RCV09UVXVNbU13TFRFdU9TMHVNaTB4TGpnZ01TNDNMVEV1T0dnNE5pNDNZekV1TnlBd0lERXVOeUF3SURFdU55QXhMamgyT0RZdU5tTXVNUzQyTGpFZ01TNHlMakVnTVM0M2VtMDVNeTQySURCSU9UTXVObFk1TlM0eVl6QXRNUzQ0SURBdE1TNDRJREV1TnkweExqaElNVGd5WXpFdU9TQXdJREV1TnkwdU1pQXhMamNnTVM0NGJDNHhJRGc0TGpONklpQm1hV3hzUFNJak1UVTJOV013SWk4K1BIQmhkR2dnWkQwaVRUUTJOQzQzSURFNE15NDFhQzA1TUM0eVZqazFMakZqTUMweExqY2dNQzB4TGpjZ01TNDJMVEV1TjBnME5qTmpNUzQySURBZ01TNDJJREFnTVM0MklERXVOM1kyTWk0MmJDNHhJREkxTGpoNmJUa3pMalV0T1RCMk9EbGpNQ0F1T1MwdU1pQXhMakV0TVM0eElERXVNVWcwTmpoV09UVXVNbU13TFRFdU55QXdMVEV1TnlBeExqY3RNUzQzYURnNExqVjZiUzB4T0RjdU1TQTVNR2d0T1RBdU1sWTVOQzQyWXpBdE1TNHhMalF0TVM0MUlERXVOUzB4TGpWc05pNDRMak5vT0RBdU1tTXhMakVnTUNBeExqVXVNaUF4TGpVZ01TNDBiQzR5SURZeExqZ3VOU0F5TlM0eVl6QWdMamN1TVNBeExqTXRMalVnTVM0M2VpSWdabWxzYkQwaUkyTmlZMkpqWWlJdlBqeHdZWFJvSUdROUlrMDBOUzR4SURrd0xqRklNUzQwWXkweExqRWdNQzB4TGpVdExqTXRNUzQxTFRFdU5Fd3dJREV1TlVNd0lDNHpMak1nTUNBeExqVWdNR2c0Tnk0ell6RXVNaUF3SURFdU5DNDBJREV1TkNBeExqVjJPRGN1TVdNd0lERXVNaTB1TXlBeExqVXRNUzQxSURFdU5VZzBOUzR4ZWsweE16Z3VPQ0F3YURRekxqVmpNUzR4SURBZ01TNDFMak1nTVM0MUlERXVOSFk0Tnk0eVl6QWdNUzR5TFM0eklERXVOQzB4TGpVZ01TNDBTRGsxTGpGakxURXVNaUF3TFRFdU5TMHVNeTB4TGpVdE1TNDFWakV1TkVNNU15NDJMaklnT1RRZ01DQTVOUzR4SURCb05ETXVOM29pSUdacGJHdzlJaU14TlRZMVl6QWlMejQ4Y0dGMGFDQmtQU0pOTXpjMExqVWdORFV1TVZZeExqWmpNQzB4TGpZZ01DMHhMallnTVM0MkxURXVObWc0Tnk0eFl6RXVOaUF3SURFdU5pQXdJREV1TmlBeExqWjJPRFl1T0dNd0lERXVOeUF3SURFdU55MHhMamNnTVM0M2FDMDROaTQ1WXkweExqWWdNQzB4TGpZZ01DMHhMall0TVM0MWJDMHVNUzAwTXk0MWVpSWdabWxzYkQwaUkyTmlZMkpqWWlJdlBqeHdZWFJvSUdROUlrMHlOemN1TXlBME5TNHhkalF6TGpWak1DQXhMalVnTUNBeExqVXRNUzQySURFdU5XZ3RPRFl1T1dNdE1TNDFJREF0TVM0MUlEQXRNUzQxTFRFdU5sWXhMalpqTUMweExqSXVNaTB4TGpZZ01TNDFMVEV1TlVneU56WmpNUzR5SURBZ01TNDBMalFnTVM0MElERXVOV3d0TGpFZ05ETXVOWG9pSUdacGJHdzlJaU14TlRZMVl6QWlMejQ4Y0dGMGFDQmtQU0pOTXpjd0xqa2dORFV1TW5ZME15NHlZekFnTVM0M0lEQWdNUzQzTFRFdU5pQXhMamRvTFRnMkxqaGpMVEV1TmlBd0xURXVOaUF3TFRFdU5pMHhMaloyTFRnM1l6QXRNUzQxSURBdE1TNDFJREV1TmkweExqVm9PRFl1T0dNeExqWWdNQ0F4TGpZZ01DQXhMallnTVM0MmRqUXpMalo2SWlCbWFXeHNQU0lqWTJKalltTmlJaTgrUEM5emRtYysi";
+;// CONCATENATED MODULE: ./src/assets/grid/4x1.svg
+var _4x1_namespaceObject = "data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0ExTlRndU1pQXhPRE11TmlJZ0lIaHRiRzV6T25ZOUltaDBkSEJ6T2k4dmRtVmpkR0V1YVc4dmJtRnVieUkrUEhCaGRHZ2daRDBpVFRVMU9DNHlJREIyT1RBdU1XZ3RPRGd1TTJNdE1TNDVJREF0TVM0NUlEQXRNUzQ1TFRFdU9WWXhMamhqTUMweExqZ2dNQzB4TGpnZ01TNDRMVEV1T0dnNE9DNDBlbTB0TkRZNElERTRNeTQxU0RCV09UVXVNV013TFRFdU55QXdMVEV1TnlBeExqY3RNUzQzYURnMkxqZGpNUzQ0SURBZ01TNDRJREFnTVM0NElERXVPSFk0T0M0emVtMDVNeTQySURCSU9UTXVObFk1TlM0ell6QXRNUzQ1SURBdE1TNDVJREV1T1MweExqbElNVGd5WXpFdU9DQXdJREV1T0NBd0lERXVPQ0F4TGpoMk9EZ3VNM3B0TWpnd0xqa2dNR2d0T1RBdU1sWTVOUzR4WXpBdE1TNDNJREF0TVM0M0lERXVOaTB4TGpkSU5EWXpZekV1TmlBd0lERXVOaUF3SURFdU5pQXhMamQyTmpRdU1Xd3VNU0F5TkM0emVtMDVNeTQxTFRrd2RqZzVZekFnTGprdExqSWdNUzR4TFRFdU1TQXhMakZJTkRZNFZqazFMakpqTUMweExqY2dNQzB4TGpjZ01TNDNMVEV1TjJnNE9DNDFlbTB0TWpnd0xqa2dPVEJvTFRrd1ZqazBMamhqTUMwdU9TNHhMVEV1TlNBeExqSXRNUzQxU0RJM05tTXVPU0F3SURFdU1pNHpJREV1TWlBeExqSnNMakVnT0RsNmJUa3pMallnTUdndE9UQldPVFV1TVdNd0xURXVOeUF3TFRFdU55QXhMamN0TVM0M2FEZzJMalZqTVM0NElEQWdNUzQ0SURBZ01TNDRJREV1T0hZNE9DNHplaUlnWm1sc2JEMGlJMk5pWTJKallpSXZQanh3WVhSb0lHUTlJazB3SURRMUxqRldNUzQxUXpBZ0xqTXVNeUF3SURFdU5DQXdhRGczTGpOak1TNHlJREFnTVM0MUxqTWdNUzQwSURFdU5YWTROeTR4WXpBZ01TNHlMUzR6SURFdU5TMHhMalVnTVM0MVNERXVOR010TVM0eklEQXRNUzQxTFM0MExURXVOUzB4TGpaTU1DQTBOUzR4ZW0wNU15NDJMUzR5VmpFdU5FTTVNeTQyTGpNZ09UTXVPU0F3SURrMUlEQm9PRGN1TTJNeExqSWdNQ0F4TGpRdU15QXhMalFnTVM0MWRqZzNMakpqTUNBeExqSXRMalFnTVM0MExURXVOU0F4TGpSSU9UVmpMVEV1TWlBd0xURXVOUzB1TkMweExqVXRNUzQxYkM0eExUUXpMamQ2SWlCbWFXeHNQU0lqTVRVMk5XTXdJaTgrUEhCaGRHZ2daRDBpVFRNM05DNDFJRFExTGpGV01TNDJZekF0TVM0MklEQXRNUzQySURFdU5pMHhMalpvT0RjdU1XTXhMalVnTUNBeExqVWdNQ0F4TGpVZ01TNDJkamcyTGpkak1DQXhMamdnTUNBeExqZ3RNUzQ0SURFdU9HZ3RPRFl1TjJNdE1TNDNJREF0TVM0M0lEQXRNUzQzTFRFdU4xWTBOUzR4ZWlJZ1ptbHNiRDBpSTJOaVkySmpZaUl2UGp4d1lYUm9JR1E5SWsweU56Y3VNeUEwTlM0eGRqUXpMalJqTUNBeExqWWdNQ0F4TGpZdE1TNDJJREV1Tm1ndE9EWXVPR010TVM0MklEQXRNUzQySURBdE1TNDJMVEV1TmxZeExqZGpNQzB4TGpZZ01DMHhMallnTVM0MUxURXVObWc0TjJNeExqVWdNQ0F4TGpZZ01DQXhMallnTVM0MWJDMHVNU0EwTXk0MWVtMHpMall0TGpKV01TNDBZekF0TVM0eExqTXRNUzQxSURFdU5DMHhMalZvT0RjdU1tTXhMaklnTUNBeExqVXVNeUF4TGpVZ01TNDFkamczTGpKak1DQXhMakV0TGpNZ01TNDBMVEV1TkNBeExqUm9MVGczTGpOakxURXVNU0F3TFRFdU5DMHVOQzB4TGpRdE1TNDBWalEwTGpsNklpQm1hV3hzUFNJak1UVTJOV013SWk4K1BDOXpkbWMrIg==";
+;// CONCATENATED MODULE: ./src/assets/grid/4x2.svg
+var _4x2_namespaceObject = "data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0ExTlRndU1pQXhPRE11TmlJZ0lIaHRiRzV6T25ZOUltaDBkSEJ6T2k4dmRtVmpkR0V1YVc4dmJtRnVieUkrUEhCaGRHZ2daRDBpVFRVMU9DNHlJREIyT1RBdU1XZ3RPRGd1TTJNdE1TNDVJREF0TVM0NUlEQXRNUzQ1TFRFdU9WWXhMamhqTUMweExqZ2dNQzB4TGpnZ01TNDRMVEV1T0dnNE9DNDBlaUlnWm1sc2JEMGlJMk5pWTJKallpSXZQanh3WVhSb0lHUTlJazA1TUM0eUlERTRNeTQxU0RCV09UVXVNbU13TFRFdU9TMHVNaTB4TGpnZ01TNDNMVEV1T0dnNE5pNDNZekV1TnlBd0lERXVOeUF3SURFdU55QXhMamgyT0RZdU5tTXVNUzQyTGpFZ01TNHlMakVnTVM0M2VtMDVNeTQySURCSU9UTXVObFk1TlM0eVl6QXRNUzQ0SURBdE1TNDRJREV1TnkweExqaElNVGd5WXpFdU9TQXdJREV1TnkwdU1pQXhMamNnTVM0NGJDNHhJRGc0TGpONklpQm1hV3hzUFNJak1UVTJOV013SWk4K1BIQmhkR2dnWkQwaVRUUTJOQzQySURFNE15NDFhQzA1TUM0eVZqazFMakZqTUMweExqY2dNQzB4TGpjZ01TNDJMVEV1TjJnNE5pNDVZekV1TmlBd0lERXVOaUF3SURFdU5pQXhMamQyTmpZdU5Xd3VNU0F5TVM0NWVtMDVNeTQyTFRrd2RqZzVZekFnTGprdExqSWdNUzR4TFRFdU1TQXhMakZJTkRZNFZqazFMalJqTUMweExqZ2dNQzB4TGpnZ01TNDRMVEV1T0dnM05TNDVZelF1TWkwdU1TQTRMak10TGpFZ01USXVOUzB1TVhvaUlHWnBiR3c5SWlOalltTmlZMklpTHo0OGNHRjBhQ0JrUFNKTk1qYzNMak1nTVRnekxqVm9MVGt3WXpBdExqVXRMakV0TVMwdU1TMHhMalJXT1RVdU1tTXdMVEV1TnlBd0xURXVOeUF4TGpjdE1TNDNhRGcyTGpkak1TNDNJREFnTVM0M0lEQWdNUzQzSURFdU4zWTRPQzR6ZW0wNU15NDJJREJvTFRrd1ZqazFZekF0TVM0MklEQXRNUzQySURFdU5pMHhMalpvT0RZdU9HTXhMamNnTUNBeExqY2dNQ0F4TGpjZ01TNDNWakU0TW1NdExqRXVOaTB1TVNBeExqRXRMakVnTVM0MWVrMHhNemd1TnlBNU1DNHhTRGsxTGpOakxURXVOaUF3TFRFdU5pQXdMVEV1TmkweExqWjJMVGczWXpBdE1TNHpMalF0TVM0MUlERXVOaTB4TGpWb09EY3VNV014TGpZZ01DQXhMallnTUNBeExqWWdNUzQxZGpnM1l6QWdNUzQxSURBZ01TNDFMVEV1TmlBeExqVnNMVFF6TGpjdU1Yb2lJR1pwYkd3OUlpTXhOVFkxWXpBaUx6NDhjR0YwYUNCa1BTSk5NemMwTGpVZ05EVldNUzQyWXpBdE1TNDJJREF0TVM0MklERXVOaTB4TGpab09EY3VNV014TGpZZ01DQXhMallnTUNBeExqWWdNUzQyZGpnMkxqaGpNQ0F4TGpjZ01DQXhMamN0TVM0M0lERXVOMmd0T0RZdU9XTXRNUzQySURBdE1TNDJJREF0TVM0MkxURXVOV3d0TGpFdE5ETXVObm9pSUdacGJHdzlJaU5qWW1OaVkySWlMejQ4Y0dGMGFDQmtQU0pOTWpjM0xqTWdORFYyTkRNdU5tTXdJREV1TVMwdU15QXhMalV0TVM0MUlERXVOV2d0T0RjdU1tTXRNUzR5SURBdE1TNDBMUzQwTFRFdU5DMHhMalZXTVM0MVl6QXRNUzR5TGpNdE1TNDFJREV1TlMweExqVm9PRGN1TVdNeExqTWdNQ0F4TGpVdU5DQXhMalVnTVM0MVZqUTFlbTB6TGpZdU1WWXhMalZqTUMweExqSXVNeTB4TGpVZ01TNDFMVEV1TldnNE55NHlZekV1TWlBd0lERXVOQzR6SURFdU5DQXhMalYyT0RjdU1XTXdJREV1TWkwdU15QXhMalV0TVM0MUlERXVOV2d0T0RjdU1XTXRNUzR6SURBdE1TNDFMUzQwTFRFdU5TMHhMalpXTkRVdU1YcHRMVEl6TlM0MklEUTFTREV1T0dNdE1TNDJJREF0TVM0MklEQXRNUzQyTFRFdU5sWXhMamRETGpJdU1TNHlMakVnTVM0NExqRm9PRGRqTVM0MklEQWdNUzQySURBZ01TNDJJREV1Tm5ZNE5pNDRZekFnTVM0MklEQWdNUzQyTFRFdU55QXhMalpJTkRVdU0zb2lJR1pwYkd3OUlpTXhOVFkxWXpBaUx6NDhMM04yWno0PSI=";
+;// CONCATENATED MODULE: ./src/assets/grid/5x1.svg
+var _5x1_namespaceObject = "data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0ExTlRndU1pQXhPRE11TmlJZ0lIaHRiRzV6T25ZOUltaDBkSEJ6T2k4dmRtVmpkR0V1YVc4dmJtRnVieUkrUEhCaGRHZ2daRDBpVFRFNE15NDRJREU0TXk0MVNEa3pMalpXT1RVdU5HTXdMVEV1T0NBd0xURXVPQ0F4TGpndE1TNDRTREU0TW1NeExqZ2dNQ0F4TGpnZ01DQXhMamdnTVM0NGRqZzRMakY2YlRJNE1DNDVJREJvTFRrd0xqSldPVFV1TW1Nd0xURXVOaUF3TFRFdU5pQXhMalV0TVM0MmFEZzNMakZqTVM0MUlEQWdNUzQySURBZ01TNDJJREV1Tm5ZNE9DNHplazAxTlRndU1pQXdkamc1TGpoSU5EY3dZeTB4TGpjZ01DMHhMamNnTUMweExqY3RNUzQ0VmpFdU4yTXdMVEV1T0NBd0xURXVPQ0F4TGpjdE1TNDRiRGc0TGpJdU1YcE5PVEFnTVRnekxqVklNRlk1TlM0MFl6QXRNUzQzSURBdE1TNDNJREV1T0MweExqZG9PRFl1TldNeExqZ2dNQ0F4TGpnZ01DQXhMamdnTVM0M2RqZzJMamhqTFM0eExqVXRMakV1T1MwdU1TQXhMak42YlRFNE55NHpJREJvTFRrd1ZqazBMamhqTUMweElDNDFMVEV1TWlBeExqTXRNUzR5U0RJM05tTXhJREFnTVM0ekxqTWdNUzR6SURFdU0zWTRPQzQyZW0wNU15NDJJREJvTFRrd1ZqazFMalJqTUMweExqY2dNQzB4TGpjZ01TNDRMVEV1TjJnNE5pNDFZekV1T0NBd0lERXVPQ0F3SURFdU9DQXhMamQyT0RZdU9HTXRMakV1TlMwdU1TNDVMUzR4SURFdU0zcHRNVGczTGpNdE9Ea3VPSFk0T0M0NFl6QWdMamt0TGpJZ01TNHhMVEV1TVNBeExqRm9MVGc0TGpsV09UVXVOV013TFRFdU9DQXdMVEV1T0NBeExqZ3RNUzQ0YURnNExqSjZJaUJtYVd4c1BTSWpZMkpqWW1OaUlpOCtQSEJoZEdnZ1pEMGlUVEFnTkRRdU9WWXhMalZETUNBdU15NHpJREFnTVM0MElEQm9PRGN1TTJNeExqSWdNQ0F4TGpVdU15QXhMalVnTVM0MWRqZzNMakZqTUNBeExqSXRMak1nTVM0MkxURXVOU0F4TGpaSU1TNDFZeTB4TGpNZ01DMHhMalV0TGpRdE1TNDFMVEV1TmxZME5DNDVlbTB4T0RNdU9DNHpkalF6TGpWak1DQXhMakV0TGpJZ01TNDBMVEV1TkNBeExqUklPVFZqTFRFdU1TQXdMVEV1TkMwdU5DMHhMalF0TVM0MFZqRXVOR013TFRFdU1TNHpMVEV1TXlBeExqTXRNUzR6YURnM0xqWmpNUzR4SURBZ01TNHpMak1nTVM0eklERXVNM1kwTXk0NGVtMDVNeTQxSURCMk5ETXVOR013SURFdU1pMHVNaUF4TGpVdE1TNDFJREV1TldndE9EY3VNV010TVM0eUlEQXRNUzQxTFM0ekxURXVOUzB4TGpWMkxUZzNZekF0TVM0MklEQXRNUzQySURFdU5pMHhMalpvT0Rkak1TNDFJREFnTVM0MUlEQWdNUzQxSURFdU5uWTBNeTQyZW0wekxqWXRMak5XTVM0MFl6QXRNUzR4TGpNdE1TNDFJREV1TkMweExqVm9PRGN1TW1NeExqSWdNQ0F4TGpVdU15QXhMalVnTVM0MWRqZzNMakpqTUNBeExqRXRMak1nTVM0MExURXVOQ0F4TGpSb0xUZzNMak5qTFRFdU1TQXdMVEV1TkMwdU5DMHhMalF0TVM0MFZqUTBMamw2YlRFNE15NDBMak4yTkRNdU1XTXdJREV1TmlBd0lERXVOaTB4TGpZZ01TNDJhQzA0Tmk0ell5MHhMaklnTUMweExqWXRMak10TVM0MkxURXVOVll4TGpsak1DMHhMakV1TXkweExqVWdNUzQxTFRFdU5XZzROaTQyWXpFdU1pQXdJREV1TkM0MElERXVOQ0F4TGpWMk5ETXVNM29pSUdacGJHdzlJaU14TlRZMVl6QWlMejQ4TDNOMlp6ND0i";
+;// CONCATENATED MODULE: ./src/assets/grid/5x2.svg
+var _5x2_namespaceObject = "data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0ExTlRndU1pQXhPRE11TmlJZ0lIaHRiRzV6T25ZOUltaDBkSEJ6T2k4dmRtVmpkR0V1YVc4dmJtRnVieUkrUEhCaGRHZ2daRDBpVFRVMU9DNHlJREIyT1RBdU1XZ3RPRGd1TTJNdE1TNDVJREF0TVM0NUlEQXRNUzQ1TFRFdU9WWXhMamhqTUMweExqZ2dNQzB4TGpnZ01TNDRMVEV1T0dnNE9DNDBlbTB3SURrekxqVjJPRGxqTUNBdU9TMHVNaUF4TGpFdE1TNHhJREV1TVVnME5qaFdPVFV1TkdNd0xURXVPQ0F3TFRFdU9DQXhMamd0TVM0NGFEYzFMamxqTkM0eUxTNHhJRGd1TkMwdU1TQXhNaTQxTFM0eGVpSWdabWxzYkQwaUkyTmlZMkpqWWlJdlBqeG5JR1pwYkd3OUlpTXhOVFkxWXpBaVBqeHdZWFJvSUdROUlrMHhPRE11T0NBeE9ETXVOVWc1TXk0MlZqazFMakZqTUMweExqWWdNQzB4TGpjZ01TNDJMVEV1TjBneE9ESmpNUzQzSURBZ01TNDNJREFnTVM0M0lERXVPR3d1TVNBNE9DNHplbTB5T0RBdU9TQXdhQzA1TUM0eVZqazFMakpqTUMweExqZ2dNQzB4TGpnZ01TNDNMVEV1T0dnNE5pNDNZekV1TnlBd0lERXVOeUF3SURFdU55QXhMamgyT0RZdU5tTXdJQzQyTGpFZ01TNHlMakVnTVM0M2VtMHRNemMwTGpjZ01FZ3dWamswTGpsak1DMHhMakl1TXkweExqVWdNUzQxTFRFdU5XZzROMk14TGpZZ01DQXhMallnTUNBeExqWWdNUzQyZGpnM0xqRmpNQ0F1TlMwdU1TQXhMUzR4SURFdU5IcHRNVGczTGpNZ01HZ3RPVEJqTUMwdU5DMHVNUzB1T1MwdU1TMHhMak5XT1RVdU0yTXdMVEV1TnlBd0xURXVOeUF4TGpjdE1TNDNhRGcyTGpkak1TNDNJREFnTVM0M0lEQWdNUzQzSURFdU4zWTRPQzR5ZW0wNU15NDJJREJvTFRrd1ZqazFMalJqTUMweExqZ2dNQzB4TGpnZ01TNDRMVEV1T0dnNE5pNDFZekV1T0NBd0lERXVPQ0F3SURFdU9DQXhMamgyT0RZdU4yTXRMakV1TlMwdU1TQXhMUzR4SURFdU5IcE5NVE00TGpnZ09UQXVNVWc1TlM0eFl5MHhMaklnTUMweExqWXRMak10TVM0MkxURXVOVll4TGpSRE9UTXVOaTR6SURrekxqa2dNQ0E1TlNBd2FEZzNMalJqTVM0eElEQWdNUzQwTGpRZ01TNDBJREV1TkhZNE55NHlZekFnTVM0eExTNHpJREV1TlMweExqVWdNUzQxYUMwME15NDFlbTB5T0RBdU5pQXdTRE0zTm1NdE1TNDJJREF0TVM0MklEQXRNUzQyTFRFdU5uWXRPRGRqTUMweExqSXVNaTB4TGpVZ01TNDFMVEV1TldnNE55NHlZekV1TWlBd0lERXVOUzR6SURFdU5TQXhMalYyT0Rkak1DQXhMallnTUNBeExqWXRNUzQzSURFdU5tZ3RORE11TlhwTkxqSWdORFV1TVZZeExqZERMakl1TVM0eUxqRWdNUzQ1TGpGb09EWXVPR014TGpZZ01DQXhMallnTUNBeExqWWdNUzQzZGpnMkxqZGpNQ0F4TGpZZ01DQXhMall0TVM0MklERXVOa2d4TGpsakxURXVOaUF3TFRFdU5pQXdMVEV1TmkweExqZE1MaklnTkRVdU1Yb2lMejQ4Y0dGMGFDQmtQU0pOTWpjM0xqTWdORFV1TVhZME15NDBZekFnTVM0MklEQWdNUzQyTFRFdU5pQXhMalpvTFRnMkxqbGpMVEV1TWlBd0xURXVOaTB1TXkweExqWXRNUzQxVmpFdU5XTXdMVEV1TWk0MExURXVOQ0F4TGpVdE1TNDBhRGczTGpKak1TNHlJREFnTVM0MExqUWdNUzQwSURFdU5YWTBNeTQxZWswek1qVXVPQ0E1TUdndE5ETXVNMk10TVM0MklEQXRNUzQySURBdE1TNDJMVEV1TlZZeExqWmpNQzB4TGpJdU15MHhMalVnTVM0MUxURXVOV2c0Tnk0eFl6RXVNaUF3SURFdU5TNHpJREV1TlNBeExqVjJPRFl1T0dNd0lERXVOaUF3SURFdU5pMHhMallnTVM0MmFDMDBNeTQyZWlJdlBqd3ZaejQ4TDNOMlp6ND0i";
+;// CONCATENATED MODULE: ./src/assets/grid/6x1.svg
+var _6x1_namespaceObject = "data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0ExTlRndU1pQXhPRE11TmlJZ0lIaHRiRzV6T25ZOUltaDBkSEJ6T2k4dmRtVmpkR0V1YVc4dmJtRnVieUkrUEhCaGRHZ2daRDBpVFRVMU9DNHlJREIyT1RBdU1XZ3RPRGd1TldNdE1TNDJJREF0TVM0MklEQXRNUzQyTFRFdU5sWXhMamRqTUMweExqWWdNQzB4TGpZZ01TNDJMVEV1Tm13NE9DNDFMUzR4ZWlJZ1ptbHNiRDBpSXpFMU5qVmpNQ0l2UGp4d1lYUm9JR1E5SWswNU1DNHlJREU0TXk0MVNEQldPVFV1TVdNd0xURXVOeUF3TFRFdU55QXhMamN0TVM0M2FEZzJMamRqTVM0NElEQWdNUzQ0SURBZ01TNDRJREV1T0hZNE9DNHplbTA1TXk0MklEQklPVE11TmxZNU5TNHpZekF0TVM0NUlEQXRNUzQ1SURFdU9TMHhMamxJTVRneVl6RXVPQ0F3SURFdU9DQXdJREV1T0NBeExqaDJPRGd1TTNwdE1qZ3dMamtnTUdndE9UQXVNbFk1TlM0eFl6QXRNUzQzSURBdE1TNDNJREV1TmkweExqZElORFl6WXpFdU5pQXdJREV1TmlBd0lERXVOaUF4TGpkMk5qUXVNV3d1TVNBeU5DNHplbTA1TXk0MUxUa3dkamc1WXpBZ0xqa3RMaklnTVM0eExURXVNU0F4TGpGSU5EWTRWamsxTGpKak1DMHhMamNnTUMweExqY2dNUzQzTFRFdU4yZzRPQzQxZW0wdE1qZ3dMamtnT1RCb0xUa3dWamswTGpoak1DMHVPUzR4TFRFdU5TQXhMakl0TVM0MVNESTNObU11T1NBd0lERXVNaTR6SURFdU1pQXhMakpzTGpFZ09EbDZiVGt6TGpZZ01HZ3RPVEJXT1RVdU1XTXdMVEV1TnlBd0xURXVOeUF4TGpjdE1TNDNhRGcyTGpWak1TNDRJREFnTVM0NElEQWdNUzQ0SURFdU9IWTRPQzR6ZWlJZ1ptbHNiRDBpSTJOaVkySmpZaUl2UGp4d1lYUm9JR1E5SWswd0lEUTFMakZXTVM0MVF6QWdMak11TXlBd0lERXVOQ0F3YURnM0xqTmpNUzR5SURBZ01TNDFMak1nTVM0MElERXVOWFk0Tnk0eFl6QWdNUzR5TFM0eklERXVOUzB4TGpVZ01TNDFTREV1TkdNdE1TNHpJREF0TVM0MUxTNDBMVEV1TlMweExqWk1NQ0EwTlM0eGVtMDVNeTQyTFM0eFZqRXVOVU01TXk0MkxqTWdPVE11T1NBd0lEazFJREJvT0RjdU0yTXhMaklnTUNBeExqUXVNeUF4TGpRZ01TNDFkamczTGpKak1DQXhMakl0TGpRZ01TNDBMVEV1TlNBeExqUklPVFZqTFRFdU1pQXdMVEV1TlMwdU5DMHhMalV0TVM0MWJDNHhMVFF6TGpaNlRUUXhPUzQzSURCb05ETXVOR014TGpJZ01DQXhMall1TWlBeExqWWdNUzQxZGpnM0xqRmpNQ0F4TGpJdExqTWdNUzQxTFRFdU5TQXhMalZJTXpjMll5MHhMakVnTUMweExqVXRMak10TVM0MUxURXVORll4TGpWak1DMHhMakl1TXkweExqUWdNUzQxTFRFdU5HdzBNeTQzTFM0eGVrMHlOemN1TXlBME5TNHhkalF6TGpOak1DQXhMallnTUNBeExqWXRNUzQySURFdU5tZ3RPRFl1T0dNdE1TNDNJREF0TVM0M0lEQXRNUzQzTFRFdU5sWXhMalZqTUMweExqSXVNeTB4TGpVZ01TNDFMVEV1TldnNE55NHlZekV1TWlBd0lERXVOQzQwSURFdU5DQXhMalYyTkRNdU5ucHRNeTQyTFM0eVZqRXVOR013TFRFdU1TNHpMVEV1TlNBeExqUXRNUzQxYURnM0xqSmpNUzR6SURBZ01TNDFMalFnTVM0MUlERXVOblk0Tmk0NVl6QWdNUzQySURBZ01TNDJMVEV1TlNBeExqWm9MVGczWXkweExqRWdNQzB4TGpVdExqTXRNUzQxTFRFdU5Hd3RMakV0TkRNdU4zb2lJR1pwYkd3OUlpTXhOVFkxWXpBaUx6NDhMM04yWno0PSI=";
+;// CONCATENATED MODULE: ./src/assets/grid/6x2.svg
+var _6x2_namespaceObject = "data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0EyTlRJdU1TQXhPRE11T0NJZ0lHWnBiR3c5SWlNeE5UWTFZekFpSUhodGJHNXpPblk5SW1oMGRIQnpPaTh2ZG1WamRHRXVhVzh2Ym1GdWJ5SStQSEJoZEdnZ1pEMGlUVFkxTWk0eExqTjJPVEF1TVdndE9EZ3VOV010TVM0MklEQXRNUzQySURBdE1TNDJMVEV1TmxZeVl6QXRNUzQySURBdE1TNDJJREV1TmkweExqWnNPRGd1TlMwdU1YcE5PVEF1TlNBeE9ETXVPRWd1TTFZNU5TNDBZekF0TVM0MklEQXRNUzQySURFdU55MHhMamRvT0RZdU4yTXhMamNnTUNBeExqY2dNQ0F4TGpjZ01TNDRkamcyTGpaak1DQXVOaUF3SURFdU1pNHhJREV1TjNwdE9UTXVOU0F3U0RrekxqaFdPVFV1TkdNd0xURXVOaUF3TFRFdU5pQXhMall0TVM0MmFEZzJMamxqTVM0MklEQWdNUzQySURBZ01TNDJJREV1Tm5ZNE1DNHliQzR4SURndU1ucHRNemMwTGpVZ01HZ3RPVEF1TWxZNU5TNDFZekF0TVM0NUxTNHlMVEV1T0NBeExqY3RNUzQ0YURnMkxqZGpNUzQzSURBZ01TNDNJREFnTVM0M0lERXVPSFk0Tmk0Mll5NHhMall1TVNBeExqSXVNU0F4TGpkNmJUa3pMall0T1RBdU1YWTRPV013SUM0NUxTNHlJREV1TVMweExqRWdNUzR4YUMwNE9TNHhZekF0TGpZdU1TMHhMakV1TVMweExqZFdPVFV1TldNd0xURXVPQ0F3TFRFdU9DQXhMamN0TVM0NGFEZzJMamRqTGpVdU1TQXhMakV1TVNBeExqY2dNSHB0TFRNM05DNDFJRGt3TGpGb0xUa3dZekF0TGpVdExqRXRNUzB1TVMweExqUjJMVGczWXpBdE1TNDJJREF0TVM0MklERXVOaTB4TGpab09EY3VNV014SURBZ01TNDBMaklnTVM0MElERXVNM1k0T0M0M2VtMDVNeTQxSURCb0xUa3dWamsxTGpaak1DMHhMamdnTUMweExqZ2dNUzQzTFRFdU9HZzROaTQyWXpFdU55QXdJREV1TnlBd0lERXVOeUF4TGpoMk9EWXVPR011TVM0MUxqRXVPU0F3SURFdU5IcHRPVE11TmlBd2FDMDVNRlk1TldNd0xURXVNeTQyTFRFdU15QXhMalV0TVM0elNEUTJNMk14TGpjZ01DQXhMamNnTUNBeExqY2dNUzQ0ZGpnMkxqZGpMakV1TmlBd0lERXVNU0F3SURFdU5ub2lMejQ4Y0dGMGFDQmtQU0pOTGpNZ05EVXVNMVl4TGpoRExqTXVOaTQxTGpNZ01TNDRMak5JT0Rsak1TNHlJREFnTVM0MUxqTWdNUzQxSURFdU5YWTROaTQ1WXpBZ01TNDJJREFnTVM0MkxURXVOaUF4TGpaSU1TNDRZeTB4TGpVZ01DMHhMalVnTUMweExqVXRNUzQyVmpRMUxqTjZiVGt6TGpZdExqRldNUzQ0WXpBdE1TNDJJREF0TVM0MklERXVOUzB4TGpab09EY3VNV014TGpVZ01DQXhMalVnTUNBeExqVWdNUzQyZGpnMkxqbGpNQ0F4TGpJdExqSWdNUzQyTFRFdU5TQXhMalpJT1RVdU0yTXRNUzR6SURBdE1TNDFMUzQwTFRFdU5TMHhMalpzTGpFdE5ETXVOWHB0TkRZMExqWXVNblkwTXk0MFl6QWdNUzQySURBZ01TNDJMVEV1TmlBeExqWm9MVGczTGpGakxURXVNaUF3TFRFdU5pMHVNaTB4TGpZdE1TNDFWakV1T0dNd0xURXVNaTR6TFRFdU5TQXhMalV0TVM0MWFEZzNMakpqTVM0eUlEQWdNUzQxTGpRZ01TNDFJREV1Tld3dU1TQTBNeTQyZW0wdE1qZ3dMamt0TGpGMk5ETXVOV013SURFdU1pMHVNaUF4TGpZdE1TNDFJREV1TlVneE9EbGpMVEV1TWlBd0xURXVOUzB1TXkweExqVXRNUzQxZGkwNE4yTXdMVEV1TmlBd0xURXVOaUF4TGpZdE1TNDJhRGczWXpFdU5TQXdJREV1TlNBd0lERXVOU0F4TGpaMk5ETXVOWHB0T1RNdU5pMHVNWFkwTXk0MVl6QWdNUzQySURBZ01TNDJMVEV1TmlBeExqWm9MVGcyTGpoakxURXVOaUF3TFRFdU5pQXdMVEV1TmkweExqWldNUzQ1WXpBdE1TNDJJREF0TVM0MklERXVOUzB4TGpab09EZGpNUzQySURBZ01TNDJJREFnTVM0MklERXVObXd0TGpFZ05ETXVNM3B0TXk0MUxqRldNUzQ0WXpBdE1TNDJJREF0TVM0MklERXVOUzB4TGpab09EZGpNUzQySURBZ01TNDJJREFnTVM0MklERXVOblk0TjJNd0lERXVNaTB1TXlBeExqVXRNUzQxSURFdU5XZ3RPRGN1TVdNdE1TNHlJREF0TVM0MUxTNDBMVEV1TlMweExqVldORFV1TTNvaUx6NDhMM04yWno0PSI=";
+;// CONCATENATED MODULE: ./src/assets/grid/index.js
+
+
+
+
+
+
+
+
+
+
+/* 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-40.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: {
+      type: Object,
+      required: false
+    },
+    playbackRate: {
+      type: Number,
+      required: true
+    },
+    secondsPerFrame: {
+      type: Number,
+      required: true
+    },
+    framesPerRow: {
+      type: Number,
+      required: true
+    },
+    numberOfRows: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      openBlocksDialog: false,
+      time: '',
+      rangeBlocks: {
+        ini: null,
+        end: null,
+        date: null
+      },
+      items: [{
+        text: '2x1',
+        value: 1,
+        image: grid['2x1']
+      }, {
+        text: '3x1',
+        value: 2,
+        image: grid['3x1']
+      }, {
+        text: '3x2',
+        value: 3,
+        image: grid['3x2']
+      }, {
+        text: '4x1',
+        value: 4,
+        image: grid['4x1']
+      }, {
+        text: '4x2',
+        value: 5,
+        image: grid['4x2']
+      }, {
+        text: '5x1',
+        value: 6,
+        image: grid['5x1']
+      }, {
+        text: '5x2',
+        value: 7,
+        image: grid['5x2']
+      }, {
+        text: '6x1',
+        value: 8,
+        image: grid['6x1']
+      }, {
+        text: '6x2',
+        value: 9,
+        image: grid['6x2']
+      }],
+      // NEW
+      goToValue: ''
+    };
+  },
+  mounted() {
+    this.toogleDialogs();
+  },
+  computed: {
+    secondsPerFrameValue: {
+      get() {
+        return this.secondsPerFrame;
+      },
+      set(val) {
+        this.$emit('change-seconds-per-frame', parseInt(val));
+      }
+    },
+    playbackRateValue: {
+      get() {
+        return this.playbackRate;
+      },
+      set(val) {
+        this.$emit('change-playback-rate', parseFloat(val));
+      }
+    },
+    framesValue: {
+      get() {
+        return this.items.find(item => item.text === `${this.framesPerRow}x${this.numberOfRows}`).value;
+      },
+      set(value) {
+        this.$emit('set-frames-selection', value);
+      }
+    },
+    timeRules() {
+      return [time => time >= '02:30:00' && time <= '26:29:59' || this.$i18n.t('form.mustBeBetween')];
+    }
+  },
+  methods: {
+    toogleDialogs() {
+      for (const dialog of Object.values(this.$refs)) {
+        dialog.close?.();
+      }
+      const openDialog = Object.keys(this.dialogsVisibility).find(key => this.dialogsVisibility[key]);
+      if (openDialog) {
+        this.$refs[openDialog].showModal();
+      }
+    },
+    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) {
+        this.$refs.playbackRateInput.stepUp();
+      } else if (direction === -1) {
+        this.$refs.playbackRateInput.stepDown();
+      }
+      this.playbackRateValue = this.$refs.playbackRateInput.value;
+    },
+    closeBlocksDialog() {
+      Object.entries(this.rangeBlocks).forEach(_ref => {
+        let [key, value] = _ref;
+        if (!value || key == 'date') return;
+        var res = value.replace(/\D/g, '');
+        if (res.length < 6) {
+          for (let i = res.length; i < 6; i++) {
+            res += '0';
+          }
+        }
+        res.match(/.{1,2}/g);
+        let a = res.substring(0, 2);
+        let b = res.substring(2, 4);
+        let c = res.substring(4, 6);
+        this.rangeBlocks[key] = a + ':' + b + ':' + c;
+      });
+      this.openBlocksDialog = false;
+      this.$emit('goToBlockInterval', this.rangeBlocks);
+    }
+  },
+  watch: {
+    dialogsVisibility: {
+      handler() {
+        this.toogleDialogs();
+      },
+      deep: true
+    }
+  }
+});
+;// 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-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Settings.vue?vue&type=style&index=0&id=9f47e4d0&prod&scoped=true&lang=css&
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/components/Settings.vue?vue&type=style&index=0&id=9f47e4d0&prod&scoped=true&lang=css&
+
+;// CONCATENATED MODULE: ./src/components/Settings.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var Settings_component = (0,componentNormalizer/* default */.Z)(
+  components_Settingsvue_type_script_lang_js_,
+  Settingsvue_type_template_id_9f47e4d0_scoped_true_render,
+  Settingsvue_type_template_id_9f47e4d0_scoped_true_staticRenderFns,
+  false,
+  null,
+  "9f47e4d0",
+  null
+  
+)
+
+/* harmony default export */ var Settings = (Settings_component.exports);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/Visualization.vue?vue&type=script&lang=js&
+
+
+
+
+
+
+
+const Positions = Object.freeze({
+  previous: 0,
+  current: 1,
+  next: 2
+});
+/* harmony default export */ var Visualizationvue_type_script_lang_js_ = ({
+  name: 'visualization-container',
+  props: {
+    value: {
+      type: Boolean,
+      required: true
+    },
+    date: {
+      type: String,
+      required: true
+    },
+    channel: {
+      type: Number,
+      required: true
+    },
+    startAudienceTime: {
+      type: String,
+      required: true
+    },
+    videoProgressBar: {
+      type: Boolean,
+      default: false
+    },
+    jumpOnInsert: {
+      type: Boolean,
+      default: false
+    },
+    framesFormat: {
+      type: [Number, String],
+      default: 6
+    },
+    maxSize: {
+      type: Number
+    }
+  },
+  components: {
+    Frame: Frame,
+    CommandBar: Commands,
+    InfoBar: Infos,
+    VideoProgress: VideoProgress,
+    Settings: Settings
+    // Help,
+  },
+
+  data() {
+    return {
+      Positions,
+      updatingChannel: null,
+      dialog: false,
+      timeLastBlock: null,
+      alternativeServer: false,
+      useCache: true,
+      numberOfRows: 1,
+      framesPerRow: 5,
+      secondsPerFrame: 1,
+      fInterface: null,
+      velocity: 1,
+      frames: [],
+      previousFrames: [],
+      nextFrames: [],
+      channelCode: 0,
+      videoPlaying: false,
+      activeFrame: null,
+      activeVideo: null,
+      videoTime: 0,
+      videoTotalTime: null,
+      progressVideoDrag: false,
+      hourIniSelected: false,
+      hourEndSelected: false,
+      canInsertTime: false,
+      lastHeight: 0,
+      loopInterval: null,
+      nextLoop: false,
+      prevLoop: false,
+      videoSliderTotalDuration: 900,
+      blockStartTime: null,
+      media: null,
+      changeServer: false,
+      userMultiTabsGrid: false,
+      userMultiTabsGridsModel: true,
+      playbackRate: 1,
+      paused: false,
+      commandBarShow: true,
+      dialogs: {
+        playbackRate: false,
+        goTo: false,
+        secondsPerFrame: false,
+        frames: false
+      }
+    };
+  },
+  async created() {
+    this.changeServer = this.serverOfFrames === 'alternative';
+    this.alternativeServer = this.serverOfFrames === 'alternative';
+    const settings = [{
+      framesPerRow: 2,
+      numberOfRows: 1
+    }, {
+      framesPerRow: 3,
+      numberOfRows: 1
+    }, {
+      framesPerRow: 3,
+      numberOfRows: 2
+    }, {
+      framesPerRow: 4,
+      numberOfRows: 1
+    }, {
+      framesPerRow: 4,
+      numberOfRows: 2
+    }, {
+      framesPerRow: 5,
+      numberOfRows: 1
+    }, {
+      framesPerRow: 5,
+      numberOfRows: 2
+    }, {
+      framesPerRow: 6,
+      numberOfRows: 1
+    }, {
+      framesPerRow: 6,
+      numberOfRows: 2
+    }];
+    const storedOnDb = settings[parseInt(this.framesFormat) - 1];
+    this.framesPerRow = storedOnDb.framesPerRow;
+    this.numberOfRows = storedOnDb.numberOfRows;
+    await this.createFramesInterface();
+    if (this.maxSize) {
+      this.resize(this.maxSize, true);
+    }
+  },
+  methods: {
+    framesClicked(e) {
+      if (e.target.id != 'insert') {
+        this.active = true;
+      }
+    },
+    async goToStartBlock() {
+      try {
+        const d = new Date();
+        let timestamp = Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds());
+        const response = (await FramesService.getNextAvailableBlock({
+          channel: this.channel,
+          time: timestamp / 1000
+        })).data;
+        this.dialog = false;
+        this.changeHour(this.convertToAudienceTime(response.data.start, ':'));
+      } catch (err) {
+        console.error(err);
+      }
+    },
+    async checkAvailableBlock() {
+      try {
+        const d = new Date();
+        let timestamp = Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds());
+        const response = (await FramesService.getNextAvailableBlock({
+          channel: this.channel,
+          time: timestamp / 1000
+        })).data;
+        this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':');
+        this.dialog = true;
+        if (!response.status) {
+          this.timeLastBlock = 'N/D';
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    },
+    updateSlider(videoStartTime, time) {
+      // * atualizar slider se estiver fora do range definido previamente
+      if (time < this.blockStartTime || time > this.blockStartTime || videoStartTime > this.blockStartTime + this.videoSliderTotalDuration) {
+        this.blockStartTime = videoStartTime;
+        this.videoSliderTotalDuration = 900;
+      }
+    },
+    nextLoopActivate() {
+      this.breakLoop();
+      this.loopInterval = setInterval(this.next, 40);
+      setTimeout(() => {
+        this.nextLoop = true;
+      }, 0);
+    },
+    prevLoopActivate() {
+      this.breakLoop();
+      this.loopInterval = setInterval(this.prev, 40);
+      setTimeout(() => {
+        this.prevLoop = true;
+      }, 0);
+    },
+    breakLoop() {
+      clearInterval(this.loopInterval);
+      this.loopInterval = null;
+      this.nextLoop = false;
+      this.prevLoop = false;
+    },
+    changePlayPause(status) {
+      this.paused = !status;
+    },
+    resize() {
+      let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.lastHeight;
+      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;
+      let audienceTime = null;
+      if (frames.length > 0) {
+        let frame = frames[0].frame;
+        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0);
+      }
+      // if (audienceTime) {
+      //   this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))
+      // }
+      if (audienceTime) {
+        const [hours, minutes, seconds] = audienceTime.split(':');
+        const totalSeconds = parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds);
+        if (totalSeconds >= 9000) this.changeHour(this.getLastFirtsBlockTime(audienceTime, true));else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true));
+      }
+    },
+    async goToLastFrame() {
+      let frames = this.$refs.frames;
+      let audienceTime = null;
+      if (frames.length > 0) {
+        let frame = frames[0].frame;
+        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0);
+      }
+      if (audienceTime) {
+        this.changeHour(this.getLastFirtsBlockTime(audienceTime));
+      }
+    },
+    getLastFirtsBlockTime(time) {
+      let first = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (time.indexOf(':') !== -1) {
+        time = time.replace(/:/g, '');
+      }
+      let h, m, newTime;
+      const t = time.match(/.{1,2}/g);
+      if (t[0] && t[1]) {
+        h = parseInt(t[0]);
+        m = parseInt(t[1]);
+      }
+      if (h < 26) {
+        if (m < 15) {
+          if (first) newTime = t[0] + ':00:00';else newTime = t[0] + ':14:59';
+        } else if (m < 30) {
+          if (first) newTime = t[0] + ':15:00';else newTime = t[0] + ':29:59';
+        } else if (m < 45) {
+          if (first) newTime = t[0] + ':30:00';else newTime = t[0] + ':44:59';
+        } else if (first) newTime = t[0] + ':45:00';else newTime = t[0] + ':59:59';
+      } else {
+        if (m < 15) {
+          if (first) newTime = '26:00:00';else newTime = '26:14:59';
+        } else {
+          if (first) newTime = '26:15:00';else newTime = '26:29:59';
+        }
+      }
+      return newTime;
+    },
+    openBlocks() {
+      this.$refs.settings2?.openBlocks();
+    },
+    playOrPause() {
+      const array = this.$refs.frames.filter(fc => !!fc.active);
+      if (array.length === 1) {
+        const frame = array[0];
+        frame.playOrPause(this.playbackRate);
+      }
+    },
+    stopPlayingBar() {
+      for (let ref of this.$refs.frames) {
+        if (ref.videoStatus === ref.Status.playing || ref.videoStatus === ref.Status.paused) {
+          ref.stop(false);
+        }
+      }
+    },
+    async setFrameSelection(selected) {
+      this.frames = this.loadingArray;
+      switch (parseInt(selected)) {
+        // 2x1
+        case 1:
+          this.framesPerRow = 2;
+          this.numberOfRows = 1;
+          break;
+        // 3x1
+        case 2:
+          this.framesPerRow = 3;
+          this.numberOfRows = 1;
+          break;
+        // 3x2
+        case 3:
+          this.framesPerRow = 3;
+          this.numberOfRows = 2;
+          break;
+        // 4x1
+        case 4:
+          this.framesPerRow = 4;
+          this.numberOfRows = 1;
+          break;
+        // 4x2
+        case 5:
+          this.framesPerRow = 4;
+          this.numberOfRows = 2;
+          break;
+        // 5x1
+        case 6:
+          this.framesPerRow = 5;
+          this.numberOfRows = 1;
+          break;
+        // 5x2
+        case 7:
+          this.framesPerRow = 5;
+          this.numberOfRows = 2;
+          break;
+        // 6x1
+        case 8:
+          this.framesPerRow = 6;
+          this.numberOfRows = 1;
+          break;
+        // 6x2
+        case 9:
+          this.framesPerRow = 6;
+          this.numberOfRows = 2;
+          break;
+      }
+      await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow);
+      this.getFramesArray();
+      setTimeout(() => {
+        for (let ref of this.$refs.frames) {
+          ref?.resize(this.lastHeight);
+        }
+      }, 150);
+    },
+    getFramesArray() {
+      this.frames = this.fInterface.getFrames(Positions.current);
+      this.nextFrames = this.fInterface.getFrames(Positions.next);
+      this.previousFrames = this.fInterface.getFrames(Positions.previous);
+    },
+    async createFramesInterface() {
+      this.frames = this.loadingArray;
+      let ch = this.channel;
+      let associationTMP = {
+        1735073: 1,
+        1735074: 139,
+        1735075: 3,
+        1735076: 132
+      };
+      //
+      this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch;
+      const t = this.startAudienceTime.match(/.{1,2}/g);
+      const d = this.getDateParts();
+      const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000;
+      // * iniciar slider
+      this.blockStartTime = time;
+      this.fInterface = await new utils_FramesInterface(this.channelCode, this.numberOfRows, this.framesPerRow, time, this.startAudienceTime, this.useCache);
+      await this.fInterface.init();
+      this.getFramesArray();
+      this.activeFrame = this.getIndex(1, 0, Positions.current);
+      this.activeVideo = null;
+    },
+    getIndex(rowNumber, frameIndex, position) {
+      let from = this.framesPerRow * this.numberOfRows * position;
+      let till = this.framesPerRow * this.numberOfRows * (position + 1);
+      return (from + till * (rowNumber - 1)) / rowNumber + frameIndex;
+    },
+    getAudienceTime(frameTime, rowNumber, frameNumber, position) {
+      if (!frameTime) {
+        return 'Loading...';
+      } else if (this.getIndex(rowNumber, frameNumber, position) === this.activeVideo) {
+        return this.convertToAudienceTime(this.videoTime);
+      } else {
+        return this.convertToAudienceTime(frameTime);
+      }
+    },
+    dateInUtc(miliSeconds) {
+      var date = new Date(miliSeconds);
+      var utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+      return utc;
+    },
+    convertToAudienceTime(time) {
+      let separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ':';
+      const d = this.getDateParts();
+      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000;
+      let hour = this.dateInUtc(time * 1000).toTimeString().split(' ')[0].split(':').map(Number);
+      if (time > limit && time <= limit + this.startAudienceSeconds) {
+        hour[0] = 24 + hour[0];
+      }
+      return hour.map(part => part > 9 ? part.toString() : '0' + part).join(separator);
+    },
+    getDateParts() {
+      let date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.date;
+      const d = new Date(date);
+      return {
+        year: d.getFullYear(),
+        month: d.getMonth(),
+        day: d.getDate()
+      };
+    },
+    selectFrame(index, frame) {
+      const d = this.getDateParts();
+      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000;
+      const frameTime = frame?.time;
+      if (frameTime - (this.startAudienceSeconds + limit) <= 0) {
+        if (this.hourIniSelected === true) {
+          this.hourIniSelected = frameTime;
+          if (this.hourEndSelected && this.hourIniSelected > this.hourEndSelected) {
+            this.hourEndSelected = false;
+          }
+        } else if (this.hourEndSelected === true) {
+          if (frameTime > this.hourIniSelected) {
+            this.hourEndSelected = frameTime;
+            this.canInsertTime = true;
+          } else {
+            this.hourEndSelected = false;
+          }
+        }
+      }
+      if (this.activeFrame !== index) {
+        // ? Se clicar no frame diferente de onde está a dar play, faz pausa
+        const array = this.$refs.frames.filter(fc => fc.videoStatus === fc.Status.playing);
+        if (array.length === 1) {
+          const frame = array[0];
+          frame.playOrPause();
+        }
+        this.activeVideo = null;
+        this.activeFrame = index;
+      }
+    },
+    setHourIni() {
+      this.canInsertTime = true;
+      this.hourIniSelected = true;
+      document.getElementById(`frame-${this.activeFrame}`).click();
+      this.$emit('setHourIni', {
+        hour_ini: this.hourIniSelected ? this.convertToAudienceTime(this.hourIniSelected, '') : null
+      });
+    },
+    setHourEnd() {
+      this.canInsertTime = true;
+      this.hourEndSelected = true;
+      document.getElementById(`frame-${this.activeFrame}`).click();
+    },
+    //* Navegação
+    arrowRight() {
+      if (this.checkLimitRight(false)) {
+        if (this.activeFrame === this.numberOfRows * this.framesPerRow * 2 - 1) {
+          this.next();
+        } else {
+          this.activeFrame++;
+        }
+      }
+    },
+    arrowLeft() {
+      if (this.checkLimitLeft(false)) {
+        if (this.activeFrame === this.numberOfRows * this.framesPerRow) {
+          this.prev();
+        } else {
+          this.activeFrame--;
+        }
+      }
+    },
+    checkLimitRight(value) {
+      const d = this.getDateParts();
+      const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59);
+      if (value) {
+        return high > (this.fInterface.getCurrentTime() - 1) * 1000 && this.nextFrames[0].title !== -1;
+      } else {
+        // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000
+        return high > this.fInterface.getCurrentTime() * 1000;
+      }
+    },
+    checkLimitLeft(value) {
+      const d = this.getDateParts();
+      const low = Date.UTC(d.year, d.month, d.day, 2, 30, 0);
+      if (value) {
+        return low <= (this.fInterface.getCurrentTime() - 1) * 1000;
+      } else {
+        return low < (this.fInterface.getCurrentTime() + this.activeFrame - this.numberOfRows * this.framesPerRow) * 1000;
+      }
+    },
+    async next() {
+      if (this.checkLimitRight(true)) {
+        const array = this.$refs.frames.filter(fc => fc.videoStatus === fc.Status.playing || fc.videoStatus === fc.Status.paused);
+        if (array.length === 1) {
+          const frame = array[0];
+          frame.stop(false);
+        }
+        this.fInterface.setCurrentStep(this.secondsPerFrame);
+        await this.fInterface.loadNextFrames();
+        this.activeFrame = this.getIndex(1, 0, Positions.current);
+        this.activeVideo = null;
+        this.getFramesArray();
+      }
+    },
+    async prev() {
+      if (this.checkLimitLeft(true)) {
+        const array = this.$refs.frames.filter(fc => fc.videoStatus === fc.Status.playing || fc.videoStatus === fc.Status.paused);
+        if (array.length === 1) {
+          const frame = array[0];
+          frame.stop(false);
+        }
+        this.fInterface.setCurrentStep(this.secondsPerFrame);
+        await this.fInterface.loadPrevFrames();
+        this.activeFrame = this.getIndex(this.numberOfRows, this.framesPerRow - 1, Positions.current);
+        this.activeVideo = null;
+        this.getFramesArray();
+      }
+    },
+    async setStartTime(time) {
+      if (time.indexOf(':') !== -1) {
+        time = time.replace(/:/g, '');
+      }
+      const t = time.match(/.{1,2}/g);
+      const d = this.getDateParts();
+      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000;
+      this.frames = this.loadingArray;
+      await this.fInterface.changeTime(setTime);
+      this.getFramesArray();
+      this.activeFrame = this.getIndex(1, 0, Positions.current);
+      // let frames = this.$refs.frames
+
+      // let audienceTime = null
+      // if (frames.length > 0) {
+      // let frame = frames[0].frame
+      // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)
+      // }
+
+      this.activeVideo = null;
+      return true;
+    },
+    hourToTimeStamp(time) {
+      if (time.indexOf(':') !== -1) {
+        time = time.replace(/:/g, '');
+      }
+      const t = time.match(/.{1,2}/g);
+      const d = this.getDateParts();
+      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000;
+      return setTime;
+    },
+    async changeHour(value) {
+      if (value) {
+        setTimeout(() => {
+          const array = this.$refs.frames.filter(fc => fc.videoStatus === fc.Status.playing || fc.videoStatus === fc.Status.paused);
+          if (array.length === 1) {
+            const frame = array[0];
+            frame.stop(false);
+          }
+          this.setStartTime(value, true);
+        }, 0);
+      }
+    },
+    changeBlockInterval(value) {
+      this.changeHour(value.ini);
+      let time_ini, time_end;
+      time_ini = this.hourToTimeStamp(value.ini);
+      time_end = this.hourToTimeStamp(value.end);
+      this.videoSliderTotalDuration = time_end - time_ini;
+      this.$refs.frames[0].changeSettings(time_ini);
+      this.blockStartTime = time_ini;
+    },
+    //eslint-disable-next-line
+    async updateVideoTime(index, videoTime) {
+      this.activeVideo = index;
+      this.videoTime = videoTime;
+    },
+    //eslint-disable-next-line
+    updateVideoStatus(currentTime) {
+      if (!this.progressVideoDrag) {
+        // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS
+        // this.updateProgress(null, currentTime)
+      }
+    },
+    async startPlaying(frame, totalTime) {
+      const array = this.$refs.frames.filter(fc => fc.frame.time !== frame.time);
+      for (let ref of array) {
+        if (ref.videoStatus === ref.Status.playing || ref.videoStatus === ref.Status.paused) {
+          ref.stop(false);
+        }
+      }
+      this.videoTotalTime = totalTime;
+      this.videoPlaying = true;
+    },
+    stopPlaying() {
+      this.videoTotalTime = null;
+      this.videoPlaying = false;
+      this.paused = false;
+    },
+    insertTime() {
+      this.$emit('timeToInsert', {
+        channel: this.channel,
+        hour_ini: this.hourIniSelected ? this.convertToAudienceTime(this.hourIniSelected, '') : null,
+        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;
+
+      // this.fInterface.setCurrentPosition(this.hourEndSelected)
+    },
+
+    insertTimeForce() {
+      this.$emit('timeToInsert', {
+        channel: this.channel,
+        hour_ini: this.hourIniSelected ? this.convertToAudienceTime(this.hourIniSelected, '') : null,
+        hour_end: this.hourEndSelected ? this.convertToAudienceTime(this.hourEndSelected, '') : null,
+        force: true
+      });
+      this.hourIniSelected = null;
+      this.hourEndSelected = null;
+      this.canInsertTime = false;
+
+      // this.fInterface.setCurrentPosition(this.hourEndSelected)
+    },
+
+    async getChannelMedia() {
+      // this.media = (await ChannelService.show(this.channel)).data.MEDIA
+    },
+    async changeServerClick() {
+      this.changeServer = !this.changeServer;
+      // this.$store.dispatch(
+      //   'serverOfFrames',
+      //   this.changeServer ? 'alternative' : 'default'
+      // )
+      sessionStorage.setItem('serverOfFrames', this.changeServer ? 'alternative' : 'default');
+
+      // if (this.$route.params.time != this.frames[0].time)
+      //   this.$router.push({
+      //     name: 'grid',
+      //     params: {
+      //       date: this.date,
+      //       channel: this.channelCode,
+      //       time: this.frames[0].time,
+      //     },
+      //   })
+      location.reload();
+    }
+  },
+  computed: {
+    active: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      }
+    },
+    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]);
+    },
+    loadingArray() {
+      return Array.from(Array(this.numberOfRows * this.framesPerRow).keys());
+    },
+    serverOfFrames() {
+      return sessionStorage.getItem('server');
+    }
+  },
+  watch: {
+    framesFormat(value) {
+      this.setFrameSelection(value);
+    },
+    active() {
+      // ? sempre que trocamos de tabs dar reset as horas selected
+      this.hourIniSelected = false;
+      this.hourEndSelected = false;
+    },
+    useCache() {
+      this.createFramesInterface();
+    },
+    hourIniSelected(value) {
+      if (value) {
+        sessionStorage.setItem('currentTimeFrames', this.convertToAudienceTime(this.hourIniSelected, ''));
+      } else {
+        sessionStorage.removeItem('currentTimeFrames');
+      }
+    },
+    activeFrame(value) {
+      if (value) {
+        this.stopPlayingBar();
+      }
+    },
+    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-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/Visualization.vue?vue&type=style&index=0&id=38edcc3f&prod&scoped=true&lang=css&
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/Visualization.vue?vue&type=style&index=0&id=38edcc3f&prod&scoped=true&lang=css&
+
+;// CONCATENATED MODULE: ./src/Visualization.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var Visualization_component = (0,componentNormalizer/* default */.Z)(
+  src_Visualizationvue_type_script_lang_js_,
+  render,
+  staticRenderFns,
+  false,
+  null,
+  "38edcc3f",
+  null
+  
+)
+
+/* harmony default export */ var Visualization = (Visualization_component.exports);
+
+/***/ }),
+
+/***/ 9890:
+/***/ (function(module) {
+
+module.exports = "data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIZHBaSFJvUFNJMU56Z3VNRGMwSWlCb1pXbG5hSFE5SWpRek15NDVNek1pSUNCNGJXeHVjenAyUFNKb2RIUndjem92TDNabFkzUmhMbWx2TDI1aGJtOGlQanh3WVhSb0lHUTlJazAwTnk0MU5USWdORE15TGpBMk4yTXRNVFF1TURVM0xUTXVPVFk1TFRJNUxqQTNNUzB4TkM0NU1ESXRNemN1TWpjeUxUSTNMakUwTFRNdU9UTXpMVFV1T0RZNUxUY3VPRGd5TFRFMUxqWXlPUzA1TGpFNU15MHlNaTQzTWtNdExqUXhJRE0zTkM0eE1TMHVNek00SURZd0xqazFNaUF4TGpFMk15QTFNaTR3Tm1NeExqUXpPQzA0TGpVeU1TQTNMak14T1MweU1TNHdOVFlnTVRNdU16QXlMVEk0TGpNMU0wTXlOQzR4SURFeExqazFOU0F6T1M0ME5qa2dNeTR3TmpZZ05UTXVOekV4SURFdU1EQTNJRFl5TGpneU5pMHVNekV4SURVeE5TNHdNekV0TGpNME55QTFNalF1TVRJNExqazJPV00zTGpVeU9DQXhMakE0T1NBeE9TNHhPRFFnTlM0MU5UZ2dNalV1TWpZNElEa3VOamc0SURFMExqSXlNeUE1TGpZMU5DQXlOQzQzTmpnZ01qVXVOaUF5Tnk0Mk1USWdOREV1TnpVMUlERXVNemt5SURjdU9URWdNUzQwTXpjZ016SXdMalUxTnk0d05EY2dNekk1TGpFeUxURXVNVGc1SURjdU16STFMVFV1TURrMUlERTNMakl5TlMwNUxqSXpJREl6TGpNNU5pMDFMalEyTXlBNExqRTFNaTB4TlM0Mk9EVWdNVGN1TXpBeExUSTBMakkzTWlBeU1TNDNNalV0TVRVdU5Ea3lJRGN1T1RneElEY3VNakF6SURjdU16TTVMVEkxTlM0ek16RWdOeTR5TVRoc0xUSTBNQzQyTmprdE1TNDRNRE42YlRRNE15NDFNeTB5Tmk0Mk56WmpPQzQxTlRRdE5DNHdORFFnTVRJdU9UYzNMVGd1TURVMElERTJMalk1TFRFMUxqRXlOeUEyTGpBM09TMHhNUzQxT0NBMUxqYzNPUzB5TGpVM09DQTFMamMzT1MweE56TXVOemcxZGkweE5UZHNMVEl1TWpRdE55NHhNakpqTFRRdU1qRXlMVEV6TGpNNU5DMHhNUzQ0TXkweU1TNHpNamN0TWpRdU1UTTJMVEkxTGpFek55MDFMakkzTnkweExqWXpOQzB4T1M0NU5UZ3RNUzQzTkRFdE1qTTRMakV5TkMweExqYzBNVXcxTUM0Mk1qa2dNamN1TkRKakxURXlMalV6TmlBMExqRXdPUzB4T1M0Mk1UVWdNVEV1TlRFMUxUSXpMamd6TmlBeU5DNDVNemRzTFRJdU1qUWdOeTR4TWpKMk1UVTNZekFnTVRZNUxqQTBNaTB1TWpBNElERTJNaTR3TkRnZ05TNHhNelVnTVRjeUxqY3hNeUF6TGpJM09TQTJMalUwTmlBM0xqTTNPQ0F4TUM0NU16SWdNVE11TVRVeElERTBMakEzTkNBeE1DNDVOak1nTlM0NU5qY3ROUzR6T0RZZ05TNDJNVElnTWpRNExqY3hOQ0ExTGpRd05Hd3lNek10TGpFNU1YcHRMVFEzTVM0d015MDROUzQ0TlRaMkxUVTBMalEwTkd3MExqQTRPUzB6TGpNd05pQXhNQzR5TlMwNExqTTBObU16TGpNNE9DMHlMamMzTWlBM0xqTTFPQzAxTGpreU1pQTRMamd5TFRjZ01pNHhNVGt0TVM0MU5qSWdNekl1TlRVMkxUSTJMakF4SURNNExqZzBNUzB6TVM0eE9UY3VPREkxTFM0Mk9ERWdNVFF1TWpndE1URXVORE0xSURJNUxqa3RNak11T0RrNElESXpMamd4TXkweE9DNDVPVGtnTWpndU5qYzVMVEl5TGpRNE5pQXpNQzR4TWpVdE1qRXVOVGd6SURFdU9USTNJREV1TWpBMElETXpMakU0T0NBeU5pNHdNVGtnTkRndU1qRTBJRE00TGpJM05DQTFMak0xTmlBMExqTTJPQ0F4TUM0eE1qZ2dOeTQ1TkRJZ01UQXVOakF6SURjdU9UUXljell1TlRFMExUUXVPRE00SURFekxqUXhPQzB4TUM0M05XdzJOUzQyT1RJdE5UVXVOelVnT1M0MU1EVXRPQ0F4TXk0MU5qZ3RNVEV1TlNBek1pNHpPVE10TWpjdU16YzVJRGt0Tnk0Mk56bGpNaTR5TkRRdE1TNDVOVGNnTmk0eE1qa3ROUzR5TURFZ09DNDJNekl0Tnk0eU1EaHNOQzQxTlRJdE15NDJOU0F4TkM0NU5EZ2dNVE11TlRjMklESXdMakF3T0NBeE9DNHlNRGdnTWpJdU5EUTJJREl3TGpFek15QTFNaTR5T0RRZ05EY2dNVEF1TmpZMUlEa3VOUzR3TkRZZ01UZ3hMalZvTFRRMU9IcHRNell1TkRVNExURTJNeTQ1TlRGakxUSXVOemN6TFM0Mk56UXROeTR5TnpNdE1pNHlPVEl0TVRBdE15NDFPVGN0Tmk0eE9Ua3RNaTQ1TmpZdE1UZ3VNemt0TVRVdU1ESTRMVEl4TGpJek15MHlNUzR3TURndE1UTXVNakE1TFRJM0xqYzRNeTB1TVRFdE5UZ3VPVGs0SURJNExqYzNOUzAyT0M0MU56RWdOeTQ1TURFdE1pNDJNVGtnTWpFdU5USTBMVEl1TkRNM0lESTVMamt4TGpRZ01UY3VNamM1SURVdU9EUTBJREk1TGpRMk55QXlNQzR6TURNZ016SXVNakkySURNNExqSXlPU0ExTGpJNE1pQXpOQzR6TWpRdE1qVXVPRE0zSURZeUxqYzJPUzAxT1M0Mk56Y2dOVFF1TlRRNGVpSWdabWxzYkQwaUkyWm1aaUl2UGp3dmMzWm5QZz09Ig==";
+
+/***/ })
+
+}]);
+//# sourceMappingURL=visualization.common.95.js.map