optimize css

src/assets/css/mixin.scss

@@ -5,78 +5,27 @@
   justify-content: $jc;
   align-items: center;
 }
-
-@mixin flexItem($n) {
-  box-sizing: border-box;
-  flex-grow: $n;
-}
-
 @mixin style($size, $color, $bold: normal) {
   font-size: $size;
   color: $color;
   font-weight: $bold;
 }
-
 @mixin wh($w, $h) {
   width: $w;
   height: $h;
 }
-
-@mixin center() {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-@mixin textOverflow($n) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  /* autoprefixer: off */ //针对打包不显示的问题
-  -webkit-box-orient: vertical;
-  /* autoprefixer: on */
-  -webkit-line-clamp: $n;
-}
-
-@mixin cicle($size: 8px) {
-  border-radius: $size;
+@mixin position($type, $top, $right, $bottom, $left) {
+  position: $type;
+  left: $left;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
 }
-
-@mixin lh($h) {
-  line-height: $h;
-}
-
 @mixin fixed($t, $l) {
   position: fixed;
   top: $t;
   left: $l;
 }
-
-@mixin textAlign($h) {
-  height: $h;
-  line-height: $h;
-  text-align: center;
-  vertical-align: middle;
-}
-
-@mixin auto($l, $r) {
-  margin: $l auto $r auto;
-}
-@mixin scroll($w, $h) {
-  &::-webkit-scrollbar {
-    /*滚动条整体样式*/
-    @include wh($w, $h); /*高宽分别对应横竖滚动条的尺寸*/
-  }
-  &::-webkit-scrollbar-thumb {
-    /*滚动条里面小方块*/
-    border-radius: 5px;
-    background: rgba(0, 0, 0, 0.15);
-  }
-  &::-webkit-scrollbar-track {
-    /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px #fff;
-  }
-}
 @keyframes show {
   0% {
     opacity: 0;

src/core/controller/index.scss

@@ -1,77 +1,31 @@
-.controller-container {
-  // width: 740px;
-  // height: 420px;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
+@import 'src/assets/css/mixin.scss';
+.JoL-controller-container {
+  @include wh(100%, 100%);
+  @include position(absolute, auto, auto, 0, 50%);
   transform: translateX(-50%);
   z-index: 3;
   cursor: pointer;
-  .click-to-play-or-pause {
-    width: 100%;
-    height: calc(100% - 47px);
-    position: absolute;
+  .JoL-click-to-play-or-pause {
+    @include wh(100%, calc(100% - 47px));
+    @include position(absolute, 0, auto, auto, 0);
     z-index: 101;
-    top: 0;
-    left: 0;
     outline: none;
   }
   .play-icon {
     display: inline-block;
-    font-size: 24px;
-    position: absolute;
+    @include style(24px, #fff);
+    @include wh(40px, 40px);
+    @include position(absolute, auto, 30px, 60px, auto);
     z-index: 100;
-    bottom: 60px;
-    right: 30px;
-    width: 40px;
-    height: 40px;
     line-height: 40px;
     text-align: center;
     border-radius: 30%;
-    color: #fff;
     opacity: 0.7;
   }
-  .progress-and-controls-wrap {
+  .JoL-progress-and-controls-wrap {
     width: calc(100% - 26px);
-    position: absolute;
+    @include position(absolute, auto, auto, 0, 50%);
     z-index: 102;
-    bottom: 0;
-    left: 50%;
     transform: translateX(-50%);
   }
-  .volume-show-box {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    margin: auto;
-    width: 80px;
-    height: 40px;
-    text-align: center;
-    line-height: 40px;
-    background-color: rgba(255, 255, 255, 0.5);
-    border-radius: 4px;
-    opacity: 0;
-    .volume-percent {
-      padding-left: 10px;
-    }
-  }
-  .show-animation {
-    animation: show-volume-box 1s ease;
-  }
-}
-
-@keyframes show-volume-box {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
 }

src/core/controller/index.tsx

@@ -76,14 +76,14 @@ const Index = memo(function Index(props) {
 
   return (
     <div
-      className="controller-container"
+      className="JoL-controller-container"
       onMouseEnter={(e) => showControl(e, 'enter')}
       onMouseLeave={(e) => showControl(e, 'leave')}
       ref={controllerRef}
     >
       <div
-        id="play-or-pause-mask"
-        className="click-to-play-or-pause"
+        // id="play-or-pause-mask"
+        className="JoL-click-to-play-or-pause"
         onMouseEnter={hiddleCursor}
         onMouseLeave={clearTimer}
         onClick={handleChangePlayState}
@@ -96,7 +96,7 @@ const Index = memo(function Index(props) {
           className="iconfont play-icon"
         />
       )}
-      <div className="progress-and-controls-wrap">
+      <div className="JoL-progress-and-controls-wrap">
         <Progress />
         <Controls />
       </div>

src/core/controls/index.scss

@@ -1,20 +1,14 @@
 @import 'src/assets/css/mixin.scss';
 .clientFullScreen {
-  position: fixed !important;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: auto !important;
-  height: auto !important;
+  @include wh(auto !important, auto !important);
+  @include position(fixed !important, 0, 0, 0, 0);
   z-index: 100000;
 }
-.controls-container {
+.JoL-controls-container {
   padding: 0 5px;
   box-sizing: border-box;
   transition: all 0.5s;
-  width: 100%;
-  height: 42px;
+  @include wh(100%, 42px);
   color: rgb(238, 238, 238);
   position: relative;
   // z-index: 10020;
@@ -25,11 +19,8 @@
   }
   &:after {
     content: '';
-    width: calc(100% + 26px);
-    height: 100%;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
+    @include wh(calc(100% + 26px), 100%);
+    @include position(absolute, auto, auto, 0, 50%);
     z-index: -1;
     transform: translateX(-50%);
     background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
@@ -43,26 +34,19 @@
       padding: 0 10px;
     }
   }
-  .multifunction {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
+  .JoL-multifunction {
+    @include wh(100%, 100%);
+    @include flexContainer(flex-end);
     text-align: center;
     line-height: 42px;
     &-multiple {
       padding: 0 10px;
       position: relative;
       &-container {
-        position: absolute;
         transition: all 0.5s;
-        top: -12px;
-        left: 50%;
+        @include position(absolute, -12px, auto, auto, 50%);
         transform: translateX(-50%);
-        // display: none;
-        height: 70px;
-        width: 100%;
+        @include wh(100%, 70px);
         &:hover {
           .multifunction-multiple-layer {
             animation: show 0.3s ease;
@@ -71,10 +55,8 @@
       }
       &-layer {
         list-style: none;
-        position: absolute;
         line-height: normal;
-        bottom: 65px;
-        left: 50%;
+        @include position(absolute, auto, auto, 65px, 50%);
         transform: translateX(-50%);
         border-radius: 3px;
         background-color: rgba(0, 0, 0, 0.7);
@@ -103,14 +85,9 @@
         }
       }
       &-container {
-        position: absolute;
-        transition: all 0.5s;
-        left: 50%;
+        @include wh(100%, 70px);
+        @include position(absolute, -12px, auto, 0, 50%);
         transform: translateX(-50%);
-        top: -12px;
-        // display: none;
-        height: 70px;
-        width: 100%;
         &:hover {
           .volume-box {
             animation: show 0.3s ease;
@@ -121,17 +98,12 @@
         line-height: normal;
         position: absolute;
         bottom: 65px;
-        // left: 50%;
-        // transform: translateX(-50%);
-        // margin-left: -16px;
-        width: 40px;
-        height: 120px;
+        @include wh(40px, 120px);
         padding-bottom: 8px;
         border-radius: 3px;
         background-color: rgba(0, 0, 0, 0.7);
         .current-volume {
-          width: 100%;
-          height: 24px;
+          @include wh(100%, 24px);
           margin: 0;
           line-height: 24px;
           text-align: center;
@@ -144,44 +116,29 @@
           }
         }
         .volume-slider {
-          width: 100%;
-          height: 96px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
+          @include wh(100%, 96px);
+          @include flexContainer(center);
           .volume-slider-bg {
-            width: 2px;
-            height: 86px;
+            @include wh(2px, 86px);
             border-radius: 1px;
             background-color: #fff;
             position: relative;
             .volume-slider-op {
-              position: absolute;
+              @include wh(100%, 100%);
+              @include position(absolute, auto, auto, 0, 0);
               z-index: 1;
-              bottom: 0;
-              left: 0;
-              width: 100%;
-              height: 100%;
               border-radius: 1px;
-              // background-color: #fbc100;
               .volume-slider-op-circle {
-                position: absolute;
-                top: -(10px/2);
-                left: 50%;
+                @include wh(10px, 10px);
+                @include position(absolute, -(10px/2), auto, auto, 50%);
                 margin-left: -(10px/2);
-                width: 10px;
-                height: 10px;
                 border-radius: 50%;
-                // background-color: #fbc100;
               }
             }
             .volume-slider-mirror {
-              position: absolute;
+              @include wh(32px, calc(100% + 5px));
+              @include position(absolute, auto, auto, 0, -15px);
               z-index: 2;
-              bottom: 0;
-              left: -15px;
-              width: 32px;
-              height: calc(100% + 5px);
             }
           }
         }
@@ -191,14 +148,10 @@
       padding: 0 10px;
       position: relative;
       &-container {
-        position: absolute;
+        @include wh(100%, 70px);
+        @include position(absolute, -12px, auto, 0, 50%);
         transition: all 0.5s;
-        left: 50%;
         transform: translateX(-50%);
-        top: -12px;
-        // display: none;
-        height: 70px;
-        width: 100%;
       }
       &:hover {
         z-index: 1000000000;
@@ -209,9 +162,7 @@
       &-layer {
         line-height: normal;
         list-style: none;
-        position: absolute;
-        bottom: 65px;
-        left: 50%;
+        @include position(absolute, auto, auto, 65px, 50%);
         transform: translateX(-50%);
         border-radius: 3px;
         background-color: rgba(0, 0, 0, 0.7);

src/core/controls/index.tsx

@@ -203,7 +203,7 @@ const Index = memo(function Index(props) {
   };
   return (
     <div
-      className="controls-container"
+      className="JoL-controls-container"
       style={{ opacity: reviceProps.videoFlow!.isControl ? '1' : '0' }}
     >
       <MonitorComponent
@@ -212,7 +212,7 @@ const Index = memo(function Index(props) {
         currentTime={secondsToMinutesAndSecondes(currentTime)}
         totalTime={secondsToMinutesAndSecondes(duration)}
       />
-      <div className="multifunction">
+      <div className="JoL-multifunction">
         <MultipleComponent
           multipleText={multipleText}
           multiple={controlsState.multiple}

src/core/controls/multiple.tsx

@@ -22,16 +22,16 @@ const Multiple: FC<MultipleType> = memo(function Multiple({
 
   return (
     <div
-      className="multifunction-multiple"
+      className="JoL-multifunction-multiple"
       onMouseEnter={(e) => [setIsShow(true), e.stopPropagation()]}
       onMouseLeave={(e) => [setIsShow(false), e.stopPropagation()]}
     >
       <p>{multipleText}</p>
       <div
-        className="multifunction-multiple-container"
+        className="JoL-multifunction-multiple-container"
         style={{ display: isShow ? 'block' : 'none' }}
       >
-        <ul className="multifunction-multiple-layer">
+        <ul className="JoL-multifunction-multiple-layer">
           {multipleList.map((item, index) => (
             <li
               onClick={() => [selectPlayRate(item.id), setIsShow(false)]}

src/core/controls/set.tsx

@@ -17,13 +17,16 @@ const Set: FC<SetType> = memo(function Set({ switchChange }) {
   const [isShow, setIsShow] = useState<boolean>(false);
   return (
     <div
-      className="multifunction-set"
+      className="JoL-multifunction-set"
       onMouseEnter={(e) => [setIsShow(true), e.stopPropagation()]}
       onMouseLeave={(e) => [setIsShow(false), e.stopPropagation()]}
     >
       <Broadcast iconClass="set" fill="#fff" />
-      <div className="multifunction-set-container" style={{ display: isShow ? 'block' : 'none' }}>
-        <ul className="multifunction-set-layer">
+      <div
+        className="JoL-multifunction-set-container"
+        style={{ display: isShow ? 'block' : 'none' }}
+      >
+        <ul className="JoL-multifunction-set-layer">
           <li>
             <Switch
               sole="lights"

src/core/controls/volume.tsx

@@ -29,13 +29,13 @@ const Volume = function Volume(
 
   return (
     <div
-      className="multifunction-volume"
+      className="JoL-multifunction-volume"
       onMouseEnter={(e) => [setIsShow(true), e.stopPropagation()]}
       onMouseLeave={(e) => [setIsShow(false), e.stopPropagation()]}
     >
       <Broadcast iconClass="volume" fill="#fff" fontSize={'20px'} />
       <div
-        className="multifunction-volume-container"
+        className="JoL-multifunction-volume-container"
         style={{ display: isShow ? 'block' : 'none' }}
       >
         <div className="volume-box">

src/core/index.scss

@@ -1,73 +1,38 @@
+@import 'src/assets/css/mixin.scss';
 .JoL-player-container {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  // width: 740px;
-  // height: 420px;
   margin: 0;
   box-sizing: border-box;
   position: relative;
   .JoL-player {
-    width: 100%;
-    height: 100%;
+    @include wh(100%, 100%);
     background-color: #000;
-    position: absolute;
-    top: 0;
-    left: 0;
+    @include position(absolute, 0, auto, auto, 0);
     z-index: 1;
   }
-  .light-off-mask {
-    position: fixed;
-    left: 0;
-    top: 0;
+  .JoL-light-off-mask {
+    @include wh(100vw, 100vh);
+    @include position(fixed, 0, auto, auto, 0);
     z-index: 0;
-    width: 100vw;
-    height: 100vh;
     background-color: rgba(0, 0, 0, 0.9);
     display: none;
   }
   .video-no-useful-tip,
   .buffering-animation {
-    position: absolute;
-    left: 0;
-    top: 50%;
+    @include wh(100%, 100px);
+    @include position(fixed, 50%, auto, auto, 0);
+    @include style(16px, #fff);
     margin-top: -50px;
-    width: 100%;
-    height: 100px;
-    font-size: 16px;
     text-align: center;
     line-height: 100px;
-    color: #fff;
     z-index: 99;
   }
-  .buffering-animation {
-    .bufferring-dot {
-      display: inline-block;
-      vertical-align: middle;
-      width: 100px;
-      line-height: 100px;
-      animation: dot-ami 1s infinite;
-      overflow: hidden;
-    }
-  }
   .player-loading {
-    position: absolute;
-    top: 50%;
-    left: 50%;
+    @include position(absolute, 50%, auto, auto, 50%);
     z-index: 30;
     transform: translate(-50%, -50%);
   }
 }
-
-@keyframes dot-ami {
-  0% {
-    width: 4px;
-  }
-  50% {
-    width: 8px;
-  }
-  100% {
-    width: 12px;
-  }
-}

src/core/index.tsx

@@ -152,7 +152,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
 
   return (
     <figure className="JoL-player-container" ref={videoContainerRef}>
-      <div className="light-off-mask" ref={lightOffMaskRef}></div>
+      <div className="JoL-light-off-mask" ref={lightOffMaskRef}></div>
       <video className="JoL-player" ref={videoRef} poster={poster ? poster : undefined}>
         {returnVideoSource}
       </video>

src/core/progress/index.scss

@@ -1,3 +1,4 @@
+@import 'src/assets/css/mixin.scss';
 @keyframes example {
   from {
     opacity: 0;
@@ -18,66 +19,48 @@
     transform: scale(1.5);
   }
 }
-.progress-container {
+.JoL-progress-container {
   transition: all 0.5s;
   width: 100%;
   .progress-bg {
     transition: all 0.3s;
-    width: 100%;
-    height: 5px;
+    @include wh(100%, 5px);
     background: rgba(255, 255, 255, 0.2);
     border-radius: 2px;
     position: relative;
     .progress-buffered {
-      position: absolute;
+      @include wh(0%, 100%);
+      @include position(absolute, 0, auto, auto, 0);
       z-index: 1;
-      top: 0;
-      left: 0;
-      width: 0%;
-      height: 100%;
       border-radius: 2px;
       background: rgba(255, 255, 255, 0.5);
     }
     .progress-played {
-      position: absolute;
+      @include wh(0%, 100%);
+      @include position(absolute, 0, auto, auto, 0);
       z-index: 2;
-      top: 0;
-      left: 0;
-      width: 0%;
-      height: 100%;
       border-radius: 2px;
-      // background: #fbc100;
       .progress-scrubber {
         transition: all 0.3s;
-        position: absolute;
-        right: -5px;
-        top: -50%;
+        @include wh(12px, 12px);
+        @include position(absolute, -50%, -5px, auto, auto);
         margin-top: -1px;
-        width: 12px;
-        height: 12px;
         border-radius: 50%;
-        // background-color: #fbc100;
       }
     }
     .progress-seek-mask {
-      position: absolute;
+      @include wh(100%, calc(100% + 6px));
+      @include position(absolute, -3px, auto, auto, 0);
       z-index: 100;
-      top: -3px;
-      left: 0;
-      width: 100%;
-      height: calc(100% + 6px);
       &:hover {
         cursor: pointer;
       }
     }
     .pointer {
-      position: absolute;
-      left: 714px;
-      top: 0;
+      @include position(absolute, 0, auto, auto, 714px);
       .top-triangle,
       .bottom-triangle {
-        width: 0;
-        height: 0;
+        @include wh(0, 0);
         position: absolute;
         border-right: 4px solid transparent;
         border-left: 4px solid transparent;
@@ -94,26 +77,18 @@
       }
     }
     .video-img-box {
-      position: absolute;
-      top: -120px;
-      left: 0px;
-      width: 169px;
-      height: 96px;
+      @include wh(169px, 96px);
+      @include position(absolute, -120px, auto, auto, 0);
       margin-left: calc(-169px / 2);
-      // background-color: aliceblue;
       .video-current-img {
-        width: 100%;
-        height: 100%;
+        @include wh(100%, 100%);
       }
       .current-time {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
+        @include position(absolute, auto, auto, 0, 50%);
+        @include style(12px, #fff);
         transform: translateX(-50%);
         background-color: #222222;
-        color: #fff;
         padding: 0 5px;
-        font-size: 12px;
       }
     }
   }

src/core/progress/index.tsx

@@ -171,7 +171,7 @@ const Index = memo(function Index(props) {
 
   return (
     <div
-      className="progress-container"
+      className="JoL-progress-container"
       style={{ opacity: reviceProps.videoFlow!.isControl ? '1' : '0' }}
     >
       <div className="progress-bg" ref={progressBgRef}>