Pull styling out out into it's own file
Also restores the CSS for vjs-overlay which I commented out previously for *some* reason (but I don't know why, and it doesn't seem to make a difference whether I comment it out or not)
This commit is contained in:
DispatchCommit
Sean Yesmunt
parent
d21a4fe8ab
commit
46f58c63c8
3 changed files with 158 additions and 158 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
/*.video-js {
|
.video-js {
|
||||||
$bottom: 3.5em;
|
$bottom: 3.5em;
|
||||||
$nudge: 5px;
|
$nudge: 5px;
|
||||||
$middle: 50%;
|
$middle: 50%;
|
||||||
|
|
@ -81,161 +81,4 @@
|
||||||
.vjs-no-flex .vjs-overlay-right {
|
.vjs-no-flex .vjs-overlay-right {
|
||||||
margin-top: $offset-v;
|
margin-top: $offset-v;
|
||||||
}
|
}
|
||||||
}*/
|
|
||||||
|
|
||||||
.video-js {
|
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
// Control Bar (container)
|
|
||||||
.vjs-control-bar {
|
|
||||||
background: none;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
content: '';
|
|
||||||
height: 5rem;
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(20, 20, 20, 0.45);
|
|
||||||
background: linear-gradient(0deg, rgba(0,0,0,.85) 10%, rgba(0,0,0,0) 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Progress Bar
|
|
||||||
.vjs-progress-control.vjs-control {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 1rem;
|
|
||||||
bottom: 90%;
|
|
||||||
|
|
||||||
// Circle play head
|
|
||||||
.vjs-play-progress::before {
|
|
||||||
transform: scale(0);
|
|
||||||
transition: transform .3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.vjs-play-progress::before {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Progress Slider
|
|
||||||
.vjs-slider {
|
|
||||||
margin: 0 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load progress color
|
|
||||||
.vjs-load-progress,
|
|
||||||
.vjs-load-progress div {
|
|
||||||
background-color: rgba(160, 160, 160, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Progress Bar Background
|
|
||||||
.vjs-slider {
|
|
||||||
background-color: rgba(60, 60, 60, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Primary Color Progress
|
|
||||||
.vjs-slider-bar {
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Inner Progress Bar
|
|
||||||
.vjs-play-progress {
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Spacer
|
|
||||||
.vjs-custom-control-spacer {
|
|
||||||
display: flex;
|
|
||||||
flex: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Transcoding menu
|
|
||||||
/*.vjs-tech {
|
|
||||||
height: auto !important;
|
|
||||||
position: absolute !important;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
// Menu size
|
|
||||||
.vjs-playback-rate .vjs-menu .vjs-menu-content {
|
|
||||||
width: 125%;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Volume slider
|
|
||||||
.vjs-volume-panel {
|
|
||||||
&.vjs-control {
|
|
||||||
transition: .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vjs-volume-control.vjs-volume-horizontal {
|
|
||||||
transition: .2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Tooltip
|
|
||||||
.vjs-mouse-display .vjs-time-tooltip {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tooltip
|
|
||||||
.video-js {
|
|
||||||
.vjs-progress-control{
|
|
||||||
.vjs-play-progress {
|
|
||||||
.vjs-time-tooltip {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Transitions control bar between active / inactive
|
|
||||||
.vjs-has-started {
|
|
||||||
.vjs-control-bar {
|
|
||||||
opacity: 1;
|
|
||||||
transition: .1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.vjs-user-inactive.vjs-playing {
|
|
||||||
.vjs-control-bar {
|
|
||||||
opacity: 0;
|
|
||||||
transition: .3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.vjs-user-active.vjs-playing {
|
|
||||||
.vjs-control-bar {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Button glow
|
|
||||||
.video-js {
|
|
||||||
.vjs-control,
|
|
||||||
.vjs-time-divider {
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
&:focus:before,
|
|
||||||
&:hover:before,
|
|
||||||
&:focus {
|
|
||||||
// Disable builtin button glow
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-gradient {
|
|
||||||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
156
ui/component/viewers/videoViewer/videojs.scss
Normal file
156
ui/component/viewers/videoViewer/videojs.scss
Normal file
|
|
@ -0,0 +1,156 @@
|
||||||
|
.video-js {
|
||||||
|
font-size: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// Control Bar (container)
|
||||||
|
.vjs-control-bar {
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
content: '';
|
||||||
|
height: 5rem;
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(20, 20, 20, 0.45);
|
||||||
|
background: linear-gradient(0deg, rgba(0,0,0,.85) 10%, rgba(0,0,0,0) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Progress Bar
|
||||||
|
.vjs-progress-control.vjs-control {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 1rem;
|
||||||
|
bottom: 90%;
|
||||||
|
|
||||||
|
// Circle play head
|
||||||
|
.vjs-play-progress::before {
|
||||||
|
transform: scale(0);
|
||||||
|
transition: transform .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.vjs-play-progress::before {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Progress Slider
|
||||||
|
.vjs-slider {
|
||||||
|
margin: 0 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load progress color
|
||||||
|
.vjs-load-progress,
|
||||||
|
.vjs-load-progress div {
|
||||||
|
background-color: rgba(160, 160, 160, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Progress Bar Background
|
||||||
|
.vjs-slider {
|
||||||
|
background-color: rgba(60, 60, 60, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Primary Color Progress
|
||||||
|
.vjs-slider-bar {
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inner Progress Bar
|
||||||
|
.vjs-play-progress {
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Spacer
|
||||||
|
.vjs-custom-control-spacer {
|
||||||
|
display: flex;
|
||||||
|
flex: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Transcoding menu
|
||||||
|
/*.vjs-tech {
|
||||||
|
height: auto !important;
|
||||||
|
position: absolute !important;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
// Menu size
|
||||||
|
.vjs-playback-rate .vjs-menu .vjs-menu-content {
|
||||||
|
width: 125%;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Volume slider
|
||||||
|
.vjs-volume-panel {
|
||||||
|
&.vjs-control {
|
||||||
|
transition: .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-volume-control.vjs-volume-horizontal {
|
||||||
|
transition: .2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Tooltip
|
||||||
|
.vjs-mouse-display .vjs-time-tooltip {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tooltip
|
||||||
|
.video-js {
|
||||||
|
.vjs-progress-control{
|
||||||
|
.vjs-play-progress {
|
||||||
|
.vjs-time-tooltip {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Transitions control bar between active / inactive
|
||||||
|
.vjs-has-started {
|
||||||
|
.vjs-control-bar {
|
||||||
|
opacity: 1;
|
||||||
|
transition: .1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vjs-user-inactive.vjs-playing {
|
||||||
|
.vjs-control-bar {
|
||||||
|
opacity: 0;
|
||||||
|
transition: .3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vjs-user-active.vjs-playing {
|
||||||
|
.vjs-control-bar {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Button glow
|
||||||
|
.video-js {
|
||||||
|
.vjs-control,
|
||||||
|
.vjs-time-divider {
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&:focus:before,
|
||||||
|
&:hover:before,
|
||||||
|
&:focus {
|
||||||
|
// Disable builtin button glow
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-gradient {
|
||||||
|
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
|
||||||
|
}
|
||||||
|
|
@ -13,6 +13,7 @@ import FileViewerEmbeddedEnded from 'web/component/fileViewerEmbeddedEnded';
|
||||||
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
|
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
|
||||||
import LoadingScreen from 'component/common/loading-screen';
|
import LoadingScreen from 'component/common/loading-screen';
|
||||||
import { addTheaterModeButton } from './internal/theater-mode';
|
import { addTheaterModeButton } from './internal/theater-mode';
|
||||||
|
import './videojs.scss';
|
||||||
|
|
||||||
const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
|
const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
|
||||||
const PLAY_TIMEOUT_LIMIT = 2000;
|
const PLAY_TIMEOUT_LIMIT = 2000;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue