@twab/visualization 1.2.2 → 1.2.3

package/dist/visualization.js

@@ -1045,7 +1045,9 @@ FramesManager.prototype.getSmallBlock = async function (
       delete this.requests[requestId];
       return true
     }
-    console.error(`Frames Manager (GetSmallBlock): Request blocked by another equal request occurring`);
+    console.error(
+      `Frames Manager (GetSmallBlock): Request blocked by another equal request occurring`
+    );
     return false
   } catch (err) {
     console.error(`Frames Manager (GetSmallBlock): ${err}`);
@@ -1079,6 +1081,8 @@ FramesManager.prototype.getBlock = async function (
         })
       ).data;
 
+      console.log(response, direction, time);
+
       if (!this.requests[requestId]) {
         throw 'Response not needed anymore'
       }
@@ -1097,7 +1101,9 @@ FramesManager.prototype.getBlock = async function (
       delete this.requests[requestId];
       return true
     }
-    console.error(`Frames Manager (GetBlock ${direction}): Request blocked by another equal request occurring`);
+    console.error(
+      `Frames Manager (GetBlock ${direction}): Request blocked by another equal request occurring`
+    );
     return false
   } catch (err) {
     console.error(`Frames Manager (GetBlock ${direction}): ${err}`);
@@ -1133,13 +1139,17 @@ FramesManager.prototype.checkMinBlockSize = async function (checkMinBlock) {
 
 FramesManager.prototype.checkFramesForward = function () {
   return (
+    this.currentPosition !== -1 &&
     this.buffer.length - this.currentPosition <
-    ENUM.MinBlockSizes[this.currentStep] * (this.size / 6)
+      ENUM.MinBlockSizes[this.currentStep] * (this.size / 6)
   )
 };
 
 FramesManager.prototype.checkFramesBackward = function () {
-  return this.currentPosition < ENUM.MinBlockSizesBack[this.currentStep]
+  return (
+    this.currentPosition !== -1 &&
+    this.currentPosition < ENUM.MinBlockSizesBack[this.currentStep]
+  )
 };
 
 FramesManager.prototype.orderFramesBlock = function (images) {
@@ -1221,7 +1231,7 @@ FramesManager.prototype.next = function () {
     newPosition < this.buffer.length ? newPosition : this.currentPosition;
   this.currentTime = this.buffer[this.currentPosition]?.time || this.currentTime;
 
-   this.checkMinBlockSize(true);
+  this.checkMinBlockSize(true);
 };
 
 FramesManager.prototype.previous = function () {
@@ -1229,7 +1239,7 @@ FramesManager.prototype.previous = function () {
   this.currentPosition = newPosition > 0 ? newPosition : 0;
   this.currentTime = this.buffer[this.currentPosition]?.time || this.currentTime;
 
-   this.checkMinBlockSize(true);
+  this.checkMinBlockSize(true);
 };
 
 FramesManager.prototype.getFileInfo = async function (time, step) {
@@ -1332,6 +1342,8 @@ FramesInterface.prototype.loadFrames = async function () {
   let next = (await this.framesManager.getNextImages()) || [];
   let current = (await this.framesManager.getCurrentImages()) || [];
 
+  console.log(prev, current, next, 'images');
+
   prev = await this.constructImagesComponent(prev);
   current = await this.constructImagesComponent(current);
   next = await this.constructImagesComponent(next);
@@ -1763,12 +1775,12 @@ __vue_render__$4._withStripped = true;
   /* style */
   const __vue_inject_styles__$4 = function (inject) {
     if (!inject) return
-    inject("data-v-6167337a_0", { source: "\n.visualization-row[data-v-6167337a] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-6167337a] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\n}\n.visualization-divider[data-v-6167337a] {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\n}\n.visualization-divider.vertical[data-v-6167337a] {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\n}\n.visualization-card[data-v-6167337a] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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);*/\n}\n.visualization-justify-center[data-v-6167337a],[data-v-6167337a] .visualization-justify-center {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-6167337a] {\r\n  align-items: center;\n}\n#visualization-container[data-v-6167337a] {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\n}\n#visualization-container > .card[data-v-6167337a] {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\n}\n#command-bar[data-v-6167337a],\r\n#info-bar[data-v-6167337a] {\r\n  background-color: #f5f5f5;\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);\n}\n#command-bar button[data-v-6167337a] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-6167337a]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-6167337a] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-6167337a] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-6167337a] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-6167337a] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-6167337a] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-6167337a] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-6167337a] {\r\n  margin: 0 8px;\n}\nsvg[data-v-6167337a]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-6167337a] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-6167337a] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-6167337a] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Commands.vue"],"names":[],"mappings":";AAmMA;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;EAEA,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","file":"Commands.vue","sourcesContent":["<template>\r\n  <div\r\n    class=\"visualization-col pa-0\"\r\n    id=\"command-bar\"\r\n    style=\"border-top-right-radius: 6px\"\r\n  >\r\n    <div\r\n      class=\"visualization-row visualization-justify-center\"\r\n      v-if=\"commandBarShow\"\r\n    >\r\n      <div v-for=\"(btn, index) in commandBarBtns\" :key=\"'command-btn-' + index\">\r\n        <hr\r\n          class=\"visualization-divider vertical\"\r\n          v-if=\"!btn\"\r\n          style=\"margin: 0 4px\"\r\n        />\r\n        <button\r\n          v-if=\"btn && (btn.condition ? btn.condition() : true)\"\r\n          v-tooltip.bottom=\"\r\n            btn.text && typeof btn.text === 'function' ? btn.text() : btn.text\r\n          \"\r\n          :style=\"{\r\n            color:\r\n              btn.color && typeof btn.color === 'function'\r\n                ? btn.color()\r\n                : 'black',\r\n          }\"\r\n          class=\"command-bar-btn\"\r\n          @click=\"btn.fnc\"\r\n        >\r\n          <font-awesome-icon\r\n            :id=\"btn.id\"\r\n            :icon=\"\r\n              'fa-solid ' +\r\n              (btn.icon && typeof btn.icon === 'function'\r\n                ? btn.icon()\r\n                : btn.icon)\r\n            \"\r\n          />\r\n        </button>\r\n      </div>\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    videoPlaying: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    videoPaused: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    insertTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    hourIniSelected: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    hourEndSelected: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      commandBarShow: true,\r\n      commandBarBtns: [\r\n        {\r\n          fnc: () => this.$emit('prev-loop-activate'),\r\n          icon: 'fa-backward',\r\n          text: 'Fast Backward',\r\n          id: 'Fast Backward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('prev'),\r\n          icon: 'fa-step-backward',\r\n          text: 'Step Backward',\r\n          id: 'Step Backward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('go-to'),\r\n          icon: 'fa-clock',\r\n          text: this.$i18n.t('infoBar.setHour'),\r\n          id: 'Definir Hora',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('next'),\r\n          icon: 'fa-step-forward',\r\n          text: 'Step Forward',\r\n          id: 'Step Forward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('next-loop-activate'),\r\n          icon: 'fa-forward',\r\n          text: 'Fast Forward',\r\n          id: 'Fast Forward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('play-or-pause'),\r\n          icon: () => {\r\n            return this.videoPlaying && !this.videoPaused\r\n              ? 'fa-pause'\r\n              : 'fa-play'\r\n          },\r\n          text: () => {\r\n            return this.videoPlaying && !this.videoPaused ? 'Pause' : 'Play'\r\n          },\r\n          id: 'playOrPause',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('stop-playing'),\r\n          icon: 'fa-stop',\r\n          text: 'Stop',\r\n          id: 'Stop',\r\n        },\r\n        null,\r\n        {\r\n          fnc: () => this.$emit('open-frame-selection'),\r\n          icon: 'fa-border-all',\r\n          text: this.$i18n.t('infoBar.gridForm'),\r\n          id: 'Formato da grelha',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('open-frames-per-second'),\r\n          icon: 'fa-sliders-h',\r\n          text: this.$i18n.t('infoBar.secondImage'),\r\n          id: 'Segundos por Imagem',\r\n        },\r\n        // {\r\n        //   fnc: () => this.$emit('open-blocks'),\r\n        //   icon: 'fa-cut',\r\n        //   text: 'Escolher intervalo de blocos',\r\n        //   id: 'Escolher intervalo de blocos',\r\n        // },\r\n        {\r\n          fnc: () => this.$emit('open-playback-rate'),\r\n          icon: 'fa-tachometer-alt',\r\n          text: this.$i18n.t('infoBar.chooseVelocity'),\r\n          id: 'Escolher velocidade de reprodução',\r\n        },\r\n        // {\r\n        //   fnc: () => this.$emit('insert-time-force'),\r\n        //   icon: 'fa-arrow-turn-down',\r\n        //   text: 'Recuperar Notícia',\r\n        //   id: 'Recuperar Notícia',\r\n        //   condition: () => {\r\n        //     return this.insertTime\r\n        //   },\r\n        // },\r\n        null,\r\n        {\r\n          fnc: () => this.$emit('set-hour-ini'),\r\n          icon: 'fa-hourglass-start',\r\n          text: this.$i18n.t('form.inicialHour'),\r\n          id: 'Hora Inicial',\r\n          color: () => {\r\n            return this.hourIniSelected ? 'var(--visualization-start)' : 'black'\r\n          },\r\n        },\r\n        {\r\n          fnc: () => this.$emit('insert-time'),\r\n          icon: 'fa-arrow-circle-down',\r\n          text: this.$i18n.t('infoBar.insert'),\r\n          id: 'insert',\r\n          condition: () => {\r\n            return this.insertTime\r\n          },\r\n        },\r\n        {\r\n          fnc: () => this.$emit('set-hour-end'),\r\n          icon: 'fa-hourglass-end',\r\n          text: this.$i18n.t('form.endHour'),\r\n          id: 'Hora Final',\r\n          color: () => {\r\n            return this.hourEndSelected ? 'var(--visualization-end)' : 'black'\r\n          },\r\n        },\r\n        // {\r\n        //   fnc: () => this.$emit('check-available-block'),\r\n        //   icon: 'fa-video',\r\n        //   text: 'Próximo bloco disponível',\r\n        //   id: 'Próximo bloco disponível',\r\n        // },\r\n      ],\r\n    }\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n  align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n  background-color: #f5f5f5;\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}\r\n#command-bar button {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n  padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\r\n}\r\n\r\n.settings-container {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n  margin: 0 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n  margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n  border: none;\r\n}\r\n\r\n.visualization-card {\r\n  border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n</style>\r\n<style>\r\n  .tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\r\n}\r\n</style>"]}, media: undefined })
-,inject("data-v-6167337a_1", { source: "\n.tooltip {\n  display: block !important;\n  z-index: 10000;\n}\n.tooltip .tooltip-inner {\n  background: var(--visualization-primary);\n  color: white;\n  border-radius: 16px;\n  padding: 5px 10px 4px;\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.tooltip[x-placement^='top'] {\n  margin-bottom: 5px;\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.tooltip[x-placement^='bottom'] {\n  margin-top: 5px;\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.tooltip[x-placement^='right'] {\n  margin-left: 5px;\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.tooltip[x-placement^='left'] {\n  margin-right: 5px;\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.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.tooltip.popover .popover-arrow {\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'] {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'] {\n  visibility: visible;\n  opacity: 1;\n  transition: opacity 0.15s;\n}\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Commands.vue"],"names":[],"mappings":";AAoVA;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":"Commands.vue","sourcesContent":["<template>\r\n  <div\r\n    class=\"visualization-col pa-0\"\r\n    id=\"command-bar\"\r\n    style=\"border-top-right-radius: 6px\"\r\n  >\r\n    <div\r\n      class=\"visualization-row visualization-justify-center\"\r\n      v-if=\"commandBarShow\"\r\n    >\r\n      <div v-for=\"(btn, index) in commandBarBtns\" :key=\"'command-btn-' + index\">\r\n        <hr\r\n          class=\"visualization-divider vertical\"\r\n          v-if=\"!btn\"\r\n          style=\"margin: 0 4px\"\r\n        />\r\n        <button\r\n          v-if=\"btn && (btn.condition ? btn.condition() : true)\"\r\n          v-tooltip.bottom=\"\r\n            btn.text && typeof btn.text === 'function' ? btn.text() : btn.text\r\n          \"\r\n          :style=\"{\r\n            color:\r\n              btn.color && typeof btn.color === 'function'\r\n                ? btn.color()\r\n                : 'black',\r\n          }\"\r\n          class=\"command-bar-btn\"\r\n          @click=\"btn.fnc\"\r\n        >\r\n          <font-awesome-icon\r\n            :id=\"btn.id\"\r\n            :icon=\"\r\n              'fa-solid ' +\r\n              (btn.icon && typeof btn.icon === 'function'\r\n                ? btn.icon()\r\n                : btn.icon)\r\n            \"\r\n          />\r\n        </button>\r\n      </div>\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    videoPlaying: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    videoPaused: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    insertTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    hourIniSelected: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    hourEndSelected: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      commandBarShow: true,\r\n      commandBarBtns: [\r\n        {\r\n          fnc: () => this.$emit('prev-loop-activate'),\r\n          icon: 'fa-backward',\r\n          text: 'Fast Backward',\r\n          id: 'Fast Backward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('prev'),\r\n          icon: 'fa-step-backward',\r\n          text: 'Step Backward',\r\n          id: 'Step Backward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('go-to'),\r\n          icon: 'fa-clock',\r\n          text: this.$i18n.t('infoBar.setHour'),\r\n          id: 'Definir Hora',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('next'),\r\n          icon: 'fa-step-forward',\r\n          text: 'Step Forward',\r\n          id: 'Step Forward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('next-loop-activate'),\r\n          icon: 'fa-forward',\r\n          text: 'Fast Forward',\r\n          id: 'Fast Forward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('play-or-pause'),\r\n          icon: () => {\r\n            return this.videoPlaying && !this.videoPaused\r\n              ? 'fa-pause'\r\n              : 'fa-play'\r\n          },\r\n          text: () => {\r\n            return this.videoPlaying && !this.videoPaused ? 'Pause' : 'Play'\r\n          },\r\n          id: 'playOrPause',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('stop-playing'),\r\n          icon: 'fa-stop',\r\n          text: 'Stop',\r\n          id: 'Stop',\r\n        },\r\n        null,\r\n        {\r\n          fnc: () => this.$emit('open-frame-selection'),\r\n          icon: 'fa-border-all',\r\n          text: this.$i18n.t('infoBar.gridForm'),\r\n          id: 'Formato da grelha',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('open-frames-per-second'),\r\n          icon: 'fa-sliders-h',\r\n          text: this.$i18n.t('infoBar.secondImage'),\r\n          id: 'Segundos por Imagem',\r\n        },\r\n        // {\r\n        //   fnc: () => this.$emit('open-blocks'),\r\n        //   icon: 'fa-cut',\r\n        //   text: 'Escolher intervalo de blocos',\r\n        //   id: 'Escolher intervalo de blocos',\r\n        // },\r\n        {\r\n          fnc: () => this.$emit('open-playback-rate'),\r\n          icon: 'fa-tachometer-alt',\r\n          text: this.$i18n.t('infoBar.chooseVelocity'),\r\n          id: 'Escolher velocidade de reprodução',\r\n        },\r\n        // {\r\n        //   fnc: () => this.$emit('insert-time-force'),\r\n        //   icon: 'fa-arrow-turn-down',\r\n        //   text: 'Recuperar Notícia',\r\n        //   id: 'Recuperar Notícia',\r\n        //   condition: () => {\r\n        //     return this.insertTime\r\n        //   },\r\n        // },\r\n        null,\r\n        {\r\n          fnc: () => this.$emit('set-hour-ini'),\r\n          icon: 'fa-hourglass-start',\r\n          text: this.$i18n.t('form.inicialHour'),\r\n          id: 'Hora Inicial',\r\n          color: () => {\r\n            return this.hourIniSelected ? 'var(--visualization-start)' : 'black'\r\n          },\r\n        },\r\n        {\r\n          fnc: () => this.$emit('insert-time'),\r\n          icon: 'fa-arrow-circle-down',\r\n          text: this.$i18n.t('infoBar.insert'),\r\n          id: 'insert',\r\n          condition: () => {\r\n            return this.insertTime\r\n          },\r\n        },\r\n        {\r\n          fnc: () => this.$emit('set-hour-end'),\r\n          icon: 'fa-hourglass-end',\r\n          text: this.$i18n.t('form.endHour'),\r\n          id: 'Hora Final',\r\n          color: () => {\r\n            return this.hourEndSelected ? 'var(--visualization-end)' : 'black'\r\n          },\r\n        },\r\n        // {\r\n        //   fnc: () => this.$emit('check-available-block'),\r\n        //   icon: 'fa-video',\r\n        //   text: 'Próximo bloco disponível',\r\n        //   id: 'Próximo bloco disponível',\r\n        // },\r\n      ],\r\n    }\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n  align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n  background-color: #f5f5f5;\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}\r\n#command-bar button {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n  padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\r\n}\r\n\r\n.settings-container {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n  margin: 0 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n  margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n  border: none;\r\n}\r\n\r\n.visualization-card {\r\n  border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n</style>\r\n<style>\r\n  .tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\r\n}\r\n</style>"]}, media: undefined });
+    inject("data-v-eeb877fc_0", { source: "\n.visualization-row[data-v-eeb877fc] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-eeb877fc] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\n}\n.visualization-divider[data-v-eeb877fc] {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\n}\n.visualization-divider.vertical[data-v-eeb877fc] {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\n}\n.visualization-card[data-v-eeb877fc] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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);*/\n}\n.visualization-justify-center[data-v-eeb877fc],\r\n*[data-v-eeb877fc] .visualization-justify-center {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-eeb877fc] {\r\n  align-items: center;\n}\n#visualization-container[data-v-eeb877fc] {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\n}\n#visualization-container > .card[data-v-eeb877fc] {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\n}\n#command-bar[data-v-eeb877fc],\r\n#info-bar[data-v-eeb877fc] {\r\n  background-color: #f5f5f5;\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);\n}\n#command-bar button[data-v-eeb877fc] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-eeb877fc]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-eeb877fc] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-eeb877fc] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-eeb877fc] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-eeb877fc] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-eeb877fc] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-eeb877fc] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-eeb877fc] {\r\n  margin: 0 8px;\n}\nsvg[data-v-eeb877fc]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-eeb877fc] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-eeb877fc] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-eeb877fc] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Commands.vue"],"names":[],"mappings":";AAmMA;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;;EAEA,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","file":"Commands.vue","sourcesContent":["<template>\r\n  <div\r\n    class=\"visualization-col pa-0\"\r\n    id=\"command-bar\"\r\n    style=\"border-top-right-radius: 6px\"\r\n  >\r\n    <div\r\n      class=\"visualization-row visualization-justify-center\"\r\n      v-if=\"commandBarShow\"\r\n    >\r\n      <div v-for=\"(btn, index) in commandBarBtns\" :key=\"'command-btn-' + index\">\r\n        <hr\r\n          class=\"visualization-divider vertical\"\r\n          v-if=\"!btn\"\r\n          style=\"margin: 0 4px\"\r\n        />\r\n        <button\r\n          v-if=\"btn && (btn.condition ? btn.condition() : true)\"\r\n          v-tooltip.bottom=\"\r\n            btn.text && typeof btn.text === 'function' ? btn.text() : btn.text\r\n          \"\r\n          :style=\"{\r\n            color:\r\n              btn.color && typeof btn.color === 'function'\r\n                ? btn.color()\r\n                : 'black',\r\n          }\"\r\n          class=\"command-bar-btn\"\r\n          @click=\"btn.fnc\"\r\n        >\r\n          <font-awesome-icon\r\n            :id=\"btn.id\"\r\n            :icon=\"\r\n              'fa-solid ' +\r\n              (btn.icon && typeof btn.icon === 'function'\r\n                ? btn.icon()\r\n                : btn.icon)\r\n            \"\r\n          />\r\n        </button>\r\n      </div>\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    videoPlaying: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    videoPaused: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    insertTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    hourIniSelected: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    hourEndSelected: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      commandBarShow: true,\r\n      commandBarBtns: [\r\n        {\r\n          fnc: () => this.$emit('prev-loop-activate'),\r\n          icon: 'fa-backward',\r\n          text: 'Fast Backward',\r\n          id: 'Fast Backward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('prev'),\r\n          icon: 'fa-step-backward',\r\n          text: 'Step Backward',\r\n          id: 'Step Backward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('go-to'),\r\n          icon: 'fa-clock',\r\n          text: this.$i18n.t('infoBar.setHour'),\r\n          id: 'Definir Hora',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('next'),\r\n          icon: 'fa-step-forward',\r\n          text: 'Step Forward',\r\n          id: 'Step Forward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('next-loop-activate'),\r\n          icon: 'fa-forward',\r\n          text: 'Fast Forward',\r\n          id: 'Fast Forward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('play-or-pause'),\r\n          icon: () => {\r\n            return this.videoPlaying && !this.videoPaused\r\n              ? 'fa-pause'\r\n              : 'fa-play'\r\n          },\r\n          text: () => {\r\n            return this.videoPlaying && !this.videoPaused ? 'Pause' : 'Play'\r\n          },\r\n          id: 'playOrPause',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('stop-playing'),\r\n          icon: 'fa-stop',\r\n          text: 'Stop',\r\n          id: 'Stop',\r\n        },\r\n        null,\r\n        {\r\n          fnc: () => this.$emit('open-frame-selection'),\r\n          icon: 'fa-border-all',\r\n          text: this.$i18n.t('infoBar.gridForm'),\r\n          id: 'Formato da grelha',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('open-frames-per-second'),\r\n          icon: 'fa-sliders-h',\r\n          text: this.$i18n.t('infoBar.secondImage'),\r\n          id: 'Segundos por Imagem',\r\n        },\r\n        // {\r\n        //   fnc: () => this.$emit('open-blocks'),\r\n        //   icon: 'fa-cut',\r\n        //   text: 'Escolher intervalo de blocos',\r\n        //   id: 'Escolher intervalo de blocos',\r\n        // },\r\n        {\r\n          fnc: () => this.$emit('open-playback-rate'),\r\n          icon: 'fa-tachometer-alt',\r\n          text: this.$i18n.t('infoBar.chooseVelocity'),\r\n          id: 'Escolher velocidade de reprodução',\r\n        },\r\n        // {\r\n        //   fnc: () => this.$emit('insert-time-force'),\r\n        //   icon: 'fa-arrow-turn-down',\r\n        //   text: 'Recuperar Notícia',\r\n        //   id: 'Recuperar Notícia',\r\n        //   condition: () => {\r\n        //     return this.insertTime\r\n        //   },\r\n        // },\r\n        null,\r\n        {\r\n          fnc: () => this.$emit('set-hour-ini'),\r\n          icon: 'fa-hourglass-start',\r\n          text: this.$i18n.t('form.inicialHour'),\r\n          id: 'Hora Inicial',\r\n          color: () => {\r\n            return this.hourIniSelected ? 'var(--visualization-start)' : 'black'\r\n          },\r\n        },\r\n        {\r\n          fnc: () => this.$emit('insert-time'),\r\n          icon: 'fa-arrow-circle-down',\r\n          text: this.$i18n.t('infoBar.insert'),\r\n          id: 'insert',\r\n          condition: () => {\r\n            return this.insertTime\r\n          },\r\n        },\r\n        {\r\n          fnc: () => this.$emit('set-hour-end'),\r\n          icon: 'fa-hourglass-end',\r\n          text: this.$i18n.t('form.endHour'),\r\n          id: 'Hora Final',\r\n          color: () => {\r\n            return this.hourEndSelected ? 'var(--visualization-end)' : 'black'\r\n          },\r\n        },\r\n        // {\r\n        //   fnc: () => this.$emit('check-available-block'),\r\n        //   icon: 'fa-video',\r\n        //   text: 'Próximo bloco disponível',\r\n        //   id: 'Próximo bloco disponível',\r\n        // },\r\n      ],\r\n    }\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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}\r\n\r\n.visualization-justify-center,\r\n* >>> .visualization-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n  align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n  background-color: #f5f5f5;\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}\r\n#command-bar button {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n  padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\r\n}\r\n\r\n.settings-container {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n  margin: 0 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n  margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n  border: none;\r\n}\r\n\r\n.visualization-card {\r\n  border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n</style>\r\n<style>\r\n.tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined })
+,inject("data-v-eeb877fc_1", { source: "\n.tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\n}\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\n}\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Commands.vue"],"names":[],"mappings":";AAoVA;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":"Commands.vue","sourcesContent":["<template>\r\n  <div\r\n    class=\"visualization-col pa-0\"\r\n    id=\"command-bar\"\r\n    style=\"border-top-right-radius: 6px\"\r\n  >\r\n    <div\r\n      class=\"visualization-row visualization-justify-center\"\r\n      v-if=\"commandBarShow\"\r\n    >\r\n      <div v-for=\"(btn, index) in commandBarBtns\" :key=\"'command-btn-' + index\">\r\n        <hr\r\n          class=\"visualization-divider vertical\"\r\n          v-if=\"!btn\"\r\n          style=\"margin: 0 4px\"\r\n        />\r\n        <button\r\n          v-if=\"btn && (btn.condition ? btn.condition() : true)\"\r\n          v-tooltip.bottom=\"\r\n            btn.text && typeof btn.text === 'function' ? btn.text() : btn.text\r\n          \"\r\n          :style=\"{\r\n            color:\r\n              btn.color && typeof btn.color === 'function'\r\n                ? btn.color()\r\n                : 'black',\r\n          }\"\r\n          class=\"command-bar-btn\"\r\n          @click=\"btn.fnc\"\r\n        >\r\n          <font-awesome-icon\r\n            :id=\"btn.id\"\r\n            :icon=\"\r\n              'fa-solid ' +\r\n              (btn.icon && typeof btn.icon === 'function'\r\n                ? btn.icon()\r\n                : btn.icon)\r\n            \"\r\n          />\r\n        </button>\r\n      </div>\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    videoPlaying: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    videoPaused: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    insertTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    hourIniSelected: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    hourEndSelected: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      commandBarShow: true,\r\n      commandBarBtns: [\r\n        {\r\n          fnc: () => this.$emit('prev-loop-activate'),\r\n          icon: 'fa-backward',\r\n          text: 'Fast Backward',\r\n          id: 'Fast Backward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('prev'),\r\n          icon: 'fa-step-backward',\r\n          text: 'Step Backward',\r\n          id: 'Step Backward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('go-to'),\r\n          icon: 'fa-clock',\r\n          text: this.$i18n.t('infoBar.setHour'),\r\n          id: 'Definir Hora',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('next'),\r\n          icon: 'fa-step-forward',\r\n          text: 'Step Forward',\r\n          id: 'Step Forward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('next-loop-activate'),\r\n          icon: 'fa-forward',\r\n          text: 'Fast Forward',\r\n          id: 'Fast Forward',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('play-or-pause'),\r\n          icon: () => {\r\n            return this.videoPlaying && !this.videoPaused\r\n              ? 'fa-pause'\r\n              : 'fa-play'\r\n          },\r\n          text: () => {\r\n            return this.videoPlaying && !this.videoPaused ? 'Pause' : 'Play'\r\n          },\r\n          id: 'playOrPause',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('stop-playing'),\r\n          icon: 'fa-stop',\r\n          text: 'Stop',\r\n          id: 'Stop',\r\n        },\r\n        null,\r\n        {\r\n          fnc: () => this.$emit('open-frame-selection'),\r\n          icon: 'fa-border-all',\r\n          text: this.$i18n.t('infoBar.gridForm'),\r\n          id: 'Formato da grelha',\r\n        },\r\n        {\r\n          fnc: () => this.$emit('open-frames-per-second'),\r\n          icon: 'fa-sliders-h',\r\n          text: this.$i18n.t('infoBar.secondImage'),\r\n          id: 'Segundos por Imagem',\r\n        },\r\n        // {\r\n        //   fnc: () => this.$emit('open-blocks'),\r\n        //   icon: 'fa-cut',\r\n        //   text: 'Escolher intervalo de blocos',\r\n        //   id: 'Escolher intervalo de blocos',\r\n        // },\r\n        {\r\n          fnc: () => this.$emit('open-playback-rate'),\r\n          icon: 'fa-tachometer-alt',\r\n          text: this.$i18n.t('infoBar.chooseVelocity'),\r\n          id: 'Escolher velocidade de reprodução',\r\n        },\r\n        // {\r\n        //   fnc: () => this.$emit('insert-time-force'),\r\n        //   icon: 'fa-arrow-turn-down',\r\n        //   text: 'Recuperar Notícia',\r\n        //   id: 'Recuperar Notícia',\r\n        //   condition: () => {\r\n        //     return this.insertTime\r\n        //   },\r\n        // },\r\n        null,\r\n        {\r\n          fnc: () => this.$emit('set-hour-ini'),\r\n          icon: 'fa-hourglass-start',\r\n          text: this.$i18n.t('form.inicialHour'),\r\n          id: 'Hora Inicial',\r\n          color: () => {\r\n            return this.hourIniSelected ? 'var(--visualization-start)' : 'black'\r\n          },\r\n        },\r\n        {\r\n          fnc: () => this.$emit('insert-time'),\r\n          icon: 'fa-arrow-circle-down',\r\n          text: this.$i18n.t('infoBar.insert'),\r\n          id: 'insert',\r\n          condition: () => {\r\n            return this.insertTime\r\n          },\r\n        },\r\n        {\r\n          fnc: () => this.$emit('set-hour-end'),\r\n          icon: 'fa-hourglass-end',\r\n          text: this.$i18n.t('form.endHour'),\r\n          id: 'Hora Final',\r\n          color: () => {\r\n            return this.hourEndSelected ? 'var(--visualization-end)' : 'black'\r\n          },\r\n        },\r\n        // {\r\n        //   fnc: () => this.$emit('check-available-block'),\r\n        //   icon: 'fa-video',\r\n        //   text: 'Próximo bloco disponível',\r\n        //   id: 'Próximo bloco disponível',\r\n        // },\r\n      ],\r\n    }\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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}\r\n\r\n.visualization-justify-center,\r\n* >>> .visualization-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n  align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n  background-color: #f5f5f5;\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}\r\n#command-bar button {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n  padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\r\n}\r\n\r\n.settings-container {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n  margin: 0 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n  margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n  border: none;\r\n}\r\n\r\n.visualization-card {\r\n  border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n</style>\r\n<style>\r\n.tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$4 = "data-v-6167337a";
+  const __vue_scope_id__$4 = "data-v-eeb877fc";
   /* module identifier */
   const __vue_module_identifier__$4 = undefined;
   /* functional template */
@@ -2191,11 +2203,11 @@ __vue_render__$3._withStripped = true;
   /* style */
   const __vue_inject_styles__$3 = function (inject) {
     if (!inject) return
-    inject("data-v-9bd7a8d6_0", { source: "\n.visualization-row[data-v-9bd7a8d6] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-9bd7a8d6] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\n}\n.visualization-divider[data-v-9bd7a8d6] {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\n}\n.visualization-divider.vertical[data-v-9bd7a8d6] {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\n}\n.visualization-card[data-v-9bd7a8d6] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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);*/\n}\n.visualization-justify-center[data-v-9bd7a8d6],[data-v-9bd7a8d6] .visualization-justify-center  {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-9bd7a8d6] {\r\n  align-items: center;\n}\n#visualization-container[data-v-9bd7a8d6] {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\n}\n#visualization-container > .card[data-v-9bd7a8d6] {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\n}\n#command-bar[data-v-9bd7a8d6],\r\n#info-bar[data-v-9bd7a8d6] {\r\n  background-color: #f5f5f5;\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);\n}\n#command-bar button[data-v-9bd7a8d6] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-9bd7a8d6]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-9bd7a8d6] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-9bd7a8d6] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-9bd7a8d6] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-9bd7a8d6] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-9bd7a8d6] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-9bd7a8d6] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-9bd7a8d6] {\r\n  margin: 0 8px;\n}\nsvg[data-v-9bd7a8d6]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-9bd7a8d6] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-9bd7a8d6] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-9bd7a8d6] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\n.tooltip[data-v-9bd7a8d6] {\r\n  display: block !important;\r\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-9bd7a8d6] {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-9bd7a8d6] {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-9bd7a8d6] {\r\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-9bd7a8d6] {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-9bd7a8d6] {\r\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-9bd7a8d6] {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-9bd7a8d6] {\r\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-9bd7a8d6] {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-9bd7a8d6] {\r\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-9bd7a8d6] {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-9bd7a8d6] {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-9bd7a8d6] {\r\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-9bd7a8d6] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-9bd7a8d6] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Infos.vue"],"names":[],"mappings":";AAyLA;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":"Infos.vue","sourcesContent":["<template>\r\n  <div\r\n    id=\"info-bar\"\r\n    class=\"visualization-row visualization-justify-center visualization-align-center\"\r\n    :style=\"\r\n      !commandsShow\r\n        ? 'border-top-right-radius: 6px; padding: 4px'\r\n        : 'padding: 4px'\r\n    \"\r\n  >\r\n    <span> {{ playbackRate }}x </span>\r\n    <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n    <span>\r\n      {{\r\n        $t('infoBar.selected', {\r\n          seconds: hourEnd && hourIni ? hourEnd - hourIni + 1 : 0,\r\n          hour_ini: convertToAudienceTime(hourIni),\r\n          hour_end: convertToAudienceTime(hourEnd),\r\n        })\r\n      }}\r\n    </span>\r\n    <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n    <span>\r\n      {{\r\n        $t('infoBar.interval', {\r\n          seconds: secondsPerFrame,\r\n        })\r\n      }}\r\n    </span>\r\n    <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n    <span>\r\n      {{\r\n        $t('infoBar.block', {\r\n          time1: convertToAudienceTime(blockStartTime),\r\n          time2: convertToAudienceTime(blockTotalTime),\r\n        })\r\n      }}\r\n    </span>\r\n    <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n    {{ framesPerRow * numberOfRows }}\r\n    <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n    {{ framesPerRow + '*' + numberOfRows }}\r\n    <span\r\n      class=\"visualization-divider vertical\"\r\n      v-if=\"alternativeServer || !cache\"\r\n      style=\"margin: 0 8px\"\r\n    />\r\n    <span v-if=\"alternativeServer\">\r\n      <v-icon color=\"error\" small left>fa-exclamation-triangle</v-icon>\r\n      <strong>{{ $t('infoBar.alternativeServer') }}</strong>\r\n    </span>\r\n    <span\r\n      class=\"visualization-divider vertical\"\r\n      v-if=\"alternativeServer && !cache\"\r\n      style=\"margin: 0 8px\"\r\n    />\r\n    <span v-if=\"!cache\">\r\n      <v-icon color=\"warning\" small left>fa-exclamation-circle</v-icon>\r\n      <strong>{{ $t('infoBar.notUsingCache') }}</strong>\r\n    </span>\r\n    <div class=\"settings-container\">\r\n      <font-awesome-icon\r\n        icon=\"fa-solid fa-server\"\r\n        @click=\"$emit('change-server')\"\r\n        v-tooltip=\"\r\n          alternativeServer\r\n            ? $t('infoBar.changeServer')\r\n            : $t('infoBar.changeServer')\r\n        \"\r\n      />\r\n      <font-awesome-icon\r\n        :icon=\"commandsShow ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'\"\r\n        @click=\"$emit('toogle-commands-visibility')\"\r\n        v-tooltip=\"\r\n          commandsShow\r\n            ? $t('moduletelentry.hideButtons')\r\n            : $t('moduletelentry.showButtons')\r\n        \"\r\n      />\r\n      <font-awesome-icon\r\n        :icon=\"cache ? 'fa-solid fa-ban' : 'fa-solid fa-sync'\"\r\n        @click=\"$emit('toogle-cache')\"\r\n        v-tooltip=\"\r\n          cache ? $t('infoBar.disableCache') : $t('infoBar.activateCache')\r\n        \"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  props: {\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    commandsShow: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    cache: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    blockStartTime: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    videoTotalDuration: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    alternativeServer: {\r\n      type: Boolean,\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    hourIni: {\r\n      type: [Number, Boolean],\r\n    },\r\n    hourEnd: {\r\n      type: [Number, Boolean],\r\n    },\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  computed: {\r\n    blockTotalTime() {\r\n      return this.videoTotalDuration + this.blockStartTime\r\n    },\r\n  },\r\n  methods: {\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    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  },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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}\r\n\r\n.visualization-justify-center, /deep/ .visualization-justify-center  {\r\n  justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n  align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n  background-color: #f5f5f5;\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}\r\n#command-bar button {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n  padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\r\n}\r\n\r\n.settings-container {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n  margin: 0 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n  margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n  border: none;\r\n}\r\n\r\n.visualization-card {\r\n  border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\r\n}\r\n</style>"]}, media: undefined });
+    inject("data-v-291d1aca_0", { source: "\n.visualization-row[data-v-291d1aca] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-291d1aca] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\n}\n.visualization-divider[data-v-291d1aca] {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\n}\n.visualization-divider.vertical[data-v-291d1aca] {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\n}\n.visualization-card[data-v-291d1aca] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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);*/\n}\n.visualization-justify-center[data-v-291d1aca],[data-v-291d1aca] .visualization-justify-center {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-291d1aca] {\r\n  align-items: center;\n}\n#visualization-container[data-v-291d1aca] {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\n}\n#visualization-container > .card[data-v-291d1aca] {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\n}\n#command-bar[data-v-291d1aca],\r\n#info-bar[data-v-291d1aca] {\r\n  background-color: #f5f5f5;\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);\n}\n#command-bar button[data-v-291d1aca] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-291d1aca]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-291d1aca] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-291d1aca] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-291d1aca] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-291d1aca] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-291d1aca] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-291d1aca] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-291d1aca] {\r\n  margin: 0 8px;\n}\nsvg[data-v-291d1aca]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-291d1aca] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-291d1aca] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-291d1aca] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\n.tooltip[data-v-291d1aca] {\r\n  display: block !important;\r\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-291d1aca] {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-291d1aca] {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-291d1aca] {\r\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-291d1aca] {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-291d1aca] {\r\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-291d1aca] {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-291d1aca] {\r\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-291d1aca] {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-291d1aca] {\r\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-291d1aca] {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-291d1aca] {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-291d1aca] {\r\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-291d1aca] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-291d1aca] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Infos.vue"],"names":[],"mappings":";AAyLA;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;EAEA,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":"Infos.vue","sourcesContent":["<template>\r\n  <div\r\n    id=\"info-bar\"\r\n    class=\"visualization-row visualization-justify-center visualization-align-center\"\r\n    :style=\"\r\n      !commandsShow\r\n        ? 'border-top-right-radius: 6px; padding: 4px'\r\n        : 'padding: 4px'\r\n    \"\r\n  >\r\n    <span> {{ playbackRate }}x </span>\r\n    <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n    <span>\r\n      {{\r\n        $t('infoBar.selected', {\r\n          seconds: hourEnd && hourIni ? hourEnd - hourIni + 1 : 0,\r\n          hour_ini: convertToAudienceTime(hourIni),\r\n          hour_end: convertToAudienceTime(hourEnd),\r\n        })\r\n      }}\r\n    </span>\r\n    <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n    <span>\r\n      {{\r\n        $t('infoBar.interval', {\r\n          seconds: secondsPerFrame,\r\n        })\r\n      }}\r\n    </span>\r\n    <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n    <span>\r\n      {{\r\n        $t('infoBar.block', {\r\n          time1: convertToAudienceTime(blockStartTime),\r\n          time2: convertToAudienceTime(blockTotalTime),\r\n        })\r\n      }}\r\n    </span>\r\n    <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n    {{ framesPerRow * numberOfRows }}\r\n    <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n    {{ framesPerRow + '*' + numberOfRows }}\r\n    <span\r\n      class=\"visualization-divider vertical\"\r\n      v-if=\"alternativeServer || !cache\"\r\n      style=\"margin: 0 8px\"\r\n    />\r\n    <span v-if=\"alternativeServer\">\r\n      <v-icon color=\"error\" small left>fa-exclamation-triangle</v-icon>\r\n      <strong>{{ $t('infoBar.alternativeServer') }}</strong>\r\n    </span>\r\n    <span\r\n      class=\"visualization-divider vertical\"\r\n      v-if=\"alternativeServer && !cache\"\r\n      style=\"margin: 0 8px\"\r\n    />\r\n    <span v-if=\"!cache\">\r\n      <v-icon color=\"warning\" small left>fa-exclamation-circle</v-icon>\r\n      <strong>{{ $t('infoBar.notUsingCache') }}</strong>\r\n    </span>\r\n    <div class=\"settings-container\">\r\n      <font-awesome-icon\r\n        icon=\"fa-solid fa-server\"\r\n        @click=\"$emit('change-server')\"\r\n        v-tooltip=\"\r\n          alternativeServer\r\n            ? $t('infoBar.changeServer')\r\n            : $t('infoBar.changeServer')\r\n        \"\r\n      />\r\n      <font-awesome-icon\r\n        :icon=\"commandsShow ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'\"\r\n        @click=\"$emit('toogle-commands-visibility')\"\r\n        v-tooltip=\"\r\n          commandsShow\r\n            ? $t('moduletelentry.hideButtons')\r\n            : $t('moduletelentry.showButtons')\r\n        \"\r\n      />\r\n      <font-awesome-icon\r\n        :icon=\"cache ? 'fa-solid fa-ban' : 'fa-solid fa-sync'\"\r\n        @click=\"$emit('toogle-cache')\"\r\n        v-tooltip=\"\r\n          cache ? $t('infoBar.disableCache') : $t('infoBar.activateCache')\r\n        \"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  props: {\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    commandsShow: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    cache: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    blockStartTime: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    videoTotalDuration: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    alternativeServer: {\r\n      type: Boolean,\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    hourIni: {\r\n      type: [Number, Boolean],\r\n    },\r\n    hourEnd: {\r\n      type: [Number, Boolean],\r\n    },\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  computed: {\r\n    blockTotalTime() {\r\n      return this.videoTotalDuration + this.blockStartTime\r\n    },\r\n  },\r\n  methods: {\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    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  },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n  align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n  background-color: #f5f5f5;\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}\r\n#command-bar button {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n  padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\r\n}\r\n\r\n.settings-container {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n  margin: 0 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n  margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n  border: none;\r\n}\r\n\r\n.visualization-card {\r\n  border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$3 = "data-v-9bd7a8d6";
+  const __vue_scope_id__$3 = "data-v-291d1aca";
   /* module identifier */
   const __vue_module_identifier__$3 = undefined;
   /* functional template */
@@ -2416,16 +2428,26 @@ __vue_render__$2._withStripped = true;
   );
 
 var GridImages = {
-  '1x1': "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguM2MtMS45IDAtMS45IDAtMS45LTEuOVYxLjhjMC0xLjggMC0xLjggMS44LTEuOGg4OC40em0tNDY4IDE4My41SDBWOTUuMWMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjdjMS44IDAgMS44IDAgMS44IDEuOHY4OC4zem05My42IDBIOTMuNlY5NS4zYzAtMS45IDAtMS45IDEuOS0xLjlIMTgyYzEuOCAwIDEuOCAwIDEuOCAxLjh2ODguM3ptMjgwLjkgMGgtOTAuMlY5NS4xYzAtMS43IDAtMS43IDEuNi0xLjdINDYzYzEuNiAwIDEuNiAwIDEuNiAxLjd2NjIuMmwuMSAyNi4yem05My41LTkwdjg5YzAgLjktLjIgMS4xLTEuMSAxLjFINDY4Vjk1LjJjMC0xLjcgMC0xLjcgMS43LTEuN2g4OC41em0tMjgwLjkgOTBoLTkwVjk0LjljMC0uOS4xLTEuNSAxLjItMS41SDI3NmMuOSAwIDEuMi4zIDEuMiAxLjJsLjEgODguOXptOTMuNiAwaC05MFY5NS4xYzAtMS43IDAtMS43IDEuNy0xLjdoODYuNWMxLjggMCAxLjggMCAxLjggMS44djg4LjN6IiBmaWxsPSIjY2JjYmNiIi8+PHBhdGggZD0iTTAgNDUuMVYxLjVDMCAuMy4zIDAgMS40IDBoODcuM2MxLjIgMCAxLjUuMyAxLjQgMS41djg3LjFjMCAxLjItLjMgMS41LTEuNSAxLjVIMS40Yy0xLjMgMC0xLjUtLjQtMS41LTEuNkwwIDQ1LjF6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTkzLjYgNDQuOVYxLjVjMC0xLjYgMC0xLjYgMS42LTEuNmg4Ny4xYzEuNSAwIDEuNSAwIDEuNSAxLjZ2ODYuOGMwIDEuNiAwIDEuNi0xLjYgMS42SDk1LjRjLTEuOCAwLTEuOCAwLTEuOC0xLjhWNDQuOXptMjgwLjkuMlYxLjZjMC0xLjYgMC0xLjYgMS42LTEuNmg4Ny4xYzEuNSAwIDEuNSAwIDEuNSAxLjZ2ODYuN2MwIDEuOCAwIDEuOC0xLjggMS44aC04Ni43Yy0xLjcgMC0xLjcgMC0xLjctMS43VjQ1LjF6bS0xNDIuMSA0NUgxODljLTEuNiAwLTEuNiAwLTEuNi0xLjV2LTg3YzAtMS42IDAtMS42IDEuNi0xLjZoODYuOGMxLjYgMCAxLjYgMCAxLjYgMS41djg3YzAgMS42IDAgMS42LTEuNiAxLjZoLTQzLjR6bTQ4LjUtNDUuMlYxLjVjMC0xLjYgMC0xLjYgMS42LTEuNmg4Ni44YzEuNiAwIDEuNiAwIDEuNiAxLjV2ODdjMCAxLjYgMCAxLjYtMS42IDEuNmgtODYuOGMtMS42IDAtMS42IDAtMS42LTEuNlY0NC45eiIgZmlsbD0iI2NiY2JjYiIvPjwvc3ZnPg==",
-  '2x1': "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTI3Ny4zIDE4My41aC05MC4yVjk0LjJjMC0uNi4yLS45LjgtLjloODcuN2MxIDAgMS42IDAgMS42IDEuM2wuMSA4OC45ek01NTguMiAwdjkwLjFoLTg4LjNjLTEuOSAwLTEuOSAwLTEuOS0xLjlWMS44YzAtMS44IDAtMS44IDEuOC0xLjhoODguNHptLTQ2OCAxODMuNUgwVjk1LjFjMC0xLjcgMC0xLjcgMS43LTEuN2g4Ni43YzEuOCAwIDEuOCAwIDEuOCAxLjh2ODguM3ptOTMuNiAwSDkzLjZWOTUuM2MwLTEuOSAwLTEuOSAxLjktMS45SDE4MmMxLjggMCAxLjggMCAxLjggMS44djg4LjN6bTI4MC45IDBoLTkwLjJWOTUuMWMwLTEuNyAwLTEuNyAxLjYtMS43SDQ2M2MxLjYgMCAxLjYgMCAxLjYgMS43djYxLjJsLjEgMjcuMnptOTMuNS05MHY4OWMwIC45LS4yIDEuMS0xLjEgMS4xSDQ2OFY5NS4yYzAtMS43IDAtMS43IDEuNy0xLjdoODguNXptLTE4Ny4xIDkwaC05MC4yVjk0LjZjMC0xLjEuNC0xLjUgMS41LTEuNWw2LjguM2g4MC4yYzEuMSAwIDEuNS4yIDEuNSAxLjRsLjIgNjEuOS41IDI1LjFjMCAuNy4xIDEuMy0uNSAxLjd6IiBmaWxsPSIjY2JjYmNiIi8+PHBhdGggZD0iTTE4My44IDQ1LjF2NDMuNWMwIDEuMS0uMiAxLjYtMS41IDEuNkg5NWMtMS4yIDAtMS40LS40LTEuNC0xLjVWMS41QzkzLjYuMiA5NCAwIDk1LjEgMGg4Ny4zYzEuMiAwIDEuNC40IDEuNCAxLjV2NDMuNnpNNDUuMSAwaDQzLjdjMS4xIDAgMS40LjIgMS40IDEuNHY4Ny4zYzAgMS4xLS40IDEuNC0xLjQgMS40SDEuNGMtMS4xIDAtMS4zLS4zLTEuMy0xLjNMMCAxLjNDMCAuMi4zIDAgMS4zIDBoNDMuOHoiIGZpbGw9IiMxNTY1YzAiLz48cGF0aCBkPSJNNDE5LjYgOTAuMWgtNDMuNWMtMS42IDAtMS42IDAtMS42LTEuNlYxLjZjMC0xLjYgMC0xLjYgMS42LTEuNmg4Ny4xYzEuNSAwIDEuNSAwIDEuNSAxLjZ2ODYuN2MwIDEuOCAwIDEuOC0xLjggMS44aC00My4zek0yNzcuMyA0NC45djQzLjVjMCAxLjcgMCAxLjctMS42IDEuN2gtODYuOGMtMS42IDAtMS42IDAtMS42LTEuNnYtODdjMC0xLjUgMC0xLjUgMS42LTEuNWg4Ni44YzEuNiAwIDEuNiAwIDEuNiAxLjZ2NDMuM3ptOTMuNi4zdjQzLjJjMCAxLjcgMCAxLjctMS42IDEuN2gtODYuOGMtMS42IDAtMS42IDAtMS42LTEuNnYtODdjMC0xLjUgMC0xLjUgMS42LTEuNWg4Ni44YzEuNiAwIDEuNiAwIDEuNiAxLjZ2NDMuNnoiIGZpbGw9IiNjYmNiY2IiLz48L3N2Zz4=",
-  '3x1': "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTI3Ny4zIDE4My41aC05MC4yVjk0LjJjMC0uNi4yLS45LjgtLjloODcuOGMxIDAgMS42IDAgMS42IDEuM3Y4OC45ek01NTguMiAwdjkwLjFoLTg4LjNjLTEuOSAwLTEuOSAwLTEuOS0xLjlWMS44YzAtMS44IDAtMS44IDEuOC0xLjhoODguNHptLTQ2OCAxODMuNUgwVjk1LjFjMC0xLjcgMC0xLjcgMS43LTEuN2g4Ni43YzEuOCAwIDEuOCAwIDEuOCAxLjh2ODguM3ptOTMuNiAwSDkzLjZWOTUuM2MwLTEuOSAwLTEuOSAxLjktMS45SDE4MmMxLjggMCAxLjggMCAxLjggMS44djg4LjN6bTI4MC45IDBoLTkwLjJWOTUuMWMwLTEuNyAwLTEuNyAxLjYtMS43SDQ2M2MxLjYgMCAxLjYgMCAxLjYgMS43VjE1N2wuMSAyNi41em05My41LTkwdjg5YzAgLjktLjIgMS4xLTEuMSAxLjFINDY4Vjk1LjJjMC0xLjcgMC0xLjcgMS43LTEuN2g4OC41em0tMTg3LjEgOTBoLTkwLjJWOTQuNmMwLTEuMS40LTEuNSAxLjUtMS41bDYuOC4zaDgwLjJjMS4xIDAgMS41LjIgMS41IDEuNGwuMiA2MS45LjUgMjUuMWMwIC43LjEgMS4zLS41IDEuN3oiIGZpbGw9IiNjYmNiY2IiLz48cGF0aCBkPSJNNDUuMSA5MC4xSDEuNGMtMS4xIDAtMS41LS4zLTEuNS0xLjRMMCAxLjVDMCAuMy4zIDAgMS41IDBoODcuM2MxLjIgMCAxLjQuNCAxLjQgMS41djg3LjFjMCAxLjItLjMgMS41LTEuNSAxLjVINDUuMXpNMTM4LjggMGg0My41YzEuMSAwIDEuNS4zIDEuNSAxLjR2ODcuMmMwIDEuMi0uMyAxLjQtMS41IDEuNEg5NS4xYy0xLjIgMC0xLjUtLjMtMS41LTEuNVYxLjRDOTMuNi4yIDk0IDAgOTUuMSAwaDQzLjd6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTM3NC41IDQ1LjFWMS42YzAtMS42IDAtMS42IDEuNi0xLjZoODcuMWMxLjYgMCAxLjYgMCAxLjYgMS42djg2LjhjMCAxLjcgMCAxLjctMS43IDEuN2gtODYuOWMtMS42IDAtMS42IDAtMS42LTEuNWwtLjEtNDMuNXoiIGZpbGw9IiNjYmNiY2IiLz48cGF0aCBkPSJNMjc3LjMgNDUuMXY0My41YzAgMS41IDAgMS41LTEuNiAxLjVoLTg2LjljLTEuNSAwLTEuNSAwLTEuNS0xLjZWMS42YzAtMS4yLjItMS42IDEuNS0xLjVIMjc2YzEuMiAwIDEuNC40IDEuNCAxLjVsLS4xIDQzLjV6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTM3MC45IDQ1LjJ2NDMuMmMwIDEuNyAwIDEuNy0xLjYgMS43aC04Ni44Yy0xLjYgMC0xLjYgMC0xLjYtMS42di04N2MwLTEuNSAwLTEuNSAxLjYtMS41aDg2LjhjMS42IDAgMS42IDAgMS42IDEuNnY0My42eiIgZmlsbD0iI2NiY2JjYiIvPjwvc3ZnPg==",
-  '3x2': "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTI3Ny4zIDE4My41aC05MC4yVjk1YzAtMS42IDAtMS42IDEuNi0xLjZoODYuOWMxLjcgMCAxLjcgMCAxLjcgMS43djg4LjR6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguM2MtMS45IDAtMS45IDAtMS45LTEuOVYxLjhjMC0xLjggMC0xLjggMS44LTEuOGg4OC40eiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik05MC4yIDE4My41SDBWOTUuMmMwLTEuOS0uMi0xLjggMS43LTEuOGg4Ni43YzEuNyAwIDEuNyAwIDEuNyAxLjh2ODYuNmMuMS42LjEgMS4yLjEgMS43em05My42IDBIOTMuNlY5NS4yYzAtMS44IDAtMS44IDEuNy0xLjhIMTgyYzEuOSAwIDEuNy0uMiAxLjcgMS44bC4xIDg4LjN6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTQ2NC43IDE4My41aC05MC4yVjk1LjFjMC0xLjcgMC0xLjcgMS42LTEuN0g0NjNjMS42IDAgMS42IDAgMS42IDEuN3Y2Mi42bC4xIDI1Ljh6bTkzLjUtOTB2ODljMCAuOS0uMiAxLjEtMS4xIDEuMUg0NjhWOTUuMmMwLTEuNyAwLTEuNyAxLjctMS43aDg4LjV6bS0xODcuMSA5MGgtOTAuMlY5NC42YzAtMS4xLjQtMS41IDEuNS0xLjVsNi44LjNoODAuMmMxLjEgMCAxLjUuMiAxLjUgMS40bC4yIDYxLjguNSAyNS4yYzAgLjcuMSAxLjMtLjUgMS43eiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik00NS4xIDkwLjFIMS40Yy0xLjEgMC0xLjUtLjMtMS41LTEuNEwwIDEuNUMwIC4zLjMgMCAxLjUgMGg4Ny4zYzEuMiAwIDEuNC40IDEuNCAxLjV2ODcuMWMwIDEuMi0uMyAxLjUtMS41IDEuNUg0NS4xek0xMzguOCAwaDQzLjVjMS4xIDAgMS41LjMgMS41IDEuNHY4Ny4yYzAgMS4yLS4zIDEuNC0xLjUgMS40SDk1LjFjLTEuMiAwLTEuNS0uMy0xLjUtMS41VjEuNEM5My42LjIgOTQgMCA5NS4xIDBoNDMuN3oiIGZpbGw9IiMxNTY1YzAiLz48cGF0aCBkPSJNMzc0LjUgNDUuMVYxLjZjMC0xLjYgMC0xLjYgMS42LTEuNmg4Ny4xYzEuNiAwIDEuNiAwIDEuNiAxLjZ2ODYuOGMwIDEuNyAwIDEuNy0xLjcgMS43aC04Ni45Yy0xLjYgMC0xLjYgMC0xLjYtMS41bC0uMS00My41eiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik0yNzcuMyA0NS4xdjQzLjVjMCAxLjUgMCAxLjUtMS42IDEuNWgtODYuOWMtMS41IDAtMS41IDAtMS41LTEuNlYxLjZjMC0xLjIuMi0xLjYgMS41LTEuNUgyNzZjMS4yIDAgMS40LjQgMS40IDEuNWwtLjEgNDMuNXoiIGZpbGw9IiMxNTY1YzAiLz48cGF0aCBkPSJNMzcwLjkgNDUuMnY0My4yYzAgMS43IDAgMS43LTEuNiAxLjdoLTg2LjhjLTEuNiAwLTEuNiAwLTEuNi0xLjZ2LTg3YzAtMS41IDAtMS41IDEuNi0xLjVoODYuOGMxLjYgMCAxLjYgMCAxLjYgMS42djQzLjZ6IiBmaWxsPSIjY2JjYmNiIi8+PC9zdmc+",
-  '4x1': "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguM2MtMS45IDAtMS45IDAtMS45LTEuOVYxLjhjMC0xLjggMC0xLjggMS44LTEuOGg4OC40em0tNDY4IDE4My41SDBWOTUuMWMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjdjMS44IDAgMS44IDAgMS44IDEuOHY4OC4zem05My42IDBIOTMuNlY5NS4zYzAtMS45IDAtMS45IDEuOS0xLjlIMTgyYzEuOCAwIDEuOCAwIDEuOCAxLjh2ODguM3ptMjgwLjkgMGgtOTAuMlY5NS4xYzAtMS43IDAtMS43IDEuNi0xLjdINDYzYzEuNiAwIDEuNiAwIDEuNiAxLjd2NjQuMWwuMSAyNC4zem05My41LTkwdjg5YzAgLjktLjIgMS4xLTEuMSAxLjFINDY4Vjk1LjJjMC0xLjcgMC0xLjcgMS43LTEuN2g4OC41em0tMjgwLjkgOTBoLTkwVjk0LjhjMC0uOS4xLTEuNSAxLjItMS41SDI3NmMuOSAwIDEuMi4zIDEuMiAxLjJsLjEgODl6bTkzLjYgMGgtOTBWOTUuMWMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjVjMS44IDAgMS44IDAgMS44IDEuOHY4OC4zeiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik0wIDQ1LjFWMS41QzAgLjMuMyAwIDEuNCAwaDg3LjNjMS4yIDAgMS41LjMgMS40IDEuNXY4Ny4xYzAgMS4yLS4zIDEuNS0xLjUgMS41SDEuNGMtMS4zIDAtMS41LS40LTEuNS0xLjZMMCA0NS4xem05My42LS4yVjEuNEM5My42LjMgOTMuOSAwIDk1IDBoODcuM2MxLjIgMCAxLjQuMyAxLjQgMS41djg3LjJjMCAxLjItLjQgMS40LTEuNSAxLjRIOTVjLTEuMiAwLTEuNS0uNC0xLjUtMS41bC4xLTQzLjd6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTM3NC41IDQ1LjFWMS42YzAtMS42IDAtMS42IDEuNi0xLjZoODcuMWMxLjUgMCAxLjUgMCAxLjUgMS42djg2LjdjMCAxLjggMCAxLjgtMS44IDEuOGgtODYuN2MtMS43IDAtMS43IDAtMS43LTEuN1Y0NS4xeiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik0yNzcuMyA0NS4xdjQzLjRjMCAxLjYgMCAxLjYtMS42IDEuNmgtODYuOGMtMS42IDAtMS42IDAtMS42LTEuNlYxLjdjMC0xLjYgMC0xLjYgMS41LTEuNmg4N2MxLjUgMCAxLjYgMCAxLjYgMS41bC0uMSA0My41em0zLjYtLjJWMS40YzAtMS4xLjMtMS41IDEuNC0xLjVoODcuMmMxLjIgMCAxLjUuMyAxLjUgMS41djg3LjJjMCAxLjEtLjMgMS40LTEuNCAxLjRoLTg3LjNjLTEuMSAwLTEuNC0uNC0xLjQtMS40VjQ0Ljl6IiBmaWxsPSIjMTU2NWMwIi8+PC9zdmc+",
-  '4x2': "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguM2MtMS45IDAtMS45IDAtMS45LTEuOVYxLjhjMC0xLjggMC0xLjggMS44LTEuOGg4OC40eiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik05MC4yIDE4My41SDBWOTUuMmMwLTEuOS0uMi0xLjggMS43LTEuOGg4Ni43YzEuNyAwIDEuNyAwIDEuNyAxLjh2ODYuNmMuMS42LjEgMS4yLjEgMS43em05My42IDBIOTMuNlY5NS4yYzAtMS44IDAtMS44IDEuNy0xLjhIMTgyYzEuOSAwIDEuNy0uMiAxLjcgMS44bC4xIDg4LjN6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTQ2NC42IDE4My41aC05MC4yVjk1LjFjMC0xLjcgMC0xLjcgMS42LTEuN2g4Ni45YzEuNiAwIDEuNiAwIDEuNiAxLjd2NjYuNWwuMSAyMS45em05My42LTkwdjg5YzAgLjktLjIgMS4xLTEuMSAxLjFINDY4Vjk1LjRjMC0xLjggMC0xLjggMS44LTEuOGg3NS45YzQuMi0uMSA4LjMtLjEgMTIuNS0uMXoiIGZpbGw9IiNjYmNiY2IiLz48cGF0aCBkPSJNMjc3LjMgMTgzLjVoLTkwYzAtLjUtLjEtMS0uMS0xLjRWOTUuMmMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjdjMS43IDAgMS43IDAgMS43IDEuN3Y4OC4zem05My42IDBoLTkwVjk1YzAtMS42IDAtMS42IDEuNi0xLjZoODYuOGMxLjcgMCAxLjcgMCAxLjcgMS43VjE4MmMtLjEuNi0uMSAxLjEtLjEgMS41ek0xMzguNyA5MC4xSDk1LjNjLTEuNiAwLTEuNiAwLTEuNi0xLjZ2LTg3YzAtMS4zLjQtMS41IDEuNi0xLjVoODcuMWMxLjYgMCAxLjYgMCAxLjYgMS41djg3YzAgMS41IDAgMS41LTEuNiAxLjVsLTQzLjcuMXoiIGZpbGw9IiMxNTY1YzAiLz48cGF0aCBkPSJNMzc0LjUgNDVWMS42YzAtMS42IDAtMS42IDEuNi0xLjZoODcuMWMxLjYgMCAxLjYgMCAxLjYgMS42djg2LjhjMCAxLjcgMCAxLjctMS43IDEuN2gtODYuOWMtMS42IDAtMS42IDAtMS42LTEuNWwtLjEtNDMuNnoiIGZpbGw9IiNjYmNiY2IiLz48cGF0aCBkPSJNMjc3LjMgNDV2NDMuNmMwIDEuMS0uMyAxLjUtMS41IDEuNWgtODcuMmMtMS4yIDAtMS40LS40LTEuNC0xLjVWMS41YzAtMS4yLjMtMS41IDEuNS0xLjVoODcuMWMxLjMgMCAxLjUuNCAxLjUgMS41VjQ1em0zLjYuMVYxLjVjMC0xLjIuMy0xLjUgMS41LTEuNWg4Ny4yYzEuMiAwIDEuNC4zIDEuNCAxLjV2ODcuMWMwIDEuMi0uMyAxLjUtMS41IDEuNWgtODcuMWMtMS4zIDAtMS41LS40LTEuNS0xLjZWNDUuMXptLTIzNS42IDQ1SDEuOGMtMS42IDAtMS42IDAtMS42LTEuNlYxLjdDLjIuMS4yLjEgMS44LjFoODdjMS42IDAgMS42IDAgMS42IDEuNnY4Ni44YzAgMS42IDAgMS42LTEuNyAxLjZINDUuM3oiIGZpbGw9IiMxNTY1YzAiLz48L3N2Zz4=",
-  '5x1': "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTE4My44IDE4My41SDkzLjZWOTUuNGMwLTEuOCAwLTEuOCAxLjgtMS44SDE4MmMxLjggMCAxLjggMCAxLjggMS44djg4LjF6bTI4MC45IDBoLTkwLjJWOTUuMmMwLTEuNiAwLTEuNiAxLjUtMS42aDg3LjFjMS41IDAgMS42IDAgMS42IDEuNnY4OC4zek01NTguMiAwdjg5LjhINDcwYy0xLjcgMC0xLjcgMC0xLjctMS44VjEuN2MwLTEuOCAwLTEuOCAxLjctMS44bDg4LjIuMXpNOTAgMTgzLjVIMFY5NS40YzAtMS43IDAtMS43IDEuOC0xLjdoODYuNWMxLjggMCAxLjggMCAxLjggMS43djg2LjhjLS4xLjUtLjEuOS0uMSAxLjN6bTE4Ny4zIDBoLTkwVjk0LjhjMC0xIC41LTEuMiAxLjMtMS4ySDI3NmMxIDAgMS4zLjMgMS4zIDEuM3Y4OC42em05My42IDBoLTkwVjk1LjRjMC0xLjcgMC0xLjcgMS44LTEuN2g4Ni41YzEuOCAwIDEuOCAwIDEuOCAxLjd2ODYuOGMtLjEuNS0uMS45LS4xIDEuM3ptMTg3LjMtODkuOHY4OC44YzAgLjktLjIgMS4xLTEuMSAxLjFoLTg4LjlWOTUuNWMwLTEuOCAwLTEuOCAxLjgtMS44aDg4LjJ6IiBmaWxsPSIjY2JjYmNiIi8+PHBhdGggZD0iTTAgNDQuOVYxLjVDMCAuMy4zIDAgMS40IDBoODcuM2MxLjIgMCAxLjUuMyAxLjUgMS41djg3LjFjMCAxLjItLjMgMS42LTEuNSAxLjZIMS41Yy0xLjMgMC0xLjUtLjQtMS41LTEuNlY0NC45em0xODMuOC4zdjQzLjVjMCAxLjEtLjIgMS40LTEuNCAxLjRIOTVjLTEuMSAwLTEuNC0uNC0xLjQtMS40VjEuNGMwLTEuMS4zLTEuMyAxLjMtMS4zaDg3LjZjMS4xIDAgMS4zLjMgMS4zIDEuM3Y0My44em05My41IDB2NDMuNGMwIDEuMi0uMiAxLjUtMS41IDEuNWgtODcuMWMtMS4yIDAtMS41LS4zLTEuNS0xLjV2LTg3YzAtMS42IDAtMS42IDEuNi0xLjZoODdjMS41IDAgMS41IDAgMS41IDEuNnY0My42em0zLjYtLjNWMS40YzAtMS4xLjMtMS41IDEuNC0xLjVoODcuMmMxLjIgMCAxLjUuMyAxLjUgMS41djg3LjJjMCAxLjEtLjMgMS40LTEuNCAxLjRoLTg3LjNjLTEuMSAwLTEuNC0uNC0xLjQtMS40VjQ0Ljl6bTE4My40LjN2NDMuMWMwIDEuNiAwIDEuNi0xLjYgMS42aC04Ni4zYy0xLjIgMC0xLjYtLjMtMS42LTEuNVYxLjljMC0xLjEuMy0xLjUgMS41LTEuNWg4Ni42YzEuMiAwIDEuNC40IDEuNCAxLjV2NDMuM3oiIGZpbGw9IiMxNTY1YzAiLz48L3N2Zz4=",
-  '5x2': "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguM2MtMS45IDAtMS45IDAtMS45LTEuOVYxLjhjMC0xLjggMC0xLjggMS44LTEuOGg4OC40em0wIDkzLjV2ODljMCAuOS0uMiAxLjEtMS4xIDEuMUg0NjhWOTUuNGMwLTEuOCAwLTEuOCAxLjgtMS44aDc1LjljNC4yLS4xIDguNC0uMSAxMi41LS4xeiIgZmlsbD0iI2NiY2JjYiIvPjxnIGZpbGw9IiMxNTY1YzAiPjxwYXRoIGQ9Ik0xODMuOCAxODMuNUg5My42Vjk1LjFjMC0xLjYgMC0xLjcgMS42LTEuN0gxODJjMS43IDAgMS43IDAgMS43IDEuOGwuMSA4OC4zem0yODAuOSAwaC05MC4yVjk1LjJjMC0xLjggMC0xLjggMS43LTEuOGg4Ni43YzEuNyAwIDEuNyAwIDEuNyAxLjh2ODYuNmMwIC42LjEgMS4yLjEgMS43em0tMzc0LjcgMEgwVjk0LjljMC0xLjIuMy0xLjUgMS41LTEuNWg4N2MxLjYgMCAxLjYgMCAxLjYgMS42djg3LjFjMCAuNS0uMSAxLS4xIDEuNHptMTg3LjMgMGgtOTBjMC0uNC0uMS0uOS0uMS0xLjNWOTUuM2MwLTEuNyAwLTEuNyAxLjctMS43aDg2LjdjMS43IDAgMS43IDAgMS43IDEuN3Y4OC4yem05My42IDBoLTkwVjk1LjRjMC0xLjggMC0xLjggMS44LTEuOGg4Ni41YzEuOCAwIDEuOCAwIDEuOCAxLjh2ODYuN2MtLjEuNS0uMSAxLS4xIDEuNHpNMTM4LjggOTAuMUg5NS4xYy0xLjIgMC0xLjYtLjMtMS42LTEuNVYxLjRDOTMuNi4zIDkzLjkgMCA5NSAwaDg3LjRjMS4xIDAgMS40LjQgMS40IDEuNHY4Ny4yYzAgMS4xLS4zIDEuNS0xLjUgMS41aC00My41em0yODAuNiAwSDM3NmMtMS42IDAtMS42IDAtMS42LTEuNnYtODdjMC0xLjIuMi0xLjUgMS41LTEuNWg4Ny4yYzEuMiAwIDEuNS4zIDEuNSAxLjV2ODdjMCAxLjYgMCAxLjYtMS43IDEuNmgtNDMuNXpNLjIgNDUuMVYxLjdDLjIuMS4yLjEgMS45LjFoODYuOGMxLjYgMCAxLjYgMCAxLjYgMS43djg2LjdjMCAxLjYgMCAxLjYtMS42IDEuNkgxLjljLTEuNiAwLTEuNiAwLTEuNi0xLjdMLjIgNDUuMXoiLz48cGF0aCBkPSJNMjc3LjMgNDUuMXY0My40YzAgMS42IDAgMS42LTEuNiAxLjZoLTg2LjljLTEuMiAwLTEuNi0uMy0xLjYtMS41VjEuNWMwLTEuMi40LTEuNCAxLjUtMS40aDg3LjJjMS4yIDAgMS40LjQgMS40IDEuNXY0My41ek0zMjUuOCA5MGgtNDMuM2MtMS42IDAtMS42IDAtMS42LTEuNVYxLjZjMC0xLjIuMy0xLjUgMS41LTEuNWg4Ny4xYzEuMiAwIDEuNS4zIDEuNSAxLjV2ODYuOGMwIDEuNiAwIDEuNi0xLjYgMS42aC00My42eiIvPjwvZz48L3N2Zz4=",
-  '6x1': "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguNWMtMS42IDAtMS42IDAtMS42LTEuNlYxLjdjMC0xLjYgMC0xLjYgMS42LTEuNmw4OC41LS4xeiIgZmlsbD0iIzE1NjVjMCIvPjxwYXRoIGQ9Ik05MC4yIDE4My41SDBWOTUuMWMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjdjMS44IDAgMS44IDAgMS44IDEuOHY4OC4zem05My42IDBIOTMuNlY5NS4zYzAtMS45IDAtMS45IDEuOS0xLjlIMTgyYzEuOCAwIDEuOCAwIDEuOCAxLjh2ODguM3ptMjgwLjkgMGgtOTAuMlY5NS4xYzAtMS43IDAtMS43IDEuNi0xLjdINDYzYzEuNiAwIDEuNiAwIDEuNiAxLjd2NjQuMWwuMSAyNC4zem05My41LTkwdjg5YzAgLjktLjIgMS4xLTEuMSAxLjFINDY4Vjk1LjJjMC0xLjcgMC0xLjcgMS43LTEuN2g4OC41em0tMjgwLjkgOTBoLTkwVjk0LjhjMC0uOS4xLTEuNSAxLjItMS41SDI3NmMuOSAwIDEuMi4zIDEuMiAxLjJsLjEgODl6bTkzLjYgMGgtOTBWOTUuMWMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjVjMS44IDAgMS44IDAgMS44IDEuOHY4OC4zeiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik0wIDQ1LjFWMS41QzAgLjMuMyAwIDEuNCAwaDg3LjNjMS4yIDAgMS41LjMgMS40IDEuNXY4Ny4xYzAgMS4yLS4zIDEuNS0xLjUgMS41SDEuNGMtMS4zIDAtMS41LS40LTEuNS0xLjZMMCA0NS4xem05My42LS4xVjEuNUM5My42LjMgOTMuOSAwIDk1IDBoODcuM2MxLjIgMCAxLjQuMyAxLjQgMS41djg3LjJjMCAxLjItLjQgMS40LTEuNSAxLjRIOTVjLTEuMiAwLTEuNS0uNC0xLjUtMS41bC4xLTQzLjZ6TTQxOS43IDBoNDMuNGMxLjIgMCAxLjYuMiAxLjYgMS41djg3LjFjMCAxLjItLjMgMS41LTEuNSAxLjVIMzc2Yy0xLjEgMC0xLjUtLjMtMS41LTEuNFYxLjVjMC0xLjIuMy0xLjQgMS41LTEuNGw0My43LS4xek0yNzcuMyA0NS4xdjQzLjNjMCAxLjYgMCAxLjYtMS42IDEuNmgtODYuOGMtMS43IDAtMS43IDAtMS43LTEuNlYxLjVjMC0xLjIuMy0xLjUgMS41LTEuNWg4Ny4yYzEuMiAwIDEuNC40IDEuNCAxLjV2NDMuNnptMy42LS4yVjEuNGMwLTEuMS4zLTEuNSAxLjQtMS41aDg3LjJjMS4zIDAgMS41LjQgMS41IDEuNnY4Ni45YzAgMS42IDAgMS42LTEuNSAxLjZoLTg3Yy0xLjEgMC0xLjUtLjMtMS41LTEuNGwtLjEtNDMuN3oiIGZpbGw9IiMxNTY1YzAiLz48L3N2Zz4=",
-  '6x2': "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOC4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FtYWRhXzEiIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyINCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiINCgkgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTU4LjIgMTgzLjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMxNTY1QzA7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01NTguMiwwdjkwLjFoLTg4LjVjLTEuNiwwLTEuNiwwLTEuNi0xLjZWMS43YzAtMS42LDAtMS42LDEuNi0xLjZDNDY5LjcsMC4xLDU1OC4yLDAsNTU4LjIsMHoiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05MC4yLDE4My41SDBWOTUuMWMwLTEuNywwLTEuNywxLjctMS43aDg2LjdjMS44LDAsMS44LDAsMS44LDEuOFYxODMuNXogTTE4My44LDE4My41SDkzLjZWOTUuMw0KCWMwLTEuOSwwLTEuOSwxLjktMS45SDE4MmMxLjgsMCwxLjgsMCwxLjgsMS44TDE4My44LDE4My41TDE4My44LDE4My41eiBNNDY0LjcsMTgzLjVoLTkwLjJWOTUuMWMwLTEuNywwLTEuNywxLjYtMS43SDQ2Mw0KCWMxLjYsMCwxLjYsMCwxLjYsMS43djY0LjFMNDY0LjcsMTgzLjVMNDY0LjcsMTgzLjV6IE01NTguMiw5My41djg5YzAsMC45LTAuMiwxLjEtMS4xLDEuMUg0NjhWOTUuMmMwLTEuNywwLTEuNywxLjctMS43SDU1OC4yDQoJTDU1OC4yLDkzLjV6IE0yNzcuMywxODMuNWgtOTBWOTQuOGMwLTAuOSwwLjEtMS41LDEuMi0xLjVIMjc2YzAuOSwwLDEuMiwwLjMsMS4yLDEuMkwyNzcuMywxODMuNUwyNzcuMywxODMuNXogTTM3MC45LDE4My41aC05MA0KCVY5NS4xYzAtMS43LDAtMS43LDEuNy0xLjdoODYuNWMxLjgsMCwxLjgsMCwxLjgsMS44VjE4My41eiIvPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsNDUuMVYxLjVDMCwwLjMsMC4zLDAsMS40LDBoODcuM2MxLjIsMCwxLjUsMC4zLDEuNCwxLjV2ODcuMWMwLDEuMi0wLjMsMS41LTEuNSwxLjVIMS40DQoJYy0xLjMsMC0xLjUtMC40LTEuNS0xLjZMMCw0NS4xeiBNOTMuNiw0NVYxLjVDOTMuNiwwLjMsOTMuOSwwLDk1LDBoODcuM2MxLjIsMCwxLjQsMC4zLDEuNCwxLjV2ODcuMmMwLDEuMi0wLjQsMS40LTEuNSwxLjRIOTUNCgljLTEuMiwwLTEuNS0wLjQtMS41LTEuNUw5My42LDQ1eiBNNDE5LjcsMGg0My40YzEuMiwwLDEuNiwwLjIsMS42LDEuNXY4Ny4xYzAsMS4yLTAuMywxLjUtMS41LDEuNUgzNzZjLTEuMSwwLTEuNS0wLjMtMS41LTEuNFYxLjUNCgljMC0xLjIsMC4zLTEuNCwxLjUtMS40QzM3NiwwLjEsNDE5LjcsMCw0MTkuNywweiBNMjc3LjMsNDUuMXY0My4zYzAsMS42LDAsMS42LTEuNiwxLjZoLTg2LjhjLTEuNywwLTEuNywwLTEuNy0xLjZWMS41DQoJYzAtMS4yLDAuMy0xLjUsMS41LTEuNWg4Ny4yYzEuMiwwLDEuNCwwLjQsMS40LDEuNUwyNzcuMyw0NS4xTDI3Ny4zLDQ1LjF6IE0yODAuOSw0NC45VjEuNGMwLTEuMSwwLjMtMS41LDEuNC0xLjVoODcuMg0KCWMxLjMsMCwxLjUsMC40LDEuNSwxLjZ2ODYuOWMwLDEuNiwwLDEuNi0xLjUsMS42aC04N2MtMS4xLDAtMS41LTAuMy0xLjUtMS40TDI4MC45LDQ0Ljl6Ii8+DQo8L3N2Zz4NCg==",
+  '1x1':
+    'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguM2MtMS45IDAtMS45IDAtMS45LTEuOVYxLjhjMC0xLjggMC0xLjggMS44LTEuOGg4OC40em0tNDY4IDE4My41SDBWOTUuMWMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjdjMS44IDAgMS44IDAgMS44IDEuOHY4OC4zem05My42IDBIOTMuNlY5NS4zYzAtMS45IDAtMS45IDEuOS0xLjlIMTgyYzEuOCAwIDEuOCAwIDEuOCAxLjh2ODguM3ptMjgwLjkgMGgtOTAuMlY5NS4xYzAtMS43IDAtMS43IDEuNi0xLjdINDYzYzEuNiAwIDEuNiAwIDEuNiAxLjd2NjIuMmwuMSAyNi4yem05My41LTkwdjg5YzAgLjktLjIgMS4xLTEuMSAxLjFINDY4Vjk1LjJjMC0xLjcgMC0xLjcgMS43LTEuN2g4OC41em0tMjgwLjkgOTBoLTkwVjk0LjljMC0uOS4xLTEuNSAxLjItMS41SDI3NmMuOSAwIDEuMi4zIDEuMiAxLjJsLjEgODguOXptOTMuNiAwaC05MFY5NS4xYzAtMS43IDAtMS43IDEuNy0xLjdoODYuNWMxLjggMCAxLjggMCAxLjggMS44djg4LjN6IiBmaWxsPSIjY2JjYmNiIi8+PHBhdGggZD0iTTAgNDUuMVYxLjVDMCAuMy4zIDAgMS40IDBoODcuM2MxLjIgMCAxLjUuMyAxLjQgMS41djg3LjFjMCAxLjItLjMgMS41LTEuNSAxLjVIMS40Yy0xLjMgMC0xLjUtLjQtMS41LTEuNkwwIDQ1LjF6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTkzLjYgNDQuOVYxLjVjMC0xLjYgMC0xLjYgMS42LTEuNmg4Ny4xYzEuNSAwIDEuNSAwIDEuNSAxLjZ2ODYuOGMwIDEuNiAwIDEuNi0xLjYgMS42SDk1LjRjLTEuOCAwLTEuOCAwLTEuOC0xLjhWNDQuOXptMjgwLjkuMlYxLjZjMC0xLjYgMC0xLjYgMS42LTEuNmg4Ny4xYzEuNSAwIDEuNSAwIDEuNSAxLjZ2ODYuN2MwIDEuOCAwIDEuOC0xLjggMS44aC04Ni43Yy0xLjcgMC0xLjcgMC0xLjctMS43VjQ1LjF6bS0xNDIuMSA0NUgxODljLTEuNiAwLTEuNiAwLTEuNi0xLjV2LTg3YzAtMS42IDAtMS42IDEuNi0xLjZoODYuOGMxLjYgMCAxLjYgMCAxLjYgMS41djg3YzAgMS42IDAgMS42LTEuNiAxLjZoLTQzLjR6bTQ4LjUtNDUuMlYxLjVjMC0xLjYgMC0xLjYgMS42LTEuNmg4Ni44YzEuNiAwIDEuNiAwIDEuNiAxLjV2ODdjMCAxLjYgMCAxLjYtMS42IDEuNmgtODYuOGMtMS42IDAtMS42IDAtMS42LTEuNlY0NC45eiIgZmlsbD0iI2NiY2JjYiIvPjwvc3ZnPg==',
+  '2x1':
+    'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTI3Ny4zIDE4My41aC05MC4yVjk0LjJjMC0uNi4yLS45LjgtLjloODcuN2MxIDAgMS42IDAgMS42IDEuM2wuMSA4OC45ek01NTguMiAwdjkwLjFoLTg4LjNjLTEuOSAwLTEuOSAwLTEuOS0xLjlWMS44YzAtMS44IDAtMS44IDEuOC0xLjhoODguNHptLTQ2OCAxODMuNUgwVjk1LjFjMC0xLjcgMC0xLjcgMS43LTEuN2g4Ni43YzEuOCAwIDEuOCAwIDEuOCAxLjh2ODguM3ptOTMuNiAwSDkzLjZWOTUuM2MwLTEuOSAwLTEuOSAxLjktMS45SDE4MmMxLjggMCAxLjggMCAxLjggMS44djg4LjN6bTI4MC45IDBoLTkwLjJWOTUuMWMwLTEuNyAwLTEuNyAxLjYtMS43SDQ2M2MxLjYgMCAxLjYgMCAxLjYgMS43djYxLjJsLjEgMjcuMnptOTMuNS05MHY4OWMwIC45LS4yIDEuMS0xLjEgMS4xSDQ2OFY5NS4yYzAtMS43IDAtMS43IDEuNy0xLjdoODguNXptLTE4Ny4xIDkwaC05MC4yVjk0LjZjMC0xLjEuNC0xLjUgMS41LTEuNWw2LjguM2g4MC4yYzEuMSAwIDEuNS4yIDEuNSAxLjRsLjIgNjEuOS41IDI1LjFjMCAuNy4xIDEuMy0uNSAxLjd6IiBmaWxsPSIjY2JjYmNiIi8+PHBhdGggZD0iTTE4My44IDQ1LjF2NDMuNWMwIDEuMS0uMiAxLjYtMS41IDEuNkg5NWMtMS4yIDAtMS40LS40LTEuNC0xLjVWMS41QzkzLjYuMiA5NCAwIDk1LjEgMGg4Ny4zYzEuMiAwIDEuNC40IDEuNCAxLjV2NDMuNnpNNDUuMSAwaDQzLjdjMS4xIDAgMS40LjIgMS40IDEuNHY4Ny4zYzAgMS4xLS40IDEuNC0xLjQgMS40SDEuNGMtMS4xIDAtMS4zLS4zLTEuMy0xLjNMMCAxLjNDMCAuMi4zIDAgMS4zIDBoNDMuOHoiIGZpbGw9IiMxNTY1YzAiLz48cGF0aCBkPSJNNDE5LjYgOTAuMWgtNDMuNWMtMS42IDAtMS42IDAtMS42LTEuNlYxLjZjMC0xLjYgMC0xLjYgMS42LTEuNmg4Ny4xYzEuNSAwIDEuNSAwIDEuNSAxLjZ2ODYuN2MwIDEuOCAwIDEuOC0xLjggMS44aC00My4zek0yNzcuMyA0NC45djQzLjVjMCAxLjcgMCAxLjctMS42IDEuN2gtODYuOGMtMS42IDAtMS42IDAtMS42LTEuNnYtODdjMC0xLjUgMC0xLjUgMS42LTEuNWg4Ni44YzEuNiAwIDEuNiAwIDEuNiAxLjZ2NDMuM3ptOTMuNi4zdjQzLjJjMCAxLjcgMCAxLjctMS42IDEuN2gtODYuOGMtMS42IDAtMS42IDAtMS42LTEuNnYtODdjMC0xLjUgMC0xLjUgMS42LTEuNWg4Ni44YzEuNiAwIDEuNiAwIDEuNiAxLjZ2NDMuNnoiIGZpbGw9IiNjYmNiY2IiLz48L3N2Zz4=',
+  '3x1':
+    'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTI3Ny4zIDE4My41aC05MC4yVjk0LjJjMC0uNi4yLS45LjgtLjloODcuOGMxIDAgMS42IDAgMS42IDEuM3Y4OC45ek01NTguMiAwdjkwLjFoLTg4LjNjLTEuOSAwLTEuOSAwLTEuOS0xLjlWMS44YzAtMS44IDAtMS44IDEuOC0xLjhoODguNHptLTQ2OCAxODMuNUgwVjk1LjFjMC0xLjcgMC0xLjcgMS43LTEuN2g4Ni43YzEuOCAwIDEuOCAwIDEuOCAxLjh2ODguM3ptOTMuNiAwSDkzLjZWOTUuM2MwLTEuOSAwLTEuOSAxLjktMS45SDE4MmMxLjggMCAxLjggMCAxLjggMS44djg4LjN6bTI4MC45IDBoLTkwLjJWOTUuMWMwLTEuNyAwLTEuNyAxLjYtMS43SDQ2M2MxLjYgMCAxLjYgMCAxLjYgMS43VjE1N2wuMSAyNi41em05My41LTkwdjg5YzAgLjktLjIgMS4xLTEuMSAxLjFINDY4Vjk1LjJjMC0xLjcgMC0xLjcgMS43LTEuN2g4OC41em0tMTg3LjEgOTBoLTkwLjJWOTQuNmMwLTEuMS40LTEuNSAxLjUtMS41bDYuOC4zaDgwLjJjMS4xIDAgMS41LjIgMS41IDEuNGwuMiA2MS45LjUgMjUuMWMwIC43LjEgMS4zLS41IDEuN3oiIGZpbGw9IiNjYmNiY2IiLz48cGF0aCBkPSJNNDUuMSA5MC4xSDEuNGMtMS4xIDAtMS41LS4zLTEuNS0xLjRMMCAxLjVDMCAuMy4zIDAgMS41IDBoODcuM2MxLjIgMCAxLjQuNCAxLjQgMS41djg3LjFjMCAxLjItLjMgMS41LTEuNSAxLjVINDUuMXpNMTM4LjggMGg0My41YzEuMSAwIDEuNS4zIDEuNSAxLjR2ODcuMmMwIDEuMi0uMyAxLjQtMS41IDEuNEg5NS4xYy0xLjIgMC0xLjUtLjMtMS41LTEuNVYxLjRDOTMuNi4yIDk0IDAgOTUuMSAwaDQzLjd6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTM3NC41IDQ1LjFWMS42YzAtMS42IDAtMS42IDEuNi0xLjZoODcuMWMxLjYgMCAxLjYgMCAxLjYgMS42djg2LjhjMCAxLjcgMCAxLjctMS43IDEuN2gtODYuOWMtMS42IDAtMS42IDAtMS42LTEuNWwtLjEtNDMuNXoiIGZpbGw9IiNjYmNiY2IiLz48cGF0aCBkPSJNMjc3LjMgNDUuMXY0My41YzAgMS41IDAgMS41LTEuNiAxLjVoLTg2LjljLTEuNSAwLTEuNSAwLTEuNS0xLjZWMS42YzAtMS4yLjItMS42IDEuNS0xLjVIMjc2YzEuMiAwIDEuNC40IDEuNCAxLjVsLS4xIDQzLjV6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTM3MC45IDQ1LjJ2NDMuMmMwIDEuNyAwIDEuNy0xLjYgMS43aC04Ni44Yy0xLjYgMC0xLjYgMC0xLjYtMS42di04N2MwLTEuNSAwLTEuNSAxLjYtMS41aDg2LjhjMS42IDAgMS42IDAgMS42IDEuNnY0My42eiIgZmlsbD0iI2NiY2JjYiIvPjwvc3ZnPg==',
+  '3x2':
+    'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTI3Ny4zIDE4My41aC05MC4yVjk1YzAtMS42IDAtMS42IDEuNi0xLjZoODYuOWMxLjcgMCAxLjcgMCAxLjcgMS43djg4LjR6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguM2MtMS45IDAtMS45IDAtMS45LTEuOVYxLjhjMC0xLjggMC0xLjggMS44LTEuOGg4OC40eiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik05MC4yIDE4My41SDBWOTUuMmMwLTEuOS0uMi0xLjggMS43LTEuOGg4Ni43YzEuNyAwIDEuNyAwIDEuNyAxLjh2ODYuNmMuMS42LjEgMS4yLjEgMS43em05My42IDBIOTMuNlY5NS4yYzAtMS44IDAtMS44IDEuNy0xLjhIMTgyYzEuOSAwIDEuNy0uMiAxLjcgMS44bC4xIDg4LjN6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTQ2NC43IDE4My41aC05MC4yVjk1LjFjMC0xLjcgMC0xLjcgMS42LTEuN0g0NjNjMS42IDAgMS42IDAgMS42IDEuN3Y2Mi42bC4xIDI1Ljh6bTkzLjUtOTB2ODljMCAuOS0uMiAxLjEtMS4xIDEuMUg0NjhWOTUuMmMwLTEuNyAwLTEuNyAxLjctMS43aDg4LjV6bS0xODcuMSA5MGgtOTAuMlY5NC42YzAtMS4xLjQtMS41IDEuNS0xLjVsNi44LjNoODAuMmMxLjEgMCAxLjUuMiAxLjUgMS40bC4yIDYxLjguNSAyNS4yYzAgLjcuMSAxLjMtLjUgMS43eiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik00NS4xIDkwLjFIMS40Yy0xLjEgMC0xLjUtLjMtMS41LTEuNEwwIDEuNUMwIC4zLjMgMCAxLjUgMGg4Ny4zYzEuMiAwIDEuNC40IDEuNCAxLjV2ODcuMWMwIDEuMi0uMyAxLjUtMS41IDEuNUg0NS4xek0xMzguOCAwaDQzLjVjMS4xIDAgMS41LjMgMS41IDEuNHY4Ny4yYzAgMS4yLS4zIDEuNC0xLjUgMS40SDk1LjFjLTEuMiAwLTEuNS0uMy0xLjUtMS41VjEuNEM5My42LjIgOTQgMCA5NS4xIDBoNDMuN3oiIGZpbGw9IiMxNTY1YzAiLz48cGF0aCBkPSJNMzc0LjUgNDUuMVYxLjZjMC0xLjYgMC0xLjYgMS42LTEuNmg4Ny4xYzEuNiAwIDEuNiAwIDEuNiAxLjZ2ODYuOGMwIDEuNyAwIDEuNy0xLjcgMS43aC04Ni45Yy0xLjYgMC0xLjYgMC0xLjYtMS41bC0uMS00My41eiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik0yNzcuMyA0NS4xdjQzLjVjMCAxLjUgMCAxLjUtMS42IDEuNWgtODYuOWMtMS41IDAtMS41IDAtMS41LTEuNlYxLjZjMC0xLjIuMi0xLjYgMS41LTEuNUgyNzZjMS4yIDAgMS40LjQgMS40IDEuNWwtLjEgNDMuNXoiIGZpbGw9IiMxNTY1YzAiLz48cGF0aCBkPSJNMzcwLjkgNDUuMnY0My4yYzAgMS43IDAgMS43LTEuNiAxLjdoLTg2LjhjLTEuNiAwLTEuNiAwLTEuNi0xLjZ2LTg3YzAtMS41IDAtMS41IDEuNi0xLjVoODYuOGMxLjYgMCAxLjYgMCAxLjYgMS42djQzLjZ6IiBmaWxsPSIjY2JjYmNiIi8+PC9zdmc+',
+  '4x1':
+    'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguM2MtMS45IDAtMS45IDAtMS45LTEuOVYxLjhjMC0xLjggMC0xLjggMS44LTEuOGg4OC40em0tNDY4IDE4My41SDBWOTUuMWMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjdjMS44IDAgMS44IDAgMS44IDEuOHY4OC4zem05My42IDBIOTMuNlY5NS4zYzAtMS45IDAtMS45IDEuOS0xLjlIMTgyYzEuOCAwIDEuOCAwIDEuOCAxLjh2ODguM3ptMjgwLjkgMGgtOTAuMlY5NS4xYzAtMS43IDAtMS43IDEuNi0xLjdINDYzYzEuNiAwIDEuNiAwIDEuNiAxLjd2NjQuMWwuMSAyNC4zem05My41LTkwdjg5YzAgLjktLjIgMS4xLTEuMSAxLjFINDY4Vjk1LjJjMC0xLjcgMC0xLjcgMS43LTEuN2g4OC41em0tMjgwLjkgOTBoLTkwVjk0LjhjMC0uOS4xLTEuNSAxLjItMS41SDI3NmMuOSAwIDEuMi4zIDEuMiAxLjJsLjEgODl6bTkzLjYgMGgtOTBWOTUuMWMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjVjMS44IDAgMS44IDAgMS44IDEuOHY4OC4zeiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik0wIDQ1LjFWMS41QzAgLjMuMyAwIDEuNCAwaDg3LjNjMS4yIDAgMS41LjMgMS40IDEuNXY4Ny4xYzAgMS4yLS4zIDEuNS0xLjUgMS41SDEuNGMtMS4zIDAtMS41LS40LTEuNS0xLjZMMCA0NS4xem05My42LS4yVjEuNEM5My42LjMgOTMuOSAwIDk1IDBoODcuM2MxLjIgMCAxLjQuMyAxLjQgMS41djg3LjJjMCAxLjItLjQgMS40LTEuNSAxLjRIOTVjLTEuMiAwLTEuNS0uNC0xLjUtMS41bC4xLTQzLjd6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTM3NC41IDQ1LjFWMS42YzAtMS42IDAtMS42IDEuNi0xLjZoODcuMWMxLjUgMCAxLjUgMCAxLjUgMS42djg2LjdjMCAxLjggMCAxLjgtMS44IDEuOGgtODYuN2MtMS43IDAtMS43IDAtMS43LTEuN1Y0NS4xeiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik0yNzcuMyA0NS4xdjQzLjRjMCAxLjYgMCAxLjYtMS42IDEuNmgtODYuOGMtMS42IDAtMS42IDAtMS42LTEuNlYxLjdjMC0xLjYgMC0xLjYgMS41LTEuNmg4N2MxLjUgMCAxLjYgMCAxLjYgMS41bC0uMSA0My41em0zLjYtLjJWMS40YzAtMS4xLjMtMS41IDEuNC0xLjVoODcuMmMxLjIgMCAxLjUuMyAxLjUgMS41djg3LjJjMCAxLjEtLjMgMS40LTEuNCAxLjRoLTg3LjNjLTEuMSAwLTEuNC0uNC0xLjQtMS40VjQ0Ljl6IiBmaWxsPSIjMTU2NWMwIi8+PC9zdmc+',
+  '4x2':
+    'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguM2MtMS45IDAtMS45IDAtMS45LTEuOVYxLjhjMC0xLjggMC0xLjggMS44LTEuOGg4OC40eiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik05MC4yIDE4My41SDBWOTUuMmMwLTEuOS0uMi0xLjggMS43LTEuOGg4Ni43YzEuNyAwIDEuNyAwIDEuNyAxLjh2ODYuNmMuMS42LjEgMS4yLjEgMS43em05My42IDBIOTMuNlY5NS4yYzAtMS44IDAtMS44IDEuNy0xLjhIMTgyYzEuOSAwIDEuNy0uMiAxLjcgMS44bC4xIDg4LjN6IiBmaWxsPSIjMTU2NWMwIi8+PHBhdGggZD0iTTQ2NC42IDE4My41aC05MC4yVjk1LjFjMC0xLjcgMC0xLjcgMS42LTEuN2g4Ni45YzEuNiAwIDEuNiAwIDEuNiAxLjd2NjYuNWwuMSAyMS45em05My42LTkwdjg5YzAgLjktLjIgMS4xLTEuMSAxLjFINDY4Vjk1LjRjMC0xLjggMC0xLjggMS44LTEuOGg3NS45YzQuMi0uMSA4LjMtLjEgMTIuNS0uMXoiIGZpbGw9IiNjYmNiY2IiLz48cGF0aCBkPSJNMjc3LjMgMTgzLjVoLTkwYzAtLjUtLjEtMS0uMS0xLjRWOTUuMmMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjdjMS43IDAgMS43IDAgMS43IDEuN3Y4OC4zem05My42IDBoLTkwVjk1YzAtMS42IDAtMS42IDEuNi0xLjZoODYuOGMxLjcgMCAxLjcgMCAxLjcgMS43VjE4MmMtLjEuNi0uMSAxLjEtLjEgMS41ek0xMzguNyA5MC4xSDk1LjNjLTEuNiAwLTEuNiAwLTEuNi0xLjZ2LTg3YzAtMS4zLjQtMS41IDEuNi0xLjVoODcuMWMxLjYgMCAxLjYgMCAxLjYgMS41djg3YzAgMS41IDAgMS41LTEuNiAxLjVsLTQzLjcuMXoiIGZpbGw9IiMxNTY1YzAiLz48cGF0aCBkPSJNMzc0LjUgNDVWMS42YzAtMS42IDAtMS42IDEuNi0xLjZoODcuMWMxLjYgMCAxLjYgMCAxLjYgMS42djg2LjhjMCAxLjcgMCAxLjctMS43IDEuN2gtODYuOWMtMS42IDAtMS42IDAtMS42LTEuNWwtLjEtNDMuNnoiIGZpbGw9IiNjYmNiY2IiLz48cGF0aCBkPSJNMjc3LjMgNDV2NDMuNmMwIDEuMS0uMyAxLjUtMS41IDEuNWgtODcuMmMtMS4yIDAtMS40LS40LTEuNC0xLjVWMS41YzAtMS4yLjMtMS41IDEuNS0xLjVoODcuMWMxLjMgMCAxLjUuNCAxLjUgMS41VjQ1em0zLjYuMVYxLjVjMC0xLjIuMy0xLjUgMS41LTEuNWg4Ny4yYzEuMiAwIDEuNC4zIDEuNCAxLjV2ODcuMWMwIDEuMi0uMyAxLjUtMS41IDEuNWgtODcuMWMtMS4zIDAtMS41LS40LTEuNS0xLjZWNDUuMXptLTIzNS42IDQ1SDEuOGMtMS42IDAtMS42IDAtMS42LTEuNlYxLjdDLjIuMS4yLjEgMS44LjFoODdjMS42IDAgMS42IDAgMS42IDEuNnY4Ni44YzAgMS42IDAgMS42LTEuNyAxLjZINDUuM3oiIGZpbGw9IiMxNTY1YzAiLz48L3N2Zz4=',
+  '5x1':
+    'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTE4My44IDE4My41SDkzLjZWOTUuNGMwLTEuOCAwLTEuOCAxLjgtMS44SDE4MmMxLjggMCAxLjggMCAxLjggMS44djg4LjF6bTI4MC45IDBoLTkwLjJWOTUuMmMwLTEuNiAwLTEuNiAxLjUtMS42aDg3LjFjMS41IDAgMS42IDAgMS42IDEuNnY4OC4zek01NTguMiAwdjg5LjhINDcwYy0xLjcgMC0xLjcgMC0xLjctMS44VjEuN2MwLTEuOCAwLTEuOCAxLjctMS44bDg4LjIuMXpNOTAgMTgzLjVIMFY5NS40YzAtMS43IDAtMS43IDEuOC0xLjdoODYuNWMxLjggMCAxLjggMCAxLjggMS43djg2LjhjLS4xLjUtLjEuOS0uMSAxLjN6bTE4Ny4zIDBoLTkwVjk0LjhjMC0xIC41LTEuMiAxLjMtMS4ySDI3NmMxIDAgMS4zLjMgMS4zIDEuM3Y4OC42em05My42IDBoLTkwVjk1LjRjMC0xLjcgMC0xLjcgMS44LTEuN2g4Ni41YzEuOCAwIDEuOCAwIDEuOCAxLjd2ODYuOGMtLjEuNS0uMS45LS4xIDEuM3ptMTg3LjMtODkuOHY4OC44YzAgLjktLjIgMS4xLTEuMSAxLjFoLTg4LjlWOTUuNWMwLTEuOCAwLTEuOCAxLjgtMS44aDg4LjJ6IiBmaWxsPSIjY2JjYmNiIi8+PHBhdGggZD0iTTAgNDQuOVYxLjVDMCAuMy4zIDAgMS40IDBoODcuM2MxLjIgMCAxLjUuMyAxLjUgMS41djg3LjFjMCAxLjItLjMgMS42LTEuNSAxLjZIMS41Yy0xLjMgMC0xLjUtLjQtMS41LTEuNlY0NC45em0xODMuOC4zdjQzLjVjMCAxLjEtLjIgMS40LTEuNCAxLjRIOTVjLTEuMSAwLTEuNC0uNC0xLjQtMS40VjEuNGMwLTEuMS4zLTEuMyAxLjMtMS4zaDg3LjZjMS4xIDAgMS4zLjMgMS4zIDEuM3Y0My44em05My41IDB2NDMuNGMwIDEuMi0uMiAxLjUtMS41IDEuNWgtODcuMWMtMS4yIDAtMS41LS4zLTEuNS0xLjV2LTg3YzAtMS42IDAtMS42IDEuNi0xLjZoODdjMS41IDAgMS41IDAgMS41IDEuNnY0My42em0zLjYtLjNWMS40YzAtMS4xLjMtMS41IDEuNC0xLjVoODcuMmMxLjIgMCAxLjUuMyAxLjUgMS41djg3LjJjMCAxLjEtLjMgMS40LTEuNCAxLjRoLTg3LjNjLTEuMSAwLTEuNC0uNC0xLjQtMS40VjQ0Ljl6bTE4My40LjN2NDMuMWMwIDEuNiAwIDEuNi0xLjYgMS42aC04Ni4zYy0xLjIgMC0xLjYtLjMtMS42LTEuNVYxLjljMC0xLjEuMy0xLjUgMS41LTEuNWg4Ni42YzEuMiAwIDEuNC40IDEuNCAxLjV2NDMuM3oiIGZpbGw9IiMxNTY1YzAiLz48L3N2Zz4=',
+  '5x2':
+    'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguM2MtMS45IDAtMS45IDAtMS45LTEuOVYxLjhjMC0xLjggMC0xLjggMS44LTEuOGg4OC40em0wIDkzLjV2ODljMCAuOS0uMiAxLjEtMS4xIDEuMUg0NjhWOTUuNGMwLTEuOCAwLTEuOCAxLjgtMS44aDc1LjljNC4yLS4xIDguNC0uMSAxMi41LS4xeiIgZmlsbD0iI2NiY2JjYiIvPjxnIGZpbGw9IiMxNTY1YzAiPjxwYXRoIGQ9Ik0xODMuOCAxODMuNUg5My42Vjk1LjFjMC0xLjYgMC0xLjcgMS42LTEuN0gxODJjMS43IDAgMS43IDAgMS43IDEuOGwuMSA4OC4zem0yODAuOSAwaC05MC4yVjk1LjJjMC0xLjggMC0xLjggMS43LTEuOGg4Ni43YzEuNyAwIDEuNyAwIDEuNyAxLjh2ODYuNmMwIC42LjEgMS4yLjEgMS43em0tMzc0LjcgMEgwVjk0LjljMC0xLjIuMy0xLjUgMS41LTEuNWg4N2MxLjYgMCAxLjYgMCAxLjYgMS42djg3LjFjMCAuNS0uMSAxLS4xIDEuNHptMTg3LjMgMGgtOTBjMC0uNC0uMS0uOS0uMS0xLjNWOTUuM2MwLTEuNyAwLTEuNyAxLjctMS43aDg2LjdjMS43IDAgMS43IDAgMS43IDEuN3Y4OC4yem05My42IDBoLTkwVjk1LjRjMC0xLjggMC0xLjggMS44LTEuOGg4Ni41YzEuOCAwIDEuOCAwIDEuOCAxLjh2ODYuN2MtLjEuNS0uMSAxLS4xIDEuNHpNMTM4LjggOTAuMUg5NS4xYy0xLjIgMC0xLjYtLjMtMS42LTEuNVYxLjRDOTMuNi4zIDkzLjkgMCA5NSAwaDg3LjRjMS4xIDAgMS40LjQgMS40IDEuNHY4Ny4yYzAgMS4xLS4zIDEuNS0xLjUgMS41aC00My41em0yODAuNiAwSDM3NmMtMS42IDAtMS42IDAtMS42LTEuNnYtODdjMC0xLjIuMi0xLjUgMS41LTEuNWg4Ny4yYzEuMiAwIDEuNS4zIDEuNSAxLjV2ODdjMCAxLjYgMCAxLjYtMS43IDEuNmgtNDMuNXpNLjIgNDUuMVYxLjdDLjIuMS4yLjEgMS45LjFoODYuOGMxLjYgMCAxLjYgMCAxLjYgMS43djg2LjdjMCAxLjYgMCAxLjYtMS42IDEuNkgxLjljLTEuNiAwLTEuNiAwLTEuNi0xLjdMLjIgNDUuMXoiLz48cGF0aCBkPSJNMjc3LjMgNDUuMXY0My40YzAgMS42IDAgMS42LTEuNiAxLjZoLTg2LjljLTEuMiAwLTEuNi0uMy0xLjYtMS41VjEuNWMwLTEuMi40LTEuNCAxLjUtMS40aDg3LjJjMS4yIDAgMS40LjQgMS40IDEuNXY0My41ek0zMjUuOCA5MGgtNDMuM2MtMS42IDAtMS42IDAtMS42LTEuNVYxLjZjMC0xLjIuMy0xLjUgMS41LTEuNWg4Ny4xYzEuMiAwIDEuNS4zIDEuNSAxLjV2ODYuOGMwIDEuNiAwIDEuNi0xLjYgMS42aC00My42eiIvPjwvZz48L3N2Zz4=',
+  '6x1':
+    'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguNWMtMS42IDAtMS42IDAtMS42LTEuNlYxLjdjMC0xLjYgMC0xLjYgMS42LTEuNmw4OC41LS4xeiIgZmlsbD0iIzE1NjVjMCIvPjxwYXRoIGQ9Ik05MC4yIDE4My41SDBWOTUuMWMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjdjMS44IDAgMS44IDAgMS44IDEuOHY4OC4zem05My42IDBIOTMuNlY5NS4zYzAtMS45IDAtMS45IDEuOS0xLjlIMTgyYzEuOCAwIDEuOCAwIDEuOCAxLjh2ODguM3ptMjgwLjkgMGgtOTAuMlY5NS4xYzAtMS43IDAtMS43IDEuNi0xLjdINDYzYzEuNiAwIDEuNiAwIDEuNiAxLjd2NjQuMWwuMSAyNC4zem05My41LTkwdjg5YzAgLjktLjIgMS4xLTEuMSAxLjFINDY4Vjk1LjJjMC0xLjcgMC0xLjcgMS43LTEuN2g4OC41em0tMjgwLjkgOTBoLTkwVjk0LjhjMC0uOS4xLTEuNSAxLjItMS41SDI3NmMuOSAwIDEuMi4zIDEuMiAxLjJsLjEgODl6bTkzLjYgMGgtOTBWOTUuMWMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjVjMS44IDAgMS44IDAgMS44IDEuOHY4OC4zeiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik0wIDQ1LjFWMS41QzAgLjMuMyAwIDEuNCAwaDg3LjNjMS4yIDAgMS41LjMgMS40IDEuNXY4Ny4xYzAgMS4yLS4zIDEuNS0xLjUgMS41SDEuNGMtMS4zIDAtMS41LS40LTEuNS0xLjZMMCA0NS4xem05My42LS4xVjEuNUM5My42LjMgOTMuOSAwIDk1IDBoODcuM2MxLjIgMCAxLjQuMyAxLjQgMS41djg3LjJjMCAxLjItLjQgMS40LTEuNSAxLjRIOTVjLTEuMiAwLTEuNS0uNC0xLjUtMS41bC4xLTQzLjZ6TTQxOS43IDBoNDMuNGMxLjIgMCAxLjYuMiAxLjYgMS41djg3LjFjMCAxLjItLjMgMS41LTEuNSAxLjVIMzc2Yy0xLjEgMC0xLjUtLjMtMS41LTEuNFYxLjVjMC0xLjIuMy0xLjQgMS41LTEuNGw0My43LS4xek0yNzcuMyA0NS4xdjQzLjNjMCAxLjYgMCAxLjYtMS42IDEuNmgtODYuOGMtMS43IDAtMS43IDAtMS43LTEuNlYxLjVjMC0xLjIuMy0xLjUgMS41LTEuNWg4Ny4yYzEuMiAwIDEuNC40IDEuNCAxLjV2NDMuNnptMy42LS4yVjEuNGMwLTEuMS4zLTEuNSAxLjQtMS41aDg3LjJjMS4zIDAgMS41LjQgMS41IDEuNnY4Ni45YzAgMS42IDAgMS42LTEuNSAxLjZoLTg3Yy0xLjEgMC0xLjUtLjMtMS41LTEuNGwtLjEtNDMuN3oiIGZpbGw9IiMxNTY1YzAiLz48L3N2Zz4=',
+  '6x2':
+    'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOC4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FtYWRhXzEiIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyINCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiINCgkgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTU4LjIgMTgzLjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMxNTY1QzA7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01NTguMiwwdjkwLjFoLTg4LjVjLTEuNiwwLTEuNiwwLTEuNi0xLjZWMS43YzAtMS42LDAtMS42LDEuNi0xLjZDNDY5LjcsMC4xLDU1OC4yLDAsNTU4LjIsMHoiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05MC4yLDE4My41SDBWOTUuMWMwLTEuNywwLTEuNywxLjctMS43aDg2LjdjMS44LDAsMS44LDAsMS44LDEuOFYxODMuNXogTTE4My44LDE4My41SDkzLjZWOTUuMw0KCWMwLTEuOSwwLTEuOSwxLjktMS45SDE4MmMxLjgsMCwxLjgsMCwxLjgsMS44TDE4My44LDE4My41TDE4My44LDE4My41eiBNNDY0LjcsMTgzLjVoLTkwLjJWOTUuMWMwLTEuNywwLTEuNywxLjYtMS43SDQ2Mw0KCWMxLjYsMCwxLjYsMCwxLjYsMS43djY0LjFMNDY0LjcsMTgzLjVMNDY0LjcsMTgzLjV6IE01NTguMiw5My41djg5YzAsMC45LTAuMiwxLjEtMS4xLDEuMUg0NjhWOTUuMmMwLTEuNywwLTEuNywxLjctMS43SDU1OC4yDQoJTDU1OC4yLDkzLjV6IE0yNzcuMywxODMuNWgtOTBWOTQuOGMwLTAuOSwwLjEtMS41LDEuMi0xLjVIMjc2YzAuOSwwLDEuMiwwLjMsMS4yLDEuMkwyNzcuMywxODMuNUwyNzcuMywxODMuNXogTTM3MC45LDE4My41aC05MA0KCVY5NS4xYzAtMS43LDAtMS43LDEuNy0xLjdoODYuNWMxLjgsMCwxLjgsMCwxLjgsMS44VjE4My41eiIvPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsNDUuMVYxLjVDMCwwLjMsMC4zLDAsMS40LDBoODcuM2MxLjIsMCwxLjUsMC4zLDEuNCwxLjV2ODcuMWMwLDEuMi0wLjMsMS41LTEuNSwxLjVIMS40DQoJYy0xLjMsMC0xLjUtMC40LTEuNS0xLjZMMCw0NS4xeiBNOTMuNiw0NVYxLjVDOTMuNiwwLjMsOTMuOSwwLDk1LDBoODcuM2MxLjIsMCwxLjQsMC4zLDEuNCwxLjV2ODcuMmMwLDEuMi0wLjQsMS40LTEuNSwxLjRIOTUNCgljLTEuMiwwLTEuNS0wLjQtMS41LTEuNUw5My42LDQ1eiBNNDE5LjcsMGg0My40YzEuMiwwLDEuNiwwLjIsMS42LDEuNXY4Ny4xYzAsMS4yLTAuMywxLjUtMS41LDEuNUgzNzZjLTEuMSwwLTEuNS0wLjMtMS41LTEuNFYxLjUNCgljMC0xLjIsMC4zLTEuNCwxLjUtMS40QzM3NiwwLjEsNDE5LjcsMCw0MTkuNywweiBNMjc3LjMsNDUuMXY0My4zYzAsMS42LDAsMS42LTEuNiwxLjZoLTg2LjhjLTEuNywwLTEuNywwLTEuNy0xLjZWMS41DQoJYzAtMS4yLDAuMy0xLjUsMS41LTEuNWg4Ny4yYzEuMiwwLDEuNCwwLjQsMS40LDEuNUwyNzcuMyw0NS4xTDI3Ny4zLDQ1LjF6IE0yODAuOSw0NC45VjEuNGMwLTEuMSwwLjMtMS41LDEuNC0xLjVoODcuMg0KCWMxLjMsMCwxLjUsMC40LDEuNSwxLjZ2ODYuOWMwLDEuNiwwLDEuNi0xLjUsMS42aC04N2MtMS4xLDAtMS41LTAuMy0xLjUtMS40TDI4MC45LDQ0Ljl6Ii8+DQo8L3N2Zz4NCg==',
 };
 
 //
@@ -3713,7 +3735,7 @@ var script = {
       }
     },
     async next() {
-      if (this.checkLimitRight(true) && (Date.now() - this.lastNext > 150)) {
+      if (this.checkLimitRight(true) && Date.now() - this.lastNext > 150) {
         const array = this.$refs.frames.filter(
           (fc) =>
             fc.videoStatus === fc.Status.playing ||
@@ -3735,7 +3757,7 @@ var script = {
       }
     },
     async prev() {
-      if (this.checkLimitLeft(true) && (Date.now() - this.lastPrev > 150)) {
+      if (this.checkLimitLeft(true) && Date.now() - this.lastPrev > 150) {
         const array = this.$refs.frames.filter(
           (fc) =>
             fc.videoStatus === fc.Status.playing ||
@@ -4575,11 +4597,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-09cd6aae_0", { source: "\n.visualization-row[data-v-09cd6aae] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-09cd6aae] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\n}\n.visualization-divider[data-v-09cd6aae] {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\n}\n.visualization-divider.vertical[data-v-09cd6aae] {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\n}\n.visualization-card[data-v-09cd6aae] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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);*/\n}\n.visualization-justify-center[data-v-09cd6aae],[data-v-09cd6aae] .visualization-justify-center {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-09cd6aae] {\r\n  align-items: center;\n}\n#visualization-container[data-v-09cd6aae] {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\n}\n#visualization-container > .card[data-v-09cd6aae] {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\n}\n#command-bar[data-v-09cd6aae],\r\n#info-bar[data-v-09cd6aae] {\r\n  background-color: #f5f5f5;\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);\n}\n#command-bar button[data-v-09cd6aae] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-09cd6aae]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-09cd6aae] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-09cd6aae] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-09cd6aae] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-09cd6aae] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-09cd6aae] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-09cd6aae] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-09cd6aae] {\r\n  margin: 0 8px;\n}\nsvg[data-v-09cd6aae]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-09cd6aae] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-09cd6aae] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-09cd6aae] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\n.tooltip[data-v-09cd6aae] {\r\n  display: block !important;\r\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-09cd6aae] {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-09cd6aae] {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-09cd6aae] {\r\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-09cd6aae] {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-09cd6aae] {\r\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-09cd6aae] {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-09cd6aae] {\r\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-09cd6aae] {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-09cd6aae] {\r\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-09cd6aae] {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-09cd6aae] {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-09cd6aae] {\r\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-09cd6aae] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-09cd6aae] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\Visualization.vue"],"names":[],"mappings":";AA0pCA;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;EAEA,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>\r\n  <div\r\n    class=\"visualization-row\"\r\n    id=\"visualization-container\"\r\n    @click=\"framesClicked\"\r\n  >\r\n    <GlobalEvents\r\n      v-if=\"active && canInsertTime && settingsClosed\"\r\n      @keydown.45=\"insertTime\"\r\n      @keydown.46=\"insertTime\"\r\n    />\r\n    <GlobalEvents\r\n      v-if=\"active && settingsClosed\"\r\n      @keydown.left.prevent=\"arrowLeft\"\r\n      @keydown.right.prevent=\"arrowRight\"\r\n      @keydown.up.prevent=\"arrowUp\"\r\n      @keydown.down.prevent=\"arrowDown\"\r\n      @keydown.shift.page-down.prevent=\"nextLoopActivate\"\r\n      @keydown.page-down.prevent=\"next\"\r\n      @keydown.page-up.prevent=\"prev\"\r\n      @keydown.shift.page-up.prevent=\"prevLoopActivate\"\r\n      @keydown.83.prevent=\"setHourIni\"\r\n      @keydown.69.prevent=\"setHourEnd\"\r\n      @keydown.36.prevent=\"goToFirstFrame\"\r\n      @keydown.35.prevent=\"goToLastFrame\"\r\n      @keydown.71.prevent=\"dialogs.goTo = true\"\r\n      @keydown.73.prevent=\"dialogs.secondsPerFrame = true\"\r\n      @keydown.76.prevent=\"dialogs.frames = true\"\r\n      @keydown.49.97=\"() => (secondsPerFrame = 1)\"\r\n      @keydown.50.98=\"() => (secondsPerFrame = 2)\"\r\n      @keydown.51.99=\"() => (secondsPerFrame = 3)\"\r\n      @keydown.52.100=\"() => (secondsPerFrame = 4)\"\r\n      @keydown.53.101=\"() => (secondsPerFrame = 5)\"\r\n    />\r\n    <GlobalEvents\r\n      v-if=\"prevLoop || nextLoop\"\r\n      @keydown=\"breakLoop\"\r\n      v-on:click=\"breakLoop\"\r\n    />\r\n    <settings\r\n      v-if=\"active\"\r\n      :dialogs-visibility=\"dialogs\"\r\n      :playback-rate=\"playbackRate\"\r\n      :seconds-per-frame=\"secondsPerFrame\"\r\n      :frames-per-row=\"framesPerRow\"\r\n      :number-of-rows=\"numberOfRows\"\r\n      @change-playback-rate=\"(value) => (playbackRate = value)\"\r\n      @change-go-to=\"changeHour\"\r\n      @change-seconds-per-frame=\"(value) => (secondsPerFrame = value)\"\r\n      @set-frames-selection=\"setFrameSelection\"\r\n      @close=\"(dialog) => (dialogs[dialog] = false)\"\r\n    />\r\n    <div\r\n      :class=\"{ 'visualization-card': true, 'active-tab': active }\"\r\n      style=\"width: 100%; padding: 0\"\r\n    >\r\n      <command-bar\r\n        v-show=\"commandBarShow\"\r\n        :video-playing=\"videoPlaying\"\r\n        :video-paused=\"paused\"\r\n        :insert-time=\"canInsertTime\"\r\n        :hour-ini-selected=\"!!hourIniSelected\"\r\n        :hour-end-selected=\"!!hourEndSelected\"\r\n        @prev-loop-activate=\"prevLoopActivate\"\r\n        @next-loop-activate=\"nextLoopActivate\"\r\n        @prev=\"prev\"\r\n        @next=\"next\"\r\n        @go-to=\"dialogs.goTo = true\"\r\n        @open-frame-selection=\"dialogs.frames = true\"\r\n        @open-frames-per-second=\"dialogs.secondsPerFrame = true\"\r\n        @open-blocks=\"openBlocks\"\r\n        @open-playback-rate=\"dialogs.playbackRate = true\"\r\n        @play-or-pause=\"playOrPause\"\r\n        @stop-playing=\"stopPlayingBar\"\r\n        @set-hour-ini=\"setHourIni\"\r\n        @set-hour-end=\"setHourEnd\"\r\n        @insert-time=\"insertTime\"\r\n      />\r\n      <video-progress\r\n        v-if=\"videoProgressBar\"\r\n        v-show=\"videoPlaying\"\r\n        :video-time=\"videoTime\"\r\n      />\r\n      <info-bar\r\n        :playback-rate=\"playbackRate\"\r\n        :seconds-per-frame=\"secondsPerFrame\"\r\n        :commands-show=\"commandBarShow\"\r\n        :cache=\"useCache\"\r\n        :block-start-time=\"blockStartTime\"\r\n        :video-total-duration=\"videoSliderTotalDuration\"\r\n        :alternative-server=\"alternativeServer\"\r\n        :frames-per-row=\"framesPerRow\"\r\n        :number-of-rows=\"numberOfRows\"\r\n        :hour-ini=\"hourIniSelected\"\r\n        :hour-end=\"hourEndSelected\"\r\n        @toogle-commands-visibility=\"commandBarShow = !commandBarShow\"\r\n        @toogle-cache=\"useCache = !useCache\"\r\n        @change-server=\"changeServerClick\"\r\n      />\r\n      <div\r\n        class=\"visualization-row\"\r\n        v-for=\"rowNumber in numberOfRows\"\r\n        :id=\"'row-' + rowNumber\"\r\n        :key=\"'row-' + rowNumber\"\r\n        style=\"padding: 12px\"\r\n      >\r\n        <div\r\n          v-for=\"(frame, frameNumber) in previousFrames\"\r\n          :key=\"\r\n            numberOfRows +\r\n            '-' +\r\n            framesPerRow +\r\n            '-' +\r\n            getIndex(rowNumber, frameNumber, Positions.previous)\r\n          \"\r\n          style=\"display: none\"\r\n        >\r\n          <span v-html=\"frame.img\" />\r\n        </div>\r\n        <div\r\n          v-for=\"(frame, frameNumber) in nextFrames\"\r\n          :key=\"\r\n            numberOfRows +\r\n            '-' +\r\n            framesPerRow +\r\n            '-' +\r\n            getIndex(rowNumber, frameNumber, Positions.next)\r\n          \"\r\n          style=\"display: none\"\r\n        >\r\n          <span v-html=\"frame.img\" />\r\n        </div>\r\n        <div\r\n          class=\"visualization-col\"\r\n          v-for=\"(frame, frameNumber) in frames.slice(\r\n            framesPerRow * (rowNumber - 1),\r\n            framesPerRow * rowNumber\r\n          )\"\r\n          :key=\"'row-' + rowNumber + '-frame-' + frameNumber\"\r\n          :id=\"`frame-${getIndex(rowNumber, frameNumber, Positions.current)}`\"\r\n          :class=\"{ loaderImg: !!frame.img }\"\r\n          @click=\"\r\n            frame.time\r\n              ? selectFrame(\r\n                  getIndex(rowNumber, frameNumber, Positions.current),\r\n                  frame\r\n                )\r\n              : null\r\n          \"\r\n        >\r\n          <span :id=\"activeFrame ? 'aa' : 0\" style=\"padding-left: 4px\">\r\n            <b>\r\n              {{\r\n                getAudienceTime(\r\n                  frame.time,\r\n                  rowNumber,\r\n                  frameNumber,\r\n                  Positions.current\r\n                )\r\n              }}\r\n            </b>\r\n          </span>\r\n\r\n          <frame\r\n            ref=\"frames\"\r\n            :frame=\"frame\"\r\n            :index=\"getIndex(rowNumber, frameNumber, Positions.current)\"\r\n            :grid-settings=\"{ numberOfRows, framesPerRow }\"\r\n            :initialTime=\"frame.time === hourIniSelected\"\r\n            :endTime=\"frame.time === hourEndSelected\"\r\n            :betweenTime=\"\r\n              frame.time > hourIniSelected && frame.time < hourEndSelected\r\n            \"\r\n            :active=\"\r\n              getIndex(rowNumber, frameNumber, Positions.current) ===\r\n              activeFrame\r\n            \"\r\n            :activeTab=\"active\"\r\n            :videoUrl=\"fInterface ? fInterface.getVideoUrl(frame) : ''\"\r\n            @startPlaying=\"startPlaying\"\r\n            @stopPlaying=\"stopPlaying\"\r\n            @playPauseStatus=\"changePlayPause\"\r\n            @updateSlider=\"updateSlider\"\r\n            :playback-rate=\"playbackRate\"\r\n            style=\"margin: 0 auto\"\r\n          ></frame>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- <settings\r\n      ref=\"settings2\"\r\n      :active=\"active\"\r\n      @goToTime=\"changeHour\"\r\n      @goToBlockInterval=\"changeBlockInterval\"\r\n      @setSplitTime=\"setSplitTime\"\r\n      @setFrameSelection=\"setFrameSelection\"\r\n      @setPlaybackRate=\"\r\n        (rate) => {\r\n          playbackRate = rate\r\n        }\r\n      \"\r\n    >\r\n    </settings> -->\r\n    <!-- <v-dialog v-model=\"dialog\" width=\"500\">\r\n      <div class=\"card\">\r\n        <div class=\"card\"-title class=\"text-h5 grey lighten-2\">\r\n          {{ '  Último bloco disponível até: ' }}\r\n          <v-btn\r\n            @click=\"goToStartBlock\"\r\n            class=\"ml-2\"\r\n            dark\r\n            color=\"success\"\r\n            depressed\r\n          >\r\n            <v-icon left> fa-clock </v-icon>\r\n            {{ timeLastBlock }}\r\n          </v-btn>\r\n          <v-spacer></v-spacer>\r\n          <v-btn color=\"error\" fab small class=\"ml-5\" @click=\"dialog = false\">\r\n            <v-icon dark> fa fa-xmark </v-icon>\r\n          </v-btn>\r\n        </div-title>\r\n      </div>\r\n    </v-dialog>\r\n    <Help :media=\"media\" @close=\"media = null\" />\r\n    <v-dialog\r\n      v-if=\"userMultiTabsGrid\"\r\n      v-model=\"userMultiTabsGridsModel\"\r\n      persistent\r\n      width=\"60%\"\r\n    >\r\n      <div class=\"card\">\r\n        <div class=\"card\"-title class=\"warning text-h5\" primary-title>\r\n          <div class=\"row\" class=\"ma-0\" justify=\"center\" align=\"center\">\r\n            <v-icon dark left style=\"font-size: 24px !important\">\r\n              fa fa-exclamation-triangle\r\n            </v-icon>\r\n            <div style=\"color: white\">{{ $t('form.alert') }}</div>\r\n          </div>\r\n        </div-title>\r\n        <div class=\"card\"-text class=\"justify-center pa-6 grey lighten-2\">\r\n          <h3>\r\n            {{ $t('alerts.userMultiTabsGrid') }}\r\n          </h3>\r\n        </div-text>\r\n        <hr class=\"divider\" class=\"grey lighten-1\"></span>\r\n        <div class=\"card\"-actions class=\"grey lighten-2 justify-center\">\r\n          <v-btn color=\"error\" ml-5 @click=\"userMultiTabsGrid = false\">\r\n            <v-icon left color=\"white\">fa fa-times</v-icon>\r\n            {{ $t('form.close') }}\r\n          </v-btn>\r\n        </div-actions>\r\n      </div>\r\n    </v-dialog> -->\r\n  </div>\r\n</template>\r\n<script>\r\nimport Frame from './components/Frame.vue'\r\nimport FramesInterface from './utils/FramesInterface.js'\r\nimport FramesService from './services/FramesService.js'\r\n\r\nimport Commands from './components/Commands.vue'\r\nimport Infos from './components/Infos.vue'\r\nimport VideoProgress from './components/VideoProgress.vue'\r\nimport Settings from './components/Settings.vue'\r\n\r\nconst Positions = Object.freeze({\r\n  previous: 0,\r\n  current: 1,\r\n  next: 2,\r\n})\r\n\r\nexport default {\r\n  name: 'visualization-container',\r\n  props: {\r\n    value: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    date: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    channel: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    startAudienceTime: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    endAudienceTime: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    videoProgressBar: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    jumpOnInsert: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    framesFormat: {\r\n      type: [Number, String],\r\n      default: 6,\r\n    },\r\n    maxSize: {\r\n      type: Number,\r\n    },\r\n  },\r\n  components: {\r\n    Frame,\r\n    CommandBar: Commands,\r\n    InfoBar: Infos,\r\n    VideoProgress,\r\n    Settings,\r\n    // Help,\r\n  },\r\n  data() {\r\n    return {\r\n      Positions,\r\n      updatingChannel: null,\r\n      dialog: false,\r\n      timeLastBlock: null,\r\n      alternativeServer: false,\r\n      useCache: true,\r\n      numberOfRows: 1,\r\n      framesPerRow: 5,\r\n      secondsPerFrame: 1,\r\n      fInterface: null,\r\n      velocity: 1,\r\n      frames: [],\r\n      previousFrames: [],\r\n      nextFrames: [],\r\n      channelCode: 0,\r\n      videoPlaying: false,\r\n      activeFrame: null,\r\n      activeVideo: null,\r\n      videoTime: 0,\r\n      videoTotalTime: null,\r\n      progressVideoDrag: false,\r\n      hourIniSelected: false,\r\n      hourEndSelected: false,\r\n      canInsertTime: false,\r\n      lastHeight: 0,\r\n      loopInterval: null,\r\n      nextLoop: false,\r\n      prevLoop: false,\r\n      videoSliderTotalDuration: 900,\r\n      blockStartTime: null,\r\n      media: null,\r\n      changeServer: false,\r\n      userMultiTabsGrid: false,\r\n      userMultiTabsGridsModel: true,\r\n      playbackRate: 1,\r\n      paused: false,\r\n      commandBarShow: true,\r\n      dialogs: {\r\n        playbackRate: false,\r\n        goTo: false,\r\n        secondsPerFrame: false,\r\n        frames: false,\r\n      },\r\n      lastNext: 0,\r\n      lastPrev: 0,\r\n    }\r\n  },\r\n  async created() {\r\n    this.changeServer = this.serverOfFrames === 'alternative'\r\n    this.alternativeServer = this.serverOfFrames === 'alternative'\r\n\r\n    const settings = [\r\n      {\r\n        framesPerRow: 2,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 3,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 3,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        framesPerRow: 4,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 4,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        framesPerRow: 5,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 5,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        framesPerRow: 6,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 6,\r\n        numberOfRows: 2,\r\n      },\r\n    ]\r\n\r\n    const storedOnDb = settings[parseInt(this.framesFormat) - 1]\r\n    this.framesPerRow = storedOnDb.framesPerRow\r\n    this.numberOfRows = storedOnDb.numberOfRows\r\n\r\n    await this.createFramesInterface()\r\n    if (this.maxSize) {\r\n      this.resize(this.maxSize, true)\r\n    }\r\n  },\r\n  methods: {\r\n    framesClicked(e) {\r\n      if (e.target.id != 'insert') {\r\n        this.active = true\r\n      }\r\n    },\r\n    async goToStartBlock() {\r\n      try {\r\n        const d = new Date()\r\n        let timestamp = Date.UTC(\r\n          d.getFullYear(),\r\n          d.getMonth(),\r\n          d.getDate(),\r\n          d.getHours(),\r\n          d.getMinutes(),\r\n          d.getSeconds()\r\n        )\r\n\r\n        const response = (\r\n          await FramesService.getNextAvailableBlock({\r\n            channel: this.channel,\r\n            time: timestamp / 1000,\r\n          })\r\n        ).data\r\n\r\n        this.dialog = false\r\n        this.changeHour(this.convertToAudienceTime(response.data.start, ':'))\r\n      } catch (err) {\r\n        console.error(err)\r\n      }\r\n    },\r\n    async checkAvailableBlock() {\r\n      try {\r\n        const d = new Date()\r\n        let timestamp = Date.UTC(\r\n          d.getFullYear(),\r\n          d.getMonth(),\r\n          d.getDate(),\r\n          d.getHours(),\r\n          d.getMinutes(),\r\n          d.getSeconds()\r\n        )\r\n\r\n        const response = (\r\n          await FramesService.getNextAvailableBlock({\r\n            channel: this.channel,\r\n            time: timestamp / 1000,\r\n          })\r\n        ).data\r\n\r\n        this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':')\r\n        this.dialog = true\r\n        if (!response.status) {\r\n          this.timeLastBlock = 'N/D'\r\n        }\r\n      } catch (err) {\r\n        console.error(err)\r\n      }\r\n    },\r\n    updateSlider(videoStartTime, time) {\r\n      // * atualizar slider se estiver fora do range definido previamente\r\n      if (\r\n        time < this.blockStartTime ||\r\n        time > this.blockStartTime ||\r\n        videoStartTime > this.blockStartTime + this.videoSliderTotalDuration\r\n      ) {\r\n        this.blockStartTime = videoStartTime\r\n        this.videoSliderTotalDuration = 900\r\n      }\r\n    },\r\n    nextLoopActivate() {\r\n      this.breakLoop()\r\n      this.loopInterval = setInterval(this.next, 150)\r\n      setTimeout(() => {\r\n        this.nextLoop = true\r\n      }, 0)\r\n    },\r\n    prevLoopActivate() {\r\n      this.breakLoop()\r\n      this.loopInterval = setInterval(this.prev, 150)\r\n      setTimeout(() => {\r\n        this.prevLoop = true\r\n      }, 0)\r\n    },\r\n    breakLoop() {\r\n      clearInterval(this.loopInterval)\r\n      this.loopInterval = null\r\n      this.nextLoop = false\r\n      this.prevLoop = false\r\n    },\r\n    changePlayPause(status) {\r\n      this.paused = !status\r\n    },\r\n    resize(height = this.lastHeight) {\r\n      this.lastHeight = height\r\n      if (this.$refs.frames) {\r\n        for (let frame of this.$refs.frames) {\r\n          frame.resize(height)\r\n        }\r\n      }\r\n      this.$emit('resized')\r\n    },\r\n    async goToFirstFrame() {\r\n      let frames = this.$refs.frames\r\n\r\n      let audienceTime = null\r\n      if (frames.length > 0) {\r\n        let frame = frames[0].frame\r\n        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n      }\r\n      // if (audienceTime) {\r\n      //   this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\r\n      // }\r\n      if (audienceTime) {\r\n        const [hours, minutes, seconds] = audienceTime.split(':')\r\n        const totalSeconds =\r\n          parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)\r\n        if (totalSeconds >= 9000)\r\n          this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\r\n        else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true))\r\n      }\r\n    },\r\n    async goToLastFrame() {\r\n      let frames = this.$refs.frames\r\n      let audienceTime = null\r\n      if (frames.length > 0) {\r\n        let frame = frames[0].frame\r\n\r\n        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n      }\r\n      if (audienceTime) {\r\n        this.changeHour(this.getLastFirtsBlockTime(audienceTime))\r\n      }\r\n    },\r\n    getLastFirtsBlockTime(time, first = false) {\r\n      if (time.indexOf(':') !== -1) {\r\n        time = time.replace(/:/g, '')\r\n      }\r\n      let h, m, newTime\r\n      const t = time.match(/.{1,2}/g)\r\n      if (t[0] && t[1]) {\r\n        h = parseInt(t[0])\r\n        m = parseInt(t[1])\r\n      }\r\n      if (h < 26) {\r\n        if (m < 15)\r\n          if (first) newTime = t[0] + ':00:00'\r\n          else newTime = t[0] + ':14:59'\r\n        else if (m < 30)\r\n          if (first) newTime = t[0] + ':15:00'\r\n          else newTime = t[0] + ':29:59'\r\n        else if (m < 45)\r\n          if (first) newTime = t[0] + ':30:00'\r\n          else newTime = t[0] + ':44:59'\r\n        else if (first) newTime = t[0] + ':45:00'\r\n        else newTime = t[0] + ':59:59'\r\n      } else {\r\n        if (m < 15)\r\n          if (first) newTime = '26:00:00'\r\n          else newTime = '26:14:59'\r\n        else {\r\n          if (first) newTime = '26:15:00'\r\n          else newTime = '26:29:59'\r\n        }\r\n      }\r\n      return newTime\r\n    },\r\n    openBlocks() {\r\n      this.$refs.settings2?.openBlocks()\r\n    },\r\n    playOrPause() {\r\n      const array = this.$refs.frames.filter((fc) => !!fc.active)\r\n      if (array.length === 1) {\r\n        const frame = array[0]\r\n        frame.playOrPause(this.playbackRate)\r\n      }\r\n    },\r\n    stopPlayingBar() {\r\n      for (let ref of this.$refs.frames) {\r\n        if (\r\n          ref.videoStatus === ref.Status.playing ||\r\n          ref.videoStatus === ref.Status.paused\r\n        ) {\r\n          ref.stop(false)\r\n        }\r\n      }\r\n    },\r\n    async setFrameSelection(selected) {\r\n      this.frames = this.loadingArray\r\n      switch (parseInt(selected)) {\r\n        // 2x1\r\n        case 1:\r\n          this.framesPerRow = 2\r\n          this.numberOfRows = 1\r\n          break\r\n        // 3x1\r\n        case 2:\r\n          this.framesPerRow = 3\r\n          this.numberOfRows = 1\r\n          break\r\n        // 3x2\r\n        case 3:\r\n          this.framesPerRow = 3\r\n          this.numberOfRows = 2\r\n          break\r\n        // 4x1\r\n        case 4:\r\n          this.framesPerRow = 4\r\n          this.numberOfRows = 1\r\n          break\r\n        // 4x2\r\n        case 5:\r\n          this.framesPerRow = 4\r\n          this.numberOfRows = 2\r\n          break\r\n        // 5x1\r\n        case 6:\r\n          this.framesPerRow = 5\r\n          this.numberOfRows = 1\r\n          break\r\n        // 5x2\r\n        case 7:\r\n          this.framesPerRow = 5\r\n          this.numberOfRows = 2\r\n          break\r\n        // 6x1\r\n        case 8:\r\n          this.framesPerRow = 6\r\n          this.numberOfRows = 1\r\n          break\r\n        // 6x2\r\n        case 9:\r\n          this.framesPerRow = 6\r\n          this.numberOfRows = 2\r\n          break\r\n      }\r\n      await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\r\n      this.getFramesArray()\r\n      setTimeout(() => {\r\n        for (let ref of this.$refs.frames) {\r\n          ref?.resize(this.lastHeight)\r\n        }\r\n      }, 150)\r\n    },\r\n    getFramesArray() {\r\n      this.frames = this.fInterface.getFrames(Positions.current)\r\n      this.nextFrames = this.fInterface.getFrames(Positions.next)\r\n      this.previousFrames = this.fInterface.getFrames(Positions.previous)\r\n    },\r\n    async createFramesInterface() {\r\n      this.frames = this.loadingArray\r\n      let ch = this.channel\r\n      let associationTMP = {\r\n        1735073: 1,\r\n        1735074: 139,\r\n        1735075: 3,\r\n        1735076: 132,\r\n      }\r\n      //\r\n      this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch\r\n\r\n      const t = this.startAudienceTime.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n      // * iniciar slider\r\n      this.blockStartTime = time\r\n      this.fInterface = await new FramesInterface(\r\n        this.channelCode,\r\n        this.numberOfRows,\r\n        this.framesPerRow,\r\n        time,\r\n        this.startAudienceTime,\r\n        this.useCache\r\n      )\r\n      await this.fInterface.init()\r\n\r\n      this.getFramesArray()\r\n\r\n      this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n\r\n      this.activeVideo = null\r\n    },\r\n    getIndex(rowNumber, frameIndex, position) {\r\n      let from = this.framesPerRow * this.numberOfRows * position\r\n      let till = this.framesPerRow * this.numberOfRows * (position + 1)\r\n\r\n      return (from + till * (rowNumber - 1)) / rowNumber + frameIndex\r\n    },\r\n    getAudienceTime(frameTime, rowNumber, frameNumber, position) {\r\n      if (!frameTime) {\r\n        return 'Loading...'\r\n      } else if (\r\n        this.getIndex(rowNumber, frameNumber, position) === this.activeVideo\r\n      ) {\r\n        return this.convertToAudienceTime(this.videoTime)\r\n      } else {\r\n        return this.convertToAudienceTime(frameTime)\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    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    selectFrame(index, frame) {\r\n      const d = this.getDateParts()\r\n      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\r\n      const frameTime = frame?.time\r\n\r\n      if (frameTime - (this.startAudienceSeconds + limit) <= 0) {\r\n        if (this.hourIniSelected === true) {\r\n          this.hourIniSelected = frameTime\r\n\r\n          if (\r\n            this.hourEndSelected &&\r\n            this.hourIniSelected > this.hourEndSelected\r\n          ) {\r\n            this.hourEndSelected = false\r\n          }\r\n        } else if (this.hourEndSelected === true) {\r\n          if (frameTime > this.hourIniSelected) {\r\n            this.hourEndSelected = frameTime\r\n            this.canInsertTime = true\r\n          } else {\r\n            this.hourEndSelected = false\r\n          }\r\n        }\r\n      }\r\n\r\n      if (this.activeFrame !== index) {\r\n        // ? Se clicar no frame diferente de onde está a dar play, faz pausa\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.activeVideo = null\r\n        this.activeFrame = index\r\n      }\r\n    },\r\n    setHourIni() {\r\n      this.canInsertTime = true\r\n      this.hourIniSelected = true\r\n      document.getElementById(`frame-${this.activeFrame}`).click()\r\n      this.$emit('setHourIni', {\r\n        hour_ini: this.hourIniSelected\r\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n          : null,\r\n      })\r\n    },\r\n    setHourEnd() {\r\n      this.canInsertTime = true\r\n      this.hourEndSelected = true\r\n      document.getElementById(`frame-${this.activeFrame}`).click()\r\n    },\r\n    //* Navegação\r\n    arrowRight() {\r\n      if (this.checkLimitRight(false)) {\r\n        if (\r\n          this.activeFrame ===\r\n          this.numberOfRows * this.framesPerRow * 2 - 1\r\n        ) {\r\n          console.log(this.activeFrame, 'ACTIVE FRAME')\r\n          this.next()\r\n        } else {\r\n          this.activeFrame++\r\n        }\r\n      }\r\n    },\r\n    arrowLeft() {\r\n      if (this.checkLimitLeft(false)) {\r\n        if (this.activeFrame === this.numberOfRows * this.framesPerRow) {\r\n          this.prev()\r\n        } else {\r\n          this.activeFrame--\r\n        }\r\n      }\r\n    },\r\n    arrowUp() {\r\n      console.log(\r\n        this.activeFrame - this.numberOfRows * this.framesPerRow,\r\n        Math.round((this.numberOfRows * this.framesPerRow) / 2)\r\n      )\r\n      if (\r\n        this.activeFrame - this.numberOfRows * this.framesPerRow >\r\n        Math.round((this.numberOfRows * this.framesPerRow) / 2)\r\n      ) {\r\n        this.activeFrame -= this.framesPerRow\r\n      }\r\n    },\r\n    arrowDown() {\r\n      if (\r\n        this.activeFrame - this.numberOfRows * this.framesPerRow <\r\n        Math.round((this.numberOfRows * this.framesPerRow) / 2)\r\n      ) {\r\n        this.activeFrame += this.framesPerRow\r\n      }\r\n    },\r\n\r\n    checkLimitRight(value) {\r\n      const hours = this.endAudienceTime.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59)\r\n\r\n      if (value) {\r\n        return (\r\n          high > (this.fInterface.getCurrentTime() - 1) * 1000 &&\r\n          this.nextFrames[0].title !== -1\r\n        )\r\n      } else {\r\n        // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000\r\n        return high > this.fInterface.getCurrentTime() * 1000\r\n      }\r\n    },\r\n    checkLimitLeft(value) {\r\n      const hours = this.startAudienceTime.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const low = Date.UTC(d.year, d.month, d.day, hours[0], hours[1], hours[2])\r\n\r\n      if (value) {\r\n        return low <= (this.fInterface.getCurrentTime() - 1) * 1000\r\n      } else {\r\n        return (\r\n          low <\r\n          (this.fInterface.getCurrentTime() +\r\n            this.activeFrame -\r\n            this.numberOfRows * this.framesPerRow) *\r\n            1000\r\n        )\r\n      }\r\n    },\r\n    async next() {\r\n      if (this.checkLimitRight(true) && (Date.now() - this.lastNext > 150)) {\r\n        const array = 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\r\n        if (array.length === 1) {\r\n          const frame = array[0]\r\n          frame.stop(false)\r\n        }\r\n        this.fInterface.setCurrentStep(this.secondsPerFrame)\r\n        await this.fInterface.loadNextFrames()\r\n\r\n        this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n        this.activeVideo = null\r\n\r\n        this.getFramesArray()\r\n        this.lastNext = Date.now()\r\n      }\r\n    },\r\n    async prev() {\r\n      if (this.checkLimitLeft(true) && (Date.now() - this.lastPrev > 150)) {\r\n        const array = 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        if (array.length === 1) {\r\n          const frame = array[0]\r\n          frame.stop(false)\r\n        }\r\n\r\n        this.fInterface.setCurrentStep(this.secondsPerFrame)\r\n        await this.fInterface.loadPrevFrames()\r\n\r\n        this.activeFrame = this.getIndex(\r\n          this.numberOfRows,\r\n          this.framesPerRow - 1,\r\n          Positions.current\r\n        )\r\n        this.activeVideo = null\r\n\r\n        this.getFramesArray()\r\n        this.lastPrev = Date.now()\r\n      }\r\n    },\r\n    async setStartTime(time) {\r\n      if (time.indexOf(':') !== -1) {\r\n        time = time.replace(/:/g, '')\r\n      }\r\n      const t = time.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n      this.frames = this.loadingArray\r\n\r\n      await this.fInterface.changeTime(setTime)\r\n\r\n      this.getFramesArray()\r\n\r\n      this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n      // let frames = this.$refs.frames\r\n\r\n      // let audienceTime = null\r\n      // if (frames.length > 0) {\r\n      // let frame = frames[0].frame\r\n      // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n      // }\r\n\r\n      this.activeVideo = null\r\n\r\n      return true\r\n    },\r\n    hourToTimeStamp(time) {\r\n      if (time.indexOf(':') !== -1) {\r\n        time = time.replace(/:/g, '')\r\n      }\r\n      const t = time.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n\r\n      return setTime\r\n    },\r\n    async changeHour(value) {\r\n      if (value) {\r\n        setTimeout(() => {\r\n          const array = 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\r\n          if (array.length === 1) {\r\n            const frame = array[0]\r\n            frame.stop(false)\r\n          }\r\n\r\n          this.setStartTime(value, true)\r\n        }, 0)\r\n      }\r\n    },\r\n    changeBlockInterval(value) {\r\n      this.changeHour(value.ini)\r\n      let time_ini, time_end\r\n      time_ini = this.hourToTimeStamp(value.ini)\r\n      time_end = this.hourToTimeStamp(value.end)\r\n      this.videoSliderTotalDuration = time_end - time_ini\r\n      this.$refs.frames[0].changeSettings(time_ini)\r\n      this.blockStartTime = time_ini\r\n    },\r\n    //eslint-disable-next-line\r\n    async updateVideoTime(index, videoTime) {\r\n      this.activeVideo = index\r\n      this.videoTime = videoTime\r\n    },\r\n    //eslint-disable-next-line\r\n    updateVideoStatus(currentTime) {\r\n      if (!this.progressVideoDrag) {\r\n        // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS\r\n        // this.updateProgress(null, currentTime)\r\n      }\r\n    },\r\n    async startPlaying(frame, totalTime) {\r\n      const array = this.$refs.frames.filter(\r\n        (fc) => fc.frame.time !== frame.time\r\n      )\r\n\r\n      for (let ref of array) {\r\n        if (\r\n          ref.videoStatus === ref.Status.playing ||\r\n          ref.videoStatus === ref.Status.paused\r\n        ) {\r\n          ref.stop(false)\r\n        }\r\n      }\r\n\r\n      this.videoTotalTime = totalTime\r\n      this.videoPlaying = true\r\n    },\r\n    stopPlaying() {\r\n      this.videoTotalTime = null\r\n      this.videoPlaying = false\r\n      this.paused = false\r\n    },\r\n    insertTime() {\r\n      this.$emit('timeToInsert', {\r\n        channel: this.channel,\r\n        hour_ini: this.hourIniSelected\r\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n          : null,\r\n        hour_end: this.hourEndSelected\r\n          ? this.convertToAudienceTime(this.hourEndSelected, '')\r\n          : null,\r\n        force: false,\r\n      })\r\n\r\n      if (this.jumpOnInsert) {\r\n        this.changeHour(\r\n          this.convertToAudienceTime(\r\n            (this.hourEndSelected || this.hourIniSelected) + 1\r\n          )\r\n        )\r\n      }\r\n\r\n      this.hourIniSelected = null\r\n      this.hourEndSelected = null\r\n      this.canInsertTime = false\r\n\r\n      // this.fInterface.setCurrentPosition(this.hourEndSelected)\r\n    },\r\n    insertTimeForce() {\r\n      this.$emit('timeToInsert', {\r\n        channel: this.channel,\r\n        hour_ini: this.hourIniSelected\r\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n          : null,\r\n        hour_end: this.hourEndSelected\r\n          ? this.convertToAudienceTime(this.hourEndSelected, '')\r\n          : null,\r\n        force: true,\r\n      })\r\n\r\n      this.hourIniSelected = null\r\n      this.hourEndSelected = null\r\n      this.canInsertTime = false\r\n\r\n      // this.fInterface.setCurrentPosition(this.hourEndSelected)\r\n    },\r\n    async getChannelMedia() {\r\n      // this.media = (await ChannelService.show(this.channel)).data.MEDIA\r\n    },\r\n    async changeServerClick() {\r\n      this.changeServer = !this.changeServer\r\n      sessionStorage.setItem(\r\n        'server',\r\n        this.changeServer ? 'alternative' : 'default'\r\n      )\r\n\r\n      // if (this.$route.params.time != this.frames[0].time)\r\n      //   this.$router.push({\r\n      //     name: 'grid',\r\n      //     params: {\r\n      //       date: this.date,\r\n      //       channel: this.channelCode,\r\n      //       time: this.frames[0].time,\r\n      //     },\r\n      //   })\r\n      location.reload()\r\n    },\r\n  },\r\n  computed: {\r\n    active: {\r\n      get() {\r\n        return this.value\r\n      },\r\n      set(value) {\r\n        this.$emit('input', value)\r\n      },\r\n    },\r\n    settingsClosed() {\r\n      return !Object.values(this.dialogs).find((v) => v)\r\n    },\r\n    startAudienceSeconds() {\r\n      const t = this.startAudienceTime.match(/.{1,2}/g)\r\n      return parseInt(t[0] * 3600 + t[1] * 60 + t[2])\r\n    },\r\n    loadingArray() {\r\n      return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())\r\n    },\r\n    serverOfFrames() {\r\n      return sessionStorage.getItem('server')\r\n    },\r\n  },\r\n  watch: {\r\n    secondsPerFrame(value) {\r\n      let frames = this.$refs.frames\r\n      let initialTime = null\r\n      let audienceTime = null\r\n      if (frames.length > 0) {\r\n        let frame = frames[0].frame\r\n\r\n        if (initialTime === null) {\r\n          initialTime = frame.time\r\n        }\r\n        if (value <= 5) {\r\n          let newAudienceTime = initialTime + value\r\n          audienceTime = this.getAudienceTime(newAudienceTime, 0, 0, 0)\r\n          this.changeHour(audienceTime)\r\n          this.next()\r\n        }\r\n      }\r\n    },\r\n    framesFormat(value) {\r\n      this.setFrameSelection(value)\r\n    },\r\n    active() {\r\n      // ? sempre que trocamos de tabs dar reset as horas selected\r\n      this.hourIniSelected = false\r\n      this.hourEndSelected = false\r\n    },\r\n    useCache() {\r\n      this.createFramesInterface()\r\n    },\r\n    hourIniSelected(value) {\r\n      if (value) {\r\n        sessionStorage.setItem(\r\n          'currentTimeFrames',\r\n          this.convertToAudienceTime(this.hourIniSelected, '')\r\n        )\r\n      } else {\r\n        sessionStorage.removeItem('currentTimeFrames')\r\n      }\r\n    },\r\n    activeFrame(value) {\r\n      if (value) {\r\n        this.stopPlayingBar()\r\n      }\r\n    },\r\n    channel() {\r\n      this.updatingChannel = new Promise((resolve, reject) => {\r\n        try {\r\n          this.createFramesInterface()\r\n          resolve(true)\r\n        } catch (err) {\r\n          reject(err)\r\n        }\r\n      })\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n  align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n  background-color: #f5f5f5;\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}\r\n#command-bar button {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n  padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\r\n}\r\n\r\n.settings-container {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n  margin: 0 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n  margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n  border: none;\r\n}\r\n\r\n.visualization-card {\r\n  border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined });
+    inject("data-v-33380758_0", { source: "\n.visualization-row[data-v-33380758] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-33380758] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\n}\n.visualization-divider[data-v-33380758] {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\n}\n.visualization-divider.vertical[data-v-33380758] {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\n}\n.visualization-card[data-v-33380758] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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);*/\n}\n.visualization-justify-center[data-v-33380758],[data-v-33380758] .visualization-justify-center {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-33380758] {\r\n  align-items: center;\n}\n#visualization-container[data-v-33380758] {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\n}\n#visualization-container > .card[data-v-33380758] {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\n}\n#command-bar[data-v-33380758],\r\n#info-bar[data-v-33380758] {\r\n  background-color: #f5f5f5;\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);\n}\n#command-bar button[data-v-33380758] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-33380758]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-33380758] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-33380758] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-33380758] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-33380758] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-33380758] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-33380758] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-33380758] {\r\n  margin: 0 8px;\n}\nsvg[data-v-33380758]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-33380758] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-33380758] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-33380758] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\n.tooltip[data-v-33380758] {\r\n  display: block !important;\r\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-33380758] {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-33380758] {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-33380758] {\r\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-33380758] {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-33380758] {\r\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-33380758] {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-33380758] {\r\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-33380758] {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-33380758] {\r\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-33380758] {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-33380758] {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-33380758] {\r\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-33380758] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-33380758] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\Visualization.vue"],"names":[],"mappings":";AA0pCA;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;EAEA,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>\r\n  <div\r\n    class=\"visualization-row\"\r\n    id=\"visualization-container\"\r\n    @click=\"framesClicked\"\r\n  >\r\n    <GlobalEvents\r\n      v-if=\"active && canInsertTime && settingsClosed\"\r\n      @keydown.45=\"insertTime\"\r\n      @keydown.46=\"insertTime\"\r\n    />\r\n    <GlobalEvents\r\n      v-if=\"active && settingsClosed\"\r\n      @keydown.left.prevent=\"arrowLeft\"\r\n      @keydown.right.prevent=\"arrowRight\"\r\n      @keydown.up.prevent=\"arrowUp\"\r\n      @keydown.down.prevent=\"arrowDown\"\r\n      @keydown.shift.page-down.prevent=\"nextLoopActivate\"\r\n      @keydown.page-down.prevent=\"next\"\r\n      @keydown.page-up.prevent=\"prev\"\r\n      @keydown.shift.page-up.prevent=\"prevLoopActivate\"\r\n      @keydown.83.prevent=\"setHourIni\"\r\n      @keydown.69.prevent=\"setHourEnd\"\r\n      @keydown.36.prevent=\"goToFirstFrame\"\r\n      @keydown.35.prevent=\"goToLastFrame\"\r\n      @keydown.71.prevent=\"dialogs.goTo = true\"\r\n      @keydown.73.prevent=\"dialogs.secondsPerFrame = true\"\r\n      @keydown.76.prevent=\"dialogs.frames = true\"\r\n      @keydown.49.97=\"() => (secondsPerFrame = 1)\"\r\n      @keydown.50.98=\"() => (secondsPerFrame = 2)\"\r\n      @keydown.51.99=\"() => (secondsPerFrame = 3)\"\r\n      @keydown.52.100=\"() => (secondsPerFrame = 4)\"\r\n      @keydown.53.101=\"() => (secondsPerFrame = 5)\"\r\n    />\r\n    <GlobalEvents\r\n      v-if=\"prevLoop || nextLoop\"\r\n      @keydown=\"breakLoop\"\r\n      v-on:click=\"breakLoop\"\r\n    />\r\n    <settings\r\n      v-if=\"active\"\r\n      :dialogs-visibility=\"dialogs\"\r\n      :playback-rate=\"playbackRate\"\r\n      :seconds-per-frame=\"secondsPerFrame\"\r\n      :frames-per-row=\"framesPerRow\"\r\n      :number-of-rows=\"numberOfRows\"\r\n      @change-playback-rate=\"(value) => (playbackRate = value)\"\r\n      @change-go-to=\"changeHour\"\r\n      @change-seconds-per-frame=\"(value) => (secondsPerFrame = value)\"\r\n      @set-frames-selection=\"setFrameSelection\"\r\n      @close=\"(dialog) => (dialogs[dialog] = false)\"\r\n    />\r\n    <div\r\n      :class=\"{ 'visualization-card': true, 'active-tab': active }\"\r\n      style=\"width: 100%; padding: 0\"\r\n    >\r\n      <command-bar\r\n        v-show=\"commandBarShow\"\r\n        :video-playing=\"videoPlaying\"\r\n        :video-paused=\"paused\"\r\n        :insert-time=\"canInsertTime\"\r\n        :hour-ini-selected=\"!!hourIniSelected\"\r\n        :hour-end-selected=\"!!hourEndSelected\"\r\n        @prev-loop-activate=\"prevLoopActivate\"\r\n        @next-loop-activate=\"nextLoopActivate\"\r\n        @prev=\"prev\"\r\n        @next=\"next\"\r\n        @go-to=\"dialogs.goTo = true\"\r\n        @open-frame-selection=\"dialogs.frames = true\"\r\n        @open-frames-per-second=\"dialogs.secondsPerFrame = true\"\r\n        @open-blocks=\"openBlocks\"\r\n        @open-playback-rate=\"dialogs.playbackRate = true\"\r\n        @play-or-pause=\"playOrPause\"\r\n        @stop-playing=\"stopPlayingBar\"\r\n        @set-hour-ini=\"setHourIni\"\r\n        @set-hour-end=\"setHourEnd\"\r\n        @insert-time=\"insertTime\"\r\n      />\r\n      <video-progress\r\n        v-if=\"videoProgressBar\"\r\n        v-show=\"videoPlaying\"\r\n        :video-time=\"videoTime\"\r\n      />\r\n      <info-bar\r\n        :playback-rate=\"playbackRate\"\r\n        :seconds-per-frame=\"secondsPerFrame\"\r\n        :commands-show=\"commandBarShow\"\r\n        :cache=\"useCache\"\r\n        :block-start-time=\"blockStartTime\"\r\n        :video-total-duration=\"videoSliderTotalDuration\"\r\n        :alternative-server=\"alternativeServer\"\r\n        :frames-per-row=\"framesPerRow\"\r\n        :number-of-rows=\"numberOfRows\"\r\n        :hour-ini=\"hourIniSelected\"\r\n        :hour-end=\"hourEndSelected\"\r\n        @toogle-commands-visibility=\"commandBarShow = !commandBarShow\"\r\n        @toogle-cache=\"useCache = !useCache\"\r\n        @change-server=\"changeServerClick\"\r\n      />\r\n      <div\r\n        class=\"visualization-row\"\r\n        v-for=\"rowNumber in numberOfRows\"\r\n        :id=\"'row-' + rowNumber\"\r\n        :key=\"'row-' + rowNumber\"\r\n        style=\"padding: 12px\"\r\n      >\r\n        <div\r\n          v-for=\"(frame, frameNumber) in previousFrames\"\r\n          :key=\"\r\n            numberOfRows +\r\n            '-' +\r\n            framesPerRow +\r\n            '-' +\r\n            getIndex(rowNumber, frameNumber, Positions.previous)\r\n          \"\r\n          style=\"display: none\"\r\n        >\r\n          <span v-html=\"frame.img\" />\r\n        </div>\r\n        <div\r\n          v-for=\"(frame, frameNumber) in nextFrames\"\r\n          :key=\"\r\n            numberOfRows +\r\n            '-' +\r\n            framesPerRow +\r\n            '-' +\r\n            getIndex(rowNumber, frameNumber, Positions.next)\r\n          \"\r\n          style=\"display: none\"\r\n        >\r\n          <span v-html=\"frame.img\" />\r\n        </div>\r\n        <div\r\n          class=\"visualization-col\"\r\n          v-for=\"(frame, frameNumber) in frames.slice(\r\n            framesPerRow * (rowNumber - 1),\r\n            framesPerRow * rowNumber\r\n          )\"\r\n          :key=\"'row-' + rowNumber + '-frame-' + frameNumber\"\r\n          :id=\"`frame-${getIndex(rowNumber, frameNumber, Positions.current)}`\"\r\n          :class=\"{ loaderImg: !!frame.img }\"\r\n          @click=\"\r\n            frame.time\r\n              ? selectFrame(\r\n                  getIndex(rowNumber, frameNumber, Positions.current),\r\n                  frame\r\n                )\r\n              : null\r\n          \"\r\n        >\r\n          <span :id=\"activeFrame ? 'aa' : 0\" style=\"padding-left: 4px\">\r\n            <b>\r\n              {{\r\n                getAudienceTime(\r\n                  frame.time,\r\n                  rowNumber,\r\n                  frameNumber,\r\n                  Positions.current\r\n                )\r\n              }}\r\n            </b>\r\n          </span>\r\n\r\n          <frame\r\n            ref=\"frames\"\r\n            :frame=\"frame\"\r\n            :index=\"getIndex(rowNumber, frameNumber, Positions.current)\"\r\n            :grid-settings=\"{ numberOfRows, framesPerRow }\"\r\n            :initialTime=\"frame.time === hourIniSelected\"\r\n            :endTime=\"frame.time === hourEndSelected\"\r\n            :betweenTime=\"\r\n              frame.time > hourIniSelected && frame.time < hourEndSelected\r\n            \"\r\n            :active=\"\r\n              getIndex(rowNumber, frameNumber, Positions.current) ===\r\n              activeFrame\r\n            \"\r\n            :activeTab=\"active\"\r\n            :videoUrl=\"fInterface ? fInterface.getVideoUrl(frame) : ''\"\r\n            @startPlaying=\"startPlaying\"\r\n            @stopPlaying=\"stopPlaying\"\r\n            @playPauseStatus=\"changePlayPause\"\r\n            @updateSlider=\"updateSlider\"\r\n            :playback-rate=\"playbackRate\"\r\n            style=\"margin: 0 auto\"\r\n          ></frame>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- <settings\r\n      ref=\"settings2\"\r\n      :active=\"active\"\r\n      @goToTime=\"changeHour\"\r\n      @goToBlockInterval=\"changeBlockInterval\"\r\n      @setSplitTime=\"setSplitTime\"\r\n      @setFrameSelection=\"setFrameSelection\"\r\n      @setPlaybackRate=\"\r\n        (rate) => {\r\n          playbackRate = rate\r\n        }\r\n      \"\r\n    >\r\n    </settings> -->\r\n    <!-- <v-dialog v-model=\"dialog\" width=\"500\">\r\n      <div class=\"card\">\r\n        <div class=\"card\"-title class=\"text-h5 grey lighten-2\">\r\n          {{ '  Último bloco disponível até: ' }}\r\n          <v-btn\r\n            @click=\"goToStartBlock\"\r\n            class=\"ml-2\"\r\n            dark\r\n            color=\"success\"\r\n            depressed\r\n          >\r\n            <v-icon left> fa-clock </v-icon>\r\n            {{ timeLastBlock }}\r\n          </v-btn>\r\n          <v-spacer></v-spacer>\r\n          <v-btn color=\"error\" fab small class=\"ml-5\" @click=\"dialog = false\">\r\n            <v-icon dark> fa fa-xmark </v-icon>\r\n          </v-btn>\r\n        </div-title>\r\n      </div>\r\n    </v-dialog>\r\n    <Help :media=\"media\" @close=\"media = null\" />\r\n    <v-dialog\r\n      v-if=\"userMultiTabsGrid\"\r\n      v-model=\"userMultiTabsGridsModel\"\r\n      persistent\r\n      width=\"60%\"\r\n    >\r\n      <div class=\"card\">\r\n        <div class=\"card\"-title class=\"warning text-h5\" primary-title>\r\n          <div class=\"row\" class=\"ma-0\" justify=\"center\" align=\"center\">\r\n            <v-icon dark left style=\"font-size: 24px !important\">\r\n              fa fa-exclamation-triangle\r\n            </v-icon>\r\n            <div style=\"color: white\">{{ $t('form.alert') }}</div>\r\n          </div>\r\n        </div-title>\r\n        <div class=\"card\"-text class=\"justify-center pa-6 grey lighten-2\">\r\n          <h3>\r\n            {{ $t('alerts.userMultiTabsGrid') }}\r\n          </h3>\r\n        </div-text>\r\n        <hr class=\"divider\" class=\"grey lighten-1\"></span>\r\n        <div class=\"card\"-actions class=\"grey lighten-2 justify-center\">\r\n          <v-btn color=\"error\" ml-5 @click=\"userMultiTabsGrid = false\">\r\n            <v-icon left color=\"white\">fa fa-times</v-icon>\r\n            {{ $t('form.close') }}\r\n          </v-btn>\r\n        </div-actions>\r\n      </div>\r\n    </v-dialog> -->\r\n  </div>\r\n</template>\r\n<script>\r\nimport Frame from './components/Frame.vue'\r\nimport FramesInterface from './utils/FramesInterface.js'\r\nimport FramesService from './services/FramesService.js'\r\n\r\nimport Commands from './components/Commands.vue'\r\nimport Infos from './components/Infos.vue'\r\nimport VideoProgress from './components/VideoProgress.vue'\r\nimport Settings from './components/Settings.vue'\r\n\r\nconst Positions = Object.freeze({\r\n  previous: 0,\r\n  current: 1,\r\n  next: 2,\r\n})\r\n\r\nexport default {\r\n  name: 'visualization-container',\r\n  props: {\r\n    value: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    date: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    channel: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    startAudienceTime: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    endAudienceTime: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    videoProgressBar: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    jumpOnInsert: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    framesFormat: {\r\n      type: [Number, String],\r\n      default: 6,\r\n    },\r\n    maxSize: {\r\n      type: Number,\r\n    },\r\n  },\r\n  components: {\r\n    Frame,\r\n    CommandBar: Commands,\r\n    InfoBar: Infos,\r\n    VideoProgress,\r\n    Settings,\r\n    // Help,\r\n  },\r\n  data() {\r\n    return {\r\n      Positions,\r\n      updatingChannel: null,\r\n      dialog: false,\r\n      timeLastBlock: null,\r\n      alternativeServer: false,\r\n      useCache: true,\r\n      numberOfRows: 1,\r\n      framesPerRow: 5,\r\n      secondsPerFrame: 1,\r\n      fInterface: null,\r\n      velocity: 1,\r\n      frames: [],\r\n      previousFrames: [],\r\n      nextFrames: [],\r\n      channelCode: 0,\r\n      videoPlaying: false,\r\n      activeFrame: null,\r\n      activeVideo: null,\r\n      videoTime: 0,\r\n      videoTotalTime: null,\r\n      progressVideoDrag: false,\r\n      hourIniSelected: false,\r\n      hourEndSelected: false,\r\n      canInsertTime: false,\r\n      lastHeight: 0,\r\n      loopInterval: null,\r\n      nextLoop: false,\r\n      prevLoop: false,\r\n      videoSliderTotalDuration: 900,\r\n      blockStartTime: null,\r\n      media: null,\r\n      changeServer: false,\r\n      userMultiTabsGrid: false,\r\n      userMultiTabsGridsModel: true,\r\n      playbackRate: 1,\r\n      paused: false,\r\n      commandBarShow: true,\r\n      dialogs: {\r\n        playbackRate: false,\r\n        goTo: false,\r\n        secondsPerFrame: false,\r\n        frames: false,\r\n      },\r\n      lastNext: 0,\r\n      lastPrev: 0,\r\n    }\r\n  },\r\n  async created() {\r\n    this.changeServer = this.serverOfFrames === 'alternative'\r\n    this.alternativeServer = this.serverOfFrames === 'alternative'\r\n\r\n    const settings = [\r\n      {\r\n        framesPerRow: 2,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 3,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 3,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        framesPerRow: 4,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 4,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        framesPerRow: 5,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 5,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        framesPerRow: 6,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 6,\r\n        numberOfRows: 2,\r\n      },\r\n    ]\r\n\r\n    const storedOnDb = settings[parseInt(this.framesFormat) - 1]\r\n    this.framesPerRow = storedOnDb.framesPerRow\r\n    this.numberOfRows = storedOnDb.numberOfRows\r\n\r\n    await this.createFramesInterface()\r\n    if (this.maxSize) {\r\n      this.resize(this.maxSize, true)\r\n    }\r\n  },\r\n  methods: {\r\n    framesClicked(e) {\r\n      if (e.target.id != 'insert') {\r\n        this.active = true\r\n      }\r\n    },\r\n    async goToStartBlock() {\r\n      try {\r\n        const d = new Date()\r\n        let timestamp = Date.UTC(\r\n          d.getFullYear(),\r\n          d.getMonth(),\r\n          d.getDate(),\r\n          d.getHours(),\r\n          d.getMinutes(),\r\n          d.getSeconds()\r\n        )\r\n\r\n        const response = (\r\n          await FramesService.getNextAvailableBlock({\r\n            channel: this.channel,\r\n            time: timestamp / 1000,\r\n          })\r\n        ).data\r\n\r\n        this.dialog = false\r\n        this.changeHour(this.convertToAudienceTime(response.data.start, ':'))\r\n      } catch (err) {\r\n        console.error(err)\r\n      }\r\n    },\r\n    async checkAvailableBlock() {\r\n      try {\r\n        const d = new Date()\r\n        let timestamp = Date.UTC(\r\n          d.getFullYear(),\r\n          d.getMonth(),\r\n          d.getDate(),\r\n          d.getHours(),\r\n          d.getMinutes(),\r\n          d.getSeconds()\r\n        )\r\n\r\n        const response = (\r\n          await FramesService.getNextAvailableBlock({\r\n            channel: this.channel,\r\n            time: timestamp / 1000,\r\n          })\r\n        ).data\r\n\r\n        this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':')\r\n        this.dialog = true\r\n        if (!response.status) {\r\n          this.timeLastBlock = 'N/D'\r\n        }\r\n      } catch (err) {\r\n        console.error(err)\r\n      }\r\n    },\r\n    updateSlider(videoStartTime, time) {\r\n      // * atualizar slider se estiver fora do range definido previamente\r\n      if (\r\n        time < this.blockStartTime ||\r\n        time > this.blockStartTime ||\r\n        videoStartTime > this.blockStartTime + this.videoSliderTotalDuration\r\n      ) {\r\n        this.blockStartTime = videoStartTime\r\n        this.videoSliderTotalDuration = 900\r\n      }\r\n    },\r\n    nextLoopActivate() {\r\n      this.breakLoop()\r\n      this.loopInterval = setInterval(this.next, 150)\r\n      setTimeout(() => {\r\n        this.nextLoop = true\r\n      }, 0)\r\n    },\r\n    prevLoopActivate() {\r\n      this.breakLoop()\r\n      this.loopInterval = setInterval(this.prev, 150)\r\n      setTimeout(() => {\r\n        this.prevLoop = true\r\n      }, 0)\r\n    },\r\n    breakLoop() {\r\n      clearInterval(this.loopInterval)\r\n      this.loopInterval = null\r\n      this.nextLoop = false\r\n      this.prevLoop = false\r\n    },\r\n    changePlayPause(status) {\r\n      this.paused = !status\r\n    },\r\n    resize(height = this.lastHeight) {\r\n      this.lastHeight = height\r\n      if (this.$refs.frames) {\r\n        for (let frame of this.$refs.frames) {\r\n          frame.resize(height)\r\n        }\r\n      }\r\n      this.$emit('resized')\r\n    },\r\n    async goToFirstFrame() {\r\n      let frames = this.$refs.frames\r\n\r\n      let audienceTime = null\r\n      if (frames.length > 0) {\r\n        let frame = frames[0].frame\r\n        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n      }\r\n      // if (audienceTime) {\r\n      //   this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\r\n      // }\r\n      if (audienceTime) {\r\n        const [hours, minutes, seconds] = audienceTime.split(':')\r\n        const totalSeconds =\r\n          parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)\r\n        if (totalSeconds >= 9000)\r\n          this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\r\n        else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true))\r\n      }\r\n    },\r\n    async goToLastFrame() {\r\n      let frames = this.$refs.frames\r\n      let audienceTime = null\r\n      if (frames.length > 0) {\r\n        let frame = frames[0].frame\r\n\r\n        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n      }\r\n      if (audienceTime) {\r\n        this.changeHour(this.getLastFirtsBlockTime(audienceTime))\r\n      }\r\n    },\r\n    getLastFirtsBlockTime(time, first = false) {\r\n      if (time.indexOf(':') !== -1) {\r\n        time = time.replace(/:/g, '')\r\n      }\r\n      let h, m, newTime\r\n      const t = time.match(/.{1,2}/g)\r\n      if (t[0] && t[1]) {\r\n        h = parseInt(t[0])\r\n        m = parseInt(t[1])\r\n      }\r\n      if (h < 26) {\r\n        if (m < 15)\r\n          if (first) newTime = t[0] + ':00:00'\r\n          else newTime = t[0] + ':14:59'\r\n        else if (m < 30)\r\n          if (first) newTime = t[0] + ':15:00'\r\n          else newTime = t[0] + ':29:59'\r\n        else if (m < 45)\r\n          if (first) newTime = t[0] + ':30:00'\r\n          else newTime = t[0] + ':44:59'\r\n        else if (first) newTime = t[0] + ':45:00'\r\n        else newTime = t[0] + ':59:59'\r\n      } else {\r\n        if (m < 15)\r\n          if (first) newTime = '26:00:00'\r\n          else newTime = '26:14:59'\r\n        else {\r\n          if (first) newTime = '26:15:00'\r\n          else newTime = '26:29:59'\r\n        }\r\n      }\r\n      return newTime\r\n    },\r\n    openBlocks() {\r\n      this.$refs.settings2?.openBlocks()\r\n    },\r\n    playOrPause() {\r\n      const array = this.$refs.frames.filter((fc) => !!fc.active)\r\n      if (array.length === 1) {\r\n        const frame = array[0]\r\n        frame.playOrPause(this.playbackRate)\r\n      }\r\n    },\r\n    stopPlayingBar() {\r\n      for (let ref of this.$refs.frames) {\r\n        if (\r\n          ref.videoStatus === ref.Status.playing ||\r\n          ref.videoStatus === ref.Status.paused\r\n        ) {\r\n          ref.stop(false)\r\n        }\r\n      }\r\n    },\r\n    async setFrameSelection(selected) {\r\n      this.frames = this.loadingArray\r\n      switch (parseInt(selected)) {\r\n        // 2x1\r\n        case 1:\r\n          this.framesPerRow = 2\r\n          this.numberOfRows = 1\r\n          break\r\n        // 3x1\r\n        case 2:\r\n          this.framesPerRow = 3\r\n          this.numberOfRows = 1\r\n          break\r\n        // 3x2\r\n        case 3:\r\n          this.framesPerRow = 3\r\n          this.numberOfRows = 2\r\n          break\r\n        // 4x1\r\n        case 4:\r\n          this.framesPerRow = 4\r\n          this.numberOfRows = 1\r\n          break\r\n        // 4x2\r\n        case 5:\r\n          this.framesPerRow = 4\r\n          this.numberOfRows = 2\r\n          break\r\n        // 5x1\r\n        case 6:\r\n          this.framesPerRow = 5\r\n          this.numberOfRows = 1\r\n          break\r\n        // 5x2\r\n        case 7:\r\n          this.framesPerRow = 5\r\n          this.numberOfRows = 2\r\n          break\r\n        // 6x1\r\n        case 8:\r\n          this.framesPerRow = 6\r\n          this.numberOfRows = 1\r\n          break\r\n        // 6x2\r\n        case 9:\r\n          this.framesPerRow = 6\r\n          this.numberOfRows = 2\r\n          break\r\n      }\r\n      await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\r\n      this.getFramesArray()\r\n      setTimeout(() => {\r\n        for (let ref of this.$refs.frames) {\r\n          ref?.resize(this.lastHeight)\r\n        }\r\n      }, 150)\r\n    },\r\n    getFramesArray() {\r\n      this.frames = this.fInterface.getFrames(Positions.current)\r\n      this.nextFrames = this.fInterface.getFrames(Positions.next)\r\n      this.previousFrames = this.fInterface.getFrames(Positions.previous)\r\n    },\r\n    async createFramesInterface() {\r\n      this.frames = this.loadingArray\r\n      let ch = this.channel\r\n      let associationTMP = {\r\n        1735073: 1,\r\n        1735074: 139,\r\n        1735075: 3,\r\n        1735076: 132,\r\n      }\r\n      //\r\n      this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch\r\n\r\n      const t = this.startAudienceTime.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n      // * iniciar slider\r\n      this.blockStartTime = time\r\n      this.fInterface = await new FramesInterface(\r\n        this.channelCode,\r\n        this.numberOfRows,\r\n        this.framesPerRow,\r\n        time,\r\n        this.startAudienceTime,\r\n        this.useCache\r\n      )\r\n      await this.fInterface.init()\r\n\r\n      this.getFramesArray()\r\n\r\n      this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n\r\n      this.activeVideo = null\r\n    },\r\n    getIndex(rowNumber, frameIndex, position) {\r\n      let from = this.framesPerRow * this.numberOfRows * position\r\n      let till = this.framesPerRow * this.numberOfRows * (position + 1)\r\n\r\n      return (from + till * (rowNumber - 1)) / rowNumber + frameIndex\r\n    },\r\n    getAudienceTime(frameTime, rowNumber, frameNumber, position) {\r\n      if (!frameTime) {\r\n        return 'Loading...'\r\n      } else if (\r\n        this.getIndex(rowNumber, frameNumber, position) === this.activeVideo\r\n      ) {\r\n        return this.convertToAudienceTime(this.videoTime)\r\n      } else {\r\n        return this.convertToAudienceTime(frameTime)\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    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    selectFrame(index, frame) {\r\n      const d = this.getDateParts()\r\n      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\r\n      const frameTime = frame?.time\r\n\r\n      if (frameTime - (this.startAudienceSeconds + limit) <= 0) {\r\n        if (this.hourIniSelected === true) {\r\n          this.hourIniSelected = frameTime\r\n\r\n          if (\r\n            this.hourEndSelected &&\r\n            this.hourIniSelected > this.hourEndSelected\r\n          ) {\r\n            this.hourEndSelected = false\r\n          }\r\n        } else if (this.hourEndSelected === true) {\r\n          if (frameTime > this.hourIniSelected) {\r\n            this.hourEndSelected = frameTime\r\n            this.canInsertTime = true\r\n          } else {\r\n            this.hourEndSelected = false\r\n          }\r\n        }\r\n      }\r\n\r\n      if (this.activeFrame !== index) {\r\n        // ? Se clicar no frame diferente de onde está a dar play, faz pausa\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.activeVideo = null\r\n        this.activeFrame = index\r\n      }\r\n    },\r\n    setHourIni() {\r\n      this.canInsertTime = true\r\n      this.hourIniSelected = true\r\n      document.getElementById(`frame-${this.activeFrame}`).click()\r\n      this.$emit('setHourIni', {\r\n        hour_ini: this.hourIniSelected\r\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n          : null,\r\n      })\r\n    },\r\n    setHourEnd() {\r\n      this.canInsertTime = true\r\n      this.hourEndSelected = true\r\n      document.getElementById(`frame-${this.activeFrame}`).click()\r\n    },\r\n    //* Navegação\r\n    arrowRight() {\r\n      if (this.checkLimitRight(false)) {\r\n        if (\r\n          this.activeFrame ===\r\n          this.numberOfRows * this.framesPerRow * 2 - 1\r\n        ) {\r\n          console.log(this.activeFrame, 'ACTIVE FRAME')\r\n          this.next()\r\n        } else {\r\n          this.activeFrame++\r\n        }\r\n      }\r\n    },\r\n    arrowLeft() {\r\n      if (this.checkLimitLeft(false)) {\r\n        if (this.activeFrame === this.numberOfRows * this.framesPerRow) {\r\n          this.prev()\r\n        } else {\r\n          this.activeFrame--\r\n        }\r\n      }\r\n    },\r\n    arrowUp() {\r\n      console.log(\r\n        this.activeFrame - this.numberOfRows * this.framesPerRow,\r\n        Math.round((this.numberOfRows * this.framesPerRow) / 2)\r\n      )\r\n      if (\r\n        this.activeFrame - this.numberOfRows * this.framesPerRow >\r\n        Math.round((this.numberOfRows * this.framesPerRow) / 2)\r\n      ) {\r\n        this.activeFrame -= this.framesPerRow\r\n      }\r\n    },\r\n    arrowDown() {\r\n      if (\r\n        this.activeFrame - this.numberOfRows * this.framesPerRow <\r\n        Math.round((this.numberOfRows * this.framesPerRow) / 2)\r\n      ) {\r\n        this.activeFrame += this.framesPerRow\r\n      }\r\n    },\r\n\r\n    checkLimitRight(value) {\r\n      const hours = this.endAudienceTime.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59)\r\n\r\n      if (value) {\r\n        return (\r\n          high > (this.fInterface.getCurrentTime() - 1) * 1000 &&\r\n          this.nextFrames[0].title !== -1\r\n        )\r\n      } else {\r\n        // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000\r\n        return high > this.fInterface.getCurrentTime() * 1000\r\n      }\r\n    },\r\n    checkLimitLeft(value) {\r\n      const hours = this.startAudienceTime.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const low = Date.UTC(d.year, d.month, d.day, hours[0], hours[1], hours[2])\r\n\r\n      if (value) {\r\n        return low <= (this.fInterface.getCurrentTime() - 1) * 1000\r\n      } else {\r\n        return (\r\n          low <\r\n          (this.fInterface.getCurrentTime() +\r\n            this.activeFrame -\r\n            this.numberOfRows * this.framesPerRow) *\r\n            1000\r\n        )\r\n      }\r\n    },\r\n    async next() {\r\n      if (this.checkLimitRight(true) && Date.now() - this.lastNext > 150) {\r\n        const array = 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\r\n        if (array.length === 1) {\r\n          const frame = array[0]\r\n          frame.stop(false)\r\n        }\r\n        this.fInterface.setCurrentStep(this.secondsPerFrame)\r\n        await this.fInterface.loadNextFrames()\r\n\r\n        this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n        this.activeVideo = null\r\n\r\n        this.getFramesArray()\r\n        this.lastNext = Date.now()\r\n      }\r\n    },\r\n    async prev() {\r\n      if (this.checkLimitLeft(true) && Date.now() - this.lastPrev > 150) {\r\n        const array = 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        if (array.length === 1) {\r\n          const frame = array[0]\r\n          frame.stop(false)\r\n        }\r\n\r\n        this.fInterface.setCurrentStep(this.secondsPerFrame)\r\n        await this.fInterface.loadPrevFrames()\r\n\r\n        this.activeFrame = this.getIndex(\r\n          this.numberOfRows,\r\n          this.framesPerRow - 1,\r\n          Positions.current\r\n        )\r\n        this.activeVideo = null\r\n\r\n        this.getFramesArray()\r\n        this.lastPrev = Date.now()\r\n      }\r\n    },\r\n    async setStartTime(time) {\r\n      if (time.indexOf(':') !== -1) {\r\n        time = time.replace(/:/g, '')\r\n      }\r\n      const t = time.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n      this.frames = this.loadingArray\r\n\r\n      await this.fInterface.changeTime(setTime)\r\n\r\n      this.getFramesArray()\r\n\r\n      this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n      // let frames = this.$refs.frames\r\n\r\n      // let audienceTime = null\r\n      // if (frames.length > 0) {\r\n      // let frame = frames[0].frame\r\n      // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n      // }\r\n\r\n      this.activeVideo = null\r\n\r\n      return true\r\n    },\r\n    hourToTimeStamp(time) {\r\n      if (time.indexOf(':') !== -1) {\r\n        time = time.replace(/:/g, '')\r\n      }\r\n      const t = time.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n\r\n      return setTime\r\n    },\r\n    async changeHour(value) {\r\n      if (value) {\r\n        setTimeout(() => {\r\n          const array = 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\r\n          if (array.length === 1) {\r\n            const frame = array[0]\r\n            frame.stop(false)\r\n          }\r\n\r\n          this.setStartTime(value, true)\r\n        }, 0)\r\n      }\r\n    },\r\n    changeBlockInterval(value) {\r\n      this.changeHour(value.ini)\r\n      let time_ini, time_end\r\n      time_ini = this.hourToTimeStamp(value.ini)\r\n      time_end = this.hourToTimeStamp(value.end)\r\n      this.videoSliderTotalDuration = time_end - time_ini\r\n      this.$refs.frames[0].changeSettings(time_ini)\r\n      this.blockStartTime = time_ini\r\n    },\r\n    //eslint-disable-next-line\r\n    async updateVideoTime(index, videoTime) {\r\n      this.activeVideo = index\r\n      this.videoTime = videoTime\r\n    },\r\n    //eslint-disable-next-line\r\n    updateVideoStatus(currentTime) {\r\n      if (!this.progressVideoDrag) {\r\n        // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS\r\n        // this.updateProgress(null, currentTime)\r\n      }\r\n    },\r\n    async startPlaying(frame, totalTime) {\r\n      const array = this.$refs.frames.filter(\r\n        (fc) => fc.frame.time !== frame.time\r\n      )\r\n\r\n      for (let ref of array) {\r\n        if (\r\n          ref.videoStatus === ref.Status.playing ||\r\n          ref.videoStatus === ref.Status.paused\r\n        ) {\r\n          ref.stop(false)\r\n        }\r\n      }\r\n\r\n      this.videoTotalTime = totalTime\r\n      this.videoPlaying = true\r\n    },\r\n    stopPlaying() {\r\n      this.videoTotalTime = null\r\n      this.videoPlaying = false\r\n      this.paused = false\r\n    },\r\n    insertTime() {\r\n      this.$emit('timeToInsert', {\r\n        channel: this.channel,\r\n        hour_ini: this.hourIniSelected\r\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n          : null,\r\n        hour_end: this.hourEndSelected\r\n          ? this.convertToAudienceTime(this.hourEndSelected, '')\r\n          : null,\r\n        force: false,\r\n      })\r\n\r\n      if (this.jumpOnInsert) {\r\n        this.changeHour(\r\n          this.convertToAudienceTime(\r\n            (this.hourEndSelected || this.hourIniSelected) + 1\r\n          )\r\n        )\r\n      }\r\n\r\n      this.hourIniSelected = null\r\n      this.hourEndSelected = null\r\n      this.canInsertTime = false\r\n\r\n      // this.fInterface.setCurrentPosition(this.hourEndSelected)\r\n    },\r\n    insertTimeForce() {\r\n      this.$emit('timeToInsert', {\r\n        channel: this.channel,\r\n        hour_ini: this.hourIniSelected\r\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n          : null,\r\n        hour_end: this.hourEndSelected\r\n          ? this.convertToAudienceTime(this.hourEndSelected, '')\r\n          : null,\r\n        force: true,\r\n      })\r\n\r\n      this.hourIniSelected = null\r\n      this.hourEndSelected = null\r\n      this.canInsertTime = false\r\n\r\n      // this.fInterface.setCurrentPosition(this.hourEndSelected)\r\n    },\r\n    async getChannelMedia() {\r\n      // this.media = (await ChannelService.show(this.channel)).data.MEDIA\r\n    },\r\n    async changeServerClick() {\r\n      this.changeServer = !this.changeServer\r\n      sessionStorage.setItem(\r\n        'server',\r\n        this.changeServer ? 'alternative' : 'default'\r\n      )\r\n\r\n      // if (this.$route.params.time != this.frames[0].time)\r\n      //   this.$router.push({\r\n      //     name: 'grid',\r\n      //     params: {\r\n      //       date: this.date,\r\n      //       channel: this.channelCode,\r\n      //       time: this.frames[0].time,\r\n      //     },\r\n      //   })\r\n      location.reload()\r\n    },\r\n  },\r\n  computed: {\r\n    active: {\r\n      get() {\r\n        return this.value\r\n      },\r\n      set(value) {\r\n        this.$emit('input', value)\r\n      },\r\n    },\r\n    settingsClosed() {\r\n      return !Object.values(this.dialogs).find((v) => v)\r\n    },\r\n    startAudienceSeconds() {\r\n      const t = this.startAudienceTime.match(/.{1,2}/g)\r\n      return parseInt(t[0] * 3600 + t[1] * 60 + t[2])\r\n    },\r\n    loadingArray() {\r\n      return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())\r\n    },\r\n    serverOfFrames() {\r\n      return sessionStorage.getItem('server')\r\n    },\r\n  },\r\n  watch: {\r\n    secondsPerFrame(value) {\r\n      let frames = this.$refs.frames\r\n      let initialTime = null\r\n      let audienceTime = null\r\n      if (frames.length > 0) {\r\n        let frame = frames[0].frame\r\n\r\n        if (initialTime === null) {\r\n          initialTime = frame.time\r\n        }\r\n        if (value <= 5) {\r\n          let newAudienceTime = initialTime + value\r\n          audienceTime = this.getAudienceTime(newAudienceTime, 0, 0, 0)\r\n          this.changeHour(audienceTime)\r\n          this.next()\r\n        }\r\n      }\r\n    },\r\n    framesFormat(value) {\r\n      this.setFrameSelection(value)\r\n    },\r\n    active() {\r\n      // ? sempre que trocamos de tabs dar reset as horas selected\r\n      this.hourIniSelected = false\r\n      this.hourEndSelected = false\r\n    },\r\n    useCache() {\r\n      this.createFramesInterface()\r\n    },\r\n    hourIniSelected(value) {\r\n      if (value) {\r\n        sessionStorage.setItem(\r\n          'currentTimeFrames',\r\n          this.convertToAudienceTime(this.hourIniSelected, '')\r\n        )\r\n      } else {\r\n        sessionStorage.removeItem('currentTimeFrames')\r\n      }\r\n    },\r\n    activeFrame(value) {\r\n      if (value) {\r\n        this.stopPlayingBar()\r\n      }\r\n    },\r\n    channel() {\r\n      this.updatingChannel = new Promise((resolve, reject) => {\r\n        try {\r\n          this.createFramesInterface()\r\n          resolve(true)\r\n        } catch (err) {\r\n          reject(err)\r\n        }\r\n      })\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\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}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n  align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n  background-color: #f5f5f5;\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}\r\n#command-bar button {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n  padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\r\n}\r\n\r\n.settings-container {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n  margin: 0 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n  margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n  border: none;\r\n}\r\n\r\n.visualization-card {\r\n  border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-09cd6aae";
+  const __vue_scope_id__ = "data-v-33380758";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twab/visualization",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "main": "dist/visualization.js",
   "files": [
     "dist"