Reza_ashrafi
/
JoL-player
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

optimize css

Browse Source
master
lgf 3 years ago
parent 367b24b45b
commit eaeadbc257
12 changed files with 93 additions and 296 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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

63
src/assets/css/mixin.scss
Unescape View File

@ -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;

70
src/core/controller/index.scss
Unescape View File

@ -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;
}
} }

8
src/core/controller/index.tsx
Unescape View File

@ -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>

105
src/core/controls/index.scss
Unescape View File

@ -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);

4
src/core/controls/index.tsx
Unescape View File

@ -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}

6
src/core/controls/multiple.tsx
Unescape View File

@ -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)]}

9
src/core/controls/set.tsx
Unescape View File

@ -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"

4
src/core/controls/volume.tsx
Unescape View File

@ -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">

55
src/core/index.scss
Unescape View File

@ -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;
}
}

2
src/core/index.tsx
Unescape View File

@ -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>

61
src/core/progress/index.scss
Unescape View File

@ -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;
} }
} }
} }

2
src/core/progress/index.tsx
Unescape View File

@ -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}>

Write Preview
Loading…
Cancel
Save