@twab/visualization 0.9.5 → 0.9.6

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@twab/visualization",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "main": "dist/visualization.umd.js",
   "files": [
     "dist"
   ],
   "scripts": {
     "serve": "vue-cli-service serve example/main.js",
-    "build": "vue-cli-service build --target lib --name visualization src/index.js"
+    "build": "vue-cli-service build --target lib --name visualization --format umd src/index.js"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
@@ -15,7 +15,6 @@
     "@fortawesome/vue-fontawesome": "^2.0.10",
     "axios": "^1.5.1",
     "core-js": "^3.8.3",
-    "file-loader": "^6.2.0",
     "i18next": "^23.6.0",
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-vue": "^1.1.0",
@@ -27,22 +26,25 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@rollup/plugin-babel": "^6.0.4",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "bili": "^5.0.5",
     "deepmerge": "^4.3.1",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "rollup": "^2.79.1",
+    "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-vue2": "^0.8.1",
     "sass": "~1.32",
     "sass-loader": "^13.3.2",
     "vue-global-events": "^1.2.1",
+    "vue-loader": "^15.11.1",
     "vue-template-compiler": "^2.6.14"
   },
-  "babel": {
-    "presets": [
-      "@babel/preset-env"
-    ]
-  },
   "eslintConfig": {
     "root": true,
     "env": {
@@ -52,9 +54,6 @@
       "plugin:vue/essential",
       "eslint:recommended"
     ],
-    "parserOptions": {
-      "parser": "@babel/eslint-parser"
-    },
     "rules": {
       "vue/multi-word-component-names": "off"
     }

package/dist/css/15.90e920d4.css

@@ -1,340 +0,0 @@
-
-.frame-container > div[data-v-20a23fbe] {
-  max-height: 100%;
-}
-.frame-container[data-v-20a23fbe] {
-  background-color: black;
-  display: flex;
-  justify-content: center;
-}
-.frame-content[data-v-20a23fbe],
-.dummy-frame[data-v-20a23fbe] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.frame-content video[data-v-20a23fbe] {
-  flex-grow: 1;
-  -o-object-fit: fill;
-     object-fit: fill;
-  z-index: 0;
-}
-.overlay[data-v-20a23fbe] {
-  width: 100%;
-  height: 100%;
-  z-index: 5;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 4px solid transparent;
-}
-.active .overlay[data-v-20a23fbe] {
-  border-color: var(--visualization-primary);
-}
-.between-time .overlay[data-v-20a23fbe] {
-  border-top-color: var(--visualization-secondary);
-}
-.between-time.active .overlay[data-v-20a23fbe] {
-  border-color: var(--visualization-secondary);
-}
-.initial-time .overlay[data-v-20a23fbe] {
-  border-top-color: var(--visualization-start);
-}
-.initial-time.active .overlay[data-v-20a23fbe] {
-  border-color: var(--visualization-start);
-}
-.end-time .overlay[data-v-20a23fbe] {
-  border-top-color: var(--visualization-end);
-}
-.end-time.active .overlay[data-v-20a23fbe] {
-  border-color: var(--visualization-end);
-}
-.initial-time.end-time .overlay[data-v-20a23fbe] {
-  border-top-color: var(--visualization-start);
-  border-bottom-color: var(--visualization-end);
-}
-.initial-time.end-time.active .overlay[data-v-20a23fbe] {
-  border-top-color: var(--visualization-start);
-  border-left-color: var(--visualization-start);
-  border-bottom-color: var(--visualization-end);
-  border-right-color: var(--visualization-end);
-}
-
-
-#progress[data-v-7fe6f244] {
-  position: relative;
-  cursor: pointer;
-  width: 80%;
-  height: 15px;
-  background-color: #dfdfdf;
-  margin: 5px auto;
-  border-radius: 6px;
-}
-.progressBar[data-v-7fe6f244] {
-  display: absolute;
-  height: 15px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: var(--visualization-secondary);
-  z-index: 2;
-  width: 50%;
-  border-radius: inherit;
-}
-.progressBar[data-v-7fe6f244]::after {
-  content: '';
-  width: 17px;
-  height: 17px;
-  position: absolute;
-  top: -1px;
-  right: -8.5px;
-  border-radius: 50%;
-  background-color: var(--visualization-primary);
-  z-index: 3;
-}
-.progressLabel[data-v-7fe6f244] {
-  z-index: 4;
-  margin: 0 auto;
-  font-weight: bold;
-  line-height: 17px;
-  font-size: 14px;
-  text-shadow: -1px 0 #dfdfdf, 0 1px #dfdfdf, 1px 0 #dfdfdf, 0 -1px #dfdfdf;
-
-  -webkit-user-select: none;
-
-     -moz-user-select: none;
-
-          user-select: none;
-}
-
-
-dialog[data-v-9f47e4d0] {
-  max-width: 60vw;
-  /* padding: 12px; */
-  border: none;
-  background: white;
-  border-radius: 6px;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translateY(-50%) translateX(-50%);
-}
-
-.visualization-row {
-  display: flex;
-  flex-wrap: wrap;
-  flex: 1 1 auto;
-}
-.visualization-col {
-  flex-basis: 0;
-  flex-grow: 1;
-  max-width: 100%;
-  padding: 12px;
-}
-.visualization-divider {
-  display: block;
-  flex: 1 1 100%;
-  height: 0px;
-  max-height: 0px;
-  opacity: 1;
-  transition: inherit;
-  border-style: solid;
-  border-width: thin 0 0 0;
-  border-color: rgba(0, 0, 0, 0.12);
-  margin: 0;
-}
-.visualization-divider.vertical {
-  align-self: stretch;
-  border-width: 0 thin 0 0;
-  display: inline-flex;
-  height: inherit;
-  margin-left: -1px;
-  max-height: 100%;
-  max-width: 0px;
-  vertical-align: text-bottom;
-  width: 0px;
-}
-.visualization-card {
-  flex-basis: 0;
-  flex-grow: 1;
-  max-width: 100%;
-  padding: 12px;
-  width: 100%;
-  transition-property: box-shadow, opacity;
-  overflow-wrap: break-word;
-  /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);*/
-}
-.visualization-justify-center {
-  justify-content: center;
-}
-.visualization-align-center {
-  align-items: center;
-}
-#visualization-container {
-  max-width: 100% !important;
-  margin: 0 auto !important;
-  height: 100%;
-  border-bottom: none;
-}
-#visualization-container > .card {
-  border-radius: 0 !important;
-  font-size: 12px;
-  width: 100%;
-  box-shadow: none;
-  height: 100%;
-}
-#command-bar,
-#info-bar {
-  background-color: #f5f5f5;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);
-}
-#command-bar button {
-  width: 42px;
-  height: 36px;
-  border: none;
-  background: none;
-}
-#command-bar button:hover {
-  cursor: pointer;
-  background: rgba(0, 0, 0, 0.12);
-}
-#command-bar svg {
-  font-size: 16px;
-}
-#command-bar {
-  padding: 0 !important;
-}
-#info-bar {
-  padding: 4px;
-  font-size: 14px;
-  position: relative;
-}
-.settings-container {
-  position: absolute;
-  right: 14px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.settings-container > * {
-  margin: 0 2px;
-  cursor: pointer;
-}
-#info-bar svg {
-  font-size: 16px;
-}
-#info-bar .divider {
-  margin: 0 8px;
-}
-svg:focus {
-  border: none;
-}
-.visualization-card {
-  border-left: 8px solid #eee;
-}
-.active-tab {
-  border-left: 8px solid var(--visualization-primary) !important;
-  border-image-slice: 1;
-}
-[id^='frame-'] {
-  padding: 1px;
-  display: flex;
-  flex-flow: column;
-}
-.tooltip {
-  display: block !important;
-  z-index: 10000;
-}
-.tooltip .tooltip-inner {
-  background: var(--visualization-primary);
-  color: white;
-  border-radius: 16px;
-  padding: 5px 10px 4px;
-}
-.tooltip .tooltip-arrow {
-  width: 0;
-  height: 0;
-  border-style: solid;
-  position: absolute;
-  margin: 5px;
-  border-color: var(--visualization-primary);
-  z-index: 1;
-}
-.tooltip[x-placement^='top'] {
-  margin-bottom: 5px;
-}
-.tooltip[x-placement^='top'] .tooltip-arrow {
-  border-width: 5px 5px 0 5px;
-  border-left-color: transparent !important;
-  border-right-color: transparent !important;
-  border-bottom-color: transparent !important;
-  bottom: -5px;
-  left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.tooltip[x-placement^='bottom'] {
-  margin-top: 5px;
-}
-.tooltip[x-placement^='bottom'] .tooltip-arrow {
-  border-width: 0 5px 5px 5px;
-  border-left-color: transparent !important;
-  border-right-color: transparent !important;
-  border-top-color: transparent !important;
-  top: -5px;
-  left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.tooltip[x-placement^='right'] {
-  margin-left: 5px;
-}
-.tooltip[x-placement^='right'] .tooltip-arrow {
-  border-width: 5px 5px 5px 0;
-  border-left-color: transparent !important;
-  border-top-color: transparent !important;
-  border-bottom-color: transparent !important;
-  left: -5px;
-  top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
-}
-.tooltip[x-placement^='left'] {
-  margin-right: 5px;
-}
-.tooltip[x-placement^='left'] .tooltip-arrow {
-  border-width: 5px 0 5px 5px;
-  border-top-color: transparent !important;
-  border-right-color: transparent !important;
-  border-bottom-color: transparent !important;
-  right: -5px;
-  top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
-}
-.tooltip.popover .popover-inner {
-  background: #f9f9f9;
-  color: black;
-  padding: 24px;
-  border-radius: 5px;
-  box-shadow: 0 5px 30px rgba(black, 0.1);
-}
-.tooltip.popover .popover-arrow {
-  border-color: #f9f9f9;
-}
-.tooltip[aria-hidden='true'] {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.15s, visibility 0.15s;
-}
-.tooltip[aria-hidden='false'] {
-  visibility: visible;
-  opacity: 1;
-  transition: opacity 0.15s;
-}
-
-
-

package/dist/css/895.5b845685.css

@@ -1 +0,0 @@
-.frame-container>div[data-v-20a23fbe]{max-height:100%}.frame-container[data-v-20a23fbe]{background-color:#000;display:flex;justify-content:center}.dummy-frame[data-v-20a23fbe],.frame-content[data-v-20a23fbe]{display:flex;align-items:center;justify-content:center}.frame-content video[data-v-20a23fbe]{flex-grow:1;-o-object-fit:fill;object-fit:fill;z-index:0}.overlay[data-v-20a23fbe]{width:100%;height:100%;z-index:5;position:absolute;top:0;left:0;border:4px solid transparent}.active .overlay[data-v-20a23fbe]{border-color:var(--visualization-primary)}.between-time .overlay[data-v-20a23fbe]{border-top-color:var(--visualization-secondary)}.between-time.active .overlay[data-v-20a23fbe]{border-color:var(--visualization-secondary)}.initial-time .overlay[data-v-20a23fbe]{border-top-color:var(--visualization-start)}.initial-time.active .overlay[data-v-20a23fbe]{border-color:var(--visualization-start)}.end-time .overlay[data-v-20a23fbe]{border-top-color:var(--visualization-end)}.end-time.active .overlay[data-v-20a23fbe]{border-color:var(--visualization-end)}.initial-time.end-time .overlay[data-v-20a23fbe]{border-top-color:var(--visualization-start);border-bottom-color:var(--visualization-end)}.initial-time.end-time.active .overlay[data-v-20a23fbe]{border-top-color:var(--visualization-start);border-left-color:var(--visualization-start);border-bottom-color:var(--visualization-end);border-right-color:var(--visualization-end)}#progress[data-v-7fe6f244]{position:relative;cursor:pointer;width:80%;height:15px;background-color:#dfdfdf;margin:5px auto;border-radius:6px}.progressBar[data-v-7fe6f244]{display:absolute;height:15px;position:absolute;top:0;left:0;background-color:var(--visualization-secondary);z-index:2;width:50%;border-radius:inherit}.progressBar[data-v-7fe6f244]:after{content:"";width:17px;height:17px;position:absolute;top:-1px;right:-8.5px;border-radius:50%;background-color:var(--visualization-primary);z-index:3}.progressLabel[data-v-7fe6f244]{z-index:4;margin:0 auto;font-weight:700;line-height:17px;font-size:14px;text-shadow:-1px 0 #dfdfdf,0 1px #dfdfdf,1px 0 #dfdfdf,0 -1px #dfdfdf;-webkit-user-select:none;-moz-user-select:none;user-select:none}dialog[data-v-9f47e4d0]{max-width:60vw;border:none;background:#fff;border-radius:6px;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%)}.visualization-row{display:flex;flex-wrap:wrap;flex:1 1 auto}.visualization-col{flex-basis:0;flex-grow:1;max-width:100%;padding:12px}.visualization-divider{display:block;flex:1 1 100%;height:0;max-height:0;opacity:1;transition:inherit;border-style:solid;border-width:thin 0 0 0;border-color:rgba(0,0,0,.12);margin:0}.visualization-divider.vertical{align-self:stretch;border-width:0 thin 0 0;display:inline-flex;height:inherit;margin-left:-1px;max-height:100%;max-width:0;vertical-align:text-bottom;width:0}.visualization-card{flex-basis:0;flex-grow:1;max-width:100%;padding:12px;width:100%;transition-property:box-shadow,opacity;overflow-wrap:break-word}.visualization-justify-center{justify-content:center}.visualization-align-center{align-items:center}#visualization-container{max-width:100%!important;margin:0 auto!important;height:100%;border-bottom:none}#visualization-container>.card{border-radius:0!important;font-size:12px;width:100%;box-shadow:none;height:100%}#command-bar,#info-bar{background-color:#f5f5f5;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}#command-bar button{width:42px;height:36px;border:none;background:none}#command-bar button:hover{cursor:pointer;background:rgba(0,0,0,.12)}#command-bar svg{font-size:16px}#command-bar{padding:0!important}#info-bar{padding:4px;font-size:14px;position:relative}.settings-container{position:absolute;right:14px;top:50%;transform:translateY(-50%)}.settings-container>*{margin:0 2px;cursor:pointer}#info-bar svg{font-size:16px}#info-bar .divider{margin:0 8px}svg:focus{border:none}.visualization-card{border-left:8px solid #eee}.active-tab{border-left:8px solid var(--visualization-primary)!important;border-image-slice:1}[id^=frame-]{padding:1px;display:flex;flex-flow:column}.tooltip{display:block!important;z-index:10000}.tooltip .tooltip-inner{background:var(--visualization-primary);color:#fff;border-radius:16px;padding:5px 10px 4px}.tooltip .tooltip-arrow{width:0;height:0;border-style:solid;position:absolute;margin:5px;border-color:var(--visualization-primary);z-index:1}.tooltip[x-placement^=top]{margin-bottom:5px}.tooltip[x-placement^=top] .tooltip-arrow{border-width:5px 5px 0 5px;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;bottom:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=bottom]{margin-top:5px}.tooltip[x-placement^=bottom] .tooltip-arrow{border-width:0 5px 5px 5px;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important;top:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=right]{margin-left:5px}.tooltip[x-placement^=right] .tooltip-arrow{border-width:5px 5px 5px 0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important;left:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.tooltip[x-placement^=left]{margin-right:5px}.tooltip[x-placement^=left] .tooltip-arrow{border-width:5px 0 5px 5px;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;right:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.tooltip.popover .popover-inner{background:#f9f9f9;color:#000;padding:24px;border-radius:5px;box-shadow:0 5px 30px rgba(black,.1)}.tooltip.popover .popover-arrow{border-color:#f9f9f9}.tooltip[aria-hidden=true]{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s}.tooltip[aria-hidden=false]{visibility:visible;opacity:1;transition:opacity .15s}