@twab/visualization 0.9.7 → 0.9.9

package/dist/visualization.umd.js

@@ -1,2464 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('v-tooltip'), require('@fortawesome/vue-fontawesome'), require('@fortawesome/fontawesome-svg-core'), require('@fortawesome/free-solid-svg-icons'), require('v-mask'), require('vue-loading-twa'), require('axios')) :
-  typeof define === 'function' && define.amd ? define(['v-tooltip', '@fortawesome/vue-fontawesome', '@fortawesome/fontawesome-svg-core', '@fortawesome/free-solid-svg-icons', 'v-mask', 'vue-loading-twa', 'axios'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.visualization = factory(global.VTooltip, global.vueFontawesome, global.fontawesomeSvgCore, global.freeSolidSvgIcons, global.VueMask, global.VueLoading, global.axios));
-})(this, (function (VTooltip, vueFontawesome, fontawesomeSvgCore, freeSolidSvgIcons, VueMask, VueLoading, axios) { 'use strict';
-
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-  var VTooltip__default = /*#__PURE__*/_interopDefaultLegacy(VTooltip);
-  var VueMask__default = /*#__PURE__*/_interopDefaultLegacy(VueMask);
-  var VueLoading__default = /*#__PURE__*/_interopDefaultLegacy(VueLoading);
-  var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-
-  function colorVariation (baseColor) {
-    const baseHSL = hexToHSL(baseColor);
-    baseHSL.l += 30;
-    return hslToHex(baseHSL);
-  }
-  function hexToHSL(hex) {
-    hex = hex.replace(/^#/, '');
-    const r = parseInt(hex.slice(0, 2), 16) / 255;
-    const g = parseInt(hex.slice(2, 4), 16) / 255;
-    const b = parseInt(hex.slice(4, 6), 16) / 255;
-    const max = Math.max(r, g, b);
-    const min = Math.min(r, g, b);
-    let h,
-      s,
-      l = (max + min) / 2;
-    if (max === min) {
-      h = s = 0; // achromatic
-    } else {
-      const d = max - min;
-      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-      switch (max) {
-        case r:
-          h = (g - b) / d + (g < b ? 6 : 0);
-          break;
-        case g:
-          h = (b - r) / d + 2;
-          break;
-        case b:
-          h = (r - g) / d + 4;
-          break;
-      }
-      h /= 6;
-    }
-    h = Math.round(h * 360);
-    s = Math.round(s * 100);
-    l = Math.round(l * 100);
-    return {
-      h,
-      s,
-      l
-    };
-  }
-  function hslToHex(hsl) {
-    const h = hsl.h / 360;
-    const s = hsl.s / 100;
-    const l = hsl.l / 100;
-    if (s === 0) {
-      // Achromatic (gray) color
-      const gray = Math.round(l * 255);
-      return `#${gray.toString(16).repeat(3)}`;
-    }
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    const r = Math.round(hueToRGB(p, q, h + 1 / 3) * 255);
-    const g = Math.round(hueToRGB(p, q, h) * 255);
-    const b = Math.round(hueToRGB(p, q, h - 1 / 3) * 255);
-    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-  }
-  function hueToRGB(p, q, t) {
-    if (t < 0) t += 1;
-    if (t > 1) t -= 1;
-    if (t < 1 / 6) return p + (q - p) * 6 * t;
-    if (t < 1 / 2) return q;
-    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-    return p;
-  }
-
-  function registerIcons () {
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faBackward);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faStepBackward);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faClock);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faStepForward);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faForward);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faPlay);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faStop);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faBorderAll);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faSlidersH);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faCut);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faHourglassStart);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faHourglassEnd);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faVideo);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faInfoCircle);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faTachometerAlt);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faServer);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faEye);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faEyeSlash);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faBan);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faSync);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faArrowTurnDown);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faArrowCircleDown);
-    fontawesomeSvgCore.library.add(freeSolidSvgIcons.faPause);
-  }
-
-  var index = {
-    async install(Vue, settings = {}) {
-      if (!settings.client || !settings.base_url || !settings.theme?.primary) {
-        console.error('Visualization: Missing required settings');
-        return;
-      }
-      if (this.installed) {
-        return;
-      }
-      this.installed = true;
-      Vue.use(VTooltip__default["default"]);
-      Vue.use(VueMask__default["default"]);
-      registerIcons();
-      Vue.component('font-awesome-icon', vueFontawesome.FontAwesomeIcon);
-      sessionStorage.setItem('server', 'principal');
-      sessionStorage.setItem('client', settings.client);
-      sessionStorage.setItem('base_url', settings.base_url);
-      const headTag = document.getElementsByTagName('head')[0];
-      const styleTag = document.createElement('style');
-      const theme = {
-        primary: settings.theme.primary,
-        secondary: colorVariation(settings.theme.primary),
-        start: settings.theme.start || '#4caf50',
-        end: settings.theme.end || '#ff5252'
-      };
-      let themeCss = [];
-      for (const color in theme) {
-        themeCss.push(`--visualization-${color}: ${theme[color]};`);
-      }
-      themeCss = [':root {', ...themeCss, '}'].join(' ');
-      styleTag.innerHTML = themeCss;
-      headTag.appendChild(styleTag);
-      Vue.component('Visualization', (await Promise.resolve().then(function () { return Visualization$1; })).default);
-    }
-  };
-
-  const Status = Object.freeze({
-    stopped: 0,
-    playing: 1,
-    paused: 2,
-  });
-
-  var Frame = {
-  render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:{
-      'frame-container': true,
-      'initial-time': _vm.initialTime,
-      'end-time': _vm.endTime,
-      'between-time': _vm.betweenTime,
-      active: _vm.active,
-    },style:({
-      maxHeight: (_vm.maxHeight + "px"),
-      width: '100%',
-      position: 'relative',
-    })},[(_vm.active && _vm.activeTab && _vm.parentComponent.settingsClosed)?_c('GlobalEvents',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==32){ return null; }$event.preventDefault();return _vm.playOrPause.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==27){ return null; }$event.preventDefault();return _vm.stop.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==79){ return null; }return _vm.toogleDetailFrame.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==13){ return null; }$event.preventDefault();return _vm.jumpFrameToStart.apply(null, arguments)}]}}):_vm._e(),_vm._v(" "),(_vm.showFrame)?_c('GlobalEvents',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==27){ return null; }$event.preventDefault();return _vm.toogleDetailFrame.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==13){ return null; }$event.preventDefault();return _vm.toogleDetailFrame.apply(null, arguments)}]}}):_vm._e(),_vm._v(" "),_c('vue-loading',{staticStyle:{"z-index":"0"},attrs:{"active":((!_vm.frame.image || !_vm.frame.time) && _vm.frame.title !== -1) ||
-        _vm.loading ||
-        _vm.videoIsLoading,"spinner":"ring","color":"#1565c0","background-color":"#ededed","text":_vm.videoIsLoading ? _vm.$('infoBar.createVideo') : ''}}),_vm._v(" "),_c('div',{staticStyle:{"background-color":"black"}},[(!_vm.loading)?_c('div',{class:{
-          'frame-content': _vm.frame.title === -1 || _vm.videoStatus !== _vm.Status.stopped,
-        },style:({
-          maxHeight: (_vm.height + "px"),
-          maxWidth: (_vm.width + "px"),
-          color: 'white',
-        }),on:{"dblclick":_vm.playOrPause}},[(_vm.frame.image && _vm.videoStatus === _vm.Status.stopped)?_c('div',{class:{ 'dummy-frame': _vm.frame.title === -1 },staticStyle:{"width":"100%","height":"100%"},domProps:{"innerHTML":_vm._s(_vm.frame.image)}}):_vm._e(),_vm._v(" "),(_vm.videoStatus !== _vm.Status.stopped && !_vm.videoIsLoading)?_c('video',{ref:"videoPlayer",staticStyle:{"width":"100%","aspect-ratio":"11/9"},attrs:{"maxHeight":(_vm.height + "px"),"maxWidth":(_vm.width + "px"),"src":_vm.videoUrlString,"preload":"none","autoplay":""},on:{"timeupdate":_vm.updateTimeLabel,"ended":_vm.videoEnded,"click":_vm.playOrPause}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"overlay"})]):_vm._e()]),_vm._v(" "),_c('dialog',{ref:"imageDetailsDialog",class:{ 'dummy-frame': _vm.frame.title === -1 },staticStyle:{"width":"100vh","border":"none","background":"none"},domProps:{"innerHTML":_vm._s(_vm.frame.image)}})],1)},
-  staticRenderFns: [],
-    components: {
-      VueLoading: VueLoading__default["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(jump = 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);
-      },
-    },
-  };
-
-  const Api = axios__default["default"].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;
-  });
-  var FramesService = {
-    getBlockRequest({
-      direction,
-      channel,
-      split,
-      time,
-      quality,
-      factor,
-      useCache = true,
-      signal
-    } = {}) {
-      return Api.get(`Get${direction}FramesBlockInFiles`, {
-        params: {
-          Channel: channel,
-          Split: split,
-          UseCache: useCache,
-          Time: time,
-          Step: 0,
-          JpegQuality: quality,
-          JpegSizeFactor: factor
-        },
-        signal
-      });
-    },
-    getSmallBlockRequest({
-      channel,
-      split,
-      time,
-      quality,
-      factor,
-      size,
-      useCache = true,
-      signal
-    } = {}) {
-      return Api.get('GetSmallFramesBlockInFiles', {
-        params: {
-          Channel: channel,
-          Split: split,
-          UseCache: useCache,
-          Time: time,
-          Step: 0,
-          JpegQuality: quality,
-          JpegSizeFactor: factor,
-          Size: size
-        },
-        signal
-      });
-    },
-    getFileInfoRequest({
-      direction,
-      channel,
-      split,
-      time,
-      step,
-      signal
-    } = {}) {
-      return Api.get(`Get${direction}BlockFileInformation`, {
-        params: {
-          Channel: channel,
-          Split: split,
-          Time: time,
-          Step: step
-        },
-        signal
-      });
-    },
-    getNextAvailableBlock({
-      channel,
-      time,
-      signal
-    } = {}) {
-      // 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
-    //     )
-    //   }
-  };
-
-  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
-    })
-  };
-
-  function FramesManager(channel, size, currentTime, startAudienceTime, useCache = 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, add = 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, substituition = 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;
-    }
-  };
-
-  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, useCache = 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 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 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 ? null : `${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;
-  };
-
-  var Commands = {
-  render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"visualization-col pa-0",staticStyle:{"border-top-right-radius":"6px"},attrs:{"id":"command-bar"}},[(_vm.commandBarShow)?_c('div',{staticClass:"visualization-row visualization-justify-center"},_vm._l((_vm.commandBarBtns),function(btn,index){return _c('div',{key:'command-btn-' + index},[(!btn)?_c('hr',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 4px"}}):_vm._e(),_vm._v(" "),(btn && (btn.condition ? btn.condition() : true))?_c('button',{directives:[{name:"tooltip",rawName:"v-tooltip",value:(
-            btn.text && typeof btn.text === 'function' ? btn.text() : btn.text
-          ),expression:"\n          btn.text && typeof btn.text === 'function' ? btn.text() : btn.text\n        "}],staticClass:"command-bar-btn",style:({
-            color:
-              btn.color && typeof btn.color === 'function'
-                ? btn.color()
-                : 'black',
-          }),on:{"click":btn.fnc}},[_c('font-awesome-icon',{attrs:{"id":btn.id,"icon":'fa-solid ' +
-              (btn.icon && typeof btn.icon === 'function'
-                ? btn.icon()
-                : btn.icon)}})],1):_vm._e()])}),0):_vm._e(),_vm._v(" "),_c('hr',{staticClass:"visualization-divider"})])},
-  staticRenderFns: [],
-    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',
-          // },
-        ],
-      }
-    },
-  };
-
-  var Infos = {
-  render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"visualization-row visualization-justify-center visualization-align-center",style:(!_vm.commandsShow
-        ? 'border-top-right-radius: 6px; padding: 4px'
-        : 'padding: 4px'),attrs:{"id":"info-bar"}},[_c('span',[_vm._v(" "+_vm._s(_vm.playbackRate)+"x ")]),_vm._v(" "),_c('hr',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}),_vm._v(" "),_c('span',[_vm._v("\n    "+_vm._s(_vm.$t('infoBar.selected', {
-          seconds: _vm.hourEnd && _vm.hourIni ? _vm.hourEnd - _vm.hourIni + 1 : 0,
-          hour_ini: _vm.convertToAudienceTime(_vm.hourIni),
-          hour_end: _vm.convertToAudienceTime(_vm.hourEnd),
-        }))+"\n  ")]),_vm._v(" "),_c('hr',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}),_vm._v(" "),_c('span',[_vm._v("\n    "+_vm._s(_vm.$t('infoBar.interval', {
-          seconds: _vm.secondsPerFrame,
-        }))+"\n  ")]),_vm._v(" "),_c('hr',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}),_vm._v(" "),_c('span',[_vm._v("\n    "+_vm._s(_vm.$t('infoBar.block', {
-          time1: _vm.convertToAudienceTime(_vm.blockStartTime),
-          time2: _vm.convertToAudienceTime(_vm.blockTotalTime),
-        }))+"\n  ")]),_vm._v(" "),_c('hr',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}),_vm._v("\n  "+_vm._s(_vm.framesPerRow * _vm.numberOfRows)+"\n  "),_c('hr',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}),_vm._v("\n  "+_vm._s(_vm.framesPerRow + '*' + _vm.numberOfRows)+"\n  "),(_vm.alternativeServer || !_vm.cache)?_c('span',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}):_vm._e(),_vm._v(" "),(_vm.alternativeServer)?_c('span',[_c('v-icon',{attrs:{"color":"error","small":"","left":""}},[_vm._v("fa-exclamation-triangle")]),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.$t('infoBar.alternativeServer')))])],1):_vm._e(),_vm._v(" "),(_vm.alternativeServer && !_vm.cache)?_c('span',{staticClass:"visualization-divider vertical",staticStyle:{"margin":"0 8px"}}):_vm._e(),_vm._v(" "),(!_vm.cache)?_c('span',[_c('v-icon',{attrs:{"color":"warning","small":"","left":""}},[_vm._v("fa-exclamation-circle")]),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.$t('infoBar.notUsingCache')))])],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"settings-container"},[_c('font-awesome-icon',{directives:[{name:"tooltip",rawName:"v-tooltip",value:(
-          _vm.alternativeServer
-            ? _vm.$t('infoBar.changeServer')
-            : _vm.$t('infoBar.changeServer')
-        ),expression:"\n        alternativeServer\n          ? $t('infoBar.changeServer')\n          : $t('infoBar.changeServer')\n      "}],attrs:{"icon":"fa-solid fa-server"},on:{"click":function($event){return _vm.$emit('change-server')}}}),_vm._v(" "),_c('font-awesome-icon',{directives:[{name:"tooltip",rawName:"v-tooltip",value:(
-          _vm.commandsShow
-            ? _vm.$t('moduletelentry.hideButtons')
-            : _vm.$t('moduletelentry.showButtons')
-        ),expression:"\n        commandsShow\n          ? $t('moduletelentry.hideButtons')\n          : $t('moduletelentry.showButtons')\n      "}],attrs:{"icon":_vm.commandsShow ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'},on:{"click":function($event){return _vm.$emit('toogle-commands-visibility')}}}),_vm._v(" "),_c('font-awesome-icon',{directives:[{name:"tooltip",rawName:"v-tooltip",value:(
-          _vm.cache ? _vm.$t('infoBar.disableCache') : _vm.$t('infoBar.activateCache')
-        ),expression:"\n        cache ? $t('infoBar.disableCache') : $t('infoBar.activateCache')\n      "}],attrs:{"icon":_vm.cache ? 'fa-solid fa-ban' : 'fa-solid fa-sync'},on:{"click":function($event){return _vm.$emit('toogle-cache')}}})],1)])},
-  staticRenderFns: [],
-    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, separator = ':') {
-        const d = this.getDateParts();
-        const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000;
-
-        let hour = this.dateInUtc(time * 1000)
-          .toTimeString()
-          .split(' ')[0]
-          .split(':')
-          .map(Number);
-
-        if (time > limit && time <= limit + this.startAudienceSeconds) {
-          hour[0] = 24 + hour[0];
-        }
-        return hour
-          .map((part) => (part > 9 ? part.toString() : '0' + part))
-          .join(separator)
-      },
-      getDateParts(date = this.date) {
-        const d = new Date(date);
-        return {
-          year: d.getFullYear(),
-          month: d.getMonth(),
-          day: d.getDate(),
-        }
-      },
-      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
-      },
-    },
-  };
-
-  var VideoProgress = {
-  render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"visualization-row",attrs:{"id":"progress"},on:{"mousedown":_vm.progressMouseDown}},[_c('span',{staticClass:"progressLabel"},[_vm._v("\n      "+_vm._s(_vm.convertToAudienceTime(_vm.videoTime))+"\n    ")]),_vm._v(" "),_c('span',{staticClass:"progressBar"})]),_vm._v(" "),_c('hr',{staticClass:"visualization-divider"})])},
-  staticRenderFns: [],
-    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(date = 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, separator = ':') {
-        const d = this.getDateParts();
-        const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000;
-
-        let hour = this.dateInUtc(time * 1000)
-          .toTimeString()
-          .split(' ')[0]
-          .split(':')
-          .map(Number);
-
-        if (time > limit && time <= limit + this.startAudienceSeconds) {
-          hour[0] = 24 + hour[0];
-        }
-        return hour
-          .map((part) => (part > 9 ? part.toString() : '0' + part))
-          .join(separator)
-      },
-    },
-  };
-
-  var one_one = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 558.2 183.6\"  xmlns:v=\"https://vecta.io/nano\"><path d=\"M558.2 0v90.1h-88.3c-1.9 0-1.9 0-1.9-1.9V1.8c0-1.8 0-1.8 1.8-1.8h88.4zm-468 183.5H0V95.1c0-1.7 0-1.7 1.7-1.7h86.7c1.8 0 1.8 0 1.8 1.8v88.3zm93.6 0H93.6V95.3c0-1.9 0-1.9 1.9-1.9H182c1.8 0 1.8 0 1.8 1.8v88.3zm280.9 0h-90.2V95.1c0-1.7 0-1.7 1.6-1.7H463c1.6 0 1.6 0 1.6 1.7v62.2l.1 26.2zm93.5-90v89c0 .9-.2 1.1-1.1 1.1H468V95.2c0-1.7 0-1.7 1.7-1.7h88.5zm-280.9 90h-90V94.9c0-.9.1-1.5 1.2-1.5H276c.9 0 1.2.3 1.2 1.2l.1 88.9zm93.6 0h-90V95.1c0-1.7 0-1.7 1.7-1.7h86.5c1.8 0 1.8 0 1.8 1.8v88.3z\" fill=\"#cbcbcb\"/><path d=\"M0 45.1V1.5C0 .3.3 0 1.4 0h87.3c1.2 0 1.5.3 1.4 1.5v87.1c0 1.2-.3 1.5-1.5 1.5H1.4c-1.3 0-1.5-.4-1.5-1.6L0 45.1z\" fill=\"#1565c0\"/><path d=\"M93.6 44.9V1.5c0-1.6 0-1.6 1.6-1.6h87.1c1.5 0 1.5 0 1.5 1.6v86.8c0 1.6 0 1.6-1.6 1.6H95.4c-1.8 0-1.8 0-1.8-1.8V44.9zm280.9.2V1.6c0-1.6 0-1.6 1.6-1.6h87.1c1.5 0 1.5 0 1.5 1.6v86.7c0 1.8 0 1.8-1.8 1.8h-86.7c-1.7 0-1.7 0-1.7-1.7V45.1zm-142.1 45H189c-1.6 0-1.6 0-1.6-1.5v-87c0-1.6 0-1.6 1.6-1.6h86.8c1.6 0 1.6 0 1.6 1.5v87c0 1.6 0 1.6-1.6 1.6h-43.4zm48.5-45.2V1.5c0-1.6 0-1.6 1.6-1.6h86.8c1.6 0 1.6 0 1.6 1.5v87c0 1.6 0 1.6-1.6 1.6h-86.8c-1.6 0-1.6 0-1.6-1.6V44.9z\" fill=\"#cbcbcb\"/></svg>";
-
-  var two_one = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 558.2 183.6\"  xmlns:v=\"https://vecta.io/nano\"><path d=\"M277.3 183.5h-90.2V94.2c0-.6.2-.9.8-.9h87.7c1 0 1.6 0 1.6 1.3l.1 88.9zM558.2 0v90.1h-88.3c-1.9 0-1.9 0-1.9-1.9V1.8c0-1.8 0-1.8 1.8-1.8h88.4zm-468 183.5H0V95.1c0-1.7 0-1.7 1.7-1.7h86.7c1.8 0 1.8 0 1.8 1.8v88.3zm93.6 0H93.6V95.3c0-1.9 0-1.9 1.9-1.9H182c1.8 0 1.8 0 1.8 1.8v88.3zm280.9 0h-90.2V95.1c0-1.7 0-1.7 1.6-1.7H463c1.6 0 1.6 0 1.6 1.7v61.2l.1 27.2zm93.5-90v89c0 .9-.2 1.1-1.1 1.1H468V95.2c0-1.7 0-1.7 1.7-1.7h88.5zm-187.1 90h-90.2V94.6c0-1.1.4-1.5 1.5-1.5l6.8.3h80.2c1.1 0 1.5.2 1.5 1.4l.2 61.9.5 25.1c0 .7.1 1.3-.5 1.7z\" fill=\"#cbcbcb\"/><path d=\"M183.8 45.1v43.5c0 1.1-.2 1.6-1.5 1.6H95c-1.2 0-1.4-.4-1.4-1.5V1.5C93.6.2 94 0 95.1 0h87.3c1.2 0 1.4.4 1.4 1.5v43.6zM45.1 0h43.7c1.1 0 1.4.2 1.4 1.4v87.3c0 1.1-.4 1.4-1.4 1.4H1.4c-1.1 0-1.3-.3-1.3-1.3L0 1.3C0 .2.3 0 1.3 0h43.8z\" fill=\"#1565c0\"/><path d=\"M419.6 90.1h-43.5c-1.6 0-1.6 0-1.6-1.6V1.6c0-1.6 0-1.6 1.6-1.6h87.1c1.5 0 1.5 0 1.5 1.6v86.7c0 1.8 0 1.8-1.8 1.8h-43.3zM277.3 44.9v43.5c0 1.7 0 1.7-1.6 1.7h-86.8c-1.6 0-1.6 0-1.6-1.6v-87c0-1.5 0-1.5 1.6-1.5h86.8c1.6 0 1.6 0 1.6 1.6v43.3zm93.6.3v43.2c0 1.7 0 1.7-1.6 1.7h-86.8c-1.6 0-1.6 0-1.6-1.6v-87c0-1.5 0-1.5 1.6-1.5h86.8c1.6 0 1.6 0 1.6 1.6v43.6z\" fill=\"#cbcbcb\"/></svg>";
-
-  var three_one = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 558.2 183.6\"  xmlns:v=\"https://vecta.io/nano\"><path d=\"M277.3 183.5h-90.2V94.2c0-.6.2-.9.8-.9h87.8c1 0 1.6 0 1.6 1.3v88.9zM558.2 0v90.1h-88.3c-1.9 0-1.9 0-1.9-1.9V1.8c0-1.8 0-1.8 1.8-1.8h88.4zm-468 183.5H0V95.1c0-1.7 0-1.7 1.7-1.7h86.7c1.8 0 1.8 0 1.8 1.8v88.3zm93.6 0H93.6V95.3c0-1.9 0-1.9 1.9-1.9H182c1.8 0 1.8 0 1.8 1.8v88.3zm280.9 0h-90.2V95.1c0-1.7 0-1.7 1.6-1.7H463c1.6 0 1.6 0 1.6 1.7V157l.1 26.5zm93.5-90v89c0 .9-.2 1.1-1.1 1.1H468V95.2c0-1.7 0-1.7 1.7-1.7h88.5zm-187.1 90h-90.2V94.6c0-1.1.4-1.5 1.5-1.5l6.8.3h80.2c1.1 0 1.5.2 1.5 1.4l.2 61.9.5 25.1c0 .7.1 1.3-.5 1.7z\" fill=\"#cbcbcb\"/><path d=\"M45.1 90.1H1.4c-1.1 0-1.5-.3-1.5-1.4L0 1.5C0 .3.3 0 1.5 0h87.3c1.2 0 1.4.4 1.4 1.5v87.1c0 1.2-.3 1.5-1.5 1.5H45.1zM138.8 0h43.5c1.1 0 1.5.3 1.5 1.4v87.2c0 1.2-.3 1.4-1.5 1.4H95.1c-1.2 0-1.5-.3-1.5-1.5V1.4C93.6.2 94 0 95.1 0h43.7z\" fill=\"#1565c0\"/><path d=\"M374.5 45.1V1.6c0-1.6 0-1.6 1.6-1.6h87.1c1.6 0 1.6 0 1.6 1.6v86.8c0 1.7 0 1.7-1.7 1.7h-86.9c-1.6 0-1.6 0-1.6-1.5l-.1-43.5z\" fill=\"#cbcbcb\"/><path d=\"M277.3 45.1v43.5c0 1.5 0 1.5-1.6 1.5h-86.9c-1.5 0-1.5 0-1.5-1.6V1.6c0-1.2.2-1.6 1.5-1.5H276c1.2 0 1.4.4 1.4 1.5l-.1 43.5z\" fill=\"#1565c0\"/><path d=\"M370.9 45.2v43.2c0 1.7 0 1.7-1.6 1.7h-86.8c-1.6 0-1.6 0-1.6-1.6v-87c0-1.5 0-1.5 1.6-1.5h86.8c1.6 0 1.6 0 1.6 1.6v43.6z\" fill=\"#cbcbcb\"/></svg>";
-
-  var three_two = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 558.2 183.6\"  xmlns:v=\"https://vecta.io/nano\"><path d=\"M277.3 183.5h-90.2V95c0-1.6 0-1.6 1.6-1.6h86.9c1.7 0 1.7 0 1.7 1.7v88.4z\" fill=\"#1565c0\"/><path d=\"M558.2 0v90.1h-88.3c-1.9 0-1.9 0-1.9-1.9V1.8c0-1.8 0-1.8 1.8-1.8h88.4z\" fill=\"#cbcbcb\"/><path d=\"M90.2 183.5H0V95.2c0-1.9-.2-1.8 1.7-1.8h86.7c1.7 0 1.7 0 1.7 1.8v86.6c.1.6.1 1.2.1 1.7zm93.6 0H93.6V95.2c0-1.8 0-1.8 1.7-1.8H182c1.9 0 1.7-.2 1.7 1.8l.1 88.3z\" fill=\"#1565c0\"/><path d=\"M464.7 183.5h-90.2V95.1c0-1.7 0-1.7 1.6-1.7H463c1.6 0 1.6 0 1.6 1.7v62.6l.1 25.8zm93.5-90v89c0 .9-.2 1.1-1.1 1.1H468V95.2c0-1.7 0-1.7 1.7-1.7h88.5zm-187.1 90h-90.2V94.6c0-1.1.4-1.5 1.5-1.5l6.8.3h80.2c1.1 0 1.5.2 1.5 1.4l.2 61.8.5 25.2c0 .7.1 1.3-.5 1.7z\" fill=\"#cbcbcb\"/><path d=\"M45.1 90.1H1.4c-1.1 0-1.5-.3-1.5-1.4L0 1.5C0 .3.3 0 1.5 0h87.3c1.2 0 1.4.4 1.4 1.5v87.1c0 1.2-.3 1.5-1.5 1.5H45.1zM138.8 0h43.5c1.1 0 1.5.3 1.5 1.4v87.2c0 1.2-.3 1.4-1.5 1.4H95.1c-1.2 0-1.5-.3-1.5-1.5V1.4C93.6.2 94 0 95.1 0h43.7z\" fill=\"#1565c0\"/><path d=\"M374.5 45.1V1.6c0-1.6 0-1.6 1.6-1.6h87.1c1.6 0 1.6 0 1.6 1.6v86.8c0 1.7 0 1.7-1.7 1.7h-86.9c-1.6 0-1.6 0-1.6-1.5l-.1-43.5z\" fill=\"#cbcbcb\"/><path d=\"M277.3 45.1v43.5c0 1.5 0 1.5-1.6 1.5h-86.9c-1.5 0-1.5 0-1.5-1.6V1.6c0-1.2.2-1.6 1.5-1.5H276c1.2 0 1.4.4 1.4 1.5l-.1 43.5z\" fill=\"#1565c0\"/><path d=\"M370.9 45.2v43.2c0 1.7 0 1.7-1.6 1.7h-86.8c-1.6 0-1.6 0-1.6-1.6v-87c0-1.5 0-1.5 1.6-1.5h86.8c1.6 0 1.6 0 1.6 1.6v43.6z\" fill=\"#cbcbcb\"/></svg>";
-
-  var four_one = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 558.2 183.6\"  xmlns:v=\"https://vecta.io/nano\"><path d=\"M558.2 0v90.1h-88.3c-1.9 0-1.9 0-1.9-1.9V1.8c0-1.8 0-1.8 1.8-1.8h88.4zm-468 183.5H0V95.1c0-1.7 0-1.7 1.7-1.7h86.7c1.8 0 1.8 0 1.8 1.8v88.3zm93.6 0H93.6V95.3c0-1.9 0-1.9 1.9-1.9H182c1.8 0 1.8 0 1.8 1.8v88.3zm280.9 0h-90.2V95.1c0-1.7 0-1.7 1.6-1.7H463c1.6 0 1.6 0 1.6 1.7v64.1l.1 24.3zm93.5-90v89c0 .9-.2 1.1-1.1 1.1H468V95.2c0-1.7 0-1.7 1.7-1.7h88.5zm-280.9 90h-90V94.8c0-.9.1-1.5 1.2-1.5H276c.9 0 1.2.3 1.2 1.2l.1 89zm93.6 0h-90V95.1c0-1.7 0-1.7 1.7-1.7h86.5c1.8 0 1.8 0 1.8 1.8v88.3z\" fill=\"#cbcbcb\"/><path d=\"M0 45.1V1.5C0 .3.3 0 1.4 0h87.3c1.2 0 1.5.3 1.4 1.5v87.1c0 1.2-.3 1.5-1.5 1.5H1.4c-1.3 0-1.5-.4-1.5-1.6L0 45.1zm93.6-.2V1.4C93.6.3 93.9 0 95 0h87.3c1.2 0 1.4.3 1.4 1.5v87.2c0 1.2-.4 1.4-1.5 1.4H95c-1.2 0-1.5-.4-1.5-1.5l.1-43.7z\" fill=\"#1565c0\"/><path d=\"M374.5 45.1V1.6c0-1.6 0-1.6 1.6-1.6h87.1c1.5 0 1.5 0 1.5 1.6v86.7c0 1.8 0 1.8-1.8 1.8h-86.7c-1.7 0-1.7 0-1.7-1.7V45.1z\" fill=\"#cbcbcb\"/><path d=\"M277.3 45.1v43.4c0 1.6 0 1.6-1.6 1.6h-86.8c-1.6 0-1.6 0-1.6-1.6V1.7c0-1.6 0-1.6 1.5-1.6h87c1.5 0 1.6 0 1.6 1.5l-.1 43.5zm3.6-.2V1.4c0-1.1.3-1.5 1.4-1.5h87.2c1.2 0 1.5.3 1.5 1.5v87.2c0 1.1-.3 1.4-1.4 1.4h-87.3c-1.1 0-1.4-.4-1.4-1.4V44.9z\" fill=\"#1565c0\"/></svg>";
-
-  var four_two = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 558.2 183.6\"  xmlns:v=\"https://vecta.io/nano\"><path d=\"M558.2 0v90.1h-88.3c-1.9 0-1.9 0-1.9-1.9V1.8c0-1.8 0-1.8 1.8-1.8h88.4z\" fill=\"#cbcbcb\"/><path d=\"M90.2 183.5H0V95.2c0-1.9-.2-1.8 1.7-1.8h86.7c1.7 0 1.7 0 1.7 1.8v86.6c.1.6.1 1.2.1 1.7zm93.6 0H93.6V95.2c0-1.8 0-1.8 1.7-1.8H182c1.9 0 1.7-.2 1.7 1.8l.1 88.3z\" fill=\"#1565c0\"/><path d=\"M464.6 183.5h-90.2V95.1c0-1.7 0-1.7 1.6-1.7h86.9c1.6 0 1.6 0 1.6 1.7v66.5l.1 21.9zm93.6-90v89c0 .9-.2 1.1-1.1 1.1H468V95.4c0-1.8 0-1.8 1.8-1.8h75.9c4.2-.1 8.3-.1 12.5-.1z\" fill=\"#cbcbcb\"/><path d=\"M277.3 183.5h-90c0-.5-.1-1-.1-1.4V95.2c0-1.7 0-1.7 1.7-1.7h86.7c1.7 0 1.7 0 1.7 1.7v88.3zm93.6 0h-90V95c0-1.6 0-1.6 1.6-1.6h86.8c1.7 0 1.7 0 1.7 1.7V182c-.1.6-.1 1.1-.1 1.5zM138.7 90.1H95.3c-1.6 0-1.6 0-1.6-1.6v-87c0-1.3.4-1.5 1.6-1.5h87.1c1.6 0 1.6 0 1.6 1.5v87c0 1.5 0 1.5-1.6 1.5l-43.7.1z\" fill=\"#1565c0\"/><path d=\"M374.5 45V1.6c0-1.6 0-1.6 1.6-1.6h87.1c1.6 0 1.6 0 1.6 1.6v86.8c0 1.7 0 1.7-1.7 1.7h-86.9c-1.6 0-1.6 0-1.6-1.5l-.1-43.6z\" fill=\"#cbcbcb\"/><path d=\"M277.3 45v43.6c0 1.1-.3 1.5-1.5 1.5h-87.2c-1.2 0-1.4-.4-1.4-1.5V1.5c0-1.2.3-1.5 1.5-1.5h87.1c1.3 0 1.5.4 1.5 1.5V45zm3.6.1V1.5c0-1.2.3-1.5 1.5-1.5h87.2c1.2 0 1.4.3 1.4 1.5v87.1c0 1.2-.3 1.5-1.5 1.5h-87.1c-1.3 0-1.5-.4-1.5-1.6V45.1zm-235.6 45H1.8c-1.6 0-1.6 0-1.6-1.6V1.7C.2.1.2.1 1.8.1h87c1.6 0 1.6 0 1.6 1.6v86.8c0 1.6 0 1.6-1.7 1.6H45.3z\" fill=\"#1565c0\"/></svg>";
-
-  var five_one = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 558.2 183.6\"  xmlns:v=\"https://vecta.io/nano\"><path d=\"M183.8 183.5H93.6V95.4c0-1.8 0-1.8 1.8-1.8H182c1.8 0 1.8 0 1.8 1.8v88.1zm280.9 0h-90.2V95.2c0-1.6 0-1.6 1.5-1.6h87.1c1.5 0 1.6 0 1.6 1.6v88.3zM558.2 0v89.8H470c-1.7 0-1.7 0-1.7-1.8V1.7c0-1.8 0-1.8 1.7-1.8l88.2.1zM90 183.5H0V95.4c0-1.7 0-1.7 1.8-1.7h86.5c1.8 0 1.8 0 1.8 1.7v86.8c-.1.5-.1.9-.1 1.3zm187.3 0h-90V94.8c0-1 .5-1.2 1.3-1.2H276c1 0 1.3.3 1.3 1.3v88.6zm93.6 0h-90V95.4c0-1.7 0-1.7 1.8-1.7h86.5c1.8 0 1.8 0 1.8 1.7v86.8c-.1.5-.1.9-.1 1.3zm187.3-89.8v88.8c0 .9-.2 1.1-1.1 1.1h-88.9V95.5c0-1.8 0-1.8 1.8-1.8h88.2z\" fill=\"#cbcbcb\"/><path d=\"M0 44.9V1.5C0 .3.3 0 1.4 0h87.3c1.2 0 1.5.3 1.5 1.5v87.1c0 1.2-.3 1.6-1.5 1.6H1.5c-1.3 0-1.5-.4-1.5-1.6V44.9zm183.8.3v43.5c0 1.1-.2 1.4-1.4 1.4H95c-1.1 0-1.4-.4-1.4-1.4V1.4c0-1.1.3-1.3 1.3-1.3h87.6c1.1 0 1.3.3 1.3 1.3v43.8zm93.5 0v43.4c0 1.2-.2 1.5-1.5 1.5h-87.1c-1.2 0-1.5-.3-1.5-1.5v-87c0-1.6 0-1.6 1.6-1.6h87c1.5 0 1.5 0 1.5 1.6v43.6zm3.6-.3V1.4c0-1.1.3-1.5 1.4-1.5h87.2c1.2 0 1.5.3 1.5 1.5v87.2c0 1.1-.3 1.4-1.4 1.4h-87.3c-1.1 0-1.4-.4-1.4-1.4V44.9zm183.4.3v43.1c0 1.6 0 1.6-1.6 1.6h-86.3c-1.2 0-1.6-.3-1.6-1.5V1.9c0-1.1.3-1.5 1.5-1.5h86.6c1.2 0 1.4.4 1.4 1.5v43.3z\" fill=\"#1565c0\"/></svg>";
-
-  var five_two = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 558.2 183.6\"  xmlns:v=\"https://vecta.io/nano\"><path d=\"M558.2 0v90.1h-88.3c-1.9 0-1.9 0-1.9-1.9V1.8c0-1.8 0-1.8 1.8-1.8h88.4zm0 93.5v89c0 .9-.2 1.1-1.1 1.1H468V95.4c0-1.8 0-1.8 1.8-1.8h75.9c4.2-.1 8.4-.1 12.5-.1z\" fill=\"#cbcbcb\"/><g fill=\"#1565c0\"><path d=\"M183.8 183.5H93.6V95.1c0-1.6 0-1.7 1.6-1.7H182c1.7 0 1.7 0 1.7 1.8l.1 88.3zm280.9 0h-90.2V95.2c0-1.8 0-1.8 1.7-1.8h86.7c1.7 0 1.7 0 1.7 1.8v86.6c0 .6.1 1.2.1 1.7zm-374.7 0H0V94.9c0-1.2.3-1.5 1.5-1.5h87c1.6 0 1.6 0 1.6 1.6v87.1c0 .5-.1 1-.1 1.4zm187.3 0h-90c0-.4-.1-.9-.1-1.3V95.3c0-1.7 0-1.7 1.7-1.7h86.7c1.7 0 1.7 0 1.7 1.7v88.2zm93.6 0h-90V95.4c0-1.8 0-1.8 1.8-1.8h86.5c1.8 0 1.8 0 1.8 1.8v86.7c-.1.5-.1 1-.1 1.4zM138.8 90.1H95.1c-1.2 0-1.6-.3-1.6-1.5V1.4C93.6.3 93.9 0 95 0h87.4c1.1 0 1.4.4 1.4 1.4v87.2c0 1.1-.3 1.5-1.5 1.5h-43.5zm280.6 0H376c-1.6 0-1.6 0-1.6-1.6v-87c0-1.2.2-1.5 1.5-1.5h87.2c1.2 0 1.5.3 1.5 1.5v87c0 1.6 0 1.6-1.7 1.6h-43.5zM.2 45.1V1.7C.2.1.2.1 1.9.1h86.8c1.6 0 1.6 0 1.6 1.7v86.7c0 1.6 0 1.6-1.6 1.6H1.9c-1.6 0-1.6 0-1.6-1.7L.2 45.1z\"/><path d=\"M277.3 45.1v43.4c0 1.6 0 1.6-1.6 1.6h-86.9c-1.2 0-1.6-.3-1.6-1.5V1.5c0-1.2.4-1.4 1.5-1.4h87.2c1.2 0 1.4.4 1.4 1.5v43.5zM325.8 90h-43.3c-1.6 0-1.6 0-1.6-1.5V1.6c0-1.2.3-1.5 1.5-1.5h87.1c1.2 0 1.5.3 1.5 1.5v86.8c0 1.6 0 1.6-1.6 1.6h-43.6z\"/></g></svg>";
-
-  var six_one = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 558.2 183.6\"  xmlns:v=\"https://vecta.io/nano\"><path d=\"M558.2 0v90.1h-88.5c-1.6 0-1.6 0-1.6-1.6V1.7c0-1.6 0-1.6 1.6-1.6l88.5-.1z\" fill=\"#1565c0\"/><path d=\"M90.2 183.5H0V95.1c0-1.7 0-1.7 1.7-1.7h86.7c1.8 0 1.8 0 1.8 1.8v88.3zm93.6 0H93.6V95.3c0-1.9 0-1.9 1.9-1.9H182c1.8 0 1.8 0 1.8 1.8v88.3zm280.9 0h-90.2V95.1c0-1.7 0-1.7 1.6-1.7H463c1.6 0 1.6 0 1.6 1.7v64.1l.1 24.3zm93.5-90v89c0 .9-.2 1.1-1.1 1.1H468V95.2c0-1.7 0-1.7 1.7-1.7h88.5zm-280.9 90h-90V94.8c0-.9.1-1.5 1.2-1.5H276c.9 0 1.2.3 1.2 1.2l.1 89zm93.6 0h-90V95.1c0-1.7 0-1.7 1.7-1.7h86.5c1.8 0 1.8 0 1.8 1.8v88.3z\" fill=\"#cbcbcb\"/><path d=\"M0 45.1V1.5C0 .3.3 0 1.4 0h87.3c1.2 0 1.5.3 1.4 1.5v87.1c0 1.2-.3 1.5-1.5 1.5H1.4c-1.3 0-1.5-.4-1.5-1.6L0 45.1zm93.6-.1V1.5C93.6.3 93.9 0 95 0h87.3c1.2 0 1.4.3 1.4 1.5v87.2c0 1.2-.4 1.4-1.5 1.4H95c-1.2 0-1.5-.4-1.5-1.5l.1-43.6zM419.7 0h43.4c1.2 0 1.6.2 1.6 1.5v87.1c0 1.2-.3 1.5-1.5 1.5H376c-1.1 0-1.5-.3-1.5-1.4V1.5c0-1.2.3-1.4 1.5-1.4l43.7-.1zM277.3 45.1v43.3c0 1.6 0 1.6-1.6 1.6h-86.8c-1.7 0-1.7 0-1.7-1.6V1.5c0-1.2.3-1.5 1.5-1.5h87.2c1.2 0 1.4.4 1.4 1.5v43.6zm3.6-.2V1.4c0-1.1.3-1.5 1.4-1.5h87.2c1.3 0 1.5.4 1.5 1.6v86.9c0 1.6 0 1.6-1.5 1.6h-87c-1.1 0-1.5-.3-1.5-1.4l-.1-43.7z\" fill=\"#1565c0\"/></svg>";
-
-  var six_two = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 652.1 183.8\"  fill=\"#1565c0\" xmlns:v=\"https://vecta.io/nano\"><path d=\"M652.1.3v90.1h-88.5c-1.6 0-1.6 0-1.6-1.6V2c0-1.6 0-1.6 1.6-1.6l88.5-.1zM90.5 183.8H.3V95.4c0-1.6 0-1.6 1.7-1.7h86.7c1.7 0 1.7 0 1.7 1.8v86.6c0 .6 0 1.2.1 1.7zm93.5 0H93.8V95.4c0-1.6 0-1.6 1.6-1.6h86.9c1.6 0 1.6 0 1.6 1.6v80.2l.1 8.2zm374.5 0h-90.2V95.5c0-1.9-.2-1.8 1.7-1.8h86.7c1.7 0 1.7 0 1.7 1.8v86.6c.1.6.1 1.2.1 1.7zm93.6-90.1v89c0 .9-.2 1.1-1.1 1.1h-89.1c0-.6.1-1.1.1-1.7V95.5c0-1.8 0-1.8 1.7-1.8h86.7c.5.1 1.1.1 1.7 0zm-374.5 90.1h-90c0-.5-.1-1-.1-1.4v-87c0-1.6 0-1.6 1.6-1.6h87.1c1 0 1.4.2 1.4 1.3v88.7zm93.5 0h-90V95.6c0-1.8 0-1.8 1.7-1.8h86.6c1.7 0 1.7 0 1.7 1.8v86.8c.1.5.1.9 0 1.4zm93.6 0h-90V95c0-1.3.6-1.3 1.5-1.3H463c1.7 0 1.7 0 1.7 1.8v86.7c.1.6 0 1.1 0 1.6z\"/><path d=\"M.3 45.3V1.8C.3.6.5.3 1.8.3H89c1.2 0 1.5.3 1.5 1.5v86.9c0 1.6 0 1.6-1.6 1.6H1.8c-1.5 0-1.5 0-1.5-1.6V45.3zm93.6-.1V1.8c0-1.6 0-1.6 1.5-1.6h87.1c1.5 0 1.5 0 1.5 1.6v86.9c0 1.2-.2 1.6-1.5 1.6H95.3c-1.3 0-1.5-.4-1.5-1.6l.1-43.5zm464.6.2v43.4c0 1.6 0 1.6-1.6 1.6h-87.1c-1.2 0-1.6-.2-1.6-1.5V1.8c0-1.2.3-1.5 1.5-1.5h87.2c1.2 0 1.5.4 1.5 1.5l.1 43.6zm-280.9-.1v43.5c0 1.2-.2 1.6-1.5 1.5H189c-1.2 0-1.5-.3-1.5-1.5v-87c0-1.6 0-1.6 1.6-1.6h87c1.5 0 1.5 0 1.5 1.6v43.5zm93.6-.1v43.5c0 1.6 0 1.6-1.6 1.6h-86.8c-1.6 0-1.6 0-1.6-1.6V1.9c0-1.6 0-1.6 1.5-1.6h87c1.6 0 1.6 0 1.6 1.6l-.1 43.3zm3.5.1V1.8c0-1.6 0-1.6 1.5-1.6h87c1.6 0 1.6 0 1.6 1.6v87c0 1.2-.3 1.5-1.5 1.5h-87.1c-1.2 0-1.5-.4-1.5-1.5V45.3z\"/></svg>";
-
-  var GridImages = {
-    '1x1': one_one,
-    '2x1': two_one,
-    '3x1': three_one,
-    '3x2': three_two,
-    '4x1': four_one,
-    '4x2': four_two,
-    '5x1': five_one,
-    '5x2': five_two,
-    '6x1': six_one,
-    '6x2': six_two
-  };
-
-  var Settings = {
-  render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.dialogsVisibility.frames)?_c('GlobalEvents',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==37){ return null; }return _vm.prevFormat.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==39){ return null; }return _vm.nextFormat.apply(null, arguments)}]}}):_vm._e(),_vm._v(" "),_c('dialog',{ref:"frames"},[_c('div',{staticClass:"visualization-row",staticStyle:{"padding":"5px","font-weight":"bold","background-color":"var(--visualization-primary)","border-color":"var(--visualization-primary)","height":"40px","color":"white","display":"flex","justify-content":"center","padding-top":"10px"}},[_vm._v("\n      "+_vm._s(_vm.$t('infoBar.gridForm'))+"\n    ")]),_vm._v(" "),_c('div',{staticClass:"visualization-row",staticStyle:{"justify-content":"center"}},_vm._l((_vm.items),function(item,index){return _c('div',{key:index,staticClass:"visualization-col",staticStyle:{"min-width":"200px","max-width":"200px"}},[_c('img',{style:(_vm.framesValue !== item.value ? 'filter: grayscale(1)' : ''),attrs:{"src":item.image,"width":"100%"},on:{"click":function () { return (_vm.framesValue = item.value); }}})])}),0),_vm._v(" "),_c('div',{staticClass:"visualization-divider"}),_vm._v(" "),_c('div',{staticClass:"visualization-row",staticStyle:{"display":"flex","justify-content":"center","margin-top":"10px","margin-bottom":"10px"}},[_c('button',{staticStyle:{"border-radius":"4px","height":"35px","width":"70px","background-color":"var(--visualization-primary)","border-color":"var(--visualization-primary)","color":"white"},on:{"click":function($event){return _vm.$emit('close', 'frames')}}},[_vm._v("\n        Ok\n      ")])])]),_vm._v(" "),_c('dialog',{ref:"secondsPerFrame"},[_c('div',{staticClass:"visualization-row",staticStyle:{"padding":"5px","font-weight":"bold","background-color":"var(--visualization-primary)","border-color":"var(--visualization-primary)","height":"40px","color":"white","display":"flex","justify-content":"center","padding-top":"10px"}},[_vm._v("\n      "+_vm._s(_vm.$t('infoBar.secondImage'))+"\n    ")]),_vm._v(" "),_c('div',{staticClass:"visualization-row",staticStyle:{"margin":"25px","height":"20px"}},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.secondsPerFrameValue),expression:"secondsPerFrameValue"}],ref:"secondsPerFrameInput",staticStyle:{"height":"30px","width":"300px"},attrs:{"type":"range","step":"1","max":"5","min":"1"},domProps:{"value":(_vm.secondsPerFrameValue)},on:{"__r":function($event){_vm.secondsPerFrameValue=$event.target.value;}}}),_vm._v(" "),_c('span',{staticStyle:{"padding-left":"20px","font-size":"16px"}},[_vm._v("\n        "+_vm._s(_vm.secondsPerFrame + ' s'))])]),_vm._v(" "),_c('div',{staticClass:"visualization-divider",staticStyle:{"margin":"10px"}}),_vm._v(" "),_c('div',{staticClass:"visualization-row",staticStyle:{"display":"flex","justify-content":"center","margin-top":"10px"}},[_c('button',{staticStyle:{"border-radius":"4px","height":"35px","width":"70px","background-color":"var(--visualization-primary)","border-color":"var(--visualization-primary)","color":"white","margin-bottom":"8px"},on:{"click":function($event){return _vm.$emit('close', 'secondsPerFrame')}}},[_vm._v("\n        Ok\n      ")])])]),_vm._v(" "),_c('dialog',{ref:"goTo"},[_c('div',{staticStyle:{"padding":"5px","font-weight":"bold","background-color":"var(--visualization-primary)","border-color":"var(--visualization-primary)","height":"35px","color":"white","display":"flex","justify-content":"center","padding-top":"8px"}},[_vm._v("\n      "+_vm._s(_vm.$t('infoBar.goTo'))+"\n    ")]),_vm._v(" "),_c('div',{staticClass:"visualization-row",staticStyle:{"margin":"25px","height":"20px"}},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.goToValue),expression:"goToValue"},{name:"mask",rawName:"v-mask",value:('##:##:##'),expression:"'##:##:##'"}],staticStyle:{"height":"30px","width":"300px","border":"0.1px solid #c2c9d6","border-radius":"3px","padding":"5px"},attrs:{"type":"text","placeholder":"hh:mm:ss"},domProps:{"value":(_vm.goToValue)},on:{"input":function($event){if($event.target.composing){ return; }_vm.goToValue=$event.target.value;}}})]),_vm._v(" "),_c('div',{staticClass:"visualization-divider",staticStyle:{"margin-top":"40px"}}),_vm._v(" "),_c('div',{staticClass:"visualization-row",staticStyle:{"display":"flex","justify-content":"center","margin-top":"10px","margin-bottom":"10px"}},[_c('button',{staticStyle:{"border-radius":"4px","height":"35px","width":"70px","background-color":"var(--visualization-primary)","border-color":"var(--visualization-primary)","color":"white"},on:{"click":function () {
-              _vm.$emit('close', 'goTo');
-              _vm.$emit('change-go-to', _vm.goToValue);
-              _vm.goToValue = '';
-            }}},[_vm._v("\n        Ok\n      ")])])]),_vm._v(" "),_c('GlobalEvents',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==107){ return null; }return _vm.changePlaybackRate(1)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==109){ return null; }return _vm.changePlaybackRate(-1)}]}}),_vm._v(" "),_c('dialog',{ref:"playbackRate"},[_c('div',{staticClass:"visualization-row",staticStyle:{"padding":"5px","font-weight":"bold","background-color":"var(--visualization-primary)","border-color":"var(--visualization-primary)","height":"35px","color":"white","display":"flex","justify-content":"center","padding-top":"8px"}},[_vm._v("\n      "+_vm._s(_vm.$t('infoBar.playbackSpeed'))+"\n    ")]),_vm._v(" "),_c('div',{staticClass:"visualization-row",staticStyle:{"margin":"25px","height":"20px","width":"380px"}},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.playbackRateValue),expression:"playbackRateValue"}],ref:"playbackRateInput",staticStyle:{"height":"30px","width":"300px"},attrs:{"type":"range","step":"0.25","max":"3","min":"1"},domProps:{"value":(_vm.playbackRateValue)},on:{"__r":function($event){_vm.playbackRateValue=$event.target.value;}}}),_vm._v(" "),_c('span',{staticStyle:{"padding-left":"20px","padding-right":"20px","font-size":"16px"}},[_vm._v(_vm._s(_vm.playbackRate + 'x'))])]),_vm._v(" "),_c('div',{staticClass:"visualization-divider",staticStyle:{"margin-top":"40px"}}),_vm._v(" "),_c('div',{staticClass:"visualization-row",staticStyle:{"display":"flex","justify-content":"center","margin-top":"10px","margin-bottom":"10px"}},[_c('button',{staticStyle:{"border-radius":"4px","height":"35px","width":"70px","background-color":"var(--visualization-primary)","border-color":"var(--visualization-primary)","color":"white"},on:{"click":function($event){return _vm.$emit('close', 'playbackRate')}}},[_vm._v("\n        Ok\n      ")])])])],1)},
-  staticRenderFns: [],
-    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: GridImages['2x1'] },
-          { text: '3x1', value: 2, image: GridImages['3x1'] },
-          { text: '3x2', value: 3, image: GridImages['3x2'] },
-          { text: '4x1', value: 4, image: GridImages['4x1'] },
-          { text: '4x2', value: 5, image: GridImages['4x2'] },
-          { text: '5x1', value: 6, image: GridImages['5x1'] },
-          { text: '5x2', value: 7, image: GridImages['5x2'] },
-          { text: '6x1', value: 8, image: GridImages['6x1'] },
-          { text: '6x2', value: 9, image: GridImages['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(direction = 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(([key, value]) => {
-          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,
-      },
-    },
-  };
-
-  const Positions = Object.freeze({
-    previous: 0,
-    current: 1,
-    next: 2,
-  });
-
-  var Visualization = {
-  render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"visualization-row",attrs:{"id":"visualization-container"},on:{"click":_vm.framesClicked}},[(_vm.active && _vm.canInsertTime && _vm.settingsClosed)?_c('GlobalEvents',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==45){ return null; }return _vm.insertTime.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==46){ return null; }return _vm.insertTime.apply(null, arguments)}]}}):_vm._e(),_vm._v(" "),(_vm.active && _vm.settingsClosed)?_c('GlobalEvents',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }$event.preventDefault();return _vm.arrowLeft.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }$event.preventDefault();return _vm.arrowRight.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"page-down",undefined,$event.key,undefined)){ return null; }if(!$event.shiftKey){ return null; }$event.preventDefault();return _vm.nextLoopActivate.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"page-down",undefined,$event.key,undefined)){ return null; }$event.preventDefault();return _vm.next.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"page-up",undefined,$event.key,undefined)){ return null; }$event.preventDefault();return _vm.prev.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"page-up",undefined,$event.key,undefined)){ return null; }if(!$event.shiftKey){ return null; }$event.preventDefault();return _vm.prevLoopActivate.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==83){ return null; }$event.preventDefault();return _vm.setHourIni.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==69){ return null; }$event.preventDefault();return _vm.setHourEnd.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==36){ return null; }$event.preventDefault();return _vm.goToFirstFrame.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==35){ return null; }$event.preventDefault();return _vm.goToLastFrame.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==71){ return null; }$event.preventDefault();_vm.dialogs.goTo = true;},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==73){ return null; }$event.preventDefault();_vm.dialogs.secondsPerFrame = true;},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==76){ return null; }$event.preventDefault();_vm.dialogs.frames = true;},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==49&&$event.keyCode!==97){ return null; }return (function () { return (_vm.secondsPerFrame = 1); }).apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==50&&$event.keyCode!==98){ return null; }return (function () { return (_vm.secondsPerFrame = 2); }).apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==51&&$event.keyCode!==99){ return null; }return (function () { return (_vm.secondsPerFrame = 3); }).apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==52&&$event.keyCode!==100){ return null; }return (function () { return (_vm.secondsPerFrame = 4); }).apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==53&&$event.keyCode!==101){ return null; }return (function () { return (_vm.secondsPerFrame = 5); }).apply(null, arguments)}]}}):_vm._e(),_vm._v(" "),(_vm.prevLoop || _vm.nextLoop)?_c('GlobalEvents',{on:{"keydown":_vm.breakLoop,"click":_vm.breakLoop}}):_vm._e(),_vm._v(" "),(_vm.active)?_c('settings',{attrs:{"dialogs-visibility":_vm.dialogs,"playback-rate":_vm.playbackRate,"seconds-per-frame":_vm.secondsPerFrame,"frames-per-row":_vm.framesPerRow,"number-of-rows":_vm.numberOfRows},on:{"change-playback-rate":function (value) { return (_vm.playbackRate = value); },"change-go-to":_vm.changeHour,"change-seconds-per-frame":function (value) { return (_vm.secondsPerFrame = value); },"set-frames-selection":_vm.setFrameSelection,"close":function (dialog) { return (_vm.dialogs[dialog] = false); }}}):_vm._e(),_vm._v(" "),_c('div',{class:{ 'visualization-card': true, 'active-tab': _vm.active },staticStyle:{"width":"100%","padding":"0"}},[_c('command-bar',{directives:[{name:"show",rawName:"v-show",value:(_vm.commandBarShow),expression:"commandBarShow"}],attrs:{"video-playing":_vm.videoPlaying,"video-paused":_vm.paused,"insert-time":_vm.canInsertTime,"hour-ini-selected":!!_vm.hourIniSelected,"hour-end-selected":!!_vm.hourEndSelected},on:{"prev-loop-activate":_vm.prevLoopActivate,"next-loop-activate":_vm.nextLoopActivate,"prev":_vm.prev,"next":_vm.next,"go-to":function($event){_vm.dialogs.goTo = true;},"open-frame-selection":function($event){_vm.dialogs.frames = true;},"open-frames-per-second":function($event){_vm.dialogs.secondsPerFrame = true;},"open-blocks":_vm.openBlocks,"open-playback-rate":function($event){_vm.dialogs.playbackRate = true;},"play-or-pause":_vm.playOrPause,"stop-playing":_vm.stopPlayingBar,"set-hour-ini":_vm.setHourIni,"set-hour-end":_vm.setHourEnd,"insert-time":_vm.insertTime}}),_vm._v(" "),(_vm.videoProgressBar)?_c('video-progress',{directives:[{name:"show",rawName:"v-show",value:(_vm.videoPlaying),expression:"videoPlaying"}],attrs:{"video-time":_vm.videoTime}}):_vm._e(),_vm._v(" "),_c('info-bar',{attrs:{"playback-rate":_vm.playbackRate,"seconds-per-frame":_vm.secondsPerFrame,"commands-show":_vm.commandBarShow,"cache":_vm.useCache,"block-start-time":_vm.blockStartTime,"video-total-duration":_vm.videoSliderTotalDuration,"alternative-server":_vm.alternativeServer,"frames-per-row":_vm.framesPerRow,"number-of-rows":_vm.numberOfRows,"hour-ini":_vm.hourIniSelected,"hour-end":_vm.hourEndSelected},on:{"toogle-commands-visibility":function($event){_vm.commandBarShow = !_vm.commandBarShow;},"toogle-cache":function($event){_vm.useCache = !_vm.useCache;},"change-server":_vm.changeServerClick}}),_vm._v(" "),_vm._l((_vm.numberOfRows),function(rowNumber){return _c('div',{key:'row-' + rowNumber,staticClass:"visualization-row",staticStyle:{"padding":"12px"},attrs:{"id":'row-' + rowNumber}},[_vm._l((_vm.previousFrames),function(frame,frameNumber){return _c('div',{key:_vm.numberOfRows +
-            '-' +
-            _vm.framesPerRow +
-            '-' +
-            _vm.getIndex(rowNumber, frameNumber, _vm.Positions.previous),staticStyle:{"display":"none"}},[_c('span',{domProps:{"innerHTML":_vm._s(frame.img)}})])}),_vm._v(" "),_vm._l((_vm.nextFrames),function(frame,frameNumber){return _c('div',{key:_vm.numberOfRows +
-            '-' +
-            _vm.framesPerRow +
-            '-' +
-            _vm.getIndex(rowNumber, frameNumber, _vm.Positions.next),staticStyle:{"display":"none"}},[_c('span',{domProps:{"innerHTML":_vm._s(frame.img)}})])}),_vm._v(" "),_vm._l((_vm.frames.slice(
-            _vm.framesPerRow * (rowNumber - 1),
-            _vm.framesPerRow * rowNumber
-          )),function(frame,frameNumber){return _c('div',{key:'row-' + rowNumber + '-frame-' + frameNumber,staticClass:"visualization-col",class:{ loaderImg: !!frame.img },attrs:{"id":("frame-" + (_vm.getIndex(rowNumber, frameNumber, _vm.Positions.current)))},on:{"click":function($event){frame.time
-              ? _vm.selectFrame(
-                  _vm.getIndex(rowNumber, frameNumber, _vm.Positions.current),
-                  frame
-                )
-              : null;}}},[_c('span',{staticStyle:{"padding-left":"4px"},attrs:{"id":_vm.activeFrame ? 'aa' : 0}},[_c('b',[_vm._v("\n            "+_vm._s(_vm.getAudienceTime(
-                  frame.time,
-                  rowNumber,
-                  frameNumber,
-                  _vm.Positions.current
-                ))+"\n          ")])]),_vm._v(" "),_c('frame',{ref:"frames",refInFor:true,staticStyle:{"margin":"0 auto"},attrs:{"frame":frame,"index":_vm.getIndex(rowNumber, frameNumber, _vm.Positions.current),"grid-settings":{ numberOfRows: _vm.numberOfRows, framesPerRow: _vm.framesPerRow },"initialTime":frame.time === _vm.hourIniSelected,"endTime":frame.time === _vm.hourEndSelected,"betweenTime":frame.time > _vm.hourIniSelected && frame.time < _vm.hourEndSelected,"active":_vm.getIndex(rowNumber, frameNumber, _vm.Positions.current) ===
-              _vm.activeFrame,"activeTab":_vm.active,"videoUrl":_vm.fInterface ? _vm.fInterface.getVideoUrl(frame) : '',"playback-rate":_vm.playbackRate},on:{"startPlaying":_vm.startPlaying,"stopPlaying":_vm.stopPlaying,"playPauseStatus":_vm.changePlayPause,"updateSlider":_vm.updateSlider}})],1)})],2)})],2)],1)},
-  staticRenderFns: [],
-    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,
-      CommandBar: Commands,
-      InfoBar: Infos,
-      VideoProgress,
-      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(height=this.lastHeight) {
-        this.lastHeight = height;
-        if (this.$refs.frames) {
-          for (let frame of this.$refs.frames) {
-            frame.resize(height);
-          }
-        }
-        this.$emit('resized');
-      },
-      async goToFirstFrame() {
-        let frames = this.$refs.frames;
-
-        let audienceTime = null;
-        if (frames.length > 0) {
-          let frame = frames[0].frame;
-          audienceTime = this.getAudienceTime(frame.time, 0, 0, 0);
-        }
-        // if (audienceTime) {
-        //   this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))
-        // }
-        if (audienceTime) {
-          const [hours, minutes, seconds] = audienceTime.split(':');
-          const totalSeconds =
-            parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds);
-          if (totalSeconds >= 9000)
-            this.changeHour(this.getLastFirtsBlockTime(audienceTime, true));
-          else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true));
-        }
-      },
-      async goToLastFrame() {
-        let frames = this.$refs.frames;
-        let audienceTime = null;
-        if (frames.length > 0) {
-          let frame = frames[0].frame;
-
-          audienceTime = this.getAudienceTime(frame.time, 0, 0, 0);
-        }
-        if (audienceTime) {
-          this.changeHour(this.getLastFirtsBlockTime(audienceTime));
-        }
-      },
-      getLastFirtsBlockTime(time, first = false) {
-        if (time.indexOf(':') !== -1) {
-          time = time.replace(/:/g, '');
-        }
-        let h, m, newTime;
-        const t = time.match(/.{1,2}/g);
-        if (t[0] && t[1]) {
-          h = parseInt(t[0]);
-          m = parseInt(t[1]);
-        }
-        if (h < 26) {
-          if (m < 15)
-            if (first) newTime = t[0] + ':00:00';
-            else newTime = t[0] + ':14:59';
-          else if (m < 30)
-            if (first) newTime = t[0] + ':15:00';
-            else newTime = t[0] + ':29:59';
-          else if (m < 45)
-            if (first) newTime = t[0] + ':30:00';
-            else newTime = t[0] + ':44:59';
-          else if (first) newTime = t[0] + ':45:00';
-          else newTime = t[0] + ':59:59';
-        } else {
-          if (m < 15)
-            if (first) newTime = '26:00:00';
-            else newTime = '26:14:59';
-          else {
-            if (first) newTime = '26:15:00';
-            else newTime = '26:29:59';
-          }
-        }
-        return newTime
-      },
-      openBlocks() {
-        this.$refs.settings2?.openBlocks();
-      },
-      playOrPause() {
-        const array = this.$refs.frames.filter((fc) => !!fc.active);
-        if (array.length === 1) {
-          const frame = array[0];
-          frame.playOrPause(this.playbackRate);
-        }
-      },
-      stopPlayingBar() {
-        for (let ref of this.$refs.frames) {
-          if (
-            ref.videoStatus === ref.Status.playing ||
-            ref.videoStatus === ref.Status.paused
-          ) {
-            ref.stop(false);
-          }
-        }
-      },
-      async setFrameSelection(selected) {
-        this.frames = this.loadingArray;
-        switch (parseInt(selected)) {
-          // 2x1
-          case 1:
-            this.framesPerRow = 2;
-            this.numberOfRows = 1;
-            break
-          // 3x1
-          case 2:
-            this.framesPerRow = 3;
-            this.numberOfRows = 1;
-            break
-          // 3x2
-          case 3:
-            this.framesPerRow = 3;
-            this.numberOfRows = 2;
-            break
-          // 4x1
-          case 4:
-            this.framesPerRow = 4;
-            this.numberOfRows = 1;
-            break
-          // 4x2
-          case 5:
-            this.framesPerRow = 4;
-            this.numberOfRows = 2;
-            break
-          // 5x1
-          case 6:
-            this.framesPerRow = 5;
-            this.numberOfRows = 1;
-            break
-          // 5x2
-          case 7:
-            this.framesPerRow = 5;
-            this.numberOfRows = 2;
-            break
-          // 6x1
-          case 8:
-            this.framesPerRow = 6;
-            this.numberOfRows = 1;
-            break
-          // 6x2
-          case 9:
-            this.framesPerRow = 6;
-            this.numberOfRows = 2;
-            break
-        }
-        await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow);
-        this.getFramesArray();
-        setTimeout(() => {
-          for (let ref of this.$refs.frames) {
-            ref?.resize(this.lastHeight);
-          }
-        }, 150);
-      },
-      getFramesArray() {
-        this.frames = this.fInterface.getFrames(Positions.current);
-        this.nextFrames = this.fInterface.getFrames(Positions.next);
-        this.previousFrames = this.fInterface.getFrames(Positions.previous);
-      },
-      async createFramesInterface() {
-        this.frames = this.loadingArray;
-        let ch = this.channel;
-        let associationTMP = {
-          1735073: 1,
-          1735074: 139,
-          1735075: 3,
-          1735076: 132,
-        };
-        //
-        this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch;
-
-        const t = this.startAudienceTime.match(/.{1,2}/g);
-        const d = this.getDateParts();
-        const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000;
-        // * iniciar slider
-        this.blockStartTime = time;
-        this.fInterface = await new FramesInterface(
-          this.channelCode,
-          this.numberOfRows,
-          this.framesPerRow,
-          time,
-          this.startAudienceTime,
-          this.useCache
-        );
-        await this.fInterface.init();
-
-        this.getFramesArray();
-
-        this.activeFrame = this.getIndex(1, 0, Positions.current);
-
-        this.activeVideo = null;
-      },
-      getIndex(rowNumber, frameIndex, position) {
-        let from = this.framesPerRow * this.numberOfRows * position;
-        let till = this.framesPerRow * this.numberOfRows * (position + 1);
-
-        return (from + till * (rowNumber - 1)) / rowNumber + frameIndex
-      },
-      getAudienceTime(frameTime, rowNumber, frameNumber, position) {
-        if (!frameTime) {
-          return 'Loading...'
-        } else if (
-          this.getIndex(rowNumber, frameNumber, position) === this.activeVideo
-        ) {
-          return this.convertToAudienceTime(this.videoTime)
-        } else {
-          return this.convertToAudienceTime(frameTime)
-        }
-      },
-      dateInUtc(miliSeconds) {
-        var date = new Date(miliSeconds);
-        var utc = new Date(
-          date.getUTCFullYear(),
-          date.getUTCMonth(),
-          date.getUTCDate(),
-          date.getUTCHours(),
-          date.getUTCMinutes(),
-          date.getUTCSeconds()
-        );
-        return utc
-      },
-      convertToAudienceTime(time, separator = ':') {
-        const d = this.getDateParts();
-        const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000;
-
-        let hour = this.dateInUtc(time * 1000)
-          .toTimeString()
-          .split(' ')[0]
-          .split(':')
-          .map(Number);
-
-        if (time > limit && time <= limit + this.startAudienceSeconds) {
-          hour[0] = 24 + hour[0];
-        }
-        return hour
-          .map((part) => (part > 9 ? part.toString() : '0' + part))
-          .join(separator)
-      },
-      getDateParts(date = this.date) {
-        const d = new Date(date);
-        return {
-          year: d.getFullYear(),
-          month: d.getMonth(),
-          day: d.getDate(),
-        }
-      },
-      selectFrame(index, frame) {
-        const d = this.getDateParts();
-        const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000;
-        const frameTime = frame?.time;
-
-        if (frameTime - (this.startAudienceSeconds + limit) <= 0) {
-          if (this.hourIniSelected === true) {
-            this.hourIniSelected = frameTime;
-
-            if (
-              this.hourEndSelected &&
-              this.hourIniSelected > this.hourEndSelected
-            ) {
-              this.hourEndSelected = false;
-            }
-          } else if (this.hourEndSelected === true) {
-            if (frameTime > this.hourIniSelected) {
-              this.hourEndSelected = frameTime;
-              this.canInsertTime = true;
-            } else {
-              this.hourEndSelected = false;
-            }
-          }
-        }
-
-        if (this.activeFrame !== index) {
-          // ? Se clicar no frame diferente de onde está a dar play, faz pausa
-          const array = this.$refs.frames.filter(
-            (fc) => fc.videoStatus === fc.Status.playing
-          );
-          if (array.length === 1) {
-            const frame = array[0];
-            frame.playOrPause();
-          }
-          this.activeVideo = null;
-          this.activeFrame = index;
-        }
-      },
-      setHourIni() {
-        this.canInsertTime = true;
-        this.hourIniSelected = true;
-        document.getElementById(`frame-${this.activeFrame}`).click();
-        this.$emit('setHourIni', {
-          hour_ini: this.hourIniSelected
-            ? this.convertToAudienceTime(this.hourIniSelected, '')
-            : null,
-        });
-      },
-      setHourEnd() {
-        this.canInsertTime = true;
-        this.hourEndSelected = true;
-        document.getElementById(`frame-${this.activeFrame}`).click();
-      },
-      //* Navegação
-      arrowRight() {
-        if (this.checkLimitRight(false)) {
-          if (
-            this.activeFrame ===
-            this.numberOfRows * this.framesPerRow * 2 - 1
-          ) {
-            this.next();
-          } else {
-            this.activeFrame++;
-          }
-        }
-      },
-      arrowLeft() {
-        if (this.checkLimitLeft(false)) {
-          if (this.activeFrame === this.numberOfRows * this.framesPerRow) {
-            this.prev();
-          } else {
-            this.activeFrame--;
-          }
-        }
-      },
-      checkLimitRight(value) {
-        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) ;
-      },
-      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);
-          }
-        });
-      },
-    },
-  };
-
-  var Visualization$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': Visualization
-  });
-
-  return index;
-
-}));