@twab/visualization 0.9.9 → 0.9.11

package/dist/visualization.js

@@ -150,38 +150,20 @@ var index = {
 
     Vue.component(
       'Visualization',
-      (await Promise.resolve().then(function () { return Visualization$1; })).default
+      (await Promise.resolve().then(function () { return Visualization; })).default
     );
   },
 };
 
+//
+
 const Status = Object.freeze({
   stopped: 0,
   playing: 1,
   paused: 2,
 });
 
-var Frame = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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._v(" "),(_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(),_vm._v(" "),_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') : ''}}),_vm._v(" "),_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._v(" "),(_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(),_vm._v(" "),_c('div',{staticClass:"overlay"})]):_vm._e()]),_vm._v(" "),_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)},
-staticRenderFns: [],
+var script$5 = {
   components: {
     VueLoading,
   },
@@ -440,6 +422,327 @@ staticRenderFns: [],
   },
 };
 
+function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+    if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+    }
+    // Vue.extend constructor export interop.
+    const options = typeof script === 'function' ? script.options : script;
+    // render functions
+    if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true;
+        // functional template
+        if (isFunctionalTemplate) {
+            options.functional = true;
+        }
+    }
+    // scopedId
+    if (scopeId) {
+        options._scopeId = scopeId;
+    }
+    let hook;
+    if (moduleIdentifier) {
+        // server build
+        hook = function (context) {
+            // 2.3 injection
+            context =
+                context || // cached call
+                    (this.$vnode && this.$vnode.ssrContext) || // stateful
+                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+            // 2.2 with runInNewContext: true
+            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                context = __VUE_SSR_CONTEXT__;
+            }
+            // inject component styles
+            if (style) {
+                style.call(this, createInjectorSSR(context));
+            }
+            // register component module identifier for async chunk inference
+            if (context && context._registeredComponents) {
+                context._registeredComponents.add(moduleIdentifier);
+            }
+        };
+        // used by ssr in case component is cached and beforeCreate
+        // never gets called
+        options._ssrRegister = hook;
+    }
+    else if (style) {
+        hook = shadowMode
+            ? function (context) {
+                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+            }
+            : function (context) {
+                style.call(this, createInjector(context));
+            };
+    }
+    if (hook) {
+        if (options.functional) {
+            // register for functional component in vue file
+            const originalRender = options.render;
+            options.render = function renderWithStyleInjection(h, context) {
+                hook.call(context);
+                return originalRender(h, context);
+            };
+        }
+        else {
+            // inject component registration as beforeCreate hook
+            const existing = options.beforeCreate;
+            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+    }
+    return script;
+}
+
+const isOldIE = typeof navigator !== 'undefined' &&
+    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+function createInjector(context) {
+    return (id, style) => addStyle(id, style);
+}
+let HEAD;
+const styles = {};
+function addStyle(id, css) {
+    const group = isOldIE ? css.media || 'default' : id;
+    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+    if (!style.ids.has(id)) {
+        style.ids.add(id);
+        let code = css.source;
+        if (css.map) {
+            // https://developer.chrome.com/devtools/docs/javascript-debugging
+            // this makes source maps inside style tags work properly in Chrome
+            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+            // http://stackoverflow.com/a/26603875
+            code +=
+                '\n/*# sourceMappingURL=data:application/json;base64,' +
+                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                    ' */';
+        }
+        if (!style.element) {
+            style.element = document.createElement('style');
+            style.element.type = 'text/css';
+            if (css.media)
+                style.element.setAttribute('media', css.media);
+            if (HEAD === undefined) {
+                HEAD = document.head || document.getElementsByTagName('head')[0];
+            }
+            HEAD.appendChild(style.element);
+        }
+        if ('styleSheet' in style.element) {
+            style.styles.push(code);
+            style.element.styleSheet.cssText = style.styles
+                .filter(Boolean)
+                .join('\n');
+        }
+        else {
+            const index = style.ids.size - 1;
+            const textNode = document.createTextNode(code);
+            const nodes = style.element.childNodes;
+            if (nodes[index])
+                style.element.removeChild(nodes[index]);
+            if (nodes.length)
+                style.element.insertBefore(textNode, nodes[index]);
+            else
+                style.element.appendChild(textNode);
+        }
+    }
+}
+
+/* script */
+const __vue_script__$5 = script$5;
+
+/* template */
+var __vue_render__$5 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  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._v(" "),
+      _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(),
+      _vm._v(" "),
+      _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") : "",
+        },
+      }),
+      _vm._v(" "),
+      _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._v(" "),
+                _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(),
+                _vm._v(" "),
+                _c("div", { staticClass: "overlay" }),
+              ]
+            )
+          : _vm._e(),
+      ]),
+      _vm._v(" "),
+      _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 __vue_staticRenderFns__$5 = [];
+__vue_render__$5._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$5 = function (inject) {
+    if (!inject) return
+    inject("data-v-b21779f2_0", { source: "\n.frame-container > div[data-v-b21779f2] {\r\n  max-height: 100%;\n}\n.frame-container[data-v-b21779f2] {\r\n  background-color: black;\r\n  display: flex;\r\n  justify-content: center;\n}\n.frame-content[data-v-b21779f2],\r\n.dummy-frame[data-v-b21779f2] {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\n}\n.frame-content video[data-v-b21779f2] {\r\n  flex-grow: 1;\r\n  object-fit: fill;\r\n  z-index: 0;\n}\n.overlay[data-v-b21779f2] {\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 5;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  border: 4px solid transparent;\n}\n.active .overlay[data-v-b21779f2] {\r\n  border-color: var(--visualization-primary);\n}\n.between-time .overlay[data-v-b21779f2] {\r\n  border-top-color: var(--visualization-secondary);\n}\n.between-time.active .overlay[data-v-b21779f2] {\r\n  border-color: var(--visualization-secondary);\n}\n.initial-time .overlay[data-v-b21779f2] {\r\n  border-top-color: var(--visualization-start);\n}\n.initial-time.active .overlay[data-v-b21779f2] {\r\n  border-color: var(--visualization-start);\n}\n.end-time .overlay[data-v-b21779f2] {\r\n  border-top-color: var(--visualization-end);\n}\n.end-time.active .overlay[data-v-b21779f2] {\r\n  border-color: var(--visualization-end);\n}\n.initial-time.end-time .overlay[data-v-b21779f2] {\r\n  border-top-color: var(--visualization-start);\r\n  border-bottom-color: var(--visualization-end);\n}\n.initial-time.end-time.active .overlay[data-v-b21779f2] {\r\n  border-top-color: var(--visualization-start);\r\n  border-left-color: var(--visualization-start);\r\n  border-bottom-color: var(--visualization-end);\r\n  border-right-color: var(--visualization-end);\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Frame.vue"],"names":[],"mappings":";AAiWA;EACA,gBAAA;AACA;AACA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;AACA;AACA;;EAEA,aAAA;EACA,mBAAA;EACA,uBAAA;AACA;AACA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,6BAAA;AACA;AACA;EACA,0CAAA;AACA;AACA;EACA,gDAAA;AACA;AACA;EACA,4CAAA;AACA;AACA;EACA,4CAAA;AACA;AACA;EACA,wCAAA;AACA;AACA;EACA,0CAAA;AACA;AACA;EACA,sCAAA;AACA;AACA;EACA,4CAAA;EACA,6CAAA;AACA;AACA;EACA,4CAAA;EACA,6CAAA;EACA,6CAAA;EACA,4CAAA;AACA","file":"Frame.vue","sourcesContent":["<template>\r\n  <div\r\n    :style=\"{\r\n      maxHeight: `${maxHeight}px`,\r\n      width: '100%',\r\n      position: 'relative',\r\n    }\"\r\n    :class=\"{\r\n      'frame-container': true,\r\n      'initial-time': initialTime,\r\n      'end-time': endTime,\r\n      'between-time': betweenTime,\r\n      active: active,\r\n    }\"\r\n  >\r\n    <GlobalEvents\r\n      v-if=\"active && activeTab && parentComponent.settingsClosed\"\r\n      @keydown.32.prevent=\"playOrPause\"\r\n      @keydown.27.prevent=\"stop\"\r\n      @keydown.79=\"toogleDetailFrame\"\r\n      @keydown.13.prevent=\"jumpFrameToStart\"\r\n    />\r\n    <GlobalEvents\r\n      v-if=\"showFrame\"\r\n      @keydown.27.prevent=\"toogleDetailFrame\"\r\n      @keydown.13.prevent=\"toogleDetailFrame\"\r\n    />\r\n\r\n    <vue-loading\r\n      :active=\"\r\n        ((!frame.image || !frame.time) && frame.title !== -1) ||\r\n        loading ||\r\n        videoIsLoading\r\n      \"\r\n      spinner=\"ring\"\r\n      color=\"#1565c0\"\r\n      background-color=\"#ededed\"\r\n      style=\"z-index: 0\"\r\n      :text=\"videoIsLoading ? $('infoBar.createVideo') : ''\"\r\n    />\r\n    <div style=\"background-color: black\">\r\n      <div\r\n        v-if=\"!loading\"\r\n        :class=\"{\r\n          'frame-content': frame.title === -1 || videoStatus !== Status.stopped,\r\n        }\"\r\n        :style=\"{\r\n          maxHeight: `${height}px`,\r\n          maxWidth: `${width}px`,\r\n          color: 'white',\r\n        }\"\r\n        @dblclick=\"playOrPause\"\r\n      >\r\n        <div\r\n          v-if=\"frame.image && videoStatus === Status.stopped\"\r\n          :class=\"{ 'dummy-frame': frame.title === -1 }\"\r\n          v-html=\"frame.image\"\r\n          style=\"width: 100%; height: 100%\"\r\n        />\r\n        <video\r\n          v-if=\"videoStatus !== Status.stopped && !videoIsLoading\"\r\n          ref=\"videoPlayer\"\r\n          :maxHeight=\"`${height}px`\"\r\n          :maxWidth=\"`${width}px`\"\r\n          :src=\"videoUrlString\"\r\n          preload=\"none\"\r\n          autoplay\r\n          @timeupdate=\"updateTimeLabel\"\r\n          @ended=\"videoEnded\"\r\n          @click=\"playOrPause\"\r\n          style=\"width: 100%; aspect-ratio: 11/9\"\r\n        ></video>\r\n        <div class=\"overlay\"></div>\r\n      </div>\r\n    </div>\r\n\r\n    <dialog\r\n      ref=\"imageDetailsDialog\"\r\n      :class=\"{ 'dummy-frame': frame.title === -1 }\"\r\n      v-html=\"frame.image\"\r\n      style=\"width: 100vh; border: none; background: none\"\r\n    />\r\n  </div>\r\n</template>\r\n<script>\r\nimport VueLoading from 'vue-loading-twa'\r\n\r\nconst Status = Object.freeze({\r\n  stopped: 0,\r\n  playing: 1,\r\n  paused: 2,\r\n})\r\n\r\nexport default {\r\n  components: {\r\n    VueLoading,\r\n  },\r\n  name: 'frame-component',\r\n  props: {\r\n    frame: {\r\n      type: [Object, Number],\r\n      required: true,\r\n    },\r\n    index: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    loading: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    gridSettings: {\r\n      type: Object,\r\n      required: true,\r\n    },\r\n    initialTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    endTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    betweenTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    active: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    activeTab: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    videoUrl: {\r\n      type: [String, Promise],\r\n      required: true,\r\n    },\r\n    playbackRate: {\r\n      type: Number,\r\n      default: 1,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      Status,\r\n      aspectRatio: 11 / 9,\r\n      width: 0,\r\n      height: 0,\r\n      maxWidth: 0,\r\n      fullMaxWidth: 0,\r\n      maxHeight: 0,\r\n      showFrame: false,\r\n      videoStatus: Status.stopped,\r\n      videoStartTime: null,\r\n      videoCurrentTime: null,\r\n      videoUrlString: '',\r\n      parentComponent: null,\r\n      videoIsLoading: false,\r\n      currentBlock: null,\r\n      lastTimeEnterPressed: null,\r\n    }\r\n  },\r\n  created() {\r\n    this.parentComponent = this.$parent\r\n  },\r\n  watch: {\r\n    playbackRate(val) {\r\n      if (\r\n        this.videoStatus === Status.playing ||\r\n        this.videoStatus === Status.paused\r\n      ) {\r\n        this.$refs.videoPlayer.playbackRate = val\r\n      }\r\n    },\r\n  },\r\n  methods: {\r\n    jumpFrameToStart() {\r\n      if (this.active) {\r\n        const currentTime = new Date().getTime()\r\n\r\n        if (currentTime - this.lastTimeEnterPressed <= 500) {\r\n          this.parentComponent.changeHour(\r\n            this.parentComponent.convertToAudienceTime(this.frame.time)\r\n          )\r\n        }\r\n\r\n        this.lastTimeEnterPressed = currentTime\r\n      }\r\n    },\r\n    changeSettings(value) {\r\n      this.videoCurrentTime = value\r\n    },\r\n    toogleDetailFrame() {\r\n      if (this.showFrame) {\r\n        this.$refs.imageDetailsDialog.close()\r\n      } else {\r\n        this.$refs.imageDetailsDialog.showModal()\r\n      }\r\n      this.showFrame = !this.showFrame\r\n    },\r\n    getMaxWidth() {\r\n      const commandBarSize = document.getElementById('command-bar')\r\n\r\n      return commandBarSize?.clientWidth\r\n    },\r\n    resize(height) {\r\n      const commandBarSize = document.getElementById('command-bar')\r\n      const infoBarSize = document.getElementById('info-bar')\r\n      this.fullMaxWidth = commandBarSize?.clientWidth\r\n      this.maxWidth =\r\n        (commandBarSize?.clientWidth - this.gridSettings.framesPerRow * 10) /\r\n        this.gridSettings.framesPerRow\r\n\r\n      const heightAvailable =\r\n        height -\r\n        commandBarSize?.offsetHeight -\r\n        infoBarSize?.offsetHeight -\r\n        47 * this.gridSettings.numberOfRows\r\n\r\n      this.maxHeight =\r\n        this.gridSettings.numberOfRows === 2\r\n          ? (heightAvailable - 12) / 2\r\n          : heightAvailable\r\n      this.maxHeight = this.maxHeight >= 75 ? this.maxHeight : 75\r\n\r\n      if (this.maxWidth / this.aspectRatio > this.maxHeight) {\r\n        this.height = this.maxHeight\r\n        this.width = this.maxHeight * this.aspectRatio\r\n      } else {\r\n        this.width = this.maxWidth\r\n        this.height = this.maxWidth / this.aspectRatio\r\n      }\r\n\r\n      this.maxHeight = this.height\r\n    },\r\n    async playOrPause() {\r\n      switch (this.videoStatus) {\r\n        case Status.stopped:\r\n          this.videoIsLoading = true\r\n          try {\r\n            this.videoUrlString = await this.videoUrl\r\n            const blockInfo =\r\n              await this.parentComponent.fInterface?.getVideoStartTime(\r\n                this.frame\r\n              )\r\n\r\n            this.videoStartTime = blockInfo.start\r\n            this.videoUrlString =\r\n              this.parentComponent.fInterface.getVideoRequestByUrl(\r\n                blockInfo.url,\r\n                this.frame.number\r\n              )\r\n          } catch (error) {\r\n            console.log(error)\r\n          }\r\n          this.videoIsLoading = false\r\n          this.videoStatus = Status.playing\r\n          this.$nextTick(() => {\r\n            this.$refs.videoPlayer.onloadedmetadata = (e) => {\r\n              this.$refs.videoPlayer.playbackRate = this.playbackRate\r\n              // * atualizar slider\r\n              this.$emit('updateSlider', this.videoStartTime, this.frame.time)\r\n              //*\r\n              this.$emit('startPlaying', this.frame, e.target.duration)\r\n              this.$emit('playPauseStatus', true)\r\n            }\r\n          })\r\n          break\r\n        case Status.paused:\r\n          this.$refs.videoPlayer.play()\r\n          this.$refs.videoPlayer.playbackRate = this.playbackRate\r\n          this.videoStatus = Status.playing\r\n          this.$emit('playPauseStatus', true)\r\n          break\r\n        case Status.playing:\r\n          this.$refs.videoPlayer.pause()\r\n\r\n          this.videoStatus = Status.paused\r\n          this.$emit('playPauseStatus', false)\r\n          break\r\n      }\r\n    },\r\n    stop(jump = true) {\r\n      if (\r\n        this.videoStatus === Status.playing ||\r\n        this.videoStatus === Status.paused\r\n      ) {\r\n        if (jump) {\r\n          this.parentComponent.changeHour(\r\n            this.parentComponent.convertToAudienceTime(\r\n              parseInt(this.videoCurrentTime)\r\n            )\r\n          )\r\n        }\r\n        this.videoStatus = Status.stopped\r\n        this.videoUrlString = null\r\n        this.videoCurrentTime = null\r\n        this.videoStartTime = null\r\n      }\r\n      this.$emit('stopPlaying')\r\n    },\r\n    //eslint-disable-next-line\r\n    videoJumpTo(time) {\r\n      this.videoCurrentTime = this.videoStartTime + time\r\n      this.$refs.videoPlayer.currentTime = time\r\n    },\r\n    async videoJumpToTimeStamp(time) {\r\n      let frame = {\r\n        time: time,\r\n      }\r\n      if (!time) return\r\n      if (\r\n        !(\r\n          this.currentBlock &&\r\n          time >= this.currentBlock.start &&\r\n          time <= this.currentBlock.end\r\n        )\r\n      ) {\r\n        this.currentBlock = await this.parentComponent.fInterface?.getBlockInfo(\r\n          frame\r\n        )\r\n        this.videoStartTime = this.currentBlock.start\r\n        this.videoUrlString =\r\n          this.parentComponent.fInterface.getVideoUrlForTime(\r\n            this.videoStartTime\r\n          )\r\n      }\r\n      this.videoCurrentTime = time - this.videoStartTime\r\n      this.$refs.videoPlayer.currentTime = this.videoCurrentTime\r\n    },\r\n    updateTimeLabel(e) {\r\n      this.videoCurrentTime = this.videoStartTime + e.target.currentTime\r\n      this.parentComponent.updateVideoTime(this.index, this.videoCurrentTime)\r\n      this.parentComponent.updateVideoStatus(e.target.currentTime)\r\n    },\r\n    async videoEnded() {\r\n      this.videoStartTime =\r\n        await this.parentComponent.fInterface?.getNextVideoStartTime(\r\n          this.frame.time\r\n        )\r\n      this.videoUrlString = this.parentComponent.fInterface.getVideoUrlForTime(\r\n        this.videoStartTime\r\n      )\r\n      //  * Ao acabar o vídeo tenho de mandar atualizar slider\r\n      // * aqui o video current time tambem vai ser o videoStartTime\r\n      this.$emit('updateSlider', this.videoStartTime, this.videoStartTime)\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.frame-container > div {\r\n  max-height: 100%;\r\n}\r\n.frame-container {\r\n  background-color: black;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n.frame-content,\r\n.dummy-frame {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.frame-content video {\r\n  flex-grow: 1;\r\n  object-fit: fill;\r\n  z-index: 0;\r\n}\r\n.overlay {\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 5;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  border: 4px solid transparent;\r\n}\r\n.active .overlay {\r\n  border-color: var(--visualization-primary);\r\n}\r\n.between-time .overlay {\r\n  border-top-color: var(--visualization-secondary);\r\n}\r\n.between-time.active .overlay {\r\n  border-color: var(--visualization-secondary);\r\n}\r\n.initial-time .overlay {\r\n  border-top-color: var(--visualization-start);\r\n}\r\n.initial-time.active .overlay {\r\n  border-color: var(--visualization-start);\r\n}\r\n.end-time .overlay {\r\n  border-top-color: var(--visualization-end);\r\n}\r\n.end-time.active .overlay {\r\n  border-color: var(--visualization-end);\r\n}\r\n.initial-time.end-time .overlay {\r\n  border-top-color: var(--visualization-start);\r\n  border-bottom-color: var(--visualization-end);\r\n}\r\n.initial-time.end-time.active .overlay {\r\n  border-top-color: var(--visualization-start);\r\n  border-left-color: var(--visualization-start);\r\n  border-bottom-color: var(--visualization-end);\r\n  border-right-color: var(--visualization-end);\r\n}\r\n</style>\r\n"]}, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$5 = "data-v-b21779f2";
+  /* module identifier */
+  const __vue_module_identifier__$5 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$5 = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$5 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
+    __vue_inject_styles__$5,
+    __vue_script__$5,
+    __vue_scope_id__$5,
+    __vue_is_functional_template__$5,
+    __vue_module_identifier__$5,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
 const Api = axios.create({
   //baseURL: process.env.VUE_APP_FRAMES_SERVER,
   baseURL: sessionStorage.getItem('base_url'),
@@ -1161,19 +1464,53 @@ FramesInterface.prototype.getVideoRequestByUrl = function (url_path, t) {
   return url + 'StreamFromVideo?url=' + url_path + params + '#t=' + t
 };
 
-var Commands = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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(),_vm._v(" "),(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(),_vm._v(" "),_c('hr',{staticClass:"visualization-divider"})])},
-staticRenderFns: [],
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+var script$4 = {
   props: {
     videoPlaying: {
       type: Boolean,
@@ -1321,30 +1658,208 @@ staticRenderFns: [],
   },
 };
 
-var Infos = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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 ")]),_vm._v(" "),_c('hr',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}),_vm._v(" "),_c('span',[_vm._v("\n    "+_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),
-      }))+"\n  ")]),_vm._v(" "),_c('hr',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}),_vm._v(" "),_c('span',[_vm._v("\n    "+_vm._s(_vm.$t('infoBar.interval', {
-        seconds: _vm.secondsPerFrame,
-      }))+"\n  ")]),_vm._v(" "),_c('hr',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}),_vm._v(" "),_c('span',[_vm._v("\n    "+_vm._s(_vm.$t('infoBar.block', {
-        time1: _vm.convertToAudienceTime(_vm.blockStartTime),
-        time2: _vm.convertToAudienceTime(_vm.blockTotalTime),
-      }))+"\n  ")]),_vm._v(" "),_c('hr',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}),_vm._v("\n  "+_vm._s(_vm.framesPerRow * _vm.numberOfRows)+"\n  "),_c('hr',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}),_vm._v("\n  "+_vm._s(_vm.framesPerRow + '*' + _vm.numberOfRows)+"\n  "),(_vm.alternativeServer || !_vm.cache)?_c('span',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}):_vm._e(),_vm._v(" "),(_vm.alternativeServer)?_c('span',[_c('v-icon',{attrs:{"color":"error","small":"","left":""}},[_vm._v("fa-exclamation-triangle")]),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.$t('infoBar.alternativeServer')))])],1):_vm._e(),_vm._v(" "),(_vm.alternativeServer && !_vm.cache)?_c('span',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}):_vm._e(),_vm._v(" "),(!_vm.cache)?_c('span',[_c('v-icon',{attrs:{"color":"warning","small":"","left":""}},[_vm._v("fa-exclamation-circle")]),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.$t('infoBar.notUsingCache')))])],1):_vm._e(),_vm._v(" "),_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')}}}),_vm._v(" "),_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')}}}),_vm._v(" "),_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)])},
-staticRenderFns: [],
+/* script */
+const __vue_script__$4 = script$4;
+
+/* template */
+var __vue_render__$4 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  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(),
+                _vm._v(" "),
+                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(),
+      _vm._v(" "),
+      _c("hr", { staticClass: "visualization-divider" }),
+    ]
+  )
+};
+var __vue_staticRenderFns__$4 = [];
+__vue_render__$4._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$4 = undefined;
+  /* scoped */
+  const __vue_scope_id__$4 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$4 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$4 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$4 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
+    __vue_inject_styles__$4,
+    __vue_script__$4,
+    __vue_scope_id__$4,
+    __vue_is_functional_template__$4,
+    __vue_module_identifier__$4,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+var script$3 = {
   props: {
     playbackRate: {
       type: Number,
@@ -1438,9 +1953,260 @@ staticRenderFns: [],
   },
 };
 
-var VideoProgress = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"visualization-row",attrs:{"id":"progress"},on:{"mousedown":_vm.progressMouseDown}},[_c('span',{staticClass:"progressLabel"},[_vm._v("\n      "+_vm._s(_vm.convertToAudienceTime(_vm.videoTime))+"\n    ")]),_vm._v(" "),_c('span',{staticClass:"progressBar"})]),_vm._v(" "),_c('hr',{staticClass:"visualization-divider"})])},
-staticRenderFns: [],
+/* script */
+const __vue_script__$3 = script$3;
+
+/* template */
+var __vue_render__$3 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  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 ")]),
+      _vm._v(" "),
+      _c("hr", {
+        staticClass: "visualization-divider vertical",
+        staticStyle: { margin: "0 8px" },
+      }),
+      _vm._v(" "),
+      _c("span", [
+        _vm._v(
+          "\n    " +
+            _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),
+              })
+            ) +
+            "\n  "
+        ),
+      ]),
+      _vm._v(" "),
+      _c("hr", {
+        staticClass: "visualization-divider vertical",
+        staticStyle: { margin: "0 8px" },
+      }),
+      _vm._v(" "),
+      _c("span", [
+        _vm._v(
+          "\n    " +
+            _vm._s(
+              _vm.$t("infoBar.interval", {
+                seconds: _vm.secondsPerFrame,
+              })
+            ) +
+            "\n  "
+        ),
+      ]),
+      _vm._v(" "),
+      _c("hr", {
+        staticClass: "visualization-divider vertical",
+        staticStyle: { margin: "0 8px" },
+      }),
+      _vm._v(" "),
+      _c("span", [
+        _vm._v(
+          "\n    " +
+            _vm._s(
+              _vm.$t("infoBar.block", {
+                time1: _vm.convertToAudienceTime(_vm.blockStartTime),
+                time2: _vm.convertToAudienceTime(_vm.blockTotalTime),
+              })
+            ) +
+            "\n  "
+        ),
+      ]),
+      _vm._v(" "),
+      _c("hr", {
+        staticClass: "visualization-divider vertical",
+        staticStyle: { margin: "0 8px" },
+      }),
+      _vm._v("\n  " + _vm._s(_vm.framesPerRow * _vm.numberOfRows) + "\n  "),
+      _c("hr", {
+        staticClass: "visualization-divider vertical",
+        staticStyle: { margin: "0 8px" },
+      }),
+      _vm._v(
+        "\n  " + _vm._s(_vm.framesPerRow + "*" + _vm.numberOfRows) + "\n  "
+      ),
+      _vm.alternativeServer || !_vm.cache
+        ? _c("span", {
+            staticClass: "visualization-divider vertical",
+            staticStyle: { margin: "0 8px" },
+          })
+        : _vm._e(),
+      _vm._v(" "),
+      _vm.alternativeServer
+        ? _c(
+            "span",
+            [
+              _c("v-icon", { attrs: { color: "error", small: "", left: "" } }, [
+                _vm._v("fa-exclamation-triangle"),
+              ]),
+              _vm._v(" "),
+              _c("strong", [
+                _vm._v(_vm._s(_vm.$t("infoBar.alternativeServer"))),
+              ]),
+            ],
+            1
+          )
+        : _vm._e(),
+      _vm._v(" "),
+      _vm.alternativeServer && !_vm.cache
+        ? _c("span", {
+            staticClass: "visualization-divider vertical",
+            staticStyle: { margin: "0 8px" },
+          })
+        : _vm._e(),
+      _vm._v(" "),
+      !_vm.cache
+        ? _c(
+            "span",
+            [
+              _c(
+                "v-icon",
+                { attrs: { color: "warning", small: "", left: "" } },
+                [_vm._v("fa-exclamation-circle")]
+              ),
+              _vm._v(" "),
+              _c("strong", [_vm._v(_vm._s(_vm.$t("infoBar.notUsingCache")))]),
+            ],
+            1
+          )
+        : _vm._e(),
+      _vm._v(" "),
+      _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")
+              },
+            },
+          }),
+          _vm._v(" "),
+          _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")
+              },
+            },
+          }),
+          _vm._v(" "),
+          _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 __vue_staticRenderFns__$3 = [];
+__vue_render__$3._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$3 = undefined;
+  /* scoped */
+  const __vue_scope_id__$3 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$3 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$3 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
+    __vue_inject_styles__$3,
+    __vue_script__$3,
+    __vue_scope_id__$3,
+    __vue_is_functional_template__$3,
+    __vue_module_identifier__$3,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+var script$2 = {
   props: {
     videoTime: {
       type: Number,
@@ -1558,6 +2324,72 @@ staticRenderFns: [],
   },
 };
 
+/* script */
+const __vue_script__$2 = script$2;
+
+/* template */
+var __vue_render__$2 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", [
+    _c(
+      "div",
+      {
+        staticClass: "visualization-row",
+        attrs: { id: "progress" },
+        on: { mousedown: _vm.progressMouseDown },
+      },
+      [
+        _c("span", { staticClass: "progressLabel" }, [
+          _vm._v(
+            "\n      " +
+              _vm._s(_vm.convertToAudienceTime(_vm.videoTime)) +
+              "\n    "
+          ),
+        ]),
+        _vm._v(" "),
+        _c("span", { staticClass: "progressBar" }),
+      ]
+    ),
+    _vm._v(" "),
+    _c("hr", { staticClass: "visualization-divider" }),
+  ])
+};
+var __vue_staticRenderFns__$2 = [];
+__vue_render__$2._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$2 = function (inject) {
+    if (!inject) return
+    inject("data-v-17928743_0", { source: "\n#progress[data-v-17928743] {\r\n  position: relative;\r\n  cursor: pointer;\r\n  width: 80%;\r\n  height: 15px;\r\n  background-color: #dfdfdf;\r\n  margin: 5px auto;\r\n  border-radius: 6px;\n}\n.progressBar[data-v-17928743] {\r\n  display: absolute;\r\n  height: 15px;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  background-color: var(--visualization-secondary);\r\n  z-index: 2;\r\n  width: 50%;\r\n  border-radius: inherit;\n}\n.progressBar[data-v-17928743]::after {\r\n  content: '';\r\n  width: 17px;\r\n  height: 17px;\r\n  position: absolute;\r\n  top: -1px;\r\n  right: -8.5px;\r\n  border-radius: 50%;\r\n  background-color: var(--visualization-primary);\r\n  z-index: 3;\n}\n.progressLabel[data-v-17928743] {\r\n  z-index: 4;\r\n  margin: 0 auto;\r\n  font-weight: bold;\r\n  line-height: 17px;\r\n  font-size: 14px;\r\n  text-shadow: -1px 0 #dfdfdf, 0 1px #dfdfdf, 1px 0 #dfdfdf, 0 -1px #dfdfdf;\r\n\r\n  user-select: none;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\VideoProgress.vue"],"names":[],"mappings":";AAmIA;EACA,kBAAA;EACA,eAAA;EACA,UAAA;EACA,YAAA;EACA,yBAAA;EACA,gBAAA;EACA,kBAAA;AACA;AACA;EACA,iBAAA;EACA,YAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,gDAAA;EACA,UAAA;EACA,UAAA;EACA,sBAAA;AACA;AACA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,SAAA;EACA,aAAA;EACA,kBAAA;EACA,8CAAA;EACA,UAAA;AACA;AACA;EACA,UAAA;EACA,cAAA;EACA,iBAAA;EACA,iBAAA;EACA,eAAA;EACA,yEAAA;;EAEA,iBAAA;AACA","file":"VideoProgress.vue","sourcesContent":["<template>\r\n  <div>\r\n    <div class=\"visualization-row\" id=\"progress\" @mousedown=\"progressMouseDown\">\r\n      <span class=\"progressLabel\">\r\n        {{ convertToAudienceTime(videoTime) }}\r\n      </span>\r\n      <span class=\"progressBar\"></span>\r\n    </div>\r\n    <hr class=\"visualization-divider\" />\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  props: {\r\n    videoTime: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n  },\r\n  methods: {\r\n    progressMouseDown(e) {\r\n      this.progressVideoDrag = true\r\n      const array = this.$refs.frames.filter(\r\n        (fc) => fc.videoStatus === fc.Status.playing\r\n      )\r\n      if (array.length === 1) {\r\n        const frame = array[0]\r\n        frame.playOrPause()\r\n      }\r\n      this.updateProgress(e)\r\n\r\n      window.addEventListener('mouseup', this.progressMouseUp)\r\n      window.addEventListener('mousemove', this.progressMouseMove)\r\n    },\r\n    progressMouseUp(e) {\r\n      if (this.progressVideoDrag) {\r\n        const array = this.$refs.frames.filter(\r\n          (fc) => fc.videoStatus === fc.Status.paused\r\n        )\r\n        if (array.length === 1) {\r\n          const frame = array[0]\r\n          frame.playOrPause()\r\n        }\r\n\r\n        this.updateProgress(e)\r\n      }\r\n\r\n      window.removeEventListener('mouseup', this.progressMouseUp)\r\n      window.removeEventListener('mousemove', this.progressMouseMove)\r\n      this.progressVideoDrag = false\r\n    },\r\n    progressMouseMove(e) {\r\n      if (this.progressVideoDrag) {\r\n        this.updateProgress(e)\r\n      }\r\n    },\r\n    updateProgress(e, time) {\r\n      let percentage\r\n      const element = document.getElementById('progress')\r\n      const elementBar = element.getElementsByClassName('progressBar')[0]\r\n\r\n      let frames = this.$refs.frames.filter(\r\n        (fc) =>\r\n          fc.videoStatus === fc.Status.playing ||\r\n          fc.videoStatus === fc.Status.paused\r\n      )\r\n      let frame = frames.length === 1 ? frames[0] : null\r\n\r\n      if (time && frame) {\r\n        let timeInSeconds = frame.videoCurrentTime - this.sliderStartTime\r\n\r\n        percentage = (timeInSeconds / this.videoSliderTotalDuration) * 100\r\n      } else if (e) {\r\n        const rect = element.getBoundingClientRect()\r\n        const max = Math.round(rect.width)\r\n        const pos = e.pageX - Math.round(rect.left)\r\n        percentage = (pos / max) * 100 <= 100 ? (pos / max) * 100 : 100\r\n\r\n        if (frame) {\r\n          let targetInSeconds =\r\n            this.videoSliderTotalDuration * (percentage / 100)\r\n          let timeStampToJump = parseInt(this.sliderStartTime + targetInSeconds)\r\n          frame.videoJumpToTimeStamp(timeStampToJump)\r\n        }\r\n      } else {\r\n        percentage = 0\r\n      }\r\n\r\n      elementBar.style.width = `${percentage}%`\r\n    },\r\n    getDateParts(date = this.date) {\r\n      const d = new Date(date)\r\n      return {\r\n        year: d.getFullYear(),\r\n        month: d.getMonth(),\r\n        day: d.getDate(),\r\n      }\r\n    },\r\n    dateInUtc(miliSeconds) {\r\n      var date = new Date(miliSeconds)\r\n      var utc = new Date(\r\n        date.getUTCFullYear(),\r\n        date.getUTCMonth(),\r\n        date.getUTCDate(),\r\n        date.getUTCHours(),\r\n        date.getUTCMinutes(),\r\n        date.getUTCSeconds()\r\n      )\r\n      return utc\r\n    },\r\n    convertToAudienceTime(time, separator = ':') {\r\n      const d = this.getDateParts()\r\n      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\r\n\r\n      let hour = this.dateInUtc(time * 1000)\r\n        .toTimeString()\r\n        .split(' ')[0]\r\n        .split(':')\r\n        .map(Number)\r\n\r\n      if (time > limit && time <= limit + this.startAudienceSeconds) {\r\n        hour[0] = 24 + hour[0]\r\n      }\r\n      return hour\r\n        .map((part) => (part > 9 ? part.toString() : '0' + part))\r\n        .join(separator)\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n#progress {\r\n  position: relative;\r\n  cursor: pointer;\r\n  width: 80%;\r\n  height: 15px;\r\n  background-color: #dfdfdf;\r\n  margin: 5px auto;\r\n  border-radius: 6px;\r\n}\r\n.progressBar {\r\n  display: absolute;\r\n  height: 15px;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  background-color: var(--visualization-secondary);\r\n  z-index: 2;\r\n  width: 50%;\r\n  border-radius: inherit;\r\n}\r\n.progressBar::after {\r\n  content: '';\r\n  width: 17px;\r\n  height: 17px;\r\n  position: absolute;\r\n  top: -1px;\r\n  right: -8.5px;\r\n  border-radius: 50%;\r\n  background-color: var(--visualization-primary);\r\n  z-index: 3;\r\n}\r\n.progressLabel {\r\n  z-index: 4;\r\n  margin: 0 auto;\r\n  font-weight: bold;\r\n  line-height: 17px;\r\n  font-size: 14px;\r\n  text-shadow: -1px 0 #dfdfdf, 0 1px #dfdfdf, 1px 0 #dfdfdf, 0 -1px #dfdfdf;\r\n\r\n  user-select: none;\r\n}\r\n</style>\r\n"]}, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$2 = "data-v-17928743";
+  /* module identifier */
+  const __vue_module_identifier__$2 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$2 = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+    __vue_inject_styles__$2,
+    __vue_script__$2,
+    __vue_scope_id__$2,
+    __vue_is_functional_template__$2,
+    __vue_module_identifier__$2,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
 var one_one = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 558.2 183.6\"  xmlns:v=\"https://vecta.io/nano\"><path d=\"M558.2 0v90.1h-88.3c-1.9 0-1.9 0-1.9-1.9V1.8c0-1.8 0-1.8 1.8-1.8h88.4zm-468 183.5H0V95.1c0-1.7 0-1.7 1.7-1.7h86.7c1.8 0 1.8 0 1.8 1.8v88.3zm93.6 0H93.6V95.3c0-1.9 0-1.9 1.9-1.9H182c1.8 0 1.8 0 1.8 1.8v88.3zm280.9 0h-90.2V95.1c0-1.7 0-1.7 1.6-1.7H463c1.6 0 1.6 0 1.6 1.7v62.2l.1 26.2zm93.5-90v89c0 .9-.2 1.1-1.1 1.1H468V95.2c0-1.7 0-1.7 1.7-1.7h88.5zm-280.9 90h-90V94.9c0-.9.1-1.5 1.2-1.5H276c.9 0 1.2.3 1.2 1.2l.1 88.9zm93.6 0h-90V95.1c0-1.7 0-1.7 1.7-1.7h86.5c1.8 0 1.8 0 1.8 1.8v88.3z\" fill=\"#cbcbcb\"/><path d=\"M0 45.1V1.5C0 .3.3 0 1.4 0h87.3c1.2 0 1.5.3 1.4 1.5v87.1c0 1.2-.3 1.5-1.5 1.5H1.4c-1.3 0-1.5-.4-1.5-1.6L0 45.1z\" fill=\"#1565c0\"/><path d=\"M93.6 44.9V1.5c0-1.6 0-1.6 1.6-1.6h87.1c1.5 0 1.5 0 1.5 1.6v86.8c0 1.6 0 1.6-1.6 1.6H95.4c-1.8 0-1.8 0-1.8-1.8V44.9zm280.9.2V1.6c0-1.6 0-1.6 1.6-1.6h87.1c1.5 0 1.5 0 1.5 1.6v86.7c0 1.8 0 1.8-1.8 1.8h-86.7c-1.7 0-1.7 0-1.7-1.7V45.1zm-142.1 45H189c-1.6 0-1.6 0-1.6-1.5v-87c0-1.6 0-1.6 1.6-1.6h86.8c1.6 0 1.6 0 1.6 1.5v87c0 1.6 0 1.6-1.6 1.6h-43.4zm48.5-45.2V1.5c0-1.6 0-1.6 1.6-1.6h86.8c1.6 0 1.6 0 1.6 1.5v87c0 1.6 0 1.6-1.6 1.6h-86.8c-1.6 0-1.6 0-1.6-1.6V44.9z\" fill=\"#cbcbcb\"/></svg>";
 
 var two_one = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 558.2 183.6\"  xmlns:v=\"https://vecta.io/nano\"><path d=\"M277.3 183.5h-90.2V94.2c0-.6.2-.9.8-.9h87.7c1 0 1.6 0 1.6 1.3l.1 88.9zM558.2 0v90.1h-88.3c-1.9 0-1.9 0-1.9-1.9V1.8c0-1.8 0-1.8 1.8-1.8h88.4zm-468 183.5H0V95.1c0-1.7 0-1.7 1.7-1.7h86.7c1.8 0 1.8 0 1.8 1.8v88.3zm93.6 0H93.6V95.3c0-1.9 0-1.9 1.9-1.9H182c1.8 0 1.8 0 1.8 1.8v88.3zm280.9 0h-90.2V95.1c0-1.7 0-1.7 1.6-1.7H463c1.6 0 1.6 0 1.6 1.7v61.2l.1 27.2zm93.5-90v89c0 .9-.2 1.1-1.1 1.1H468V95.2c0-1.7 0-1.7 1.7-1.7h88.5zm-187.1 90h-90.2V94.6c0-1.1.4-1.5 1.5-1.5l6.8.3h80.2c1.1 0 1.5.2 1.5 1.4l.2 61.9.5 25.1c0 .7.1 1.3-.5 1.7z\" fill=\"#cbcbcb\"/><path d=\"M183.8 45.1v43.5c0 1.1-.2 1.6-1.5 1.6H95c-1.2 0-1.4-.4-1.4-1.5V1.5C93.6.2 94 0 95.1 0h87.3c1.2 0 1.4.4 1.4 1.5v43.6zM45.1 0h43.7c1.1 0 1.4.2 1.4 1.4v87.3c0 1.1-.4 1.4-1.4 1.4H1.4c-1.1 0-1.3-.3-1.3-1.3L0 1.3C0 .2.3 0 1.3 0h43.8z\" fill=\"#1565c0\"/><path d=\"M419.6 90.1h-43.5c-1.6 0-1.6 0-1.6-1.6V1.6c0-1.6 0-1.6 1.6-1.6h87.1c1.5 0 1.5 0 1.5 1.6v86.7c0 1.8 0 1.8-1.8 1.8h-43.3zM277.3 44.9v43.5c0 1.7 0 1.7-1.6 1.7h-86.8c-1.6 0-1.6 0-1.6-1.6v-87c0-1.5 0-1.5 1.6-1.5h86.8c1.6 0 1.6 0 1.6 1.6v43.3zm93.6.3v43.2c0 1.7 0 1.7-1.6 1.7h-86.8c-1.6 0-1.6 0-1.6-1.6v-87c0-1.5 0-1.5 1.6-1.5h86.8c1.6 0 1.6 0 1.6 1.6v43.6z\" fill=\"#cbcbcb\"/></svg>";
@@ -1591,13 +2423,9 @@ var GridImages = {
   '6x2': six_two,
 };
 
-var Settings = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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(),_vm._v(" "),_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("\n      "+_vm._s(_vm.$t('infoBar.gridForm'))+"\n    ")]),_vm._v(" "),_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":function () { return (_vm.framesValue = item.value); }}})])}),0),_vm._v(" "),_c('div',{staticClass:"visualization-divider"}),_vm._v(" "),_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("\n        Ok\n      ")])])]),_vm._v(" "),_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("\n      "+_vm._s(_vm.$t('infoBar.secondImage'))+"\n    ")]),_vm._v(" "),_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;}}}),_vm._v(" "),_c('span',{staticStyle:{"padding-left":"20px","font-size":"16px"}},[_vm._v("\n        "+_vm._s(_vm.secondsPerFrame + ' s'))])]),_vm._v(" "),_c('div',{staticClass:"visualization-divider",staticStyle:{"margin":"10px"}}),_vm._v(" "),_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("\n        Ok\n      ")])])]),_vm._v(" "),_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("\n      "+_vm._s(_vm.$t('infoBar.goTo'))+"\n    ")]),_vm._v(" "),_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;}}})]),_vm._v(" "),_c('div',{staticClass:"visualization-divider",staticStyle:{"margin-top":"40px"}}),_vm._v(" "),_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 () {
-            _vm.$emit('close', 'goTo');
-            _vm.$emit('change-go-to', _vm.goToValue);
-            _vm.goToValue = '';
-          }}},[_vm._v("\n        Ok\n      ")])])]),_vm._v(" "),_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)}]}}),_vm._v(" "),_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("\n      "+_vm._s(_vm.$t('infoBar.playbackSpeed'))+"\n    ")]),_vm._v(" "),_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;}}}),_vm._v(" "),_c('span',{staticStyle:{"padding-left":"20px","padding-right":"20px","font-size":"16px"}},[_vm._v(_vm._s(_vm.playbackRate + 'x'))])]),_vm._v(" "),_c('div',{staticClass:"visualization-divider",staticStyle:{"margin-top":"40px"}}),_vm._v(" "),_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("\n        Ok\n      ")])])])],1)},
-staticRenderFns: [],
+//
+
+var script$1 = {
   props: {
     dialogsVisibility: {
       type: Object,
@@ -1745,37 +2573,501 @@ staticRenderFns: [],
   },
 };
 
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  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(),
+      _vm._v(" "),
+      _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("\n      " + _vm._s(_vm.$t("infoBar.gridForm")) + "\n    ")]
+        ),
+        _vm._v(" "),
+        _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: function () {
+                      return (_vm.framesValue = item.value)
+                    },
+                  },
+                }),
+              ]
+            )
+          }),
+          0
+        ),
+        _vm._v(" "),
+        _c("div", { staticClass: "visualization-divider" }),
+        _vm._v(" "),
+        _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("\n        Ok\n      ")]
+            ),
+          ]
+        ),
+      ]),
+      _vm._v(" "),
+      _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(
+              "\n      " + _vm._s(_vm.$t("infoBar.secondImage")) + "\n    "
+            ),
+          ]
+        ),
+        _vm._v(" "),
+        _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;
+                },
+              },
+            }),
+            _vm._v(" "),
+            _c(
+              "span",
+              { staticStyle: { "padding-left": "20px", "font-size": "16px" } },
+              [_vm._v("\n        " + _vm._s(_vm.secondsPerFrame + " s"))]
+            ),
+          ]
+        ),
+        _vm._v(" "),
+        _c("div", {
+          staticClass: "visualization-divider",
+          staticStyle: { margin: "10px" },
+        }),
+        _vm._v(" "),
+        _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("\n        Ok\n      ")]
+            ),
+          ]
+        ),
+      ]),
+      _vm._v(" "),
+      _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("\n      " + _vm._s(_vm.$t("infoBar.goTo")) + "\n    ")]
+        ),
+        _vm._v(" "),
+        _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;
+                },
+              },
+            }),
+          ]
+        ),
+        _vm._v(" "),
+        _c("div", {
+          staticClass: "visualization-divider",
+          staticStyle: { "margin-top": "40px" },
+        }),
+        _vm._v(" "),
+        _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 () {
+                    _vm.$emit("close", "goTo");
+                    _vm.$emit("change-go-to", _vm.goToValue);
+                    _vm.goToValue = "";
+                  },
+                },
+              },
+              [_vm._v("\n        Ok\n      ")]
+            ),
+          ]
+        ),
+      ]),
+      _vm._v(" "),
+      _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)
+            },
+          ],
+        },
+      }),
+      _vm._v(" "),
+      _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(
+              "\n      " + _vm._s(_vm.$t("infoBar.playbackSpeed")) + "\n    "
+            ),
+          ]
+        ),
+        _vm._v(" "),
+        _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;
+                },
+              },
+            }),
+            _vm._v(" "),
+            _c(
+              "span",
+              {
+                staticStyle: {
+                  "padding-left": "20px",
+                  "padding-right": "20px",
+                  "font-size": "16px",
+                },
+              },
+              [_vm._v(_vm._s(_vm.playbackRate + "x"))]
+            ),
+          ]
+        ),
+        _vm._v(" "),
+        _c("div", {
+          staticClass: "visualization-divider",
+          staticStyle: { "margin-top": "40px" },
+        }),
+        _vm._v(" "),
+        _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("\n        Ok\n      ")]
+            ),
+          ]
+        ),
+      ]),
+    ],
+    1
+  )
+};
+var __vue_staticRenderFns__$1 = [];
+__vue_render__$1._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$1 = function (inject) {
+    if (!inject) return
+    inject("data-v-76bbde5a_0", { source: "\ndialog[data-v-76bbde5a] {\r\n  max-width: 60vw;\r\n  /* padding: 12px; */\r\n  border: none;\r\n  background: white;\r\n  border-radius: 6px;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translateY(-50%) translateX(-50%);\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Settings.vue"],"names":[],"mappings":";AAmZA;EACA,eAAA;EACA,mBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA;mCACA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,4CAAA;AACA","file":"Settings.vue","sourcesContent":["<template>\r\n  <div>\r\n    <GlobalEvents\r\n      v-if=\"dialogsVisibility.frames\"\r\n      @keydown.37=\"prevFormat\"\r\n      @keydown.39=\"nextFormat\"\r\n    />\r\n    <!-- Formato da grelha -->\r\n    <dialog ref=\"frames\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 40px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 10px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.gridForm') }}\r\n      </div>\r\n      <div class=\"visualization-row\" style=\"justify-content: center\">\r\n        <div\r\n          v-for=\"(item, index) in items\"\r\n          :key=\"index\"\r\n          class=\"visualization-col\"\r\n          style=\"min-width: 200px; max-width: 200px\"\r\n        >\r\n          <img\r\n            @click=\"() => (framesValue = item.value)\"\r\n            :src=\"item.image\"\r\n            width=\"100%\"\r\n            :style=\"framesValue !== item.value ? 'filter: grayscale(1)' : ''\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"visualization-divider\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n          @click=\"$emit('close', 'frames')\"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Frequencia das Imagens -->\r\n    <dialog ref=\"secondsPerFrame\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 40px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 10px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.secondImage') }}\r\n      </div>\r\n      <div class=\"visualization-row\" style=\"margin: 25px; height: 20px\">\r\n        <input\r\n          ref=\"secondsPerFrameInput\"\r\n          v-model=\"secondsPerFrameValue\"\r\n          type=\"range\"\r\n          step=\"1\"\r\n          max=\"5\"\r\n          min=\"1\"\r\n          style=\"height: 30px; width: 300px\"\r\n        />\r\n        <span style=\"padding-left: 20px; font-size: 16px\">\r\n          {{ secondsPerFrame + ' s' }}</span\r\n        >\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin: 10px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"display: flex; justify-content: center; margin-top: 10px\"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n            margin-bottom: 8px;\r\n          \"\r\n          @click=\"$emit('close', 'secondsPerFrame')\"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Go To -->\r\n    <dialog ref=\"goTo\">\r\n      <div\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 35px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 8px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.goTo') }}\r\n      </div>\r\n      <div class=\"visualization-row\" style=\"margin: 25px; height: 20px\">\r\n        <input\r\n          v-model=\"goToValue\"\r\n          type=\"text\"\r\n          placeholder=\"hh:mm:ss\"\r\n          v-mask=\"'##:##:##'\"\r\n          style=\"\r\n            height: 30px;\r\n            width: 300px;\r\n            border: 0.1px solid #c2c9d6;\r\n            border-radius: 3px;\r\n            padding: 5px;\r\n          \"\r\n        />\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n          @click=\"\r\n            () => {\r\n              $emit('close', 'goTo')\r\n              $emit('change-go-to', goToValue)\r\n              goToValue = ''\r\n            }\r\n          \"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Velocidade Reprodução -->\r\n    <GlobalEvents\r\n      @keydown.107=\"changePlaybackRate(1)\"\r\n      @keydown.109=\"changePlaybackRate(-1)\"\r\n    />\r\n    <dialog ref=\"playbackRate\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 35px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 8px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.playbackSpeed') }}\r\n      </div>\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"margin: 25px; height: 20px; width: 380px\"\r\n      >\r\n        <input\r\n          ref=\"playbackRateInput\"\r\n          v-model=\"playbackRateValue\"\r\n          type=\"range\"\r\n          step=\"0.25\"\r\n          max=\"3\"\r\n          min=\"1\"\r\n          style=\"height: 30px; width: 300px\"\r\n        />\r\n        <span\r\n          style=\"padding-left: 20px; padding-right: 20px; font-size: 16px\"\r\n          >{{ playbackRate + 'x' }}</span\r\n        >\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \"\r\n      >\r\n        <button\r\n          @click=\"$emit('close', 'playbackRate')\"\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n  </div>\r\n</template>\r\n<script>\r\nimport GridImages from '../assets/grid/index.js'\r\n\r\nexport default {\r\n  props: {\r\n    dialogsVisibility: {\r\n      type: Object,\r\n      required: false,\r\n    },\r\n    playbackRate: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    secondsPerFrame: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    framesPerRow: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    numberOfRows: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      openBlocksDialog: false,\r\n      time: '',\r\n      rangeBlocks: {\r\n        ini: null,\r\n        end: null,\r\n        date: null,\r\n      },\r\n      items: [\r\n        { text: '2x1', value: 1, image: GridImages['2x1'] },\r\n        { text: '3x1', value: 2, image: GridImages['3x1'] },\r\n        { text: '3x2', value: 3, image: GridImages['3x2'] },\r\n        { text: '4x1', value: 4, image: GridImages['4x1'] },\r\n        { text: '4x2', value: 5, image: GridImages['4x2'] },\r\n        { text: '5x1', value: 6, image: GridImages['5x1'] },\r\n        { text: '5x2', value: 7, image: GridImages['5x2'] },\r\n        { text: '6x1', value: 8, image: GridImages['6x1'] },\r\n        { text: '6x2', value: 9, image: GridImages['6x2'] },\r\n      ],\r\n\r\n      // NEW\r\n      goToValue: '',\r\n    }\r\n  },\r\n  mounted() {\r\n    this.toogleDialogs()\r\n  },\r\n  computed: {\r\n    secondsPerFrameValue: {\r\n      get() {\r\n        return this.secondsPerFrame\r\n      },\r\n      set(val) {\r\n        this.$emit('change-seconds-per-frame', parseInt(val))\r\n      },\r\n    },\r\n    playbackRateValue: {\r\n      get() {\r\n        return this.playbackRate\r\n      },\r\n      set(val) {\r\n        this.$emit('change-playback-rate', parseFloat(val))\r\n      },\r\n    },\r\n    framesValue: {\r\n      get() {\r\n        return this.items.find(\r\n          (item) => item.text === `${this.framesPerRow}x${this.numberOfRows}`\r\n        ).value\r\n      },\r\n      set(value) {\r\n        this.$emit('set-frames-selection', value)\r\n      },\r\n    },\r\n    timeRules() {\r\n      return [\r\n        (time) =>\r\n          (time >= '02:30:00' && time <= '26:29:59') ||\r\n          this.$i18n.t('form.mustBeBetween'),\r\n      ]\r\n    },\r\n  },\r\n  methods: {\r\n    toogleDialogs() {\r\n      for (const dialog of Object.values(this.$refs)) {\r\n        dialog.close?.()\r\n      }\r\n\r\n      const openDialog = Object.keys(this.dialogsVisibility).find(\r\n        (key) => this.dialogsVisibility[key]\r\n      )\r\n\r\n      if (openDialog) {\r\n        this.$refs[openDialog].showModal()\r\n      }\r\n    },\r\n    prevFormat() {\r\n      if (this.items.find((format) => format.value === this.framesValue - 1)) {\r\n        this.framesValue--\r\n      }\r\n    },\r\n    nextFormat() {\r\n      if (this.items.find((format) => format.value === this.framesValue + 1)) {\r\n        this.framesValue++\r\n      }\r\n    },\r\n    changePlaybackRate(direction = 1) {\r\n      if (direction === 1) {\r\n        this.$refs.playbackRateInput.stepUp()\r\n      } else if (direction === -1) {\r\n        this.$refs.playbackRateInput.stepDown()\r\n      }\r\n      this.playbackRateValue = this.$refs.playbackRateInput.value\r\n    },\r\n    closeBlocksDialog() {\r\n      Object.entries(this.rangeBlocks).forEach(([key, value]) => {\r\n        if (!value || key == 'date') return\r\n        var res = value.replace(/\\D/g, '')\r\n        if (res.length < 6) {\r\n          for (let i = res.length; i < 6; i++) {\r\n            res += '0'\r\n          }\r\n        }\r\n        res.match(/.{1,2}/g)\r\n        let a = res.substring(0, 2)\r\n        let b = res.substring(2, 4)\r\n        let c = res.substring(4, 6)\r\n        this.rangeBlocks[key] = a + ':' + b + ':' + c\r\n      })\r\n\r\n      this.openBlocksDialog = false\r\n      this.$emit('goToBlockInterval', this.rangeBlocks)\r\n    },\r\n  },\r\n  watch: {\r\n    dialogsVisibility: {\r\n      handler() {\r\n        this.toogleDialogs()\r\n      },\r\n      deep: true,\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\ndialog {\r\n  max-width: 60vw;\r\n  /* padding: 12px; */\r\n  border: none;\r\n  background: white;\r\n  border-radius: 6px;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translateY(-50%) translateX(-50%);\r\n}\r\n</style>\r\n"]}, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$1 = "data-v-76bbde5a";
+  /* module identifier */
+  const __vue_module_identifier__$1 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$1 = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+    __vue_inject_styles__$1,
+    __vue_script__$1,
+    __vue_scope_id__$1,
+    __vue_is_functional_template__$1,
+    __vue_module_identifier__$1,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
+//
+
 const Positions = Object.freeze({
   previous: 0,
   current: 1,
   next: 2,
 });
 
-var Visualization = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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._v(" "),(_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 (function () { return (_vm.secondsPerFrame = 1); }).apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==50&&$event.keyCode!==98){ return null; }return (function () { return (_vm.secondsPerFrame = 2); }).apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==51&&$event.keyCode!==99){ return null; }return (function () { return (_vm.secondsPerFrame = 3); }).apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==52&&$event.keyCode!==100){ return null; }return (function () { return (_vm.secondsPerFrame = 4); }).apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==53&&$event.keyCode!==101){ return null; }return (function () { return (_vm.secondsPerFrame = 5); }).apply(null, arguments)}]}}):_vm._e(),_vm._v(" "),(_vm.prevLoop || _vm.nextLoop)?_c('GlobalEvents',{on:{"keydown":_vm.breakLoop,"click":_vm.breakLoop}}):_vm._e(),_vm._v(" "),(_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":function (value) { return (_vm.playbackRate = value); },"change-go-to":_vm.changeHour,"change-seconds-per-frame":function (value) { return (_vm.secondsPerFrame = value); },"set-frames-selection":_vm.setFrameSelection,"close":function (dialog) { return (_vm.dialogs[dialog] = false); }}}):_vm._e(),_vm._v(" "),_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._v(" "),(_vm.videoProgressBar)?_c('video-progress',{directives:[{name:"show",rawName:"v-show",value:(_vm.videoPlaying),expression:"videoPlaying"}],attrs:{"video-time":_vm.videoTime}}):_vm._e(),_vm._v(" "),_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._v(" "),_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._v(" "),_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._v(" "),_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("\n            "+_vm._s(_vm.getAudienceTime(
-                frame.time,
-                rowNumber,
-                frameNumber,
-                _vm.Positions.current
-              ))+"\n          ")])]),_vm._v(" "),_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)},
-staticRenderFns: [],
+var script = {
   name: 'visualization-container',
   props: {
     value: {
@@ -1811,11 +3103,11 @@ staticRenderFns: [],
     }
   },
   components: {
-    Frame,
-    CommandBar: Commands,
-    InfoBar: Infos,
-    VideoProgress,
-    Settings,
+    Frame: __vue_component__$5,
+    CommandBar: __vue_component__$4,
+    InfoBar: __vue_component__$3,
+    VideoProgress: __vue_component__$2,
+    Settings: __vue_component__$1,
     // Help,
   },
   data() {
@@ -2631,9 +3923,585 @@ staticRenderFns: [],
   },
 };
 
