@twab/visualization 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/visualization.js +41 -36
  2. package/package.json +1 -1
package/dist/visualization.js CHANGED
@@ -110,7 +110,7 @@ function registerIcons () {
110
110
 
111
111
  var index = {
112
112
  async install(Vue, settings = {}) {
113
- if (!settings.client || !settings.base_url || !settings.theme?.primary) {
113
+ if (!settings.client || !settings.base_url || !settings.base_alternative_url || !settings.theme?.primary) {
114
114
  console.error('Visualization: Missing required settings');
115
115
  return
116
116
  }
@@ -126,9 +126,10 @@ var index = {
126
126
  registerIcons();
127
127
  Vue.component('font-awesome-icon', FontAwesomeIcon);
128
128
 
129
- sessionStorage.setItem('server', 'principal');
129
+ // sessionStorage.setItem('server', 'default')
130
130
  sessionStorage.setItem('client', settings.client);
131
131
  sessionStorage.setItem('base_url', settings.base_url);
132
+ sessionStorage.setItem('base_alternative_url', settings.base_alternative_url);
132
133
 
133
134
  const headTag = document.getElementsByTagName('head')[0];
134
135
  const styleTag = document.createElement('style');
@@ -148,6 +149,7 @@ var index = {
148
149
  styleTag.innerHTML = themeCss;
149
150
  headTag.appendChild(styleTag);
150
151
 
152
+
151
153
  Vue.component(
152
154
  'Visualization',
153
155
  (await Promise.resolve().then(function () { return Visualization; })).default
@@ -758,20 +760,24 @@ __vue_render__$5._withStripped = true;
758
760
  undefined
759
761
  );
760
762
 
761
- const Api = axios.create({
762
- //baseURL: process.env.VUE_APP_FRAMES_SERVER,
763
- baseURL: sessionStorage.getItem('base_url'),
764
- });
763
+ const API = function() {
764
+ const alternative = sessionStorage.getItem('server') === 'alternative';
765
+ const Api = axios.create({
766
+ baseURL: sessionStorage.getItem(`base${alternative ? '_alternative' : ''}_url`),
767
+ });
768
+
769
+ Api.interceptors.request.use((config) => {
770
+ config.params = config.params || {};
771
+ config.params.Client = sessionStorage.getItem('client') || 'UNKNOWN';
772
+ if (alternative) {
773
+ config.params.BlockPathConfig = 'AlernativeTvConfig';
774
+ }
765
775
 
766
- Api.interceptors.request.use((config) => {
767
- config.params = config.params || {};
768
- config.params.Client = sessionStorage.getItem('client') || 'UNKNOWN';
769
- if (sessionStorage.getItem('server') === 'alternative') {
770
- config.params.BlockPathConfig = 'AlernativeTvConfig';
771
- }
776
+ return config
777
+ });
778
+ return Api
779
+ };
772
780
 
773
- return config
774
- });
775
781
 
776
782
  var FramesService = {
777
783
  getBlockRequest({
@@ -784,7 +790,7 @@ var FramesService = {
784
790
  useCache = true,
785
791
  signal,
786
792
  } = {}) {
787
- return Api.get(`Get${direction}FramesBlockInFiles`, {
793
+ return API().get(`Get${direction}FramesBlockInFiles`, {
788
794
  params: {
789
795
  Channel: channel,
790
796
  Split: split,
@@ -808,7 +814,7 @@ var FramesService = {
808
814
  useCache = true,
809
815
  signal,
810
816
  } = {}) {
811
- return Api.get('GetSmallFramesBlockInFiles', {
817
+ return API().get('GetSmallFramesBlockInFiles', {
812
818
  params: {
813
819
  Channel: channel,
814
820
  Split: split,
@@ -824,7 +830,7 @@ var FramesService = {
824
830
  },
825
831
 
826
832
  getFileInfoRequest({ direction, channel, split, time, step, signal } = {}) {
827
- return Api.get(`Get${direction}BlockFileInformation`, {
833
+ return API().get(`Get${direction}BlockFileInformation`, {
828
834
  params: {
829
835
  Channel: channel,
830
836
  Split: split,
@@ -838,7 +844,7 @@ var FramesService = {
838
844
  getNextAvailableBlock({ channel, time, signal } = {}) {
839
845
  // process.env.VUE_APP_NEXT_AVAILABLE_BLOCK
840
846
 
841
- return Api.get(`GetPreviousAvailableBlockFileInformation`, {
847
+ return API().get(`GetPreviousAvailableBlockFileInformation`, {
842
848
  params: {
843
849
  Channel: channel,
844
850
  Split: 1,
@@ -1690,10 +1696,7 @@ var __vue_render__$4 = function () {
1690
1696
  _vm.commandBarShow
1691
1697
  ? _c(
1692
1698
  "div",
1693
- {
1694
- staticClass:
1695
- "visualization-row visualization-justify-center pt-3",
1696
- },
1699
+ { staticClass: "visualization-row visualization-justify-center" },
1697
1700
  _vm._l(_vm.commandBarBtns, function (btn, index) {
1698
1701
  return _c("div", { key: "command-btn-" + index }, [
1699
1702
  !btn
@@ -1710,13 +1713,14 @@ var __vue_render__$4 = function () {
1710
1713
  directives: [
1711
1714
  {
1712
1715
  name: "tooltip",
1713
- rawName: "v-tooltip",
1716
+ rawName: "v-tooltip.bottom",
1714
1717
  value:
1715
1718
  btn.text && typeof btn.text === "function"
1716
1719
  ? btn.text()
1717
1720
  : btn.text,
1718
1721
  expression:
1719
1722
  "\n btn.text && typeof btn.text === 'function' ? btn.text() : btn.text\n ",
1723
+ modifiers: { bottom: true },
1720
1724
  },
1721
1725
  ],
1722
1726
  staticClass: "command-bar-btn",
@@ -1759,11 +1763,12 @@ __vue_render__$4._withStripped = true;
1759
1763
  /* style */
1760
1764
  const __vue_inject_styles__$4 = function (inject) {
1761
1765
  if (!inject) return
1762
- inject("data-v-aa03c4c2_0", { source: "\n.visualization-row[data-v-aa03c4c2] {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\n}\n.visualization-col[data-v-aa03c4c2] {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\n}\n.visualization-divider[data-v-aa03c4c2] {\r\n display: block;\r\n flex: 1 1 100%;\r\n height: 0px;\r\n max-height: 0px;\r\n opacity: 1;\r\n transition: inherit;\r\n border-style: solid;\r\n border-width: thin 0 0 0;\r\n border-color: rgba(0, 0, 0, 0.12);\r\n margin: 0;\n}\n.visualization-divider.vertical[data-v-aa03c4c2] {\r\n align-self: stretch;\r\n border-width: 0 thin 0 0;\r\n display: inline-flex;\r\n height: inherit;\r\n margin-left: -1px;\r\n max-height: 100%;\r\n max-width: 0px;\r\n vertical-align: text-bottom;\r\n width: 0px;\n}\n.visualization-card[data-v-aa03c4c2] {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n width: 100%;\r\n transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n overflow-wrap: break-word;\r\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n.visualization-justify-center[data-v-aa03c4c2],[data-v-aa03c4c2] .visualization-justify-center {\r\n justify-content: center;\n}\n.visualization-align-center[data-v-aa03c4c2] {\r\n align-items: center;\n}\n#visualization-container[data-v-aa03c4c2] {\r\n max-width: 100% !important;\r\n margin: 0 auto !important;\r\n height: 100%;\r\n border-bottom: none;\n}\n#visualization-container > .card[data-v-aa03c4c2] {\r\n border-radius: 0 !important;\r\n font-size: 12px;\r\n width: 100%;\r\n box-shadow: none;\r\n height: 100%;\n}\n#command-bar[data-v-aa03c4c2],\r\n#info-bar[data-v-aa03c4c2] {\r\n background-color: #f5f5f5;\r\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button[data-v-aa03c4c2] {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\n}\n#command-bar button[data-v-aa03c4c2]:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-aa03c4c2] {\r\n font-size: 16px;\n}\n#command-bar[data-v-aa03c4c2] {\r\n padding: 0 !important;\n}\n#info-bar[data-v-aa03c4c2] {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\n}\n.settings-container[data-v-aa03c4c2] {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\n}\n.settings-container > *[data-v-aa03c4c2] {\r\n margin: 0 2px;\r\n cursor: pointer;\n}\n#info-bar svg[data-v-aa03c4c2] {\r\n font-size: 16px;\n}\n#info-bar .divider[data-v-aa03c4c2] {\r\n margin: 0 8px;\n}\nsvg[data-v-aa03c4c2]:focus {\r\n border: none;\n}\n.visualization-card[data-v-aa03c4c2] {\r\n border-left: 8px solid #eee;\n}\n.active-tab[data-v-aa03c4c2] {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\n}\n[id^='frame-'][data-v-aa03c4c2] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\n}\n.tooltip[data-v-aa03c4c2] {\r\n display: block !important;\r\n z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-aa03c4c2] {\r\n background: var(--visualization-primary);\r\n color: white;\r\n border-radius: 16px;\r\n padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-aa03c4c2] {\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n position: absolute;\r\n margin: 5px;\r\n border-color: var(--visualization-primary);\r\n z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-aa03c4c2] {\r\n margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-aa03c4c2] {\r\n border-width: 5px 5px 0 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n bottom: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-aa03c4c2] {\r\n margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-aa03c4c2] {\r\n border-width: 0 5px 5px 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-top-color: transparent !important;\r\n top: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-aa03c4c2] {\r\n margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-aa03c4c2] {\r\n border-width: 5px 5px 5px 0;\r\n border-left-color: transparent !important;\r\n border-top-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n left: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-aa03c4c2] {\r\n margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-aa03c4c2] {\r\n border-width: 5px 0 5px 5px;\r\n border-top-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n right: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-aa03c4c2] {\r\n background: #f9f9f9;\r\n color: black;\r\n padding: 24px;\r\n border-radius: 5px;\r\n box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-aa03c4c2] {\r\n border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-aa03c4c2] {\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-aa03c4c2] {\r\n visibility: visible;\r\n opacity: 1;\r\n transition: opacity 0.15s;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Commands.vue"],"names":[],"mappings":";AAmMA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;EAEA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Commands.vue","sourcesContent":["<template>\r\n <div\r\n class=\"visualization-col pa-0\"\r\n id=\"command-bar\"\r\n style=\"border-top-right-radius: 6px\"\r\n >\r\n <div\r\n class=\"visualization-row visualization-justify-center pt-3\"\r\n v-if=\"commandBarShow\"\r\n >\r\n <div v-for=\"(btn, index) in commandBarBtns\" :key=\"'command-btn-' + index\">\r\n <hr\r\n class=\"visualization-divider vertical\"\r\n v-if=\"!btn\"\r\n style=\"margin: 0 4px\"\r\n />\r\n <button\r\n v-if=\"btn && (btn.condition ? btn.condition() : true)\"\r\n v-tooltip=\"\r\n btn.text && typeof btn.text === 'function' ? btn.text() : btn.text\r\n \"\r\n :style=\"{\r\n color:\r\n btn.color && typeof btn.color === 'function'\r\n ? btn.color()\r\n : 'black',\r\n }\"\r\n class=\"command-bar-btn\"\r\n @click=\"btn.fnc\"\r\n >\r\n <font-awesome-icon\r\n :id=\"btn.id\"\r\n :icon=\"\r\n 'fa-solid ' +\r\n (btn.icon && typeof btn.icon === 'function'\r\n ? btn.icon()\r\n : btn.icon)\r\n \"\r\n />\r\n </button>\r\n </div>\r\n </div>\r\n <hr class=\"visualization-divider\" />\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n props: {\r\n videoPlaying: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n videoPaused: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n insertTime: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n hourIniSelected: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n hourEndSelected: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n },\r\n data() {\r\n return {\r\n commandBarShow: true,\r\n commandBarBtns: [\r\n {\r\n fnc: () => this.$emit('prev-loop-activate'),\r\n icon: 'fa-backward',\r\n text: 'Fast Backward',\r\n id: 'Fast Backward',\r\n },\r\n {\r\n fnc: () => this.$emit('prev'),\r\n icon: 'fa-step-backward',\r\n text: 'Step Backward',\r\n id: 'Step Backward',\r\n },\r\n {\r\n fnc: () => this.$emit('go-to'),\r\n icon: 'fa-clock',\r\n text: this.$i18n.t('infoBar.setHour'),\r\n id: 'Definir Hora',\r\n },\r\n {\r\n fnc: () => this.$emit('next'),\r\n icon: 'fa-step-forward',\r\n text: 'Step Forward',\r\n id: 'Step Forward',\r\n },\r\n {\r\n fnc: () => this.$emit('next-loop-activate'),\r\n icon: 'fa-forward',\r\n text: 'Fast Forward',\r\n id: 'Fast Forward',\r\n },\r\n {\r\n fnc: () => this.$emit('play-or-pause'),\r\n icon: () => {\r\n return this.videoPlaying && !this.videoPaused\r\n ? 'fa-pause'\r\n : 'fa-play'\r\n },\r\n text: () => {\r\n return this.videoPlaying && !this.videoPaused ? 'Pause' : 'Play'\r\n },\r\n id: 'playOrPause',\r\n },\r\n {\r\n fnc: () => this.$emit('stop-playing'),\r\n icon: 'fa-stop',\r\n text: 'Stop',\r\n id: 'Stop',\r\n },\r\n null,\r\n {\r\n fnc: () => this.$emit('open-frame-selection'),\r\n icon: 'fa-border-all',\r\n text: this.$i18n.t('infoBar.gridForm'),\r\n id: 'Formato da grelha',\r\n },\r\n {\r\n fnc: () => this.$emit('open-frames-per-second'),\r\n icon: 'fa-sliders-h',\r\n text: this.$i18n.t('infoBar.secondImage'),\r\n id: 'Segundos por Imagem',\r\n },\r\n // {\r\n // fnc: () => this.$emit('open-blocks'),\r\n // icon: 'fa-cut',\r\n // text: 'Escolher intervalo de blocos',\r\n // id: 'Escolher intervalo de blocos',\r\n // },\r\n {\r\n fnc: () => this.$emit('open-playback-rate'),\r\n icon: 'fa-tachometer-alt',\r\n text: this.$i18n.t('infoBar.chooseVelocity'),\r\n id: 'Escolher velocidade de reprodução',\r\n },\r\n // {\r\n // fnc: () => this.$emit('insert-time-force'),\r\n // icon: 'fa-arrow-turn-down',\r\n // text: 'Recuperar Notícia',\r\n // id: 'Recuperar Notícia',\r\n // condition: () => {\r\n // return this.insertTime\r\n // },\r\n // },\r\n null,\r\n {\r\n fnc: () => this.$emit('set-hour-ini'),\r\n icon: 'fa-hourglass-start',\r\n text: this.$i18n.t('form.inicialHour'),\r\n id: 'Hora Inicial',\r\n color: () => {\r\n return this.hourIniSelected ? 'var(--visualization-start)' : 'black'\r\n },\r\n },\r\n {\r\n fnc: () => this.$emit('insert-time'),\r\n icon: 'fa-arrow-circle-down',\r\n text: this.$i18n.t('infoBar.insert'),\r\n id: 'insert',\r\n condition: () => {\r\n return this.insertTime\r\n },\r\n },\r\n {\r\n fnc: () => this.$emit('set-hour-end'),\r\n icon: 'fa-hourglass-end',\r\n text: this.$i18n.t('form.endHour'),\r\n id: 'Hora Final',\r\n color: () => {\r\n return this.hourEndSelected ? 'var(--visualization-end)' : 'black'\r\n },\r\n },\r\n // {\r\n // fnc: () => this.$emit('check-available-block'),\r\n // icon: 'fa-video',\r\n // text: 'Próximo bloco disponível',\r\n // id: 'Próximo bloco disponível',\r\n // },\r\n ],\r\n }\r\n },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n display: block;\r\n flex: 1 1 100%;\r\n height: 0px;\r\n max-height: 0px;\r\n opacity: 1;\r\n transition: inherit;\r\n border-style: solid;\r\n border-width: thin 0 0 0;\r\n border-color: rgba(0, 0, 0, 0.12);\r\n margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n align-self: stretch;\r\n border-width: 0 thin 0 0;\r\n display: inline-flex;\r\n height: inherit;\r\n margin-left: -1px;\r\n max-height: 100%;\r\n max-width: 0px;\r\n vertical-align: text-bottom;\r\n width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n width: 100%;\r\n transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n overflow-wrap: break-word;\r\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\r\n}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n max-width: 100% !important;\r\n margin: 0 auto !important;\r\n height: 100%;\r\n border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n border-radius: 0 !important;\r\n font-size: 12px;\r\n width: 100%;\r\n box-shadow: none;\r\n height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n background-color: #f5f5f5;\r\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n}\r\n#command-bar button {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\r\n}\r\n\r\n.settings-container {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n margin: 0 2px;\r\n cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n border: none;\r\n}\r\n\r\n.visualization-card {\r\n border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n display: block !important;\r\n z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n background: var(--visualization-primary);\r\n color: white;\r\n border-radius: 16px;\r\n padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n position: absolute;\r\n margin: 5px;\r\n border-color: var(--visualization-primary);\r\n z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n border-width: 5px 5px 0 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n bottom: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n border-width: 0 5px 5px 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-top-color: transparent !important;\r\n top: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n border-width: 5px 5px 5px 0;\r\n border-left-color: transparent !important;\r\n border-top-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n left: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n border-width: 5px 0 5px 5px;\r\n border-top-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n right: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n background: #f9f9f9;\r\n color: black;\r\n padding: 24px;\r\n border-radius: 5px;\r\n box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n visibility: visible;\r\n opacity: 1;\r\n transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined });
1766
+ inject("data-v-6167337a_0", { source: "\n.visualization-row[data-v-6167337a] {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\n}\n.visualization-col[data-v-6167337a] {\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-6167337a] {\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-6167337a] {\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-6167337a] {\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-6167337a],[data-v-6167337a] .visualization-justify-center {\r\n justify-content: center;\n}\n.visualization-align-center[data-v-6167337a] {\r\n align-items: center;\n}\n#visualization-container[data-v-6167337a] {\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-6167337a] {\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-6167337a],\r\n#info-bar[data-v-6167337a] {\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-6167337a] {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\n}\n#command-bar button[data-v-6167337a]:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-6167337a] {\r\n font-size: 16px;\n}\n#command-bar[data-v-6167337a] {\r\n padding: 0 !important;\n}\n#info-bar[data-v-6167337a] {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\n}\n.settings-container[data-v-6167337a] {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\n}\n.settings-container > *[data-v-6167337a] {\r\n margin: 0 2px;\r\n cursor: pointer;\n}\n#info-bar svg[data-v-6167337a] {\r\n font-size: 16px;\n}\n#info-bar .divider[data-v-6167337a] {\r\n margin: 0 8px;\n}\nsvg[data-v-6167337a]:focus {\r\n border: none;\n}\n.visualization-card[data-v-6167337a] {\r\n border-left: 8px solid #eee;\n}\n.active-tab[data-v-6167337a] {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\n}\n[id^='frame-'][data-v-6167337a] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Commands.vue"],"names":[],"mappings":";AAmMA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;EAEA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA","file":"Commands.vue","sourcesContent":["<template>\r\n <div\r\n class=\"visualization-col pa-0\"\r\n id=\"command-bar\"\r\n style=\"border-top-right-radius: 6px\"\r\n >\r\n <div\r\n class=\"visualization-row visualization-justify-center\"\r\n v-if=\"commandBarShow\"\r\n >\r\n <div v-for=\"(btn, index) in commandBarBtns\" :key=\"'command-btn-' + index\">\r\n <hr\r\n class=\"visualization-divider vertical\"\r\n v-if=\"!btn\"\r\n style=\"margin: 0 4px\"\r\n />\r\n <button\r\n v-if=\"btn && (btn.condition ? btn.condition() : true)\"\r\n v-tooltip.bottom=\"\r\n btn.text && typeof btn.text === 'function' ? btn.text() : btn.text\r\n \"\r\n :style=\"{\r\n color:\r\n btn.color && typeof btn.color === 'function'\r\n ? btn.color()\r\n : 'black',\r\n }\"\r\n class=\"command-bar-btn\"\r\n @click=\"btn.fnc\"\r\n >\r\n <font-awesome-icon\r\n :id=\"btn.id\"\r\n :icon=\"\r\n 'fa-solid ' +\r\n (btn.icon && typeof btn.icon === 'function'\r\n ? btn.icon()\r\n : btn.icon)\r\n \"\r\n />\r\n </button>\r\n </div>\r\n </div>\r\n <hr class=\"visualization-divider\" />\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n props: {\r\n videoPlaying: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n videoPaused: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n insertTime: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n hourIniSelected: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n hourEndSelected: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n },\r\n data() {\r\n return {\r\n commandBarShow: true,\r\n commandBarBtns: [\r\n {\r\n fnc: () => this.$emit('prev-loop-activate'),\r\n icon: 'fa-backward',\r\n text: 'Fast Backward',\r\n id: 'Fast Backward',\r\n },\r\n {\r\n fnc: () => this.$emit('prev'),\r\n icon: 'fa-step-backward',\r\n text: 'Step Backward',\r\n id: 'Step Backward',\r\n },\r\n {\r\n fnc: () => this.$emit('go-to'),\r\n icon: 'fa-clock',\r\n text: this.$i18n.t('infoBar.setHour'),\r\n id: 'Definir Hora',\r\n },\r\n {\r\n fnc: () => this.$emit('next'),\r\n icon: 'fa-step-forward',\r\n text: 'Step Forward',\r\n id: 'Step Forward',\r\n },\r\n {\r\n fnc: () => this.$emit('next-loop-activate'),\r\n icon: 'fa-forward',\r\n text: 'Fast Forward',\r\n id: 'Fast Forward',\r\n },\r\n {\r\n fnc: () => this.$emit('play-or-pause'),\r\n icon: () => {\r\n return this.videoPlaying && !this.videoPaused\r\n ? 'fa-pause'\r\n : 'fa-play'\r\n },\r\n text: () => {\r\n return this.videoPlaying && !this.videoPaused ? 'Pause' : 'Play'\r\n },\r\n id: 'playOrPause',\r\n },\r\n {\r\n fnc: () => this.$emit('stop-playing'),\r\n icon: 'fa-stop',\r\n text: 'Stop',\r\n id: 'Stop',\r\n },\r\n null,\r\n {\r\n fnc: () => this.$emit('open-frame-selection'),\r\n icon: 'fa-border-all',\r\n text: this.$i18n.t('infoBar.gridForm'),\r\n id: 'Formato da grelha',\r\n },\r\n {\r\n fnc: () => this.$emit('open-frames-per-second'),\r\n icon: 'fa-sliders-h',\r\n text: this.$i18n.t('infoBar.secondImage'),\r\n id: 'Segundos por Imagem',\r\n },\r\n // {\r\n // fnc: () => this.$emit('open-blocks'),\r\n // icon: 'fa-cut',\r\n // text: 'Escolher intervalo de blocos',\r\n // id: 'Escolher intervalo de blocos',\r\n // },\r\n {\r\n fnc: () => this.$emit('open-playback-rate'),\r\n icon: 'fa-tachometer-alt',\r\n text: this.$i18n.t('infoBar.chooseVelocity'),\r\n id: 'Escolher velocidade de reprodução',\r\n },\r\n // {\r\n // fnc: () => this.$emit('insert-time-force'),\r\n // icon: 'fa-arrow-turn-down',\r\n // text: 'Recuperar Notícia',\r\n // id: 'Recuperar Notícia',\r\n // condition: () => {\r\n // return this.insertTime\r\n // },\r\n // },\r\n null,\r\n {\r\n fnc: () => this.$emit('set-hour-ini'),\r\n icon: 'fa-hourglass-start',\r\n text: this.$i18n.t('form.inicialHour'),\r\n id: 'Hora Inicial',\r\n color: () => {\r\n return this.hourIniSelected ? 'var(--visualization-start)' : 'black'\r\n },\r\n },\r\n {\r\n fnc: () => this.$emit('insert-time'),\r\n icon: 'fa-arrow-circle-down',\r\n text: this.$i18n.t('infoBar.insert'),\r\n id: 'insert',\r\n condition: () => {\r\n return this.insertTime\r\n },\r\n },\r\n {\r\n fnc: () => this.$emit('set-hour-end'),\r\n icon: 'fa-hourglass-end',\r\n text: this.$i18n.t('form.endHour'),\r\n id: 'Hora Final',\r\n color: () => {\r\n return this.hourEndSelected ? 'var(--visualization-end)' : 'black'\r\n },\r\n },\r\n // {\r\n // fnc: () => this.$emit('check-available-block'),\r\n // icon: 'fa-video',\r\n // text: 'Próximo bloco disponível',\r\n // id: 'Próximo bloco disponível',\r\n // },\r\n ],\r\n }\r\n },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n display: block;\r\n flex: 1 1 100%;\r\n height: 0px;\r\n max-height: 0px;\r\n opacity: 1;\r\n transition: inherit;\r\n border-style: solid;\r\n border-width: thin 0 0 0;\r\n border-color: rgba(0, 0, 0, 0.12);\r\n margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n align-self: stretch;\r\n border-width: 0 thin 0 0;\r\n display: inline-flex;\r\n height: inherit;\r\n margin-left: -1px;\r\n max-height: 100%;\r\n max-width: 0px;\r\n vertical-align: text-bottom;\r\n width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n width: 100%;\r\n transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n overflow-wrap: break-word;\r\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\r\n}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n max-width: 100% !important;\r\n margin: 0 auto !important;\r\n height: 100%;\r\n border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n border-radius: 0 !important;\r\n font-size: 12px;\r\n width: 100%;\r\n box-shadow: none;\r\n height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n background-color: #f5f5f5;\r\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n}\r\n#command-bar button {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\r\n}\r\n\r\n.settings-container {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n margin: 0 2px;\r\n cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n border: none;\r\n}\r\n\r\n.visualization-card {\r\n border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\r\n}\r\n</style>\r\n<style>\r\n .tooltip {\r\n display: block !important;\r\n z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n background: var(--visualization-primary);\r\n color: white;\r\n border-radius: 16px;\r\n padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n position: absolute;\r\n margin: 5px;\r\n border-color: var(--visualization-primary);\r\n z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n border-width: 5px 5px 0 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n bottom: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n border-width: 0 5px 5px 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-top-color: transparent !important;\r\n top: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n border-width: 5px 5px 5px 0;\r\n border-left-color: transparent !important;\r\n border-top-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n left: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n border-width: 5px 0 5px 5px;\r\n border-top-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n right: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n background: #f9f9f9;\r\n color: black;\r\n padding: 24px;\r\n border-radius: 5px;\r\n box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n visibility: visible;\r\n opacity: 1;\r\n transition: opacity 0.15s;\r\n}\r\n</style>"]}, media: undefined })
1767
+ ,inject("data-v-6167337a_1", { source: "\n.tooltip {\n display: block !important;\n z-index: 10000;\n}\n.tooltip .tooltip-inner {\n background: var(--visualization-primary);\n color: white;\n border-radius: 16px;\n padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow {\n width: 0;\n height: 0;\n border-style: solid;\n position: absolute;\n margin: 5px;\n border-color: var(--visualization-primary);\n z-index: 1;\n}\n.tooltip[x-placement^='top'] {\n margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow {\n border-width: 5px 5px 0 5px;\n border-left-color: transparent !important;\n border-right-color: transparent !important;\n border-bottom-color: transparent !important;\n bottom: -5px;\n left: calc(50% - 5px);\n margin-top: 0;\n margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'] {\n margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\n border-width: 0 5px 5px 5px;\n border-left-color: transparent !important;\n border-right-color: transparent !important;\n border-top-color: transparent !important;\n top: -5px;\n left: calc(50% - 5px);\n margin-top: 0;\n margin-bottom: 0;\n}\n.tooltip[x-placement^='right'] {\n margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow {\n border-width: 5px 5px 5px 0;\n border-left-color: transparent !important;\n border-top-color: transparent !important;\n border-bottom-color: transparent !important;\n left: -5px;\n top: calc(50% - 5px);\n margin-left: 0;\n margin-right: 0;\n}\n.tooltip[x-placement^='left'] {\n margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow {\n border-width: 5px 0 5px 5px;\n border-top-color: transparent !important;\n border-right-color: transparent !important;\n border-bottom-color: transparent !important;\n right: -5px;\n top: calc(50% - 5px);\n margin-left: 0;\n margin-right: 0;\n}\n.tooltip.popover .popover-inner {\n background: #f9f9f9;\n color: black;\n padding: 24px;\n border-radius: 5px;\n box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow {\n border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'] {\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'] {\n visibility: visible;\n opacity: 1;\n transition: opacity 0.15s;\n}\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Commands.vue"],"names":[],"mappings":";AAoVA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Commands.vue","sourcesContent":["<template>\r\n <div\r\n class=\"visualization-col pa-0\"\r\n id=\"command-bar\"\r\n style=\"border-top-right-radius: 6px\"\r\n >\r\n <div\r\n class=\"visualization-row visualization-justify-center\"\r\n v-if=\"commandBarShow\"\r\n >\r\n <div v-for=\"(btn, index) in commandBarBtns\" :key=\"'command-btn-' + index\">\r\n <hr\r\n class=\"visualization-divider vertical\"\r\n v-if=\"!btn\"\r\n style=\"margin: 0 4px\"\r\n />\r\n <button\r\n v-if=\"btn && (btn.condition ? btn.condition() : true)\"\r\n v-tooltip.bottom=\"\r\n btn.text && typeof btn.text === 'function' ? btn.text() : btn.text\r\n \"\r\n :style=\"{\r\n color:\r\n btn.color && typeof btn.color === 'function'\r\n ? btn.color()\r\n : 'black',\r\n }\"\r\n class=\"command-bar-btn\"\r\n @click=\"btn.fnc\"\r\n >\r\n <font-awesome-icon\r\n :id=\"btn.id\"\r\n :icon=\"\r\n 'fa-solid ' +\r\n (btn.icon && typeof btn.icon === 'function'\r\n ? btn.icon()\r\n : btn.icon)\r\n \"\r\n />\r\n </button>\r\n </div>\r\n </div>\r\n <hr class=\"visualization-divider\" />\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n props: {\r\n videoPlaying: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n videoPaused: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n insertTime: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n hourIniSelected: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n hourEndSelected: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n },\r\n data() {\r\n return {\r\n commandBarShow: true,\r\n commandBarBtns: [\r\n {\r\n fnc: () => this.$emit('prev-loop-activate'),\r\n icon: 'fa-backward',\r\n text: 'Fast Backward',\r\n id: 'Fast Backward',\r\n },\r\n {\r\n fnc: () => this.$emit('prev'),\r\n icon: 'fa-step-backward',\r\n text: 'Step Backward',\r\n id: 'Step Backward',\r\n },\r\n {\r\n fnc: () => this.$emit('go-to'),\r\n icon: 'fa-clock',\r\n text: this.$i18n.t('infoBar.setHour'),\r\n id: 'Definir Hora',\r\n },\r\n {\r\n fnc: () => this.$emit('next'),\r\n icon: 'fa-step-forward',\r\n text: 'Step Forward',\r\n id: 'Step Forward',\r\n },\r\n {\r\n fnc: () => this.$emit('next-loop-activate'),\r\n icon: 'fa-forward',\r\n text: 'Fast Forward',\r\n id: 'Fast Forward',\r\n },\r\n {\r\n fnc: () => this.$emit('play-or-pause'),\r\n icon: () => {\r\n return this.videoPlaying && !this.videoPaused\r\n ? 'fa-pause'\r\n : 'fa-play'\r\n },\r\n text: () => {\r\n return this.videoPlaying && !this.videoPaused ? 'Pause' : 'Play'\r\n },\r\n id: 'playOrPause',\r\n },\r\n {\r\n fnc: () => this.$emit('stop-playing'),\r\n icon: 'fa-stop',\r\n text: 'Stop',\r\n id: 'Stop',\r\n },\r\n null,\r\n {\r\n fnc: () => this.$emit('open-frame-selection'),\r\n icon: 'fa-border-all',\r\n text: this.$i18n.t('infoBar.gridForm'),\r\n id: 'Formato da grelha',\r\n },\r\n {\r\n fnc: () => this.$emit('open-frames-per-second'),\r\n icon: 'fa-sliders-h',\r\n text: this.$i18n.t('infoBar.secondImage'),\r\n id: 'Segundos por Imagem',\r\n },\r\n // {\r\n // fnc: () => this.$emit('open-blocks'),\r\n // icon: 'fa-cut',\r\n // text: 'Escolher intervalo de blocos',\r\n // id: 'Escolher intervalo de blocos',\r\n // },\r\n {\r\n fnc: () => this.$emit('open-playback-rate'),\r\n icon: 'fa-tachometer-alt',\r\n text: this.$i18n.t('infoBar.chooseVelocity'),\r\n id: 'Escolher velocidade de reprodução',\r\n },\r\n // {\r\n // fnc: () => this.$emit('insert-time-force'),\r\n // icon: 'fa-arrow-turn-down',\r\n // text: 'Recuperar Notícia',\r\n // id: 'Recuperar Notícia',\r\n // condition: () => {\r\n // return this.insertTime\r\n // },\r\n // },\r\n null,\r\n {\r\n fnc: () => this.$emit('set-hour-ini'),\r\n icon: 'fa-hourglass-start',\r\n text: this.$i18n.t('form.inicialHour'),\r\n id: 'Hora Inicial',\r\n color: () => {\r\n return this.hourIniSelected ? 'var(--visualization-start)' : 'black'\r\n },\r\n },\r\n {\r\n fnc: () => this.$emit('insert-time'),\r\n icon: 'fa-arrow-circle-down',\r\n text: this.$i18n.t('infoBar.insert'),\r\n id: 'insert',\r\n condition: () => {\r\n return this.insertTime\r\n },\r\n },\r\n {\r\n fnc: () => this.$emit('set-hour-end'),\r\n icon: 'fa-hourglass-end',\r\n text: this.$i18n.t('form.endHour'),\r\n id: 'Hora Final',\r\n color: () => {\r\n return this.hourEndSelected ? 'var(--visualization-end)' : 'black'\r\n },\r\n },\r\n // {\r\n // fnc: () => this.$emit('check-available-block'),\r\n // icon: 'fa-video',\r\n // text: 'Próximo bloco disponível',\r\n // id: 'Próximo bloco disponível',\r\n // },\r\n ],\r\n }\r\n },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n display: block;\r\n flex: 1 1 100%;\r\n height: 0px;\r\n max-height: 0px;\r\n opacity: 1;\r\n transition: inherit;\r\n border-style: solid;\r\n border-width: thin 0 0 0;\r\n border-color: rgba(0, 0, 0, 0.12);\r\n margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n align-self: stretch;\r\n border-width: 0 thin 0 0;\r\n display: inline-flex;\r\n height: inherit;\r\n margin-left: -1px;\r\n max-height: 100%;\r\n max-width: 0px;\r\n vertical-align: text-bottom;\r\n width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n width: 100%;\r\n transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n overflow-wrap: break-word;\r\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\r\n}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n max-width: 100% !important;\r\n margin: 0 auto !important;\r\n height: 100%;\r\n border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n border-radius: 0 !important;\r\n font-size: 12px;\r\n width: 100%;\r\n box-shadow: none;\r\n height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n background-color: #f5f5f5;\r\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n}\r\n#command-bar button {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\r\n}\r\n\r\n.settings-container {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n margin: 0 2px;\r\n cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n border: none;\r\n}\r\n\r\n.visualization-card {\r\n border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\r\n}\r\n</style>\r\n<style>\r\n .tooltip {\r\n display: block !important;\r\n z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n background: var(--visualization-primary);\r\n color: white;\r\n border-radius: 16px;\r\n padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n position: absolute;\r\n margin: 5px;\r\n border-color: var(--visualization-primary);\r\n z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n border-width: 5px 5px 0 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n bottom: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n border-width: 0 5px 5px 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-top-color: transparent !important;\r\n top: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n border-width: 5px 5px 5px 0;\r\n border-left-color: transparent !important;\r\n border-top-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n left: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n border-width: 5px 0 5px 5px;\r\n border-top-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n right: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n background: #f9f9f9;\r\n color: black;\r\n padding: 24px;\r\n border-radius: 5px;\r\n box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n visibility: visible;\r\n opacity: 1;\r\n transition: opacity 0.15s;\r\n}\r\n</style>"]}, media: undefined });
1763
1768
 
1764
1769
  };
1765
1770
  /* scoped */
1766
- const __vue_scope_id__$4 = "data-v-aa03c4c2";
1771
+ const __vue_scope_id__$4 = "data-v-6167337a";
1767
1772
  /* module identifier */
1768
1773
  const __vue_module_identifier__$4 = undefined;
1769
1774
  /* functional template */
@@ -3186,6 +3191,8 @@ var script = {
3186
3191
  secondsPerFrame: false,
3187
3192
  frames: false,
3188
3193
  },
3194
+ lastNext: 0,
3195
+ lastPrev: 0,
3189
3196
  }
3190
3197
  },
3191
3198
  async created() {
@@ -3312,14 +3319,14 @@ var script = {
3312
3319
  },
3313
3320
  nextLoopActivate() {
3314
3321
  this.breakLoop();
3315
- this.loopInterval = setInterval(this.next, 40);
3322
+ this.loopInterval = setInterval(this.next, 150);
3316
3323
  setTimeout(() => {
3317
3324
  this.nextLoop = true;
3318
3325
  }, 0);
3319
3326
  },
3320
3327
  prevLoopActivate() {
3321
3328
  this.breakLoop();
3322
- this.loopInterval = setInterval(this.prev, 40);
3329
+ this.loopInterval = setInterval(this.prev, 150);
3323
3330
  setTimeout(() => {
3324
3331
  this.prevLoop = true;
3325
3332
  }, 0);
@@ -3706,7 +3713,7 @@ var script = {
3706
3713
  }
3707
3714
  },
3708
3715
  async next() {
3709
- if (this.checkLimitRight(true)) {
3716
+ if (this.checkLimitRight(true) && (Date.now() - this.lastNext > 150)) {
3710
3717
  const array = this.$refs.frames.filter(
3711
3718
  (fc) =>
3712
3719
  fc.videoStatus === fc.Status.playing ||
@@ -3724,10 +3731,11 @@ var script = {
3724
3731
  this.activeVideo = null;
3725
3732
 
3726
3733
  this.getFramesArray();
3734
+ this.lastNext = Date.now();
3727
3735
  }
3728
3736
  },
3729
3737
  async prev() {
3730
- if (this.checkLimitLeft(true)) {
3738
+ if (this.checkLimitLeft(true) && (Date.now() - this.lastPrev > 150)) {
3731
3739
  const array = this.$refs.frames.filter(
3732
3740
  (fc) =>
3733
3741
  fc.videoStatus === fc.Status.playing ||
@@ -3749,6 +3757,7 @@ var script = {
3749
3757
  this.activeVideo = null;
3750
3758
 
3751
3759
  this.getFramesArray();
3760
+ this.lastPrev = Date.now();
3752
3761
  }
3753
3762
  },
3754
3763
  async setStartTime(time) {
@@ -3894,12 +3903,8 @@ var script = {
3894
3903
  },
3895
3904
  async changeServerClick() {
3896
3905
  this.changeServer = !this.changeServer;
3897
- // this.$store.dispatch(
3898
- // 'serverOfFrames',
3899
- // this.changeServer ? 'alternative' : 'default'
3900
- // )
3901
3906
  sessionStorage.setItem(
3902
- 'serverOfFrames',
3907
+ 'server',
3903
3908
  this.changeServer ? 'alternative' : 'default'
3904
3909
  );
3905
3910
 
@@ -4570,11 +4575,11 @@ __vue_render__._withStripped = true;
4570
4575
  /* style */
4571
4576
  const __vue_inject_styles__ = function (inject) {
4572
4577
  if (!inject) return
4573
- inject("data-v-885e1096_0", { source: "\n.visualization-row[data-v-885e1096] {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\n}\n.visualization-col[data-v-885e1096] {\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-885e1096] {\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-885e1096] {\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-885e1096] {\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-885e1096],[data-v-885e1096] .visualization-justify-center {\r\n justify-content: center;\n}\n.visualization-align-center[data-v-885e1096] {\r\n align-items: center;\n}\n#visualization-container[data-v-885e1096] {\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-885e1096] {\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-885e1096],\r\n#info-bar[data-v-885e1096] {\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-885e1096] {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\n}\n#command-bar button[data-v-885e1096]:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-885e1096] {\r\n font-size: 16px;\n}\n#command-bar[data-v-885e1096] {\r\n padding: 0 !important;\n}\n#info-bar[data-v-885e1096] {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\n}\n.settings-container[data-v-885e1096] {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\n}\n.settings-container > *[data-v-885e1096] {\r\n margin: 0 2px;\r\n cursor: pointer;\n}\n#info-bar svg[data-v-885e1096] {\r\n font-size: 16px;\n}\n#info-bar .divider[data-v-885e1096] {\r\n margin: 0 8px;\n}\nsvg[data-v-885e1096]:focus {\r\n border: none;\n}\n.visualization-card[data-v-885e1096] {\r\n border-left: 8px solid #eee;\n}\n.active-tab[data-v-885e1096] {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\n}\n[id^='frame-'][data-v-885e1096] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\n}\n.tooltip[data-v-885e1096] {\r\n display: block !important;\r\n z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-885e1096] {\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-885e1096] {\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-885e1096] {\r\n margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-885e1096] {\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-885e1096] {\r\n margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-885e1096] {\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-885e1096] {\r\n margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-885e1096] {\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-885e1096] {\r\n margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-885e1096] {\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-885e1096] {\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-885e1096] {\r\n border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-885e1096] {\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-885e1096] {\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":";AA0pCA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;EAEA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Visualization.vue","sourcesContent":["<template>\r\n <div\r\n class=\"visualization-row\"\r\n id=\"visualization-container\"\r\n @click=\"framesClicked\"\r\n >\r\n <GlobalEvents\r\n v-if=\"active && canInsertTime && settingsClosed\"\r\n @keydown.45=\"insertTime\"\r\n @keydown.46=\"insertTime\"\r\n />\r\n <GlobalEvents\r\n v-if=\"active && settingsClosed\"\r\n @keydown.left.prevent=\"arrowLeft\"\r\n @keydown.right.prevent=\"arrowRight\"\r\n @keydown.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.83.prevent=\"setHourIni\"\r\n @keydown.69.prevent=\"setHourEnd\"\r\n @keydown.36.prevent=\"goToFirstFrame\"\r\n @keydown.35.prevent=\"goToLastFrame\"\r\n @keydown.71.prevent=\"dialogs.goTo = true\"\r\n @keydown.73.prevent=\"dialogs.secondsPerFrame = true\"\r\n @keydown.76.prevent=\"dialogs.frames = true\"\r\n @keydown.49.97=\"() => (secondsPerFrame = 1)\"\r\n @keydown.50.98=\"() => (secondsPerFrame = 2)\"\r\n @keydown.51.99=\"() => (secondsPerFrame = 3)\"\r\n @keydown.52.100=\"() => (secondsPerFrame = 4)\"\r\n @keydown.53.101=\"() => (secondsPerFrame = 5)\"\r\n />\r\n <GlobalEvents\r\n v-if=\"prevLoop || nextLoop\"\r\n @keydown=\"breakLoop\"\r\n v-on:click=\"breakLoop\"\r\n />\r\n <settings\r\n v-if=\"active\"\r\n :dialogs-visibility=\"dialogs\"\r\n :playback-rate=\"playbackRate\"\r\n :seconds-per-frame=\"secondsPerFrame\"\r\n :frames-per-row=\"framesPerRow\"\r\n :number-of-rows=\"numberOfRows\"\r\n @change-playback-rate=\"(value) => (playbackRate = value)\"\r\n @change-go-to=\"changeHour\"\r\n @change-seconds-per-frame=\"(value) => (secondsPerFrame = value)\"\r\n @set-frames-selection=\"setFrameSelection\"\r\n @close=\"(dialog) => (dialogs[dialog] = false)\"\r\n />\r\n <div\r\n :class=\"{ 'visualization-card': true, 'active-tab': active }\"\r\n style=\"width: 100%; padding: 0\"\r\n >\r\n <command-bar\r\n v-show=\"commandBarShow\"\r\n :video-playing=\"videoPlaying\"\r\n :video-paused=\"paused\"\r\n :insert-time=\"canInsertTime\"\r\n :hour-ini-selected=\"!!hourIniSelected\"\r\n :hour-end-selected=\"!!hourEndSelected\"\r\n @prev-loop-activate=\"prevLoopActivate\"\r\n @next-loop-activate=\"nextLoopActivate\"\r\n @prev=\"prev\"\r\n @next=\"next\"\r\n @go-to=\"dialogs.goTo = true\"\r\n @open-frame-selection=\"dialogs.frames = true\"\r\n @open-frames-per-second=\"dialogs.secondsPerFrame = true\"\r\n @open-blocks=\"openBlocks\"\r\n @open-playback-rate=\"dialogs.playbackRate = true\"\r\n @play-or-pause=\"playOrPause\"\r\n @stop-playing=\"stopPlayingBar\"\r\n @set-hour-ini=\"setHourIni\"\r\n @set-hour-end=\"setHourEnd\"\r\n @insert-time=\"insertTime\"\r\n />\r\n <video-progress\r\n v-if=\"videoProgressBar\"\r\n v-show=\"videoPlaying\"\r\n :video-time=\"videoTime\"\r\n />\r\n <info-bar\r\n :playback-rate=\"playbackRate\"\r\n :seconds-per-frame=\"secondsPerFrame\"\r\n :commands-show=\"commandBarShow\"\r\n :cache=\"useCache\"\r\n :block-start-time=\"blockStartTime\"\r\n :video-total-duration=\"videoSliderTotalDuration\"\r\n :alternative-server=\"alternativeServer\"\r\n :frames-per-row=\"framesPerRow\"\r\n :number-of-rows=\"numberOfRows\"\r\n :hour-ini=\"hourIniSelected\"\r\n :hour-end=\"hourEndSelected\"\r\n @toogle-commands-visibility=\"commandBarShow = !commandBarShow\"\r\n @toogle-cache=\"useCache = !useCache\"\r\n @change-server=\"changeServerClick\"\r\n />\r\n <div\r\n class=\"visualization-row\"\r\n v-for=\"rowNumber in numberOfRows\"\r\n :id=\"'row-' + rowNumber\"\r\n :key=\"'row-' + rowNumber\"\r\n style=\"padding: 12px\"\r\n >\r\n <div\r\n v-for=\"(frame, frameNumber) in previousFrames\"\r\n :key=\"\r\n numberOfRows +\r\n '-' +\r\n framesPerRow +\r\n '-' +\r\n getIndex(rowNumber, frameNumber, Positions.previous)\r\n \"\r\n style=\"display: none\"\r\n >\r\n <span v-html=\"frame.img\" />\r\n </div>\r\n <div\r\n v-for=\"(frame, frameNumber) in nextFrames\"\r\n :key=\"\r\n numberOfRows +\r\n '-' +\r\n framesPerRow +\r\n '-' +\r\n getIndex(rowNumber, frameNumber, Positions.next)\r\n \"\r\n style=\"display: none\"\r\n >\r\n <span v-html=\"frame.img\" />\r\n </div>\r\n <div\r\n class=\"visualization-col\"\r\n v-for=\"(frame, frameNumber) in frames.slice(\r\n framesPerRow * (rowNumber - 1),\r\n framesPerRow * rowNumber\r\n )\"\r\n :key=\"'row-' + rowNumber + '-frame-' + frameNumber\"\r\n :id=\"`frame-${getIndex(rowNumber, frameNumber, Positions.current)}`\"\r\n :class=\"{ loaderImg: !!frame.img }\"\r\n @click=\"\r\n frame.time\r\n ? selectFrame(\r\n getIndex(rowNumber, frameNumber, Positions.current),\r\n frame\r\n )\r\n : null\r\n \"\r\n >\r\n <span :id=\"activeFrame ? 'aa' : 0\" style=\"padding-left: 4px\">\r\n <b>\r\n {{\r\n getAudienceTime(\r\n frame.time,\r\n rowNumber,\r\n frameNumber,\r\n Positions.current\r\n )\r\n }}\r\n </b>\r\n </span>\r\n\r\n <frame\r\n ref=\"frames\"\r\n :frame=\"frame\"\r\n :index=\"getIndex(rowNumber, frameNumber, Positions.current)\"\r\n :grid-settings=\"{ numberOfRows, framesPerRow }\"\r\n :initialTime=\"frame.time === hourIniSelected\"\r\n :endTime=\"frame.time === hourEndSelected\"\r\n :betweenTime=\"\r\n frame.time > hourIniSelected && frame.time < hourEndSelected\r\n \"\r\n :active=\"\r\n getIndex(rowNumber, frameNumber, Positions.current) ===\r\n activeFrame\r\n \"\r\n :activeTab=\"active\"\r\n :videoUrl=\"fInterface ? fInterface.getVideoUrl(frame) : ''\"\r\n @startPlaying=\"startPlaying\"\r\n @stopPlaying=\"stopPlaying\"\r\n @playPauseStatus=\"changePlayPause\"\r\n @updateSlider=\"updateSlider\"\r\n :playback-rate=\"playbackRate\"\r\n style=\"margin: 0 auto\"\r\n ></frame>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <settings\r\n ref=\"settings2\"\r\n :active=\"active\"\r\n @goToTime=\"changeHour\"\r\n @goToBlockInterval=\"changeBlockInterval\"\r\n @setSplitTime=\"setSplitTime\"\r\n @setFrameSelection=\"setFrameSelection\"\r\n @setPlaybackRate=\"\r\n (rate) => {\r\n playbackRate = rate\r\n }\r\n \"\r\n >\r\n </settings> -->\r\n <!-- <v-dialog v-model=\"dialog\" width=\"500\">\r\n <div class=\"card\">\r\n <div class=\"card\"-title class=\"text-h5 grey lighten-2\">\r\n {{ ' Último bloco disponível até: ' }}\r\n <v-btn\r\n @click=\"goToStartBlock\"\r\n class=\"ml-2\"\r\n dark\r\n color=\"success\"\r\n depressed\r\n >\r\n <v-icon left> fa-clock </v-icon>\r\n {{ timeLastBlock }}\r\n </v-btn>\r\n <v-spacer></v-spacer>\r\n <v-btn color=\"error\" fab small class=\"ml-5\" @click=\"dialog = false\">\r\n <v-icon dark> fa fa-xmark </v-icon>\r\n </v-btn>\r\n </div-title>\r\n </div>\r\n </v-dialog>\r\n <Help :media=\"media\" @close=\"media = null\" />\r\n <v-dialog\r\n v-if=\"userMultiTabsGrid\"\r\n v-model=\"userMultiTabsGridsModel\"\r\n persistent\r\n width=\"60%\"\r\n >\r\n <div class=\"card\">\r\n <div class=\"card\"-title class=\"warning text-h5\" primary-title>\r\n <div class=\"row\" class=\"ma-0\" justify=\"center\" align=\"center\">\r\n <v-icon dark left style=\"font-size: 24px !important\">\r\n fa fa-exclamation-triangle\r\n </v-icon>\r\n <div style=\"color: white\">{{ $t('form.alert') }}</div>\r\n </div>\r\n </div-title>\r\n <div class=\"card\"-text class=\"justify-center pa-6 grey lighten-2\">\r\n <h3>\r\n {{ $t('alerts.userMultiTabsGrid') }}\r\n </h3>\r\n </div-text>\r\n <hr class=\"divider\" class=\"grey lighten-1\"></span>\r\n <div class=\"card\"-actions class=\"grey lighten-2 justify-center\">\r\n <v-btn color=\"error\" ml-5 @click=\"userMultiTabsGrid = false\">\r\n <v-icon left color=\"white\">fa fa-times</v-icon>\r\n {{ $t('form.close') }}\r\n </v-btn>\r\n </div-actions>\r\n </div>\r\n </v-dialog> -->\r\n </div>\r\n</template>\r\n<script>\r\nimport Frame from './components/Frame.vue'\r\nimport FramesInterface from './utils/FramesInterface.js'\r\nimport FramesService from './services/FramesService.js'\r\n\r\nimport Commands from './components/Commands.vue'\r\nimport Infos from './components/Infos.vue'\r\nimport VideoProgress from './components/VideoProgress.vue'\r\nimport Settings from './components/Settings.vue'\r\n\r\nconst Positions = Object.freeze({\r\n previous: 0,\r\n current: 1,\r\n next: 2,\r\n})\r\n\r\nexport default {\r\n name: 'visualization-container',\r\n props: {\r\n value: {\r\n type: Boolean,\r\n required: true,\r\n },\r\n date: {\r\n type: String,\r\n required: true,\r\n },\r\n channel: {\r\n type: Number,\r\n required: true,\r\n },\r\n startAudienceTime: {\r\n type: String,\r\n required: true,\r\n },\r\n endAudienceTime: {\r\n type: String,\r\n required: true,\r\n },\r\n videoProgressBar: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n jumpOnInsert: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n framesFormat: {\r\n type: [Number, String],\r\n default: 6,\r\n },\r\n maxSize: {\r\n type: Number,\r\n },\r\n },\r\n components: {\r\n Frame,\r\n CommandBar: Commands,\r\n InfoBar: Infos,\r\n VideoProgress,\r\n Settings,\r\n // Help,\r\n },\r\n data() {\r\n return {\r\n Positions,\r\n updatingChannel: null,\r\n dialog: false,\r\n timeLastBlock: null,\r\n alternativeServer: false,\r\n useCache: true,\r\n numberOfRows: 1,\r\n framesPerRow: 5,\r\n secondsPerFrame: 1,\r\n fInterface: null,\r\n velocity: 1,\r\n frames: [],\r\n previousFrames: [],\r\n nextFrames: [],\r\n channelCode: 0,\r\n videoPlaying: false,\r\n activeFrame: null,\r\n activeVideo: null,\r\n videoTime: 0,\r\n videoTotalTime: null,\r\n progressVideoDrag: false,\r\n hourIniSelected: false,\r\n hourEndSelected: false,\r\n canInsertTime: false,\r\n lastHeight: 0,\r\n loopInterval: null,\r\n nextLoop: false,\r\n prevLoop: false,\r\n videoSliderTotalDuration: 900,\r\n blockStartTime: null,\r\n media: null,\r\n changeServer: false,\r\n userMultiTabsGrid: false,\r\n userMultiTabsGridsModel: true,\r\n playbackRate: 1,\r\n paused: false,\r\n commandBarShow: true,\r\n dialogs: {\r\n playbackRate: false,\r\n goTo: false,\r\n secondsPerFrame: false,\r\n frames: false,\r\n },\r\n }\r\n },\r\n async created() {\r\n this.changeServer = this.serverOfFrames === 'alternative'\r\n this.alternativeServer = this.serverOfFrames === 'alternative'\r\n\r\n const settings = [\r\n {\r\n framesPerRow: 2,\r\n numberOfRows: 1,\r\n },\r\n {\r\n framesPerRow: 3,\r\n numberOfRows: 1,\r\n },\r\n {\r\n framesPerRow: 3,\r\n numberOfRows: 2,\r\n },\r\n {\r\n framesPerRow: 4,\r\n numberOfRows: 1,\r\n },\r\n {\r\n framesPerRow: 4,\r\n numberOfRows: 2,\r\n },\r\n {\r\n framesPerRow: 5,\r\n numberOfRows: 1,\r\n },\r\n {\r\n framesPerRow: 5,\r\n numberOfRows: 2,\r\n },\r\n {\r\n framesPerRow: 6,\r\n numberOfRows: 1,\r\n },\r\n {\r\n framesPerRow: 6,\r\n numberOfRows: 2,\r\n },\r\n ]\r\n\r\n const storedOnDb = settings[parseInt(this.framesFormat) - 1]\r\n this.framesPerRow = storedOnDb.framesPerRow\r\n this.numberOfRows = storedOnDb.numberOfRows\r\n\r\n await this.createFramesInterface()\r\n if (this.maxSize) {\r\n this.resize(this.maxSize, true)\r\n }\r\n },\r\n methods: {\r\n framesClicked(e) {\r\n if (e.target.id != 'insert') {\r\n this.active = true\r\n }\r\n },\r\n async goToStartBlock() {\r\n try {\r\n const d = new Date()\r\n let timestamp = Date.UTC(\r\n d.getFullYear(),\r\n d.getMonth(),\r\n d.getDate(),\r\n d.getHours(),\r\n d.getMinutes(),\r\n d.getSeconds()\r\n )\r\n\r\n const response = (\r\n await FramesService.getNextAvailableBlock({\r\n channel: this.channel,\r\n time: timestamp / 1000,\r\n })\r\n ).data\r\n\r\n this.dialog = false\r\n this.changeHour(this.convertToAudienceTime(response.data.start, ':'))\r\n } catch (err) {\r\n console.error(err)\r\n }\r\n },\r\n async checkAvailableBlock() {\r\n try {\r\n const d = new Date()\r\n let timestamp = Date.UTC(\r\n d.getFullYear(),\r\n d.getMonth(),\r\n d.getDate(),\r\n d.getHours(),\r\n d.getMinutes(),\r\n d.getSeconds()\r\n )\r\n\r\n const response = (\r\n await FramesService.getNextAvailableBlock({\r\n channel: this.channel,\r\n time: timestamp / 1000,\r\n })\r\n ).data\r\n\r\n this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':')\r\n this.dialog = true\r\n if (!response.status) {\r\n this.timeLastBlock = 'N/D'\r\n }\r\n } catch (err) {\r\n console.error(err)\r\n }\r\n },\r\n updateSlider(videoStartTime, time) {\r\n // * atualizar slider se estiver fora do range definido previamente\r\n if (\r\n time < this.blockStartTime ||\r\n time > this.blockStartTime ||\r\n videoStartTime > this.blockStartTime + this.videoSliderTotalDuration\r\n ) {\r\n this.blockStartTime = videoStartTime\r\n this.videoSliderTotalDuration = 900\r\n }\r\n },\r\n nextLoopActivate() {\r\n this.breakLoop()\r\n this.loopInterval = setInterval(this.next, 40)\r\n setTimeout(() => {\r\n this.nextLoop = true\r\n }, 0)\r\n },\r\n prevLoopActivate() {\r\n this.breakLoop()\r\n this.loopInterval = setInterval(this.prev, 40)\r\n setTimeout(() => {\r\n this.prevLoop = true\r\n }, 0)\r\n },\r\n breakLoop() {\r\n clearInterval(this.loopInterval)\r\n this.loopInterval = null\r\n this.nextLoop = false\r\n this.prevLoop = false\r\n },\r\n changePlayPause(status) {\r\n this.paused = !status\r\n },\r\n resize(height = this.lastHeight) {\r\n this.lastHeight = height\r\n if (this.$refs.frames) {\r\n for (let frame of this.$refs.frames) {\r\n frame.resize(height)\r\n }\r\n }\r\n this.$emit('resized')\r\n },\r\n async goToFirstFrame() {\r\n let frames = this.$refs.frames\r\n\r\n let audienceTime = null\r\n if (frames.length > 0) {\r\n let frame = frames[0].frame\r\n audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n }\r\n // if (audienceTime) {\r\n // this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\r\n // }\r\n if (audienceTime) {\r\n const [hours, minutes, seconds] = audienceTime.split(':')\r\n const totalSeconds =\r\n parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)\r\n if (totalSeconds >= 9000)\r\n this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\r\n else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true))\r\n }\r\n },\r\n async goToLastFrame() {\r\n let frames = this.$refs.frames\r\n let audienceTime = null\r\n if (frames.length > 0) {\r\n let frame = frames[0].frame\r\n\r\n audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n }\r\n if (audienceTime) {\r\n this.changeHour(this.getLastFirtsBlockTime(audienceTime))\r\n }\r\n },\r\n getLastFirtsBlockTime(time, first = false) {\r\n if (time.indexOf(':') !== -1) {\r\n time = time.replace(/:/g, '')\r\n }\r\n let h, m, newTime\r\n const t = time.match(/.{1,2}/g)\r\n if (t[0] && t[1]) {\r\n h = parseInt(t[0])\r\n m = parseInt(t[1])\r\n }\r\n if (h < 26) {\r\n if (m < 15)\r\n if (first) newTime = t[0] + ':00:00'\r\n else newTime = t[0] + ':14:59'\r\n else if (m < 30)\r\n if (first) newTime = t[0] + ':15:00'\r\n else newTime = t[0] + ':29:59'\r\n else if (m < 45)\r\n if (first) newTime = t[0] + ':30:00'\r\n else newTime = t[0] + ':44:59'\r\n else if (first) newTime = t[0] + ':45:00'\r\n else newTime = t[0] + ':59:59'\r\n } else {\r\n if (m < 15)\r\n if (first) newTime = '26:00:00'\r\n else newTime = '26:14:59'\r\n else {\r\n if (first) newTime = '26:15:00'\r\n else newTime = '26:29:59'\r\n }\r\n }\r\n return newTime\r\n },\r\n openBlocks() {\r\n this.$refs.settings2?.openBlocks()\r\n },\r\n playOrPause() {\r\n const array = this.$refs.frames.filter((fc) => !!fc.active)\r\n if (array.length === 1) {\r\n const frame = array[0]\r\n frame.playOrPause(this.playbackRate)\r\n }\r\n },\r\n stopPlayingBar() {\r\n for (let ref of this.$refs.frames) {\r\n if (\r\n ref.videoStatus === ref.Status.playing ||\r\n ref.videoStatus === ref.Status.paused\r\n ) {\r\n ref.stop(false)\r\n }\r\n }\r\n },\r\n async setFrameSelection(selected) {\r\n this.frames = this.loadingArray\r\n switch (parseInt(selected)) {\r\n // 2x1\r\n case 1:\r\n this.framesPerRow = 2\r\n this.numberOfRows = 1\r\n break\r\n // 3x1\r\n case 2:\r\n this.framesPerRow = 3\r\n this.numberOfRows = 1\r\n break\r\n // 3x2\r\n case 3:\r\n this.framesPerRow = 3\r\n this.numberOfRows = 2\r\n break\r\n // 4x1\r\n case 4:\r\n this.framesPerRow = 4\r\n this.numberOfRows = 1\r\n break\r\n // 4x2\r\n case 5:\r\n this.framesPerRow = 4\r\n this.numberOfRows = 2\r\n break\r\n // 5x1\r\n case 6:\r\n this.framesPerRow = 5\r\n this.numberOfRows = 1\r\n break\r\n // 5x2\r\n case 7:\r\n this.framesPerRow = 5\r\n this.numberOfRows = 2\r\n break\r\n // 6x1\r\n case 8:\r\n this.framesPerRow = 6\r\n this.numberOfRows = 1\r\n break\r\n // 6x2\r\n case 9:\r\n this.framesPerRow = 6\r\n this.numberOfRows = 2\r\n break\r\n }\r\n await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\r\n this.getFramesArray()\r\n setTimeout(() => {\r\n for (let ref of this.$refs.frames) {\r\n ref?.resize(this.lastHeight)\r\n }\r\n }, 150)\r\n },\r\n getFramesArray() {\r\n this.frames = this.fInterface.getFrames(Positions.current)\r\n this.nextFrames = this.fInterface.getFrames(Positions.next)\r\n this.previousFrames = this.fInterface.getFrames(Positions.previous)\r\n },\r\n async createFramesInterface() {\r\n this.frames = this.loadingArray\r\n let ch = this.channel\r\n let associationTMP = {\r\n 1735073: 1,\r\n 1735074: 139,\r\n 1735075: 3,\r\n 1735076: 132,\r\n }\r\n //\r\n this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch\r\n\r\n const t = this.startAudienceTime.match(/.{1,2}/g)\r\n const d = this.getDateParts()\r\n const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n // * iniciar slider\r\n this.blockStartTime = time\r\n this.fInterface = await new FramesInterface(\r\n this.channelCode,\r\n this.numberOfRows,\r\n this.framesPerRow,\r\n time,\r\n this.startAudienceTime,\r\n this.useCache\r\n )\r\n await this.fInterface.init()\r\n\r\n this.getFramesArray()\r\n\r\n this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n\r\n this.activeVideo = null\r\n },\r\n getIndex(rowNumber, frameIndex, position) {\r\n let from = this.framesPerRow * this.numberOfRows * position\r\n let till = this.framesPerRow * this.numberOfRows * (position + 1)\r\n\r\n return (from + till * (rowNumber - 1)) / rowNumber + frameIndex\r\n },\r\n getAudienceTime(frameTime, rowNumber, frameNumber, position) {\r\n if (!frameTime) {\r\n return 'Loading...'\r\n } else if (\r\n this.getIndex(rowNumber, frameNumber, position) === this.activeVideo\r\n ) {\r\n return this.convertToAudienceTime(this.videoTime)\r\n } else {\r\n return this.convertToAudienceTime(frameTime)\r\n }\r\n },\r\n dateInUtc(miliSeconds) {\r\n var date = new Date(miliSeconds)\r\n var utc = new Date(\r\n date.getUTCFullYear(),\r\n date.getUTCMonth(),\r\n date.getUTCDate(),\r\n date.getUTCHours(),\r\n date.getUTCMinutes(),\r\n date.getUTCSeconds()\r\n )\r\n return utc\r\n },\r\n convertToAudienceTime(time, separator = ':') {\r\n const d = this.getDateParts()\r\n const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\r\n\r\n let hour = this.dateInUtc(time * 1000)\r\n .toTimeString()\r\n .split(' ')[0]\r\n .split(':')\r\n .map(Number)\r\n\r\n if (time > limit && time <= limit + this.startAudienceSeconds) {\r\n hour[0] = 24 + hour[0]\r\n }\r\n return hour\r\n .map((part) => (part > 9 ? part.toString() : '0' + part))\r\n .join(separator)\r\n },\r\n getDateParts(date = this.date) {\r\n const d = new Date(date)\r\n return {\r\n year: d.getFullYear(),\r\n month: d.getMonth(),\r\n day: d.getDate(),\r\n }\r\n },\r\n selectFrame(index, frame) {\r\n const d = this.getDateParts()\r\n const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\r\n const frameTime = frame?.time\r\n\r\n if (frameTime - (this.startAudienceSeconds + limit) <= 0) {\r\n if (this.hourIniSelected === true) {\r\n this.hourIniSelected = frameTime\r\n\r\n if (\r\n this.hourEndSelected &&\r\n this.hourIniSelected > this.hourEndSelected\r\n ) {\r\n this.hourEndSelected = false\r\n }\r\n } else if (this.hourEndSelected === true) {\r\n if (frameTime > this.hourIniSelected) {\r\n this.hourEndSelected = frameTime\r\n this.canInsertTime = true\r\n } else {\r\n this.hourEndSelected = false\r\n }\r\n }\r\n }\r\n\r\n if (this.activeFrame !== index) {\r\n // ? Se clicar no frame diferente de onde está a dar play, faz pausa\r\n const array = this.$refs.frames.filter(\r\n (fc) => fc.videoStatus === fc.Status.playing\r\n )\r\n if (array.length === 1) {\r\n const frame = array[0]\r\n frame.playOrPause()\r\n }\r\n this.activeVideo = null\r\n this.activeFrame = index\r\n }\r\n },\r\n setHourIni() {\r\n this.canInsertTime = true\r\n this.hourIniSelected = true\r\n document.getElementById(`frame-${this.activeFrame}`).click()\r\n this.$emit('setHourIni', {\r\n hour_ini: this.hourIniSelected\r\n ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n : null,\r\n })\r\n },\r\n setHourEnd() {\r\n this.canInsertTime = true\r\n this.hourEndSelected = true\r\n document.getElementById(`frame-${this.activeFrame}`).click()\r\n },\r\n //* Navegação\r\n arrowRight() {\r\n if (this.checkLimitRight(false)) {\r\n if (\r\n this.activeFrame ===\r\n this.numberOfRows * this.framesPerRow * 2 - 1\r\n ) {\r\n console.log(this.activeFrame, 'ACTIVE FRAME')\r\n this.next()\r\n } else {\r\n this.activeFrame++\r\n }\r\n }\r\n },\r\n arrowLeft() {\r\n if (this.checkLimitLeft(false)) {\r\n if (this.activeFrame === this.numberOfRows * this.framesPerRow) {\r\n this.prev()\r\n } else {\r\n this.activeFrame--\r\n }\r\n }\r\n },\r\n arrowUp() {\r\n console.log(\r\n this.activeFrame - this.numberOfRows * this.framesPerRow,\r\n Math.round((this.numberOfRows * this.framesPerRow) / 2)\r\n )\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\r\n checkLimitRight(value) {\r\n const hours = this.endAudienceTime.match(/.{1,2}/g)\r\n const d = this.getDateParts()\r\n const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59)\r\n\r\n if (value) {\r\n return (\r\n high > (this.fInterface.getCurrentTime() - 1) * 1000 &&\r\n this.nextFrames[0].title !== -1\r\n )\r\n } else {\r\n // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000\r\n return high > this.fInterface.getCurrentTime() * 1000\r\n }\r\n },\r\n checkLimitLeft(value) {\r\n const hours = this.startAudienceTime.match(/.{1,2}/g)\r\n const d = this.getDateParts()\r\n const low = Date.UTC(d.year, d.month, d.day, hours[0], hours[1], hours[2])\r\n\r\n if (value) {\r\n return low <= (this.fInterface.getCurrentTime() - 1) * 1000\r\n } else {\r\n return (\r\n low <\r\n (this.fInterface.getCurrentTime() +\r\n this.activeFrame -\r\n this.numberOfRows * this.framesPerRow) *\r\n 1000\r\n )\r\n }\r\n },\r\n async next() {\r\n if (this.checkLimitRight(true)) {\r\n const array = this.$refs.frames.filter(\r\n (fc) =>\r\n fc.videoStatus === fc.Status.playing ||\r\n fc.videoStatus === fc.Status.paused\r\n )\r\n\r\n if (array.length === 1) {\r\n const frame = array[0]\r\n frame.stop(false)\r\n }\r\n this.fInterface.setCurrentStep(this.secondsPerFrame)\r\n await this.fInterface.loadNextFrames()\r\n\r\n this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n this.activeVideo = null\r\n\r\n this.getFramesArray()\r\n }\r\n },\r\n async prev() {\r\n if (this.checkLimitLeft(true)) {\r\n const array = this.$refs.frames.filter(\r\n (fc) =>\r\n fc.videoStatus === fc.Status.playing ||\r\n fc.videoStatus === fc.Status.paused\r\n )\r\n if (array.length === 1) {\r\n const frame = array[0]\r\n frame.stop(false)\r\n }\r\n\r\n this.fInterface.setCurrentStep(this.secondsPerFrame)\r\n await this.fInterface.loadPrevFrames()\r\n\r\n this.activeFrame = this.getIndex(\r\n this.numberOfRows,\r\n this.framesPerRow - 1,\r\n Positions.current\r\n )\r\n this.activeVideo = null\r\n\r\n this.getFramesArray()\r\n }\r\n },\r\n async setStartTime(time) {\r\n if (time.indexOf(':') !== -1) {\r\n time = time.replace(/:/g, '')\r\n }\r\n const t = time.match(/.{1,2}/g)\r\n const d = this.getDateParts()\r\n const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n this.frames = this.loadingArray\r\n\r\n await this.fInterface.changeTime(setTime)\r\n\r\n this.getFramesArray()\r\n\r\n this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n // let frames = this.$refs.frames\r\n\r\n // let audienceTime = null\r\n // if (frames.length > 0) {\r\n // let frame = frames[0].frame\r\n // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n // }\r\n\r\n this.activeVideo = null\r\n\r\n return true\r\n },\r\n hourToTimeStamp(time) {\r\n if (time.indexOf(':') !== -1) {\r\n time = time.replace(/:/g, '')\r\n }\r\n const t = time.match(/.{1,2}/g)\r\n const d = this.getDateParts()\r\n const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n\r\n return setTime\r\n },\r\n async changeHour(value) {\r\n if (value) {\r\n setTimeout(() => {\r\n const array = this.$refs.frames.filter(\r\n (fc) =>\r\n fc.videoStatus === fc.Status.playing ||\r\n fc.videoStatus === fc.Status.paused\r\n )\r\n\r\n if (array.length === 1) {\r\n const frame = array[0]\r\n frame.stop(false)\r\n }\r\n\r\n this.setStartTime(value, true)\r\n }, 0)\r\n }\r\n },\r\n changeBlockInterval(value) {\r\n this.changeHour(value.ini)\r\n let time_ini, time_end\r\n time_ini = this.hourToTimeStamp(value.ini)\r\n time_end = this.hourToTimeStamp(value.end)\r\n this.videoSliderTotalDuration = time_end - time_ini\r\n this.$refs.frames[0].changeSettings(time_ini)\r\n this.blockStartTime = time_ini\r\n },\r\n //eslint-disable-next-line\r\n async updateVideoTime(index, videoTime) {\r\n this.activeVideo = index\r\n this.videoTime = videoTime\r\n },\r\n //eslint-disable-next-line\r\n updateVideoStatus(currentTime) {\r\n if (!this.progressVideoDrag) {\r\n // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS\r\n // this.updateProgress(null, currentTime)\r\n }\r\n },\r\n async startPlaying(frame, totalTime) {\r\n const array = this.$refs.frames.filter(\r\n (fc) => fc.frame.time !== frame.time\r\n )\r\n\r\n for (let ref of array) {\r\n if (\r\n ref.videoStatus === ref.Status.playing ||\r\n ref.videoStatus === ref.Status.paused\r\n ) {\r\n ref.stop(false)\r\n }\r\n }\r\n\r\n this.videoTotalTime = totalTime\r\n this.videoPlaying = true\r\n },\r\n stopPlaying() {\r\n this.videoTotalTime = null\r\n this.videoPlaying = false\r\n this.paused = false\r\n },\r\n insertTime() {\r\n this.$emit('timeToInsert', {\r\n channel: this.channel,\r\n hour_ini: this.hourIniSelected\r\n ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n : null,\r\n hour_end: this.hourEndSelected\r\n ? this.convertToAudienceTime(this.hourEndSelected, '')\r\n : null,\r\n force: false,\r\n })\r\n\r\n if (this.jumpOnInsert) {\r\n this.changeHour(\r\n this.convertToAudienceTime(\r\n (this.hourEndSelected || this.hourIniSelected) + 1\r\n )\r\n )\r\n }\r\n\r\n this.hourIniSelected = null\r\n this.hourEndSelected = null\r\n this.canInsertTime = false\r\n\r\n // this.fInterface.setCurrentPosition(this.hourEndSelected)\r\n },\r\n insertTimeForce() {\r\n this.$emit('timeToInsert', {\r\n channel: this.channel,\r\n hour_ini: this.hourIniSelected\r\n ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n : null,\r\n hour_end: this.hourEndSelected\r\n ? this.convertToAudienceTime(this.hourEndSelected, '')\r\n : null,\r\n force: true,\r\n })\r\n\r\n this.hourIniSelected = null\r\n this.hourEndSelected = null\r\n this.canInsertTime = false\r\n\r\n // this.fInterface.setCurrentPosition(this.hourEndSelected)\r\n },\r\n async getChannelMedia() {\r\n // this.media = (await ChannelService.show(this.channel)).data.MEDIA\r\n },\r\n async changeServerClick() {\r\n this.changeServer = !this.changeServer\r\n // this.$store.dispatch(\r\n // 'serverOfFrames',\r\n // this.changeServer ? 'alternative' : 'default'\r\n // )\r\n sessionStorage.setItem(\r\n 'serverOfFrames',\r\n this.changeServer ? 'alternative' : 'default'\r\n )\r\n\r\n // if (this.$route.params.time != this.frames[0].time)\r\n // this.$router.push({\r\n // name: 'grid',\r\n // params: {\r\n // date: this.date,\r\n // channel: this.channelCode,\r\n // time: this.frames[0].time,\r\n // },\r\n // })\r\n location.reload()\r\n },\r\n },\r\n computed: {\r\n active: {\r\n get() {\r\n return this.value\r\n },\r\n set(value) {\r\n this.$emit('input', value)\r\n },\r\n },\r\n settingsClosed() {\r\n return !Object.values(this.dialogs).find((v) => v)\r\n },\r\n startAudienceSeconds() {\r\n const t = this.startAudienceTime.match(/.{1,2}/g)\r\n return parseInt(t[0] * 3600 + t[1] * 60 + t[2])\r\n },\r\n loadingArray() {\r\n return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())\r\n },\r\n serverOfFrames() {\r\n return sessionStorage.getItem('server')\r\n },\r\n },\r\n watch: {\r\n secondsPerFrame(value) {\r\n let frames = this.$refs.frames\r\n let initialTime = null\r\n let audienceTime = null\r\n if (frames.length > 0) {\r\n let frame = frames[0].frame\r\n\r\n if (initialTime === null) {\r\n initialTime = frame.time\r\n }\r\n if (value <= 5) {\r\n let newAudienceTime = initialTime + value\r\n audienceTime = this.getAudienceTime(newAudienceTime, 0, 0, 0)\r\n this.changeHour(audienceTime)\r\n this.next()\r\n }\r\n }\r\n },\r\n framesFormat(value) {\r\n this.setFrameSelection(value)\r\n },\r\n active() {\r\n // ? sempre que trocamos de tabs dar reset as horas selected\r\n this.hourIniSelected = false\r\n this.hourEndSelected = false\r\n },\r\n useCache() {\r\n this.createFramesInterface()\r\n },\r\n hourIniSelected(value) {\r\n if (value) {\r\n sessionStorage.setItem(\r\n 'currentTimeFrames',\r\n this.convertToAudienceTime(this.hourIniSelected, '')\r\n )\r\n } else {\r\n sessionStorage.removeItem('currentTimeFrames')\r\n }\r\n },\r\n activeFrame(value) {\r\n if (value) {\r\n this.stopPlayingBar()\r\n }\r\n },\r\n channel() {\r\n this.updatingChannel = new Promise((resolve, reject) => {\r\n try {\r\n this.createFramesInterface()\r\n resolve(true)\r\n } catch (err) {\r\n reject(err)\r\n }\r\n })\r\n },\r\n },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n display: block;\r\n flex: 1 1 100%;\r\n height: 0px;\r\n max-height: 0px;\r\n opacity: 1;\r\n transition: inherit;\r\n border-style: solid;\r\n border-width: thin 0 0 0;\r\n border-color: rgba(0, 0, 0, 0.12);\r\n margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n align-self: stretch;\r\n border-width: 0 thin 0 0;\r\n display: inline-flex;\r\n height: inherit;\r\n margin-left: -1px;\r\n max-height: 100%;\r\n max-width: 0px;\r\n vertical-align: text-bottom;\r\n width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n width: 100%;\r\n transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n overflow-wrap: break-word;\r\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\r\n}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n max-width: 100% !important;\r\n margin: 0 auto !important;\r\n height: 100%;\r\n border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n border-radius: 0 !important;\r\n font-size: 12px;\r\n width: 100%;\r\n box-shadow: none;\r\n height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n background-color: #f5f5f5;\r\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n}\r\n#command-bar button {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\r\n}\r\n\r\n.settings-container {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n margin: 0 2px;\r\n cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n border: none;\r\n}\r\n\r\n.visualization-card {\r\n border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n display: block !important;\r\n z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n background: var(--visualization-primary);\r\n color: white;\r\n border-radius: 16px;\r\n padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n position: absolute;\r\n margin: 5px;\r\n border-color: var(--visualization-primary);\r\n z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n border-width: 5px 5px 0 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n bottom: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n border-width: 0 5px 5px 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-top-color: transparent !important;\r\n top: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n border-width: 5px 5px 5px 0;\r\n border-left-color: transparent !important;\r\n border-top-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n left: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n border-width: 5px 0 5px 5px;\r\n border-top-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n right: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n background: #f9f9f9;\r\n color: black;\r\n padding: 24px;\r\n border-radius: 5px;\r\n box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n visibility: visible;\r\n opacity: 1;\r\n transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined });
4578
+ inject("data-v-09cd6aae_0", { source: "\n.visualization-row[data-v-09cd6aae] {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\n}\n.visualization-col[data-v-09cd6aae] {\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-09cd6aae] {\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-09cd6aae] {\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-09cd6aae] {\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-09cd6aae],[data-v-09cd6aae] .visualization-justify-center {\r\n justify-content: center;\n}\n.visualization-align-center[data-v-09cd6aae] {\r\n align-items: center;\n}\n#visualization-container[data-v-09cd6aae] {\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-09cd6aae] {\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-09cd6aae],\r\n#info-bar[data-v-09cd6aae] {\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-09cd6aae] {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\n}\n#command-bar button[data-v-09cd6aae]:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-09cd6aae] {\r\n font-size: 16px;\n}\n#command-bar[data-v-09cd6aae] {\r\n padding: 0 !important;\n}\n#info-bar[data-v-09cd6aae] {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\n}\n.settings-container[data-v-09cd6aae] {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\n}\n.settings-container > *[data-v-09cd6aae] {\r\n margin: 0 2px;\r\n cursor: pointer;\n}\n#info-bar svg[data-v-09cd6aae] {\r\n font-size: 16px;\n}\n#info-bar .divider[data-v-09cd6aae] {\r\n margin: 0 8px;\n}\nsvg[data-v-09cd6aae]:focus {\r\n border: none;\n}\n.visualization-card[data-v-09cd6aae] {\r\n border-left: 8px solid #eee;\n}\n.active-tab[data-v-09cd6aae] {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\n}\n[id^='frame-'][data-v-09cd6aae] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\n}\n.tooltip[data-v-09cd6aae] {\r\n display: block !important;\r\n z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-09cd6aae] {\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-09cd6aae] {\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-09cd6aae] {\r\n margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-09cd6aae] {\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-09cd6aae] {\r\n margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-09cd6aae] {\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-09cd6aae] {\r\n margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-09cd6aae] {\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-09cd6aae] {\r\n margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-09cd6aae] {\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-09cd6aae] {\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-09cd6aae] {\r\n border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-09cd6aae] {\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-09cd6aae] {\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":";AA0pCA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;EAEA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Visualization.vue","sourcesContent":["<template>\r\n <div\r\n class=\"visualization-row\"\r\n id=\"visualization-container\"\r\n @click=\"framesClicked\"\r\n >\r\n <GlobalEvents\r\n v-if=\"active && canInsertTime && settingsClosed\"\r\n @keydown.45=\"insertTime\"\r\n @keydown.46=\"insertTime\"\r\n />\r\n <GlobalEvents\r\n v-if=\"active && settingsClosed\"\r\n @keydown.left.prevent=\"arrowLeft\"\r\n @keydown.right.prevent=\"arrowRight\"\r\n @keydown.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.83.prevent=\"setHourIni\"\r\n @keydown.69.prevent=\"setHourEnd\"\r\n @keydown.36.prevent=\"goToFirstFrame\"\r\n @keydown.35.prevent=\"goToLastFrame\"\r\n @keydown.71.prevent=\"dialogs.goTo = true\"\r\n @keydown.73.prevent=\"dialogs.secondsPerFrame = true\"\r\n @keydown.76.prevent=\"dialogs.frames = true\"\r\n @keydown.49.97=\"() => (secondsPerFrame = 1)\"\r\n @keydown.50.98=\"() => (secondsPerFrame = 2)\"\r\n @keydown.51.99=\"() => (secondsPerFrame = 3)\"\r\n @keydown.52.100=\"() => (secondsPerFrame = 4)\"\r\n @keydown.53.101=\"() => (secondsPerFrame = 5)\"\r\n />\r\n <GlobalEvents\r\n v-if=\"prevLoop || nextLoop\"\r\n @keydown=\"breakLoop\"\r\n v-on:click=\"breakLoop\"\r\n />\r\n <settings\r\n v-if=\"active\"\r\n :dialogs-visibility=\"dialogs\"\r\n :playback-rate=\"playbackRate\"\r\n :seconds-per-frame=\"secondsPerFrame\"\r\n :frames-per-row=\"framesPerRow\"\r\n :number-of-rows=\"numberOfRows\"\r\n @change-playback-rate=\"(value) => (playbackRate = value)\"\r\n @change-go-to=\"changeHour\"\r\n @change-seconds-per-frame=\"(value) => (secondsPerFrame = value)\"\r\n @set-frames-selection=\"setFrameSelection\"\r\n @close=\"(dialog) => (dialogs[dialog] = false)\"\r\n />\r\n <div\r\n :class=\"{ 'visualization-card': true, 'active-tab': active }\"\r\n style=\"width: 100%; padding: 0\"\r\n >\r\n <command-bar\r\n v-show=\"commandBarShow\"\r\n :video-playing=\"videoPlaying\"\r\n :video-paused=\"paused\"\r\n :insert-time=\"canInsertTime\"\r\n :hour-ini-selected=\"!!hourIniSelected\"\r\n :hour-end-selected=\"!!hourEndSelected\"\r\n @prev-loop-activate=\"prevLoopActivate\"\r\n @next-loop-activate=\"nextLoopActivate\"\r\n @prev=\"prev\"\r\n @next=\"next\"\r\n @go-to=\"dialogs.goTo = true\"\r\n @open-frame-selection=\"dialogs.frames = true\"\r\n @open-frames-per-second=\"dialogs.secondsPerFrame = true\"\r\n @open-blocks=\"openBlocks\"\r\n @open-playback-rate=\"dialogs.playbackRate = true\"\r\n @play-or-pause=\"playOrPause\"\r\n @stop-playing=\"stopPlayingBar\"\r\n @set-hour-ini=\"setHourIni\"\r\n @set-hour-end=\"setHourEnd\"\r\n @insert-time=\"insertTime\"\r\n />\r\n <video-progress\r\n v-if=\"videoProgressBar\"\r\n v-show=\"videoPlaying\"\r\n :video-time=\"videoTime\"\r\n />\r\n <info-bar\r\n :playback-rate=\"playbackRate\"\r\n :seconds-per-frame=\"secondsPerFrame\"\r\n :commands-show=\"commandBarShow\"\r\n :cache=\"useCache\"\r\n :block-start-time=\"blockStartTime\"\r\n :video-total-duration=\"videoSliderTotalDuration\"\r\n :alternative-server=\"alternativeServer\"\r\n :frames-per-row=\"framesPerRow\"\r\n :number-of-rows=\"numberOfRows\"\r\n :hour-ini=\"hourIniSelected\"\r\n :hour-end=\"hourEndSelected\"\r\n @toogle-commands-visibility=\"commandBarShow = !commandBarShow\"\r\n @toogle-cache=\"useCache = !useCache\"\r\n @change-server=\"changeServerClick\"\r\n />\r\n <div\r\n class=\"visualization-row\"\r\n v-for=\"rowNumber in numberOfRows\"\r\n :id=\"'row-' + rowNumber\"\r\n :key=\"'row-' + rowNumber\"\r\n style=\"padding: 12px\"\r\n >\r\n <div\r\n v-for=\"(frame, frameNumber) in previousFrames\"\r\n :key=\"\r\n numberOfRows +\r\n '-' +\r\n framesPerRow +\r\n '-' +\r\n getIndex(rowNumber, frameNumber, Positions.previous)\r\n \"\r\n style=\"display: none\"\r\n >\r\n <span v-html=\"frame.img\" />\r\n </div>\r\n <div\r\n v-for=\"(frame, frameNumber) in nextFrames\"\r\n :key=\"\r\n numberOfRows +\r\n '-' +\r\n framesPerRow +\r\n '-' +\r\n getIndex(rowNumber, frameNumber, Positions.next)\r\n \"\r\n style=\"display: none\"\r\n >\r\n <span v-html=\"frame.img\" />\r\n </div>\r\n <div\r\n class=\"visualization-col\"\r\n v-for=\"(frame, frameNumber) in frames.slice(\r\n framesPerRow * (rowNumber - 1),\r\n framesPerRow * rowNumber\r\n )\"\r\n :key=\"'row-' + rowNumber + '-frame-' + frameNumber\"\r\n :id=\"`frame-${getIndex(rowNumber, frameNumber, Positions.current)}`\"\r\n :class=\"{ loaderImg: !!frame.img }\"\r\n @click=\"\r\n frame.time\r\n ? selectFrame(\r\n getIndex(rowNumber, frameNumber, Positions.current),\r\n frame\r\n )\r\n : null\r\n \"\r\n >\r\n <span :id=\"activeFrame ? 'aa' : 0\" style=\"padding-left: 4px\">\r\n <b>\r\n {{\r\n getAudienceTime(\r\n frame.time,\r\n rowNumber,\r\n frameNumber,\r\n Positions.current\r\n )\r\n }}\r\n </b>\r\n </span>\r\n\r\n <frame\r\n ref=\"frames\"\r\n :frame=\"frame\"\r\n :index=\"getIndex(rowNumber, frameNumber, Positions.current)\"\r\n :grid-settings=\"{ numberOfRows, framesPerRow }\"\r\n :initialTime=\"frame.time === hourIniSelected\"\r\n :endTime=\"frame.time === hourEndSelected\"\r\n :betweenTime=\"\r\n frame.time > hourIniSelected && frame.time < hourEndSelected\r\n \"\r\n :active=\"\r\n getIndex(rowNumber, frameNumber, Positions.current) ===\r\n activeFrame\r\n \"\r\n :activeTab=\"active\"\r\n :videoUrl=\"fInterface ? fInterface.getVideoUrl(frame) : ''\"\r\n @startPlaying=\"startPlaying\"\r\n @stopPlaying=\"stopPlaying\"\r\n @playPauseStatus=\"changePlayPause\"\r\n @updateSlider=\"updateSlider\"\r\n :playback-rate=\"playbackRate\"\r\n style=\"margin: 0 auto\"\r\n ></frame>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <settings\r\n ref=\"settings2\"\r\n :active=\"active\"\r\n @goToTime=\"changeHour\"\r\n @goToBlockInterval=\"changeBlockInterval\"\r\n @setSplitTime=\"setSplitTime\"\r\n @setFrameSelection=\"setFrameSelection\"\r\n @setPlaybackRate=\"\r\n (rate) => {\r\n playbackRate = rate\r\n }\r\n \"\r\n >\r\n </settings> -->\r\n <!-- <v-dialog v-model=\"dialog\" width=\"500\">\r\n <div class=\"card\">\r\n <div class=\"card\"-title class=\"text-h5 grey lighten-2\">\r\n {{ ' Último bloco disponível até: ' }}\r\n <v-btn\r\n @click=\"goToStartBlock\"\r\n class=\"ml-2\"\r\n dark\r\n color=\"success\"\r\n depressed\r\n >\r\n <v-icon left> fa-clock </v-icon>\r\n {{ timeLastBlock }}\r\n </v-btn>\r\n <v-spacer></v-spacer>\r\n <v-btn color=\"error\" fab small class=\"ml-5\" @click=\"dialog = false\">\r\n <v-icon dark> fa fa-xmark </v-icon>\r\n </v-btn>\r\n </div-title>\r\n </div>\r\n </v-dialog>\r\n <Help :media=\"media\" @close=\"media = null\" />\r\n <v-dialog\r\n v-if=\"userMultiTabsGrid\"\r\n v-model=\"userMultiTabsGridsModel\"\r\n persistent\r\n width=\"60%\"\r\n >\r\n <div class=\"card\">\r\n <div class=\"card\"-title class=\"warning text-h5\" primary-title>\r\n <div class=\"row\" class=\"ma-0\" justify=\"center\" align=\"center\">\r\n <v-icon dark left style=\"font-size: 24px !important\">\r\n fa fa-exclamation-triangle\r\n </v-icon>\r\n <div style=\"color: white\">{{ $t('form.alert') }}</div>\r\n </div>\r\n </div-title>\r\n <div class=\"card\"-text class=\"justify-center pa-6 grey lighten-2\">\r\n <h3>\r\n {{ $t('alerts.userMultiTabsGrid') }}\r\n </h3>\r\n </div-text>\r\n <hr class=\"divider\" class=\"grey lighten-1\"></span>\r\n <div class=\"card\"-actions class=\"grey lighten-2 justify-center\">\r\n <v-btn color=\"error\" ml-5 @click=\"userMultiTabsGrid = false\">\r\n <v-icon left color=\"white\">fa fa-times</v-icon>\r\n {{ $t('form.close') }}\r\n </v-btn>\r\n </div-actions>\r\n </div>\r\n </v-dialog> -->\r\n </div>\r\n</template>\r\n<script>\r\nimport Frame from './components/Frame.vue'\r\nimport FramesInterface from './utils/FramesInterface.js'\r\nimport FramesService from './services/FramesService.js'\r\n\r\nimport Commands from './components/Commands.vue'\r\nimport Infos from './components/Infos.vue'\r\nimport VideoProgress from './components/VideoProgress.vue'\r\nimport Settings from './components/Settings.vue'\r\n\r\nconst Positions = Object.freeze({\r\n previous: 0,\r\n current: 1,\r\n next: 2,\r\n})\r\n\r\nexport default {\r\n name: 'visualization-container',\r\n props: {\r\n value: {\r\n type: Boolean,\r\n required: true,\r\n },\r\n date: {\r\n type: String,\r\n required: true,\r\n },\r\n channel: {\r\n type: Number,\r\n required: true,\r\n },\r\n startAudienceTime: {\r\n type: String,\r\n required: true,\r\n },\r\n endAudienceTime: {\r\n type: String,\r\n required: true,\r\n },\r\n videoProgressBar: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n jumpOnInsert: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n framesFormat: {\r\n type: [Number, String],\r\n default: 6,\r\n },\r\n maxSize: {\r\n type: Number,\r\n },\r\n },\r\n components: {\r\n Frame,\r\n CommandBar: Commands,\r\n InfoBar: Infos,\r\n VideoProgress,\r\n Settings,\r\n // Help,\r\n },\r\n data() {\r\n return {\r\n Positions,\r\n updatingChannel: null,\r\n dialog: false,\r\n timeLastBlock: null,\r\n alternativeServer: false,\r\n useCache: true,\r\n numberOfRows: 1,\r\n framesPerRow: 5,\r\n secondsPerFrame: 1,\r\n fInterface: null,\r\n velocity: 1,\r\n frames: [],\r\n previousFrames: [],\r\n nextFrames: [],\r\n channelCode: 0,\r\n videoPlaying: false,\r\n activeFrame: null,\r\n activeVideo: null,\r\n videoTime: 0,\r\n videoTotalTime: null,\r\n progressVideoDrag: false,\r\n hourIniSelected: false,\r\n hourEndSelected: false,\r\n canInsertTime: false,\r\n lastHeight: 0,\r\n loopInterval: null,\r\n nextLoop: false,\r\n prevLoop: false,\r\n videoSliderTotalDuration: 900,\r\n blockStartTime: null,\r\n media: null,\r\n changeServer: false,\r\n userMultiTabsGrid: false,\r\n userMultiTabsGridsModel: true,\r\n playbackRate: 1,\r\n paused: false,\r\n commandBarShow: true,\r\n dialogs: {\r\n playbackRate: false,\r\n goTo: false,\r\n secondsPerFrame: false,\r\n frames: false,\r\n },\r\n lastNext: 0,\r\n lastPrev: 0,\r\n }\r\n },\r\n async created() {\r\n this.changeServer = this.serverOfFrames === 'alternative'\r\n this.alternativeServer = this.serverOfFrames === 'alternative'\r\n\r\n const settings = [\r\n {\r\n framesPerRow: 2,\r\n numberOfRows: 1,\r\n },\r\n {\r\n framesPerRow: 3,\r\n numberOfRows: 1,\r\n },\r\n {\r\n framesPerRow: 3,\r\n numberOfRows: 2,\r\n },\r\n {\r\n framesPerRow: 4,\r\n numberOfRows: 1,\r\n },\r\n {\r\n framesPerRow: 4,\r\n numberOfRows: 2,\r\n },\r\n {\r\n framesPerRow: 5,\r\n numberOfRows: 1,\r\n },\r\n {\r\n framesPerRow: 5,\r\n numberOfRows: 2,\r\n },\r\n {\r\n framesPerRow: 6,\r\n numberOfRows: 1,\r\n },\r\n {\r\n framesPerRow: 6,\r\n numberOfRows: 2,\r\n },\r\n ]\r\n\r\n const storedOnDb = settings[parseInt(this.framesFormat) - 1]\r\n this.framesPerRow = storedOnDb.framesPerRow\r\n this.numberOfRows = storedOnDb.numberOfRows\r\n\r\n await this.createFramesInterface()\r\n if (this.maxSize) {\r\n this.resize(this.maxSize, true)\r\n }\r\n },\r\n methods: {\r\n framesClicked(e) {\r\n if (e.target.id != 'insert') {\r\n this.active = true\r\n }\r\n },\r\n async goToStartBlock() {\r\n try {\r\n const d = new Date()\r\n let timestamp = Date.UTC(\r\n d.getFullYear(),\r\n d.getMonth(),\r\n d.getDate(),\r\n d.getHours(),\r\n d.getMinutes(),\r\n d.getSeconds()\r\n )\r\n\r\n const response = (\r\n await FramesService.getNextAvailableBlock({\r\n channel: this.channel,\r\n time: timestamp / 1000,\r\n })\r\n ).data\r\n\r\n this.dialog = false\r\n this.changeHour(this.convertToAudienceTime(response.data.start, ':'))\r\n } catch (err) {\r\n console.error(err)\r\n }\r\n },\r\n async checkAvailableBlock() {\r\n try {\r\n const d = new Date()\r\n let timestamp = Date.UTC(\r\n d.getFullYear(),\r\n d.getMonth(),\r\n d.getDate(),\r\n d.getHours(),\r\n d.getMinutes(),\r\n d.getSeconds()\r\n )\r\n\r\n const response = (\r\n await FramesService.getNextAvailableBlock({\r\n channel: this.channel,\r\n time: timestamp / 1000,\r\n })\r\n ).data\r\n\r\n this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':')\r\n this.dialog = true\r\n if (!response.status) {\r\n this.timeLastBlock = 'N/D'\r\n }\r\n } catch (err) {\r\n console.error(err)\r\n }\r\n },\r\n updateSlider(videoStartTime, time) {\r\n // * atualizar slider se estiver fora do range definido previamente\r\n if (\r\n time < this.blockStartTime ||\r\n time > this.blockStartTime ||\r\n videoStartTime > this.blockStartTime + this.videoSliderTotalDuration\r\n ) {\r\n this.blockStartTime = videoStartTime\r\n this.videoSliderTotalDuration = 900\r\n }\r\n },\r\n nextLoopActivate() {\r\n this.breakLoop()\r\n this.loopInterval = setInterval(this.next, 150)\r\n setTimeout(() => {\r\n this.nextLoop = true\r\n }, 0)\r\n },\r\n prevLoopActivate() {\r\n this.breakLoop()\r\n this.loopInterval = setInterval(this.prev, 150)\r\n setTimeout(() => {\r\n this.prevLoop = true\r\n }, 0)\r\n },\r\n breakLoop() {\r\n clearInterval(this.loopInterval)\r\n this.loopInterval = null\r\n this.nextLoop = false\r\n this.prevLoop = false\r\n },\r\n changePlayPause(status) {\r\n this.paused = !status\r\n },\r\n resize(height = this.lastHeight) {\r\n this.lastHeight = height\r\n if (this.$refs.frames) {\r\n for (let frame of this.$refs.frames) {\r\n frame.resize(height)\r\n }\r\n }\r\n this.$emit('resized')\r\n },\r\n async goToFirstFrame() {\r\n let frames = this.$refs.frames\r\n\r\n let audienceTime = null\r\n if (frames.length > 0) {\r\n let frame = frames[0].frame\r\n audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n }\r\n // if (audienceTime) {\r\n // this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\r\n // }\r\n if (audienceTime) {\r\n const [hours, minutes, seconds] = audienceTime.split(':')\r\n const totalSeconds =\r\n parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)\r\n if (totalSeconds >= 9000)\r\n this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\r\n else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true))\r\n }\r\n },\r\n async goToLastFrame() {\r\n let frames = this.$refs.frames\r\n let audienceTime = null\r\n if (frames.length > 0) {\r\n let frame = frames[0].frame\r\n\r\n audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n }\r\n if (audienceTime) {\r\n this.changeHour(this.getLastFirtsBlockTime(audienceTime))\r\n }\r\n },\r\n getLastFirtsBlockTime(time, first = false) {\r\n if (time.indexOf(':') !== -1) {\r\n time = time.replace(/:/g, '')\r\n }\r\n let h, m, newTime\r\n const t = time.match(/.{1,2}/g)\r\n if (t[0] && t[1]) {\r\n h = parseInt(t[0])\r\n m = parseInt(t[1])\r\n }\r\n if (h < 26) {\r\n if (m < 15)\r\n if (first) newTime = t[0] + ':00:00'\r\n else newTime = t[0] + ':14:59'\r\n else if (m < 30)\r\n if (first) newTime = t[0] + ':15:00'\r\n else newTime = t[0] + ':29:59'\r\n else if (m < 45)\r\n if (first) newTime = t[0] + ':30:00'\r\n else newTime = t[0] + ':44:59'\r\n else if (first) newTime = t[0] + ':45:00'\r\n else newTime = t[0] + ':59:59'\r\n } else {\r\n if (m < 15)\r\n if (first) newTime = '26:00:00'\r\n else newTime = '26:14:59'\r\n else {\r\n if (first) newTime = '26:15:00'\r\n else newTime = '26:29:59'\r\n }\r\n }\r\n return newTime\r\n },\r\n openBlocks() {\r\n this.$refs.settings2?.openBlocks()\r\n },\r\n playOrPause() {\r\n const array = this.$refs.frames.filter((fc) => !!fc.active)\r\n if (array.length === 1) {\r\n const frame = array[0]\r\n frame.playOrPause(this.playbackRate)\r\n }\r\n },\r\n stopPlayingBar() {\r\n for (let ref of this.$refs.frames) {\r\n if (\r\n ref.videoStatus === ref.Status.playing ||\r\n ref.videoStatus === ref.Status.paused\r\n ) {\r\n ref.stop(false)\r\n }\r\n }\r\n },\r\n async setFrameSelection(selected) {\r\n this.frames = this.loadingArray\r\n switch (parseInt(selected)) {\r\n // 2x1\r\n case 1:\r\n this.framesPerRow = 2\r\n this.numberOfRows = 1\r\n break\r\n // 3x1\r\n case 2:\r\n this.framesPerRow = 3\r\n this.numberOfRows = 1\r\n break\r\n // 3x2\r\n case 3:\r\n this.framesPerRow = 3\r\n this.numberOfRows = 2\r\n break\r\n // 4x1\r\n case 4:\r\n this.framesPerRow = 4\r\n this.numberOfRows = 1\r\n break\r\n // 4x2\r\n case 5:\r\n this.framesPerRow = 4\r\n this.numberOfRows = 2\r\n break\r\n // 5x1\r\n case 6:\r\n this.framesPerRow = 5\r\n this.numberOfRows = 1\r\n break\r\n // 5x2\r\n case 7:\r\n this.framesPerRow = 5\r\n this.numberOfRows = 2\r\n break\r\n // 6x1\r\n case 8:\r\n this.framesPerRow = 6\r\n this.numberOfRows = 1\r\n break\r\n // 6x2\r\n case 9:\r\n this.framesPerRow = 6\r\n this.numberOfRows = 2\r\n break\r\n }\r\n await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\r\n this.getFramesArray()\r\n setTimeout(() => {\r\n for (let ref of this.$refs.frames) {\r\n ref?.resize(this.lastHeight)\r\n }\r\n }, 150)\r\n },\r\n getFramesArray() {\r\n this.frames = this.fInterface.getFrames(Positions.current)\r\n this.nextFrames = this.fInterface.getFrames(Positions.next)\r\n this.previousFrames = this.fInterface.getFrames(Positions.previous)\r\n },\r\n async createFramesInterface() {\r\n this.frames = this.loadingArray\r\n let ch = this.channel\r\n let associationTMP = {\r\n 1735073: 1,\r\n 1735074: 139,\r\n 1735075: 3,\r\n 1735076: 132,\r\n }\r\n //\r\n this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch\r\n\r\n const t = this.startAudienceTime.match(/.{1,2}/g)\r\n const d = this.getDateParts()\r\n const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n // * iniciar slider\r\n this.blockStartTime = time\r\n this.fInterface = await new FramesInterface(\r\n this.channelCode,\r\n this.numberOfRows,\r\n this.framesPerRow,\r\n time,\r\n this.startAudienceTime,\r\n this.useCache\r\n )\r\n await this.fInterface.init()\r\n\r\n this.getFramesArray()\r\n\r\n this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n\r\n this.activeVideo = null\r\n },\r\n getIndex(rowNumber, frameIndex, position) {\r\n let from = this.framesPerRow * this.numberOfRows * position\r\n let till = this.framesPerRow * this.numberOfRows * (position + 1)\r\n\r\n return (from + till * (rowNumber - 1)) / rowNumber + frameIndex\r\n },\r\n getAudienceTime(frameTime, rowNumber, frameNumber, position) {\r\n if (!frameTime) {\r\n return 'Loading...'\r\n } else if (\r\n this.getIndex(rowNumber, frameNumber, position) === this.activeVideo\r\n ) {\r\n return this.convertToAudienceTime(this.videoTime)\r\n } else {\r\n return this.convertToAudienceTime(frameTime)\r\n }\r\n },\r\n dateInUtc(miliSeconds) {\r\n var date = new Date(miliSeconds)\r\n var utc = new Date(\r\n date.getUTCFullYear(),\r\n date.getUTCMonth(),\r\n date.getUTCDate(),\r\n date.getUTCHours(),\r\n date.getUTCMinutes(),\r\n date.getUTCSeconds()\r\n )\r\n return utc\r\n },\r\n convertToAudienceTime(time, separator = ':') {\r\n const d = this.getDateParts()\r\n const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\r\n\r\n let hour = this.dateInUtc(time * 1000)\r\n .toTimeString()\r\n .split(' ')[0]\r\n .split(':')\r\n .map(Number)\r\n\r\n if (time > limit && time <= limit + this.startAudienceSeconds) {\r\n hour[0] = 24 + hour[0]\r\n }\r\n return hour\r\n .map((part) => (part > 9 ? part.toString() : '0' + part))\r\n .join(separator)\r\n },\r\n getDateParts(date = this.date) {\r\n const d = new Date(date)\r\n return {\r\n year: d.getFullYear(),\r\n month: d.getMonth(),\r\n day: d.getDate(),\r\n }\r\n },\r\n selectFrame(index, frame) {\r\n const d = this.getDateParts()\r\n const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\r\n const frameTime = frame?.time\r\n\r\n if (frameTime - (this.startAudienceSeconds + limit) <= 0) {\r\n if (this.hourIniSelected === true) {\r\n this.hourIniSelected = frameTime\r\n\r\n if (\r\n this.hourEndSelected &&\r\n this.hourIniSelected > this.hourEndSelected\r\n ) {\r\n this.hourEndSelected = false\r\n }\r\n } else if (this.hourEndSelected === true) {\r\n if (frameTime > this.hourIniSelected) {\r\n this.hourEndSelected = frameTime\r\n this.canInsertTime = true\r\n } else {\r\n this.hourEndSelected = false\r\n }\r\n }\r\n }\r\n\r\n if (this.activeFrame !== index) {\r\n // ? Se clicar no frame diferente de onde está a dar play, faz pausa\r\n const array = this.$refs.frames.filter(\r\n (fc) => fc.videoStatus === fc.Status.playing\r\n )\r\n if (array.length === 1) {\r\n const frame = array[0]\r\n frame.playOrPause()\r\n }\r\n this.activeVideo = null\r\n this.activeFrame = index\r\n }\r\n },\r\n setHourIni() {\r\n this.canInsertTime = true\r\n this.hourIniSelected = true\r\n document.getElementById(`frame-${this.activeFrame}`).click()\r\n this.$emit('setHourIni', {\r\n hour_ini: this.hourIniSelected\r\n ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n : null,\r\n })\r\n },\r\n setHourEnd() {\r\n this.canInsertTime = true\r\n this.hourEndSelected = true\r\n document.getElementById(`frame-${this.activeFrame}`).click()\r\n },\r\n //* Navegação\r\n arrowRight() {\r\n if (this.checkLimitRight(false)) {\r\n if (\r\n this.activeFrame ===\r\n this.numberOfRows * this.framesPerRow * 2 - 1\r\n ) {\r\n console.log(this.activeFrame, 'ACTIVE FRAME')\r\n this.next()\r\n } else {\r\n this.activeFrame++\r\n }\r\n }\r\n },\r\n arrowLeft() {\r\n if (this.checkLimitLeft(false)) {\r\n if (this.activeFrame === this.numberOfRows * this.framesPerRow) {\r\n this.prev()\r\n } else {\r\n this.activeFrame--\r\n }\r\n }\r\n },\r\n arrowUp() {\r\n console.log(\r\n this.activeFrame - this.numberOfRows * this.framesPerRow,\r\n Math.round((this.numberOfRows * this.framesPerRow) / 2)\r\n )\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\r\n checkLimitRight(value) {\r\n const hours = this.endAudienceTime.match(/.{1,2}/g)\r\n const d = this.getDateParts()\r\n const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59)\r\n\r\n if (value) {\r\n return (\r\n high > (this.fInterface.getCurrentTime() - 1) * 1000 &&\r\n this.nextFrames[0].title !== -1\r\n )\r\n } else {\r\n // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000\r\n return high > this.fInterface.getCurrentTime() * 1000\r\n }\r\n },\r\n checkLimitLeft(value) {\r\n const hours = this.startAudienceTime.match(/.{1,2}/g)\r\n const d = this.getDateParts()\r\n const low = Date.UTC(d.year, d.month, d.day, hours[0], hours[1], hours[2])\r\n\r\n if (value) {\r\n return low <= (this.fInterface.getCurrentTime() - 1) * 1000\r\n } else {\r\n return (\r\n low <\r\n (this.fInterface.getCurrentTime() +\r\n this.activeFrame -\r\n this.numberOfRows * this.framesPerRow) *\r\n 1000\r\n )\r\n }\r\n },\r\n async next() {\r\n if (this.checkLimitRight(true) && (Date.now() - this.lastNext > 150)) {\r\n const array = this.$refs.frames.filter(\r\n (fc) =>\r\n fc.videoStatus === fc.Status.playing ||\r\n fc.videoStatus === fc.Status.paused\r\n )\r\n\r\n if (array.length === 1) {\r\n const frame = array[0]\r\n frame.stop(false)\r\n }\r\n this.fInterface.setCurrentStep(this.secondsPerFrame)\r\n await this.fInterface.loadNextFrames()\r\n\r\n this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n this.activeVideo = null\r\n\r\n this.getFramesArray()\r\n this.lastNext = Date.now()\r\n }\r\n },\r\n async prev() {\r\n if (this.checkLimitLeft(true) && (Date.now() - this.lastPrev > 150)) {\r\n const array = this.$refs.frames.filter(\r\n (fc) =>\r\n fc.videoStatus === fc.Status.playing ||\r\n fc.videoStatus === fc.Status.paused\r\n )\r\n if (array.length === 1) {\r\n const frame = array[0]\r\n frame.stop(false)\r\n }\r\n\r\n this.fInterface.setCurrentStep(this.secondsPerFrame)\r\n await this.fInterface.loadPrevFrames()\r\n\r\n this.activeFrame = this.getIndex(\r\n this.numberOfRows,\r\n this.framesPerRow - 1,\r\n Positions.current\r\n )\r\n this.activeVideo = null\r\n\r\n this.getFramesArray()\r\n this.lastPrev = Date.now()\r\n }\r\n },\r\n async setStartTime(time) {\r\n if (time.indexOf(':') !== -1) {\r\n time = time.replace(/:/g, '')\r\n }\r\n const t = time.match(/.{1,2}/g)\r\n const d = this.getDateParts()\r\n const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n this.frames = this.loadingArray\r\n\r\n await this.fInterface.changeTime(setTime)\r\n\r\n this.getFramesArray()\r\n\r\n this.activeFrame = this.getIndex(1, 0, Positions.current)\r\n // let frames = this.$refs.frames\r\n\r\n // let audienceTime = null\r\n // if (frames.length > 0) {\r\n // let frame = frames[0].frame\r\n // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\r\n // }\r\n\r\n this.activeVideo = null\r\n\r\n return true\r\n },\r\n hourToTimeStamp(time) {\r\n if (time.indexOf(':') !== -1) {\r\n time = time.replace(/:/g, '')\r\n }\r\n const t = time.match(/.{1,2}/g)\r\n const d = this.getDateParts()\r\n const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\r\n\r\n return setTime\r\n },\r\n async changeHour(value) {\r\n if (value) {\r\n setTimeout(() => {\r\n const array = this.$refs.frames.filter(\r\n (fc) =>\r\n fc.videoStatus === fc.Status.playing ||\r\n fc.videoStatus === fc.Status.paused\r\n )\r\n\r\n if (array.length === 1) {\r\n const frame = array[0]\r\n frame.stop(false)\r\n }\r\n\r\n this.setStartTime(value, true)\r\n }, 0)\r\n }\r\n },\r\n changeBlockInterval(value) {\r\n this.changeHour(value.ini)\r\n let time_ini, time_end\r\n time_ini = this.hourToTimeStamp(value.ini)\r\n time_end = this.hourToTimeStamp(value.end)\r\n this.videoSliderTotalDuration = time_end - time_ini\r\n this.$refs.frames[0].changeSettings(time_ini)\r\n this.blockStartTime = time_ini\r\n },\r\n //eslint-disable-next-line\r\n async updateVideoTime(index, videoTime) {\r\n this.activeVideo = index\r\n this.videoTime = videoTime\r\n },\r\n //eslint-disable-next-line\r\n updateVideoStatus(currentTime) {\r\n if (!this.progressVideoDrag) {\r\n // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS\r\n // this.updateProgress(null, currentTime)\r\n }\r\n },\r\n async startPlaying(frame, totalTime) {\r\n const array = this.$refs.frames.filter(\r\n (fc) => fc.frame.time !== frame.time\r\n )\r\n\r\n for (let ref of array) {\r\n if (\r\n ref.videoStatus === ref.Status.playing ||\r\n ref.videoStatus === ref.Status.paused\r\n ) {\r\n ref.stop(false)\r\n }\r\n }\r\n\r\n this.videoTotalTime = totalTime\r\n this.videoPlaying = true\r\n },\r\n stopPlaying() {\r\n this.videoTotalTime = null\r\n this.videoPlaying = false\r\n this.paused = false\r\n },\r\n insertTime() {\r\n this.$emit('timeToInsert', {\r\n channel: this.channel,\r\n hour_ini: this.hourIniSelected\r\n ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n : null,\r\n hour_end: this.hourEndSelected\r\n ? this.convertToAudienceTime(this.hourEndSelected, '')\r\n : null,\r\n force: false,\r\n })\r\n\r\n if (this.jumpOnInsert) {\r\n this.changeHour(\r\n this.convertToAudienceTime(\r\n (this.hourEndSelected || this.hourIniSelected) + 1\r\n )\r\n )\r\n }\r\n\r\n this.hourIniSelected = null\r\n this.hourEndSelected = null\r\n this.canInsertTime = false\r\n\r\n // this.fInterface.setCurrentPosition(this.hourEndSelected)\r\n },\r\n insertTimeForce() {\r\n this.$emit('timeToInsert', {\r\n channel: this.channel,\r\n hour_ini: this.hourIniSelected\r\n ? this.convertToAudienceTime(this.hourIniSelected, '')\r\n : null,\r\n hour_end: this.hourEndSelected\r\n ? this.convertToAudienceTime(this.hourEndSelected, '')\r\n : null,\r\n force: true,\r\n })\r\n\r\n this.hourIniSelected = null\r\n this.hourEndSelected = null\r\n this.canInsertTime = false\r\n\r\n // this.fInterface.setCurrentPosition(this.hourEndSelected)\r\n },\r\n async getChannelMedia() {\r\n // this.media = (await ChannelService.show(this.channel)).data.MEDIA\r\n },\r\n async changeServerClick() {\r\n this.changeServer = !this.changeServer\r\n sessionStorage.setItem(\r\n 'server',\r\n this.changeServer ? 'alternative' : 'default'\r\n )\r\n\r\n // if (this.$route.params.time != this.frames[0].time)\r\n // this.$router.push({\r\n // name: 'grid',\r\n // params: {\r\n // date: this.date,\r\n // channel: this.channelCode,\r\n // time: this.frames[0].time,\r\n // },\r\n // })\r\n location.reload()\r\n },\r\n },\r\n computed: {\r\n active: {\r\n get() {\r\n return this.value\r\n },\r\n set(value) {\r\n this.$emit('input', value)\r\n },\r\n },\r\n settingsClosed() {\r\n return !Object.values(this.dialogs).find((v) => v)\r\n },\r\n startAudienceSeconds() {\r\n const t = this.startAudienceTime.match(/.{1,2}/g)\r\n return parseInt(t[0] * 3600 + t[1] * 60 + t[2])\r\n },\r\n loadingArray() {\r\n return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())\r\n },\r\n serverOfFrames() {\r\n return sessionStorage.getItem('server')\r\n },\r\n },\r\n watch: {\r\n secondsPerFrame(value) {\r\n let frames = this.$refs.frames\r\n let initialTime = null\r\n let audienceTime = null\r\n if (frames.length > 0) {\r\n let frame = frames[0].frame\r\n\r\n if (initialTime === null) {\r\n initialTime = frame.time\r\n }\r\n if (value <= 5) {\r\n let newAudienceTime = initialTime + value\r\n audienceTime = this.getAudienceTime(newAudienceTime, 0, 0, 0)\r\n this.changeHour(audienceTime)\r\n this.next()\r\n }\r\n }\r\n },\r\n framesFormat(value) {\r\n this.setFrameSelection(value)\r\n },\r\n active() {\r\n // ? sempre que trocamos de tabs dar reset as horas selected\r\n this.hourIniSelected = false\r\n this.hourEndSelected = false\r\n },\r\n useCache() {\r\n this.createFramesInterface()\r\n },\r\n hourIniSelected(value) {\r\n if (value) {\r\n sessionStorage.setItem(\r\n 'currentTimeFrames',\r\n this.convertToAudienceTime(this.hourIniSelected, '')\r\n )\r\n } else {\r\n sessionStorage.removeItem('currentTimeFrames')\r\n }\r\n },\r\n activeFrame(value) {\r\n if (value) {\r\n this.stopPlayingBar()\r\n }\r\n },\r\n channel() {\r\n this.updatingChannel = new Promise((resolve, reject) => {\r\n try {\r\n this.createFramesInterface()\r\n resolve(true)\r\n } catch (err) {\r\n reject(err)\r\n }\r\n })\r\n },\r\n },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n display: block;\r\n flex: 1 1 100%;\r\n height: 0px;\r\n max-height: 0px;\r\n opacity: 1;\r\n transition: inherit;\r\n border-style: solid;\r\n border-width: thin 0 0 0;\r\n border-color: rgba(0, 0, 0, 0.12);\r\n margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n align-self: stretch;\r\n border-width: 0 thin 0 0;\r\n display: inline-flex;\r\n height: inherit;\r\n margin-left: -1px;\r\n max-height: 100%;\r\n max-width: 0px;\r\n vertical-align: text-bottom;\r\n width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n width: 100%;\r\n transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n overflow-wrap: break-word;\r\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\r\n}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n max-width: 100% !important;\r\n margin: 0 auto !important;\r\n height: 100%;\r\n border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n border-radius: 0 !important;\r\n font-size: 12px;\r\n width: 100%;\r\n box-shadow: none;\r\n height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n background-color: #f5f5f5;\r\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n}\r\n#command-bar button {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\r\n}\r\n\r\n.settings-container {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n margin: 0 2px;\r\n cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n border: none;\r\n}\r\n\r\n.visualization-card {\r\n border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n display: block !important;\r\n z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n background: var(--visualization-primary);\r\n color: white;\r\n border-radius: 16px;\r\n padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n position: absolute;\r\n margin: 5px;\r\n border-color: var(--visualization-primary);\r\n z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n border-width: 5px 5px 0 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n bottom: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n border-width: 0 5px 5px 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-top-color: transparent !important;\r\n top: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n border-width: 5px 5px 5px 0;\r\n border-left-color: transparent !important;\r\n border-top-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n left: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n border-width: 5px 0 5px 5px;\r\n border-top-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n right: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n background: #f9f9f9;\r\n color: black;\r\n padding: 24px;\r\n border-radius: 5px;\r\n box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n visibility: visible;\r\n opacity: 1;\r\n transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined });
4574
4579
 
4575
4580
  };
4576
4581
  /* scoped */
4577
- const __vue_scope_id__ = "data-v-885e1096";
4582
+ const __vue_scope_id__ = "data-v-09cd6aae";
4578
4583
  /* module identifier */
4579
4584
  const __vue_module_identifier__ = undefined;
4580
4585
  /* functional template */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@twab/visualization",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "main": "dist/visualization.js",
5
5
  "files": [
6
6
  "dist"