@twab/visualization 1.9.3 → 1.11.0

package/dist/visualization.js

@@ -1,7 +1,7 @@
 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, faArrowsLeftRightToLine, faExclamationTriangle, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import { faBackward, faStepBackward, faClock, faStepForward, faForward, faPlay, faStop, faBorderAll, faSlidersH, faCut, faHourglassStart, faHourglassEnd, faVideo, faInfoCircle, faTachometerAlt, faServer, faEye, faEyeSlash, faBan, faSync, faArrowTurnDown, faArrowCircleDown, faPause, faArrowsLeftRightToLine, faExclamationTriangle, faExclamationCircle, faMaximize, faMinimize } from '@fortawesome/free-solid-svg-icons';
 import VueMask from 'v-mask';
 import VueLoading from 'vue-loading-twa';
 import axios from 'axios';
@@ -110,7 +110,9 @@ function registerIcons () {
     faPause,
     faArrowsLeftRightToLine,
     faExclamationTriangle,
-    faExclamationCircle
+    faExclamationCircle,
+    faMaximize,
+    faMinimize
   );
 }
 
@@ -229,6 +231,10 @@ var script$5 = {
       type: Number,
       default: 11 / 9,
     },
+    stretchFrame: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -336,20 +342,22 @@ var script$5 = {
         (this.fullMaxWidth - this.gridSettings.framesPerRow * 10) /
         this.gridSettings.framesPerRow;
 
+      const rowSpacing = 29 * this.gridSettings.numberOfRows;
+      
       let heightAvailable =
         height -
         (commandBarSize?.offsetHeight || 0) -
         infoBarSize?.offsetHeight -
-        29 * this.gridSettings.numberOfRows;
+        rowSpacing -
+        2; // bottom padding
+
       if (this.gridSettings.numberOfRows > 1) {
         heightAvailable += 12;
       }
 
-      this.maxHeight =
-        this.gridSettings.numberOfRows === 2
-          ? (heightAvailable - 12) / 2
-          : heightAvailable;
-      this.maxHeight = this.maxHeight >= 75 ? this.maxHeight : 75;
+      this.maxHeight = heightAvailable / this.gridSettings.numberOfRows;
+      const minHeightPerRow = this.gridSettings.numberOfRows > 2 ? 50 : 60;
+      this.maxHeight = Math.max(this.maxHeight, minHeightPerRow);
 
       if (this.maxWidth / this.aspectRatio > this.maxHeight) {
         this.height = this.maxHeight;
@@ -358,9 +366,24 @@ var script$5 = {
         this.width = this.maxWidth;
         this.height = this.maxWidth / this.aspectRatio;
       }
-
+      this.applyImageStyles();
       this.maxHeight = this.height;
     },
+    applyImageStyles() {
+      this.$nextTick(() => {
+        const frameImages = this.$el.querySelectorAll(
+          '.frame-container img, .dummy-frame img'
+        );
+
+        frameImages.forEach((img) => {
+          img.style.width = '100%';
+          img.style.height = '100%';
+          img.style.objectFit = 'fill';
+          img.style.aspectRatio = 'auto';
+          img.style.display = 'block';
+        });
+      });
+    },
     async playOrPause() {
       switch (this.videoStatus) {
         case Status.stopped:
@@ -704,65 +727,83 @@ var __vue_render__$5 = function () {
         },
       }),
       _vm._v(" "),
-      _c("div", { staticStyle: { "background-color": "black" } }, [
-        !_vm.isLoading
-          ? _c(
-              "div",
-              {
-                class: {
-                  "frame-content":
-                    _vm.frame.title === -1 ||
-                    _vm.videoStatus !== _vm.Status.stopped,
-                },
-                style: {
-                  minHeight: _vm.height + "px",
-                  minWidth: _vm.width + "px",
-                  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.videoOnModal &&
-                _vm.videoStatus !== _vm.Status.stopped &&
-                !_vm.videoIsLoading
-                  ? _c("video", {
-                      ref: "videoPlayer",
-                      style: {
+      _c(
+        "div",
+        {
+          style: {
+            backgroundColor: "black",
+            width: _vm.stretchFrame ? "100%" : "auto",
+            height: _vm.stretchFrame ? "100%" : "auto",
+          },
+        },
+        [
+          !_vm.isLoading
+            ? _c(
+                "div",
+                {
+                  class: {
+                    "frame-content":
+                      _vm.frame.title === -1 ||
+                      _vm.videoStatus !== _vm.Status.stopped,
+                  },
+                  style: _vm.stretchFrame
+                    ? {
+                        height: _vm.maxHeight + "px",
                         width: "100%",
-                        aspectRatio: _vm.aspectRatioFrac,
-                      },
-                      attrs: {
+                        color: "white",
+                      }
+                    : {
+                        minHeight: _vm.height + "px",
+                        minWidth: _vm.width + "px",
                         maxHeight: _vm.height + "px",
                         maxWidth: _vm.width + "px",
-                        src: _vm.videoUrlString,
+                        color: "white",
                       },
-                      on: {
-                        timeupdate: _vm.updateTimeLabel,
-                        ended: _vm.videoEnded,
-                        click: _vm.playOrPause,
-                        canplay: _vm.canPlay,
-                        error: function () {
-                          return _vm.stop(false)
+                  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.videoOnModal &&
+                  _vm.videoStatus !== _vm.Status.stopped &&
+                  !_vm.videoIsLoading
+                    ? _c("video", {
+                        ref: "videoPlayer",
+                        style: {
+                          width: "100%",
+                          aspectRatio: _vm.aspectRatioFrac,
                         },
-                      },
-                    })
-                  : _vm._e(),
-                _vm._v(" "),
-                !_vm.loading ? _c("div", { staticClass: "overlay" }) : _vm._e(),
-              ]
-            )
-          : _vm._e(),
-      ]),
+                        attrs: {
+                          maxHeight: _vm.height + "px",
+                          maxWidth: _vm.width + "px",
+                          src: _vm.videoUrlString,
+                        },
+                        on: {
+                          timeupdate: _vm.updateTimeLabel,
+                          ended: _vm.videoEnded,
+                          click: _vm.playOrPause,
+                          canplay: _vm.canPlay,
+                          error: function () {
+                            return _vm.stop(false)
+                          },
+                        },
+                      })
+                    : _vm._e(),
+                  _vm._v(" "),
+                  !_vm.loading
+                    ? _c("div", { staticClass: "overlay" })
+                    : _vm._e(),
+                ]
+              )
+            : _vm._e(),
+        ]
+      ),
       _vm._v(" "),
       _c(
         "dialog",
@@ -817,11 +858,11 @@ __vue_render__$5._withStripped = true;
   /* style */
   const __vue_inject_styles__$5 = function (inject) {
     if (!inject) return
-    inject("data-v-75056fcc_0", { source: "\n.frame-container > div[data-v-75056fcc] {\r\n  max-height: 100%;\n}\n.frame-container[data-v-75056fcc] {\r\n  background-color: black;\r\n  display: flex;\r\n  justify-content: center;\n}\n.frame-content[data-v-75056fcc],\r\n.dummy-frame[data-v-75056fcc] {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\n}\n.frame-content video[data-v-75056fcc] {\r\n  flex-grow: 1;\r\n  object-fit: fill;\r\n  z-index: 0;\n}\n.overlay[data-v-75056fcc] {\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 5;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  border: 4px solid transparent;\r\n  pointer-events: none;\n}\n.active .overlay[data-v-75056fcc] {\r\n  border-color: var(--visualization-primary);\n}\n.between-time .overlay[data-v-75056fcc] {\r\n  border-top-color: var(--visualization-secondary);\n}\n.between-time.active .overlay[data-v-75056fcc] {\r\n  border-color: var(--visualization-secondary);\n}\n.initial-time .overlay[data-v-75056fcc] {\r\n  border-top-color: var(--visualization-start);\n}\n.initial-time.active .overlay[data-v-75056fcc] {\r\n  border-color: var(--visualization-start);\n}\n.end-time .overlay[data-v-75056fcc] {\r\n  border-top-color: var(--visualization-end);\n}\n.end-time.active .overlay[data-v-75056fcc] {\r\n  border-color: var(--visualization-end);\n}\n.initial-time.end-time .overlay[data-v-75056fcc] {\r\n  border-top-color: var(--visualization-start);\r\n  border-bottom-color: var(--visualization-end);\n}\n.initial-time.end-time.active .overlay[data-v-75056fcc] {\r\n  border-top-color: var(--visualization-start);\r\n  border-left-color: var(--visualization-start);\r\n  border-bottom-color: var(--visualization-end);\r\n  border-right-color: var(--visualization-end);\n}\n.div-frame[data-v-75056fcc] img {\r\n  width: 90vh !important;\n}\r\n", map: {"version":3,"sources":["C:\\Workspace\\visualization\\src\\components\\Frame.vue"],"names":[],"mappings":";AA8aA;EACA,gBAAA;AACA;AACA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;AACA;AACA;;EAEA,aAAA;EACA,mBAAA;EACA,uBAAA;AACA;AACA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,6BAAA;EACA,oBAAA;AACA;AACA;EACA,0CAAA;AACA;AACA;EACA,gDAAA;AACA;AACA;EACA,4CAAA;AACA;AACA;EACA,4CAAA;AACA;AACA;EACA,wCAAA;AACA;AACA;EACA,0CAAA;AACA;AACA;EACA,sCAAA;AACA;AACA;EACA,4CAAA;EACA,6CAAA;AACA;AACA;EACA,4CAAA;EACA,6CAAA;EACA,6CAAA;EACA,4CAAA;AACA;AACA;EACA,sBAAA;AACA","file":"Frame.vue","sourcesContent":["<template>\r\n  <div\r\n    :style=\"{\r\n      maxHeight: `${maxHeight}px`,\r\n      width: '100%',\r\n      position: 'relative',\r\n    }\"\r\n    :class=\"{\r\n      'frame-container': true,\r\n      'initial-time': initialTime,\r\n      'end-time': endTime,\r\n      'between-time': betweenTime,\r\n      active: active,\r\n    }\"\r\n  >\r\n    <GlobalEvents\r\n      v-if=\"active && activeTab && parentComponent.settingsClosed\"\r\n      @keydown.32.prevent=\"playOrPause\"\r\n      @keydown.27.prevent=\"stop\"\r\n      @keydown.79=\"toogleDetailFrame\"\r\n      @keydown.13.prevent=\"jumpFrameToStart\"\r\n    />\r\n    <GlobalEvents\r\n      v-if=\"showFrame\"\r\n      @keydown.27.prevent=\"toogleDetailFrame\"\r\n      @keydown.13.prevent=\"toogleDetailFrame\"\r\n    />\r\n\r\n    <vue-loading\r\n      :active=\"isLoading\"\r\n      spinner=\"ring\"\r\n      color=\"var(--visualization-primary)\"\r\n      background-color=\"#cacaca\"\r\n      :style=\"{\r\n        'z-index': 0,\r\n        minHeight: `${height}px`,\r\n        minWidth: `${width}px`,\r\n      }\"\r\n      :text=\"videoIsLoading ? $t('infoBar.createVideo') : ''\"\r\n    />\r\n    <div style=\"background-color: black\">\r\n      <div\r\n        v-if=\"!isLoading\"\r\n        :class=\"{\r\n          'frame-content': frame.title === -1 || videoStatus !== Status.stopped,\r\n        }\"\r\n        :style=\"{\r\n          minHeight: `${height}px`,\r\n          minWidth: `${width}px`,\r\n          maxHeight: `${height}px`,\r\n          maxWidth: `${width}px`,\r\n          color: 'white',\r\n        }\"\r\n        @dblclick=\"playOrPause\"\r\n      >\r\n        <div\r\n          v-if=\"frame.image && videoStatus === Status.stopped\"\r\n          :class=\"{ 'dummy-frame': frame.title === -1 }\"\r\n          v-html=\"frame.image\"\r\n          style=\"width: 100%; height: 100%\"\r\n        />\r\n        <video\r\n          v-if=\"\r\n            !videoOnModal && videoStatus !== Status.stopped && !videoIsLoading\r\n          \"\r\n          ref=\"videoPlayer\"\r\n          :maxHeight=\"`${height}px`\"\r\n          :maxWidth=\"`${width}px`\"\r\n          :src=\"videoUrlString\"\r\n          @timeupdate=\"updateTimeLabel\"\r\n          @ended=\"videoEnded\"\r\n          @click=\"playOrPause\"\r\n          @canplay=\"canPlay\"\r\n          @error=\"() => stop(false)\"\r\n          :style=\"{ width: '100%', aspectRatio: aspectRatioFrac }\"\r\n        ></video>\r\n        <div v-if=\"!loading\" class=\"overlay\"></div>\r\n      </div>\r\n    </div>\r\n\r\n    <dialog\r\n      ref=\"imageDetailsDialog\"\r\n      style=\"\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translateY(-50%) translateX(-50%);\r\n        border: none;\r\n        background: grey;\r\n        width: 60%;\r\n      \"\r\n    >\r\n      <div\r\n        v-if=\"videoStatus == Status.stopped\"\r\n        style=\"justify-content: center; display: flex\"\r\n        :class=\"{\r\n          'dummy-frame': frame.title === -1,\r\n          'div-frame': frame.title !== -1,\r\n        }\"\r\n        v-html=\"frame.image\"\r\n        @dblclick=\"changeToVideo\"\r\n      ></div>\r\n      <video\r\n        v-if=\"videoOnModal && videoStatus !== Status.stopped && !videoIsLoading\"\r\n        ref=\"videoPlayer\"\r\n        :src=\"videoUrlString\"\r\n        autoplay\r\n        @ended=\"videoEnded\"\r\n        style=\"width: 100%; aspect-ratio: 11/9\"\r\n        controls=\"true\"\r\n        width=\"200%\"\r\n      ></video>\r\n    </dialog>\r\n  </div>\r\n</template>\r\n<script>\r\nimport VueLoading from 'vue-loading-twa'\r\n\r\nconst Status = Object.freeze({\r\n  stopped: 0,\r\n  playing: 1,\r\n  paused: 2,\r\n})\r\n\r\nexport default {\r\n  components: {\r\n    VueLoading,\r\n  },\r\n  name: 'frame-component',\r\n  props: {\r\n    frame: {\r\n      type: [Object, Number],\r\n      required: true,\r\n    },\r\n    index: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    loading: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    gridSettings: {\r\n      type: Object,\r\n      required: true,\r\n    },\r\n    initialTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    endTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    betweenTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    active: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    activeTab: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    videoUrl: {\r\n      type: [String, Promise],\r\n      required: true,\r\n    },\r\n    playbackRate: {\r\n      type: Number,\r\n      default: 1,\r\n    },\r\n    videoControls: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    aspectRatio: {\r\n      type: Number,\r\n      default: 11 / 9,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      Status,\r\n      width: 0,\r\n      height: 0,\r\n      maxWidth: 0,\r\n      fullMaxWidth: 0,\r\n      maxHeight: 0,\r\n      showFrame: false,\r\n      videoStatus: Status.stopped,\r\n      videoStartTime: null,\r\n      videoCurrentTime: null,\r\n      videoUrlString: '',\r\n      parentComponent: null,\r\n      videoIsLoading: false,\r\n      currentBlock: null,\r\n      lastTimeEnterPressed: null,\r\n      videoOnModal: false,\r\n    }\r\n  },\r\n  created() {\r\n    this.parentComponent = this.$parent\r\n  },\r\n  watch: {\r\n    playbackRate(val) {\r\n      if (\r\n        this.videoStatus === Status.playing ||\r\n        this.videoStatus === Status.paused\r\n      ) {\r\n        this.$refs.videoPlayer.playbackRate = val\r\n      }\r\n    },\r\n  },\r\n  computed: {\r\n    isLoading() {\r\n      return (\r\n        ((!this.frame.image || !this.frame.time) && this.frame.title !== -1) ||\r\n        this.loading ||\r\n        this.videoIsLoading\r\n      )\r\n    },\r\n    aspectRatioFrac() {\r\n      var gcd = function (a, b) {\r\n        if (b < 0.0000001) return a\r\n\r\n        return gcd(b, Math.floor(a % b))\r\n      }\r\n\r\n      var denominator = Math.pow(10, this.aspectRatio.toString().length - 2)\r\n      var numerator = this.aspectRatio * denominator\r\n\r\n      var divisor = gcd(numerator, denominator)\r\n\r\n      return `${Math.floor(numerator / divisor)}/${Math.floor(\r\n        denominator / divisor\r\n      )}`\r\n    },\r\n  },\r\n  methods: {\r\n    canPlay() {\r\n      this.$refs.videoPlayer.play()\r\n    },\r\n    changeToVideo() {\r\n      this.videoOnModal = true\r\n      this.playOrPause()\r\n    },\r\n    jumpFrameToStart() {\r\n      if (this.active) {\r\n        const currentTime = new Date().getTime()\r\n\r\n        if (currentTime - this.lastTimeEnterPressed <= 500) {\r\n          this.parentComponent.changeHour(\r\n            this.parentComponent.convertToAudienceTime(this.frame.time)\r\n          )\r\n        }\r\n\r\n        this.lastTimeEnterPressed = currentTime\r\n      }\r\n    },\r\n    changeSettings(value) {\r\n      this.videoCurrentTime = value\r\n    },\r\n    toogleDetailFrame() {\r\n      this.stop()\r\n      if (this.showFrame) {\r\n        this.videoOnModal = false\r\n        this.$refs.imageDetailsDialog.close()\r\n      } else {\r\n        this.$refs.imageDetailsDialog.showModal()\r\n      }\r\n      this.showFrame = !this.showFrame\r\n    },\r\n    getMaxWidth() {\r\n      const commandBarSize = document.getElementById('command-bar')\r\n\r\n      return commandBarSize?.clientWidth\r\n    },\r\n    resize(height) {\r\n      const commandBarSize = document.getElementById('command-bar')\r\n      const infoBarSize = document.getElementById('info-bar')\r\n\r\n      this.fullMaxWidth = infoBarSize?.clientWidth\r\n      this.maxWidth =\r\n        (this.fullMaxWidth - this.gridSettings.framesPerRow * 10) /\r\n        this.gridSettings.framesPerRow\r\n\r\n      let heightAvailable =\r\n        height -\r\n        (commandBarSize?.offsetHeight || 0) -\r\n        infoBarSize?.offsetHeight -\r\n        29 * this.gridSettings.numberOfRows\r\n      if (this.gridSettings.numberOfRows > 1) {\r\n        heightAvailable += 12\r\n      }\r\n\r\n      this.maxHeight =\r\n        this.gridSettings.numberOfRows === 2\r\n          ? (heightAvailable - 12) / 2\r\n          : heightAvailable\r\n      this.maxHeight = this.maxHeight >= 75 ? this.maxHeight : 75\r\n\r\n      if (this.maxWidth / this.aspectRatio > this.maxHeight) {\r\n        this.height = this.maxHeight\r\n        this.width = this.maxHeight * this.aspectRatio\r\n      } else {\r\n        this.width = this.maxWidth\r\n        this.height = this.maxWidth / this.aspectRatio\r\n      }\r\n\r\n      this.maxHeight = this.height\r\n    },\r\n    async playOrPause() {\r\n      switch (this.videoStatus) {\r\n        case Status.stopped:\r\n          this.videoIsLoading = true\r\n          try {\r\n            this.videoUrlString = await this.videoUrl\r\n            const blockInfo =\r\n              await this.parentComponent.fInterface?.getVideoStartTime(\r\n                this.frame\r\n              )\r\n\r\n            this.videoStartTime = blockInfo.start\r\n            this.videoUrlString =\r\n              this.parentComponent.fInterface.getVideoRequestByUrl(\r\n                blockInfo.url,\r\n                this.frame.number + this.parentComponent.shiftFrames\r\n              )\r\n          } catch (error) {\r\n            console.log(error)\r\n          }\r\n          this.videoIsLoading = false\r\n          this.videoStatus = Status.playing\r\n          this.$nextTick(() => {\r\n            this.$refs.videoPlayer.onloaded = (e) => {\r\n              this.$refs.videoPlayer.playbackRate = this.playbackRate\r\n              // * atualizar slider\r\n              this.$emit('updateSlider', this.videoStartTime, this.frame.time)\r\n              //*\r\n              this.$emit('startPlaying', this.frame, e.target.duration)\r\n              this.$emit('playPauseStatus', true)\r\n            }\r\n          })\r\n          break\r\n        case Status.paused:\r\n          this.$refs.videoPlayer.play()\r\n          this.$refs.videoPlayer.playbackRate = this.playbackRate\r\n          this.videoStatus = Status.playing\r\n          this.$emit('playPauseStatus', true)\r\n          break\r\n        case Status.playing:\r\n          this.$refs.videoPlayer.pause()\r\n\r\n          this.videoStatus = Status.paused\r\n          this.$emit('playPauseStatus', false)\r\n          break\r\n      }\r\n    },\r\n    stop(jump = true) {\r\n      this.videoOnModal = false\r\n      if (\r\n        this.videoStatus === Status.playing ||\r\n        this.videoStatus === Status.paused\r\n      ) {\r\n        if (jump) {\r\n          this.parentComponent.changeHour(\r\n            this.parentComponent.convertToAudienceTime(\r\n              parseInt(this.videoCurrentTime)\r\n            )\r\n          )\r\n        }\r\n        this.videoStatus = Status.stopped\r\n        this.videoUrlString = null\r\n        this.videoCurrentTime = null\r\n        this.videoStartTime = null\r\n      }\r\n      this.$emit('stopPlaying')\r\n    },\r\n    //eslint-disable-next-line\r\n    videoJumpTo(time) {\r\n      this.videoCurrentTime = this.videoStartTime + time\r\n      this.$refs.videoPlayer.currentTime = time\r\n    },\r\n    async videoJumpToTimeStamp(time) {\r\n      let frame = {\r\n        time: time,\r\n      }\r\n      if (!time) return\r\n      if (\r\n        !(\r\n          this.currentBlock &&\r\n          time >= this.currentBlock.start &&\r\n          time <= this.currentBlock.end\r\n        )\r\n      ) {\r\n        this.currentBlock = await this.parentComponent.fInterface?.getBlockInfo(\r\n          frame\r\n        )\r\n        this.videoStartTime = this.currentBlock.start\r\n        this.videoUrlString =\r\n          this.parentComponent.fInterface.getVideoUrlForTime(\r\n            this.videoStartTime\r\n          )\r\n      }\r\n      this.videoCurrentTime = time - this.videoStartTime\r\n      this.$refs.videoPlayer.currentTime = this.videoCurrentTime\r\n    },\r\n    updateTimeLabel(e) {\r\n      this.videoCurrentTime = this.videoStartTime + e.target.currentTime\r\n      this.parentComponent.updateVideoTime(this.index, this.videoCurrentTime)\r\n      this.parentComponent.updateVideoStatus(e.target.currentTime)\r\n    },\r\n    async videoEnded() {\r\n      this.videoStartTime =\r\n        await this.parentComponent.fInterface?.getNextVideoStartTime(\r\n          this.frame.time - this.parentComponent.shiftFrames\r\n        )\r\n      this.videoUrlString = this.parentComponent.fInterface.getVideoUrlForTime(\r\n        this.videoStartTime\r\n      )\r\n      //  * Ao acabar o vídeo tenho de mandar atualizar slider\r\n      // * aqui o video current time tambem vai ser o videoStartTime\r\n      this.$emit('updateSlider', this.videoStartTime, this.videoStartTime)\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.frame-container > div {\r\n  max-height: 100%;\r\n}\r\n.frame-container {\r\n  background-color: black;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n.frame-content,\r\n.dummy-frame {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.frame-content video {\r\n  flex-grow: 1;\r\n  object-fit: fill;\r\n  z-index: 0;\r\n}\r\n.overlay {\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 5;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  border: 4px solid transparent;\r\n  pointer-events: none;\r\n}\r\n.active .overlay {\r\n  border-color: var(--visualization-primary);\r\n}\r\n.between-time .overlay {\r\n  border-top-color: var(--visualization-secondary);\r\n}\r\n.between-time.active .overlay {\r\n  border-color: var(--visualization-secondary);\r\n}\r\n.initial-time .overlay {\r\n  border-top-color: var(--visualization-start);\r\n}\r\n.initial-time.active .overlay {\r\n  border-color: var(--visualization-start);\r\n}\r\n.end-time .overlay {\r\n  border-top-color: var(--visualization-end);\r\n}\r\n.end-time.active .overlay {\r\n  border-color: var(--visualization-end);\r\n}\r\n.initial-time.end-time .overlay {\r\n  border-top-color: var(--visualization-start);\r\n  border-bottom-color: var(--visualization-end);\r\n}\r\n.initial-time.end-time.active .overlay {\r\n  border-top-color: var(--visualization-start);\r\n  border-left-color: var(--visualization-start);\r\n  border-bottom-color: var(--visualization-end);\r\n  border-right-color: var(--visualization-end);\r\n}\r\n.div-frame >>> img {\r\n  width: 90vh !important;\r\n}\r\n</style>\r\n"]}, media: undefined });
+    inject("data-v-2297f9cd_0", { source: "\n.frame-container > div[data-v-2297f9cd] {\r\n  max-height: 100%;\r\n  height: 100%; /* Add this */\n}\n.frame-container[data-v-2297f9cd] {\r\n  background-color: black;\r\n  display: flex;\r\n  justify-content: center;\n}\n.frame-content[data-v-2297f9cd],\r\n.dummy-frame[data-v-2297f9cd] {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\n}\n.frame-content video[data-v-2297f9cd] {\r\n  flex-grow: 1;\r\n  object-fit: fill;\r\n  z-index: 0;\n}\n.overlay[data-v-2297f9cd] {\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 5;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  border: 4px solid transparent;\r\n  pointer-events: none;\n}\n.active .overlay[data-v-2297f9cd] {\r\n  border-color: var(--visualization-primary);\n}\n.between-time .overlay[data-v-2297f9cd] {\r\n  border-top-color: var(--visualization-secondary);\n}\n.between-time.active .overlay[data-v-2297f9cd] {\r\n  border-color: var(--visualization-secondary);\n}\n.initial-time .overlay[data-v-2297f9cd] {\r\n  border-top-color: var(--visualization-start);\n}\n.initial-time.active .overlay[data-v-2297f9cd] {\r\n  border-color: var(--visualization-start);\n}\n.end-time .overlay[data-v-2297f9cd] {\r\n  border-top-color: var(--visualization-end);\n}\n.end-time.active .overlay[data-v-2297f9cd] {\r\n  border-color: var(--visualization-end);\n}\n.initial-time.end-time .overlay[data-v-2297f9cd] {\r\n  border-top-color: var(--visualization-start);\r\n  border-bottom-color: var(--visualization-end);\n}\n.initial-time.end-time.active .overlay[data-v-2297f9cd] {\r\n  border-top-color: var(--visualization-start);\r\n  border-left-color: var(--visualization-start);\r\n  border-bottom-color: var(--visualization-end);\r\n  border-right-color: var(--visualization-end);\n}\r\n\r\n/* new styles */\n.frame-content[data-v-2297f9cd] img,\r\n.dummy-frame[data-v-2297f9cd] img {\r\n  width: 100% !important;\r\n  height: 100% !important;\r\n  object-fit: fill !important;\r\n  aspect-ratio: auto !important;\r\n  display: block !important;\n}\n.frame-content[data-v-2297f9cd] div,\r\n.dummy-frame[data-v-2297f9cd] div {\r\n  width: 100% !important;\r\n  height: 100% !important;\n}\n.frame-content video[data-v-2297f9cd] {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: fill;\r\n  z-index: 0;\n}\n.overlay[data-v-2297f9cd] {\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 5;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  border: 4px solid transparent;\r\n  pointer-events: none;\n}\r\n/* «««««««« */\n.div-frame[data-v-2297f9cd] img {\r\n  width: 90vh !important;\n}\r\n", map: {"version":3,"sources":["C:\\Workspace\\visualization\\src\\components\\Frame.vue"],"names":[],"mappings":";AAwcA;EACA,gBAAA;EACA,YAAA,EAAA,aAAA;AACA;AACA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;AACA;AACA;;EAEA,aAAA;EACA,mBAAA;EACA,uBAAA;AACA;AACA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,6BAAA;EACA,oBAAA;AACA;AACA;EACA,0CAAA;AACA;AACA;EACA,gDAAA;AACA;AACA;EACA,4CAAA;AACA;AACA;EACA,4CAAA;AACA;AACA;EACA,wCAAA;AACA;AACA;EACA,0CAAA;AACA;AACA;EACA,sCAAA;AACA;AACA;EACA,4CAAA;EACA,6CAAA;AACA;AACA;EACA,4CAAA;EACA,6CAAA;EACA,6CAAA;EACA,4CAAA;AACA;;AAEA,eAAA;AACA;;EAEA,sBAAA;EACA,uBAAA;EACA,2BAAA;EACA,6BAAA;EACA,yBAAA;AACA;AAEA;;EAEA,sBAAA;EACA,uBAAA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,6BAAA;EACA,oBAAA;AACA;AACA,aAAA;AACA;EACA,sBAAA;AACA","file":"Frame.vue","sourcesContent":["<template>\r\n  <div\r\n    :style=\"{\r\n      maxHeight: `${maxHeight}px`,\r\n      width: '100%',\r\n      position: 'relative',\r\n    }\"\r\n    :class=\"{\r\n      'frame-container': true,\r\n      'initial-time': initialTime,\r\n      'end-time': endTime,\r\n      'between-time': betweenTime,\r\n      active: active,\r\n    }\">\r\n    <GlobalEvents\r\n      v-if=\"active && activeTab && parentComponent.settingsClosed\"\r\n      @keydown.32.prevent=\"playOrPause\"\r\n      @keydown.27.prevent=\"stop\"\r\n      @keydown.79=\"toogleDetailFrame\"\r\n      @keydown.13.prevent=\"jumpFrameToStart\" />\r\n    <GlobalEvents\r\n      v-if=\"showFrame\"\r\n      @keydown.27.prevent=\"toogleDetailFrame\"\r\n      @keydown.13.prevent=\"toogleDetailFrame\" />\r\n\r\n    <vue-loading\r\n      :active=\"isLoading\"\r\n      spinner=\"ring\"\r\n      color=\"var(--visualization-primary)\"\r\n      background-color=\"#cacaca\"\r\n      :style=\"{\r\n        'z-index': 0,\r\n        minHeight: `${height}px`,\r\n        minWidth: `${width}px`,\r\n      }\"\r\n      :text=\"videoIsLoading ? $t('infoBar.createVideo') : ''\" />\r\n    <div\r\n      :style=\"{\r\n        backgroundColor: 'black',\r\n        width: stretchFrame ? '100%' : 'auto',\r\n        height: stretchFrame ? '100%' : 'auto',\r\n      }\">\r\n      <div\r\n        v-if=\"!isLoading\"\r\n        :class=\"{\r\n          'frame-content': frame.title === -1 || videoStatus !== Status.stopped,\r\n        }\"\r\n        :style=\"\r\n          stretchFrame\r\n            ? {\r\n                height: `${maxHeight}px`,\r\n                width: '100%',\r\n                color: 'white',\r\n              }\r\n            : {\r\n                minHeight: `${height}px`,\r\n                minWidth: `${width}px`,\r\n                maxHeight: `${height}px`,\r\n                maxWidth: `${width}px`,\r\n                color: 'white',\r\n              }\r\n        \"\r\n        @dblclick=\"playOrPause\">\r\n        <div\r\n          v-if=\"frame.image && videoStatus === Status.stopped\"\r\n          :class=\"{ 'dummy-frame': frame.title === -1 }\"\r\n          v-html=\"frame.image\"\r\n          style=\"width: 100%; height: 100%\" />\r\n\r\n        <video\r\n          v-if=\"\r\n            !videoOnModal && videoStatus !== Status.stopped && !videoIsLoading\r\n          \"\r\n          ref=\"videoPlayer\"\r\n          :maxHeight=\"`${height}px`\"\r\n          :maxWidth=\"`${width}px`\"\r\n          :src=\"videoUrlString\"\r\n          @timeupdate=\"updateTimeLabel\"\r\n          @ended=\"videoEnded\"\r\n          @click=\"playOrPause\"\r\n          @canplay=\"canPlay\"\r\n          @error=\"() => stop(false)\"\r\n          :style=\"{ width: '100%', aspectRatio: aspectRatioFrac }\"></video>\r\n        <div v-if=\"!loading\" class=\"overlay\"></div>\r\n        \r\n      </div>\r\n    </div>\r\n\r\n    <dialog\r\n      ref=\"imageDetailsDialog\"\r\n      style=\"\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translateY(-50%) translateX(-50%);\r\n        border: none;\r\n        background: grey;\r\n        width: 60%;\r\n      \">\r\n      <div\r\n        v-if=\"videoStatus == Status.stopped\"\r\n        style=\"justify-content: center; display: flex\"\r\n        :class=\"{\r\n          'dummy-frame': frame.title === -1,\r\n          'div-frame': frame.title !== -1,\r\n        }\"\r\n        v-html=\"frame.image\"\r\n        @dblclick=\"changeToVideo\"></div>\r\n      <video\r\n        v-if=\"videoOnModal && videoStatus !== Status.stopped && !videoIsLoading\"\r\n        ref=\"videoPlayer\"\r\n        :src=\"videoUrlString\"\r\n        autoplay\r\n        @ended=\"videoEnded\"\r\n        style=\"width: 100%; aspect-ratio: 11/9\"\r\n        controls=\"true\"\r\n        width=\"200%\"></video>\r\n    </dialog>\r\n  </div>\r\n</template>\r\n<script>\r\nimport VueLoading from 'vue-loading-twa'\r\n\r\nconst Status = Object.freeze({\r\n  stopped: 0,\r\n  playing: 1,\r\n  paused: 2,\r\n})\r\n\r\nexport default {\r\n  components: {\r\n    VueLoading,\r\n  },\r\n  name: 'frame-component',\r\n  props: {\r\n    frame: {\r\n      type: [Object, Number],\r\n      required: true,\r\n    },\r\n    index: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    loading: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    gridSettings: {\r\n      type: Object,\r\n      required: true,\r\n    },\r\n    initialTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    endTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    betweenTime: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    active: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    activeTab: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    videoUrl: {\r\n      type: [String, Promise],\r\n      required: true,\r\n    },\r\n    playbackRate: {\r\n      type: Number,\r\n      default: 1,\r\n    },\r\n    videoControls: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    aspectRatio: {\r\n      type: Number,\r\n      default: 11 / 9,\r\n    },\r\n    stretchFrame: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      Status,\r\n      width: 0,\r\n      height: 0,\r\n      maxWidth: 0,\r\n      fullMaxWidth: 0,\r\n      maxHeight: 0,\r\n      showFrame: false,\r\n      videoStatus: Status.stopped,\r\n      videoStartTime: null,\r\n      videoCurrentTime: null,\r\n      videoUrlString: '',\r\n      parentComponent: null,\r\n      videoIsLoading: false,\r\n      currentBlock: null,\r\n      lastTimeEnterPressed: null,\r\n      videoOnModal: false,\r\n    }\r\n  },\r\n  created() {\r\n    this.parentComponent = this.$parent\r\n  },\r\n  watch: {\r\n    playbackRate(val) {\r\n      if (\r\n        this.videoStatus === Status.playing ||\r\n        this.videoStatus === Status.paused\r\n      ) {\r\n        this.$refs.videoPlayer.playbackRate = val\r\n      }\r\n    },\r\n  },\r\n  computed: {\r\n    isLoading() {\r\n      return (\r\n        ((!this.frame.image || !this.frame.time) && this.frame.title !== -1) ||\r\n        this.loading ||\r\n        this.videoIsLoading\r\n      )\r\n    },\r\n    aspectRatioFrac() {\r\n      var gcd = function (a, b) {\r\n        if (b < 0.0000001) return a\r\n\r\n        return gcd(b, Math.floor(a % b))\r\n      }\r\n\r\n      var denominator = Math.pow(10, this.aspectRatio.toString().length - 2)\r\n      var numerator = this.aspectRatio * denominator\r\n\r\n      var divisor = gcd(numerator, denominator)\r\n\r\n      return `${Math.floor(numerator / divisor)}/${Math.floor(\r\n        denominator / divisor\r\n      )}`\r\n    },\r\n  },\r\n  methods: {\r\n    canPlay() {\r\n      this.$refs.videoPlayer.play()\r\n    },\r\n    changeToVideo() {\r\n      this.videoOnModal = true\r\n      this.playOrPause()\r\n    },\r\n    jumpFrameToStart() {\r\n      if (this.active) {\r\n        const currentTime = new Date().getTime()\r\n\r\n        if (currentTime - this.lastTimeEnterPressed <= 500) {\r\n          this.parentComponent.changeHour(\r\n            this.parentComponent.convertToAudienceTime(this.frame.time)\r\n          )\r\n        }\r\n\r\n        this.lastTimeEnterPressed = currentTime\r\n      }\r\n    },\r\n    changeSettings(value) {\r\n      this.videoCurrentTime = value\r\n    },\r\n    toogleDetailFrame() {\r\n      this.stop()\r\n      if (this.showFrame) {\r\n        this.videoOnModal = false\r\n        this.$refs.imageDetailsDialog.close()\r\n      } else {\r\n        this.$refs.imageDetailsDialog.showModal()\r\n      }\r\n      this.showFrame = !this.showFrame\r\n    },\r\n    getMaxWidth() {\r\n      const commandBarSize = document.getElementById('command-bar')\r\n\r\n      return commandBarSize?.clientWidth\r\n    },\r\n    resize(height) {\r\n      const commandBarSize = document.getElementById('command-bar')\r\n      const infoBarSize = document.getElementById('info-bar')\r\n\r\n      this.fullMaxWidth = infoBarSize?.clientWidth\r\n      this.maxWidth =\r\n        (this.fullMaxWidth - this.gridSettings.framesPerRow * 10) /\r\n        this.gridSettings.framesPerRow\r\n\r\n      const rowSpacing = 29 * this.gridSettings.numberOfRows\r\n      \r\n      let heightAvailable =\r\n        height -\r\n        (commandBarSize?.offsetHeight || 0) -\r\n        infoBarSize?.offsetHeight -\r\n        rowSpacing -\r\n        2 // bottom padding\r\n\r\n      if (this.gridSettings.numberOfRows > 1) {\r\n        heightAvailable += 12\r\n      }\r\n\r\n      this.maxHeight = heightAvailable / this.gridSettings.numberOfRows\r\n      const minHeightPerRow = this.gridSettings.numberOfRows > 2 ? 50 : 60\r\n      this.maxHeight = Math.max(this.maxHeight, minHeightPerRow)\r\n\r\n      if (this.maxWidth / this.aspectRatio > this.maxHeight) {\r\n        this.height = this.maxHeight\r\n        this.width = this.maxHeight * this.aspectRatio\r\n      } else {\r\n        this.width = this.maxWidth\r\n        this.height = this.maxWidth / this.aspectRatio\r\n      }\r\n      this.applyImageStyles()\r\n      this.maxHeight = this.height\r\n    },\r\n    applyImageStyles() {\r\n      this.$nextTick(() => {\r\n        const frameImages = this.$el.querySelectorAll(\r\n          '.frame-container img, .dummy-frame img'\r\n        )\r\n\r\n        frameImages.forEach((img) => {\r\n          img.style.width = '100%'\r\n          img.style.height = '100%'\r\n          img.style.objectFit = 'fill'\r\n          img.style.aspectRatio = 'auto'\r\n          img.style.display = 'block'\r\n        })\r\n      })\r\n    },\r\n    async playOrPause() {\r\n      switch (this.videoStatus) {\r\n        case Status.stopped:\r\n          this.videoIsLoading = true\r\n          try {\r\n            this.videoUrlString = await this.videoUrl\r\n            const blockInfo =\r\n              await this.parentComponent.fInterface?.getVideoStartTime(\r\n                this.frame\r\n              )\r\n\r\n            this.videoStartTime = blockInfo.start\r\n            this.videoUrlString =\r\n              this.parentComponent.fInterface.getVideoRequestByUrl(\r\n                blockInfo.url,\r\n                this.frame.number + this.parentComponent.shiftFrames\r\n              )\r\n          } catch (error) {\r\n            console.log(error)\r\n          }\r\n          this.videoIsLoading = false\r\n          this.videoStatus = Status.playing\r\n          this.$nextTick(() => {\r\n            this.$refs.videoPlayer.onloaded = (e) => {\r\n              this.$refs.videoPlayer.playbackRate = this.playbackRate\r\n              // * atualizar slider\r\n              this.$emit('updateSlider', this.videoStartTime, this.frame.time)\r\n              //*\r\n              this.$emit('startPlaying', this.frame, e.target.duration)\r\n              this.$emit('playPauseStatus', true)\r\n            }\r\n          })\r\n          break\r\n        case Status.paused:\r\n          this.$refs.videoPlayer.play()\r\n          this.$refs.videoPlayer.playbackRate = this.playbackRate\r\n          this.videoStatus = Status.playing\r\n          this.$emit('playPauseStatus', true)\r\n          break\r\n        case Status.playing:\r\n          this.$refs.videoPlayer.pause()\r\n\r\n          this.videoStatus = Status.paused\r\n          this.$emit('playPauseStatus', false)\r\n          break\r\n      }\r\n    },\r\n    stop(jump = true) {\r\n      this.videoOnModal = false\r\n      if (\r\n        this.videoStatus === Status.playing ||\r\n        this.videoStatus === Status.paused\r\n      ) {\r\n        if (jump) {\r\n          this.parentComponent.changeHour(\r\n            this.parentComponent.convertToAudienceTime(\r\n              parseInt(this.videoCurrentTime)\r\n            )\r\n          )\r\n        }\r\n        this.videoStatus = Status.stopped\r\n        this.videoUrlString = null\r\n        this.videoCurrentTime = null\r\n        this.videoStartTime = null\r\n      }\r\n      this.$emit('stopPlaying')\r\n    },\r\n    //eslint-disable-next-line\r\n    videoJumpTo(time) {\r\n      this.videoCurrentTime = this.videoStartTime + time\r\n      this.$refs.videoPlayer.currentTime = time\r\n    },\r\n    async videoJumpToTimeStamp(time) {\r\n      let frame = {\r\n        time: time,\r\n      }\r\n      if (!time) return\r\n      if (\r\n        !(\r\n          this.currentBlock &&\r\n          time >= this.currentBlock.start &&\r\n          time <= this.currentBlock.end\r\n        )\r\n      ) {\r\n        this.currentBlock = await this.parentComponent.fInterface?.getBlockInfo(\r\n          frame\r\n        )\r\n        this.videoStartTime = this.currentBlock.start\r\n        this.videoUrlString =\r\n          this.parentComponent.fInterface.getVideoUrlForTime(\r\n            this.videoStartTime\r\n          )\r\n      }\r\n      this.videoCurrentTime = time - this.videoStartTime\r\n      this.$refs.videoPlayer.currentTime = this.videoCurrentTime\r\n    },\r\n    updateTimeLabel(e) {\r\n      this.videoCurrentTime = this.videoStartTime + e.target.currentTime\r\n      this.parentComponent.updateVideoTime(this.index, this.videoCurrentTime)\r\n      this.parentComponent.updateVideoStatus(e.target.currentTime)\r\n    },\r\n    async videoEnded() {\r\n      this.videoStartTime =\r\n        await this.parentComponent.fInterface?.getNextVideoStartTime(\r\n          this.frame.time - this.parentComponent.shiftFrames\r\n        )\r\n      this.videoUrlString = this.parentComponent.fInterface.getVideoUrlForTime(\r\n        this.videoStartTime\r\n      )\r\n      //  * Ao acabar o vídeo tenho de mandar atualizar slider\r\n      // * aqui o video current time tambem vai ser o videoStartTime\r\n      this.$emit('updateSlider', this.videoStartTime, this.videoStartTime)\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.frame-container > div {\r\n  max-height: 100%;\r\n  height: 100%; /* Add this */\r\n}\r\n.frame-container {\r\n  background-color: black;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n.frame-content,\r\n.dummy-frame {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.frame-content video {\r\n  flex-grow: 1;\r\n  object-fit: fill;\r\n  z-index: 0;\r\n}\r\n.overlay {\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 5;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  border: 4px solid transparent;\r\n  pointer-events: none;\r\n}\r\n.active .overlay {\r\n  border-color: var(--visualization-primary);\r\n}\r\n.between-time .overlay {\r\n  border-top-color: var(--visualization-secondary);\r\n}\r\n.between-time.active .overlay {\r\n  border-color: var(--visualization-secondary);\r\n}\r\n.initial-time .overlay {\r\n  border-top-color: var(--visualization-start);\r\n}\r\n.initial-time.active .overlay {\r\n  border-color: var(--visualization-start);\r\n}\r\n.end-time .overlay {\r\n  border-top-color: var(--visualization-end);\r\n}\r\n.end-time.active .overlay {\r\n  border-color: var(--visualization-end);\r\n}\r\n.initial-time.end-time .overlay {\r\n  border-top-color: var(--visualization-start);\r\n  border-bottom-color: var(--visualization-end);\r\n}\r\n.initial-time.end-time.active .overlay {\r\n  border-top-color: var(--visualization-start);\r\n  border-left-color: var(--visualization-start);\r\n  border-bottom-color: var(--visualization-end);\r\n  border-right-color: var(--visualization-end);\r\n}\r\n\r\n/* new styles */\r\n.frame-content >>> img,\r\n.dummy-frame >>> img {\r\n  width: 100% !important;\r\n  height: 100% !important;\r\n  object-fit: fill !important;\r\n  aspect-ratio: auto !important;\r\n  display: block !important;\r\n}\r\n\r\n.frame-content >>> div,\r\n.dummy-frame >>> div {\r\n  width: 100% !important;\r\n  height: 100% !important;\r\n}\r\n\r\n.frame-content video {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: fill;\r\n  z-index: 0;\r\n}\r\n\r\n.overlay {\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 5;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  border: 4px solid transparent;\r\n  pointer-events: none;\r\n}\r\n/* «««««««« */\r\n.div-frame >>> img {\r\n  width: 90vh !important;\r\n}\r\n</style>\r\n"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$5 = "data-v-75056fcc";
+  const __vue_scope_id__$5 = "data-v-2297f9cd";
   /* module identifier */
   const __vue_module_identifier__$5 = undefined;
   /* functional template */
@@ -869,12 +910,14 @@ var FramesService = {
     direction,
     channel,
     split,
+    size,
     time,
     quality,
     factor,
     useCache = true,
     signal,
   } = {}) {
+    let fileSize = size > 180 ? '88x72' : '352x288';
     return API().get(`Get${direction}FramesBlockInFiles`, {
       params: {
         Channel: channel,
@@ -884,6 +927,7 @@ var FramesService = {
         Step: 0,
         JpegQuality: quality,
         JpegSizeFactor: factor,
+        FileSize: fileSize,
       },
       signal,
     })
@@ -899,6 +943,9 @@ var FramesService = {
     useCache = true,
     signal,
   } = {}) {
+    //console.log('Getting small block request', size)
+
+    let fileSize = size > 180 ? '88x72' : '352x288';        
     return API().get('GetSmallFramesBlockInFiles', {
       params: {
         Channel: channel,
@@ -909,6 +956,7 @@ var FramesService = {
         JpegQuality: quality,
         JpegSizeFactor: factor,
         Size: size,
+        FileSize: fileSize,
       },
       signal,
     })
@@ -1303,6 +1351,7 @@ FramesManager.prototype.getBlock = async function (
           channel,
           split,
           time,
+          size: this.size * 15,
           quality: ENUM.StepsQuality[this.currentStep],
           factor: ENUM.StepsFactor[this.currentStep],
           signal: this.requests[requestId].signal,
@@ -2283,6 +2332,13 @@ __vue_render__$4._withStripped = true;
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
 
 var script$3 = {
   props: {
@@ -2328,9 +2384,16 @@ var script$3 = {
     hourEnd: {
       type: [Number, Boolean],
     },
+    showStretchFrame: {
+      type: Boolean,
+      default: false,
+    },
+    
   },
   data() {
-    return {}
+    return {
+      stretchFrames: false,
+    }
   },
   computed: {
     blockTotalTime() {
@@ -2499,6 +2562,34 @@ var __vue_render__$3 = function () {
             "div",
             { staticClass: "settings-container" },
             [
+              _c("font-awesome-icon", {
+                directives: [
+                  {
+                    name: "show",
+                    rawName: "v-show",
+                    value: _vm.showStretchFrame,
+                    expression: "showStretchFrame",
+                  },
+                  {
+                    name: "tooltip",
+                    rawName: "v-tooltip",
+                    value: _vm.$t("infoBar.stretchFrames"),
+                    expression: "$t('infoBar.stretchFrames')",
+                  },
+                ],
+                attrs: {
+                  icon: !_vm.stretchFrames
+                    ? ["fas", "fa-maximize"]
+                    : ["fas", "fa-minimize"],
+                },
+                on: {
+                  click: function ($event) {
+                    _vm.stretchFrames = !_vm.stretchFrames;
+                    _vm.$emit("update-stretch-frames", _vm.stretchFrames);
+                  },
+                },
+              }),
+              _vm._v(" "),
               _c("font-awesome-icon", {
                 directives: [
                   {
@@ -2606,11 +2697,11 @@ __vue_render__$3._withStripped = true;
   /* style */
   const __vue_inject_styles__$3 = function (inject) {
     if (!inject) return
-    inject("data-v-848911da_0", { source: "\n.visualization-row[data-v-848911da] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-848911da] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\n}\n.visualization-divider[data-v-848911da] {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\n}\n.visualization-divider.vertical[data-v-848911da] {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\n}\n.visualization-card[data-v-848911da] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\r\n  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n.visualization-justify-center[data-v-848911da],[data-v-848911da] .visualization-justify-center {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-848911da] {\r\n  align-items: center;\n}\n#visualization-container[data-v-848911da] {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\n}\n#visualization-container > .card[data-v-848911da] {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\n}\n#command-bar[data-v-848911da],\r\n#info-bar[data-v-848911da] {\r\n  background-color: #f5f5f5;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button[data-v-848911da] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-848911da]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-848911da] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-848911da] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-848911da] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-848911da] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-848911da] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-848911da] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-848911da] {\r\n  margin: 0 8px;\n}\nsvg[data-v-848911da]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-848911da] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-848911da] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-848911da] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\n.tooltip[data-v-848911da] {\r\n  display: block !important;\r\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-848911da] {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-848911da] {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-848911da] {\r\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-848911da] {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-848911da] {\r\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-848911da] {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-848911da] {\r\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-848911da] {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-848911da] {\r\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-848911da] {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-848911da] {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-848911da] {\r\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-848911da] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-848911da] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\n}\r\n", map: {"version":3,"sources":["C:\\Workspace\\visualization\\src\\components\\Infos.vue"],"names":[],"mappings":";AA+LA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;EAEA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Infos.vue","sourcesContent":["<template>\r\n  <div\r\n    id=\"info-bar\"\r\n    class=\"visualization-col\"\r\n    :style=\"\r\n      !commandsShow ? 'border-top-right-radius: 6px; padding: 0' : 'padding: 0'\r\n    \"\r\n  >\r\n    <div\r\n      class=\"visualization-row visualization-justify-center visualization-align-center\"\r\n      style=\"position: relative; padding: 4px\"\r\n    >\r\n      <span> {{ playbackRate }}x </span>\r\n      <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n      <span>\r\n        {{\r\n          $t('infoBar.selected', {\r\n            seconds: hourEnd && hourIni ? hourEnd - hourIni + 1 : 0,\r\n            hour_ini: convertToAudienceTime(hourIni),\r\n            hour_end: convertToAudienceTime(hourEnd),\r\n          })\r\n        }}\r\n      </span>\r\n      <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n      <span>\r\n        {{\r\n          $t('infoBar.interval', {\r\n            seconds: secondsPerFrame,\r\n          })\r\n        }}\r\n      </span>\r\n      <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n      <span>\r\n        {{\r\n          $t('infoBar.block', {\r\n            time1: convertToAudienceTime(blockStartTime),\r\n            time2: convertToAudienceTime(blockTotalTime),\r\n          })\r\n        }}\r\n      </span>\r\n      <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n      {{ framesPerRow * numberOfRows }}\r\n      <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n      {{ framesPerRow + '*' + numberOfRows }}\r\n      <span\r\n        class=\"visualization-divider vertical\"\r\n        v-if=\"!cache\"\r\n        style=\"margin: 0 8px\"\r\n      />\r\n      <span v-if=\"!cache\">\r\n        <font-awesome-icon\r\n          icon=\"fa-solid fa-exclamation-circle\"\r\n          style=\"margin: 0 4px\"\r\n        />\r\n        <strong>{{ $t('infoBar.notUsingCache') }}</strong>\r\n      </span>\r\n      <div class=\"settings-container\">\r\n        <font-awesome-icon\r\n          icon=\"fa-solid fa-server\"\r\n          @click=\"$emit('change-server')\"\r\n          v-tooltip=\"\r\n            alternativeServer\r\n              ? $t('infoBar.changeServer')\r\n              : $t('infoBar.changeServer')\r\n          \"\r\n        />\r\n        <font-awesome-icon\r\n          :icon=\"commandsShow ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'\"\r\n          @click=\"$emit('toogle-commands-visibility')\"\r\n          v-tooltip=\"\r\n            commandsShow\r\n              ? $t('moduletelentry.showButtons')\r\n              : $t('moduletelentry.hideButtons')\r\n          \"\r\n        />\r\n        <font-awesome-icon\r\n          :icon=\"cache ? 'fa-solid fa-ban' : 'fa-solid fa-sync'\"\r\n          @click=\"$emit('toogle-cache')\"\r\n          v-tooltip=\"\r\n            cache ? $t('infoBar.disableCache') : $t('infoBar.activateCache')\r\n          \"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      v-if=\"alternativeServer\"\r\n      class=\"visualization-row visualization-justify-center visualization-align-center\"\r\n      style=\"\r\n        color: white;\r\n        background-color: orange;\r\n        font-weight: bold;\r\n        padding: 4px;\r\n      \"\r\n    >\r\n      {{ $t('infoBar.alternativeServer') }}\r\n      <font-awesome-icon\r\n        icon=\"fa-solid fa-exclamation-triangle\"\r\n        style=\"margin: 0 4px\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  props: {\r\n    playbackRate: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    secondsPerFrame: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    commandsShow: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    cache: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    blockStartTime: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    videoTotalDuration: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    alternativeServer: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    framesPerRow: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    numberOfRows: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    hourIni: {\r\n      type: [Number, Boolean],\r\n    },\r\n    hourEnd: {\r\n      type: [Number, Boolean],\r\n    },\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  computed: {\r\n    blockTotalTime() {\r\n      return this.videoTotalDuration + this.blockStartTime\r\n    },\r\n  },\r\n  methods: {\r\n    convertToAudienceTime(time, separator = ':') {\r\n      const limit = Date.UTC(null, null, null, 23, 59, 59) / 1000\r\n\r\n      let hour = this.dateInUtc(time * 1000)\r\n        .toTimeString()\r\n        .split(' ')[0]\r\n        .split(':')\r\n        .map(Number)\r\n\r\n      if (time > limit && time <= limit + this.startAudienceSeconds) {\r\n        hour[0] = 24 + hour[0]\r\n      }\r\n      return hour\r\n        .map((part) => (part > 9 ? part.toString() : '0' + part))\r\n        .join(separator)\r\n    },\r\n\r\n    dateInUtc(miliSeconds) {\r\n      var date = new Date(miliSeconds)\r\n      var utc = new Date(\r\n        date.getUTCFullYear(),\r\n        date.getUTCMonth(),\r\n        date.getUTCDate(),\r\n        date.getUTCHours(),\r\n        date.getUTCMinutes(),\r\n        date.getUTCSeconds()\r\n      )\r\n      return utc\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\r\n  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\r\n}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n  align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n  background-color: #f5f5f5;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n}\r\n#command-bar button {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n  padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\r\n}\r\n\r\n.settings-container {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n  margin: 0 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n  margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n  border: none;\r\n}\r\n\r\n.visualization-card {\r\n  border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined });
+    inject("data-v-25cfa24c_0", { source: "\n.visualization-row[data-v-25cfa24c] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-25cfa24c] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\n}\n.visualization-divider[data-v-25cfa24c] {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\n}\n.visualization-divider.vertical[data-v-25cfa24c] {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\n}\n.visualization-card[data-v-25cfa24c] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\r\n  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n.visualization-justify-center[data-v-25cfa24c],[data-v-25cfa24c] .visualization-justify-center {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-25cfa24c] {\r\n  align-items: center;\n}\n#visualization-container[data-v-25cfa24c] {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\n}\n#visualization-container > .card[data-v-25cfa24c] {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\n}\n#command-bar[data-v-25cfa24c],\r\n#info-bar[data-v-25cfa24c] {\r\n  background-color: #f5f5f5;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button[data-v-25cfa24c] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-25cfa24c]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-25cfa24c] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-25cfa24c] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-25cfa24c] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-25cfa24c] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-25cfa24c] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-25cfa24c] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-25cfa24c] {\r\n  margin: 0 8px;\n}\nsvg[data-v-25cfa24c]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-25cfa24c] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-25cfa24c] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-25cfa24c] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\n.tooltip[data-v-25cfa24c] {\r\n  display: block !important;\r\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-25cfa24c] {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-25cfa24c] {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-25cfa24c] {\r\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-25cfa24c] {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-25cfa24c] {\r\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-25cfa24c] {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-25cfa24c] {\r\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-25cfa24c] {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-25cfa24c] {\r\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-25cfa24c] {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-25cfa24c] {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-25cfa24c] {\r\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-25cfa24c] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-25cfa24c] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\n}\r\n", map: {"version":3,"sources":["C:\\Workspace\\visualization\\src\\components\\Infos.vue"],"names":[],"mappings":";AA6MA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;EAEA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Infos.vue","sourcesContent":["<template>\r\n  <div\r\n    id=\"info-bar\"\r\n    class=\"visualization-col\"\r\n    :style=\"\r\n      !commandsShow ? 'border-top-right-radius: 6px; padding: 0' : 'padding: 0'\r\n    \"\r\n  >\r\n    <div\r\n      class=\"visualization-row visualization-justify-center visualization-align-center\"\r\n      style=\"position: relative; padding: 4px\"\r\n    >\r\n      <span> {{ playbackRate }}x </span>\r\n      <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n      <span>\r\n        {{\r\n          $t('infoBar.selected', {\r\n            seconds: hourEnd && hourIni ? hourEnd - hourIni + 1 : 0,\r\n            hour_ini: convertToAudienceTime(hourIni),\r\n            hour_end: convertToAudienceTime(hourEnd),\r\n          })\r\n        }}\r\n      </span>\r\n      <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n      <span>\r\n        {{\r\n          $t('infoBar.interval', {\r\n            seconds: secondsPerFrame,\r\n          })\r\n        }}\r\n      </span>\r\n      <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n      <span>\r\n        {{\r\n          $t('infoBar.block', {\r\n            time1: convertToAudienceTime(blockStartTime),\r\n            time2: convertToAudienceTime(blockTotalTime),\r\n          })\r\n        }}\r\n      </span>\r\n      <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n      {{ framesPerRow * numberOfRows }}\r\n      <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n      {{ framesPerRow + '*' + numberOfRows }}\r\n      <span\r\n        class=\"visualization-divider vertical\"\r\n        v-if=\"!cache\"\r\n        style=\"margin: 0 8px\"\r\n      />\r\n      <span v-if=\"!cache\">\r\n        <font-awesome-icon\r\n          icon=\"fa-solid fa-exclamation-circle\"\r\n          style=\"margin: 0 4px\"\r\n        />\r\n        <strong>{{ $t('infoBar.notUsingCache') }}</strong>\r\n      </span>\r\n     \r\n      <div class=\"settings-container\">\r\n         <font-awesome-icon\r\n         v-show=\"showStretchFrame\"\r\n          :icon=\"!stretchFrames ? ['fas', 'fa-maximize'] : ['fas', 'fa-minimize']\"\r\n          @click=\"stretchFrames = !stretchFrames; $emit('update-stretch-frames', stretchFrames)\"\r\n          v-tooltip=\"$t('infoBar.stretchFrames')\"\r\n        />\r\n        <font-awesome-icon\r\n          icon=\"fa-solid fa-server\"\r\n          @click=\"$emit('change-server')\"\r\n          v-tooltip=\"\r\n            alternativeServer\r\n              ? $t('infoBar.changeServer')\r\n              : $t('infoBar.changeServer')\r\n          \"\r\n        />\r\n        <font-awesome-icon\r\n          :icon=\"commandsShow ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'\"\r\n          @click=\"$emit('toogle-commands-visibility')\"\r\n          v-tooltip=\"\r\n            commandsShow\r\n              ? $t('moduletelentry.showButtons')\r\n              : $t('moduletelentry.hideButtons')\r\n          \"\r\n        />\r\n        <font-awesome-icon\r\n          :icon=\"cache ? 'fa-solid fa-ban' : 'fa-solid fa-sync'\"\r\n          @click=\"$emit('toogle-cache')\"\r\n          v-tooltip=\"\r\n            cache ? $t('infoBar.disableCache') : $t('infoBar.activateCache')\r\n          \"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      v-if=\"alternativeServer\"\r\n      class=\"visualization-row visualization-justify-center visualization-align-center\"\r\n      style=\"\r\n        color: white;\r\n        background-color: orange;\r\n        font-weight: bold;\r\n        padding: 4px;\r\n      \"\r\n    >\r\n      {{ $t('infoBar.alternativeServer') }}\r\n      <font-awesome-icon\r\n        icon=\"fa-solid fa-exclamation-triangle\"\r\n        style=\"margin: 0 4px\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  props: {\r\n    playbackRate: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    secondsPerFrame: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    commandsShow: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    cache: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    blockStartTime: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    videoTotalDuration: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    alternativeServer: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    framesPerRow: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    numberOfRows: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    hourIni: {\r\n      type: [Number, Boolean],\r\n    },\r\n    hourEnd: {\r\n      type: [Number, Boolean],\r\n    },\r\n    showStretchFrame: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    \r\n  },\r\n  data() {\r\n    return {\r\n      stretchFrames: false,\r\n    }\r\n  },\r\n  computed: {\r\n    blockTotalTime() {\r\n      return this.videoTotalDuration + this.blockStartTime\r\n    },\r\n  },\r\n  methods: {\r\n    convertToAudienceTime(time, separator = ':') {\r\n      const limit = Date.UTC(null, null, null, 23, 59, 59) / 1000\r\n\r\n      let hour = this.dateInUtc(time * 1000)\r\n        .toTimeString()\r\n        .split(' ')[0]\r\n        .split(':')\r\n        .map(Number)\r\n\r\n      if (time > limit && time <= limit + this.startAudienceSeconds) {\r\n        hour[0] = 24 + hour[0]\r\n      }\r\n      return hour\r\n        .map((part) => (part > 9 ? part.toString() : '0' + part))\r\n        .join(separator)\r\n    },\r\n\r\n    dateInUtc(miliSeconds) {\r\n      var date = new Date(miliSeconds)\r\n      var utc = new Date(\r\n        date.getUTCFullYear(),\r\n        date.getUTCMonth(),\r\n        date.getUTCDate(),\r\n        date.getUTCHours(),\r\n        date.getUTCMinutes(),\r\n        date.getUTCSeconds()\r\n      )\r\n      return utc\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\r\n  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\r\n}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n  align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n  background-color: #f5f5f5;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n}\r\n#command-bar button {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n  padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\r\n}\r\n\r\n.settings-container {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n  margin: 0 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n  margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n  border: none;\r\n}\r\n\r\n.visualization-card {\r\n  border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$3 = "data-v-848911da";
+  const __vue_scope_id__$3 = "data-v-25cfa24c";
   /* module identifier */
   const __vue_module_identifier__$3 = undefined;
   /* functional template */
@@ -2842,6 +2933,8 @@ var GridImages = {
     'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiIgIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTU1OC4yIDB2OTAuMWgtODguNWMtMS42IDAtMS42IDAtMS42LTEuNlYxLjdjMC0xLjYgMC0xLjYgMS42LTEuNmw4OC41LS4xeiIgZmlsbD0iIzE1NjVjMCIvPjxwYXRoIGQ9Ik05MC4yIDE4My41SDBWOTUuMWMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjdjMS44IDAgMS44IDAgMS44IDEuOHY4OC4zem05My42IDBIOTMuNlY5NS4zYzAtMS45IDAtMS45IDEuOS0xLjlIMTgyYzEuOCAwIDEuOCAwIDEuOCAxLjh2ODguM3ptMjgwLjkgMGgtOTAuMlY5NS4xYzAtMS43IDAtMS43IDEuNi0xLjdINDYzYzEuNiAwIDEuNiAwIDEuNiAxLjd2NjQuMWwuMSAyNC4zem05My41LTkwdjg5YzAgLjktLjIgMS4xLTEuMSAxLjFINDY4Vjk1LjJjMC0xLjcgMC0xLjcgMS43LTEuN2g4OC41em0tMjgwLjkgOTBoLTkwVjk0LjhjMC0uOS4xLTEuNSAxLjItMS41SDI3NmMuOSAwIDEuMi4zIDEuMiAxLjJsLjEgODl6bTkzLjYgMGgtOTBWOTUuMWMwLTEuNyAwLTEuNyAxLjctMS43aDg2LjVjMS44IDAgMS44IDAgMS44IDEuOHY4OC4zeiIgZmlsbD0iI2NiY2JjYiIvPjxwYXRoIGQ9Ik0wIDQ1LjFWMS41QzAgLjMuMyAwIDEuNCAwaDg3LjNjMS4yIDAgMS41LjMgMS40IDEuNXY4Ny4xYzAgMS4yLS4zIDEuNS0xLjUgMS41SDEuNGMtMS4zIDAtMS41LS40LTEuNS0xLjZMMCA0NS4xem05My42LS4xVjEuNUM5My42LjMgOTMuOSAwIDk1IDBoODcuM2MxLjIgMCAxLjQuMyAxLjQgMS41djg3LjJjMCAxLjItLjQgMS40LTEuNSAxLjRIOTVjLTEuMiAwLTEuNS0uNC0xLjUtMS41bC4xLTQzLjZ6TTQxOS43IDBoNDMuNGMxLjIgMCAxLjYuMiAxLjYgMS41djg3LjFjMCAxLjItLjMgMS41LTEuNSAxLjVIMzc2Yy0xLjEgMC0xLjUtLjMtMS41LTEuNFYxLjVjMC0xLjIuMy0xLjQgMS41LTEuNGw0My43LS4xek0yNzcuMyA0NS4xdjQzLjNjMCAxLjYgMCAxLjYtMS42IDEuNmgtODYuOGMtMS43IDAtMS43IDAtMS43LTEuNlYxLjVjMC0xLjIuMy0xLjUgMS41LTEuNWg4Ny4yYzEuMiAwIDEuNC40IDEuNCAxLjV2NDMuNnptMy42LS4yVjEuNGMwLTEuMS4zLTEuNSAxLjQtMS41aDg3LjJjMS4zIDAgMS41LjQgMS41IDEuNnY4Ni45YzAgMS42IDAgMS42LTEuNSAxLjZoLTg3Yy0xLjEgMC0xLjUtLjMtMS41LTEuNGwtLjEtNDMuN3oiIGZpbGw9IiMxNTY1YzAiLz48L3N2Zz4=',
   '6x2':
     'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOC4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FtYWRhXzEiIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyINCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1NTguMiAxODMuNiINCgkgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTU4LjIgMTgzLjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMxNTY1QzA7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01NTguMiwwdjkwLjFoLTg4LjVjLTEuNiwwLTEuNiwwLTEuNi0xLjZWMS43YzAtMS42LDAtMS42LDEuNi0xLjZDNDY5LjcsMC4xLDU1OC4yLDAsNTU4LjIsMHoiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05MC4yLDE4My41SDBWOTUuMWMwLTEuNywwLTEuNywxLjctMS43aDg2LjdjMS44LDAsMS44LDAsMS44LDEuOFYxODMuNXogTTE4My44LDE4My41SDkzLjZWOTUuMw0KCWMwLTEuOSwwLTEuOSwxLjktMS45SDE4MmMxLjgsMCwxLjgsMCwxLjgsMS44TDE4My44LDE4My41TDE4My44LDE4My41eiBNNDY0LjcsMTgzLjVoLTkwLjJWOTUuMWMwLTEuNywwLTEuNywxLjYtMS43SDQ2Mw0KCWMxLjYsMCwxLjYsMCwxLjYsMS43djY0LjFMNDY0LjcsMTgzLjVMNDY0LjcsMTgzLjV6IE01NTguMiw5My41djg5YzAsMC45LTAuMiwxLjEtMS4xLDEuMUg0NjhWOTUuMmMwLTEuNywwLTEuNywxLjctMS43SDU1OC4yDQoJTDU1OC4yLDkzLjV6IE0yNzcuMywxODMuNWgtOTBWOTQuOGMwLTAuOSwwLjEtMS41LDEuMi0xLjVIMjc2YzAuOSwwLDEuMiwwLjMsMS4yLDEuMkwyNzcuMywxODMuNUwyNzcuMywxODMuNXogTTM3MC45LDE4My41aC05MA0KCVY5NS4xYzAtMS43LDAtMS43LDEuNy0xLjdoODYuNWMxLjgsMCwxLjgsMCwxLjgsMS44VjE4My41eiIvPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsNDUuMVYxLjVDMCwwLjMsMC4zLDAsMS40LDBoODcuM2MxLjIsMCwxLjUsMC4zLDEuNCwxLjV2ODcuMWMwLDEuMi0wLjMsMS41LTEuNSwxLjVIMS40DQoJYy0xLjMsMC0xLjUtMC40LTEuNS0xLjZMMCw0NS4xeiBNOTMuNiw0NVYxLjVDOTMuNiwwLjMsOTMuOSwwLDk1LDBoODcuM2MxLjIsMCwxLjQsMC4zLDEuNCwxLjV2ODcuMmMwLDEuMi0wLjQsMS40LTEuNSwxLjRIOTUNCgljLTEuMiwwLTEuNS0wLjQtMS41LTEuNUw5My42LDQ1eiBNNDE5LjcsMGg0My40YzEuMiwwLDEuNiwwLjIsMS42LDEuNXY4Ny4xYzAsMS4yLTAuMywxLjUtMS41LDEuNUgzNzZjLTEuMSwwLTEuNS0wLjMtMS41LTEuNFYxLjUNCgljMC0xLjIsMC4zLTEuNCwxLjUtMS40QzM3NiwwLjEsNDE5LjcsMCw0MTkuNywweiBNMjc3LjMsNDUuMXY0My4zYzAsMS42LDAsMS42LTEuNiwxLjZoLTg2LjhjLTEuNywwLTEuNywwLTEuNy0xLjZWMS41DQoJYzAtMS4yLDAuMy0xLjUsMS41LTEuNWg4Ny4yYzEuMiwwLDEuNCwwLjQsMS40LDEuNUwyNzcuMyw0NS4xTDI3Ny4zLDQ1LjF6IE0yODAuOSw0NC45VjEuNGMwLTEuMSwwLjMtMS41LDEuNC0xLjVoODcuMg0KCWMxLjMsMCwxLjUsMC40LDEuNSwxLjZ2ODYuOWMwLDEuNiwwLDEuNi0xLjUsMS42aC04N2MtMS4xLDAtMS41LTAuMy0xLjUtMS40TDI4MC45LDQ0Ljl6Ii8+DQo8L3N2Zz4NCg==',
+  custom:
+    'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTU4LjIgMTgzLjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU1OC4yIDE4My42OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzE1NjVDMDt9Cgkuc3Qxe2ZpbGw6bm9uZTtzdHJva2U6IzE1NjVDMDtzdHJva2Utd2lkdGg6Nzt9Cgkuc3Qye2ZpbGw6I0NDQ0NDQzt9Cjwvc3R5bGU+CjwhLS0gR3JleSBzcXVhcmVzIGluIHRvcCByb3cgd2l0aCAxMHB4IHBhZGRpbmcgLS0+CjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBjbGFzcz0ic3QyIi8+CjxyZWN0IHg9IjEwMy42IiB5PSIxMCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBjbGFzcz0ic3QyIi8+CjxyZWN0IHg9IjE5Ny4yIiB5PSIxMCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBjbGFzcz0ic3QyIi8+CjxyZWN0IHg9IjI5MC45IiB5PSIxMCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBjbGFzcz0ic3QyIi8+CjxyZWN0IHg9IjM4NC41IiB5PSIxMCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBjbGFzcz0ic3QyIi8+CjxyZWN0IHg9IjQ3OCIgeT0iMTAiIHdpZHRoPSI3MC4yIiBoZWlnaHQ9IjgwIiBjbGFzcz0ic3QyIi8+Cgo8IS0tIEdyZXkgc3F1YXJlcyBpbiBib3R0b20gcm93IHdpdGggMTBweCBwYWRkaW5nIC0tPgo8cmVjdCB4PSIxMCIgeT0iOTMuNiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBjbGFzcz0ic3QyIi8+CjxyZWN0IHg9IjEwMy42IiB5PSI5My42IiB3aWR0aD0iODAiIGhlaWdodD0iODAiIGNsYXNzPSJzdDIiLz4KPHJlY3QgeD0iMTk3LjIiIHk9IjkzLjYiIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCIgY2xhc3M9InN0MiIvPgo8cmVjdCB4PSIyOTAuOSIgeT0iOTMuNiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBjbGFzcz0ic3QyIi8+CjxyZWN0IHg9IjM4NC41IiB5PSI5My42IiB3aWR0aD0iODAiIGhlaWdodD0iODAiIGNsYXNzPSJzdDIiLz4KPHJlY3QgeD0iNDc4IiB5PSI5My42IiB3aWR0aD0iNzAuMiIgaGVpZ2h0PSI4MCIgY2xhc3M9InN0MiIvPgoKPCEtLSBCb3JkZXIgLS0+CjxyZWN0IHg9IjEuNSIgeT0iMS41IiB3aWR0aD0iNTU1LjIiIGhlaWdodD0iMTgwLjYiIGNsYXNzPSJzdDEiLz4KCjwhLS0gVGV4dCAtLT4KPHRleHQgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGNsYXNzPSJzdDAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI3MiIgZm9udC13ZWlnaHQ9ImJvbGQiPmN1c3RvbTwvdGV4dD4KPC9zdmc+',
 };
 
 //
@@ -2876,10 +2969,14 @@ var script$1 = {
       type: Number,
       default: 1,
     },
-    maxShift: {
+    maxShift: { 
       type: Number,
       default: 20,
     },
+    customGridSize: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -2891,7 +2988,8 @@ var script$1 = {
         date: null,
       },
       shiftFramesValue: this.shiftFrames,
-      items: [
+
+      /* items: [
         { text: '1x1', value: 1, image: GridImages['1x1'] },
         { text: '2x1', value: 2, image: GridImages['2x1'] },
         { text: '3x1', value: 3, image: GridImages['3x1'] },
@@ -2902,19 +3000,58 @@ var script$1 = {
         { text: '5x2', value: 8, image: GridImages['5x2'] },
         { text: '6x1', value: 9, image: GridImages['6x1'] },
         { text: '6x2', value: 10, image: GridImages['6x2'] },
-      ],
+        {
+          text: 'custom',
+          value: 11,
+          image: GridImages['custom'],
+        },
+      ], */
       debouncedShiftFrames: null,
       // NEW
       goToValue: '',
+      customNumberOfRows: this.numberOfRows,
+      customFramesPerRow: this.framesPerRow,
+      showCustomInputs: false,
+      isCustomMode: false,
     }
   },
   mounted() {
     this.debouncedShiftFrames = debounce(function () {
       this.$emit('change-shift-frames', parseInt(this.shiftFramesValue));
     }, 350);
+    this.customNumberOfRows = this.numberOfRows;
+    this.customFramesPerRow = this.framesPerRow;
+    if (this.framesValue === 11) {
+      this.isCustomMode = true;
+      this.showCustomInputs = true;
+    }
     this.toogleDialogs();
   },
   computed: {
+    items() {
+      const baseItems = [
+        { text: '1x1', value: 1, image: GridImages['1x1'] },
+        { text: '2x1', value: 2, image: GridImages['2x1'] },
+        { text: '3x1', value: 3, image: GridImages['3x1'] },
+        { text: '3x2', value: 4, image: GridImages['3x2'] },
+        { text: '4x1', value: 5, image: GridImages['4x1'] },
+        { text: '4x2', value: 6, image: GridImages['4x2'] },
+        { text: '5x1', value: 7, image: GridImages['5x1'] },
+        { text: '5x2', value: 8, image: GridImages['5x2'] },
+        { text: '6x1', value: 9, image: GridImages['6x1'] },
+        { text: '6x2', value: 10, image: GridImages['6x2'] },
+      ];
+
+      if (this.customGridSize) {
+        baseItems.push({
+          text: 'custom',
+          value: 11,
+          image: GridImages['custom'],
+        });
+      }
+
+      return baseItems
+    },
     isOpen() {
       return !!Object.keys(this.dialogsVisibility).find(
         (key) => this.dialogsVisibility[key]
@@ -2940,12 +3077,33 @@ var script$1 = {
     },
     framesValue: {
       get() {
-        return this.items.find(
-          (item) => item.text === `${this.framesPerRow}x${this.numberOfRows}`
-        ).value
+        if (this.isCustomMode) {
+          return 11
+        }
+        const preset = this.items.find(
+          (item) =>
+            item.value !== 11 &&
+            item.text === `${this.framesPerRow}x${this.numberOfRows}`
+        );
+
+        return preset ? preset.value : 11
       },
       set(value) {
-        this.$emit('set-frames-selection', value);
+        if (parseInt(value) === 11) {
+          this.isCustomMode = true;
+          this.showCustomInputs = true;
+
+          this.$nextTick(() => {
+            this.$emit('set-custom-grid-values', [
+              parseInt(this.customNumberOfRows),
+              parseInt(this.customFramesPerRow),
+            ]);
+          });
+        } else {
+          this.isCustomMode = false;
+          this.showCustomInputs = false;
+          this.$emit('set-frames-selection', value);
+        }
       },
     },
     timeRules() {
@@ -3031,6 +3189,25 @@ var script$1 = {
       this.openBlocksDialog = false;
       this.$emit('goToBlockInterval', this.rangeBlocks);
     },
+    checkIfCustomGrid() {
+      const hasPreset = this.items.some(
+        (item) =>
+          item.value !== 11 &&
+          item.text === `${this.framesPerRow}x${this.numberOfRows}`
+      );
+
+      if (!hasPreset) {
+        this.showCustomInputs = true;
+        this.customNumberOfRows = this.numberOfRows;
+        this.customFramesPerRow = this.framesPerRow;
+      }
+    },
+    validateCustomInput(value, max = 10) {
+      const num = parseInt(value);
+      if (isNaN(num) || num < 1) return 1
+      if (num > max) return max
+      return num
+    },
   },
   watch: {
     dialogsVisibility: {
@@ -3039,6 +3216,35 @@ var script$1 = {
       },
       deep: true,
     },
+    customFramesPerRow(newVal) {
+      if (this.isCustomMode && newVal && parseInt(newVal) > 0) {
+        this.$emit('set-custom-grid-values', [
+          parseInt(this.customNumberOfRows),
+          parseInt(newVal),
+        ]);
+      }
+    },
+
+    customNumberOfRows(newVal) {
+      if (this.isCustomMode && newVal && parseInt(newVal) > 0) {
+        this.$emit('set-custom-grid-values', [
+          parseInt(newVal),
+          parseInt(this.customFramesPerRow),
+        ]);
+      }
+    },
+
+    numberOfRows(newVal) {
+      if (!this.isCustomMode) {
+        this.customNumberOfRows = newVal;
+      }
+    },
+
+    framesPerRow(newVal) {
+      if (!this.isCustomMode) {
+        this.customFramesPerRow = newVal;
+      }
+    },
   },
 };
 
@@ -3151,6 +3357,102 @@ var __vue_render__$1 = function () {
           0
         ),
         _vm._v(" "),
+        _vm.showCustomInputs
+          ? _c(
+              "div",
+              {
+                staticStyle: {
+                  display: "flex",
+                  "justify-content": "center",
+                  "align-items": "center",
+                  color: "#333",
+                  gap: "8px",
+                },
+              },
+              [
+                _c("span", [
+                  _c("input", {
+                    directives: [
+                      {
+                        name: "model",
+                        rawName: "v-model.number",
+                        value: _vm.customFramesPerRow,
+                        expression: "customFramesPerRow",
+                        modifiers: { number: true },
+                      },
+                    ],
+                    staticStyle: {
+                      height: "30px",
+                      width: "50px",
+                      border: "0.1px solid #c2c9d6",
+                      "border-radius": "3px",
+                      padding: "3px",
+                    },
+                    attrs: {
+                      type: "number",
+                      min: "1",
+                      max: "15",
+                      placeholder: _vm.customFramesPerRow,
+                    },
+                    domProps: { value: _vm.customFramesPerRow },
+                    on: {
+                      input: function ($event) {
+                        if ($event.target.composing) {
+                          return
+                        }
+                        _vm.customFramesPerRow = _vm._n($event.target.value);
+                      },
+                      blur: function ($event) {
+                        return _vm.$forceUpdate()
+                      },
+                    },
+                  }),
+                  _vm._v("\n        Frames por"),
+                ]),
+                _vm._v(" "),
+                _c("span", [
+                  _c("input", {
+                    directives: [
+                      {
+                        name: "model",
+                        rawName: "v-model.number",
+                        value: _vm.customNumberOfRows,
+                        expression: "customNumberOfRows",
+                        modifiers: { number: true },
+                      },
+                    ],
+                    staticStyle: {
+                      height: "30px",
+                      width: "50px",
+                      border: "0.1px solid #c2c9d6",
+                      "border-radius": "3px",
+                      padding: "5px",
+                    },
+                    attrs: {
+                      type: "number",
+                      min: "1",
+                      max: "10",
+                      placeholder: _vm.customNumberOfRows,
+                    },
+                    domProps: { value: _vm.customNumberOfRows },
+                    on: {
+                      input: function ($event) {
+                        if ($event.target.composing) {
+                          return
+                        }
+                        _vm.customNumberOfRows = _vm._n($event.target.value);
+                      },
+                      blur: function ($event) {
+                        return _vm.$forceUpdate()
+                      },
+                    },
+                  }),
+                  _vm._v("\n        Linhas"),
+                ]),
+              ]
+            )
+          : _vm._e(),
+        _vm._v(" "),
         _c("div", { staticClass: "visualization-divider" }),
         _vm._v(" "),
         _c(
@@ -3730,11 +4032,11 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-2212eda6_0", { source: "\ndialog[data-v-2212eda6] {\r\n  max-width: 60vw;\r\n  /* padding: 12px; */\r\n  border: none;\r\n  background: white;\r\n  border-radius: 6px;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translateY(-50%) translateX(-50%);\n}\n.visualization-row[data-v-2212eda6] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-2212eda6] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\n}\r\n", map: {"version":3,"sources":["C:\\Workspace\\visualization\\src\\components\\Settings.vue"],"names":[],"mappings":";AAgjBA;EACA,eAAA;EACA,mBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA;mCACA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,4CAAA;AACA;AACA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA","file":"Settings.vue","sourcesContent":["<template>\r\n  <div>\r\n    <GlobalEvents v-if=\"isOpen\" @keydown.27=\"close\" @keydown.13=\"close\" />\r\n    <GlobalEvents\r\n      v-if=\"dialogsVisibility.frames\"\r\n      @keydown.37=\"prevFormat\"\r\n      @keydown.39=\"nextFormat\"\r\n    />\r\n    <!-- Formato da grelha -->\r\n    <dialog ref=\"frames\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 40px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 10px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.gridForm') }}\r\n      </div>\r\n      <div class=\"visualization-row\" style=\"justify-content: center\">\r\n        <div\r\n          v-for=\"(item, index) in items\"\r\n          :key=\"index\"\r\n          class=\"visualization-col\"\r\n          style=\"min-width: 200px; max-width: 200px\"\r\n        >\r\n          <img\r\n            @click=\"() => (framesValue = item.value)\"\r\n            :src=\"`data:image/svg+xml;base64,${item.image}`\"\r\n            width=\"100%\"\r\n            :style=\"framesValue !== item.value ? 'filter: grayscale(1)' : ''\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div class=\"visualization-divider\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n          @click=\"$emit('close', 'frames')\"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Frequencia das Imagens -->\r\n    <dialog ref=\"secondsPerFrame\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 40px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 10px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.secondImage') + ' (1-' + maxSteps + ')' }}\r\n      </div>\r\n\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          margin: 25px;\r\n          display: flex;\r\n          align-items: center;\r\n          height: 60px;\r\n          border-radius: 8px;\r\n          padding: 0 20px;\r\n        \"\r\n      >\r\n        <input\r\n          ref=\"secondsPerFrameInput\"\r\n          v-model.number=\"secondsPerFrameValue\"\r\n          type=\"number\"\r\n          step=\"1\"\r\n          :max=\"maxSteps\"\r\n          min=\"1\"\r\n          style=\"\r\n            height: 40px;\r\n            width: 100px;\r\n            padding: 5px 10px;\r\n            font-size: 16px;\r\n            border: 1px solid #ccc;\r\n            border-radius: 4px;\r\n            box-sizing: border-box;\r\n            flex: 1;\r\n          \"\r\n          @input=\"validateInput\"\r\n        />\r\n        <span style=\"padding-left: 20px; font-size: 16px; color: #333\">\r\n          {{ secondsPerFrame + ' s' }}\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"visualization-divider\" style=\"margin: 10px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"display: flex; justify-content: center; margin-top: 10px\"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n            margin-bottom: 8px;\r\n          \"\r\n          @click=\"$emit('close', 'secondsPerFrame')\"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Go To -->\r\n    <dialog ref=\"goTo\">\r\n      <div\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 35px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 8px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.goTo') }}\r\n      </div>\r\n      <div class=\"visualization-row\" style=\"margin: 25px; height: 20px\">\r\n        <input\r\n          v-model=\"goToValue\"\r\n          type=\"text\"\r\n          placeholder=\"hh:mm:ss\"\r\n          v-mask=\"'##:##:##'\"\r\n          style=\"\r\n            height: 30px;\r\n            width: 300px;\r\n            border: 0.1px solid #c2c9d6;\r\n            border-radius: 3px;\r\n            padding: 5px;\r\n          \"\r\n        />\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n          @click=\"\r\n            () => {\r\n              $emit('close', 'goTo')\r\n              $emit('change-go-to', goToValue)\r\n              goToValue = ''\r\n            }\r\n          \"\r\n        >\r\n          Ok\r\n        </button>\r\n        <GlobalEvents\r\n          @keydown.13.prevent=\"\r\n            () => {\r\n              $emit('close', 'goTo')\r\n              $emit('change-go-to', goToValue)\r\n              goToValue = ''\r\n            }\r\n          \"\r\n        />\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Velocidade Reprodução -->\r\n    <GlobalEvents\r\n      @keydown.107=\"changePlaybackRate(1)\"\r\n      @keydown.109=\"changePlaybackRate(-1)\"\r\n    />\r\n    <dialog ref=\"playbackRate\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 35px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 8px;\r\n        \"\r\n      >\r\n        {{ $t('infoBar.playbackSpeed') }}\r\n      </div>\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"margin: 25px; height: 20px; width: 380px\"\r\n      >\r\n        <input\r\n          ref=\"playbackRateInput\"\r\n          v-model=\"playbackRateValue\"\r\n          type=\"range\"\r\n          step=\"0.25\"\r\n          max=\"3\"\r\n          min=\"1\"\r\n          style=\"height: 30px; width: 300px\"\r\n        />\r\n        <span\r\n          style=\"padding-left: 20px; padding-right: 20px; font-size: 16px\"\r\n          >{{ playbackRate + 'x' }}</span\r\n        >\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \"\r\n      >\r\n        <button\r\n          @click=\"$emit('close', 'playbackRate')\"\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Deslocamento das Imagens -->\r\n    <dialog ref=\"shiftFrames\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 40px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 10px;\r\n        \"\r\n      >\r\n        {{ `${$t('infoBar.shiftFrames')} (${maxShift * -1} - ${maxShift})` }}\r\n      </div>\r\n\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          margin: 25px;\r\n          display: flex;\r\n          align-items: center;\r\n          height: 60px;\r\n          border-radius: 8px;\r\n          padding: 0 20px;\r\n        \"\r\n      >\r\n        <input\r\n          ref=\"shiftFramesInput\"\r\n          v-model.number=\"shiftFramesValue\"\r\n          type=\"number\"\r\n          step=\"1\"\r\n          :max=\"maxShift\"\r\n          :min=\"maxShift * -1\"\r\n          style=\"\r\n            height: 40px;\r\n            width: 100px;\r\n            padding: 5px 10px;\r\n            font-size: 16px;\r\n            border: 1px solid #ccc;\r\n            border-radius: 4px;\r\n            box-sizing: border-box;\r\n            flex: 1;\r\n          \"\r\n          @input=\"validateShift\"\r\n        />\r\n        <span style=\"padding-left: 20px; font-size: 16px; color: #333\">\r\n          {{ shiftFrames + ' s' }}\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"visualization-divider\" style=\"margin: 10px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"display: flex; justify-content: center; margin-top: 10px\"\r\n      >\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n            margin-bottom: 8px;\r\n          \"\r\n          @click=\"$emit('close', 'shiftFrames')\"\r\n        >\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n  </div>\r\n</template>\r\n<script>\r\nimport GridImages from '../assets/grid/index.js'\r\nimport { debounce } from 'lodash'\r\n\r\nexport default {\r\n  props: {\r\n    dialogsVisibility: {\r\n      type: Object,\r\n      required: false,\r\n    },\r\n    playbackRate: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    secondsPerFrame: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    framesPerRow: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    numberOfRows: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    shiftFrames: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    maxSteps: {\r\n      type: Number,\r\n      default: 1,\r\n    },\r\n    maxShift: {\r\n      type: Number,\r\n      default: 20,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      openBlocksDialog: false,\r\n      time: '',\r\n      rangeBlocks: {\r\n        ini: null,\r\n        end: null,\r\n        date: null,\r\n      },\r\n      shiftFramesValue: this.shiftFrames,\r\n      items: [\r\n        { text: '1x1', value: 1, image: GridImages['1x1'] },\r\n        { text: '2x1', value: 2, image: GridImages['2x1'] },\r\n        { text: '3x1', value: 3, image: GridImages['3x1'] },\r\n        { text: '3x2', value: 4, image: GridImages['3x2'] },\r\n        { text: '4x1', value: 5, image: GridImages['4x1'] },\r\n        { text: '4x2', value: 6, image: GridImages['4x2'] },\r\n        { text: '5x1', value: 7, image: GridImages['5x1'] },\r\n        { text: '5x2', value: 8, image: GridImages['5x2'] },\r\n        { text: '6x1', value: 9, image: GridImages['6x1'] },\r\n        { text: '6x2', value: 10, image: GridImages['6x2'] },\r\n      ],\r\n      debouncedShiftFrames: null,\r\n      // NEW\r\n      goToValue: '',\r\n    }\r\n  },\r\n  mounted() {\r\n    this.debouncedShiftFrames = debounce(function () {\r\n      this.$emit('change-shift-frames', parseInt(this.shiftFramesValue))\r\n    }, 350)\r\n    this.toogleDialogs()\r\n  },\r\n  computed: {\r\n    isOpen() {\r\n      return !!Object.keys(this.dialogsVisibility).find(\r\n        (key) => this.dialogsVisibility[key]\r\n      )\r\n    },\r\n    secondsPerFrameValue: {\r\n      get() {\r\n        return this.secondsPerFrame\r\n      },\r\n      set(val) {\r\n        if (+val > 0 && +val <= this.maxSteps) {\r\n          this.$emit('change-seconds-per-frame', parseInt(val))\r\n        }\r\n      },\r\n    },\r\n    playbackRateValue: {\r\n      get() {\r\n        return this.playbackRate\r\n      },\r\n      set(val) {\r\n        this.$emit('change-playback-rate', parseFloat(val))\r\n      },\r\n    },\r\n    framesValue: {\r\n      get() {\r\n        return this.items.find(\r\n          (item) => item.text === `${this.framesPerRow}x${this.numberOfRows}`\r\n        ).value\r\n      },\r\n      set(value) {\r\n        this.$emit('set-frames-selection', value)\r\n      },\r\n    },\r\n    timeRules() {\r\n      return [\r\n        (time) =>\r\n          (time >= '02:30:00' && time <= '26:29:59') ||\r\n          this.$i18n.t('form.mustBeBetween'),\r\n      ]\r\n    },\r\n  },\r\n  methods: {\r\n    validateInput() {\r\n      if (parseInt(this.$refs.secondsPerFrameInput.value) < 1) {\r\n        this.$refs.secondsPerFrameInput.value = this.secondsPerFrameValue\r\n      } else if (\r\n        parseInt(this.$refs.secondsPerFrameInput.value) > this.maxSteps\r\n      ) {\r\n        this.$refs.secondsPerFrameInput.value = this.secondsPerFrameValue\r\n      }\r\n    },\r\n    validateShift() {\r\n      if (parseInt(this.shiftFramesValue) < this.maxShift * -1) {\r\n        this.shiftFramesValue = this.shiftFrames\r\n      } else if (parseInt(this.shiftFramesValue) > this.maxShift) {\r\n        this.shiftFramesValue = this.shiftFrames\r\n      }\r\n\r\n      this.debouncedShiftFrames()\r\n    },\r\n    close() {\r\n      const openDialog = Object.keys(this.dialogsVisibility).find(\r\n        (key) => this.dialogsVisibility[key]\r\n      )\r\n      this.$emit('close', openDialog)\r\n    },\r\n    toogleDialogs() {\r\n      for (const dialog of Object.values(this.$refs)) {\r\n        dialog.close?.()\r\n      }\r\n\r\n      const openDialog = Object.keys(this.dialogsVisibility).find(\r\n        (key) => this.dialogsVisibility[key]\r\n      )\r\n\r\n      if (openDialog) {\r\n        this.$refs[openDialog].showModal()\r\n      }\r\n    },\r\n    prevFormat() {\r\n      if (this.items.find((format) => format.value === this.framesValue - 1)) {\r\n        this.framesValue--\r\n      }\r\n    },\r\n    nextFormat() {\r\n      if (this.items.find((format) => format.value === this.framesValue + 1)) {\r\n        this.framesValue++\r\n      }\r\n    },\r\n    changePlaybackRate(direction = 1) {\r\n      if (direction === 1) {\r\n        this.$refs.playbackRateInput.stepUp()\r\n      } else if (direction === -1) {\r\n        this.$refs.playbackRateInput.stepDown()\r\n      }\r\n      this.playbackRateValue = this.$refs.playbackRateInput.value\r\n    },\r\n    closeBlocksDialog() {\r\n      Object.entries(this.rangeBlocks).forEach(([key, value]) => {\r\n        if (!value || key == 'date') return\r\n        var res = value.replace(/\\D/g, '')\r\n        if (res.length < 6) {\r\n          for (let i = res.length; i < 6; i++) {\r\n            res += '0'\r\n          }\r\n        }\r\n        res.match(/.{1,2}/g)\r\n        let a = res.substring(0, 2)\r\n        let b = res.substring(2, 4)\r\n        let c = res.substring(4, 6)\r\n        this.rangeBlocks[key] = a + ':' + b + ':' + c\r\n      })\r\n\r\n      this.openBlocksDialog = false\r\n      this.$emit('goToBlockInterval', this.rangeBlocks)\r\n    },\r\n  },\r\n  watch: {\r\n    dialogsVisibility: {\r\n      handler() {\r\n        this.toogleDialogs()\r\n      },\r\n      deep: true,\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\ndialog {\r\n  max-width: 60vw;\r\n  /* padding: 12px; */\r\n  border: none;\r\n  background: white;\r\n  border-radius: 6px;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translateY(-50%) translateX(-50%);\r\n}\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n</style>\r\n"]}, media: undefined });
+    inject("data-v-6d1063b7_0", { source: "\ndialog[data-v-6d1063b7] {\r\n  max-width: 60vw;\r\n  /* padding: 12px; */\r\n  border: none;\r\n  background: white;\r\n  border-radius: 6px;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translateY(-50%) translateX(-50%);\n}\n.visualization-row[data-v-6d1063b7] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-6d1063b7] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\n}\r\n", map: {"version":3,"sources":["C:\\Workspace\\visualization\\src\\components\\Settings.vue"],"names":[],"mappings":";AAgrBA;EACA,eAAA;EACA,mBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA;mCACA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,4CAAA;AACA;AACA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA","file":"Settings.vue","sourcesContent":["<template>\r\n  <div>\r\n    <GlobalEvents v-if=\"isOpen\" @keydown.27=\"close\" @keydown.13=\"close\" />\r\n    <GlobalEvents\r\n      v-if=\"dialogsVisibility.frames\"\r\n      @keydown.37=\"prevFormat\"\r\n      @keydown.39=\"nextFormat\" />\r\n    <!-- Formato da grelha -->\r\n    <dialog ref=\"frames\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 40px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 10px;\r\n        \">\r\n        {{ $t('infoBar.gridForm') }}\r\n      </div>\r\n      <div class=\"visualization-row\" style=\"justify-content: center\">\r\n        <div\r\n          v-for=\"(item, index) in items\"\r\n          :key=\"index\"\r\n          class=\"visualization-col\"\r\n          style=\"min-width: 200px; max-width: 200px\">\r\n          <img\r\n            @click=\"() => (framesValue = item.value)\"\r\n            :src=\"`data:image/svg+xml;base64,${item.image}`\"\r\n            width=\"100%\"\r\n            :style=\"framesValue !== item.value ? 'filter: grayscale(1)' : ''\" />\r\n        </div>\r\n      </div>\r\n      <div\r\n        v-if=\"showCustomInputs\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          align-items: center;\r\n          color: #333;\r\n          gap: 8px;\r\n        \">\r\n        <span>\r\n          <input\r\n            v-model.number=\"customFramesPerRow\"\r\n            type=\"number\"\r\n            min=\"1\"\r\n            max=\"15\"\r\n            :placeholder=\"customFramesPerRow\"\r\n            style=\"\r\n              height: 30px;\r\n              width: 50px;\r\n              border: 0.1px solid #c2c9d6;\r\n              border-radius: 3px;\r\n              padding: 3px;\r\n            \" />\r\n          Frames por</span\r\n        >\r\n        <span>\r\n          <input\r\n            v-model.number=\"customNumberOfRows\"\r\n            type=\"number\"\r\n            min=\"1\"\r\n            max=\"10\"\r\n            :placeholder=\"customNumberOfRows\"\r\n            style=\"\r\n              height: 30px;\r\n              width: 50px;\r\n              border: 0.1px solid #c2c9d6;\r\n              border-radius: 3px;\r\n              padding: 5px;\r\n            \" />\r\n          Linhas</span\r\n        >\r\n      </div>\r\n      <div class=\"visualization-divider\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \">\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n          @click=\"$emit('close', 'frames')\">\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Frequencia das Imagens -->\r\n    <dialog ref=\"secondsPerFrame\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 40px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 10px;\r\n        \">\r\n        {{ $t('infoBar.secondImage') + ' (1-' + maxSteps + ')' }}\r\n      </div>\r\n\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          margin: 25px;\r\n          display: flex;\r\n          align-items: center;\r\n          height: 60px;\r\n          border-radius: 8px;\r\n          padding: 0 20px;\r\n        \">\r\n        <input\r\n          ref=\"secondsPerFrameInput\"\r\n          v-model.number=\"secondsPerFrameValue\"\r\n          type=\"number\"\r\n          step=\"1\"\r\n          :max=\"maxSteps\"\r\n          min=\"1\"\r\n          style=\"\r\n            height: 40px;\r\n            width: 100px;\r\n            padding: 5px 10px;\r\n            font-size: 16px;\r\n            border: 1px solid #ccc;\r\n            border-radius: 4px;\r\n            box-sizing: border-box;\r\n            flex: 1;\r\n          \"\r\n          @input=\"validateInput\" />\r\n        <span style=\"padding-left: 20px; font-size: 16px; color: #333\">\r\n          {{ secondsPerFrame + ' s' }}\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"visualization-divider\" style=\"margin: 10px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"display: flex; justify-content: center; margin-top: 10px\">\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n            margin-bottom: 8px;\r\n          \"\r\n          @click=\"$emit('close', 'secondsPerFrame')\">\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Go To -->\r\n    <dialog ref=\"goTo\">\r\n      <div\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 35px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 8px;\r\n        \">\r\n        {{ $t('infoBar.goTo') }}\r\n      </div>\r\n      <div class=\"visualization-row\" style=\"margin: 25px; height: 20px\">\r\n        <input\r\n          v-model=\"goToValue\"\r\n          type=\"text\"\r\n          placeholder=\"hh:mm:ss\"\r\n          v-mask=\"'##:##:##'\"\r\n          style=\"\r\n            height: 30px;\r\n            width: 300px;\r\n            border: 0.1px solid #c2c9d6;\r\n            border-radius: 3px;\r\n            padding: 5px;\r\n          \" />\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \">\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \"\r\n          @click=\"\r\n            () => {\r\n              $emit('close', 'goTo')\r\n              $emit('change-go-to', goToValue)\r\n              goToValue = ''\r\n            }\r\n          \">\r\n          Ok\r\n        </button>\r\n        <GlobalEvents\r\n          @keydown.13.prevent=\"\r\n            () => {\r\n              $emit('close', 'goTo')\r\n              $emit('change-go-to', goToValue)\r\n              goToValue = ''\r\n            }\r\n          \" />\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Velocidade Reprodução -->\r\n    <GlobalEvents\r\n      @keydown.107=\"changePlaybackRate(1)\"\r\n      @keydown.109=\"changePlaybackRate(-1)\" />\r\n    <dialog ref=\"playbackRate\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 35px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 8px;\r\n        \">\r\n        {{ $t('infoBar.playbackSpeed') }}\r\n      </div>\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"margin: 25px; height: 20px; width: 380px\">\r\n        <input\r\n          ref=\"playbackRateInput\"\r\n          v-model=\"playbackRateValue\"\r\n          type=\"range\"\r\n          step=\"0.25\"\r\n          max=\"3\"\r\n          min=\"1\"\r\n          style=\"height: 30px; width: 300px\" />\r\n        <span\r\n          style=\"padding-left: 20px; padding-right: 20px; font-size: 16px\"\r\n          >{{ playbackRate + 'x' }}</span\r\n        >\r\n      </div>\r\n      <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          display: flex;\r\n          justify-content: center;\r\n          margin-top: 10px;\r\n          margin-bottom: 10px;\r\n        \">\r\n        <button\r\n          @click=\"$emit('close', 'playbackRate')\"\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n          \">\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n\r\n    <!-- Deslocamento das Imagens -->\r\n    <dialog ref=\"shiftFrames\">\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          padding: 5px;\r\n          font-weight: bold;\r\n          background-color: var(--visualization-primary);\r\n          border-color: var(--visualization-primary);\r\n          height: 40px;\r\n          color: white;\r\n          display: flex;\r\n          justify-content: center;\r\n          padding-top: 10px;\r\n        \">\r\n        {{ `${$t('infoBar.shiftFrames')} (${maxShift * -1} - ${maxShift})` }}\r\n      </div>\r\n\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"\r\n          margin: 25px;\r\n          display: flex;\r\n          align-items: center;\r\n          height: 60px;\r\n          border-radius: 8px;\r\n          padding: 0 20px;\r\n        \">\r\n        <input\r\n          ref=\"shiftFramesInput\"\r\n          v-model.number=\"shiftFramesValue\"\r\n          type=\"number\"\r\n          step=\"1\"\r\n          :max=\"maxShift\"\r\n          :min=\"maxShift * -1\"\r\n          style=\"\r\n            height: 40px;\r\n            width: 100px;\r\n            padding: 5px 10px;\r\n            font-size: 16px;\r\n            border: 1px solid #ccc;\r\n            border-radius: 4px;\r\n            box-sizing: border-box;\r\n            flex: 1;\r\n          \"\r\n          @input=\"validateShift\" />\r\n        <span style=\"padding-left: 20px; font-size: 16px; color: #333\">\r\n          {{ shiftFrames + ' s' }}\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"visualization-divider\" style=\"margin: 10px\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        style=\"display: flex; justify-content: center; margin-top: 10px\">\r\n        <button\r\n          style=\"\r\n            border-radius: 4px;\r\n            height: 35px;\r\n            width: 70px;\r\n            background-color: var(--visualization-primary);\r\n            border-color: var(--visualization-primary);\r\n            color: white;\r\n            margin-bottom: 8px;\r\n          \"\r\n          @click=\"$emit('close', 'shiftFrames')\">\r\n          Ok\r\n        </button>\r\n      </div>\r\n    </dialog>\r\n  </div>\r\n</template>\r\n<script>\r\nimport GridImages from '../assets/grid/index.js'\r\nimport { debounce } from 'lodash'\r\n\r\nexport default {\r\n  props: {\r\n    dialogsVisibility: {\r\n      type: Object,\r\n      required: false,\r\n    },\r\n    playbackRate: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    secondsPerFrame: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    framesPerRow: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    numberOfRows: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    shiftFrames: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    maxSteps: {\r\n      type: Number,\r\n      default: 1,\r\n    },\r\n    maxShift: { \r\n      type: Number,\r\n      default: 20,\r\n    },\r\n    customGridSize: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      openBlocksDialog: false,\r\n      time: '',\r\n      rangeBlocks: {\r\n        ini: null,\r\n        end: null,\r\n        date: null,\r\n      },\r\n      shiftFramesValue: this.shiftFrames,\r\n\r\n      /* items: [\r\n        { text: '1x1', value: 1, image: GridImages['1x1'] },\r\n        { text: '2x1', value: 2, image: GridImages['2x1'] },\r\n        { text: '3x1', value: 3, image: GridImages['3x1'] },\r\n        { text: '3x2', value: 4, image: GridImages['3x2'] },\r\n        { text: '4x1', value: 5, image: GridImages['4x1'] },\r\n        { text: '4x2', value: 6, image: GridImages['4x2'] },\r\n        { text: '5x1', value: 7, image: GridImages['5x1'] },\r\n        { text: '5x2', value: 8, image: GridImages['5x2'] },\r\n        { text: '6x1', value: 9, image: GridImages['6x1'] },\r\n        { text: '6x2', value: 10, image: GridImages['6x2'] },\r\n        {\r\n          text: 'custom',\r\n          value: 11,\r\n          image: GridImages['custom'],\r\n        },\r\n      ], */\r\n      debouncedShiftFrames: null,\r\n      // NEW\r\n      goToValue: '',\r\n      customNumberOfRows: this.numberOfRows,\r\n      customFramesPerRow: this.framesPerRow,\r\n      showCustomInputs: false,\r\n      isCustomMode: false,\r\n    }\r\n  },\r\n  mounted() {\r\n    this.debouncedShiftFrames = debounce(function () {\r\n      this.$emit('change-shift-frames', parseInt(this.shiftFramesValue))\r\n    }, 350)\r\n    this.customNumberOfRows = this.numberOfRows\r\n    this.customFramesPerRow = this.framesPerRow\r\n    if (this.framesValue === 11) {\r\n      this.isCustomMode = true\r\n      this.showCustomInputs = true\r\n    }\r\n    this.toogleDialogs()\r\n  },\r\n  computed: {\r\n    items() {\r\n      const baseItems = [\r\n        { text: '1x1', value: 1, image: GridImages['1x1'] },\r\n        { text: '2x1', value: 2, image: GridImages['2x1'] },\r\n        { text: '3x1', value: 3, image: GridImages['3x1'] },\r\n        { text: '3x2', value: 4, image: GridImages['3x2'] },\r\n        { text: '4x1', value: 5, image: GridImages['4x1'] },\r\n        { text: '4x2', value: 6, image: GridImages['4x2'] },\r\n        { text: '5x1', value: 7, image: GridImages['5x1'] },\r\n        { text: '5x2', value: 8, image: GridImages['5x2'] },\r\n        { text: '6x1', value: 9, image: GridImages['6x1'] },\r\n        { text: '6x2', value: 10, image: GridImages['6x2'] },\r\n      ]\r\n\r\n      if (this.customGridSize) {\r\n        baseItems.push({\r\n          text: 'custom',\r\n          value: 11,\r\n          image: GridImages['custom'],\r\n        })\r\n      }\r\n\r\n      return baseItems\r\n    },\r\n    isOpen() {\r\n      return !!Object.keys(this.dialogsVisibility).find(\r\n        (key) => this.dialogsVisibility[key]\r\n      )\r\n    },\r\n    secondsPerFrameValue: {\r\n      get() {\r\n        return this.secondsPerFrame\r\n      },\r\n      set(val) {\r\n        if (+val > 0 && +val <= this.maxSteps) {\r\n          this.$emit('change-seconds-per-frame', parseInt(val))\r\n        }\r\n      },\r\n    },\r\n    playbackRateValue: {\r\n      get() {\r\n        return this.playbackRate\r\n      },\r\n      set(val) {\r\n        this.$emit('change-playback-rate', parseFloat(val))\r\n      },\r\n    },\r\n    framesValue: {\r\n      get() {\r\n        if (this.isCustomMode) {\r\n          return 11\r\n        }\r\n        const preset = this.items.find(\r\n          (item) =>\r\n            item.value !== 11 &&\r\n            item.text === `${this.framesPerRow}x${this.numberOfRows}`\r\n        )\r\n\r\n        return preset ? preset.value : 11\r\n      },\r\n      set(value) {\r\n        if (parseInt(value) === 11) {\r\n          this.isCustomMode = true\r\n          this.showCustomInputs = true\r\n\r\n          this.$nextTick(() => {\r\n            this.$emit('set-custom-grid-values', [\r\n              parseInt(this.customNumberOfRows),\r\n              parseInt(this.customFramesPerRow),\r\n            ])\r\n          })\r\n        } else {\r\n          this.isCustomMode = false\r\n          this.showCustomInputs = false\r\n          this.$emit('set-frames-selection', value)\r\n        }\r\n      },\r\n    },\r\n    timeRules() {\r\n      return [\r\n        (time) =>\r\n          (time >= '02:30:00' && time <= '26:29:59') ||\r\n          this.$i18n.t('form.mustBeBetween'),\r\n      ]\r\n    },\r\n  },\r\n  methods: {\r\n    validateInput() {\r\n      if (parseInt(this.$refs.secondsPerFrameInput.value) < 1) {\r\n        this.$refs.secondsPerFrameInput.value = this.secondsPerFrameValue\r\n      } else if (\r\n        parseInt(this.$refs.secondsPerFrameInput.value) > this.maxSteps\r\n      ) {\r\n        this.$refs.secondsPerFrameInput.value = this.secondsPerFrameValue\r\n      }\r\n    },\r\n    validateShift() {\r\n      if (parseInt(this.shiftFramesValue) < this.maxShift * -1) {\r\n        this.shiftFramesValue = this.shiftFrames\r\n      } else if (parseInt(this.shiftFramesValue) > this.maxShift) {\r\n        this.shiftFramesValue = this.shiftFrames\r\n      }\r\n\r\n      this.debouncedShiftFrames()\r\n    },\r\n    close() {\r\n      const openDialog = Object.keys(this.dialogsVisibility).find(\r\n        (key) => this.dialogsVisibility[key]\r\n      )\r\n      this.$emit('close', openDialog)\r\n    },\r\n    toogleDialogs() {\r\n      for (const dialog of Object.values(this.$refs)) {\r\n        dialog.close?.()\r\n      }\r\n\r\n      const openDialog = Object.keys(this.dialogsVisibility).find(\r\n        (key) => this.dialogsVisibility[key]\r\n      )\r\n\r\n      if (openDialog) {\r\n        this.$refs[openDialog].showModal()\r\n      }\r\n    },\r\n    prevFormat() {\r\n      if (this.items.find((format) => format.value === this.framesValue - 1)) {\r\n        this.framesValue--\r\n      }\r\n    },\r\n    nextFormat() {\r\n      if (this.items.find((format) => format.value === this.framesValue + 1)) {\r\n        this.framesValue++\r\n      }\r\n    },\r\n    changePlaybackRate(direction = 1) {\r\n      if (direction === 1) {\r\n        this.$refs.playbackRateInput.stepUp()\r\n      } else if (direction === -1) {\r\n        this.$refs.playbackRateInput.stepDown()\r\n      }\r\n      this.playbackRateValue = this.$refs.playbackRateInput.value\r\n    },\r\n    closeBlocksDialog() {\r\n      Object.entries(this.rangeBlocks).forEach(([key, value]) => {\r\n        if (!value || key == 'date') return\r\n        var res = value.replace(/\\D/g, '')\r\n        if (res.length < 6) {\r\n          for (let i = res.length; i < 6; i++) {\r\n            res += '0'\r\n          }\r\n        }\r\n        res.match(/.{1,2}/g)\r\n        let a = res.substring(0, 2)\r\n        let b = res.substring(2, 4)\r\n        let c = res.substring(4, 6)\r\n        this.rangeBlocks[key] = a + ':' + b + ':' + c\r\n      })\r\n\r\n      this.openBlocksDialog = false\r\n      this.$emit('goToBlockInterval', this.rangeBlocks)\r\n    },\r\n    checkIfCustomGrid() {\r\n      const hasPreset = this.items.some(\r\n        (item) =>\r\n          item.value !== 11 &&\r\n          item.text === `${this.framesPerRow}x${this.numberOfRows}`\r\n      )\r\n\r\n      if (!hasPreset) {\r\n        this.showCustomInputs = true\r\n        this.customNumberOfRows = this.numberOfRows\r\n        this.customFramesPerRow = this.framesPerRow\r\n      }\r\n    },\r\n    validateCustomInput(value, max = 10) {\r\n      const num = parseInt(value)\r\n      if (isNaN(num) || num < 1) return 1\r\n      if (num > max) return max\r\n      return num\r\n    },\r\n  },\r\n  watch: {\r\n    dialogsVisibility: {\r\n      handler() {\r\n        this.toogleDialogs()\r\n      },\r\n      deep: true,\r\n    },\r\n    customFramesPerRow(newVal) {\r\n      if (this.isCustomMode && newVal && parseInt(newVal) > 0) {\r\n        this.$emit('set-custom-grid-values', [\r\n          parseInt(this.customNumberOfRows),\r\n          parseInt(newVal),\r\n        ])\r\n      }\r\n    },\r\n\r\n    customNumberOfRows(newVal) {\r\n      if (this.isCustomMode && newVal && parseInt(newVal) > 0) {\r\n        this.$emit('set-custom-grid-values', [\r\n          parseInt(newVal),\r\n          parseInt(this.customFramesPerRow),\r\n        ])\r\n      }\r\n    },\r\n\r\n    numberOfRows(newVal) {\r\n      if (!this.isCustomMode) {\r\n        this.customNumberOfRows = newVal\r\n      }\r\n    },\r\n\r\n    framesPerRow(newVal) {\r\n      if (!this.isCustomMode) {\r\n        this.customFramesPerRow = newVal\r\n      }\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\ndialog {\r\n  max-width: 60vw;\r\n  /* padding: 12px; */\r\n  border: none;\r\n  background: white;\r\n  border-radius: 6px;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translateY(-50%) translateX(-50%);\r\n}\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n</style>\r\n"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$1 = "data-v-2212eda6";
+  const __vue_scope_id__$1 = "data-v-6d1063b7";
   /* module identifier */
   const __vue_module_identifier__$1 = undefined;
   /* functional template */
@@ -3820,6 +4122,14 @@ var script = {
       type: Number,
       default: 1,
     },
+    customGridSize: {
+      type: Boolean,
+      default: false,
+    },
+    showStretchFrame: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     Frame: __vue_component__$5,
@@ -3879,6 +4189,8 @@ var script = {
       lastPrev: 0,
       shiftFrames: 0,
       aspectRatio: 11 / 9,
+      showCustomInputs: false,
+      stretchFrame: false,
     }
   },
   async created() {
@@ -3926,11 +4238,24 @@ var script = {
         framesPerRow: 6,
         numberOfRows: 2,
       },
+      {
+        //Custom (item 11)
+        framesPerRow: 7,
+        numberOfRows: 3,
+      },
     ];
 
-    const storedOnDb = settings[parseInt(this.framesFormat) - 1];
-    this.framesPerRow = storedOnDb.framesPerRow;
-    this.numberOfRows = storedOnDb.numberOfRows;
+    // Os valores custom são guardados no local storage e não na base de dados
+    const customValues = JSON.parse(localStorage.getItem('customGridValues'));
+
+    if (this.framesFormat == '11' && !!customValues) {
+      this.numberOfRows = customValues[0];
+      this.framesPerRow = customValues[1];
+    } else {
+      const storedOnDb = settings[parseInt(this.framesFormat) - 1];
+      this.framesPerRow = storedOnDb.framesPerRow;
+      this.numberOfRows = storedOnDb.numberOfRows;
+    }
 
     await this.createFramesInterface();
     this.$nextTick(this.resize);
@@ -4183,6 +4508,11 @@ var script = {
           framesPerRow: 6,
           numberOfRows: 2,
         },
+        {
+          //Custom (item 11)
+          framesPerRow: 7,
+          numberOfRows: 3,
+        },
       ];
 
       const formatSelected = settings[selected - 1];
@@ -4194,6 +4524,15 @@ var script = {
       this.$nextTick(this.resize);
       this.$emit('frames-format-changed', selected);
     },
+    async setCustomGridValues(customValues) {
+      this.numberOfRows = customValues[0];
+      this.framesPerRow = customValues[1];
+      localStorage.setItem('customGridValues', JSON.stringify(customValues));
+      await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow);
+      this.getFramesArray();
+      this.$nextTick(this.resize);
+      this.$emit('frames-format-changed', 11);
+    },
     getFramesArray() {
       this.frames = this.fInterface.getFrames(Positions.current);
       this.nextFrames = this.fInterface.getFrames(Positions.next);
@@ -4261,10 +4600,9 @@ var script = {
       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
+      const baseOffset = this.framesPerRow * this.numberOfRows * position;
+      const rowOffset = (rowNumber - 1) * this.framesPerRow;
+      return baseOffset + rowOffset + frameIndex
     },
     getAudienceTime(frameTime, rowNumber, frameNumber, position) {
       if (!frameTime) {
@@ -4399,18 +4737,20 @@ var script = {
       }
     },
     arrowUp() {
-      if (
-        this.activeFrame - this.numberOfRows * this.framesPerRow >=
-        Math.round((this.numberOfRows * this.framesPerRow) / 2)
-      ) {
+      const relativePosition =
+        this.activeFrame - this.numberOfRows * this.framesPerRow;
+      const currentRow = Math.floor(relativePosition / this.framesPerRow);
+      if (currentRow > 0) {
         this.activeFrame -= this.framesPerRow;
       }
     },
+
     arrowDown() {
-      if (
-        this.activeFrame - this.numberOfRows * this.framesPerRow <
-        Math.round((this.numberOfRows * this.framesPerRow) / 2)
-      ) {
+      const relativePosition =
+        this.activeFrame - this.numberOfRows * this.framesPerRow;
+      const currentRow = Math.floor(relativePosition / this.framesPerRow);
+
+      if (currentRow < this.numberOfRows - 1) {
         this.activeFrame += this.framesPerRow;
       }
     },
@@ -4740,6 +5080,9 @@ var script = {
         }
       });
     },
+    stretchFrame() {
+      this.$nextTick(this.resize);
+    },
   },
 };
 
@@ -5052,6 +5395,8 @@ var __vue_render__ = function () {
               "number-of-rows": _vm.numberOfRows,
               "max-steps": _vm.maxSteps,
               "shift-frames": _vm.shiftFrames,
+              customGridSize: _vm.customGridSize,
+              stretchFrames: _vm.stretchFrame,
             },
             on: {
               "change-playback-rate": function (value) {
@@ -5065,6 +5410,7 @@ var __vue_render__ = function () {
                 return (_vm.shiftFrames = value)
               },
               "set-frames-selection": _vm.setFrameSelection,
+              "set-custom-grid-values": _vm.setCustomGridValues,
               close: function (dialog) {
                 return (_vm.dialogs[dialog] = false)
               },
@@ -5152,6 +5498,7 @@ var __vue_render__ = function () {
               "number-of-rows": _vm.numberOfRows,
               "hour-ini": _vm.hourIniSelected,
               "hour-end": _vm.hourEndSelected,
+              "show-stretch-frame": _vm.showStretchFrame,
             },
             on: {
               "toogle-commands-visibility": _vm.toogleCommandsVisibility,
@@ -5159,6 +5506,9 @@ var __vue_render__ = function () {
                 _vm.useCache = !_vm.useCache;
               },
               "change-server": _vm.changeServerClick,
+              "update-stretch-frames": function (value) {
+                return (_vm.stretchFrame = value)
+              },
             },
           }),
           _vm._v(" "),
@@ -5168,7 +5518,7 @@ var __vue_render__ = function () {
               {
                 key: "row-" + rowNumber,
                 staticClass: "visualization-row",
-                staticStyle: { padding: "2px 12px" },
+                staticStyle: { padding: "0px 4px" },
                 attrs: { id: "row-" + rowNumber },
               },
               [
@@ -5221,7 +5571,13 @@ var __vue_render__ = function () {
                     return _c(
                       "div",
                       {
-                        key: "row-" + rowNumber + "-frame-" + frameNumber,
+                        key:
+                          "row-" +
+                          rowNumber +
+                          "-frame-" +
+                          frameNumber +
+                          "-" +
+                          frame.time,
                         staticClass: "visualization-col",
                         class: { loaderImg: !!frame.img },
                         attrs: {
@@ -5306,6 +5662,7 @@ var __vue_render__ = function () {
                             videoControls: _vm.videoControls,
                             "playback-rate": _vm.playbackRate,
                             "aspect-ratio": _vm.aspectRatio,
+                            stretchFrame: _vm.stretchFrame,
                           },
                           on: {
                             startPlaying: _vm.startPlaying,
@@ -5336,11 +5693,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-27fc3944_0", { source: "\n.visualization-row[data-v-27fc3944] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-27fc3944] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\n}\n.visualization-divider[data-v-27fc3944] {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\n}\n.visualization-divider.vertical[data-v-27fc3944] {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\n}\n.visualization-card[data-v-27fc3944] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\r\n  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n.visualization-justify-center[data-v-27fc3944],\r\n*[data-v-27fc3944] .visualization-justify-center {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-27fc3944] {\r\n  align-items: center;\n}\n#visualization-container[data-v-27fc3944] {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\n}\n#visualization-container > .card[data-v-27fc3944] {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\n}\n#command-bar[data-v-27fc3944],\r\n#info-bar[data-v-27fc3944] {\r\n  background-color: #f5f5f5;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button[data-v-27fc3944] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-27fc3944]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-27fc3944] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-27fc3944] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-27fc3944] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-27fc3944] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-27fc3944] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-27fc3944] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-27fc3944] {\r\n  margin: 0 8px;\n}\nsvg[data-v-27fc3944]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-27fc3944] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-27fc3944] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-27fc3944] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\n.tooltip[data-v-27fc3944] {\r\n  display: block !important;\r\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-27fc3944] {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-27fc3944] {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-27fc3944] {\r\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-27fc3944] {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-27fc3944] {\r\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-27fc3944] {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-27fc3944] {\r\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-27fc3944] {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-27fc3944] {\r\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-27fc3944] {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-27fc3944] {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-27fc3944] {\r\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-27fc3944] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-27fc3944] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\n}\r\n", map: {"version":3,"sources":["C:\\Workspace\\visualization\\src\\Visualization.vue"],"names":[],"mappings":";AAmvCA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;;EAEA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Visualization.vue","sourcesContent":["<template>\r\n  <div\r\n    class=\"visualization-row\"\r\n    id=\"visualization-container\"\r\n    @click=\"framesClicked\"\r\n  >\r\n    <GlobalEvents\r\n      v-if=\"!readOnly && canInsertTime && settingsClosed\"\r\n      :filter=\"(event) => !event.shiftKey && !event.ctrlKey\"\r\n      @keydown.45=\"insertTime\"\r\n    />\r\n    <GlobalEvents\r\n      v-if=\"!readOnly && active && settingsClosed\"\r\n      @keydown.83.prevent=\"setHourIni\"\r\n      @keydown.69.prevent=\"setHourEnd\"\r\n    />\r\n    <GlobalEvents\r\n      v-if=\"active && settingsClosed\"\r\n      @keydown.left.prevent=\"arrowLeft\"\r\n      @keydown.right.prevent=\"arrowRight\"\r\n      @keydown.up.prevent=\"arrowUp\"\r\n      @keydown.down.prevent=\"arrowDown\"\r\n      @keydown.shift.page-down.prevent=\"nextLoopActivate\"\r\n      @keydown.page-down.prevent=\"() => next()\"\r\n      @keydown.page-up.prevent=\"() => prev()\"\r\n      @keydown.shift.page-up.prevent=\"prevLoopActivate\"\r\n      @keydown.36.prevent=\"goToFirstFrame\"\r\n      @keydown.35.prevent=\"goToLastFrame\"\r\n      @keydown.71.prevent=\"dialogs.goTo = true\"\r\n      @keydown.73.prevent=\"dialogs.secondsPerFrame = true\"\r\n      @keydown.76.prevent=\"dialogs.frames = true\"\r\n      @keydown.49.97=\"() => (secondsPerFrame = 1)\"\r\n      @keydown.50.98=\"() => (secondsPerFrame = 2)\"\r\n      @keydown.51.99=\"() => (secondsPerFrame = 3)\"\r\n      @keydown.52.100=\"() => (secondsPerFrame = 4)\"\r\n      @keydown.53.101=\"() => (secondsPerFrame = 5)\"\r\n    />\r\n    <GlobalEvents\r\n      v-if=\"prevLoop || nextLoop\"\r\n      @keydown=\"breakLoop\"\r\n      v-on:click=\"breakLoop\"\r\n    />\r\n    <settings\r\n      v-if=\"active\"\r\n      :dialogs-visibility=\"dialogs\"\r\n      :playback-rate=\"playbackRate\"\r\n      :seconds-per-frame=\"secondsPerFrame\"\r\n      :frames-per-row=\"framesPerRow\"\r\n      :number-of-rows=\"numberOfRows\"\r\n      :max-steps=\"maxSteps\"\r\n      :shift-frames=\"shiftFrames\"\r\n      @change-playback-rate=\"(value) => (playbackRate = value)\"\r\n      @change-go-to=\"changeHour\"\r\n      @change-seconds-per-frame=\"(value) => (secondsPerFrame = value)\"\r\n      @change-shift-frames=\"(value) => (shiftFrames = value)\"\r\n      @set-frames-selection=\"setFrameSelection\"\r\n      @close=\"(dialog) => (dialogs[dialog] = false)\"\r\n    />\r\n    <div\r\n      :class=\"{ 'visualization-card': true, 'active-tab': active }\"\r\n      style=\"width: 100%; padding: 0\"\r\n    >\r\n      <command-bar\r\n        v-show=\"commandBarShow\"\r\n        :read-only=\"readOnly\"\r\n        :video-playing=\"videoPlaying\"\r\n        :video-paused=\"paused\"\r\n        :insert-time=\"canInsertTime\"\r\n        :hour-ini-selected=\"!!hourIniSelected\"\r\n        :hour-end-selected=\"!!hourEndSelected\"\r\n        @prev-loop-activate=\"prevLoopActivate\"\r\n        @next-loop-activate=\"nextLoopActivate\"\r\n        @prev=\"prev\"\r\n        @next=\"next\"\r\n        @go-to=\"dialogs.goTo = true\"\r\n        @open-frame-selection=\"dialogs.frames = true\"\r\n        @open-frames-per-second=\"dialogs.secondsPerFrame = true\"\r\n        @open-blocks=\"openBlocks\"\r\n        @open-playback-rate=\"dialogs.playbackRate = true\"\r\n        @play-or-pause=\"playOrPause\"\r\n        @stop-playing=\"stopPlayingBar\"\r\n        @set-hour-ini=\"setHourIni\"\r\n        @set-hour-end=\"setHourEnd\"\r\n        @insert-time=\"insertTime\"\r\n        @shift-frames=\"dialogs.shiftFrames = true\"\r\n      />\r\n      <video-progress\r\n        v-if=\"videoProgressBar\"\r\n        v-show=\"videoPlaying\"\r\n        :video-time=\"videoTime\"\r\n      />\r\n      <info-bar\r\n        :playback-rate=\"playbackRate\"\r\n        :seconds-per-frame=\"secondsPerFrame\"\r\n        :commands-show=\"commandBarShow\"\r\n        :cache=\"useCache\"\r\n        :block-start-time=\"blockStartTime\"\r\n        :video-total-duration=\"videoSliderTotalDuration\"\r\n        :alternative-server=\"alternativeServer\"\r\n        :frames-per-row=\"framesPerRow\"\r\n        :number-of-rows=\"numberOfRows\"\r\n        :hour-ini=\"hourIniSelected\"\r\n        :hour-end=\"hourEndSelected\"\r\n        @toogle-commands-visibility=\"toogleCommandsVisibility\"\r\n        @toogle-cache=\"useCache = !useCache\"\r\n        @change-server=\"changeServerClick\"\r\n      />\r\n      <div\r\n        class=\"visualization-row\"\r\n        v-for=\"rowNumber in numberOfRows\"\r\n        :id=\"'row-' + rowNumber\"\r\n        :key=\"'row-' + rowNumber\"\r\n        style=\"padding: 2px 12px\"\r\n      >\r\n        <div\r\n          v-for=\"(frame, frameNumber) in previousFrames\"\r\n          :key=\"\r\n            numberOfRows +\r\n            '-' +\r\n            framesPerRow +\r\n            '-' +\r\n            getIndex(rowNumber, frameNumber, Positions.previous)\r\n          \"\r\n          style=\"display: none\"\r\n        >\r\n          <span v-html=\"frame.img\" />\r\n        </div>\r\n        <div\r\n          v-for=\"(frame, frameNumber) in nextFrames\"\r\n          :key=\"\r\n            numberOfRows +\r\n            '-' +\r\n            framesPerRow +\r\n            '-' +\r\n            getIndex(rowNumber, frameNumber, Positions.next)\r\n          \"\r\n          style=\"display: none\"\r\n        >\r\n          <span v-html=\"frame.img\" />\r\n        </div>\r\n        <div\r\n          class=\"visualization-col\"\r\n          v-for=\"(frame, frameNumber) in frames.slice(\r\n            framesPerRow * (rowNumber - 1),\r\n            framesPerRow * rowNumber\r\n          )\"\r\n          :key=\"'row-' + rowNumber + '-frame-' + frameNumber\"\r\n          :id=\"`frame-${getIndex(rowNumber, frameNumber, Positions.current)}`\"\r\n          :class=\"{ loaderImg: !!frame.img }\"\r\n          @click=\"\r\n            frame.time\r\n              ? selectFrame(\r\n                  getIndex(rowNumber, frameNumber, Positions.current),\r\n                  frame\r\n                )\r\n              : null\r\n          \"\r\n        >\r\n          <span :id=\"activeFrame ? 'aa' : 0\" style=\"text-align: center\">\r\n            <b>\r\n              {{\r\n                getAudienceTime(\r\n                  frame.time,\r\n                  rowNumber,\r\n                  frameNumber,\r\n                  Positions.current\r\n                )\r\n              }}\r\n            </b>\r\n          </span>\r\n\r\n          <frame\r\n            ref=\"frames\"\r\n            :frame=\"frame\"\r\n            :index=\"getIndex(rowNumber, frameNumber, Positions.current)\"\r\n            :grid-settings=\"{ numberOfRows, framesPerRow }\"\r\n            :initialTime=\"frame.time === hourIniSelected\"\r\n            :endTime=\"frame.time === hourEndSelected\"\r\n            :betweenTime=\"\r\n              frame.time > hourIniSelected && frame.time < hourEndSelected\r\n            \"\r\n            :active=\"\r\n              getIndex(rowNumber, frameNumber, Positions.current) ===\r\n              activeFrame\r\n            \"\r\n            :activeTab=\"active\"\r\n            :videoUrl=\"fInterface ? fInterface.getVideoUrl(frame) : ''\"\r\n            :videoControls=\"videoControls\"\r\n            @startPlaying=\"startPlaying\"\r\n            @stopPlaying=\"stopPlaying\"\r\n            @playPauseStatus=\"changePlayPause\"\r\n            @updateSlider=\"updateSlider\"\r\n            :playback-rate=\"playbackRate\"\r\n            :aspect-ratio=\"aspectRatio\"\r\n            style=\"margin: 0 auto\"\r\n          ></frame>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- <settings\r\n      ref=\"settings2\"\r\n      :active=\"active\"\r\n      @goToTime=\"changeHour\"\r\n      @goToBlockInterval=\"changeBlockInterval\"\r\n      @setSplitTime=\"setSplitTime\"\r\n      @setFrameSelection=\"setFrameSelection\"\r\n      @setPlaybackRate=\"\r\n        (rate) => {\r\n          playbackRate = rate\r\n        }\r\n      \"\r\n    >\r\n    </settings> -->\r\n    <!-- <v-dialog v-model=\"dialog\" width=\"500\">\r\n      <div class=\"card\">\r\n        <div class=\"card\"-title class=\"text-h5 grey lighten-2\">\r\n          {{ '  Último bloco disponível até: ' }}\r\n          <v-btn\r\n            @click=\"goToStartBlock\"\r\n            class=\"ml-2\"\r\n            dark\r\n            color=\"success\"\r\n            depressed\r\n          >\r\n            <v-icon left> fa-clock </v-icon>\r\n            {{ timeLastBlock }}\r\n          </v-btn>\r\n          <v-spacer></v-spacer>\r\n          <v-btn color=\"error\" fab small class=\"ml-5\" @click=\"dialog = false\">\r\n            <v-icon dark> fa fa-xmark </v-icon>\r\n          </v-btn>\r\n        </div-title>\r\n      </div>\r\n    </v-dialog>\r\n    <Help :media=\"media\" @close=\"media = null\" />\r\n    <v-dialog\r\n      v-if=\"userMultiTabsGrid\"\r\n      v-model=\"userMultiTabsGridsModel\"\r\n      persistent\r\n      width=\"60%\"\r\n    >\r\n      <div class=\"card\">\r\n        <div class=\"card\"-title class=\"warning text-h5\" primary-title>\r\n          <div class=\"row\" class=\"ma-0\" justify=\"center\" align=\"center\">\r\n            <v-icon dark left style=\"font-size: 24px !important\">\r\n              fa fa-exclamation-triangle\r\n            </v-icon>\r\n            <div style=\"color: white\">{{ $t('form.alert') }}</div>\r\n          </div>\r\n        </div-title>\r\n        <div class=\"card\"-text class=\"justify-center pa-6 grey lighten-2\">\r\n          <h3>\r\n            {{ $t('alerts.userMultiTabsGrid') }}\r\n          </h3>\r\n        </div-text>\r\n        <hr class=\"divider\" class=\"grey lighten-1\"></span>\r\n        <div class=\"card\"-actions class=\"grey lighten-2 justify-center\">\r\n          <v-btn color=\"error\" ml-5 @click=\"userMultiTabsGrid = false\">\r\n            <v-icon left color=\"white\">fa fa-times</v-icon>\r\n            {{ $t('form.close') }}\r\n          </v-btn>\r\n        </div-actions>\r\n      </div>\r\n    </v-dialog> -->\r\n  </div>\r\n</template>\r\n<script>\r\nimport Frame from './components/Frame.vue'\r\nimport FramesInterface from './utils/FramesInterface.js'\r\nimport FramesService from './services/FramesService.js'\r\n\r\nimport Commands from './components/Commands.vue'\r\nimport Infos from './components/Infos.vue'\r\nimport VideoProgress from './components/VideoProgress.vue'\r\nimport Settings from './components/Settings.vue'\r\n\r\nconst Positions = Object.freeze({\r\n  previous: 0,\r\n  current: 1,\r\n  next: 2,\r\n})\r\n\r\nexport default {\r\n  name: 'visualization-container',\r\n  props: {\r\n    value: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    date: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    channel: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    startAudienceTime: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    endAudienceTime: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    videoProgressBar: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    jumpOnInsert: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    removeSelectionOnInsert: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    framesFormat: {\r\n      type: [Number, String],\r\n      default: 7,\r\n    },\r\n    maxSize: {\r\n      type: Number,\r\n    },\r\n    videoControls: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    readOnly: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    maxSteps: {\r\n      type: Number,\r\n      default: 1,\r\n    },\r\n  },\r\n  components: {\r\n    Frame,\r\n    CommandBar: Commands,\r\n    InfoBar: Infos,\r\n    VideoProgress,\r\n    Settings,\r\n    // Help,\r\n  },\r\n  data() {\r\n    return {\r\n      Positions,\r\n      updatingChannel: null,\r\n      dialog: false,\r\n      timeLastBlock: null,\r\n      alternativeServer: false,\r\n      useCache: true,\r\n      numberOfRows: 1,\r\n      framesPerRow: 5,\r\n      secondsPerFrame: 1,\r\n      fInterface: null,\r\n      velocity: 1,\r\n      frames: [],\r\n      previousFrames: [],\r\n      nextFrames: [],\r\n      channelCode: 0,\r\n      videoPlaying: false,\r\n      activeFrame: null,\r\n      activeVideo: null,\r\n      videoTime: 0,\r\n      videoTotalTime: null,\r\n      progressVideoDrag: false,\r\n      hourIniSelected: false,\r\n      hourEndSelected: false,\r\n      canInsertTime: false,\r\n      lastHeight: 0,\r\n      loopInterval: null,\r\n      nextLoop: false,\r\n      prevLoop: false,\r\n      videoSliderTotalDuration: 900,\r\n      blockStartTime: null,\r\n      media: null,\r\n      changeServer: false,\r\n      userMultiTabsGrid: false,\r\n      userMultiTabsGridsModel: true,\r\n      playbackRate: 1,\r\n      paused: false,\r\n      commandBarShow: true,\r\n      dialogs: {\r\n        playbackRate: false,\r\n        goTo: false,\r\n        secondsPerFrame: false,\r\n        frames: false,\r\n        shiftFrames: false,\r\n      },\r\n      lastNext: 0,\r\n      lastPrev: 0,\r\n      shiftFrames: 0,\r\n      aspectRatio: 11 / 9,\r\n    }\r\n  },\r\n  async created() {\r\n    this.changeServer = this.serverOfFrames === 'alternative'\r\n    this.alternativeServer = this.serverOfFrames === 'alternative'\r\n\r\n    const settings = [\r\n      {\r\n        framesPerRow: 1,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 2,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 3,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 3,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        framesPerRow: 4,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 4,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        framesPerRow: 5,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 5,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        framesPerRow: 6,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 6,\r\n        numberOfRows: 2,\r\n      },\r\n    ]\r\n\r\n    const storedOnDb = settings[parseInt(this.framesFormat) - 1]\r\n    this.framesPerRow = storedOnDb.framesPerRow\r\n    this.numberOfRows = storedOnDb.numberOfRows\r\n\r\n    await this.createFramesInterface()\r\n    this.$nextTick(this.resize)\r\n  },\r\n  methods: {\r\n    stopVideoPlaying(array) {\r\n      for (const frame of array || this.$refs.frames) {\r\n        if (\r\n          frame.videoStatus === frame.Status.playing ||\r\n          frame.videoStatus === frame.Status.paused\r\n        ) {\r\n          frame.stop(false)\r\n        }\r\n      }\r\n      this.activeVideo = null\r\n    },\r\n    toogleCommandsVisibility() {\r\n      this.commandBarShow = !this.commandBarShow\r\n      this.$nextTick(this.resize)\r\n    },\r\n    framesClicked(e) {\r\n      if (e.target.parentNode.id != 'insert') {\r\n        this.active = true\r\n      }\r\n    },\r\n    async goToStartBlock() {\r\n      try {\r\n        const d = new Date()\r\n        let timestamp = Date.UTC(\r\n          d.getFullYear(),\r\n          d.getMonth(),\r\n          d.getDate(),\r\n          d.getHours(),\r\n          d.getMinutes(),\r\n          d.getSeconds()\r\n        )\r\n\r\n        const response = (\r\n          await FramesService.getNextAvailableBlock({\r\n            channel: this.channel,\r\n            time: timestamp / 1000,\r\n          })\r\n        ).data\r\n\r\n        this.dialog = false\r\n        this.changeHour(this.convertToAudienceTime(response.data.start, ':'))\r\n      } catch (err) {\r\n        // console.error(err)\r\n      }\r\n    },\r\n    async checkAvailableBlock() {\r\n      try {\r\n        const d = new Date()\r\n        let timestamp = Date.UTC(\r\n          d.getFullYear(),\r\n          d.getMonth(),\r\n          d.getDate(),\r\n          d.getHours(),\r\n          d.getMinutes(),\r\n          d.getSeconds()\r\n        )\r\n\r\n        const response = (\r\n          await FramesService.getNextAvailableBlock({\r\n            channel: this.channel,\r\n            time: timestamp / 1000,\r\n          })\r\n        ).data\r\n\r\n        this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':')\r\n        this.dialog = true\r\n        if (!response.status) {\r\n          this.timeLastBlock = 'N/D'\r\n        }\r\n      } catch (err) {\r\n        // console.error(err)\r\n      }\r\n    },\r\n    updateSlider(videoStartTime, time) {\r\n      // * atualizar slider se estiver fora do range definido previamente\r\n      if (\r\n        time < this.blockStartTime ||\r\n        time > this.blockStartTime ||\r\n        videoStartTime > this.blockStartTime + this.videoSliderTotalDuration\r\n      ) {\r\n        this.blockStartTime = videoStartTime\r\n        this.videoSliderTotalDuration = 900\r\n      }\r\n    },\r\n    nextLoopActivate() {\r\n      this.breakLoop()\r\n      this.loopInterval = setInterval(\r\n        () => this.next({ ignoreTime: true }),\r\n        this.swapImagesDelay\r\n      )\r\n      setTimeout(() => {\r\n        this.nextLoop = true\r\n      }, 0)\r\n    },\r\n    prevLoopActivate() {\r\n      this.breakLoop()\r\n      this.loopInterval = setInterval(\r\n        () => this.prev({ ignoreTime: true }),\r\n        this.swapImagesDelay\r\n      )\r\n      setTimeout(() => {\r\n        this.prevLoop = true\r\n      }, 0)\r\n    },\r\n    breakLoop() {\r\n      clearInterval(this.loopInterval)\r\n      this.loopInterval = null\r\n      this.nextLoop = false\r\n      this.prevLoop = false\r\n    },\r\n    changePlayPause(status) {\r\n      this.paused = !status\r\n    },\r\n    resize(height = this.lastHeight) {\r\n      this.lastHeight = height\r\n      if (this.$refs.frames) {\r\n        for (let frame of this.$refs.frames) {\r\n          frame.resize(height)\r\n        }\r\n      }\r\n      this.$emit('resized')\r\n    },\r\n    async goToFirstFrame() {\r\n      let frames = this.$refs.frames\r\n\r\n      let audienceTime = null\r\n      if (frames.length > 0) {\r\n        let frame = frames[0].frame\r\n        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n      }\r\n      if (audienceTime) {\r\n        const [hours, minutes, seconds] = audienceTime.split(':')\r\n        const totalSeconds =\r\n          parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)\r\n        if (totalSeconds >= 9000)\r\n          this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\r\n        else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true))\r\n      }\r\n    },\r\n    async goToLastFrame() {\r\n      let frames = this.$refs.frames\r\n      let audienceTime = null\r\n      if (frames.length > 0) {\r\n        let frame = frames[0].frame\r\n\r\n        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n      }\r\n      if (audienceTime) {\r\n        this.changeHour(this.getLastFirtsBlockTime(audienceTime))\r\n      }\r\n    },\r\n    getLastFirtsBlockTime(time, first = false) {\r\n      if (time.indexOf(':') !== -1) {\r\n        time = time.replace(/:/g, '')\r\n      }\r\n      let h, m, newTime\r\n      const t = time.match(/.{1,2}/g)\r\n      if (t[0] && t[1]) {\r\n        h = parseInt(t[0])\r\n        m = parseInt(t[1])\r\n      }\r\n      if (h < 26) {\r\n        if (m < 15)\r\n          if (first) newTime = t[0] + ':00:00'\r\n          else newTime = t[0] + ':14:59'\r\n        else if (m < 30)\r\n          if (first) newTime = t[0] + ':15:00'\r\n          else newTime = t[0] + ':29:59'\r\n        else if (m < 45)\r\n          if (first) newTime = t[0] + ':30:00'\r\n          else newTime = t[0] + ':44:59'\r\n        else if (first) newTime = t[0] + ':45:00'\r\n        else newTime = t[0] + ':59:59'\r\n      } else {\r\n        if (m < 15)\r\n          if (first) newTime = '26:00:00'\r\n          else newTime = '26:14:59'\r\n        else {\r\n          if (first) newTime = '26:15:00'\r\n          else newTime = '26:29:59'\r\n        }\r\n      }\r\n      return newTime\r\n    },\r\n    openBlocks() {\r\n      this.$refs.settings2?.openBlocks()\r\n    },\r\n    playOrPause() {\r\n      const array = this.$refs.frames.filter((fc) => !!fc.active)\r\n      if (array.length === 1) {\r\n        const frame = array[0]\r\n        frame.playOrPause(this.playbackRate)\r\n      }\r\n    },\r\n    stopPlayingBar() {\r\n      for (let ref of this.$refs.frames) {\r\n        if (\r\n          ref.videoStatus === ref.Status.playing ||\r\n          ref.videoStatus === ref.Status.paused\r\n        ) {\r\n          ref.stop(false)\r\n        }\r\n      }\r\n    },\r\n    async setFrameSelection(selected) {\r\n      this.frames = this.loadingArray\r\n      const settings = [\r\n        {\r\n          framesPerRow: 1,\r\n          numberOfRows: 1,\r\n        },\r\n        {\r\n          framesPerRow: 2,\r\n          numberOfRows: 1,\r\n        },\r\n        {\r\n          framesPerRow: 3,\r\n          numberOfRows: 1,\r\n        },\r\n        {\r\n          framesPerRow: 3,\r\n          numberOfRows: 2,\r\n        },\r\n        {\r\n          framesPerRow: 4,\r\n          numberOfRows: 1,\r\n        },\r\n        {\r\n          framesPerRow: 4,\r\n          numberOfRows: 2,\r\n        },\r\n        {\r\n          framesPerRow: 5,\r\n          numberOfRows: 1,\r\n        },\r\n        {\r\n          framesPerRow: 5,\r\n          numberOfRows: 2,\r\n        },\r\n        {\r\n          framesPerRow: 6,\r\n          numberOfRows: 1,\r\n        },\r\n        {\r\n          framesPerRow: 6,\r\n          numberOfRows: 2,\r\n        },\r\n      ]\r\n\r\n      const formatSelected = settings[selected - 1]\r\n      this.framesPerRow = formatSelected.framesPerRow\r\n      this.numberOfRows = formatSelected.numberOfRows\r\n\r\n      await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\r\n      this.getFramesArray()\r\n      this.$nextTick(this.resize)\r\n      this.$emit('frames-format-changed', selected)\r\n    },\r\n    getFramesArray() {\r\n      this.frames = this.fInterface.getFrames(Positions.current)\r\n      this.nextFrames = this.fInterface.getFrames(Positions.next)\r\n      this.previousFrames = this.fInterface.getFrames(Positions.previous)\r\n\r\n      const div = document.createElement('div')\r\n      div.innerHTML = this.frames[0].image\r\n      const newAspectRatio =\r\n        div.getElementsByTagName('img')[0]?.naturalWidth /\r\n        div.getElementsByTagName('img')[0]?.naturalHeight\r\n\r\n      this.aspectRatio = isNaN(newAspectRatio)\r\n        ? this.aspectRatio\r\n        : newAspectRatio\r\n\r\n      this.$nextTick(this.resize)\r\n\r\n      const frame = this.frames.find((f) => f.blockStart)\r\n      if (frame && this.alternativeServer) {\r\n        this.$emit(\r\n          'new-block',\r\n          frame.title?.match(/[0-9]{3}\\/(?:[0-9]+_?)+/)[0]\r\n        )\r\n      }\r\n    },\r\n    async createFramesInterface(startTime = this.startAudienceTime) {\r\n      this.frames = this.loadingArray\r\n      // let ch = this.channel\r\n      // let associationTMP = {\r\n      //   1735073: 1,\r\n      //   1735074: 139,\r\n      //   1735075: 3,\r\n      //   1735076: 132,\r\n      // }\r\n      // //\r\n      // this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch\r\n\r\n      const t = startTime.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n      // * iniciar slider\r\n      this.blockStartTime = time\r\n      this.fInterface = await new FramesInterface(\r\n        this.channel,\r\n        this.numberOfRows,\r\n        this.framesPerRow,\r\n        time,\r\n        this.startAudienceTime,\r\n        this.useCache,\r\n        this.shiftFrames\r\n      )\r\n      await this.fInterface.init()\r\n\r\n      this.getFramesArray()\r\n\r\n      const div = document.createElement('div')\r\n      div.innerHTML = this.frames[0].image\r\n\r\n      this.aspectRatio =\r\n        div.getElementsByTagName('img')[0].naturalWidth /\r\n        div.getElementsByTagName('img')[0].naturalHeight\r\n\r\n      this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n\r\n      this.activeVideo = null\r\n    },\r\n    getIndex(rowNumber, frameIndex, position) {\r\n      let from = this.framesPerRow * this.numberOfRows * position\r\n      let till = this.framesPerRow * this.numberOfRows * (position + 1)\r\n\r\n      return (from + till * (rowNumber - 1)) / rowNumber + frameIndex\r\n    },\r\n    getAudienceTime(frameTime, rowNumber, frameNumber, position) {\r\n      if (!frameTime) {\r\n        return 'Loading...'\r\n      } else if (\r\n        this.getIndex(rowNumber, frameNumber, position) === this.activeVideo\r\n      ) {\r\n        return this.convertToAudienceTime(this.videoTime)\r\n      } else {\r\n        return this.convertToAudienceTime(frameTime)\r\n      }\r\n    },\r\n    dateInUtc(miliSeconds) {\r\n      var date = new Date(miliSeconds)\r\n      var utc = new Date(\r\n        date.getUTCFullYear(),\r\n        date.getUTCMonth(),\r\n        date.getUTCDate(),\r\n        date.getUTCHours(),\r\n        date.getUTCMinutes(),\r\n        date.getUTCSeconds()\r\n      )\r\n      return utc\r\n    },\r\n    convertToAudienceTime(time, separator = ':') {\r\n      const d = this.getDateParts()\r\n      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\r\n\r\n      let hour = this.dateInUtc(time * 1000)\r\n        .toTimeString()\r\n        .split(' ')[0]\r\n        .split(':')\r\n        .map(Number)\r\n\r\n      if (time > limit && time <= limit + this.startAudienceSeconds) {\r\n        hour[0] = 24 + hour[0]\r\n      }\r\n      return hour\r\n        .map((part) => (part > 9 ? part.toString() : '0' + part))\r\n        .join(separator)\r\n    },\r\n    getDateParts(date = this.date) {\r\n      const data = /(?<year>\\d{4})-(?<month>\\d{2})-(?<day>\\d{2})/.exec(\r\n        date\r\n      )?.groups\r\n      if (data) {\r\n        return {\r\n          year: parseInt(data.year),\r\n          month: parseInt(data.month) - 1,\r\n          day: parseInt(data.day),\r\n        }\r\n      }\r\n      return {\r\n        year: null,\r\n        month: null,\r\n        day: null,\r\n      }\r\n    },\r\n    selectFrame(index, frame) {\r\n      const d = this.getDateParts()\r\n      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\r\n      const frameTime = frame?.time\r\n\r\n      if (frameTime - (this.startAudienceSeconds + limit) <= 0) {\r\n        if (this.hourIniSelected === true) {\r\n          this.hourIniSelected = frameTime\r\n\r\n          if (\r\n            this.hourEndSelected &&\r\n            this.hourIniSelected > this.hourEndSelected\r\n          ) {\r\n            this.hourEndSelected = false\r\n          }\r\n        } else if (this.hourEndSelected === true) {\r\n          if (frameTime > this.hourIniSelected) {\r\n            this.hourEndSelected = frameTime\r\n            this.canInsertTime = true\r\n          } else {\r\n            this.hourEndSelected = false\r\n          }\r\n        }\r\n      }\r\n\r\n      if (this.activeFrame !== index) {\r\n        // ? Se clicar no frame diferente de onde está a dar play, faz pausa\r\n        const array = this.$refs.frames.filter(\r\n          (fc) => fc.videoStatus === fc.Status.playing\r\n        )\r\n        if (array.length === 1) {\r\n          const frame = array[0]\r\n          frame.playOrPause()\r\n        }\r\n        this.activeVideo = null\r\n        this.activeFrame = index\r\n      }\r\n    },\r\n    setHourIni() {\r\n      this.canInsertTime = true\r\n      this.hourIniSelected = true\r\n      document.getElementById(`frame-${this.activeFrame}`).click()\r\n      this.$emit('setHourIni', {\r\n        hour_ini: this.hourIniSelected\r\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n          : null,\r\n      })\r\n    },\r\n    setHourEnd() {\r\n      this.canInsertTime = true\r\n      this.hourEndSelected = true\r\n      document.getElementById(`frame-${this.activeFrame}`).click()\r\n    },\r\n    //* Navegação\r\n    arrowRight() {\r\n      if (this.checkLimitRight(false)) {\r\n        if (\r\n          this.activeFrame ===\r\n          this.numberOfRows * this.framesPerRow * 2 - 1\r\n        ) {\r\n          this.next()\r\n        } else {\r\n          this.activeFrame++\r\n        }\r\n      }\r\n    },\r\n    arrowLeft() {\r\n      if (this.checkLimitLeft(false)) {\r\n        if (this.activeFrame === this.numberOfRows * this.framesPerRow) {\r\n          this.prev({ stayOnLast: true })\r\n        } else {\r\n          this.activeFrame--\r\n        }\r\n      }\r\n    },\r\n    arrowUp() {\r\n      if (\r\n        this.activeFrame - this.numberOfRows * this.framesPerRow >=\r\n        Math.round((this.numberOfRows * this.framesPerRow) / 2)\r\n      ) {\r\n        this.activeFrame -= this.framesPerRow\r\n      }\r\n    },\r\n    arrowDown() {\r\n      if (\r\n        this.activeFrame - this.numberOfRows * this.framesPerRow <\r\n        Math.round((this.numberOfRows * this.framesPerRow) / 2)\r\n      ) {\r\n        this.activeFrame += this.framesPerRow\r\n      }\r\n    },\r\n    checkLimitRight(value) {\r\n      const hours = this.endAudienceTime.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const high = Date.UTC(\r\n        d.year,\r\n        d.month,\r\n        d.day,\r\n        hours[0],\r\n        parseInt(hours[1]) + 30,\r\n        hours[2]\r\n      )\r\n\r\n      if (value) {\r\n        return (\r\n          high >\r\n          (this.fInterface.getCurrentTime() +\r\n            this.numberOfRows * this.framesPerRow -\r\n            1) *\r\n            1000\r\n        )\r\n      } else {\r\n        return high > this.fInterface.getCurrentTime() * 1000\r\n      }\r\n    },\r\n    checkLimitLeft(value) {\r\n      const hours = this.startAudienceTime.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const low = Date.UTC(d.year, d.month, d.day, hours[0], hours[1], hours[2])\r\n\r\n      if (value) {\r\n        return low <= (this.fInterface.getCurrentTime() - 1) * 1000\r\n      } else {\r\n        return (\r\n          low <\r\n          (this.fInterface.getCurrentTime() +\r\n            this.activeFrame -\r\n            this.numberOfRows * this.framesPerRow) *\r\n            1000\r\n        )\r\n      }\r\n    },\r\n    async next(config = {}) {\r\n      if (\r\n        (config.ignoreTime ||\r\n          Date.now() - this.lastNext > this.swapImagesDelay) &&\r\n        this.checkLimitRight(true) &&\r\n        !this.navigationPending\r\n      ) {\r\n        this.navigationPending = true\r\n        this.stopVideoPlaying()\r\n\r\n        this.navigationPending = await new Promise((resolve) => {\r\n          this.fInterface\r\n            .loadNextFrames()\r\n            .then(() => {\r\n              this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n\r\n              this.getFramesArray()\r\n              this.lastNext = Date.now()\r\n              resolve(false)\r\n            })\r\n            .catch(() => {\r\n              resolve(false)\r\n            })\r\n        })\r\n      } else {\r\n        // console.error('next blocked')\r\n      }\r\n    },\r\n    async prev(config = {}) {\r\n      if (\r\n        (config.ignoreTime ||\r\n          Date.now() - this.lastPrev > this.swapImagesDelay) &&\r\n        this.checkLimitLeft(true) &&\r\n        !this.navigationPending\r\n      ) {\r\n        this.navigationPending = true\r\n        this.stopVideoPlaying()\r\n\r\n        this.navigationPending = await new Promise((resolve) => {\r\n          this.fInterface\r\n            .loadPrevFrames()\r\n            .then(() => {\r\n              if (config.stayOnLast) {\r\n                this.activeFrame = this.getIndex(\r\n                  this.numberOfRows,\r\n                  this.framesPerRow - 1,\r\n                  Positions.current\r\n                )\r\n              } else {\r\n                this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n              }\r\n\r\n              this.getFramesArray()\r\n              this.lastPrev = Date.now()\r\n              resolve(false)\r\n            })\r\n            .catch(() => {\r\n              resolve(false)\r\n            })\r\n        })\r\n      } else {\r\n        // console.error('prev blocked')\r\n      }\r\n    },\r\n    async setStartTime(time) {\r\n      if (time.indexOf(':') !== -1) {\r\n        time = time.replace(/:/g, '')\r\n      }\r\n      const t = time.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n      // this.frames = this.loadingArray\r\n\r\n      await this.fInterface.changeTime(setTime)\r\n\r\n      this.getFramesArray()\r\n\r\n      this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n\r\n      this.activeVideo = null\r\n\r\n      return true\r\n    },\r\n    hourToTimeStamp(time) {\r\n      if (time.indexOf(':') !== -1) {\r\n        time = time.replace(/:/g, '')\r\n      }\r\n      const t = time.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n\r\n      return setTime\r\n    },\r\n    changeHour(value) {\r\n      if (value) {\r\n        return new Promise((resolve) => {\r\n          setTimeout(async () => {\r\n            this.stopVideoPlaying()\r\n\r\n            await this.setStartTime(value, true)\r\n            resolve()\r\n          }, 0)\r\n        })\r\n      }\r\n    },\r\n    changeBlockInterval(value) {\r\n      this.changeHour(value.ini)\r\n      let time_ini, time_end\r\n      time_ini = this.hourToTimeStamp(value.ini)\r\n      time_end = this.hourToTimeStamp(value.end)\r\n      this.videoSliderTotalDuration = time_end - time_ini\r\n      this.$refs.frames[0].changeSettings(time_ini)\r\n      this.blockStartTime = time_ini\r\n    },\r\n    //eslint-disable-next-line\r\n    async updateVideoTime(index, videoTime) {\r\n      this.activeVideo = index\r\n      this.videoTime = videoTime\r\n    },\r\n    //eslint-disable-next-line\r\n    updateVideoStatus(currentTime) {\r\n      if (!this.progressVideoDrag) {\r\n        // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS\r\n        // this.updateProgress(null, currentTime)\r\n      }\r\n    },\r\n    async startPlaying(frame, totalTime) {\r\n      const array = this.$refs.frames.filter(\r\n        (fc) => fc.frame.time !== frame.time\r\n      )\r\n      this.stopVideoPlaying(array)\r\n\r\n      this.videoTotalTime = totalTime\r\n      this.videoPlaying = true\r\n    },\r\n    stopPlaying() {\r\n      this.videoTotalTime = null\r\n      this.videoPlaying = false\r\n      this.paused = false\r\n    },\r\n    insertTime() {\r\n      this.$emit('timeToInsert', {\r\n        channel: this.channel,\r\n        hour_ini: this.hourIniSelected\r\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n          : null,\r\n        hour_end: this.hourEndSelected\r\n          ? this.convertToAudienceTime(this.hourEndSelected, '')\r\n          : null,\r\n        force: false,\r\n      })\r\n\r\n      if (this.jumpOnInsert) {\r\n        this.changeHour(\r\n          this.convertToAudienceTime(\r\n            this.hourEndSelected || this.hourIniSelected\r\n          )\r\n        ).then(() => {\r\n          this.activeFrame = this.getIndex(1, 1, Positions.current)\r\n        })\r\n      }\r\n\r\n      if (this.removeSelectionOnInsert) {\r\n        this.hourIniSelected = null\r\n        this.hourEndSelected = null\r\n        this.canInsertTime = false\r\n      }\r\n    },\r\n    insertTimeForce() {\r\n      this.$emit('timeToInsert', {\r\n        channel: this.channel,\r\n        hour_ini: this.hourIniSelected\r\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n          : null,\r\n        hour_end: this.hourEndSelected\r\n          ? this.convertToAudienceTime(this.hourEndSelected, '')\r\n          : null,\r\n        force: true,\r\n      })\r\n\r\n      if (this.removeSelectionOnInsert) {\r\n        this.hourIniSelected = null\r\n        this.hourEndSelected = null\r\n        this.canInsertTime = false\r\n      }\r\n    },\r\n    async getChannelMedia() {\r\n      // this.media = (await ChannelService.show(this.channel)).data.MEDIA\r\n    },\r\n    async changeServerClick() {\r\n      this.changeServer = !this.changeServer\r\n      this.alternativeServer = this.changeServer\r\n\r\n      sessionStorage.setItem(\r\n        'server',\r\n        this.changeServer ? 'alternative' : 'default'\r\n      )\r\n\r\n      await this.createFramesInterface(\r\n        this.convertToAudienceTime(\r\n          this.$refs.frames.find((frame) => frame.index === this.activeFrame)\r\n            .frame.time,\r\n          ''\r\n        )\r\n      )\r\n\r\n      this.$nextTick(this.resize)\r\n    },\r\n  },\r\n  computed: {\r\n    swapImagesDelay() {\r\n      return 0\r\n      // return this.numberOfRows * this.framesPerRow * 15\r\n    },\r\n    active: {\r\n      get() {\r\n        return this.value\r\n      },\r\n      set(value) {\r\n        this.$emit('input', value)\r\n      },\r\n    },\r\n    settingsClosed() {\r\n      return !Object.values(this.dialogs).find((v) => v)\r\n    },\r\n    startAudienceSeconds() {\r\n      const t = this.startAudienceTime.match(/.{1,2}/g)\r\n      return parseInt(t[0] * 3600 + t[1] * 60 + t[2])\r\n    },\r\n    loadingArray() {\r\n      return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())\r\n    },\r\n    serverOfFrames() {\r\n      return sessionStorage.getItem('server')\r\n    },\r\n  },\r\n  beforeDestroy() {\r\n    sessionStorage.setItem('server', 'default')\r\n  },\r\n  watch: {\r\n    async secondsPerFrame() {\r\n      const activeF =\r\n        this.frames[this.activeFrame - this.numberOfRows * this.framesPerRow]\r\n\r\n      if (activeF) {\r\n        this.changeHour(this.getAudienceTime(activeF.time, 0, 0, 0))\r\n        this.fInterface.setCurrentStep(this.secondsPerFrame)\r\n        await this.fInterface.loadFrames()\r\n        this.getFramesArray()\r\n      }\r\n    },\r\n    async shiftFrames() {\r\n      this.createFramesInterface()\r\n    },\r\n    framesFormat(value) {\r\n      this.setFrameSelection(value)\r\n    },\r\n    active() {\r\n      // ? sempre que trocamos de tabs dar reset as horas selected\r\n      if (this.removeSelectionOnInsert) {\r\n        this.hourIniSelected = false\r\n        this.hourEndSelected = false\r\n      }\r\n    },\r\n    useCache() {\r\n      this.createFramesInterface()\r\n    },\r\n    hourIniSelected(value) {\r\n      if (value) {\r\n        sessionStorage.setItem(\r\n          'currentTimeFrames',\r\n          this.convertToAudienceTime(this.hourIniSelected, '')\r\n        )\r\n      } else {\r\n        sessionStorage.removeItem('currentTimeFrames')\r\n      }\r\n    },\r\n    activeFrame(value) {\r\n      if (value) {\r\n        this.stopPlayingBar()\r\n      }\r\n    },\r\n    channel() {\r\n      this.updatingChannel = new Promise((resolve, reject) => {\r\n        try {\r\n          this.createFramesInterface()\r\n          resolve(true)\r\n        } catch (err) {\r\n          reject(err)\r\n        }\r\n      })\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\r\n  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\r\n}\r\n\r\n.visualization-justify-center,\r\n* >>> .visualization-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n  align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n  background-color: #f5f5f5;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n}\r\n#command-bar button {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n  padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\r\n}\r\n\r\n.settings-container {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n  margin: 0 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n  margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n  border: none;\r\n}\r\n\r\n.visualization-card {\r\n  border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined });
+    inject("data-v-a861684a_0", { source: "\n.visualization-row[data-v-a861684a] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\n}\n.visualization-col[data-v-a861684a] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 5px;\n}\n.visualization-divider[data-v-a861684a] {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\n}\n.visualization-divider.vertical[data-v-a861684a] {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\n}\n.visualization-card[data-v-a861684a] {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\r\n  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n.visualization-justify-center[data-v-a861684a],\r\n*[data-v-a861684a] .visualization-justify-center {\r\n  justify-content: center;\n}\n.visualization-align-center[data-v-a861684a] {\r\n  align-items: center;\n}\n#visualization-container[data-v-a861684a] {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\n}\n#visualization-container > .card[data-v-a861684a] {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\n}\n#command-bar[data-v-a861684a],\r\n#info-bar[data-v-a861684a] {\r\n  background-color: #f5f5f5;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button[data-v-a861684a] {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\n}\n#command-bar button[data-v-a861684a]:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-a861684a] {\r\n  font-size: 16px;\n}\n#command-bar[data-v-a861684a] {\r\n  padding: 0 !important;\n}\n#info-bar[data-v-a861684a] {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\n}\n.settings-container[data-v-a861684a] {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\n}\n.settings-container > *[data-v-a861684a] {\r\n  margin: 0 2px;\r\n  cursor: pointer;\n}\n#info-bar svg[data-v-a861684a] {\r\n  font-size: 16px;\n}\n#info-bar .divider[data-v-a861684a] {\r\n  margin: 0 8px;\n}\nsvg[data-v-a861684a]:focus {\r\n  border: none;\n}\n.visualization-card[data-v-a861684a] {\r\n  border-left: 8px solid #eee;\n}\n.active-tab[data-v-a861684a] {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\n}\n[id^='frame-'][data-v-a861684a] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\n}\n.tooltip[data-v-a861684a] {\r\n  display: block !important;\r\n  z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-a861684a] {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-a861684a] {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-a861684a] {\r\n  margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-a861684a] {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-a861684a] {\r\n  margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-a861684a] {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-a861684a] {\r\n  margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-a861684a] {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-a861684a] {\r\n  margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-a861684a] {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-a861684a] {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-a861684a] {\r\n  border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-a861684a] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-a861684a] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\n}\n.custom-frametime[data-v-a861684a] {\r\n  font-size: smaller;\n}\r\n", map: {"version":3,"sources":["C:\\Workspace\\visualization\\src\\Visualization.vue"],"names":[],"mappings":";AAmxCA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,YAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;;EAEA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA;AAEA;EACA,kBAAA;AACA","file":"Visualization.vue","sourcesContent":["<template>\r\n  <div\r\n    class=\"visualization-row\"\r\n    id=\"visualization-container\"\r\n    @click=\"framesClicked\">\r\n    <GlobalEvents\r\n      v-if=\"!readOnly && canInsertTime && settingsClosed\"\r\n      :filter=\"(event) => !event.shiftKey && !event.ctrlKey\"\r\n      @keydown.45=\"insertTime\" />\r\n    <GlobalEvents\r\n      v-if=\"!readOnly && active && settingsClosed\"\r\n      @keydown.83.prevent=\"setHourIni\"\r\n      @keydown.69.prevent=\"setHourEnd\" />\r\n    <GlobalEvents\r\n      v-if=\"active && settingsClosed\"\r\n      @keydown.left.prevent=\"arrowLeft\"\r\n      @keydown.right.prevent=\"arrowRight\"\r\n      @keydown.up.prevent=\"arrowUp\"\r\n      @keydown.down.prevent=\"arrowDown\"\r\n      @keydown.shift.page-down.prevent=\"nextLoopActivate\"\r\n      @keydown.page-down.prevent=\"() => next()\"\r\n      @keydown.page-up.prevent=\"() => prev()\"\r\n      @keydown.shift.page-up.prevent=\"prevLoopActivate\"\r\n      @keydown.36.prevent=\"goToFirstFrame\"\r\n      @keydown.35.prevent=\"goToLastFrame\"\r\n      @keydown.71.prevent=\"dialogs.goTo = true\"\r\n      @keydown.73.prevent=\"dialogs.secondsPerFrame = true\"\r\n      @keydown.76.prevent=\"dialogs.frames = true\"\r\n      @keydown.49.97=\"() => (secondsPerFrame = 1)\"\r\n      @keydown.50.98=\"() => (secondsPerFrame = 2)\"\r\n      @keydown.51.99=\"() => (secondsPerFrame = 3)\"\r\n      @keydown.52.100=\"() => (secondsPerFrame = 4)\"\r\n      @keydown.53.101=\"() => (secondsPerFrame = 5)\" />\r\n    <GlobalEvents\r\n      v-if=\"prevLoop || nextLoop\"\r\n      @keydown=\"breakLoop\"\r\n      v-on:click=\"breakLoop\" />\r\n    <settings\r\n      v-if=\"active\"\r\n      :dialogs-visibility=\"dialogs\"\r\n      :playback-rate=\"playbackRate\"\r\n      :seconds-per-frame=\"secondsPerFrame\"\r\n      :frames-per-row=\"framesPerRow\"\r\n      :number-of-rows=\"numberOfRows\"\r\n      :max-steps=\"maxSteps\"\r\n      :shift-frames=\"shiftFrames\"\r\n      :customGridSize=\"customGridSize\"\r\n      :stretchFrames=\"stretchFrame\"\r\n      @change-playback-rate=\"(value) => (playbackRate = value)\"\r\n      @change-go-to=\"changeHour\"\r\n      @change-seconds-per-frame=\"(value) => (secondsPerFrame = value)\"\r\n      @change-shift-frames=\"(value) => (shiftFrames = value)\"\r\n      @set-frames-selection=\"setFrameSelection\"\r\n      @set-custom-grid-values=\"setCustomGridValues\"\r\n      @close=\"(dialog) => (dialogs[dialog] = false)\" />\r\n    <div\r\n      :class=\"{ 'visualization-card': true, 'active-tab': active }\"\r\n      style=\"width: 100%; padding: 0\">\r\n      <command-bar\r\n        v-show=\"commandBarShow\"\r\n        :read-only=\"readOnly\"\r\n        :video-playing=\"videoPlaying\"\r\n        :video-paused=\"paused\"\r\n        :insert-time=\"canInsertTime\"\r\n        :hour-ini-selected=\"!!hourIniSelected\"\r\n        :hour-end-selected=\"!!hourEndSelected\"\r\n        @prev-loop-activate=\"prevLoopActivate\"\r\n        @next-loop-activate=\"nextLoopActivate\"\r\n        @prev=\"prev\"\r\n        @next=\"next\"\r\n        @go-to=\"dialogs.goTo = true\"\r\n        @open-frame-selection=\"dialogs.frames = true\"\r\n        @open-frames-per-second=\"dialogs.secondsPerFrame = true\"\r\n        @open-blocks=\"openBlocks\"\r\n        @open-playback-rate=\"dialogs.playbackRate = true\"\r\n        @play-or-pause=\"playOrPause\"\r\n        @stop-playing=\"stopPlayingBar\"\r\n        @set-hour-ini=\"setHourIni\"\r\n        @set-hour-end=\"setHourEnd\"\r\n        @insert-time=\"insertTime\"\r\n        @shift-frames=\"dialogs.shiftFrames = true\" />\r\n      <video-progress\r\n        v-if=\"videoProgressBar\"\r\n        v-show=\"videoPlaying\"\r\n        :video-time=\"videoTime\" />\r\n      <info-bar\r\n        :playback-rate=\"playbackRate\"\r\n        :seconds-per-frame=\"secondsPerFrame\"\r\n        :commands-show=\"commandBarShow\"\r\n        :cache=\"useCache\"\r\n        :block-start-time=\"blockStartTime\"\r\n        :video-total-duration=\"videoSliderTotalDuration\"\r\n        :alternative-server=\"alternativeServer\"\r\n        :frames-per-row=\"framesPerRow\"\r\n        :number-of-rows=\"numberOfRows\"\r\n        :hour-ini=\"hourIniSelected\"\r\n        :hour-end=\"hourEndSelected\"\r\n        :show-stretch-frame=\"showStretchFrame\"\r\n        @toogle-commands-visibility=\"toogleCommandsVisibility\"\r\n        @toogle-cache=\"useCache = !useCache\"\r\n        @change-server=\"changeServerClick\"\r\n        @update-stretch-frames=\"(value) => (stretchFrame = value)\" />\r\n      <div\r\n        class=\"visualization-row\"\r\n        v-for=\"rowNumber in numberOfRows\"\r\n        :id=\"'row-' + rowNumber\"\r\n        :key=\"'row-' + rowNumber\"\r\n        style=\"padding: 0px 4px\">\r\n        <div\r\n          v-for=\"(frame, frameNumber) in previousFrames\"\r\n          :key=\"\r\n            numberOfRows +\r\n            '-' +\r\n            framesPerRow +\r\n            '-' +\r\n            getIndex(rowNumber, frameNumber, Positions.previous)\r\n          \"\r\n          style=\"display: none\">\r\n          <span v-html=\"frame.img\" />\r\n        </div>\r\n        <div\r\n          v-for=\"(frame, frameNumber) in nextFrames\"\r\n          :key=\"\r\n            numberOfRows +\r\n            '-' +\r\n            framesPerRow +\r\n            '-' +\r\n            getIndex(rowNumber, frameNumber, Positions.next)\r\n          \"\r\n          style=\"display: none\">\r\n          <span v-html=\"frame.img\" />\r\n        </div>\r\n        <div\r\n          class=\"visualization-col\"\r\n          v-for=\"(frame, frameNumber) in frames.slice(\r\n            framesPerRow * (rowNumber - 1),\r\n            framesPerRow * rowNumber\r\n          )\"\r\n          :key=\"'row-' + rowNumber + '-frame-' + frameNumber + '-' + frame.time\"\r\n          :id=\"`frame-${getIndex(rowNumber, frameNumber, Positions.current)}`\"\r\n          :class=\"{ loaderImg: !!frame.img }\"\r\n          @click=\"\r\n            frame.time\r\n              ? selectFrame(\r\n                  getIndex(rowNumber, frameNumber, Positions.current),\r\n                  frame\r\n                )\r\n              : null\r\n          \">\r\n          <span :id=\"activeFrame ? 'aa' : 0\" style=\"text-align: center\">\r\n            <b>\r\n              {{\r\n                getAudienceTime(\r\n                  frame.time,\r\n                  rowNumber,\r\n                  frameNumber,\r\n                  Positions.current\r\n                )\r\n              }}\r\n            </b>\r\n          </span>\r\n\r\n          <frame\r\n            ref=\"frames\"\r\n            :frame=\"frame\"\r\n            :index=\"getIndex(rowNumber, frameNumber, Positions.current)\"\r\n            :grid-settings=\"{ numberOfRows, framesPerRow }\"\r\n            :initialTime=\"frame.time === hourIniSelected\"\r\n            :endTime=\"frame.time === hourEndSelected\"\r\n            :betweenTime=\"\r\n              frame.time > hourIniSelected && frame.time < hourEndSelected\r\n            \"\r\n            :active=\"\r\n              getIndex(rowNumber, frameNumber, Positions.current) ===\r\n              activeFrame\r\n            \"\r\n            :activeTab=\"active\"\r\n            :videoUrl=\"fInterface ? fInterface.getVideoUrl(frame) : ''\"\r\n            :videoControls=\"videoControls\"\r\n            @startPlaying=\"startPlaying\"\r\n            @stopPlaying=\"stopPlaying\"\r\n            @playPauseStatus=\"changePlayPause\"\r\n            @updateSlider=\"updateSlider\"\r\n            :playback-rate=\"playbackRate\"\r\n            :aspect-ratio=\"aspectRatio\"\r\n            :stretchFrame=\"stretchFrame\"\r\n            style=\"margin: 0 auto\"></frame>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- <settings\r\n      ref=\"settings2\"\r\n      :active=\"active\"\r\n      @goToTime=\"changeHour\"\r\n      @goToBlockInterval=\"changeBlockInterval\"\r\n      @setSplitTime=\"setSplitTime\"\r\n      @setFrameSelection=\"setFrameSelection\"\r\n      @setPlaybackRate=\"\r\n        (rate) => {\r\n          playbackRate = rate\r\n        }\r\n      \"\r\n    >\r\n    </settings> -->\r\n    <!-- <v-dialog v-model=\"dialog\" width=\"500\">\r\n      <div class=\"card\">\r\n        <div class=\"card\"-title class=\"text-h5 grey lighten-2\">\r\n          {{ '  Último bloco disponível até: ' }}\r\n          <v-btn\r\n            @click=\"goToStartBlock\"\r\n            class=\"ml-2\"\r\n            dark\r\n            color=\"success\"\r\n            depressed\r\n          >\r\n            <v-icon left> fa-clock </v-icon>\r\n            {{ timeLastBlock }}\r\n          </v-btn>\r\n          <v-spacer></v-spacer>\r\n          <v-btn color=\"error\" fab small class=\"ml-5\" @click=\"dialog = false\">\r\n            <v-icon dark> fa fa-xmark </v-icon>\r\n          </v-btn>\r\n        </div-title>\r\n      </div>\r\n    </v-dialog>\r\n    <Help :media=\"media\" @close=\"media = null\" />\r\n    <v-dialog\r\n      v-if=\"userMultiTabsGrid\"\r\n      v-model=\"userMultiTabsGridsModel\"\r\n      persistent\r\n      width=\"60%\"\r\n    >\r\n      <div class=\"card\">\r\n        <div class=\"card\"-title class=\"warning text-h5\" primary-title>\r\n          <div class=\"row\" class=\"ma-0\" justify=\"center\" align=\"center\">\r\n            <v-icon dark left style=\"font-size: 24px !important\">\r\n              fa fa-exclamation-triangle\r\n            </v-icon>\r\n            <div style=\"color: white\">{{ $t('form.alert') }}</div>\r\n          </div>\r\n        </div-title>\r\n        <div class=\"card\"-text class=\"justify-center pa-6 grey lighten-2\">\r\n          <h3>\r\n            {{ $t('alerts.userMultiTabsGrid') }}\r\n          </h3>\r\n        </div-text>\r\n        <hr class=\"divider\" class=\"grey lighten-1\"></span>\r\n        <div class=\"card\"-actions class=\"grey lighten-2 justify-center\">\r\n          <v-btn color=\"error\" ml-5 @click=\"userMultiTabsGrid = false\">\r\n            <v-icon left color=\"white\">fa fa-times</v-icon>\r\n            {{ $t('form.close') }}\r\n          </v-btn>\r\n        </div-actions>\r\n      </div>\r\n    </v-dialog> -->\r\n  </div>\r\n</template>\r\n<script>\r\nimport Frame from './components/Frame.vue'\r\nimport FramesInterface from './utils/FramesInterface.js'\r\nimport FramesService from './services/FramesService.js'\r\n\r\nimport Commands from './components/Commands.vue'\r\nimport Infos from './components/Infos.vue'\r\nimport VideoProgress from './components/VideoProgress.vue'\r\nimport Settings from './components/Settings.vue'\r\n\r\nconst Positions = Object.freeze({\r\n  previous: 0,\r\n  current: 1,\r\n  next: 2,\r\n})\r\n\r\nexport default {\r\n  name: 'visualization-container',\r\n  props: {\r\n    value: {\r\n      type: Boolean,\r\n      required: true,\r\n    },\r\n    date: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    channel: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    startAudienceTime: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    endAudienceTime: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    videoProgressBar: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    jumpOnInsert: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    removeSelectionOnInsert: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    framesFormat: {\r\n      type: [Number, String],\r\n      default: 7,\r\n    },\r\n    maxSize: {\r\n      type: Number,\r\n    },\r\n    videoControls: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    readOnly: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    maxSteps: {\r\n      type: Number,\r\n      default: 1,\r\n    },\r\n    customGridSize: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    showStretchFrame: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n  },\r\n  components: {\r\n    Frame,\r\n    CommandBar: Commands,\r\n    InfoBar: Infos,\r\n    VideoProgress,\r\n    Settings,\r\n    // Help,\r\n  },\r\n  data() {\r\n    return {\r\n      Positions,\r\n      updatingChannel: null,\r\n      dialog: false,\r\n      timeLastBlock: null,\r\n      alternativeServer: false,\r\n      useCache: true,\r\n      numberOfRows: 1,\r\n      framesPerRow: 5,\r\n      secondsPerFrame: 1,\r\n      fInterface: null,\r\n      velocity: 1,\r\n      frames: [],\r\n      previousFrames: [],\r\n      nextFrames: [],\r\n      channelCode: 0,\r\n      videoPlaying: false,\r\n      activeFrame: null,\r\n      activeVideo: null,\r\n      videoTime: 0,\r\n      videoTotalTime: null,\r\n      progressVideoDrag: false,\r\n      hourIniSelected: false,\r\n      hourEndSelected: false,\r\n      canInsertTime: false,\r\n      lastHeight: 0,\r\n      loopInterval: null,\r\n      nextLoop: false,\r\n      prevLoop: false,\r\n      videoSliderTotalDuration: 900,\r\n      blockStartTime: null,\r\n      media: null,\r\n      changeServer: false,\r\n      userMultiTabsGrid: false,\r\n      userMultiTabsGridsModel: true,\r\n      playbackRate: 1,\r\n      paused: false,\r\n      commandBarShow: true,\r\n      dialogs: {\r\n        playbackRate: false,\r\n        goTo: false,\r\n        secondsPerFrame: false,\r\n        frames: false,\r\n        shiftFrames: false,\r\n      },\r\n      lastNext: 0,\r\n      lastPrev: 0,\r\n      shiftFrames: 0,\r\n      aspectRatio: 11 / 9,\r\n      showCustomInputs: false,\r\n      stretchFrame: false,\r\n    }\r\n  },\r\n  async created() {\r\n    this.changeServer = this.serverOfFrames === 'alternative'\r\n    this.alternativeServer = this.serverOfFrames === 'alternative'\r\n\r\n    const settings = [\r\n      {\r\n        framesPerRow: 1,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 2,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 3,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 3,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        framesPerRow: 4,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 4,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        framesPerRow: 5,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 5,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        framesPerRow: 6,\r\n        numberOfRows: 1,\r\n      },\r\n      {\r\n        framesPerRow: 6,\r\n        numberOfRows: 2,\r\n      },\r\n      {\r\n        //Custom (item 11)\r\n        framesPerRow: 7,\r\n        numberOfRows: 3,\r\n      },\r\n    ]\r\n\r\n    // Os valores custom são guardados no local storage e não na base de dados\r\n    const customValues = JSON.parse(localStorage.getItem('customGridValues'))\r\n\r\n    if (this.framesFormat == '11' && !!customValues) {\r\n      this.numberOfRows = customValues[0]\r\n      this.framesPerRow = customValues[1]\r\n    } else {\r\n      const storedOnDb = settings[parseInt(this.framesFormat) - 1]\r\n      this.framesPerRow = storedOnDb.framesPerRow\r\n      this.numberOfRows = storedOnDb.numberOfRows\r\n    }\r\n\r\n    await this.createFramesInterface()\r\n    this.$nextTick(this.resize)\r\n  },\r\n  methods: {\r\n    stopVideoPlaying(array) {\r\n      for (const frame of array || this.$refs.frames) {\r\n        if (\r\n          frame.videoStatus === frame.Status.playing ||\r\n          frame.videoStatus === frame.Status.paused\r\n        ) {\r\n          frame.stop(false)\r\n        }\r\n      }\r\n      this.activeVideo = null\r\n    },\r\n    toogleCommandsVisibility() {\r\n      this.commandBarShow = !this.commandBarShow\r\n      this.$nextTick(this.resize)\r\n    },\r\n    framesClicked(e) {\r\n      if (e.target.parentNode.id != 'insert') {\r\n        this.active = true\r\n      }\r\n    },\r\n    async goToStartBlock() {\r\n      try {\r\n        const d = new Date()\r\n        let timestamp = Date.UTC(\r\n          d.getFullYear(),\r\n          d.getMonth(),\r\n          d.getDate(),\r\n          d.getHours(),\r\n          d.getMinutes(),\r\n          d.getSeconds()\r\n        )\r\n\r\n        const response = (\r\n          await FramesService.getNextAvailableBlock({\r\n            channel: this.channel,\r\n            time: timestamp / 1000,\r\n          })\r\n        ).data\r\n\r\n        this.dialog = false\r\n        this.changeHour(this.convertToAudienceTime(response.data.start, ':'))\r\n      } catch (err) {\r\n        // console.error(err)\r\n      }\r\n    },\r\n    async checkAvailableBlock() {\r\n      try {\r\n        const d = new Date()\r\n        let timestamp = Date.UTC(\r\n          d.getFullYear(),\r\n          d.getMonth(),\r\n          d.getDate(),\r\n          d.getHours(),\r\n          d.getMinutes(),\r\n          d.getSeconds()\r\n        )\r\n\r\n        const response = (\r\n          await FramesService.getNextAvailableBlock({\r\n            channel: this.channel,\r\n            time: timestamp / 1000,\r\n          })\r\n        ).data\r\n\r\n        this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':')\r\n        this.dialog = true\r\n        if (!response.status) {\r\n          this.timeLastBlock = 'N/D'\r\n        }\r\n      } catch (err) {\r\n        // console.error(err)\r\n      }\r\n    },\r\n    updateSlider(videoStartTime, time) {\r\n      // * atualizar slider se estiver fora do range definido previamente\r\n      if (\r\n        time < this.blockStartTime ||\r\n        time > this.blockStartTime ||\r\n        videoStartTime > this.blockStartTime + this.videoSliderTotalDuration\r\n      ) {\r\n        this.blockStartTime = videoStartTime\r\n        this.videoSliderTotalDuration = 900\r\n      }\r\n    },\r\n    nextLoopActivate() {\r\n      this.breakLoop()\r\n      this.loopInterval = setInterval(\r\n        () => this.next({ ignoreTime: true }),\r\n        this.swapImagesDelay\r\n      )\r\n      setTimeout(() => {\r\n        this.nextLoop = true\r\n      }, 0)\r\n    },\r\n    prevLoopActivate() {\r\n      this.breakLoop()\r\n      this.loopInterval = setInterval(\r\n        () => this.prev({ ignoreTime: true }),\r\n        this.swapImagesDelay\r\n      )\r\n      setTimeout(() => {\r\n        this.prevLoop = true\r\n      }, 0)\r\n    },\r\n    breakLoop() {\r\n      clearInterval(this.loopInterval)\r\n      this.loopInterval = null\r\n      this.nextLoop = false\r\n      this.prevLoop = false\r\n    },\r\n    changePlayPause(status) {\r\n      this.paused = !status\r\n    },\r\n    resize(height = this.lastHeight) {\r\n      this.lastHeight = height\r\n      if (this.$refs.frames) {\r\n        for (let frame of this.$refs.frames) {\r\n          frame.resize(height)\r\n        }\r\n      }\r\n      this.$emit('resized')\r\n    },\r\n    async goToFirstFrame() {\r\n      let frames = this.$refs.frames\r\n\r\n      let audienceTime = null\r\n      if (frames.length > 0) {\r\n        let frame = frames[0].frame\r\n        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n      }\r\n      if (audienceTime) {\r\n        const [hours, minutes, seconds] = audienceTime.split(':')\r\n        const totalSeconds =\r\n          parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)\r\n        if (totalSeconds >= 9000)\r\n          this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\r\n        else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true))\r\n      }\r\n    },\r\n    async goToLastFrame() {\r\n      let frames = this.$refs.frames\r\n      let audienceTime = null\r\n      if (frames.length > 0) {\r\n        let frame = frames[0].frame\r\n\r\n        audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n      }\r\n      if (audienceTime) {\r\n        this.changeHour(this.getLastFirtsBlockTime(audienceTime))\r\n      }\r\n    },\r\n    getLastFirtsBlockTime(time, first = false) {\r\n      if (time.indexOf(':') !== -1) {\r\n        time = time.replace(/:/g, '')\r\n      }\r\n      let h, m, newTime\r\n      const t = time.match(/.{1,2}/g)\r\n      if (t[0] && t[1]) {\r\n        h = parseInt(t[0])\r\n        m = parseInt(t[1])\r\n      }\r\n      if (h < 26) {\r\n        if (m < 15)\r\n          if (first) newTime = t[0] + ':00:00'\r\n          else newTime = t[0] + ':14:59'\r\n        else if (m < 30)\r\n          if (first) newTime = t[0] + ':15:00'\r\n          else newTime = t[0] + ':29:59'\r\n        else if (m < 45)\r\n          if (first) newTime = t[0] + ':30:00'\r\n          else newTime = t[0] + ':44:59'\r\n        else if (first) newTime = t[0] + ':45:00'\r\n        else newTime = t[0] + ':59:59'\r\n      } else {\r\n        if (m < 15)\r\n          if (first) newTime = '26:00:00'\r\n          else newTime = '26:14:59'\r\n        else {\r\n          if (first) newTime = '26:15:00'\r\n          else newTime = '26:29:59'\r\n        }\r\n      }\r\n      return newTime\r\n    },\r\n    openBlocks() {\r\n      this.$refs.settings2?.openBlocks()\r\n    },\r\n    playOrPause() {\r\n      const array = this.$refs.frames.filter((fc) => !!fc.active)\r\n      if (array.length === 1) {\r\n        const frame = array[0]\r\n        frame.playOrPause(this.playbackRate)\r\n      }\r\n    },\r\n    stopPlayingBar() {\r\n      for (let ref of this.$refs.frames) {\r\n        if (\r\n          ref.videoStatus === ref.Status.playing ||\r\n          ref.videoStatus === ref.Status.paused\r\n        ) {\r\n          ref.stop(false)\r\n        }\r\n      }\r\n    },\r\n    async setFrameSelection(selected) {\r\n      this.frames = this.loadingArray\r\n      const settings = [\r\n        {\r\n          framesPerRow: 1,\r\n          numberOfRows: 1,\r\n        },\r\n        {\r\n          framesPerRow: 2,\r\n          numberOfRows: 1,\r\n        },\r\n        {\r\n          framesPerRow: 3,\r\n          numberOfRows: 1,\r\n        },\r\n        {\r\n          framesPerRow: 3,\r\n          numberOfRows: 2,\r\n        },\r\n        {\r\n          framesPerRow: 4,\r\n          numberOfRows: 1,\r\n        },\r\n        {\r\n          framesPerRow: 4,\r\n          numberOfRows: 2,\r\n        },\r\n        {\r\n          framesPerRow: 5,\r\n          numberOfRows: 1,\r\n        },\r\n        {\r\n          framesPerRow: 5,\r\n          numberOfRows: 2,\r\n        },\r\n        {\r\n          framesPerRow: 6,\r\n          numberOfRows: 1,\r\n        },\r\n        {\r\n          framesPerRow: 6,\r\n          numberOfRows: 2,\r\n        },\r\n        {\r\n          //Custom (item 11)\r\n          framesPerRow: 7,\r\n          numberOfRows: 3,\r\n        },\r\n      ]\r\n\r\n      const formatSelected = settings[selected - 1]\r\n      this.framesPerRow = formatSelected.framesPerRow\r\n      this.numberOfRows = formatSelected.numberOfRows\r\n\r\n      await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\r\n      this.getFramesArray()\r\n      this.$nextTick(this.resize)\r\n      this.$emit('frames-format-changed', selected)\r\n    },\r\n    async setCustomGridValues(customValues) {\r\n      this.numberOfRows = customValues[0]\r\n      this.framesPerRow = customValues[1]\r\n      localStorage.setItem('customGridValues', JSON.stringify(customValues))\r\n      await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\r\n      this.getFramesArray()\r\n      this.$nextTick(this.resize)\r\n      this.$emit('frames-format-changed', 11)\r\n    },\r\n    getFramesArray() {\r\n      this.frames = this.fInterface.getFrames(Positions.current)\r\n      this.nextFrames = this.fInterface.getFrames(Positions.next)\r\n      this.previousFrames = this.fInterface.getFrames(Positions.previous)\r\n\r\n      const div = document.createElement('div')\r\n      div.innerHTML = this.frames[0].image\r\n      const newAspectRatio =\r\n        div.getElementsByTagName('img')[0]?.naturalWidth /\r\n        div.getElementsByTagName('img')[0]?.naturalHeight\r\n\r\n      this.aspectRatio = isNaN(newAspectRatio)\r\n        ? this.aspectRatio\r\n        : newAspectRatio\r\n\r\n      this.$nextTick(this.resize)\r\n\r\n      const frame = this.frames.find((f) => f.blockStart)\r\n      if (frame && this.alternativeServer) {\r\n        this.$emit(\r\n          'new-block',\r\n          frame.title?.match(/[0-9]{3}\\/(?:[0-9]+_?)+/)[0]\r\n        )\r\n      }\r\n    },\r\n    async createFramesInterface(startTime = this.startAudienceTime) {\r\n      this.frames = this.loadingArray\r\n      // let ch = this.channel\r\n      // let associationTMP = {\r\n      //   1735073: 1,\r\n      //   1735074: 139,\r\n      //   1735075: 3,\r\n      //   1735076: 132,\r\n      // }\r\n      // //\r\n      // this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch\r\n\r\n      const t = startTime.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n      // * iniciar slider\r\n      this.blockStartTime = time\r\n      this.fInterface = await new FramesInterface(\r\n        this.channel,\r\n        this.numberOfRows,\r\n        this.framesPerRow,\r\n        time,\r\n        this.startAudienceTime,\r\n        this.useCache,\r\n        this.shiftFrames\r\n      )\r\n      await this.fInterface.init()\r\n\r\n      this.getFramesArray()\r\n\r\n      const div = document.createElement('div')\r\n      div.innerHTML = this.frames[0].image\r\n\r\n      this.aspectRatio =\r\n        div.getElementsByTagName('img')[0].naturalWidth /\r\n        div.getElementsByTagName('img')[0].naturalHeight\r\n\r\n      this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n\r\n      this.activeVideo = null\r\n    },\r\n    getIndex(rowNumber, frameIndex, position) {\r\n      const baseOffset = this.framesPerRow * this.numberOfRows * position\r\n      const rowOffset = (rowNumber - 1) * this.framesPerRow\r\n      return baseOffset + rowOffset + frameIndex\r\n    },\r\n    getAudienceTime(frameTime, rowNumber, frameNumber, position) {\r\n      if (!frameTime) {\r\n        return 'Loading...'\r\n      } else if (\r\n        this.getIndex(rowNumber, frameNumber, position) === this.activeVideo\r\n      ) {\r\n        return this.convertToAudienceTime(this.videoTime)\r\n      } else {\r\n        return this.convertToAudienceTime(frameTime)\r\n      }\r\n    },\r\n    dateInUtc(miliSeconds) {\r\n      var date = new Date(miliSeconds)\r\n      var utc = new Date(\r\n        date.getUTCFullYear(),\r\n        date.getUTCMonth(),\r\n        date.getUTCDate(),\r\n        date.getUTCHours(),\r\n        date.getUTCMinutes(),\r\n        date.getUTCSeconds()\r\n      )\r\n      return utc\r\n    },\r\n    convertToAudienceTime(time, separator = ':') {\r\n      const d = this.getDateParts()\r\n      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\r\n\r\n      let hour = this.dateInUtc(time * 1000)\r\n        .toTimeString()\r\n        .split(' ')[0]\r\n        .split(':')\r\n        .map(Number)\r\n\r\n      if (time > limit && time <= limit + this.startAudienceSeconds) {\r\n        hour[0] = 24 + hour[0]\r\n      }\r\n      return hour\r\n        .map((part) => (part > 9 ? part.toString() : '0' + part))\r\n        .join(separator)\r\n    },\r\n    getDateParts(date = this.date) {\r\n      const data = /(?<year>\\d{4})-(?<month>\\d{2})-(?<day>\\d{2})/.exec(\r\n        date\r\n      )?.groups\r\n      if (data) {\r\n        return {\r\n          year: parseInt(data.year),\r\n          month: parseInt(data.month) - 1,\r\n          day: parseInt(data.day),\r\n        }\r\n      }\r\n      return {\r\n        year: null,\r\n        month: null,\r\n        day: null,\r\n      }\r\n    },\r\n    selectFrame(index, frame) {\r\n      const d = this.getDateParts()\r\n      const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\r\n      const frameTime = frame?.time\r\n\r\n      if (frameTime - (this.startAudienceSeconds + limit) <= 0) {\r\n        if (this.hourIniSelected === true) {\r\n          this.hourIniSelected = frameTime\r\n\r\n          if (\r\n            this.hourEndSelected &&\r\n            this.hourIniSelected > this.hourEndSelected\r\n          ) {\r\n            this.hourEndSelected = false\r\n          }\r\n        } else if (this.hourEndSelected === true) {\r\n          if (frameTime > this.hourIniSelected) {\r\n            this.hourEndSelected = frameTime\r\n            this.canInsertTime = true\r\n          } else {\r\n            this.hourEndSelected = false\r\n          }\r\n        }\r\n      }\r\n\r\n      if (this.activeFrame !== index) {\r\n        // ? Se clicar no frame diferente de onde está a dar play, faz pausa\r\n        const array = this.$refs.frames.filter(\r\n          (fc) => fc.videoStatus === fc.Status.playing\r\n        )\r\n        if (array.length === 1) {\r\n          const frame = array[0]\r\n          frame.playOrPause()\r\n        }\r\n        this.activeVideo = null\r\n        this.activeFrame = index\r\n      }\r\n    },\r\n    setHourIni() {\r\n      this.canInsertTime = true\r\n      this.hourIniSelected = true\r\n      document.getElementById(`frame-${this.activeFrame}`).click()\r\n      this.$emit('setHourIni', {\r\n        hour_ini: this.hourIniSelected\r\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n          : null,\r\n      })\r\n    },\r\n    setHourEnd() {\r\n      this.canInsertTime = true\r\n      this.hourEndSelected = true\r\n      document.getElementById(`frame-${this.activeFrame}`).click()\r\n    },\r\n    //* Navegação\r\n    arrowRight() {\r\n      if (this.checkLimitRight(false)) {\r\n        if (\r\n          this.activeFrame ===\r\n          this.numberOfRows * this.framesPerRow * 2 - 1\r\n        ) {\r\n          this.next()\r\n        } else {\r\n          this.activeFrame++\r\n        }\r\n      }\r\n    },\r\n    arrowLeft() {\r\n      if (this.checkLimitLeft(false)) {\r\n        if (this.activeFrame === this.numberOfRows * this.framesPerRow) {\r\n          this.prev({ stayOnLast: true })\r\n        } else {\r\n          this.activeFrame--\r\n        }\r\n      }\r\n    },\r\n    arrowUp() {\r\n      const relativePosition =\r\n        this.activeFrame - this.numberOfRows * this.framesPerRow\r\n      const currentRow = Math.floor(relativePosition / this.framesPerRow)\r\n      if (currentRow > 0) {\r\n        this.activeFrame -= this.framesPerRow\r\n      }\r\n    },\r\n\r\n    arrowDown() {\r\n      const relativePosition =\r\n        this.activeFrame - this.numberOfRows * this.framesPerRow\r\n      const currentRow = Math.floor(relativePosition / this.framesPerRow)\r\n\r\n      if (currentRow < this.numberOfRows - 1) {\r\n        this.activeFrame += this.framesPerRow\r\n      }\r\n    },\r\n    checkLimitRight(value) {\r\n      const hours = this.endAudienceTime.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const high = Date.UTC(\r\n        d.year,\r\n        d.month,\r\n        d.day,\r\n        hours[0],\r\n        parseInt(hours[1]) + 30,\r\n        hours[2]\r\n      )\r\n\r\n      if (value) {\r\n        return (\r\n          high >\r\n          (this.fInterface.getCurrentTime() +\r\n            this.numberOfRows * this.framesPerRow -\r\n            1) *\r\n            1000\r\n        )\r\n      } else {\r\n        return high > this.fInterface.getCurrentTime() * 1000\r\n      }\r\n    },\r\n    checkLimitLeft(value) {\r\n      const hours = this.startAudienceTime.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const low = Date.UTC(d.year, d.month, d.day, hours[0], hours[1], hours[2])\r\n\r\n      if (value) {\r\n        return low <= (this.fInterface.getCurrentTime() - 1) * 1000\r\n      } else {\r\n        return (\r\n          low <\r\n          (this.fInterface.getCurrentTime() +\r\n            this.activeFrame -\r\n            this.numberOfRows * this.framesPerRow) *\r\n            1000\r\n        )\r\n      }\r\n    },\r\n    async next(config = {}) {\r\n      if (\r\n        (config.ignoreTime ||\r\n          Date.now() - this.lastNext > this.swapImagesDelay) &&\r\n        this.checkLimitRight(true) &&\r\n        !this.navigationPending\r\n      ) {\r\n        this.navigationPending = true\r\n        this.stopVideoPlaying()\r\n\r\n        this.navigationPending = await new Promise((resolve) => {\r\n          this.fInterface\r\n            .loadNextFrames()\r\n            .then(() => {\r\n              this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n\r\n              this.getFramesArray()\r\n              this.lastNext = Date.now()\r\n              resolve(false)\r\n            })\r\n            .catch(() => {\r\n              resolve(false)\r\n            })\r\n        })\r\n      } else {\r\n        // console.error('next blocked')\r\n      }\r\n    },\r\n    async prev(config = {}) {\r\n      if (\r\n        (config.ignoreTime ||\r\n          Date.now() - this.lastPrev > this.swapImagesDelay) &&\r\n        this.checkLimitLeft(true) &&\r\n        !this.navigationPending\r\n      ) {\r\n        this.navigationPending = true\r\n        this.stopVideoPlaying()\r\n\r\n        this.navigationPending = await new Promise((resolve) => {\r\n          this.fInterface\r\n            .loadPrevFrames()\r\n            .then(() => {\r\n              if (config.stayOnLast) {\r\n                this.activeFrame = this.getIndex(\r\n                  this.numberOfRows,\r\n                  this.framesPerRow - 1,\r\n                  Positions.current\r\n                )\r\n              } else {\r\n                this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n              }\r\n\r\n              this.getFramesArray()\r\n              this.lastPrev = Date.now()\r\n              resolve(false)\r\n            })\r\n            .catch(() => {\r\n              resolve(false)\r\n            })\r\n        })\r\n      } else {\r\n        // console.error('prev blocked')\r\n      }\r\n    },\r\n    async setStartTime(time) {\r\n      if (time.indexOf(':') !== -1) {\r\n        time = time.replace(/:/g, '')\r\n      }\r\n      const t = time.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n      // this.frames = this.loadingArray\r\n\r\n      await this.fInterface.changeTime(setTime)\r\n\r\n      this.getFramesArray()\r\n\r\n      this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n\r\n      this.activeVideo = null\r\n\r\n      return true\r\n    },\r\n    hourToTimeStamp(time) {\r\n      if (time.indexOf(':') !== -1) {\r\n        time = time.replace(/:/g, '')\r\n      }\r\n      const t = time.match(/.{1,2}/g)\r\n      const d = this.getDateParts()\r\n      const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n\r\n      return setTime\r\n    },\r\n    changeHour(value) {\r\n      if (value) {\r\n        return new Promise((resolve) => {\r\n          setTimeout(async () => {\r\n            this.stopVideoPlaying()\r\n\r\n            await this.setStartTime(value, true)\r\n            resolve()\r\n          }, 0)\r\n        })\r\n      }\r\n    },\r\n    changeBlockInterval(value) {\r\n      this.changeHour(value.ini)\r\n      let time_ini, time_end\r\n      time_ini = this.hourToTimeStamp(value.ini)\r\n      time_end = this.hourToTimeStamp(value.end)\r\n      this.videoSliderTotalDuration = time_end - time_ini\r\n      this.$refs.frames[0].changeSettings(time_ini)\r\n      this.blockStartTime = time_ini\r\n    },\r\n    //eslint-disable-next-line\r\n    async updateVideoTime(index, videoTime) {\r\n      this.activeVideo = index\r\n      this.videoTime = videoTime\r\n    },\r\n    //eslint-disable-next-line\r\n    updateVideoStatus(currentTime) {\r\n      if (!this.progressVideoDrag) {\r\n        // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS\r\n        // this.updateProgress(null, currentTime)\r\n      }\r\n    },\r\n    async startPlaying(frame, totalTime) {\r\n      const array = this.$refs.frames.filter(\r\n        (fc) => fc.frame.time !== frame.time\r\n      )\r\n      this.stopVideoPlaying(array)\r\n\r\n      this.videoTotalTime = totalTime\r\n      this.videoPlaying = true\r\n    },\r\n    stopPlaying() {\r\n      this.videoTotalTime = null\r\n      this.videoPlaying = false\r\n      this.paused = false\r\n    },\r\n    insertTime() {\r\n      this.$emit('timeToInsert', {\r\n        channel: this.channel,\r\n        hour_ini: this.hourIniSelected\r\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n          : null,\r\n        hour_end: this.hourEndSelected\r\n          ? this.convertToAudienceTime(this.hourEndSelected, '')\r\n          : null,\r\n        force: false,\r\n      })\r\n\r\n      if (this.jumpOnInsert) {\r\n        this.changeHour(\r\n          this.convertToAudienceTime(\r\n            this.hourEndSelected || this.hourIniSelected\r\n          )\r\n        ).then(() => {\r\n          this.activeFrame = this.getIndex(1, 1, Positions.current)\r\n        })\r\n      }\r\n\r\n      if (this.removeSelectionOnInsert) {\r\n        this.hourIniSelected = null\r\n        this.hourEndSelected = null\r\n        this.canInsertTime = false\r\n      }\r\n    },\r\n    insertTimeForce() {\r\n      this.$emit('timeToInsert', {\r\n        channel: this.channel,\r\n        hour_ini: this.hourIniSelected\r\n          ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n          : null,\r\n        hour_end: this.hourEndSelected\r\n          ? this.convertToAudienceTime(this.hourEndSelected, '')\r\n          : null,\r\n        force: true,\r\n      })\r\n\r\n      if (this.removeSelectionOnInsert) {\r\n        this.hourIniSelected = null\r\n        this.hourEndSelected = null\r\n        this.canInsertTime = false\r\n      }\r\n    },\r\n    async getChannelMedia() {\r\n      // this.media = (await ChannelService.show(this.channel)).data.MEDIA\r\n    },\r\n    async changeServerClick() {\r\n      this.changeServer = !this.changeServer\r\n      this.alternativeServer = this.changeServer\r\n\r\n      sessionStorage.setItem(\r\n        'server',\r\n        this.changeServer ? 'alternative' : 'default'\r\n      )\r\n\r\n      await this.createFramesInterface(\r\n        this.convertToAudienceTime(\r\n          this.$refs.frames.find((frame) => frame.index === this.activeFrame)\r\n            .frame.time,\r\n          ''\r\n        )\r\n      )\r\n\r\n      this.$nextTick(this.resize)\r\n    },\r\n  },\r\n  computed: {\r\n    swapImagesDelay() {\r\n      return 0\r\n      // return this.numberOfRows * this.framesPerRow * 15\r\n    },\r\n    active: {\r\n      get() {\r\n        return this.value\r\n      },\r\n      set(value) {\r\n        this.$emit('input', value)\r\n      },\r\n    },\r\n    settingsClosed() {\r\n      return !Object.values(this.dialogs).find((v) => v)\r\n    },\r\n    startAudienceSeconds() {\r\n      const t = this.startAudienceTime.match(/.{1,2}/g)\r\n      return parseInt(t[0] * 3600 + t[1] * 60 + t[2])\r\n    },\r\n    loadingArray() {\r\n      return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())\r\n    },\r\n    serverOfFrames() {\r\n      return sessionStorage.getItem('server')\r\n    },\r\n  },\r\n  beforeDestroy() {\r\n    sessionStorage.setItem('server', 'default')\r\n  },\r\n  watch: {\r\n    async secondsPerFrame() {\r\n      const activeF =\r\n        this.frames[this.activeFrame - this.numberOfRows * this.framesPerRow]\r\n\r\n      if (activeF) {\r\n        this.changeHour(this.getAudienceTime(activeF.time, 0, 0, 0))\r\n        this.fInterface.setCurrentStep(this.secondsPerFrame)\r\n        await this.fInterface.loadFrames()\r\n        this.getFramesArray()\r\n      }\r\n    },\r\n    async shiftFrames() {\r\n      this.createFramesInterface()\r\n    },\r\n    framesFormat(value) {\r\n      this.setFrameSelection(value)\r\n    },\r\n    active() {\r\n      // ? sempre que trocamos de tabs dar reset as horas selected\r\n      if (this.removeSelectionOnInsert) {\r\n        this.hourIniSelected = false\r\n        this.hourEndSelected = false\r\n      }\r\n    },\r\n    useCache() {\r\n      this.createFramesInterface()\r\n    },\r\n    hourIniSelected(value) {\r\n      if (value) {\r\n        sessionStorage.setItem(\r\n          'currentTimeFrames',\r\n          this.convertToAudienceTime(this.hourIniSelected, '')\r\n        )\r\n      } else {\r\n        sessionStorage.removeItem('currentTimeFrames')\r\n      }\r\n    },\r\n    activeFrame(value) {\r\n      if (value) {\r\n        this.stopPlayingBar()\r\n      }\r\n    },\r\n    channel() {\r\n      this.updatingChannel = new Promise((resolve, reject) => {\r\n        try {\r\n          this.createFramesInterface()\r\n          resolve(true)\r\n        } catch (err) {\r\n          reject(err)\r\n        }\r\n      })\r\n    },\r\n    stretchFrame() {\r\n      this.$nextTick(this.resize)\r\n    },\r\n  },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 5px;\r\n}\r\n\r\n.visualization-divider {\r\n  display: block;\r\n  flex: 1 1 100%;\r\n  height: 0px;\r\n  max-height: 0px;\r\n  opacity: 1;\r\n  transition: inherit;\r\n  border-style: solid;\r\n  border-width: thin 0 0 0;\r\n  border-color: rgba(0, 0, 0, 0.12);\r\n  margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n  align-self: stretch;\r\n  border-width: 0 thin 0 0;\r\n  display: inline-flex;\r\n  height: inherit;\r\n  margin-left: -1px;\r\n  max-height: 100%;\r\n  max-width: 0px;\r\n  vertical-align: text-bottom;\r\n  width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n  flex-basis: 0;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n  padding: 12px;\r\n  width: 100%;\r\n  transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n  overflow-wrap: break-word;\r\n  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\r\n}\r\n\r\n.visualization-justify-center,\r\n* >>> .visualization-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n  align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n  max-width: 100% !important;\r\n  margin: 0 auto !important;\r\n  height: 100%;\r\n  border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n  border-radius: 0 !important;\r\n  font-size: 12px;\r\n  width: 100%;\r\n  box-shadow: none;\r\n  height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n  background-color: #f5f5f5;\r\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n}\r\n#command-bar button {\r\n  width: 42px;\r\n  height: 36px;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n  cursor: pointer;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n  padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n  padding: 4px;\r\n  font-size: 14px;\r\n  position: relative;\r\n}\r\n\r\n.settings-container {\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n  margin: 0 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n  font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n  margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n  border: none;\r\n}\r\n\r\n.visualization-card {\r\n  border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n  border-left: 8px solid var(--visualization-primary) !important;\r\n  border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n  padding: 1px;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n  display: block !important;\r\n  z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n  background: var(--visualization-primary);\r\n  color: white;\r\n  border-radius: 16px;\r\n  padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  position: absolute;\r\n  margin: 5px;\r\n  border-color: var(--visualization-primary);\r\n  z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n  border-width: 5px 5px 0 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  bottom: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n  margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n  border-width: 0 5px 5px 5px;\r\n  border-left-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  top: -5px;\r\n  left: calc(50% - 5px);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n  margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n  border-width: 5px 5px 5px 0;\r\n  border-left-color: transparent !important;\r\n  border-top-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  left: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n  margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n  border-width: 5px 0 5px 5px;\r\n  border-top-color: transparent !important;\r\n  border-right-color: transparent !important;\r\n  border-bottom-color: transparent !important;\r\n  right: -5px;\r\n  top: calc(50% - 5px);\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n  background: #f9f9f9;\r\n  color: black;\r\n  padding: 24px;\r\n  border-radius: 5px;\r\n  box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n  border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transition: opacity 0.15s;\r\n}\r\n\r\n.custom-frametime {\r\n  font-size: smaller;\r\n}\r\n</style>\r\n"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-27fc3944";
+  const __vue_scope_id__ = "data-v-a861684a";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */