showControl(e, 'enter')}
onMouseLeave={(e) => showControl(e, 'leave')}
ref={controllerRef}
>
+
diff --git a/src/core/controls/index.scss b/src/core/controls/index.scss
index eef79c7..cdf6f86 100644
--- a/src/core/controls/index.scss
+++ b/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);
diff --git a/src/core/controls/index.tsx b/src/core/controls/index.tsx
index dd84e20..464575c 100644
--- a/src/core/controls/index.tsx
+++ b/src/core/controls/index.tsx
@@ -203,7 +203,7 @@ const Index = memo(function Index(props) {
};
return (
-
+
= memo(function Multiple({
return (
[setIsShow(true), e.stopPropagation()]}
onMouseLeave={(e) => [setIsShow(false), e.stopPropagation()]}
>
{multipleText}
-
+
{multipleList.map((item, index) => (
- [selectPlayRate(item.id), setIsShow(false)]}
diff --git a/src/core/controls/set.tsx b/src/core/controls/set.tsx
index 0d928de..95338b6 100644
--- a/src/core/controls/set.tsx
+++ b/src/core/controls/set.tsx
@@ -17,13 +17,16 @@ const Set: FC = memo(function Set({ switchChange }) {
const [isShow, setIsShow] = useState(false);
return (
[setIsShow(true), e.stopPropagation()]}
onMouseLeave={(e) => [setIsShow(false), e.stopPropagation()]}
>
-
-
+
+
-
[setIsShow(true), e.stopPropagation()]}
onMouseLeave={(e) => [setIsShow(false), e.stopPropagation()]}
>
diff --git a/src/core/index.scss b/src/core/index.scss
index 696b973..fc5bb5e 100644
--- a/src/core/index.scss
+++ b/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;
- }
-}
diff --git a/src/core/index.tsx b/src/core/index.tsx
index c39ac12..c8c7103 100644
--- a/src/core/index.tsx
+++ b/src/core/index.tsx
@@ -152,7 +152,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref
-
+
diff --git a/src/core/progress/index.scss b/src/core/progress/index.scss
index f3f8370..3774ce1 100644
--- a/src/core/progress/index.scss
+++ b/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;
}
}
}
diff --git a/src/core/progress/index.tsx b/src/core/progress/index.tsx
index fc6c181..a57ec75 100644
--- a/src/core/progress/index.tsx
+++ b/src/core/progress/index.tsx
@@ -171,7 +171,7 @@ const Index = memo(function Index(props) {
return (