remove balloon.css

packages/artplayer/package.json

@@ -24,7 +24,6 @@
   },
   "homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
   "dependencies": {
-    "balloon-css": "^1.0.0",
     "option-validator": "^1.1.3",
     "screenfull": "^4.2.0"
   }

packages/artplayer/src/index.js

@@ -1,5 +1,4 @@
 import './style';
-import 'balloon-css/balloon.min.css';
 import validator from 'option-validator';
 import Emitter from './emitter';
 import * as utils from './utils';

packages/artplayer/src/style/balloon.scss

@@ -0,0 +1,123 @@
+// https://github.com/kazzkiq/balloon.css
+// 1.0.3
+
+//
+// Variables
+// -----------------------------------------
+
+$balloon-bg: fade-out(#101010, 0.05) !default;
+$balloon-base-size: 12px !default;
+$balloon-arrow-size: 5px !default;
+$balloon-move: 4px !default;
+
+//
+// Mixins
+// -----------------------------------------
+
+@mixin arrow-down() {
+    width: 0;
+    height: 0;
+    border: $balloon-arrow-size solid transparent;
+    border-top-color: var(--balloon-color);
+}
+
+@mixin base-effects() {
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.18s ease-out 0.18s;
+}
+
+@mixin normalized-text() {
+    text-indent: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+        'Helvetica Neue', sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    text-shadow: none;
+    font-size: var(--balloon-font-size);
+}
+
+//
+// Styles
+// -----------------------------------------
+
+:root {
+    --balloon-color: #{$balloon-bg};
+    --balloon-font-size: #{$balloon-base-size};
+    --balloon-move: #{$balloon-move};
+}
+
+// IE 11 button bugfix
+button[aria-label] {
+    &[data-balloon-pos] {
+        overflow: visible;
+    }
+}
+
+[aria-label] {
+    &[data-balloon-pos] {
+        position: relative; // alt. absolute or fixed
+
+        // Fixing iOS Safari event issue.
+        // More info at: https://goo.gl/w8JF4W
+        cursor: pointer;
+
+        &:after {
+            @include base-effects();
+            @include normalized-text();
+
+            background: var(--balloon-color);
+            border-radius: 2px;
+            color: #fff;
+            content: attr(aria-label);
+            padding: 0.5em 1em;
+            position: absolute;
+            white-space: nowrap;
+            line-height: 1.2;
+            z-index: 10;
+        }
+
+        &:before {
+            @include arrow-down();
+            @include base-effects();
+
+            content: '';
+            position: absolute;
+            z-index: 10;
+        }
+
+        &:hover {
+            &:before,
+            &:after {
+                opacity: 1;
+                pointer-events: none;
+            }
+        }
+
+        &[data-balloon-pos='up'] {
+            &:after {
+                bottom: 100%;
+                left: 50%;
+                margin-bottom: $balloon-arrow-size + 5px;
+                transform: translate(-50%, var(--balloon-move));
+                transform-origin: top;
+            }
+            &:before {
+                bottom: 100%;
+                left: 50%;
+                transform: translate(-50%, var(--balloon-move));
+                transform-origin: top;
+            }
+
+            &:hover {
+                &:after {
+                    transform: translate(-50%, 0);
+                }
+
+                &:before {
+                    transform: translate(-50%, 0);
+                }
+            }
+        }
+    }
+}

packages/artplayer/src/style/index.js

@@ -16,3 +16,4 @@ import './fullscreenWeb.scss';
 import './pip.scss';
 import './autoSize.scss';
 import './flip.scss';
+import './balloon.scss';

packages/artplayer/src/utils/index.js

@@ -144,7 +144,7 @@ export function inverseClass(target, className) {
 }
 
 export function tooltip(target, msg, pos = 'up') {
-    target.setAttribute('data-balloon', msg);
+    target.setAttribute('aria-label', msg);
     target.setAttribute('data-balloon-pos', pos);
 }