@twab/visualization 0.9.15 → 0.9.16

package/dist/visualization.js

@@ -1675,7 +1675,10 @@ var __vue_render__$4 = function () {
       _vm.commandBarShow
         ? _c(
             "div",
-            { staticClass: "visualization-row visualization-justify-center" },
+            {
+              staticClass:
+                "visualization-row visualization-justify-center pt-3",
+            },
             _vm._l(_vm.commandBarBtns, function (btn, index) {
               return _c("div", { key: "command-btn-" + index }, [
                 !btn
@@ -1741,11 +1744,11 @@ __vue_render__$4._withStripped = true;
   /* style */
   const __vue_inject_styles__$4 = function (inject) {
     if (!inject) return
-    inject("data-v-6ca549de_0", { source: "\n.visualization-row[data-v-6ca549de] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-6ca549de] {\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-6ca549de] {\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-6ca549de] {\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-6ca549de] {\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-6ca549de],[data-v-6ca549de] .visualization-justify-center  {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-6ca549de] {\r\n  align-items: center;\n}\n#visualization-container[data-v-6ca549de] {\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-6ca549de] {\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-6ca549de],\r\n#info-bar[data-v-6ca549de] {\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-6ca549de] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-6ca549de]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-6ca549de] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-6ca549de] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-6ca549de] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-6ca549de] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-6ca549de] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-6ca549de] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-6ca549de] {\r\n  margin: 0 8px;\n}\nsvg[data-v-6ca549de]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-6ca549de] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-6ca549de] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-6ca549de] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\n.tooltip[data-v-6ca549de] {\r\n  display: block !important;\r\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-6ca549de] {\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-6ca549de] {\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-6ca549de] {\r\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-6ca549de] {\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-6ca549de] {\r\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-6ca549de] {\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-6ca549de] {\r\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-6ca549de] {\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-6ca549de] {\r\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-6ca549de] {\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-6ca549de] {\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-6ca549de] {\r\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-6ca549de] {\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-6ca549de] {\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":";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;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":"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=\"\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, /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-aa03c4c2_0", { source: "\n.visualization-row[data-v-aa03c4c2] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-aa03c4c2] {\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-aa03c4c2] {\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-aa03c4c2] {\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-aa03c4c2] {\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-aa03c4c2],[data-v-aa03c4c2] .visualization-justify-center {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-aa03c4c2] {\r\n  align-items: center;\n}\n#visualization-container[data-v-aa03c4c2] {\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-aa03c4c2] {\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-aa03c4c2],\r\n#info-bar[data-v-aa03c4c2] {\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-aa03c4c2] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-aa03c4c2]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-aa03c4c2] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-aa03c4c2] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-aa03c4c2] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-aa03c4c2] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-aa03c4c2] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-aa03c4c2] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-aa03c4c2] {\r\n  margin: 0 8px;\n}\nsvg[data-v-aa03c4c2]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-aa03c4c2] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-aa03c4c2] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-aa03c4c2] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\n.tooltip[data-v-aa03c4c2] {\r\n  display: block !important;\r\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-aa03c4c2] {\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-aa03c4c2] {\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-aa03c4c2] {\r\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-aa03c4c2] {\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-aa03c4c2] {\r\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-aa03c4c2] {\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-aa03c4c2] {\r\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-aa03c4c2] {\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-aa03c4c2] {\r\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-aa03c4c2] {\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-aa03c4c2] {\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-aa03c4c2] {\r\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-aa03c4c2] {\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-aa03c4c2] {\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":";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;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":"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 pt-3\"\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=\"\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\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-6ca549de";
+  const __vue_scope_id__$4 = "data-v-aa03c4c2";
   /* module identifier */
   const __vue_module_identifier__$4 = undefined;
   /* functional template */
@@ -2607,95 +2610,100 @@ var __vue_render__$1 = function () {
           })
         : _vm._e(),
       _vm._v(" "),
-      _c("dialog", { ref: "frames" }, [
-        _c(
-          "div",
-          {
-            staticClass: "visualization-row",
-            staticStyle: {
-              padding: "5px",
-              "font-weight": "bold",
-              "background-color": "var(--visualization-primary)",
-              "border-color": "var(--visualization-primary)",
-              height: "40px",
-              color: "white",
-              display: "flex",
-              "justify-content": "center",
-              "padding-top": "10px",
+      _c(
+        "dialog",
+        { ref: "frames" },
+        [
+          _c(
+            "div",
+            {
+              staticClass: "visualization-row",
+              staticStyle: {
+                padding: "5px",
+                "font-weight": "bold",
+                "background-color": "var(--visualization-primary)",
+                "border-color": "var(--visualization-primary)",
+                height: "40px",
+                color: "white",
+                display: "flex",
+                "justify-content": "center",
+                "padding-top": "10px",
+              },
             },
-          },
-          [_vm._v("\n      " + _vm._s(_vm.$t("infoBar.gridForm")) + "\n    ")]
-        ),
-        _vm._v(" "),
-        _c(
-          "div",
-          {
-            staticClass: "visualization-row",
-            staticStyle: { "justify-content": "center" },
-          },
-          _vm._l(_vm.items, function (item, index) {
-            return _c(
-              "div",
-              {
-                key: index,
-                staticClass: "visualization-col",
-                staticStyle: { "min-width": "200px", "max-width": "200px" },
+            [_vm._v("\n      " + _vm._s(_vm.$t("infoBar.gridForm")) + "\n    ")]
+          ),
+          _vm._v(" "),
+          _c(
+            "v-row",
+            {
+              staticClass: "visualization-row",
+              staticStyle: { "justify-content": "center" },
+            },
+            _vm._l(_vm.items, function (item, index) {
+              return _c(
+                "v-col",
+                {
+                  key: index,
+                  staticClass: "visualization-col",
+                  staticStyle: { "min-width": "200px", "max-width": "200px" },
+                },
+                [
+                  _c("img", {
+                    style:
+                      _vm.framesValue !== item.value
+                        ? "filter: grayscale(1)"
+                        : "",
+                    attrs: { src: item.image, width: "100%" },
+                    on: {
+                      click: function () {
+                        return (_vm.framesValue = item.value)
+                      },
+                    },
+                  }),
+                ]
+              )
+            }),
+            1
+          ),
+          _vm._v(" "),
+          _c("div", { staticClass: "visualization-divider" }),
+          _vm._v(" "),
+          _c(
+            "div",
+            {
+              staticClass: "visualization-row",
+              staticStyle: {
+                display: "flex",
+                "justify-content": "center",
+                "margin-top": "10px",
+                "margin-bottom": "10px",
               },
-              [
-                _c("img", {
-                  style:
-                    _vm.framesValue !== item.value
-                      ? "filter: grayscale(1)"
-                      : "",
-                  attrs: { src: item.image, width: "100%" },
+            },
+            [
+              _c(
+                "button",
+                {
+                  staticStyle: {
+                    "border-radius": "4px",
+                    height: "35px",
+                    width: "70px",
+                    "background-color": "var(--visualization-primary)",
+                    "border-color": "var(--visualization-primary)",
+                    color: "white",
+                  },
                   on: {
-                    click: function () {
-                      return (_vm.framesValue = item.value)
+                    click: function ($event) {
+                      return _vm.$emit("close", "frames")
                     },
                   },
-                }),
-              ]
-            )
-          }),
-          0
-        ),
-        _vm._v(" "),
-        _c("div", { staticClass: "visualization-divider" }),
-        _vm._v(" "),
-        _c(
-          "div",
-          {
-            staticClass: "visualization-row",
-            staticStyle: {
-              display: "flex",
-              "justify-content": "center",
-              "margin-top": "10px",
-              "margin-bottom": "10px",
-            },
-          },
-          [
-            _c(
-              "button",
-              {
-                staticStyle: {
-                  "border-radius": "4px",
-                  height: "35px",
-                  width: "70px",
-                  "background-color": "var(--visualization-primary)",
-                  "border-color": "var(--visualization-primary)",
-                  color: "white",
-                },
-                on: {
-                  click: function ($event) {
-                    return _vm.$emit("close", "frames")
-                  },
                 },
-              },
-              [_vm._v("\n        Ok\n      ")]
-            ),
-          ]
-        ),
-      ]),
+                [_vm._v("\n        Ok\n      ")]
+              ),
+            ]
+          ),
+        ],
+        1
+      ),
       _vm._v(" "),
       _c("dialog", { ref: "secondsPerFrame" }, [
         _c(
@@ -3033,11 +3041,11 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-76bbde5a_0", { source: "\ndialog[data-v-76bbde5a] {\r\n  max-width: 60vw;\r\n  /* padding: 12px; */\r\n  border: none;\r\n  background: white;\r\n  border-radius: 6px;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translateY(-50%) translateX(-50%);\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Settings.vue"],"names":[],"mappings":";AAmZA;EACA,eAAA;EACA,mBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA;mCACA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,4CAAA;AACA","file":"Settings.vue","sourcesContent":["<template>\r\n  <div>\r\n    <GlobalEvents\r\n      v-if=\"dialogsVisibility.frames\"\r\n      @keydown.37=\"prevFormat\"\r\n      @keydown.39=\"nextFormat\"\r\n    />\r\n    <!-- Formato da grelha -->\r\n    <dialog ref=\"frames\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 40px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 10px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.gridForm') }}\r\n      </div>\r\n      <div class=\"visualization-row\" style=\"justify-content: center\">\r\n        <div\r\n          v-for=\"(item, index) in items\"\r\n          :key=\"index\"\r\n          class=\"visualization-col\"\r\n          style=\"min-width: 200px; max-width: 200px\"\r\n        >\r\n          <img\r\n            @click=\"() => (framesValue = item.value)\"\r\n            :src=\"item.image\"\r\n            width=\"100%\"\r\n            :style=\"framesValue !== item.value ? 'filter: grayscale(1)' : ''\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"visualization-divider\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n          @click=\"$emit('close', 'frames')\"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Frequencia das Imagens -->\r\n    <dialog ref=\"secondsPerFrame\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 40px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 10px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.secondImage') }}\r\n      </div>\r\n      <div class=\"visualization-row\" style=\"margin: 25px; height: 20px\">\r\n        <input\r\n          ref=\"secondsPerFrameInput\"\r\n          v-model=\"secondsPerFrameValue\"\r\n          type=\"range\"\r\n          step=\"1\"\r\n          max=\"5\"\r\n          min=\"1\"\r\n          style=\"height: 30px; width: 300px\"\r\n        />\r\n        <span style=\"padding-left: 20px; font-size: 16px\">\r\n          {{ secondsPerFrame + ' s' }}</span\r\n        >\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin: 10px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"display: flex; justify-content: center; margin-top: 10px\"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n            margin-bottom: 8px;\r\n          \"\r\n          @click=\"$emit('close', 'secondsPerFrame')\"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Go To -->\r\n    <dialog ref=\"goTo\">\r\n      <div\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 35px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 8px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.goTo') }}\r\n      </div>\r\n      <div class=\"visualization-row\" style=\"margin: 25px; height: 20px\">\r\n        <input\r\n          v-model=\"goToValue\"\r\n          type=\"text\"\r\n          placeholder=\"hh:mm:ss\"\r\n          v-mask=\"'##:##:##'\"\r\n          style=\"\r\n            height: 30px;\r\n            width: 300px;\r\n            border: 0.1px solid #c2c9d6;\r\n            border-radius: 3px;\r\n            padding: 5px;\r\n          \"\r\n        />\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n          @click=\"\r\n            () => {\r\n              $emit('close', 'goTo')\r\n              $emit('change-go-to', goToValue)\r\n              goToValue = ''\r\n            }\r\n          \"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Velocidade Reprodução -->\r\n    <GlobalEvents\r\n      @keydown.107=\"changePlaybackRate(1)\"\r\n      @keydown.109=\"changePlaybackRate(-1)\"\r\n    />\r\n    <dialog ref=\"playbackRate\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 35px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 8px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.playbackSpeed') }}\r\n      </div>\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"margin: 25px; height: 20px; width: 380px\"\r\n      >\r\n        <input\r\n          ref=\"playbackRateInput\"\r\n          v-model=\"playbackRateValue\"\r\n          type=\"range\"\r\n          step=\"0.25\"\r\n          max=\"3\"\r\n          min=\"1\"\r\n          style=\"height: 30px; width: 300px\"\r\n        />\r\n        <span\r\n          style=\"padding-left: 20px; padding-right: 20px; font-size: 16px\"\r\n          >{{ playbackRate + 'x' }}</span\r\n        >\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \"\r\n      >\r\n        <button\r\n          @click=\"$emit('close', 'playbackRate')\"\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n  </div>\r\n</template>\r\n<script>\r\nimport GridImages from '../assets/grid/index.js'\r\n\r\nexport default {\r\n  props: {\r\n    dialogsVisibility: {\r\n      type: Object,\r\n      required: false,\r\n    },\r\n    playbackRate: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    secondsPerFrame: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    framesPerRow: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    numberOfRows: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      openBlocksDialog: false,\r\n      time: '',\r\n      rangeBlocks: {\r\n        ini: null,\r\n        end: null,\r\n        date: null,\r\n      },\r\n      items: [\r\n        { text: '2x1', value: 1, image: GridImages['2x1'] },\r\n        { text: '3x1', value: 2, image: GridImages['3x1'] },\r\n        { text: '3x2', value: 3, image: GridImages['3x2'] },\r\n        { text: '4x1', value: 4, image: GridImages['4x1'] },\r\n        { text: '4x2', value: 5, image: GridImages['4x2'] },\r\n        { text: '5x1', value: 6, image: GridImages['5x1'] },\r\n        { text: '5x2', value: 7, image: GridImages['5x2'] },\r\n        { text: '6x1', value: 8, image: GridImages['6x1'] },\r\n        { text: '6x2', value: 9, image: GridImages['6x2'] },\r\n      ],\r\n\r\n      // NEW\r\n      goToValue: '',\r\n    }\r\n  },\r\n  mounted() {\r\n    this.toogleDialogs()\r\n  },\r\n  computed: {\r\n    secondsPerFrameValue: {\r\n      get() {\r\n        return this.secondsPerFrame\r\n      },\r\n      set(val) {\r\n        this.$emit('change-seconds-per-frame', parseInt(val))\r\n      },\r\n    },\r\n    playbackRateValue: {\r\n      get() {\r\n        return this.playbackRate\r\n      },\r\n      set(val) {\r\n        this.$emit('change-playback-rate', parseFloat(val))\r\n      },\r\n    },\r\n    framesValue: {\r\n      get() {\r\n        return this.items.find(\r\n          (item) => item.text === `${this.framesPerRow}x${this.numberOfRows}`\r\n        ).value\r\n      },\r\n      set(value) {\r\n        this.$emit('set-frames-selection', value)\r\n      },\r\n    },\r\n    timeRules() {\r\n      return [\r\n        (time) =>\r\n          (time >= '02:30:00' && time <= '26:29:59') ||\r\n          this.$i18n.t('form.mustBeBetween'),\r\n      ]\r\n    },\r\n  },\r\n  methods: {\r\n    toogleDialogs() {\r\n      for (const dialog of Object.values(this.$refs)) {\r\n        dialog.close?.()\r\n      }\r\n\r\n      const openDialog = Object.keys(this.dialogsVisibility).find(\r\n        (key) => this.dialogsVisibility[key]\r\n      )\r\n\r\n      if (openDialog) {\r\n        this.$refs[openDialog].showModal()\r\n      }\r\n    },\r\n    prevFormat() {\r\n      if (this.items.find((format) => format.value === this.framesValue - 1)) {\r\n        this.framesValue--\r\n      }\r\n    },\r\n    nextFormat() {\r\n      if (this.items.find((format) => format.value === this.framesValue + 1)) {\r\n        this.framesValue++\r\n      }\r\n    },\r\n    changePlaybackRate(direction = 1) {\r\n      if (direction === 1) {\r\n        this.$refs.playbackRateInput.stepUp()\r\n      } else if (direction === -1) {\r\n        this.$refs.playbackRateInput.stepDown()\r\n      }\r\n      this.playbackRateValue = this.$refs.playbackRateInput.value\r\n    },\r\n    closeBlocksDialog() {\r\n      Object.entries(this.rangeBlocks).forEach(([key, value]) => {\r\n        if (!value || key == 'date') return\r\n        var res = value.replace(/\\D/g, '')\r\n        if (res.length < 6) {\r\n          for (let i = res.length; i < 6; i++) {\r\n            res += '0'\r\n          }\r\n        }\r\n        res.match(/.{1,2}/g)\r\n        let a = res.substring(0, 2)\r\n        let b = res.substring(2, 4)\r\n        let c = res.substring(4, 6)\r\n        this.rangeBlocks[key] = a + ':' + b + ':' + c\r\n      })\r\n\r\n      this.openBlocksDialog = false\r\n      this.$emit('goToBlockInterval', this.rangeBlocks)\r\n    },\r\n  },\r\n  watch: {\r\n    dialogsVisibility: {\r\n      handler() {\r\n        this.toogleDialogs()\r\n      },\r\n      deep: true,\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\ndialog {\r\n  max-width: 60vw;\r\n  /* padding: 12px; */\r\n  border: none;\r\n  background: white;\r\n  border-radius: 6px;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translateY(-50%) translateX(-50%);\r\n}\r\n</style>\r\n"]}, media: undefined });
+    inject("data-v-7082b87a_0", { source: "\ndialog[data-v-7082b87a] {\r\n  max-width: 60vw;\r\n  /* padding: 12px; */\r\n  border: none;\r\n  background: white;\r\n  border-radius: 6px;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translateY(-50%) translateX(-50%);\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Settings.vue"],"names":[],"mappings":";AAmZA;EACA,eAAA;EACA,mBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA;mCACA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,4CAAA;AACA","file":"Settings.vue","sourcesContent":["<template>\r\n  <div>\r\n    <GlobalEvents\r\n      v-if=\"dialogsVisibility.frames\"\r\n      @keydown.37=\"prevFormat\"\r\n      @keydown.39=\"nextFormat\"\r\n    />\r\n    <!-- Formato da grelha -->\r\n    <dialog ref=\"frames\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 40px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 10px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.gridForm') }}\r\n      </div>\r\n      <v-row class=\"visualization-row\" style=\"justify-content: center\">\r\n        <v-col\r\n          v-for=\"(item, index) in items\"\r\n          :key=\"index\"\r\n          class=\"visualization-col\"\r\n          style=\"min-width: 200px; max-width: 200px\"\r\n        >\r\n          <img\r\n            @click=\"() => (framesValue = item.value)\"\r\n            :src=\"item.image\"\r\n            width=\"100%\"\r\n            :style=\"framesValue !== item.value ? 'filter: grayscale(1)' : ''\"\r\n          />\r\n        </v-col>\r\n      </v-row>\r\n      <div class=\"visualization-divider\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n          @click=\"$emit('close', 'frames')\"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Frequencia das Imagens -->\r\n    <dialog ref=\"secondsPerFrame\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 40px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 10px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.secondImage') }}\r\n      </div>\r\n      <div class=\"visualization-row\" style=\"margin: 25px; height: 20px\">\r\n        <input\r\n          ref=\"secondsPerFrameInput\"\r\n          v-model=\"secondsPerFrameValue\"\r\n          type=\"range\"\r\n          step=\"1\"\r\n          max=\"5\"\r\n          min=\"1\"\r\n          style=\"height: 30px; width: 300px\"\r\n        />\r\n        <span style=\"padding-left: 20px; font-size: 16px\">\r\n          {{ secondsPerFrame + ' s' }}</span\r\n        >\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin: 10px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"display: flex; justify-content: center; margin-top: 10px\"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n            margin-bottom: 8px;\r\n          \"\r\n          @click=\"$emit('close', 'secondsPerFrame')\"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Go To -->\r\n    <dialog ref=\"goTo\">\r\n      <div\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 35px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 8px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.goTo') }}\r\n      </div>\r\n      <div class=\"visualization-row\" style=\"margin: 25px; height: 20px\">\r\n        <input\r\n          v-model=\"goToValue\"\r\n          type=\"text\"\r\n          placeholder=\"hh:mm:ss\"\r\n          v-mask=\"'##:##:##'\"\r\n          style=\"\r\n            height: 30px;\r\n            width: 300px;\r\n            border: 0.1px solid #c2c9d6;\r\n            border-radius: 3px;\r\n            padding: 5px;\r\n          \"\r\n        />\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n          @click=\"\r\n            () => {\r\n              $emit('close', 'goTo')\r\n              $emit('change-go-to', goToValue)\r\n              goToValue = ''\r\n            }\r\n          \"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Velocidade Reprodução -->\r\n    <GlobalEvents\r\n      @keydown.107=\"changePlaybackRate(1)\"\r\n      @keydown.109=\"changePlaybackRate(-1)\"\r\n    />\r\n    <dialog ref=\"playbackRate\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 35px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 8px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.playbackSpeed') }}\r\n      </div>\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"margin: 25px; height: 20px; width: 380px\"\r\n      >\r\n        <input\r\n          ref=\"playbackRateInput\"\r\n          v-model=\"playbackRateValue\"\r\n          type=\"range\"\r\n          step=\"0.25\"\r\n          max=\"3\"\r\n          min=\"1\"\r\n          style=\"height: 30px; width: 300px\"\r\n        />\r\n        <span\r\n          style=\"padding-left: 20px; padding-right: 20px; font-size: 16px\"\r\n          >{{ playbackRate + 'x' }}</span\r\n        >\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \"\r\n      >\r\n        <button\r\n          @click=\"$emit('close', 'playbackRate')\"\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n  </div>\r\n</template>\r\n<script>\r\nimport GridImages from '../assets/grid/index.js'\r\n\r\nexport default {\r\n  props: {\r\n    dialogsVisibility: {\r\n      type: Object,\r\n      required: false,\r\n    },\r\n    playbackRate: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    secondsPerFrame: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    framesPerRow: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    numberOfRows: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      openBlocksDialog: false,\r\n      time: '',\r\n      rangeBlocks: {\r\n        ini: null,\r\n        end: null,\r\n        date: null,\r\n      },\r\n      items: [\r\n        { text: '2x1', value: 1, image: GridImages['2x1'] },\r\n        { text: '3x1', value: 2, image: GridImages['3x1'] },\r\n        { text: '3x2', value: 3, image: GridImages['3x2'] },\r\n        { text: '4x1', value: 4, image: GridImages['4x1'] },\r\n        { text: '4x2', value: 5, image: GridImages['4x2'] },\r\n        { text: '5x1', value: 6, image: GridImages['5x1'] },\r\n        { text: '5x2', value: 7, image: GridImages['5x2'] },\r\n        { text: '6x1', value: 8, image: GridImages['6x1'] },\r\n        { text: '6x2', value: 9, image: GridImages['6x2'] },\r\n      ],\r\n\r\n      // NEW\r\n      goToValue: '',\r\n    }\r\n  },\r\n  mounted() {\r\n    this.toogleDialogs()\r\n  },\r\n  computed: {\r\n    secondsPerFrameValue: {\r\n      get() {\r\n        return this.secondsPerFrame\r\n      },\r\n      set(val) {\r\n        this.$emit('change-seconds-per-frame', parseInt(val))\r\n      },\r\n    },\r\n    playbackRateValue: {\r\n      get() {\r\n        return this.playbackRate\r\n      },\r\n      set(val) {\r\n        this.$emit('change-playback-rate', parseFloat(val))\r\n      },\r\n    },\r\n    framesValue: {\r\n      get() {\r\n        return this.items.find(\r\n          (item) => item.text === `${this.framesPerRow}x${this.numberOfRows}`\r\n        ).value\r\n      },\r\n      set(value) {\r\n        this.$emit('set-frames-selection', value)\r\n      },\r\n    },\r\n    timeRules() {\r\n      return [\r\n        (time) =>\r\n          (time >= '02:30:00' && time <= '26:29:59') ||\r\n          this.$i18n.t('form.mustBeBetween'),\r\n      ]\r\n    },\r\n  },\r\n  methods: {\r\n    toogleDialogs() {\r\n      for (const dialog of Object.values(this.$refs)) {\r\n        dialog.close?.()\r\n      }\r\n\r\n      const openDialog = Object.keys(this.dialogsVisibility).find(\r\n        (key) => this.dialogsVisibility[key]\r\n      )\r\n\r\n      if (openDialog) {\r\n        this.$refs[openDialog].showModal()\r\n      }\r\n    },\r\n    prevFormat() {\r\n      if (this.items.find((format) => format.value === this.framesValue - 1)) {\r\n        this.framesValue--\r\n      }\r\n    },\r\n    nextFormat() {\r\n      if (this.items.find((format) => format.value === this.framesValue + 1)) {\r\n        this.framesValue++\r\n      }\r\n    },\r\n    changePlaybackRate(direction = 1) {\r\n      if (direction === 1) {\r\n        this.$refs.playbackRateInput.stepUp()\r\n      } else if (direction === -1) {\r\n        this.$refs.playbackRateInput.stepDown()\r\n      }\r\n      this.playbackRateValue = this.$refs.playbackRateInput.value\r\n    },\r\n    closeBlocksDialog() {\r\n      Object.entries(this.rangeBlocks).forEach(([key, value]) => {\r\n        if (!value || key == 'date') return\r\n        var res = value.replace(/\\D/g, '')\r\n        if (res.length < 6) {\r\n          for (let i = res.length; i < 6; i++) {\r\n            res += '0'\r\n          }\r\n        }\r\n        res.match(/.{1,2}/g)\r\n        let a = res.substring(0, 2)\r\n        let b = res.substring(2, 4)\r\n        let c = res.substring(4, 6)\r\n        this.rangeBlocks[key] = a + ':' + b + ':' + c\r\n      })\r\n\r\n      this.openBlocksDialog = false\r\n      this.$emit('goToBlockInterval', this.rangeBlocks)\r\n    },\r\n  },\r\n  watch: {\r\n    dialogsVisibility: {\r\n      handler() {\r\n        this.toogleDialogs()\r\n      },\r\n      deep: true,\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\ndialog {\r\n  max-width: 60vw;\r\n  /* padding: 12px; */\r\n  border: none;\r\n  background: white;\r\n  border-radius: 6px;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translateY(-50%) translateX(-50%);\r\n}\r\n</style>\r\n"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$1 = "data-v-76bbde5a";
+  const __vue_scope_id__$1 = "data-v-7082b87a";
   /* module identifier */
   const __vue_module_identifier__$1 = undefined;
   /* functional template */
@@ -3062,873 +3070,891 @@ __vue_render__$1._withStripped = true;
   );
 
 //
-
-const Positions = Object.freeze({
-  previous: 0,
-  current: 1,
-  next: 2,
-});
-
-var script = {
-  name: 'visualization-container',
-  props: {
-    value: {
-      type: Boolean,
-      required: true,
-    },
-    date: {
-      type: String,
-      required: true,
-    },
-    channel: {
-      type: Number,
-      required: true,
-    },
-    startAudienceTime: {
-      type: String,
-      required: true,
-    },
-    endAudienceTime: {
-      type: String,
-      required: true,
-    },
-    videoProgressBar: {
-      type: Boolean,
-      default: false,
-    },
-    jumpOnInsert: {
-      type: Boolean,
-      default: false,
-    },
-    framesFormat: {
-      type: [Number, String],
-      default: 6,
-    },
-    maxSize: {
-      type: Number,
-    }
-  },
-  components: {
-    Frame: __vue_component__$5,
-    CommandBar: __vue_component__$4,
-    InfoBar: __vue_component__$3,
-    VideoProgress: __vue_component__$2,
-    Settings: __vue_component__$1,
-    // Help,
-  },
-  data() {
-    return {
-      Positions,
-      updatingChannel: null,
-      dialog: false,
-      timeLastBlock: null,
-      alternativeServer: false,
-      useCache: true,
-      numberOfRows: 1,
-      framesPerRow: 5,
-      secondsPerFrame: 1,
-      fInterface: null,
-      velocity: 1,
-      frames: [],
-      previousFrames: [],
-      nextFrames: [],
-      channelCode: 0,
-      videoPlaying: false,
-      activeFrame: null,
-      activeVideo: null,
-      videoTime: 0,
-      videoTotalTime: null,
-      progressVideoDrag: false,
-      hourIniSelected: false,
-      hourEndSelected: false,
-      canInsertTime: false,
-      lastHeight: 0,
-      loopInterval: null,
-      nextLoop: false,
-      prevLoop: false,
-      videoSliderTotalDuration: 900,
-      blockStartTime: null,
-      media: null,
-      changeServer: false,
-      userMultiTabsGrid: false,
-      userMultiTabsGridsModel: true,
-      playbackRate: 1,
-      paused: false,
-      commandBarShow: true,
-      dialogs: {
-        playbackRate: false,
-        goTo: false,
-        secondsPerFrame: false,
-        frames: false,
-      },
-    }
-  },
-  async created() {
-    this.changeServer = this.serverOfFrames === 'alternative';
-    this.alternativeServer = this.serverOfFrames === 'alternative';
-
-    const settings = [
-      {
-        framesPerRow: 2,
-        numberOfRows: 1,
-      },
-      {
-        framesPerRow: 3,
-        numberOfRows: 1,
-      },
-      {
-        framesPerRow: 3,
-        numberOfRows: 2,
-      },
-      {
-        framesPerRow: 4,
-        numberOfRows: 1,
-      },
-      {
-        framesPerRow: 4,
-        numberOfRows: 2,
-      },
-      {
-        framesPerRow: 5,
-        numberOfRows: 1,
-      },
-      {
-        framesPerRow: 5,
-        numberOfRows: 2,
-      },
-      {
-        framesPerRow: 6,
-        numberOfRows: 1,
-      },
-      {
-        framesPerRow: 6,
-        numberOfRows: 2,
-      },
-    ];
-
-    const storedOnDb = settings[parseInt(this.framesFormat) - 1];
-    this.framesPerRow = storedOnDb.framesPerRow;
-    this.numberOfRows = storedOnDb.numberOfRows;
-
-    await this.createFramesInterface();
-    if (this.maxSize) {
-      this.resize(this.maxSize, true);
-    }
-  },
-  methods: {
-    framesClicked(e) {
-      if (e.target.id != 'insert') {
-        this.active = true;
-      }
-    },
-    async goToStartBlock() {
-      try {
-        const d = new Date();
-        let timestamp = Date.UTC(
-          d.getFullYear(),
-          d.getMonth(),
-          d.getDate(),
-          d.getHours(),
-          d.getMinutes(),
-          d.getSeconds()
-        );
-
-        const response = (
-          await FramesService.getNextAvailableBlock({
-            channel: this.channel,
-            time: timestamp / 1000,
-          })
-        ).data;
-
-        this.dialog = false;
-        this.changeHour(this.convertToAudienceTime(response.data.start, ':'));
-      } catch (err) {
-        console.error(err);
-      }
-    },
-    async checkAvailableBlock() {
-      try {
-        const d = new Date();
-        let timestamp = Date.UTC(
-          d.getFullYear(),
-          d.getMonth(),
-          d.getDate(),
-          d.getHours(),
-          d.getMinutes(),
-          d.getSeconds()
-        );
-
-        const response = (
-          await FramesService.getNextAvailableBlock({
-            channel: this.channel,
-            time: timestamp / 1000,
-          })
-        ).data;
-
-        this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':');
-        this.dialog = true;
-        if (!response.status) {
-          this.timeLastBlock = 'N/D';
-        }
-      } catch (err) {
-        console.error(err);
-      }
-    },
-    updateSlider(videoStartTime, time) {
-      // * atualizar slider se estiver fora do range definido previamente
-      if (
-        time < this.blockStartTime ||
-        time > this.blockStartTime ||
-        videoStartTime > this.blockStartTime + this.videoSliderTotalDuration
-      ) {
-        this.blockStartTime = videoStartTime;
-        this.videoSliderTotalDuration = 900;
-      }
-    },
-    nextLoopActivate() {
-      this.breakLoop();
-      this.loopInterval = setInterval(this.next, 40);
-      setTimeout(() => {
-        this.nextLoop = true;
-      }, 0);
-    },
-    prevLoopActivate() {
-      this.breakLoop();
-      this.loopInterval = setInterval(this.prev, 40);
-      setTimeout(() => {
-        this.prevLoop = true;
-      }, 0);
-    },
-    breakLoop() {
-      clearInterval(this.loopInterval);
-      this.loopInterval = null;
-      this.nextLoop = false;
-      this.prevLoop = false;
-    },
-    changePlayPause(status) {
-      this.paused = !status;
-    },
-    resize(height=this.lastHeight) {
-      this.lastHeight = height;
-      if (this.$refs.frames) {
-        for (let frame of this.$refs.frames) {
-          frame.resize(height);
-        }
-      }
-      this.$emit('resized');
-    },
-    async goToFirstFrame() {
-      let frames = this.$refs.frames;
-
-      let audienceTime = null;
-      if (frames.length > 0) {
-        let frame = frames[0].frame;
-        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0);
-      }
-      // if (audienceTime) {
-      //   this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))
-      // }
-      if (audienceTime) {
-        const [hours, minutes, seconds] = audienceTime.split(':');
-        const totalSeconds =
-          parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds);
-        if (totalSeconds >= 9000)
-          this.changeHour(this.getLastFirtsBlockTime(audienceTime, true));
-        else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true));
-      }
-    },
-    async goToLastFrame() {
-      let frames = this.$refs.frames;
-      let audienceTime = null;
-      if (frames.length > 0) {
-        let frame = frames[0].frame;
-
-        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0);
-      }
-      if (audienceTime) {
-        this.changeHour(this.getLastFirtsBlockTime(audienceTime));
-      }
-    },
-    getLastFirtsBlockTime(time, first = false) {
-      if (time.indexOf(':') !== -1) {
-        time = time.replace(/:/g, '');
-      }
-      let h, m, newTime;
-      const t = time.match(/.{1,2}/g);
-      if (t[0] && t[1]) {
-        h = parseInt(t[0]);
-        m = parseInt(t[1]);
-      }
-      if (h < 26) {
-        if (m < 15)
-          if (first) newTime = t[0] + ':00:00';
-          else newTime = t[0] + ':14:59';
-        else if (m < 30)
-          if (first) newTime = t[0] + ':15:00';
-          else newTime = t[0] + ':29:59';
-        else if (m < 45)
-          if (first) newTime = t[0] + ':30:00';
-          else newTime = t[0] + ':44:59';
-        else if (first) newTime = t[0] + ':45:00';
-        else newTime = t[0] + ':59:59';
-      } else {
-        if (m < 15)
-          if (first) newTime = '26:00:00';
-          else newTime = '26:14:59';
-        else {
-          if (first) newTime = '26:15:00';
-          else newTime = '26:29:59';
-        }
-      }
-      return newTime
-    },
-    openBlocks() {
-      this.$refs.settings2?.openBlocks();
-    },
-    playOrPause() {
-      const array = this.$refs.frames.filter((fc) => !!fc.active);
-      if (array.length === 1) {
-        const frame = array[0];
-        frame.playOrPause(this.playbackRate);
-      }
-    },
-    stopPlayingBar() {
-      for (let ref of this.$refs.frames) {
-        if (
-          ref.videoStatus === ref.Status.playing ||
-          ref.videoStatus === ref.Status.paused
-        ) {
-          ref.stop(false);
-        }
-      }
-    },
-    async setFrameSelection(selected) {
-      this.frames = this.loadingArray;
-      switch (parseInt(selected)) {
-        // 2x1
-        case 1:
-          this.framesPerRow = 2;
-          this.numberOfRows = 1;
-          break
-        // 3x1
-        case 2:
-          this.framesPerRow = 3;
-          this.numberOfRows = 1;
-          break
-        // 3x2
-        case 3:
-          this.framesPerRow = 3;
-          this.numberOfRows = 2;
-          break
-        // 4x1
-        case 4:
-          this.framesPerRow = 4;
-          this.numberOfRows = 1;
-          break
-        // 4x2
-        case 5:
-          this.framesPerRow = 4;
-          this.numberOfRows = 2;
-          break
-        // 5x1
-        case 6:
-          this.framesPerRow = 5;
-          this.numberOfRows = 1;
-          break
-        // 5x2
-        case 7:
-          this.framesPerRow = 5;
-          this.numberOfRows = 2;
-          break
-        // 6x1
-        case 8:
-          this.framesPerRow = 6;
-          this.numberOfRows = 1;
-          break
-        // 6x2
-        case 9:
-          this.framesPerRow = 6;
-          this.numberOfRows = 2;
-          break
-      }
-      await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow);
-      this.getFramesArray();
-      setTimeout(() => {
-        for (let ref of this.$refs.frames) {
-          ref?.resize(this.lastHeight);
-        }
-      }, 150);
-    },
-    getFramesArray() {
-      this.frames = this.fInterface.getFrames(Positions.current);
-      this.nextFrames = this.fInterface.getFrames(Positions.next);
-      this.previousFrames = this.fInterface.getFrames(Positions.previous);
-    },
-    async createFramesInterface() {
-      this.frames = this.loadingArray;
-      let ch = this.channel;
-      let associationTMP = {
-        1735073: 1,
-        1735074: 139,
-        1735075: 3,
-        1735076: 132,
-      };
-      //
-      this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch;
-
-      const t = this.startAudienceTime.match(/.{1,2}/g);
-      const d = this.getDateParts();
-      const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000;
-      // * iniciar slider
-      this.blockStartTime = time;
-      this.fInterface = await new FramesInterface(
-        this.channelCode,
-        this.numberOfRows,
-        this.framesPerRow,
-        time,
-        this.startAudienceTime,
-        this.useCache
-      );
-      await this.fInterface.init();
-
-      this.getFramesArray();
-
-      this.activeFrame = this.getIndex(1, 0, Positions.current);
-
-      this.activeVideo = null;
-    },
-    getIndex(rowNumber, frameIndex, position) {
-      let from = this.framesPerRow * this.numberOfRows * position;
-      let till = this.framesPerRow * this.numberOfRows * (position + 1);
-
-      return (from + till * (rowNumber - 1)) / rowNumber + frameIndex
-    },
-    getAudienceTime(frameTime, rowNumber, frameNumber, position) {
-      if (!frameTime) {
-        return 'Loading...'
-      } else if (
-        this.getIndex(rowNumber, frameNumber, position) === this.activeVideo
-      ) {
-        return this.convertToAudienceTime(this.videoTime)
-      } else {
-        return this.convertToAudienceTime(frameTime)
-      }
-    },
-    dateInUtc(miliSeconds) {
-      var date = new Date(miliSeconds);
-      var utc = new Date(
-        date.getUTCFullYear(),
-        date.getUTCMonth(),
-        date.getUTCDate(),
-        date.getUTCHours(),
-        date.getUTCMinutes(),
-        date.getUTCSeconds()
-      );
-      return utc
-    },
-    convertToAudienceTime(time, separator = ':') {
-      const d = this.getDateParts();
-      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000;
-
-      let hour = this.dateInUtc(time * 1000)
-        .toTimeString()
-        .split(' ')[0]
-        .split(':')
-        .map(Number);
-
-      if (time > limit && time <= limit + this.startAudienceSeconds) {
-        hour[0] = 24 + hour[0];
-      }
-      return hour
-        .map((part) => (part > 9 ? part.toString() : '0' + part))
-        .join(separator)
-    },
-    getDateParts(date = this.date) {
-      const d = new Date(date);
-      return {
-        year: d.getFullYear(),
-        month: d.getMonth(),
-        day: d.getDate(),
-      }
-    },
-    selectFrame(index, frame) {
-      const d = this.getDateParts();
-      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000;
-      const frameTime = frame?.time;
-
-      if (frameTime - (this.startAudienceSeconds + limit) <= 0) {
-        if (this.hourIniSelected === true) {
-          this.hourIniSelected = frameTime;
-
-          if (
-            this.hourEndSelected &&
-            this.hourIniSelected > this.hourEndSelected
-          ) {
-            this.hourEndSelected = false;
-          }
-        } else if (this.hourEndSelected === true) {
-          if (frameTime > this.hourIniSelected) {
-            this.hourEndSelected = frameTime;
-            this.canInsertTime = true;
-          } else {
-            this.hourEndSelected = false;
-          }
-        }
-      }
-
-      if (this.activeFrame !== index) {
-        // ? Se clicar no frame diferente de onde está a dar play, faz pausa
-        const array = this.$refs.frames.filter(
-          (fc) => fc.videoStatus === fc.Status.playing
-        );
-        if (array.length === 1) {
-          const frame = array[0];
-          frame.playOrPause();
-        }
-        this.activeVideo = null;
-        this.activeFrame = index;
-      }
-    },
-    setHourIni() {
-      this.canInsertTime = true;
-      this.hourIniSelected = true;
-      document.getElementById(`frame-${this.activeFrame}`).click();
-      this.$emit('setHourIni', {
-        hour_ini: this.hourIniSelected
-          ? this.convertToAudienceTime(this.hourIniSelected, '')
-          : null,
-      });
-    },
-    setHourEnd() {
-      this.canInsertTime = true;
-      this.hourEndSelected = true;
-      document.getElementById(`frame-${this.activeFrame}`).click();
-    },
-    //* Navegação
-    arrowRight() {
-      if (this.checkLimitRight(false)) {
-        if (
-          this.activeFrame ===
-          this.numberOfRows * this.framesPerRow * 2 - 1
-        ) {
-          this.next();
-        } else {
-          this.activeFrame++;
-        }
-      }
-    },
-    arrowLeft() {
-      if (this.checkLimitLeft(false)) {
-        if (this.activeFrame === this.numberOfRows * this.framesPerRow) {
-          this.prev();
-        } else {
-          this.activeFrame--;
-        }
-      }
-    },
-    checkLimitRight(value) {
-      this.endAudienceTime.match(/.{1,2}/g);
-      const d = this.getDateParts();
-      const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59);
-
-      if (value) {
-        return (
-          high > (this.fInterface.getCurrentTime() - 1) * 1000 &&
-          this.nextFrames[0].title !== -1
-        )
-      } else {
-        // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000
-        return high > this.fInterface.getCurrentTime() * 1000
-      }
-    },
-    checkLimitLeft(value) {
-      const hours = this.startAudienceTime.match(/.{1,2}/g);
-      const d = this.getDateParts();
-      const low = Date.UTC(d.year, d.month, d.day, hours[0], hours[1], hours[2]);
-
-      if (value) {
-        return low <= (this.fInterface.getCurrentTime() - 1) * 1000
-      } else {
-        return (
-          low <
-          (this.fInterface.getCurrentTime() +
-            this.activeFrame -
-            this.numberOfRows * this.framesPerRow) *
-            1000
-        )
-      }
-    },
-    async next() {
-      if (this.checkLimitRight(true)) {
-        const array = this.$refs.frames.filter(
-          (fc) =>
-            fc.videoStatus === fc.Status.playing ||
-            fc.videoStatus === fc.Status.paused
-        );
-
-        if (array.length === 1) {
-          const frame = array[0];
-          frame.stop(false);
-        }
-        this.fInterface.setCurrentStep(this.secondsPerFrame);
-        await this.fInterface.loadNextFrames();
-
-        this.activeFrame = this.getIndex(1, 0, Positions.current);
-        this.activeVideo = null;
-
-        this.getFramesArray();
-      }
-    },
-    async prev() {
-      if (this.checkLimitLeft(true)) {
-        const array = this.$refs.frames.filter(
-          (fc) =>
-            fc.videoStatus === fc.Status.playing ||
-            fc.videoStatus === fc.Status.paused
-        );
-        if (array.length === 1) {
-          const frame = array[0];
-          frame.stop(false);
-        }
-
-        this.fInterface.setCurrentStep(this.secondsPerFrame);
-        await this.fInterface.loadPrevFrames();
-
-        this.activeFrame = this.getIndex(
-          this.numberOfRows,
-          this.framesPerRow - 1,
-          Positions.current
-        );
-        this.activeVideo = null;
-
-        this.getFramesArray();
-      }
-    },
-    async setStartTime(time) {
-      if (time.indexOf(':') !== -1) {
-        time = time.replace(/:/g, '');
-      }
-      const t = time.match(/.{1,2}/g);
-      const d = this.getDateParts();
-      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000;
-      this.frames = this.loadingArray;
-
-      await this.fInterface.changeTime(setTime);
-
-      this.getFramesArray();
-
-      this.activeFrame = this.getIndex(1, 0, Positions.current);
-      // let frames = this.$refs.frames
-
-      // let audienceTime = null
-      // if (frames.length > 0) {
-      // let frame = frames[0].frame
-      // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)
-      // }
-
-      this.activeVideo = null;
-
-      return true
-    },
-    hourToTimeStamp(time) {
-      if (time.indexOf(':') !== -1) {
-        time = time.replace(/:/g, '');
-      }
-      const t = time.match(/.{1,2}/g);
-      const d = this.getDateParts();
-      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000;
-
-      return setTime
-    },
-    async changeHour(value) {
-      if (value) {
-        setTimeout(() => {
-          const array = this.$refs.frames.filter(
-            (fc) =>
-              fc.videoStatus === fc.Status.playing ||
-              fc.videoStatus === fc.Status.paused
-          );
-
-          if (array.length === 1) {
-            const frame = array[0];
-            frame.stop(false);
-          }
-
-          this.setStartTime(value, true);
-        }, 0);
-      }
-    },
-    changeBlockInterval(value) {
-      this.changeHour(value.ini);
-      let time_ini, time_end;
-      time_ini = this.hourToTimeStamp(value.ini);
-      time_end = this.hourToTimeStamp(value.end);
-      this.videoSliderTotalDuration = time_end - time_ini;
-      this.$refs.frames[0].changeSettings(time_ini);
-      this.blockStartTime = time_ini;
-    },
-    //eslint-disable-next-line
-    async updateVideoTime(index, videoTime) {
-      this.activeVideo = index;
-      this.videoTime = videoTime;
-    },
-    //eslint-disable-next-line
-    updateVideoStatus(currentTime) {
-      if (!this.progressVideoDrag) ;
-    },
-    async startPlaying(frame, totalTime) {
-      const array = this.$refs.frames.filter(
-        (fc) => fc.frame.time !== frame.time
-      );
-
-      for (let ref of array) {
-        if (
-          ref.videoStatus === ref.Status.playing ||
-          ref.videoStatus === ref.Status.paused
-        ) {
-          ref.stop(false);
-        }
-      }
-
-      this.videoTotalTime = totalTime;
-      this.videoPlaying = true;
-    },
-    stopPlaying() {
-      this.videoTotalTime = null;
-      this.videoPlaying = false;
-      this.paused = false;
-    },
-    insertTime() {
-      this.$emit('timeToInsert', {
-        channel: this.channel,
-        hour_ini: this.hourIniSelected
-          ? this.convertToAudienceTime(this.hourIniSelected, '')
-          : null,
-        hour_end: this.hourEndSelected
-          ? this.convertToAudienceTime(this.hourEndSelected, '')
-          : null,
-        force: false,
-      });
-
-      if (this.jumpOnInsert) {
-        this.changeHour(
-          this.convertToAudienceTime(
-            (this.hourEndSelected || this.hourIniSelected) + 1
-          )
-        );
-      }
-
-      this.hourIniSelected = null;
-      this.hourEndSelected = null;
-      this.canInsertTime = false;
-
-      // this.fInterface.setCurrentPosition(this.hourEndSelected)
-    },
-    insertTimeForce() {
-      this.$emit('timeToInsert', {
-        channel: this.channel,
-        hour_ini: this.hourIniSelected
-          ? this.convertToAudienceTime(this.hourIniSelected, '')
-          : null,
-        hour_end: this.hourEndSelected
-          ? this.convertToAudienceTime(this.hourEndSelected, '')
-          : null,
-        force: true,
-      });
-
-      this.hourIniSelected = null;
-      this.hourEndSelected = null;
-      this.canInsertTime = false;
-
-      // this.fInterface.setCurrentPosition(this.hourEndSelected)
-    },
-    async getChannelMedia() {
-      // this.media = (await ChannelService.show(this.channel)).data.MEDIA
-    },
-    async changeServerClick() {
-      this.changeServer = !this.changeServer;
-      // this.$store.dispatch(
-      //   'serverOfFrames',
-      //   this.changeServer ? 'alternative' : 'default'
-      // )
-      sessionStorage.setItem(
-        'serverOfFrames',
-        this.changeServer ? 'alternative' : 'default'
-      );
-
-      // if (this.$route.params.time != this.frames[0].time)
-      //   this.$router.push({
-      //     name: 'grid',
-      //     params: {
-      //       date: this.date,
-      //       channel: this.channelCode,
-      //       time: this.frames[0].time,
-      //     },
-      //   })
-      location.reload();
-    },
-  },
-  computed: {
-    active: {
-      get() {
-        return this.value
-      },
-      set(value) {
-        this.$emit('input', value);
-      },
-    },
-    settingsClosed() {
-      return !Object.values(this.dialogs).find((v) => v)
-    },
-    startAudienceSeconds() {
-      const t = this.startAudienceTime.match(/.{1,2}/g);
-      return parseInt(t[0] * 3600 + t[1] * 60 + t[2])
-    },
-    loadingArray() {
-      return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())
-    },
-    serverOfFrames() {
-      return sessionStorage.getItem('server')
-    },
-  },
-  watch: {
-    framesFormat(value) {
-      this.setFrameSelection(value);
-    },
-    active() {
-      // ? sempre que trocamos de tabs dar reset as horas selected
-      this.hourIniSelected = false;
-      this.hourEndSelected = false;
-    },
-    useCache() {
-      this.createFramesInterface();
-    },
-    hourIniSelected(value) {
-      if (value) {
-        sessionStorage.setItem(
-          'currentTimeFrames',
-          this.convertToAudienceTime(this.hourIniSelected, '')
-        );
-      } else {
-        sessionStorage.removeItem('currentTimeFrames');
-      }
-    },
-    activeFrame(value) {
-      if (value) {
-        this.stopPlayingBar();
-      }
-    },
-    channel() {
-      this.updatingChannel = new Promise((resolve, reject) => {
-        try {
-          this.createFramesInterface();
-          resolve(true);
-        } catch (err) {
-          reject(err);
-        }
-      });
-    },
-  },
+
+const Positions = Object.freeze({
+  previous: 0,
+  current: 1,
+  next: 2,
+});
+
+var script = {
+  name: 'visualization-container',
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+    date: {
+      type: String,
+      required: true,
+    },
+    channel: {
+      type: Number,
+      required: true,
+    },
+    startAudienceTime: {
+      type: String,
+      required: true,
+    },
+    endAudienceTime: {
+      type: String,
+      required: true,
+    },
+    videoProgressBar: {
+      type: Boolean,
+      default: false,
+    },
+    jumpOnInsert: {
+      type: Boolean,
+      default: false,
+    },
+    framesFormat: {
+      type: [Number, String],
+      default: 6,
+    },
+    maxSize: {
+      type: Number,
+    },
+  },
+  components: {
+    Frame: __vue_component__$5,
+    CommandBar: __vue_component__$4,
+    InfoBar: __vue_component__$3,
+    VideoProgress: __vue_component__$2,
+    Settings: __vue_component__$1,
+    // Help,
+  },
+  data() {
+    return {
+      Positions,
+      updatingChannel: null,
+      dialog: false,
+      timeLastBlock: null,
+      alternativeServer: false,
+      useCache: true,
+      numberOfRows: 1,
+      framesPerRow: 5,
+      secondsPerFrame: 1,
+      fInterface: null,
+      velocity: 1,
+      frames: [],
+      previousFrames: [],
+      nextFrames: [],
+      channelCode: 0,
+      videoPlaying: false,
+      activeFrame: null,
+      activeVideo: null,
+      videoTime: 0,
+      videoTotalTime: null,
+      progressVideoDrag: false,
+      hourIniSelected: false,
+      hourEndSelected: false,
+      canInsertTime: false,
+      lastHeight: 0,
+      loopInterval: null,
+      nextLoop: false,
+      prevLoop: false,
+      videoSliderTotalDuration: 900,
+      blockStartTime: null,
+      media: null,
+      changeServer: false,
+      userMultiTabsGrid: false,
+      userMultiTabsGridsModel: true,
+      playbackRate: 1,
+      paused: false,
+      commandBarShow: true,
+      dialogs: {
+        playbackRate: false,
+        goTo: false,
+        secondsPerFrame: false,
+        frames: false,
+      },
+    }
+  },
+  async created() {
+    this.changeServer = this.serverOfFrames === 'alternative';
+    this.alternativeServer = this.serverOfFrames === 'alternative';
+
+    const settings = [
+      {
+        framesPerRow: 2,
+        numberOfRows: 1,
+      },
+      {
+        framesPerRow: 3,
+        numberOfRows: 1,
+      },
+      {
+        framesPerRow: 3,
+        numberOfRows: 2,
+      },
+      {
+        framesPerRow: 4,
+        numberOfRows: 1,
+      },
+      {
+        framesPerRow: 4,
+        numberOfRows: 2,
+      },
+      {
+        framesPerRow: 5,
+        numberOfRows: 1,
+      },
+      {
+        framesPerRow: 5,
+        numberOfRows: 2,
+      },
+      {
+        framesPerRow: 6,
+        numberOfRows: 1,
+      },
+      {
+        framesPerRow: 6,
+        numberOfRows: 2,
+      },
+    ];
+
+    const storedOnDb = settings[parseInt(this.framesFormat) - 1];
+    this.framesPerRow = storedOnDb.framesPerRow;
+    this.numberOfRows = storedOnDb.numberOfRows;
+
+    await this.createFramesInterface();
+    if (this.maxSize) {
+      this.resize(this.maxSize, true);
+    }
+  },
+  methods: {
+    framesClicked(e) {
+      if (e.target.id != 'insert') {
+        this.active = true;
+      }
+    },
+    async goToStartBlock() {
+      try {
+        const d = new Date();
+        let timestamp = Date.UTC(
+          d.getFullYear(),
+          d.getMonth(),
+          d.getDate(),
+          d.getHours(),
+          d.getMinutes(),
+          d.getSeconds()
+        );
+
+        const response = (
+          await FramesService.getNextAvailableBlock({
+            channel: this.channel,
+            time: timestamp / 1000,
+          })
+        ).data;
+
+        this.dialog = false;
+        this.changeHour(this.convertToAudienceTime(response.data.start, ':'));
+      } catch (err) {
+        console.error(err);
+      }
+    },
+    async checkAvailableBlock() {
+      try {
+        const d = new Date();
+        let timestamp = Date.UTC(
+          d.getFullYear(),
+          d.getMonth(),
+          d.getDate(),
+          d.getHours(),
+          d.getMinutes(),
+          d.getSeconds()
+        );
+
+        const response = (
+          await FramesService.getNextAvailableBlock({
+            channel: this.channel,
+            time: timestamp / 1000,
+          })
+        ).data;
+
+        this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':');
+        this.dialog = true;
+        if (!response.status) {
+          this.timeLastBlock = 'N/D';
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    },
+    updateSlider(videoStartTime, time) {
+      // * atualizar slider se estiver fora do range definido previamente
+      if (
+        time < this.blockStartTime ||
+        time > this.blockStartTime ||
+        videoStartTime > this.blockStartTime + this.videoSliderTotalDuration
+      ) {
+        this.blockStartTime = videoStartTime;
+        this.videoSliderTotalDuration = 900;
+      }
+    },
+    nextLoopActivate() {
+      this.breakLoop();
+      this.loopInterval = setInterval(this.next, 40);
+      setTimeout(() => {
+        this.nextLoop = true;
+      }, 0);
+    },
+    prevLoopActivate() {
+      this.breakLoop();
+      this.loopInterval = setInterval(this.prev, 40);
+      setTimeout(() => {
+        this.prevLoop = true;
+      }, 0);
+    },
+    breakLoop() {
+      clearInterval(this.loopInterval);
+      this.loopInterval = null;
+      this.nextLoop = false;
+      this.prevLoop = false;
+    },
+    changePlayPause(status) {
+      this.paused = !status;
+    },
+    resize(height = this.lastHeight) {
+      this.lastHeight = height;
+      if (this.$refs.frames) {
+        for (let frame of this.$refs.frames) {
+          frame.resize(height);
+        }
+      }
+      this.$emit('resized');
+    },
+    async goToFirstFrame() {
+      let frames = this.$refs.frames;
+
+      let audienceTime = null;
+      if (frames.length > 0) {
+        let frame = frames[0].frame;
+        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0);
+      }
+      // if (audienceTime) {
+      //   this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))
+      // }
+      if (audienceTime) {
+        const [hours, minutes, seconds] = audienceTime.split(':');
+        const totalSeconds =
+          parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds);
+        if (totalSeconds >= 9000)
+          this.changeHour(this.getLastFirtsBlockTime(audienceTime, true));
+        else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true));
+      }
+    },
+    async goToLastFrame() {
+      let frames = this.$refs.frames;
+      let audienceTime = null;
+      if (frames.length > 0) {
+        let frame = frames[0].frame;
+
+        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0);
+      }
+      if (audienceTime) {
+        this.changeHour(this.getLastFirtsBlockTime(audienceTime));
+      }
+    },
+    getLastFirtsBlockTime(time, first = false) {
+      if (time.indexOf(':') !== -1) {
+        time = time.replace(/:/g, '');
+      }
+      let h, m, newTime;
+      const t = time.match(/.{1,2}/g);
+      if (t[0] && t[1]) {
+        h = parseInt(t[0]);
+        m = parseInt(t[1]);
+      }
+      if (h < 26) {
+        if (m < 15)
+          if (first) newTime = t[0] + ':00:00';
+          else newTime = t[0] + ':14:59';
+        else if (m < 30)
+          if (first) newTime = t[0] + ':15:00';
+          else newTime = t[0] + ':29:59';
+        else if (m < 45)
+          if (first) newTime = t[0] + ':30:00';
+          else newTime = t[0] + ':44:59';
+        else if (first) newTime = t[0] + ':45:00';
+        else newTime = t[0] + ':59:59';
+      } else {
+        if (m < 15)
+          if (first) newTime = '26:00:00';
+          else newTime = '26:14:59';
+        else {
+          if (first) newTime = '26:15:00';
+          else newTime = '26:29:59';
+        }
+      }
+      return newTime
+    },
+    openBlocks() {
+      this.$refs.settings2?.openBlocks();
+    },
+    playOrPause() {
+      const array = this.$refs.frames.filter((fc) => !!fc.active);
+      if (array.length === 1) {
+        const frame = array[0];
+        frame.playOrPause(this.playbackRate);
+      }
+    },
+    stopPlayingBar() {
+      for (let ref of this.$refs.frames) {
+        if (
+          ref.videoStatus === ref.Status.playing ||
+          ref.videoStatus === ref.Status.paused
+        ) {
+          ref.stop(false);
+        }
+      }
+    },
+    async setFrameSelection(selected) {
+      this.frames = this.loadingArray;
+      switch (parseInt(selected)) {
+        // 2x1
+        case 1:
+          this.framesPerRow = 2;
+          this.numberOfRows = 1;
+          break
+        // 3x1
+        case 2:
+          this.framesPerRow = 3;
+          this.numberOfRows = 1;
+          break
+        // 3x2
+        case 3:
+          this.framesPerRow = 3;
+          this.numberOfRows = 2;
+          break
+        // 4x1
+        case 4:
+          this.framesPerRow = 4;
+          this.numberOfRows = 1;
+          break
+        // 4x2
+        case 5:
+          this.framesPerRow = 4;
+          this.numberOfRows = 2;
+          break
+        // 5x1
+        case 6:
+          this.framesPerRow = 5;
+          this.numberOfRows = 1;
+          break
+        // 5x2
+        case 7:
+          this.framesPerRow = 5;
+          this.numberOfRows = 2;
+          break
+        // 6x1
+        case 8:
+          this.framesPerRow = 6;
+          this.numberOfRows = 1;
+          break
+        // 6x2
+        case 9:
+          this.framesPerRow = 6;
+          this.numberOfRows = 2;
+          break
+      }
+      await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow);
+      this.getFramesArray();
+      setTimeout(() => {
+        for (let ref of this.$refs.frames) {
+          ref?.resize(this.lastHeight);
+        }
+      }, 150);
+    },
+    getFramesArray() {
+      this.frames = this.fInterface.getFrames(Positions.current);
+      this.nextFrames = this.fInterface.getFrames(Positions.next);
+      this.previousFrames = this.fInterface.getFrames(Positions.previous);
+    },
+    async createFramesInterface() {
+      this.frames = this.loadingArray;
+      let ch = this.channel;
+      let associationTMP = {
+        1735073: 1,
+        1735074: 139,
+        1735075: 3,
+        1735076: 132,
+      };
+      //
+      this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch;
+
+      const t = this.startAudienceTime.match(/.{1,2}/g);
+      const d = this.getDateParts();
+      const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000;
+      // * iniciar slider
+      this.blockStartTime = time;
+      this.fInterface = await new FramesInterface(
+        this.channelCode,
+        this.numberOfRows,
+        this.framesPerRow,
+        time,
+        this.startAudienceTime,
+        this.useCache
+      );
+      await this.fInterface.init();
+
+      this.getFramesArray();
+
+      this.activeFrame = this.getIndex(1, 0, Positions.current);
+
+      this.activeVideo = null;
+    },
+    getIndex(rowNumber, frameIndex, position) {
+      let from = this.framesPerRow * this.numberOfRows * position;
+      let till = this.framesPerRow * this.numberOfRows * (position + 1);
+
+      return (from + till * (rowNumber - 1)) / rowNumber + frameIndex
+    },
+    getAudienceTime(frameTime, rowNumber, frameNumber, position) {
+      if (!frameTime) {
+        return 'Loading...'
+      } else if (
+        this.getIndex(rowNumber, frameNumber, position) === this.activeVideo
+      ) {
+        return this.convertToAudienceTime(this.videoTime)
+      } else {
+        return this.convertToAudienceTime(frameTime)
+      }
+    },
+    dateInUtc(miliSeconds) {
+      var date = new Date(miliSeconds);
+      var utc = new Date(
+        date.getUTCFullYear(),
+        date.getUTCMonth(),
+        date.getUTCDate(),
+        date.getUTCHours(),
+        date.getUTCMinutes(),
+        date.getUTCSeconds()
+      );
+      return utc
+    },
+    convertToAudienceTime(time, separator = ':') {
+      const d = this.getDateParts();
+      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000;
+
+      let hour = this.dateInUtc(time * 1000)
+        .toTimeString()
+        .split(' ')[0]
+        .split(':')
+        .map(Number);
+
+      if (time > limit && time <= limit + this.startAudienceSeconds) {
+        hour[0] = 24 + hour[0];
+      }
+      return hour
+        .map((part) => (part > 9 ? part.toString() : '0' + part))
+        .join(separator)
+    },
+    getDateParts(date = this.date) {
+      const d = new Date(date);
+      return {
+        year: d.getFullYear(),
+        month: d.getMonth(),
+        day: d.getDate(),
+      }
+    },
+    selectFrame(index, frame) {
+      const d = this.getDateParts();
+      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000;
+      const frameTime = frame?.time;
+
+      if (frameTime - (this.startAudienceSeconds + limit) <= 0) {
+        if (this.hourIniSelected === true) {
+          this.hourIniSelected = frameTime;
+
+          if (
+            this.hourEndSelected &&
+            this.hourIniSelected > this.hourEndSelected
+          ) {
+            this.hourEndSelected = false;
+          }
+        } else if (this.hourEndSelected === true) {
+          if (frameTime > this.hourIniSelected) {
+            this.hourEndSelected = frameTime;
+            this.canInsertTime = true;
+          } else {
+            this.hourEndSelected = false;
+          }
+        }
+      }
+
+      if (this.activeFrame !== index) {
+        // ? Se clicar no frame diferente de onde está a dar play, faz pausa
+        const array = this.$refs.frames.filter(
+          (fc) => fc.videoStatus === fc.Status.playing
+        );
+        if (array.length === 1) {
+          const frame = array[0];
+          frame.playOrPause();
+        }
+        this.activeVideo = null;
+        this.activeFrame = index;
+      }
+    },
+    setHourIni() {
+      this.canInsertTime = true;
+      this.hourIniSelected = true;
+      document.getElementById(`frame-${this.activeFrame}`).click();
+      this.$emit('setHourIni', {
+        hour_ini: this.hourIniSelected
+          ? this.convertToAudienceTime(this.hourIniSelected, '')
+          : null,
+      });
+    },
+    setHourEnd() {
+      this.canInsertTime = true;
+      this.hourEndSelected = true;
+      document.getElementById(`frame-${this.activeFrame}`).click();
+    },
+    //* Navegação
+    arrowRight() {
+      if (this.checkLimitRight(false)) {
+        if (
+          this.activeFrame ===
+          this.numberOfRows * this.framesPerRow * 2 - 1
+        ) {
+          this.next();
+        } else {
+          this.activeFrame++;
+        }
+      }
+    },
+    arrowLeft() {
+      if (this.checkLimitLeft(false)) {
+        if (this.activeFrame === this.numberOfRows * this.framesPerRow) {
+          this.prev();
+        } else {
+          this.activeFrame--;
+        }
+      }
+    },
+    checkLimitRight(value) {
+      this.endAudienceTime.match(/.{1,2}/g);
+      const d = this.getDateParts();
+      const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59);
+
+      if (value) {
+        return (
+          high > (this.fInterface.getCurrentTime() - 1) * 1000 &&
+          this.nextFrames[0].title !== -1
+        )
+      } else {
+        // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000
+        return high > this.fInterface.getCurrentTime() * 1000
+      }
+    },
+    checkLimitLeft(value) {
+      const hours = this.startAudienceTime.match(/.{1,2}/g);
+      const d = this.getDateParts();
+      const low = Date.UTC(d.year, d.month, d.day, hours[0], hours[1], hours[2]);
+
+      if (value) {
+        return low <= (this.fInterface.getCurrentTime() - 1) * 1000
+      } else {
+        return (
+          low <
+          (this.fInterface.getCurrentTime() +
+            this.activeFrame -
+            this.numberOfRows * this.framesPerRow) *
+            1000
+        )
+      }
+    },
+    async next() {
+      if (this.checkLimitRight(true)) {
+        const array = this.$refs.frames.filter(
+          (fc) =>
+            fc.videoStatus === fc.Status.playing ||
+            fc.videoStatus === fc.Status.paused
+        );
+
+        if (array.length === 1) {
+          const frame = array[0];
+          frame.stop(false);
+        }
+        this.fInterface.setCurrentStep(this.secondsPerFrame);
+        await this.fInterface.loadNextFrames();
+
+        this.activeFrame = this.getIndex(1, 0, Positions.current);
+        this.activeVideo = null;
+
+        this.getFramesArray();
+      }
+    },
+    async prev() {
+      if (this.checkLimitLeft(true)) {
+        const array = this.$refs.frames.filter(
+          (fc) =>
+            fc.videoStatus === fc.Status.playing ||
+            fc.videoStatus === fc.Status.paused
+        );
+        if (array.length === 1) {
+          const frame = array[0];
+          frame.stop(false);
+        }
+
+        this.fInterface.setCurrentStep(this.secondsPerFrame);
+        await this.fInterface.loadPrevFrames();
+
+        this.activeFrame = this.getIndex(
+          this.numberOfRows,
+          this.framesPerRow - 1,
+          Positions.current
+        );
+        this.activeVideo = null;
+
+        this.getFramesArray();
+      }
+    },
+    async setStartTime(time) {
+      if (time.indexOf(':') !== -1) {
+        time = time.replace(/:/g, '');
+      }
+      const t = time.match(/.{1,2}/g);
+      const d = this.getDateParts();
+      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000;
+      this.frames = this.loadingArray;
+
+      await this.fInterface.changeTime(setTime);
+
+      this.getFramesArray();
+
+      this.activeFrame = this.getIndex(1, 0, Positions.current);
+      // let frames = this.$refs.frames
+
+      // let audienceTime = null
+      // if (frames.length > 0) {
+      // let frame = frames[0].frame
+      // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)
+      // }
+
+      this.activeVideo = null;
+
+      return true
+    },
+    hourToTimeStamp(time) {
+      if (time.indexOf(':') !== -1) {
+        time = time.replace(/:/g, '');
+      }
+      const t = time.match(/.{1,2}/g);
+      const d = this.getDateParts();
+      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000;
+
+      return setTime
+    },
+    async changeHour(value) {
+      if (value) {
+        setTimeout(() => {
+          const array = this.$refs.frames.filter(
+            (fc) =>
+              fc.videoStatus === fc.Status.playing ||
+              fc.videoStatus === fc.Status.paused
+          );
+
+          if (array.length === 1) {
+            const frame = array[0];
+            frame.stop(false);
+          }
+
+          this.setStartTime(value, true);
+        }, 0);
+      }
+    },
+    changeBlockInterval(value) {
+      this.changeHour(value.ini);
+      let time_ini, time_end;
+      time_ini = this.hourToTimeStamp(value.ini);
+      time_end = this.hourToTimeStamp(value.end);
+      this.videoSliderTotalDuration = time_end - time_ini;
+      this.$refs.frames[0].changeSettings(time_ini);
+      this.blockStartTime = time_ini;
+    },
+    //eslint-disable-next-line
+    async updateVideoTime(index, videoTime) {
+      this.activeVideo = index;
+      this.videoTime = videoTime;
+    },
+    //eslint-disable-next-line
+    updateVideoStatus(currentTime) {
+      if (!this.progressVideoDrag) ;
+    },
+    async startPlaying(frame, totalTime) {
+      const array = this.$refs.frames.filter(
+        (fc) => fc.frame.time !== frame.time
+      );
+
+      for (let ref of array) {
+        if (
+          ref.videoStatus === ref.Status.playing ||
+          ref.videoStatus === ref.Status.paused
+        ) {
+          ref.stop(false);
+        }
+      }
+
+      this.videoTotalTime = totalTime;
+      this.videoPlaying = true;
+    },
+    stopPlaying() {
+      this.videoTotalTime = null;
+      this.videoPlaying = false;
+      this.paused = false;
+    },
+    insertTime() {
+      this.$emit('timeToInsert', {
+        channel: this.channel,
+        hour_ini: this.hourIniSelected
+          ? this.convertToAudienceTime(this.hourIniSelected, '')
+          : null,
+        hour_end: this.hourEndSelected
+          ? this.convertToAudienceTime(this.hourEndSelected, '')
+          : null,
+        force: false,
+      });
+
+      if (this.jumpOnInsert) {
+        this.changeHour(
+          this.convertToAudienceTime(
+            (this.hourEndSelected || this.hourIniSelected) + 1
+          )
+        );
+      }
+
+      this.hourIniSelected = null;
+      this.hourEndSelected = null;
+      this.canInsertTime = false;
+
+      // this.fInterface.setCurrentPosition(this.hourEndSelected)
+    },
+    insertTimeForce() {
+      this.$emit('timeToInsert', {
+        channel: this.channel,
+        hour_ini: this.hourIniSelected
+          ? this.convertToAudienceTime(this.hourIniSelected, '')
+          : null,
+        hour_end: this.hourEndSelected
+          ? this.convertToAudienceTime(this.hourEndSelected, '')
+          : null,
+        force: true,
+      });
+
+      this.hourIniSelected = null;
+      this.hourEndSelected = null;
+      this.canInsertTime = false;
+
+      // this.fInterface.setCurrentPosition(this.hourEndSelected)
+    },
+    async getChannelMedia() {
+      // this.media = (await ChannelService.show(this.channel)).data.MEDIA
+    },
+    async changeServerClick() {
+      this.changeServer = !this.changeServer;
+      // this.$store.dispatch(
+      //   'serverOfFrames',
+      //   this.changeServer ? 'alternative' : 'default'
+      // )
+      sessionStorage.setItem(
+        'serverOfFrames',
+        this.changeServer ? 'alternative' : 'default'
+      );
+
+      // if (this.$route.params.time != this.frames[0].time)
+      //   this.$router.push({
+      //     name: 'grid',
+      //     params: {
+      //       date: this.date,
+      //       channel: this.channelCode,
+      //       time: this.frames[0].time,
+      //     },
+      //   })
+      location.reload();
+    },
+  },
+  computed: {
+    active: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value);
+      },
+    },
+    settingsClosed() {
+      return !Object.values(this.dialogs).find((v) => v)
+    },
+    startAudienceSeconds() {
+      const t = this.startAudienceTime.match(/.{1,2}/g);
+      return parseInt(t[0] * 3600 + t[1] * 60 + t[2])
+    },
+    loadingArray() {
+      return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())
+    },
+    serverOfFrames() {
+      return sessionStorage.getItem('server')
+    },
+  },
+  watch: {
+    secondsPerFrame(value) {
+      let frames = this.$refs.frames;
+      let initialTime = null;
+      let audienceTime = null;
+      if (frames.length > 0) {
+        let frame = frames[0].frame;
+
+        if (initialTime === null) {
+          initialTime = frame.time;
+        }
+        if (value <= 5) {
+          let newAudienceTime = initialTime + value;
+          audienceTime = this.getAudienceTime(newAudienceTime, 0, 0, 0);
+          this.changeHour(audienceTime);
+          this.next();
+        }
+      }
+    },
+    framesFormat(value) {
+      this.setFrameSelection(value);
+    },
+    active() {
+      // ? sempre que trocamos de tabs dar reset as horas selected
+      this.hourIniSelected = false;
+      this.hourEndSelected = false;
+    },
+    useCache() {
+      this.createFramesInterface();
+    },
+    hourIniSelected(value) {
+      if (value) {
+        sessionStorage.setItem(
+          'currentTimeFrames',
+          this.convertToAudienceTime(this.hourIniSelected, '')
+        );
+      } else {
+        sessionStorage.removeItem('currentTimeFrames');
+      }
+    },
+    activeFrame(value) {
+      if (value) {
+        this.stopPlayingBar();
+      }
+    },
+    channel() {
+      this.updatingChannel = new Promise((resolve, reject) => {
+        try {
+          this.createFramesInterface();
+          resolve(true);
+        } catch (err) {
+          reject(err);
+        }
+      });
+    },
+  },
 };
 
 /* script */
