@twab/visualization 0.9.7 → 0.9.9

package/dist/visualization.js

@@ -0,0 +1,2639 @@
+import VTooltip from 'v-tooltip';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faBackward, faStepBackward, faClock, faStepForward, faForward, faPlay, faStop, faBorderAll, faSlidersH, faCut, faHourglassStart, faHourglassEnd, faVideo, faInfoCircle, faTachometerAlt, faServer, faEye, faEyeSlash, faBan, faSync, faArrowTurnDown, faArrowCircleDown, faPause } from '@fortawesome/free-solid-svg-icons';
+import VueMask from 'v-mask';
+import VueLoading from 'vue-loading-twa';
+import axios from '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 () {
+  library.add(faBackward);
+  library.add(faStepBackward);
+  library.add(faClock);
+  library.add(faStepForward);
+  library.add(faForward);
+  library.add(faPlay);
+  library.add(faStop);
+  library.add(faBorderAll);
+  library.add(faSlidersH);
+  library.add(faCut);
+  library.add(faHourglassStart);
+  library.add(faHourglassEnd);
+  library.add(faVideo);
+  library.add(faInfoCircle);
+  library.add(faTachometerAlt);
+  library.add(faServer);
+  library.add(faEye);
+  library.add(faEyeSlash);
+  library.add(faBan);
+  library.add(faSync);
+  library.add(faArrowTurnDown);
+  library.add(faArrowCircleDown);
+  library.add(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);
+    Vue.use(VueMask);
+
+    registerIcons();
+    Vue.component('font-awesome-icon', 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,
+  },
+  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.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
+});
+
+export { index as default };