@twab/visualization 0.9.5 → 0.9.6

package/dist/visualization.common.15.js

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