@twab/visualization 0.9.11 → 0.9.14

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 +16 -12
  2. package/package.json +1 -1
package/dist/visualization.js CHANGED
@@ -1741,15 +1741,17 @@ var __vue_staticRenderFns__$4 = [];
1741
1741
  __vue_render__$4._withStripped = true;
1742
1742
 
1743
1743
  /* style */
1744
- const __vue_inject_styles__$4 = undefined;
1744
+ const __vue_inject_styles__$4 = function (inject) {
1745
+ if (!inject) return
1746
+ inject("data-v-6ca549de_0", { source: "\n.visualization-row[data-v-6ca549de] {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\n}\n.visualization-col[data-v-6ca549de] {\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-6ca549de] {\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-6ca549de] {\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-6ca549de] {\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-6ca549de],[data-v-6ca549de] .visualization-justify-center {\r\n justify-content: center;\n}\n.visualization-align-center[data-v-6ca549de] {\r\n align-items: center;\n}\n#visualization-container[data-v-6ca549de] {\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-6ca549de] {\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-6ca549de],\r\n#info-bar[data-v-6ca549de] {\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-6ca549de] {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\n}\n#command-bar button[data-v-6ca549de]:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-6ca549de] {\r\n font-size: 16px;\n}\n#command-bar[data-v-6ca549de] {\r\n padding: 0 !important;\n}\n#info-bar[data-v-6ca549de] {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\n}\n.settings-container[data-v-6ca549de] {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\n}\n.settings-container > *[data-v-6ca549de] {\r\n margin: 0 2px;\r\n cursor: pointer;\n}\n#info-bar svg[data-v-6ca549de] {\r\n font-size: 16px;\n}\n#info-bar .divider[data-v-6ca549de] {\r\n margin: 0 8px;\n}\nsvg[data-v-6ca549de]:focus {\r\n border: none;\n}\n.visualization-card[data-v-6ca549de] {\r\n border-left: 8px solid #eee;\n}\n.active-tab[data-v-6ca549de] {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\n}\n[id^='frame-'][data-v-6ca549de] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\n}\n.tooltip[data-v-6ca549de] {\r\n display: block !important;\r\n z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-6ca549de] {\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-6ca549de] {\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-6ca549de] {\r\n margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-6ca549de] {\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-6ca549de] {\r\n margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-6ca549de] {\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-6ca549de] {\r\n margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-6ca549de] {\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-6ca549de] {\r\n margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-6ca549de] {\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-6ca549de] {\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-6ca549de] {\r\n border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-6ca549de] {\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-6ca549de] {\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;EACA,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\"\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, /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>"]}, media: undefined });
1747
+
1748
+ };
1745
1749
  /* scoped */
1746
- const __vue_scope_id__$4 = undefined;
1750
+ const __vue_scope_id__$4 = "data-v-6ca549de";
1747
1751
  /* module identifier */
1748
1752
  const __vue_module_identifier__$4 = undefined;
1749
1753
  /* functional template */
1750
1754
  const __vue_is_functional_template__$4 = false;
1751
- /* style inject */
1752
-
1753
1755
  /* style inject SSR */
1754
1756
 
1755
1757
  /* style inject shadow dom */
@@ -1764,7 +1766,7 @@ __vue_render__$4._withStripped = true;
1764
1766
  __vue_is_functional_template__$4,
1765
1767
  __vue_module_identifier__$4,
1766
1768
  false,
1767
- undefined,
1769
+ createInjector,
1768
1770
  undefined,
1769
1771
  undefined
1770
1772
  );
@@ -2166,15 +2168,17 @@ var __vue_staticRenderFns__$3 = [];
2166
2168
  __vue_render__$3._withStripped = true;
2167
2169
 
2168
2170
  /* style */
2169
- const __vue_inject_styles__$3 = undefined;
2171
+ const __vue_inject_styles__$3 = function (inject) {
2172
+ if (!inject) return
2173
+ inject("data-v-9bd7a8d6_0", { source: "\n.visualization-row[data-v-9bd7a8d6] {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\n}\n.visualization-col[data-v-9bd7a8d6] {\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-9bd7a8d6] {\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-9bd7a8d6] {\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-9bd7a8d6] {\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-9bd7a8d6],[data-v-9bd7a8d6] .visualization-justify-center {\r\n justify-content: center;\n}\n.visualization-align-center[data-v-9bd7a8d6] {\r\n align-items: center;\n}\n#visualization-container[data-v-9bd7a8d6] {\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-9bd7a8d6] {\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-9bd7a8d6],\r\n#info-bar[data-v-9bd7a8d6] {\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-9bd7a8d6] {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\n}\n#command-bar button[data-v-9bd7a8d6]:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-9bd7a8d6] {\r\n font-size: 16px;\n}\n#command-bar[data-v-9bd7a8d6] {\r\n padding: 0 !important;\n}\n#info-bar[data-v-9bd7a8d6] {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\n}\n.settings-container[data-v-9bd7a8d6] {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\n}\n.settings-container > *[data-v-9bd7a8d6] {\r\n margin: 0 2px;\r\n cursor: pointer;\n}\n#info-bar svg[data-v-9bd7a8d6] {\r\n font-size: 16px;\n}\n#info-bar .divider[data-v-9bd7a8d6] {\r\n margin: 0 8px;\n}\nsvg[data-v-9bd7a8d6]:focus {\r\n border: none;\n}\n.visualization-card[data-v-9bd7a8d6] {\r\n border-left: 8px solid #eee;\n}\n.active-tab[data-v-9bd7a8d6] {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\n}\n[id^='frame-'][data-v-9bd7a8d6] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\n}\n.tooltip[data-v-9bd7a8d6] {\r\n display: block !important;\r\n z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-9bd7a8d6] {\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-9bd7a8d6] {\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-9bd7a8d6] {\r\n margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-9bd7a8d6] {\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-9bd7a8d6] {\r\n margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-9bd7a8d6] {\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-9bd7a8d6] {\r\n margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-9bd7a8d6] {\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-9bd7a8d6] {\r\n margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-9bd7a8d6] {\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-9bd7a8d6] {\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-9bd7a8d6] {\r\n border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-9bd7a8d6] {\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-9bd7a8d6] {\r\n visibility: visible;\r\n opacity: 1;\r\n transition: opacity 0.15s;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Infos.vue"],"names":[],"mappings":";AAyLA;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;EACA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Infos.vue","sourcesContent":["<template>\r\n <div\r\n id=\"info-bar\"\r\n class=\"visualization-row visualization-justify-center visualization-align-center\"\r\n :style=\"\r\n !commandsShow\r\n ? 'border-top-right-radius: 6px; padding: 4px'\r\n : 'padding: 4px'\r\n \"\r\n >\r\n <span> {{ playbackRate }}x </span>\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n <span>\r\n {{\r\n $t('infoBar.selected', {\r\n seconds: hourEnd && hourIni ? hourEnd - hourIni + 1 : 0,\r\n hour_ini: convertToAudienceTime(hourIni),\r\n hour_end: convertToAudienceTime(hourEnd),\r\n })\r\n }}\r\n </span>\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n <span>\r\n {{\r\n $t('infoBar.interval', {\r\n seconds: secondsPerFrame,\r\n })\r\n }}\r\n </span>\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n <span>\r\n {{\r\n $t('infoBar.block', {\r\n time1: convertToAudienceTime(blockStartTime),\r\n time2: convertToAudienceTime(blockTotalTime),\r\n })\r\n }}\r\n </span>\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n {{ framesPerRow * numberOfRows }}\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n {{ framesPerRow + '*' + numberOfRows }}\r\n <span\r\n class=\"visualization-divider vertical\"\r\n v-if=\"alternativeServer || !cache\"\r\n style=\"margin: 0 8px\"\r\n />\r\n <span v-if=\"alternativeServer\">\r\n <v-icon color=\"error\" small left>fa-exclamation-triangle</v-icon>\r\n <strong>{{ $t('infoBar.alternativeServer') }}</strong>\r\n </span>\r\n <span\r\n class=\"visualization-divider vertical\"\r\n v-if=\"alternativeServer && !cache\"\r\n style=\"margin: 0 8px\"\r\n />\r\n <span v-if=\"!cache\">\r\n <v-icon color=\"warning\" small left>fa-exclamation-circle</v-icon>\r\n <strong>{{ $t('infoBar.notUsingCache') }}</strong>\r\n </span>\r\n <div class=\"settings-container\">\r\n <font-awesome-icon\r\n icon=\"fa-solid fa-server\"\r\n @click=\"$emit('change-server')\"\r\n v-tooltip=\"\r\n alternativeServer\r\n ? $t('infoBar.changeServer')\r\n : $t('infoBar.changeServer')\r\n \"\r\n />\r\n <font-awesome-icon\r\n :icon=\"commandsShow ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'\"\r\n @click=\"$emit('toogle-commands-visibility')\"\r\n v-tooltip=\"\r\n commandsShow\r\n ? $t('moduletelentry.hideButtons')\r\n : $t('moduletelentry.showButtons')\r\n \"\r\n />\r\n <font-awesome-icon\r\n :icon=\"cache ? 'fa-solid fa-ban' : 'fa-solid fa-sync'\"\r\n @click=\"$emit('toogle-cache')\"\r\n v-tooltip=\"\r\n cache ? $t('infoBar.disableCache') : $t('infoBar.activateCache')\r\n \"\r\n />\r\n </div>\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n props: {\r\n playbackRate: {\r\n type: Number,\r\n required: true,\r\n },\r\n secondsPerFrame: {\r\n type: Number,\r\n required: true,\r\n },\r\n commandsShow: {\r\n type: Boolean,\r\n required: true,\r\n },\r\n cache: {\r\n type: Boolean,\r\n required: true,\r\n },\r\n blockStartTime: {\r\n type: Number,\r\n required: true,\r\n },\r\n videoTotalDuration: {\r\n type: Number,\r\n required: true,\r\n },\r\n alternativeServer: {\r\n type: Boolean,\r\n required: true,\r\n },\r\n framesPerRow: {\r\n type: Number,\r\n required: true,\r\n },\r\n numberOfRows: {\r\n type: Number,\r\n required: true,\r\n },\r\n hourIni: {\r\n type: [Number, Boolean],\r\n },\r\n hourEnd: {\r\n type: [Number, Boolean],\r\n },\r\n },\r\n data() {\r\n return {}\r\n },\r\n computed: {\r\n blockTotalTime() {\r\n return this.videoTotalDuration + this.blockStartTime\r\n },\r\n },\r\n methods: {\r\n convertToAudienceTime(time, separator = ':') {\r\n const 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 dateInUtc(miliSeconds) {\r\n var date = new Date(miliSeconds)\r\n var utc = new Date(\r\n date.getUTCFullYear(),\r\n date.getUTCMonth(),\r\n date.getUTCDate(),\r\n date.getUTCHours(),\r\n date.getUTCMinutes(),\r\n date.getUTCSeconds()\r\n )\r\n return utc\r\n },\r\n },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n display: block;\r\n flex: 1 1 100%;\r\n height: 0px;\r\n max-height: 0px;\r\n opacity: 1;\r\n transition: inherit;\r\n border-style: solid;\r\n border-width: thin 0 0 0;\r\n border-color: rgba(0, 0, 0, 0.12);\r\n margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n align-self: stretch;\r\n border-width: 0 thin 0 0;\r\n display: inline-flex;\r\n height: inherit;\r\n margin-left: -1px;\r\n max-height: 100%;\r\n max-width: 0px;\r\n vertical-align: text-bottom;\r\n width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n width: 100%;\r\n transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n overflow-wrap: break-word;\r\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\r\n}\r\n\r\n.visualization-justify-center, /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>"]}, media: undefined });
2174
+
2175
+ };
2170
2176
  /* scoped */