@@ -4479,11 +4505,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-4a1abe45_0", { source: "\n.visualization-row[data-v-4a1abe45] {\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-4a1abe45] {\n  flex-basis: 0;\n  flex-grow: 1;\n  max-width: 100%;\n  padding: 12px;\n}\n.visualization-divider[data-v-4a1abe45] {\n  display: block;\n  flex: 1 1 100%;\n  height: 0px;\n  max-height: 0px;\n  opacity: 1;\n  transition: inherit;\n  border-style: solid;\n  border-width: thin 0 0 0;\n  border-color: rgba(0, 0, 0, 0.12);\n  margin: 0;\n}\n.visualization-divider.vertical[data-v-4a1abe45] {\n  align-self: stretch;\n  border-width: 0 thin 0 0;\n  display: inline-flex;\n  height: inherit;\n  margin-left: -1px;\n  max-height: 100%;\n  max-width: 0px;\n  vertical-align: text-bottom;\n  width: 0px;\n}\n.visualization-card[data-v-4a1abe45] {\n  flex-basis: 0;\n  flex-grow: 1;\n  max-width: 100%;\n  padding: 12px;\n  width: 100%;\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\n  overflow-wrap: break-word;\n  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n.visualization-justify-center[data-v-4a1abe45],[data-v-4a1abe45] .visualization-justify-center  {\n  justify-content: center;\n}\n.visualization-align-center[data-v-4a1abe45] {\n  align-items: center;\n}\n#visualization-container[data-v-4a1abe45] {\n  max-width: 100% !important;\n  margin: 0 auto !important;\n  height: 100%;\n  border-bottom: none;\n}\n#visualization-container > .card[data-v-4a1abe45] {\n  border-radius: 0 !important;\n  font-size: 12px;\n  width: 100%;\n  box-shadow: none;\n  height: 100%;\n}\n#command-bar[data-v-4a1abe45],\n#info-bar[data-v-4a1abe45] {\n  background-color: #f5f5f5;\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button[data-v-4a1abe45] {\n  width: 42px;\n  height: 36px;\n  border: none;\n  background: none;\n}\n#command-bar button[data-v-4a1abe45]:hover {\n  cursor: pointer;\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-4a1abe45] {\n  font-size: 16px;\n}\n#command-bar[data-v-4a1abe45] {\n  padding: 0 !important;\n}\n#info-bar[data-v-4a1abe45] {\n  padding: 4px;\n  font-size: 14px;\n  position: relative;\n}\n.settings-container[data-v-4a1abe45] {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-4a1abe45] {\n  margin: 0 2px;\n  cursor: pointer;\n}\n#info-bar svg[data-v-4a1abe45] {\n  font-size: 16px;\n}\n#info-bar .divider[data-v-4a1abe45] {\n  margin: 0 8px;\n}\nsvg[data-v-4a1abe45]:focus {\n  border: none;\n}\n.visualization-card[data-v-4a1abe45] {\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-4a1abe45] {\n  border-left: 8px solid var(--visualization-primary) !important;\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-4a1abe45] {\n  padding: 1px;\n  display: flex;\n  flex-flow: column;\n}\n.tooltip[data-v-4a1abe45] {\n  display: block !important;\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-4a1abe45] {\n  background: var(--visualization-primary);\n  color: white;\n  border-radius: 16px;\n  padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-4a1abe45] {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  position: absolute;\n  margin: 5px;\n  border-color: var(--visualization-primary);\n  z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-4a1abe45] {\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-4a1abe45] {\n  border-width: 5px 5px 0 5px;\n  border-left-color: transparent !important;\n  border-right-color: transparent !important;\n  border-bottom-color: transparent !important;\n  bottom: -5px;\n  left: calc(50% - 5px);\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-4a1abe45] {\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-4a1abe45] {\n  border-width: 0 5px 5px 5px;\n  border-left-color: transparent !important;\n  border-right-color: transparent !important;\n  border-top-color: transparent !important;\n  top: -5px;\n  left: calc(50% - 5px);\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-4a1abe45] {\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-4a1abe45] {\n  border-width: 5px 5px 5px 0;\n  border-left-color: transparent !important;\n  border-top-color: transparent !important;\n  border-bottom-color: transparent !important;\n  left: -5px;\n  top: calc(50% - 5px);\n  margin-left: 0;\n  margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-4a1abe45] {\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-4a1abe45] {\n  border-width: 5px 0 5px 5px;\n  border-top-color: transparent !important;\n  border-right-color: transparent !important;\n  border-bottom-color: transparent !important;\n  right: -5px;\n  top: calc(50% - 5px);\n  margin-left: 0;\n  margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-4a1abe45] {\n  background: #f9f9f9;\n  color: black;\n  padding: 24px;\n  border-radius: 5px;\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-4a1abe45] {\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-4a1abe45] {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-4a1abe45] {\n  visibility: visible;\n  opacity: 1;\n  transition: opacity 0.15s;\n}\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\Visualization.vue"],"names":[],"mappings":";AAgnCA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;EACA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Visualization.vue","sourcesContent":["<template>\n  <div\n    class=\"visualization-row\"\n    id=\"visualization-container\"\n    @click=\"framesClicked\"\n  >\n    <GlobalEvents\n      v-if=\"active && canInsertTime && settingsClosed\"\n      @keydown.45=\"insertTime\"\n      @keydown.46=\"insertTime\"\n    />\n    <GlobalEvents\n      v-if=\"active && settingsClosed\"\n      @keydown.left.prevent=\"arrowLeft\"\n      @keydown.right.prevent=\"arrowRight\"\n      @keydown.shift.page-down.prevent=\"nextLoopActivate\"\n      @keydown.page-down.prevent=\"next\"\n      @keydown.page-up.prevent=\"prev\"\n      @keydown.shift.page-up.prevent=\"prevLoopActivate\"\n      @keydown.83.prevent=\"setHourIni\"\n      @keydown.69.prevent=\"setHourEnd\"\n      @keydown.36.prevent=\"goToFirstFrame\"\n      @keydown.35.prevent=\"goToLastFrame\"\n      @keydown.71.prevent=\"dialogs.goTo = true\"\n      @keydown.73.prevent=\"dialogs.secondsPerFrame = true\"\n      @keydown.76.prevent=\"dialogs.frames = true\"\n      @keydown.49.97=\"() => (secondsPerFrame = 1)\"\n      @keydown.50.98=\"() => (secondsPerFrame = 2)\"\n      @keydown.51.99=\"() => (secondsPerFrame = 3)\"\n      @keydown.52.100=\"() => (secondsPerFrame = 4)\"\n      @keydown.53.101=\"() => (secondsPerFrame = 5)\"\n    />\n    <GlobalEvents\n      v-if=\"prevLoop || nextLoop\"\n      @keydown=\"breakLoop\"\n      v-on:click=\"breakLoop\"\n    />\n    <settings\n      v-if=\"active\"\n      :dialogs-visibility=\"dialogs\"\n      :playback-rate=\"playbackRate\"\n      :seconds-per-frame=\"secondsPerFrame\"\n      :frames-per-row=\"framesPerRow\"\n      :number-of-rows=\"numberOfRows\"\n      @change-playback-rate=\"(value) => (playbackRate = value)\"\n      @change-go-to=\"changeHour\"\n      @change-seconds-per-frame=\"(value) => (secondsPerFrame = value)\"\n      @set-frames-selection=\"setFrameSelection\"\n      @close=\"(dialog) => (dialogs[dialog] = false)\"\n    />\n    <div\n      :class=\"{ 'visualization-card': true, 'active-tab': active }\"\n      style=\"width: 100%; padding: 0\"\n    >\n      <command-bar\n        v-show=\"commandBarShow\"\n        :video-playing=\"videoPlaying\"\n        :video-paused=\"paused\"\n        :insert-time=\"canInsertTime\"\n        :hour-ini-selected=\"!!hourIniSelected\"\n        :hour-end-selected=\"!!hourEndSelected\"\n        @prev-loop-activate=\"prevLoopActivate\"\n        @next-loop-activate=\"nextLoopActivate\"\n        @prev=\"prev\"\n        @next=\"next\"\n        @go-to=\"dialogs.goTo = true\"\n        @open-frame-selection=\"dialogs.frames = true\"\n        @open-frames-per-second=\"dialogs.secondsPerFrame = true\"\n        @open-blocks=\"openBlocks\"\n        @open-playback-rate=\"dialogs.playbackRate = true\"\n        @play-or-pause=\"playOrPause\"\n        @stop-playing=\"stopPlayingBar\"\n        @set-hour-ini=\"setHourIni\"\n        @set-hour-end=\"setHourEnd\"\n        @insert-time=\"insertTime\"\n      />\n      <video-progress\n        v-if=\"videoProgressBar\"\n        v-show=\"videoPlaying\"\n        :video-time=\"videoTime\"\n      />\n      <info-bar\n        :playback-rate=\"playbackRate\"\n        :seconds-per-frame=\"secondsPerFrame\"\n        :commands-show=\"commandBarShow\"\n        :cache=\"useCache\"\n        :block-start-time=\"blockStartTime\"\n        :video-total-duration=\"videoSliderTotalDuration\"\n        :alternative-server=\"alternativeServer\"\n        :frames-per-row=\"framesPerRow\"\n        :number-of-rows=\"numberOfRows\"\n        :hour-ini=\"hourIniSelected\"\n        :hour-end=\"hourEndSelected\"\n        @toogle-commands-visibility=\"commandBarShow = !commandBarShow\"\n        @toogle-cache=\"useCache = !useCache\"\n        @change-server=\"changeServerClick\"\n      />\n      <div\n        class=\"visualization-row\"\n        v-for=\"rowNumber in numberOfRows\"\n        :id=\"'row-' + rowNumber\"\n        :key=\"'row-' + rowNumber\"\n        style=\"padding: 12px\"\n      >\n        <div\n          v-for=\"(frame, frameNumber) in previousFrames\"\n          :key=\"\n            numberOfRows +\n            '-' +\n            framesPerRow +\n            '-' +\n            getIndex(rowNumber, frameNumber, Positions.previous)\n          \"\n          style=\"display: none\"\n        >\n          <span v-html=\"frame.img\" />\n        </div>\n        <div\n          v-for=\"(frame, frameNumber) in nextFrames\"\n          :key=\"\n            numberOfRows +\n            '-' +\n            framesPerRow +\n            '-' +\n            getIndex(rowNumber, frameNumber, Positions.next)\n          \"\n          style=\"display: none\"\n        >\n          <span v-html=\"frame.img\" />\n        </div>\n        <div\n          class=\"visualization-col\"\n          v-for=\"(frame, frameNumber) in frames.slice(\n            framesPerRow * (rowNumber - 1),\n            framesPerRow * rowNumber\n          )\"\n          :key=\"'row-' + rowNumber + '-frame-' + frameNumber\"\n          :id=\"`frame-${getIndex(rowNumber, frameNumber, Positions.current)}`\"\n          :class=\"{ loaderImg: !!frame.img }\"\n          @click=\"\n            frame.time\n              ? selectFrame(\n                  getIndex(rowNumber, frameNumber, Positions.current),\n                  frame\n                )\n              : null\n          \"\n        >\n          <span :id=\"activeFrame ? 'aa' : 0\" style=\"padding-left: 4px\">\n            <b>\n              {{\n                getAudienceTime(\n                  frame.time,\n                  rowNumber,\n                  frameNumber,\n                  Positions.current\n                )\n              }}\n            </b>\n          </span>\n\n          <frame\n            ref=\"frames\"\n            :frame=\"frame\"\n            :index=\"getIndex(rowNumber, frameNumber, Positions.current)\"\n            :grid-settings=\"{ numberOfRows, framesPerRow }\"\n            :initialTime=\"frame.time === hourIniSelected\"\n            :endTime=\"frame.time === hourEndSelected\"\n            :betweenTime=\"\n              frame.time > hourIniSelected && frame.time < hourEndSelected\n            \"\n            :active=\"\n              getIndex(rowNumber, frameNumber, Positions.current) ===\n              activeFrame\n            \"\n            :activeTab=\"active\"\n            :videoUrl=\"fInterface ? fInterface.getVideoUrl(frame) : ''\"\n            @startPlaying=\"startPlaying\"\n            @stopPlaying=\"stopPlaying\"\n            @playPauseStatus=\"changePlayPause\"\n            @updateSlider=\"updateSlider\"\n            :playback-rate=\"playbackRate\"\n            style=\"margin: 0 auto\"\n          ></frame>\n        </div>\n      </div>\n    </div>\n    <!-- <settings\n      ref=\"settings2\"\n      :active=\"active\"\n      @goToTime=\"changeHour\"\n      @goToBlockInterval=\"changeBlockInterval\"\n      @setSplitTime=\"setSplitTime\"\n      @setFrameSelection=\"setFrameSelection\"\n      @setPlaybackRate=\"\n        (rate) => {\n          playbackRate = rate\n        }\n      \"\n    >\n    </settings> -->\n    <!-- <v-dialog v-model=\"dialog\" width=\"500\">\n      <div class=\"card\">\n        <div class=\"card\"-title class=\"text-h5 grey lighten-2\">\n          {{ '  Último bloco disponível até: ' }}\n          <v-btn\n            @click=\"goToStartBlock\"\n            class=\"ml-2\"\n            dark\n            color=\"success\"\n            depressed\n          >\n            <v-icon left> fa-clock </v-icon>\n            {{ timeLastBlock }}\n          </v-btn>\n          <v-spacer></v-spacer>\n          <v-btn color=\"error\" fab small class=\"ml-5\" @click=\"dialog = false\">\n            <v-icon dark> fa fa-xmark </v-icon>\n          </v-btn>\n        </div-title>\n      </div>\n    </v-dialog>\n    <Help :media=\"media\" @close=\"media = null\" />\n    <v-dialog\n      v-if=\"userMultiTabsGrid\"\n      v-model=\"userMultiTabsGridsModel\"\n      persistent\n      width=\"60%\"\n    >\n      <div class=\"card\">\n        <div class=\"card\"-title class=\"warning text-h5\" primary-title>\n          <div class=\"row\" class=\"ma-0\" justify=\"center\" align=\"center\">\n            <v-icon dark left style=\"font-size: 24px !important\">\n              fa fa-exclamation-triangle\n            </v-icon>\n            <div style=\"color: white\">{{ $t('form.alert') }}</div>\n          </div>\n        </div-title>\n        <div class=\"card\"-text class=\"justify-center pa-6 grey lighten-2\">\n          <h3>\n            {{ $t('alerts.userMultiTabsGrid') }}\n          </h3>\n        </div-text>\n        <hr class=\"divider\" class=\"grey lighten-1\"></span>\n        <div class=\"card\"-actions class=\"grey lighten-2 justify-center\">\n          <v-btn color=\"error\" ml-5 @click=\"userMultiTabsGrid = false\">\n            <v-icon left color=\"white\">fa fa-times</v-icon>\n            {{ $t('form.close') }}\n          </v-btn>\n        </div-actions>\n      </div>\n    </v-dialog> -->\n  </div>\n</template>\n<script>\nimport Frame from './components/Frame.vue'\nimport FramesInterface from './utils/FramesInterface.js'\nimport FramesService from './services/FramesService.js'\n\nimport Commands from './components/Commands.vue'\nimport Infos from './components/Infos.vue'\nimport VideoProgress from './components/VideoProgress.vue'\nimport Settings from './components/Settings.vue'\n\nconst Positions = Object.freeze({\n  previous: 0,\n  current: 1,\n  next: 2,\n})\n\nexport default {\n  name: 'visualization-container',\n  props: {\n    value: {\n      type: Boolean,\n      required: true,\n    },\n    date: {\n      type: String,\n      required: true,\n    },\n    channel: {\n      type: Number,\n      required: true,\n    },\n    startAudienceTime: {\n      type: String,\n      required: true,\n    },\n    endAudienceTime: {\n      type: String,\n      required: true,\n    },\n    videoProgressBar: {\n      type: Boolean,\n      default: false,\n    },\n    jumpOnInsert: {\n      type: Boolean,\n      default: false,\n    },\n    framesFormat: {\n      type: [Number, String],\n      default: 6,\n    },\n    maxSize: {\n      type: Number,\n    }\n  },\n  components: {\n    Frame,\n    CommandBar: Commands,\n    InfoBar: Infos,\n    VideoProgress,\n    Settings,\n    // Help,\n  },\n  data() {\n    return {\n      Positions,\n      updatingChannel: null,\n      dialog: false,\n      timeLastBlock: null,\n      alternativeServer: false,\n      useCache: true,\n      numberOfRows: 1,\n      framesPerRow: 5,\n      secondsPerFrame: 1,\n      fInterface: null,\n      velocity: 1,\n      frames: [],\n      previousFrames: [],\n      nextFrames: [],\n      channelCode: 0,\n      videoPlaying: false,\n      activeFrame: null,\n      activeVideo: null,\n      videoTime: 0,\n      videoTotalTime: null,\n      progressVideoDrag: false,\n      hourIniSelected: false,\n      hourEndSelected: false,\n      canInsertTime: false,\n      lastHeight: 0,\n      loopInterval: null,\n      nextLoop: false,\n      prevLoop: false,\n      videoSliderTotalDuration: 900,\n      blockStartTime: null,\n      media: null,\n      changeServer: false,\n      userMultiTabsGrid: false,\n      userMultiTabsGridsModel: true,\n      playbackRate: 1,\n      paused: false,\n      commandBarShow: true,\n      dialogs: {\n        playbackRate: false,\n        goTo: false,\n        secondsPerFrame: false,\n        frames: false,\n      },\n    }\n  },\n  async created() {\n    this.changeServer = this.serverOfFrames === 'alternative'\n    this.alternativeServer = this.serverOfFrames === 'alternative'\n\n    const settings = [\n      {\n        framesPerRow: 2,\n        numberOfRows: 1,\n      },\n      {\n        framesPerRow: 3,\n        numberOfRows: 1,\n      },\n      {\n        framesPerRow: 3,\n        numberOfRows: 2,\n      },\n      {\n        framesPerRow: 4,\n        numberOfRows: 1,\n      },\n      {\n        framesPerRow: 4,\n        numberOfRows: 2,\n      },\n      {\n        framesPerRow: 5,\n        numberOfRows: 1,\n      },\n      {\n        framesPerRow: 5,\n        numberOfRows: 2,\n      },\n      {\n        framesPerRow: 6,\n        numberOfRows: 1,\n      },\n      {\n        framesPerRow: 6,\n        numberOfRows: 2,\n      },\n    ]\n\n    const storedOnDb = settings[parseInt(this.framesFormat) - 1]\n    this.framesPerRow = storedOnDb.framesPerRow\n    this.numberOfRows = storedOnDb.numberOfRows\n\n    await this.createFramesInterface()\n    if (this.maxSize) {\n      this.resize(this.maxSize, true)\n    }\n  },\n  methods: {\n    framesClicked(e) {\n      if (e.target.id != 'insert') {\n        this.active = true\n      }\n    },\n    async goToStartBlock() {\n      try {\n        const d = new Date()\n        let timestamp = Date.UTC(\n          d.getFullYear(),\n          d.getMonth(),\n          d.getDate(),\n          d.getHours(),\n          d.getMinutes(),\n          d.getSeconds()\n        )\n\n        const response = (\n          await FramesService.getNextAvailableBlock({\n            channel: this.channel,\n            time: timestamp / 1000,\n          })\n        ).data\n\n        this.dialog = false\n        this.changeHour(this.convertToAudienceTime(response.data.start, ':'))\n      } catch (err) {\n        console.error(err)\n      }\n    },\n    async checkAvailableBlock() {\n      try {\n        const d = new Date()\n        let timestamp = Date.UTC(\n          d.getFullYear(),\n          d.getMonth(),\n          d.getDate(),\n          d.getHours(),\n          d.getMinutes(),\n          d.getSeconds()\n        )\n\n        const response = (\n          await FramesService.getNextAvailableBlock({\n            channel: this.channel,\n            time: timestamp / 1000,\n          })\n        ).data\n\n        this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':')\n        this.dialog = true\n        if (!response.status) {\n          this.timeLastBlock = 'N/D'\n        }\n      } catch (err) {\n        console.error(err)\n      }\n    },\n    updateSlider(videoStartTime, time) {\n      // * atualizar slider se estiver fora do range definido previamente\n      if (\n        time < this.blockStartTime ||\n        time > this.blockStartTime ||\n        videoStartTime > this.blockStartTime + this.videoSliderTotalDuration\n      ) {\n        this.blockStartTime = videoStartTime\n        this.videoSliderTotalDuration = 900\n      }\n    },\n    nextLoopActivate() {\n      this.breakLoop()\n      this.loopInterval = setInterval(this.next, 40)\n      setTimeout(() => {\n        this.nextLoop = true\n      }, 0)\n    },\n    prevLoopActivate() {\n      this.breakLoop()\n      this.loopInterval = setInterval(this.prev, 40)\n      setTimeout(() => {\n        this.prevLoop = true\n      }, 0)\n    },\n    breakLoop() {\n      clearInterval(this.loopInterval)\n      this.loopInterval = null\n      this.nextLoop = false\n      this.prevLoop = false\n    },\n    changePlayPause(status) {\n      this.paused = !status\n    },\n    resize(height=this.lastHeight) {\n      this.lastHeight = height\n      if (this.$refs.frames) {\n        for (let frame of this.$refs.frames) {\n          frame.resize(height)\n        }\n      }\n      this.$emit('resized')\n    },\n    async goToFirstFrame() {\n      let frames = this.$refs.frames\n\n      let audienceTime = null\n      if (frames.length > 0) {\n        let frame = frames[0].frame\n        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n      }\n      // if (audienceTime) {\n      //   this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\n      // }\n      if (audienceTime) {\n        const [hours, minutes, seconds] = audienceTime.split(':')\n        const totalSeconds =\n          parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)\n        if (totalSeconds >= 9000)\n          this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\n        else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true))\n      }\n    },\n    async goToLastFrame() {\n      let frames = this.$refs.frames\n      let audienceTime = null\n      if (frames.length > 0) {\n        let frame = frames[0].frame\n\n        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n      }\n      if (audienceTime) {\n        this.changeHour(this.getLastFirtsBlockTime(audienceTime))\n      }\n    },\n    getLastFirtsBlockTime(time, first = false) {\n      if (time.indexOf(':') !== -1) {\n        time = time.replace(/:/g, '')\n      }\n      let h, m, newTime\n      const t = time.match(/.{1,2}/g)\n      if (t[0] && t[1]) {\n        h = parseInt(t[0])\n        m = parseInt(t[1])\n      }\n      if (h < 26) {\n        if (m < 15)\n          if (first) newTime = t[0] + ':00:00'\n          else newTime = t[0] + ':14:59'\n        else if (m < 30)\n          if (first) newTime = t[0] + ':15:00'\n          else newTime = t[0] + ':29:59'\n        else if (m < 45)\n          if (first) newTime = t[0] + ':30:00'\n          else newTime = t[0] + ':44:59'\n        else if (first) newTime = t[0] + ':45:00'\n        else newTime = t[0] + ':59:59'\n      } else {\n        if (m < 15)\n          if (first) newTime = '26:00:00'\n          else newTime = '26:14:59'\n        else {\n          if (first) newTime = '26:15:00'\n          else newTime = '26:29:59'\n        }\n      }\n      return newTime\n    },\n    openBlocks() {\n      this.$refs.settings2?.openBlocks()\n    },\n    playOrPause() {\n      const array = this.$refs.frames.filter((fc) => !!fc.active)\n      if (array.length === 1) {\n        const frame = array[0]\n        frame.playOrPause(this.playbackRate)\n      }\n    },\n    stopPlayingBar() {\n      for (let ref of this.$refs.frames) {\n        if (\n          ref.videoStatus === ref.Status.playing ||\n          ref.videoStatus === ref.Status.paused\n        ) {\n          ref.stop(false)\n        }\n      }\n    },\n    async setFrameSelection(selected) {\n      this.frames = this.loadingArray\n      switch (parseInt(selected)) {\n        // 2x1\n        case 1:\n          this.framesPerRow = 2\n          this.numberOfRows = 1\n          break\n        // 3x1\n        case 2:\n          this.framesPerRow = 3\n          this.numberOfRows = 1\n          break\n        // 3x2\n        case 3:\n          this.framesPerRow = 3\n          this.numberOfRows = 2\n          break\n        // 4x1\n        case 4:\n          this.framesPerRow = 4\n          this.numberOfRows = 1\n          break\n        // 4x2\n        case 5:\n          this.framesPerRow = 4\n          this.numberOfRows = 2\n          break\n        // 5x1\n        case 6:\n          this.framesPerRow = 5\n          this.numberOfRows = 1\n          break\n        // 5x2\n        case 7:\n          this.framesPerRow = 5\n          this.numberOfRows = 2\n          break\n        // 6x1\n        case 8:\n          this.framesPerRow = 6\n          this.numberOfRows = 1\n          break\n        // 6x2\n        case 9:\n          this.framesPerRow = 6\n          this.numberOfRows = 2\n          break\n      }\n      await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\n      this.getFramesArray()\n      setTimeout(() => {\n        for (let ref of this.$refs.frames) {\n          ref?.resize(this.lastHeight)\n        }\n      }, 150)\n    },\n    getFramesArray() {\n      this.frames = this.fInterface.getFrames(Positions.current)\n      this.nextFrames = this.fInterface.getFrames(Positions.next)\n      this.previousFrames = this.fInterface.getFrames(Positions.previous)\n    },\n    async createFramesInterface() {\n      this.frames = this.loadingArray\n      let ch = this.channel\n      let associationTMP = {\n        1735073: 1,\n        1735074: 139,\n        1735075: 3,\n        1735076: 132,\n      }\n      //\n      this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch\n\n      const t = this.startAudienceTime.match(/.{1,2}/g)\n      const d = this.getDateParts()\n      const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n      // * iniciar slider\n      this.blockStartTime = time\n      this.fInterface = await new FramesInterface(\n        this.channelCode,\n        this.numberOfRows,\n        this.framesPerRow,\n        time,\n        this.startAudienceTime,\n        this.useCache\n      )\n      await this.fInterface.init()\n\n      this.getFramesArray()\n\n      this.activeFrame = this.getIndex(1, 0, Positions.current)\n\n      this.activeVideo = null\n    },\n    getIndex(rowNumber, frameIndex, position) {\n      let from = this.framesPerRow * this.numberOfRows * position\n      let till = this.framesPerRow * this.numberOfRows * (position + 1)\n\n      return (from + till * (rowNumber - 1)) / rowNumber + frameIndex\n    },\n    getAudienceTime(frameTime, rowNumber, frameNumber, position) {\n      if (!frameTime) {\n        return 'Loading...'\n      } else if (\n        this.getIndex(rowNumber, frameNumber, position) === this.activeVideo\n      ) {\n        return this.convertToAudienceTime(this.videoTime)\n      } else {\n        return this.convertToAudienceTime(frameTime)\n      }\n    },\n    dateInUtc(miliSeconds) {\n      var date = new Date(miliSeconds)\n      var utc = new Date(\n        date.getUTCFullYear(),\n        date.getUTCMonth(),\n        date.getUTCDate(),\n        date.getUTCHours(),\n        date.getUTCMinutes(),\n        date.getUTCSeconds()\n      )\n      return utc\n    },\n    convertToAudienceTime(time, separator = ':') {\n      const d = this.getDateParts()\n      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\n\n      let hour = this.dateInUtc(time * 1000)\n        .toTimeString()\n        .split(' ')[0]\n        .split(':')\n        .map(Number)\n\n      if (time > limit && time <= limit + this.startAudienceSeconds) {\n        hour[0] = 24 + hour[0]\n      }\n      return hour\n        .map((part) => (part > 9 ? part.toString() : '0' + part))\n        .join(separator)\n    },\n    getDateParts(date = this.date) {\n      const d = new Date(date)\n      return {\n        year: d.getFullYear(),\n        month: d.getMonth(),\n        day: d.getDate(),\n      }\n    },\n    selectFrame(index, frame) {\n      const d = this.getDateParts()\n      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\n      const frameTime = frame?.time\n\n      if (frameTime - (this.startAudienceSeconds + limit) <= 0) {\n        if (this.hourIniSelected === true) {\n          this.hourIniSelected = frameTime\n\n          if (\n            this.hourEndSelected &&\n            this.hourIniSelected > this.hourEndSelected\n          ) {\n            this.hourEndSelected = false\n          }\n        } else if (this.hourEndSelected === true) {\n          if (frameTime > this.hourIniSelected) {\n            this.hourEndSelected = frameTime\n            this.canInsertTime = true\n          } else {\n            this.hourEndSelected = false\n          }\n        }\n      }\n\n      if (this.activeFrame !== index) {\n        // ? Se clicar no frame diferente de onde está a dar play, faz pausa\n        const array = this.$refs.frames.filter(\n          (fc) => fc.videoStatus === fc.Status.playing\n        )\n        if (array.length === 1) {\n          const frame = array[0]\n          frame.playOrPause()\n        }\n        this.activeVideo = null\n        this.activeFrame = index\n      }\n    },\n    setHourIni() {\n      this.canInsertTime = true\n      this.hourIniSelected = true\n      document.getElementById(`frame-${this.activeFrame}`).click()\n      this.$emit('setHourIni', {\n        hour_ini: this.hourIniSelected\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\n          : null,\n      })\n    },\n    setHourEnd() {\n      this.canInsertTime = true\n      this.hourEndSelected = true\n      document.getElementById(`frame-${this.activeFrame}`).click()\n    },\n    //* Navegação\n    arrowRight() {\n      if (this.checkLimitRight(false)) {\n        if (\n          this.activeFrame ===\n          this.numberOfRows * this.framesPerRow * 2 - 1\n        ) {\n          this.next()\n        } else {\n          this.activeFrame++\n        }\n      }\n    },\n    arrowLeft() {\n      if (this.checkLimitLeft(false)) {\n        if (this.activeFrame === this.numberOfRows * this.framesPerRow) {\n          this.prev()\n        } else {\n          this.activeFrame--\n        }\n      }\n    },\n    checkLimitRight(value) {\n      const hours = this.endAudienceTime.match(/.{1,2}/g)\n      const d = this.getDateParts()\n      const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59)\n\n      if (value) {\n        return (\n          high > (this.fInterface.getCurrentTime() - 1) * 1000 &&\n          this.nextFrames[0].title !== -1\n        )\n      } else {\n        // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000\n        return high > this.fInterface.getCurrentTime() * 1000\n      }\n    },\n    checkLimitLeft(value) {\n      const hours = this.startAudienceTime.match(/.{1,2}/g)\n      const d = this.getDateParts()\n      const low = Date.UTC(d.year, d.month, d.day, hours[0], hours[1], hours[2])\n\n      if (value) {\n        return low <= (this.fInterface.getCurrentTime() - 1) * 1000\n      } else {\n        return (\n          low <\n          (this.fInterface.getCurrentTime() +\n            this.activeFrame -\n            this.numberOfRows * this.framesPerRow) *\n            1000\n        )\n      }\n    },\n    async next() {\n      if (this.checkLimitRight(true)) {\n        const array = this.$refs.frames.filter(\n          (fc) =>\n            fc.videoStatus === fc.Status.playing ||\n            fc.videoStatus === fc.Status.paused\n        )\n\n        if (array.length === 1) {\n          const frame = array[0]\n          frame.stop(false)\n        }\n        this.fInterface.setCurrentStep(this.secondsPerFrame)\n        await this.fInterface.loadNextFrames()\n\n        this.activeFrame = this.getIndex(1, 0, Positions.current)\n        this.activeVideo = null\n\n        this.getFramesArray()\n      }\n    },\n    async prev() {\n      if (this.checkLimitLeft(true)) {\n        const array = this.$refs.frames.filter(\n          (fc) =>\n            fc.videoStatus === fc.Status.playing ||\n            fc.videoStatus === fc.Status.paused\n        )\n        if (array.length === 1) {\n          const frame = array[0]\n          frame.stop(false)\n        }\n\n        this.fInterface.setCurrentStep(this.secondsPerFrame)\n        await this.fInterface.loadPrevFrames()\n\n        this.activeFrame = this.getIndex(\n          this.numberOfRows,\n          this.framesPerRow - 1,\n          Positions.current\n        )\n        this.activeVideo = null\n\n        this.getFramesArray()\n      }\n    },\n    async setStartTime(time) {\n      if (time.indexOf(':') !== -1) {\n        time = time.replace(/:/g, '')\n      }\n      const t = time.match(/.{1,2}/g)\n      const d = this.getDateParts()\n      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n      this.frames = this.loadingArray\n\n      await this.fInterface.changeTime(setTime)\n\n      this.getFramesArray()\n\n      this.activeFrame = this.getIndex(1, 0, Positions.current)\n      // let frames = this.$refs.frames\n\n      // let audienceTime = null\n      // if (frames.length > 0) {\n      // let frame = frames[0].frame\n      // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n      // }\n\n      this.activeVideo = null\n\n      return true\n    },\n    hourToTimeStamp(time) {\n      if (time.indexOf(':') !== -1) {\n        time = time.replace(/:/g, '')\n      }\n      const t = time.match(/.{1,2}/g)\n      const d = this.getDateParts()\n      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n\n      return setTime\n    },\n    async changeHour(value) {\n      if (value) {\n        setTimeout(() => {\n          const array = this.$refs.frames.filter(\n            (fc) =>\n              fc.videoStatus === fc.Status.playing ||\n              fc.videoStatus === fc.Status.paused\n          )\n\n          if (array.length === 1) {\n            const frame = array[0]\n            frame.stop(false)\n          }\n\n          this.setStartTime(value, true)\n        }, 0)\n      }\n    },\n    changeBlockInterval(value) {\n      this.changeHour(value.ini)\n      let time_ini, time_end\n      time_ini = this.hourToTimeStamp(value.ini)\n      time_end = this.hourToTimeStamp(value.end)\n      this.videoSliderTotalDuration = time_end - time_ini\n      this.$refs.frames[0].changeSettings(time_ini)\n      this.blockStartTime = time_ini\n    },\n    //eslint-disable-next-line\n    async updateVideoTime(index, videoTime) {\n      this.activeVideo = index\n      this.videoTime = videoTime\n    },\n    //eslint-disable-next-line\n    updateVideoStatus(currentTime) {\n      if (!this.progressVideoDrag) {\n        // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS\n        // this.updateProgress(null, currentTime)\n      }\n    },\n    async startPlaying(frame, totalTime) {\n      const array = this.$refs.frames.filter(\n        (fc) => fc.frame.time !== frame.time\n      )\n\n      for (let ref of array) {\n        if (\n          ref.videoStatus === ref.Status.playing ||\n          ref.videoStatus === ref.Status.paused\n        ) {\n          ref.stop(false)\n        }\n      }\n\n      this.videoTotalTime = totalTime\n      this.videoPlaying = true\n    },\n    stopPlaying() {\n      this.videoTotalTime = null\n      this.videoPlaying = false\n      this.paused = false\n    },\n    insertTime() {\n      this.$emit('timeToInsert', {\n        channel: this.channel,\n        hour_ini: this.hourIniSelected\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\n          : null,\n        hour_end: this.hourEndSelected\n          ? this.convertToAudienceTime(this.hourEndSelected, '')\n          : null,\n        force: false,\n      })\n\n      if (this.jumpOnInsert) {\n        this.changeHour(\n          this.convertToAudienceTime(\n            (this.hourEndSelected || this.hourIniSelected) + 1\n          )\n        )\n      }\n\n      this.hourIniSelected = null\n      this.hourEndSelected = null\n      this.canInsertTime = false\n\n      // this.fInterface.setCurrentPosition(this.hourEndSelected)\n    },\n    insertTimeForce() {\n      this.$emit('timeToInsert', {\n        channel: this.channel,\n        hour_ini: this.hourIniSelected\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\n          : null,\n        hour_end: this.hourEndSelected\n          ? this.convertToAudienceTime(this.hourEndSelected, '')\n          : null,\n        force: true,\n      })\n\n      this.hourIniSelected = null\n      this.hourEndSelected = null\n      this.canInsertTime = false\n\n      // this.fInterface.setCurrentPosition(this.hourEndSelected)\n    },\n    async getChannelMedia() {\n      // this.media = (await ChannelService.show(this.channel)).data.MEDIA\n    },\n    async changeServerClick() {\n      this.changeServer = !this.changeServer\n      // this.$store.dispatch(\n      //   'serverOfFrames',\n      //   this.changeServer ? 'alternative' : 'default'\n      // )\n      sessionStorage.setItem(\n        'serverOfFrames',\n        this.changeServer ? 'alternative' : 'default'\n      )\n\n      // if (this.$route.params.time != this.frames[0].time)\n      //   this.$router.push({\n      //     name: 'grid',\n      //     params: {\n      //       date: this.date,\n      //       channel: this.channelCode,\n      //       time: this.frames[0].time,\n      //     },\n      //   })\n      location.reload()\n    },\n  },\n  computed: {\n    active: {\n      get() {\n        return this.value\n      },\n      set(value) {\n        this.$emit('input', value)\n      },\n    },\n    settingsClosed() {\n      return !Object.values(this.dialogs).find((v) => v)\n    },\n    startAudienceSeconds() {\n      const t = this.startAudienceTime.match(/.{1,2}/g)\n      return parseInt(t[0] * 3600 + t[1] * 60 + t[2])\n    },\n    loadingArray() {\n      return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())\n    },\n    serverOfFrames() {\n      return sessionStorage.getItem('server')\n    },\n  },\n  watch: {\n    framesFormat(value) {\n      this.setFrameSelection(value)\n    },\n    active() {\n      // ? sempre que trocamos de tabs dar reset as horas selected\n      this.hourIniSelected = false\n      this.hourEndSelected = false\n    },\n    useCache() {\n      this.createFramesInterface()\n    },\n    hourIniSelected(value) {\n      if (value) {\n        sessionStorage.setItem(\n          'currentTimeFrames',\n          this.convertToAudienceTime(this.hourIniSelected, '')\n        )\n      } else {\n        sessionStorage.removeItem('currentTimeFrames')\n      }\n    },\n    activeFrame(value) {\n      if (value) {\n        this.stopPlayingBar()\n      }\n    },\n    channel() {\n      this.updatingChannel = new Promise((resolve, reject) => {\n        try {\n          this.createFramesInterface()\n          resolve(true)\n        } catch (err) {\n          reject(err)\n        }\n      })\n    },\n  },\n}\n</script>\n<style scoped>\n.visualization-row {\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1 1 auto;\n}\n\n.visualization-col {\n  flex-basis: 0;\n  flex-grow: 1;\n  max-width: 100%;\n  padding: 12px;\n}\n\n.visualization-divider {\n  display: block;\n  flex: 1 1 100%;\n  height: 0px;\n  max-height: 0px;\n  opacity: 1;\n  transition: inherit;\n  border-style: solid;\n  border-width: thin 0 0 0;\n  border-color: rgba(0, 0, 0, 0.12);\n  margin: 0;\n}\n\n.visualization-divider.vertical {\n  align-self: stretch;\n  border-width: 0 thin 0 0;\n  display: inline-flex;\n  height: inherit;\n  margin-left: -1px;\n  max-height: 100%;\n  max-width: 0px;\n  vertical-align: text-bottom;\n  width: 0px;\n}\n\n.visualization-card {\n  flex-basis: 0;\n  flex-grow: 1;\n  max-width: 100%;\n  padding: 12px;\n  width: 100%;\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\n  overflow-wrap: break-word;\n  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n\n.visualization-justify-center, /deep/ .visualization-justify-center  {\n  justify-content: center;\n}\n\n.visualization-align-center {\n  align-items: center;\n}\n\n#visualization-container {\n  max-width: 100% !important;\n  margin: 0 auto !important;\n  height: 100%;\n  border-bottom: none;\n}\n#visualization-container > .card {\n  border-radius: 0 !important;\n  font-size: 12px;\n  width: 100%;\n  box-shadow: none;\n  height: 100%;\n}\n\n#command-bar,\n#info-bar {\n  background-color: #f5f5f5;\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button {\n  width: 42px;\n  height: 36px;\n  border: none;\n  background: none;\n}\n\n#command-bar button:hover {\n  cursor: pointer;\n  background: rgba(0, 0, 0, 0.12);\n}\n\n#command-bar svg {\n  font-size: 16px;\n}\n\n#command-bar {\n  padding: 0 !important;\n}\n\n#info-bar {\n  padding: 4px;\n  font-size: 14px;\n  position: relative;\n}\n\n.settings-container {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.settings-container > * {\n  margin: 0 2px;\n  cursor: pointer;\n}\n\n#info-bar svg {\n  font-size: 16px;\n}\n\n#info-bar .divider {\n  margin: 0 8px;\n}\n\nsvg:focus {\n  border: none;\n}\n\n.visualization-card {\n  border-left: 8px solid #eee;\n}\n\n.active-tab {\n  border-left: 8px solid var(--visualization-primary) !important;\n  border-image-slice: 1;\n}\n\n[id^='frame-'] {\n  padding: 1px;\n  display: flex;\n  flex-flow: column;\n}\n\n.tooltip {\n  display: block !important;\n  z-index: 10000;\n}\n\n.tooltip .tooltip-inner {\n  background: var(--visualization-primary);\n  color: white;\n  border-radius: 16px;\n  padding: 5px 10px 4px;\n}\n\n.tooltip .tooltip-arrow {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  position: absolute;\n  margin: 5px;\n  border-color: var(--visualization-primary);\n  z-index: 1;\n}\n\n.tooltip[x-placement^='top'] {\n  margin-bottom: 5px;\n}\n\n.tooltip[x-placement^='top'] .tooltip-arrow {\n  border-width: 5px 5px 0 5px;\n  border-left-color: transparent !important;\n  border-right-color: transparent !important;\n  border-bottom-color: transparent !important;\n  bottom: -5px;\n  left: calc(50% - 5px);\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.tooltip[x-placement^='bottom'] {\n  margin-top: 5px;\n}\n\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\n  border-width: 0 5px 5px 5px;\n  border-left-color: transparent !important;\n  border-right-color: transparent !important;\n  border-top-color: transparent !important;\n  top: -5px;\n  left: calc(50% - 5px);\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.tooltip[x-placement^='right'] {\n  margin-left: 5px;\n}\n\n.tooltip[x-placement^='right'] .tooltip-arrow {\n  border-width: 5px 5px 5px 0;\n  border-left-color: transparent !important;\n  border-top-color: transparent !important;\n  border-bottom-color: transparent !important;\n  left: -5px;\n  top: calc(50% - 5px);\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.tooltip[x-placement^='left'] {\n  margin-right: 5px;\n}\n\n.tooltip[x-placement^='left'] .tooltip-arrow {\n  border-width: 5px 0 5px 5px;\n  border-top-color: transparent !important;\n  border-right-color: transparent !important;\n  border-bottom-color: transparent !important;\n  right: -5px;\n  top: calc(50% - 5px);\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.tooltip.popover .popover-inner {\n  background: #f9f9f9;\n  color: black;\n  padding: 24px;\n  border-radius: 5px;\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n\n.tooltip.popover .popover-arrow {\n  border-color: #f9f9f9;\n}\n\n.tooltip[aria-hidden='true'] {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.15s, visibility 0.15s;\n}\n\n.tooltip[aria-hidden='false'] {\n  visibility: visible;\n  opacity: 1;\n  transition: opacity 0.15s;\n}\n</style>\n"]}, media: undefined });
+    inject("data-v-09946f69_0", { source: "\n.visualization-row[data-v-09946f69] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-09946f69] {\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-09946f69] {\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-09946f69] {\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-09946f69] {\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-09946f69],[data-v-09946f69] .visualization-justify-center {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-09946f69] {\r\n  align-items: center;\n}\n#visualization-container[data-v-09946f69] {\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-09946f69] {\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-09946f69],\r\n#info-bar[data-v-09946f69] {\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-09946f69] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-09946f69]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-09946f69] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-09946f69] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-09946f69] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-09946f69] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-09946f69] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-09946f69] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-09946f69] {\r\n  margin: 0 8px;\n}\nsvg[data-v-09946f69]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-09946f69] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-09946f69] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-09946f69] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\n.tooltip[data-v-09946f69] {\r\n  display: block !important;\r\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-09946f69] {\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-09946f69] {\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-09946f69] {\r\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-09946f69] {\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-09946f69] {\r\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-09946f69] {\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-09946f69] {\r\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-09946f69] {\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-09946f69] {\r\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-09946f69] {\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-09946f69] {\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-09946f69] {\r\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-09946f69] {\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-09946f69] {\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":";AAkoCA;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.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    }\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, 40)\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, 40)\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          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    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)) {\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      }\r\n    },\r\n    async prev() {\r\n      if (this.checkLimitLeft(true)) {\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      }\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      // this.$store.dispatch(\r\n      //   'serverOfFrames',\r\n      //   this.changeServer ? 'alternative' : 'default'\r\n      // )\r\n      sessionStorage.setItem(\r\n        'serverOfFrames',\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-4a1abe45";
+  const __vue_scope_id__ = "data-v-09946f69";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */