optimize css

master
lgf 3 years ago
parent 367b24b45b
commit eaeadbc257
  1. 63
      src/assets/css/mixin.scss
  2. 70
      src/core/controller/index.scss
  3. 8
      src/core/controller/index.tsx
  4. 105
      src/core/controls/index.scss
  5. 4
      src/core/controls/index.tsx
  6. 6
      src/core/controls/multiple.tsx
  7. 9
      src/core/controls/set.tsx
  8. 4
      src/core/controls/volume.tsx
  9. 55
      src/core/index.scss
  10. 2
      src/core/index.tsx
  11. 61
      src/core/progress/index.scss
  12. 2
      src/core/progress/index.tsx

@ -5,78 +5,27 @@
justify-content: $jc; justify-content: $jc;
align-items: center; align-items: center;
} }
@mixin flexItem($n) {
box-sizing: border-box;
flex-grow: $n;
}
@mixin style($size, $color, $bold: normal) { @mixin style($size, $color, $bold: normal) {
font-size: $size; font-size: $size;
color: $color; color: $color;
font-weight: $bold; font-weight: $bold;
} }
@mixin wh($w, $h) { @mixin wh($w, $h) {
width: $w; width: $w;
height: $h; height: $h;
} }
@mixin position($type, $top, $right, $bottom, $left) {
@mixin center() { position: $type;
top: 50%; left: $left;
left: 50%; top: $top;
transform: translate(-50%, -50%); right: $right;
} bottom: $bottom;
@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 lh($h) {
line-height: $h;
}
@mixin fixed($t, $l) { @mixin fixed($t, $l) {
position: fixed; position: fixed;
top: $t; top: $t;
left: $l; 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 { @keyframes show {
0% { 0% {
opacity: 0; opacity: 0;

@ -1,77 +1,31 @@
.controller-container { @import 'src/assets/css/mixin.scss';
// width: 740px; .JoL-controller-container {
// height: 420px; @include wh(100%, 100%);
width: 100%; @include position(absolute, auto, auto, 0, 50%);
height: 100%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 3; z-index: 3;
cursor: pointer; cursor: pointer;
.click-to-play-or-pause { .JoL-click-to-play-or-pause {
width: 100%; @include wh(100%, calc(100% - 47px));
height: calc(100% - 47px); @include position(absolute, 0, auto, auto, 0);
position: absolute;
z-index: 101; z-index: 101;
top: 0;
left: 0;
outline: none; outline: none;
} }
.play-icon { .play-icon {
display: inline-block; display: inline-block;
font-size: 24px; @include style(24px, #fff);
position: absolute; @include wh(40px, 40px);
@include position(absolute, auto, 30px, 60px, auto);
z-index: 100; z-index: 100;
bottom: 60px;
right: 30px;
width: 40px;
height: 40px;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
border-radius: 30%; border-radius: 30%;
color: #fff;
opacity: 0.7; opacity: 0.7;
} }
.progress-and-controls-wrap { .JoL-progress-and-controls-wrap {
width: calc(100% - 26px); width: calc(100% - 26px);
position: absolute; @include position(absolute, auto, auto, 0, 50%);
z-index: 102; z-index: 102;
bottom: 0;
left: 50%;
transform: translateX(-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;
}
} }

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

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save