-var Visualization$1 = /*#__PURE__*/Object.freeze({
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  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._v(" "),
+      _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 function () {
+                    return (_vm.secondsPerFrame = 1)
+                  }.apply(null, arguments)
+                },
+                function ($event) {
+                  if (
+                    !$event.type.indexOf("key") &&
+                    $event.keyCode !== 50 &&
+                    $event.keyCode !== 98
+                  ) {
+                    return null
+                  }
+                  return function () {
+                    return (_vm.secondsPerFrame = 2)
+                  }.apply(null, arguments)
+                },
+                function ($event) {
+                  if (
+                    !$event.type.indexOf("key") &&
+                    $event.keyCode !== 51 &&
+                    $event.keyCode !== 99
+                  ) {
+                    return null
+                  }
+                  return function () {
+                    return (_vm.secondsPerFrame = 3)
+                  }.apply(null, arguments)
+                },
+                function ($event) {
+                  if (
+                    !$event.type.indexOf("key") &&
+                    $event.keyCode !== 52 &&
+                    $event.keyCode !== 100
+                  ) {
+                    return null
+                  }
+                  return function () {
+                    return (_vm.secondsPerFrame = 4)
+                  }.apply(null, arguments)
+                },
+                function ($event) {
+                  if (
+                    !$event.type.indexOf("key") &&
+                    $event.keyCode !== 53 &&
+                    $event.keyCode !== 101
+                  ) {
+                    return null
+                  }
+                  return function () {
+                    return (_vm.secondsPerFrame = 5)
+                  }.apply(null, arguments)
+                },
+              ],
+            },
+          })
+        : _vm._e(),
+      _vm._v(" "),
+      _vm.prevLoop || _vm.nextLoop
+        ? _c("GlobalEvents", {
+            on: { keydown: _vm.breakLoop, click: _vm.breakLoop },
+          })
+        : _vm._e(),
+      _vm._v(" "),
+      _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": function (value) {
+                return (_vm.playbackRate = value)
+              },
+              "change-go-to": _vm.changeHour,
+              "change-seconds-per-frame": function (value) {
+                return (_vm.secondsPerFrame = value)
+              },
+              "set-frames-selection": _vm.setFrameSelection,
+              close: function (dialog) {
+                return (_vm.dialogs[dialog] = false)
+              },
+            },
+          })
+        : _vm._e(),
+      _vm._v(" "),
+      _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._v(" "),
+          _vm.videoProgressBar
+            ? _c("video-progress", {
+                directives: [
+                  {
+                    name: "show",
+                    rawName: "v-show",
+                    value: _vm.videoPlaying,
+                    expression: "videoPlaying",
+                  },
+                ],
+                attrs: { "video-time": _vm.videoTime },
+              })
+            : _vm._e(),
+          _vm._v(" "),
+          _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._v(" "),
+          _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._v(" "),
+                _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._v(" "),
+                _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(
+                                "\n            " +
+                                  _vm._s(
+                                    _vm.getAudienceTime(
+                                      frame.time,
+                                      rowNumber,
+                                      frameNumber,
+                                      _vm.Positions.current
+                                    )
+                                  ) +
+                                  "\n          "
+                              ),
+                            ]),
+                          ]
+                        ),
+                        _vm._v(" "),
+                        _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 __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
+    inject("data-v-576d506a_0", { source: "\n.visualization-row[data-v-576d506a] {\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-576d506a] {\n  flex-basis: 0;\n  flex-grow: 1;\n  max-width: 100%;\n  padding: 12px;\n}\n.visualization-divider[data-v-576d506a] {\n  display: block;\n  flex: 1 1 100%;\n  height: 0px;\n  max-height: 0px;\n  opacity: 1;\n  transition: inherit;\n  border-style: solid;\n  border-width: thin 0 0 0;\n  border-color: rgba(0, 0, 0, 0.12);\n  margin: 0;\n}\n.visualization-divider.vertical[data-v-576d506a] {\n  align-self: stretch;\n  border-width: 0 thin 0 0;\n  display: inline-flex;\n  height: inherit;\n  margin-left: -1px;\n  max-height: 100%;\n  max-width: 0px;\n  vertical-align: text-bottom;\n  width: 0px;\n}\n.visualization-card[data-v-576d506a] {\n  flex-basis: 0;\n  flex-grow: 1;\n  max-width: 100%;\n  padding: 12px;\n  width: 100%;\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\n  overflow-wrap: break-word;\n  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n.visualization-justify-center[data-v-576d506a] {\n  justify-content: center;\n}\n.visualization-align-center[data-v-576d506a] {\n  align-items: center;\n}\n#visualization-container[data-v-576d506a] {\n  max-width: 100% !important;\n  margin: 0 auto !important;\n  height: 100%;\n  border-bottom: none;\n}\n#visualization-container > .card[data-v-576d506a] {\n  border-radius: 0 !important;\n  font-size: 12px;\n  width: 100%;\n  box-shadow: none;\n  height: 100%;\n}\n#command-bar[data-v-576d506a],\n#info-bar[data-v-576d506a] {\n  background-color: #f5f5f5;\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button[data-v-576d506a] {\n  width: 42px;\n  height: 36px;\n  border: none;\n  background: none;\n}\n#command-bar button[data-v-576d506a]:hover {\n  cursor: pointer;\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-576d506a] {\n  font-size: 16px;\n}\n#command-bar[data-v-576d506a] {\n  padding: 0 !important;\n}\n#info-bar[data-v-576d506a] {\n  padding: 4px;\n  font-size: 14px;\n  position: relative;\n}\n.settings-container[data-v-576d506a] {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-576d506a] {\n  margin: 0 2px;\n  cursor: pointer;\n}\n#info-bar svg[data-v-576d506a] {\n  font-size: 16px;\n}\n#info-bar .divider[data-v-576d506a] {\n  margin: 0 8px;\n}\nsvg[data-v-576d506a]:focus {\n  border: none;\n}\n.visualization-card[data-v-576d506a] {\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-576d506a] {\n  border-left: 8px solid var(--visualization-primary) !important;\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-576d506a] {\n  padding: 1px;\n  display: flex;\n  flex-flow: column;\n}\n.tooltip[data-v-576d506a] {\n  display: block !important;\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-576d506a] {\n  background: var(--visualization-primary);\n  color: white;\n  border-radius: 16px;\n  padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-576d506a] {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  position: absolute;\n  margin: 5px;\n  border-color: var(--visualization-primary);\n  z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-576d506a] {\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-576d506a] {\n  border-width: 5px 5px 0 5px;\n  border-left-color: transparent !important;\n  border-right-color: transparent !important;\n  border-bottom-color: transparent !important;\n  bottom: -5px;\n  left: calc(50% - 5px);\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-576d506a] {\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-576d506a] {\n  border-width: 0 5px 5px 5px;\n  border-left-color: transparent !important;\n  border-right-color: transparent !important;\n  border-top-color: transparent !important;\n  top: -5px;\n  left: calc(50% - 5px);\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-576d506a] {\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-576d506a] {\n  border-width: 5px 5px 5px 0;\n  border-left-color: transparent !important;\n  border-top-color: transparent !important;\n  border-bottom-color: transparent !important;\n  left: -5px;\n  top: calc(50% - 5px);\n  margin-left: 0;\n  margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-576d506a] {\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-576d506a] {\n  border-width: 5px 0 5px 5px;\n  border-top-color: transparent !important;\n  border-right-color: transparent !important;\n  border-bottom-color: transparent !important;\n  right: -5px;\n  top: calc(50% - 5px);\n  margin-left: 0;\n  margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-576d506a] {\n  background: #f9f9f9;\n  color: black;\n  padding: 24px;\n  border-radius: 5px;\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-576d506a] {\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-576d506a] {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-576d506a] {\n  visibility: visible;\n  opacity: 1;\n  transition: opacity 0.15s;\n}\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\Visualization.vue"],"names":[],"mappings":";AA0mCA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;EACA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Visualization.vue","sourcesContent":["<template>\n  <div\n    class=\"visualization-row\"\n    id=\"visualization-container\"\n    @click=\"framesClicked\"\n  >\n    <GlobalEvents\n      v-if=\"active && canInsertTime && settingsClosed\"\n      @keydown.45=\"insertTime\"\n      @keydown.46=\"insertTime\"\n    />\n    <GlobalEvents\n      v-if=\"active && settingsClosed\"\n      @keydown.left.prevent=\"arrowLeft\"\n      @keydown.right.prevent=\"arrowRight\"\n      @keydown.shift.page-down.prevent=\"nextLoopActivate\"\n      @keydown.page-down.prevent=\"next\"\n      @keydown.page-up.prevent=\"prev\"\n      @keydown.shift.page-up.prevent=\"prevLoopActivate\"\n      @keydown.83.prevent=\"setHourIni\"\n      @keydown.69.prevent=\"setHourEnd\"\n      @keydown.36.prevent=\"goToFirstFrame\"\n      @keydown.35.prevent=\"goToLastFrame\"\n      @keydown.71.prevent=\"dialogs.goTo = true\"\n      @keydown.73.prevent=\"dialogs.secondsPerFrame = true\"\n      @keydown.76.prevent=\"dialogs.frames = true\"\n      @keydown.49.97=\"() => (secondsPerFrame = 1)\"\n      @keydown.50.98=\"() => (secondsPerFrame = 2)\"\n      @keydown.51.99=\"() => (secondsPerFrame = 3)\"\n      @keydown.52.100=\"() => (secondsPerFrame = 4)\"\n      @keydown.53.101=\"() => (secondsPerFrame = 5)\"\n    />\n    <GlobalEvents\n      v-if=\"prevLoop || nextLoop\"\n      @keydown=\"breakLoop\"\n      v-on:click=\"breakLoop\"\n    />\n    <settings\n      v-if=\"active\"\n      :dialogs-visibility=\"dialogs\"\n      :playback-rate=\"playbackRate\"\n      :seconds-per-frame=\"secondsPerFrame\"\n      :frames-per-row=\"framesPerRow\"\n      :number-of-rows=\"numberOfRows\"\n      @change-playback-rate=\"(value) => (playbackRate = value)\"\n      @change-go-to=\"changeHour\"\n      @change-seconds-per-frame=\"(value) => (secondsPerFrame = value)\"\n      @set-frames-selection=\"setFrameSelection\"\n      @close=\"(dialog) => (dialogs[dialog] = false)\"\n    />\n    <div\n      :class=\"{ 'visualization-card': true, 'active-tab': active }\"\n      style=\"width: 100%; padding: 0\"\n    >\n      <command-bar\n        v-show=\"commandBarShow\"\n        :video-playing=\"videoPlaying\"\n        :video-paused=\"paused\"\n        :insert-time=\"canInsertTime\"\n        :hour-ini-selected=\"!!hourIniSelected\"\n        :hour-end-selected=\"!!hourEndSelected\"\n        @prev-loop-activate=\"prevLoopActivate\"\n        @next-loop-activate=\"nextLoopActivate\"\n        @prev=\"prev\"\n        @next=\"next\"\n        @go-to=\"dialogs.goTo = true\"\n        @open-frame-selection=\"dialogs.frames = true\"\n        @open-frames-per-second=\"dialogs.secondsPerFrame = true\"\n        @open-blocks=\"openBlocks\"\n        @open-playback-rate=\"dialogs.playbackRate = true\"\n        @play-or-pause=\"playOrPause\"\n        @stop-playing=\"stopPlayingBar\"\n        @set-hour-ini=\"setHourIni\"\n        @set-hour-end=\"setHourEnd\"\n        @insert-time=\"insertTime\"\n      />\n      <video-progress\n        v-if=\"videoProgressBar\"\n        v-show=\"videoPlaying\"\n        :video-time=\"videoTime\"\n      />\n      <info-bar\n        :playback-rate=\"playbackRate\"\n        :seconds-per-frame=\"secondsPerFrame\"\n        :commands-show=\"commandBarShow\"\n        :cache=\"useCache\"\n        :block-start-time=\"blockStartTime\"\n        :video-total-duration=\"videoSliderTotalDuration\"\n        :alternative-server=\"alternativeServer\"\n        :frames-per-row=\"framesPerRow\"\n        :number-of-rows=\"numberOfRows\"\n        :hour-ini=\"hourIniSelected\"\n        :hour-end=\"hourEndSelected\"\n        @toogle-commands-visibility=\"commandBarShow = !commandBarShow\"\n        @toogle-cache=\"useCache = !useCache\"\n        @change-server=\"changeServerClick\"\n      />\n      <div\n        class=\"visualization-row\"\n        v-for=\"rowNumber in numberOfRows\"\n        :id=\"'row-' + rowNumber\"\n        :key=\"'row-' + rowNumber\"\n        style=\"padding: 12px\"\n      >\n        <div\n          v-for=\"(frame, frameNumber) in previousFrames\"\n          :key=\"\n            numberOfRows +\n            '-' +\n            framesPerRow +\n            '-' +\n            getIndex(rowNumber, frameNumber, Positions.previous)\n          \"\n          style=\"display: none\"\n        >\n          <span v-html=\"frame.img\" />\n        </div>\n        <div\n          v-for=\"(frame, frameNumber) in nextFrames\"\n          :key=\"\n            numberOfRows +\n            '-' +\n            framesPerRow +\n            '-' +\n            getIndex(rowNumber, frameNumber, Positions.next)\n          \"\n          style=\"display: none\"\n        >\n          <span v-html=\"frame.img\" />\n        </div>\n        <div\n          class=\"visualization-col\"\n          v-for=\"(frame, frameNumber) in frames.slice(\n            framesPerRow * (rowNumber - 1),\n            framesPerRow * rowNumber\n          )\"\n          :key=\"'row-' + rowNumber + '-frame-' + frameNumber\"\n          :id=\"`frame-${getIndex(rowNumber, frameNumber, Positions.current)}`\"\n          :class=\"{ loaderImg: !!frame.img }\"\n          @click=\"\n            frame.time\n              ? selectFrame(\n                  getIndex(rowNumber, frameNumber, Positions.current),\n                  frame\n                )\n              : null\n          \"\n        >\n          <span :id=\"activeFrame ? 'aa' : 0\" style=\"padding-left: 4px\">\n            <b>\n              {{\n                getAudienceTime(\n                  frame.time,\n                  rowNumber,\n                  frameNumber,\n                  Positions.current\n                )\n              }}\n            </b>\n          </span>\n\n          <frame\n            ref=\"frames\"\n            :frame=\"frame\"\n            :index=\"getIndex(rowNumber, frameNumber, Positions.current)\"\n            :grid-settings=\"{ numberOfRows, framesPerRow }\"\n            :initialTime=\"frame.time === hourIniSelected\"\n            :endTime=\"frame.time === hourEndSelected\"\n            :betweenTime=\"\n              frame.time > hourIniSelected && frame.time < hourEndSelected\n            \"\n            :active=\"\n              getIndex(rowNumber, frameNumber, Positions.current) ===\n              activeFrame\n            \"\n            :activeTab=\"active\"\n            :videoUrl=\"fInterface ? fInterface.getVideoUrl(frame) : ''\"\n            @startPlaying=\"startPlaying\"\n            @stopPlaying=\"stopPlaying\"\n            @playPauseStatus=\"changePlayPause\"\n            @updateSlider=\"updateSlider\"\n            :playback-rate=\"playbackRate\"\n            style=\"margin: 0 auto\"\n          ></frame>\n        </div>\n      </div>\n    </div>\n    <!-- <settings\n      ref=\"settings2\"\n      :active=\"active\"\n      @goToTime=\"changeHour\"\n      @goToBlockInterval=\"changeBlockInterval\"\n      @setSplitTime=\"setSplitTime\"\n      @setFrameSelection=\"setFrameSelection\"\n      @setPlaybackRate=\"\n        (rate) => {\n          playbackRate = rate\n        }\n      \"\n    >\n    </settings> -->\n    <!-- <v-dialog v-model=\"dialog\" width=\"500\">\n      <div class=\"card\">\n        <div class=\"card\"-title class=\"text-h5 grey lighten-2\">\n          {{ '  Último bloco disponível até: ' }}\n          <v-btn\n            @click=\"goToStartBlock\"\n            class=\"ml-2\"\n            dark\n            color=\"success\"\n            depressed\n          >\n            <v-icon left> fa-clock </v-icon>\n            {{ timeLastBlock }}\n          </v-btn>\n          <v-spacer></v-spacer>\n          <v-btn color=\"error\" fab small class=\"ml-5\" @click=\"dialog = false\">\n            <v-icon dark> fa fa-xmark </v-icon>\n          </v-btn>\n        </div-title>\n      </div>\n    </v-dialog>\n    <Help :media=\"media\" @close=\"media = null\" />\n    <v-dialog\n      v-if=\"userMultiTabsGrid\"\n      v-model=\"userMultiTabsGridsModel\"\n      persistent\n      width=\"60%\"\n    >\n      <div class=\"card\">\n        <div class=\"card\"-title class=\"warning text-h5\" primary-title>\n          <div class=\"row\" class=\"ma-0\" justify=\"center\" align=\"center\">\n            <v-icon dark left style=\"font-size: 24px !important\">\n              fa fa-exclamation-triangle\n            </v-icon>\n            <div style=\"color: white\">{{ $t('form.alert') }}</div>\n          </div>\n        </div-title>\n        <div class=\"card\"-text class=\"justify-center pa-6 grey lighten-2\">\n          <h3>\n            {{ $t('alerts.userMultiTabsGrid') }}\n          </h3>\n        </div-text>\n        <hr class=\"divider\" class=\"grey lighten-1\"></span>\n        <div class=\"card\"-actions class=\"grey lighten-2 justify-center\">\n          <v-btn color=\"error\" ml-5 @click=\"userMultiTabsGrid = false\">\n            <v-icon left color=\"white\">fa fa-times</v-icon>\n            {{ $t('form.close') }}\n          </v-btn>\n        </div-actions>\n      </div>\n    </v-dialog> -->\n  </div>\n</template>\n<script>\nimport Frame from './components/Frame.vue'\nimport FramesInterface from './utils/FramesInterface.js'\nimport FramesService from './services/FramesService.js'\n\nimport Commands from './components/Commands.vue'\nimport Infos from './components/Infos.vue'\nimport VideoProgress from './components/VideoProgress.vue'\nimport Settings from './components/Settings.vue'\n\nconst Positions = Object.freeze({\n  previous: 0,\n  current: 1,\n  next: 2,\n})\n\nexport default {\n  name: 'visualization-container',\n  props: {\n    value: {\n      type: Boolean,\n      required: true,\n    },\n    date: {\n      type: String,\n      required: true,\n    },\n    channel: {\n      type: Number,\n      required: true,\n    },\n    startAudienceTime: {\n      type: String,\n      required: true,\n    },\n    videoProgressBar: {\n      type: Boolean,\n      default: false,\n    },\n    jumpOnInsert: {\n      type: Boolean,\n      default: false,\n    },\n    framesFormat: {\n      type: [Number, String],\n      default: 6,\n    },\n    maxSize: {\n      type: Number,\n    }\n  },\n  components: {\n    Frame,\n    CommandBar: Commands,\n    InfoBar: Infos,\n    VideoProgress,\n    Settings,\n    // Help,\n  },\n  data() {\n    return {\n      Positions,\n      updatingChannel: null,\n      dialog: false,\n      timeLastBlock: null,\n      alternativeServer: false,\n      useCache: true,\n      numberOfRows: 1,\n      framesPerRow: 5,\n      secondsPerFrame: 1,\n      fInterface: null,\n      velocity: 1,\n      frames: [],\n      previousFrames: [],\n      nextFrames: [],\n      channelCode: 0,\n      videoPlaying: false,\n      activeFrame: null,\n      activeVideo: null,\n      videoTime: 0,\n      videoTotalTime: null,\n      progressVideoDrag: false,\n      hourIniSelected: false,\n      hourEndSelected: false,\n      canInsertTime: false,\n      lastHeight: 0,\n      loopInterval: null,\n      nextLoop: false,\n      prevLoop: false,\n      videoSliderTotalDuration: 900,\n      blockStartTime: null,\n      media: null,\n      changeServer: false,\n      userMultiTabsGrid: false,\n      userMultiTabsGridsModel: true,\n      playbackRate: 1,\n      paused: false,\n      commandBarShow: true,\n      dialogs: {\n        playbackRate: false,\n        goTo: false,\n        secondsPerFrame: false,\n        frames: false,\n      },\n    }\n  },\n  async created() {\n    this.changeServer = this.serverOfFrames === 'alternative'\n    this.alternativeServer = this.serverOfFrames === 'alternative'\n\n    const settings = [\n      {\n        framesPerRow: 2,\n        numberOfRows: 1,\n      },\n      {\n        framesPerRow: 3,\n        numberOfRows: 1,\n      },\n      {\n        framesPerRow: 3,\n        numberOfRows: 2,\n      },\n      {\n        framesPerRow: 4,\n        numberOfRows: 1,\n      },\n      {\n        framesPerRow: 4,\n        numberOfRows: 2,\n      },\n      {\n        framesPerRow: 5,\n        numberOfRows: 1,\n      },\n      {\n        framesPerRow: 5,\n        numberOfRows: 2,\n      },\n      {\n        framesPerRow: 6,\n        numberOfRows: 1,\n      },\n      {\n        framesPerRow: 6,\n        numberOfRows: 2,\n      },\n    ]\n\n    const storedOnDb = settings[parseInt(this.framesFormat) - 1]\n    this.framesPerRow = storedOnDb.framesPerRow\n    this.numberOfRows = storedOnDb.numberOfRows\n\n    await this.createFramesInterface()\n    if (this.maxSize) {\n      this.resize(this.maxSize, true)\n    }\n  },\n  methods: {\n    framesClicked(e) {\n      if (e.target.id != 'insert') {\n        this.active = true\n      }\n    },\n    async goToStartBlock() {\n      try {\n        const d = new Date()\n        let timestamp = Date.UTC(\n          d.getFullYear(),\n          d.getMonth(),\n          d.getDate(),\n          d.getHours(),\n          d.getMinutes(),\n          d.getSeconds()\n        )\n\n        const response = (\n          await FramesService.getNextAvailableBlock({\n            channel: this.channel,\n            time: timestamp / 1000,\n          })\n        ).data\n\n        this.dialog = false\n        this.changeHour(this.convertToAudienceTime(response.data.start, ':'))\n      } catch (err) {\n        console.error(err)\n      }\n    },\n    async checkAvailableBlock() {\n      try {\n        const d = new Date()\n        let timestamp = Date.UTC(\n          d.getFullYear(),\n          d.getMonth(),\n          d.getDate(),\n          d.getHours(),\n          d.getMinutes(),\n          d.getSeconds()\n        )\n\n        const response = (\n          await FramesService.getNextAvailableBlock({\n            channel: this.channel,\n            time: timestamp / 1000,\n          })\n        ).data\n\n        this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':')\n        this.dialog = true\n        if (!response.status) {\n          this.timeLastBlock = 'N/D'\n        }\n      } catch (err) {\n        console.error(err)\n      }\n    },\n    updateSlider(videoStartTime, time) {\n      // * atualizar slider se estiver fora do range definido previamente\n      if (\n        time < this.blockStartTime ||\n        time > this.blockStartTime ||\n        videoStartTime > this.blockStartTime + this.videoSliderTotalDuration\n      ) {\n        this.blockStartTime = videoStartTime\n        this.videoSliderTotalDuration = 900\n      }\n    },\n    nextLoopActivate() {\n      this.breakLoop()\n      this.loopInterval = setInterval(this.next, 40)\n      setTimeout(() => {\n        this.nextLoop = true\n      }, 0)\n    },\n    prevLoopActivate() {\n      this.breakLoop()\n      this.loopInterval = setInterval(this.prev, 40)\n      setTimeout(() => {\n        this.prevLoop = true\n      }, 0)\n    },\n    breakLoop() {\n      clearInterval(this.loopInterval)\n      this.loopInterval = null\n      this.nextLoop = false\n      this.prevLoop = false\n    },\n    changePlayPause(status) {\n      this.paused = !status\n    },\n    resize(height=this.lastHeight) {\n      this.lastHeight = height\n      if (this.$refs.frames) {\n        for (let frame of this.$refs.frames) {\n          frame.resize(height)\n        }\n      }\n      this.$emit('resized')\n    },\n    async goToFirstFrame() {\n      let frames = this.$refs.frames\n\n      let audienceTime = null\n      if (frames.length > 0) {\n        let frame = frames[0].frame\n        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n      }\n      // if (audienceTime) {\n      //   this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\n      // }\n      if (audienceTime) {\n        const [hours, minutes, seconds] = audienceTime.split(':')\n        const totalSeconds =\n          parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)\n        if (totalSeconds >= 9000)\n          this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\n        else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true))\n      }\n    },\n    async goToLastFrame() {\n      let frames = this.$refs.frames\n      let audienceTime = null\n      if (frames.length > 0) {\n        let frame = frames[0].frame\n\n        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n      }\n      if (audienceTime) {\n        this.changeHour(this.getLastFirtsBlockTime(audienceTime))\n      }\n    },\n    getLastFirtsBlockTime(time, first = false) {\n      if (time.indexOf(':') !== -1) {\n        time = time.replace(/:/g, '')\n      }\n      let h, m, newTime\n      const t = time.match(/.{1,2}/g)\n      if (t[0] && t[1]) {\n        h = parseInt(t[0])\n        m = parseInt(t[1])\n      }\n      if (h < 26) {\n        if (m < 15)\n          if (first) newTime = t[0] + ':00:00'\n          else newTime = t[0] + ':14:59'\n        else if (m < 30)\n          if (first) newTime = t[0] + ':15:00'\n          else newTime = t[0] + ':29:59'\n        else if (m < 45)\n          if (first) newTime = t[0] + ':30:00'\n          else newTime = t[0] + ':44:59'\n        else if (first) newTime = t[0] + ':45:00'\n        else newTime = t[0] + ':59:59'\n      } else {\n        if (m < 15)\n          if (first) newTime = '26:00:00'\n          else newTime = '26:14:59'\n        else {\n          if (first) newTime = '26:15:00'\n          else newTime = '26:29:59'\n        }\n      }\n      return newTime\n    },\n    openBlocks() {\n      this.$refs.settings2?.openBlocks()\n    },\n    playOrPause() {\n      const array = this.$refs.frames.filter((fc) => !!fc.active)\n      if (array.length === 1) {\n        const frame = array[0]\n        frame.playOrPause(this.playbackRate)\n      }\n    },\n    stopPlayingBar() {\n      for (let ref of this.$refs.frames) {\n        if (\n          ref.videoStatus === ref.Status.playing ||\n          ref.videoStatus === ref.Status.paused\n        ) {\n          ref.stop(false)\n        }\n      }\n    },\n    async setFrameSelection(selected) {\n      this.frames = this.loadingArray\n      switch (parseInt(selected)) {\n        // 2x1\n        case 1:\n          this.framesPerRow = 2\n          this.numberOfRows = 1\n          break\n        // 3x1\n        case 2:\n          this.framesPerRow = 3\n          this.numberOfRows = 1\n          break\n        // 3x2\n        case 3:\n          this.framesPerRow = 3\n          this.numberOfRows = 2\n          break\n        // 4x1\n        case 4:\n          this.framesPerRow = 4\n          this.numberOfRows = 1\n          break\n        // 4x2\n        case 5:\n          this.framesPerRow = 4\n          this.numberOfRows = 2\n          break\n        // 5x1\n        case 6:\n          this.framesPerRow = 5\n          this.numberOfRows = 1\n          break\n        // 5x2\n        case 7:\n          this.framesPerRow = 5\n          this.numberOfRows = 2\n          break\n        // 6x1\n        case 8:\n          this.framesPerRow = 6\n          this.numberOfRows = 1\n          break\n        // 6x2\n        case 9:\n          this.framesPerRow = 6\n          this.numberOfRows = 2\n          break\n      }\n      await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\n      this.getFramesArray()\n      setTimeout(() => {\n        for (let ref of this.$refs.frames) {\n          ref?.resize(this.lastHeight)\n        }\n      }, 150)\n    },\n    getFramesArray() {\n      this.frames = this.fInterface.getFrames(Positions.current)\n      this.nextFrames = this.fInterface.getFrames(Positions.next)\n      this.previousFrames = this.fInterface.getFrames(Positions.previous)\n    },\n    async createFramesInterface() {\n      this.frames = this.loadingArray\n      let ch = this.channel\n      let associationTMP = {\n        1735073: 1,\n        1735074: 139,\n        1735075: 3,\n        1735076: 132,\n      }\n      //\n      this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch\n\n      const t = this.startAudienceTime.match(/.{1,2}/g)\n      const d = this.getDateParts()\n      const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n      // * iniciar slider\n      this.blockStartTime = time\n      this.fInterface = await new FramesInterface(\n        this.channelCode,\n        this.numberOfRows,\n        this.framesPerRow,\n        time,\n        this.startAudienceTime,\n        this.useCache\n      )\n      await this.fInterface.init()\n\n      this.getFramesArray()\n\n      this.activeFrame = this.getIndex(1, 0, Positions.current)\n\n      this.activeVideo = null\n    },\n    getIndex(rowNumber, frameIndex, position) {\n      let from = this.framesPerRow * this.numberOfRows * position\n      let till = this.framesPerRow * this.numberOfRows * (position + 1)\n\n      return (from + till * (rowNumber - 1)) / rowNumber + frameIndex\n    },\n    getAudienceTime(frameTime, rowNumber, frameNumber, position) {\n      if (!frameTime) {\n        return 'Loading...'\n      } else if (\n        this.getIndex(rowNumber, frameNumber, position) === this.activeVideo\n      ) {\n        return this.convertToAudienceTime(this.videoTime)\n      } else {\n        return this.convertToAudienceTime(frameTime)\n      }\n    },\n    dateInUtc(miliSeconds) {\n      var date = new Date(miliSeconds)\n      var utc = new Date(\n        date.getUTCFullYear(),\n        date.getUTCMonth(),\n        date.getUTCDate(),\n        date.getUTCHours(),\n        date.getUTCMinutes(),\n        date.getUTCSeconds()\n      )\n      return utc\n    },\n    convertToAudienceTime(time, separator = ':') {\n      const d = this.getDateParts()\n      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\n\n      let hour = this.dateInUtc(time * 1000)\n        .toTimeString()\n        .split(' ')[0]\n        .split(':')\n        .map(Number)\n\n      if (time > limit && time <= limit + this.startAudienceSeconds) {\n        hour[0] = 24 + hour[0]\n      }\n      return hour\n        .map((part) => (part > 9 ? part.toString() : '0' + part))\n        .join(separator)\n    },\n    getDateParts(date = this.date) {\n      const d = new Date(date)\n      return {\n        year: d.getFullYear(),\n        month: d.getMonth(),\n        day: d.getDate(),\n      }\n    },\n    selectFrame(index, frame) {\n      const d = this.getDateParts()\n      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\n      const frameTime = frame?.time\n\n      if (frameTime - (this.startAudienceSeconds + limit) <= 0) {\n        if (this.hourIniSelected === true) {\n          this.hourIniSelected = frameTime\n\n          if (\n            this.hourEndSelected &&\n            this.hourIniSelected > this.hourEndSelected\n          ) {\n            this.hourEndSelected = false\n          }\n        } else if (this.hourEndSelected === true) {\n          if (frameTime > this.hourIniSelected) {\n            this.hourEndSelected = frameTime\n            this.canInsertTime = true\n          } else {\n            this.hourEndSelected = false\n          }\n        }\n      }\n\n      if (this.activeFrame !== index) {\n        // ? Se clicar no frame diferente de onde está a dar play, faz pausa\n        const array = this.$refs.frames.filter(\n          (fc) => fc.videoStatus === fc.Status.playing\n        )\n        if (array.length === 1) {\n          const frame = array[0]\n          frame.playOrPause()\n        }\n        this.activeVideo = null\n        this.activeFrame = index\n      }\n    },\n    setHourIni() {\n      this.canInsertTime = true\n      this.hourIniSelected = true\n      document.getElementById(`frame-${this.activeFrame}`).click()\n      this.$emit('setHourIni', {\n        hour_ini: this.hourIniSelected\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\n          : null,\n      })\n    },\n    setHourEnd() {\n      this.canInsertTime = true\n      this.hourEndSelected = true\n      document.getElementById(`frame-${this.activeFrame}`).click()\n    },\n    //* Navegação\n    arrowRight() {\n      if (this.checkLimitRight(false)) {\n        if (\n          this.activeFrame ===\n          this.numberOfRows * this.framesPerRow * 2 - 1\n        ) {\n          this.next()\n        } else {\n          this.activeFrame++\n        }\n      }\n    },\n    arrowLeft() {\n      if (this.checkLimitLeft(false)) {\n        if (this.activeFrame === this.numberOfRows * this.framesPerRow) {\n          this.prev()\n        } else {\n          this.activeFrame--\n        }\n      }\n    },\n    checkLimitRight(value) {\n      const d = this.getDateParts()\n      const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59)\n\n      if (value) {\n        return (\n          high > (this.fInterface.getCurrentTime() - 1) * 1000 &&\n          this.nextFrames[0].title !== -1\n        )\n      } else {\n        // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000\n        return high > this.fInterface.getCurrentTime() * 1000\n      }\n    },\n    checkLimitLeft(value) {\n      const d = this.getDateParts()\n      const low = Date.UTC(d.year, d.month, d.day, 2, 30, 0)\n\n      if (value) {\n        return low <= (this.fInterface.getCurrentTime() - 1) * 1000\n      } else {\n        return (\n          low <\n          (this.fInterface.getCurrentTime() +\n            this.activeFrame -\n            this.numberOfRows * this.framesPerRow) *\n            1000\n        )\n      }\n    },\n    async next() {\n      if (this.checkLimitRight(true)) {\n        const array = this.$refs.frames.filter(\n          (fc) =>\n            fc.videoStatus === fc.Status.playing ||\n            fc.videoStatus === fc.Status.paused\n        )\n\n        if (array.length === 1) {\n          const frame = array[0]\n          frame.stop(false)\n        }\n        this.fInterface.setCurrentStep(this.secondsPerFrame)\n        await this.fInterface.loadNextFrames()\n\n        this.activeFrame = this.getIndex(1, 0, Positions.current)\n        this.activeVideo = null\n\n        this.getFramesArray()\n      }\n    },\n    async prev() {\n      if (this.checkLimitLeft(true)) {\n        const array = this.$refs.frames.filter(\n          (fc) =>\n            fc.videoStatus === fc.Status.playing ||\n            fc.videoStatus === fc.Status.paused\n        )\n        if (array.length === 1) {\n          const frame = array[0]\n          frame.stop(false)\n        }\n\n        this.fInterface.setCurrentStep(this.secondsPerFrame)\n        await this.fInterface.loadPrevFrames()\n\n        this.activeFrame = this.getIndex(\n          this.numberOfRows,\n          this.framesPerRow - 1,\n          Positions.current\n        )\n        this.activeVideo = null\n\n        this.getFramesArray()\n      }\n    },\n    async setStartTime(time) {\n      if (time.indexOf(':') !== -1) {\n        time = time.replace(/:/g, '')\n      }\n      const t = time.match(/.{1,2}/g)\n      const d = this.getDateParts()\n      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n      this.frames = this.loadingArray\n\n      await this.fInterface.changeTime(setTime)\n\n      this.getFramesArray()\n\n      this.activeFrame = this.getIndex(1, 0, Positions.current)\n      // let frames = this.$refs.frames\n\n      // let audienceTime = null\n      // if (frames.length > 0) {\n      // let frame = frames[0].frame\n      // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n      // }\n\n      this.activeVideo = null\n\n      return true\n    },\n    hourToTimeStamp(time) {\n      if (time.indexOf(':') !== -1) {\n        time = time.replace(/:/g, '')\n      }\n      const t = time.match(/.{1,2}/g)\n      const d = this.getDateParts()\n      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n\n      return setTime\n    },\n    async changeHour(value) {\n      if (value) {\n        setTimeout(() => {\n          const array = this.$refs.frames.filter(\n            (fc) =>\n              fc.videoStatus === fc.Status.playing ||\n              fc.videoStatus === fc.Status.paused\n          )\n\n          if (array.length === 1) {\n            const frame = array[0]\n            frame.stop(false)\n          }\n\n          this.setStartTime(value, true)\n        }, 0)\n      }\n    },\n    changeBlockInterval(value) {\n      this.changeHour(value.ini)\n      let time_ini, time_end\n      time_ini = this.hourToTimeStamp(value.ini)\n      time_end = this.hourToTimeStamp(value.end)\n      this.videoSliderTotalDuration = time_end - time_ini\n      this.$refs.frames[0].changeSettings(time_ini)\n      this.blockStartTime = time_ini\n    },\n    //eslint-disable-next-line\n    async updateVideoTime(index, videoTime) {\n      this.activeVideo = index\n      this.videoTime = videoTime\n    },\n    //eslint-disable-next-line\n    updateVideoStatus(currentTime) {\n      if (!this.progressVideoDrag) {\n        // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS\n        // this.updateProgress(null, currentTime)\n      }\n    },\n    async startPlaying(frame, totalTime) {\n      const array = this.$refs.frames.filter(\n        (fc) => fc.frame.time !== frame.time\n      )\n\n      for (let ref of array) {\n        if (\n          ref.videoStatus === ref.Status.playing ||\n          ref.videoStatus === ref.Status.paused\n        ) {\n          ref.stop(false)\n        }\n      }\n\n      this.videoTotalTime = totalTime\n      this.videoPlaying = true\n    },\n    stopPlaying() {\n      this.videoTotalTime = null\n      this.videoPlaying = false\n      this.paused = false\n    },\n    insertTime() {\n      this.$emit('timeToInsert', {\n        channel: this.channel,\n        hour_ini: this.hourIniSelected\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\n          : null,\n        hour_end: this.hourEndSelected\n          ? this.convertToAudienceTime(this.hourEndSelected, '')\n          : null,\n        force: false,\n      })\n\n      if (this.jumpOnInsert) {\n        this.changeHour(\n          this.convertToAudienceTime(\n            (this.hourEndSelected || this.hourIniSelected) + 1\n          )\n        )\n      }\n\n      this.hourIniSelected = null\n      this.hourEndSelected = null\n      this.canInsertTime = false\n\n      // this.fInterface.setCurrentPosition(this.hourEndSelected)\n    },\n    insertTimeForce() {\n      this.$emit('timeToInsert', {\n        channel: this.channel,\n        hour_ini: this.hourIniSelected\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\n          : null,\n        hour_end: this.hourEndSelected\n          ? this.convertToAudienceTime(this.hourEndSelected, '')\n          : null,\n        force: true,\n      })\n\n      this.hourIniSelected = null\n      this.hourEndSelected = null\n      this.canInsertTime = false\n\n      // this.fInterface.setCurrentPosition(this.hourEndSelected)\n    },\n    async getChannelMedia() {\n      // this.media = (await ChannelService.show(this.channel)).data.MEDIA\n    },\n    async changeServerClick() {\n      this.changeServer = !this.changeServer\n      // this.$store.dispatch(\n      //   'serverOfFrames',\n      //   this.changeServer ? 'alternative' : 'default'\n      // )\n      sessionStorage.setItem(\n        'serverOfFrames',\n        this.changeServer ? 'alternative' : 'default'\n      )\n\n      // if (this.$route.params.time != this.frames[0].time)\n      //   this.$router.push({\n      //     name: 'grid',\n      //     params: {\n      //       date: this.date,\n      //       channel: this.channelCode,\n      //       time: this.frames[0].time,\n      //     },\n      //   })\n      location.reload()\n    },\n  },\n  computed: {\n    active: {\n      get() {\n        return this.value\n      },\n      set(value) {\n        this.$emit('input', value)\n      },\n    },\n    settingsClosed() {\n      return !Object.values(this.dialogs).find((v) => v)\n    },\n    startAudienceSeconds() {\n      const t = this.startAudienceTime.match(/.{1,2}/g)\n      return parseInt(t[0] * 3600 + t[1] * 60 + t[2])\n    },\n    loadingArray() {\n      return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())\n    },\n    serverOfFrames() {\n      return sessionStorage.getItem('server')\n    },\n  },\n  watch: {\n    framesFormat(value) {\n      this.setFrameSelection(value)\n    },\n    active() {\n      // ? sempre que trocamos de tabs dar reset as horas selected\n      this.hourIniSelected = false\n      this.hourEndSelected = false\n    },\n    useCache() {\n      this.createFramesInterface()\n    },\n    hourIniSelected(value) {\n      if (value) {\n        sessionStorage.setItem(\n          'currentTimeFrames',\n          this.convertToAudienceTime(this.hourIniSelected, '')\n        )\n      } else {\n        sessionStorage.removeItem('currentTimeFrames')\n      }\n    },\n    activeFrame(value) {\n      if (value) {\n        this.stopPlayingBar()\n      }\n    },\n    channel() {\n      this.updatingChannel = new Promise((resolve, reject) => {\n        try {\n          this.createFramesInterface()\n          resolve(true)\n        } catch (err) {\n          reject(err)\n        }\n      })\n    },\n  },\n}\n</script>\n<style scoped>\n.visualization-row {\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1 1 auto;\n}\n\n.visualization-col {\n  flex-basis: 0;\n  flex-grow: 1;\n  max-width: 100%;\n  padding: 12px;\n}\n\n.visualization-divider {\n  display: block;\n  flex: 1 1 100%;\n  height: 0px;\n  max-height: 0px;\n  opacity: 1;\n  transition: inherit;\n  border-style: solid;\n  border-width: thin 0 0 0;\n  border-color: rgba(0, 0, 0, 0.12);\n  margin: 0;\n}\n\n.visualization-divider.vertical {\n  align-self: stretch;\n  border-width: 0 thin 0 0;\n  display: inline-flex;\n  height: inherit;\n  margin-left: -1px;\n  max-height: 100%;\n  max-width: 0px;\n  vertical-align: text-bottom;\n  width: 0px;\n}\n\n.visualization-card {\n  flex-basis: 0;\n  flex-grow: 1;\n  max-width: 100%;\n  padding: 12px;\n  width: 100%;\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\n  overflow-wrap: break-word;\n  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n\n.visualization-justify-center {\n  justify-content: center;\n}\n\n.visualization-align-center {\n  align-items: center;\n}\n\n#visualization-container {\n  max-width: 100% !important;\n  margin: 0 auto !important;\n  height: 100%;\n  border-bottom: none;\n}\n#visualization-container > .card {\n  border-radius: 0 !important;\n  font-size: 12px;\n  width: 100%;\n  box-shadow: none;\n  height: 100%;\n}\n\n#command-bar,\n#info-bar {\n  background-color: #f5f5f5;\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button {\n  width: 42px;\n  height: 36px;\n  border: none;\n  background: none;\n}\n\n#command-bar button:hover {\n  cursor: pointer;\n  background: rgba(0, 0, 0, 0.12);\n}\n\n#command-bar svg {\n  font-size: 16px;\n}\n\n#command-bar {\n  padding: 0 !important;\n}\n\n#info-bar {\n  padding: 4px;\n  font-size: 14px;\n  position: relative;\n}\n\n.settings-container {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.settings-container > * {\n  margin: 0 2px;\n  cursor: pointer;\n}\n\n#info-bar svg {\n  font-size: 16px;\n}\n\n#info-bar .divider {\n  margin: 0 8px;\n}\n\nsvg:focus {\n  border: none;\n}\n\n.visualization-card {\n  border-left: 8px solid #eee;\n}\n\n.active-tab {\n  border-left: 8px solid var(--visualization-primary) !important;\n  border-image-slice: 1;\n}\n\n[id^='frame-'] {\n  padding: 1px;\n  display: flex;\n  flex-flow: column;\n}\n\n.tooltip {\n  display: block !important;\n  z-index: 10000;\n}\n\n.tooltip .tooltip-inner {\n  background: var(--visualization-primary);\n  color: white;\n  border-radius: 16px;\n  padding: 5px 10px 4px;\n}\n\n.tooltip .tooltip-arrow {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  position: absolute;\n  margin: 5px;\n  border-color: var(--visualization-primary);\n  z-index: 1;\n}\n\n.tooltip[x-placement^='top'] {\n  margin-bottom: 5px;\n}\n\n.tooltip[x-placement^='top'] .tooltip-arrow {\n  border-width: 5px 5px 0 5px;\n  border-left-color: transparent !important;\n  border-right-color: transparent !important;\n  border-bottom-color: transparent !important;\n  bottom: -5px;\n  left: calc(50% - 5px);\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.tooltip[x-placement^='bottom'] {\n  margin-top: 5px;\n}\n\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\n  border-width: 0 5px 5px 5px;\n  border-left-color: transparent !important;\n  border-right-color: transparent !important;\n  border-top-color: transparent !important;\n  top: -5px;\n  left: calc(50% - 5px);\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.tooltip[x-placement^='right'] {\n  margin-left: 5px;\n}\n\n.tooltip[x-placement^='right'] .tooltip-arrow {\n  border-width: 5px 5px 5px 0;\n  border-left-color: transparent !important;\n  border-top-color: transparent !important;\n  border-bottom-color: transparent !important;\n  left: -5px;\n  top: calc(50% - 5px);\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.tooltip[x-placement^='left'] {\n  margin-right: 5px;\n}\n\n.tooltip[x-placement^='left'] .tooltip-arrow {\n  border-width: 5px 0 5px 5px;\n  border-top-color: transparent !important;\n  border-right-color: transparent !important;\n  border-bottom-color: transparent !important;\n  right: -5px;\n  top: calc(50% - 5px);\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.tooltip.popover .popover-inner {\n  background: #f9f9f9;\n  color: black;\n  padding: 24px;\n  border-radius: 5px;\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n\n.tooltip.popover .popover-arrow {\n  border-color: #f9f9f9;\n}\n\n.tooltip[aria-hidden='true'] {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.15s, visibility 0.15s;\n}\n\n.tooltip[aria-hidden='false'] {\n  visibility: visible;\n  opacity: 1;\n  transition: opacity 0.15s;\n}\n</style>\n"]}, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__ = "data-v-576d506a";
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
+var Visualization = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  'default': Visualization
+  'default': __vue_component__
 });
 
 export { index as default };