@twab/visualization 1.6.5 → 1.6.6

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 +47 -38
  2. package/package.json +1 -1
package/dist/visualization.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import VTooltip from 'v-tooltip';
2
2
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
3
3
  import { library } from '@fortawesome/fontawesome-svg-core';
4
- import { faBackward, faStepBackward, faClock, faStepForward, faForward, faPlay, faStop, faBorderAll, faSlidersH, faCut, faHourglassStart, faHourglassEnd, faVideo, faInfoCircle, faTachometerAlt, faServer, faEye, faEyeSlash, faBan, faSync, faArrowTurnDown, faArrowCircleDown, faPause, faArrowsLeftRightToLine } from '@fortawesome/free-solid-svg-icons';
4
+ import { faBackward, faStepBackward, faClock, faStepForward, faForward, faPlay, faStop, faBorderAll, faSlidersH, faCut, faHourglassStart, faHourglassEnd, faVideo, faInfoCircle, faTachometerAlt, faServer, faEye, faEyeSlash, faBan, faSync, faArrowTurnDown, faArrowCircleDown, faPause, faArrowsLeftRightToLine, faExclamationTriangle, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
5
5
  import VueMask from 'v-mask';
6
6
  import VueLoading from 'vue-loading-twa';
7
7
  import axios from 'axios';
@@ -84,30 +84,34 @@ function hueToRGB(p, q, t) {
84
84
  }
85
85
 
86
86
  function registerIcons () {
87
- library.add(faBackward);
88
- library.add(faStepBackward);
89
- library.add(faClock);
90
- library.add(faStepForward);
91
- library.add(faForward);
92
- library.add(faPlay);
93
- library.add(faStop);
94
- library.add(faBorderAll);
95
- library.add(faSlidersH);
96
- library.add(faCut);
97
- library.add(faHourglassStart);
98
- library.add(faHourglassEnd);
99
- library.add(faVideo);
100
- library.add(faInfoCircle);
101
- library.add(faTachometerAlt);
102
- library.add(faServer);
103
- library.add(faEye);
104
- library.add(faEyeSlash);
105
- library.add(faBan);
106
- library.add(faSync);
107
- library.add(faArrowTurnDown);
108
- library.add(faArrowCircleDown);
109
- library.add(faPause);
110
- library.add(faArrowsLeftRightToLine);
87
+ library.add(
88
+ faBackward,
89
+ faStepBackward,
90
+ faClock,
91
+ faStepForward,
92
+ faForward,
93
+ faPlay,
94
+ faStop,
95
+ faBorderAll,
96
+ faSlidersH,
97
+ faCut,
98
+ faHourglassStart,
99
+ faHourglassEnd,
100
+ faVideo,
101
+ faInfoCircle,
102
+ faTachometerAlt,
103
+ faServer,
104
+ faEye,
105
+ faEyeSlash,
106
+ faBan,
107
+ faSync,
108
+ faArrowTurnDown,
109
+ faArrowCircleDown,
110
+ faPause,
111
+ faArrowsLeftRightToLine,
112
+ faExclamationTriangle,
113
+ faExclamationCircle
114
+ );
111
115
  }
112
116
 
113
117
  var index = {
@@ -2221,6 +2225,12 @@ __vue_render__$4._withStripped = true;
2221
2225
  //
2222
2226
  //
2223
2227
  //
2228
+ //
2229
+ //
2230
+ //
2231
+ //
2232
+ //
2233
+ //
2224
2234
 
2225
2235
  var script$3 = {
2226
2236
  props: {
@@ -2420,11 +2430,10 @@ var __vue_render__$3 = function () {
2420
2430
  ? _c(
2421
2431
  "span",
2422
2432
  [
2423
- _c(
2424
- "v-icon",
2425
- { attrs: { color: "warning", small: "", left: "" } },
2426
- [_vm._v("fa-exclamation-circle")]
2427
- ),
2433
+ _c("font-awesome-icon", {
2434
+ staticStyle: { margin: "0 4px" },
2435
+ attrs: { icon: "fa-solid fa-exclamation-circle" },
2436
+ }),
2428
2437
  _vm._v(" "),
2429
2438
  _c("strong", [
2430
2439
  _vm._v(_vm._s(_vm.$t("infoBar.notUsingCache"))),
@@ -2513,7 +2522,8 @@ var __vue_render__$3 = function () {
2513
2522
  ? _c(
2514
2523
  "div",
2515
2524
  {
2516
- staticClass: "visualization-row visualization-justify-center",
2525
+ staticClass:
2526
+ "visualization-row visualization-justify-center visualization-align-center",
2517
2527
  staticStyle: {
2518
2528
  color: "white",
2519
2529
  "background-color": "orange",
@@ -2527,11 +2537,10 @@ var __vue_render__$3 = function () {
2527
2537
  _vm._s(_vm.$t("infoBar.alternativeServer")) +
2528
2538
  "\n "
2529
2539
  ),
2530
- _c(
2531
- "v-icon",
2532
- { attrs: { color: "white", small: "", right: "" } },
2533
- [_vm._v("fa-exclamation-triangle")]
2534
- ),
2540
+ _c("font-awesome-icon", {
2541
+ staticStyle: { margin: "0 4px" },
2542
+ attrs: { icon: "fa-solid fa-exclamation-triangle" },
2543
+ }),
2535
2544
  ],
2536
2545
  1
2537
2546
  )
@@ -2545,11 +2554,11 @@ __vue_render__$3._withStripped = true;
2545
2554
  /* style */
2546
2555
  const __vue_inject_styles__$3 = function (inject) {
2547
2556
  if (!inject) return
2548
- inject("data-v-355e10a1_0", { source: "\n.visualization-row[data-v-355e10a1] {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\n}\n.visualization-col[data-v-355e10a1] {\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-355e10a1] {\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-355e10a1] {\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-355e10a1] {\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-355e10a1],[data-v-355e10a1] .visualization-justify-center {\r\n justify-content: center;\n}\n.visualization-align-center[data-v-355e10a1] {\r\n align-items: center;\n}\n#visualization-container[data-v-355e10a1] {\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-355e10a1] {\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-355e10a1],\r\n#info-bar[data-v-355e10a1] {\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-355e10a1] {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\n}\n#command-bar button[data-v-355e10a1]:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-355e10a1] {\r\n font-size: 16px;\n}\n#command-bar[data-v-355e10a1] {\r\n padding: 0 !important;\n}\n#info-bar[data-v-355e10a1] {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\n}\n.settings-container[data-v-355e10a1] {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\n}\n.settings-container > *[data-v-355e10a1] {\r\n margin: 0 2px;\r\n cursor: pointer;\n}\n#info-bar svg[data-v-355e10a1] {\r\n font-size: 16px;\n}\n#info-bar .divider[data-v-355e10a1] {\r\n margin: 0 8px;\n}\nsvg[data-v-355e10a1]:focus {\r\n border: none;\n}\n.visualization-card[data-v-355e10a1] {\r\n border-left: 8px solid #eee;\n}\n.active-tab[data-v-355e10a1] {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\n}\n[id^='frame-'][data-v-355e10a1] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\n}\n.tooltip[data-v-355e10a1] {\r\n display: block !important;\r\n z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-355e10a1] {\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-355e10a1] {\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-355e10a1] {\r\n margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-355e10a1] {\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-355e10a1] {\r\n margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-355e10a1] {\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-355e10a1] {\r\n margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-355e10a1] {\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-355e10a1] {\r\n margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-355e10a1] {\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-355e10a1] {\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-355e10a1] {\r\n border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-355e10a1] {\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-355e10a1] {\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;EAEA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Infos.vue","sourcesContent":["<template>\r\n <div\r\n id=\"info-bar\"\r\n class=\"visualization-col\"\r\n :style=\"\r\n !commandsShow ? 'border-top-right-radius: 6px; padding: 0' : 'padding: 0'\r\n \"\r\n >\r\n <div\r\n class=\"visualization-row visualization-justify-center visualization-align-center\"\r\n style=\"position: relative; padding: 4px\"\r\n >\r\n <span> {{ playbackRate }}x </span>\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n <span>\r\n {{\r\n $t('infoBar.selected', {\r\n seconds: hourEnd && hourIni ? hourEnd - hourIni + 1 : 0,\r\n hour_ini: convertToAudienceTime(hourIni),\r\n hour_end: convertToAudienceTime(hourEnd),\r\n })\r\n }}\r\n </span>\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n <span>\r\n {{\r\n $t('infoBar.interval', {\r\n seconds: secondsPerFrame,\r\n })\r\n }}\r\n </span>\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n <span>\r\n {{\r\n $t('infoBar.block', {\r\n time1: convertToAudienceTime(blockStartTime),\r\n time2: convertToAudienceTime(blockTotalTime),\r\n })\r\n }}\r\n </span>\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n {{ framesPerRow * numberOfRows }}\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n {{ framesPerRow + '*' + numberOfRows }}\r\n <span\r\n class=\"visualization-divider vertical\"\r\n v-if=\"!cache\"\r\n style=\"margin: 0 8px\"\r\n />\r\n <span v-if=\"!cache\">\r\n <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.showButtons')\r\n : $t('moduletelentry.hideButtons')\r\n \"\r\n />\r\n <font-awesome-icon\r\n :icon=\"cache ? 'fa-solid fa-ban' : 'fa-solid fa-sync'\"\r\n @click=\"$emit('toogle-cache')\"\r\n v-tooltip=\"\r\n cache ? $t('infoBar.disableCache') : $t('infoBar.activateCache')\r\n \"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div\r\n v-if=\"alternativeServer\"\r\n class=\"visualization-row visualization-justify-center\"\r\n style=\"\r\n color: white;\r\n background-color: orange;\r\n font-weight: bold;\r\n padding: 4px;\r\n \"\r\n >\r\n {{ $t('infoBar.alternativeServer') }}\r\n <v-icon color=\"white\" small right>fa-exclamation-triangle</v-icon>\r\n </div>\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n props: {\r\n playbackRate: {\r\n type: Number,\r\n required: true,\r\n },\r\n secondsPerFrame: {\r\n type: Number,\r\n required: true,\r\n },\r\n commandsShow: {\r\n type: Boolean,\r\n required: true,\r\n },\r\n cache: {\r\n type: Boolean,\r\n required: true,\r\n },\r\n blockStartTime: {\r\n type: Number,\r\n required: true,\r\n },\r\n videoTotalDuration: {\r\n type: Number,\r\n required: true,\r\n },\r\n alternativeServer: {\r\n type: Boolean,\r\n required: true,\r\n },\r\n framesPerRow: {\r\n type: Number,\r\n required: true,\r\n },\r\n numberOfRows: {\r\n type: Number,\r\n required: true,\r\n },\r\n hourIni: {\r\n type: [Number, Boolean],\r\n },\r\n hourEnd: {\r\n type: [Number, Boolean],\r\n },\r\n },\r\n data() {\r\n return {}\r\n },\r\n computed: {\r\n blockTotalTime() {\r\n return this.videoTotalDuration + this.blockStartTime\r\n },\r\n },\r\n methods: {\r\n convertToAudienceTime(time, separator = ':') {\r\n const limit = Date.UTC(null, null, null, 23, 59, 59) / 1000\r\n\r\n let hour = this.dateInUtc(time * 1000)\r\n .toTimeString()\r\n .split(' ')[0]\r\n .split(':')\r\n .map(Number)\r\n\r\n if (time > limit && time <= limit + this.startAudienceSeconds) {\r\n hour[0] = 24 + hour[0]\r\n }\r\n return hour\r\n .map((part) => (part > 9 ? part.toString() : '0' + part))\r\n .join(separator)\r\n },\r\n\r\n dateInUtc(miliSeconds) {\r\n var date = new Date(miliSeconds)\r\n var utc = new Date(\r\n date.getUTCFullYear(),\r\n date.getUTCMonth(),\r\n date.getUTCDate(),\r\n date.getUTCHours(),\r\n date.getUTCMinutes(),\r\n date.getUTCSeconds()\r\n )\r\n return utc\r\n },\r\n },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n display: block;\r\n flex: 1 1 100%;\r\n height: 0px;\r\n max-height: 0px;\r\n opacity: 1;\r\n transition: inherit;\r\n border-style: solid;\r\n border-width: thin 0 0 0;\r\n border-color: rgba(0, 0, 0, 0.12);\r\n margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n align-self: stretch;\r\n border-width: 0 thin 0 0;\r\n display: inline-flex;\r\n height: inherit;\r\n margin-left: -1px;\r\n max-height: 100%;\r\n max-width: 0px;\r\n vertical-align: text-bottom;\r\n width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n width: 100%;\r\n transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n overflow-wrap: break-word;\r\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\r\n}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n max-width: 100% !important;\r\n margin: 0 auto !important;\r\n height: 100%;\r\n border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n border-radius: 0 !important;\r\n font-size: 12px;\r\n width: 100%;\r\n box-shadow: none;\r\n height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n background-color: #f5f5f5;\r\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n}\r\n#command-bar button {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\r\n}\r\n\r\n.settings-container {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n margin: 0 2px;\r\n cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n border: none;\r\n}\r\n\r\n.visualization-card {\r\n border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n display: block !important;\r\n z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n background: var(--visualization-primary);\r\n color: white;\r\n border-radius: 16px;\r\n padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n position: absolute;\r\n margin: 5px;\r\n border-color: var(--visualization-primary);\r\n z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n border-width: 5px 5px 0 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n bottom: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n border-width: 0 5px 5px 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-top-color: transparent !important;\r\n top: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n border-width: 5px 5px 5px 0;\r\n border-left-color: transparent !important;\r\n border-top-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n left: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n border-width: 5px 0 5px 5px;\r\n border-top-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n right: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n background: #f9f9f9;\r\n color: black;\r\n padding: 24px;\r\n border-radius: 5px;\r\n box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n visibility: visible;\r\n opacity: 1;\r\n transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined });
2557
+ inject("data-v-2fccbf33_0", { source: "\n.visualization-row[data-v-2fccbf33] {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\n}\n.visualization-col[data-v-2fccbf33] {\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-2fccbf33] {\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-2fccbf33] {\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-2fccbf33] {\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-2fccbf33],[data-v-2fccbf33] .visualization-justify-center {\r\n justify-content: center;\n}\n.visualization-align-center[data-v-2fccbf33] {\r\n align-items: center;\n}\n#visualization-container[data-v-2fccbf33] {\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-2fccbf33] {\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-2fccbf33],\r\n#info-bar[data-v-2fccbf33] {\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-2fccbf33] {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\n}\n#command-bar button[data-v-2fccbf33]:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-2fccbf33] {\r\n font-size: 16px;\n}\n#command-bar[data-v-2fccbf33] {\r\n padding: 0 !important;\n}\n#info-bar[data-v-2fccbf33] {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\n}\n.settings-container[data-v-2fccbf33] {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\n}\n.settings-container > *[data-v-2fccbf33] {\r\n margin: 0 2px;\r\n cursor: pointer;\n}\n#info-bar svg[data-v-2fccbf33] {\r\n font-size: 16px;\n}\n#info-bar .divider[data-v-2fccbf33] {\r\n margin: 0 8px;\n}\nsvg[data-v-2fccbf33]:focus {\r\n border: none;\n}\n.visualization-card[data-v-2fccbf33] {\r\n border-left: 8px solid #eee;\n}\n.active-tab[data-v-2fccbf33] {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\n}\n[id^='frame-'][data-v-2fccbf33] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\n}\n.tooltip[data-v-2fccbf33] {\r\n display: block !important;\r\n z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-2fccbf33] {\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-2fccbf33] {\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-2fccbf33] {\r\n margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-2fccbf33] {\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-2fccbf33] {\r\n margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-2fccbf33] {\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-2fccbf33] {\r\n margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-2fccbf33] {\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-2fccbf33] {\r\n margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-2fccbf33] {\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-2fccbf33] {\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-2fccbf33] {\r\n border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-2fccbf33] {\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-2fccbf33] {\r\n visibility: visible;\r\n opacity: 1;\r\n transition: opacity 0.15s;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Infos.vue"],"names":[],"mappings":";AA+LA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;EAEA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Infos.vue","sourcesContent":["<template>\r\n <div\r\n id=\"info-bar\"\r\n class=\"visualization-col\"\r\n :style=\"\r\n !commandsShow ? 'border-top-right-radius: 6px; padding: 0' : 'padding: 0'\r\n \"\r\n >\r\n <div\r\n class=\"visualization-row visualization-justify-center visualization-align-center\"\r\n style=\"position: relative; padding: 4px\"\r\n >\r\n <span> {{ playbackRate }}x </span>\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n <span>\r\n {{\r\n $t('infoBar.selected', {\r\n seconds: hourEnd && hourIni ? hourEnd - hourIni + 1 : 0,\r\n hour_ini: convertToAudienceTime(hourIni),\r\n hour_end: convertToAudienceTime(hourEnd),\r\n })\r\n }}\r\n </span>\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n <span>\r\n {{\r\n $t('infoBar.interval', {\r\n seconds: secondsPerFrame,\r\n })\r\n }}\r\n </span>\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n <span>\r\n {{\r\n $t('infoBar.block', {\r\n time1: convertToAudienceTime(blockStartTime),\r\n time2: convertToAudienceTime(blockTotalTime),\r\n })\r\n }}\r\n </span>\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n {{ framesPerRow * numberOfRows }}\r\n <hr class=\"visualization-divider vertical\" style=\"margin: 0 8px\" />\r\n {{ framesPerRow + '*' + numberOfRows }}\r\n <span\r\n class=\"visualization-divider vertical\"\r\n v-if=\"!cache\"\r\n style=\"margin: 0 8px\"\r\n />\r\n <span v-if=\"!cache\">\r\n <font-awesome-icon\r\n icon=\"fa-solid fa-exclamation-circle\"\r\n style=\"margin: 0 4px\"\r\n />\r\n <strong>{{ $t('infoBar.notUsingCache') }}</strong>\r\n </span>\r\n <div class=\"settings-container\">\r\n <font-awesome-icon\r\n icon=\"fa-solid fa-server\"\r\n @click=\"$emit('change-server')\"\r\n v-tooltip=\"\r\n alternativeServer\r\n ? $t('infoBar.changeServer')\r\n : $t('infoBar.changeServer')\r\n \"\r\n />\r\n <font-awesome-icon\r\n :icon=\"commandsShow ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'\"\r\n @click=\"$emit('toogle-commands-visibility')\"\r\n v-tooltip=\"\r\n commandsShow\r\n ? $t('moduletelentry.showButtons')\r\n : $t('moduletelentry.hideButtons')\r\n \"\r\n />\r\n <font-awesome-icon\r\n :icon=\"cache ? 'fa-solid fa-ban' : 'fa-solid fa-sync'\"\r\n @click=\"$emit('toogle-cache')\"\r\n v-tooltip=\"\r\n cache ? $t('infoBar.disableCache') : $t('infoBar.activateCache')\r\n \"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div\r\n v-if=\"alternativeServer\"\r\n class=\"visualization-row visualization-justify-center visualization-align-center\"\r\n style=\"\r\n color: white;\r\n background-color: orange;\r\n font-weight: bold;\r\n padding: 4px;\r\n \"\r\n >\r\n {{ $t('infoBar.alternativeServer') }}\r\n <font-awesome-icon\r\n icon=\"fa-solid fa-exclamation-triangle\"\r\n style=\"margin: 0 4px\"\r\n />\r\n </div>\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n props: {\r\n playbackRate: {\r\n type: Number,\r\n required: true,\r\n },\r\n secondsPerFrame: {\r\n type: Number,\r\n required: true,\r\n },\r\n commandsShow: {\r\n type: Boolean,\r\n required: true,\r\n },\r\n cache: {\r\n type: Boolean,\r\n required: true,\r\n },\r\n blockStartTime: {\r\n type: Number,\r\n required: true,\r\n },\r\n videoTotalDuration: {\r\n type: Number,\r\n required: true,\r\n },\r\n alternativeServer: {\r\n type: Boolean,\r\n required: true,\r\n },\r\n framesPerRow: {\r\n type: Number,\r\n required: true,\r\n },\r\n numberOfRows: {\r\n type: Number,\r\n required: true,\r\n },\r\n hourIni: {\r\n type: [Number, Boolean],\r\n },\r\n hourEnd: {\r\n type: [Number, Boolean],\r\n },\r\n },\r\n data() {\r\n return {}\r\n },\r\n computed: {\r\n blockTotalTime() {\r\n return this.videoTotalDuration + this.blockStartTime\r\n },\r\n },\r\n methods: {\r\n convertToAudienceTime(time, separator = ':') {\r\n const limit = Date.UTC(null, null, null, 23, 59, 59) / 1000\r\n\r\n let hour = this.dateInUtc(time * 1000)\r\n .toTimeString()\r\n .split(' ')[0]\r\n .split(':')\r\n .map(Number)\r\n\r\n if (time > limit && time <= limit + this.startAudienceSeconds) {\r\n hour[0] = 24 + hour[0]\r\n }\r\n return hour\r\n .map((part) => (part > 9 ? part.toString() : '0' + part))\r\n .join(separator)\r\n },\r\n\r\n dateInUtc(miliSeconds) {\r\n var date = new Date(miliSeconds)\r\n var utc = new Date(\r\n date.getUTCFullYear(),\r\n date.getUTCMonth(),\r\n date.getUTCDate(),\r\n date.getUTCHours(),\r\n date.getUTCMinutes(),\r\n date.getUTCSeconds()\r\n )\r\n return utc\r\n },\r\n },\r\n}\r\n</script>\r\n<style scoped>\r\n.visualization-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n}\r\n\r\n.visualization-divider {\r\n display: block;\r\n flex: 1 1 100%;\r\n height: 0px;\r\n max-height: 0px;\r\n opacity: 1;\r\n transition: inherit;\r\n border-style: solid;\r\n border-width: thin 0 0 0;\r\n border-color: rgba(0, 0, 0, 0.12);\r\n margin: 0;\r\n}\r\n\r\n.visualization-divider.vertical {\r\n align-self: stretch;\r\n border-width: 0 thin 0 0;\r\n display: inline-flex;\r\n height: inherit;\r\n margin-left: -1px;\r\n max-height: 100%;\r\n max-width: 0px;\r\n vertical-align: text-bottom;\r\n width: 0px;\r\n}\r\n\r\n.visualization-card {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n width: 100%;\r\n transition-property: box-shadow, opacity, -webkit-box-shadow;\r\n overflow-wrap: break-word;\r\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\r\n}\r\n\r\n.visualization-justify-center,\r\n/deep/ .visualization-justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.visualization-align-center {\r\n align-items: center;\r\n}\r\n\r\n#visualization-container {\r\n max-width: 100% !important;\r\n margin: 0 auto !important;\r\n height: 100%;\r\n border-bottom: none;\r\n}\r\n#visualization-container > .card {\r\n border-radius: 0 !important;\r\n font-size: 12px;\r\n width: 100%;\r\n box-shadow: none;\r\n height: 100%;\r\n}\r\n\r\n#command-bar,\r\n#info-bar {\r\n background-color: #f5f5f5;\r\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n}\r\n#command-bar button {\r\n width: 42px;\r\n height: 36px;\r\n border: none;\r\n background: none;\r\n}\r\n\r\n#command-bar button:hover {\r\n cursor: pointer;\r\n background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n#command-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#command-bar {\r\n padding: 0 !important;\r\n}\r\n\r\n#info-bar {\r\n padding: 4px;\r\n font-size: 14px;\r\n position: relative;\r\n}\r\n\r\n.settings-container {\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.settings-container > * {\r\n margin: 0 2px;\r\n cursor: pointer;\r\n}\r\n\r\n#info-bar svg {\r\n font-size: 16px;\r\n}\r\n\r\n#info-bar .divider {\r\n margin: 0 8px;\r\n}\r\n\r\nsvg:focus {\r\n border: none;\r\n}\r\n\r\n.visualization-card {\r\n border-left: 8px solid #eee;\r\n}\r\n\r\n.active-tab {\r\n border-left: 8px solid var(--visualization-primary) !important;\r\n border-image-slice: 1;\r\n}\r\n\r\n[id^='frame-'] {\r\n padding: 1px;\r\n display: flex;\r\n flex-flow: column;\r\n}\r\n\r\n.tooltip {\r\n display: block !important;\r\n z-index: 10000;\r\n}\r\n\r\n.tooltip .tooltip-inner {\r\n background: var(--visualization-primary);\r\n color: white;\r\n border-radius: 16px;\r\n padding: 5px 10px 4px;\r\n}\r\n\r\n.tooltip .tooltip-arrow {\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n position: absolute;\r\n margin: 5px;\r\n border-color: var(--visualization-primary);\r\n z-index: 1;\r\n}\r\n\r\n.tooltip[x-placement^='top'] {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='top'] .tooltip-arrow {\r\n border-width: 5px 5px 0 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n bottom: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] {\r\n margin-top: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\r\n border-width: 0 5px 5px 5px;\r\n border-left-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-top-color: transparent !important;\r\n top: -5px;\r\n left: calc(50% - 5px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.tooltip[x-placement^='right'] {\r\n margin-left: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='right'] .tooltip-arrow {\r\n border-width: 5px 5px 5px 0;\r\n border-left-color: transparent !important;\r\n border-top-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n left: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip[x-placement^='left'] {\r\n margin-right: 5px;\r\n}\r\n\r\n.tooltip[x-placement^='left'] .tooltip-arrow {\r\n border-width: 5px 0 5px 5px;\r\n border-top-color: transparent !important;\r\n border-right-color: transparent !important;\r\n border-bottom-color: transparent !important;\r\n right: -5px;\r\n top: calc(50% - 5px);\r\n margin-left: 0;\r\n margin-right: 0;\r\n}\r\n\r\n.tooltip.popover .popover-inner {\r\n background: #f9f9f9;\r\n color: black;\r\n padding: 24px;\r\n border-radius: 5px;\r\n box-shadow: 0 5px 30px rgba(black, 0.1);\r\n}\r\n\r\n.tooltip.popover .popover-arrow {\r\n border-color: #f9f9f9;\r\n}\r\n\r\n.tooltip[aria-hidden='true'] {\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.15s, visibility 0.15s;\r\n}\r\n\r\n.tooltip[aria-hidden='false'] {\r\n visibility: visible;\r\n opacity: 1;\r\n transition: opacity 0.15s;\r\n}\r\n</style>\r\n"]}, media: undefined });
2549
2558
 
2550
2559
  };
2551
2560
  /* scoped */
2552
- const __vue_scope_id__$3 = "data-v-355e10a1";
2561
+ const __vue_scope_id__$3 = "data-v-2fccbf33";
2553
2562
  /* module identifier */
2554
2563
  const __vue_module_identifier__$3 = undefined;
2555
2564
  /* functional template */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@twab/visualization",
3
- "version": "1.6.5",
3
+ "version": "1.6.6",
4
4
  "main": "dist/visualization.js",
5
5
  "files": [
6
6
  "dist"