2171
- const __vue_scope_id__$3 = undefined;
2177
+ const __vue_scope_id__$3 = "data-v-9bd7a8d6";
2172
2178
  /* module identifier */
2173
2179
  const __vue_module_identifier__$3 = undefined;
2174
2180
  /* functional template */
2175
2181
  const __vue_is_functional_template__$3 = false;
2176
- /* style inject */
2177
-
2178
2182
  /* style inject SSR */
2179
2183
 
2180
2184
  /* style inject shadow dom */
@@ -2189,7 +2193,7 @@ __vue_render__$3._withStripped = true;
2189
2193
  __vue_is_functional_template__$3,
2190
2194
  __vue_module_identifier__$3,
2191
2195
  false,
2192
- undefined,
2196
+ createInjector,
2193
2197
  undefined,
2194
2198
  undefined
2195
2199
  );
@@ -4471,11 +4475,11 @@ __vue_render__._withStripped = true;
4471
4475
  /* style */
4472
4476
  const __vue_inject_styles__ = function (inject) {
4473
4477
  if (!inject) return
4474
- inject("data-v-576d506a_0", { source: "\n.visualization-row[data-v-576d506a] {\n display: flex;\n flex-wrap: wrap;\n flex: 1 1 auto;\n}\n.visualization-col[data-v-576d506a] {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n}\n.visualization-divider[data-v-576d506a] {\n display: block;\n flex: 1 1 100%;\n height: 0px;\n max-height: 0px;\n opacity: 1;\n transition: inherit;\n border-style: solid;\n border-width: thin 0 0 0;\n border-color: rgba(0, 0, 0, 0.12);\n margin: 0;\n}\n.visualization-divider.vertical[data-v-576d506a] {\n align-self: stretch;\n border-width: 0 thin 0 0;\n display: inline-flex;\n height: inherit;\n margin-left: -1px;\n max-height: 100%;\n max-width: 0px;\n vertical-align: text-bottom;\n width: 0px;\n}\n.visualization-card[data-v-576d506a] {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n width: 100%;\n transition-property: box-shadow, opacity, -webkit-box-shadow;\n overflow-wrap: break-word;\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n.visualization-justify-center[data-v-576d506a] {\n justify-content: center;\n}\n.visualization-align-center[data-v-576d506a] {\n align-items: center;\n}\n#visualization-container[data-v-576d506a] {\n max-width: 100% !important;\n margin: 0 auto !important;\n height: 100%;\n border-bottom: none;\n}\n#visualization-container > .card[data-v-576d506a] {\n border-radius: 0 !important;\n font-size: 12px;\n width: 100%;\n box-shadow: none;\n height: 100%;\n}\n#command-bar[data-v-576d506a],\n#info-bar[data-v-576d506a] {\n background-color: #f5f5f5;\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button[data-v-576d506a] {\n width: 42px;\n height: 36px;\n border: none;\n background: none;\n}\n#command-bar button[data-v-576d506a]:hover {\n cursor: pointer;\n background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-576d506a] {\n font-size: 16px;\n}\n#command-bar[data-v-576d506a] {\n padding: 0 !important;\n}\n#info-bar[data-v-576d506a] {\n padding: 4px;\n font-size: 14px;\n position: relative;\n}\n.settings-container[data-v-576d506a] {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%);\n}\n.settings-container > *[data-v-576d506a] {\n margin: 0 2px;\n cursor: pointer;\n}\n#info-bar svg[data-v-576d506a] {\n font-size: 16px;\n}\n#info-bar .divider[data-v-576d506a] {\n margin: 0 8px;\n}\nsvg[data-v-576d506a]:focus {\n border: none;\n}\n.visualization-card[data-v-576d506a] {\n border-left: 8px solid #eee;\n}\n.active-tab[data-v-576d506a] {\n border-left: 8px solid var(--visualization-primary) !important;\n border-image-slice: 1;\n}\n[id^='frame-'][data-v-576d506a] {\n padding: 1px;\n display: flex;\n flex-flow: column;\n}\n.tooltip[data-v-576d506a] {\n display: block !important;\n z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-576d506a] {\n background: var(--visualization-primary);\n color: white;\n border-radius: 16px;\n padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-576d506a] {\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'][data-v-576d506a] {\n margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-576d506a] {\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'][data-v-576d506a] {\n margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-576d506a] {\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'][data-v-576d506a] {\n margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-576d506a] {\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'][data-v-576d506a] {\n margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-576d506a] {\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[data-v-576d506a] {\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[data-v-576d506a] {\n border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-576d506a] {\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-576d506a] {\n visibility: visible;\n opacity: 1;\n transition: opacity 0.15s;\n}\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\Visualization.vue"],"names":[],"mappings":";AA0mCA;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;EACA,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>\n <div\n class=\"visualization-row\"\n id=\"visualization-container\"\n @click=\"framesClicked\"\n >\n <GlobalEvents\n v-if=\"active && canInsertTime && settingsClosed\"\n @keydown.45=\"insertTime\"\n @keydown.46=\"insertTime\"\n />\n <GlobalEvents\n v-if=\"active && settingsClosed\"\n @keydown.left.prevent=\"arrowLeft\"\n @keydown.right.prevent=\"arrowRight\"\n @keydown.shift.page-down.prevent=\"nextLoopActivate\"\n @keydown.page-down.prevent=\"next\"\n @keydown.page-up.prevent=\"prev\"\n @keydown.shift.page-up.prevent=\"prevLoopActivate\"\n @keydown.83.prevent=\"setHourIni\"\n @keydown.69.prevent=\"setHourEnd\"\n @keydown.36.prevent=\"goToFirstFrame\"\n @keydown.35.prevent=\"goToLastFrame\"\n @keydown.71.prevent=\"dialogs.goTo = true\"\n @keydown.73.prevent=\"dialogs.secondsPerFrame = true\"\n @keydown.76.prevent=\"dialogs.frames = true\"\n @keydown.49.97=\"() => (secondsPerFrame = 1)\"\n @keydown.50.98=\"() => (secondsPerFrame = 2)\"\n @keydown.51.99=\"() => (secondsPerFrame = 3)\"\n @keydown.52.100=\"() => (secondsPerFrame = 4)\"\n @keydown.53.101=\"() => (secondsPerFrame = 5)\"\n />\n <GlobalEvents\n v-if=\"prevLoop || nextLoop\"\n @keydown=\"breakLoop\"\n v-on:click=\"breakLoop\"\n />\n <settings\n v-if=\"active\"\n :dialogs-visibility=\"dialogs\"\n :playback-rate=\"playbackRate\"\n :seconds-per-frame=\"secondsPerFrame\"\n :frames-per-row=\"framesPerRow\"\n :number-of-rows=\"numberOfRows\"\n @change-playback-rate=\"(value) => (playbackRate = value)\"\n @change-go-to=\"changeHour\"\n @change-seconds-per-frame=\"(value) => (secondsPerFrame = value)\"\n @set-frames-selection=\"setFrameSelection\"\n @close=\"(dialog) => (dialogs[dialog] = false)\"\n />\n <div\n :class=\"{ 'visualization-card': true, 'active-tab': active }\"\n style=\"width: 100%; padding: 0\"\n >\n <command-bar\n v-show=\"commandBarShow\"\n :video-playing=\"videoPlaying\"\n :video-paused=\"paused\"\n :insert-time=\"canInsertTime\"\n :hour-ini-selected=\"!!hourIniSelected\"\n :hour-end-selected=\"!!hourEndSelected\"\n @prev-loop-activate=\"prevLoopActivate\"\n @next-loop-activate=\"nextLoopActivate\"\n @prev=\"prev\"\n @next=\"next\"\n @go-to=\"dialogs.goTo = true\"\n @open-frame-selection=\"dialogs.frames = true\"\n @open-frames-per-second=\"dialogs.secondsPerFrame = true\"\n @open-blocks=\"openBlocks\"\n @open-playback-rate=\"dialogs.playbackRate = true\"\n @play-or-pause=\"playOrPause\"\n @stop-playing=\"stopPlayingBar\"\n @set-hour-ini=\"setHourIni\"\n @set-hour-end=\"setHourEnd\"\n @insert-time=\"insertTime\"\n />\n <video-progress\n v-if=\"videoProgressBar\"\n v-show=\"videoPlaying\"\n :video-time=\"videoTime\"\n />\n <info-bar\n :playback-rate=\"playbackRate\"\n :seconds-per-frame=\"secondsPerFrame\"\n :commands-show=\"commandBarShow\"\n :cache=\"useCache\"\n :block-start-time=\"blockStartTime\"\n :video-total-duration=\"videoSliderTotalDuration\"\n :alternative-server=\"alternativeServer\"\n :frames-per-row=\"framesPerRow\"\n :number-of-rows=\"numberOfRows\"\n :hour-ini=\"hourIniSelected\"\n :hour-end=\"hourEndSelected\"\n @toogle-commands-visibility=\"commandBarShow = !commandBarShow\"\n @toogle-cache=\"useCache = !useCache\"\n @change-server=\"changeServerClick\"\n />\n <div\n class=\"visualization-row\"\n v-for=\"rowNumber in numberOfRows\"\n :id=\"'row-' + rowNumber\"\n :key=\"'row-' + rowNumber\"\n style=\"padding: 12px\"\n >\n <div\n v-for=\"(frame, frameNumber) in previousFrames\"\n :key=\"\n numberOfRows +\n '-' +\n framesPerRow +\n '-' +\n getIndex(rowNumber, frameNumber, Positions.previous)\n \"\n style=\"display: none\"\n >\n <span v-html=\"frame.img\" />\n </div>\n <div\n v-for=\"(frame, frameNumber) in nextFrames\"\n :key=\"\n numberOfRows +\n '-' +\n framesPerRow +\n '-' +\n getIndex(rowNumber, frameNumber, Positions.next)\n \"\n style=\"display: none\"\n >\n <span v-html=\"frame.img\" />\n </div>\n <div\n class=\"visualization-col\"\n v-for=\"(frame, frameNumber) in frames.slice(\n framesPerRow * (rowNumber - 1),\n framesPerRow * rowNumber\n )\"\n :key=\"'row-' + rowNumber + '-frame-' + frameNumber\"\n :id=\"`frame-${getIndex(rowNumber, frameNumber, Positions.current)}`\"\n :class=\"{ loaderImg: !!frame.img }\"\n @click=\"\n frame.time\n ? selectFrame(\n getIndex(rowNumber, frameNumber, Positions.current),\n frame\n )\n : null\n \"\n >\n <span :id=\"activeFrame ? 'aa' : 0\" style=\"padding-left: 4px\">\n <b>\n {{\n getAudienceTime(\n frame.time,\n rowNumber,\n frameNumber,\n Positions.current\n )\n }}\n </b>\n </span>\n\n <frame\n ref=\"frames\"\n :frame=\"frame\"\n :index=\"getIndex(rowNumber, frameNumber, Positions.current)\"\n :grid-settings=\"{ numberOfRows, framesPerRow }\"\n :initialTime=\"frame.time === hourIniSelected\"\n :endTime=\"frame.time === hourEndSelected\"\n :betweenTime=\"\n frame.time > hourIniSelected && frame.time < hourEndSelected\n \"\n :active=\"\n getIndex(rowNumber, frameNumber, Positions.current) ===\n activeFrame\n \"\n :activeTab=\"active\"\n :videoUrl=\"fInterface ? fInterface.getVideoUrl(frame) : ''\"\n @startPlaying=\"startPlaying\"\n @stopPlaying=\"stopPlaying\"\n @playPauseStatus=\"changePlayPause\"\n @updateSlider=\"updateSlider\"\n :playback-rate=\"playbackRate\"\n style=\"margin: 0 auto\"\n ></frame>\n </div>\n </div>\n </div>\n <!-- <settings\n ref=\"settings2\"\n :active=\"active\"\n @goToTime=\"changeHour\"\n @goToBlockInterval=\"changeBlockInterval\"\n @setSplitTime=\"setSplitTime\"\n @setFrameSelection=\"setFrameSelection\"\n @setPlaybackRate=\"\n (rate) => {\n playbackRate = rate\n }\n \"\n >\n </settings> -->\n <!-- <v-dialog v-model=\"dialog\" width=\"500\">\n <div class=\"card\">\n <div class=\"card\"-title class=\"text-h5 grey lighten-2\">\n {{ ' Último bloco disponível até: ' }}\n <v-btn\n @click=\"goToStartBlock\"\n class=\"ml-2\"\n dark\n color=\"success\"\n depressed\n >\n <v-icon left> fa-clock </v-icon>\n {{ timeLastBlock }}\n </v-btn>\n <v-spacer></v-spacer>\n <v-btn color=\"error\" fab small class=\"ml-5\" @click=\"dialog = false\">\n <v-icon dark> fa fa-xmark </v-icon>\n </v-btn>\n </div-title>\n </div>\n </v-dialog>\n <Help :media=\"media\" @close=\"media = null\" />\n <v-dialog\n v-if=\"userMultiTabsGrid\"\n v-model=\"userMultiTabsGridsModel\"\n persistent\n width=\"60%\"\n >\n <div class=\"card\">\n <div class=\"card\"-title class=\"warning text-h5\" primary-title>\n <div class=\"row\" class=\"ma-0\" justify=\"center\" align=\"center\">\n <v-icon dark left style=\"font-size: 24px !important\">\n fa fa-exclamation-triangle\n </v-icon>\n <div style=\"color: white\">{{ $t('form.alert') }}</div>\n </div>\n </div-title>\n <div class=\"card\"-text class=\"justify-center pa-6 grey lighten-2\">\n <h3>\n {{ $t('alerts.userMultiTabsGrid') }}\n </h3>\n </div-text>\n <hr class=\"divider\" class=\"grey lighten-1\"></span>\n <div class=\"card\"-actions class=\"grey lighten-2 justify-center\">\n <v-btn color=\"error\" ml-5 @click=\"userMultiTabsGrid = false\">\n <v-icon left color=\"white\">fa fa-times</v-icon>\n {{ $t('form.close') }}\n </v-btn>\n </div-actions>\n </div>\n </v-dialog> -->\n </div>\n</template>\n<script>\nimport Frame from './components/Frame.vue'\nimport FramesInterface from './utils/FramesInterface.js'\nimport FramesService from './services/FramesService.js'\n\nimport Commands from './components/Commands.vue'\nimport Infos from './components/Infos.vue'\nimport VideoProgress from './components/VideoProgress.vue'\nimport Settings from './components/Settings.vue'\n\nconst Positions = Object.freeze({\n previous: 0,\n current: 1,\n next: 2,\n})\n\nexport default {\n name: 'visualization-container',\n props: {\n value: {\n type: Boolean,\n required: true,\n },\n date: {\n type: String,\n required: true,\n },\n channel: {\n type: Number,\n required: true,\n },\n startAudienceTime: {\n type: String,\n required: true,\n },\n videoProgressBar: {\n type: Boolean,\n default: false,\n },\n jumpOnInsert: {\n type: Boolean,\n default: false,\n },\n framesFormat: {\n type: [Number, String],\n default: 6,\n },\n maxSize: {\n type: Number,\n }\n },\n components: {\n Frame,\n CommandBar: Commands,\n InfoBar: Infos,\n VideoProgress,\n Settings,\n // Help,\n },\n data() {\n return {\n Positions,\n updatingChannel: null,\n dialog: false,\n timeLastBlock: null,\n alternativeServer: false,\n useCache: true,\n numberOfRows: 1,\n framesPerRow: 5,\n secondsPerFrame: 1,\n fInterface: null,\n velocity: 1,\n frames: [],\n previousFrames: [],\n nextFrames: [],\n channelCode: 0,\n videoPlaying: false,\n activeFrame: null,\n activeVideo: null,\n videoTime: 0,\n videoTotalTime: null,\n progressVideoDrag: false,\n hourIniSelected: false,\n hourEndSelected: false,\n canInsertTime: false,\n lastHeight: 0,\n loopInterval: null,\n nextLoop: false,\n prevLoop: false,\n videoSliderTotalDuration: 900,\n blockStartTime: null,\n media: null,\n changeServer: false,\n userMultiTabsGrid: false,\n userMultiTabsGridsModel: true,\n playbackRate: 1,\n paused: false,\n commandBarShow: true,\n dialogs: {\n playbackRate: false,\n goTo: false,\n secondsPerFrame: false,\n frames: false,\n },\n }\n },\n async created() {\n this.changeServer = this.serverOfFrames === 'alternative'\n this.alternativeServer = this.serverOfFrames === 'alternative'\n\n const settings = [\n {\n framesPerRow: 2,\n numberOfRows: 1,\n },\n {\n framesPerRow: 3,\n numberOfRows: 1,\n },\n {\n framesPerRow: 3,\n numberOfRows: 2,\n },\n {\n framesPerRow: 4,\n numberOfRows: 1,\n },\n {\n framesPerRow: 4,\n numberOfRows: 2,\n },\n {\n framesPerRow: 5,\n numberOfRows: 1,\n },\n {\n framesPerRow: 5,\n numberOfRows: 2,\n },\n {\n framesPerRow: 6,\n numberOfRows: 1,\n },\n {\n framesPerRow: 6,\n numberOfRows: 2,\n },\n ]\n\n const storedOnDb = settings[parseInt(this.framesFormat) - 1]\n this.framesPerRow = storedOnDb.framesPerRow\n this.numberOfRows = storedOnDb.numberOfRows\n\n await this.createFramesInterface()\n if (this.maxSize) {\n this.resize(this.maxSize, true)\n }\n },\n methods: {\n framesClicked(e) {\n if (e.target.id != 'insert') {\n this.active = true\n }\n },\n async goToStartBlock() {\n try {\n const d = new Date()\n let timestamp = Date.UTC(\n d.getFullYear(),\n d.getMonth(),\n d.getDate(),\n d.getHours(),\n d.getMinutes(),\n d.getSeconds()\n )\n\n const response = (\n await FramesService.getNextAvailableBlock({\n channel: this.channel,\n time: timestamp / 1000,\n })\n ).data\n\n this.dialog = false\n this.changeHour(this.convertToAudienceTime(response.data.start, ':'))\n } catch (err) {\n console.error(err)\n }\n },\n async checkAvailableBlock() {\n try {\n const d = new Date()\n let timestamp = Date.UTC(\n d.getFullYear(),\n d.getMonth(),\n d.getDate(),\n d.getHours(),\n d.getMinutes(),\n d.getSeconds()\n )\n\n const response = (\n await FramesService.getNextAvailableBlock({\n channel: this.channel,\n time: timestamp / 1000,\n })\n ).data\n\n this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':')\n this.dialog = true\n if (!response.status) {\n this.timeLastBlock = 'N/D'\n }\n } catch (err) {\n console.error(err)\n }\n },\n updateSlider(videoStartTime, time) {\n // * atualizar slider se estiver fora do range definido previamente\n if (\n time < this.blockStartTime ||\n time > this.blockStartTime ||\n videoStartTime > this.blockStartTime + this.videoSliderTotalDuration\n ) {\n this.blockStartTime = videoStartTime\n this.videoSliderTotalDuration = 900\n }\n },\n nextLoopActivate() {\n this.breakLoop()\n this.loopInterval = setInterval(this.next, 40)\n setTimeout(() => {\n this.nextLoop = true\n }, 0)\n },\n prevLoopActivate() {\n this.breakLoop()\n this.loopInterval = setInterval(this.prev, 40)\n setTimeout(() => {\n this.prevLoop = true\n }, 0)\n },\n breakLoop() {\n clearInterval(this.loopInterval)\n this.loopInterval = null\n this.nextLoop = false\n this.prevLoop = false\n },\n changePlayPause(status) {\n this.paused = !status\n },\n resize(height=this.lastHeight) {\n this.lastHeight = height\n if (this.$refs.frames) {\n for (let frame of this.$refs.frames) {\n frame.resize(height)\n }\n }\n this.$emit('resized')\n },\n async goToFirstFrame() {\n let frames = this.$refs.frames\n\n let audienceTime = null\n if (frames.length > 0) {\n let frame = frames[0].frame\n audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n }\n // if (audienceTime) {\n // this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\n // }\n if (audienceTime) {\n const [hours, minutes, seconds] = audienceTime.split(':')\n const totalSeconds =\n parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)\n if (totalSeconds >= 9000)\n this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\n else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true))\n }\n },\n async goToLastFrame() {\n let frames = this.$refs.frames\n let audienceTime = null\n if (frames.length > 0) {\n let frame = frames[0].frame\n\n audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n }\n if (audienceTime) {\n this.changeHour(this.getLastFirtsBlockTime(audienceTime))\n }\n },\n getLastFirtsBlockTime(time, first = false) {\n if (time.indexOf(':') !== -1) {\n time = time.replace(/:/g, '')\n }\n let h, m, newTime\n const t = time.match(/.{1,2}/g)\n if (t[0] && t[1]) {\n h = parseInt(t[0])\n m = parseInt(t[1])\n }\n if (h < 26) {\n if (m < 15)\n if (first) newTime = t[0] + ':00:00'\n else newTime = t[0] + ':14:59'\n else if (m < 30)\n if (first) newTime = t[0] + ':15:00'\n else newTime = t[0] + ':29:59'\n else if (m < 45)\n if (first) newTime = t[0] + ':30:00'\n else newTime = t[0] + ':44:59'\n else if (first) newTime = t[0] + ':45:00'\n else newTime = t[0] + ':59:59'\n } else {\n if (m < 15)\n if (first) newTime = '26:00:00'\n else newTime = '26:14:59'\n else {\n if (first) newTime = '26:15:00'\n else newTime = '26:29:59'\n }\n }\n return newTime\n },\n openBlocks() {\n this.$refs.settings2?.openBlocks()\n },\n playOrPause() {\n const array = this.$refs.frames.filter((fc) => !!fc.active)\n if (array.length === 1) {\n const frame = array[0]\n frame.playOrPause(this.playbackRate)\n }\n },\n stopPlayingBar() {\n for (let ref of this.$refs.frames) {\n if (\n ref.videoStatus === ref.Status.playing ||\n ref.videoStatus === ref.Status.paused\n ) {\n ref.stop(false)\n }\n }\n },\n async setFrameSelection(selected) {\n this.frames = this.loadingArray\n switch (parseInt(selected)) {\n // 2x1\n case 1:\n this.framesPerRow = 2\n this.numberOfRows = 1\n break\n // 3x1\n case 2:\n this.framesPerRow = 3\n this.numberOfRows = 1\n break\n // 3x2\n case 3:\n this.framesPerRow = 3\n this.numberOfRows = 2\n break\n // 4x1\n case 4:\n this.framesPerRow = 4\n this.numberOfRows = 1\n break\n // 4x2\n case 5:\n this.framesPerRow = 4\n this.numberOfRows = 2\n break\n // 5x1\n case 6:\n this.framesPerRow = 5\n this.numberOfRows = 1\n break\n // 5x2\n case 7:\n this.framesPerRow = 5\n this.numberOfRows = 2\n break\n // 6x1\n case 8:\n this.framesPerRow = 6\n this.numberOfRows = 1\n break\n // 6x2\n case 9:\n this.framesPerRow = 6\n this.numberOfRows = 2\n break\n }\n await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\n this.getFramesArray()\n setTimeout(() => {\n for (let ref of this.$refs.frames) {\n ref?.resize(this.lastHeight)\n }\n }, 150)\n },\n getFramesArray() {\n this.frames = this.fInterface.getFrames(Positions.current)\n this.nextFrames = this.fInterface.getFrames(Positions.next)\n this.previousFrames = this.fInterface.getFrames(Positions.previous)\n },\n async createFramesInterface() {\n this.frames = this.loadingArray\n let ch = this.channel\n let associationTMP = {\n 1735073: 1,\n 1735074: 139,\n 1735075: 3,\n 1735076: 132,\n }\n //\n this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch\n\n const t = this.startAudienceTime.match(/.{1,2}/g)\n const d = this.getDateParts()\n const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n // * iniciar slider\n this.blockStartTime = time\n this.fInterface = await new FramesInterface(\n this.channelCode,\n this.numberOfRows,\n this.framesPerRow,\n time,\n this.startAudienceTime,\n this.useCache\n )\n await this.fInterface.init()\n\n this.getFramesArray()\n\n this.activeFrame = this.getIndex(1, 0, Positions.current)\n\n this.activeVideo = null\n },\n getIndex(rowNumber, frameIndex, position) {\n let from = this.framesPerRow * this.numberOfRows * position\n let till = this.framesPerRow * this.numberOfRows * (position + 1)\n\n return (from + till * (rowNumber - 1)) / rowNumber + frameIndex\n },\n getAudienceTime(frameTime, rowNumber, frameNumber, position) {\n if (!frameTime) {\n return 'Loading...'\n } else if (\n this.getIndex(rowNumber, frameNumber, position) === this.activeVideo\n ) {\n return this.convertToAudienceTime(this.videoTime)\n } else {\n return this.convertToAudienceTime(frameTime)\n }\n },\n dateInUtc(miliSeconds) {\n var date = new Date(miliSeconds)\n var utc = new Date(\n date.getUTCFullYear(),\n date.getUTCMonth(),\n date.getUTCDate(),\n date.getUTCHours(),\n date.getUTCMinutes(),\n date.getUTCSeconds()\n )\n return utc\n },\n convertToAudienceTime(time, separator = ':') {\n const d = this.getDateParts()\n const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\n\n let hour = this.dateInUtc(time * 1000)\n .toTimeString()\n .split(' ')[0]\n .split(':')\n .map(Number)\n\n if (time > limit && time <= limit + this.startAudienceSeconds) {\n hour[0] = 24 + hour[0]\n }\n return hour\n .map((part) => (part > 9 ? part.toString() : '0' + part))\n .join(separator)\n },\n getDateParts(date = this.date) {\n const d = new Date(date)\n return {\n year: d.getFullYear(),\n month: d.getMonth(),\n day: d.getDate(),\n }\n },\n selectFrame(index, frame) {\n const d = this.getDateParts()\n const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\n const frameTime = frame?.time\n\n if (frameTime - (this.startAudienceSeconds + limit) <= 0) {\n if (this.hourIniSelected === true) {\n this.hourIniSelected = frameTime\n\n if (\n this.hourEndSelected &&\n this.hourIniSelected > this.hourEndSelected\n ) {\n this.hourEndSelected = false\n }\n } else if (this.hourEndSelected === true) {\n if (frameTime > this.hourIniSelected) {\n this.hourEndSelected = frameTime\n this.canInsertTime = true\n } else {\n this.hourEndSelected = false\n }\n }\n }\n\n if (this.activeFrame !== index) {\n // ? Se clicar no frame diferente de onde está a dar play, faz pausa\n const array = this.$refs.frames.filter(\n (fc) => fc.videoStatus === fc.Status.playing\n )\n if (array.length === 1) {\n const frame = array[0]\n frame.playOrPause()\n }\n this.activeVideo = null\n this.activeFrame = index\n }\n },\n setHourIni() {\n this.canInsertTime = true\n this.hourIniSelected = true\n document.getElementById(`frame-${this.activeFrame}`).click()\n this.$emit('setHourIni', {\n hour_ini: this.hourIniSelected\n ? this.convertToAudienceTime(this.hourIniSelected, '')\n : null,\n })\n },\n setHourEnd() {\n this.canInsertTime = true\n this.hourEndSelected = true\n document.getElementById(`frame-${this.activeFrame}`).click()\n },\n //* Navegação\n arrowRight() {\n if (this.checkLimitRight(false)) {\n if (\n this.activeFrame ===\n this.numberOfRows * this.framesPerRow * 2 - 1\n ) {\n this.next()\n } else {\n this.activeFrame++\n }\n }\n },\n arrowLeft() {\n if (this.checkLimitLeft(false)) {\n if (this.activeFrame === this.numberOfRows * this.framesPerRow) {\n this.prev()\n } else {\n this.activeFrame--\n }\n }\n },\n checkLimitRight(value) {\n const d = this.getDateParts()\n const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59)\n\n if (value) {\n return (\n high > (this.fInterface.getCurrentTime() - 1) * 1000 &&\n this.nextFrames[0].title !== -1\n )\n } else {\n // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000\n return high > this.fInterface.getCurrentTime() * 1000\n }\n },\n checkLimitLeft(value) {\n const d = this.getDateParts()\n const low = Date.UTC(d.year, d.month, d.day, 2, 30, 0)\n\n if (value) {\n return low <= (this.fInterface.getCurrentTime() - 1) * 1000\n } else {\n return (\n low <\n (this.fInterface.getCurrentTime() +\n this.activeFrame -\n this.numberOfRows * this.framesPerRow) *\n 1000\n )\n }\n },\n async next() {\n if (this.checkLimitRight(true)) {\n const array = this.$refs.frames.filter(\n (fc) =>\n fc.videoStatus === fc.Status.playing ||\n fc.videoStatus === fc.Status.paused\n )\n\n if (array.length === 1) {\n const frame = array[0]\n frame.stop(false)\n }\n this.fInterface.setCurrentStep(this.secondsPerFrame)\n await this.fInterface.loadNextFrames()\n\n this.activeFrame = this.getIndex(1, 0, Positions.current)\n this.activeVideo = null\n\n this.getFramesArray()\n }\n },\n async prev() {\n if (this.checkLimitLeft(true)) {\n const array = this.$refs.frames.filter(\n (fc) =>\n fc.videoStatus === fc.Status.playing ||\n fc.videoStatus === fc.Status.paused\n )\n if (array.length === 1) {\n const frame = array[0]\n frame.stop(false)\n }\n\n this.fInterface.setCurrentStep(this.secondsPerFrame)\n await this.fInterface.loadPrevFrames()\n\n this.activeFrame = this.getIndex(\n this.numberOfRows,\n this.framesPerRow - 1,\n Positions.current\n )\n this.activeVideo = null\n\n this.getFramesArray()\n }\n },\n async setStartTime(time) {\n if (time.indexOf(':') !== -1) {\n time = time.replace(/:/g, '')\n }\n const t = time.match(/.{1,2}/g)\n const d = this.getDateParts()\n const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n this.frames = this.loadingArray\n\n await this.fInterface.changeTime(setTime)\n\n this.getFramesArray()\n\n this.activeFrame = this.getIndex(1, 0, Positions.current)\n // let frames = this.$refs.frames\n\n // let audienceTime = null\n // if (frames.length > 0) {\n // let frame = frames[0].frame\n // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n // }\n\n this.activeVideo = null\n\n return true\n },\n hourToTimeStamp(time) {\n if (time.indexOf(':') !== -1) {\n time = time.replace(/:/g, '')\n }\n const t = time.match(/.{1,2}/g)\n const d = this.getDateParts()\n const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n\n return setTime\n },\n async changeHour(value) {\n if (value) {\n setTimeout(() => {\n const array = this.$refs.frames.filter(\n (fc) =>\n fc.videoStatus === fc.Status.playing ||\n fc.videoStatus === fc.Status.paused\n )\n\n if (array.length === 1) {\n const frame = array[0]\n frame.stop(false)\n }\n\n this.setStartTime(value, true)\n }, 0)\n }\n },\n changeBlockInterval(value) {\n this.changeHour(value.ini)\n let time_ini, time_end\n time_ini = this.hourToTimeStamp(value.ini)\n time_end = this.hourToTimeStamp(value.end)\n this.videoSliderTotalDuration = time_end - time_ini\n this.$refs.frames[0].changeSettings(time_ini)\n this.blockStartTime = time_ini\n },\n //eslint-disable-next-line\n async updateVideoTime(index, videoTime) {\n this.activeVideo = index\n this.videoTime = videoTime\n },\n //eslint-disable-next-line\n updateVideoStatus(currentTime) {\n if (!this.progressVideoDrag) {\n // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS\n // this.updateProgress(null, currentTime)\n }\n },\n async startPlaying(frame, totalTime) {\n const array = this.$refs.frames.filter(\n (fc) => fc.frame.time !== frame.time\n )\n\n for (let ref of array) {\n if (\n ref.videoStatus === ref.Status.playing ||\n ref.videoStatus === ref.Status.paused\n ) {\n ref.stop(false)\n }\n }\n\n this.videoTotalTime = totalTime\n this.videoPlaying = true\n },\n stopPlaying() {\n this.videoTotalTime = null\n this.videoPlaying = false\n this.paused = false\n },\n insertTime() {\n this.$emit('timeToInsert', {\n channel: this.channel,\n hour_ini: this.hourIniSelected\n ? this.convertToAudienceTime(this.hourIniSelected, '')\n : null,\n hour_end: this.hourEndSelected\n ? this.convertToAudienceTime(this.hourEndSelected, '')\n : null,\n force: false,\n })\n\n if (this.jumpOnInsert) {\n this.changeHour(\n this.convertToAudienceTime(\n (this.hourEndSelected || this.hourIniSelected) + 1\n )\n )\n }\n\n this.hourIniSelected = null\n this.hourEndSelected = null\n this.canInsertTime = false\n\n // this.fInterface.setCurrentPosition(this.hourEndSelected)\n },\n insertTimeForce() {\n this.$emit('timeToInsert', {\n channel: this.channel,\n hour_ini: this.hourIniSelected\n ? this.convertToAudienceTime(this.hourIniSelected, '')\n : null,\n hour_end: this.hourEndSelected\n ? this.convertToAudienceTime(this.hourEndSelected, '')\n : null,\n force: true,\n })\n\n this.hourIniSelected = null\n this.hourEndSelected = null\n this.canInsertTime = false\n\n // this.fInterface.setCurrentPosition(this.hourEndSelected)\n },\n async getChannelMedia() {\n // this.media = (await ChannelService.show(this.channel)).data.MEDIA\n },\n async changeServerClick() {\n this.changeServer = !this.changeServer\n // this.$store.dispatch(\n // 'serverOfFrames',\n // this.changeServer ? 'alternative' : 'default'\n // )\n sessionStorage.setItem(\n 'serverOfFrames',\n this.changeServer ? 'alternative' : 'default'\n )\n\n // if (this.$route.params.time != this.frames[0].time)\n // this.$router.push({\n // name: 'grid',\n // params: {\n // date: this.date,\n // channel: this.channelCode,\n // time: this.frames[0].time,\n // },\n // })\n location.reload()\n },\n },\n computed: {\n active: {\n get() {\n return this.value\n },\n set(value) {\n this.$emit('input', value)\n },\n },\n settingsClosed() {\n return !Object.values(this.dialogs).find((v) => v)\n },\n startAudienceSeconds() {\n const t = this.startAudienceTime.match(/.{1,2}/g)\n return parseInt(t[0] * 3600 + t[1] * 60 + t[2])\n },\n loadingArray() {\n return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())\n },\n serverOfFrames() {\n return sessionStorage.getItem('server')\n },\n },\n watch: {\n framesFormat(value) {\n this.setFrameSelection(value)\n },\n active() {\n // ? sempre que trocamos de tabs dar reset as horas selected\n this.hourIniSelected = false\n this.hourEndSelected = false\n },\n useCache() {\n this.createFramesInterface()\n },\n hourIniSelected(value) {\n if (value) {\n sessionStorage.setItem(\n 'currentTimeFrames',\n this.convertToAudienceTime(this.hourIniSelected, '')\n )\n } else {\n sessionStorage.removeItem('currentTimeFrames')\n }\n },\n activeFrame(value) {\n if (value) {\n this.stopPlayingBar()\n }\n },\n channel() {\n this.updatingChannel = new Promise((resolve, reject) => {\n try {\n this.createFramesInterface()\n resolve(true)\n } catch (err) {\n reject(err)\n }\n })\n },\n },\n}\n</script>\n<style scoped>\n.visualization-row {\n display: flex;\n flex-wrap: wrap;\n flex: 1 1 auto;\n}\n\n.visualization-col {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n}\n\n.visualization-divider {\n display: block;\n flex: 1 1 100%;\n height: 0px;\n max-height: 0px;\n opacity: 1;\n transition: inherit;\n border-style: solid;\n border-width: thin 0 0 0;\n border-color: rgba(0, 0, 0, 0.12);\n margin: 0;\n}\n\n.visualization-divider.vertical {\n align-self: stretch;\n border-width: 0 thin 0 0;\n display: inline-flex;\n height: inherit;\n margin-left: -1px;\n max-height: 100%;\n max-width: 0px;\n vertical-align: text-bottom;\n width: 0px;\n}\n\n.visualization-card {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n width: 100%;\n transition-property: box-shadow, opacity, -webkit-box-shadow;\n overflow-wrap: break-word;\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n\n.visualization-justify-center {\n justify-content: center;\n}\n\n.visualization-align-center {\n align-items: center;\n}\n\n#visualization-container {\n max-width: 100% !important;\n margin: 0 auto !important;\n height: 100%;\n border-bottom: none;\n}\n#visualization-container > .card {\n border-radius: 0 !important;\n font-size: 12px;\n width: 100%;\n box-shadow: none;\n height: 100%;\n}\n\n#command-bar,\n#info-bar {\n background-color: #f5f5f5;\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button {\n width: 42px;\n height: 36px;\n border: none;\n background: none;\n}\n\n#command-bar button:hover {\n cursor: pointer;\n background: rgba(0, 0, 0, 0.12);\n}\n\n#command-bar svg {\n font-size: 16px;\n}\n\n#command-bar {\n padding: 0 !important;\n}\n\n#info-bar {\n padding: 4px;\n font-size: 14px;\n position: relative;\n}\n\n.settings-container {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.settings-container > * {\n margin: 0 2px;\n cursor: pointer;\n}\n\n#info-bar svg {\n font-size: 16px;\n}\n\n#info-bar .divider {\n margin: 0 8px;\n}\n\nsvg:focus {\n border: none;\n}\n\n.visualization-card {\n border-left: 8px solid #eee;\n}\n\n.active-tab {\n border-left: 8px solid var(--visualization-primary) !important;\n border-image-slice: 1;\n}\n\n[id^='frame-'] {\n padding: 1px;\n display: flex;\n flex-flow: column;\n}\n\n.tooltip {\n display: block !important;\n z-index: 10000;\n}\n\n.tooltip .tooltip-inner {\n background: var(--visualization-primary);\n color: white;\n border-radius: 16px;\n padding: 5px 10px 4px;\n}\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\n.tooltip[x-placement^='top'] {\n margin-bottom: 5px;\n}\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\n.tooltip[x-placement^='bottom'] {\n margin-top: 5px;\n}\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\n.tooltip[x-placement^='right'] {\n margin-left: 5px;\n}\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\n.tooltip[x-placement^='left'] {\n margin-right: 5px;\n}\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\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\n.tooltip.popover .popover-arrow {\n border-color: #f9f9f9;\n}\n\n.tooltip[aria-hidden='true'] {\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.15s, visibility 0.15s;\n}\n\n.tooltip[aria-hidden='false'] {\n visibility: visible;\n opacity: 1;\n transition: opacity 0.15s;\n}\n</style>\n"]}, media: undefined });
4478
+ inject("data-v-02843f0a_0", { source: "\n.visualization-row[data-v-02843f0a] {\n display: flex;\n flex-wrap: wrap;\n flex: 1 1 auto;\n}\n.visualization-col[data-v-02843f0a] {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n}\n.visualization-divider[data-v-02843f0a] {\n display: block;\n flex: 1 1 100%;\n height: 0px;\n max-height: 0px;\n opacity: 1;\n transition: inherit;\n border-style: solid;\n border-width: thin 0 0 0;\n border-color: rgba(0, 0, 0, 0.12);\n margin: 0;\n}\n.visualization-divider.vertical[data-v-02843f0a] {\n align-self: stretch;\n border-width: 0 thin 0 0;\n display: inline-flex;\n height: inherit;\n margin-left: -1px;\n max-height: 100%;\n max-width: 0px;\n vertical-align: text-bottom;\n width: 0px;\n}\n.visualization-card[data-v-02843f0a] {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n width: 100%;\n transition-property: box-shadow, opacity, -webkit-box-shadow;\n overflow-wrap: break-word;\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n.visualization-justify-center[data-v-02843f0a],[data-v-02843f0a] .visualization-justify-center {\n justify-content: center;\n}\n.visualization-align-center[data-v-02843f0a] {\n align-items: center;\n}\n#visualization-container[data-v-02843f0a] {\n max-width: 100% !important;\n margin: 0 auto !important;\n height: 100%;\n border-bottom: none;\n}\n#visualization-container > .card[data-v-02843f0a] {\n border-radius: 0 !important;\n font-size: 12px;\n width: 100%;\n box-shadow: none;\n height: 100%;\n}\n#command-bar[data-v-02843f0a],\n#info-bar[data-v-02843f0a] {\n background-color: #f5f5f5;\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button[data-v-02843f0a] {\n width: 42px;\n height: 36px;\n border: none;\n background: none;\n}\n#command-bar button[data-v-02843f0a]:hover {\n cursor: pointer;\n background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-02843f0a] {\n font-size: 16px;\n}\n#command-bar[data-v-02843f0a] {\n padding: 0 !important;\n}\n#info-bar[data-v-02843f0a] {\n padding: 4px;\n font-size: 14px;\n position: relative;\n}\n.settings-container[data-v-02843f0a] {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%);\n}\n.settings-container > *[data-v-02843f0a] {\n margin: 0 2px;\n cursor: pointer;\n}\n#info-bar svg[data-v-02843f0a] {\n font-size: 16px;\n}\n#info-bar .divider[data-v-02843f0a] {\n margin: 0 8px;\n}\nsvg[data-v-02843f0a]:focus {\n border: none;\n}\n.visualization-card[data-v-02843f0a] {\n border-left: 8px solid #eee;\n}\n.active-tab[data-v-02843f0a] {\n border-left: 8px solid var(--visualization-primary) !important;\n border-image-slice: 1;\n}\n[id^='frame-'][data-v-02843f0a] {\n padding: 1px;\n display: flex;\n flex-flow: column;\n}\n.tooltip[data-v-02843f0a] {\n display: block !important;\n z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-02843f0a] {\n background: var(--visualization-primary);\n color: white;\n border-radius: 16px;\n padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-02843f0a] {\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'][data-v-02843f0a] {\n margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-02843f0a] {\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'][data-v-02843f0a] {\n margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-02843f0a] {\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'][data-v-02843f0a] {\n margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-02843f0a] {\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'][data-v-02843f0a] {\n margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-02843f0a] {\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[data-v-02843f0a] {\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[data-v-02843f0a] {\n border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-02843f0a] {\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-02843f0a] {\n visibility: visible;\n opacity: 1;\n transition: opacity 0.15s;\n}\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\Visualization.vue"],"names":[],"mappings":";AA0mCA;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;EACA,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>\n <div\n class=\"visualization-row\"\n id=\"visualization-container\"\n @click=\"framesClicked\"\n >\n <GlobalEvents\n v-if=\"active && canInsertTime && settingsClosed\"\n @keydown.45=\"insertTime\"\n @keydown.46=\"insertTime\"\n />\n <GlobalEvents\n v-if=\"active && settingsClosed\"\n @keydown.left.prevent=\"arrowLeft\"\n @keydown.right.prevent=\"arrowRight\"\n @keydown.shift.page-down.prevent=\"nextLoopActivate\"\n @keydown.page-down.prevent=\"next\"\n @keydown.page-up.prevent=\"prev\"\n @keydown.shift.page-up.prevent=\"prevLoopActivate\"\n @keydown.83.prevent=\"setHourIni\"\n @keydown.69.prevent=\"setHourEnd\"\n @keydown.36.prevent=\"goToFirstFrame\"\n @keydown.35.prevent=\"goToLastFrame\"\n @keydown.71.prevent=\"dialogs.goTo = true\"\n @keydown.73.prevent=\"dialogs.secondsPerFrame = true\"\n @keydown.76.prevent=\"dialogs.frames = true\"\n @keydown.49.97=\"() => (secondsPerFrame = 1)\"\n @keydown.50.98=\"() => (secondsPerFrame = 2)\"\n @keydown.51.99=\"() => (secondsPerFrame = 3)\"\n @keydown.52.100=\"() => (secondsPerFrame = 4)\"\n @keydown.53.101=\"() => (secondsPerFrame = 5)\"\n />\n <GlobalEvents\n v-if=\"prevLoop || nextLoop\"\n @keydown=\"breakLoop\"\n v-on:click=\"breakLoop\"\n />\n <settings\n v-if=\"active\"\n :dialogs-visibility=\"dialogs\"\n :playback-rate=\"playbackRate\"\n :seconds-per-frame=\"secondsPerFrame\"\n :frames-per-row=\"framesPerRow\"\n :number-of-rows=\"numberOfRows\"\n @change-playback-rate=\"(value) => (playbackRate = value)\"\n @change-go-to=\"changeHour\"\n @change-seconds-per-frame=\"(value) => (secondsPerFrame = value)\"\n @set-frames-selection=\"setFrameSelection\"\n @close=\"(dialog) => (dialogs[dialog] = false)\"\n />\n <div\n :class=\"{ 'visualization-card': true, 'active-tab': active }\"\n style=\"width: 100%; padding: 0\"\n >\n <command-bar\n v-show=\"commandBarShow\"\n :video-playing=\"videoPlaying\"\n :video-paused=\"paused\"\n :insert-time=\"canInsertTime\"\n :hour-ini-selected=\"!!hourIniSelected\"\n :hour-end-selected=\"!!hourEndSelected\"\n @prev-loop-activate=\"prevLoopActivate\"\n @next-loop-activate=\"nextLoopActivate\"\n @prev=\"prev\"\n @next=\"next\"\n @go-to=\"dialogs.goTo = true\"\n @open-frame-selection=\"dialogs.frames = true\"\n @open-frames-per-second=\"dialogs.secondsPerFrame = true\"\n @open-blocks=\"openBlocks\"\n @open-playback-rate=\"dialogs.playbackRate = true\"\n @play-or-pause=\"playOrPause\"\n @stop-playing=\"stopPlayingBar\"\n @set-hour-ini=\"setHourIni\"\n @set-hour-end=\"setHourEnd\"\n @insert-time=\"insertTime\"\n />\n <video-progress\n v-if=\"videoProgressBar\"\n v-show=\"videoPlaying\"\n :video-time=\"videoTime\"\n />\n <info-bar\n :playback-rate=\"playbackRate\"\n :seconds-per-frame=\"secondsPerFrame\"\n :commands-show=\"commandBarShow\"\n :cache=\"useCache\"\n :block-start-time=\"blockStartTime\"\n :video-total-duration=\"videoSliderTotalDuration\"\n :alternative-server=\"alternativeServer\"\n :frames-per-row=\"framesPerRow\"\n :number-of-rows=\"numberOfRows\"\n :hour-ini=\"hourIniSelected\"\n :hour-end=\"hourEndSelected\"\n @toogle-commands-visibility=\"commandBarShow = !commandBarShow\"\n @toogle-cache=\"useCache = !useCache\"\n @change-server=\"changeServerClick\"\n />\n <div\n class=\"visualization-row\"\n v-for=\"rowNumber in numberOfRows\"\n :id=\"'row-' + rowNumber\"\n :key=\"'row-' + rowNumber\"\n style=\"padding: 12px\"\n >\n <div\n v-for=\"(frame, frameNumber) in previousFrames\"\n :key=\"\n numberOfRows +\n '-' +\n framesPerRow +\n '-' +\n getIndex(rowNumber, frameNumber, Positions.previous)\n \"\n style=\"display: none\"\n >\n <span v-html=\"frame.img\" />\n </div>\n <div\n v-for=\"(frame, frameNumber) in nextFrames\"\n :key=\"\n numberOfRows +\n '-' +\n framesPerRow +\n '-' +\n getIndex(rowNumber, frameNumber, Positions.next)\n \"\n style=\"display: none\"\n >\n <span v-html=\"frame.img\" />\n </div>\n <div\n class=\"visualization-col\"\n v-for=\"(frame, frameNumber) in frames.slice(\n framesPerRow * (rowNumber - 1),\n framesPerRow * rowNumber\n )\"\n :key=\"'row-' + rowNumber + '-frame-' + frameNumber\"\n :id=\"`frame-${getIndex(rowNumber, frameNumber, Positions.current)}`\"\n :class=\"{ loaderImg: !!frame.img }\"\n @click=\"\n frame.time\n ? selectFrame(\n getIndex(rowNumber, frameNumber, Positions.current),\n frame\n )\n : null\n \"\n >\n <span :id=\"activeFrame ? 'aa' : 0\" style=\"padding-left: 4px\">\n <b>\n {{\n getAudienceTime(\n frame.time,\n rowNumber,\n frameNumber,\n Positions.current\n )\n }}\n </b>\n </span>\n\n <frame\n ref=\"frames\"\n :frame=\"frame\"\n :index=\"getIndex(rowNumber, frameNumber, Positions.current)\"\n :grid-settings=\"{ numberOfRows, framesPerRow }\"\n :initialTime=\"frame.time === hourIniSelected\"\n :endTime=\"frame.time === hourEndSelected\"\n :betweenTime=\"\n frame.time > hourIniSelected && frame.time < hourEndSelected\n \"\n :active=\"\n getIndex(rowNumber, frameNumber, Positions.current) ===\n activeFrame\n \"\n :activeTab=\"active\"\n :videoUrl=\"fInterface ? fInterface.getVideoUrl(frame) : ''\"\n @startPlaying=\"startPlaying\"\n @stopPlaying=\"stopPlaying\"\n @playPauseStatus=\"changePlayPause\"\n @updateSlider=\"updateSlider\"\n :playback-rate=\"playbackRate\"\n style=\"margin: 0 auto\"\n ></frame>\n </div>\n </div>\n </div>\n <!-- <settings\n ref=\"settings2\"\n :active=\"active\"\n @goToTime=\"changeHour\"\n @goToBlockInterval=\"changeBlockInterval\"\n @setSplitTime=\"setSplitTime\"\n @setFrameSelection=\"setFrameSelection\"\n @setPlaybackRate=\"\n (rate) => {\n playbackRate = rate\n }\n \"\n >\n </settings> -->\n <!-- <v-dialog v-model=\"dialog\" width=\"500\">\n <div class=\"card\">\n <div class=\"card\"-title class=\"text-h5 grey lighten-2\">\n {{ ' Último bloco disponível até: ' }}\n <v-btn\n @click=\"goToStartBlock\"\n class=\"ml-2\"\n dark\n color=\"success\"\n depressed\n >\n <v-icon left> fa-clock </v-icon>\n {{ timeLastBlock }}\n </v-btn>\n <v-spacer></v-spacer>\n <v-btn color=\"error\" fab small class=\"ml-5\" @click=\"dialog = false\">\n <v-icon dark> fa fa-xmark </v-icon>\n </v-btn>\n </div-title>\n </div>\n </v-dialog>\n <Help :media=\"media\" @close=\"media = null\" />\n <v-dialog\n v-if=\"userMultiTabsGrid\"\n v-model=\"userMultiTabsGridsModel\"\n persistent\n width=\"60%\"\n >\n <div class=\"card\">\n <div class=\"card\"-title class=\"warning text-h5\" primary-title>\n <div class=\"row\" class=\"ma-0\" justify=\"center\" align=\"center\">\n <v-icon dark left style=\"font-size: 24px !important\">\n fa fa-exclamation-triangle\n </v-icon>\n <div style=\"color: white\">{{ $t('form.alert') }}</div>\n </div>\n </div-title>\n <div class=\"card\"-text class=\"justify-center pa-6 grey lighten-2\">\n <h3>\n {{ $t('alerts.userMultiTabsGrid') }}\n </h3>\n </div-text>\n <hr class=\"divider\" class=\"grey lighten-1\"></span>\n <div class=\"card\"-actions class=\"grey lighten-2 justify-center\">\n <v-btn color=\"error\" ml-5 @click=\"userMultiTabsGrid = false\">\n <v-icon left color=\"white\">fa fa-times</v-icon>\n {{ $t('form.close') }}\n </v-btn>\n </div-actions>\n </div>\n </v-dialog> -->\n </div>\n</template>\n<script>\nimport Frame from './components/Frame.vue'\nimport FramesInterface from './utils/FramesInterface.js'\nimport FramesService from './services/FramesService.js'\n\nimport Commands from './components/Commands.vue'\nimport Infos from './components/Infos.vue'\nimport VideoProgress from './components/VideoProgress.vue'\nimport Settings from './components/Settings.vue'\n\nconst Positions = Object.freeze({\n previous: 0,\n current: 1,\n next: 2,\n})\n\nexport default {\n name: 'visualization-container',\n props: {\n value: {\n type: Boolean,\n required: true,\n },\n date: {\n type: String,\n required: true,\n },\n channel: {\n type: Number,\n required: true,\n },\n startAudienceTime: {\n type: String,\n required: true,\n },\n videoProgressBar: {\n type: Boolean,\n default: false,\n },\n jumpOnInsert: {\n type: Boolean,\n default: false,\n },\n framesFormat: {\n type: [Number, String],\n default: 6,\n },\n maxSize: {\n type: Number,\n }\n },\n components: {\n Frame,\n CommandBar: Commands,\n InfoBar: Infos,\n VideoProgress,\n Settings,\n // Help,\n },\n data() {\n return {\n Positions,\n updatingChannel: null,\n dialog: false,\n timeLastBlock: null,\n alternativeServer: false,\n useCache: true,\n numberOfRows: 1,\n framesPerRow: 5,\n secondsPerFrame: 1,\n fInterface: null,\n velocity: 1,\n frames: [],\n previousFrames: [],\n nextFrames: [],\n channelCode: 0,\n videoPlaying: false,\n activeFrame: null,\n activeVideo: null,\n videoTime: 0,\n videoTotalTime: null,\n progressVideoDrag: false,\n hourIniSelected: false,\n hourEndSelected: false,\n canInsertTime: false,\n lastHeight: 0,\n loopInterval: null,\n nextLoop: false,\n prevLoop: false,\n videoSliderTotalDuration: 900,\n blockStartTime: null,\n media: null,\n changeServer: false,\n userMultiTabsGrid: false,\n userMultiTabsGridsModel: true,\n playbackRate: 1,\n paused: false,\n commandBarShow: true,\n dialogs: {\n playbackRate: false,\n goTo: false,\n secondsPerFrame: false,\n frames: false,\n },\n }\n },\n async created() {\n this.changeServer = this.serverOfFrames === 'alternative'\n this.alternativeServer = this.serverOfFrames === 'alternative'\n\n const settings = [\n {\n framesPerRow: 2,\n numberOfRows: 1,\n },\n {\n framesPerRow: 3,\n numberOfRows: 1,\n },\n {\n framesPerRow: 3,\n numberOfRows: 2,\n },\n {\n framesPerRow: 4,\n numberOfRows: 1,\n },\n {\n framesPerRow: 4,\n numberOfRows: 2,\n },\n {\n framesPerRow: 5,\n numberOfRows: 1,\n },\n {\n framesPerRow: 5,\n numberOfRows: 2,\n },\n {\n framesPerRow: 6,\n numberOfRows: 1,\n },\n {\n framesPerRow: 6,\n numberOfRows: 2,\n },\n ]\n\n const storedOnDb = settings[parseInt(this.framesFormat) - 1]\n this.framesPerRow = storedOnDb.framesPerRow\n this.numberOfRows = storedOnDb.numberOfRows\n\n await this.createFramesInterface()\n if (this.maxSize) {\n this.resize(this.maxSize, true)\n }\n },\n methods: {\n framesClicked(e) {\n if (e.target.id != 'insert') {\n this.active = true\n }\n },\n async goToStartBlock() {\n try {\n const d = new Date()\n let timestamp = Date.UTC(\n d.getFullYear(),\n d.getMonth(),\n d.getDate(),\n d.getHours(),\n d.getMinutes(),\n d.getSeconds()\n )\n\n const response = (\n await FramesService.getNextAvailableBlock({\n channel: this.channel,\n time: timestamp / 1000,\n })\n ).data\n\n this.dialog = false\n this.changeHour(this.convertToAudienceTime(response.data.start, ':'))\n } catch (err) {\n console.error(err)\n }\n },\n async checkAvailableBlock() {\n try {\n const d = new Date()\n let timestamp = Date.UTC(\n d.getFullYear(),\n d.getMonth(),\n d.getDate(),\n d.getHours(),\n d.getMinutes(),\n d.getSeconds()\n )\n\n const response = (\n await FramesService.getNextAvailableBlock({\n channel: this.channel,\n time: timestamp / 1000,\n })\n ).data\n\n this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':')\n this.dialog = true\n if (!response.status) {\n this.timeLastBlock = 'N/D'\n }\n } catch (err) {\n console.error(err)\n }\n },\n updateSlider(videoStartTime, time) {\n // * atualizar slider se estiver fora do range definido previamente\n if (\n time < this.blockStartTime ||\n time > this.blockStartTime ||\n videoStartTime > this.blockStartTime + this.videoSliderTotalDuration\n ) {\n this.blockStartTime = videoStartTime\n this.videoSliderTotalDuration = 900\n }\n },\n nextLoopActivate() {\n this.breakLoop()\n this.loopInterval = setInterval(this.next, 40)\n setTimeout(() => {\n this.nextLoop = true\n }, 0)\n },\n prevLoopActivate() {\n this.breakLoop()\n this.loopInterval = setInterval(this.prev, 40)\n setTimeout(() => {\n this.prevLoop = true\n }, 0)\n },\n breakLoop() {\n clearInterval(this.loopInterval)\n this.loopInterval = null\n this.nextLoop = false\n this.prevLoop = false\n },\n changePlayPause(status) {\n this.paused = !status\n },\n resize(height=this.lastHeight) {\n this.lastHeight = height\n if (this.$refs.frames) {\n for (let frame of this.$refs.frames) {\n frame.resize(height)\n }\n }\n this.$emit('resized')\n },\n async goToFirstFrame() {\n let frames = this.$refs.frames\n\n let audienceTime = null\n if (frames.length > 0) {\n let frame = frames[0].frame\n audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n }\n // if (audienceTime) {\n // this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\n // }\n if (audienceTime) {\n const [hours, minutes, seconds] = audienceTime.split(':')\n const totalSeconds =\n parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)\n if (totalSeconds >= 9000)\n this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\n else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true))\n }\n },\n async goToLastFrame() {\n let frames = this.$refs.frames\n let audienceTime = null\n if (frames.length > 0) {\n let frame = frames[0].frame\n\n audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n }\n if (audienceTime) {\n this.changeHour(this.getLastFirtsBlockTime(audienceTime))\n }\n },\n getLastFirtsBlockTime(time, first = false) {\n if (time.indexOf(':') !== -1) {\n time = time.replace(/:/g, '')\n }\n let h, m, newTime\n const t = time.match(/.{1,2}/g)\n if (t[0] && t[1]) {\n h = parseInt(t[0])\n m = parseInt(t[1])\n }\n if (h < 26) {\n if (m < 15)\n if (first) newTime = t[0] + ':00:00'\n else newTime = t[0] + ':14:59'\n else if (m < 30)\n if (first) newTime = t[0] + ':15:00'\n else newTime = t[0] + ':29:59'\n else if (m < 45)\n if (first) newTime = t[0] + ':30:00'\n else newTime = t[0] + ':44:59'\n else if (first) newTime = t[0] + ':45:00'\n else newTime = t[0] + ':59:59'\n } else {\n if (m < 15)\n if (first) newTime = '26:00:00'\n else newTime = '26:14:59'\n else {\n if (first) newTime = '26:15:00'\n else newTime = '26:29:59'\n }\n }\n return newTime\n },\n openBlocks() {\n this.$refs.settings2?.openBlocks()\n },\n playOrPause() {\n const array = this.$refs.frames.filter((fc) => !!fc.active)\n if (array.length === 1) {\n const frame = array[0]\n frame.playOrPause(this.playbackRate)\n }\n },\n stopPlayingBar() {\n for (let ref of this.$refs.frames) {\n if (\n ref.videoStatus === ref.Status.playing ||\n ref.videoStatus === ref.Status.paused\n ) {\n ref.stop(false)\n }\n }\n },\n async setFrameSelection(selected) {\n this.frames = this.loadingArray\n switch (parseInt(selected)) {\n // 2x1\n case 1:\n this.framesPerRow = 2\n this.numberOfRows = 1\n break\n // 3x1\n case 2:\n this.framesPerRow = 3\n this.numberOfRows = 1\n break\n // 3x2\n case 3:\n this.framesPerRow = 3\n this.numberOfRows = 2\n break\n // 4x1\n case 4:\n this.framesPerRow = 4\n this.numberOfRows = 1\n break\n // 4x2\n case 5:\n this.framesPerRow = 4\n this.numberOfRows = 2\n break\n // 5x1\n case 6:\n this.framesPerRow = 5\n this.numberOfRows = 1\n break\n // 5x2\n case 7:\n this.framesPerRow = 5\n this.numberOfRows = 2\n break\n // 6x1\n case 8:\n this.framesPerRow = 6\n this.numberOfRows = 1\n break\n // 6x2\n case 9:\n this.framesPerRow = 6\n this.numberOfRows = 2\n break\n }\n await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\n this.getFramesArray()\n setTimeout(() => {\n for (let ref of this.$refs.frames) {\n ref?.resize(this.lastHeight)\n }\n }, 150)\n },\n getFramesArray() {\n this.frames = this.fInterface.getFrames(Positions.current)\n this.nextFrames = this.fInterface.getFrames(Positions.next)\n this.previousFrames = this.fInterface.getFrames(Positions.previous)\n },\n async createFramesInterface() {\n this.frames = this.loadingArray\n let ch = this.channel\n let associationTMP = {\n 1735073: 1,\n 1735074: 139,\n 1735075: 3,\n 1735076: 132,\n }\n //\n this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch\n\n const t = this.startAudienceTime.match(/.{1,2}/g)\n const d = this.getDateParts()\n const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n // * iniciar slider\n this.blockStartTime = time\n this.fInterface = await new FramesInterface(\n this.channelCode,\n this.numberOfRows,\n this.framesPerRow,\n time,\n this.startAudienceTime,\n this.useCache\n )\n await this.fInterface.init()\n\n this.getFramesArray()\n\n this.activeFrame = this.getIndex(1, 0, Positions.current)\n\n this.activeVideo = null\n },\n getIndex(rowNumber, frameIndex, position) {\n let from = this.framesPerRow * this.numberOfRows * position\n let till = this.framesPerRow * this.numberOfRows * (position + 1)\n\n return (from + till * (rowNumber - 1)) / rowNumber + frameIndex\n },\n getAudienceTime(frameTime, rowNumber, frameNumber, position) {\n if (!frameTime) {\n return 'Loading...'\n } else if (\n this.getIndex(rowNumber, frameNumber, position) === this.activeVideo\n ) {\n return this.convertToAudienceTime(this.videoTime)\n } else {\n return this.convertToAudienceTime(frameTime)\n }\n },\n dateInUtc(miliSeconds) {\n var date = new Date(miliSeconds)\n var utc = new Date(\n date.getUTCFullYear(),\n date.getUTCMonth(),\n date.getUTCDate(),\n date.getUTCHours(),\n date.getUTCMinutes(),\n date.getUTCSeconds()\n )\n return utc\n },\n convertToAudienceTime(time, separator = ':') {\n const d = this.getDateParts()\n const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\n\n let hour = this.dateInUtc(time * 1000)\n .toTimeString()\n .split(' ')[0]\n .split(':')\n .map(Number)\n\n if (time > limit && time <= limit + this.startAudienceSeconds) {\n hour[0] = 24 + hour[0]\n }\n return hour\n .map((part) => (part > 9 ? part.toString() : '0' + part))\n .join(separator)\n },\n getDateParts(date = this.date) {\n const d = new Date(date)\n return {\n year: d.getFullYear(),\n month: d.getMonth(),\n day: d.getDate(),\n }\n },\n selectFrame(index, frame) {\n const d = this.getDateParts()\n const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\n const frameTime = frame?.time\n\n if (frameTime - (this.startAudienceSeconds + limit) <= 0) {\n if (this.hourIniSelected === true) {\n this.hourIniSelected = frameTime\n\n if (\n this.hourEndSelected &&\n this.hourIniSelected > this.hourEndSelected\n ) {\n this.hourEndSelected = false\n }\n } else if (this.hourEndSelected === true) {\n if (frameTime > this.hourIniSelected) {\n this.hourEndSelected = frameTime\n this.canInsertTime = true\n } else {\n this.hourEndSelected = false\n }\n }\n }\n\n if (this.activeFrame !== index) {\n // ? Se clicar no frame diferente de onde está a dar play, faz pausa\n const array = this.$refs.frames.filter(\n (fc) => fc.videoStatus === fc.Status.playing\n )\n if (array.length === 1) {\n const frame = array[0]\n frame.playOrPause()\n }\n this.activeVideo = null\n this.activeFrame = index\n }\n },\n setHourIni() {\n this.canInsertTime = true\n this.hourIniSelected = true\n document.getElementById(`frame-${this.activeFrame}`).click()\n this.$emit('setHourIni', {\n hour_ini: this.hourIniSelected\n ? this.convertToAudienceTime(this.hourIniSelected, '')\n : null,\n })\n },\n setHourEnd() {\n this.canInsertTime = true\n this.hourEndSelected = true\n document.getElementById(`frame-${this.activeFrame}`).click()\n },\n //* Navegação\n arrowRight() {\n if (this.checkLimitRight(false)) {\n if (\n this.activeFrame ===\n this.numberOfRows * this.framesPerRow * 2 - 1\n ) {\n this.next()\n } else {\n this.activeFrame++\n }\n }\n },\n arrowLeft() {\n if (this.checkLimitLeft(false)) {\n if (this.activeFrame === this.numberOfRows * this.framesPerRow) {\n this.prev()\n } else {\n this.activeFrame--\n }\n }\n },\n checkLimitRight(value) {\n const d = this.getDateParts()\n const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59)\n\n if (value) {\n return (\n high > (this.fInterface.getCurrentTime() - 1) * 1000 &&\n this.nextFrames[0].title !== -1\n )\n } else {\n // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000\n return high > this.fInterface.getCurrentTime() * 1000\n }\n },\n checkLimitLeft(value) {\n const d = this.getDateParts()\n const low = Date.UTC(d.year, d.month, d.day, 2, 30, 0)\n\n if (value) {\n return low <= (this.fInterface.getCurrentTime() - 1) * 1000\n } else {\n return (\n low <\n (this.fInterface.getCurrentTime() +\n this.activeFrame -\n this.numberOfRows * this.framesPerRow) *\n 1000\n )\n }\n },\n async next() {\n if (this.checkLimitRight(true)) {\n const array = this.$refs.frames.filter(\n (fc) =>\n fc.videoStatus === fc.Status.playing ||\n fc.videoStatus === fc.Status.paused\n )\n\n if (array.length === 1) {\n const frame = array[0]\n frame.stop(false)\n }\n this.fInterface.setCurrentStep(this.secondsPerFrame)\n await this.fInterface.loadNextFrames()\n\n this.activeFrame = this.getIndex(1, 0, Positions.current)\n this.activeVideo = null\n\n this.getFramesArray()\n }\n },\n async prev() {\n if (this.checkLimitLeft(true)) {\n const array = this.$refs.frames.filter(\n (fc) =>\n fc.videoStatus === fc.Status.playing ||\n fc.videoStatus === fc.Status.paused\n )\n if (array.length === 1) {\n const frame = array[0]\n frame.stop(false)\n }\n\n this.fInterface.setCurrentStep(this.secondsPerFrame)\n await this.fInterface.loadPrevFrames()\n\n this.activeFrame = this.getIndex(\n this.numberOfRows,\n this.framesPerRow - 1,\n Positions.current\n )\n this.activeVideo = null\n\n this.getFramesArray()\n }\n },\n async setStartTime(time) {\n if (time.indexOf(':') !== -1) {\n time = time.replace(/:/g, '')\n }\n const t = time.match(/.{1,2}/g)\n const d = this.getDateParts()\n const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n this.frames = this.loadingArray\n\n await this.fInterface.changeTime(setTime)\n\n this.getFramesArray()\n\n this.activeFrame = this.getIndex(1, 0, Positions.current)\n // let frames = this.$refs.frames\n\n // let audienceTime = null\n // if (frames.length > 0) {\n // let frame = frames[0].frame\n // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n // }\n\n this.activeVideo = null\n\n return true\n },\n hourToTimeStamp(time) {\n if (time.indexOf(':') !== -1) {\n time = time.replace(/:/g, '')\n }\n const t = time.match(/.{1,2}/g)\n const d = this.getDateParts()\n const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n\n return setTime\n },\n async changeHour(value) {\n if (value) {\n setTimeout(() => {\n const array = this.$refs.frames.filter(\n (fc) =>\n fc.videoStatus === fc.Status.playing ||\n fc.videoStatus === fc.Status.paused\n )\n\n if (array.length === 1) {\n const frame = array[0]\n frame.stop(false)\n }\n\n this.setStartTime(value, true)\n }, 0)\n }\n },\n changeBlockInterval(value) {\n this.changeHour(value.ini)\n let time_ini, time_end\n time_ini = this.hourToTimeStamp(value.ini)\n time_end = this.hourToTimeStamp(value.end)\n this.videoSliderTotalDuration = time_end - time_ini\n this.$refs.frames[0].changeSettings(time_ini)\n this.blockStartTime = time_ini\n },\n //eslint-disable-next-line\n async updateVideoTime(index, videoTime) {\n this.activeVideo = index\n this.videoTime = videoTime\n },\n //eslint-disable-next-line\n updateVideoStatus(currentTime) {\n if (!this.progressVideoDrag) {\n // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS\n // this.updateProgress(null, currentTime)\n }\n },\n async startPlaying(frame, totalTime) {\n const array = this.$refs.frames.filter(\n (fc) => fc.frame.time !== frame.time\n )\n\n for (let ref of array) {\n if (\n ref.videoStatus === ref.Status.playing ||\n ref.videoStatus === ref.Status.paused\n ) {\n ref.stop(false)\n }\n }\n\n this.videoTotalTime = totalTime\n this.videoPlaying = true\n },\n stopPlaying() {\n this.videoTotalTime = null\n this.videoPlaying = false\n this.paused = false\n },\n insertTime() {\n this.$emit('timeToInsert', {\n channel: this.channel,\n hour_ini: this.hourIniSelected\n ? this.convertToAudienceTime(this.hourIniSelected, '')\n : null,\n hour_end: this.hourEndSelected\n ? this.convertToAudienceTime(this.hourEndSelected, '')\n : null,\n force: false,\n })\n\n if (this.jumpOnInsert) {\n this.changeHour(\n this.convertToAudienceTime(\n (this.hourEndSelected || this.hourIniSelected) + 1\n )\n )\n }\n\n this.hourIniSelected = null\n this.hourEndSelected = null\n this.canInsertTime = false\n\n // this.fInterface.setCurrentPosition(this.hourEndSelected)\n },\n insertTimeForce() {\n this.$emit('timeToInsert', {\n channel: this.channel,\n hour_ini: this.hourIniSelected\n ? this.convertToAudienceTime(this.hourIniSelected, '')\n : null,\n hour_end: this.hourEndSelected\n ? this.convertToAudienceTime(this.hourEndSelected, '')\n : null,\n force: true,\n })\n\n this.hourIniSelected = null\n this.hourEndSelected = null\n this.canInsertTime = false\n\n // this.fInterface.setCurrentPosition(this.hourEndSelected)\n },\n async getChannelMedia() {\n // this.media = (await ChannelService.show(this.channel)).data.MEDIA\n },\n async changeServerClick() {\n this.changeServer = !this.changeServer\n // this.$store.dispatch(\n // 'serverOfFrames',\n // this.changeServer ? 'alternative' : 'default'\n // )\n sessionStorage.setItem(\n 'serverOfFrames',\n this.changeServer ? 'alternative' : 'default'\n )\n\n // if (this.$route.params.time != this.frames[0].time)\n // this.$router.push({\n // name: 'grid',\n // params: {\n // date: this.date,\n // channel: this.channelCode,\n // time: this.frames[0].time,\n // },\n // })\n location.reload()\n },\n },\n computed: {\n active: {\n get() {\n return this.value\n },\n set(value) {\n this.$emit('input', value)\n },\n },\n settingsClosed() {\n return !Object.values(this.dialogs).find((v) => v)\n },\n startAudienceSeconds() {\n const t = this.startAudienceTime.match(/.{1,2}/g)\n return parseInt(t[0] * 3600 + t[1] * 60 + t[2])\n },\n loadingArray() {\n return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())\n },\n serverOfFrames() {\n return sessionStorage.getItem('server')\n },\n },\n watch: {\n framesFormat(value) {\n this.setFrameSelection(value)\n },\n active() {\n // ? sempre que trocamos de tabs dar reset as horas selected\n this.hourIniSelected = false\n this.hourEndSelected = false\n },\n useCache() {\n this.createFramesInterface()\n },\n hourIniSelected(value) {\n if (value) {\n sessionStorage.setItem(\n 'currentTimeFrames',\n this.convertToAudienceTime(this.hourIniSelected, '')\n )\n } else {\n sessionStorage.removeItem('currentTimeFrames')\n }\n },\n activeFrame(value) {\n if (value) {\n this.stopPlayingBar()\n }\n },\n channel() {\n this.updatingChannel = new Promise((resolve, reject) => {\n try {\n this.createFramesInterface()\n resolve(true)\n } catch (err) {\n reject(err)\n }\n })\n },\n },\n}\n</script>\n<style scoped>\n.visualization-row {\n display: flex;\n flex-wrap: wrap;\n flex: 1 1 auto;\n}\n\n.visualization-col {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n}\n\n.visualization-divider {\n display: block;\n flex: 1 1 100%;\n height: 0px;\n max-height: 0px;\n opacity: 1;\n transition: inherit;\n border-style: solid;\n border-width: thin 0 0 0;\n border-color: rgba(0, 0, 0, 0.12);\n margin: 0;\n}\n\n.visualization-divider.vertical {\n align-self: stretch;\n border-width: 0 thin 0 0;\n display: inline-flex;\n height: inherit;\n margin-left: -1px;\n max-height: 100%;\n max-width: 0px;\n vertical-align: text-bottom;\n width: 0px;\n}\n\n.visualization-card {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n width: 100%;\n transition-property: box-shadow, opacity, -webkit-box-shadow;\n overflow-wrap: break-word;\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n\n.visualization-justify-center, /deep/ .visualization-justify-center {\n justify-content: center;\n}\n\n.visualization-align-center {\n align-items: center;\n}\n\n#visualization-container {\n max-width: 100% !important;\n margin: 0 auto !important;\n height: 100%;\n border-bottom: none;\n}\n#visualization-container > .card {\n border-radius: 0 !important;\n font-size: 12px;\n width: 100%;\n box-shadow: none;\n height: 100%;\n}\n\n#command-bar,\n#info-bar {\n background-color: #f5f5f5;\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button {\n width: 42px;\n height: 36px;\n border: none;\n background: none;\n}\n\n#command-bar button:hover {\n cursor: pointer;\n background: rgba(0, 0, 0, 0.12);\n}\n\n#command-bar svg {\n font-size: 16px;\n}\n\n#command-bar {\n padding: 0 !important;\n}\n\n#info-bar {\n padding: 4px;\n font-size: 14px;\n position: relative;\n}\n\n.settings-container {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.settings-container > * {\n margin: 0 2px;\n cursor: pointer;\n}\n\n#info-bar svg {\n font-size: 16px;\n}\n\n#info-bar .divider {\n margin: 0 8px;\n}\n\nsvg:focus {\n border: none;\n}\n\n.visualization-card {\n border-left: 8px solid #eee;\n}\n\n.active-tab {\n border-left: 8px solid var(--visualization-primary) !important;\n border-image-slice: 1;\n}\n\n[id^='frame-'] {\n padding: 1px;\n display: flex;\n flex-flow: column;\n}\n\n.tooltip {\n display: block !important;\n z-index: 10000;\n}\n\n.tooltip .tooltip-inner {\n background: var(--visualization-primary);\n color: white;\n border-radius: 16px;\n padding: 5px 10px 4px;\n}\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\n.tooltip[x-placement^='top'] {\n margin-bottom: 5px;\n}\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\n.tooltip[x-placement^='bottom'] {\n margin-top: 5px;\n}\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\n.tooltip[x-placement^='right'] {\n margin-left: 5px;\n}\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\n.tooltip[x-placement^='left'] {\n margin-right: 5px;\n}\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\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\n.tooltip.popover .popover-arrow {\n border-color: #f9f9f9;\n}\n\n.tooltip[aria-hidden='true'] {\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.15s, visibility 0.15s;\n}\n\n.tooltip[aria-hidden='false'] {\n visibility: visible;\n opacity: 1;\n transition: opacity 0.15s;\n}\n</style>\n"]}, media: undefined });
4475
4479
 
4476
4480
  };
4477
4481
  /* scoped */
4478
- const __vue_scope_id__ = "data-v-576d506a";
4482
+ const __vue_scope_id__ = "data-v-02843f0a";
4479
4483
  /* module identifier */
4480
4484
  const __vue_module_identifier__ = undefined;
4481
4485
  /* functional template */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@twab/visualization",
3
- "version": "0.9.11",
3
+ "version": "0.9.14",
4
4
  "main": "dist/visualization.js",
5
5
  "files": [
6
6
  "dist"